/* Juliet Patch v10
   - 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; }

/* ---------- Mobile header menu: allow horizontal scroll for nav links ---------- */
@media (max-width: 768px){
  .jf-header .jf-header-inner{ flex-wrap: wrap; gap: 10px; }
  .jf-header .jf-logo{ order: 1; width: 100%; text-align:center; }
  .jf-header .jf-left{ order: 2; width: 100%; display:flex; justify-content:space-between; }
  .jf-header .jf-nav{
    order: 3;
    width: 100%;
    display:flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 18px;
    white-space: nowrap;
    padding: 10px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .jf-header .jf-nav::-webkit-scrollbar{ display:none; }
  .jf-header .jf-nav .jf-nav-link{ flex: 0 0 auto; }
}