/* ============================================================
   Wolvex — Frontend layout: header, nav, footer, cookie banner,
   WhatsApp button. All values from the approved mockup, with one
   deliberate change: the logo is a static mark on a white chip so
   it reads clearly against the dark bar (no rings, no animation).
   ============================================================ */

/* ================= HEADER : row 1 (dark) ================= */
header.site-header{position:sticky;top:0;z-index:200;}
.bar-top{background:var(--ink-deep);color:#fff;padding:12px 0;}
.bar-top .wrap{display:flex;align-items:center;gap:20px;}

.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo-mark{width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));}
.logo-wordmark{font-family:var(--font-display);font-weight:800;font-size:1.35em;color:#fff;letter-spacing:.01em;}
.logo-wordmark sup{font-size:.4em;}

.deliver-to{display:flex;align-items:center;gap:8px;font-size:.85em;line-height:1.25;color:#dfe4f0;flex-shrink:0;white-space:nowrap;}
.deliver-to strong{display:block;color:#fff;font-size:1.05em;}
.deliver-to svg{flex-shrink:0;color:#9fb0d8;}

.search-form{flex:1;display:flex;max-width:720px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08);}
.search-select{border:none;background:#e9edf6;color:var(--ink-deep);font-weight:700;font-size:.85em;padding:0 12px;border-right:1px solid #cfd6e6;max-width:180px;}
.search-input{flex:1;border:none;padding:0 16px;font-size:1em;min-height:46px;color:var(--ink-deep);min-width:0;}
.search-input:focus{outline:none;}
.search-btn{background:var(--red);border:none;color:#fff;padding:0 22px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.search-btn:hover{background:var(--red-deep);}

.header-actions{display:flex;align-items:center;gap:22px;margin-left:auto;flex-shrink:0;}
.header-actions a{text-decoration:none;color:#fff;font-size:.85em;line-height:1.25;}
.header-actions .hi{color:#c7cfe3;display:block;}
.header-actions strong{display:block;font-size:1.02em;font-weight:700;}
.header-actions form{margin:0;}
.header-actions button.action{background:none;border:none;padding:0;cursor:pointer;color:#fff;font-size:.85em;line-height:1.25;text-align:left;font-family:inherit;}
.basket-link{display:flex;align-items:center;gap:8px;}
.basket-count{background:var(--red);border-radius:999px;padding:1px 8px;font-size:.78em;font-weight:800;}

/* ================= HEADER : row 2 (mid navy) ================= */
.bar-nav{background:var(--ink);color:#fff;}
.bar-nav .wrap{display:flex;align-items:center;gap:24px;padding:10px 20px;}
.all-cats{display:flex;align-items:center;gap:8px;font-weight:800;cursor:pointer;white-space:nowrap;padding:6px 4px;background:none;border:none;color:#fff;font-size:.95em;flex-shrink:0;}
/* min-width:0 lets this flex item actually shrink and scroll internally
   instead of overflowing the row and pushing the phone number off-screen
   (flex items default to a content-based min-width, which blocks shrinking).
   The mask fades the trailing edge so a clipped link reads as "scroll for
   more" instead of abruptly cut-off text. */
.bar-nav nav{
  display:flex;gap:20px;flex:1;min-width:0;overflow-x:auto;
  mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  padding-right:12px;
}
.bar-nav nav a{color:#e3e8f3;text-decoration:none;font-weight:600;font-size:.92em;white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent;}
.bar-nav nav a:hover{border-bottom-color:var(--red);color:#fff;}
.bar-nav .call{margin-left:auto;display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;font-size:.92em;flex-shrink:0;}
.bar-nav .call svg{color:var(--red);flex-shrink:0;}

.text-size-control{display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px;flex-shrink:0;}
.text-size-control button{width:30px;height:30px;border-radius:999px;border:none;background:transparent;color:#fff;font-weight:800;cursor:pointer;font-size:.8em;}
.text-size-control button:hover{background:rgba(255,255,255,.15);}
.text-size-control button[aria-pressed="true"]{background:var(--red);}

.menu-toggle{display:none;}

/* ================= BACK TO TOP ================= */
.back-top{display:block;width:100%;background:var(--ink-mid);color:#fff;text-align:center;padding:16px;font-weight:700;text-decoration:none;font-size:.92em;}
.back-top:hover{background:var(--ink);}

/* ================= FOOTER ================= */
footer.site-footer{background:var(--ink-deep);color:#c7cfe3;padding:44px 0 22px;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px;}
.footer-brand p{color:#9fabc9;max-width:32ch;}
.footer-address{color:#9fabc9;font-size:.92em;max-width:40ch;margin:12px 0 0;line-height:1.5;}
.footer-address strong{color:#dfe4f0;}
.footer-address a{color:#c7cfe3;text-decoration:underline;font-weight:600;}
.footer-address a:hover{color:#fff;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;}
.footer-social a:hover{background:var(--red);border-color:var(--red);}
footer.site-footer h4{color:#fff;font-family:var(--font-body);font-size:.95em;letter-spacing:.03em;text-transform:uppercase;margin-bottom:14px;}
footer.site-footer ul{display:flex;flex-direction:column;gap:11px;}
footer.site-footer a{color:#c7cfe3;text-decoration:none;font-weight:600;font-size:.95em;}
footer.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8b98b8;font-size:.88em;}

/* ================= COOKIE BANNER ================= */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--paper);border-top:3px solid var(--ink);box-shadow:0 -14px 34px -18px rgba(22,31,51,.45);padding:18px 0;display:none;}
.cookie-banner[data-visible="true"]{display:block;}
.cookie-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cookie-banner h2{font-size:1.15em;margin-bottom:4px;}
.cookie-banner p{margin:0;color:var(--slate);font-size:.92em;max-width:64ch;}
.cookie-actions{display:flex;gap:12px;flex-shrink:0;}

/* ================= WHATSAPP FLOATING BUTTON ================= */
.whatsapp-fab{position:fixed;right:20px;bottom:20px;z-index:400;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);text-decoration:none;transition:transform .15s ease;}
.whatsapp-fab:hover{transform:scale(1.08);}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .bar-top .wrap{flex-wrap:wrap;}
  .search-form{order:3;max-width:100%;flex:1 1 100%;}
  .deliver-to{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
.nav-close{display:none;}

@media (max-width:720px){
  .bar-nav nav{position:fixed;inset:0 0 0 0;top:96px;background:var(--ink);flex-direction:column;padding:20px;transform:translateX(-100%);transition:transform .25s ease;z-index:150;overflow-y:auto;mask-image:none;-webkit-mask-image:none;}
  .bar-nav nav.open{transform:translateX(0);}
  .bar-nav nav a{font-size:1.2em;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.12);}
  .bar-nav .call span{display:none;}
  .header-actions a.hide-mobile{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .cookie-banner .wrap{flex-direction:column;align-items:flex-start;}

  /* Explicit close (X) inside the full-screen mobile menu — the trigger
     button that opens it is covered by this same overlay once it's open,
     so without this the menu could never be closed by tapping it again. */
  .nav-close{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:auto;margin-bottom:10px;
    border-radius:8px;border:1px solid rgba(255,255,255,.3);
    background:none;color:#fff;cursor:pointer;
  }
}