/* ============================================================
   druoutlet — category, PDP, cart, checkout styling
   ============================================================ */

.page-main { min-height: 60vh; }

/* sitewide trust strip */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 24px; overflow-x: auto; }
.trust-strip-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.trust-strip-item svg { color: var(--accent); flex: none; }

/* breadcrumb + page heading */
.crumbs { display: flex; align-items: center; gap: 7px; padding: 22px 0 4px; font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.crumbs a { font-weight: 600; }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs svg { color: var(--line-2); }
.page-h { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 26px; }

/* ============================ CATEGORY ============================ */
.cat-layout { display: grid; grid-template-columns: 264px 1fr; gap: 30px; padding-bottom: 40px; align-items: start; }
.cat-side { position: sticky; top: calc(var(--header-h) + 12px); }

.filters { display: flex; flex-direction: column; }
.filters-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.filters-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.filters-clear { background: none; border: 0; color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.filter-radio { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.filter-radio:hover { background: var(--surface-2); color: var(--ink); }
.filter-radio.on { background: var(--ink); color: #fff; font-weight: 700; }
.filter-radio.on .fc { color: rgba(255,255,255,.7); }
.fc { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.filter-checks { display: flex; flex-direction: column; gap: 2px; }
.filter-check { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.filter-check:hover { background: var(--surface-2); }
.filter-check input { display: none; }
.filter-check .box { width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: transparent; flex: none; transition: all .15s; }
.filter-check input:checked + .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-check .lbl { flex: 1; }
.filter-check input:checked ~ .lbl { color: var(--ink); font-weight: 600; }

.range { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--line-2); outline: none; margin: 6px 0; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid #fff; }
.price-range-val { display: flex; align-items: baseline; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.price-range-val strong { font-weight: 800; }
.range-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.cat-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cat-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.cat-found { font-size: 14px; color: var(--ink-3); }
.cat-found strong { color: var(--ink); }
.cat-tools { display: flex; align-items: center; gap: 10px; }
.filters-toggle { display: none; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 16px; font-weight: 700; font-size: 14px; color: var(--ink); }

.sort { position: relative; }
.sort-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 11px 16px; font-weight: 700; font-size: 14px; color: var(--ink); }
.sort-btn:hover { border-color: var(--ink); }
.sort-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
.sort-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; text-align: left; padding: 11px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.sort-menu button:hover { background: var(--surface-2); color: var(--ink); }
.sort-menu button.on { color: var(--accent-ink); font-weight: 700; }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cat-grid { grid-template-columns: repeat(3, 1fr); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 70px 20px; text-align: center; color: var(--ink-3); }
.empty h3 { margin: 0; color: var(--ink); font-size: 20px; }
.empty svg { color: var(--line-2); }

/* mobile filter sheet */
.filter-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(90vw, 380px); background: var(--surface); display: flex; flex-direction: column; animation: slideInRight .25s ease; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: none; } }
.filter-sheet-body { flex: 1; overflow-y: auto; padding: 0 18px; }
.filter-sheet-foot { padding: 16px 18px; border-top: 1px solid var(--line); }

/* ============================ PDP ============================ */
.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; padding: 20px 0 10px; align-items: start; }
.pdp-gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; position: sticky; top: calc(var(--header-h) + 12px); }
.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pdp-thumb { padding: 0; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; background: none; cursor: pointer; transition: border-color .15s; }
.pdp-thumb.on { border-color: var(--accent); }
.pdp-thumb .ph { border-radius: 0; }
/* Single-image products render no thumbs strip — let the lone stage span the
   full gallery width instead of collapsing into the 76px thumbs column. */
.pdp-gallery > .pdp-stage:only-child { grid-column: 1 / -1; }
.pdp-stage { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pdp-stage .ph { aspect-ratio: 1/1; }

.pdp-title { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; margin: 6px 0 12px; }
.pdp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pdp-sku { font-size: 12.5px; color: var(--ink-3); }
.pdp-color { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; }
.pdp-color-val { font-weight: 700; }
.pdp-pricebox { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px; }
.pdp-vat { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.pdp-stockrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.pdp-delivery { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.pdp-delivery svg { color: var(--ink); }

.pdp-buy { display: flex; gap: 12px; margin-bottom: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; flex: none; }
.qty button { width: 48px; height: 54px; border: 0; background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.qty button:hover { background: var(--surface-2); }
.qty input { width: 44px; height: 54px; border: 0; text-align: center; font-weight: 800; font-size: 17px; color: var(--ink); background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-sm button { width: 38px; height: 42px; }
.qty-sm input { width: 38px; height: 42px; font-size: 15px; }

.pdp-assurance { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.assure { display: flex; align-items: flex-start; gap: 12px; }
.assure svg { color: var(--accent); flex: none; margin-top: 1px; }
.assure .at { font-weight: 700; font-size: 14px; }
.assure .as { font-size: 12.5px; color: var(--ink-3); }

.pdp-tabs { margin-top: 40px; }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; padding: 14px 18px; font-weight: 700; font-size: 15px; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab-body { padding: 26px 0; }
.spec-table { width: 100%; max-width: 640px; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table th { text-align: left; padding: 13px 0; font-weight: 600; color: var(--ink-3); font-size: 14.5px; width: 42%; }
.spec-table td { padding: 13px 0; font-weight: 700; font-size: 14.5px; }
.prose { max-width: 620px; color: var(--ink-2); line-height: 1.65; font-size: 15px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0; padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--ink); }

/* ============================ CART ============================ */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; padding-bottom: 20px; }
.cart-lines { display: flex; flex-direction: column; gap: 14px; }
.ship-progress { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-size: 14px; }
.ship-progress .got { display: inline-flex; align-items: center; gap: 7px; color: var(--good); font-weight: 700; }
.ship-bar { height: 6px; border-radius: 3px; background: var(--line-2); margin-top: 10px; overflow: hidden; }
.ship-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }

.cart-line { display: grid; grid-template-columns: 104px 1fr auto; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.cart-thumb { width: 104px; }
.cart-thumb .ph { aspect-ratio: 1/1; }
.cart-line-title { font-weight: 700; font-size: 15px; line-height: 1.35; display: block; margin: 4px 0 8px; }
.cart-line-title:hover { color: var(--accent-ink); }
.cart-line-meta { font-size: 12.5px; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cart-remove { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--ink-3); font-weight: 600; font-size: 13px; padding: 0; }
.cart-remove:hover { color: var(--accent-ink); }
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; }

.cart-summary, .checkout-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: sticky; top: calc(var(--header-h) + 12px); }
.cart-summary h3, .checkout-summary h3 { margin: 0 0 18px; font-size: 18px; font-weight: 800; }
.sum-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 14.5px; color: var(--ink-2); }
.sum-row.save { color: var(--accent-ink); font-weight: 700; }
.sum-total { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 0 18px; }
.sum-total > span { font-size: 17px; font-weight: 800; }
.sum-total-val { text-align: right; }
.sum-total-val .t-bgn { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; display: block; }
.sum-total-val .t-eur { font-size: 13px; color: var(--ink-3); }
.promo-input { display: flex; gap: 8px; margin: 6px 0 16px; }
.promo-input .input { flex: 1; }
.promo-input .btn { flex: none; }
.sum-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sum-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sum-trust svg { color: var(--accent); }

.empty-cart { padding: 60px 20px; }
/* WooCommerce password-visibility toggle: unstyled it collapses to a 16×6px sliver
   (we drop WC's stylesheets). Give it a real hit area and center it on the field. */
.password-input { position: relative; display: block; }
.password-input .show-password-input {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px; border: 0; background: none; cursor: pointer; padding: 0;
}
.password-input .show-password-input::after {
	content: ''; display: block; width: 22px; height: 22px; margin: 0 auto;
	background: currentColor; color: var(--ink-3);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg 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"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg 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"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>') center / contain no-repeat;
}
.password-input .show-password-input:hover::after { color: var(--ink); }
.password-input .show-password-input.display-password::after { color: var(--accent); }
.password-input input[type="password"], .password-input input[type="text"] { padding-right: 48px; }

/* 404 — page not found */
.empty-404 { padding: 60px 20px; }
.empty-404 .err-code { font-size: 62px; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -1px; margin-top: 4px; }
.empty-404 h1 { margin: 0; color: var(--ink); font-size: 26px; }
.empty-404 .muted { max-width: 460px; }
.err-search { display: flex; width: min(440px, 100%); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; margin-top: 4px; }
.err-search input[type="search"] { flex: 1; border: 0; padding: 12px 18px; font-size: 15px; outline: none; background: transparent; color: var(--ink); }
.err-search button { border: 0; background: var(--accent); color: var(--accent-ink); width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.err-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.err-cats a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.err-cats a:hover { border-color: var(--accent); color: var(--accent); }
.empty-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.empty-cart h2 { color: var(--ink); margin: 0; font-size: 24px; }

/* ============================ CHECKOUT ============================ */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; padding-bottom: 20px; }
/* Mobile: the courier radios are relocated (by JS) to the top of the form so they
   sit with the Област/Град/office fields they control. Hidden on desktop (they
   stay in the summary) and until JS populates + activates it on mobile. */
#dru-ship-top { display: none; }
#dru-ship-top .co-block-head { margin-bottom: 14px; }
@media (max-width: 980px) {
  #dru-ship-top.is-active { display: block; }
  /* Radios live in the top card now; the summary keeps the read-only shipping
     cost line. Hide the radios only if they momentarily linger in the summary
     before the JS relocates them. */
  .checkout-summary #shipping_method { display: none; }
}
/* Grid/flex items default to min-width:auto and can't shrink below their
   content's min size — the courier office Select2 (long office names) was
   forcing the columns AND the inner field-wrapper grid wider than the phone
   viewport, overflowing the whole page. Let every level shrink and keep the
   long office name truncated with an ellipsis. */
.checkout-main, .checkout-summary, .co-block,
.checkout .form-row, .checkout .woocommerce-input-wrapper,
.checkout .select2-container, .checkout .select2-selection,
.checkout .select2-selection__rendered { min-width: 0; }
.checkout .select2-container { max-width: 100%; }
.checkout .select2-selection__rendered { text-overflow: ellipsis; }
/* On a failed/AJAX checkout submit WooCommerce prepends its notice group as the
   first child of form.checkout (our grid container). Force any such notice to
   span the full width so it sits on its own row above the two columns instead
   of taking the first grid cell and pushing the form + summary out of place. */
.checkout-layout > .woocommerce-NoticeGroup,
.checkout-layout > .woocommerce-error,
.checkout-layout > .woocommerce-message,
.checkout-layout > .woocommerce-info { grid-column: 1 / -1; margin: 0 0 4px; }
.checkout-main { display: flex; flex-direction: column; gap: 16px; }
/* Invoice (фактура) block + order notes */
.dru-invoice-block { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; }
.dru-invoice-toggle { margin: 0 0 6px; }
.dru-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; user-select: none; }
.dru-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.dru-invoice-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.co-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.co-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.co-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.co-block-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .f2 { grid-column: span 2; }

.opt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 16px; position: relative; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--ink-3); }
.opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.opt svg { color: var(--ink); flex: none; }
.opt.on svg { color: var(--accent-ink); }
.opt-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; position: relative; transition: border-color .15s; }
.opt.on .opt-radio { border-color: var(--accent); }
.opt.on .opt-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.opt-t { font-weight: 700; font-size: 15px; }
.opt-s { font-size: 12.5px; color: var(--ink-3); }

.co-lines { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.co-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.co-line-thumb { position: relative; width: 52px; }
.co-line-thumb .ph { aspect-ratio: 1/1; border-radius: var(--r-sm); }
.co-qty { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.co-line-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-line-price { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.co-fine { font-size: 12px; margin: 14px 0 0; line-height: 1.5; }
.co-fine a { color: var(--accent-ink); font-weight: 600; }

.confirm { max-width: 560px; margin: 0 auto; text-align: center; padding: 60px 20px; }
.confirm-ic { display: inline-flex; color: var(--good); margin-bottom: 18px; }
.confirm h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.confirm p { font-size: 15.5px; line-height: 1.6; margin: 0 0 26px; }
.confirm-meta { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; text-align: left; }
.confirm-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); padding: 15px 20px; }
.cm-l { color: var(--ink-3); font-size: 14px; flex-shrink: 0; }
.cm-v { font-weight: 700; font-size: 14.5px; text-align: right; }

/* ============================ TOAST ============================ */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; max-width: calc(100vw - 32px); width: 420px; }
.toast-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--good); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.toast-mid { flex: 1; min-width: 0; }
.toast-t { font-weight: 800; font-size: 14px; }
.toast-s { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .ftr-main { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: span 2; max-width: none; }
}

@media (max-width: 980px) {
  :root { --header-h: 156px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .hero-side--solo { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .pdp-gallery { position: static; }
  .cat-layout { grid-template-columns: 1fr; }
  .cat-side { display: none; }
  .filters-toggle { display: inline-flex; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary, .checkout-summary { position: static; order: -1; }
  .checkout-summary { order: 1; }
  .ftr-trust-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .hdr-nav { display: none; }
  .hdr-search-wrap { display: none; }
  .hdr-search-mobile { display: block; }
  .hdr-burger { display: inline-flex; }
  .hdr-action-label { display: none; }
  .hdr-actions { gap: 2px; }
  .hdr-top-inner { gap: 14px; padding: 14px 0; }
  .trust-strip-inner { justify-content: flex-start; }
  .cat-tiles { grid-template-columns: repeat(2, 1fr); }
  .news { grid-template-columns: 1fr; padding: 32px; }
}

@media (max-width: 640px) {
  .shell { padding: 0 16px; }
  .section { padding: 38px 0; }
  .section-head h2 { font-size: 24px; }
  .page-h, .cat-title { font-size: 26px; }
  .hero-main { padding: 28px; min-height: 0; }
  .hero-deal-card { flex-direction: column; align-items: stretch; }
  .hero-deal-card .ph { width: 100%; aspect-ratio: 16/10; }
  .hero-side { grid-template-columns: 1fr; }
  .grid-cards, .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* On narrow 2-col cards the discount + ХИТ/ТОП ОФЕРТА badges don't fit side by
     side (ТОП ОФЕРТА crams against the card edge and wraps). Stack them. */
  .card-badges { flex-direction: column; align-items: flex-start; gap: 5px; }
  /* product rows scroll horizontally */
  .row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .row-scroll > * { scroll-snap-align: start; }
  .card { padding: 12px; }
  .card-title { font-size: 13.5px; }
  .opt-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .f2 { grid-column: auto; }
  .pdp-assurance { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 80px 1fr; }
  .cart-thumb { width: 80px; }
  .cart-line-right { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .ftr-main { grid-template-columns: 1fr; }
  .ftr-brand { grid-column: auto; }
  .ftr-trust-inner { grid-template-columns: 1fr; }
  .pdp-thumbs { flex-direction: row; }
  .pdp-gallery { grid-template-columns: 1fr; }
  .pdp-thumbs { order: 2; }
  /* horizontal thumb row: keep thumbs small squares, not full-width stretches */
  .pdp-thumb { width: 64px; flex: none; }
  .toast { width: auto; left: 16px; right: 16px; transform: none; }
}

/* ---- Variable-product picker (native WC form, themed) ---------------- */
.pdp-variable-form { margin-bottom: 14px; }
.pdp-variable-form table.variations { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.pdp-variable-form table.variations tr { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pdp-variable-form table.variations th.label { flex: none; width: 74px; padding: 0; text-align: left; font-weight: 700; font-size: 14px; color: var(--muted); }
.pdp-variable-form table.variations td.value { flex: 1; position: relative; }
.pdp-variable-form select {
  width: 100%; height: 52px; padding: 0 40px 0 16px; border: 1px solid var(--line-2);
  border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.pdp-variable-form select:focus { outline: none; border-color: var(--accent); }
.pdp-variable-form .reset_variations {
  display: inline-block; margin: 2px 0 0 2px; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.pdp-variable-form .woocommerce-variation-price { margin: 4px 0 14px; }
.pdp-variable-form .woocommerce-variation-price .price,
.pdp-variable-form .woocommerce-variation-price .amount { font-size: 26px; font-weight: 800; color: var(--ink); }
.pdp-variable-form .woocommerce-variation-availability { display: none; } /* stock shown in pdp-stockrow */
.pdp-variable-form .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 12px; }
.pdp-variable-form .woocommerce-variation-add-to-cart .quantity { flex: none; }
.pdp-variable-form .woocommerce-variation-add-to-cart .qty {
  width: 68px; height: 54px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  text-align: center; font-weight: 800; font-size: 17px; color: var(--ink); background: var(--surface);
}
.pdp-variable-form .single_add_to_cart_button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: var(--shadow-accent); cursor: pointer; transition: background .15s ease, transform .12s ease;
}
.pdp-variable-form .single_add_to_cart_button:hover { background: var(--accent-press); }
.pdp-variable-form .single_add_to_cart_button:active { transform: translateY(1px); }
.pdp-variable-form .single_add_to_cart_button.disabled,
.pdp-variable-form .single_add_to_cart_button.wc-variation-selection-needed { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pdp-variable-form .woocommerce-variation.single_variation { margin-bottom: 4px; }
.price-range-to { font-size: 22px; font-weight: 700; color: var(--muted); margin-left: 6px; }

/* Product-archive pager — FacetWP numbered pages */
.cat-pager { margin: 34px 0 6px; display: flex; justify-content: center; }
.cat-pager .facetwp-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-pager .facetwp-page {
	min-width: 40px; height: 40px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 8px; background: #fff;
	color: var(--ink-2); font-weight: 600; font-size: 15px; line-height: 1;
	cursor: pointer; user-select: none; text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cat-pager .facetwp-page:hover { border-color: var(--accent); color: var(--accent); }
.cat-pager .facetwp-page.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: default; }
.cat-pager .facetwp-page.dots { border-color: transparent; background: none; min-width: 24px; color: var(--ink-3); pointer-events: none; }
@media (max-width: 640px) {
	.cat-pager .facetwp-page { min-width: 36px; height: 36px; padding: 0 9px; font-size: 14px; }
}
/* Search results: no filter rail, full-width grid + native pagination (mirrors the facet pager). */
.cat-layout--full { grid-template-columns: 1fr; }
.cat-pager--native { gap: 6px; flex-wrap: wrap; }
.cat-pager--native .page-numbers {
	min-width: 40px; height: 40px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 8px; background: #fff;
	color: var(--ink-2); font-weight: 600; font-size: 15px; line-height: 1;
	text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cat-pager--native a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.cat-pager--native .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cat-pager--native .page-numbers.dots { border-color: transparent; background: none; min-width: 24px; color: var(--ink-3); }
@media (max-width: 640px) {
	.cat-pager--native .page-numbers { min-width: 36px; height: 36px; padding: 0 9px; font-size: 14px; }
}

/* "от" prefix for variable products that span a price range */
.price-from { font-size: .6em; font-weight: 600; color: var(--ink-3); margin-right: 2px; align-self: center; }

/* Order-tracking form — style the default [woocommerce_order_tracking] markup */
.track_order { max-width: 560px; }
.track_order > p { margin: 0 0 18px; color: var(--ink-2); }
.track_order .form-row { margin: 0 0 16px; float: none; width: 100%; padding: 0; }
.track_order label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.track_order .input-text {
	width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: 10px; background: #fff;
	font-size: 15px; color: var(--ink); transition: border-color .15s ease;
}
.track_order .input-text::placeholder { color: var(--ink-3); }
.track_order .input-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,.02); }
.track_order button, .track_order .button {
	appearance: none; -webkit-appearance: none; cursor: pointer; border: 0;
	border-radius: 999px; background: var(--accent); color: var(--accent-ink);
	font-weight: 700; font-size: 15px; padding: 13px 32px; margin-top: 4px;
	transition: background .15s ease, transform .05s ease;
}
.track_order button:hover, .track_order .button:hover { background: var(--accent-press); }
.track_order button:active, .track_order .button:active { transform: translateY(1px); }