/* ============================================================
   DekoVägi - component & page styles
   ============================================================ */

/* ---------- Cart drawer ---------- */
.cart-drawer{ position:fixed; inset:0; z-index:200; pointer-events:none; }
.cart-drawer .scrim{ position:absolute; inset:0; background:rgba(34,31,26,.45);
  opacity:0; transition:opacity .5s var(--ease); }
.cart-drawer .panel{ position:absolute; top:0; right:0; height:100%; width:min(440px,92vw);
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .55s var(--ease); box-shadow:-20px 0 60px rgba(34,31,26,.18); }
.cart-drawer.open{ pointer-events:auto; }
.cart-drawer.open .scrim{ opacity:1; }
.cart-drawer.open .panel{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 1.8rem; border-bottom:1px solid var(--line); }
.drawer-head h3{ font-size:1.6rem; }
.drawer-close{ border:0; background:none; font-size:1.6rem; line-height:1; color:var(--ink-soft); padding:.2em; }
.drawer-items{ flex:1; overflow-y:auto; padding:1.2rem 1.8rem; display:flex; flex-direction:column; gap:.9rem; }
.drawer-empty{ color:var(--ink-soft); font-style:italic; font-family:var(--display); font-size:1.25rem; padding-top:1rem; }
.drawer-item{ display:flex; align-items:center; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.drawer-thumb{ width:64px; height:64px; flex:none; overflow:hidden; border-radius:var(--radius); background:var(--paper-2); }
.drawer-thumb img{ width:100%; height:100%; object-fit:cover; }
.drawer-meta{ flex:1; display:flex; flex-direction:column; gap:.15em; }
.drawer-name{ font-family:var(--display); font-size:1.25rem; line-height:1.1; }
.drawer-cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sage); font-weight:600; }
.qty{ display:inline-flex; align-items:center; gap:.2rem; margin-top:.5rem; border:1px solid var(--line); border-radius:100px; padding:.1rem; width:max-content; }
.qbtn{ border:0; background:none; width:1.7rem; height:1.7rem; border-radius:50%; font-size:1rem; line-height:1; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; transition:.25s var(--ease); }
.qbtn:hover{ background:var(--paper-2); }
.qn{ min-width:1.4rem; text-align:center; font-size:.9rem; font-weight:600; }
.drawer-right{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.drawer-line{ font-family:var(--display); font-size:1.2rem; }
.drawer-remove{ border:0; background:none; font-size:1.3rem; color:var(--ink-soft); line-height:1; padding:0 .2em; }
.drawer-remove:hover{ color:var(--clay-deep); }
.drawer-subtotal{ display:flex; justify-content:space-between; align-items:baseline; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--ink-soft); }
.drawer-subtotal-val{ font-family:var(--display); font-size:1.7rem; letter-spacing:0; text-transform:none; color:var(--ink); }
.drawer-foot{ padding:1.4rem 1.8rem 1.8rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.8rem; }
.drawer-foot .btn{ justify-content:center; }
.drawer-foot .row{ display:flex; gap:.8rem; }
.drawer-foot .row .link-underline{ flex:1; justify-content:center; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.5em; }
.field label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--ink-soft); }
.field input, .field textarea, .field select{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.7em 0; transition:border-color .35s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--olive); }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } } /* stack paired fields on phones */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ font-size:.78rem; letter-spacing:.06em; border:1px solid var(--line); border-radius:100px;
  padding:.55em 1.05em; background:transparent; color:var(--ink-soft); transition:.3s var(--ease); }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.on{ background:var(--olive); border-color:var(--olive); color:var(--paper); }
.form-note{ font-size:.8rem; color:var(--ink-soft); }
.form-success{ display:none; padding:2rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-2); font-family:var(--display); font-size:1.5rem; line-height:1.3; }
.form-success.show{ display:block; }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,25,20,.55) 0%, rgba(28,25,20,.12) 30%, rgba(28,25,20,.30) 55%, rgba(28,25,20,.82) 100%),
    radial-gradient(120% 90% at 15% 100%, rgba(28,25,20,.55) 0%, rgba(28,25,20,0) 60%); }
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,8vh,104px); }
.hero h1{ max-width:14ch; text-shadow:0 2px 30px rgba(20,18,14,.45); }
.hero .lead{ text-shadow:0 1px 16px rgba(20,18,14,.55); }
.hero .eyebrow{ text-shadow:0 1px 12px rgba(20,18,14,.5); }
.hero-meta{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem;
  margin-top:clamp(24px,4vh,52px); padding-top:1.6rem; border-top:1px solid var(--line-dark); }
.scroll-hint{ display:flex; align-items:center; gap:.7em; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.2em; font-weight:600; color:rgba(244,239,230,.8); }
.scroll-hint .dash{ width:46px; height:1px; background:rgba(244,239,230,.5); display:inline-block; }

/* ---------- Marquee strip ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:1.5rem; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:3rem; align-items:center; animation:marq 38s linear infinite; }
.marquee-track span{ font-family:var(--display); font-style:italic; font-size:1.8rem; color:var(--olive-2); }
.marquee-track .dot{ width:7px; height:7px; border-radius:50%; background:var(--olive-2); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Editorial split ---------- */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5.5rem); align-items:center; }
.split.rev{ grid-template-columns:1fr 1.05fr; }
.split .media{ aspect-ratio:4/5; border-radius:var(--radius); }
.split-body h2{ margin-bottom:.6em; }
.split-body .lead{ margin-bottom:1.8em; }
/* stack the facts/body (and image/text) split on phones - 2 narrow columns
   crammed the project-detail body text into ~150px otherwise */
@media (max-width:760px){ .split, .split.rev{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- Services list ---------- */
.svc-list{ display:flex; flex-direction:column; }
.svc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center;
  padding:1.9rem 0; border-top:1px solid var(--line); transition:padding-left .5s var(--ease); }
.svc-row:last-child{ border-bottom:1px solid var(--line); }
.svc-row:hover{ padding-left:1.2rem; }
.svc-row .num{ font-family:var(--display); font-style:italic; color:var(--sage); font-size:1.1rem; }
.svc-row h3{ font-size:clamp(1.6rem,2.8vw,2.5rem); font-weight:300; }
.svc-row .svc-desc{ color:var(--ink-soft); max-width:42ch; font-size:.96rem; }
@media (max-width:760px){ .svc-row{ grid-template-columns:auto 1fr; } .svc-row .svc-desc{ display:none; } }

/* ---------- Portfolio grid ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,2.5vw,2.4rem); }
.work-card{ display:block; grid-column:span 6; }
.work-card.wide{ grid-column:span 6; }
.work-card .media{ aspect-ratio:3/2; border-radius:var(--radius); }
.work-card.tall .media{ aspect-ratio:4/5; }
.work-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:1.1rem; }
.work-meta h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:400; }
.work-card .cats{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sage); font-weight:600; }
.work-card .yr{ font-family:var(--display); font-style:italic; color:var(--olive-2); font-size:1.05rem; }
.work-card .media::after{ content:""; position:absolute; inset:0; background:rgba(34,31,26,0); transition:background .5s var(--ease); }
.work-card:hover .media::after{ background:rgba(34,31,26,.08); }
@media (max-width:760px){ .work-card, .work-card.wide{ grid-column:span 12; } }

/* filter bar */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* ---------- Project detail gallery ---------- */
.proj-hero{ height:72svh; min-height:440px; position:relative; overflow:hidden; }
.proj-hero img{ width:100%; height:100%; object-fit:cover; }
.proj-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.proj-facts .fact .k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--sage); font-weight:600; }
.proj-facts .fact .v{ font-family:var(--display); font-size:1.35rem; margin-top:.3em; }
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,1.6vw,1.6rem); }
.gallery .g{ overflow:hidden; border-radius:var(--radius); background:var(--paper-2); }
.gallery .g img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gallery .g:hover img{ transform:scale(1.04); }
.g-6{ grid-column:span 6; } .g-4{ grid-column:span 4; } .g-8{ grid-column:span 8; }
.g-12{ grid-column:span 12; }
.g-tall{ aspect-ratio:3/4; } .g-wide{ aspect-ratio:16/9; } .g-sq{ aspect-ratio:1; }
@media (max-width:760px){ .proj-facts{ grid-template-columns:1fr 1fr; gap:1.4rem; }
  .g-6,.g-4,.g-8{ grid-column:span 12; } }

/* ---------- Rental catalog ---------- */
.rent-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2.2rem); }
.rent-card{ display:flex; flex-direction:column; }
.rent-card .media{ aspect-ratio:4/5; border-radius:var(--radius); }
.rent-card .badge{ position:absolute; top:.9rem; left:.9rem; z-index:3; background:rgba(244,239,230,.92);
  font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; padding:.4em .8em; border-radius:100px; }
.rent-info{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-top:1rem; }
.rent-info h3{ font-size:1.45rem; font-weight:400; line-height:1.1; }
.rent-info .price{ font-size:.85rem; color:var(--ink-soft); white-space:nowrap; }
.rent-info .price b{ font-family:var(--display); font-size:1.1rem; color:var(--ink); font-weight:500; }
.rent-add{ margin-top:.9rem; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  width:100%; border:1px solid var(--ink); background:transparent; color:var(--ink);
  padding:.85em 1em; border-radius:var(--radius); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.16em; font-weight:600; transition:.35s var(--ease); }
.rent-add:hover{ background:var(--ink); color:var(--paper); }
.rent-add.added{ background:var(--olive); border-color:var(--olive); color:var(--paper); }
.rent-add .chk{ display:none; } .rent-add.added .chk{ display:inline; } .rent-add.added .lbl-add{ display:none; }
@media (max-width:900px){ .rent-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .rent-grid{ grid-template-columns:1fr; } }

/* ---------- Big CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2.4rem,6vw,5.5rem); font-weight:300; max-width:18ch; margin:0 auto .8em; }

/* ---------- Stats / values ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); }
.value h3{ font-family:var(--display); font-size:clamp(2.2rem,3.6vw,3.4rem); font-weight:300; color:var(--olive);
  overflow-wrap:break-word; hyphens:auto; }
.bg-olive .value h3{ color:var(--blush); }
.value p{ margin:.4em 0 0; }
@media (max-width:760px){ .values{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,3vw,3rem); }
.team-card .media{ aspect-ratio:4/5; border-radius:var(--radius); margin-bottom:1.1rem; }
.team-card h3{ font-size:1.8rem; }
.team-card .role{ font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--olive); font-weight:600; margin-top:.2em; }
.team-add{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; border:1px dashed var(--line);
  border-radius:var(--radius); color:var(--sage); font-style:italic; font-family:var(--display); font-size:1.2rem; text-align:center; padding:2rem; }
@media (max-width:680px){ .team-grid{ grid-template-columns:1fr; } }

/* ---------- Page intro header ---------- */
.page-intro{ padding-top:clamp(140px,20vh,220px); padding-bottom:clamp(40px,6vh,80px); }
.page-intro h1{ font-size:clamp(3rem,8vw,7rem); font-weight:300; max-width:16ch; }
.page-intro .lead{ max-width:54ch; margin-top:1.4rem; }

/* ---------- Checkout ---------- */
.checkout-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.co-block{ margin-bottom:2.6rem; }
.co-block .step{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem; }
.co-block .step .n{ width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.05rem; }
.co-block .step h3{ font-size:1.5rem; }
.radio-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.radio-card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; cursor:pointer; transition:.3s var(--ease); }
.radio-card:hover{ border-color:var(--ink); }
.radio-card.sel{ border-color:var(--olive); background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--olive); }
.radio-card .rc-t{ font-family:var(--display); font-size:1.25rem; }
.radio-card .rc-d{ font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; }
.summary{ position:sticky; top:96px; background:var(--paper-2); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem); }
.summary h3{ font-size:1.7rem; margin-bottom:1.2rem; }
.sum-item{ display:flex; gap:.9rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.sum-item .st{ width:52px; height:52px; flex:none; border-radius:4px; overflow:hidden; background:var(--paper); }
.sum-item .st img{ width:100%; height:100%; object-fit:cover; }
.sum-item .sm{ flex:1; }
.sum-item .sn{ font-family:var(--display); font-size:1.15rem; line-height:1.1; }
.sum-item .sq{ font-size:.78rem; color:var(--ink-soft); margin-top:.2rem; }
.sum-item .sl{ font-family:var(--display); font-size:1.15rem; white-space:nowrap; }
.sum-rows{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.sum-row{ display:flex; justify-content:space-between; font-size:.95rem; color:var(--ink-soft); }
.sum-row.total{ border-top:1px solid var(--line); margin-top:.6rem; padding-top:1rem; color:var(--ink); align-items:baseline; }
.sum-row.total .tv{ font-family:var(--display); font-size:2rem; }
.sum-note{ font-size:.78rem; color:var(--ink-soft); margin-top:1rem; line-height:1.5; }
.card-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.co-empty{ text-align:center; padding:4rem 0; }
.co-empty p{ font-family:var(--display); font-style:italic; font-size:1.8rem; color:var(--ink-soft); margin-bottom:1.5rem; }
.co-success{ text-align:center; max-width:38rem; margin:0 auto; padding:3rem 0; }
.co-success .check{ width:80px; height:80px; border-radius:50%; border:1px solid var(--olive); color:var(--olive); display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 1.6rem; }
@media (max-width:880px){ .checkout-grid{ grid-template-columns:1fr; } .summary{ position:static; order:-1; } .radio-cards,.card-row{ grid-template-columns:1fr; } }

/* ---------- Partner / paper-design strip ---------- */
.partner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.partner-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.partner-imgs .pi{ overflow:hidden; border-radius:var(--radius); background:var(--paper-2); }
.partner-imgs .pi:first-child{ grid-row:span 2; aspect-ratio:3/4; }
.partner-imgs .pi img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.partner-imgs .pi:hover img{ transform:scale(1.05); }
.partner-imgs .pi.sq{ aspect-ratio:4/3; }
@media (max-width:760px){ .partner{ grid-template-columns:1fr; } }