/* Juliet Patch v11
   - Home: products grid (no horizontal scroll)
   - Category banners (5x2) like woshe
   - Featured drag carousel (no buttons)
   - Hero slider stable layout
   - Mobile header/menu polish + prevent global horizontal scroll
*/

html, body { overflow-x: hidden; }

/* ---------- HERO v10 ---------- */
.jf-hero-v10 { width: 100%; }
.jf-hero-v10 .jf-hero-frame{
  position: relative;
  width: 100%;
  height: var(--jf-hero-h, 560px);
  overflow: hidden;
  background: #f5f5f5;
}
@media (max-width: 768px){
  .jf-hero-v10 .jf-hero-frame{ height: var(--jf-hero-h-m, 340px); }
}
.jf-hero-v10 .jf-hero-track{
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jf-hero-v10 .jf-hero-track::-webkit-scrollbar{ display:none; }
.jf-hero-v10 .jf-hero-slide{
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  scroll-snap-align: start;
}
.jf-hero-v10 .jf-hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.jf-hero-v10 .jf-hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  padding: 24px 28px;
  color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  pointer-events: none;
}
.jf-hero-v10 .jf-hero-overlay.jf-pos-left{ align-items:flex-start; text-align:left; }
.jf-hero-v10 .jf-hero-overlay.jf-pos-center{ align-items:center; text-align:center; }
.jf-hero-v10 .jf-hero-overlay.jf-pos-right{ align-items:flex-end; text-align:right; }
.jf-hero-v10 .jf-hero-overlay.jf-val-top{ justify-content:flex-start; }
.jf-hero-v10 .jf-hero-overlay.jf-val-middle{ justify-content:center; }
.jf-hero-v10 .jf-hero-overlay.jf-val-bottom{ justify-content:flex-end; }
.jf-hero-v10 .jf-hero-sub{ opacity:.9; letter-spacing:.06em; }
.jf-hero-v10 .jf-hero-title{ font-size: clamp(26px, 4vw, 54px); font-weight:700; margin-top:10px; }
.jf-hero-v10 .jf-hero-cta{
  pointer-events:auto;
  display:inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.7);
  color:#fff;
  text-decoration:none;
  background: transparent;
}
.jf-hero-v10 .jf-hero-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  border:0;
  background: transparent; /* no background */
  color: #fff;
  font-size: 34px;
  line-height: 1;
  padding: 10px 12px;
  cursor: pointer;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.jf-hero-v10 .jf-hero-next{ right: 10px; }
.jf-hero-v10 .jf-hero-prev{ left: 10px; }

/* ---------- Products grid constraints ---------- */
.jf-products-grid .jf-grid-max8{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 22px;
}
@media (max-width: 1200px){
  .jf-products-grid .jf-grid-max8{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .jf-products-grid .jf-grid-max8{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
}

/* ---------- Category banners (5 rows x 2 cols) ---------- */
.jf-cat-banners{ margin-top: 18px; }
.jf-cat-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 14px;
}
@media (max-width: 900px){
  .jf-cat-grid{ grid-template-columns: 1fr; }
}
.jf-cat-card{
  background: #d4d4d6; /* woshe-ish gray */
  height: 220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px 22px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
}
@media (max-width: 768px){
  .jf-cat-card{ height: 160px; padding: 16px; }
}
.jf-cat-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 6px;
  width: 45%;
  z-index:2;
}
.jf-cat-fa{
  font-size: 26px;
  font-weight: 700;
  color:#fff;
}
.jf-cat-en{
  font-size: 22px;
  color:#fff;
  opacity: .85;
  font-family: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  text-transform: none;
}
.jf-cat-media{
  width: 55%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  z-index:1;
}
.jf-cat-media img{
  width: 55%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  background: transparent; /* allow glassy PNGs */
  filter: none;
}

/* ---------- Featured drag carousel ---------- */
.jf-drag-row{
  display:flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y:hidden;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jf-drag-row::-webkit-scrollbar{ display:none; }
.jf-drag-row > .jf-card{
  flex: 0 0 calc((100% - 22px*4) / 5);
  scroll-snap-align: start;
}
@media (max-width: 1200px){
  .jf-drag-row > .jf-card{ flex-basis: calc((100% - 22px*3) / 4); }
}
@media (max-width: 900px){
  .jf-drag-row{ gap: 14px; }
  .jf-drag-row > .jf-card{ flex-basis: calc((100% - 14px) / 2); }
}

/* Make compact cards slightly shorter */
.jf-card--compact .jf-card-img img{ aspect-ratio: 4/5; object-fit: cover; }

/* ---------- Juliet v11 mobile hamburger / drawer ---------- */
.jf-mobile-menu-toggle,.jf-mobile-menu-close,.jf-mobile-menu-overlay{display:none;}

/* Product quantity controls: neutral, template-scoped mechanics. */
.jf-card-cart-actions .jf-card-btn{
  position:static!important;
  inset:auto!important;
  bottom:auto!important;
  opacity:1!important;
  transform:none!important;
  white-space:nowrap;
}
.jf-product-cart-actions .jf-product-btn{white-space:nowrap;}
.jf-qty-btn,.jf-qty-input{font:inherit;color:inherit;}
.jf-qty-btn:focus-visible,.jf-qty-input:focus-visible,.jf-mobile-menu-toggle:focus-visible,.jf-mobile-menu-close:focus-visible{outline:2px solid #111827;outline-offset:2px;}

@media (max-width: 768px){
  .jf-header .jf-header-inner{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }
  .jf-header .jf-mobile-menu-toggle{
    order:1;
    display:inline-flex;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid var(--jf-line,#e5e7eb);
    background:#fff;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    position:relative;
    z-index:2147482202;
  }
  .jf-header .jf-mobile-menu-toggle span{display:block;width:21px;height:2px;background:#111827;border-radius:2px;}
  .jf-header .jf-logo{
    order:2;
    flex:1 1 auto;
    min-width:0;
    width:auto;
    text-align:center;
  }
  .jf-header .jf-logo-mark{font-size:14px;white-space:nowrap;}
  .jf-header .jf-logo-sub{font-size:9px;white-space:nowrap;}
  .jf-header .jf-left{
    order:3;
    width:auto;
    flex:0 0 auto;
    display:flex;
    justify-content:flex-end;
  }
  .jf-header .jf-currency{display:none;}
  .jf-header .jf-icons{gap:7px;}
  .jf-header .jf-ico{font-size:17px;}

  .jf-header .jf-mobile-menu-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:2147482198;
    background:rgba(15,23,42,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .jf-header.jf-mobile-menu-open .jf-mobile-menu-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .jf-header .jf-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:2147482200;
    width:min(86vw,360px);
    height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    padding:66px 18px 26px;
    background:#fff;
    box-shadow:-16px 0 42px rgba(15,23,42,.2);
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .22s ease,visibility .22s ease;
  }
  .jf-header.jf-mobile-menu-open .jf-nav{transform:translateX(0);visibility:visible;}
  .jf-header .jf-mobile-menu-close{
    display:grid;
    place-items:center;
    position:absolute;
    top:12px;
    left:14px;
    width:40px;
    height:40px;
    border:1px solid var(--jf-line,#e5e7eb);
    background:#fff;
    color:#111827;
    font-size:28px;
    line-height:1;
    cursor:pointer;
  }
  .jf-header .jf-nav-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--jf-line,#e5e7eb);}
  .jf-header .jf-nav-link{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 4px;
    font-size:15px;
    border-bottom:0;
    white-space:normal;
  }
  .jf-header .jf-nav > .jf-nav-link{border-bottom:1px solid var(--jf-line,#e5e7eb);}
  .jf-header .jf-submenu-v47{
    position:static!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    box-shadow:none!important;
    border:0!important;
    background:#f8fafc!important;
    padding:4px 12px 8px!important;
  }
  .jf-header .jf-nav-item.jf-mobile-submenu-open > .jf-submenu-v47{display:flex!important;flex-direction:column;}
  .jf-header .jf-nav-item.jf-mobile-submenu-open > .jf-nav-link .jf-menu-caret{transform:rotate(180deg);}
  .jf-header .jf-menu-caret{transition:transform .18s ease;}
  html.jf-mobile-menu-lock,html.jf-mobile-menu-lock body{overflow:hidden!important;}
}


/* ---------- Juliet v13 header stacking / sticky behavior ---------- */
/* Base juliet.css makes .jf-header sticky itself. v13 delegates stickiness to
   #jfHeaderWrap so the announcement/topbar can leave the viewport normally. */
#jfHeaderWrap > .jf-header{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
}

/* The topbar remains ordinary page content. It must never establish a layer
   above the mobile drawer. */
.jf-topbar{
  position:relative!important;
  z-index:1!important;
}

@media (max-width: 768px){
  /* Header wrapper is the global stacking context. Drawer/overlay sit above
     topbar and page content, while the cart drawer (higher global layer) is
     intentionally left untouched. */
  #jfHeaderWrap{z-index:2147482000!important;}
  #jfHeaderWrap.is-fixed{z-index:2147482000!important;}

  .jf-header .jf-mobile-menu-overlay{
    z-index:2147482400!important;
  }
  .jf-header .jf-nav{
    z-index:2147482500!important;
  }
  .jf-header .jf-mobile-menu-close{
    z-index:2147482600!important;
  }
  .jf-header .jf-mobile-menu-toggle{
    z-index:10!important;
  }
}