/* Extracted from templates/portal/base.html on 2026-08-05.
 * The three <style> blocks that sit AFTER {% block scripts %}. They must stay after it: a page
 * template filling that block (product.html does, via product-tail.css) is overridden by these,
 * and hoisting them into <head> would silently flip which rules win.
 */
#ai-chat-fab{position:fixed;bottom:20px;right:20px;z-index:9998;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#F97316,#FB923C);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(249,115,22,.35);transition:transform .2s,opacity .2s}
#ai-chat-fab:hover{transform:scale(1.1)}
#ai-chat-fab.hidden{opacity:0;pointer-events:none;transform:scale(.5)}
#contact-stack{position:fixed;right:20px;bottom:140px;z-index:9997;display:flex;flex-direction:column;gap:10px;transition:opacity .25s ease,transform .25s ease,visibility .25s}
#contact-stack.collapsed{opacity:0;visibility:hidden;transform:translateY(10px) scale(.92);pointer-events:none}
#fab-contacts{position:fixed;bottom:84px;right:20px;z-index:9998;width:46px;height:46px;border-radius:50%;background:#B83A4B;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(184,58,75,.35);transition:transform .2s}
#fab-contacts:hover{transform:scale(1.08)}
#fab-contacts-icon{transition:transform .25s ease}
#fab-contacts.open #fab-contacts-icon{transform:rotate(45deg)}
#ai-chat-popup{position:fixed;bottom:80px;right:20px;z-index:9999;width:380px;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.18);display:none;flex-direction:column;overflow:hidden;max-height:520px}
#ai-chat-popup.open{display:flex}
#ai-chat-popup .acp-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#F97316,#FB923C);color:#fff}
#ai-chat-popup .acp-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#FFF7ED;min-height:200px;max-height:340px}
#ai-chat-popup .acp-footer{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #FED7AA;background:#fff}
#ai-chat-popup .acp-footer input{flex:1;padding:9px 14px;border:1.5px solid #FED7AA;border-radius:10px;font-size:13px;outline:none;font-family:inherit}
#ai-chat-popup .acp-footer input:focus{border-color:#F97316}
#ai-chat-popup .acp-footer button{padding:9px 16px;background:#F97316;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.acp-msg{display:flex;gap:8px;align-items:flex-start}
.acp-msg.user{justify-content:flex-end}
.acp-msg.user .acp-bubble{background:#F97316;color:#fff;border-radius:14px 14px 4px 14px}
.acp-msg.ai .acp-bubble{background:#fff;border:1px solid #FED7AA;color:#334155;border-radius:14px 14px 14px 4px}
.acp-bubble{max-width:85%;padding:8px 14px;font-size:13px;line-height:1.5;word-break:break-word}
.acp-typing .acp-bubble{color:#94A3B8}
.acp-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;width:100%}
.acp-products a{display:flex;flex-direction:column;background:#fff;border:1.5px solid #FED7AA;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:all .2s}
.acp-products a:hover{border-color:#F97316;transform:translateY(-2px)}
@media(max-width:480px){
  #ai-chat-popup{ width:calc(100vw - 16px);right:8px;bottom:72px }
  #ai-chat-fab{ bottom:16px;right:16px;width:48px;height:48px }
}
#cartDrawerOverlay{position:fixed;inset:0;background:rgba(28,25,23,.5);backdrop-filter:blur(2px);z-index:10040;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#cartDrawerOverlay.open{opacity:1;visibility:visible}
/* Closed = transformed off-screen AND visibility:hidden. The transform alone leaves the
   panel rendered and focusable while aria-hidden claims it is not (Lighthouse a11y).
   The animation survives because visibility is switched at 0s with a DELAY: none on open
   (visible immediately, so the slide-in is seen), .32s on close (hidden only once the
   slide-out has finished). Transitioning visibility over .32s instead would flip it at the
   halfway point — measured: the first 160ms of the slide-in was not painted at all.
   `inert` in base.html covers the .32s while a closing drawer is still visible. */
#cartDrawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:#fff;z-index:10041;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.16);transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
#cartDrawer.open{transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
.cd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F1EDE8;flex:none}
.cd-title{font-size:17px;font-weight:800;color:#1C1917}
.cd-close{background:none;border:none;font-size:26px;line-height:1;color:var(--text-muted,#6B6560);cursor:pointer;padding:0 4px}
.cd-close:hover{color:#1C1917}
.cd-reward{padding:12px 20px;background:#FFF7ED;border-bottom:1px solid #FCE9D6;flex:none}
.cd-reward.hidden{display:none}
.cd-body{flex:1;overflow-y:auto;padding:8px 20px}
.cd-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #F5F1EC}
.cd-item img{width:56px;height:74px;object-fit:contain;background:#FAFAFA;border-radius:6px;flex:none}
.cd-item-main{flex:1;min-width:0}
.cd-item-name{font-size:13.5px;font-weight:600;color:#1C1917;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none}
.cd-item-name:hover{color:var(--accent)}
.cd-item-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.cd-qty{display:inline-flex;align-items:center;border:1.5px solid #E7E5E4;border-radius:8px;overflow:hidden}
.cd-qty button{width:28px;height:28px;background:#fff;border:none;font-size:16px;color:#57534E;cursor:pointer}
.cd-qty button:hover{background:#F5F4F2}
.cd-qty span{min-width:28px;text-align:center;font-size:13px;font-weight:700;color:#1C1917}
.cd-item-price{font-size:15px;font-weight:800;color:var(--accent)}
.cd-item-del{background:none;border:none;color:#CBD5E1;cursor:pointer;padding:2px;align-self:flex-start}
.cd-item-del:hover{color:#EF4444}
.cd-foot{flex:none;border-top:1px solid #F1EDE8;padding:16px 20px 20px;background:#fff}
.cd-row{display:flex;justify-content:space-between;font-size:14px;color:#57534E;margin-bottom:7px}
.cd-row.total{font-size:18px;font-weight:800;color:#1C1917;margin:10px 0 14px}
.cd-row.disc{color:#16a34a;font-weight:600}
.cd-checkout{display:block;width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:11px;font-size:15px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.cd-checkout:hover{background:var(--accent-hover,#c2410c)}
.cd-viewcart{display:block;text-align:center;margin-top:10px;font-size:13px;color:#78716C;text-decoration:none}
.cd-viewcart:hover{color:var(--accent)}
.cd-empty{text-align:center;padding:60px 20px;color:var(--text-muted,#6B6560)}
.cd-empty svg{opacity:.3;margin-bottom:14px}
@media(max-width:600px){
  #cartDrawer{width:100%;max-width:100%;height:auto;max-height:90vh;top:auto;bottom:0;right:0;border-radius:18px 18px 0 0;transform:translateY(100%)}
  #cartDrawer.open{transform:translateY(0)}
}
/* ═══════ MOBILE OPTIMIZATION (best practices) ═══════ */

/* ─── Sticky Add to Cart Bar ─── */
.pd-sticky-bar{position:fixed;bottom:-80px;left:0;right:0;z-index:997;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -4px 20px rgba(0,0,0,.1);transition:bottom .3s ease;padding:0 16px}@media(max-width:768px){.pd-sticky-bar.visible{bottom:0!important;margin:0;padding:0 16px;padding-bottom:calc(62px + env(safe-area-inset-bottom, 0))}}
.pd-sticky-bar.visible{bottom:0}
.pd-sticky-inner{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;gap:12px;max-width:1200px;margin:0 auto;padding:10px 0}
.pd-sticky-coupon{display:none}
.pd-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pd-sticky-price{font-size:20px;font-weight:700;color:var(--accent,#EF4444)}
.pd-sticky-name{font-size:13px !important;font-weight:600 !important;color:#1C1917 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;margin-bottom:2px;display:block !important}
.pd-sticky-meta{min-width:0 !important;flex:1 1 auto !important;overflow:hidden}
.pd-sticky-product{flex:1 1 auto !important;min-width:0 !important;max-width:none !important;overflow:hidden}
.pd-sticky-cart{flex-shrink:0 !important;white-space:nowrap !important}
.pd-sticky-btn{padding:12px 28px;background:var(--accent,#EF4444);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;min-height:48px;transition:background .2s}
.pd-sticky-btn:active{background:#DC2626}

/* ─── Product Card Mobile Optimizations ─── */
.prod-card{border:1px solid #e8edf5 !important}
.prod-card button:not(.card-wish-btn){min-height:44px !important}

/* ─── Product Page Add to Cart button ─── */
.pd-add-cart{width:100%;padding:14px 0;background:var(--accent,#EF4444);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;min-height:52px;transition:all .2s;letter-spacing:.3px}
.pd-add-cart:active{transform:scale(.98);background:#DC2626}

@media(max-width:768px){
  /* ─── Product Cards: 2-column grid ─── */
  .prod-grid-cat{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
  .subcat-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}

  /* ─── Product card touch-friendly ─── */
  .prod-card{border-radius:10px !important}
  .prod-card button:not(.card-wish-btn){min-height:44px !important;font-size:13px !important;border-radius:8px !important}

  /* ─── Sorting: horizontal scroll ─── */
  .sort-btn{padding:6px 12px !important;font-size:12px !important;white-space:nowrap !important;flex-shrink:0 !important}

  /* ─── Community section: 1 column ─── */
  .community-section .container > div{grid-template-columns:1fr !important}

  /* ─── Sticky bar mobile ─── */
  .pd-sticky-inner{padding:8px 0}
  .pd-sticky-btn{padding:12px 20px;font-size:13px;border-radius:8px}
  .pd-sticky-coupon{display:block;text-align:center;padding:4px 0 6px}

  /* ─── Product page: full-width image ─── */
  .pd-gallery{border-radius:0 !important;margin:0 calc(-1 * var(--container-pad)) !important}

  /* ─── Hide hover effects on touch ─── */
  .prod-card{transform:none !important;box-shadow:none !important}

  /* ─── Category header compact ─── */
  .cat-header h1{font-size:22px !important}

  /* ─── Bottom padding for sticky bar ─── */
  body.has-sticky-bar{padding-bottom:80px}

  /* ─── Features cards: 1 column on small screens ─── */
  .pd-features-cards{grid-template-columns:1fr !important}

  /* ─── Delivery row: stack on mobile ─── */
  .pd-delivery-row{flex-direction:column !important;gap:6px !important}
}

@media(max-width:480px){
  /* ─── Smaller gaps and padding on phones ─── */
  .prod-grid-cat{gap:8px !important}
  .prod-card div[style*="padding:12px"]{padding:8px 10px 12px !important}
  .prod-card a[style*="font-size:13px"]{font-size:12px !important}

  /* ─── Sticky bar: keep horizontal layout on phones (was column before) ─── */
  .pd-sticky-inner{flex-direction:row;gap:8px}
}

/* ─── Image skeleton loader ─── */
.img-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── Header contact panel ────────────────────────────────────────────────────
   Ported from Mirava (b14db263) 2026-08-19.

   ⚠️ Extracted from <style> contents ONLY. A first pass searched the whole template, and the
   rule pattern `selector { … }` matched a JavaScript function body and a block of markup —
   both contain braces, both mention tb-contact — so a stylesheet ended up with
   `document.getElementById(...)` and Ukrainian copy in it.

   ⚠️ And @media wrappers are kept. A second pass flattened them, so the MOBILE rule
   `top:auto; bottom:0; left:0` — a sheet across the bottom — applied on desktop, where this is
   a card dropping from under the button.

   Two deliberate changes: the accent was Mirava's orange as a literal and reads var(--accent);
   `.mirava` scoping is dropped, since that class names another storefront and never matches. */
/* The callback button had NO rule at all here, so it rendered as a default browser button —
   grey, boxy, wrong beside the pill next to it. Mirava does style it, but as
   `body.mirava .tb-callback`, and this storefront's body class comes from brand.BODY_CLASS, so
   that selector never matched. Unscoped, and the accent follows the theme rather than being
   Mirava's orange twice over. */
.tb-callback { color: var(--accent); text-decoration: underline; font-weight: 500; font-size: 13px; line-height: 1; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.tb-callback:hover { opacity: .78; }
.tb-contact { display: inline-flex; align-items: center; gap: 5px; color: #292524; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; background: #FFF; border: 1px solid #E7DED4; border-radius: 999px; padding: 6px 10px; height: 28px; box-sizing: border-box; white-space: nowrap; box-shadow: 0 1px 2px rgba(65,45,29,.04); transition: color .15s ease, border-color .15s ease, background .15s ease; }
.tb-contact:hover { color: var(--accent); border-color:#FDBA74; background:#FFF7ED; }
.tb-contact svg { display:block; flex:0 0 auto; }
.tb-contact .tb-contact-chevron { margin-left:1px; transition:transform .15s ease; }
.tb-contact[aria-expanded="true"] .tb-contact-chevron { transform:rotate(180deg); }
.contact-panel-overlay { position: fixed; inset: 0; z-index: 10020; background: transparent; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; pointer-events: none; }
.contact-panel-overlay.open { opacity: 1; visibility: visible; }
.contact-panel { position: fixed; z-index: 10021; top: 37px; right: max(22px, calc((100vw - 1240px) / 2)); width: min(378px, calc(100vw - 32px)); max-height: calc(100vh - 58px); overflow: auto; padding: 17px; border: 1px solid #E8DED2; border-radius: 16px; background: linear-gradient(180deg,#FFFEFC 0%,#FFF 100%); box-shadow: 0 18px 48px rgba(65, 45, 29, .16), 0 2px 8px rgba(65, 45, 29, .08); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; }
.contact-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.contact-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.contact-panel-title { margin:0; color:#1C1917; font-size:18px; line-height:1.2; letter-spacing:-.2px; }
.contact-panel-phone { color:#1C1917; font-size:16px; font-weight:750; letter-spacing:-.2px; text-decoration:none; }
.contact-panel-phone:hover { color:var(--accent); }
.contact-panel-close { width:30px; height:30px; flex:0 0 30px; border:0; border-radius:50%; background:#F5F2EE; color:#78716C; cursor:pointer; font-size:20px; line-height:1; }
.contact-panel-close:hover { background:#FDEDE3; color:var(--accent); }
.contact-live-card { padding:14px; border:1px solid #B7E8D0; border-radius:14px; background:linear-gradient(145deg,#F0FBF6 0%,#E9F8F1 100%); }
.contact-live-grid { display:grid; grid-template-columns:1fr 78px; gap:12px; align-items:center; }
.contact-online { display:inline-flex; align-items:center; gap:6px; color:#087A50; font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.contact-online-dot { width:8px; height:8px; border-radius:50%; background:#18B878; box-shadow:0 0 0 0 rgba(24,184,120,.4); animation:contactPulse 1.8s infinite; }
.contact-live-title { margin:6px 0 2px; color:#143C2E; font-size:19px; font-weight:800; letter-spacing:-.35px; }
.contact-live-subtitle { color:#355F50; font-size:12px; font-weight:650; line-height:1.35; }
.contact-live-features { margin-top:7px; color:#527367; font-size:10.5px; line-height:1.4; }
.contact-live-qr { display:block; width:78px; height:78px; padding:5px; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(16,86,61,.1); }
.contact-live-button { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:11px; padding:10px 12px; border-radius:10px; background:#11875A; color:#fff; text-decoration:none; font-size:13px; font-weight:750; transition:background .15s ease,transform .15s ease; }
.contact-live-button:hover { background:#0B704A; transform:translateY(-1px); }
.contact-manager-hours { margin-top:8px; color:#638074; font-size:10.5px; text-align:center; }
.contact-section-label { margin:13px 0 7px; color:#A16A44; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.contact-messengers { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.contact-messenger { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:58px; padding:8px 5px; border:1px solid #ECE5DE; border-radius:11px; background:#fff; color:#3F3832; text-decoration:none; font-size:11px; font-weight:700; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.contact-messenger:hover { border-color:#F4B183; background:#FFF8F3; transform:translateY(-1px); }
.contact-messenger-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; color:#fff; font-size:13px; }
.contact-phone-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px; border:1px solid #ECE5DE; border-radius:11px; background:#FBFAF8; }
.contact-phone-label { display:block; margin-bottom:2px; color:#8A8179; font-size:10px; }
.contact-callback-link { flex:0 0 auto; border:0; background:none; color:var(--accent); font:700 11px/1.2 inherit; cursor:pointer; padding:5px 0; }
.contact-form-link { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:9px 2px 2px; color:#6F665F; text-decoration:none; font-size:11px; font-weight:650; }
.contact-form-link:hover { color:var(--accent); }
@media(prefers-reduced-motion:reduce){
  .contact-online-dot { animation:none }
  .contact-live-button,.contact-messenger { transition:none }
}
@media(max-width:768px) {
  body.contact-panel-open { overflow:hidden; }
  .contact-panel-overlay { background:rgba(15,23,42,.34); pointer-events:auto; }
  .tb-phone, .tb-callback, .tb-contact { display: none !important; }
  .contact-panel { top:auto; right:0; bottom:0; left:0; width:auto; max-height:88vh; padding:20px 18px calc(22px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; transform:translateY(24px); }
  .contact-panel-title { font-size:21px; }
  .contact-panel-phone { font-size:16px; }
  .contact-live-grid { grid-template-columns:1fr; }
  .contact-live-qr { display:none; }
  .contact-live-title { font-size:21px; }
}

/* ─── Catbar: "All genres" ────────────────────────────────────────────────────
   Ported from Mirava (b14db263). The bar renders the first twelve genres, so without this pill
   there is no route from it to the rest of the catalogue. On mobile it parks against the right
   edge of the scrolling row — which is what .portal-catbar-shell (position:relative) is for. */
.portal-catbar-shell { position: relative; min-width: 0; display: flex; align-items: center; }
.catbar-all-genres { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 10px; padding: 6px 12px; border: 1px solid #DDE2EA; border-radius: 20px; background: #fff; color: #555; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.catbar-all-genres:hover { border-color: var(--accent); color: var(--accent); background: #FFF7ED; }
@media(max-width:768px) {
  .catbar-all-genres { position: absolute; right: 0; top: 50%; z-index: 3; transform: translateY(-50%); margin-left: 0; padding: 7px 13px; border: 1px solid var(--accent); border-radius: 20px; background: var(--accent); box-shadow: -14px 0 18px 8px #f8f9fc; color: #fff; }
}

/* ─── Footer ──────────────────────────────────────────────────────────────────
   Ported from Mirava (b14db263) 2026-08-19: brand block with the wordmark and a line about the
   shop, a chat card, labelled messenger pills, three link columns, and the phone under a rule
   in the last one. Renamed .mirava-footer* -> .site-footer*, because a class named after one
   storefront is how a rule silently stops applying on another (see .tb-callback, which had no
   styling here for exactly that reason). The heading colour was Mirava's warm literal and reads
   var(--accent). Messenger colours are the platforms' own and stay. */
.site-footer { background:#1C1917;color:#fff }
.site-footer-main { display:grid;grid-template-columns:1.45fr .82fr .9fr .95fr;gap:48px;padding-top:46px!important;padding-bottom:42px!important }
.site-footer-logo { display:inline-flex!important;align-items:center;text-decoration:none }
.site-footer-logo span { font:700 30px/1 Georgia,serif;letter-spacing:-.5px;color:#fff }
.site-footer-brand>p { max-width:370px;margin:17px 0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.7 }
.site-footer-chat { width:100%;max-width:370px;display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:12px 13px;background:rgba(255,255,255,.055);color:#fff;text-align:left;font-family:inherit;cursor:pointer }
.site-footer-chat>span:nth-child(2) { display:grid;gap:2px;flex:1 }
.site-footer-chat b { font-size:12px }
.site-footer-chat small { font-size:10.5px;color:rgba(255,255,255,.54) }
.site-footer-chat>span:last-child { color:var(--accent) }
.site-footer-online { width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.13) }
.site-footer-social-title { margin-top:18px;font-size:10px;font-weight:900;letter-spacing:1px;color:rgba(255,255,255,.42);text-transform:uppercase }
.site-footer-messengers { display:flex;gap:7px;margin-top:9px;max-width:370px }
.site-footer-messenger { display:flex!important;align-items:center;gap:7px;padding:7px 9px 7px 7px;border:1px solid rgba(255,255,255,.11);border-radius:10px;color:rgba(255,255,255,.74);text-decoration:none;font-size:10.5px }
.site-footer-messenger>span { width:23px;height:23px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800 }
.site-footer-messenger.telegram>span { background:#229ED9 }
.site-footer-messenger.viber>span { background:#7360F2 }
.site-footer-messenger.whatsapp>span { background:#25D366 }
.site-footer-column h2 { margin:4px 0 17px;font-size:11px;font-weight:900;letter-spacing:1.1px;color:var(--accent);text-transform:uppercase }
.site-footer-column>a,.site-footer-column>button { display:flex!important;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:6px 0;color:rgba(255,255,255,.62);text-decoration:none;font:600 12.5px/1.45 inherit;text-align:left;cursor:pointer }
.site-footer-column>a:hover,.site-footer-column>button:hover { color:#fff }
.site-footer-featured { color:#fff!important;justify-content:flex-start!important;gap:8px }
.site-footer-featured span { color:var(--accent) }
.site-footer-contact { margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09);display:grid;gap:4px }
.site-footer-contact small { font-size:10px;color:rgba(255,255,255,.4) }
.site-footer-contact a { color:#fff;text-decoration:none;font-size:13px;font-weight:800 }
.site-footer-bottom { border-top:1px solid rgba(255,255,255,.08);background:#151311 }
.site-footer-bottom>.container { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:rgba(255,255,255,.38);font-size:11px }
.site-footer-bottom nav { display:flex;align-items:center;gap:18px }
.site-footer-bottom a { color:rgba(255,255,255,.45);text-decoration:none }
.site-footer-bottom a:hover { color:#fff }
@media(max-width:900px){
  .site-footer-main { grid-template-columns:1.4fr 1fr 1fr;gap:30px }
  .site-footer-brand { grid-column:1/-1 }
  .site-footer-brand>p,.site-footer-chat { max-width:520px }
}
@media(max-width:620px){
  .site-footer-main { grid-template-columns:1fr 1fr;gap:30px 22px;padding-top:32px!important;padding-bottom:32px!important }
  .site-footer-brand { grid-column:1/-1 }
  .site-footer-messengers { display:grid;grid-template-columns:repeat(3,1fr);max-width:none }
  .site-footer-messenger { justify-content:center;padding:8px 5px }
  .site-footer-column:last-child { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:20px }
  .site-footer-column:last-child h2,.site-footer-column:last-child .site-footer-contact { grid-column:1/-1 }
  .site-footer-bottom>.container { align-items:flex-start;flex-direction:column;padding-top:17px!important;padding-bottom:17px!important }
  .site-footer-bottom nav { gap:7px 14px;flex-wrap:wrap }
}

/* Cart drawer: items the catalogue no longer answers for. Stated rather than silently dropped
   — the drawer used to count them in "Items (N)" while the list above showed nothing. */
.cd-note{margin:0 0 10px;padding:9px 11px;border-radius:8px;background:#FFFBEB;
         border:1px solid #FCD34D;color:#92400E;font-size:12.5px;line-height:1.4}
