/* =====================================================================
   JHUMANA FOODS — Premium Grocery Ecommerce
   style.css  ·  Design tokens, signature seal, components, dark mode
   Built by R-Creation
   ===================================================================== */

/* ----------  DESIGN TOKENS  ---------- */
:root {
  /* Surfaces — clean white */
  --paper:        #FFFFFF;
  --paper-2:      #F3F5F8;
  --surface:      #FFFFFF;
  --surface-2:    #F4F6FA;

  /* Ink / text */
  --ink:          #1E1710;
  --ink-2:        #4A4239;
  --muted:        #877B6C;
  --line:         rgba(17, 24, 39, 0.10);
  --line-2:       rgba(17, 24, 39, 0.055);

  /* Brand — sampled & cleaned from the Jhumana seal */
  --red:          #C4202F;
  --red-deep:     #9E1322;
  --red-soft:     #F6E2E3;
  --gold:         #E2A12B;
  --gold-soft:    #F4D58A;
  --gold-tint:    #FBF0D8;
  --navy:         #15233E;
  --navy-2:       #223352;
  --green:        #2E854B;
  --green-soft:   #E4F1E7;

  /* Effects */
  --shadow-sm:    0 1px 2px rgba(30,23,16,.06), 0 1px 3px rgba(30,23,16,.05);
  --shadow:       0 6px 20px -8px rgba(30,23,16,.18), 0 2px 8px -4px rgba(30,23,16,.10);
  --shadow-lg:    0 24px 60px -22px rgba(30,23,16,.30), 0 8px 24px -12px rgba(30,23,16,.14);
  --shadow-red:   0 16px 38px -14px rgba(196,32,47,.45);
  --radius:       18px;
  --radius-lg:    26px;
  --ring:         0 0 0 3px rgba(196,32,47,.28);

  --header-h:     132px;
  --container:    1280px;
}

html.dark {
  --paper:        #14100B;
  --paper-2:      #1B160F;
  --surface:      #1E1810;
  --surface-2:    #251E15;
  --ink:          #F6EFE3;
  --ink-2:        #D8CCBA;
  --muted:        #A99B88;
  --line:         rgba(255,255,255,.10);
  --line-2:       rgba(255,255,255,.06);

  --red:          #E5394A;
  --red-deep:     #C4202F;
  --red-soft:     rgba(229,57,74,.14);
  --gold:         #F0BB52;
  --gold-soft:    #6b531f;
  --gold-tint:    rgba(240,187,82,.12);
  --navy:         #C9D6EE;
  --navy-2:       #97A8C8;
  --green:        #4FB873;
  --green-soft:   rgba(79,184,115,.14);

  --shadow-sm:    0 1px 2px rgba(0,0,0,.5);
  --shadow:       0 8px 26px -10px rgba(0,0,0,.7);
  --shadow-lg:    0 30px 70px -24px rgba(0,0,0,.8);
  --shadow-red:   0 18px 40px -14px rgba(229,57,74,.40);
}

/* ----------  BASE  ---------- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: clip;
}

.font-display { font-family: 'Fraunces', Georgia, serif; }
.container-jf { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width:1024px){ .container-jf{ padding-inline: 2rem; } }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red); display: inline-flex; align-items: center; gap: .55rem;
}
html.dark .eyebrow { color: var(--gold); }
.eyebrow::before { content:""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }

/* Section reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ----------  SIGNATURE: rotating brand seal  ---------- */
.jf-seal { position: relative; display: grid; place-items: center; }
.jf-seal__ring { animation: jf-spin 26s linear infinite; transform-origin: center; }
@keyframes jf-spin { to { transform: rotate(360deg); } }
.jf-seal__text { fill: #fff; font-family:'Plus Jakarta Sans',sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 2.4px; }
.jf-seal__core { font-family:'Fraunces',serif; font-weight: 900; }
/* real HD brand badge */
.jf-badge-img { display:block; width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.jf-badge-img--spin { animation: jf-spin 26s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce){ .jf-badge-img--spin{ animation: none; } }

/* ===== Google Translate — hide all default chrome ===== */
#google_translate_element{ position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; }
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon, .goog-te-balloon-frame{ display:none !important; }
iframe.skiptranslate{ visibility:hidden !important; height:0 !important; border:0 !important; }
body{ top:0 !important; position:static !important; }
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

/* ===== Language switcher (EN / IT) ===== */
.jf-flag{ width:20px; height:14px; border-radius:3px; overflow:hidden; display:inline-block; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(30,23,16,.12); vertical-align:middle; }
.jf-flag svg{ display:block; width:100%; height:100%; }
.jf-lang{ position:relative; }
.jf-lang__btn{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 9px; border-radius:12px;
  color:var(--ink); background:transparent; border:1px solid transparent; cursor:pointer;
  transition:background .2s, border-color .2s; }
.jf-lang__btn:hover{ background:var(--surface-2); border-color:var(--line); }
.jf-lang__code{ font-weight:800; font-size:.82rem; letter-spacing:.04em; }
.jf-lang__chev{ opacity:.5; transition:transform .25s ease; }
.jf-lang.open .jf-lang__chev{ transform:rotate(180deg); }
.jf-lang__menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:172px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:90; }
.jf-lang.open .jf-lang__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.jf-lang__opt{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:9px;
  background:transparent; border:0; cursor:pointer; color:var(--ink); font-size:.9rem; font-weight:600;
  text-align:left; transition:background .15s; }
.jf-lang__opt:hover{ background:var(--surface-2); }
.jf-lang__opt[aria-selected="true"]{ background:var(--red-soft); color:var(--red); }
@media (max-width:480px){ .jf-lang__code{ display:none; } .jf-lang__btn{ padding:0 8px; } }

/* ===== Footer — light & premium ===== */
.jf-footer{ position:relative; color:var(--ink-2);
  background:
    radial-gradient(1100px 320px at 50% -30%, var(--red-soft), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--paper) 55%, var(--paper-2) 100%);
  border-top:1px solid var(--line); }
.jf-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--gold) 50%, var(--red)); }
.jf-footer h4{ color:var(--ink); font-weight:800; }
.jf-footer .foot-brand{ color:var(--ink); }
.jf-footer .foot-link{ color:var(--ink-2); transition:color .2s, padding-left .2s; }
.jf-footer .foot-link:hover{ color:var(--red); padding-left:4px; }
.jf-foot-social{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
  transition:transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s; }
.jf-foot-social:hover{ background:var(--red); color:#fff; border-color:var(--red);
  transform:translateY(-2px); box-shadow:var(--shadow-red); }
.jf-foot-ico{ color:var(--red); flex:0 0 auto; }
.jf-pay{ display:inline-flex; align-items:center; height:30px; padding:0 11px; border-radius:8px;
  background:var(--surface); border:1px solid var(--line); font-size:.7rem; font-weight:800;
  color:var(--ink-2); letter-spacing:.02em; box-shadow:var(--shadow-sm); }
.jf-foot-divider{ height:1px; background:var(--line); border:0; }

/* ===== Single Product page ===== */
.pd-thumb{ border-radius:12px; overflow:hidden; border:2px solid var(--line); cursor:pointer; transition:border-color .2s, transform .2s; background:var(--surface-2); }
.pd-thumb:hover{ transform:translateY(-2px); }
.pd-thumb.is-active{ border-color:var(--red); }
.pd-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface); }
.pd-qty button{ width:42px; height:46px; font-size:1.3rem; font-weight:700; color:var(--ink); background:transparent; cursor:pointer; transition:background .15s; }
.pd-qty button:hover{ background:var(--surface-2); color:var(--red); }
.pd-qty input{ width:46px; height:46px; text-align:center; border:0; background:transparent; font-weight:800; color:var(--ink); outline:none; }
.pd-tab{ padding:12px 18px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; background:transparent; transition:color .2s, border-color .2s; }
.pd-tab:hover{ color:var(--ink); }
.pd-tab.is-active{ color:var(--red); border-bottom-color:var(--red); }

/* ===== Single Category page ===== */
.cat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 20px; margin-bottom:18px; }
.cat-hero{ background-size:cover; background-position:center; border-radius:var(--radius-lg); }

/* ===== Single Vendor page ===== */
.vendor-cover{ height:240px; background-size:cover; background-position:center; border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.vendor-head{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; margin-top:-54px; position:relative; }
.vendor-logo{ width:108px; height:108px; border-radius:24px; display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:900; font-size:2.6rem; color:#fff; border:5px solid var(--surface); box-shadow:var(--shadow); flex:0 0 auto; }
.vendor-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; text-align:center; }
@media (max-width:640px){ .vendor-head{ margin-top:-44px; } .vendor-logo{ width:84px; height:84px; font-size:2rem; border-radius:20px; } }

/* ===== FAQ accordion (Contact page) ===== */
.faq summary{ list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .faq-x{ display:inline-block; transition:transform .25s ease; line-height:1; }
.faq[open] .faq-x{ transform:rotate(45deg); }

/* ===== Cart page ===== */
.cart-head{ grid-template-columns:2.5fr 1fr 1.4fr 1fr 40px; gap:16px; padding:0 4px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; border-bottom:1px solid var(--line); }
.cart-row{ display:grid; grid-template-columns:2.5fr 1fr 1.4fr 1fr 40px; gap:16px; align-items:center; padding:18px 4px; border-bottom:1px solid var(--line); }
.cart-del{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--muted); transition:all .2s; }
.cart-del:hover{ background:var(--red-soft); color:var(--red); }
.pd-qty--sm button{ width:34px; height:38px; font-size:1.1rem; }
.pd-qty--sm input{ width:38px; height:38px; }
@media (max-width:639px){
  .cart-row{ grid-template-columns:1fr auto; gap:12px; }
  .cart-row > .pd-qty{ grid-column:1; }
  .cart-row > [data-line]{ grid-column:2; }
  .cart-row > .cart-del{ position:absolute; }
  .cart-row{ position:relative; }
  .cart-row > .cart-del{ top:18px; right:0; }
}

/* ===== Checkout ===== */
.pay-opt{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px; cursor:pointer; transition:border-color .2s, background .2s; }
.pay-opt:hover{ border-color:var(--red); }
.pay-opt.is-active{ border-color:var(--red); background:var(--red-soft); }
.pay-opt .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex:0 0 auto; }
.pay-opt.is-active .dot{ border-color:var(--red); }
.pay-opt.is-active .dot::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--red); }

/* ===== Track timeline ===== */
.track-time{ position:relative; }
.track-step{ display:grid; grid-template-columns:auto 1fr; gap:16px; position:relative; }
.track-step::before{ content:""; position:absolute; left:17px; top:34px; bottom:-4px; width:2px; background:var(--line); }
.track-step:last-child::before{ display:none; }
.track-dot{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:2px solid var(--line); color:var(--muted); z-index:1; }
.track-step.is-done .track-dot{ background:var(--green); border-color:var(--green); color:#fff; }
.track-step.is-done::before{ background:var(--green); }
.track-step.is-current .track-dot{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 0 0 5px var(--red-soft); }

/* ===== Auth (login/register) ===== */
.auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:34px; }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:5px; margin-bottom:26px; }
.auth-tab{ padding:11px; border-radius:10px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .2s; }
.auth-tab.is-active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.auth-input{ width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--ink); outline:none; transition:border-color .2s; }
.auth-input:focus{ border-color:var(--red); }
.auth-social{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px; border:1.5px solid var(--line); border-radius:12px; font-weight:600; color:var(--ink); transition:all .2s; }
.auth-social:hover{ background:var(--surface-2); border-color:var(--muted); }

/* ===== Event & Blog cards ===== */
.ecard, .bcard{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s; }
.ecard:hover, .bcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.ecard__media, .bcard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.ecard__date{ position:absolute; top:12px; left:12px; background:var(--surface); border-radius:12px; padding:8px 12px; text-align:center; box-shadow:var(--shadow); }
.bcard__cat{ position:absolute; top:12px; left:12px; background:var(--red); color:#fff; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:999px; }
.prose-jf p, .prose-jf h2, .prose-jf blockquote, .prose-jf ul{ max-width:100%; }

/* ===== User Dashboard ===== */
.dash-side{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px; }
.dash-user{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.dash-avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }
.dash-nav-list{ display:flex; flex-direction:column; gap:3px; }
.dash-nav{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 13px; border-radius:12px; color:var(--ink-2); font-weight:600; cursor:pointer; background:transparent; border:0; text-align:left; transition:background .18s, color .18s; }
.dash-nav:hover{ background:var(--surface-2); color:var(--ink); }
.dash-nav.is-active{ background:var(--red-soft); color:var(--red); }
.dash-nav--out{ color:var(--muted); margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; padding-top:14px; }
.dash-nav--out:hover{ color:var(--red); background:transparent; }
.dash-title{ font-family:'Fraunces',serif; font-weight:900; font-size:1.6rem; color:var(--ink); }
.dash-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; }
.dash-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.dash-table{ width:100%; border-collapse:collapse; min-width:520px; }
.dash-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; padding:13px 16px; background:var(--surface-2); }
.dash-table td{ padding:14px 16px; border-top:1px solid var(--line); color:var(--ink-2); font-size:.92rem; }
.st-pill{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:999px; color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.st-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c); }
.dash-cc{ color:#fff; border-radius:18px; padding:22px; box-shadow:var(--shadow); }

/* ----------  HEADER  ---------- */
/* header + mount are display:contents so the sticky bars' containing block is
   <body> (tall) - lets the mainbar + nav stay stuck through the whole page. */
#jf-header-mount, .jf-header { display: contents; }
.jf-header.scrolled { }
.jf-header.scrolled .jf-mainbar { box-shadow: var(--shadow); }
/* topbar scrolls away naturally (no collapse) */
.jf-topbar { background: var(--navy); color: #f3ede2; max-height: 60px; overflow: hidden; transition: all .4s ease; }
html.dark .jf-topbar { background: #0d0a06; }

/* Announcement strip + top utility bar */
.jf-announce { background: linear-gradient(90deg, var(--red-deep), var(--red) 60%, var(--red-deep)); color: #fff; max-height: 48px; overflow: hidden; transition: all .4s ease; }
/* announce scrolls away naturally (no collapse) */
.jf-announce__x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; color: #fff; opacity: .8; border-radius: 7px; transition: background .2s, opacity .2s; }
.jf-announce__x:hover { opacity: 1; background: rgba(255,255,255,.16); }
.jf-toplinks a { color: #e7e0d4; font-weight: 600; transition: color .2s; white-space: nowrap; }
.jf-toplinks a:hover { color: var(--gold); }
.jf-signin { display: inline-flex; align-items: center; gap: 7px; background: var(--green); color: #fff; font-weight: 700; padding: 6px 15px; border-radius: 999px; transition: filter .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.jf-signin:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--green) 70%, transparent); }
.jf-mainbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .35s ease; }

.jf-iconbtn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--ink); transition: background .25s, color .25s, transform .25s; }
.jf-iconbtn:hover { background: var(--red-soft); color: var(--red); transform: translateY(-2px); }
.jf-badge-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; display: grid; place-items: center; border: 2px solid var(--surface); }

/* Nav links */
.jf-nav { display: flex; align-items: center; gap: 2px; }
.jf-nav > li > a, .jf-nav > li > button {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; font-weight: 600; font-size: .94rem; color: var(--ink-2);
  border-radius: 12px; transition: color .25s;
}
.jf-nav > li > a::after, .jf-nav > li > button::after {
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background: var(--red); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.jf-nav > li:hover > a, .jf-nav > li:hover > button { color: var(--ink); }
.jf-nav > li:hover > a::after, .jf-nav > li:hover > button::after { transform: scaleX(1); }

/* ----------  MEGA MENU  ---------- */
.jf-mega-wrap { position: static; }
.jf-mega {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(12px);
  top: 100%; width: min(1180px, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 26px; opacity: 0; visibility: hidden;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility .3s;
  z-index: 70;
}
.jf-mega-wrap:hover > .jf-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(10px); }
.jf-mega a { transition: color .2s, background .2s; }
.jf-megacat { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 13px; color: var(--ink-2); }
.jf-megacat:hover { background: var(--surface-2); color: var(--red); }
.jf-megacat img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.jf-mega-promo { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; }
.jf-mega-promo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(21,35,62,.05), rgba(21,35,62,.86)); }
.jf-mega-promo > * { position: relative; z-index: 1; }

/* ----------  BUTTONS  ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; border-radius: 999px; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s, color .25s; cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--red); color: #fff; padding: 14px 28px; box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(196,32,47,.55); }
.btn-gold { background: var(--gold); color: var(--navy); padding: 14px 28px; box-shadow: 0 16px 34px -14px rgba(226,161,43,.6); }
.btn-gold:hover { transform: translateY(-3px); filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--ink); padding: 13px 26px; border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--navy); padding: 14px 28px; box-shadow: var(--shadow); }
.btn-light:hover { transform: translateY(-3px); }

/* ----------  PILLS / BADGES  ---------- */
.tag { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.tag-sale { background: var(--red); color:#fff; }
.tag-new  { background: var(--green); color:#fff; }
.tag-gold { background: var(--gold); color: var(--navy); }
.tag-soft { background: var(--red-soft); color: var(--red); }

/* ----------  CARD : PRODUCT  ---------- */
.pcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; height: 100%; display: flex; flex-direction: column; }
.pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pcard__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; background: var(--surface-2); }
.pcard__media img { width:100%; height:100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__stamp { position:absolute; top:10px; left:10px; z-index:2; }
.pcard__acts { position: absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:8px; z-index:2; }
.pcard__act { width:38px; height:38px; border-radius:11px; background: color-mix(in srgb,var(--surface) 92%, transparent); backdrop-filter: blur(6px); display:grid; place-items:center; color: var(--ink-2); box-shadow: var(--shadow-sm); transform: translateX(14px); opacity:0; transition: all .3s; }
.pcard:hover .pcard__act { transform:none; opacity:1; }
.pcard:hover .pcard__act:nth-child(2){ transition-delay:.05s }
.pcard:hover .pcard__act:nth-child(3){ transition-delay:.1s }
.pcard__act:hover { background: var(--red); color:#fff; }
.pcard__cart { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; background: var(--navy); color:#fff; border-radius:12px; padding:11px; font-weight:700; font-size:.86rem; display:flex; align-items:center; justify-content:center; gap:8px; }
.pcard__cart:hover { background: var(--red); }
/* Always-visible wishlist/view actions on touch devices */
@media (hover: none) {
  .pcard__act { transform:none; opacity:1; }
}
.stars { color: var(--gold); letter-spacing:1px; font-size:.8rem; }
.price-now { color: var(--red); font-weight:800; font-size:1.15rem; font-family:'Fraunces',serif; }
.price-old { color: var(--muted); text-decoration: line-through; font-size:.9rem; }

/* ----------  CATEGORY CARD  ---------- */
.catcard { position: relative; display:block; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/4.4; box-shadow: var(--shadow-sm); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.catcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.catcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.catcard:hover img { transform: scale(1.1); }
.catcard__veil { position:absolute; inset:0; background: linear-gradient(180deg, rgba(21,35,62,0) 38%, rgba(21,35,62,.85) 100%); }
.catcard__body { position:absolute; inset:auto 0 0 0; padding:16px; color:#fff; z-index:1; }
.catcard__count { display:inline-block; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); }

/* ----------  ADS  ---------- */
.adcard { position:relative; border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; justify-content:center; color:#fff; }
.adcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.adcard:hover img { transform: scale(1.08); }
.adcard__veil { position:absolute; inset:0; }
.adcard__body { position:relative; z-index:1; padding: 30px; }

/* Floating animated ad */
.float-y { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
.blob { position:absolute; border-radius:50%; filter: blur(8px); opacity:.5; }

/* ----------  BRAND MARQUEE  ---------- */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display:flex; gap: 18px; width:max-content; animation: marq 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.brandchip { display:flex; align-items:center; gap:12px; padding:18px 26px; min-width: 210px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s, border-color .3s; }
.brandchip:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold); }
.brandchip__mark { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:900; color:#fff; font-size:1.1rem; }

/* ----------  GLASS NEWSLETTER  ---------- */
.glass { background: rgba(255,255,255,.10); backdrop-filter: blur(18px) saturate(140%); border:1px solid rgba(255,255,255,.22); }
.glass-input { background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); color:#fff; }
.glass-input::placeholder { color: rgba(255,255,255,.7); }
.glass-input:focus { outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* ----------  SKELETON  ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); }
.skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: sk 1.4s infinite; }
html.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@keyframes sk { 100% { transform: translateX(100%); } }

/* image fade-in on load */
img.lazy-img { opacity: 0; transition: opacity .6s ease; }
img.lazy-img.loaded { opacity: 1; }
.imgwrap { background: linear-gradient(135deg, var(--surface-2), var(--paper-2)); }

/* ----------  MOBILE DRAWER  ---------- */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); background: var(--surface); z-index: 90; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; }
.drawer.open { transform: none; }
.drawer-mask { position: fixed; inset:0; background: rgba(10,7,4,.5); backdrop-filter: blur(2px); z-index:85; opacity:0; visibility:hidden; transition: opacity .35s, visibility .35s; }
.drawer-mask.open { opacity:1; visibility:visible; }
.m-acc { border-bottom: 1px solid var(--line); }
.m-acc__head { display:flex; align-items:center; justify-content:space-between; width:100%; padding:15px 4px; font-weight:600; color: var(--ink); }
.m-acc__panel { max-height:0; overflow:hidden; transition: max-height .35s ease; }
.m-acc.open .m-acc__panel { max-height: 320px; }
.m-acc.open .m-acc__chev { transform: rotate(180deg); }
.m-acc__chev { transition: transform .35s; color: var(--muted); }

/* search suggest */
.search-pop { position:absolute; top: calc(100% + 10px); left:0; right:0; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:10px; opacity:0; visibility:hidden; transform: translateY(8px); transition: all .25s; z-index:75; }
.search-pop.open { opacity:1; visibility:visible; transform:none; }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 120%); background: var(--navy); color:#fff; padding: 13px 20px; border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 9999; display:flex; align-items:center; gap:10px; font-weight:600; transition: transform .4s cubic-bezier(.2,.7,.2,1); max-width: min(92vw, 420px); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); pointer-events: auto; }
.toast.toast--error { background: var(--red); }

/* back to top */
.totop { position: fixed; right: 20px; bottom: 22px; width: 50px; height: 50px; border-radius: 16px; background: var(--red); color:#fff; display:grid; place-items:center; box-shadow: var(--shadow-red); z-index: 70; opacity:0; visibility:hidden; transform: translateY(16px) scale(.9); transition: all .35s; }
.totop.show { opacity:1; visibility:visible; transform:none; }
.totop:hover { background: var(--red-deep); transform: translateY(-3px); }

/* floating contact */
.fab-stack { position: fixed; left: 20px; bottom: 22px; z-index:70; display:flex; flex-direction:column; gap:12px; }
.fab { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; box-shadow: var(--shadow); transition: transform .3s; }
.fab:hover { transform: translateY(-4px) scale(1.05); }

/* dividers / scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* swiper tweaks */
.swiper { width: 100%; }
.swiper-pagination-bullet { background: var(--muted); opacity:.5; width:8px; height:8px; transition: all .3s; }
.swiper-pagination-bullet-active { background: var(--red); opacity:1; width:26px; border-radius:5px; }
.hero-swiper .swiper-pagination-bullet { background:#fff; }
.hero-swiper .swiper-pagination-bullet-active { background: var(--gold); }
.nav-btn { width:48px; height:48px; border-radius:14px; background: var(--surface); border:1px solid var(--line); color:var(--ink); display:grid; place-items:center; box-shadow: var(--shadow-sm); transition: all .25s; cursor:pointer; }
.nav-btn:hover { background: var(--red); color:#fff; border-color: var(--red); transform: translateY(-2px); }
.nav-btn.disabled { opacity:.4; pointer-events:none; }

/* hero slide kenburns */
.kb { animation: kb 9s ease-out forwards; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }

/* utility */
.divider-leaf { display:flex; align-items:center; justify-content:center; gap:14px; color: var(--gold); }
.divider-leaf::before, .divider-leaf::after { content:""; height:1px; width:60px; background: var(--line); }

/* ============ ISSUE FIXES ============ */
/* [18] No red border/ring on header search */
#searchInput:focus, #searchInput:focus-visible { outline: none !important; box-shadow: none !important; }
#searchWrap form { border-color: var(--line) !important; }
#searchWrap:focus-within form { border-color: var(--line) !important; }
/* [13] Mega menu hover bridge — closes the gap so the dropdown stays open while moving the mouse */
.jf-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px; }

/* Wishlist heart on product cards */
.pcard-heart { position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.92); color:var(--ink-2); box-shadow:var(--shadow); transition:color .2s, transform .2s, background .2s; }
.pcard-heart:hover { color:var(--red); transform:scale(1.08); }
.pcard-heart.is-active { color:var(--red); }
.pcard-heart.is-active svg { fill:var(--red); }

/* WhatsApp multi-number popup (floating contact) */
.fab-wa{ position:relative; }
.fab-pop{ position:absolute; bottom:calc(100% + 10px); right:0; min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s ease; }
.fab-pop.open{ opacity:1; visibility:visible; transform:translateY(0); }
.fab-pop__item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:.9rem; font-weight:600; color:var(--ink); transition:background .15s ease; }
.fab-pop__item:hover{ background:var(--surface-2); }
.fab-pop__dot{ width:9px; height:9px; border-radius:50%; background:#25D366; flex:none; }

/* Search autocomplete suggestions */
#searchResults:not(:empty){ margin-bottom: 4px; }
.jf-sug{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; transition:background .15s ease; }
.jf-sug:hover{ background:var(--surface-2); }
.jf-sug__img{ width:42px; height:42px; border-radius:8px; object-fit:cover; background:var(--surface-2); flex:none; font-size:18px; }
.jf-sug__name{ flex:1; font-weight:600; color:var(--ink); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jf-sug__price{ font-weight:800; color:var(--red); font-size:.9rem; flex:none; }
.jf-sug--all{ justify-content:center; color:var(--red); font-weight:700; font-size:.82rem; border-top:1px solid var(--line); margin-top:4px; border-radius:0; }
.jf-sug--all:hover{ background:transparent; text-decoration:underline; }

/* Search suggestions — grouped sections */
.jf-sug__head{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 12px 4px; }
.jf-sug__ico{ width:42px; height:42px; border-radius:8px; display:grid; place-items:center; background:var(--surface-2); flex:none; font-size:18px; }

/* ============ APP-LIKE MOBILE / TABLET ============ */
.jf-botnav{ display:none; }
@media (max-width:1023px){
  .jf-botnav{
    position:fixed; bottom:0; left:0; right:0; z-index:80;
    display:flex; background:var(--surface);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(0,0,0,.07);
    padding-bottom:env(safe-area-inset-bottom,0px);
    backdrop-filter:saturate(1.1);
  }
  .jf-botnav__item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 4px calc(7px + env(safe-area-inset-bottom,0px) * 0);
    font-size:.66rem; font-weight:600; color:var(--muted);
    position:relative; background:none; border:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent; transition:color .15s, transform .1s;
  }
  .jf-botnav__item:active{ transform:scale(.92); }
  .jf-botnav__item.is-active{ color:var(--red); }
  .jf-botnav__item svg{ width:23px; height:23px; }
  .jf-botnav__badge{
    position:absolute; top:2px; left:calc(50% + 5px);
    min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    background:var(--red); color:#fff; font-size:.58rem; font-weight:800;
    display:grid; place-items:center; line-height:1;
  }
  /* keep content + floating buttons clear of the bottom bar */
  body{ padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
  .fab-stack{ bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important; }
  /* smoother, app-like touch */
  *{ -webkit-tap-highlight-color:transparent; }
  html{ -webkit-text-size-adjust:100%; }
  .drawer, .search-pop, .dash-sec, table, .overflow-x-auto{ -webkit-overflow-scrolling:touch; }
  /* comfier tap targets */
  .jf-iconbtn{ min-width:42px; min-height:42px; }
}

/* Active main-nav item (current page) */
.jf-nav li.is-active > a,
.jf-nav li.is-active > button{ color:var(--red); font-weight:700; }
.m-acc__head.is-active{ color:var(--red); }

/* ============ Category badges (Fresh Tropical style) ============ */
.cat-badge{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:6px 2px; }
.cat-badge__ring{ position:relative; width:104px; height:104px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; background:var(--surface); transition:transform .2s ease, border-color .2s, box-shadow .2s; }
.cat-badge:hover .cat-badge__ring{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 12px 26px rgba(0,0,0,.08); }
.cat-badge__ring svg{ width:46px; height:46px; color:var(--ink); }
.cat-badge__dot{ position:absolute; top:1px; left:50%; transform:translateX(-50%); width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 4px var(--surface); }
.cat-badge__name{ font-weight:700; color:var(--ink); font-size:.92rem; line-height:1.2; }
@media (max-width:640px){
  .cat-badge__ring{ width:82px; height:82px; }
  .cat-badge__ring svg{ width:38px; height:38px; }
  .cat-badge__name{ font-size:.78rem; }
  .cat-badge__dot{ width:10px; height:10px; }
}

/* Image placeholder (behind img; shows if image missing/broken) */
.jf-ph{ position:absolute; inset:0; display:grid; place-items:center; font-size:2.4rem; z-index:0; background:linear-gradient(135deg,var(--surface-2),var(--paper-2)); }

/* ============ Smart compact pagination ============ */
.jf-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.jf-page{ min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; font-size:.9rem; transition:all .15s; }
.jf-page:hover{ border-color:var(--gold); color:var(--red); }
.jf-page--active{ background:var(--red); border-color:var(--red); color:#fff; }
.jf-page--active:hover{ color:#fff; }
.jf-page--dots{ border:none; background:none; min-width:auto; padding:0 4px; color:var(--muted); }
.jf-page--disabled{ opacity:.4; pointer-events:none; }

/* ============ Team department tabs ============ */
.team-tab{ padding:9px 18px; border-radius:999px; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:transparent; border:1px solid transparent; cursor:pointer; transition:all .15s; }
.team-tab:hover{ color:var(--ink); background:var(--surface-2); }
.team-tab.is-active{ background:var(--red); color:#fff; }
.team-tab.is-active:hover{ background:var(--red); color:#fff; }

/* Sticky primary nav (stays visible below the mainbar on scroll) */
.jf-navbar{ position:sticky; top:0; z-index:59; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(14px); }
.jf-header.scrolled .jf-navbar{ box-shadow:0 6px 18px rgba(0,0,0,.05); }