/* ==========================================================================
   ZeeFlorist — design system
   Palet & tipografi diambil dari template asli (Justinmind "Online florist"):
     #4a1f0d brown · #858b5f sage · #ffc37b apricot · #e0ac6d gold
     #1f4456 teal  · #fff4e5 cream
   Font: Bodoni Moda (display), Poppins (UI/body), Butler (aksen)
   Author: jpXCode — https://jpxcode.pages.dev
   ========================================================================== */

@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/Bodoni-Moda-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/Bodoni-Moda-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/Bodoni-Moda-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/Bodoni-Moda-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/Bodoni-Moda-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Butler'; src: url('../assets/fonts/Butler-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --cream: #fff4e5;
  --cream-soft: #fdf9f3;
  --sand: #f7ead8;
  --brown: #4a1f0d;
  --brown-soft: #6b3a24;
  --sage: #858b5f;
  --sage-dark: #5f6543;
  --apricot: #ffc37b;
  --salmon: #fbc3a7;
  --gold: #e0ac6d;
  --teal: #1f4456;
  --teal-soft: #446a7d;
  --ink: #2a1710;
  --white: #fff;
  --line: rgba(74, 31, 13, .14);
  --line-strong: rgba(74, 31, 13, .26);
  --shadow-sm: 0 2px 10px rgba(74, 31, 13, .07);
  --shadow: 0 14px 40px rgba(74, 31, 13, .13);
  --shadow-lg: 0 26px 70px rgba(74, 31, 13, .19);
  --radius: 4px;
  --radius-lg: 10px;
  --wrap: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Umpan balik ketuk dipasang lewat :active agar konsisten di Android/iOS. */
  -webkit-tap-highlight-color: transparent;
  /* WAJIB di root, bukan hanya di body. Laci yang digeser ke luar layar
     (menu & keranjang) menambah lebar area gulir dokumen; di ponsel itu
     membuat viewport tata letak melebar (mis. 360px -> 666px) sehingga
     width:100% pada laci keranjang dihitung terhadap lebar yang salah dan
     laci jadi lebih lebar dari layar. Dipasang di root, area gulir itu
     tidak pernah terbentuk. `body` sengaja TIDAK diberi overflow sendiri
     supaya header sticky tetap menempel ke viewport. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}

body.is-locked { overflow: hidden; }
/* Dipakai laci menu telepon (js/app.js). Dibedakan dari .is-locked keranjang
   supaya menutup menu tidak membuka kunci scroll keranjang yang sedang terbuka. */
body.is-nav-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, .display {
  font-family: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 3rem, 860px); margin-inline: auto; }

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin: 0 0 1rem;
}
.eyebrow.on-dark { color: var(--apricot); }

.lede { font-size: 1.06rem; color: var(--brown-soft); max-width: 60ch; }

.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--sand { background: var(--sand); }
.section--teal { background: var(--teal); color: var(--cream); }
.section--teal h2, .section--teal h3 { color: var(--cream); }
.section--teal .lede { color: rgba(255, 244, 229, .78); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head--split {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: flex-end; justify-content: space-between;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2.1rem;
  background: var(--brown); color: var(--cream);
  border-radius: var(--radius);
  font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--sage-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; color: var(--brown); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.btn--light { background: var(--cream); color: var(--brown); }
.btn--light:hover { background: var(--apricot); color: var(--brown); }
.btn--outline-light { background: transparent; color: var(--cream); border: 1px solid rgba(255, 244, 229, .5); }
.btn--outline-light:hover { background: var(--cream); color: var(--brown); }
.btn--block { width: 100%; }
.btn--sm { padding: .72rem 1.4rem; font-size: .7rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.link-more {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brown); border-bottom: 1px solid var(--line-strong); padding-bottom: .3rem;
  transition: gap .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.link-more:hover { gap: .9rem; color: var(--sage-dark); border-color: var(--sage-dark); }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 244, 229, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { border-color: var(--line); box-shadow: var(--shadow-sm); }

.topbar {
  background: var(--teal); color: rgba(255, 244, 229, .9);
  font-size: .74rem; letter-spacing: .08em;
}
.topbar .wrap { display: flex; justify-content: center; gap: 1rem; align-items: center; padding: .5rem 0; text-align: center; }
.topbar a { border-bottom: 1px solid rgba(255, 244, 229, .45); }
.topbar a:hover { color: var(--apricot); border-color: var(--apricot); }

.nav { display: flex; align-items: center; gap: 2rem; padding: 1.1rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand__mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--brown); color: var(--apricot);
  border-radius: 50%;
  font-family: 'Bodoni Moda', serif; font-size: 1.25rem; font-weight: 700;
}
.brand__name {
  font-family: 'Bodoni Moda', serif; font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1;
}
.brand__name em { font-style: italic; color: var(--sage-dark); }
.brand__tag { display: block; font-family: 'Poppins', sans-serif; font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sage-dark); margin-top: .2rem; }

.menu { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative;
  font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brown);
  padding: .3rem 0;
  transition: color .25s var(--ease);
}
.menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--sage-dark); transition: width .3s var(--ease);
}
.menu a:hover, .menu a[aria-current='page'] { color: var(--sage-dark); }
.menu a:hover::after, .menu a[aria-current='page']::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--brown);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover { background: var(--sand); color: var(--sage-dark); }
.icon-btn svg { width: 20px; height: 20px; }

.badge-count {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--sage-dark); color: var(--cream);
  border-radius: 999px;
  font-size: .62rem; font-weight: 600; letter-spacing: 0;
}
.badge-count[hidden] { display: none; }

.burger { display: none; }

/* Tirai laci menu — dibuat oleh js/app.js hanya bila burger tersedia.
   z-index di antara header (60) dan laci menu (70). */
.nav-scrim {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(31, 20, 12, .48); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 901px) { .nav-scrim { display: none; } }

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__grid {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 6rem);
}
.hero__title em { font-style: italic; color: var(--sage-dark); }
.hero__copy { margin: 1.6rem 0 2.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__media { position: relative; }
.hero__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero__cutout {
  position: absolute; right: -6%; bottom: -8%; width: 46%;
  filter: drop-shadow(0 18px 30px rgba(74, 31, 13, .22));
  pointer-events: none;
}
.hero__stamp {
  position: absolute; left: -1.5rem; bottom: 2.2rem;
  background: var(--cream); border-radius: 50%;
  width: 116px; height: 116px;
  display: grid; place-items: center; text-align: center;
  box-shadow: var(--shadow);
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brown-soft); line-height: 1.5;
}
.hero__stamp strong { display: block; font-family: 'Bodoni Moda', serif; font-size: 1.9rem; color: var(--brown); letter-spacing: 0; }

/* marquee */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--cream-soft); overflow: hidden;
}
.marquee__track {
  display: flex; gap: 3.5rem; padding: .9rem 0; width: max-content;
  animation: slide 34s linear infinite;
}
.marquee span {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sage-dark); white-space: nowrap;
}
.marquee span::before { content: '✽'; margin-right: .9rem; color: var(--gold); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------------------------------------------------------------- service -- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; }
.service { border-top: 1px solid var(--line-strong); padding-top: 1.4rem; }
.service__num {
  font-family: 'Bodoni Moda', serif; font-size: 1rem; color: var(--gold);
  letter-spacing: .1em; display: block; margin-bottom: .5rem;
}
.service h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.service p { font-size: .9rem; color: var(--brown-soft); }

/* --------------------------------------------------------------- kategori -- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cat {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 420px; display: flex; align-items: flex-end;
  color: var(--cream); padding: 2rem;
  background: var(--brown);
}
.cat img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease); z-index: 0;
}
.cat::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(31, 20, 12, .82) 8%, rgba(31, 20, 12, .1) 62%);
}
.cat > * { position: relative; z-index: 2; }
.cat__body { width: 100%; }
.cat h3 { color: var(--cream); margin-bottom: .4rem; }
.cat p { font-size: .88rem; color: rgba(255, 244, 229, .82); margin-bottom: 1rem; }
.cat:hover img { transform: scale(1.06); }
.cat .link-more { color: var(--cream); border-color: rgba(255, 244, 229, .5); }
.cat .link-more:hover { color: var(--apricot); border-color: var(--apricot); }

/* ------------------------------------------------------------------ kartu -- */
.grid-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1.8rem 1.5rem;
}

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--sand), var(--cream-soft));
  aspect-ratio: 704 / 800; margin-bottom: 1rem;
}
.card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 6%; transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.card__media img.card__zoom { opacity: 0; }
.card:hover .card__media img.card__card { opacity: 0; }
.card:hover .card__media img.card__zoom { opacity: 1; transform: scale(1.04); }

.card__badges { position: absolute; top: .9rem; left: .9rem; display: flex; flex-direction: column; gap: .4rem; z-index: 3; }
.chip {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--brown); color: var(--cream);
}
.chip--sale { background: var(--gold); color: var(--brown); }
.chip--new { background: var(--sage-dark); color: var(--cream); }

.card__fav {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); color: var(--brown);
  box-shadow: var(--shadow-sm);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.card__fav:hover { transform: scale(1.08); }
.card__fav.is-on { background: var(--brown); color: var(--salmon); }
.card__fav svg { width: 17px; height: 17px; }

.card__quick {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem; z-index: 3;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
.card__quick .btn { width: 100%; box-shadow: var(--shadow); }

.card__collection { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-dark); margin: 0 0 .35rem; }
.card__collection a:hover { color: var(--brown); text-decoration: underline; }
.pdp__collection a:hover { color: var(--brown); text-decoration: underline; }
.card__name { font-family: 'Bodoni Moda', serif; font-size: 1.22rem; font-weight: 500; margin: 0 0 .3rem; }
.card__name a:hover { color: var(--sage-dark); }
.card__price { font-size: .95rem; font-weight: 500; color: var(--brown-soft); }
.card__price s { color: rgba(74, 31, 13, .4); font-weight: 400; margin-right: .45rem; }

/* --------------------------------------------------------------- toolbar -- */
.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; background: var(--cream-soft);
  border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 2rem;
}
.search {
  position: relative; flex: 1 1 260px; max-width: 380px;
}
.search svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--sage-dark); }
.search input {
  width: 100%; padding: .8rem 1rem .8rem 2.7rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(133, 139, 95, .18); }

.toolbar-controls { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.field { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--brown-soft); }
.field select {
  padding: .62rem .9rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: .84rem; outline: none;
}
.field select:focus { border-color: var(--sage); }
.result-count { font-size: .82rem; color: var(--sage-dark); }

.shop-layout { display: grid; grid-template-columns: 236px 1fr; gap: 2.5rem; align-items: start; }

.filters { position: sticky; top: 108px; }
.filters__group { border-bottom: 1px solid var(--line); padding-bottom: 1.3rem; margin-bottom: 1.3rem; }
.filters__group h4 {
  font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brown); margin: 0 0 .9rem;
}
.check { display: flex; align-items: center; gap: .6rem; padding: .32rem 0; font-size: .88rem; color: var(--brown-soft); cursor: pointer; }
.check input { accent-color: var(--sage-dark); width: 16px; height: 16px; }
.check:hover { color: var(--brown); }

.range { display: flex; flex-direction: column; gap: .5rem; }
.range input[type='range'] { accent-color: var(--sage-dark); width: 100%; }
.range__value { font-size: .84rem; color: var(--brown-soft); }

.empty-state { text-align: center; padding: 4rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty-state h3 { margin-bottom: .5rem; }
.empty-state p { color: var(--brown-soft); margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ cart -- */
.cart-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(31, 20, 12, .5); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.cart-scrim.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 100%);
  background: var(--cream); display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .42s var(--ease);
  box-shadow: var(--shadow-lg);
}
.cart.is-open { transform: none; }
.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line);
}
.cart__head h2 { font-size: 1.35rem; }
.cart__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; }
.cart__foot { padding: 1.3rem 1.6rem 1.6rem; border-top: 1px solid var(--line); background: var(--cream-soft); }

.cart-line { display: grid; grid-template-columns: 74px 1fr auto; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__img { width: 74px; height: 84px; object-fit: contain; background: var(--sand); border-radius: var(--radius); padding: 6px; }
.cart-line__name { font-family: 'Bodoni Moda', serif; font-size: 1.05rem; margin: 0 0 .15rem; }
.cart-line__meta { font-size: .74rem; color: var(--sage-dark); letter-spacing: .06em; text-transform: uppercase; }
.cart-line__price { font-size: .86rem; color: var(--brown-soft); margin-top: .35rem; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; font-size: .95rem; color: var(--brown); transition: background .2s var(--ease); }
.qty button:hover { background: var(--sand); }
.qty span { min-width: 26px; text-align: center; font-size: .84rem; font-weight: 500; }

.cart-line__remove { align-self: start; color: rgba(74, 31, 13, .45); font-size: 1.1rem; line-height: 1; padding: .2rem; }
.cart-line__remove:hover { color: #b4472e; }

.cart__row { display: flex; justify-content: space-between; font-size: .88rem; color: var(--brown-soft); margin-bottom: .45rem; }
.cart__row--total { font-family: 'Bodoni Moda', serif; font-size: 1.35rem; color: var(--brown); padding-top: .7rem; border-top: 1px solid var(--line); margin: .7rem 0 1.1rem; }
.cart__note { font-size: .76rem; color: var(--sage-dark); text-align: center; margin-top: .8rem; }

.cart__empty { text-align: center; padding: 3.5rem 1rem; color: var(--brown-soft); }
.cart__empty svg { width: 44px; height: 44px; color: var(--gold); margin-bottom: 1rem; }

/* --------------------------------------------------------------- product -- */
/* Breadcrumb — satu markup untuk semua halaman (lihat tools/partials.js crumbs()).
   Dipisah dengan gap, bukan margin pada <span>, supaya jarak tetap rapi
   walau label dilipat di layar sempit. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-dark);
  margin: 1.6rem 0;
}
.crumbs a:hover { color: var(--brown); text-decoration: underline; }
.crumbs a { color: inherit; }
.crumbs > span[aria-hidden] { color: var(--line-strong); }
.crumbs [aria-current='page'] { color: var(--brown); }
/* dipakai saat section induk sudah memberi jarak atas sendiri */
.crumbs--flush { margin-top: 0; }

.product-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding: 0 0 clamp(3rem, 6vw, 5rem); }

.gallery__main {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--sand), var(--cream-soft));
  aspect-ratio: 1 / 1; cursor: zoom-in;
}
.gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; transition: transform .3s var(--ease); }
.gallery__main.is-zoomed img { transform: scale(1.85); cursor: zoom-out; }
.gallery__thumbs { display: flex; gap: .8rem; margin-top: 1rem; }
.gallery__thumb {
  width: 84px; height: 92px; border-radius: var(--radius); overflow: hidden; padding: 6px;
  background: var(--sand); border: 1px solid transparent; transition: border-color .25s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.is-active { border-color: var(--brown); }

.pdp__collection { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage-dark); margin: 0 0 .6rem; }
.pdp__title { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: .7rem; }
.pdp__price { font-family: 'Bodoni Moda', serif; font-size: 1.8rem; color: var(--brown); margin-bottom: 1.2rem; }
.pdp__price s { font-size: 1.15rem; color: rgba(74, 31, 13, .38); margin-right: .6rem; }
.pdp__text { color: var(--brown-soft); margin-bottom: 1.6rem; }


.pdp__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.6rem 0; }
.qty--lg { border-radius: var(--radius); margin-top: 0; }
.qty--lg button { width: 50px; height: 52px; font-size: 1.1rem; }
.qty--lg span { min-width: 40px; font-size: .98rem; }

.pdp__facts { display: grid; gap: .9rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 1.4rem; }
.fact { display: flex; gap: .9rem; align-items: flex-start; }
.fact svg { width: 20px; height: 20px; flex: none; color: var(--sage-dark); margin-top: .25rem; }
.fact strong { display: block; font-size: .9rem; font-weight: 500; color: var(--brown); }
.fact span { font-size: .84rem; color: var(--brown-soft); }

.stem-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.stem-list li {
  padding: .42rem 1rem; border-radius: 999px;
  background: var(--sand); border: 1px solid var(--line);
  font-size: .8rem; color: var(--brown-soft);
}

.spec-list { margin: 0 0 1.6rem; padding: 0; display: grid; gap: .1rem; }
.spec-list > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.spec-list > div:first-child { border-top: 1px solid var(--line); }
/* Judul blok di dalam halaman produk (mis. "Isi rangkaian") */
.pdp__head { font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-dark); margin: 0 0 .9rem; }

.spec-list dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-dark); }
.spec-list dd { margin: 0; font-size: .9rem; color: var(--brown); text-align: right; }

.pdp__accordion { margin-top: 1.5rem; }
.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brown);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 1.15rem; color: var(--sage-dark); }
.acc[open] summary::after { content: '–'; }
.acc p { font-size: .9rem; color: var(--brown-soft); padding-bottom: 1rem; }

.related { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- banner -- */
.banner { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.banner img { width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; }
.banner__overlay {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: linear-gradient(90deg, rgba(31, 68, 86, .82), rgba(31, 68, 86, .45));
  color: var(--cream); padding: 2rem;
}
.banner__overlay h2 { color: var(--cream); max-width: 22ch; margin-inline: auto; }
.banner__overlay p { color: rgba(255, 244, 229, .85); max-width: 52ch; margin: 1rem auto 1.8rem; }

/* ----------------------------------------------------------------- story -- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story__media { position: relative; }
.story__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.story__media--stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.story__media--stack img:first-child { grid-row: span 2; height: 100%; object-fit: cover; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; text-align: center; }
.stat__num { font-family: 'Bodoni Moda', serif; font-size: clamp(2.4rem, 4.4vw, 3.4rem); color: var(--apricot); line-height: 1; }
.stat__label { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 244, 229, .72); margin-top: .6rem; }

/* -------------------------------------------------------------- inspirasi -- */
.tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.5rem; }
.tab {
  padding: .68rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brown-soft); background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tab:hover { border-color: var(--brown); color: var(--brown); }
.tab.is-active { background: var(--brown); border-color: var(--brown); color: var(--cream); }

.masonry { columns: 4 220px; column-gap: 1.2rem; }
.masonry figure { margin: 0 0 1.2rem; break-inside: avoid; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.masonry img { width: 100%; transition: transform .7s var(--ease); }
.masonry figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1rem .9rem;
  background: linear-gradient(to top, rgba(31, 20, 12, .8), transparent);
  color: var(--cream); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.masonry figure:hover img { transform: scale(1.05); }
.masonry figure:hover figcaption { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- contact -- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); margin-bottom: .45rem; }
.form input, .form select, .form textarea {
  width: 100%; padding: .9rem 1.1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .92rem; outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(133, 139, 95, .16); }
.form__note { font-size: .76rem; color: var(--sage-dark); }

.form-message {
  padding: .95rem 1.1rem; border-radius: var(--radius); font-size: .88rem; display: none;
}
.form-message.is-visible { display: block; }
.form-message.is-ok { background: rgba(133, 139, 95, .16); color: var(--sage-dark); border: 1px solid rgba(133, 139, 95, .4); }

.contact-aside { display: grid; gap: 1.6rem; }
.contact-media { border-radius: var(--radius-lg); overflow: hidden; }
.contact-media img { width: 100%; height: 300px; object-fit: cover; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.info-list li { display: flex; gap: .85rem; font-size: .9rem; color: var(--brown-soft); }
.info-list svg { width: 18px; height: 18px; flex: none; color: var(--sage-dark); margin-top: .3rem; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--teal); color: rgba(255, 244, 229, .82); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.site-footer .brand__mark { background: var(--apricot); color: var(--brown); }
.site-footer .brand__name { color: var(--cream); }
.site-footer .brand__tag { color: rgba(255, 244, 229, .6); }
.footer-about { font-size: .88rem; margin-top: 1.1rem; max-width: 34ch; }
.footer-col h4 {
  font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream); margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
/* Baris informasi (alamat) di kolom kontak footer — bukan tautan. */
.footer-note { font-size: .86rem; color: rgba(255, 244, 229, .72); }
.footer-col a { font-size: .86rem; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--apricot); }

.newsletter { display: flex; gap: .6rem; margin-top: 1.2rem; max-width: 380px; }
.newsletter input {
  flex: 1; padding: .8rem 1.1rem; border-radius: var(--radius);
  background: rgba(255, 244, 229, .1); border: 1px solid rgba(255, 244, 229, .28);
  color: var(--cream); font-size: .88rem; outline: none;
}
.newsletter input::placeholder { color: rgba(255, 244, 229, .55); }
.newsletter input:focus { border-color: var(--apricot); }
.newsletter button { padding: .8rem 1.5rem; background: var(--apricot); color: var(--brown); border-radius: var(--radius); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.newsletter button:hover { background: var(--cream); }

.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 244, 229, .16);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .8rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom a:hover { color: var(--apricot); }
.author { font-size: .8rem; }
.author a { color: var(--apricot); font-weight: 500; border-bottom: 1px solid rgba(255, 195, 123, .4); }
.author a:hover { color: var(--cream); border-color: var(--cream); }

/* ----------------------------------------------------------------- toast -- */
.toast-stack { position: fixed; left: 50%; bottom: 2rem; z-index: 120; transform: translateX(-50%); display: grid; gap: .6rem; justify-items: center; pointer-events: none; }
.toast {
  background: var(--brown); color: var(--cream);
  padding: .8rem 1.5rem; border-radius: 999px;
  font-size: .84rem; box-shadow: var(--shadow);
  animation: toast-in .3s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* =============================================================== respons ==
   STRATEGI: ponsel didahulukan (mobile first).
   Bobot desain utama ada di blok <=620px karena mayoritas pengunjung datang
   dari telepon. Breakpoint yang lebih lebar hanya merenggangkan tata letak
   yang sudah benar di layar kecil (satu kolom, target sentuh besar, teks
   terbaca tanpa zoom).
   Urutan dari layar terlebar ke tersempit supaya aturan tersempit menang.

   Catatan: breakpoint memakai max-width karena berkas ini tumbuh dari desain
   desktop yang sudah disetujui; mengubahnya menjadi min-width berarti menulis
   ulang seluruh 700 baris di atas dan berisiko merusak tampilan yang sudah
   bagus di laptop. Yang penting: seluruh keputusan tata letak ponsel di bawah
   ini bersifat mandiri, bukan sisa dari aturan desktop.
   ====================================================================== */

/* -------------------------------------------------- tablet lebar & kecil -- */
@media (max-width: 1080px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters__group { display: inline-block; vertical-align: top; border: 0; margin: 0 2rem 0 0; padding: 0; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------- tablet & navigasi laci 900 -- */
@media (max-width: 900px) {
  .burger { display: grid; }

  /* backdrop-filter pada header membuat header menjadi containing block bagi
     keturunan position:fixed (laci menu ada di dalamnya). Akibatnya inset:0
     mengikuti TINGGI HEADER, bukan tinggi layar, dan laci jadi setinggi bilah
     header saja. Di ponsel efek kaca ini juga tidak terlihat karena latarnya
     nyaris pekat, jadi dimatikan supaya laci memakai viewport sebagai acuan. */
  .site-header { backdrop-filter: none; }

  .menu {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); z-index: 70;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
    background: var(--cream); padding: 3rem 2.4rem;
    transform: translateX(102%); transition: transform .4s var(--ease);
    box-shadow: var(--shadow-lg);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .menu.is-open { transform: none; }
  .menu a { font-size: 1rem; }

  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__cutout { width: 40%; right: -4%; }
  .hero__stamp { left: auto; right: 1rem; bottom: -2rem; width: 96px; height: 96px; }
  .product-detail { grid-template-columns: 1fr; }
  .story, .contact-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2 160px; }
}

/* ================================================ PONSEL — lapisan utama == */
@media (max-width: 620px) {
  /* --- kerangka halaman: kolom lebih lega, jarak vertikal lebih rapat --- */
  .wrap, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }
  .section { padding: clamp(2.7rem, 10vw, 3.6rem) 0; }
  .section--tight { padding: clamp(2rem, 7vw, 2.7rem) 0; }
  .section-head { margin-bottom: 1.7rem; }
  .section-head--split { gap: 1rem 1.5rem; }
  h1 { font-size: clamp(2.05rem, 9.2vw, 2.7rem); }
  h2 { font-size: clamp(1.7rem, 7.4vw, 2.15rem); }
  h3 { font-size: 1.18rem; }
  .lede { font-size: 1rem; }
  .eyebrow { font-size: .68rem; letter-spacing: .22em; margin-bottom: .7rem; }

  /* --- bilah promo: dua baris rapi, nomor telepon tidak terpotong --- */
  .topbar .wrap { font-size: .66rem; line-height: 1.55; padding: .45rem 0; gap: .3rem; }
  .topbar a { white-space: nowrap; }

  /* --- header: tinggi tetap, tagline logo disembunyikan ------------------
     Tanpa ini, .brand__tag yang panjang memaksa logo jadi 3-4 baris di layar
     360px dan header melar. Nama brand tetap terbaca.                       */
  .nav { padding: .7rem 0; gap: .9rem; }
  .brand__tag { display: none; }
  .brand__name { font-size: 1.3rem; }
  .brand__mark { width: 38px; height: 38px; font-size: 1.1rem; }
  .nav-actions { gap: .25rem; }
  .icon-btn { width: 42px; height: 42px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .badge-count { top: 0; }

  /* laci menu: sisakan ruang di atas untuk header & safe area iPhone */
  .menu {
    width: min(300px, 86vw); gap: 1.4rem; padding: 5rem 1.8rem 2rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  .menu a { font-size: 1.05rem; }

  /* --- hero: satu kolom, foto lebih pendek agar CTA terlihat di layar --- */
  .hero__grid { padding: 1.7rem 0 2.4rem; gap: 1.9rem; }
  .hero__title br { display: none; }
  .hero__copy { margin: 1.1rem 0 1.7rem; }
  .hero__cta { gap: .6rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__photo { aspect-ratio: 4 / 3.6; }
  .hero__cutout { width: 32%; right: -3%; bottom: -4%; }
  .hero__stamp { width: 82px; height: 82px; right: .6rem; bottom: -.4rem; font-size: .54rem; letter-spacing: .08em; }
  .hero__stamp strong { font-size: 1.3rem; }

  /* --- marquee: lebih rapat supaya teks terbaca saat bergerak --- */
  .marquee__track { gap: 2.2rem; padding: .75rem 0; animation-duration: 26s; }
  .marquee span { font-size: .66rem; letter-spacing: .2em; }

  /* --- layanan, kategori, dan kartu produk --- */
  .services { gap: 1.4rem; }
  .service h3 { font-size: 1.12rem; }
  .cats { grid-template-columns: 1fr; gap: 1rem; }
  .cat { min-height: 250px; padding: 1.4rem; }
  .cat h3 { font-size: 1.4rem; }

  /* Kartu produk dipaksa 2 kolom (bukan auto-fill) supaya di layar 320-360px
     tetap terlihat seperti etalase, bukan daftar satu kolom yang panjang.   */
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .9rem; }
  .card__media { margin-bottom: .6rem; }
  .card__media img { padding: 4%; }
  .card__badges { top: .55rem; left: .55rem; gap: .3rem; }
  .chip { font-size: .54rem; padding: .22rem .5rem; letter-spacing: .1em; }
  .card__fav { width: 34px; height: 34px; top: .45rem; right: .45rem; }
  .card__fav svg { width: 15px; height: 15px; }
  .card__quick { left: .45rem; right: .45rem; bottom: .45rem; opacity: 1; transform: none; }
  .card__quick .btn { width: 100%; padding: .58rem .4rem; font-size: .6rem; letter-spacing: .08em; gap: .25rem; }
  .card__collection { font-size: .6rem; letter-spacing: .12em; margin-bottom: .25rem; }
  .card__name { font-size: .98rem; }
  .card__price { font-size: .82rem; }

  /* --- etalase: pencarian & urutan selebar layar, filter kembali bertumpuk -- */
  .shop-toolbar { padding: .9rem; gap: .8rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
  .search { flex: 1 1 100%; max-width: none; }
  .search input { font-size: 1rem; }   /* 16px: mencegah iOS memperbesar halaman saat fokus */
  .toolbar-controls { width: 100%; gap: .6rem; justify-content: space-between; }
  .result-count { flex: 1 1 auto; }
  /* Baris sendiri agar teks opsi urutan tidak terpotong di layar 320px. */
  .field { flex: 1 1 100%; justify-content: space-between; }
  .field select { flex: 1; min-width: 0; font-size: 1rem; }
  .filters { display: grid; gap: 1.1rem; }
  .filters__group {
    display: block; margin: 0; padding: 0 0 1rem;
    border-bottom: 1px solid var(--line);
  }
  .filters__group:last-child { padding-bottom: 0; border-bottom: 0; }

  /* --- halaman produk --- */
  .crumbs { font-size: .68rem; letter-spacing: .08em; margin: 1rem 0; gap: .35rem; }
  .product-detail { gap: 1.7rem; padding-bottom: 2.4rem; }
  .gallery__main { border-radius: var(--radius); }
  .gallery__thumbs {
    gap: .5rem; margin-top: .6rem; padding-bottom: .3rem;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .gallery__thumb { width: 64px; height: 70px; flex: none; scroll-snap-align: start; }
  .pdp__title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .pdp__price { font-size: 1.55rem; margin-bottom: 1rem; }
  .pdp__price s { font-size: 1rem; }
  .pdp__text { font-size: .96rem; margin-bottom: 1.3rem; }
  /* Tombol aksi setinggi jempol: jumlah qty satu baris penuh, lalu tombol. */
  .pdp__actions { gap: .6rem; margin: 1.4rem 0; }
  .pdp__actions .qty--lg { flex: 1 1 100%; justify-content: space-between; }
  .qty--lg button { width: 48px; height: 50px; }
  .qty--lg span { min-width: 34px; }
  .pdp__actions .btn { flex: 1 1 auto; padding: 1rem 1.2rem; }
  .pdp__actions .icon-btn { flex: none; }
  .pdp__head { font-size: .68rem; }
  .stem-list li { font-size: .78rem; padding: .38rem .85rem; }
  /* Spesifikasi jadi tumpuk kiri: nilai panjang tidak lagi terjepit. */
  .spec-list > div { flex-direction: column; gap: .1rem; padding: .6rem 0; }
  .spec-list dd { text-align: left; font-size: .88rem; }
  .acc summary { font-size: .74rem; letter-spacing: .1em; padding: .9rem 0; }
  .acc p { font-size: .88rem; }

  /* --- banner: foto lalu panel teks, tidak ada teks menumpuk di foto --- */
  .banner img { height: 210px; }
  .banner__overlay {
    position: static; display: block; text-align: left;
    background: var(--teal); padding: 1.5rem 1.25rem;
  }
  .banner__overlay h2 { max-width: none; }
  .banner__overlay p { max-width: none; margin: .9rem 0 1.3rem; font-size: .94rem; }
  .banner__overlay .btn { width: 100%; }

  /* --- kisah, angka, inspirasi --- */
  .story__media--stack { gap: .7rem; }
  /* Tiga angka statistik: dua sejajar, lalu satu melebar penuh — supaya
     tidak ada angka yang menggantung sendirian di setengah kolom. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .8rem; }
  .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat__num { font-size: 2.2rem; }
  .stat__label { font-size: .62rem; letter-spacing: .18em; }
  /* Tab kategori jadi strip yang digeser mendatar (bukan dua baris penuh). */
  .tabs {
    flex-wrap: nowrap; justify-content: flex-start; gap: .45rem;
    margin-bottom: 1.5rem; padding-bottom: .35rem;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .tab { flex: none; padding: .58rem 1.05rem; font-size: .66rem; letter-spacing: .12em; scroll-snap-align: start; }
  .masonry { columns: 2 140px; column-gap: .8rem; }
  .masonry figure { margin-bottom: .8rem; }
  .masonry figcaption { font-size: .66rem; padding: 1.1rem .7rem .7rem; letter-spacing: .12em; }

  /* --- kontak --- */
  .contact-grid { gap: 2.2rem; }
  .contact-media img { height: 220px; }
  .form { gap: .95rem; }
  .form__row { grid-template-columns: 1fr; gap: .95rem; }
  /* 16px pada kolom isian: di bawah itu iOS Safari memperbesar halaman. */
  .form input, .form select, .form textarea { font-size: 1rem; padding: .82rem .95rem; }
  .form textarea { min-height: 120px; }
  .form button[type='submit'] { width: 100%; }
  .info-list li { font-size: .88rem; }

  /* --- keranjang --- */
  .cart { width: 100%; }
  .cart__head { padding: 1.1rem 1.1rem; }
  .cart__head h2 { font-size: 1.2rem; }
  .cart__body { padding: 1rem 1.1rem; }
  .cart__foot { padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .cart-line { grid-template-columns: 62px 1fr auto; gap: .8rem; }
  .cart-line__img { width: 62px; height: 72px; }
  .cart-line__name { font-size: .98rem; }
  .qty button { width: 38px; height: 38px; }
  .qty span { min-width: 30px; }
  .cart__row--total { font-size: 1.2rem; }

  /* --- footer --- */
  .site-footer {
    padding-top: 2.6rem; margin-top: 2.6rem;
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
  }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-about { max-width: none; }
  .footer-col ul { gap: .5rem; }
  .newsletter { max-width: none; }
  .footer-bottom { margin-top: 2rem; flex-direction: column; align-items: flex-start; gap: .45rem; }

  /* --- lain-lain --- */
  .empty-state { padding: 2.6rem 1rem; }
  .toast-stack {
    width: calc(100% - 2rem);
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
    justify-items: stretch;
  }
  .toast { text-align: center; border-radius: var(--radius-lg); padding: .8rem 1rem; }
  .btn--sm { padding: .7rem 1.1rem; }
}

/* ========================================= ponsel kecil (<=430px) ======== */
/* Layar 360x640 ke bawah: rapatkan lagi gutter, tombol jadi penuh lebar. */
@media (max-width: 430px) {
  .wrap, .wrap-narrow { width: min(100% - 1.6rem, var(--wrap)); }
  h1 { font-size: clamp(1.85rem, 9.8vw, 2.25rem); }
  .hero__cta .btn { padding: .92rem 1.1rem; }
  .grid-products { gap: 1.3rem .75rem; }
  .card__name { font-size: .92rem; }
  .card__price { font-size: .78rem; }
  .cat { min-height: 220px; }
  .banner img { height: 180px; }
  .pdp__actions .btn { flex: 1 1 100%; }
  .gallery__thumb { width: 58px; height: 64px; }
  .newsletter { flex-direction: column; }
  .newsletter button { width: 100%; }
  .cat h3 { font-size: 1.25rem; }
  .stat__num { font-size: 2rem; }
}

/* ================================================ perangkat sentuh ======= */
/* Di layar sentuh :hover tidak pernah "lepas" setelah diketuk, sehingga efek
   yang hanya muncul saat hover menyembunyikan informasi. Berikut yang wajib
   selalu terlihat tanpa hover. */
@media (hover: none) {
  .masonry figcaption { opacity: 1; transform: none; }
  .card__quick { opacity: 1; transform: none; }
  /* Jangan tukar gambar kartu ke versi zoom: di ponsel gambar itu bisa tersangkut. */
  .card:hover .card__media img.card__card { opacity: 1; }
  .card:hover .card__media img.card__zoom { opacity: 0; transform: none; }
  .cat:hover img { transform: none; }
  .menu a:hover::after { width: 0; }
  /* Umpan balik ketuk pengganti efek hover. */
  .btn:hover, .icon-btn:hover, .card__fav:hover { transform: none; }
  .btn:active, .tab:active, .cat:active, .card__fav:active, .icon-btn:active { transform: scale(.97); }
}