/* Homu — design system. Brand tokens in :root only.
   Structure: split hero (serif display + single CTA + trust row) -> image-tile
   categories -> featured products -> values band -> blog -> 4-col dark footer.
   Type: Zen Old Mincho (display serif) + Inter (UI). */
:root{
  --bg:#FAFAFA;
  --cream:#F6F1E9;
  --text:#211C17;
  --muted:#7A716A;
  --wood:#A67B5B;
  --wood-light:#EAD8C0;
/* Brand red sampled from the logo artwork itself (IDENTITY V2: "Merah #A60A13 diambil dari
   objek RGB pada PDF logo"). The old #B02330 was a different, pinker red that no longer
   matched the logo sitting next to it in the header. */
  --homu-red:#A60A13;
  --white:#FFFFFF;
  --line:#E8E2D9;
  --dark:#2B2622;
  --radius:10px;
  --maxw:1200px;
  --shadow:0 6px 24px rgba(33,28,23,.07);
  --serif:'Zen Old Mincho','Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);color:var(--text);margin:0;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 4rem}
section{padding:4.5rem 0}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
h2{font-size:2rem;margin:0 0 1.75rem}
h2 .kicker{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--wood);margin-bottom:.6rem}
.lead{color:var(--muted);font-size:1.05rem;max-width:65ch}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(250,250,250,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .head-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.65rem 1.5rem}
.site-head a.brand{display:flex;align-items:center;gap:.6rem}
/* the PNG carries its own rounded corners + alpha, so do not double-round it here.
   46px, not 40: the brand sets a 120px digital minimum and warns to check the thin katakana
   at actual size — 40px turned it to mush. */
.site-head .brand img{border-radius:0;width:46px;height:46px}
.site-head .brand span{font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.site-head nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.site-head nav a{font-size:.92rem;color:#555;padding:.25rem 0}
.site-head nav a:hover{color:var(--homu-red)}
.head-cta{font-size:.9rem;font-weight:600;color:var(--homu-red);border:1.5px solid var(--homu-red);
  padding:.45rem 1.1rem;border-radius:6px;white-space:nowrap}
.head-cta:hover{background:var(--homu-red);color:#fff}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
  padding:4.5rem 0 3.5rem}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;
  color:var(--wood);margin:0 0 1rem}
.hero h1{font-size:3.4rem;line-height:1.12;margin:0 0 1.2rem}
.hero .sub{font-size:1.12rem;color:var(--muted);max-width:46ch;margin:0 0 2rem}
.hero-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:2rem}
.btn{display:inline-block;background:var(--homu-red);color:#fff;font-weight:600;
  font-size:1rem;padding:.9rem 2.1rem;border-radius:6px;transition:.15s}
.btn:hover{background:#85080F}
.btn-ghost{background:none;border:1.5px solid var(--line);color:var(--text);
  font-weight:600;font-size:.95rem;padding:.85rem 1.6rem;border-radius:6px}
.btn-ghost:hover{border-color:var(--wood)}
.trust{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.trust .t-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.trust .t-row{display:flex;gap:.8rem;flex-wrap:wrap}
.trust a{font-size:.88rem;font-weight:600;color:#6b625a;padding:.35rem .8rem;
  border:1px solid var(--line);border-radius:999px;background:var(--white)}
.trust a:hover{border-color:var(--wood);color:var(--text)}
.hero-img-wrap{position:relative;border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 26%,
    #FCF9F4 0%, var(--cream) 50%, #EEE1D0 86%, #E6D6C1 100%)}
/* contain, not cover: the source is 1:1 and this slot is 4/5, so `cover` silently cropped
   the product's left and right edges (it was cutting the baked-in feature labels off the
   hero). Letterboxed on the warm mat, the whole image shows and it matches the cards. */
.hero-img{width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:14px;
  filter:saturate(.97) contrast(1.02) brightness(1.01)}
/* same warm grade as the cards, so the landing hero belongs to the same world */
.hero-img-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:radial-gradient(78% 78% at 50% 44%,
    rgba(166,123,91,0) 44%, rgba(166,123,91,.12) 76%, rgba(138,96,62,.26) 100%);
  mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(166,123,91,.14)}
.hero-badge{position:absolute;right:-18px;bottom:26px;background:var(--white);
  border-radius:10px;box-shadow:var(--shadow);padding:.85rem 1.15rem;display:block;
  max-width:min(300px,72%);border-left:3px solid var(--wood)}
.hero-badge small{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.2rem}
.hero-badge b{font-size:.9rem;display:block;line-height:1.35;color:var(--text)}
.hero-badge .hb-price{display:block;color:var(--homu-red);font-weight:700;font-size:.95rem;margin-top:.15rem}

/* ---------- categories (image tiles) ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.cat-tile{position:relative;display:block;height:250px;border-radius:12px;overflow:hidden;
  background:var(--cream);isolation:isolate}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;z-index:-2}
.cat-tile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(33,28,23,0) 18%,rgba(33,28,23,.34) 52%,rgba(33,28,23,.82) 100%)}
.cat-tile:hover img{transform:scale(1.06)}
.cat-tile .tile-txt{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.cat-tile .tile-txt b{font-family:var(--serif);font-size:1.25rem;font-weight:600;display:block}
.cat-tile .tile-txt small{opacity:.85;font-size:.8rem}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin-top:1.25rem}
.p-card{background:var(--white);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.p-card img{aspect-ratio:1/1;object-fit:cover;background:#f4efe8}
.p-info{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex-grow:1}
.p-cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--wood);font-weight:600}
.p-title{font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-price{font-weight:700;color:var(--homu-red);margin-top:auto}
/* Out-of-stock and from-price affordances. Availability comes from warehouse stock,
   so a sold-out product must not read as buyable. */
.oos{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:#8a1f28;background:#fbe9ea;border:1px solid #f0c9cc;border-radius:999px;
  padding:.12rem .5rem;margin-left:.4rem;vertical-align:middle;white-space:nowrap}
.from{display:block;font-size:.7rem;font-weight:600;color:var(--muted,#7a7268);
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:.1rem}
.p-out .p-price{color:var(--muted,#7a7268)}
.p-out img{opacity:.55;filter:saturate(.6)}
.stock{color:var(--muted);font-weight:500;font-size:.88rem}
.more{text-align:center;margin-top:2rem}
.more a{color:var(--wood);font-weight:600}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.sec-head h2{margin:0}
.sec-head a{font-size:.9rem;font-weight:600;color:var(--wood);white-space:nowrap}

/* ---------- values band ---------- */
.values-band{background:var(--cream);border-radius:16px;padding:2.75rem 2.5rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.values-band h3{font-size:1.2rem;margin:0 0 .4rem;color:var(--text)}
.values-band .v-ico{display:block;color:var(--wood);margin-bottom:.85rem}
.values-band .v-ico svg{width:26px;height:26px;display:block}
.values-band p{color:var(--muted);margin:0;font-size:.95rem}

/* ---------- blog ---------- */
.blog-card{background:var(--white);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card img{aspect-ratio:16/10;object-fit:cover}
.b-info{padding:1.1rem 1.2rem 1.25rem}
.b-info h3{font-family:var(--sans);font-size:1rem;line-height:1.4;margin-top:.4rem;font-weight:600}

/* ---------- buy links (product page / hero) ---------- */
.buy-group{display:flex;flex-direction:column;gap:.6rem;margin:1.1rem 0}
.buy-link{display:block;text-align:center;padding:.75rem 1rem;border-radius:8px;
  font-weight:600;color:#fff}
.buy-shopee{background:#ee4d2d}
.buy-tokopedia{background:#03ac0e}
.buy-tiktok{background:#111}
.buy-wa{background:#25d366}
.buy-link:hover{opacity:.92}
.hero-cta .buy-group{display:contents}
.hero-cta .buy-link{padding:.75rem 1.4rem;font-size:.92rem}

/* ---------- product page ---------- */
.crumbs{font-size:.85rem;color:var(--muted);margin:1.75rem 0 1rem}
.crumbs a:hover{color:var(--text)}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.gallery .g-main img{border-radius:14px;aspect-ratio:1/1;object-fit:cover;box-shadow:var(--shadow);
  filter:saturate(.94) contrast(1.03) brightness(1.02) sepia(.06)}
/* product-page gallery gets the same warm vignette as the catalogue cards */
.gallery .g-main{position:relative}
.gallery .g-main::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:radial-gradient(78% 78% at 50% 44%,
    rgba(166,123,91,0) 44%, rgba(166,123,91,.12) 76%, rgba(138,96,62,.26) 100%);
  mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(166,123,91,.14)}
.gallery .g-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:.6rem;margin-top:.75rem}
.g-thumbs img{aspect-ratio:1/1;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}
.g-thumbs img:hover{border-color:var(--wood)}
.product-buy h1{font-size:1.9rem;line-height:1.25;margin:.3rem 0 .8rem}
.big-price{font-size:1.8rem;font-weight:800;color:var(--homu-red);font-family:var(--sans)}
.sku{font-size:.8rem;color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.75rem}
.product-desc{margin-top:3rem}
.md{max-width:75ch}
.md p{margin:.85rem 0}
.md h2{margin-top:1.8rem;font-size:1.4rem}
.md figure{margin:1.25rem 0}
.md figure img{border-radius:12px}
.md figure figcaption{font-size:.8rem;color:var(--muted);margin-top:.4rem}
.md ul{margin:.7rem 0;padding-left:1.35rem}
.md .callout{background:var(--cream);border-left:3px solid var(--wood);
  padding:1rem 1.15rem;border-radius:0 8px 8px 0;margin:1.1rem 0}
.related{margin-top:3.5rem}

/* ---------- blog post ---------- */
.post{max-width:760px;margin:0 auto;padding-top:2rem}
.post .p-cat{display:inline-block;margin-bottom:.4rem}
.post h1{font-size:2.1rem;line-height:1.25;margin:.3rem 0 1.25rem}
.post-hero{width:100%;border-radius:14px;margin:1rem 0 1.75rem;aspect-ratio:16/9;object-fit:cover}

/* ---------- footer ---------- */
.site-foot{background:var(--dark);color:#E9E2DB;padding:3.5rem 1.5rem 1.75rem;margin-top:4rem}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr);gap:2.5rem}
.site-foot a{color:var(--wood-light)}
.site-foot a:hover{color:#fff}
.site-foot h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:#B9AC9E;margin:0 0 .9rem}
.site-foot .f-brand{font-family:var(--serif);font-size:1.5rem;margin:0 0 .5rem}
.site-foot p{margin:.35rem 0;color:#CFC4BA;font-size:.92rem}
.foot-social{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.foot-social a{border:1px solid #4A423B;padding:.4rem .8rem;border-radius:6px;font-size:.82rem}
.foot-news p{margin-bottom:.8rem}
.foot-news form{display:flex;gap:.5rem}
.foot-news input{flex:1;background:#3A332E;border:1px solid #4A423B;border-radius:6px;
  padding:.65rem .9rem;color:#E9E2DB;font-size:.9rem}
.foot-news input::placeholder{color:#8d8177}
.foot-news button{background:var(--homu-red);color:#fff;border:0;border-radius:6px;
  padding:.65rem 1.2rem;font-weight:600;cursor:pointer}
.copy{max-width:var(--maxw);margin:2.5rem auto 0;padding-top:1.25rem;
  border-top:1px solid #4A423B;font-size:.8rem;color:#A99E92;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cat-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cat-tile{height:200px}
  .hero{grid-template-columns:1fr;padding-top:1.6rem}
  .hero h1{font-size:2.5rem}
  /* the GRID CHILD is .hero-img-wrap, so `order` must go on the wrapper. Setting it on
     .hero-img (as this did) reordered the <img> inside its own wrapper — a no-op that left
     the product photo BELOW the whole text block, at y=767 on a 390px phone. */
  .hero-img-wrap{order:-1}
  .hero-img{aspect-ratio:16/10}
  .hero-badge{right:12px;bottom:12px;max-width:78%}
  .product-layout{grid-template-columns:1fr}
  .values-band{grid-template-columns:1fr;padding:2rem 1.5rem}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  section{padding:3rem 0}

  /* --- header: this was the phone defect ---
     `.site-head nav` had flex-wrap:wrap and no mobile override, so the 5 room links broke into
     THREE rows inside a sticky header — one link landing ABOVE the logo (measured: header 148px
     = 18% of an 844px screen, nav rows at y=10/58/105 with the brand at y=54).
     Fix: brand on row 1, rooms as a single swipeable strip on row 2. */
  .site-head .head-in{flex-wrap:wrap;row-gap:0;padding:.45rem 1rem .15rem}
  .site-head a.brand{order:1;margin-right:auto}
  .site-head .head-cta{order:2}
  .site-head nav{
    order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:1.15rem;
    padding:.3rem 0 .5rem;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .site-head nav::-webkit-scrollbar{display:none}
  .site-head nav a{white-space:nowrap;font-size:.9rem}
}
@media(max-width:520px){
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem}
  .cat-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .p-title{font-size:.88rem}
  .hero h1{font-size:2rem}
  h2{font-size:1.5rem}
  .head-cta{display:none}
  .site-head nav{gap:1rem}
  .wa-band{padding:1.5rem;gap:1.2rem}
  .wa-band h3{font-size:1.2rem}
  .wa-band .btn{width:100%}
}

/* ---------------------------------------------- WhatsApp special-price CTA */
.btn-wa{background:#25d366;border-color:#25d366;color:#fff}
.btn-wa:hover{background:#1da851;border-color:#1da851;color:#fff}
.buy-wa-primary{background:#25d366;font-weight:600;box-shadow:0 2px 10px rgba(37,211,102,.3)}
.wa-band{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#0e2f1f,#134f33);border-radius:16px;padding:2.25rem 2.5rem}
.wa-band .wa-txt{max-width:60ch}
.wa-band .kicker{color:#7fe3aa}
.wa-band h3{color:#fff;font-size:1.5rem;margin:.4rem 0 .6rem}
.wa-band p{margin:0;color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.6}
.wa-band .btn{white-space:nowrap}

/* ============================================================ EXHIBITION
   Added for the 121-product catalogue (scripts/build-exhibition.py). Kept in the same
   file so there is ONE design system rather than a fork. */
.preview-bar{background:#2B2622;color:#E9E2DB;font-size:.83rem;text-align:center;
  padding:.5rem 1rem;line-height:1.5}
.preview-bar b{color:#fff}
.chip-soon{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:#ead8c0;color:#6b4f33;border-radius:999px;
  padding:.1rem .5rem;margin-left:.4rem;vertical-align:middle}
.preview-bar .chip-soon{margin-left:.2rem}

/* hero stats */
.hero-stats{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.4rem}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--serif);font-size:1.5rem;color:var(--homu-red);line-height:1.2}
.hero-stats span{font-size:.78rem;color:var(--muted);letter-spacing:.04em}

/* rooms */
.rooms-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin-top:1.5rem}
.room-tile{position:relative;display:block;height:210px;border-radius:12px;overflow:hidden;
  background:var(--cream);isolation:isolate}
.room-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;z-index:-2}
.room-tile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(33,28,23,0) 16%,rgba(33,28,23,.48) 50%,rgba(33,28,23,.92) 100%)}
.room-tile:hover img{transform:scale(1.06)}
.room-tile .tile-txt{position:absolute;left:1rem;right:1rem;bottom:.9rem;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.room-tile .tile-txt b{font-family:var(--serif);font-size:1.12rem;font-weight:600;display:block}
.room-tile .tile-txt small{opacity:.86;font-size:.76rem}

/* series chips */
.series-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem}
.chip{display:inline-flex;flex-direction:column;gap:.1rem;background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:.55rem 1rem}
.chip b{font-size:.86rem;letter-spacing:.04em}
.chip small{font-size:.72rem;color:var(--muted)}
.muted-note{font-size:.85rem;color:var(--muted)}
.lead b{color:var(--text)}

/* product cards: image wrapper + stock line + unbuilt state */
/* --- warm stage: one visual "mat" for every product image --------------------
   The catalogue draws from Shopee listing photos whose backgrounds are all over
   the place: white studio, dark promo banner, wood table, blue banner. Nothing can
   make those identical without cutting the product out (unreliable across 118
   diverse SKUs), so instead every image sits in the SAME warm field and receives
   the same gentle warm grade. The grade is deliberately light: push it hard and the
   Sakura-pink tumbler stops being pink, which misrepresents the product a buyer
   receives. Harmonise the FRAME strongly, the product only slightly. */
.p-img{aspect-ratio:1/1;overflow:hidden;position:relative;border-radius:8px;padding:9%;
  background:radial-gradient(120% 100% at 50% 26%,
    #FCF9F4 0%, var(--cream) 50%, #EEE1D0 86%, #E6D6C1 100%)}
/* The source photos are 1:1 and so is the card, so `contain` would fill the box and the
   warm field would never be visible. The inset padding is what makes the treatment real:
   every product is mounted on the SAME warm mat, which unifies the grid far more than
   grading can — and it does not touch the product's own colour at all. */
.p-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:5px;
  filter:saturate(.97) contrast(1.02) brightness(1.01)}
/* warm vignette, transparent at the centre so product colour survives; it also feathers
   the photo's own background into the mat rather than butting against it */
.p-img::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background:radial-gradient(72% 72% at 50% 46%,
    rgba(166,123,91,0) 38%, rgba(166,123,91,.13) 70%, rgba(138,96,62,.30) 100%);
  mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(166,123,91,.14), inset 0 -14px 22px rgba(138,96,62,.09)}
.no-img{display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--muted);font-size:.8rem;background:var(--cream)}
.p-stock{font-size:.76rem;color:var(--muted);margin:0}
.p-soon{border-style:dashed;background:#fcfaf7}
.p-soon:hover{transform:none;box-shadow:none}
.p-card{align-items:stretch}
.p-card .chip-soon{align-self:flex-end;margin:-1.6rem .7rem .6rem}

/* product page: stock + variant list */
.stock-line{font-size:.92rem;color:var(--muted);margin:.4rem 0 0}
.stock-line b{color:#1f7a44}
.stock-line.thin b{color:#a8631c}
.stock-line.thin{background:#fdf6ec;border-left:3px solid #d9a45b;padding:.6rem .8rem;border-radius:0 6px 6px 0}
.stock-line.warn{background:#fdeeee;border-left:3px solid #cf7d84;padding:.6rem .8rem;
  border-radius:0 6px 6px 0;color:#8a3a41;margin-top:.5rem}
.price-range{font-size:.85rem;color:var(--muted);margin:.15rem 0 .6rem}
.big-price .from{display:block;font-size:.7rem;font-weight:600;color:var(--muted);
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:.1rem}
.variants{margin:1.1rem 0 .5rem;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.variants h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0;padding:.7rem 1rem;background:var(--cream);border-bottom:1px solid var(--line)}
.variants ul{list-style:none;margin:0;padding:0}
.variant{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.6rem 1rem;border-bottom:1px solid #f1ece5;font-size:.9rem}
.variant:last-child{border-bottom:0}
.v-name{color:var(--text)}
.v-price{font-weight:600;color:var(--homu-red);white-space:nowrap}
.v-out .v-name,.v-out .v-price{opacity:.45;text-decoration:line-through}
.g-empty{aspect-ratio:1/1;border-radius:14px;background:var(--cream);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.g-empty small{font-size:.78rem;opacity:.8}
.spec-list{padding-left:1.2rem;margin:.8rem 0}
.spec-list li{margin:.45rem 0}

@media(max-width:960px){
  .rooms-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .room-tile{height:180px}
  .hero-stats{gap:1.6rem}
}
@media(max-width:520px){
  .rooms-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
  .room-tile{height:150px}
  .room-tile .tile-txt b{font-size:.95rem}
  .hero-stats b{font-size:1.2rem}
  .variant{font-size:.84rem;padding:.5rem .75rem}
}

/* ---------------------------------------------- blog + FAQ (content sections) */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin:2rem 0}
.post-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;transition:.15s}
.post-card:hover{border-color:var(--wood);transform:translateY(-2px);box-shadow:var(--shadow)}
.post-card h3{font-family:var(--serif);font-size:1.15rem;margin:.6rem 0 .5rem;line-height:1.3}
.post-card p{color:var(--muted);font-size:.92rem;margin:0 0 .9rem}
.post-tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--homu-red);background:rgba(166,10,19,.07);
  padding:.25rem .6rem;border-radius:999px}
.post-more{font-size:.88rem;font-weight:600;color:var(--homu-red)}
/* one column for breadcrumb + article + footnote, so their left edges line up */
.narrow{max-width:70ch;margin:0 auto}
.post{max-width:none}
.post h1{margin-bottom:1.4rem}
/* the product callout inside an article: real pixels, real price, links into the catalogue */
.post-prod{display:flex;align-items:center;gap:1rem;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--wood);border-radius:var(--radius);padding:.85rem 1rem;margin:1.4rem 0;
  text-decoration:none}
.post-prod img{width:96px;height:96px;object-fit:contain;border-radius:6px;flex:0 0 auto;
  background:radial-gradient(120% 100% at 50% 30%,#FCF9F4 0%,var(--cream) 60%,#EEE1D0 100%)}
.post-prod small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.15rem}
.post-prod b{display:block;font-size:.95rem;line-height:1.3;color:var(--text)}
.post-prod i{display:block;font-style:normal;font-weight:700;color:var(--homu-red);margin-top:.2rem}
.post-foot{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted)}
.faq{margin:1.6rem 0}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:.95rem 1.15rem;margin-bottom:.7rem}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:flex-start}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--homu-red);font-weight:700;flex:0 0 auto}
.faq-item[open] summary::after{content:"\2013"}
.faq-item div{padding-top:.7rem;color:var(--muted);font-size:.95rem}

@media(max-width:960px){
  .post-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:520px){
  .post-grid{grid-template-columns:1fr}
  .post-prod img{width:74px;height:74px}
}