/* ─── JAJEMELO PIZZA & CHICKEN — DESIGN SYSTEM ─── */

/* ─── TOKENS ─── */
:root {
  --crimson:  #8f0500;
  --flame:    #ff4b03;
  --flame-l:  #ff6e30;
  --white:    #ffffff;
  --off:      #faf8f6;
  --surface:  #f2eeea;
  --border:   #e6e0d9;
  --ink:      #180e08;
  --ink-mid:  #6a594c;
  --ink-soft: #a8978a;
  --r-sm:     12px;
  --r-md:     20px;
  --r-lg:     32px;
  --r-xl:     44px;
  --ff:       'Outfit', sans-serif;
  --sh-sm:    0 2px 10px rgba(24,14,8,.07);
  --sh-md:    0 6px 24px rgba(24,14,8,.10);
  --sh-lg:    0 18px 60px rgba(24,14,8,.13);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--ff); background: var(--white); color: var(--ink); overflow-x: hidden; }
a    { text-decoration: none; color: inherit; }

/* ─── CONTAINER ─── */
.jj-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
}

/* Override Bagisto's Tailwind .container for all non-custom pages */
.container {
  max-width: 1200px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* ══════════════ NAV ══════════════ */
nav.jj-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 68px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.jj-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}
.jj-logo { display: flex; align-items: center; gap: 10px; }
.jj-logo-img { height: 48px; width: auto; display: block; object-fit: contain; }
.jj-logo-img--footer { height: 40px; }
.jj-logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--crimson); display: grid; place-items: center; font-size: 18px;
}
.jj-logo-text { font-weight: 800; font-size: .98rem; line-height: 1.1; color: var(--ink); font-family: var(--ff); }
.jj-logo-text em { font-style: normal; color: var(--flame); font-size: .72em; font-weight: 500; display: block; }

.jj-nav-links { display: flex; gap: 32px; }
.jj-nav-links a { font-size: .88rem; font-weight: 600; color: var(--ink-mid); transition: color .2s; font-family: var(--ff); }
.jj-nav-links a:hover { color: var(--flame); }

.jj-nav-right { display: flex; align-items: center; gap: 10px; }
.jj-btn-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 1rem; transition: background .2s;
  position: relative;
}
.jj-btn-icon:hover { background: var(--border); }
.jj-btn-icon .cart-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--flame); color: var(--white);
  font-size: .6rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.jj-btn-nav {
  background: var(--flame); color: var(--white);
  font-family: var(--ff); font-weight: 700; font-size: .85rem;
  padding: 9px 22px; border-radius: 50px; border: none; cursor: pointer;
  transition: background .2s, transform .15s;
}
.jj-btn-nav:hover { background: var(--crimson); transform: translateY(-1px); }
.jj-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.jj-hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; display: block; }

/* MOBILE NAV */
.jj-nav-mobile {
  position: fixed; inset: 0; z-index: 999; background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  transform: translateX(-100%); transition: transform .35s ease;
}
.jj-nav-mobile.open { transform: translateX(0); }
.jj-nav-mobile a { font-size: 2rem; font-weight: 800; color: var(--ink); transition: color .2s; font-family: var(--ff); }
.jj-nav-mobile a:hover { color: var(--flame); }
.jj-m-close { position: absolute; top: 22px; right: 24px; background: none; border: none; font-size: 1.6rem; cursor: pointer; }

/* Body offset for fixed nav */
body { padding-top: 68px; }

/* ══════════════ HERO ══════════════ */
.jj-hero {
  padding: 52px 0 60px;
  background: var(--white);
  position: relative; overflow: hidden;
}
.jj-hero::before {
  content: '';
  position: absolute; right: -160px; top: -160px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,75,3,.07) 0%, transparent 65%);
  pointer-events: none;
}
.jj-hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 40px;
}

.jj-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--flame); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  padding: 6px 15px; border-radius: 50px; width: fit-content;
  margin-bottom: 22px;
  animation: jj-fadeUp .55s ease both;
}
.jj-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flame); animation: jj-blink 1.5s ease infinite; }
@keyframes jj-blink { 0%,100%{opacity:1}50%{opacity:.3} }

.jj-hero-h1 {
  font-size: clamp(2.8rem, 5.8vw, 4.6rem); font-weight: 900; line-height: 1.04;
  color: var(--ink); margin-bottom: 20px; letter-spacing: -.02em;
  animation: jj-fadeUp .65s .07s ease both; font-family: var(--ff);
}
.jj-hero-h1 .jj-red  { color: var(--crimson); }
.jj-hero-h1 .jj-fire { color: var(--flame); }

.jj-hero-sub {
  color: var(--ink-mid); font-size: 1rem; font-weight: 400; line-height: 1.75;
  max-width: 430px; margin-bottom: 24px;
  animation: jj-fadeUp .65s .14s ease both;
}

.jj-hero-btns {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
  animation: jj-fadeUp .65s .21s ease both;
}
.jj-btn-primary {
  background: var(--flame); color: var(--white);
  font-family: var(--ff); font-weight: 700; font-size: .93rem;
  padding: 13px 30px; border-radius: 50px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; box-shadow: 0 6px 22px rgba(255,75,3,.30);
}
.jj-btn-primary:hover { background: var(--crimson); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(143,5,0,.28); }
.jj-btn-outline {
  background: transparent; color: var(--ink);
  font-family: var(--ff); font-weight: 600; font-size: .93rem;
  padding: 12px 26px; border-radius: 50px; border: 2px solid var(--border); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: all .2s;
}
.jj-btn-outline:hover { border-color: var(--flame); color: var(--flame); }

.jj-hero-stats {
  display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; animation: jj-fadeUp .65s .28s ease both;
}
.jj-hstat { padding: 14px 26px; border-right: 1.5px solid var(--border); text-align: center; }
.jj-hstat:last-child { border-right: none; }
.jj-hstat-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--flame); font-family: var(--ff); }
.jj-hstat-lbl { font-size: .7rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; }

/* HERO VISUAL */
.jj-hero-visual {
  position: relative; padding: 0 0 56px 20px;
  animation: jj-fadeIn .9s .25s ease both;
}
.jj-hero-img-main {
  border-radius: var(--r-xl); overflow: hidden;
  height: 460px; box-shadow: var(--sh-lg); position: relative;
}
.jj-hero-img-main img { height: 100%; width: 100%; object-fit: cover; object-position: center 30%; }

.jj-h-card {
  position: absolute; background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 12px 16px; box-shadow: var(--sh-md);
  display: flex; align-items: center; gap: 10px;
}
.jj-h-card-left  { bottom: 16px; left: -16px; }
.jj-h-card-right { top: 20px; right: -16px; background: var(--crimson); border-color: transparent; color: var(--white); }
.jj-hc-icon { font-size: 1.6rem; }
.jj-hc-text { font-size: .82rem; font-weight: 700; line-height: 1.25; font-family: var(--ff); }
.jj-hc-text small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .72rem; }
.jj-h-card-right .jj-hc-text small { color: rgba(255,255,255,.65); }

/* ══════════════ MARQUEE ══════════════ */
.jj-marquee-strip { background: var(--crimson); padding: 16px 0; overflow: hidden; white-space: nowrap; }
.jj-marquee-inner { display: inline-flex; animation: jj-scroll 22s linear infinite; }
.jj-mi {
  font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.88);
  padding: 0 30px; display: flex; align-items: center; gap: 10px; font-family: var(--ff);
}
.jj-mi::after { content: '✦'; color: rgba(255,255,255,.3); }
@keyframes jj-scroll { from{transform:translateX(0)}to{transform:translateX(-50%)} }

/* ══════════════ SECTION UTILS ══════════════ */
.jj-section { padding: 100px 0; }

/* ══════════════ PAGE HERO ══════════════ */
.jj-page-hero {
  background: var(--off);
  border-bottom: 1.5px solid var(--border);
  padding: 72px 0 60px;
  text-align: center;
}
.jj-page-hero .jj-eyebrow { justify-content: center; }
.jj-page-hero .jj-sh2 { margin: 0 auto; }
.jj-page-hero .jj-sp { margin: 0 auto; text-align: center; }
.jj-eyebrow {
  font-size: .73rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--flame); margin-bottom: 10px; font-family: var(--ff);
}
.jj-sh2 {
  font-size: clamp(1.9rem, 3.5vw, 2.85rem); font-weight: 800;
  line-height: 1.12; color: var(--ink); letter-spacing: -.01em; font-family: var(--ff);
}
.jj-sh2 span { color: var(--crimson); }
.jj-sp { color: var(--ink-mid); font-size: .96rem; line-height: 1.78; max-width: 480px; font-family: var(--ff); }

/* ══════════════ WHY US ══════════════ */
.jj-why { background: var(--off); }
.jj-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.jj-why-left { display: flex; flex-direction: column; gap: 30px; }
.jj-why-head { display: flex; flex-direction: column; gap: 10px; }
.jj-why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jj-wcard {
  background: var(--white); border-radius: var(--r-md);
  padding: 22px 18px; border: 1.5px solid var(--border);
  transition: all .25s;
}
.jj-wcard:hover { border-color: var(--flame); box-shadow: var(--sh-md); transform: translateY(-3px); }
.jj-wcard-icon { font-size: 1.8rem; margin-bottom: 10px; }
.jj-wcard-title { font-size: .93rem; font-weight: 700; margin-bottom: 6px; font-family: var(--ff); }
.jj-wcard-desc { font-size: .8rem; color: var(--ink-mid); line-height: 1.6; font-family: var(--ff); }

.jj-why-img-wrap { position: relative; }
.jj-why-img { border-radius: var(--r-xl); overflow: hidden; height: 530px; box-shadow: var(--sh-lg); }
.jj-why-img img { height: 100%; width: 100%; object-fit: cover; }
.jj-why-badge {
  position: absolute; bottom: 26px; left: -22px;
  background: var(--flame); color: var(--white);
  border-radius: var(--r-md); padding: 16px 20px;
  font-size: 1.15rem; font-weight: 800; line-height: 1.2; text-align: center;
  box-shadow: 0 6px 22px rgba(255,75,3,.38); font-family: var(--ff);
}
.jj-why-badge small { display: block; font-size: .7rem; font-weight: 500; opacity: .85; }

/* ══════════════ MENU ══════════════ */
.jj-menu { background: var(--white); }
.jj-menu-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; gap: 16px; flex-wrap: wrap; }
.jj-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 44px; }
.jj-tab {
  font-family: var(--ff); font-size: .82rem; font-weight: 600;
  padding: 8px 20px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); background: transparent; color: var(--ink-mid); cursor: pointer; transition: all .2s;
}
.jj-tab.active,.jj-tab:hover { background: var(--crimson); color: var(--white); border-color: var(--crimson); }
.jj-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 50px;
  font-size: .7rem; font-weight: 700; line-height: 1;
  background: rgba(0,0,0,.1); color: inherit; transition: background .2s;
}
.jj-tab.active .jj-tab-count, .jj-tab:hover .jj-tab-count { background: rgba(255,255,255,.25); }

.jj-grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 18px; }

.jj-mcard {
  background: var(--white); border-radius: var(--r-lg);
  border: 1.5px solid var(--border); overflow: hidden; cursor: pointer; transition: all .25s;
  text-decoration: none; color: inherit; display: block;
}
.jj-mcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.jj-mcard-img { height: 188px; overflow: hidden; position: relative; background: var(--surface); }
.jj-mcard-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .4s; }
.jj-mcard:hover .jj-mcard-img img { transform: scale(1.07); }
.jj-mcard-cat {
  position: absolute; top: 11px; left: 11px;
  background: var(--white); color: var(--crimson);
  font-size: .67rem; font-weight: 700; font-family: var(--ff);
  padding: 4px 11px; border-radius: 50px; border: 1.5px solid var(--border);
}
.jj-mcard-hot {
  position: absolute; top: 11px; right: 11px;
  background: var(--flame); color: var(--white);
  font-size: .67rem; font-weight: 700; font-family: var(--ff);
  padding: 4px 10px; border-radius: 50px;
}
.jj-mcard-body { padding: 16px 17px 18px; }
.jj-mcard-name { font-size: .98rem; font-weight: 700; margin-bottom: 4px; font-family: var(--ff); }
.jj-mcard-desc { font-size: .8rem; color: var(--ink-mid); line-height: 1.58; margin-bottom: 14px; font-family: var(--ff); }
.jj-mcard-foot { display: flex; justify-content: space-between; align-items: center; }
.jj-mcard-price { font-size: 1.08rem; font-weight: 800; color: var(--crimson); font-family: var(--ff); }
.jj-add-btn {
  width: 33px; height: 33px; border-radius: 50%;
  background: var(--flame); border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--white); font-size: 1.1rem; font-weight: 700;
  transition: all .2s; box-shadow: 0 3px 10px rgba(255,75,3,.28); text-decoration: none;
  flex-shrink: 0;
}
.jj-add-btn:hover { background: var(--crimson); transform: scale(1.12); }

/* ══════════════ ABOUT ══════════════ */
.jj-about { background: var(--off); display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; overflow: hidden; }
.jj-about-img { overflow: hidden; position: relative; }
.jj-about-img img { height: 100%; width: 100%; object-fit: cover; object-position: center 25%; }
.jj-about-pill {
  position: absolute; bottom: 26px; right: 26px;
  background: var(--white); border-radius: var(--r-md);
  padding: 14px 18px; box-shadow: var(--sh-md);
  display: flex; gap: 10px; align-items: center;
}
.jj-ap-ico { font-size: 1.5rem; }
.jj-ap-txt { font-size: .83rem; font-weight: 700; font-family: var(--ff); }
.jj-ap-txt small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .73rem; }

.jj-about-body { padding: 8% 7%; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.jj-about-row { display: flex; gap: 14px; flex-wrap: wrap; }
.jj-astat {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 18px 22px; flex: 1; min-width: 110px;
}
.jj-astat-n { font-size: 1.75rem; font-weight: 800; color: var(--flame); font-family: var(--ff); }
.jj-astat-l { font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-family: var(--ff); }

/* ══════════════ TESTIMONIALS ══════════════ */
.jj-testi-section { background: var(--white); }
.jj-testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px,1fr)); gap: 18px; margin-top: 46px; }
.jj-tc {
  background: var(--off); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 26px; transition: all .25s;
}
.jj-tc:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.jj-tc-stars { color: var(--flame); font-size: .88rem; letter-spacing: 2px; margin-bottom: 13px; }
.jj-tc-q { font-size: .9rem; line-height: 1.75; color: var(--ink-mid); font-style: italic; margin-bottom: 20px; font-family: var(--ff); }
.jj-tc-auth { display: flex; align-items: center; gap: 11px; }
.jj-tc-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.jj-tc-av img { width: 100%; height: 100%; object-fit: cover; }
.jj-tc-name { font-size: .88rem; font-weight: 700; font-family: var(--ff); }
.jj-tc-loc  { font-size: .74rem; color: var(--ink-soft); font-family: var(--ff); }

/* ══════════════ CTA ══════════════ */
.jj-cta-wrap { padding: 0 0 100px; }
.jj-cta-box {
  background: var(--crimson); border-radius: var(--r-xl);
  padding: 66px 72px; display: flex; align-items: center;
  justify-content: space-between; gap: 40px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.jj-cta-box::before {
  content: '🍗'; position: absolute; right: -10px; bottom: -20px;
  font-size: 220px; opacity: .05; transform: rotate(10deg); pointer-events: none;
}
.jj-cta-box h2 { font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 8px; font-family: var(--ff); }
.jj-cta-box p  { color: rgba(255,255,255,.7); font-size: .94rem; line-height: 1.65; max-width: 380px; font-family: var(--ff); }
.jj-cta-btns   { display: flex; gap: 12px; flex-wrap: wrap; }
.jj-btn-wh {
  background: var(--white); color: var(--crimson);
  font-family: var(--ff); font-weight: 700; font-size: .88rem;
  padding: 13px 28px; border-radius: 50px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
}
.jj-btn-wh:hover { background: var(--flame); color: var(--white); transform: translateY(-2px); }
.jj-btn-wh-o {
  background: transparent; color: var(--white);
  font-family: var(--ff); font-weight: 600; font-size: .88rem;
  padding: 12px 26px; border-radius: 50px; border: 2px solid rgba(255,255,255,.4); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
}
.jj-btn-wh-o:hover { border-color: var(--white); background: rgba(255,255,255,.1); }

/* ══════════════ FOOTER ══════════════ */
footer.jj-footer { background: #120b06; color: rgba(255,255,255,.5); padding: 70px 0 30px; }
.jj-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; margin-bottom: 52px; }
.jj-footer-brand .jj-logo-text { color: var(--white); }
.jj-footer-brand > p { font-size: .85rem; line-height: 1.78; margin-top: 14px; max-width: 260px; font-family: var(--ff); }
.jj-socials { display: flex; gap: 9px; margin-top: 20px; }
.jj-soc {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center; font-size: .88rem; cursor: pointer; transition: background .2s;
}
.jj-soc:hover { background: var(--flame); }
.jj-footer-col h4 { font-size: .88rem; font-weight: 700; color: var(--white); margin-bottom: 16px; font-family: var(--ff); }
.jj-footer-col ul { list-style: none; padding: 0; margin: 0; }
.jj-footer-col li { margin-bottom: 9px; }
.jj-footer-col li a { font-size: .84rem; transition: color .2s; font-family: var(--ff); color: rgba(255,255,255,.5); }
.jj-footer-col li a:hover { color: var(--flame); }
.jj-fc-contact li { display: flex; gap: 9px; margin-bottom: 11px; font-size: .84rem; align-items: flex-start; }
.jj-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; font-size: .78rem; font-family: var(--ff);
}
.jj-footer-bottom a { color: var(--flame); }

/* ══════════════ TOAST ══════════════ */
.jj-toast {
  position: fixed; bottom: 26px; right: 26px; z-index: 9999;
  background: var(--ink); color: var(--white);
  border-radius: var(--r-md); padding: 14px 20px;
  display: flex; align-items: center; gap: 11px;
  font-size: .86rem; font-weight: 600; font-family: var(--ff);
  box-shadow: var(--sh-lg);
  transform: translateY(60px) scale(.92); opacity: 0;
  transition: all .34s cubic-bezier(.34,1.56,.64,1); pointer-events: none;
}
.jj-toast.show { transform: translateY(0) scale(1); opacity: 1; }

/* ══════════════ PRODUCT QUICK-VIEW MODAL ══════════════ */
.jj-qv-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(24,14,8,.55); backdrop-filter: blur(4px);
}
.jj-qv-panel {
  position: fixed; inset: 0; z-index: 1101;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  pointer-events: none;
}
.jj-qv-panel > * { pointer-events: auto; }
.jj-qv-wrap { position: relative; max-width: 860px; width: 100%; }
.jj-qv-close {
  position: absolute; top: -14px; right: -14px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--border);
  font-size: 1rem; cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--sh-md); transition: background .2s;
}
.jj-qv-close:hover { background: var(--surface); }
.jj-qv-card {
  background: var(--white); border-radius: var(--r-xl);
  width: 100%; max-height: 88vh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--sh-lg);
}
.jj-qv-img {
  overflow: hidden; background: var(--surface);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}
.jj-qv-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 360px; }
.jj-qv-body {
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.jj-qv-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--flame); }
.jj-qv-name { font-size: 1.65rem; font-weight: 800; line-height: 1.15; color: var(--ink); }
.jj-qv-price { font-size: 1.5rem; font-weight: 800; color: var(--crimson); }
.jj-qv-desc { font-size: .9rem; color: var(--ink-mid); line-height: 1.75; flex: 1; }
.jj-qv-divider { border: none; border-top: 1.5px solid var(--border); margin: 4px 0; }
.jj-qv-qty-row { display: flex; align-items: center; gap: 16px; }
.jj-qv-qty-label { font-size: .82rem; font-weight: 600; color: var(--ink-mid); }
.jj-qv-qty {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid var(--border); border-radius: 50px; overflow: hidden;
}
.jj-qv-qty-btn {
  width: 38px; height: 38px; background: transparent; border: none;
  font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
  color: var(--ink); transition: background .2s; font-family: var(--ff);
}
.jj-qv-qty-btn:hover { background: var(--surface); }
.jj-qv-qty-num { font-size: 1rem; font-weight: 700; min-width: 36px; text-align: center; }
.jj-qv-add {
  background: var(--flame); color: var(--white);
  font-family: var(--ff); font-weight: 700; font-size: .96rem;
  padding: 14px 28px; border-radius: 50px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; transition: all .2s; box-shadow: 0 6px 22px rgba(255,75,3,.25);
  margin-top: auto;
}
.jj-qv-add:hover:not(:disabled) { background: var(--crimson); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(143,5,0,.22); }
.jj-qv-add:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.jj-qv-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
  animation: jj-spin .7s linear infinite;
}
@keyframes jj-spin { to { transform: rotate(360deg); } }

/* Modal transitions */
.jj-qv-enter { animation: jj-qv-in .28s cubic-bezier(.34,1.2,.64,1) both; }
.jj-qv-leave { animation: jj-qv-out .2s ease both; }
@keyframes jj-qv-in  { from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)} }
@keyframes jj-qv-out { from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)} }

/* ══════════════ PRODUCT CARD OVERRIDE ══════════════ */
/* Bagisto category/search pages will use these .jj-mcard styles */
.jj-card-wrap { width: 100%; }

/* ══════════════ PRODUCT DETAIL PAGE (PDP) ══════════════ */
.jj-pdp {
  padding: 60px 0 100px;
  min-height: calc(100vh - 68px);
}
.jj-pdp-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.jj-pdp-gallery {
  position: sticky; top: 88px;
}
.jj-pdp-main-img {
  border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 1; background: var(--surface); box-shadow: var(--sh-md);
}
.jj-pdp-main-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jj-pdp-thumbs {
  display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.jj-pdp-thumb {
  width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; transition: border-color .2s;
  background: var(--surface);
}
.jj-pdp-thumb.active,.jj-pdp-thumb:hover { border-color: var(--flame); }
.jj-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jj-pdp-body { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.jj-pdp-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--flame); }
.jj-pdp-name { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.12; color: var(--ink); }
.jj-pdp-price { font-size: 1.8rem; font-weight: 800; color: var(--crimson); }
.jj-pdp-desc { font-size: .96rem; color: var(--ink-mid); line-height: 1.78; }
.jj-pdp-divider { border: none; border-top: 1.5px solid var(--border); }
.jj-pdp-options { display: flex; flex-direction: column; gap: 16px; }
.jj-pdp-qty-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.jj-pdp-qty-label { font-size: .85rem; font-weight: 600; color: var(--ink-mid); min-width: 60px; }
.jj-pdp-qty {
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: 50px; overflow: hidden;
}
.jj-pdp-qty-btn {
  width: 42px; height: 42px; background: transparent; border: none;
  font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
  color: var(--ink); transition: background .2s;
}
.jj-pdp-qty-btn:hover { background: var(--surface); }
.jj-pdp-qty-num { font-size: 1rem; font-weight: 700; min-width: 40px; text-align: center; }
.jj-pdp-add {
  background: var(--flame); color: var(--white);
  font-family: var(--ff); font-weight: 700; font-size: 1rem;
  padding: 16px 32px; border-radius: 50px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; transition: all .2s; box-shadow: 0 6px 22px rgba(255,75,3,.28);
}
.jj-pdp-add:hover:not(:disabled) { background: var(--crimson); transform: translateY(-2px); }
.jj-pdp-add:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.jj-pdp-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 600; color: var(--ink-mid);
  margin-bottom: 32px; transition: color .2s;
}
.jj-pdp-back:hover { color: var(--flame); }

/* ══════════════ ANIMATIONS ══════════════ */
@keyframes jj-fadeUp  { from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)} }
@keyframes jj-fadeIn  { from{opacity:0}to{opacity:1} }
@keyframes jj-shimmer { 0%,100%{opacity:.6} 50%{opacity:.25} }
.jj-reveal { opacity:0; transform:translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.jj-reveal.in { opacity:1; transform:translateY(0); }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 980px) {
  .jj-hero-inner { grid-template-columns: 1fr; }
  .jj-hero-visual { display: none; }
  .jj-why-inner { grid-template-columns: 1fr; }
  .jj-about { grid-template-columns: 1fr; }
  .jj-about-img { height: 340px; }
  .jj-footer-grid { grid-template-columns: 1fr 1fr; }
  .jj-pdp-inner { grid-template-columns: 1fr; }
  .jj-pdp-gallery { position: static; }
}
@media (max-width: 680px) {
  .jj-qv-card { grid-template-columns: 1fr; max-height: 88vh; }
  .jj-qv-img { border-radius: var(--r-xl) var(--r-xl) 0 0; min-height: 220px; }
  .jj-qv-img img { min-height: 220px; }
  .jj-qv-body { padding: 24px 20px; }
}
@media (max-width: 640px) {
  .jj-nav-links, .jj-btn-nav { display: none; }
  .jj-hamburger { display: flex; }
  .jj-why-cards { grid-template-columns: 1fr; }
  .jj-cta-box { padding: 44px 30px; text-align: center; justify-content: center; }
  .jj-cta-wrap { padding: 0 0 72px; }
  .jj-footer-grid { grid-template-columns: 1fr; }
  .jj-section { padding: 72px 0; }
  .jj-hero { padding: 40px 0 30px; }
  .jj-container { padding: 0 20px; }
  .jj-pdp { padding: 40px 0 72px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MINI CART
══════════════════════════════════════════════════════════════════════════ */
.jj-mc-wrap { position: relative; }

.jj-mc-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 360px; max-height: 80vh;
  background: var(--white); border-radius: var(--r-lg);
  border: 1.5px solid var(--border); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 1200;
}
.jj-mc-drop-enter-active { animation: jj-mc-in .22s cubic-bezier(.34,1.2,.64,1) both; }
.jj-mc-drop-leave-active { animation: jj-mc-out .15s ease both; }
@keyframes jj-mc-in  { from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes jj-mc-out { from{opacity:1}to{opacity:0;transform:translateY(-4px)} }

.jj-mc-overlay {
  position: fixed; inset: 0; z-index: 1199;
}

.jj-mc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px; border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.jj-mc-title { font-size: .95rem; font-weight: 700; color: var(--ink); font-family: var(--ff); }
.jj-mc-x {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: none; cursor: pointer;
  display: grid; place-items: center; font-size: .8rem; color: var(--ink-mid);
  transition: background .18s;
}
.jj-mc-x:hover { background: var(--border); }

.jj-mc-body {
  overflow-y: auto; flex: 1;
  padding: 12px 18px; display: flex; flex-direction: column; gap: 14px;
}
.jj-mc-item {
  display: flex; gap: 12px; align-items: flex-start; position: relative;
}
.jj-mc-img {
  width: 60px; height: 60px; border-radius: var(--r-sm);
  overflow: hidden; flex-shrink: 0; background: var(--surface);
}
.jj-mc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jj-mc-info { flex: 1; min-width: 0; }
.jj-mc-name { font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 3px; font-family: var(--ff); }
.jj-mc-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.jj-mc-opt {
  font-size: .7rem; font-weight: 600; color: var(--flame);
  background: rgba(255,75,3,.08); border-radius: 50px; padding: 2px 8px;
  font-family: var(--ff);
}
.jj-mc-row { display: flex; gap: 8px; align-items: center; }
.jj-mc-price { font-size: .9rem; font-weight: 800; color: var(--crimson); font-family: var(--ff); }
.jj-mc-qty  { font-size: .78rem; color: var(--ink-soft); font-family: var(--ff); }
.jj-mc-rm {
  position: absolute; top: 0; right: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: none; cursor: pointer;
  display: grid; place-items: center; font-size: .6rem; color: var(--ink-mid);
  transition: background .18s, color .18s;
}
.jj-mc-rm:hover { background: var(--crimson); color: var(--white); }

.jj-mc-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 32px 20px; text-align: center;
}
.jj-mc-empty-icon { font-size: 2.5rem; }
.jj-mc-empty p { font-size: .9rem; color: var(--ink-mid); font-family: var(--ff); }

.jj-mc-foot {
  padding: 14px 18px; border-top: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.jj-mc-subtotal {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.jj-mc-sub-lbl { font-size: .82rem; font-weight: 600; color: var(--ink-mid); font-family: var(--ff); }
.jj-mc-sub-amt { font-size: 1.15rem; font-weight: 800; color: var(--crimson); font-family: var(--ff); }

@media (max-width: 480px) {
  .jj-mc-panel { width: calc(100vw - 32px); right: -8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CART PAGE
══════════════════════════════════════════════════════════════════════════ */
.jj-cart-page { padding: 48px 0 100px; min-height: calc(100vh - 68px); }

.jj-cart-notice {
  margin: 16px 0; background: #fff3cd; border-radius: var(--r-sm);
  padding: 12px 18px; font-size: .88rem; color: #856404;
}

.jj-cart-guest {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 20px 24px; margin-top: 32px; background: var(--off);
}

/* Override Bagisto's default navyBlue cart button colours */
.jj-cart-page .primary-button,
.jj-cart-page button[type="submit"].primary-button {
  background: var(--flame) !important;
  color: var(--white) !important;
  border-radius: 50px !important;
  font-family: var(--ff) !important;
  font-weight: 700 !important;
}
.jj-cart-page .primary-button:hover { background: var(--crimson) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   AUTH PAGES (Sign-in / Sign-up)
══════════════════════════════════════════════════════════════════════════ */
.jj-auth-wrap { padding: 52px 0 100px; }
.jj-auth-card {
  max-width: 560px; margin: 0 auto;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-xl); padding: 48px 52px;
  box-shadow: var(--sh-md);
}

.jj-label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink-mid); margin-bottom: 6px; font-family: var(--ff);
}
.jj-label.required::after { content: ' *'; color: var(--crimson); }

.jj-input {
  width: 100%; padding: 12px 16px; font-size: .9rem; font-family: var(--ff);
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.jj-input:focus { border-color: var(--flame); box-shadow: 0 0 0 3px rgba(255,75,3,.1); }

.jj-auth-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.jj-auth-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 16px; flex-wrap: wrap; gap: 8px;
}
.jj-auth-check {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--ink-mid); cursor: pointer;
  font-family: var(--ff);
}
.jj-auth-check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--flame); cursor: pointer;
}
.jj-auth-link { color: var(--flame); font-weight: 600; font-size: .84rem; font-family: var(--ff); transition: color .2s; }
.jj-auth-link:hover { color: var(--crimson); }

.jj-auth-submit {
  width: 100%; justify-content: center;
  margin-top: 24px; padding: 14px;
}

.jj-auth-switch {
  margin-top: 20px; font-size: .84rem; color: var(--ink-mid);
  text-align: center; font-family: var(--ff);
}

@media (max-width: 640px) {
  .jj-auth-card { padding: 32px 24px; border: none; box-shadow: none; }
  .jj-auth-2col { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONFIGURABLE PRODUCT OPTIONS
══════════════════════════════════════════════════════════════════════════ */
.jj-conf { margin-top: 4px; }
.jj-conf-group { margin-top: 22px; }
.jj-conf-label {
  font-size: .82rem; font-weight: 600; color: var(--ink-mid); margin-bottom: 10px;
  font-family: var(--ff);
}
.jj-conf-selected { color: var(--flame); font-weight: 700; }

.jj-conf-select {
  width: 100%; padding: 10px 16px; font-size: .9rem; font-family: var(--ff);
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); cursor: pointer;
  outline: none; transition: border-color .2s;
}
.jj-conf-select:focus { border-color: var(--flame); }

.jj-conf-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Text swatch = Jajemelo tab pill */
.jj-conf-pill {
  cursor: pointer; user-select: none;
  font-size: .82rem; padding: 8px 20px;
}
.jj-conf-pill--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Color swatch */
.jj-conf-swatch { cursor: pointer; display: flex; align-items: center; }
.jj-conf-color { gap: 6px; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px; transition: border-color .2s; }
.jj-conf-color.jj-conf-pill--active { border-color: var(--crimson); }
.jj-conf-color-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); flex-shrink: 0; }
.jj-conf-color-lbl { font-size: .78rem; font-weight: 600; font-family: var(--ff); }

/* Image swatch */
.jj-conf-img { border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; transition: border-color .2s; }
.jj-conf-img.jj-conf-pill--active { border-color: var(--crimson); }
.jj-conf-img img { width: 48px; height: 48px; object-fit: cover; display: block; }

.jj-conf-hint { font-size: .78rem; color: var(--ink-soft); font-style: italic; font-family: var(--ff); }
.jj-conf-error { font-size: .75rem; color: #e53e3e; margin-top: 4px; font-family: var(--ff); }

/* sr-only (screen reader only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   LOCATE PAGE
══════════════════════════════════════════════════════════════════════════ */
.jj-loc-layout {
  display: grid; grid-template-columns: 400px 1fr; gap: 36px; align-items: start;
}
.jj-loc-cards {
  display: flex; flex-direction: column; gap: 18px;
  max-height: 620px; overflow-y: auto;
  padding-right: 6px;
}
.jj-loc-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px;
  transition: all .25s;
}
.jj-loc-card:hover,.jj-loc-card--active {
  border-color: var(--flame); box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.jj-loc-card--active { border-color: var(--crimson); }

.jj-loc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.jj-loc-name { font-size: 1rem; font-weight: 700; color: var(--ink); font-family: var(--ff); }
.jj-loc-city { font-size: .78rem; color: var(--ink-soft); font-family: var(--ff); margin-top: 2px; }
.jj-loc-map-badge {
  font-size: .68rem; font-weight: 700; color: var(--flame);
  background: rgba(255,75,3,.08); border-radius: 50px; padding: 3px 9px;
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--ff);
}

.jj-loc-details { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.jj-loc-details li { display: flex; gap: 9px; font-size: .84rem; color: var(--ink-mid); align-items: flex-start; font-family: var(--ff); }
.jj-loc-details li span:first-child { flex-shrink: 0; }

.jj-loc-map-wrap { position: sticky; top: 88px; }

.jj-empty-state {
  text-align: center; padding: 80px 20px; color: var(--ink-mid);
}

@media (max-width: 900px) {
  .jj-loc-layout { grid-template-columns: 1fr; }
  .jj-loc-map-wrap { order: -1; position: static; }
  .jj-loc-cards { max-height: none; overflow: visible; padding-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG
══════════════════════════════════════════════════════════════════════════ */
.jj-blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.jj-blog-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; transition: all .25s;
}
.jj-blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: transparent; }

.jj-blog-img-link { display: block; }
.jj-blog-img { height: 220px; overflow: hidden; background: var(--surface); }
.jj-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.jj-blog-card:hover .jj-blog-img img { transform: scale(1.05); }

.jj-blog-body { padding: 24px; }
.jj-blog-title {
  font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--ink);
  margin-bottom: 8px; font-family: var(--ff);
}
.jj-blog-title a { color: inherit; text-decoration: none; transition: color .2s; }
.jj-blog-title a:hover { color: var(--flame); }
.jj-blog-excerpt { font-size: .84rem; color: var(--ink-mid); line-height: 1.7; font-family: var(--ff); }

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY
══════════════════════════════════════════════════════════════════════════ */
.jj-gal-grid {
  columns: 3; gap: 16px;
}
.jj-gal-item {
  break-inside: avoid; margin-bottom: 16px;
  position: relative; border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; transition: transform .25s;
}
.jj-gal-item:hover { transform: scale(1.02); }
.jj-gal-item img { width: 100%; display: block; }
.jj-gal-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(24,14,8,.7));
  color: var(--white); font-size: .78rem; font-weight: 600;
  padding: 20px 14px 10px; font-family: var(--ff);
  opacity: 0; transition: opacity .25s;
}
.jj-gal-overlay {
  position: absolute; inset: 0;
  background: rgba(24,14,8,.3); opacity: 0; transition: opacity .25s;
  display: flex; align-items: center; justify-content: center;
}
.jj-gal-zoom { font-size: 1.5rem; }
.jj-gal-item:hover .jj-gal-overlay,
.jj-gal-item:hover .jj-gal-caption { opacity: 1; }

/* Lightbox */
.jj-lb-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(10,5,2,.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.jj-lb-inner { text-align: center; }
.jj-lb-cap { color: rgba(255,255,255,.7); font-size: .82rem; margin-top: 12px; font-family: var(--ff); }
.jj-lb-close {
  position: fixed; top: 20px; right: 24px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: var(--white); width: 40px; height: 40px; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.jj-lb-close:hover { background: rgba(255,255,255,.3); }
.jj-lb-prev, .jj-lb-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: var(--white); width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.4rem; cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.jj-lb-prev { left: 16px; }
.jj-lb-next { right: 16px; }
.jj-lb-prev:hover, .jj-lb-next:hover { background: rgba(255,255,255,.25); }

@media (max-width: 768px) {
  .jj-gal-grid { columns: 2; }
}
@media (max-width: 480px) {
  .jj-gal-grid { columns: 1; }
  .jj-lb-prev, .jj-lb-next { display: none; }
}

/* ─── CMS / BLOG POST CONTENT ─── */
.jj-cms-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
}
.jj-cms-content h1,
.jj-cms-content h2,
.jj-cms-content h3,
.jj-cms-content h4 {
  font-weight: 700;
  color: var(--ink);
  margin: 1.6em 0 .5em;
  line-height: 1.3;
}
.jj-cms-content h2 { font-size: 1.6rem; }
.jj-cms-content h3 { font-size: 1.25rem; }
.jj-cms-content p  { margin: 0 0 1.1em; }
.jj-cms-content a  { color: var(--crimson); text-decoration: underline; }
.jj-cms-content a:hover { color: var(--flame); }
.jj-cms-content ul,
.jj-cms-content ol {
  margin: 0 0 1.1em 1.4em;
  padding: 0;
}
.jj-cms-content li { margin-bottom: .4em; }
.jj-cms-content img {
  max-width: 100%;
  border-radius: var(--r-md);
  margin: 1.2em 0;
}
.jj-cms-content blockquote {
  border-left: 4px solid var(--crimson);
  margin: 1.4em 0;
  padding: .8em 1.2em;
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
  color: var(--ink-mid);
}
.jj-cms-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ─── CHECKOUT PAGES: hide the Bagisto default checkout header bar ─────────
   The default onepage checkout still renders its own minimal header.
   Our layout always shows the Jajemelo nav, so hide the built-in one. */
.flex.w-full.justify-between.border.border-b.border-l-0.border-r-0.border-t-0 {
    display: none !important;
}

/* ─── CHECKOUT ORDER SUMMARY ─────────────────────────────────────────────── */
.jj-co-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-sm);
  font-family: var(--ff);
}

.jj-co-sum-h {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Items list */
.jj-co-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.jj-co-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.jj-co-item-img {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface);
}
.jj-co-item-info {
  flex: 1;
}
.jj-co-item-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 4px;
}
.jj-co-item-price {
  font-size: .95rem;
  font-weight: 700;
  color: var(--crimson);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.jj-co-item-excl {
  font-size: .75rem;
  font-weight: 400;
  color: var(--ink-mid);
}

/* Totals rows */
.jj-co-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--ff);
}
.jj-co-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  color: var(--ink);
}
.jj-co-row span:last-child {
  font-weight: 600;
}
.jj-co-row-discount span:last-child {
  color: var(--flame);
}
.jj-co-row-sm {
  font-size: .8rem;
  color: var(--ink-mid);
}
.jj-co-row-tax .jj-co-row-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
.jj-co-tax-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.jj-co-tax-breakdown {
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grand total */
.jj-co-row-total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  font-size: 1.05rem;
  font-weight: 700;
}
.jj-co-row-total span:first-child {
  font-weight: 700;
  color: var(--ink);
}
.jj-co-grand {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--crimson) !important;
}

/* Coupon row (inside .jj-co-totals) */
.jj-co-totals .flex.justify-between.text-right {
  width: 100%;
}
.jj-co-totals .text-blue-700,
.jj-co-totals .cursor-pointer.text-base.text-blue-700 {
  color: var(--flame) !important;
  font-weight: 600;
}
.jj-co-totals .text-navyBlue,
.jj-co-totals [class*="navyBlue"] {
  color: var(--flame) !important;
}
.jj-co-totals .primary-button {
  background: var(--flame) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-family: var(--ff) !important;
  font-weight: 700 !important;
  border: none !important;
}
.jj-co-totals .primary-button:hover {
  background: var(--crimson) !important;
}

@media (max-width: 768px) {
  .jj-co-summary { padding: 20px; }
  .jj-co-item-img { width: 60px; height: 60px; min-width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL BRAND OVERRIDES
   Kill every navyBlue (#060C3B) and stray blue-700 reference from the default
   Bagisto Shop theme. Jajemelo uses --flame (orange) / --crimson (dark red).
   ══════════════════════════════════════════════════════════════════════════ */

/* — Text — */
.text-navyBlue                      { color: var(--crimson) !important; }
.hover\:text-navyBlue:hover         { color: var(--crimson) !important; }
.text-blue-700                      { color: var(--flame)   !important; }
.hover\:text-blue-700:hover         { color: var(--flame)   !important; }

/* — Backgrounds — */
.bg-navyBlue                        { background-color: var(--flame)   !important; }
.hover\:bg-navyBlue:hover           { background-color: var(--crimson) !important; }

/* — Borders — */
.border-navyBlue                    { border-color: var(--flame) !important; }
.hover\:border-navyBlue:hover       { border-color: var(--crimson) !important; }
.focus\:border-navyBlue:focus       { border-color: var(--flame)  !important; }
.focus\:ring-navyBlue:focus         { --tw-ring-color: rgba(255,75,3,.25) !important; }

/* — Primary button (used everywhere in Bagisto) — */
.primary-button {
    background: var(--flame)   !important;
    color: #fff                !important;
    border-radius: 50px        !important;
    font-family: var(--ff)     !important;
    font-weight: 700           !important;
    border: none               !important;
    transition: background .2s !important;
}
.primary-button:hover:not(:disabled) { background: var(--crimson) !important; }
.primary-button:disabled             { opacity: .6 !important; cursor: not-allowed !important; }

/* — Font family: ensure Outfit is used everywhere, not DM Serif — */
body, button, input, select, textarea, label, a {
    font-family: var(--ff) !important;
}

/* ─── PRODUCT GRID CARDS ────────────────────────────────────────────────────
   Cards are always visible. jj-reveal on cards was removed from Blade; any
   stale .jj-reveal that exists on a card is neutralised here.
   Newly revealed cards get a brief CSS animation via .jj-entering.         */
#jj-menuGrid .jj-mcard {
    opacity: 1;
    transform: none;
    /* transition for tab-switch fade (no flash) */
    transition: none;
}
/* Remove jj-reveal opacity from any card that still has the class */
#jj-menuGrid .jj-mcard.jj-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@keyframes jj-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
#jj-menuGrid .jj-mcard.jj-entering {
    animation: jj-card-in 0.28s ease both;
}

/* ─── CART & CHECKOUT SUMMARY: shared utility classes ───────────────────── */
.jj-co-tax-note {
  font-size: .75rem;
  color: var(--ink-mid);
  text-align: right;
  margin: -4px 0 4px;
  font-family: var(--ff);
}
.jj-co-checkout-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

/* ─── BAGISTO ICON FONT — must win over global Outfit override ───────────── */
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'bagisto-shop' !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}