/** Shopify CDN: Minification failed

Line 1720:0 Unexpected "}"

**/
/* ══════════════════════════════════════════════════
   JASHAN JEWELS — Custom Homepage CSS  v3.0
   File: assets/jashan-custom.css
   Fixes in v3.0:
   ✓ MOBILE HERO SLIDER — one slide per frame (CRITICAL FIX)
   ✓ Newsletter subscribe button — always visible
   ✓ Shopify footer email form button — visible fix
   ✓ All previous v2.0 fixes retained
══════════════════════════════════════════════════ */

.jj-homepage-section,
.jj-homepage-section * {
  --jj-maroon: #6B1A2A;
  --jj-deep-maroon: #4A0F1C;
  --jj-gold: #C9973A;
  --jj-gold-light: #E4B96A;
  --jj-cream: #FBF6EE;
  --jj-ivory: #F8F2E6;
  --jj-dark: #1C0C10;
  --jj-text: #2D1B22;
  --jj-text-muted: #7A5A62;
  --jj-border: #E8D5B7;
  --jj-green: #1a7a1a;
  box-sizing: border-box;
}

/* ── ANNOUNCEMENT BAR ── */
.jj-announce-bar {
  background: var(--jj-deep-maroon);
  color: #e8c97a;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
}
.jj-announce-contacts { display: flex; gap: 18px; flex-shrink: 0; opacity: 0.85; }
.jj-announce-contacts a { color: #e8c97a; text-decoration: none; white-space: nowrap; }
.jj-announce-marquee-wrap { flex: 1; overflow: hidden; }
.jj-announce-marquee {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: jjAnnounce 22s linear infinite;
}
.jj-announce-marquee span { display: inline-block; }
@keyframes jjAnnounce { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SALE BANNER ── */
.jj-sale-banner {
  background: var(--jj-gold);
  color: var(--jj-dark);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.jj-sale-banner a {
  color: var(--jj-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   HERO SLIDER — MOBILE CRITICAL FIX v3.0
   Root cause: slides had no fixed width, letting
   flex bleed beyond viewport on mobile.
   Fix: flex:0 0 100% + explicit width on slides,
   + overflow:hidden + max-width:100% on wrapper.
══════════════════════════════════════════════════ */
.jj-hero {
  position: relative;
  width: 100%;
  max-width: 100%;           /* ADDED: prevent overflow */
  overflow: hidden;           /* CRITICAL: clip bleed */
  height: clamp(420px, 70vh, 680px);
}
.jj-hero-slides {
  display: flex;
  width: 100%;               /* ADDED: explicit width */
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.77,0,0.175,1);
  will-change: transform;    /* ADDED: smoother animation */
}
.jj-hero-slide {
  flex: 0 0 100%;            /* CRITICAL FIX: lock each slide to exactly 100% */
  width: 100%;               /* ADDED: belt-and-suspenders */
  min-width: 100%;
  max-width: 100%;           /* ADDED: prevent any growth */
  height: 100%;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  overflow: hidden;          /* ADDED: clip any internal overflow */
}
.jj-hero-slide img, .jj-placeholder-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.jj-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(28,12,16,0.65) 0%, rgba(28,12,16,0.1) 60%, transparent 100%);
}
.jj-hero-content { position: relative; z-index: 2; padding: 0 80px; max-width: 580px; }
.jj-hero-tag {
  display: inline-block; font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jj-gold-light); margin-bottom: 16px;
  border-left: 2px solid var(--jj-gold); padding-left: 12px;
}
.jj-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 64px); font-weight: 700;
  color: #fff; line-height: 1.1; margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.jj-hero-title em, .jj-hero-title p em { font-style: italic; color: var(--jj-gold-light); }
.jj-hero-title p { margin: 0; }
.jj-hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.85);
  margin-bottom: 32px; line-height: 1.6;
}
.jj-hero-urdu {
  font-size: 16px; color: var(--jj-gold-light); margin-bottom: 24px;
  margin-top: -16px; font-style: italic; direction: rtl; text-align: right;
  font-family: 'Cormorant Garamond', serif;
}
.jj-hero-btn {
  display: inline-block; background: var(--jj-gold);
  color: var(--jj-dark); font-family: 'Jost', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; text-decoration: none; padding: 14px 36px;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.jj-hero-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--jj-maroon); transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.77,0,0.175,1);
}
.jj-hero-btn:hover::before { transform: translateX(0); }
.jj-hero-btn:hover { color: #fff; }
.jj-hero-btn span { position: relative; z-index: 1; }
.jj-hero-dots { position: absolute; bottom: 24px; left: 80px; z-index: 10; display: flex; gap: 8px; }
.jj-hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.45); cursor: pointer;
  transition: all 0.3s; border: none; padding: 0;
}
.jj-hero-dot.active { background: var(--jj-gold); width: 24px; border-radius: 3px; }
.jj-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all 0.3s; font-size: 18px;
}
.jj-hero-arrow:hover { background: var(--jj-gold); border-color: var(--jj-gold); color: var(--jj-dark); }
.jj-hero-arrow.left { left: 24px; }
.jj-hero-arrow.right { right: 24px; }

/* ── MARQUEE STRIP ── */
.jj-marquee-strip { background: var(--jj-maroon); padding: 12px 0; overflow: hidden; }
.jj-marquee-inner { display: flex; animation: jjMarquee 30s linear infinite; width: max-content; }
.jj-marquee-item {
  display: flex; align-items: center; gap: 14px; padding: 0 40px;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.9); white-space: nowrap;
}
.jj-dot { width: 5px; height: 5px; background: var(--jj-gold); border-radius: 50%; flex-shrink: 0; display: inline-block; }
@keyframes jjMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTION HEADERS ── */
.jj-section-header { text-align: center; margin-bottom: 48px; }
.jj-section-tag {
  display: inline-block; font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--jj-gold); margin-bottom: 10px;
}
.jj-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 38px); font-weight: 700;
  color: var(--jj-dark); line-height: 1.15; margin: 0;
}
.jj-section-title em { font-style: italic; color: var(--jj-maroon); }
.jj-section-rule { width: 56px; height: 2px; background: var(--jj-gold); margin: 16px auto 0; }

/* ── PRODUCTS ── */
.jj-most-loved { padding: 80px 40px; background: var(--jj-ivory); }
.jj-products-grid {
  max-width: 1380px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.jj-product-card {
  background: #fff; position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.35s, box-shadow 0.35s;
}
.jj-product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(107,26,42,0.14); }
.jj-product-img-wrap {
  position: relative; aspect-ratio: 4/5; overflow: hidden; display: block; text-decoration: none;
}
.jj-product-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease; position: absolute; inset: 0;
}
.jj-product-img-hover { opacity: 0; transition: opacity 0.5s ease, transform 0.7s ease !important; }
.jj-product-card:hover .jj-product-img-wrap img:first-of-type { transform: scale(1.06); }
.jj-product-card:hover .jj-product-img-hover { opacity: 1; transform: scale(1.06); }

/* ─ BADGES ─ */
.jj-product-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; color: #fff;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px;
}
.jj-badge-sale { background: var(--jj-maroon); }
.jj-badge-new { background: #2E7D32; }
.jj-badge-best { background: #5D4037; }

/* ─ STOCK URGENCY BADGE ─ */
.jj-stock-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: rgba(28,12,16,0.82); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px;
  border: 1px solid var(--jj-gold-light);
}

/* ─ QUICK VIEW OVERLAY ─ */
.jj-product-overlay {
  position: absolute; inset: 0; background: rgba(28,12,16,0.35);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 24px; opacity: 0; transition: opacity 0.35s;
}
.jj-product-card:hover .jj-product-overlay { opacity: 1; }
.jj-product-overlay-btn {
  background: var(--jj-gold); color: var(--jj-dark);
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 28px; text-decoration: none;
}

/* ─ PRODUCT INFO ─ */
.jj-product-info { padding: 16px 16px 18px; }
.jj-product-name {
  font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600;
  color: var(--jj-dark); margin-bottom: 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.jj-product-price { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; color: var(--jj-maroon); margin-bottom: 8px; }
.jj-was { text-decoration: line-through; color: var(--jj-text-muted); margin-right: 6px; font-weight: 400; }
.jj-product-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.jj-add-to-cart-link {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--jj-maroon); text-decoration: none;
}
.jj-add-to-cart-link:hover { color: var(--jj-gold); }

/* ─ COD TRUST STRIP ─ */
.jj-product-trust {
  border-top: 1px solid var(--jj-border);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.jj-trust-line {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Jost', sans-serif; font-size: 10px;
  color: var(--jj-green); letter-spacing: 0.04em;
  font-weight: 500;
}
.jj-trust-line svg { flex-shrink: 0; }

/* ─ SHIPPING INFO STRIP ─ */
.jj-shipping-strip {
  background: #f0f7ee; border-top: 1px solid #c8e6c9;
  border-bottom: 1px solid #c8e6c9;
  padding: 10px 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.jj-shipping-item {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Jost', sans-serif; font-size: 12px;
  color: var(--jj-green); font-weight: 500; letter-spacing: 0.04em;
}

/* ─ NO PRODUCTS ─ */
.jj-no-products { grid-column: 1/-1; text-align: center; font-family: 'Jost', sans-serif; color: var(--jj-text-muted); padding: 40px; }
.jj-view-all-wrap { text-align: center; margin-top: 48px; }
.jj-btn-outline {
  display: inline-block; border: 1.5px solid var(--jj-maroon); color: var(--jj-maroon);
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; padding: 13px 42px; transition: all 0.3s;
}
.jj-btn-outline:hover { background: var(--jj-maroon); color: #fff; }

/* ── COLLECTIONS ── */
.jj-collections { padding: 80px 40px; background: var(--jj-cream); }
.jj-collections-grid {
  max-width: 1380px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.jj-col-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 1; background: var(--jj-border); display: block; text-decoration: none;
}
.jj-col-card.wide { grid-column: span 2; aspect-ratio: 2/1; }
.jj-col-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; filter: brightness(0.82); }
.jj-col-card:hover img { transform: scale(1.06); filter: brightness(0.7); }
.jj-col-label {
  position: absolute; bottom: 20px; left: 20px;
  color: #fff; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600;
}
.jj-col-label span {
  display: block; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--jj-gold-light); margin-bottom: 4px;
}

/* ── BRAND STORY ── */
.jj-brand-story {
  background: var(--jj-deep-maroon); padding: 100px 40px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative; overflow: hidden;
}
.jj-brand-story::before {
  content: '✦'; position: absolute; font-size: 300px; opacity: 0.03;
  color: #fff; top: -60px; left: -40px; pointer-events: none;
}
.jj-brand-story-inner { max-width: 700px; position: relative; }
.jj-brand-story-inner .jj-section-title { color: #fff; }
.jj-brand-story-inner p {
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 300;
  color: rgba(255,255,255,0.8); line-height: 1.8; margin: 24px 0 36px;
}
.jj-story-btn {
  display: inline-block; border: 1.5px solid var(--jj-gold); color: var(--jj-gold);
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; padding: 14px 36px;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.jj-story-btn::before {
  content: ''; position: absolute; inset: 0; background: var(--jj-gold);
  transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.77,0,0.175,1);
}
.jj-story-btn:hover::before { transform: translateX(0); }
.jj-story-btn:hover { color: var(--jj-dark); }
.jj-story-btn span { position: relative; z-index: 1; }

/* ── WHY SECTION ── */
.jj-why-section { padding: 80px 40px; background: var(--jj-ivory); }
.jj-why-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
}
.jj-why-card { text-align: center; padding: 36px 24px; background: #fff; border-top: 3px solid var(--jj-gold); }
.jj-why-icon { font-size: 32px; margin-bottom: 16px; display: block; }
.jj-why-card h3 { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: var(--jj-dark); margin-bottom: 10px; }
.jj-why-card p { font-family: 'Jost', sans-serif; font-size: 13px; color: var(--jj-text-muted); line-height: 1.7; margin: 0; }

/* ── TESTIMONIALS ── */
.jj-testimonials { padding: 80px 40px; background: var(--jj-cream); }
.jj-reviews-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jj-review-card { background: #fff; padding: 32px 28px; border-left: 3px solid var(--jj-gold); }
.jj-review-stars { font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.jj-star-filled { color: var(--jj-gold); }
.jj-star-empty { color: #ddd; }
.jj-review-text {
  font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 400;
  color: var(--jj-text); line-height: 1.7; margin-bottom: 16px; font-style: italic;
}
.jj-review-author { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jj-text-muted); }
.jj-review-product { font-family: 'Jost', sans-serif; font-size: 11px; color: var(--jj-gold); margin-top: 4px; }
.jj-review-photo {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; margin-bottom: 14px; border: 2px solid var(--jj-border);
}
.jj-review-author-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* ══════════════════════════════════════════════════
   NEWSLETTER STRIP — BUTTON ALWAYS VISIBLE FIX v3.0
   Fixes both our custom section AND Shopify's
   default footer newsletter form button.
══════════════════════════════════════════════════ */
.jj-newsletter { padding: 70px 40px; background: var(--jj-deep-maroon); text-align: center; }
.jj-newsletter-inner { max-width: 520px; margin: 0 auto; }
.jj-newsletter h3 {
  font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 32px);
  font-weight: 700; color: #fff; margin-bottom: 10px;
}
.jj-newsletter h3 em { font-style: italic; color: var(--jj-gold-light); }
.jj-newsletter p {
  font-family: 'Jost', sans-serif; font-size: 14px; color: rgba(255,255,255,0.7);
  margin-bottom: 24px; line-height: 1.6;
}
/* Our custom newsletter form */
.jj-newsletter-form {
  display: flex;
  gap: 0;
  max-width: 460px;
  margin: 0 auto;
  align-items: stretch;
}
.jj-newsletter-form input[type="email"] {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.jj-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.jj-newsletter-form button,
.jj-newsletter-form [type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--jj-gold) !important;
  color: var(--jj-dark) !important;
  border: none;
  padding: 14px 28px !important;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.3s;
  opacity: 1 !important;
  visibility: visible !important;
}
.jj-newsletter-form button:hover,
.jj-newsletter-form [type="submit"]:hover {
  background: var(--jj-gold-light) !important;
}
.jj-newsletter-disclaimer {
  font-family: 'Jost', sans-serif; font-size: 11px; color: rgba(255,255,255,0.4);
  margin-top: 14px;
}

/* ── Shopify default footer newsletter form — global fix ── */
.footer__newsletter .newsletter-form,
footer .newsletter-form,
.footer-newsletter {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  max-width: 460px;
  margin: 0 auto;
}
.footer__newsletter .newsletter-form__button,
footer .newsletter-form__button,
.footer-newsletter button,
.footer-newsletter [type="submit"],
form[action="/contact#contact_form"] [type="submit"],
.email-signup-form [type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #C9973A !important;
  color: #1C0C10 !important;
  border: none !important;
  padding: 13px 22px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background 0.3s !important;
}

/* ── WHATSAPP FLOATING BUTTON ── */
.jj-whatsapp-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: transform 0.3s, box-shadow 0.3s;
  animation: jjWABounce 2s ease-in-out 3s 3;
}
.jj-whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}
.jj-whatsapp-btn svg { width: 30px; height: 30px; fill: #fff; }
.jj-whatsapp-tooltip {
  position: fixed; bottom: 93px; right: 24px; z-index: 9998;
  background: var(--jj-dark); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  padding: 8px 14px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
  letter-spacing: 0.05em;
}
.jj-whatsapp-tooltip::after {
  content: ''; position: absolute; bottom: -6px; right: 20px;
  border: 6px solid transparent; border-top-color: var(--jj-dark); border-bottom: none;
}
.jj-whatsapp-btn:hover + .jj-whatsapp-tooltip,
.jj-whatsapp-btn:focus + .jj-whatsapp-tooltip { opacity: 1; }
@keyframes jjWABounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── EMAIL POPUP ── */
.jj-popup-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(28,12,16,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0;
  animation: jjPopupFadeIn 0.5s ease 4s forwards;
}
.jj-popup-overlay.hidden { display: none; }
@keyframes jjPopupFadeIn { to { opacity: 1; } }
.jj-popup {
  background: var(--jj-ivory); max-width: 460px; width: 100%;
  position: relative; overflow: hidden;
  transform: translateY(24px);
  animation: jjPopupSlide 0.5s ease 4s forwards;
}
@keyframes jjPopupSlide { to { transform: translateY(0); } }
.jj-popup-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--jj-text-muted); line-height: 1;
  transition: color 0.2s;
}
.jj-popup-close:hover { color: var(--jj-dark); }
.jj-popup-top {
  background: var(--jj-deep-maroon); padding: 36px 36px 28px;
  text-align: center;
}
.jj-popup-tag {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--jj-gold-light); margin-bottom: 10px;
}
.jj-popup-title {
  font-family: 'Playfair Display', serif; font-size: 28px;
  font-weight: 700; color: #fff; line-height: 1.2; margin: 0;
}
.jj-popup-title em { font-style: italic; color: var(--jj-gold-light); }
.jj-popup-body { padding: 28px 36px 32px; }
.jj-popup-sub {
  font-family: 'Cormorant Garamond', serif; font-size: 17px;
  color: var(--jj-text); line-height: 1.6; margin-bottom: 20px; text-align: center;
}
.jj-popup-form { display: flex; flex-direction: column; gap: 10px; }
.jj-popup-form input[type="email"] {
  padding: 13px 16px; border: 1.5px solid var(--jj-border);
  background: #fff; color: var(--jj-dark);
  font-family: 'Jost', sans-serif; font-size: 13px; outline: none;
  transition: border-color 0.2s; width: 100%;
}
.jj-popup-form input:focus { border-color: var(--jj-gold); }
.jj-popup-form button {
  background: var(--jj-maroon); color: #fff; border: none;
  padding: 14px 24px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; transition: background 0.3s; width: 100%;
}
.jj-popup-form button:hover { background: var(--jj-gold); color: var(--jj-dark); }
.jj-popup-skip {
  text-align: center; margin-top: 12px;
  font-family: 'Jost', sans-serif; font-size: 11px; color: var(--jj-text-muted);
  cursor: pointer; text-decoration: underline; background: none; border: none;
}
.jj-popup-skip:hover { color: var(--jj-dark); }
.jj-popup-success { text-align: center; padding: 24px; display: none; }
.jj-popup-success .jj-discount-code {
  font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--jj-maroon); background: var(--jj-border);
  padding: 12px 24px; margin: 16px 0; display: inline-block;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIXES
══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .jj-products-grid    { grid-template-columns: repeat(2, 1fr); }
  .jj-collections-grid { grid-template-columns: repeat(2, 1fr); }
  .jj-col-card.wide    { grid-column: span 1; aspect-ratio: 1; }
  .jj-why-grid         { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Announcement bar */
  .jj-announce-contacts { display: none; }

  /* Hero — MOBILE ONE-SLIDE FIX */
  .jj-hero { height: clamp(380px, 65vh, 560px); }
  .jj-hero-content { padding: 0 24px; max-width: 100%; }
  .jj-hero-dots { left: 24px; bottom: 16px; }
  .jj-hero-title { font-size: 28px !important; }
  .jj-hero-sub { font-size: 15px; margin-bottom: 24px; }
  .jj-hero-btn { padding: 12px 28px; font-size: 11px; }
  .jj-hero-arrow { display: none; }

  /* Sections padding */
  .jj-most-loved, .jj-brand-story, .jj-testimonials,
  .jj-why-section, .jj-newsletter { padding: 50px 20px; }
  .jj-collections { padding: 50px 0 50px 20px; }

  /* Products */
  .jj-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .jj-product-name { font-size: 13px; }

  /* Collections — horizontal scroll on mobile */
  .jj-collections-grid {
    grid-template-columns: unset;
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-right: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jj-collections-grid::-webkit-scrollbar { display: none; }
  .jj-col-card {
    flex: 0 0 200px;
    aspect-ratio: 3/4 !important;
    scroll-snap-align: start;
    grid-column: unset !important;
  }
  .jj-col-card.wide {
    flex: 0 0 280px;
    aspect-ratio: 3/4 !important;
  }

  /* Reviews */
  .jj-reviews-grid { grid-template-columns: 1fr; }

  /* Why */
  .jj-why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .jj-why-card { padding: 24px 16px; }

  /* Shipping strip */
  .jj-shipping-strip { padding: 10px 16px; gap: 14px; }
  .jj-shipping-item { font-size: 11px; }

  /* Newsletter — stacked on mobile with full-width button */
  .jj-newsletter-form {
    flex-direction: column;
    max-width: 100%;
  }
  .jj-newsletter-form input[type="email"] {
    width: 100%;
    text-align: center;
  }
  .jj-newsletter-form button,
  .jj-newsletter-form [type="submit"] {
    width: 100% !important;
    padding: 15px 24px !important;
    font-size: 13px !important;
  }

  /* WhatsApp button position on mobile */
  .jj-whatsapp-btn { bottom: 18px; right: 16px; width: 52px; height: 52px; }
  .jj-whatsapp-tooltip { display: none; }

  /* Sale banner */
  .jj-sale-banner { font-size: 11px; gap: 10px; padding: 9px 12px; }
}

@media (max-width: 480px) {
  .jj-hero-title { font-size: 24px !important; }
  .jj-why-grid { grid-template-columns: 1fr; }
  .jj-popup-title { font-size: 22px; }
  .jj-popup-top { padding: 28px 24px 20px; }
  .jj-popup-body { padding: 20px 24px 24px; }
  .jj-section-header { margin-bottom: 32px; }
}

/* ── Touch device: always show overlay button on mobile ── */
@media (hover: none) {
  .jj-product-overlay {
    opacity: 1;
    background: rgba(28,12,16,0.18);
    padding-bottom: 14px;
  }
  .jj-product-overlay-btn {
    font-size: 10px; padding: 8px 20px;
  }
}
/* ============================================================ */
/* JASHAN HOMEPAGE — Editorial Redesign                        */
/* All rules scoped under .jj-hp to prevent collisions          */
/* ============================================================ */

:root {
  --oxblood:#4A1518;
  --oxblood-deep:#2F0C0E;
  --maroon:#5C1A1B;
  --gold:#B89968;
  --gold-soft:#D4AF7A;
  --gold-pale:#E8D2A8;
  --ivory:#F5EFE3;
  --ivory-deep:#EDE3CE;
  --ink:#1A1410;
  --blush:#E8D5C4;
  --paper:#FBF6EC;
}

.jj-hp, .jj-hp *, .jj-hp *::before, .jj-hp *::after {margin:0;padding:0;box-sizing:border-box;}

/* (html scroll-behavior left to theme) */

.jj-hp {
  font-family:'Jost',sans-serif;
  font-weight:300;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  position:relative;
  isolation:isolate;
}

.jj-hp .serif {font-family:'Playfair Display',serif;}

.jj-hp .italic-serif {font-family:'Cormorant Garamond',serif;font-style:italic;}

/* paper grain overlay */
.jj-hp::before {
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.28;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ======= UTILITY MARQUEE BAR ======= */
.jj-hp .utility-bar {
  background:var(--oxblood-deep);
  color:var(--gold-pale);
  height:38px;
  display:flex;align-items:center;
  overflow:hidden;
  position:relative;
  border-bottom:1px solid rgba(184,153,104,.25);
  z-index:60;
}

.jj-hp .utility-track {
  display:flex;
  gap:64px;
  white-space:nowrap;
  animation:marquee 38s linear infinite;
  font-size:11.5px;
  letter-spacing:3.4px;
  text-transform:uppercase;
  font-weight:400;
}

.jj-hp .utility-track span {display:inline-flex;align-items:center;gap:14px;}

.jj-hp .utility-track .dot {display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;}

@keyframes marquee {from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ======= HEADER ======= */
/* ======= HERO ======= */
.jj-hp .hero {
  position:relative;
  min-height:92vh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  background:linear-gradient(115deg,var(--paper) 0%,var(--ivory) 55%,var(--ivory-deep) 100%);
  overflow:hidden;
  isolation:isolate;
}

.jj-hp .hero::before {
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(212,175,122,.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(74,21,24,.06), transparent 60%);
  pointer-events:none;
}

.jj-hp .hero-text {
  padding:80px 80px 80px 88px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:3;
}

.jj-hp .eyebrow {
  display:inline-flex;align-items:center;gap:18px;
  font-size:10.5px;letter-spacing:5px;
  text-transform:uppercase;
  color:var(--maroon);
  margin-bottom:38px;
  font-weight:400;
  opacity:0;
  animation:fadeUp .9s .2s forwards;
}

.jj-hp .eyebrow .line {width:46px;height:1px;background:var(--gold);}

.jj-hp .hero h1 {
  font-family:'Playfair Display',serif;
  font-weight:500;
  font-size:clamp(54px,6.6vw,104px);
  line-height:.97;
  color:var(--oxblood);
  letter-spacing:-1.5px;
  margin-bottom:18px;
}

.jj-hp .hero h1 .line-wrap {display:block;overflow:hidden;}

.jj-hp .hero h1 .line-inner {
  display:block;
  transform:translateY(105%);
  animation:revealLine 1s cubic-bezier(.2,.7,.2,1) forwards;
}

.jj-hp .hero h1 .line-inner.l2 {animation-delay:.18s;}

.jj-hp .hero h1 .line-inner.l3 {animation-delay:.34s;}

.jj-hp .hero h1 em {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  color:var(--gold);
  position:relative;
}

.jj-hp .hero h1 em::after {
  content:"";position:absolute;bottom:8px;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  animation:line 1.1s 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes revealLine {to{transform:translateY(0);}}

@keyframes line {to{transform:scaleX(.6);}}

.jj-hp .hero p.lede {
  max-width:480px;
  font-size:16px;line-height:1.75;
  color:rgba(26,20,16,.72);
  margin:34px 0 46px;
  font-weight:300;
  opacity:0;animation:fadeUp 1s 1s forwards;
}

.jj-hp .hero-actions {display:flex;gap:18px;align-items:center;opacity:0;animation:fadeUp 1s 1.2s forwards;}

.jj-hp .btn {
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 36px;
  font-size:11px;letter-spacing:3.5px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:none;
  font-family:'Jost',sans-serif;
  font-weight:500;
  transition:all .5s cubic-bezier(.2,.7,.2,1);
  position:relative;
  overflow:hidden;
}

.jj-hp .btn-primary {
  background:var(--oxblood);color:var(--gold-pale);
}

.jj-hp .btn-primary::before {
  content:"";position:absolute;inset:0;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  z-index:0;
}

.jj-hp .btn-primary:hover::before {transform:translateY(0);}

.jj-hp .btn-primary:hover {color:var(--oxblood-deep);}

.jj-hp .btn-primary span, .jj-hp .btn-primary svg {position:relative;z-index:1;}

.jj-hp .btn-ghost {
  color:var(--oxblood);background:transparent;
  border-bottom:1px solid var(--oxblood);
  padding:8px 2px;
}

.jj-hp .btn-ghost:hover {color:var(--gold);border-color:var(--gold);}

.jj-hp .btn svg {transition:transform .4s ease;}

.jj-hp .btn:hover svg {transform:translateX(4px);}

@keyframes fadeUp {from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* hero stats */
.jj-hp .hero-meta {
  display:flex;gap:48px;margin-top:64px;
  padding-top:34px;
  border-top:1px solid rgba(74,21,24,.12);
  opacity:0;animation:fadeUp 1s 1.4s forwards;
}

.jj-hp .hero-meta .stat .num {
  font-family:'Playfair Display',serif;
  font-size:32px;font-weight:500;color:var(--oxblood);
  line-height:1;
}

.jj-hp .hero-meta .stat .num em {font-family:'Cormorant Garamond',serif;color:var(--gold);font-style:italic;}

.jj-hp .hero-meta .stat .lbl {
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(26,20,16,.55);margin-top:8px;
}

/* hero gallery */
.jj-hp .hero-gallery {
  position:relative;
  padding:48px 80px 48px 0;
  display:flex;align-items:center;justify-content:center;
}

.jj-hp .hero-frame {
  position:relative;
  width:100%;max-width:560px;aspect-ratio:4/5;
  overflow:hidden;
  box-shadow:
    0 30px 80px -20px rgba(74,21,24,.35),
    0 0 0 1px rgba(184,153,104,.2);
}

.jj-hp .hero-frame::after {
  content:"";position:absolute;inset:14px;
  border:1px solid rgba(245,239,227,.4);
  pointer-events:none;z-index:3;
}

.jj-hp .hero-slide {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 6s linear;
}

.jj-hp .hero-slide.active {opacity:1;transform:scale(1);}

.jj-hp .hero-frame .frame-corner {
  position:absolute;width:34px;height:34px;
  border:1px solid var(--gold);
  z-index:4;
}

.jj-hp .frame-corner.tl {top:-8px;left:-8px;border-right:none;border-bottom:none;}

.jj-hp .frame-corner.tr {top:-8px;right:-8px;border-left:none;border-bottom:none;}

.jj-hp .frame-corner.bl {bottom:-8px;left:-8px;border-right:none;border-top:none;}

.jj-hp .frame-corner.br {bottom:-8px;right:-8px;border-left:none;border-top:none;}

/* hero floating caption */
.jj-hp .hero-caption {
  position:absolute;
  bottom:80px;right:0;
  background:var(--ivory);
  padding:22px 28px;
  min-width:280px;
  z-index:5;
  border-left:2px solid var(--gold);
  box-shadow:0 18px 50px -12px rgba(74,21,24,.25);
}

.jj-hp .hero-caption .label {
  font-size:9.5px;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;font-weight:500;
}

.jj-hp .hero-caption .name {
  font-family:'Playfair Display',serif;
  font-size:18px;color:var(--oxblood);
  line-height:1.3;margin-bottom:10px;
  min-height:46px;
}

.jj-hp .hero-caption .price {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:20px;color:var(--ink);
}

.jj-hp .hero-caption .price strong {font-weight:500;}

.jj-hp .hero-pager {
  position:absolute;
  bottom:48px;left:80px;
  display:flex;gap:14px;align-items:center;
  z-index:6;
}

.jj-hp .hero-dot {
  width:32px;height:1px;
  background:rgba(74,21,24,.2);
  cursor:pointer;
  transition:all .4s ease;
  border:none;padding:0;
}

.jj-hp .hero-dot.active {background:var(--oxblood);height:2px;}

.jj-hp .hero-dot:hover {background:var(--gold);}

.jj-hp .hero-num {
  position:absolute;top:64px;right:80px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:14px;color:var(--maroon);
  letter-spacing:2px;
  z-index:5;
}

.jj-hp .hero-num .current {color:var(--gold);font-size:28px;font-weight:500;font-style:normal;font-family:'Playfair Display';}

/* scroll cue */
.jj-hp .scroll-cue {
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--maroon);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  z-index:5;
  opacity:0;animation:fadeUp 1s 1.6s forwards;
}

.jj-hp .scroll-cue .stem {width:1px;height:48px;background:var(--gold);position:relative;overflow:hidden;}

.jj-hp .scroll-cue .stem::after {
  content:"";position:absolute;top:0;left:0;right:0;
  height:14px;background:var(--oxblood);
  animation:dripDown 1.8s ease-in-out infinite;
}

@keyframes dripDown {
  0%{transform:translateY(-14px);}
  100%{transform:translateY(48px);}
}

/* ======= TRUST STRIP ======= */
.jj-hp .trust-strip {
  background:var(--oxblood);
  color:var(--gold-pale);
  padding:26px 48px;
  display:flex;align-items:center;justify-content:center;
  gap:80px;
  font-size:11px;letter-spacing:3.2px;
  text-transform:uppercase;font-weight:400;
  border-bottom:1px solid rgba(184,153,104,.18);
  position:relative;
}

.jj-hp .trust-strip .item {display:flex;align-items:center;gap:14px;}

.jj-hp .trust-strip .item svg {color:var(--gold);}

.jj-hp .trust-strip .sep {
  width:4px;height:4px;background:var(--gold);border-radius:50%;opacity:.5;
}

/* ======= SECTION COMMONS ======= */
.jj-hp section {position:relative;}

.jj-hp .section-head {
  text-align:center;
  padding:120px 48px 64px;
  max-width:780px;margin:0 auto;
}

.jj-hp .section-head .eyebrow {justify-content:center;}

.jj-hp .section-head .eyebrow .line {background:var(--gold);}

.jj-hp .section-head h2 {
  font-family:'Playfair Display',serif;
  font-weight:500;
  font-size:clamp(38px,4.2vw,62px);
  line-height:1.05;
  color:var(--oxblood);
  letter-spacing:-.5px;
  margin:6px 0 22px;
}

.jj-hp .section-head h2 em {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);font-weight:400;
}

.jj-hp .section-head p {
  color:rgba(26,20,16,.65);
  font-size:15px;line-height:1.8;
  max-width:560px;margin:0 auto;
}

/* reveal class */
.jj-hp .reveal {opacity:0;transform:translateY(40px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);}

.jj-hp .reveal.in {opacity:1;transform:translateY(0);}

/* ======= AUTO-SCROLLING PRODUCT MARQUEE ======= */
.jj-hp .collection {
  background:var(--paper);
  padding:0 0 120px;
  overflow:hidden;
}

.jj-hp .collection-track-wrap {
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}

.jj-hp .collection-track {
  display:flex;gap:34px;
  width:max-content;
  animation:scrollX 60s linear infinite;
  padding:0 24px;
}

.jj-hp .collection:hover .collection-track {animation-play-state:paused;}

@keyframes scrollX {from{transform:translateX(0);}to{transform:translateX(-50%);}}

.jj-hp .product {
  width:340px;flex-shrink:0;
  cursor:pointer;
  position:relative;
}

.jj-hp .product-img {
  width:100%;aspect-ratio:4/5;
  background:var(--ivory-deep);
  background-size:cover;background-position:center;
  position:relative;overflow:hidden;
  transition:all .7s cubic-bezier(.2,.7,.2,1);
}

.jj-hp .product-img::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(74,21,24,.25));
  opacity:0;transition:opacity .5s ease;
}

.jj-hp .product:hover .product-img::after {opacity:1;}

.jj-hp .product:hover .product-img {transform:scale(.98);box-shadow:0 24px 60px -16px rgba(74,21,24,.3);}

.jj-hp .product-img .stock {
  position:absolute;top:18px;left:18px;
  background:rgba(26,20,16,.85);
  color:var(--gold-pale);
  padding:7px 14px;
  font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  font-weight:500;
}

.jj-hp .product-img .new-tag {
  position:absolute;top:18px;right:18px;
  background:var(--gold);color:var(--oxblood-deep);
  padding:7px 14px;
  font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  font-weight:500;
}

.jj-hp .product-img .quick-view {
  position:absolute;bottom:0;left:0;right:0;
  background:var(--ivory);color:var(--oxblood);
  padding:14px;
  text-align:center;
  font-size:10.5px;letter-spacing:3.4px;text-transform:uppercase;
  font-weight:500;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  z-index:2;
}

.jj-hp .product:hover .quick-view {transform:translateY(0);}

.jj-hp .product-meta {padding:24px 4px 0;}

.jj-hp .product-name {
  font-family:'Playfair Display',serif;
  font-size:17px;font-weight:500;
  color:var(--ink);line-height:1.35;
  margin-bottom:10px;
  min-height:46px;
}

.jj-hp .product-cat {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:13px;
  color:var(--gold);margin-bottom:10px;
  letter-spacing:.5px;
}

.jj-hp .product-price {
  display:flex;align-items:baseline;gap:12px;
  font-family:'Jost';font-size:14px;
  color:var(--oxblood);font-weight:500;
  letter-spacing:.5px;
}

.jj-hp .product-price del {
  color:rgba(26,20,16,.4);font-weight:300;font-size:12.5px;
}

/* ======= EDITORIAL FEATURE (parallax) ======= */
.jj-hp .editorial {
  background:var(--oxblood);
  color:var(--gold-pale);
  position:relative;
  padding:160px 0;
  overflow:hidden;
}

.jj-hp .editorial::before {
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(212,175,122,.12),transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(212,175,122,.08),transparent 60%);
}

.jj-hp .editorial-grid {
  max-width:1340px;margin:0 auto;
  padding:0 64px;
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:96px;align-items:center;
  position:relative;z-index:2;
}

.jj-hp .editorial-img {
  aspect-ratio:4/5;
  background-size:cover;background-position:center;
  position:relative;
  box-shadow:0 30px 80px -10px rgba(0,0,0,.5);
}

.jj-hp .editorial-img::before {
  content:"";position:absolute;inset:-1px;
  border:1px solid rgba(184,153,104,.4);
  pointer-events:none;
}

.jj-hp .editorial-img .ornament {
  position:absolute;
  width:120px;height:120px;
  bottom:-40px;right:-40px;
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;color:var(--oxblood);text-align:center;
  line-height:1.3;letter-spacing:1.5px;
  z-index:3;
}

.jj-hp .editorial-img .ornament::before, .jj-hp .editorial-img .ornament::after {
  content:"";position:absolute;
  width:30px;height:30px;
  border:1px solid var(--gold);
}

.jj-hp .editorial-img .ornament::before {top:6px;left:6px;border-right:none;border-bottom:none;}

.jj-hp .editorial-img .ornament::after {bottom:6px;right:6px;border-left:none;border-top:none;}

.jj-hp .editorial-text .pre {
  font-size:10.5px;letter-spacing:5px;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:34px;display:inline-flex;gap:14px;align-items:center;
}

.jj-hp .editorial-text .pre .line {width:50px;height:1px;background:var(--gold);}

.jj-hp .editorial-text h3 {
  font-family:'Playfair Display',serif;
  font-weight:500;font-size:clamp(36px,3.8vw,58px);
  line-height:1.08;letter-spacing:-.5px;
  color:var(--ivory);
  margin-bottom:36px;
}

.jj-hp .editorial-text h3 em {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);font-weight:400;
}

.jj-hp .editorial-text p {
  font-size:15.5px;line-height:1.85;
  color:rgba(245,239,227,.78);
  margin-bottom:24px;
  max-width:540px;
}

.jj-hp .editorial-text .quote {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:24px;line-height:1.5;color:var(--gold-pale);
  border-left:2px solid var(--gold);
  padding:14px 0 14px 28px;
  margin:36px 0;
  max-width:520px;
}

.jj-hp .editorial-text .signature {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:16px;color:var(--gold);
  margin-top:8px;
}

/* ======= OCCASION GRID ======= */
.jj-hp .occasion-grid {
  max-width:1480px;margin:0 auto;
  padding:0 48px 140px;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.jj-hp .occ {
  position:relative;aspect-ratio:3/4;
  overflow:hidden;cursor:pointer;
  background:var(--ivory-deep);
}

.jj-hp .occ-img {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}

.jj-hp .occ:hover .occ-img {transform:scale(1.06);}

.jj-hp .occ::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(47,12,14,.85));
  z-index:1;
}

.jj-hp .occ-content {
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px 30px;color:var(--ivory);
}

.jj-hp .occ-content .num {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:var(--gold-pale);
  margin-bottom:10px;letter-spacing:2px;
}

.jj-hp .occ-content h4 {
  font-family:'Playfair Display',serif;
  font-size:32px;font-weight:500;
  line-height:1;margin-bottom:14px;
}

.jj-hp .occ-content .reveal-line {
  width:24px;height:1px;background:var(--gold);
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}

.jj-hp .occ:hover .occ-content .reveal-line {width:60px;}

.jj-hp .occ-content .desc {
  font-size:12.5px;letter-spacing:1px;
  color:rgba(245,239,227,.78);
  margin-top:14px;
  max-height:0;overflow:hidden;
  transition:max-height .6s ease,margin-top .6s ease;
}

.jj-hp .occ:hover .occ-content .desc {max-height:60px;}

/* ======= FEATURED TRIO ======= */
.jj-hp .featured {
  background:linear-gradient(180deg,var(--paper) 0%,var(--ivory) 100%);
  padding-bottom:140px;
}

.jj-hp .featured-grid {
  max-width:1340px;margin:0 auto;
  padding:0 48px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:42px;
}

.jj-hp .feat {
  background:var(--paper);
  position:relative;
  padding:24px 24px 36px;
  transition:all .6s cubic-bezier(.2,.7,.2,1);
}

.jj-hp .feat:hover {box-shadow:0 32px 70px -20px rgba(74,21,24,.18);transform:translateY(-6px);}

.jj-hp .feat-img {
  aspect-ratio:4/5;width:100%;
  background-size:cover;background-position:center;
  margin-bottom:28px;
  position:relative;overflow:hidden;
}

.jj-hp .feat-img .badge {
  position:absolute;top:18px;left:18px;
  background:var(--oxblood);color:var(--gold-pale);
  padding:8px 16px;
  font-size:10px;letter-spacing:2.6px;
  text-transform:uppercase;font-weight:500;
}

.jj-hp .feat-img .heart {
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(251,246,236,.85);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--oxblood);
  transition:all .4s ease;
}

.jj-hp .feat-img .heart:hover {background:var(--oxblood);color:var(--gold);transform:scale(1.1);}

.jj-hp .feat-cat {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;color:var(--gold);
  letter-spacing:1px;margin-bottom:8px;
}

.jj-hp .feat-name {
  font-family:'Playfair Display',serif;
  font-size:20px;font-weight:500;color:var(--ink);
  line-height:1.3;margin-bottom:14px;
  min-height:52px;
}

.jj-hp .feat-row {
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid rgba(74,21,24,.12);
}

.jj-hp .feat-price {
  font-family:'Playfair Display',serif;
  font-size:20px;color:var(--oxblood);font-weight:500;
}

.jj-hp .feat-cta {
  font-size:10.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--maroon);text-decoration:none;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .4s ease;
}

.jj-hp .feat-cta:hover {color:var(--gold);gap:14px;}

/* ======= CRAFTSMANSHIP PARALLAX BAND ======= */
.jj-hp .craft {
  position:relative;height:80vh;min-height:560px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}

.jj-hp .craft-bg {
  position:absolute;inset:-10% 0;
  background-size:cover;background-position:center 30%;
  background-image:linear-gradient(rgba(26,20,16,.65),rgba(74,21,24,.45)),url('https://images.unsplash.com/photo-1611652022419-a9419f74343d?q=80&w=1800&auto=format&fit=crop');
  will-change:transform;
}

.jj-hp .craft-content {
  position:relative;z-index:2;
  text-align:center;color:var(--ivory);
  padding:0 48px;max-width:880px;
}

.jj-hp .craft .pre {
  font-size:10.5px;letter-spacing:5px;
  color:var(--gold-pale);margin-bottom:32px;
  text-transform:uppercase;font-weight:400;
  display:inline-flex;align-items:center;gap:14px;
}

.jj-hp .craft .pre .line {width:48px;height:1px;background:var(--gold);}

.jj-hp .craft h3 {
  font-family:'Playfair Display',serif;
  font-weight:500;font-size:clamp(40px,5vw,72px);
  line-height:1.05;margin-bottom:30px;
  letter-spacing:-.5px;
}

.jj-hp .craft h3 em {font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-weight:400;}

.jj-hp .craft p {
  font-size:16px;line-height:1.8;
  color:rgba(245,239,227,.78);
  max-width:600px;margin:0 auto 38px;
}

/* ======= TESTIMONIALS ======= */
.jj-hp .testimonials {
  background:var(--paper);
  padding:140px 48px;
  position:relative;
  overflow:hidden;
}

.jj-hp .test-stage {
  max-width:900px;margin:0 auto;
  position:relative;height:300px;
  text-align:center;
}

.jj-hp .test-quote-mark {
  font-family:'Playfair Display',serif;
  font-size:140px;color:var(--gold);
  line-height:0;margin-bottom:30px;opacity:.3;
}

.jj-hp .test-slide {
  position:absolute;inset:0;
  opacity:0;transform:translateY(20px);
  transition:opacity 1s ease,transform 1s ease;
  pointer-events:none;
}

.jj-hp .test-slide.active {opacity:1;transform:translateY(0);pointer-events:auto;}

.jj-hp .test-slide blockquote {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:300;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.55;color:var(--oxblood);
  margin-bottom:38px;
  max-width:780px;margin-left:auto;margin-right:auto;
}

.jj-hp .test-slide .stars {
  color:var(--gold);font-size:13px;letter-spacing:6px;
  margin-bottom:14px;
}

.jj-hp .test-slide .author {
  font-family:'Playfair Display',serif;
  font-size:15px;color:var(--ink);font-weight:500;
  letter-spacing:1.5px;
}

.jj-hp .test-slide .role {
  font-size:11px;letter-spacing:3px;color:var(--gold);
  text-transform:uppercase;margin-top:6px;
}

.jj-hp .test-pager {
  display:flex;justify-content:center;gap:14px;
  margin-top:40px;
}

.jj-hp .test-pager button {
  width:32px;height:1px;background:rgba(74,21,24,.2);
  cursor:pointer;transition:all .4s ease;border:none;padding:0;
}

.jj-hp .test-pager button.active {background:var(--oxblood);height:2px;}

/* ======= INSTAGRAM ======= */
.jj-hp .insta {
  padding:0 0 0;
  background:var(--paper);
}

.jj-hp .insta-head {
  text-align:center;
  padding:60px 48px 60px;
}

.jj-hp .insta-head .handle {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:18px;color:var(--gold);
  margin-top:12px;
  letter-spacing:1.5px;
}

.jj-hp .insta-track-wrap {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}

.jj-hp .insta-track {
  display:flex;gap:14px;width:max-content;
  animation:scrollX 50s linear infinite reverse;
  padding:0 7px 80px;
}

.jj-hp .insta-tile {
  width:300px;aspect-ratio:1;flex-shrink:0;
  background-size:cover;background-position:center;
  position:relative;cursor:pointer;
  overflow:hidden;
}

.jj-hp .insta-tile::after {
  content:"";position:absolute;inset:0;
  background:rgba(74,21,24,.65);opacity:0;transition:opacity .4s ease;
  display:flex;align-items:center;justify-content:center;
}

.jj-hp .insta-tile::before {
  content:"♡  ❉";
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-pale);font-size:18px;
  letter-spacing:14px;
  opacity:0;transition:opacity .4s ease;
}

.jj-hp .insta-tile:hover::after {opacity:1;}

.jj-hp .insta-tile:hover::before {opacity:1;}

/* ======= NEWSLETTER ======= */
.jj-hp .newsletter {
  background:var(--oxblood);color:var(--gold-pale);
  padding:120px 48px;
  text-align:center;
  position:relative;overflow:hidden;
  border-top:1px solid rgba(184,153,104,.18);
}

.jj-hp .newsletter::before {
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,175,122,.18),transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(212,175,122,.1),transparent 70%);
}

.jj-hp .news-inner {position:relative;z-index:2;max-width:660px;margin:0 auto;}

.jj-hp .newsletter h3 {
  font-family:'Playfair Display',serif;
  font-weight:500;font-size:clamp(34px,3.6vw,52px);
  line-height:1.1;margin-bottom:18px;
  color:var(--ivory);
}

.jj-hp .newsletter h3 em {font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-weight:400;}

.jj-hp .newsletter p {
  font-size:15px;color:rgba(245,239,227,.72);
  line-height:1.8;margin-bottom:42px;
}

.jj-hp .news-form {
  display:flex;gap:0;
  border-bottom:1px solid var(--gold);
  max-width:520px;margin:0 auto;
}

.jj-hp .news-form input {
  flex:1;background:transparent;border:none;outline:none;
  color:var(--ivory);
  padding:16px 4px;
  font-family:'Jost',sans-serif;
  font-size:14px;font-weight:300;
  letter-spacing:1px;
}

.jj-hp .news-form input::placeholder {color:rgba(245,239,227,.4);font-style:italic;font-family:'Cormorant Garamond';font-size:16px;}

.jj-hp .news-form button {
  background:transparent;border:none;
  color:var(--gold);
  padding:14px 8px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;font-family:'Jost';font-weight:500;
  display:inline-flex;align-items:center;gap:10px;
  transition:gap .4s ease;
}

.jj-hp .news-form button:hover {gap:18px;}

/* ======= FOOTER ======= */
/* ======= FLOATING WHATSAPP BUTTON ======= */
}

/* ======= RESPONSIVE ======= */
@media (max-width:1024px) {

  .jj-hp .hero {grid-template-columns:1fr;min-height:auto;}

  .jj-hp .hero-text {padding:64px 28px 40px;}

  .jj-hp .hero-gallery {padding:0 28px 80px;}

  .jj-hp .hero-num, .jj-hp .hero-pager, .jj-hp .scroll-cue {display:none;}

  .jj-hp .hero-caption {position:static;margin-top:24px;}

  .jj-hp .editorial-grid {grid-template-columns:1fr;gap:48px;padding:0 28px;}

  .jj-hp .occasion-grid {grid-template-columns:repeat(2,1fr);padding:0 24px 80px;}

  .jj-hp .featured-grid {grid-template-columns:1fr;padding:0 24px;}

  .jj-hp .trust-strip {flex-wrap:wrap;gap:24px;font-size:10px;letter-spacing:2px;padding:18px 24px;}

  .jj-hp .trust-strip .sep {display:none;}

  }

@media (max-width:600px) {

  .jj-hp .occasion-grid {grid-template-columns:1fr;}

  .jj-hp .test-stage {height:380px;}

}
/* ============================================================ */
/* JASHAN HOMEPAGE — Mobile Refinements                         */
/* APPEND this to the BOTTOM of assets/jashan-custom.css        */
/* (i.e. paste at the new last line after our previous CSS)     */
/* ============================================================ */

/* --- Prevent any horizontal overflow on the homepage section --- */
.jj-hp {
  overflow-x: hidden;
}

/* ============================================================ */
/* ===== TRUE MOBILE (≤ 768px) — phones & smaller tablets ===== */
/* ============================================================ */
@media (max-width: 768px) {

  /* HERO — tighter spacing, headline scales, buttons stack */
  .jj-hp .hero-text { padding: 48px 24px 32px; }
  .jj-hp .hero h1  { font-size: clamp(40px, 10vw, 56px); }
  .jj-hp .hero p.lede,
  .jj-hp .hero .lede { font-size: 14.5px; margin: 26px 0 32px; max-width: 100%; }
  .jj-hp .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .jj-hp .hero-actions .btn { justify-content: center; padding: 16px 24px; font-size: 10.5px; letter-spacing: 2.8px; width: 100%; }
  .jj-hp .hero-actions .btn-ghost { text-align: center; border-bottom: none; border: 1px solid rgba(74,21,24,.4); }
  .jj-hp .hero-meta { gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; }
  .jj-hp .hero-meta .stat .num { font-size: 24px; }
  .jj-hp .hero-meta .stat .lbl { font-size: 9px; letter-spacing: 1.8px; }
  .jj-hp .hero-gallery { padding: 0 24px 60px; }
  .jj-hp .hero-frame { max-width: 100%; }

  /* EDITORIAL — stack and breathe */
  .jj-hp .editorial { padding: 80px 0; }
  .jj-hp .editorial-grid { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .jj-hp .editorial-text h3 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 24px; }
  .jj-hp .editorial-text p { font-size: 14.5px; max-width: 100%; }
  .jj-hp .editorial-text .quote { font-size: 18px; padding: 10px 0 10px 18px; margin: 24px 0; }
  .jj-hp .editorial-img .ornament { width: 90px; height: 90px; bottom: -28px; right: -16px; font-size: 11px; }

  /* FEATURED TRIO — single column */
  .jj-hp .featured { padding-bottom: 80px; }
  .jj-hp .featured-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .jj-hp .feat-name { min-height: auto; font-size: 17px; }
  .jj-hp .feat-img { aspect-ratio: 4/5; }

  /* SECTION HEADS — readable on phone */
  .jj-hp .section-head { padding: 80px 24px 40px; }
  .jj-hp .section-head h2 { font-size: clamp(30px, 7vw, 44px); }
  .jj-hp .section-head p { font-size: 14px; }

  /* OCCASION — 2-up still works on tablet but stacks below */
  .jj-hp .occasion-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 80px; }
  .jj-hp .occ-content { padding: 24px 20px; }
  .jj-hp .occ-content h4 { font-size: 22px; }
  .jj-hp .occ-content .num { font-size: 12px; }

  /* CRAFT BAND */
  .jj-hp .craft { height: 70vh; min-height: 480px; }
  .jj-hp .craft h3 { font-size: clamp(32px, 8vw, 48px); }
  .jj-hp .craft p { font-size: 14.5px; }
  .jj-hp .craft-content { padding: 0 24px; }

  /* TESTIMONIALS */
  .jj-hp .testimonials { padding: 80px 24px; }
  .jj-hp .test-stage { height: 360px; }
  .jj-hp .test-slide blockquote { font-size: 18px; padding: 0 8px; }

  /* INSTAGRAM tiles smaller */
  .jj-hp .insta-tile { width: 220px; }

  /* NEWSLETTER */
  .jj-hp .newsletter { padding: 80px 24px; }
  .jj-hp .newsletter h3 { font-size: clamp(28px, 7vw, 40px); }
  .jj-hp .newsletter p { font-size: 14px; }

  /* TRUST STRIP — wrap & shrink */
  .jj-hp .trust-strip { gap: 16px 20px; padding: 16px 20px; }
  .jj-hp .trust-strip .item { font-size: 9.5px; letter-spacing: 1.4px; gap: 8px; }
  .jj-hp .trust-strip .item svg { width: 14px; height: 14px; }
  .jj-hp .trust-strip .sep { display: none; }

  /* MARQUEE — slightly smaller cards */
  .jj-hp .product { width: 280px; }
  .jj-hp .product-name { font-size: 16px; min-height: auto; margin-bottom: 6px; }
  .jj-hp .product-cat { font-size: 12px; }

  /* HERO CAPTION — sits below image, not floating */
  .jj-hp .hero-caption { position: static; margin-top: 16px; min-width: 0; padding: 16px 20px; }
  .jj-hp .hero-num { display: none; }
  .jj-hp .hero-pager { position: static; justify-content: center; margin-top: 14px; }
  .jj-hp .scroll-cue { display: none; }
}

/* ============================================================ */
/* ===== NARROW PHONES (≤ 480px) ===== */
/* ============================================================ */
@media (max-width: 480px) {

  /* OCCASION — single column on smallest phones */
  .jj-hp .occasion-grid { grid-template-columns: 1fr; }
  .jj-hp .occ { aspect-ratio: 16/10; }

  /* HERO — tighter still */
  .jj-hp .hero-meta { gap: 14px; }
  .jj-hp .hero-meta .stat .num { font-size: 20px; }
  .jj-hp .hero-meta .stat .lbl { font-size: 8.5px; letter-spacing: 1.4px; }
  .jj-hp .hero h1 { font-size: clamp(34px, 11vw, 48px); }

  /* MARQUEE — smaller cards on tiny phones */
  .jj-hp .product { width: 240px; }

  /* SECTION HEADS — even tighter */
  .jj-hp .section-head { padding: 60px 20px 32px; }
  .jj-hp .section-head h2 { font-size: clamp(26px, 8vw, 36px); }

  /* INSTAGRAM tiles */
  .jj-hp .insta-tile { width: 180px; }
}/* ============================================================ */
/* DEFENSIVE TABLET-DOWN OVERRIDES — guaranteed single column  */
/* ============================================================ */
@media (max-width: 1100px) {
  .jj-hp .hero            { grid-template-columns: 1fr !important; min-height: auto !important; }
  .jj-hp .hero-caption    { position: static !important; margin-top: 18px !important; right: auto !important; bottom: auto !important; box-shadow: none !important; }
  .jj-hp .hero-gallery    { padding: 0 28px 60px !important; }
  .jj-hp .hero-num        { display: none !important; }
  .jj-hp .scroll-cue      { display: none !important; }
  .jj-hp .editorial-grid  { grid-template-columns: 1fr !important; gap: 48px !important; padding: 0 28px !important; }
  .jj-hp .featured-grid   { grid-template-columns: 1fr !important; padding: 0 24px !important; }
}/* ============================================================ */
/* Hero gallery — STACK image + caption vertically on mobile   */
/* ============================================================ */
@media (max-width: 1100px) {
  .jj-hp .hero-gallery {
    flex-direction: column !important;
    padding: 0 28px 60px !important;
  }
  .jj-hp .hero-frame {
    max-width: 100% !important;
    width: 100% !important;
  }
  .jj-hp .hero-caption {
    position: static !important;
    margin-top: 18px !important;
    width: 100% !important;
    box-shadow: none !important;
    border-left: 2px solid var(--gold);
  }
  .jj-hp .hero-pager {
    position: static !important;
    justify-content: center !important;
    margin-top: 14px !important;
  }
}