/* ============================================================================
   smirk LVNG — generated Tier-B section CSS
   Uploaded to the store's dedicated generated-CSS file (site_settings.sx_css_location).
   It cascades GLOBALLY, so every rule is namespaced under `.sx` / `.sx-<section>`.
   Brand colour comes from the theme var `--secondary-main`; only new tokens are
   defined here, all prefixed `--sx-`.
   ========================================================================== */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-ink: #1A1513;
  --sx-paper: #F5F2ED;
  --sx-linen: #ECE4D7;
  --sx-tan: #CAA982;
  --sx-taupe: #8C7A64;
  --sx-muted: #6F6459;
  --sx-line: #E2D9CB;
  --sx-crimson: #9E5247;
  --sx-aqua: #A3D1D2;
  --sx-butter: #F0CB80;
  --sx-brand: var(--secondary-main, #DF7628);
  --sx-gap: 18px;
  --sx-radius: 16px;
  --sx-radius-lg: 26px;
  --sx-pill: 999px;
  --sx-maxw: 1240px;
  --sx-ease: cubic-bezier(.22,.61,.36,1);
  --sx-display: "Spectral", Georgia, "Times New Roman", serif;

  width: 100%;
  box-sizing: border-box;
  color: var(--sx-ink);
  font-size: 16px;
  line-height: 1.6;
}
.sx *,
.sx *::before,
.sx *::after { box-sizing: border-box; }

/* [dead] .sx-wrap { max-width: var(--sx-maxw); margin: 0 auto; padding: 0 22px; } */

.sx-eyebrow {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--sx-taupe); margin: 0;
}
.sx-h2 {
  font-family: var(--sx-display); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 12px 0 10px;
}
.sx-sub { color: var(--sx-muted); margin: 0; font-size: 15.5px; }
.sx-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }

/* Shared button set. Primary action = terracotta. Commit/buy = crimson. */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--sx-pill);
  font-weight: 600; font-size: 14px; letter-spacing: .02em;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--sx-ease), background .2s var(--sx-ease);
}
.sx-btn:hover { transform: translateY(-1px); }
/* [dead] .sx-btn--primary { background: var(--sx-brand); color: #fff; } */
/* Bundle CTA ("Build your bundle"): terracotta to match the hero / other primary
   CTAs (was crimson --sx-crimson, which read as a different, off-brand button). */
.sx-btn--buy { background: var(--sx-brand); color: #fff; }
.sx-btn--buy:hover { filter: brightness(.93); }
.sx-btn--outline {
  background: transparent; color: var(--sx-ink);
  border: 1.5px solid var(--sx-line);
}
.sx-btn--outline:hover { border-color: var(--sx-brand); color: var(--sx-brand); }
/* END shoopy-gen:base */


/* BEGIN shoopy-gen:usp-mini */
.sx-uspmini { background: var(--sx-linen); border-block: 1px solid var(--sx-line); }
.sx-uspmini__row {
  max-width: var(--sx-maxw); margin: 0 auto; padding: 14px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 26px; font-size: 13px; color: var(--sx-muted);
}
.sx-uspmini__item { display: flex; align-items: center; gap: 9px; }
.sx-uspmini__item b { color: #fff; font-weight: 600; }
.sx-uspmini__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sx-brand); flex: 0 0 auto;
}
@media (max-width: 900px) {
  .sx-uspmini__row { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  /* [dead] .sx-uspmini__row::-webkit-scrollbar { display: none; } */
  .sx-uspmini__item { white-space: nowrap; }
}
/* END shoopy-gen:usp-mini */


/* BEGIN shoopy-gen:categories-cta */
/* [dead] .sx-catcta { text-align: center; padding: 4px 22px 0; } */
/* [dead] .sx-catcta__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 30px; border-radius: var(--sx-pill);
  border: 1.5px solid var(--sx-line); background: transparent;
  color: var(--sx-ink); font-weight: 600; font-size: 14px;
  text-decoration: none; transition: border-color .2s var(--sx-ease), color .2s var(--sx-ease);
} */
/* [dead] .sx-catcta__btn:hover { border-color: var(--sx-brand); color: var(--sx-brand); } */
/* [dead] .sx-catcta__btn svg { width: 15px; height: 15px; } */
/* END shoopy-gen:categories-cta */

.announce b {
    color: var(--tan);
    font-weight: 600;
}.announce {
    background: var(--ink);
    color: var(--paper);
    font-size: 12.5px;
    letter-spacing: .06em;
    text-align: center;
    padding: 9px 16px;
    font-weight: 500;
}
#notice{
    padding:0px !important;
}
/* BEGIN shoopy-gen:bundle */
.sx-bundle { padding: 0 0 70px; }
.sx-bundle__inner {
  max-width: var(--sx-maxw); margin: 0 auto; padding: 0 22px;
}
.sx-bundle__card {
  background: var(--sx-paper); border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 1fr; align-items: center;
}
.sx-bundle__body { padding: 36px 30px; }
.sx-bundle__tag {
  display: inline-block; background: var(--sx-butter); color: var(--sx-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--sx-pill); margin-bottom: 14px;
}
.sx-bundle__title {
  font-family: var(--sx-display); font-weight: 400; line-height: 1.1;
  font-size: clamp(30px, 4vw, 46px); margin: 0 0 12px;
}
.sx-bundle__title em { font-style: italic; color: var(--sx-brand); }
.sx-bundle__copy { margin: 0 0 10px; color: var(--sx-muted); font-size: 15.5px; max-width: 460px; }
.sx-bundle__fine { margin: 0 0 22px; color: var(--sx-taupe); font-size: 12.5px; }
.sx-bundle__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sx-bundle__pics { display: flex; gap: 12px; padding: 0 30px 36px; }
.sx-bundle__pic {
  flex: 1 1 0; aspect-ratio: 1/1; border-radius: var(--sx-radius);
  overflow: hidden; background: var(--sx-linen); position: relative;
  border: 1px solid var(--sx-line);
}
.sx-bundle__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-bundle__pick {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--sx-ink);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
@media (min-width: 860px) {
  .sx-bundle__card { grid-template-columns: 1.05fr 1fr; }
  .sx-bundle__body { padding: 48px 44px; }
  .sx-bundle__pics { padding: 30px 44px 30px 0; }
}
/* END shoopy-gen:bundle */


/* BEGIN shoopy-gen:reviews */
.sx-reviews { padding: 70px 0; background: var(--sx-paper); }
.sx-reviews__inner { max-width: var(--sx-maxw); margin: 0 auto; padding: 0 22px; }

.sx-reviews__videos {
  display: flex; gap: var(--sx-gap); overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: none;
}
/* [dead] .sx-reviews__videos::-webkit-scrollbar { display: none; } */
.sx-reviews__video {
  flex: 0 0 62%; max-width: 260px; scroll-snap-align: start;
  position: relative; aspect-ratio: 9/16; border-radius: var(--sx-radius);
  overflow: hidden; background: var(--sx-linen); border: 1px solid var(--sx-line);
  display: block; text-decoration: none;
}
.sx-reviews__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-reviews__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,21,19,0) 45%, rgba(26,21,19,.72) 100%);
}
.sx-reviews__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center;
  transition: transform .25s var(--sx-ease);
}
.sx-reviews__video:hover .sx-reviews__play { transform: translate(-50%,-50%) scale(1.08); }
.sx-reviews__play svg { width: 18px; height: 18px; margin-left: 2px; color: var(--sx-ink); }
.sx-reviews__vcap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px;
  color: #fff; font-size: 13px; font-weight: 600;
}
.sx-reviews__vcap span { display: block; font-weight: 400; font-size: 11.5px; opacity: .85; margin-top: 2px; }
.sx-reviews__soon {
  position: absolute; top: 10px; left: 10px;
  background: rgba(245,242,237,.94); color: var(--sx-taupe);
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 4px 8px; border-radius: 6px;
}

.sx-reviews__texts {
  display: grid; grid-template-columns: 1fr; gap: var(--sx-gap); margin-top: 26px;
}
.sx-reviews__card {
  background: #fff; border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius); padding: 24px;
}
.sx-reviews__stars { display: flex; gap: 3px; color: var(--sx-brand); margin-bottom: 12px; }
.sx-reviews__stars svg { width: 15px; height: 15px; }
.sx-reviews__quote {
  font-family: var(--sx-display); font-size: 18px; line-height: 1.5;
  margin: 0 0 16px; color: var(--sx-ink);
}
.sx-reviews__who { display: flex; align-items: center; gap: 11px; }
.sx-reviews__av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sx-linen); color: var(--sx-taupe);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.sx-reviews__name { font-size: 13.5px; font-weight: 600; }
.sx-reviews__meta { font-size: 11.5px; color: var(--sx-taupe); }
@media (min-width: 700px) {
  .sx-reviews__video { flex-basis: 220px; }
  .sx-reviews__texts { grid-template-columns: repeat(3, 1fr); }
}
/* END shoopy-gen:reviews */


/* BEGIN shoopy-gen:story */
.sx-story { padding: 70px 0; }
.sx-story__inner { max-width: var(--sx-maxw); margin: 0 auto; padding: 0 22px; }
.sx-story__head { text-align: center; margin-bottom: 34px; }
.sx-story__quote {
  font-family: var(--sx-display); font-weight: 300;
  font-size: clamp(26px, 3.6vw, 40px); line-height: 1.2;
  margin: 12px auto 0; max-width: 760px; border: none; padding: 0;
}
.sx-story__quote em { font-style: italic; color: var(--sx-brand); }
.sx-story__img {
  width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover;
  border-radius: var(--sx-radius-lg); display: block; margin-bottom: 30px;
}
.sx-story__cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.sx-story__col h3 {
  font-family: var(--sx-display); font-weight: 500; font-size: 20px; margin: 0 0 12px;
}
.sx-story__col p { margin: 0 0 14px; color: var(--sx-muted); font-size: 15.5px; line-height: 1.75; }
.sx-story__sign { color: var(--sx-taupe) !important; font-style: italic; }
@media (min-width: 860px) {
  .sx-story__cols { grid-template-columns: 1fr 1fr; gap: 46px; }
}
/* END shoopy-gen:story */


/* BEGIN shoopy-gen:trust */
.sx-trust { background: var(--sx-linen); padding: 54px 0; }
.sx-trust__grid {
  max-width: var(--sx-maxw); margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px;
}
.sx-trust__card { text-align: center; }
.sx-trust__ic {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: grid; place-items: center; color: var(--sx-brand);
}
.sx-trust__ic svg { width: 26px; height: 26px; }
.sx-trust__card h4 {
  font-family: var(--sx-display); font-weight: 500; font-size: 16.5px; margin: 0 0 6px;
}
.sx-trust__card p { margin: 0; font-size: 13px; color: var(--sx-muted); line-height: 1.6; }
@media (min-width: 760px) {
  .sx-trust__grid { grid-template-columns: repeat(4, 1fr); }
}
/* END shoopy-gen:trust */


/* Extracted from index.html */

:root{
  /* smirk LVNG Brand System v2.0 — exact tokens */
  --secondary-main:#DF7628;   /* terracotta — primary accent · CTAs & links */
  --secondary-dark:#C2611D;   /* hover */
  --crimson:#9E5247;          /* commit action (Buy now) */
  --aqua:#A3D1D2;             /* info / "New" tag */
  --butter:#F0CB80;           /* badges — discount */
  --white:#FFFFFF;
  --paper:#F5F2ED;
  --linen:#ECE4D7;
  --tan:#CAA982;
  --taupe:#8C7A64;
  --muted:#6F6459;            /* darkened from taupe for AA body contrast */
  --ink:#1A1513;
  --line:#E2D9CB;
  --brand-tint:#FBE9DA;       /* light terracotta — "Add to cart" per MOM §6 */
  --brand-ink:#A9530F;        /* terracotta text on tint, AA on --brand-tint */
  --font-display:"Spectral",Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius:16px; --radius-lg:26px; --radius-pill:999px;
  --maxw:1240px;
  --maxw-wide:1500px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--white);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* [dead] .wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 22px} */
.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:var(--radius-pill);font-weight:600;font-size:14px;letter-spacing:.02em;transition:filter .2s var(--ease),transform .2s var(--ease),background .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--secondary-main);color:#fff;box-shadow:0 12px 28px rgba(223,118,40,.26)}
.btn-primary:hover{background:var(--secondary-dark)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.72)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- Notice bar (Tier C) ---------- */
/* [dead] .announce{background:var(--ink);color:var(--paper);font-size:12.5px;letter-spacing:.06em;text-align:center;padding:9px 16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} */
/* [dead] .announce b{color:var(--tan);font-weight:600} */

/* ---------- Header (Tier C) ---------- */
/* [dead] .header{position:sticky;top:0;z-index:60;background:rgba(245,242,237,.88);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)} */
/* [dead] .header.scrolled{box-shadow:0 8px 28px rgba(26,21,19,.08)} */
/* [dead] .header-inner{display:flex;align-items:center;gap:16px;height:74px} */
/* [dead] .brand{display:flex;align-items:center;margin-right:auto} */
/* [dead] .brand img{height:34px;width:auto} */
/* [dead] .menu-toggle{display:none;width:42px;height:42px;border-radius:50%;place-items:center;order:-1;margin-right:-2px} */

/* desktop nav + submenus (MOM §1) */
/* [dead] .nav{display:flex;gap:28px;margin-right:auto;margin-left:38px} */
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--ink);padding:12px 0;position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:20px;height:2px;width:0;background:var(--secondary-main);transition:width .25s var(--ease)}
.nav-item:hover .nav-link{color:var(--secondary-main)}
.nav-item:hover .nav-link::after{width:100%}
/* [dead] .nav-link .chev{width:11px;height:11px;transition:transform .25s var(--ease)} */
/* [dead] .nav-item:hover .chev{transform:rotate(180deg)} */
/* [dead] .submenu{position:absolute;top:100%;left:-18px;min-width:216px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(26,21,19,.12);padding:9px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s var(--ease);list-style:none;margin:0} */
/* [dead] .nav-item:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)} */
/* [dead] .submenu a{display:block;padding:9px 13px;border-radius:9px;font-size:13.5px;color:var(--ink);transition:background .15s var(--ease),color .15s var(--ease)} */
/* [dead] .submenu a:hover{background:var(--paper);color:var(--secondary-main)} */

/* [dead] .header-actions{display:flex;align-items:center;gap:4px} */
/* [dead] .track-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color .2s var(--ease),color .2s var(--ease)} */
/* [dead] .track-btn:hover{border-color:var(--secondary-main);color:var(--secondary-main)} */
/* [dead] .track-btn svg{width:15px;height:15px} */
/* [dead] .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);position:relative;transition:background .2s var(--ease),color .2s var(--ease)} */
/* [dead] .icon-btn:hover{background:var(--linen);color:var(--secondary-main)} */
.badge{position:absolute;top:5px;right:4px;background:var(--secondary-main);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* mobile drawer */
/* [dead] .scrim{position:fixed;inset:0;background:rgba(26,21,19,.5);opacity:0;visibility:hidden;transition:all .3s var(--ease);z-index:70} */
/* [dead] .scrim.open{opacity:1;visibility:visible} */
/* [dead] .drawer{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);background:var(--white);z-index:80;transform:translateX(-100%);transition:transform .32s var(--ease);display:flex;flex-direction:column} */
/* [dead] .drawer.open{transform:translateX(0)} */
/* [dead] .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)} */
/* [dead] .drawer-top img{height:28px} */
/* [dead] .drawer-nav{flex:1;overflow-y:auto;padding:8px 10px} */
/* [dead] .drawer-nav>li{list-style:none} */
/* [dead] .drawer-nav ul{list-style:none;margin:0;padding:0} */
/* [dead] .dnav-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 12px;font-size:15px;font-weight:500;border-radius:11px;text-align:left} */
/* [dead] .dnav-row:hover{background:var(--paper)} */
/* [dead] .dnav-row svg{width:13px;height:13px;transition:transform .25s var(--ease);color:var(--taupe)} */
/* [dead] .dnav-row[aria-expanded="true"] svg{transform:rotate(180deg)} */
/* [dead] .dsub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} */
/* [dead] .dsub a{display:block;padding:11px 12px 11px 26px;font-size:14px;color:var(--muted);border-radius:9px} */
/* [dead] .dsub a:hover{color:var(--secondary-main)} */
/* [dead] .drawer-foot{border-top:1px solid var(--line);padding:16px 18px;display:grid;gap:10px} */
/* [dead] .drawer-foot .btn{width:100%;justify-content:center} */
/* [dead] .drawer-track{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--radius-pill);border:1.5px solid var(--line);font-size:13.5px;font-weight:600} */
/* [dead] .drawer-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--radius-pill);background:var(--ink);color:#fff;font-size:13.5px;font-weight:600} */

/* ---------- Hero (StoreBanner · Tier A · full-bleed) ---------- */
.hero{position:relative;overflow:hidden;background:var(--linen);width:100%}
.hero-slide{position:relative;height:clamp(460px,72vh,640px)}
.hero-slide picture,.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,21,19,.62) 0%,rgba(26,21,19,.34) 48%,rgba(26,21,19,.06) 82%)}
.hero-content{position:absolute;inset:0;display:flex;align-items:center}
.hero-content .wrap{width:100%}
.hero-text{max-width:560px;color:#fff}
.hero-text .eyebrow{color:var(--butter)}
.hero-text h1{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,5.4vw,62px);line-height:1.06;margin:14px 0 16px;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero-text h1 em{font-style:italic;color:var(--butter)}
.hero-text p{font-size:17px;color:rgba(255,255,255,.94);margin:0 0 26px;max-width:440px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
  /* the mobile crop centres the plate, so anchor the copy to the clean wall at the
     top — otherwise the headline lands on the plate's own script lettering */
  .hero-scrim{background:linear-gradient(180deg,rgba(26,21,19,.84) 0%,rgba(26,21,19,.52) 44%,rgba(26,21,19,.34) 100%)}
  .hero-content{align-items:flex-start;padding-top:30px}
  .hero-slide{height:clamp(500px,78vh,660px)}
  .hero-text p{font-size:15.5px}
}

/* ---------- Section heading ---------- */
.sec{padding:70px 0}
/* [dead] .sec-head{text-align:center;max-width:640px;margin:0 auto 36px} */
/* [dead] .sec-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.6vw,42px);margin:12px 0 10px;line-height:1.12} */
/* [dead] .sec-head p{color:var(--muted);margin:0;font-size:15.5px} */
/* [dead] .sec-head .eyebrow{display:inline-block} */

/* ---------- Categories (ProductCategoriesV2 · Tier A) ---------- */
/* [dead] .cat-scroller{position:relative} */
/* [dead] .cat-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px)/2);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px} */
/* [dead] .cat-row::-webkit-scrollbar{display:none} */
/* [dead] .cat{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;display:block;background:var(--linen);scroll-snap-align:start} */
/* [dead] .cat img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} */
/* [dead] .cat:hover img{transform:scale(1.06)} */
/* [dead] .cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,21,19,0) 40%,rgba(26,21,19,.68) 100%)} */
/* [dead] .cat-label{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;color:#fff} */
/* [dead] .cat-label h3{font-family:var(--font-display);font-weight:500;font-size:19px;margin:0 0 2px} */
/* [dead] .cat-label span{font-size:12px;letter-spacing:.05em;opacity:.86} */
/* [dead] .cat--ph{display:grid;place-items:center;background:var(--linen);border:1px dashed var(--tan)} */
/* [dead] .cat-ph{text-align:center;padding:16px} */
/* [dead] .cat-ph h3{font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--ink);margin:0 0 6px} */
/* [dead] .cat-ph span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);font-weight:600} */
/* [dead] .cat-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(26,21,19,.14);display:grid;place-items:center;z-index:4;transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)} */
/* [dead] .cat-arrow:hover{background:var(--secondary-main);color:#fff;border-color:var(--secondary-main)} */
/* [dead] .cat-arrow svg{width:17px;height:17px} */
/* [dead] .cat-arrow.prev{left:-8px} */
/* [dead] .cat-arrow.next{right:-8px} */
/* [dead] .cat-arrow[disabled]{opacity:.34;cursor:default} */
/* [dead] .cat-arrow[disabled]:hover{background:#fff;color:var(--ink);border-color:var(--line)} */

/* ---------- Promo banner (BannerCollection · Tier A) ---------- */
.promo{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px;display:flex;align-items:center}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo-scrim{position:absolute;inset:0}
.promo.center{justify-content:center;text-align:center}
.promo.left .promo-scrim{background:linear-gradient(90deg,rgba(26,21,19,.88) 0%,rgba(26,21,19,.66) 42%,rgba(26,21,19,.24) 100%)}
.promo-body{position:relative;z-index:2;color:#fff;padding:48px;max-width:560px}
.promo.center .promo-body{margin:0 auto}
.promo.solid{background:var(--ink);min-height:230px}
.promo.solid .promo-body{max-width:780px}
.promo-body .eyebrow{color:var(--tan)}
.promo-body h2{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.5vw,40px);margin:12px 0 14px;line-height:1.16}
.promo-body p{margin:0 0 22px;font-size:16px;color:rgba(255,255,255,.92)}

/* ---------- Product cards (ProductGridCollection · Tier A) ---------- */
/* [dead] .row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px} */
/* [dead] .row-head .titles h2{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,38px);margin:10px 0 0} */
/* [dead] .row-head a.viewall{color:var(--secondary-main);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} */
/* [dead] .swiper{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:none} */
/* [dead] .swiper::-webkit-scrollbar{display:none} */
/* [dead] .swiper .card{flex:0 0 70%;max-width:264px;scroll-snap-align:start} */
/* [dead] .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} */
/* [dead] .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} */
/* [dead] .card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(26,21,19,.1)} */
/* [dead] .card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--linen)} */
/* [dead] .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} */
/* [dead] .card:hover .card-media img{transform:scale(1.05)} */
/* product tags — MOM §4 */
/* [dead] .tag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-pill);z-index:2} */
/* [dead] .tag--best{background:var(--ink);color:#fff} */
/* [dead] .tag--gifted{background:var(--secondary-main);color:#fff} */
/* [dead] .tag--new{background:var(--aqua);color:var(--ink)} */
/* [dead] .off-badge{position:absolute;bottom:12px;left:12px;background:var(--butter);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:var(--radius-pill);z-index:2} */
/* [dead] .wish{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink);z-index:2;transition:background .2s var(--ease),color .2s var(--ease)} */
/* [dead] .wish:hover{background:var(--secondary-main);color:#fff} */
/* [dead] .card-body{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1} */
/* [dead] .card-cat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);font-weight:600} */
/* [dead] .card-title{font-family:var(--font-display);font-weight:500;font-size:16px;line-height:1.28;margin:6px 0 10px;color:var(--ink)} */
/* [dead] .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto} */
/* [dead] .price .now{font-weight:700;font-size:17px;color:var(--ink)} */
/* [dead] .price .mrp{font-size:13px;color:var(--taupe);text-decoration:line-through} */
/* [dead] .price .setnote{font-size:12px;font-weight:600;color:var(--muted)} */
/* "Add to cart" = lighter theme colour (MOM §6) */
/* [dead] .add-cart{margin-top:13px;width:100%;padding:11px;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-ink);border:1.5px solid rgba(223,118,40,.32);font-weight:700;font-size:13.5px;letter-spacing:.03em;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)} */
/* [dead] .add-cart:hover{background:var(--secondary-main);color:#fff;border-color:var(--secondary-main)} */
/* honest no-image tile for SKUs with no photograph yet */
/* [dead] .card-media--ph{display:grid;place-items:center;border-bottom:1px solid var(--line)} */
/* [dead] .media-ph{text-align:center;color:var(--taupe);padding:18px} */
/* [dead] .media-ph svg{width:34px;height:34px;margin:0 auto 10px;opacity:.6} */
/* [dead] .media-ph span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700} */

/* ---------- WhatsApp chat bubble (Tier C · bottom-left) ---------- */
/* [dead] .wa-bubble{position:fixed;left:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.36);transition:transform .22s var(--ease)} */
/* [dead] .wa-bubble:hover{transform:scale(1.07)} */
/* [dead] .wa-bubble svg{width:29px;height:29px} */
/* [dead] @media (max-width:560px){.wa-bubble{left:16px;bottom:16px;width:50px;height:50px}.wa-bubble svg{width:26px;height:26px}} */

/* ---------- Footer (Tier C) ---------- */
.footer{background:var(--ink);color:#D9CFC0;padding:60px 0 0}
.footer a{color:#D9CFC0}
.footer a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:34px;margin-bottom:16px}
.foot-brand p{font-size:14px;line-height:1.7;color:#B7AC9C;max-width:300px;margin:0 0 18px}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:all .2s var(--ease)}
.socials a:hover{background:var(--secondary-main);border-color:var(--secondary-main);transform:translateY(-2px)}
.foot-col h4{font-family:var(--font-display);font-weight:500;font-size:16px;color:#fff;margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.news p{font-size:14px;color:#B7AC9C;margin:0 0 14px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 0;font-size:12.5px;color:#9A8F7F}

/* ---------- Responsive ---------- */
@media (min-width:760px){
  /* [dead] .grid{grid-template-columns:repeat(3,1fr)} */
  /* [dead] .swiper .card{flex-basis:264px} */
  /* [dead] .cat-row{grid-auto-columns:calc((100% - 36px)/3);gap:18px} */
}
@media (min-width:1080px){
  /* [dead] .grid{grid-template-columns:repeat(4,1fr)} */
  /* [dead] .cat-row{grid-auto-columns:calc((100% - 54px)/4)}  4 categories per row on desktop */
}
@media (max-width:1024px){
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:980px){
  /* [dead] .nav{display:none} */
  /* [dead] .track-btn{display:none} */
  /* [dead] .menu-toggle{display:grid} */
  /* [dead] .brand{margin-right:auto;margin-left:2px} */
  /* [dead] .cat-arrow{display:none} */
}
@media (max-width:560px){
  /* [dead] .header-inner{height:64px;gap:6px} */
  /* [dead] .brand img{height:28px} */
  .sec{padding:52px 0}
  .promo-body{padding:34px 26px}
  .foot-top{grid-template-columns:1fr;gap:26px}
  .foot-bottom{justify-content:center;text-align:center}
  /* [dead] .icon-btn{width:38px;height:38px} */
  /* [dead] .announce{font-size:11.5px;letter-spacing:.04em} */
  /* [dead] .announce .nb-lead{display:none}  keep the bar to one line on small phones */
}
/* ============================================================================
   BEGIN shoopy-gen:live-components
   ----------------------------------------------------------------------------
   Everything above marked "[dead]" targets the index.html MOCKUP markup
   (.card / .cat / .header / .nav / .sec-head ...). The live store renders
   DIFFERENT components, so those rules matched 0 elements and were inert.
   Two of them were NOT inert and actively fought the theme:
     .swiper  -> collided with the real Swiper carousel's own container class
                 (Swiper needs display:block + overflow:hidden; the mockup rule
                 forced display:flex + overflow-x:auto + scroll-snap).
     .grid    -> collided with Tailwind's .grid on .grid.grid-cols-12 sections.
   Both are now commented out.

   The rules below re-create the reference look against the REAL classic-theme
   classes, so they actually apply. Verified in-browser at 1266px.
   ============================================================================ */

/* ---------- Header content column ----------
   The header's .page-container is the SAME element/class the sections use, so it
   was already consistent with them (measured identical at 1266 / 1906 / 2546).
   But it renders at the container's own width -- 1600px max, content 193..1713 at
   a 1906px viewport -- while the footer and every .sx section sit in the 1240px
   --maxw wrap (content 355..1551). So the logo and the header icons sat 162px
   further out than the rest of the page.

   The reference puts .header-inner inside .wrap, i.e. the same 1240 column as the
   footer. Match that: 1240 max-width + the wrap's 22px padding, so header content
   lands on exactly the footer's column at every width.

   Scoped to .app-bar-main so the sections' .page-container is untouched.
   Desktop-only by nature: the mobile header renders a different DOM with no
   .page-container inside .app-bar-main, so this rule simply doesn't match there. */
.app-bar-main .page-container{max-width:var(--maxw);padding-left:22px;padding-right:22px}

/* ---------- Announcement bar + orange header ----------
   Target look: dark announcement strip on top, solid terracotta header below with
   white logo / nav / icons (per the supplied screenshot).

   Announcement bar: the real element is #notice (the [dead] .announce block above
   never matched anything). It rendered light-grey #f5f5f5 with black text. */
#notice{background:var(--ink)!important;color:var(--paper)!important}
#notice *{color:var(--paper)!important}

/* Header bar: real element is header.MuiAppBar-root (the reference's `.header` rule
   is [dead] -- no such element in the classic theme). Solid terracotta, no blur. */
header.MuiAppBar-root{
  background:var(--secondary-main)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-bottom:0!important;
}

/* Nav: every .nav-link carries an INLINE style="color:#000000" (a theme admin
   setting), which beats any normal author rule -- !important is the only lever.
   White text, white underline (.nav-link::after already exists above). */
.nav-link{color:#fff!important}
.nav-item:hover .nav-link{color:#fff!important}
.nav-link::after{background:#fff!important}

/* Icons: real control is MUI's IconButton (the reference's .icon-btn is dead). */
.app-bar-main .MuiIconButton-root{color:#fff;transition:background .2s var(--ease),color .2s var(--ease)}
.app-bar-main .MuiIconButton-root:hover{background:rgba(255,255,255,.16);color:#fff}

/* Logo is a dark PNG (Group11-*.png) -- there's no text node to recolour, so knock
   it to solid white with a filter (brightness(0) makes it black, invert(1) -> white)
   so it reads on the terracotta bar. */


/* Search placeholder: the MUI input placeholder rendered light grey (#9CA3AF);
   make it solid black. #search-box is the search overlay wrapper. */
#search-box input::placeholder,#desktop-search-bar::placeholder{color:#000!important;opacity:1!important}

/* ---------- Section heading (.sh-section-heading -> reference .sec-head h2) ----------
   Theme default is Noto Sans 24px/600 left-aligned; the reference is a centred
   Spectral serif display heading.
   NOTE: the container is display:flex/flex-direction:column, so text-align has no
   effect on the anchor -- align-items is what centres it on the cross axis. */
.sh-section-heading{align-items:center;text-align:center;margin:0 auto 30px}
.sh-section-heading a{display:inline-block}
.section-heading{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.12;color:var(--ink)}

/* ---------- Categories (LargeCategoriesCardV1 -> reference .cat) ----------
   Cards-per-row is driven by the theme's own custom property, which is set
   INLINE on .category-swiper from the admin setting (desktop:8, mobile:3) and
   consumed as width:calc(100%/var(--category-in-row)) !important.
   Overriding `width` therefore loses to the theme's !important -- the variable
   is the correct lever. Reference layout is 4 / 3 / 2 per row. */
.category-swiper{--category-in-row-desktop:6!important;--category-in-row-mobile:2!important}
@media (min-width:768px) and (max-width:1079px){.category-swiper-slide{--category-in-row:3!important}}
@media (max-width:480px){.category-swiper-slide{--category-in-row:2!important}}

/* Desktop: with fewer categories than the 6-per-row grid (5 today), the fixed-width
   Swiper slides left-align, leaving a big empty gutter on the right. Centre them.
   `safe center` falls back to flex-start if the cards ever overflow (7+), so the
   carousel stays scrollable without clipping the first card. */
@media (min-width:1080px){.category-swiper .swiper-wrapper{justify-content:safe center}}

/* Mobile: make the category images bigger and cleaner.
   - Drop the theme's white slide background (.category-swiper-slide{background:#fff})
     which showed as a square box behind each rounded image.
   - Round the image tile directly (the anchor already clips at 16px; rounding the
     root/img too keeps the corners crisp with no box) -- "radius like desktop".
   - Tighten the per-card gutter 9px -> 3px so the two cards are larger and the gap
     is small; the swiper's compensating negative margin shrinks in step (-9 -> -3)
     so the row still aligns to the 12px body edge. */
@media (max-width:600px){
  .category-swiper-slide{background:transparent!important}
  .cat-card.sh-category-card{padding:3px!important}
  .category-swiper{margin-inline:-3px!important}
  .sh-category-card .cat-card-img-root,
  .sh-category-card .cat-card-img{border-radius:14px!important}
}

/* Content column: the categories block sat at the full .page-container width
   (1520px at a 1906px viewport) while the footer and every .sx section use the
   1240px --maxw wrap (content 355..1551 after their 22px padding). Wrap it the
   same way so all three agree. */
.cat-section{max-width:var(--maxw);margin-inline:auto;width:100%;padding-inline:22px}

/* Top gap. Section 1 is the only section whose .page-container lacks the theme's
   `section-spacing` class, so it had margin-top:0 and butted straight against the
   hero (measured 0px gap vs 32px on every other section). The reference gives the
   categories block ~70px of breathing room above the heading; match that. */
.section-wrapper-1 > .page-container{margin-top:56px}
@media (max-width:600px){.section-wrapper-1 > .page-container{margin-top:36px}}

/* Card gutter. The theme's own gutter came from .cat-card{padding:10px} -- its
   --gap-between-cards var is unset, and it forces .category-swiper-slide
   {margin-right:0!important}, so slide spacing cannot come from Swiper's
   spaceBetween. 9px per card = the reference's 18px gap. The matching -9px pull
   on the row keeps the outer card edges flush with the content column instead of
   inset by the padding.
   Net result: card width 286px == the reference's calc((100% - 54px)/4) = 285.5. */
.category-swiper{margin-inline:-9px}

/* card shell: 4:5 portrait, rounded, label overlaid on a bottom scrim */
.cat-card.sh-category-card{padding:9px;text-align:left}
.sh-category-card > a{position:relative;display:block;border-radius:var(--radius);overflow:hidden}
.sh-category-card .cat-card-img-root{padding-bottom:125%;border-radius:0}
.sh-category-card .cat-card-img{border-radius:0;transition:transform .6s var(--ease)}
.sh-category-card > a:hover .cat-card-img{transform:scale(1.06)}

/* Hover: lift + scale the whole card, and let the image inside zoom a touch more.
   .cat-card{padding:9px} is the gutter and its overflow is visible, so the scaled
   tile has room to grow without clipping neighbours. */
.sh-category-card > a{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sh-category-card > a:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 38px rgba(26,21,19,.22)}
@media (prefers-reduced-motion:reduce){
  .sh-category-card > a{transition:none}
  .sh-category-card > a:hover{transform:none}
}
.sh-category-card > a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(26,21,19,0) 40%,rgba(26,21,19,.68) 100%)}
.sh-category-card .cat-card-title{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:16px 18px 18px;display:block;text-align:left;color:#fff;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.25}

/* categories with no image yet -> reference .cat--ph (linen + dashed tan, dark text) */
.sh-category-card .cat-card-no-img-container::before{padding-bottom:125%}
.sh-category-card > a:has(.cat-card-no-img-container)::after{display:none}
.sh-category-card .cat-card-letter-container{background:var(--linen);border:1px dashed var(--tan)}
.sh-category-card .cat-card-letter{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.sh-category-card > a:has(.cat-card-no-img-container) .cat-card-title{color:var(--ink);text-align:center}
/* ---------- Home section order ----------
   Default DOM order is: hero banner -> Browse Categories (section-wrapper-1) ->
   USP strip (section-wrapper-2 / .sx-uspmini) -> bundle -> ...  The USP strip needs
   to sit directly under the hero, BEFORE categories, with no gap (per the second
   screenshot).

   <main> is display:block, so `order` alone does nothing -- make it a flex column
   first, then reorder. Scoped to the home page via :has(> .section-wrapper-1) so
   other pages' <main> is unaffected. The banner and the (empty) inline <style>
   nodes keep the default order:0 and stay first; everything visible is ordered
   explicitly. Flex column with the default align-items:stretch keeps every section
   full-width, so the full-bleed backgrounds below still reach both edges (verified:
   wrappers stay 1386px/left:0, bleed pseudos span the full width). */
main:has(> .section-wrapper-1){display:flex;flex-direction:column}
main:has(> .section-wrapper-1) > .banner{order:0}
main:has(> .section-wrapper-1) > .section-wrapper-2{order:1}  /* USP strip */
main:has(> .section-wrapper-1) > .section-wrapper-1{order:2}  /* categories */
main:has(> .section-wrapper-1) > .section-wrapper-3{order:3}
main:has(> .section-wrapper-1) > .section-wrapper-4{order:4}
main:has(> .section-wrapper-1) > .section-wrapper-5{order:5}
main:has(> .section-wrapper-1) > .section-wrapper-6{order:6}
main:has(> .section-wrapper-1) > .section-wrapper-7{order:7}
main:has(> .section-wrapper-1) > .section-wrapper-8{order:8}

/* Trust strip (Handcrafted / Food Grade / ... .sx-trust) must sit at the very
   bottom. Target it by content (:has(.sx-trust)) instead of a section-wrapper
   number, because adding sections in admin (e.g. the Best Sellers collection)
   renumbers the wrappers -- a high order value keeps it last no matter its number. */
main:has(> .section-wrapper-1) > *:has(.sx-trust){order:100!important}

/* USP strip flush against the hero (it had the theme's 32px section-spacing top). */
.section-wrapper-2 > .page-container{margin-top:0!important}

/* ---------- Desktop: reduce section gaps ----------
   Sections shipped with 70px (bundle/story/reviews) or 54px (trust) internal
   vertical padding, plus a 32px inter-section margin -- so section-to-section gaps
   ran 102-172px, far too much. Trim internal padding to 32px and the margin to 16px
   (gaps ~48/80px). Scoped >600px so the mobile block below keeps its own tighter
   values. */
@media (min-width:601px){
  .sx-bundle{padding:0 0 32px!important}
  .sx-story{padding:32px 0!important}
  .sx-trust{padding:32px 0!important}
  .sx-reviews{padding:32px 0!important}
  .sec{padding-top:0!important;padding-bottom:32px!important}
  main:has(> .section-wrapper-1) > [class*="section-wrapper"] > .page-container{margin-top:16px!important}
}

/* ---------- Mobile: uniform 12px body padding ----------
   On phones the side inset stacked up: .page-container's 16px (theme px-4) PLUS the
   inner wrappers' 22px = ~38px, eating a chunk of a 375px screen. Collapse to a flat
   12px: set the outer .page-container to 12px and zero the inner wrappers' horizontal
   padding (their vertical padding is kept via padding-left/right only). Full-bleed
   backgrounds are unaffected -- they paint on ::before anchored to the full-width
   wrapper, so they still reach both edges. */
/* USP strip marquee (mobile): the 4 USP items were a manual overflow-x scroll.
   Auto-scroll them right-to-left on a loop like the old <marquee> tag. The single
   item set (~725px, ~2x the viewport) travels 100vw -> -100% and repeats; the
   parent .sx-uspmini has overflow:hidden so nothing spills onto the page.
   Note: this is a classic one-direction marquee -- there is a brief moment at the
   loop where the strip is empty (same as <marquee>). A perfectly seamless loop
   would need the 4 items duplicated in the section's HTML. */
@keyframes sx-uspmini-marquee{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}
@media (max-width:600px){
  .page-container{padding-left:12px!important;padding-right:12px!important}
  .app-bar-main .page-container{padding-left:12px!important;padding-right:12px!important}
  .cat-section{padding-left:0!important;padding-right:0!important}
  .sx-bundle__inner,.sx-reviews__inner,
  .sx-story__inner,.sx-trust__grid{padding-left:0!important;padding-right:0!important}

  /* Bundle preview images: the strip had 30px left/right padding, so the 3 thumbs
     were small (~71px). Cut it to 10px so they grow (~102px) while keeping a small
     margin off the card's rounded edges. */
  .sx-bundle__pics{padding-left:10px!important;padding-right:10px!important}

  .sx-uspmini{overflow:hidden}
  .sx-uspmini__row{
    width:max-content!important;flex-wrap:nowrap!important;overflow:visible!important;
    justify-content:flex-start!important;gap:0 40px!important;padding-left:0!important;padding-right:0!important;
    animation:sx-uspmini-marquee 16s linear infinite;will-change:transform;
  }
  .sx-uspmini:hover .sx-uspmini__row{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){
    .sx-uspmini__row{animation:none;transform:none;overflow-x:auto!important}
  }

  /* Hero: move the banner copy to the BOTTOM of the image (was pinned to the top
     via align-items:flex-start + padding-top). Flip the scrim so it darkens toward
     the bottom instead of the top, keeping the white text readable there. */
  .hero-content{align-items:flex-end!important;padding-top:0!important;padding-bottom:36px!important}
  .hero-scrim{background:linear-gradient(180deg,rgba(26,21,19,.28) 0%,rgba(26,21,19,.48) 52%,rgba(26,21,19,.86) 100%)!important}

  /* Promo banner sections (.sec): their content sits in a .wrap with 0 22px padding,
     so the cards were inset 22px MORE than every other section (left 34px vs 12px,
     44px narrower). Zero it so they align to the 12px body edge. Also trim the .sec's
     oversized bottom padding (52px) so the vertical gap matches the mobile rhythm.
     .sec exists only on these two promo sections, so both are safe to target. */
  .sec .wrap{padding-left:0!important;padding-right:0!important}

  /* Vertical rhythm (mobile): sections carried desktop-sized vertical padding on
     phones, producing big uneven gaps. Flatten to 24px internal padding + a 12px
     inter-section margin, so section-to-section gaps are a tight ~36/60px. */
  .sx-bundle{padding:0 0 24px!important}
  .sx-story{padding:24px 0!important}
  .sx-trust{padding:24px 0!important}
  .sec{padding-top:0!important;padding-bottom:24px!important}
  main:has(> .section-wrapper-1) > [class*="section-wrapper"] > .page-container{margin-top:12px!important}

  /* Categories: the Swiper next-arrow floated on top of the right card. The theme's
     own hide rule targets .cat-card-swiper, but this carousel's class is
     .category-swiper, so it never matched -- hide the arrows here (mobile = swipe). */
  .category-swiper .swiper-button-next,
  .category-swiper .swiper-button-prev{display:none!important}

  /* Reviews: the text-review cards were a stacked vertical grid (very tall). Turn
     them into a horizontal swipe rail like the video row above, and trim the big
     70px section padding + 24px card padding down for phones. */
  .sx-reviews{padding:24px 0!important}
  .sx-reviews__texts{
    display:flex!important;grid-template-columns:none!important;gap:12px!important;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-top:18px;padding-bottom:4px;
  }
  .sx-reviews__texts::-webkit-scrollbar{display:none}
  .sx-reviews__card{flex:0 0 82%!important;scroll-snap-align:start;padding:18px!important}
}

/* ---------- Product grid collection (e.g. "Best Sellers") ----------
   A ProductGridCollection (.prod-collection-container.sh-prod-grid-collection-card)
   renders the theme's default product cards: white/black outlined "+ Add" button,
   an off-brand orange discount tag, plain price. Brand them to match the store, and
   constrain the container to the same 1240px column as every other section.
   Card styling below is verified on the /products page (same classes); the home
   collection itself is served from cache and only appears after a hard reload. */
.prod-collection-container.sh-prod-grid-collection-card{max-width:var(--maxw);margin-inline:auto;padding-inline:22px;margin-top:clamp(28px,4vw,52px)}

/* 6 cards per row on desktop. The swiper slide (.collection-item) gets an INLINE
   width of calc((100% - 48px)/5) from the theme's cols_in_desktop default of 5
   (cardGap = 12px, so 4 gaps of 12 = 48px). Override to 6 columns:
   calc((100% - 5*12px)/6) = calc((100% - 60px)/6). !important beats the inline
   style. Desktop only -- mobile keeps its own (smaller) per-row count. */
@media (min-width:1024px){
  .sh-prod-grid-collection-card .collection-item{width:calc((100% - 60px)/6)!important}
}

/* "+ Add" -> soft terracotta pill matching the store's button language
   (was white bg / black text / black border). */
.pr-outlined-button{
  background:rgba(223,118,40,.10)!important;
  border:1.5px solid var(--secondary-main)!important;
  border-radius:999px!important;color:var(--secondary-main)!important;
}
.pr-outlined-button .pr-outlined-button-label,
.pr-outlined-button .pr-card-action-txt{color:var(--secondary-main)!important;font-weight:600!important}
.pr-outlined-button:hover{background:var(--secondary-main)!important;color:#fff!important}
.pr-outlined-button:hover .pr-outlined-button-label,
.pr-outlined-button:hover .pr-card-action-txt{color:#fff!important}

/* discount tag -> exact brand terracotta (was #FF7222); price -> brand ink + muted */
.sh-product-card-discount-tag{background:var(--secondary-main)!important}
.sh-product-card-price{color:var(--ink,#1A1513)!important}
.sh-product-card-mrp{color:var(--taupe,#8C7A64)!important}
/* View All link -> brand */
.prod-collection-container .view-all a,.sh-section-heading .section-heading-viewall{color:var(--secondary-main)!important;font-weight:600}

/* PDP buttons: "+ Add" already picks up the .pr-outlined-button rule above (soft
   terracotta pill). The "Buy Now" button (.sh-product-buy-now-button) shipped solid
   BLACK -- make it a solid terracotta pill so the pair reads on-brand together.
   Verified on the /products/test-product PDP. */
.sh-product-buy-now-button{
  background:var(--secondary-main)!important;color:#fff!important;
  border-radius:999px!important;border:1.5px solid var(--secondary-main)!important;
}
.sh-product-buy-now-button:hover{filter:brightness(.93)}
/* END shoopy-gen:live-components */

/* ---------- Full-bleed section backgrounds ----------
   In the reference these sections are top-level <section>s, so their background
   runs edge to edge. In the store every section is boxed inside .page-container
   (max-width 1280->1600 + 40px gutters, auto-centred), so the colour stopped at
   the gutter.

   Approach: paint the background on a ::before instead of on the section itself,
   and anchor that pseudo to .section-wrapper-N -- which is already exactly the
   viewport's content width (left:0, width == documentElement.clientWidth) and
   exactly as tall as the section. So inset:0 on the pseudo lands precisely on
   both viewport edges. LAYOUT IS NEVER TOUCHED: content in every section still
   starts at the same x as the rest of the page.

   Two approaches were tried and rejected:
   - Zeroing .page-container's max-width/padding: bleeds correctly, but frees the
     inner wrappers to re-centre at var(--sx-maxw) (1240px) instead of the
     container's content width, so their text landed 27px left of every other
     section (measured 35px vs 62px at a 1266px viewport). Visible jog.
   - margin-inline:calc(50% - 50vw) / width:100vw: 100vw includes the 14px
     scrollbar, so it overshoots ~7px per side and only looks right because the
     theme happens to set body{overflow-x:hidden}. Anchoring to the wrapper needs
     no vw and adds no overflow at all.

   .sx-story and .sx-bundle are excluded on purpose: story paints no background
   (transparent) and bundle is an inset card, so neither has anything to bleed.
   If a background is ever added to .sx-story, add it to all three lists below. */
[class*="section-wrapper"]:has(.sx-uspmini),
[class*="section-wrapper"]:has(.sx-reviews),
[class*="section-wrapper"]:has(.sx-trust){position:relative}

/* move the colour off the section (which is gutter-width) onto the pseudo */
.sx-uspmini,.sx-reviews,.sx-trust{background:transparent;border-block:0}

.sx-uspmini::before,.sx-reviews::before,.sx-trust::before{
  content:"";position:absolute;inset:0;z-index:0;
}
.sx-uspmini::before{background:#000;border-top:1px solid var(--sx-line);border-bottom:1px solid var(--sx-line)}
.sx-reviews::before{background:var(--sx-paper)}
.sx-trust::before{background:var(--sx-linen)}

/* keep real content above the painted background */
.sx-uspmini > *,.sx-reviews > *,.sx-trust > *{position:relative;z-index:1}
.sx-uspmini > *, .sx-reviews > *, .sx-trust > * {
    position: relative;
    z-index: 1;
    padding-top: 0px;
}

/* ========================================================================== 
   ENHANCED OUR STORY SECTION
   Added after all existing rules so it overrides the older story styles.
   ========================================================================== */

.sx-story {
  --story-ink: var(--sx-ink, #1a1513);
  --story-paper: var(--sx-paper, #f5f2ed);
  --story-linen: var(--sx-linen, #ece4d7);
  --story-tan: var(--sx-tan, #caa982);
  --story-taupe: var(--sx-taupe, #8c7a64);
  --story-muted: var(--sx-muted, #6f6459);
  --story-line: var(--sx-line, #e2d9cb);
  --story-brand: var(--sx-brand, var(--secondary-main, #df7628));
  --story-display: var(
    --sx-display,
    "Spectral",
    Georgia,
    "Times New Roman",
    serif
  );
  --story-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
      linear-gradient(180deg, #ffffff 0%, var(--story-paper) 100%);
}

.sx-story::before,
.sx-story::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(140, 122, 100, 0.16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.sx-story::before {
  top: 70px;
  left: -130px;
  width: 310px;
  height: 310px;
}

.sx-story::after {
  right: -180px;
  bottom: 55px;
  width: 390px;
  height: 390px;
}

.sx-story *,
.sx-story *::before,
.sx-story *::after {
  box-sizing: border-box;
}

.sx-story .sx-story__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-right: 24px !important;
  padding-left: 24px !important;
}

/* Heading */

.sx-story__head {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 100px);
  margin: 0 0 clamp(34px, 5vw, 56px);
  align-items: start;
  text-align: left;
}

.sx-story__head-label {
  display: flex;
  padding-top: 20px;
  align-items: center;
  gap: 16px;
}

.sx-story__head .sx-eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: var(--story-taupe);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.sx-story__head-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--story-tan),
    rgba(202, 169, 130, 0)
  );
}

.sx-story__headline {
  position: relative;
  max-width: 850px;
}

.sx-story__quote-mark {
  position: absolute;
  top: -42px;
  left: -32px;
  z-index: -1;
  color: rgba(223, 118, 40, 0.13);
  font-family: Georgia, serif;
  font-size: clamp(110px, 13vw, 190px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.sx-story__quote {
  max-width: 820px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--story-ink);
  font-family: var(--story-display);
  font-size: clamp(38px, 5.1vw, 70px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.sx-story__quote em {
  color: var(--story-brand);
  font-style: italic;
  font-weight: 400;
}

.sx-story__intro {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--story-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.8;
}

/* Main image */

.sx-story__visual {
  position: relative;
  margin-bottom: clamp(26px, 4vw, 48px);
}

.sx-story__figure {
  position: relative;
  margin: 0;
}

.sx-story__media {
  position: relative;
  width: 100%;
  min-height: 380px;
  aspect-ratio: 3/1;
  overflow: hidden;
  border: 1px solid rgba(140, 122, 100, 0.24);
  border-radius: 34px;
  background: var(--story-linen);
  box-shadow: 0 26px 70px rgba(26, 21, 19, 0.12);
}

.sx-story__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 21, 19, 0.02) 30%,
    rgba(26, 21, 19, 0.35) 100%
  );
  content: "";
  pointer-events: none;
}

.sx-story .sx-story__img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center 54%;
  transform: scale(1.001);
  transition: transform 0.9s var(--story-ease);
}

.sx-story__caption {
  position: absolute;
  left: clamp(18px, 3vw, 38px);
  bottom: clamp(18px, 3vw, 38px);
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  width: min(430px, calc(100% - 36px));
  padding: 18px 20px;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 18px;
  background: rgba(26, 21, 19, 0.68);
  box-shadow: 0 16px 40px rgba(26, 21, 19, 0.2);
  color: #ffffff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.sx-story__caption-number {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  color: var(--story-tan);
  font-family: var(--story-display);
  font-size: 17px;
}

.sx-story__caption strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--story-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.sx-story__caption p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Decorative stamp */

.sx-story__stamp {
  position: absolute;
  top: -42px;
  right: -18px;
  z-index: 3;
  display: flex;
  width: 132px;
  height: 132px;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 21, 19, 0.16);
  border-radius: 50%;
  background: var(--story-paper);
  box-shadow: 0 18px 45px rgba(26, 21, 19, 0.16);
  color: var(--story-ink);
  text-align: center;
  transform: rotate(8deg);
}

.sx-story__stamp::before {
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(26, 21, 19, 0.28);
  border-radius: inherit;
  content: "";
}

.sx-story__stamp span,
.sx-story__stamp strong {
  position: relative;
  z-index: 1;
}

.sx-story__stamp span {
  color: var(--story-taupe);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sx-story__stamp strong {
  margin: 6px 0;
  color: var(--story-brand);
  font-family: var(--story-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Content cards */

.sx-story__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.sx-story__col {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  border-radius: 28px;
}

.sx-story__col--origin {
  border: 1px solid var(--story-line);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(26, 21, 19, 0.07);
}

.sx-story__col--origin::after {
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(223, 118, 40, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.sx-story__col--craft {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 95% 4%,
      rgba(223, 118, 40, 0.25),
      transparent 28%
    ),
    var(--story-ink);
  box-shadow: 0 22px 60px rgba(26, 21, 19, 0.18);
  color: #ffffff;
}

.sx-story__kicker {
  position: relative;
  z-index: 1;
  display: flex;
  margin-bottom: 24px;
  align-items: center;
  gap: 11px;
}

.sx-story__kicker span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--story-brand);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sx-story__kicker p {
  margin: 0;
  color: var(--story-taupe);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sx-story__col--craft .sx-story__kicker p {
  color: var(--story-tan);
}

.sx-story__col h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: var(--story-ink);
  font-family: var(--story-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.sx-story__col--craft h3 {
  color: #ffffff;
}

.sx-story__col > p {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  color: var(--story-muted);
  font-size: 15.5px;
  line-height: 1.82;
}

.sx-story__col--craft > p {
  color: rgba(255, 255, 255, 0.7);
}

/* Pull quote */

.sx-story__pullquote {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 28px;
  padding: 20px;
  gap: 13px;
  border-left: 3px solid var(--story-brand);
  border-radius: 0 15px 15px 0;
  background: var(--story-paper);
}

.sx-story__pullquote > span {
  color: var(--story-brand);
  font-size: 16px;
}

.sx-story__pullquote p {
  margin: 0;
  color: var(--story-ink);
  font-family: var(--story-display);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

/* Craftsmanship list */

.sx-story__values {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.sx-story__values li {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 17px 0;
  gap: 14px;
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sx-story__value-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--story-tan);
  font-size: 10px;
  font-weight: 700;
}

.sx-story__values strong {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.sx-story__values small {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12.5px;
  line-height: 1.55;
}

.sx-story__sign {
  position: relative;
  z-index: 1;
  margin: 24px 0 0 !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--story-tan) !important;
  font-family: var(--story-display);
  font-size: 17px !important;
  font-style: italic;
  line-height: 1.5 !important;
}

/* Desktop hover */

@media (hover: hover) and (pointer: fine) {
  .sx-story__figure:hover .sx-story__img {
    transform: scale(1.035);
  }

  .sx-story__col {
    transition:
      transform 0.35s var(--story-ease),
      box-shadow 0.35s var(--story-ease);
  }

  .sx-story__col:hover {
    transform: translateY(-6px);
  }

  .sx-story__col--origin:hover {
    box-shadow: 0 25px 65px rgba(26, 21, 19, 0.11);
  }

  .sx-story__col--craft:hover {
    box-shadow: 0 30px 72px rgba(26, 21, 19, 0.25);
  }
}

/* Tablet */

@media (max-width: 980px) {
  .sx-story__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sx-story__head-label {
    max-width: 260px;
    padding-top: 0;
  }

  .sx-story__quote-mark {
    left: -12px;
  }

  .sx-story__media {
    min-height: 330px;
    aspect-ratio: 16 / 8;
  }

  .sx-story__stamp {
    top: -28px;
    right: 12px;
    width: 112px;
    height: 112px;
  }

  .sx-story__stamp strong {
    font-size: 19px;
  }

  .sx-story__cols {
    grid-template-columns: 1fr;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .sx-story {
    padding: 54px 0 !important;
  }

  .sx-story::before {
    top: 80px;
    left: -150px;
  }

  .sx-story::after {
    display: none;
  }

  .sx-story .sx-story__inner {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .sx-story__head {
    margin-bottom: 30px;
    gap: 18px;
  }

  .sx-story__head-label {
    max-width: 210px;
  }

  .sx-story__head .sx-eyebrow {
    font-size: 10.5px;
  }

  .sx-story__quote-mark {
    top: -24px;
    left: -2px;
    font-size: 96px;
  }

  .sx-story__quote {
    padding-top: 8px;
    font-size: clamp(34px, 10.5vw, 46px);
    line-height: 1.05;
  }

  .sx-story__quote em {
    display: block;
    margin-top: 4px;
  }

  .sx-story__intro {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.72;
  }

  .sx-story__visual {
    margin-bottom: 18px;
  }

  .sx-story__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }

  .sx-story .sx-story__img {
    object-position: center center;
  }

  .sx-story__caption {
    position: relative;
    left: auto;
    bottom: auto;
    width: calc(100% - 16px);
    margin: -34px auto 0;
    padding: 15px;
    border-radius: 16px;
    background: var(--story-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sx-story__caption-number {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .sx-story__caption strong {
    font-size: 17px;
  }

  .sx-story__caption p {
    font-size: 11.5px;
  }

  .sx-story__stamp {
    display: none;
  }

  .sx-story__cols {
    gap: 14px;
  }

  .sx-story__col {
    padding: 25px 21px;
    border-radius: 21px;
  }

  .sx-story__kicker {
    margin-bottom: 18px;
  }

  .sx-story__col h3 {
    margin-bottom: 15px;
    font-size: 29px;
  }

  .sx-story__col > p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.72;
  }

  .sx-story__pullquote {
    margin-top: 22px;
    padding: 16px;
  }

  .sx-story__pullquote p {
    font-size: 16px;
  }

  .sx-story__values {
    margin-top: 22px;
  }

  .sx-story__values li {
    padding: 15px 0;
  }

  .sx-story__sign {
    margin-top: 18px !important;
    padding-top: 17px;
    font-size: 16px !important;
  }
}

/* Small mobile */

@media (max-width: 380px) {
  .sx-story__quote {
    font-size: 32px;
  }

  .sx-story__caption {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .sx-story__caption-number {
    width: 34px;
    height: 34px;
  }

  .sx-story__col {
    padding: 22px 18px;
  }
}

/* Reduced-motion accessibility */

@media (prefers-reduced-motion: reduce) {
  .sx-story__img,
  .sx-story__col {
    transition: none !important;
  }

  .sx-story__figure:hover .sx-story__img,
  .sx-story__col:hover {
    transform: none !important;
  }
}
.text-zinc-900 
{
display:none !important;
}
.sh-shoopy-html-page > div {
    width: 100%;
  }
  .sh-shoopy-html-page > div > div {
    border: none;
    padding-top: 0px;
  }

/* ==========================================================================
   HEADER NAVIGATION UNDERLINE FIX
   Keeps the hover line below the menu text instead of cutting through it.
   ========================================================================== */

.app-bar-main .nav-item {
  position: relative;
}

.app-bar-main .nav-link {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  padding: 12px 0 11px !important;
  align-items: center;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

/* Reset the older underline placement that used bottom: 20px */
.app-bar-main .nav-link::after {
  position: absolute;
  right: 0;
  bottom: 4px !important;
  left: 0;
  width: 100% !important;
  height: 2px;
  border-radius: 999px;
  background: #ffffff !important;
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease, ease) !important;
}

/* Show underline only on hover or keyboard focus */
.app-bar-main .nav-item:hover > .nav-link::after,
.app-bar-main .nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Prevent the old width animation from interfering */
.app-bar-main .nav-item:hover .nav-link::after {
  width: 100% !important;
}

/* Keep submenu arrows and icons vertically aligned */
.app-bar-main .nav-link svg,
.app-bar-main .nav-link .chev {
  flex: 0 0 auto;
}

/* Touch devices do not need a persistent hover underline */
@media (hover: none), (pointer: coarse) {
  .app-bar-main .nav-link::after {
    display: none;
  }
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .app-bar-main .nav-link::after {
    transition: none !important;
  }
}
.universal-border {
    border-radius: 30px !important;
}
.mobile-sidemenu-header, .mobile-sidemenu-submenu-header {
    align-items: center;
    background-color: #DF7628;
}
.mobile-sidemenu-name {
    display: none !important;
}
.mobile-sidemenu-link {
    color: #ffffff;
}
@media only screen and (max-width: 599.95px) {
    .MuiDrawer-paperAnchorLeft, .MuiDrawer-paperAnchorRight {
                background-color: black;
           }
}
.mobile-sidemenu-footer {
    background: #000;
}
.mobile-sidemenu-item-name {
    color: #ffffff;
}
@media (max-width: 480px) {
    .app-bar .logo-ctn.left-aligned {
        flex: none !important;
        /* justify-content: center; */
    }
}
@media (max-width:600px){
  /* Centre the categories on mobile. The grid layout (grid-cols-3) left-aligns a
     partial last row (5 cards = 3 + 2, empty 3rd cell). A CSS grid can't centre a
     short last row, so flip the container to flex-wrap + justify-center and hold
     each card at 1/3 width — the trailing cards then centre. */
  .cat-section div:has(> .cat-card){
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  .cat-section div:has(> .cat-card) > .cat-card{ width:33.333% !important; }
}
.mobile-sidemenu-link.has-children:hover {
    background-color: #1a1a1a !important;
}
.duration-200::after{
background-color:#fff !important;
}
.app-bar .logo {
    margin-left: 46px;
}
@media (max-width:500px){
app-bar .logo {
    height: 42px;
    object-fit: cover;
    width: unset;
    margin-left: 46px;
}

}
:root {
--header-accent: #fff;
}
svg.lucide-chevron-down {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

svg.lucide-chevron-down path {
  stroke: #ffffff !important;
}
.mobile-sidemenu-link:hover {
    background-color: #000000;
}