/* ═══════════════════════════════════════════════════════════════
   StrokeInk Shop — premium bento layer
   Sits on top of the global tokens in /assets/css/styles.css.
   Scope: /shop/ hub + product subpages.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --shop-ink:#0B0B0C;
  --shop-panel:#141416;
  --shop-panel-2:#1A1A1D;
  --shop-tile:#17171a;
  --shop-tile-2:#0f0f11;
  --shop-line:#26262B;
  --shop-line-2:#2c2c32;
  --shop-line-soft:#1E1E22;
  --shop-acc:#E8602C;
  --shop-acc-deep:#C44A1C;
  --shop-acc-glow:rgba(232,96,44,.18);
  --shop-acc-warm:#3a2a22;
  --shop-t1:#F4F3F1;
  --shop-t2:#B6B5B2;
  --shop-t3:#86857F;
  --shop-t4:#5A5A55;
  --shop-grn:#4CAF7D;
}

/* ---------- base ---------- */
.shop-body{
  background:var(--shop-ink);
  color:var(--shop-t1);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.shop-body .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.shop-body section{padding:0!important}

/* ---------- shared bits ---------- */
.sk-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--shop-acc);font-weight:500;
}
.sk-eyebrow::before{content:"";width:22px;height:1px;background:var(--shop-acc);opacity:.7}

/* glow button — dark fill, warm border, orange glow */
.btn-glow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--shop-t1);
  background:linear-gradient(160deg,#1c1c20,#121214);
  border:1px solid var(--shop-acc-warm);
  padding:11px 18px;border-radius:11px;
  box-shadow:0 0 0 1px rgba(232,96,44,.12), 0 6px 22px rgba(232,96,44,.18);
  transition:box-shadow .22s ease, transform .05s ease, border-color .22s ease;
  white-space:nowrap;
}
.btn-glow .arr{color:var(--shop-acc);transition:transform .2s ease}
.btn-glow.btn-sm{font-size:12.5px;padding:9px 15px;border-radius:10px;
  box-shadow:0 0 0 1px rgba(232,96,44,.1), 0 4px 16px rgba(232,96,44,.16)}
.bento-tile:hover .btn-glow{
  box-shadow:0 0 0 1px rgba(232,96,44,.3), 0 8px 30px rgba(232,96,44,.32);
  border-color:var(--shop-acc);
}
.bento-tile:hover .btn-glow .arr{transform:translateX(3px)}

/* ---------- hero ---------- */
.shop-body section.shop-hero{position:relative;padding:40px 0 56px!important;overflow:hidden}
.shop-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(68% 120% at 80% -10%, var(--shop-acc-glow) 0%, transparent 55%),
    radial-gradient(48% 90% at 6% 0%, rgba(76,175,125,.05) 0%, transparent 60%);
  pointer-events:none;
}
.shop-hero .wrap{position:relative}
.shop-hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,6.2vw,72px);line-height:1.02;letter-spacing:-.015em;
  margin:0;color:var(--shop-t1);
}
.shop-hero h1 em{font-style:italic;color:var(--shop-acc)}
.hero-split{
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end;
  margin:20px 0 0;
}
.shop-hero .lede{margin:0 0 6px;max-width:46ch;font-size:16px;line-height:1.6;color:var(--shop-t2)}

/* ---------- bento grid ---------- */
.shop-body section.catalog{padding:8px 0 80px!important}
.bento{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  grid-auto-rows:auto;gap:16px;
}
.bento-tile{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--shop-line-2);border-radius:18px;overflow:hidden;
  text-decoration:none;color:inherit;
  background:linear-gradient(160deg,var(--shop-panel-2),var(--shop-tile-2));
  padding:22px;min-height:170px;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.bento-tile,.bento-tile *{text-decoration:none!important}
.bento-tile:hover{border-color:var(--shop-acc);transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.bento-tile:focus-visible{outline:2px solid var(--shop-acc);outline-offset:3px}

/* hero tile spans 2 cols + 2 rows — image left, text right, image is the star */
.tile-hero{
  grid-column:span 2;grid-row:span 2;padding:0;min-height:420px;
  display:grid;grid-template-columns:1.15fr 1fr;
  background:
    radial-gradient(100% 80% at 80% 0%, var(--shop-acc-glow) 0%, transparent 55%),
    linear-gradient(160deg,var(--shop-tile),var(--shop-tile-2));
}
.tile-media{
  position:relative;
  background:radial-gradient(120% 90% at 50% 40%, #242429 0%, #141416 78%);
  display:grid;place-items:center;
  border-right:1px solid var(--shop-line-soft);
  min-height:420px;
}
.tile-eyebrow{
  position:absolute;top:16px;left:18px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--shop-acc);
}
.ph-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--shop-t4);border:1px dashed var(--shop-line-2);
  width:72%;aspect-ratio:1/1;display:grid;place-items:center;text-align:center;
  border-radius:14px;padding:0;
}
/* square image fills the media side */
.tile-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.tile-hero .tile-body{
  padding:36px 34px;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.tile-hero .tile-body h2{font-size:34px}
.tile-hero .tile-foot{margin-top:18px}
.tile-body{padding:24px 26px 26px}
.tile-body h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.02;color:var(--shop-acc);margin:0}
.tile-body p{font-size:13.5px;color:var(--shop-t2);margin:11px 0 18px;max-width:40ch;line-height:1.55}

/* small tiles internals */
.tile-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0}
.tile-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--shop-t3)}
.tile-badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--shop-acc);border:1px solid var(--shop-acc);padding:2px 7px;border-radius:5px;font-weight:600;
}
.tile-h{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--shop-acc);margin:10px 0 6px}
.tile-desc{font-size:12.5px;color:var(--shop-t2);line-height:1.45;margin:0}

/* foot rows */
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.tile-foot-split{align-items:center;gap:20px;margin-top:16px}
.tile-price{font-family:var(--mono);font-size:22px;color:var(--shop-t1);font-weight:500}
.tile-h ~ .tile-foot .tile-price,
.tile-foot-split .tile-price{font-size:16px}
.tile-price .amt{font-size:16px}
.tile-hero .tile-price{font-size:22px}
.tile-price .per{font-size:11px;color:var(--shop-t3);margin-left:1px}
.tile-price .from{color:var(--shop-t3);font-size:11px}
.price-block{display:flex;flex-direction:column;gap:3px}
.price-note{font-size:10.5px;color:var(--shop-acc)}

/* trust strip tile spans full width */
.bento-strip{
  grid-column:span 3;
  border:1px solid var(--shop-line-2);border-radius:18px;
  background:linear-gradient(160deg,var(--shop-panel-2),var(--shop-tile-2));
  padding:20px 24px;display:flex;gap:28px;flex-wrap:wrap;
}
.trust-item{flex:1;min-width:150px;display:flex;gap:11px;align-items:flex-start}
.trust-item svg{color:var(--shop-acc);margin-top:1px;flex-shrink:0}
.trust-item .ti-t{font-size:13px;color:var(--shop-t1);font-weight:600}
.trust-item .ti-d{font-size:12px;color:var(--shop-t3);margin-top:2px}

/* ---------- subpage shell ---------- */
.sp-back{
  display:inline-flex;align-items:center;gap:7px;margin:28px 0 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--shop-t3);
  text-decoration:none;transition:color .2s ease;
}
.sp-back:hover{color:var(--shop-acc)}
.sp-hero{display:grid;grid-template-columns:1.25fr .95fr;gap:48px;padding:32px 0 64px;align-items:start}
.sp-gallery{position:sticky;top:90px}
.sp-gal-main{
  aspect-ratio:4/3;border-radius:18px;border:1px solid var(--shop-line-2);
  background:radial-gradient(120% 100% at 50% 10%, #242429, #141416 74%);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;
  width:100%;padding:0;position:relative;
}
.sp-gal-main::after{
  content:"⤢";position:absolute;top:14px;right:16px;
  font-size:18px;color:var(--shop-t3);opacity:.7;
}
.sp-gal-main:hover::after{color:var(--shop-acc);opacity:1}
.sp-gal-main img{width:100%;height:100%;object-fit:cover}
.sp-gal-main .ph-label{font-size:13px}
.sp-gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.sp-thumb{
  aspect-ratio:1;border-radius:11px;border:1px solid var(--shop-line-2);
  background:var(--shop-panel-2);cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--shop-t4);
  display:grid;place-items:center;transition:border-color .2s ease, color .2s ease;text-align:center;padding:4px;
}
.sp-thumb:hover,.sp-thumb.active{border-color:var(--shop-acc);color:var(--shop-t2)}

/* Pro gallery — phone-framed app screenshots */
.sp-gallery-app .sp-gal-phone{
  aspect-ratio:auto;background:none;border:none;padding:0;
  display:flex;justify-content:center;
}
.sp-gallery-app .phone-shot{
  display:block;width:min(280px,80%);
  border-radius:30px;overflow:hidden;border:1px solid var(--shop-line-2);
  background:#0a0a0a;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.sp-gallery-app .phone-shot img{width:100%;height:auto;display:block;border-radius:24px}
.sp-gallery-app .sp-gal-phone::after{top:6px;right:calc(50% - 130px)}

/* Gallery lightbox */
.gal-lightbox{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;
  background:rgba(5,5,6,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:40px;
}
.gal-lightbox.open{display:flex}
.gal-lightbox .gl-stage{position:relative;width:min(86vmin,720px)}
.gal-lightbox .gl-main{
  width:100%;aspect-ratio:1/1;border-radius:20px;border:1px solid var(--shop-line-2);
  background:radial-gradient(120% 100% at 50% 10%, #242429, #141416 74%);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 0 1px rgba(232,96,44,.3),0 30px 80px rgba(0,0,0,.7);
}
.gal-lightbox .gl-main img{width:100%;height:100%;object-fit:cover}
.gal-lightbox .gl-main::after{display:none}
.gal-lightbox .gl-main .ph-label{font-size:14px}
.gal-lightbox .gl-close{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:var(--shop-tile);border:1px solid var(--shop-line-2);color:var(--shop-t1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.gal-lightbox .gl-close:hover{background:var(--shop-acc);border-color:var(--shop-acc);color:#fff}
/* Phone-shaped lightbox (Pro app screenshots) */
.gal-lightbox .gl-stage-phone{width:auto}
.gal-lightbox .gl-phone{
  height:min(88vh,820px);background:#0a0a0a;border:1px solid var(--shop-line-2);
  border-radius:34px;padding:8px;box-shadow:0 0 0 1px rgba(232,96,44,.3),0 30px 80px rgba(0,0,0,.7);
}
.gal-lightbox .gl-phone img{height:100%;width:auto;display:block;border-radius:26px}

/* Pro app showcase — phone left, clickable tab list right */
/* Pro app showcase — phone left, clickable tab list right */
.pro-showcase{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;margin-top:34px}
.pro-stage{display:flex;justify-content:center}
.pro-phone{
  position:relative;width:100%;max-width:280px;cursor:pointer;
  background:#0a0a0a;border:1px solid var(--shop-line-2);border-radius:32px;padding:7px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);transition:border-color .2s ease;
}
.pro-phone:hover{border-color:var(--shop-acc)}
.pro-phone img{display:block;width:100%;height:auto;border-radius:26px}
.pro-expand{
  position:absolute;top:16px;right:18px;z-index:2;font-size:17px;color:var(--shop-t3);
  opacity:.75;pointer-events:none;
}
.pro-phone:hover .pro-expand{color:var(--shop-acc);opacity:1}
.pro-tabs{display:flex;flex-direction:column;gap:10px}
.pro-tab{
  text-align:left;background:var(--shop-panel-2);border:1px solid var(--shop-line-2);
  border-radius:14px;padding:16px 20px;cursor:pointer;transition:border-color .2s ease,background .2s ease;
  display:flex;flex-direction:column;gap:3px;
}
.pro-tab:hover{border-color:var(--shop-line)}
.pro-tab.active{border-color:var(--shop-acc);background:rgba(232,96,44,.06)}
.pro-tab-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--shop-acc)}
.pro-tab-title{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--shop-t1);line-height:1.15}
.pro-tab-desc{font-size:13px;line-height:1.5;color:var(--shop-t2);margin-top:4px;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease}
.pro-tab.active .pro-tab-desc{max-height:120px;opacity:1;margin-top:6px}
@media (max-width:760px){
  .pro-showcase{grid-template-columns:1fr;gap:28px}
  .pro-stage{order:-1}
}

/* Free vs Pro comparison table */
.plan-compare-head{margin-top:56px;margin-bottom:18px}
.plan-compare-head .pc-subtitle{
  font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.6vw,30px);
  line-height:1.1;letter-spacing:-.01em;color:var(--shop-t1);margin:12px 0 0;
}
.plan-compare{border:1px solid var(--shop-line-2);border-radius:16px;overflow:hidden}
.pc-row{display:grid;grid-template-columns:1fr 120px 120px;align-items:center;
  padding:14px 22px;border-top:1px solid var(--shop-line-soft);gap:12px}
.pc-row:first-child{border-top:none}
.pc-head{background:var(--shop-panel-2);padding-top:16px;padding-bottom:16px}
.pc-head .pc-feat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--shop-t3)}
.pc-head .pc-free,.pc-head .pc-pro{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.pc-head .pc-free{color:var(--shop-t3)}
.pc-head .pc-pro{color:var(--shop-acc)}
.pc-feat{font-size:14px;color:var(--shop-t1);line-height:1.4}
.pc-free,.pc-pro{text-align:center;font-size:13px;color:var(--shop-t2)}
.pc-pro{font-weight:600}
.pc-yes{color:var(--shop-grn,#4CAF7D)}
.pc-hi{color:var(--shop-acc);font-weight:700}
.pc-no{color:var(--shop-t4)}
.pc-row:not(.pc-head) .pc-pro{background:linear-gradient(180deg,rgba(232,96,44,.05),transparent)}
@media (max-width:560px){
  .pc-row{grid-template-columns:1fr 64px 64px;padding:12px 14px;gap:8px}
  .pc-feat{font-size:12.5px}
  .pc-free,.pc-pro{font-size:11.5px}
}

.sp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--shop-acc)}
.sp-buy h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.4vw,52px);line-height:1.04;letter-spacing:-.015em;margin:14px 0 0}
.sp-buy h1 em{font-style:italic;color:var(--shop-acc)}
.sp-sub{font-size:16px;line-height:1.6;color:var(--shop-t2);margin:18px 0 0;max-width:48ch}
/* Buy row: price + (qty) + CTA on one line */
/* Bundle option (add Pro) */
.sp-bundle{
  display:flex;align-items:center;gap:14px;margin:24px 0 0;cursor:pointer;
  border:1px solid var(--shop-line-2);border-radius:14px;padding:16px 18px;
  transition:border-color .2s ease,background .2s ease;
}
.sp-bundle:hover{border-color:var(--shop-line)}
.sp-bundle input{position:absolute;opacity:0;width:0;height:0}
.sp-bundle-box{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--shop-line-2);
  display:grid;place-items:center;transition:background .2s ease,border-color .2s ease;
}
.sp-bundle-box::after{
  content:"";width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s ease;margin-top:-2px;
}
.sp-bundle input:checked + .sp-bundle-box{background:var(--shop-acc);border-color:var(--shop-acc)}
.sp-bundle input:checked + .sp-bundle-box::after{transform:rotate(-45deg) scale(1)}
.sp-bundle input:focus-visible + .sp-bundle-box{box-shadow:0 0 0 3px rgba(232,96,44,.3)}
.sp-bundle-text{display:flex;flex-direction:column;gap:2px;flex:1}
.sp-bundle-title{font-size:14px;font-weight:600;color:var(--shop-t1)}
.sp-bundle-sub{font-size:12px;color:var(--shop-t3);line-height:1.4}
.sp-bundle-price{font-family:var(--mono);font-size:15px;color:var(--shop-acc);font-weight:600;white-space:nowrap}
.sp-bundle:has(input:checked){border-color:var(--shop-acc);background:rgba(232,96,44,.05)}

.sp-buyrow{display:flex;align-items:center;gap:14px;margin:26px 0 0;flex-wrap:wrap}
.sp-price{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--shop-t1);letter-spacing:-.01em;white-space:nowrap}
.sp-price .per{font-size:16px;color:var(--shop-t3)}
.sp-price .was{font-size:19px;color:var(--shop-t4);text-decoration:line-through;font-weight:400}
.sp-price-note{font-size:12.5px;color:var(--shop-acc)}
/* Waitlist link centered below the buy row */
.sp-waitlist{display:flex;justify-content:center;width:100%;margin:16px 0 0;border:none!important;padding:0!important;color:var(--shop-acc)!important;font-weight:600}
.sp-waitlist:hover{color:var(--shop-t1)!important}
.sp-points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
.sp-points li{display:flex;gap:11px;font-size:14.5px;color:var(--shop-t2);line-height:1.5}
.sp-points li svg{flex-shrink:0;margin-top:3px;color:var(--shop-acc)}

.sp-buyrow .sp-cta{flex:1;min-width:160px;margin:0}
.sp-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15.5px;color:var(--shop-t1);
  background:linear-gradient(160deg,#1c1c20,#121214);
  border:1px solid var(--shop-acc-warm);
  padding:15px 28px;border-radius:13px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(232,96,44,.14), 0 6px 24px rgba(232,96,44,.2);
  transition:box-shadow .22s ease, transform .05s ease, border-color .22s ease;
}
.sp-cta .arr{color:var(--shop-acc);transition:transform .2s ease}
.sp-cta:hover{box-shadow:0 0 0 1px rgba(232,96,44,.34), 0 8px 32px rgba(232,96,44,.36);border-color:var(--shop-acc)}
.sp-cta:hover .arr{transform:translateX(3px)}
.sp-cta:active{transform:translateY(1px)}
.sp-cta.is-soon{background:var(--shop-panel-2);color:var(--shop-t3);border:1px solid var(--shop-line);box-shadow:none;cursor:not-allowed}
.sp-cta-ghost{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--shop-t1);padding:15px 22px;border-radius:13px;border:1px solid var(--shop-line-2);text-decoration:none;transition:border-color .2s ease}
.sp-cta-ghost:hover{border-color:var(--shop-acc)}

.sp-qty{display:inline-flex;align-items:center;border:1px solid var(--shop-line-2);border-radius:13px;overflow:hidden}
.sp-qty button{width:44px;height:52px;background:var(--shop-panel-2);color:var(--shop-t1);font-size:18px;cursor:pointer;border:none}
.sp-qty button:hover{background:var(--shop-line)}
.sp-qty span{width:48px;text-align:center;font-family:var(--mono);font-size:15px}

.sp-trust{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:24px 0 0;padding-top:22px;border-top:1px solid var(--shop-line-soft)}
.sp-trust span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--shop-t3);white-space:nowrap}
.sp-trust svg{color:var(--shop-t4);flex-shrink:0}

/* ---------- subpage content sections ---------- */
.shop-body section.sp-section{padding:72px 0!important;border-top:1px solid var(--shop-line-soft)}

/* What it is — text + scorecard image side by side */
.whatis-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.whatis-text .lead{margin-top:18px}
.whatis-media{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--shop-line-2)}
.whatis-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* Orange→black gradient overlay to integrate with the site palette */
.whatis-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(232,96,44,.22) 0%, transparent 42%),
    linear-gradient(0deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.10) 46%, transparent 70%);
}
.whatis-cap{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--shop-t2);
}
@media (max-width:760px){
  .whatis-grid{grid-template-columns:1fr;gap:28px}
}
.sp-section h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,38px);line-height:1.08;letter-spacing:-.01em;margin:14px 0 0;max-width:28ch}
.sp-section .lead{font-size:16px;line-height:1.65;color:var(--shop-t2);margin:18px 0 0;max-width:60ch}

.spec-table{margin:34px 0 0;border-top:1px solid var(--shop-line-2)}
.spec-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--shop-line-soft)}
.spec-row .sk{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--shop-t3)}
.spec-row .sv{font-size:14.5px;color:var(--shop-t1);line-height:1.5}

.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:34px 0 0}
.fcard{background:var(--shop-panel-2);border:1px solid var(--shop-line-2);border-radius:16px;padding:24px}
.fcard .fc-media{
  margin:-24px -24px 18px;border-radius:16px 16px 0 0;
  aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 40%,#242429 0%,#141416 78%);
  display:grid;place-items:center;border-bottom:1px solid var(--shop-line-soft);overflow:hidden;
}
.fcard .fc-media img{width:100%;height:100%;object-fit:cover}
.fcard .fc-media .ph-label{
  width:auto;aspect-ratio:auto;border:1px dashed var(--shop-line-2);border-radius:9px;padding:10px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--shop-t4);text-align:center;
}
.fcard .fc-n{font-family:var(--mono);font-size:11px;color:var(--shop-acc);letter-spacing:.1em}
.fcard h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:10px 0 8px;color:var(--shop-t1)}
.fcard p{font-size:13.5px;line-height:1.55;color:var(--shop-t2);margin:0}

/* ---------- footer ---------- */
.shop-foot{border-top:1px solid var(--shop-line-soft);padding:40px 0 56px;margin-top:20px}
.shop-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.shop-foot .ff-links{display:flex;gap:20px;flex-wrap:wrap}
.shop-foot a{font-size:13px;color:var(--shop-t3);text-decoration:none;transition:color .2s ease}
.shop-foot a:hover{color:var(--shop-acc)}
.shop-foot .ff-copy{font-family:var(--mono);font-size:11.5px;color:var(--shop-t4)}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .bento{grid-template-columns:1fr 1fr}
  .hero-split{grid-template-columns:1fr;gap:22px;align-items:start}
  .shop-hero .lede{padding-bottom:0}
  .tile-hero{grid-column:span 2;grid-row:auto;grid-template-columns:1fr;min-height:0}
  .tile-media{border-right:none;border-bottom:1px solid var(--shop-line-soft);min-height:320px}
  .tile-hero .tile-body{padding:28px 26px}
  .bento-strip{grid-column:span 2}
  .sp-hero{grid-template-columns:1fr;gap:32px}
  .sp-gallery{position:static}
  .feature-grid{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:4px}
}
@media (max-width:560px){
  .shop-body .wrap{padding:0 18px}
  .shop-body section.shop-hero{padding:32px 0 40px!important}
  .bento{grid-template-columns:1fr}
  .tile-hero,.bento-strip{grid-column:span 1}
  .bento-strip{flex-direction:column;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}