/* 4DUTY — nadpisania OpenCart / Bootstrap 3 pod tokeny makiety (DZIEŃ / NOC / NV).
   Bootstrap 3 jest ładowany tutaj jako warstwa kaskady „bs”: każda reguła makiety (4duty.css, bez warstwy)
   wygrywa z nim niezależnie od specyficzności, a Bootstrap dalej obsługuje siatkę i szablony OC (konto, kasa).
   Warstwa „bs-fix” cofa domyślne style Bootstrapa do zachowania przeglądarki, na którym powstała makieta.
   Reguły bez warstwy na dole stylują znaczniki OC (.container, .form-control, .table…) tokenami makiety. */
@import url("../../../javascript/bootstrap/css/bootstrap.min.css") layer(bs);
@layer bs, bs-fix;

@layer bs-fix {
  html{font-size:100%}
  body{background:var(--bg);color:var(--ink)}
  a:hover,a:focus{color:inherit;text-decoration:inherit}
  a:focus,.btn:focus,.btn:active:focus,.btn.active:focus{outline:revert}
  h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:bold;margin:0}
  h1{font-size:2em} h2{font-size:1.5em} h3{font-size:1.17em} h4{font-size:1em} h5{font-size:.83em} h6{font-size:.67em}
  p{margin:0}
  label{display:inline;max-width:none;margin:0;font-weight:inherit}
  legend{font-size:inherit;color:inherit;border:0;margin:0;line-height:inherit}
  small{font-size:smaller}
  table{border-collapse:separate}
  button,input,select,textarea{line-height:normal}
  /* klasy wspólne z makietą (.btn, .btn-primary, .navbar, .modal) */
  .btn{line-height:1.2;vertical-align:middle;margin:0;font-weight:750}
  .btn:hover,.btn:focus{color:inherit}
  .btn.active,.btn:active{box-shadow:none}
  .btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
  .navbar{min-height:0;margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0}
  .navbar::before,.navbar::after{content:none}
}

/* ---------------------------------------------------------------- układ stron OC (szablony jeszcze bez portu i konto/kasa) */
.container{width:auto;max-width:var(--wrap);padding-left:var(--gut);padding-right:var(--gut)}
#content{min-height:240px;padding-bottom:40px}
#content>h1,#content>h2:first-child{font-size:clamp(26px,3vw,36px);font-weight:850;text-transform:uppercase;letter-spacing:-.01em;margin:6px 0 20px}
#content h2{font-size:22px;font-weight:800;margin:24px 0 12px}
#content h3{font-size:18px;font-weight:800;margin:20px 0 10px}
#content p{margin:0 0 12px}
#content ul.list-unstyled li{padding:3px 0}
#content legend{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:0 0 8px;margin-bottom:14px;border-bottom:1px solid var(--line);width:100%}
#content fieldset{margin-bottom:22px}
#column-left,#column-right{padding-bottom:30px}
hr{border-top-color:var(--line)}

/* okruszki OC → .crumbs */
.breadcrumb{background:none;padding:16px 0;margin:0;border-radius:0;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb>li{display:inline}
.breadcrumb>li+li::before{content:"/";padding:0 6px 0 0;color:var(--line-2)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .fa-home::before{content:"Start";font-family:var(--font);font-size:13px}

/* przyciski OC */
.btn-default{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-default:hover,.btn-default:focus,.btn-default:active{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-danger{background:var(--bad);color:#fff}
.btn-danger:hover,.btn-danger:focus{background:var(--signal);color:#fff}
.btn-info,.btn-success,.btn-warning{background:var(--accent);color:var(--accent-ink)}
.btn-info:hover,.btn-success:hover,.btn-warning:hover{background:var(--sage-d);color:#fff}
.btn-link{color:var(--link);text-transform:none;font-weight:600;min-height:0;padding:0}
.btn-lg{min-height:52px;font-size:15px}
.btn-xs{min-height:28px;padding:0 10px;font-size:11.5px}
.btn-group{display:inline-flex;gap:6px}
.btn-group>.btn{border-radius:var(--r)!important;float:none}
.buttons{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:20px 0}
.buttons .pull-left,.buttons .pull-right{float:none!important}
.buttons .pull-right{margin-left:auto}

/* formularze OC → .inp */
.form-control{height:auto;min-height:46px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);padding:10px 12px;font-size:15px;box-shadow:none}
.form-control:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(127,149,64,.25)}
.form-control::placeholder{color:var(--muted)}
.form-control[disabled],.form-control[readonly]{background:var(--surface-2);color:var(--muted)}
textarea.form-control{min-height:110px}
.control-label,.form-group>label{font-size:13px;font-weight:700;color:var(--ink-2)}
.form-group.required .control-label::before{color:var(--bad)}
.has-error .form-control{border-color:var(--bad)}
.has-error .control-label,.text-danger,.has-error .help-block{color:var(--bad)}
.help-block{color:var(--muted);font-size:13px}
.input-group-addon,.input-group-btn>.btn{border-color:var(--line-2);background:var(--surface-2);color:var(--ink)}
.input-group .form-control{min-height:46px}
.input-group-btn>.btn{min-height:46px}
.radio label,.checkbox label{font-weight:500;color:var(--ink)}
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}

/* komunikaty OC */
.alert{border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:12px 16px;margin:12px 0}
.alert-success{border-left:4px solid var(--ok)}
.alert-danger{border-left:4px solid var(--bad)}
.alert-warning{border-left:4px solid var(--warn)}
.alert-info{border-left:4px solid var(--accent)}
.alert a{color:var(--link);font-weight:700}
.alert .close,.close{color:var(--ink);opacity:.6;text-shadow:none}
.alert .fa{margin-right:6px}

/* tabele OC (koszyk, zamówienia) */
.table{color:var(--ink);border-color:var(--line)}
.table>thead>tr>th,.table>thead>tr>td{border-bottom:2px solid var(--line-2);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th{border-top:1px solid var(--line);vertical-align:middle}
.table-bordered,.table-bordered>thead>tr>th,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td,.table-bordered>thead>tr>td{border-color:var(--line)}
.table-striped>tbody>tr:nth-of-type(odd){background:var(--surface-2)}
.table-hover>tbody>tr:hover{background:var(--chip)}
.table-responsive{border-color:var(--line)}
.img-thumbnail{background:var(--surface);border-color:var(--line);border-radius:var(--r)}

/* stronicowanie OC */
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}
.pagination>li>a,.pagination>li>span{float:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border:1.5px solid var(--line-2);border-radius:var(--r)!important;background:var(--surface);color:var(--ink);font-weight:700;margin:0}
.pagination>li>a:hover,.pagination>li>a:focus{background:var(--chip);border-color:var(--ink);color:var(--ink)}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pagination>.disabled>a,.pagination>.disabled>span{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* panele, studnie, listy, zakładki, modal OC */
.well,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);color:var(--ink)}
.well{padding:20px}
.panel-default>.panel-heading{background:var(--surface-2);border-color:var(--line);color:var(--ink);border-radius:var(--r-lg) var(--r-lg) 0 0}
.panel-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.panel-title>a{color:var(--ink);text-decoration:none}
.panel-body{color:var(--ink)}
.panel-group .panel+.panel{margin-top:8px}
.list-group-item{background:var(--surface);border-color:var(--line);color:var(--ink)}
a.list-group-item{color:var(--ink);text-decoration:none}
a.list-group-item:hover,a.list-group-item:focus{background:var(--chip);color:var(--ink)}
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs>li>a{color:var(--muted);font-weight:700;border-radius:var(--r) var(--r) 0 0}
.nav-tabs>li>a:hover{background:var(--chip);border-color:transparent;color:var(--ink)}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:var(--surface);color:var(--ink);border-color:var(--line) var(--line) transparent}
.modal-content{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-backdrop.in{opacity:.65}
#modal-agree{display:block}
.dropdown-menu{background:var(--surface);border-color:var(--line);box-shadow:var(--sh)}
.dropdown-menu>li>a{color:var(--ink)}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background:var(--chip);color:var(--ink)}
.label-default,.badge{background:var(--chip);color:var(--ink)}
.text-muted{color:var(--muted)}
.text-success{color:var(--ok)}
.price-old{color:var(--muted);text-decoration:line-through}
.price-new{color:var(--ink);font-weight:800}

/* ---------------------------------------------------------------- kategoria: elementy OC dodane do makiety */
.f-pills a{border:1px solid var(--accent);background:var(--surface);color:var(--ink);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:650;text-decoration:none}
.f-pills a span{color:var(--accent);font-weight:800;margin-left:3px}
.f-pills a.is-clear{border-color:transparent;text-decoration:underline;color:var(--muted)}
.fo.is-zero{opacity:.45}
.filters form{margin:0}
.pcard .price-old{font-size:12.5px;display:block}
.pcard a.add{text-decoration:none}
.more [aria-busy="true"]{opacity:.6;pointer-events:none}
.cat-desc{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14.5px;max-width:80ch}
.cat-desc p{margin:0 0 10px}
.cat-desc h2,.cat-desc h3{font-size:17px;font-weight:800;margin:18px 0 8px}
.cat-desc ul{list-style:disc;padding-left:20px;margin:0 0 10px}
.cmp-bar .cmp-n{flex:1;font-size:14px;color:#BDBAA2}
.cmp-bar .cmp-n b{color:#fff;font-size:17px}

@media (max-width:767px){
  .buttons{flex-direction:column-reverse}
  .buttons .btn{width:100%}
}

/* ---------- karta produktu (product/product.twig) ---------- */
.gal-main .ph.is-empty{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background:repeating-linear-gradient(135deg,var(--surface-2) 0 10px,var(--bg-2) 10px 20px)}
.gal-main .ph.is-empty span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.buy .brand a{color:inherit;text-decoration:none}
.buy .brand a:hover{text-decoration:underline}
.pbox .price-old{color:var(--muted);font-size:16px;margin-left:6px}
.pbox .omni{color:var(--ink-2)}
.variant .req{color:var(--bad)}
.variant.is-err .v-opt>span{border-color:var(--bad)}
.v-err{color:var(--bad);font-size:13px;font-weight:600;margin-top:6px}
.variant textarea.inp,.variant input.inp{width:100%}
/* opis z bazy (HTML producenta): nic nie może poszerzyć strony */
.opis-oc{max-width:100%;overflow-wrap:anywhere;line-height:1.6}
.opis-oc *{max-width:100%}
.opis-oc img,.opis-oc video{height:auto}
.opis-oc table{display:block;overflow-x:auto}
.opis-oc iframe{width:100%;aspect-ratio:16/9;height:auto}

/* ---------- kasa OC (checkout/checkout + kroki AJAX) w układzie makiety koszyk.html ---------- */
.co-oc .panel-group{display:grid;gap:16px;margin:0}
.co-oc .panel{margin:0;box-shadow:none}
.co-oc .panel-group .panel+.panel{margin-top:0}
.co-oc .panel-heading{padding:0;background:none;border:0;border-radius:0}
.co-oc .panel-body{padding:0;border:0!important}
.co-oc .co-bh{margin:0;font-family:inherit;font-size:13px;letter-spacing:.08em;line-height:1.3;color:var(--ink)}
.co-oc .panel:has(>.collapse:not(.in)){padding-top:14px;padding-bottom:14px}
.co-oc .panel:has(>.collapse.in) .co-bh{margin-bottom:16px}
.co-oc .co-bh a{display:flex;align-items:center;gap:10px;width:100%;color:inherit;text-decoration:none}
.co-oc .co-bh .fa{display:none}
.co-oc .panel:has(>.collapse:not(.in)) .co-bh a::after{content:"Zmień";margin-left:auto;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-2);text-decoration:underline}
.co-oc .panel-title:not(:has(a)){color:var(--muted)}
.co-oc .panel-title:not(:has(a)) b{background:var(--line-2);color:var(--ink-2)}
.co-oc .alert{margin:0 0 12px}
.co-p{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.co-p b{color:var(--ink)}
.co-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.co-act .btn .ico{margin-left:2px}
.co-act .btn-block{width:100%}
.co-link{font-size:13.5px;color:var(--ink-2)}
.co-fs .form-group{margin:0}
.co-fs+.co-fs{margin-top:14px}
.co-fs .control-label small{font-weight:500;color:var(--muted)}
.co-oc .required>.control-label::after{content:" *"}
.co-oc .text-danger{font-size:12.5px;margin-top:-2px}
.co-oc .has-error .form-control,.co-oc .form-control:has(+.text-danger){border-color:var(--bad)}
.co-oc .field>.radio,.co-oc .field>.checkbox{margin:0}
.co-same,.co-agree,.co-note{margin-top:16px}
.co-agree{font-size:14px;line-height:1.45}
.co-agree a{font-weight:700}
.co-note textarea.inp{min-height:0}
.co-oc .co-eta{margin-top:12px}
.co-login-old{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-2)}
.co-login-old summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.co-login-old summary::-webkit-details-marker{display:none}
.co-login-old summary .ico{flex:none;color:var(--accent)}
.co-login-old summary b{display:block;font-size:14px}
.co-login-old summary small{display:block;font-size:12.5px;color:var(--muted)}
.co-login-old summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform var(--t)}
.co-login-old[open] summary::after{transform:rotate(225deg)}
.co-login-old .ask-grid{margin-top:14px}
/* podsumowanie (checkout/d4_sum.twig) i lista w kroku potwierdzenia */
.cs-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.cs-list img,.cs-ph{width:48px;height:48px;border-radius:var(--r);background:#fff;object-fit:contain;border:1px solid var(--line)}
.cs-list b{display:block;font-weight:700;line-height:1.3}
.cs-list b a{color:inherit;text-decoration:none}
.cs-list b a:hover{text-decoration:underline}
.cs-list small{display:block;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.cs-list .price{font-size:14px;white-space:nowrap}
.cs-confirm{margin-bottom:14px}
.cs-confirm li{grid-template-columns:minmax(0,1fr) auto;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cs-edit{font-size:12.5px;color:var(--ink-2);justify-self:start}
.cs-later{color:var(--muted);font-weight:600}
.co-pay-act{margin-top:6px}

/* ---------- strona główna OC ---------- */
/* chipy w panelu hero są linkami do podkategorii (w makiecie: przyciski modeli) */
.beam-chips a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--night-line);background:var(--night-2);color:#CFCCB4;border-radius:99px;padding:7px 12px;font-size:12.5px;font-weight:700;text-decoration:none}
.beam-chips a .mono{color:var(--beam)}
.beam-chips a:hover{border-color:var(--beam);color:#fff}

/* dokument bez spisu treści (jedna sekcja w treści z bazy) */
.doc.is-single{grid-template-columns:minmax(0,1fr)}

/* Kontakt: Bootstrap zdejmuje podkreślenie linków, makieta je ma */
.kt-faq a,.kt-small a,.ask-form .check a,.l-contact a,.cat-head .lead a{text-decoration:underline}

/* konto: linki pod zakładkami panelu */
.ac-links{margin:14px 0 0;font-size:14px;color:var(--muted)}
.ac-links a{font-weight:700;text-decoration:underline}

/* konto: podstrony panelu (dane, hasło, adresy, zamówienia, zwroty) */
.ac-grid.is-form{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ac-sec .ac-msg,.ac-sec .ac-err{margin:0 0 16px}
.ac-head .co-bh{margin:0}
.ac-guest .ac-links{margin-top:0}
.ac-adr dd{font-weight:600;line-height:1.5}
.ac-adr dd.ac-links{margin-top:10px;font-weight:400}
.ac-adr .is-default{border-color:var(--accent)}
.ac-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ac-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1fr) 90px 130px 110px;align-items:center;gap:8px 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color var(--t)}
.ac-row:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.ac-r-id{display:grid;gap:2px}
.ac-r-id small,.ac-r-q{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ac-r-p{font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-r-go{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-weight:700;font-size:13.5px;color:var(--link)}
.ac-r-go .ico{width:16px;height:16px}
.ac-pag{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ac-pag small{color:var(--muted);font-size:12.5px}
.ac-q{display:block;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding:0}
.ac-ci-link{font-size:12.5px;font-weight:700;color:var(--link);text-decoration:underline}
.ac-note{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.ac-hist{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:grid;gap:14px}
.ac-hist li{position:relative;display:grid;gap:2px}
.ac-hist li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.ac-hist li.is-now::before{background:var(--accent);border-color:var(--accent)}
.ac-hist .mono{font-size:12px;color:var(--muted)}
.ac-hist p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.co-sum .kt-small{margin:0}
.co-sum .cfg-lines b{min-width:0;overflow-wrap:anywhere;text-align:right}
/* zwroty: formularz w dwóch częściach, powody jako radio; lista z nazwiskiem w kolumnie ceny */
.ask-form .rf-bh{margin:8px 0 0}
.rf-set{border:0;padding:0;margin:0;min-width:0;display:grid;gap:8px}
.rf-set legend{border:0;margin:0 0 2px;padding:0;width:auto;font-size:12.5px;line-height:1.4}
.rf-set[aria-invalid="true"] legend{color:var(--bad)}
.rf-inline{display:flex;flex-wrap:wrap;gap:8px 22px}
.ac-r-nm{font-weight:600;font-size:13.5px;white-space:normal;overflow-wrap:anywhere}
/* wspólna strona sukcesu (common/success) */
.ok-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;max-width:760px;padding:22px}
.ok-ico{width:28px;height:28px;color:var(--accent)}
.ok-box.is-bad .ok-ico{color:var(--bad)}
.ok-msg{font-size:15.5px;line-height:1.55;color:var(--ink)}
.ok-msg p{margin:0 0 8px}
.ok-msg p:last-child{margin:0}
.ok-msg a{font-weight:700;text-decoration:underline}
.ok-box .ask-act{grid-column:2;margin-top:4px}
@media (max-width:860px){
  .ac-grid.is-form{grid-template-columns:minmax(0,1fr)}
  .ac-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id p" "st q";padding:12px 14px}
  .ac-r-id{grid-area:id}.ac-r-p{grid-area:p}.ac-r-st{grid-area:st}.ac-r-go{display:none}.ac-r-q{grid-area:q;text-align:right}
}
@media (max-width:560px){
  .ci .ac-q{grid-area:q;width:auto}
}