/* ══════════════════════════════════════════════════════════════
   BIROBOX POLISH LAYER — loaded last. One set of tokens, one content
   edge, one radius/shadow scale, one icon style across the shop.
══════════════════════════════════════════════════════════════ */
:root{
  --bb-navy:#252466; --bb-red:#cc0000; --bb-red-d:#a80000;
  --bb-ink:#1b1d21; --bb-text:#3d4250; --bb-muted:#5f6674; --bb-line:#e4e7ec; --bb-soft:#f6f7f9;
  --bb-r-sm:8px; --bb-r:12px; --bb-r-lg:16px;
  --bb-sh-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --bb-sh-2:0 10px 28px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.05);
  --bb-gut:24px;
  --bb-ease:cubic-bezier(.2,.7,.2,1);
}
@media(max-width:600px){:root{--bb-gut:16px}}

/* Icon masks (CSS pseudo-elements) */
.bbi,.woocommerce-checkout #payment .wc_payment_method label:not(:has(img))::before,#place_order::before,
.woocommerce-MyAccount-navigation ul li a::before,.woocommerce-checkout #payment .wc_payment_method:has(input:checked)::after,
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon::before{
  -webkit-mask:var(--bbi) center/contain no-repeat;mask:var(--bbi) center/contain no-repeat;background-color:currentColor;
}

/* ── One content edge: every band's content sits in the same 1440 px column ── */
.w{padding-left:var(--bb-gut)!important;padding-right:var(--bb-gut)!important}

/* ── Inline SVG icons ── */
.vi{display:block;flex-shrink:0}

/* ── HEADER ── */
.header{border-bottom:1px solid var(--bb-line);box-shadow:var(--bb-sh-1)}
@media(min-width:769px){.header .w{height:80px;gap:28px}}
.search-bar{border:2px solid var(--bb-red);border-radius:var(--bb-r-sm);height:48px;max-width:720px}
.search-bar-inner{border-radius:6px}
.search-bar input{font-size:15px;color:var(--bb-ink)}
.search-bar input::placeholder{color:#8a909c}
.search-bar button{width:54px;display:flex;align-items:center;justify-content:center;border-radius:0}
.search-bar button .vi{color:#fff}
.hactions{gap:2px}
.ha{padding:8px 12px;border-radius:var(--bb-r-sm);color:var(--bb-navy);gap:4px;transition:background .15s var(--bb-ease),color .15s}
.ha:hover{background:var(--bb-soft);color:var(--bb-red)}
.ha .ico{height:24px;display:flex;align-items:center;justify-content:center;font-size:0}
.ha .lbl{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--bb-muted)}
.ha:hover .lbl{color:inherit}
.ha-phone .lbl{font-size:13px;font-weight:700;color:var(--bb-ink);letter-spacing:0;text-transform:none}
.cbadge{top:0;right:4px;background:var(--bb-red);font-size:10px;width:19px;height:19px}

/* ── MAIN NAV ── */
.mainnav{border-bottom:1px solid var(--bb-line)}
.mn-wrap{height:50px;gap:4px}
.mn-link{font-size:14px;font-weight:600;color:var(--bb-ink);padding:0 14px;height:50px;border-bottom-width:2px}
.mn-link.sale{color:var(--bb-red)}
.nav-shop .ns-trigger{gap:8px;padding:0 18px;border-bottom:0;border-radius:0}
.mn-arr{display:inline-flex;opacity:.8;font-size:0}
.mn-arr .vi{width:14px;height:14px}

/* ── PAGE HERO + STANDARD PAGE ── */
.page-hero{background:var(--bb-soft);border-bottom:1px solid var(--bb-line);padding:32px 0 28px}
@media(max-width:760px){.page-hero{padding:24px 0 20px}}
.page-hero-title{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.01em;color:var(--bb-ink)}
.page-body{padding:32px 0 72px}
.page-content-card{border:1px solid var(--bb-line);border-radius:var(--bb-r-lg);box-shadow:var(--bb-sh-1);color:var(--bb-text)}
.page-content-card h2{color:var(--bb-ink);letter-spacing:-.005em}
.page-content-card a{color:var(--bb-navy)}
/* Cart / checkout / account: WooCommerce panels are the cards — no card around cards */
.woocommerce-cart .page-content-card,.woocommerce-checkout .page-content-card,.woocommerce-account .page-content-card{
  background:none;border:0;box-shadow:none;padding:0;border-radius:0}

/* ── BREADCRUMBS ── */
.wc-breadcrumb,.pdp-crumb-bar{font-size:13px;color:var(--bb-muted)}
.wc-breadcrumb a,.pdp-crumb-bar a{color:var(--bb-muted)}
.wc-breadcrumb a:hover,.pdp-crumb-bar a:hover{color:var(--bb-red)}

/* ── PRODUCT CARDS ── */
.woocommerce ul.products,.woocommerce-page ul.products{gap:16px!important}
.pcard{border:1px solid var(--bb-line);border-radius:var(--bb-r);padding:12px 12px 14px;gap:8px;box-shadow:none;
  transition:box-shadow .2s var(--bb-ease),border-color .2s,transform .2s var(--bb-ease)}
.pcard:hover{box-shadow:var(--bb-sh-2);border-color:transparent;transform:translateY(-2px)}
.pc-img{border-radius:var(--bb-r-sm);background:var(--bb-soft);margin-bottom:4px}
.pcard:hover .pc-img{transform:none}
.pcard:hover .pc-img img{transform:scale(1.04)}
.pc-img img{transition:transform .35s var(--bb-ease)}
.pc-img svg.vi{width:40px;height:40px}
.pc-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#c3c8d0}
.pc-tag{border-radius:4px;padding:3px 7px;font-size:10px;letter-spacing:.04em}
.pc-name{font-size:14px;color:var(--bb-ink);line-height:1.4}
.pc-name a{color:inherit}
.pc-footer{padding-top:8px;gap:8px}
.pc-qty-wrap{height:36px;border:1px solid var(--bb-line);border-radius:var(--bb-r-sm)}
.qty-minus,.qty-plus{height:34px;width:28px;background:#fff;color:var(--bb-text)}
.qty-minus:hover,.qty-plus:hover{background:var(--bb-soft);color:var(--bb-red)}
.qty-input{height:34px;border-left:1px solid var(--bb-line);border-right:1px solid var(--bb-line)}
.pc-add{height:36px;padding:0 12px;border-radius:var(--bb-r-sm);gap:6px;font-weight:700}
.pc-add:hover{background:var(--bb-red-d);transform:none}
.pc-add .pc-add-icon{display:inline-flex;font-size:0}
.pc-add .pc-add-lbl{font-size:12px}
.pc-add-busy{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:bb-spin .7s linear infinite}
@keyframes bb-spin{to{transform:rotate(360deg)}}
.pc-pr .price-pdv,.pc-pr .bbo-prior,.pc-pr .usidri{font-size:11.5px}
.price-pdv{color:var(--bb-muted)}
.sdrop-img-ph{display:flex;align-items:center;justify-content:center;color:#c3c8d0}

/* ── PRODUCT PAGE ── */
.pdp-trust-item{background:#fff;border:1px solid var(--bb-line);border-radius:var(--bb-r-sm);padding:12px 8px;font-size:11.5px;color:var(--bb-text);gap:6px}
.pdp-trust-item span{text-wrap:balance}
.pdp-no-img{display:flex;align-items:center;justify-content:center;color:#c3c8d0;background:var(--bb-soft)}

/* ── CATALOG SIDEBAR ── */
.catalog-sidebar{border:1px solid var(--bb-line);border-radius:var(--bb-r);box-shadow:none}

/* ── FORMS (all inputs share one look) ── */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single{
  border:1px solid #cfd4dc!important;border-radius:var(--bb-r-sm)!important;min-height:46px;
  transition:border-color .15s,box-shadow .15s}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{
  border-color:var(--bb-navy)!important;box-shadow:0 0 0 3px rgba(37,36,102,.12)!important;outline:none}

/* ── CART ── */
.woocommerce-cart .product-thumbnail img{border-radius:var(--bb-r-sm);background:var(--bb-soft)}

/* ── CHECKOUT: coupon (jQuery slideDown sets display:block inline) ── */
.woocommerce-checkout .woocommerce-form-coupon[style*="block"]{display:flex!important}
.woocommerce-checkout .woocommerce-form-coupon .form-row-first #coupon_code{height:46px;border:1px solid #cfd4dc;border-radius:var(--bb-r-sm)}
.woocommerce-checkout .woocommerce-form-coupon .form-row-last .button,
.woocommerce-checkout .woocommerce-form-coupon .form-row-last button{height:46px;border-radius:var(--bb-r-sm);background:var(--bb-navy);box-shadow:none}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon::before{content:'';width:14px;height:14px;font-size:0;--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}

/* ── CHECKOUT: payment methods ── */
.woocommerce-checkout #payment .wc_payment_method{border:1px solid var(--bb-line);border-radius:var(--bb-r)}
.woocommerce-checkout #payment .wc_payment_method:hover{border-color:#c7cdd8;box-shadow:var(--bb-sh-1)}
.woocommerce-checkout #payment .wc_payment_method:has(input:checked){border-color:var(--bb-navy);border-left-width:1px;background:#f5f6fc;box-shadow:0 0 0 1px var(--bb-navy)}
.woocommerce-checkout #payment .wc_payment_method:has(input:checked) label{color:var(--bb-navy)}
.woocommerce-checkout #payment .wc_payment_method:has(input:checked)::after{content:'';width:22px;height:22px;top:20px;right:18px;border-radius:0;background-color:var(--bb-navy);--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.woocommerce-checkout #payment .wc_payment_method label{padding:18px 56px 18px 18px;gap:14px;font-size:15px}
.woocommerce-checkout #payment .wc_payment_method label:not(:has(img))::before{content:'';width:24px;height:24px;font-size:0;color:var(--bb-navy);--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
.woocommerce-checkout #payment .payment_method_bacs label:not(:has(img))::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M12 2 20 7H4z'/%3E%3C/svg%3E")}
.woocommerce-checkout #payment .payment_method_cod label:not(:has(img))::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E")}
.woocommerce-checkout #payment .payment_box{background:#f5f6fc;border-top:1px solid var(--bb-line);color:var(--bb-text)}

/* ── CHECKOUT: place order — solid, calm, clear legal label ── */
#place_order{height:56px!important;background:var(--bb-red)!important;border-radius:var(--bb-r)!important;
  font-size:16px!important;font-weight:700!important;letter-spacing:.01em!important;text-transform:none!important;
  box-shadow:0 6px 16px rgba(204,0,0,.22)!important;transition:background .15s,box-shadow .15s,transform .15s!important}
#place_order:hover{background:var(--bb-red-d)!important;opacity:1!important;box-shadow:0 8px 22px rgba(204,0,0,.28)!important;transform:translateY(-1px)!important}
#place_order::before{content:''!important;width:18px;height:18px;font-size:0!important;opacity:1!important;--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}

/* ── MY ACCOUNT nav icons ── */
.woocommerce-MyAccount-navigation ul li a::before{content:''!important;width:18px;height:18px;font-size:0!important;--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}
.woocommerce-MyAccount-navigation-link--orders a::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E")}
.woocommerce-MyAccount-navigation-link--downloads a::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E")}
.woocommerce-MyAccount-navigation-link--edit-address a::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.woocommerce-MyAccount-navigation-link--payment-methods a::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
.woocommerce-MyAccount-navigation-link--edit-account a::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.woocommerce-MyAccount-navigation-link--customer-logout a::before{--bbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")}

/* ── CONTACT PAGE ── */
.cp-badge span,.cp-strip-icon{display:inline-flex;align-items:center;justify-content:center}
.cp-strip-icon{border-radius:var(--bb-r)}
[data-bbc-embed]{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px}

/* ── FOCUS (keyboard) ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--bb-navy);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .pcard,.pcard:hover,.pc-img img,#place_order{transition:none!important;transform:none!important}
}

/* ── CATALOG: equal-height cards (buttons on one line per row), white image well ── */
.woocommerce ul.products,.woocommerce-page ul.products{align-items:stretch!important}
.pc-img{background:#fff}
.woo-main h1,.catalog-title,.woocommerce-products-header__title{font-size:26px;letter-spacing:-.01em;color:var(--bb-ink)}
/* Price is filtered by Filter Everything ("Cijena"); the core WooCommerce price widget duplicated it */
.catalog-sidebar .widget_price_filter,.catalog-sidebar .sb-price-filter{display:none}
/* Grid items default to min-width:auto — one 3000 px product photo stretched its whole column. */
.woocommerce ul.products li.pcard{min-width:0}
.pc-img img{width:100%;height:100%;object-fit:contain}
/* Card footer never overflows: button takes the remaining width; narrow cards show the cart icon only */
.pcard{container-type:inline-size}
.pc-footer{min-width:0}
.pc-add{flex:1 1 auto;min-width:36px;justify-content:center}
@container (max-width:200px){.pc-add .pc-add-lbl{display:none}.pc-add{padding:0}}
/* Coupon sits above the checkout form (valid HTML): compact panel, form row inline */
.woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle{border:1px solid var(--bb-line);border-radius:var(--bb-r);background:#fff;margin-bottom:12px;overflow:hidden}
.woocommerce-checkout .woocommerce > form.woocommerce-form-coupon{border:1px solid var(--bb-line);border-radius:var(--bb-r);margin:0 0 16px;max-width:560px;align-items:flex-end}
/* Bands are direct children of <body>: 100% (not 100vw, which includes the scrollbar and shifted them 3 px) */
.topbar,.header,.mainnav,.excl,footer{width:100%;margin-left:0;margin-right:0}