/* Banyan & Krow — Sekha launch
   Palette: bone #F7F4EE · ink #2E241C · rust #8E4526 · mustard #B5822C
   Type:    Cormorant Garamond (display) · Jost (UI) */

:root{
  --bone:#F7F4EE;
  --ink:#2E241C;
  --rust:#8E4526;
  --mustard:#B5822C;
  --fill:#EFE9E0;
  --line:rgba(46,36,28,.12);
  --mid:rgba(46,36,28,.5);
  --faint:rgba(46,36,28,.3);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

a{color:var(--rust);text-decoration:none}
a:hover{color:var(--ink)}

button{font-family:var(--sans);color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{opacity:.45;cursor:default}

/* Full-height app shell; header and tabs pinned, middle scrolls. */
.app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:520px;
  margin:0 auto;
  background:var(--bone);
}

/* ---------- Header ---------- */
.hdr{
  flex:none;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 18px) 22px 12px;
  border-bottom:.5px solid var(--line);
}
.wordmark{display:flex;flex-direction:column;gap:3px;text-align:left}
.wordmark span{font-family:var(--serif);font-weight:300;font-size:19px;letter-spacing:.34em;line-height:1}
.wordmark span+span{padding-left:1px}
.hdr-nav{display:none}
.hdr-actions{display:flex;align-items:center;gap:16px;padding-bottom:2px}
.bag-btn{display:flex;align-items:baseline;gap:5px}
.bag-count{font-size:9.5px;font-weight:400;letter-spacing:.1em;color:var(--faint)}
.bag-count.on{color:var(--rust)}

/* ---------- Scroll area ---------- */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.screen{animation:fade .42s cubic-bezier(.22,.7,.2,1) both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pad{padding-left:22px;padding-right:22px}
.pad:first-child{padding-top:34px}
.t8{margin-top:8px}.t10{margin-top:10px}.t12{margin-top:12px}
.t22{padding-top:22px}.t24{padding-top:24px}.t26{padding-top:26px}
.t28{padding-top:28px}.t30{padding-top:30px}.t34{padding-top:34px}
.t40{padding-top:40px}.t44{padding-top:44px}.t46{padding-top:46px}
.spacer{height:70px}
.spacer.tall{height:120px}

/* ---------- Type ---------- */
.eyebrow{margin:0;font-size:9.5px;letter-spacing:.26em;color:var(--mid)}
.eyebrow.xs{font-size:9px;letter-spacing:.22em}
.display{margin:16px 0 0;font-family:var(--serif);font-weight:300;font-size:52px;line-height:.98;letter-spacing:-.01em}
.title{margin:0;font-family:var(--serif);font-weight:300;font-size:38px;line-height:1}
.title.mid{font-size:32px;line-height:1.15;margin-top:26px}
.lede{margin:14px 0 0;max-width:252px;font-size:13.5px;line-height:1.65;color:rgba(46,36,28,.62);text-wrap:pretty}
.lede.sm{font-size:12.5px;line-height:1.7;color:rgba(46,36,28,.55);max-width:262px}
.lede.center{margin-left:auto;margin-right:auto;text-align:center}
.pull{margin:16px 0 0;font-family:var(--serif);font-weight:300;font-size:23px;line-height:1.45;text-wrap:pretty}
.note{margin:12px 0 0;font-size:11.5px;line-height:1.7;color:var(--mid)}
.note.tight{font-size:10.5px;line-height:1.6;color:rgba(46,36,28,.45)}
.muted{color:rgba(46,36,28,.55)}
.lbl{font-size:9.5px;letter-spacing:.22em}

/* ---------- Image placeholders (swap for <img>) ---------- */
.ph{
  position:relative;
  width:100%;
  background:var(--fill);
  background-image:repeating-linear-gradient(135deg,rgba(46,36,28,.035) 0 6px,transparent 6px 12px);
  overflow:hidden;
}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph:has(img) > .ph-cap,.ph:has(img) > .chip{display:none}
.ph-cap{
  position:absolute;left:0;bottom:0;padding:11px 12px;
  font-family:ui-monospace,Menlo,monospace;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(46,36,28,.38);
}
.hero-ph{height:392px}
.chip{position:absolute;top:0;left:0;width:34px;height:34px}
.chip.rust,.dot.rust,.shade.rust,.bag-thumb.rust{background:var(--rust)}
.chip.mustard,.dot.mustard,.shade.mustard,.bag-thumb.mustard{background:var(--mustard)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}

.row-meta{margin-top:10px;display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.2em;color:rgba(46,36,28,.45)}

/* ---------- Buttons ---------- */
.btn-row{display:flex;gap:10px}
.btn-solid{flex:1;background:var(--ink);color:var(--bone);padding:17px 0;font-size:10px;letter-spacing:.24em;min-height:48px}
.btn-ghost{flex:none;border:.5px solid rgba(46,36,28,.25);padding:17px 18px;font-size:10px;letter-spacing:.22em;min-height:48px}
.btn-text{margin-top:20px;border-bottom:.5px solid rgba(46,36,28,.35);padding-bottom:5px;font-size:10px;letter-spacing:.24em}

/* ---------- Home shade cards ---------- */
/* Home hero: flat flow on mobile (text, image, buttons); two columns on desktop.
   .home-hero-copy is display:contents so its children order within .home-hero. */
.home-hero{display:flex;flex-direction:column}
.home-hero-copy{display:contents}
.home-hero-media{order:1}
.home-hero-copy > .btn-row{order:2}

/* Mobile: once a real hero photo is set, show it full-bleed at its true length. */
@media (max-width:899px){
  .home-hero-media.has-hero{padding-left:0;padding-right:0}
  .home-hero-media.has-hero .ph{height:auto !important}
  .home-hero-media.has-hero .ph img{height:auto}
  .home-hero-media.has-hero .row-meta{padding:10px 22px 0}
}

.grid2{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{text-align:left}
.card-name{margin:9px 0 0;display:flex;align-items:center;font-family:var(--serif);font-size:15px;letter-spacing:.04em}
.card-price{margin:4px 0 0;font-size:9.5px;letter-spacing:.16em;color:var(--mid)}

/* ---------- Shop categories ---------- */
.cat-list{margin:28px 0 0;padding:0;list-style:none;border-top:.5px solid var(--line)}
.cat-list button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;text-align:left;padding:19px 22px;border-bottom:.5px solid var(--line);
}
.cat-list .soon{cursor:default}
.cat-name{display:block;font-family:var(--serif);font-size:22px;letter-spacing:.02em;margin-bottom:5px}
.cat-note{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--mid)}
.soon .cat-name,.soon .cat-note{color:var(--faint)}
.arrow{font-family:var(--serif);font-size:16px;color:rgba(46,36,28,.45)}

/* ---------- Sofas listing ---------- */
.list-col{display:flex;flex-direction:column;gap:32px}
.prod-row{margin-top:11px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.prod-name{font-family:var(--serif);font-weight:300;font-size:23px;letter-spacing:.02em}
.prod-price{font-size:11.5px;white-space:nowrap}
.prod-meta{margin:5px 0 0;font-size:9px;letter-spacing:.2em;color:var(--mid)}

/* ---------- Product ---------- */
.pdp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pdp-name{margin:0;font-family:var(--serif);font-weight:300;font-size:33px;line-height:1.06;max-width:205px}
.pdp-price{margin:6px 0 0;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.shade-head{display:flex;align-items:baseline;justify-content:space-between}
.shade-name{font-family:var(--serif);font-size:16px;letter-spacing:.04em}
.shade-row{margin-top:14px;display:flex;gap:10px}
.shade{flex:1;height:46px;outline:0 solid transparent;outline-offset:4px}
.shade.is-on{outline:.5px solid rgba(46,36,28,.55)}

.specs{margin-top:30px;border-top:.5px solid var(--line)}
.spec{border-bottom:.5px solid var(--line)}
.spec-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 22px;font-size:10px;letter-spacing:.22em}
.spec-mark{font-family:var(--serif);font-size:17px;color:rgba(46,36,28,.45)}
.spec-body{margin:0;padding:0 22px 20px;font-size:12.5px;line-height:1.75;color:rgba(46,36,28,.6);max-width:300px}

/* ---------- Bag ---------- */
.bag-list{margin:26px 0 0;padding:0;list-style:none;border-top:.5px solid var(--line)}
.bag-item{display:flex;gap:16px;padding:18px 22px;border-bottom:.5px solid var(--line)}
.bag-thumb{flex:none;width:80px;height:80px;overflow:hidden}
.bag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bag-body{flex:1;display:flex;flex-direction:column;gap:8px}
.bag-top{display:flex;justify-content:space-between;gap:10px}
.bag-name{font-family:var(--serif);font-size:20px;line-height:1.15}
.bag-line{font-size:11.5px;white-space:nowrap}
.bag-meta{font-size:9px;letter-spacing:.2em;color:var(--mid)}
.qty{display:flex;align-items:center;gap:14px;margin-top:2px}
.qty button{width:32px;height:32px;border:.5px solid rgba(46,36,28,.2);font-size:13px;line-height:1}
.qty span{font-size:12px}

.totals{display:flex;flex-direction:column;gap:10px}
.tot-row{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(46,36,28,.6)}
.tot-row.grand{padding-top:12px;border-top:.5px solid rgba(46,36,28,.14);font-weight:400;font-size:13px;color:var(--ink)}

/* ---------- Checkout ---------- */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field input{
  border:0;border-bottom:.5px solid rgba(46,36,28,.22);background:none;
  padding:0 0 8px;font-family:var(--sans);font-weight:300;font-size:16px;color:var(--ink);
}
.field input:focus{outline:none;border-bottom-color:var(--rust)}
.pay{margin-top:14px;border-top:.5px solid var(--line)}
.pay button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:.5px solid var(--line);font-size:12.5px;text-align:left;
}
.radio{width:14px;height:14px;border-radius:50%;border:.5px solid rgba(46,36,28,.3)}
.radio.on{background:var(--ink)}

/* ---------- Confirmation ---------- */
.done{padding-top:80px;text-align:center}
.ring{width:36px;height:36px;margin:0 auto;border-radius:50%;border:.5px solid var(--faint)}
.note.center{text-align:center}
.wa-btn{display:inline-block;margin-top:18px;background:var(--ink);color:var(--bone);padding:15px 30px;font-size:10px;letter-spacing:.22em;text-decoration:none;min-height:44px}
.wa-btn:hover{color:var(--bone)}

/* ---------- Search ---------- */
.search-field{padding-bottom:10px;border-bottom:.5px solid rgba(46,36,28,.25);font-family:var(--serif);font-size:26px;color:var(--faint)}
.chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.pill{border:.5px solid rgba(46,36,28,.2);padding:11px 14px;font-size:10px;letter-spacing:.18em}
.pill.is-off{color:rgba(46,36,28,.4)}

/* ---------- About (unlisted page) ---------- */
.about-p{max-width:none;margin-top:15px;color:rgba(46,36,28,.7)}
.about .pull{margin-bottom:6px}
.about-name{margin:6px 0 0;font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:.02em}

/* ---------- Sticky bars ---------- */
.actionbar{
  flex:none;display:flex;gap:10px;align-items:center;
  padding:14px 22px 16px;border-top:.5px solid var(--line);background:var(--bone);
}
.tabs{
  flex:none;display:flex;
  padding:12px 0 calc(env(safe-area-inset-bottom) + 14px);
  border-top:.5px solid var(--line);background:var(--bone);
}
.tabs button{flex:1;padding:10px 0;font-size:9px;letter-spacing:.2em;color:var(--faint)}
.tabs button.on{color:var(--ink)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:150px;transform:translateX(-50%);
  background:var(--ink);color:var(--bone);padding:11px 20px;
  font-size:9.5px;letter-spacing:.22em;
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:20;
}
.toast.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  .toast{transition:none}
}

/* ==========================================================================
   DESKTOP (900px+)
   The phone layout above is untouched. From here up, the single-column app
   becomes a full-width site: a horizontal top bar with real navigation, a
   two-column editorial hero, and multi-column catalogue and product views.
   Palette, type and interaction stay identical.
   ========================================================================== */
@media (min-width:900px){
  .app{max-width:none}

  /* ---- Top bar ---- */
  /* Full-bleed bar; inner content aligns to the same 1104px column as .screen. */
  .hdr{
    position:sticky;top:0;z-index:15;
    align-items:center;
    padding:20px max(48px, calc((100% - 1104px) / 2));
    background:var(--bone);
  }
  .wordmark{flex-direction:row;gap:.42em;align-items:baseline}
  .wordmark span{font-size:15px;letter-spacing:.3em}
  .wordmark span+span{padding-left:0}

  .hdr-nav{display:flex;gap:34px}
  .hdr-nav button{
    font-size:10px;letter-spacing:.22em;color:var(--faint);
    padding:4px 0;border-bottom:1px solid transparent;
  }
  .hdr-nav button.on{color:var(--ink);border-bottom-color:var(--ink)}

  .hdr-actions{padding-bottom:0;gap:24px}

  .tabs{display:none}

  /* ---- Content frame ---- */
  .scroll{scroll-padding-top:90px}
  .screen{max-width:1200px;margin:0 auto;padding:0 48px 48px}
  .pad{padding-left:0;padding-right:0}
  .pad:first-child{padding-top:52px}
  .spacer{height:40px}
  .spacer.tall{height:64px}

  /* forms, confirmation and prose read better narrow */
  .screen[data-screen="checkout"],
  .screen[data-screen="cart"],
  .screen[data-screen="done"],
  .screen[data-screen="search"]{max-width:680px}
  .screen[data-screen="about"]{max-width:740px}
  .about .pull{font-size:25px}
  .about .about-p{max-width:none;font-size:14.5px;line-height:1.75}
  .about-name{font-size:26px}

  /* ---- Type scale ---- */
  .display{font-size:66px;letter-spacing:-.02em}
  .title{font-size:46px}
  .lede{max-width:400px;font-size:14px;line-height:1.7}
  .lede.sm{max-width:480px;font-size:13.5px}
  .pull{font-size:27px;max-width:640px}

  /* ---- Editorial hero (home) ---- */
  .home-hero{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    column-gap:64px;
    align-items:center;
    padding-top:48px;
  }
  .home-hero-copy{display:flex;flex-direction:column;grid-column:1}
  .home-hero-copy > .pad:first-child{padding-top:0}
  .home-hero-copy > .btn-row{margin-top:36px;max-width:400px}
  .home-hero-media{grid-column:2;padding-top:0}
  .home-hero-media .ph{min-height:480px;height:auto !important}
  .home-hero .display{font-size:74px}
  .home-hero .lede{max-width:340px}

  /* ---- Two pieces / the house ---- */
  .grid2{grid-template-columns:1fr 1fr;gap:32px;margin-top:26px;max-width:920px}
  .grid2 .card .ph{height:360px !important}
  .card-name{font-size:16px}
  .card-price{font-size:10px}

  /* ---- Shop categories ---- */
  .cat-list{margin-top:40px}
  .cat-list button{padding:26px 2px;gap:24px}
  .cat-list button[data-go]:hover .cat-name{color:var(--rust)}
  .cat-name{font-size:26px}

  /* ---- Sofas listing ---- */
  .list-col{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 44px}
  .list-col .ph{height:440px !important}
  .prod-row{margin-top:16px}
  .prod-name{font-size:24px}

  /* ---- Product page: image left (sticky), details right ---- */
  .screen[data-screen="product"]{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:56px;
    align-items:start;
    padding-top:32px;
  }
  .screen[data-screen="product"] > .hero-ph{
    grid-column:1;grid-row:1 / span 30;   /* span past all right-column rows so it sets none */
    align-self:start;
    position:sticky;top:96px;
    height:auto;aspect-ratio:4 / 5;
  }
  .screen[data-screen="product"] > *:not(.hero-ph){grid-column:2}
  .screen[data-screen="product"] > .pad:first-child,
  .screen[data-screen="product"] > .pad.t24{padding-top:0}
  .pdp-name{font-size:40px;max-width:none}
  .pdp-price{font-size:15px}
  .specs{margin-top:28px}
  .spec-head{padding:18px 2px}
  .spec-body{padding:0 2px 20px}
  .shade{height:52px}

  /* ---- Bag ---- */
  .bag-item{gap:24px;padding:22px 2px}
  .bag-thumb{width:120px;height:120px}
  .bag-name{font-size:22px}

  /* ---- Sticky action bar ---- */
  .actionbar{
    justify-content:flex-end;gap:14px;
    padding:16px max(48px, calc((100% - 1104px) / 2));
  }
  .actionbar .btn-solid{flex:0 1 280px}
  .actionbar .btn-ghost{flex:0 0 auto}
  /* on the narrow screens, keep the bar aligned to the same column */
  .app:has(.screen[data-screen="cart"]:not([hidden])) .actionbar,
  .app:has(.screen[data-screen="checkout"]:not([hidden])) .actionbar{
    padding-left:max(48px, calc((100% - 680px) / 2));
    padding-right:max(48px, calc((100% - 680px) / 2));
  }

  .toast{bottom:auto;top:88px}
}

/* ========== LARGE DESKTOP (1440px+) ========== */
/* Layout frame stays at 1200px; only the display type and imagery grow. */
@media (min-width:1440px){
  .display{font-size:76px}
  .home-hero .display{font-size:84px}
  .title{font-size:52px}
  .pull{font-size:29px;max-width:720px}
  .home-hero-media .ph{min-height:560px}
  .list-col .ph{height:480px !important}
  .home-hero{column-gap:80px}
}