/* ===== TEMPLATES ===== */
.tpl-note { display:flex; gap:12px; align-items:center; padding:14px 18px; border-radius:var(--cr-radius-control); background:var(--cr-color-action-primary-state-hover);
  border:1px solid var(--cr-site-hairline); margin-bottom:var(--cr-space-7); font-size:.86rem; color:var(--cr-color-action-primary-text); }
.cr[data-theme="dark"] .tpl-note { color:var(--cr-color-text-primary); }
.tpl-note svg { width:20px; height:20px; flex:0 0 auto; }
.tsub { display:flex; align-items:baseline; gap:12px; margin:var(--cr-space-12) 0 var(--cr-space-4); }
.tsub .n { font-family:var(--cr-font-mono); font-size:.78rem; color:var(--cr-color-action-tertiary-fill); font-weight:600; }
.tsub h3 { font-family:var(--cr-font-sans); font-size:1.5rem; font-weight:600; }
.tsub .tag { margin-inline-start:auto; }

/* browser frame */
.browser { border-radius:var(--cr-radius-surface); overflow:hidden; border:1px solid var(--cr-site-hairline); box-shadow:var(--cr-shadow-elevation-3); background:var(--cr-color-surface-default); }
.bbar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--cr-site-surface-tint-3); border-bottom:1px solid var(--cr-site-hairline); }
.bbar .dot { width:11px; height:11px; border-radius:var(--cr-radius-circle); background:var(--cr-site-surface-tint-4); }
.bbar .url { margin-inline-start:12px; flex:1; max-width:360px; padding:5px 12px; border-radius:var(--cr-radius-pill); background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline);
  font-family:var(--cr-font-mono); font-size:.72rem; color:var(--cr-color-text-secondary); }
.bscreen { padding:0; background:var(--cr-color-surface-background); }

/* ---- hero template ---- */
.tpl-hero-nav { display:flex; align-items:center; gap:20px; padding:16px 28px; border-bottom:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); }
.tpl-hero-nav .logo { font-family:var(--cr-font-sans); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.tpl-hero-nav .links { display:flex; gap:18px; font-size:.82rem; font-weight:600; color:var(--cr-color-text-secondary); }
.tpl-hero-nav .links span:first-child { color:var(--cr-color-text-primary); }
.tpl-hero-body { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; padding:44px 28px; align-items:center;
  background:radial-gradient(120% 130% at 100% 0%, var(--cr-color-action-tertiary-state-hover) 0%, transparent 50%), var(--cr-color-surface-default); }
.tpl-hero-body h2 { font-family:var(--cr-font-sans); font-size:2.5rem; line-height:1.05; letter-spacing:-.02em; font-weight:600; }
.tpl-hero-body h2 em { font-style:italic; color:var(--cr-color-action-tertiary-fill); }
.tpl-hero-body p { color:var(--cr-color-text-secondary); margin-top:14px; font-size:.95rem; line-height:1.6; max-width:42ch; }
.tpl-hero-art { aspect-ratio:4/3; border-radius:var(--cr-radius-surface); background:
  conic-gradient(from 210deg at 60% 40%, var(--cr-color-action-primary-fill), var(--cr-color-action-secondary-fill), var(--cr-color-action-tertiary-fill), var(--cr-color-action-primary-fill));
  position:relative; overflow:hidden; box-shadow:var(--cr-shadow-elevation-2); }
.tpl-hero-art::after { content:""; position:absolute; inset:0; background:radial-gradient(80% 80% at 30% 20%, rgb(255 255 255/.35), transparent 60%); }
.tpl-hero-cards { position:absolute; inset:auto 16px 16px; display:flex; gap:10px; z-index:2; }
.tpl-hero-cards .c { flex:1; padding:12px; border-radius:var(--cr-radius-control); background:color-mix(in srgb,var(--cr-color-surface-default) 88%, transparent); backdrop-filter:blur(6px); box-shadow:var(--cr-shadow-elevation-1); }
.tpl-hero-cards .c .t { font-size:.72rem; font-weight:700; } .tpl-hero-cards .c .s { font-size:.64rem; color:var(--cr-color-text-secondary); }

/* ---- device / product gallery ---- */
.tpl-shop { display:grid; grid-template-columns:210px 1fr; }
.tpl-filters { padding:22px; border-inline-end:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); }
.tpl-filters .fh { display:flex; justify-content:space-between; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--cr-color-text-secondary); margin-bottom:14px; }
.tpl-filters .fh a { color:var(--cr-color-action-tertiary-fill); }
.tpl-filters .fg { margin-bottom:18px; }
.tpl-filters .fg .lbl { font-size:.78rem; font-weight:700; margin-bottom:8px; }
.tpl-check { display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--cr-color-text-secondary); padding:4px 0; }
.tpl-check .box { width:16px; height:16px; border-radius:var(--cr-radius-field); border:1.5px solid var(--cr-color-border-divider); flex:0 0 auto; }
.tpl-check.on .box { background:var(--cr-color-action-tertiary-fill); border-color:var(--cr-color-action-tertiary-fill); position:relative; }
.tpl-check.on .box::after { content:""; position:absolute; inset:3px 3px; border-inline-start:2px solid var(--cr-color-action-tertiary-on-fill); border-bottom:2px solid var(--cr-color-action-tertiary-on-fill); transform:rotate(-45deg) translate(1px,-1px); }
.tpl-check .ct { margin-inline-start:auto; font-size:.7rem; }
.fchips { display:flex; flex-wrap:wrap; gap:6px; }
.fchip { padding:5px 11px; border-radius:var(--cr-radius-field); border:1.5px solid var(--cr-color-border-divider); font-size:.74rem; font-weight:700; background:var(--cr-color-surface-default); color:var(--cr-color-text-secondary); }
.fchip[aria-pressed="true"] { border-color:var(--cr-color-action-tertiary-fill); background:var(--cr-color-action-tertiary-state-hover); color:var(--cr-color-action-tertiary-text); }
.cr[data-theme="dark"] .fchip[aria-pressed="true"] { color:var(--cr-color-text-primary); }
.tpl-swatchrow { display:flex; gap:8px; }
.tpl-swatchrow i { width:22px; height:22px; border-radius:var(--cr-radius-full); box-shadow:inset 0 0 0 1px rgb(0 0 0/.1); display:block; }
.tpl-shop-main { padding:22px; }
.tpl-shop-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.tpl-shop-head .r { font-size:.8rem; color:var(--cr-color-text-secondary); }
.tpl-sort { padding:7px 12px; border-radius:var(--cr-radius-field); border:1px solid var(--cr-color-border-divider); font-size:.76rem; font-weight:600; background:var(--cr-color-surface-default); }
.tpl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tpl-prod { border-radius:var(--cr-radius-control); overflow:hidden; border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); transition:transform var(--cr-motion-duration-short) var(--cr-motion-ease-standard), box-shadow var(--cr-motion-duration-short); }
.tpl-prod:hover { transform:translateY(-3px); box-shadow:var(--cr-shadow-elevation-2); }
.tpl-prod .img { aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center; }
.tpl-prod .img svg { width:46%; height:46%; opacity:.9; }
.tpl-prod .badge { position:absolute; top:10px; inset-inline-start:10px; padding:3px 9px; border-radius:var(--cr-radius-pill); background:var(--cr-color-action-tertiary-fill); color:var(--cr-color-action-tertiary-on-fill); font-size:.62rem; font-weight:800; letter-spacing:.04em; }
.tpl-prod .heart { position:absolute; top:8px; inset-inline-end:8px; width:26px; height:26px; border-radius:var(--cr-radius-circle); background:color-mix(in srgb,var(--cr-color-surface-default) 80%,transparent); display:flex; align-items:center; justify-content:center; }
.tpl-prod .heart svg { width:14px; height:14px; color:var(--cr-color-text-secondary); }
.tpl-prod .meta { padding:12px 14px; }
.tpl-prod .nm { font-weight:700; font-size:.86rem; }
.tpl-prod .sub { font-size:.72rem; color:var(--cr-color-text-secondary); margin-top:2px; }
.tpl-prod .pr { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.tpl-prod .price { font-family:var(--cr-font-sans); font-weight:600; }
.tpl-prod .buy { width:30px; height:30px; border-radius:var(--cr-radius-circle); background:var(--cr-color-action-tertiary-fill); color:var(--cr-color-action-tertiary-on-fill); display:flex; align-items:center; justify-content:center; }
.tpl-prod .buy svg { width:15px; height:15px; }

/* ---- plan selection ---- */
.tpl-plans-head { text-align:center; padding:34px 20px 10px; }
.tpl-plans-head h2 { font-family:var(--cr-font-sans); font-size:2rem; font-weight:600; }
.tpl-plans-head p { color:var(--cr-color-text-secondary); margin-top:8px; font-size:.9rem; }
.tpl-plans { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:24px 28px 40px; align-items:start; }
.tpl-plan { position:relative; padding:24px 20px; border-radius:var(--cr-radius-surface); border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); }
.tpl-plan.pop { border-color:var(--cr-color-action-tertiary-fill); box-shadow:var(--cr-shadow-elevation-3); transform:translateY(-8px); }
.tpl-plan .pop-tag { position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:4px 14px; border-radius:var(--cr-radius-pill); background:var(--cr-color-action-tertiary-fill); color:var(--cr-color-action-tertiary-on-fill); font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.tpl-plan .ic { width:38px; height:38px; border-radius:var(--cr-radius-control); background:var(--cr-color-action-primary-state-hover); color:var(--cr-color-action-primary-text); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cr[data-theme="dark"] .tpl-plan .ic { color:var(--cr-color-text-primary); }
.tpl-plan .ic svg { width:19px; height:19px; }
.tpl-plan .pn { font-weight:800; font-size:1.05rem; }
.tpl-plan .price { font-family:var(--cr-font-sans); font-size:2rem; font-weight:600; margin:8px 0 2px; }
.tpl-plan .price small { font-size:.8rem; color:var(--cr-color-text-secondary); font-family:var(--cr-font-sans); font-weight:600; }
.tpl-plan ul { list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:9px; }
.tpl-plan li { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; color:var(--cr-color-text-secondary); }
.tpl-plan li svg { width:15px; height:15px; color:var(--cr-color-action-success-fill); flex:0 0 auto; margin-top:1px; }

/* ---- card style variants ---- */
.tpl-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cs { border-radius:var(--cr-radius-surface); overflow:hidden; border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); box-shadow:var(--cr-shadow-elevation-1); }
.cs .cs-label { font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cr-color-text-secondary); padding:12px 14px 0; }
/* media card */
.cs-media .top { aspect-ratio:16/10; background:linear-gradient(135deg,var(--cr-color-action-primary-fill),var(--cr-color-action-tertiary-fill)); position:relative; }
.cs-media .top .pill { position:absolute; top:10px; inset-inline-start:10px; padding:3px 9px; border-radius:var(--cr-radius-pill); background:color-mix(in srgb,var(--cr-color-surface-default) 85%,transparent); font-size:.62rem; font-weight:700; z-index:3; }
.cs-media .b { padding:14px; } .cs-media .b h4 { font-size:.92rem; } .cs-media .b p { font-size:.76rem; color:var(--cr-color-text-secondary); margin-top:4px; }
/* stat card */
.cs-stat { padding:18px; }
/* stylelint-disable-next-line crossroads/radius-token-only -- illustration of a
   third-party stat card, not a library surface: 10px is the squircle the mock is
   depicting, and --cr-radius-md (8px) visibly squares it off. */
.cs-stat .ic { width:36px; height:36px; border-radius:10px; background:var(--cr-color-feedback-success-surface); color:var(--cr-color-action-success-text); display:flex; align-items:center; justify-content:center; }
.cr[data-theme="dark"] .cs-stat .ic { color:var(--cr-color-text-primary); }
.cs-stat .ic svg { width:18px; height:18px; } .cs-stat .n { font-family:var(--cr-font-sans); font-size:1.9rem; font-weight:600; margin-top:12px; }
.cs-stat .l { font-size:.76rem; color:var(--cr-color-text-secondary); } .cs-stat .up { color:var(--cr-color-action-success-text); font-size:.72rem; font-weight:700; margin-top:6px; }
.cr[data-theme="dark"] .cs-stat .up { color:var(--cr-color-action-success-fill); }
/* profile card */
.cs-profile { padding:18px; text-align:center; } .cs-profile .av { width:56px; height:56px; border-radius:var(--cr-radius-full); margin:0 auto 10px; background:linear-gradient(135deg,var(--cr-color-action-secondary-fill),var(--cr-color-action-tertiary-fill)); display:flex; align-items:center; justify-content:center; color:var(--cr-color-action-primary-on-fill); font-weight:800; }
.cs-profile h4 { font-size:.95rem; } .cs-profile .role { font-size:.74rem; color:var(--cr-color-text-secondary); }
.cs-profile .st { display:flex; justify-content:center; gap:18px; margin-top:12px; } .cs-profile .st b { font-family:var(--cr-font-sans); font-size:1.1rem; display:block; } .cs-profile .st span { font-size:.66rem; color:var(--cr-color-text-secondary); }
/* pricing mini card */
.cs-price { padding:18px; } .cs-price .amt { font-family:var(--cr-font-sans); font-size:2rem; font-weight:600; } .cs-price .amt small { font-size:.8rem; color:var(--cr-color-text-secondary); font-family:var(--cr-font-sans); }
.cs-price ul { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:7px; } .cs-price li { font-size:.76rem; color:var(--cr-color-text-secondary); display:flex; gap:7px; } .cs-price li::before { content:"✓"; color:var(--cr-color-action-success-text); font-weight:800; }
.cr[data-theme="dark"] .cs-price li::before { color:var(--cr-color-action-success-fill); }

/* ---- account + settings phones ---- */
/* stylelint-disable crossroads/radius-token-only -- everything below draws a
   phone: a device bezel, its inset screen, and the OS-styled cards inside it.
   Those corners are hardware and platform geometry, not Crossroads surfaces, so
   they are deliberately off the five-step scale — the scale tops out at 8px and
   a 30px bezel drawn at 8px stops reading as a phone. Circles and pills in here
   still use --cr-radius-full — NOT --cr-radius-pill, which became a themeable
   role in the radius ladder and is retargeted to `control` by `square`, so a
   pill in here would flatten with the site and stop reading as a capsule.
   Re-enabled after the section. */
.tpl-phones { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.miniphone { border-radius:30px; border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); box-shadow:var(--cr-shadow-elevation-3), 0 0 0 8px color-mix(in srgb,var(--cr-color-text-primary) 88%,#000);
  padding:8px; overflow:hidden; max-width:280px; margin:0 auto; }
.cr[data-theme="dark"] .miniphone { box-shadow:var(--cr-shadow-elevation-3), 0 0 0 8px #0c0c12; }
.miniscreen { border-radius:23px; overflow:hidden; background:var(--cr-color-surface-background); min-height:480px; }
.mp-head { padding:16px 18px 12px; }
.mp-status { display:flex; justify-content:space-between; font-size:.66rem; font-weight:700; margin-bottom:12px; }
.mp-title { font-weight:800; font-size:1.05rem; }
.mp-body { padding:0 16px 18px; }
/* account */
.mp-hero-card { padding:16px; border-radius:16px; background:linear-gradient(135deg,var(--cr-color-action-primary-fill),var(--cr-color-action-tertiary-fill)); color:var(--cr-color-action-primary-on-fill); display:flex; align-items:center; gap:12px; }
/* The avatar and the pill are fixed-size items; only the name block flexes.
   Without this the row's 198px of content squeezes all three, which rounded the
   avatar off its 44px circle and broke the pill's label onto a second line. */
.mp-hero-card .av { width:44px; height:44px; flex:0 0 auto; border-radius:var(--cr-radius-full); background:rgb(255 255 255/.25); display:flex; align-items:center; justify-content:center; font-weight:800; }
.mp-hero-card > :not(.av):not(.tag) { min-width:0; }
.mp-hero-card .nm { font-weight:800; font-size:.92rem; } .mp-hero-card .id { font-size:.7rem; opacity:.85; }
.mp-hero-card .tag { margin-inline-start:auto; flex:0 0 auto; white-space:nowrap; font-size:.62rem; background:rgb(255 255 255/.22); padding:3px 8px; border-radius:var(--cr-radius-full); font-weight:700; }
.mp-list { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.mp-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); }
.mp-row .ic { width:30px; height:30px; border-radius:9px; background:var(--cr-color-action-primary-state-hover); color:var(--cr-color-action-primary-text); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cr[data-theme="dark"] .mp-row .ic { color:var(--cr-color-text-primary); }
.mp-row .ic svg { width:16px; height:16px; } .mp-row .n { font-weight:700; font-size:.82rem; } .mp-row .m { font-size:.68rem; color:var(--cr-color-text-secondary); } .mp-row .ch { margin-inline-start:auto; color:var(--cr-color-text-secondary); }
/* settings toggles */
.mp-set { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); margin-bottom:8px; }
.mp-set .n { font-weight:700; font-size:.82rem; flex:1; } .mp-set .m { font-size:.68rem; color:var(--cr-color-text-secondary); }
.mp-seg { display:flex; gap:4px; padding:3px; border-radius:var(--cr-radius-full); background:var(--cr-site-surface-tint-3); margin-top:6px; }
.mp-seg button { flex:1; padding:6px; border-radius:var(--cr-radius-full); font-size:.72rem; font-weight:700; color:var(--cr-color-text-secondary); }
.mp-seg button[aria-pressed="true"] { background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); box-shadow:var(--cr-shadow-elevation-1); }
/* payment card */
.mp-pay { padding:18px; border-radius:16px; background:linear-gradient(135deg,var(--cr-color-action-secondary-fill),var(--cr-color-action-primary-border)); color:var(--cr-color-action-primary-on-fill); }
.mp-pay .cvv { display:flex; justify-content:space-between; margin-top:26px; font-family:var(--cr-font-mono); letter-spacing:.12em; font-size:.9rem; }
.mp-pay .row2 { display:flex; justify-content:space-between; margin-top:14px; font-size:.7rem; opacity:.9; }
.mp-field { margin-top:12px; } .mp-field label { font-size:.68rem; font-weight:700; color:var(--cr-color-text-secondary); }
.mp-field .inp { margin-top:5px; padding:9px 12px; border-radius:10px; border:1.5px solid var(--cr-color-border-divider); background:var(--cr-color-surface-default); font-size:.8rem; }
/* stylelint-enable crossroads/radius-token-only */

@media (max-width:1000px){
  .tpl-hero-body { grid-template-columns:1fr; } .tpl-plans { grid-template-columns:repeat(2,1fr); } .tpl-plan.pop{ transform:none; }
  .tpl-cards { grid-template-columns:repeat(2,1fr); } .tpl-phones { grid-template-columns:1fr; }
  .tpl-shop { grid-template-columns:1fr; } .tpl-filters { display:none; } .tpl-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .tpl-plans { grid-template-columns:1fr; } .tpl-cards { grid-template-columns:1fr; } .tpl-grid { grid-template-columns:1fr 1fr; } }

/* app template list */
/* stylelint-disable-next-line crossroads/radius-token-only -- in-phone list card:
   matches the 14px used by the rest of the mock app chrome above, not a
   Crossroads surface. */
.pcard { border-radius:14px; overflow:hidden; border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); margin-bottom:10px; }
.pcard .top { aspect-ratio:16/9; background:linear-gradient(135deg,var(--cr-color-action-primary-fill),var(--cr-color-action-tertiary-fill)); position:relative; }
.pcard .top .pill { position:absolute; top:8px; inset-inline-start:8px; padding:2px 8px; border-radius:var(--cr-radius-pill); background:color-mix(in srgb,var(--cr-color-surface-default) 85%,transparent); font-size:.6rem; font-weight:700; }
.pcard .b { padding:12px 14px; } .pcard .b h4 { font-size:.86rem; } .pcard .b p { font-size:.7rem; color:var(--cr-color-text-secondary); margin-top:3px; }

/* ===== real photos layered over tint/silhouette fallback ===== */
.photo { display:block; border:0; }
.tpl-prod .img .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.tpl-prod .badge, .tpl-prod .heart { z-index:3; }
.pdp-media .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.pdp-media .badge { z-index:3; }
.pdp-thumb .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* `.cs-media .top` is already `position:relative` and its `.pill` already sits at
   `z-index:3` where they are defined above, so the photo only needs stacking. */
.cs-media .top .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.tpl-hero-art .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.tpl-hero-art .tpl-hero-cards { z-index:3; }

/* ===== subtle theme wash over photos — tokens shift it between light & dark ===== */
.tpl-prod .img::before, .pdp-media::before, .cs-media .top::before, .tpl-hero-art::before, .pcard .top::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(150deg, var(--cr-color-action-primary-fill), var(--cr-color-action-tertiary-fill));
  mix-blend-mode:soft-light; opacity:.22;
}
.cr[data-theme="dark"] .tpl-prod .img::before, .cr[data-theme="dark"] .pdp-media::before,
.cr[data-theme="dark"] .cs-media .top::before, .cr[data-theme="dark"] .tpl-hero-art::before,
.cr[data-theme="dark"] .pcard .top::before { mix-blend-mode:overlay; opacity:.3; }