/* ============================================================
   SV HOMEPAGE — section styles ported from the Shopify sv-* sections
   (hero, featured-deals, nicotine-band, starter-feature, shop-hardware,
   shop-brands, why, faq, blogs, sticker-share). Section-scoped
   `#shopify-section-… .foo` selectors flattened to the unique wrapper
   classes. Dark-mode overrides replace the old sv-darkmode-2 patches.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");

.sv-seo-intro { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---- Sticker-share gold band (sv-sticker-share) ---- */
/* Lives inside the sticky header since 0.21.0 — no own stickiness (the old
   position:sticky;top:0 fought the sticky header and "scrunched" on scroll). */
.svss { overflow: hidden; background: #f2ad44; position: relative; }
.svss__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3; background: none; border: none; color: rgba(12,19,34,.5); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px 7px; }
.svss__x:hover { color: rgba(12,19,34,.85); }
.svss * { box-sizing: border-box; }
.svss__row { display: flex; align-items: center; gap: 12px; max-width: 1400px; margin: 0 auto; padding: 8px 20px; min-height: 50px; transition: min-height .25s ease, padding .25s ease; }
.svss__toss { position: relative; width: 46px; height: 36px; flex-shrink: 0; }
.svss__hand { position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; transform: rotate(8deg); transform-origin: 50% 90%; color: #15233f; }
.svss__stick { border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svss__stick svg { width: 55%; height: 55%; display: block; }
.svss__t1 { position: absolute; left: 24px; top: 0; width: 17px; height: 17px; transform: rotate(-10deg); }
.svss__t2 { position: absolute; left: 30px; top: 12px; width: 15px; height: 15px; transform: rotate(9deg); }
.svss__t3 { position: absolute; left: 20px; top: 16px; width: 15px; height: 15px; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .svss__hand { animation: svss-wind 6s ease-in-out infinite; }
  .svss__t1 { animation: svss-toss1 6s ease-out infinite; }
  .svss__t2 { animation: svss-toss2 6s ease-out infinite; }
  .svss__t3 { animation: svss-toss3 6s ease-out infinite; }
  .svss__btn { animation: svss-nudge 8s ease-in-out 3s infinite; }
}
@keyframes svss-wind { 0%,46%,100%{transform:rotate(8deg)} 52%,56%{transform:rotate(-26deg)} 63%{transform:rotate(16deg)} 70%{transform:rotate(8deg)} }
@keyframes svss-toss1 { 0%,52%{transform:translate(0,0) rotate(-10deg);opacity:1} 57%{opacity:1} 78%{transform:translate(110px,-9px) rotate(150deg);opacity:1} 94%,100%{transform:translate(180px,5px) rotate(240deg);opacity:0} }
@keyframes svss-toss2 { 0%,55%{transform:translate(0,0) rotate(9deg);opacity:1} 60%{opacity:1} 81%{transform:translate(150px,-12px) rotate(-130deg);opacity:1} 97%,100%{transform:translate(230px,-1px) rotate(-220deg);opacity:0} }
@keyframes svss-toss3 { 0%,58%{transform:translate(0,0) rotate(-6deg);opacity:1} 63%{opacity:1} 84%{transform:translate(85px,-13px) rotate(110deg);opacity:1} 100%{transform:translate(140px,-3px) rotate(190deg);opacity:0} }
@keyframes svss-nudge { 0%,6%,100%{transform:rotate(-2deg) scale(1)} 1.5%{transform:rotate(2deg) scale(1.07)} 3%{transform:rotate(-3deg) scale(1.07)} 4.5%{transform:rotate(1deg) scale(1.03)} }
.svss__p { position: relative; z-index: 2; margin: 0; flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: #15233f; }
.svss-hl { font-family: 'Permanent Marker','Comic Sans MS','Segoe Print',cursive; font-size: 1.3em; font-weight: 400; display: inline-block; transform: rotate(-2deg); padding: 0 3px; line-height: 1; }
.svss__arrow { flex-shrink: 0; display: none; align-items: center; gap: 7px; align-self: center; color: #15233f; }
.svss__arrow svg { width: 62px; height: 22px; display: block; margin-top: 10px; }
.svss__arrowlbl { font-size: 10.5px; font-weight: 800; line-height: 1.25; text-align: right; white-space: nowrap; transform: rotate(-3deg); letter-spacing: .01em; }
@media (min-width: 900px) { .svss__arrow { display: flex; } }
.svss.is-stuck .svss__arrow { display: none; }
@media (prefers-reduced-motion: no-preference) { .svss__arrow { animation: svss-nudgearrow 1.6s ease-in-out infinite; } }
@keyframes svss-nudgearrow { 0%,100%{translate:0 0} 50%{translate:5px 0} }
.svss__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 2.5px solid #fff; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; flex-shrink: 0; transform: rotate(-2deg); background: #0c1322; color: #f2ad44; }
.svss__btn svg { width: 15px; height: 15px; display: block; }
.svss__btn:hover { filter: brightness(1.35); transform: rotate(0deg) scale(1.04); }
.svss.is-stuck .svss__row { min-height: 34px; padding: 4px 20px; }
.svss.is-stuck .svss__toss { display: none; }
.svss.is-stuck .svss__p { font-size: 12px; }
.svss.is-stuck .svss__btn { padding: 7px 14px; font-size: 12px; animation: none; }
/* ≤899px the nudge arrow is gone, so the Share pill flexes against the right
   edge and buries the ✕ (right:8px) — reserve a lane for it */
@media (max-width: 899px) { .svss__row { padding-right: 34px; } }
@media (max-width: 479px) {
  .svss__row { gap: 8px; padding: 7px 34px 7px 10px; }
  .svss__p { font-size: 11.5px; }
  .svss-hl { font-size: 1.12em; } /* keep 'f**k load of stickers' on one wrap line at 375 */
  .svss__btn { padding: 9px 13px; font-size: 11.5px; }
  .svss__toss { width: 38px; height: 32px; }
  .svss__hand { width: 25px; height: 25px; }
  .svss__t1 { left: 20px; width: 14px; height: 14px; }
  .svss__t2 { left: 24px; top: 10px; width: 13px; height: 13px; }
  .svss__t3 { left: 16px; top: 14px; width: 13px; height: 13px; }
  .svss.is-stuck .svss__row { padding: 4px 10px; }
}
.svss__conf { position: fixed; z-index: 100000; pointer-events: none; transition: transform .7s cubic-bezier(.2,.6,.3,1), opacity .7s ease-out; }
.svss__conf svg { width: 100%; height: 100%; display: block; }
.svss-m { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; }
.svss-m[hidden] { display: none; }
.svss-m__bg { position: absolute; inset: 0; background: rgba(12,20,38,.55); }
.svss-m__sheet { position: relative; background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 460px; padding: 18px 18px 28px; box-shadow: 0 -12px 44px -12px rgba(0,0,0,.35); }
@media (min-width: 600px) { .svss-m { align-items: center; } .svss-m__sheet { border-radius: 20px; } }
.svss-m__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.svss-m__title { font-size: 16px; font-weight: 800; color: #15233f; }
.svss-m__x { border: 0; background: none; font-size: 26px; line-height: 1; color: #7a8090; cursor: pointer; padding: 0 4px; }
.svss-m__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px 8px; }
.svss-m__sh { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: #42495a; text-decoration: none; background: none; border: 0; cursor: pointer; }
.svss-m__ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.svss-m__ic svg { width: 25px; height: 25px; display: block; }
.svss-m__note { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 12px; border: 1px solid #f2ad44; border-radius: 10px; background: #fdf4e3; color: #7a5212; font-size: 12px; line-height: 1.4; }
.svss-m__note svg { width: 19px; height: 19px; flex-shrink: 0; display: block; }

/* ---- Hero (sv-hero) ---- */
.hero { max-width: 1400px; margin: 0 auto; padding: 6px 20px 0; }
.hero__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; }
.hero__fd { position: relative; overflow: hidden; border-radius: 14px; min-height: 340px; padding: 30px 32px; background: var(--sv-hero-bg); border: 1.5px solid var(--sv-hero-border); box-shadow: var(--sv-hero-shadow); display: grid; grid-template-columns: 1fr minmax(210px,290px); gap: 26px; align-items: center; box-sizing: border-box; }
.hero__fd-copy, .hero__fd-art { position: relative; z-index: 1; }
.hero__fd-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__fd-art { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.hero__fd-pcard { background: #fff; border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; box-shadow: 0 10px 22px rgba(0,0,0,.26); transition: transform .2s ease; }
.hero__fd-pcard:nth-child(odd) { transform: rotate(-3deg); }
.hero__fd-pcard:nth-child(even) { transform: rotate(3deg); }
.hero__fd-pcard:hover { transform: translateY(-3px) rotate(0); }
.hero__fd-pimg { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 9px; }
.hero__fd-pimg img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.hero__fd-plabel { font-size: 11.5px; font-weight: 700; color: #0c1426; text-align: center; padding: 0 4px 9px; line-height: 1.2; }
.hero__fd-ey { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-hero-eye); font-weight: 700; border: 1px solid rgba(242,173,68,.5); border-radius: 999px; padding: 5px 13px; }
.hero__fd-h { font-size: clamp(25px,3.2vw,36px); line-height: 1.12; color: var(--sv-hero-text); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.hero__fd-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__fd-chip { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(242,173,68,.45); border-radius: 12px; padding: 11px 18px; min-width: 118px; }
.hero__fd-chip--best { border-color: rgba(242,173,68,.9); background: rgba(242,173,68,.08); }
.hero__fd-chip .k { font-size: 11px; color: var(--sv-hero-muted); text-transform: uppercase; letter-spacing: .09em; }
.hero__fd-chip .v { font-size: 23px; color: var(--sv-hero-eye); font-weight: 800; line-height: 1.05; margin-top: 3px; }
.hero__fd-chip .best { position: absolute; top: -9px; right: 10px; background: #f2ad44; color: #0c1426; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.hero__fd-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hero__fd-ticks li { position: relative; padding-left: 27px; color: var(--sv-hero-muted); font-size: 13.5px; line-height: 1.35; }
.hero__fd-ticks li:before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(242,173,68,.16); }
.hero__fd-ticks li:after { content: '\2713'; position: absolute; left: 4px; top: 0; color: var(--sv-hero-eye); font-size: 12px; font-weight: 800; line-height: 18px; }
.hero__fd-cta { display: inline-block; background: #f2ad44; color: #0c1426; font-weight: 800; font-size: 15px; padding: 13px 28px; border-radius: 999px; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.hero__fd-cta:hover { background: #ffc163; transform: translateY(-1px); }
.hero__fd-arw { display: inline-block; margin-left: 6px; }
.hero__fd-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 14px; background: var(--sv-hero-glow); }
.hero__fd-motif { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv-rev__card { position: relative; overflow: hidden; text-decoration: none; text-align: center; padding: 32px 28px; border-radius: 18px; background: var(--sv-rev-bg); border: 1px solid var(--sv-rev-border); box-shadow: var(--sv-rev-shadow); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; width: 100%; box-sizing: border-box; }
.sv-rev__card:hover { transform: translateY(-4px); box-shadow: var(--sv-rev-hovershadow); border-color: rgba(242,173,68,.60); }
.sv-rev__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sv-hero-muted); font-weight: 600; }
.sv-rev__g { flex: none; display: inline-block; }
.sv-rev__stars { color: #fbb000; font-size: 18px; letter-spacing: 4px; margin-top: 12px; }
.sv-rev__stats { display: flex; justify-content: center; align-items: center; margin-top: 18px; }
.sv-rev__stat { padding: 0 22px; }
.sv-rev__num { color: var(--sv-rev-num); font-size: clamp(24px,4.5vw,30px); font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.sv-rev__lbl { margin-top: 7px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-hero-muted); }
.sv-rev__div { width: 1px; height: 46px; background: var(--sv-rev-line); flex: none; }
.sv-rev__cta { display: inline-block; margin-top: 22px; background: #f2ad44; color: #0c1426; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 999px; }
.sv-rev__nw { white-space: nowrap; }
.sv-rev__arw { display: inline-block; margin-left: 7px; transition: transform .25s ease; }
.sv-rev__card:hover .sv-rev__cta { background: #ffc163; }
.sv-rev__card:hover .sv-rev__arw { transform: translateX(3px); }
.hero__ref { flex: none; border-radius: 14px; padding: 15px 17px; background: var(--sv-ref-bg); border: 1px solid var(--sv-ref-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero__ref-l { min-width: 0; }
.hero__ref-ey { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-hero-eye); font-weight: 600; }
.hero__ref-hl { font-size: 19px; color: var(--sv-hero-text); font-weight: 700; line-height: 1.15; margin: 5px 0 11px; }
.hero__ref-hl b { color: var(--sv-hero-eye); }
.hero__ref-cta { display: inline-block; background: #f2ad44; color: #0c1426; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 999px; text-decoration: none; }
.hero__ref-arw { display: inline-block; margin-left: 5px; }
.hero__ref-steps { display: flex; flex-direction: column; gap: 8px; flex: none; }
.hero__ref-step { display: flex; align-items: center; gap: 8px; color: var(--sv-hero-muted); font-size: 12px; white-space: nowrap; }
.hero__ref-n { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(242,173,68,.5); color: var(--sv-hero-eye); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 780px) {
  .hero__grid { grid-template-columns: 1fr; gap: 10px; }
  .hero__fd { min-height: 0; padding: 22px 20px; gap: 16px; grid-template-columns: 1fr; }
  .hero__fd-art { grid-template-columns: repeat(4,1fr); gap: 8px; }
  .hero__fd-h { font-size: 23px; }
  .hero__fd-chips { gap: 8px; flex-wrap: nowrap; width: 100%; }
  .hero__fd-chip { min-width: 0; flex: 1 1 0; padding: 9px 10px; }
  .hero__fd-chip .k { font-size: 10px; letter-spacing: .07em; }
  .hero__fd-chip .v { font-size: 18px; }
  .hero__fd-chip .best { right: 6px; font-size: 8px; padding: 2px 6px; }
  .hero__fd-ticks li { font-size: 13px; }
  .hero__deal { height: 120px; }
  .hero__side { gap: 10px; }
  .sv-rev__card { flex: none; padding: 28px 20px; }
  .sv-rev__stat { padding: 0 18px; }
  .sv-rev__num { font-size: 26px; }
  .sv-rev__cta { font-size: 14px; padding: 12px 24px; }
  .hero__ref { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .hero__ref-steps { display: none; }
  .hero__ref-hl { font-size: 17px; margin: 4px 0 10px; }
}

/* ---- shared section header tick ---- */
.sv-sec-tick { width: 5px; height: 26px; background: #f2ad44; border-radius: 3px; flex: none; }

/* ---- Featured deals (sv-featured-deals) ---- */
.fd { max-width: 1400px; margin: 0 auto; padding: 20px 20px 0; }
.fd__head { font-size: 22px; font-weight: 800; color: var(--sv-text); letter-spacing: -.01em; margin: 0 0 14px; }
.fd__tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fd__tab { font-size: 14px; padding: 9px 18px; border-radius: 999px; border: 1px solid #e6e1d6; background: #fff; color: #7a8090; cursor: pointer; font-weight: 600; transition: all .15s ease; }
.fd__tab.is-active { background: #f2ad44; color: #3a2a06; border-color: #f2ad44; }
.fd__tab--nf { border-color: #35c775 !important; color: #35c775 !important; }
.fd__tab--nf.is-active { background: #35c775 !important; color: #08351d !important; border-color: #35c775 !important; }
.fd__tab--lux { border-color: #c6a15b !important; color: #c6a15b !important; display: inline-flex; align-items: center; gap: 6px; }
.fd__tab--lux.is-active { background: #c6a15b !important; color: #1a1206 !important; }
.fd__tab--lux .svlxnav__d { width: 11px; height: 9px; fill: currentColor; }
.fd__panel { display: none; }
.fd__panel.is-active { display: block; }
.fd__grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2,auto); grid-auto-columns: 40%; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; }
@media (min-width: 600px) { .fd__grid { grid-auto-flow: row; grid-template-rows: auto; grid-auto-columns: auto; grid-template-columns: repeat(3,1fr); overflow: visible; } }
@media (min-width: 900px) { .fd__grid { grid-template-columns: repeat(5,1fr); gap: 14px; } }
@media (min-width: 1200px) { .fd__grid { grid-template-columns: repeat(6,1fr); } }
.fd__card { position: relative; border: 1px solid #ece7dc; border-radius: 14px; padding: 10px; background: #fff; display: flex; flex-direction: column; scroll-snap-align: start; }
.fd__imgwrap { display: flex; align-items: center; justify-content: center; background: #f7f5f0; border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; }
.fd__imgwrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fd__share-btn { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #e6e1d6; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #15233f; box-shadow: 0 3px 9px -3px rgba(12,20,38,.3); padding: 0; }
.fd__share-btn svg { width: 16px; height: 16px; display: block; }
.fd__share-btn:hover { background: #fdf4e3; border-color: #f2ad44; }
.fd__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: #15233f; line-height: 1.25; margin: 10px 0 0; text-decoration: none; font-weight: 500; min-height: 33px; }
.fd__title:hover { color: #000; }
.fd__price { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 9px; }
.fd__now { font-size: 15px; font-weight: 800; color: #15233f; }
.fd__was { font-size: 12px; color: #9aa0aa; text-decoration: line-through; }
.fd__qty { display: flex; align-items: center; border: 1px solid #e2ddd2; border-radius: 999px; overflow: hidden; }
.fd__qty button { width: 36px; height: 38px; border: 0; background: none; font-size: 18px; line-height: 1; color: #42495a; cursor: pointer; }
.fd__qty button:hover { background: #f7f5f0; }
.fd__qval { flex: 1; text-align: center; font-size: 14px; font-weight: 700; color: #15233f; }
.fd__add { background: #f2ad44; color: #0c1426; font-weight: 700; font-size: 13px; text-align: center; padding: 10px 8px; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s ease; text-decoration: none; white-space: nowrap; }
.fd__add:hover { background: #ffc163; }
.fd__add[disabled] { opacity: .7; cursor: default; }
.fd__add--sold { background: #efece6; color: #9a968d; }
.fd__viewall { display: inline-block; margin-top: 16px; font-size: 13.5px; color: var(--sv-text); font-weight: 600; text-decoration: none; }
.fd__viewall:hover { text-decoration: underline; }
.fd__buy { margin-top: auto; display: flex; flex-direction: column; }
.fd__opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fd__opt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd__optlbl { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: #8a8f98; font-weight: 600; padding-left: 2px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd__seli { position: relative; display: block; }
.fd__sel { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 12px; color: #15233f; background: #fff; border: 1px solid #d8dbe0; border-radius: 9px; padding: 8px 24px 8px 10px; line-height: 1.15; cursor: pointer; }
.fd__sel:focus { outline: none; border-color: #f2ad44; }
.fd__selc { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #9aa0aa; font-size: 11px; pointer-events: none; }
@media (min-width: 600px) { .fd__opts[data-multi] { flex-direction: row; align-items: flex-end; } .fd__opts[data-multi] .fd__opt:first-child { flex: 1.4; } }
.fd__atcrow { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 600px) { .fd__atcrow { flex-direction: row; align-items: stretch; gap: 7px; } .fd__atcrow .fd__add { flex: 1; } .fd__atcrow .fd__qty { flex: none; } .fd__atcrow .fd__qval { flex: 0 0 26px; } }
.fd__sel:disabled { color: #15233f; -webkit-text-fill-color: #15233f; opacity: 1; background: #f4f3ee; cursor: default; }
.fd__sel:disabled + .fd__selc { opacity: .4; }
.fd__tags { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.fd__tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: 5px 8px; border-radius: 7px; box-shadow: 0 1px 4px rgba(12,20,38,.22); }
.fd__tag--salt { background: #15233f; color: #fff; }
.fd__tag--free { background: #f2ad44; color: #0c1426; }
.fd__tag--iced { background: #2E9BD6; color: #fff; }
.fd__tag--nf { background: #35c775; color: #08351d; }
.fd__tag--save, .fd__tag--bogo, .fd__tag--preorder { background: #e11d48; color: #fff; }
.fd__share { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; }
.fd__share[hidden] { display: none; }
.fd__share-bg { position: absolute; inset: 0; background: rgba(12,20,38,.55); }
.fd__share-sheet { position: relative; background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 460px; padding: 18px 18px 28px; box-shadow: 0 -12px 44px -12px rgba(0,0,0,.35); }
@media (min-width: 600px) { .fd__share { align-items: center; } .fd__share-sheet { border-radius: 20px; } }
.fd__share-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fd__share-title { font-size: 16px; font-weight: 800; color: #15233f; }
.fd__share-x { border: 0; background: none; font-size: 26px; line-height: 1; color: #7a8090; cursor: pointer; padding: 0 4px; }
.fd__share-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px 8px; }
.fd__sh { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: #42495a; text-decoration: none; background: none; border: 0; cursor: pointer; }
.fd__ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.fd__ic svg { width: 25px; height: 25px; display: block; }

/* ---- Starter feature (sv-starter-feature) ---- */
.svsf { max-width: 1400px; margin: 0 auto; padding: 8px 20px 20px; }
/* Adaptive billboard (0.19.0): white card by day, navy gradient by night. */
.svsf__card { position: relative; overflow: hidden; border-radius: 16px; padding: 26px 30px; background: var(--sv-panel-bg); border: 1px solid var(--sv-panel-border); box-shadow: var(--sv-panel-shadow); display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: center; }

/* LEFT: product image + Save badge */
.svsf__art { position: relative; display: flex; align-items: center; justify-content: center; }
.svsf__img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.svsf__savebadge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #f2ad44; color: #0c1426; font-size: 13px; font-weight: 800; padding: 6px 13px; border-radius: 999px; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* RIGHT: details */
.svsf__body { min-width: 0; }
.svsf__flash { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; background: #e11d48; color: #fff; font-weight: 800; border-radius: 999px; padding: 6px 13px; margin-bottom: 12px; }
.svsf__h { font-size: clamp(23px,3vw,32px); font-weight: 800; color: var(--sv-panel-text); margin: 0 0 6px; line-height: 1.12; }
.svsf__maker { font-size: 14px; color: var(--sv-panel-muted); margin: 0 0 14px; }
.svsf__pricerow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.svsf__now { font-size: 30px; font-weight: 800; color: var(--sv-panel-price); line-height: 1; }
.svsf__now .amount { color: inherit; }
.svsf__was { font-size: 16px; color: var(--sv-panel-muted); text-decoration: line-through; }
.svsf__was .amount { color: inherit; }
.svsf__save { background: #f2ad44; color: #0c1426; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; letter-spacing: .03em; }
.svsf__feats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svsf__feats li { font-size: 12px; color: var(--sv-panel-text); background: rgba(242,173,68,.10); border: 1px solid rgba(242,173,68,.35); border-radius: 999px; padding: 6px 13px; }

/* Flavour swatches */
.svsf__pick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-panel-muted); font-weight: 700; margin: 0 0 10px; }
.svsf__swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.svsf__sw { background: transparent; border: 0; padding: 0; cursor: pointer; width: 66px; text-align: center; }
.svsf__swimg { display: block; width: 66px; height: 66px; border-radius: 12px; overflow: hidden; border: 2px solid var(--sv-panel-line); background: #fff; transition: border-color .15s ease; }
.svsf__swimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svsf__sw:hover .svsf__swimg { border-color: rgba(242,173,68,.6); }
.svsf__sw.is-active .svsf__swimg { border-color: #f2ad44; }
.svsf__swlbl { display: block; font-size: 11px; color: var(--sv-panel-muted); margin-top: 6px; line-height: 1.25; }
.svsf__sw--sold { opacity: .4; cursor: not-allowed; }
.svsf__sw--sold:hover .svsf__swimg { border-color: var(--sv-panel-line); }

/* Buy row */
.svsf__buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.svsf__qty { display: inline-flex; align-items: center; border: 1px solid var(--sv-panel-line); border-radius: 999px; overflow: hidden; }
.svsf__qminus, .svsf__qplus { background: transparent; border: 0; color: var(--sv-panel-text); width: 38px; height: 42px; font-size: 18px; line-height: 1; cursor: pointer; }
.svsf__qminus:hover, .svsf__qplus:hover { background: var(--sv-panel-soft); }
.svsf__qval { min-width: 26px; text-align: center; color: var(--sv-panel-text); font-weight: 700; }
.svsf__add { background: #f2ad44; color: #0c1426; font-weight: 800; font-size: 15px; padding: 12px 30px; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s ease; }
.svsf__add:hover { background: #ffc163; }
.svsf__cta { display: inline-block; background: #f2ad44; color: #0c1426; font-weight: 800; font-size: 15px; padding: 13px 28px; border-radius: 999px; text-decoration: none; transition: background .2s ease; }
.svsf__cta:hover { background: #ffc163; }

/* Compact mobile billboard (Shopify mobile parity, 0.23.3): image left,
   flavour list right as tappable pill rows, copy + price + buy full-width
   below — halves the section height vs the old full-width stack. */
@media (max-width: 780px) {
  .svsf__card { grid-template-columns: 45fr 55fr; gap: 10px 14px; padding: 18px 14px 16px; align-items: start; }
  .svsf__body { display: contents; }
  .svsf__flash { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-bottom: 2px; }
  .svsf__art { grid-column: 1; grid-row: 2; }
  .svsf__pick { display: none; }
  .svsf__swatches { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; max-height: 290px; overflow-y: auto; scrollbar-width: none; }
  .svsf__swatches::-webkit-scrollbar { display: none; }
  .svsf__sw { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--sv-panel-soft); border: 1px solid var(--sv-panel-line); border-radius: 10px; padding: 6px 8px; }
  .svsf__sw.is-active { border-color: #f2ad44; }
  .svsf__swimg { width: 40px !important; height: 40px !important; flex: none; border-radius: 8px; border-width: 1px; }
  .svsf__swlbl { margin: 0; font-size: 12px; line-height: 1.2; flex: 1; }
  .svsf__h { grid-column: 1 / -1; margin: 8px 0 2px; font-size: 21px; }
  .svsf__maker { grid-column: 1 / -1; margin: 0 0 6px; font-size: 13px; }
  .svsf__pricerow { grid-column: 1 / -1; margin: 0 0 8px; }
  .svsf__now { font-size: 26px; }
  .svsf__feats { display: none; }
  .svsf__buy { grid-column: 1 / -1; flex-wrap: nowrap; gap: 10px; }
  .svsf__add { flex: 1; min-width: 0; padding: 12px 16px; }
  .svsf__cta { grid-column: 1 / -1; text-align: center; }
}

/* Deal-card scroller: hide the scrollbar on touch widths (Shopify does) and
   size cards ~2-up like the Shopify mobile grid */
@media (max-width: 820px) {
  .fd__grid { scrollbar-width: none; grid-auto-columns: 46%; }
  .fd__grid::-webkit-scrollbar { display: none; }
}

/* ---- Nicotine-free band (sv-nicotine-band) ---- */
.svnfb { padding: 10px 0; }
.svnfb__in { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
/* Adaptive (0.19.1): soft mint by day, deep green by night — still "the green corner". */
.svnfb__band { background: var(--sv-nfband-bg); border: 1.5px solid var(--sv-nfband-border); border-radius: 16px; padding: 26px; display: grid; grid-template-columns: 1.05fr 1.2fr; gap: 26px; align-items: center; }
.svnfb__eye { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sv-nfband-eye); margin: 0 0 8px; }
.svnfb__h { font-size: 27px; font-weight: 600; color: var(--sv-nfband-h); margin: 0 0 8px; line-height: 1.12; }
.svnfb__sub { font-size: 14px; color: var(--sv-nfband-sub); line-height: 1.55; margin: 0 0 16px; }
.svnfb__btn { display: inline-block; background: var(--sv-nfband-btn-bg); color: var(--sv-nfband-btn-tx); border-radius: 8px; padding: 11px 18px; font-size: 13px; font-weight: 600; text-decoration: none; }
.svnfb__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.svnfb__tile { background: var(--sv-nfband-tile-bg); border: 1px solid var(--sv-nfband-tile-border); border-radius: 12px; padding: 18px 10px; text-align: center; text-decoration: none; display: block; }
.svnfb__tile:hover { border-color: var(--sv-nfband-btn-bg); }
.svnfb__t0 { font-size: 18px; font-weight: 600; color: var(--sv-nfband-t0); line-height: 1.15; }
.svnfb__tt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-nfband-tt); margin-top: 7px; }
@media (max-width: 760px) { .svnfb__band { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; } .svnfb__t0 { font-size: 16px; } }
/* 0.27.3 — Victor's pick "A" (proposal r6): at phone width the 3-across
   tiles become stacked full-width rows — name left, 0MG pill right,
   chevron — the 105px columns wrapped "E-Liquids" and misaligned the
   labels. Tablet/desktop keep the 3-up grid. The pill's green tint is the
   NF identity green (same family both modes; reads on white light tiles). */
@media (max-width: 560px) {
  .svnfb__tiles { display: flex; flex-direction: column; gap: 8px; }
  .svnfb__tile { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px; }
  .svnfb__t0 { font-size: 15px; }
  .svnfb__tt { margin: 0 0 0 auto; background: rgba(53,199,117,.15); border-radius: 999px; padding: 4px 10px; font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; }
  .svnfb__tile::after { content: '\203A'; font-weight: 800; font-size: 17px; line-height: 1; color: var(--sv-nfband-tt); }
}

/* ---- Shop hardware (sv-shop-hardware) ---- */
.svsh2 { max-width: 1400px; margin: 0 auto; padding: 24px 20px 44px; box-sizing: border-box; }
.svsh2 * { box-sizing: border-box; }
.svsh2__head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.svsh2__h { font-size: 26px; font-weight: 600; color: var(--sv-text); margin: 0; }
.svsh2__sub { font-size: 14px; color: var(--sv-text-muted); }
.svsh2__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.svsh2__tile { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 16px 18px; border-radius: 14px; text-decoration: none; border: 1px solid rgba(242,173,68,.30); background: radial-gradient(circle at 100% 0%,rgba(242,173,68,.12),rgba(255,255,255,0) 55%),var(--sv-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.svsh2__tile:hover { transform: translateY(-3px); border-color: #f2ad44; box-shadow: 0 10px 22px rgba(12,20,38,.10); }
.svsh2__wm { position: absolute; right: -12px; bottom: -16px; color: #f2ad44; opacity: .09; z-index: 0; line-height: 0; }
.svsh2__wmic { width: 100px; height: 100px; }
.svsh2__chip { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; color: #f2ad44; background: rgba(242,173,68,.14); border: 1px solid rgba(242,173,68,.32); }
.svsh2__ic { width: 24px; height: 24px; }
.svsh2__txt { position: relative; z-index: 1; min-width: 0; }
.svsh2__nm { display: block; color: var(--sv-text); font-weight: 600; font-size: 15px; line-height: 1.2; }
.svsh2__ds { display: block; color: var(--sv-text-muted); font-size: 12px; margin-top: 3px; }
.svsh2__go { position: relative; z-index: 1; margin-left: auto; flex: none; color: #f2ad44; line-height: 0; transition: transform .18s ease; }
.svsh2__go svg { width: 18px; height: 18px; }
.svsh2__tile:hover .svsh2__go { transform: translateX(3px); }
.svsh2__cta { display: flex; justify-content: center; margin-top: 26px; }
.svsh2__btn { display: inline-block; background: #f2ad44; color: #0c1426; font-size: 16px; font-weight: 600; text-decoration: none; padding: 15px 44px; border-radius: 8px; transition: background .15s ease; }
.svsh2__btn:hover { background: #e09935; }
@media (max-width: 1024px) { .svsh2__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svsh2__h { font-size: 22px; } .svsh2__grid { grid-template-columns: 1fr; } }

/* ---- Shop by brand wall (sv-shop-brands) ---- */
.svsb { max-width: 1400px; margin: 0 auto; padding: 40px 20px 24px; box-sizing: border-box; }
.svsb * { box-sizing: border-box; }
.svsb__head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.svsb__h2 { font-size: 26px; line-height: 1.2; margin: 0; color: var(--sv-text); font-weight: 600; }
.svsb__group { margin-top: 24px; }
.svsb__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a6a34; margin: 0 0 12px; }
.svsb__eyebrow .svsb__dia { display: inline-block; width: 11px; height: 9px; margin-right: 5px; vertical-align: -.5px; fill: #c6a15b; }
.svsb__eyebrow .svlxnav__t { letter-spacing: .1em; }
.svsb__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.svsb__tile { display: flex; align-items: center; justify-content: center; background: var(--sv-cream); border: 1px solid rgba(242,173,68,.30); border-radius: 12px; height: 92px; padding: 10px 14px; text-align: center; text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.svsb__tile:hover { border-color: #f2ad44; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(12,20,38,.08); }
.svsb__tile img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; display: block; }
.svsb__name { font-size: 15px; font-weight: 600; color: var(--sv-navy); letter-spacing: .01em; }
/* 0.27.7 — the Showcase CTA reads as its own BOX (Victor: it floated as bare
   text). Luxury-zone identity card: near-black + dashed gold, SAME in both
   modes — the previous dark override painted the border rgba(0,0,0,.07)
   (invisible on navy). */
.svsb__tile--app { background: #131318; border: 1.5px dashed rgba(198,161,91,.55); }
.svsb__tile--app:hover { border-color: #c6a15b; box-shadow: 0 6px 16px rgba(12,20,38,.18); }
.svsb__appname { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: #dcb974; display: inline-flex; align-items: center; gap: 7px; }
.svsb__appname .svsb__dia { margin-right: 0; vertical-align: -1px; width: 12px; height: 10px; display: inline-block; fill: #c6a15b; flex: none; }
/* Brand-wall tiles stay CREAM in dark mode so the (dark) brand logos read — matches the live site. */
html[data-sv-theme="dark"] .svsb__tile { background: var(--sv-cream); border-color: rgba(0,0,0,.07); }
html[data-sv-theme="dark"] .svsb__tile.svsb__tile--app { background: #131318; border-color: rgba(198,161,91,.55); }
html[data-sv-theme="dark"] .svsb__name { color: var(--sv-navy); }
@media (max-width: 1200px) { .svsb__grid { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 992px) { .svsb__grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 768px) { .svsb__h2 { font-size: 22px; } .svsb__grid { grid-template-columns: repeat(3,1fr); gap: 10px; } .svsb__tile { height: 78px; } .svsb__tile img { max-height: 50px; } }
@media (max-width: 480px) { .svsb__grid { grid-template-columns: repeat(2,1fr); } }
/* 0.27.4 — Victor's pick "A" (proposal r7): at phone width the brand wall
   collapses to labelled category bars (count + chevron, injected by
   sv-home.js); first group opens by default, open groups show 4 tiles +
   "Show all N". Desktop keeps the full wall — these spans are display:none
   outside 560px and the classes are inert there. */
.svsb__count, .svsb__chev, .svsb__more { display: none; }
@media (max-width: 560px) {
  .svsb__group { margin-top: 8px; border: 1px solid var(--sv-border); border-radius: 12px; overflow: hidden; }
  .svsb__eyebrow { display: flex; align-items: center; gap: 7px; margin: 0; padding: 13px 14px; background: var(--sv-bg-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .svsb__count { display: inline; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sv-text-muted); }
  .svsb__chev { display: inline-block; margin-left: auto; font-weight: 900; font-size: 15px; color: var(--sv-text-muted); transition: transform .18s ease; }
  .svsb__group.is-open .svsb__chev { transform: rotate(90deg); }
  .svsb__grid { display: none; padding: 10px; }
  .svsb__group.is-open .svsb__grid { display: grid; }
  .svsb__group:not(.is-full) .svsb__grid .svsb__tile:nth-child(n+5) { display: none; }
  .svsb__group.is-open .svsb__more { display: block; grid-column: 1 / -1; background: none; border: none; font: 700 12px var(--sv-font); color: #b98a2e; padding: 7px 0 3px; cursor: pointer; }
  html[data-sv-theme="dark"] .svsb__group.is-open .svsb__more { color: #f2c56b; }
}

/* ---- Why us (sv-why) ---- */
.svwhy { max-width: 1400px; margin: 0 auto; padding: 34px 20px; box-sizing: border-box; }
.svwhy * { box-sizing: border-box; }
.svwhy__head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.svwhy__h { font-size: 24px; font-weight: 600; color: var(--sv-text); margin: 0; }
.svwhy__lead { font-size: 15px; color: var(--sv-text-muted); line-height: 1.6; margin: 0 0 22px; max-width: 700px; }
.svwhy__feats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.svwhy__feat { display: flex; flex-direction: column; gap: 8px; background: radial-gradient(circle at 100% 0%,rgba(242,173,68,.10),rgba(255,255,255,0) 60%),var(--sv-card); border: 1px solid rgba(242,173,68,.30); border-radius: 13px; padding: 16px; }
.svwhy__ic { width: 25px; height: 25px; color: #f2ad44; }
.svwhy__feat b { color: var(--sv-text); font-size: 14px; font-weight: 600; line-height: 1.25; }
.svwhy__feat span { color: var(--sv-text-muted); font-size: 12.5px; line-height: 1.45; }
.svwhy__lbl { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a6a34; font-weight: 600; margin: 14px 0 9px; }
.svwhy__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.svwhy__chip { font-size: 13px; color: var(--sv-text); background: var(--sv-card); border: 1px solid rgba(242,173,68,.45); border-radius: 999px; padding: 7px 15px; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.svwhy__chip:hover { border-color: #f2ad44; background: rgba(242,173,68,.08); }
@media (max-width: 900px) { .svwhy__feats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svwhy__h { font-size: 21px; } }

/* ---- FAQ (sv-faq) ---- */
.svfaq { max-width: 1400px; margin: 0 auto; padding: 6px 20px 40px; box-sizing: border-box; }
.svfaq * { box-sizing: border-box; }
.svfaq__head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.svfaq__h { font-size: 24px; font-weight: 600; color: var(--sv-text); margin: 0; }
.svfaq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.svfaq__item { border: 1px solid var(--sv-border); border-radius: 11px; overflow: hidden; background: var(--sv-card); }
.svfaq__item.is-open { border-color: rgba(242,173,68,.55); }
.svfaq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--sv-text); text-align: left; font-family: inherit; }
.svfaq__pm { flex: none; width: 20px; height: 20px; position: relative; }
.svfaq__pm:before, .svfaq__pm:after { content: ''; position: absolute; background: #f2ad44; border-radius: 2px; }
.svfaq__pm:before { top: 9px; left: 2px; right: 2px; height: 2px; }
.svfaq__pm:after { left: 9px; top: 2px; bottom: 2px; width: 2px; transition: transform .2s ease; }
.svfaq__item.is-open .svfaq__pm:after { transform: scaleY(0); }
.svfaq__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.svfaq__a > div { padding: 0 18px 16px; color: var(--sv-text-muted); font-size: 14px; line-height: 1.65; }
.svfaq__item.is-open .svfaq__a { max-height: 340px; }

/* ---- Blogs (sv-blogs) ---- */
.svblg { max-width: 1400px; margin: 0 auto; padding: 30px 20px 44px; box-sizing: border-box; }
.svblg * { box-sizing: border-box; }
.svblg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.svblg__htitle { display: flex; align-items: center; gap: 12px; }
.svblg__h { font-size: 24px; font-weight: 600; color: var(--sv-text); margin: 0; }
.svblg__all { font-size: 13.5px; color: var(--sv-text); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(242,173,68,.6); white-space: nowrap; }
.svblg__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.svblg__card { display: flex; flex-direction: column; background: var(--sv-card); border: 1px solid var(--sv-border); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.svblg__card:hover { transform: translateY(-3px); border-color: rgba(242,173,68,.55); box-shadow: 0 12px 26px rgba(12,20,38,.10); }
.svblg__img { position: relative; display: block; aspect-ratio: 16/10; background: #0c1426; overflow: hidden; }
.svblg__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(12,20,38,.04),rgba(12,20,38,.32)); transition: opacity .25s ease; }
.svblg__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.88) brightness(.97); transition: transform .3s ease, filter .3s ease; }
.svblg__card:hover .svblg__img img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.svblg__card:hover .svblg__img::after { opacity: .5; }
.svblg__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; }
.svblg__date { font-size: 11.5px; color: var(--sv-text-muted); letter-spacing: .02em; }
.svblg__ti { font-size: 15px; font-weight: 600; color: var(--sv-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.svblg__rm { font-size: 13px; color: #b9791a; font-weight: 600; margin-top: 2px; }
@media (max-width: 900px) { .svblg__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svblg__grid { grid-template-columns: 1fr; } .svblg__h { font-size: 21px; } }

/* ============================================================
   DARK-MODE overrides — the Shopify sections hardcoded a light look and
   relied on sv-darkmode-2.liquid to patch dark. These do the same job.
   ============================================================ */
html[data-sv-theme="dark"] .fd__tab { background: var(--sv-card); border-color: var(--sv-border); color: var(--sv-text-muted); }
html[data-sv-theme="dark"] .fd__tab.is-active { background: #f2ad44; color: #3a2a06; }
html[data-sv-theme="dark"] .fd__card { background: var(--sv-card-grad); border-color: rgba(242,173,68,.28); }
html[data-sv-theme="dark"] .fd__imgwrap { background: #10192E; }
html[data-sv-theme="dark"] .fd__title, html[data-sv-theme="dark"] .fd__now, html[data-sv-theme="dark"] .fd__qval { color: var(--sv-text); }
html[data-sv-theme="dark"] .fd__share-btn { background: var(--sv-card); border-color: var(--sv-border); color: var(--sv-text); }
html[data-sv-theme="dark"] .fd__sel { background: #111A2E; color: var(--sv-text); border-color: var(--sv-border); }
html[data-sv-theme="dark"] .fd__sel:disabled { background: #141D33; color: var(--sv-text); -webkit-text-fill-color: var(--sv-text); }
html[data-sv-theme="dark"] .fd__qty { border-color: var(--sv-border); }
html[data-sv-theme="dark"] .fd__qty button { color: var(--sv-text-muted); }
html[data-sv-theme="dark"] .fd__qty button:hover { background: rgba(255,255,255,.08); }
html[data-sv-theme="dark"] .fd__add--sold { background: #26304C; color: #9BA4B8; }
html[data-sv-theme="dark"] .svsb__eyebrow, html[data-sv-theme="dark"] .svwhy__lbl { color: #dcb974; }