/* =========================================================
   Pecel Lele Sambel Dadak Aminoto — Etalase pesan antar
   Palet hangat rumah makan: merah cabai + krem nasi.
   ========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Warna — palet rumah makan: merah cabai sebagai aksen, krem sebagai dasar */
  --bg:        #FBF7F1;   /* dasar krem hangat */
  --surface:   #FFFFFF;   /* kartu */
  --ink:       #1C1613;   /* teks utama near-black */
  --ink-2:     #5E5248;   /* teks sekunder */
  --ink-3:     #8C7E72;   /* teks tersier / caption */
  --line:      #E9E1D6;   /* garis / border */
  --accent:    #C0392B;   /* merah cabai (link, tombol, highlight) */
  --accent-deep:#9C2A1E;  /* merah tua (hover tombol) */
  --ok:        #2E7D5B;

  /* Tipografi — 2 family: Archivo (display) + Inter (body) */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  /* Skala 1.25 dari 16px */
  --fs-xs:  0.80rem;   /* 12.8 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-base:1rem;      /* 16 */
  --fs-md:  1.25rem;   /* 20 */
  --fs-lg:  1.563rem;  /* 25 */
  --fs-xl:  1.953rem;  /* 31 */
  --fs-2xl: 2.441rem;  /* 39 */
  --fs-3xl: 3.052rem;  /* 49 */
  --fs-4xl: 3.815rem;  /* 61 */

  /* Spacing — kelipatan 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* Bentuk & bayangan */
  --r:0px;              /* sudut tegas (adidas) */
  --wrap:1200px;
  --shadow: 0 1px 3px rgba(26,23,18,.05), 0 10px 30px rgba(26,23,18,.07);
  --ease: 200ms ease;
}

/* ---------- 2. RESET / DASAR ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.hidden{display:none !important}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s3)}
::selection{background:var(--accent); color:#fff}

/* ---------- 3. TIPOGRAFI SISTEM ---------- */
.eyebrow{
  font-family:var(--f-display); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  display:inline-block;
}
.eyebrow-light{color:#E9C9AE}
.sec-title{
  font-family:var(--f-display); font-weight:800; font-size:var(--fs-2xl);
  line-height:1.05; letter-spacing:-.02em; text-transform:uppercase;
  margin:var(--s1) 0 0;
}
.sec-head{margin-bottom:var(--s5)}
.sec-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}

/* ---------- 4. TOMBOL ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.06em; text-transform:uppercase;
  padding:14px 28px; border:1.5px solid transparent; border-radius:var(--r);
  transition:background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:#FAF8F4}
.btn-primary:hover{background:var(--accent-deep)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-ghost{
  background:transparent; color:var(--ink); border:1.5px solid var(--line);
  font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; text-transform:uppercase; padding:12px 20px; cursor:pointer;
  border-radius:var(--r); transition:border-color var(--ease), background var(--ease);
}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- 5. ANNOUNCE BAR ---------- */
.announce{background:var(--ink); color:#EFE9DF}
.announce-in{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:9px var(--s3); font-size:var(--fs-xs); letter-spacing:.04em; flex-wrap:wrap;
}
.announce .dot{width:4px; height:4px; border-radius:50%; background:var(--accent)}

/* ---------- 6. HEADER ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(250,248,244,.86);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.tb-inner{display:flex; align-items:center; gap:var(--s4); height:64px}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-weight:800; font-size:var(--fs-md);
  letter-spacing:-.01em; text-transform:uppercase; color:var(--ink);
}
.brand-mark{color:var(--accent)}
.mainnav{display:flex; gap:var(--s4); margin-left:var(--s3)}
.mainnav a{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm);
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2);
  padding:4px 0; position:relative; transition:color var(--ease);
}
.mainnav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--accent); transition:width var(--ease);
}
.mainnav a:hover{color:var(--ink)}
.mainnav a:hover::after{width:100%}
.cart-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--ink); color:#FAF8F4; border:none; border-radius:var(--r);
  padding:10px 16px; font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; transition:background var(--ease);
}
.cart-btn:hover{background:var(--accent-deep)}
.cart-count{
  background:var(--accent); color:#fff; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; font-size:var(--fs-xs); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- 7. HERO ---------- */
.hero{position:relative; min-height:clamp(460px, 72vh, 720px); display:flex; align-items:center; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,16,12,.72) 0%, rgba(20,16,12,.42) 42%, rgba(20,16,12,.05) 78%);
}
.hero-in{position:relative; width:100%}
.hero-copy{max-width:560px; color:#fff; padding:var(--s5) 0}
.hero-h1{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem, 6.5vw, var(--fs-4xl)); line-height:.98; letter-spacing:-.02em;
  margin:var(--s2) 0 var(--s3);
}
.hero-p{font-size:var(--fs-md); color:#F0E9E0; max-width:44ch; margin:0 0 var(--s4)}
.hero-cta{display:flex; gap:var(--s2); flex-wrap:wrap}

/* ---------- 8. TRUST STRIP ---------- */
.trust{background:var(--surface); border-bottom:1px solid var(--line)}
.trust-in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  padding:var(--s4) var(--s3);
}
.trust-item{display:flex; align-items:center; gap:12px; color:var(--ink)}
.trust-item svg{color:var(--accent); flex-shrink:0}
.trust-item b{display:block; font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.02em}
.trust-item span{display:block; font-size:var(--fs-xs); color:var(--ink-3)}

/* ---------- 9. SECTION UMUM ---------- */
.section{padding:var(--s7) 0}

/* ---------- 10. LOOKBOOK ---------- */
.look-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2)}
.look{position:relative; overflow:hidden; aspect-ratio:3/4; display:block}
.look img{width:100%; height:100%; object-fit:cover; transition:transform 500ms ease}
.look::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,0) 45%, rgba(20,16,12,.72) 100%);}
.look:hover img{transform:scale(1.05)}
.look-cap{position:absolute; left:var(--s3); right:var(--s3); bottom:var(--s3); z-index:2; color:#fff}
.look-lbl{display:block; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lg); text-transform:uppercase; letter-spacing:-.01em}
.look-go{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:#EAD9CB; margin-top:2px}
.look-go::after{content:"→"; transition:transform var(--ease)}
.look:hover .look-go::after{transform:translateX(4px)}

/* ---------- 11. EDITORIAL BANNER ---------- */
.editorial{position:relative; min-height:clamp(380px,52vh,540px); display:flex; align-items:center; overflow:hidden}
.ed-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%}
.ed-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,16,12,.7) 0%, rgba(20,16,12,.35) 55%, rgba(20,16,12,.05) 100%)}
.ed-in{position:relative; width:100%}
.ed-copy{max-width:520px; color:#fff; padding:var(--s5) 0}
.ed-h2{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem,5vw,var(--fs-3xl)); line-height:1; letter-spacing:-.02em; margin:var(--s2) 0 var(--s3)}
.ed-p{font-size:var(--fs-md); color:#F0E9E0; max-width:42ch; margin:0 0 var(--s4)}

/* ---------- 12. TOOLS: SEARCH + CHIPS ---------- */
.search{display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r); padding:11px 16px; min-width:280px;
  transition:border-color var(--ease); color:var(--ink-3)}
.search:focus-within{border-color:var(--ink)}
.search input{border:none; outline:none; background:transparent; font-size:var(--fs-sm); color:var(--ink); width:100%; font-family:var(--f-body)}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--s4)}
.chip{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm);
  letter-spacing:.02em; text-transform:uppercase;
  background:transparent; color:var(--ink-2); border:1.5px solid var(--line);
  padding:8px 18px; border-radius:var(--r); cursor:pointer;
  transition:all var(--ease);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.active{background:var(--ink); color:#FAF8F4; border-color:var(--ink)}

/* ---------- 13. GRID PRODUK ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.loading{grid-column:1/-1; text-align:center; color:var(--ink-3); padding:var(--s6) 0; font-size:var(--fs-sm)}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease)}
.pcard:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.pthumb{aspect-ratio:1/1; background:#F1ECE3; overflow:hidden; position:relative}
.pthumb img{width:100%; height:100%; object-fit:cover; transition:transform 450ms ease}
.pcard:hover .pthumb img{transform:scale(1.05)}
.pthumb .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#F1ECE3,#F1ECE3 12px,#EBE5DA 12px,#EBE5DA 24px)}
.pthumb .ph::after{content:"Ollsera"; font-family:var(--f-display); font-weight:800; letter-spacing:.1em; color:#CBBFAD; text-transform:uppercase; font-size:var(--fs-sm)}
.pbody{padding:var(--s2) var(--s2) var(--s3); display:flex; flex-direction:column; gap:6px; flex:1}
.pcat{font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.pname{font-family:var(--f-display); font-weight:700; font-size:var(--fs-base); line-height:1.25; color:var(--ink)}
.pprice{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.pprice .now{font-family:var(--f-display); font-weight:800; font-size:var(--fs-md); color:var(--ink)}
.pprice .was{font-size:var(--fs-sm); color:var(--ink-3); text-decoration:line-through}
.pstok{font-size:var(--fs-xs); color:var(--ink-3)}
.pstok.low{color:var(--accent); font-weight:600}
.badge-habis{font-size:var(--fs-xs); color:#B23B2E; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.pcard.habis{opacity:.62}
.addbtn{
  margin-top:auto; font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  background:var(--ink); color:#FAF8F4; border:none; border-radius:var(--r);
  padding:12px 14px; transition:background var(--ease);
}
.addbtn:hover:not(:disabled){background:var(--accent-deep)}
.addbtn:disabled{background:#D9D2C6; color:#fff; cursor:not-allowed}

/* ---------- 14. CARA BELANJA ---------- */
.howto{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.step{padding:var(--s3); border-left:2px solid var(--line)}
.step-no{font-family:var(--f-display); font-weight:800; font-size:var(--fs-xl); color:var(--accent); display:block; line-height:1}
.step b{display:block; font-family:var(--f-display); font-weight:700; font-size:var(--fs-md); text-transform:uppercase; letter-spacing:-.01em; margin:var(--s2) 0 4px}
.step p{margin:0; font-size:var(--fs-sm); color:var(--ink-2)}

/* ---------- 15. FOOTER ---------- */
.foot{background:var(--ink); color:#CFC7B9; padding:var(--s6) 0 var(--s4)}
.foot-in{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-bottom:var(--s4); border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand{max-width:420px}
.brand-foot{color:#fff; margin-bottom:var(--s2)}
.brand-foot .brand-mark{color:var(--accent)}
.foot-brand p{margin:0; font-size:var(--fs-sm); color:#A79E8F; line-height:1.6}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a{font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.03em; color:#CFC7B9; transition:color var(--ease)}
.foot-links a:hover{color:#fff}
.foot-copy{padding-top:var(--s3); font-size:var(--fs-xs); color:#877E70}

/* ---------- 16. DRAWER KERANJANG ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,16,12,.5); z-index:60; backdrop-filter:blur(2px)}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--bg);
  z-index:70; display:flex; flex-direction:column; box-shadow:-16px 0 40px rgba(20,16,12,.18)}
.drawer-hd{display:flex; align-items:center; justify-content:space-between; padding:var(--s3); border-bottom:1px solid var(--line)}
.drawer-hd h2{margin:0; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lg); text-transform:uppercase; letter-spacing:-.01em}
.x{border:none; background:transparent; font-size:var(--fs-md); cursor:pointer; color:var(--ink-2); width:36px; height:36px}
.x:hover{color:var(--ink)}
.drawer-body{flex:1; overflow:auto; padding:var(--s3)}
.cart-empty{text-align:center; color:var(--ink-3); padding:var(--s6) var(--s2); font-size:var(--fs-sm)}
.citem{display:flex; gap:12px; padding:var(--s2) 0; border-bottom:1px solid var(--line)}
.ci-thumb{width:64px; height:64px; flex-shrink:0; background:#F1ECE3; overflow:hidden}
.ci-thumb img{width:100%; height:100%; object-fit:cover}
.ci-thumb .ph{width:100%; height:100%; background:repeating-linear-gradient(45deg,#F1ECE3,#F1ECE3 8px,#EBE5DA 8px,#EBE5DA 16px)}
.ci-main{flex:1; min-width:0}
.ci-nm{font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); color:var(--ink)}
.ci-var-tag{display:inline-block; font-family:var(--f-body); font-weight:600; font-size:var(--fs-xs); background:#EFE7DA; color:var(--accent-deep); padding:1px 8px; border-radius:999px; margin-left:4px}
.ci-pr{font-size:var(--fs-xs); color:var(--ink-2); margin:3px 0 8px}
.ci-qty{display:flex; align-items:center; gap:8px}
.qbtn{width:28px; height:28px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-size:var(--fs-base); color:var(--ink); border-radius:var(--r)}
.qbtn:hover{border-color:var(--ink)}
.ci-del{margin-left:auto; border:none; background:transparent; color:var(--ink-3); font-size:var(--fs-xs); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.ci-del:hover{color:#B23B2E}
.drawer-foot{padding:var(--s3); border-top:1px solid var(--line)}
.cf-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s2); font-family:var(--f-display); font-weight:800; font-size:var(--fs-md); text-transform:uppercase}
.drawer-foot .btn-primary{width:100%; justify-content:center}

/* ---------- 17. MODAL ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(20,16,12,.5); z-index:80; display:flex; align-items:center; justify-content:center; padding:var(--s2); backdrop-filter:blur(2px)}
.modal{background:var(--bg); width:460px; max-width:100%; max-height:92vh; overflow:auto; padding:var(--s4); border-radius:var(--r)}
.modal h2{margin:0 0 6px; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lg); text-transform:uppercase; letter-spacing:-.01em}
.msub{font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--s3)}
.f{margin-bottom:var(--s2)}
.f label{display:block; font-family:var(--f-display); font-weight:600; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); margin-bottom:6px}
.f input, .f textarea{width:100%; border:1.5px solid var(--line); border-radius:var(--r); padding:11px 14px; font-size:var(--fs-sm); font-family:var(--f-body); color:var(--ink); background:var(--surface); outline:none; transition:border-color var(--ease)}
.f input:focus, .f textarea:focus{border-color:var(--ink)}
.f textarea{min-height:72px; resize:vertical}
.err-line{color:#B23B2E; font-size:var(--fs-sm); margin:var(--s1) 0}
.modal-actions{display:flex; gap:10px; margin-top:var(--s3)}
.modal-actions .btn-primary{justify-content:center}

/* Variant picker */
.vpick-wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:var(--s2) 0}
.vpick{display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; border-radius:var(--r); transition:border-color var(--ease)}
.vpick b{font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase}
.vpick span{font-size:var(--fs-xs); color:var(--ink-3)}
.vpick:hover:not(:disabled){border-color:var(--ink)}
.vpick.habis{opacity:.5; cursor:not-allowed}

/* Sukses / invoice */
.ok-box{text-align:center; margin-bottom:var(--s3)}
.ok-ic{width:56px; height:56px; margin:0 auto var(--s2); border-radius:50%; background:#E7F1EA; color:var(--ok); display:flex; align-items:center; justify-content:center}
.inv-line{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm)}
.total-big{font-family:var(--f-display); font-weight:800; font-size:var(--fs-md); color:var(--ink)}
.bank-box{background:var(--surface); border:1px solid var(--line); padding:var(--s2); margin:var(--s3) 0; border-radius:var(--r)}
.bank-box .lbl{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.bank-box .val{font-family:var(--f-display); font-weight:700; font-size:var(--fs-base); color:var(--ink); margin-top:2px}
.wa-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:var(--s2);
  background:#1FA855; color:#fff; padding:14px; border-radius:var(--r); font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; transition:background var(--ease)}
.wa-btn:hover{background:#178A45}

/* ---------- 18. TOAST ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90;
  background:var(--ink); color:#FAF8F4; padding:12px 22px; border-radius:var(--r); font-size:var(--fs-sm); font-weight:500;
  box-shadow:var(--shadow); animation:toastin 200ms ease}
.toast.err{background:#B23B2E}
@keyframes toastin{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .section{padding:var(--s6) 0}
  .mainnav{display:none}
  .trust-in{grid-template-columns:repeat(2,1fr); gap:var(--s2) var(--s3)}
  .look-grid{grid-template-columns:1fr 1fr}
  .look:last-child{grid-column:1/-1; aspect-ratio:16/9}
  .steps{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sec-title{font-size:var(--fs-xl)}
}
@media (max-width:560px){
  .wrap{padding:0 var(--s2)}
  .announce-in span:nth-child(5),.announce-in .dot:nth-child(4){display:none}
  .hero-copy{padding:var(--s4) 0}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr; gap:var(--s2)}
  .search{min-width:0; width:100%}
  .sec-head-row{flex-direction:column; align-items:stretch}
}

/* Logo Ollsera pada lambang merek */
img.brand-mark { border-radius: 8px; display: block; flex: none; }

/* =========================================================
   Bagian tanpa foto
   Belum ada foto makanan yang sah dari rumah makannya, jadi hero &
   banner memakai gradasi hangat + tekstur halus, bukan gambar kosong.
   Begitu foto tersedia: taruh di assets/hero.jpg dan assets/banner.jpg,
   hapus komentar pada baris <img> di index.html, lalu buang kelas
   .hero-nofoto / .editorial-nofoto.
   ========================================================= */
.hero-nofoto{
  background:
    radial-gradient(1100px 520px at 18% 8%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, #8C2A1C 0%, #C0392B 45%, #E4762F 100%);
}
.hero-nofoto .hero-scrim{
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(20,10,8,.28) 0%, rgba(20,10,8,.42) 100%);
}
.editorial-nofoto{
  background: linear-gradient(115deg, #241713 0%, #5A2018 55%, #8C3A1E 100%);
}
.editorial-nofoto .ed-scrim{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 10px),
    linear-gradient(90deg, rgba(20,12,10,.55) 0%, rgba(20,12,10,.2) 60%, transparent 100%);
}

/* Kartu menu andalan — pengganti ubin foto "belanja per gaya" */
.look-card{
  aspect-ratio:auto; min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s2);
  padding:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.look-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.look-emoji{ font-size:52px; line-height:1; filter:saturate(1.05); }
.look-card .look-cap{ position:static; left:auto; right:auto; bottom:auto; color:var(--ink); }
.look-card .look-lbl{ color:var(--ink); }
.look-desc{ display:block; font-size:var(--fs-sm); color:var(--ink-2); margin-top:4px; }
.look-card::after{
  content:"Lihat menu →"; display:block; margin-top:var(--s2);
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm);
  letter-spacing:.03em; text-transform:uppercase; color:var(--accent);
}