/* ============================================================================
   Deliora storefront skin — "Paper & Ink" editorial (brand skin ONLY).
   The original ownware.io design system: paper background, ink typography,
   teal accents, white cards with hairline borders, Space Mono for eyebrows /
   kickers / prices, generous open whitespace. No glass, no mesh gradients,
   no blur filters anywhere in this file.

   Loaded ONLY by views/layout_store.php (public storefront). The admin console
   (views/layout.php) never links this file, and every rule here is scoped under
   body.storefront. NO rule in this file targets the admin shell or data-dense
   surfaces.

   Fonts: Inter (variable, latin) + Space Mono (latin), self-hosted woff2 under
   assets/fonts/ — no third-party font requests. Both are licensed under the
   SIL Open Font License and ship with the product.

   Per-product theme_color: the inline --accent custom property (validated by
   Storefront::themeStyle) is used ONLY as a subtle card top-border accent.
   Page-level accents stay on the brand teal — body text always ink/sub.
   ========================================================================= */

/* ---------- 0. self-hosted fonts (latin subsets, font-display swap) ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 1. tokens + page scope ---------- */
html:has(body.storefront){background:#F6F7F6}
body.storefront{
  /* the original ownware.io palette, verbatim */
  --paper:#F6F7F6; --ink:#111413; --sub:#4b524f; --line:#e2e5e2;
  --accent:#0f766e; --accent-dark:#0b544e; --accent-deep:#0b544e;
  --accent-soft:#e4efed; --card:#ffffff;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  scroll-behavior:smooth;
}
body.storefront h1,body.storefront h2,body.storefront h3,body.storefront h4{color:var(--ink)}
body.storefront a{color:var(--accent);text-decoration:none}
body.storefront a:hover{color:var(--accent-dark)}
body.storefront .muted{color:var(--sub)}
body.storefront label{color:#374151}
body.storefront hr{border-top-color:var(--line)}
body.storefront .store{max-width:1080px;padding:0 24px 0}
body.storefront .mono{font-family:var(--mono)}

/* ---------- 2. brand mark — dark rounded square, teal inner square ---------- */
body.storefront .mark{
  width:22px;height:22px;border:2.5px solid var(--ink);border-radius:6px;
  position:relative;flex:none;display:inline-block;vertical-align:-4px;background:none;
}
body.storefront .mark::after{content:"";position:absolute;inset:4px;background:var(--accent);border-radius:2px}

/* ---------- 3. nav bar ---------- */
body.storefront .storebar{
  background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:20px 0;margin:0;
}
body.storefront .storebar .brand{
  color:var(--ink);font-weight:700;font-size:19px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;
}
body.storefront .storebar nav{gap:26px}
body.storefront .storebar nav a{color:var(--sub);font-weight:600;font-size:14.5px}
body.storefront .storebar nav a:hover{color:var(--ink);text-decoration:none}

/* ---------- 4. type accents: eyebrow / kicker / section numbers ---------- */
body.storefront .eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}
body.storefront .kicker{
  font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sub);margin-bottom:14px;
  display:flex;align-items:baseline;gap:12px;
}
body.storefront .kicker .idx{color:var(--accent);font-weight:700}

/* ---------- 5. HOME HERO — open on the paper, no card, no panel ---------- */
body.storefront .hero-open{
  padding:76px 0 64px;border-bottom:1px solid var(--line);
}
body.storefront .hero-open .hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:1000px){
  /* right column fixed for the trio stage; left column sized so the h1 sits on
     exactly TWO lines at desktop widths ("Business tools you / own, not rent.") */
  body.storefront .hero-open .hero-grid.has-shot{grid-template-columns:minmax(0,1fr) 505px}
}
body.storefront .hero-open h1{
  font-size:clamp(36px,4.9vw,50px);font-weight:800;line-height:1.06;
  letter-spacing:-.03em;margin:0;max-width:19ch;
}
body.storefront .hero-open h1 em,body.storefront h1 em{font-style:normal;color:var(--accent)}
body.storefront .hero-open .lead{
  font-size:clamp(16.5px,2vw,19px);color:var(--sub);max-width:52ch;margin:24px 0 32px;
}
body.storefront .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* hero product shot — the old site's .showcase treatment */
body.storefront .showcase{
  margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--card);box-shadow:0 30px 60px -30px rgba(16,24,40,.28);
}
body.storefront .showcase img{width:100%;display:block}
body.storefront .showcase figcaption{
  padding:10px 16px;font-size:12.5px;color:var(--sub);
  border-top:1px solid var(--line);font-family:var(--mono);
}
/* hero trio — three overlapping framed screenshots, staggered with slight rotation.
   Same white frame / hairline / soft shadow language as .showcase; hidden <1000px. */
body.storefront .hero-trio{display:none}
@media(min-width:1000px){
  body.storefront .hero-trio{display:block;max-width:505px}
  body.storefront .trio-stage{position:relative;aspect-ratio:505/430}
  body.storefront .trio-shot{
    position:absolute;margin:0;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:6px;box-shadow:0 30px 60px -30px rgba(16,24,40,.28);
  }
  body.storefront .trio-shot img{display:block;width:100%;border-radius:8px;border:1px solid var(--line)}
  body.storefront .trio-shot.t1{width:62%;left:0;top:24px;transform:rotate(-2deg);z-index:1}
  body.storefront .trio-shot.t2{width:58%;right:0;top:0;transform:rotate(1.5deg);z-index:2}
  body.storefront .trio-shot.t3{width:66%;left:12%;bottom:34px;z-index:3}
  body.storefront .trio-cap{
    margin:12px 0 0;text-align:center;font-family:var(--mono);
    font-size:12.5px;letter-spacing:.03em;color:var(--sub);
  }
}

/* ---------- 6. trust strip under the hero ---------- */
body.storefront .trust-strip{
  display:flex;gap:34px;flex-wrap:wrap;padding:24px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--sub);
}
body.storefront .trust-strip b{color:var(--ink);font-weight:600}
body.storefront .trust-strip .mono{color:var(--accent);font-family:var(--mono);font-size:13.5px}

/* ---------- 7. open editorial sections ---------- */
body.storefront .nsec{
  background:none;border:none;border-radius:0;box-shadow:none;
  margin:0;padding:64px 0;border-bottom:1px solid var(--line);
}
body.storefront .nsec h2,body.storefront .closer h2{
  font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.02em;
  line-height:1.15;margin:0;max-width:22ch;
}
body.storefront .sec-lead{color:var(--sub);max-width:56ch;margin:16px 0 0;font-size:16.5px}

/* rent-vs-own: the two columns earn their cards */
body.storefront .compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
@media(max-width:640px){body.storefront .compare{grid-template-columns:1fr}}
body.storefront .compare .col{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px;box-shadow:0 1px 2px rgba(16,24,40,.04);
}
body.storefront .compare .col h3{margin:0 0 16px;font-size:17px;font-weight:700}
body.storefront .compare .col ul{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
  font-size:15px;color:var(--sub);
}
body.storefront .compare .col.own li::before{content:"—  ";color:var(--accent);font-weight:700}
body.storefront .compare .col.rent li::before{content:"×  ";color:#b91c1c;font-weight:700}
body.storefront .compare .col.own{border-color:var(--accent);box-shadow:0 1px 0 var(--accent)}

/* three pillars — open columns, no boxes */
body.storefront .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}
@media(max-width:720px){body.storefront .grid3{grid-template-columns:1fr}}
body.storefront .feat{background:none;border:none;box-shadow:none;padding:0}
body.storefront .feat h3{margin:0 0 8px;font-size:17px;font-weight:700}
body.storefront .feat p{margin:0;color:var(--sub);font-size:14.5px}

/* how-it-works: three numbered open steps */
body.storefront .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}
@media(max-width:720px){body.storefront .steps{grid-template-columns:1fr}}
body.storefront .step .n{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);margin-bottom:10px;
}
body.storefront .step h3{margin:0 0 8px;font-size:17px;font-weight:700}
body.storefront .step p{margin:0;color:var(--sub);font-size:14.5px}

/* featured showcase carousel: scroll-snap track + hairline arrow buttons.
   Works without JS (swipe/scroll); the arrows just move the scroll position. */
body.storefront .car{position:relative;margin-top:40px}
body.storefront .car-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 18px;scrollbar-width:thin;scrollbar-color:#cbd2ce transparent;
}
body.storefront .slide{flex:0 0 min(720px,88%);scroll-snap-align:start;min-width:0}
body.storefront .slide .showcase img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
body.storefront .slide-meta{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-top:14px;flex-wrap:wrap;
}
body.storefront .slide-meta h3{margin:0 0 4px;font-size:1.12rem;font-weight:700}
body.storefront .slide-meta h3 a{color:var(--ink)}
body.storefront .slide-meta .tag2{margin:0;color:var(--sub);font-size:.9rem;max-width:46ch}
body.storefront .slide-cta{display:flex;align-items:center;gap:14px;flex:none;padding-top:2px}
body.storefront .slide-cta .price{font-family:var(--mono);font-weight:700;color:var(--ink)}
body.storefront .slide-cta .price small{color:var(--sub);font-weight:400;font-family:'Inter',-apple-system,sans-serif}
body.storefront .car-btn{
  position:absolute;top:34%;width:42px;height:42px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-size:17px;line-height:1;cursor:pointer;box-shadow:0 10px 24px -10px rgba(16,24,40,.28);
  transition:border-color .15s ease,color .15s ease;
}
body.storefront .car-btn:hover{border-color:var(--ink)}
body.storefront .car-btn.prev{left:-10px}
body.storefront .car-btn.next{right:-10px}
@media(max-width:640px){body.storefront .car-btn{display:none}}

/* curated catalog sections */
body.storefront .cat-sec{margin-top:52px}
body.storefront .cat-sec:first-of-type{margin-top:44px}
body.storefront .cat-h{
  font-size:clamp(20px,2.4vw,24px);font-weight:700;letter-spacing:-.02em;margin:0 0 6px;
}
body.storefront .cat-sub{color:var(--sub);font-size:14.5px;margin:0 0 20px;max-width:66ch}
body.storefront .pgrid.compact{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px;margin-top:0}

/* FAQ band — open editorial rows */
body.storefront .faqband{max-width:760px;margin-top:30px;border-top:1px solid var(--line)}
body.storefront .faqband details{border-bottom:1px solid var(--line);padding:16px 0}
body.storefront .faqband summary{cursor:pointer;font-weight:600;font-size:16px;color:var(--ink)}
body.storefront .faqband p{margin:10px 0 2px;color:var(--sub);font-size:15px;max-width:62ch}

/* ---------- 8. closing band ---------- */
body.storefront .closer{padding:74px 0 10px}
body.storefront .closer .lead{font-size:17px;color:var(--sub);max-width:54ch;margin:18px 0 30px}

/* ---------- 9. status chips — the old site's tags ---------- */
body.storefront .tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;display:inline-block;
}
body.storefront .tag.live{background:#dcfce7;color:#166534}
body.storefront .tag.soon{background:#f1f0ec;color:#7a756c}

/* savings chip on suites — mono, quiet green */
body.storefront .pill.single{
  background:#dcfce7;color:#166534;font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;
}

/* generic pills used as cross-links ("More from this store") */
body.storefront .pill{text-transform:none}
body.storefront a.pill{
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:.85rem;padding:6px 14px;
  /* long product names must never widen the page on phones */
  max-width:100%;white-space:normal;overflow-wrap:anywhere;
}
body.storefront a.pill:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- 10. buttons — ink primary, teal accent, hairline ghost ---------- */
body.storefront .btn{
  background:var(--ink);color:#fff;border:none;border-radius:8px;
  padding:10px 18px;font-weight:600;font-size:14.5px;box-shadow:none;text-shadow:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body.storefront .btn:hover{background:var(--accent-dark);color:#fff}
body.storefront .btn.accent{background:var(--accent)}
body.storefront .btn.accent:hover{background:var(--accent-dark)}
body.storefront .btn.ghost,body.storefront .btn.demo{
  background:none;color:var(--ink);border:1px solid var(--line);box-shadow:none;
}
body.storefront .btn.ghost:hover,body.storefront .btn.demo:hover{
  background:none;color:var(--ink);border-color:var(--ink);
}
body.storefront .btn.lg{padding:12px 22px;font-size:15.5px}
body.storefront .btn.sm{padding:7px 13px;font-size:.85rem}

/* coming-soon chips (demos_live / sales_live = 0) — the old .tag.soon look */
body.storefront .btn.soon,body.storefront .btn.soon:hover{
  background:#f1f0ec;color:#7a756c;border:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:400;
}

/* ---------- 11. product + suite cards ---------- */
body.storefront .pcard{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
body.storefront .pcard:hover{
  transform:translateY(-2px);border-color:#cbd2ce;
  box-shadow:0 12px 24px -12px rgba(16,24,40,.18);
}
/* framed thumb: dark banners pop on the white card behind a hairline */
body.storefront .pcard .cover{
  margin:12px 12px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#eef1ef;
}
body.storefront .pcard .cover .ph{color:var(--accent);font-family:var(--mono)}
body.storefront .pcard .body{padding:14px 18px 18px}
body.storefront .pcard .body h3{font-size:1.02rem;font-weight:700}
body.storefront .pcard .body h3 a{color:var(--ink)}
body.storefront .pcard .body .tag2{color:var(--sub);font-size:.88rem}
body.storefront .pcard .body .price{
  color:var(--ink);font-family:var(--mono);font-weight:700;font-size:.95rem;
}
body.storefront .pcard .body .price .muted{font-family:'Inter',-apple-system,sans-serif;font-weight:400}
/* per-product theme_color: ONLY this subtle top edge — page accents stay teal */
body.storefront .pcard.accented{border-top:3px solid var(--accent)}
/* suites strip: text-only cards, roomier body */
body.storefront .suites-strip .pcard .body{padding:20px 22px}
body.storefront .suites-strip .pcard .body h3{font-size:1.1rem}
/* compact cards inside curated catalog sections */
body.storefront .pgrid.compact .pcard .cover{margin:8px 8px 0;border-radius:8px}
body.storefront .pgrid.compact .pcard .body{padding:10px 14px 14px;gap:4px}
body.storefront .pgrid.compact .pcard .body h3{font-size:.94rem}
body.storefront .pgrid.compact .pcard .body .tag2{font-size:.8rem}
body.storefront .pgrid.compact .pcard .body .price{font-size:.82rem}

/* cross-sell band on suite-member landing pages — editorial, link-only.
   --accent-soft/-deep come from the product's scoped accent inside .pscope,
   falling back to the brand teal tokens. */
body.storefront .xsell{
  margin-top:14px;background:var(--accent-soft);border:1px solid var(--line);
  border-radius:14px;padding:18px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
}
body.storefront .xsell .xs-eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:6px;
}
body.storefront .xsell .xs-line{margin:0;color:var(--ink);font-size:15px;max-width:62ch}
body.storefront .xsell .btn.ghost{background:var(--card);flex:none}

/* ---------- 12. pricing tiers ---------- */
body.storefront .tiercard{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
body.storefront .tiercard .t{
  color:var(--sub);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
}
body.storefront .tiercard .pr{color:var(--ink);font-family:var(--mono);font-weight:700;font-size:1.5rem}
body.storefront .tiercard .v{color:var(--sub)}

/* ---------- 13. landing / vs / suite pages ---------- */
body.storefront .phero{background:none;border-radius:0;padding:0;margin:0}
body.storefront .phero .hero{padding:52px 0 26px}
body.storefront .hero{padding:52px 0 10px}
body.storefront .hero h1{
  font-size:clamp(30px,4.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  margin:0 0 10px;
}
body.storefront .hero p{color:var(--sub);max-width:56ch}
body.storefront .lead{font-size:1.05rem}
body.storefront .hero-banner img{
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 60px -30px rgba(16,24,40,.28);
}
body.storefront .gallery img{border:1px solid var(--line);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}

/* ---------- 14. solid content cards (prose, FAQ, checkout, portal, sources) ---------- */
body.storefront .card{
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);
}
body.storefront .card .muted{color:var(--sub)}
body.storefront .card h3 a{color:var(--ink)}
/* page-level section headings (landing / vs / suite bodies) get editorial weight */
body.storefront h2{font-size:1.35rem;font-weight:700;letter-spacing:-.015em}
body.storefront .prose{color:var(--ink)}
body.storefront .prose p{color:var(--ink)}
body.storefront details{border-bottom:1px solid var(--line)}
body.storefront summary{color:var(--ink)}

/* form fields: crisp, teal focus */
body.storefront input,body.storefront select,body.storefront textarea{
  background:#fff;color:var(--ink);border:1px solid var(--line);
}
body.storefront input:focus,body.storefront select:focus,body.storefront textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.15);
}
body.storefront input::placeholder,body.storefront textarea::placeholder{color:#6b7472}

/* focus ring for keyboard users */
body.storefront a:focus-visible,body.storefront .btn:focus-visible,
body.storefront input:focus-visible,body.storefront select:focus-visible,
body.storefront textarea:focus-visible,body.storefront button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------- 15. footer ---------- */
body.storefront .storefoot{
  display:block;margin-top:72px;padding:26px 0 10px;border-top:1px solid var(--line);
  color:var(--sub);font-size:14px;
}
body.storefront .storefoot .frow{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
body.storefront .storefoot .frow + .frow{margin-top:14px;font-size:13px}
body.storefront .storefoot .brand{
  color:var(--ink);font-weight:700;font-size:17px;display:flex;align-items:center;gap:9px;
}
body.storefront .storefoot .brand .mark{width:20px;height:20px}
body.storefront .storefoot a{color:var(--sub)}
body.storefront .storefoot a:hover{color:var(--ink)}
body.storefront .storefoot a.mail{color:var(--accent)}
body.storefront .storefoot a.mail:hover{color:var(--accent-dark)}

/* ---------- 16. reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body.storefront{scroll-behavior:auto}
  body.storefront .btn,body.storefront .pcard{transition:none}
  body.storefront .pcard:hover{transform:none}
}