/* Layout choices are independent from merchant Mood and workspace day/night. */
.store-layout-picker { margin:28px 0; padding:24px 0; border-block:1px solid var(--line); }
.store-layout-picker h3 { margin:0 0 8px; font-size:20px; }
.store-layout-picker > p { margin:0 0 18px; color:var(--muted); font-size:14px; }
.store-layout-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.store-layout-choice { display:flex; flex-direction:column; gap:12px; min-width:0; padding:12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.store-layout-choice[aria-pressed="true"] { border-color:var(--primary); outline:2px solid var(--primary); outline-offset:-2px; }
.store-layout-choice:hover { background:var(--surface-2); }
.store-layout-choice strong { font-size:16px; line-height:1.5; }
.store-layout-choice strong small { display:block; font-size:13px; font-weight:500; }
.store-layout-choice > span:last-child { font-size:12px; line-height:1.6; color:var(--muted); }
.store-layout-selection { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px; font-size:14px; }
.store-layout-picker > small { display:block; color:var(--muted); font-size:12px; line-height:1.6; }
.layout-mini { display:grid; gap:6px; width:100%; height:106px; padding:10px; background:var(--surface-2); border-radius:6px; }
.layout-mini > i { display:block; height:25px; background:var(--primary); opacity:.8; }
.layout-mini > span { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.layout-mini b { display:block; background:var(--line-strong); }
.layout-mini-boutique > span { grid-template-columns:repeat(2,1fr); }
.layout-mini-boutique b:nth-child(n+3) { display:none; }
.layout-mini-editorial > span { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.layout-mini-editorial b:first-child { grid-row:span 2; background:var(--primary); opacity:.65; }
.layout-mini-editorial b:last-child { display:none; }
.layout-mini-catalog > span { grid-template-columns:1fr; gap:4px; }
.layout-mini-focus { grid-template-columns:1fr 2fr; }
.layout-mini-focus > i { height:auto; }
.layout-mini-focus > span { grid-template-columns:1fr; }
.layout-mini-focus b:nth-child(n+3) { display:none; }
.store-layout-choice:focus-visible, .demo-layout-bar button:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }

#app .store-shell[class*="store-layout-"] { min-height:100dvh; background:var(--bg); color:var(--text); }
#app .store-shell[class*="store-layout-"] ::selection { color:var(--bg); background:var(--text); }
#app .store-shell[class*="store-layout-"] .store-header { position:sticky; top:0; z-index:30; min-height:80px; padding:12px max(20px,calc((100vw - 1280px)/2)); border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--surface); }
#app .store-shell[class*="store-layout-"] .store-header .brand { width:auto; }
#app .store-shell[class*="store-layout-"] .store-header { display:flex; align-items:center; justify-content:space-between; }
#app .store-shell[class*="store-layout-"] .store-brand { min-width:0; }
#app .store-shell[class*="store-layout-"] .demo-store-brand strong { font-size:18px; overflow-wrap:anywhere; }
#app .store-shell[class*="store-layout-"] .store-header .brand-mark-image { width:36px!important; height:34px!important; }
#app .store-shell[class*="store-layout-"] .store-header .brand-wordmark { font-size:21px!important; }
#app .store-shell[class*="store-layout-"] .store-header .brand-service-line { font-size:9px!important; }
#app .store-shell[class*="store-layout-"] .store-main { max-width:1280px; padding:32px 24px 64px; }
#app .store-shell[class*="store-layout-"] .store-hero { position:relative; display:flex; align-items:center; min-height:180px; padding:32px 40px; border:0; border-radius:12px; box-shadow:none; background:var(--surface); isolation:isolate; }
#app .store-shell[class*="store-layout-"] .store-hero.has-cover { min-height:260px; }
#app .store-shell[class*="store-layout-"] .store-hero-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
#app .store-shell[class*="store-layout-"] .store-hero.has-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,15,18,.85),rgba(12,15,18,.48)); z-index:-1; }
#app .store-shell[class*="store-layout-"] .store-hero-content { position:relative; z-index:1; min-width:0; max-width:64ch; }
#app .store-shell[class*="store-layout-"] .store-hero h1 { margin:0 0 12px; font-size:clamp(28px,3.4vw,46px); line-height:1.25; letter-spacing:-.025em; overflow-wrap:anywhere; }
#app .store-shell[class*="store-layout-"] .store-hero p { margin:0; max-width:60ch; font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
#app .store-shell[class*="store-layout-"] .store-hero.has-cover :is(h1,p) { color:#fff!important; }
#app .store-shell[class*="store-layout-"] .store-owner-logo { display:block; width:64px; height:64px; margin:0 0 16px; object-fit:contain; background:#fff; border-radius:8px; }
#app .store-shell[class*="store-layout-"] :is(.store-hero-mark,.store-hero .eyebrow,.section-head .eyebrow) { display:none; }
#app .store-shell[class*="store-layout-"] .store-content { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:32px; margin-top:32px; }
#app .store-shell[class*="store-layout-"] .section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0; }
#app .store-shell[class*="store-layout-"] .section-head > div { min-width:0; }
#app .store-shell[class*="store-layout-"] .section-head h2 { width:auto; max-width:none; margin:0; font-size:23px; line-height:1.4; letter-spacing:-.02em; text-wrap:balance; }
#app .store-shell[class*="store-layout-"] .store-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
#app .store-shell[class*="store-layout-"] .store-product { display:flex; flex-direction:column; position:relative; min-width:0; height:auto; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; box-shadow:none; background:var(--surface)!important; }
#app .store-shell[class*="store-layout-"] .store-product-image { position:relative; inset:auto; display:grid; place-items:center; flex:none; width:100%; height:auto; aspect-ratio:1; overflow:hidden; background:var(--surface-2); }
#app .store-shell[class*="store-layout-"] .store-product-image img { position:static; display:block; width:100%; height:100%; min-height:0; max-height:100%; object-fit:contain; }
#app .store-shell[class*="store-layout-"] .store-product-body { position:static; inset:auto; display:flex; flex:1; flex-direction:column; min-width:0; padding:18px; border:0; border-top:1px solid var(--line); background:var(--surface); }
#app .store-shell[class*="store-layout-"] .store-category { font-size:11px; line-height:1.6; }
#app .store-shell[class*="store-layout-"] .store-product-body h3 { margin:6px 0 8px; font-size:18px; line-height:1.5; overflow-wrap:anywhere; }
#app .store-shell[class*="store-layout-"] .store-product-body p { min-height:0; margin:0 0 18px; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
#app .store-shell[class*="store-layout-"] .store-product-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
#app .store-shell[class*="store-layout-"] .store-product-bottom strong { font-size:20px; font-variant-numeric:tabular-nums; }
#app .store-shell[class*="store-layout-"] .btn { min-height:44px; border-radius:8px; font-size:13px; line-height:1.45; }
#app .store-shell[class*="store-layout-"] .store-cart { position:sticky; top:100px; padding:20px; border:1px solid var(--line); border-radius:12px; box-shadow:none; background:var(--bg)!important; scroll-margin-top:100px; }
#app .store-shell[class*="store-layout-"] .store-cart .section-head h2 { font-size:21px; }
#app .store-shell[class*="store-layout-"] .cart-empty { margin:24px 0; padding:16px 0; text-align:center; font-size:13px; }
#app .store-shell[class*="store-layout-"] .cart-summary { margin:0; padding:16px 0; border-block:1px solid var(--line); }
#app .store-shell[class*="store-layout-"] .cart-summary > div { font-size:13px; }
#app .store-shell[class*="store-layout-"] .cart-grand-total { font-size:16px; }
#app .store-shell[class*="store-layout-"] .store-checkout-form h3 { margin:20px 0 12px; font-size:16px; }
#app .store-shell[class*="store-layout-"] :is(input,textarea) { min-width:0; min-height:44px; font-size:16px; line-height:1.5; border-radius:8px; color:var(--text); caret-color:var(--text); background:var(--surface); }
#app .store-shell[class*="store-layout-"] :is(input,textarea)::placeholder { opacity:1; color:var(--text); }
#app .store-shell[class*="store-layout-"] .cart-controls button { min-width:44px; min-height:44px; }
#app .store-shell[class*="store-layout-"] .cart-row { flex-wrap:wrap; }
#app .store-shell[class*="store-layout-"] .store-preview-banner { color:var(--text); background:var(--surface); border-color:var(--line-strong); border-radius:8px; }
#app .store-shell[class*="store-layout-"] .store-info-panel { margin-top:40px; border-radius:12px; }
#app .store-shell[class*="store-layout-"] .store-info-panel h2 { font-size:20px; }
#app .store-shell[class*="store-layout-"] .store-footer { font-size:12px; line-height:1.8; }
.demo-layout-bar { max-width:1232px; margin:20px auto 0; padding:0 24px; color:var(--text); }
.demo-layout-bar > strong { display:block; margin-bottom:10px; font-size:14px; }
.demo-layout-bar > div { display:flex; gap:8px; overflow-x:auto; padding:4px 3px 8px; }
.demo-layout-bar button { flex:1; min-width:130px; min-height:56px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:8px; font:inherit; font-size:14px; color:var(--text); background:var(--surface); cursor:pointer; }
.demo-layout-bar button small { display:block; font-size:11px; }
.demo-layout-bar button[aria-pressed="true"] { color:var(--bg); background:var(--text); border-color:var(--text); }

/* Quiet merchandise surfaces; the chosen Mood remains on actions and accents. */
#app .store-shell[data-mood][class*="store-layout-"] { --shop-paper:color-mix(in srgb,var(--mood-background) 35%,#fff); }
#app .store-shell[data-mood][class*="store-layout-"] :is(.store-product,.store-product-body,.store-cart,.store-header,.store-footer) { background:var(--shop-paper)!important; }
#app .store-shell[data-mood][class*="store-layout-"] .store-hero:not(.has-cover) { background:var(--shop-paper)!important; border:1px solid var(--line); }
#app .store-shell[data-mood][class*="store-layout-"] .store-product-image { background:var(--shop-paper)!important; }
#app .store-shell[class*="store-layout-"][class*="demo-kind-"] .store-product-image img { object-fit:contain; }
#app .store-shell[class*="store-layout-"] [data-store-add] { scroll-margin-block:120px; min-width:104px; }
#app .store-shell[class*="store-layout-"] .demo-store-notice { display:flex; justify-content:center; flex-wrap:wrap; width:100%; max-width:none; margin:0; padding:10px 20px; }
#app .store-shell[class*="store-layout-"] .section-head { flex-direction:row!important; text-align:left!important; }
#app .store-shell[class*="store-layout-"] .section-head .btn { width:auto!important; flex:none!important; }
#app .store-shell[class*="store-layout-"] :is(.store-product,.store-cart) { border-radius:12px!important; }
#app .store-shell[class*="store-layout-"] :is(input,textarea)::placeholder { color:var(--text)!important; }

/* Boutique: portrait-led paired products and centered storefront introduction. */
#app .store-shell.store-layout-boutique .store-hero { justify-content:center; text-align:center; min-height:220px; }
#app .store-shell.store-layout-boutique .store-owner-logo { margin-inline:auto; }
#app .store-shell.store-layout-boutique .store-product-image { aspect-ratio:3/4; }
#app .store-shell.store-layout-boutique .store-product-body { padding:22px; }
/* Editorial: the first published item leads, without inventing featured flags. */
#app .store-shell.store-layout-editorial .store-product:first-child { grid-column:1/-1; display:grid; grid-template-columns:1.15fr 1fr; }
#app .store-shell.store-layout-editorial .store-product:first-child .store-product-body { border-top:0; padding:28px; justify-content:center; }
#app .store-shell.store-layout-editorial .store-product:first-child h3 { font-size:26px; }
#app .store-shell.store-layout-editorial .store-product:first-child .store-product-bottom { margin-top:20px; }
/* Catalog: compact horizontal rows, useful for menus and larger assortments. */
#app .store-shell.store-layout-catalog .store-hero { min-height:140px; padding-block:24px; }
#app .store-shell.store-layout-catalog .store-product-grid { grid-template-columns:1fr; gap:12px; }
#app .store-shell.store-layout-catalog .store-product { display:grid; grid-template-columns:140px minmax(0,1fr); }
#app .store-shell.store-layout-catalog .store-product-image { height:100%; min-height:170px; aspect-ratio:auto; }
#app .store-shell.store-layout-catalog .store-product-body { border-top:0; padding:16px 20px; }
/* Focus: spacious side-by-side cards and a narrower introduction. */
#app .store-shell.store-layout-focus .store-hero-content { max-width:48ch; }
#app .store-shell.store-layout-focus .store-product-grid { grid-template-columns:1fr; gap:24px; }
#app .store-shell.store-layout-focus .store-product { display:grid; grid-template-columns:1fr 1fr; }
#app .store-shell.store-layout-focus .store-product-body { border-top:0; padding:26px; justify-content:center; }
#app .store-shell.store-layout-focus .store-product-bottom { margin-top:20px; }
#app .store-shell.store-layout-focus .store-product-body h3 { font-size:23px; }

@media (max-width:1000px) {
  #app .store-shell[class*="store-layout-"] .store-content { grid-template-columns:minmax(0,1fr); }
  #app .store-shell[class*="store-layout-"] .store-cart { position:static; max-width:620px; width:100%; justify-self:center; }
  #app .store-shell[class*="store-layout-"] .store-header .auth-status { display:none; }
}
@media (max-width:600px) {
  .store-layout-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .store-layout-choice { padding:10px; }
  #app .store-shell[class*="store-layout-"] .store-header { gap:10px; min-height:80px; padding:10px 14px; }
  #app .store-shell[class*="store-layout-"] .store-header-actions { gap:6px; }
  body[data-layout="compact"] #app .store-shell[class*="store-layout-"] .store-header-actions > a.btn.ghost { display:none!important; }
  #app .store-shell[class*="store-layout-"] .store-main { padding:20px 16px 40px; }
  #app .store-shell[class*="store-layout-"] .store-hero { min-height:150px; padding:24px; }
  #app .store-shell[class*="store-layout-"] .store-hero.has-cover { min-height:220px; }
  #app .store-shell[class*="store-layout-"] .store-hero h1 { font-size:30px; }
  #app .store-shell[class*="store-layout-"] .store-hero p { font-size:14px; }
  #app .store-shell[class*="store-layout-"] .store-content { gap:28px; margin-top:24px; }
  #app .store-shell[class*="store-layout-"] .section-head h2 { font-size:21px; }
  #app .store-shell[class*="store-layout-"] .store-product-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px; }
  #app .store-shell[class*="store-layout-"] .store-product-body { padding:12px; }
  #app .store-shell[class*="store-layout-"] .store-product-body h3 { font-size:16px; }
  #app .store-shell[class*="store-layout-"] .store-product-body p { font-size:12px; }
  #app .store-shell[class*="store-layout-"] .store-product-bottom strong { font-size:18px; }
  #app .store-shell[class*="store-layout-"] .store-product-bottom .btn { width:100%; padding:10px 6px; font-size:12px; }
  #app .store-shell.store-layout-editorial .store-product:first-child { display:flex; }
  #app .store-shell.store-layout-editorial .store-product:first-child .store-product-image { aspect-ratio:4/3; }
  #app .store-shell.store-layout-editorial .store-product:first-child .store-product-body { padding:18px; }
  #app .store-shell.store-layout-editorial .store-product:first-child h3 { font-size:23px; }
  #app .store-shell.store-layout-catalog .store-product { grid-template-columns:96px minmax(0,1fr); }
  #app .store-shell.store-layout-catalog .store-product-grid,
  #app .store-shell.store-layout-focus .store-product-grid { grid-template-columns:1fr!important; }
  #app .store-shell.store-layout-catalog .store-product-image { min-height:160px; }
  #app .store-shell.store-layout-focus .store-product { grid-template-columns:1fr; }
  #app .store-shell.store-layout-focus .store-product-image { aspect-ratio:4/3; }
  #app .store-shell.store-layout-focus .store-product-body { padding:20px; }
  #app .store-shell.store-layout-focus .store-product-bottom .btn { width:auto; padding-inline:16px; }
  #app .store-shell[class*="store-layout-"] .store-preview-banner { flex-direction:column; align-items:flex-start; font-size:12px; }
  .demo-layout-bar { margin-top:16px; padding-inline:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .store-layout-choice, .demo-layout-bar button { transition:none!important; }
}