/* Arabelle Shop: halaman toko putih bersih + komponen yang juga dipakai di homepage cerita.
   Semua kelas berawalan as- supaya tidak bentrok dengan site.css homepage. */
:root{--as-ink:#1E1A17;--as-muted:#6E6660;--as-line:#E7E2DB;--as-soft:#F6F3EF;--as-gold:#A88A5A;--as-white:#FFFFFF;--as-display:"Bodoni Moda",Didot,"Times New Roman",serif;--as-body:"Jost","Helvetica Neue",Arial,sans-serif}

/* ---------- Halaman toko ---------- */
.as-page{margin:0;background:var(--as-white);color:var(--as-ink);font:300 15px/1.6 var(--as-body);-webkit-font-smoothing:antialiased}
.as-page *,.as-page *::before,.as-page *::after{box-sizing:border-box}
.as-page a{color:inherit;text-decoration:none}
.as-page img{max-width:100%;display:block}
.as-wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.as-skip{position:absolute;left:-999px;top:0;background:var(--as-ink);color:#fff;padding:10px 16px;z-index:99}
.as-skip:focus{left:16px}

.as-announce{background:var(--as-ink);color:#fff;text-align:center;font:400 11px/1.4 var(--as-body);letter-spacing:.28em;text-transform:uppercase;padding:11px 16px}

.as-head{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 clamp(8px,3vw,48px);background:rgba(255,255,255,.97);border-bottom:1px solid var(--as-line);backdrop-filter:saturate(1.2) blur(8px)}
.as-head-l,.as-head-r{display:flex;align-items:center;gap:4px}
.as-head-r{justify-content:flex-end}
.as-logo{display:flex;align-items:center;gap:10px}
.as-logo img{width:18px;height:auto}
.as-logo span{font:400 22px/1 var(--as-display);letter-spacing:.24em;text-transform:uppercase;margin-right:-.24em}
.as-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;padding:0}
.as-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3}
.as-wish-count,.as-cart-count{position:absolute;top:6px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--as-ink);color:#fff;font:400 10px/16px var(--as-body);text-align:center}
.as-search{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;gap:8px;padding:12px clamp(16px,4vw,56px);background:#fff;border-bottom:1px solid var(--as-line)}
.as-search[hidden]{display:none}
.as-search input[type=search],.as-drawer-search input{flex:1;height:46px;border:1px solid var(--as-line);padding:0 16px;font:300 15px var(--as-body);color:var(--as-ink);background:#fff;border-radius:0;-webkit-appearance:none}
.as-search input:focus,.as-drawer-search input:focus{outline:1px solid var(--as-ink);outline-offset:-1px}

/* ---------- Laci menu ---------- */
.as-drawer{position:fixed;inset:0;z-index:60;background:rgba(30,26,23,.35)}
.as-drawer[hidden]{display:none}
.as-drawer-in{position:absolute;top:0;bottom:0;left:0;width:min(420px,88vw);display:flex;flex-direction:column;background:#fff;overflow-y:auto;animation:as-in .35s ease}
@keyframes as-in{from{transform:translateX(-100%)}to{transform:none}}
.as-drawer-close{margin:14px 0 0 14px}
.as-drawer-search{display:flex;padding:8px 28px 18px}
.as-cats,.as-drawer-foot{list-style:none;margin:0;padding:0 28px}
.as-cats>li>a{display:flex;justify-content:space-between;align-items:center;padding:15px 0;font:400 13px/1.3 var(--as-body);letter-spacing:.22em;text-transform:uppercase}
.as-cats svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}
.as-cats ul{list-style:none;margin:-6px 0 8px;padding:0 0 0 16px}
.as-cats ul a{display:block;padding:8px 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--as-muted)}
.as-cats a:hover,.as-drawer-foot a:hover{color:var(--as-gold)}
.as-drawer-foot{margin-top:auto;padding:18px 28px;background:var(--as-soft)}
.as-drawer-foot a{display:block;padding:11px 0;font:400 12px/1.3 var(--as-body);letter-spacing:.22em;text-transform:uppercase}
.as-social{display:flex;gap:18px;margin:0;padding:14px 28px 24px;background:var(--as-soft);border-top:1px solid var(--as-line)}
.as-social a{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center}
.as-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}

/* ---------- Isi toko ---------- */
.as-main{padding-top:22px;padding-bottom:72px}
.as-main:focus{outline:none}
.as-crumb{display:flex;flex-wrap:wrap;gap:10px;font:300 13px var(--as-body);color:var(--as-muted)}
.as-crumb a:hover{color:var(--as-ink)}
.as-title{margin:18px 0 0;font:400 clamp(30px,4.4vw,48px)/1.1 var(--as-display)}
.as-chips{display:flex;gap:8px;margin:22px 0 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.as-chips::-webkit-scrollbar{display:none}
.as-chips a{flex:none;padding:9px 18px;border:1px solid var(--as-line);font:400 11px/1.2 var(--as-body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:border-color .25s}
.as-chips a:hover{border-color:var(--as-ink)}
.as-chips a[aria-current]{background:var(--as-ink);border-color:var(--as-ink);color:#fff}
.as-count{margin:18px 0 14px;font:300 13px var(--as-body);color:var(--as-muted)}
.as-empty{padding:48px 0;color:var(--as-muted)}
.as-title+.as-grid{margin-top:32px}

/* ---------- Grid & kartu produk (toko + homepage) ---------- */
.as-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 18px}
.as-card{min-width:0}
.as-frame{position:relative}
.as-media{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--as-soft)}
.as-media .as-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform 1.2s ease}
.as-media .as-alt{opacity:0}
@media (hover:hover){.as-card:hover .as-alt{opacity:1}.as-card:hover .as-img{transform:scale(1.02)}}
.as-badge{position:absolute;left:12px;top:12px;padding:6px 10px;background:#fff;font:400 10px/1 var(--as-body);letter-spacing:.2em;text-transform:uppercase;color:var(--as-ink)}
.as-heart,.as-quick{position:absolute;right:12px;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--as-ink);cursor:pointer;padding:0;box-shadow:0 1px 6px rgba(30,26,23,.08);transition:transform .2s ease,background-color .2s}
.as-heart{top:12px}
.as-quick{bottom:12px;border-radius:10px}
.as-heart svg,.as-quick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}
.as-heart[aria-pressed="true"] svg{fill:var(--as-ink)}
.as-heart:active,.as-quick:active{transform:scale(.92)}
.as-info{display:block;padding-top:14px;text-align:center}
.as-name{display:block;font:400 12.5px/1.5 var(--as-body);letter-spacing:.16em;text-transform:uppercase;color:var(--as-ink)}
.as-price{display:block;margin-top:5px;font:300 14px/1.4 var(--as-body);letter-spacing:.04em;color:var(--as-muted)}

.as-pager{display:flex;justify-content:center;gap:6px;margin-top:56px}
.as-pager a,.as-pager span{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--as-line);font:400 13px var(--as-body)}
.as-pager span{background:var(--as-ink);border-color:var(--as-ink);color:#fff}
.as-pager a:hover{border-color:var(--as-ink)}

/* ---------- Footer toko ---------- */
.as-foot{background:var(--as-ink);color:#CFC4B6;padding:56px 0 calc(40px + env(safe-area-inset-bottom));text-align:center}
.as-foot p{margin:0}
.as-foot-brand{font:400 24px/1 var(--as-display);letter-spacing:.2em;text-transform:uppercase;color:#FBF9F6}
.as-foot-line{margin-top:12px!important;font:400 15px var(--as-display);font-style:italic}
.as-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:28px!important;font:400 11px var(--as-body);letter-spacing:.24em;text-transform:uppercase}
.as-foot-links a:hover{color:#FBF9F6}
.as-foot-copy{margin-top:26px!important;font:400 11px var(--as-body);letter-spacing:.2em;color:rgba(207,196,182,.6)}

/* ---------- Tombol WhatsApp, panel tambah cepat, notifikasi (toko + homepage) ---------- */
.as-wa,.as-page .as-wa{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:50%;background:var(--as-ink);color:#fff;box-shadow:0 6px 20px rgba(30,26,23,.22);transition:transform .2s}
.as-wa:hover{transform:translateY(-2px)}
.as-wa svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.3}
.as-sheet{position:fixed;inset:0;z-index:70;background:rgba(30,26,23,.4);display:flex;align-items:flex-end;justify-content:center}
.as-sheet[hidden]{display:none}
.as-sheet-in{position:relative;width:min(520px,100%);max-height:88vh;overflow-y:auto;background:#fff;color:var(--as-ink);padding:26px 24px calc(24px + env(safe-area-inset-bottom));font:300 15px/1.6 var(--as-body);animation:as-up .3s ease}
@keyframes as-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:761px){.as-sheet{align-items:center}}
.as-sheet-close{position:absolute;right:10px;top:10px}
.as-sheet-head{display:flex;gap:16px;align-items:center;padding-right:40px}
.as-sheet-head img{width:72px;height:108px;object-fit:cover;flex:none;background:var(--as-soft)}
.as-sheet-name{margin:0;font:400 13px/1.5 var(--as-body);letter-spacing:.16em;text-transform:uppercase}
.as-sheet-price{margin:4px 0 0;color:var(--as-muted)}
.as-attr{margin-top:22px}
.as-attr-label{margin:0 0 10px;font:400 11px/1 var(--as-body);letter-spacing:.24em;text-transform:uppercase;color:var(--as-muted)}
.as-opts{display:flex;flex-wrap:wrap;gap:8px}
.as-opt{min-width:52px;height:44px;padding:0 16px;border:1px solid var(--as-line);background:#fff;color:var(--as-ink);font:400 13px var(--as-body);letter-spacing:.08em;cursor:pointer}
.as-opt[aria-pressed="true"]{border-color:var(--as-ink);background:var(--as-ink);color:#fff}
.as-opt:disabled{color:#BDB6AE;text-decoration:line-through;cursor:not-allowed}
.as-btn,.as-add,.as-home-shop .as-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 34px;border:1px solid var(--as-ink);background:var(--as-ink);color:#fff;font:400 12px/1 var(--as-body);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s}
.as-btn:hover,.as-home-shop .as-btn:hover{background:#fff;color:var(--as-ink)}
.as-add{width:100%;margin-top:26px}
.as-add:disabled{opacity:.45;cursor:not-allowed}
.as-sheet-note{margin:12px 0 0;font-size:13px;color:var(--as-muted);text-align:center}
.as-sheet-note a{text-decoration:underline}
.as-toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));z-index:80;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:14px 20px;background:var(--as-ink);color:#fff;font:400 13px/1.4 var(--as-body);letter-spacing:.04em}
.as-toast[hidden]{display:none}
.as-toast a{margin-left:14px;color:#E6D3B3;text-decoration:underline;white-space:nowrap}

/* ---------- Bagian toko di homepage cerita ---------- */
.as-home-shop{background:#fff;color:var(--as-ink);padding:clamp(72px,10vw,128px) 0;font:300 15px/1.6 var(--as-body)}
.as-home-shop *{box-sizing:border-box}
.as-home-shop a{color:inherit;text-decoration:none}
.as-home-shop img{max-width:100%;display:block}
.as-eyebrow{margin:0;text-align:center;font:400 11px/1 var(--as-body);letter-spacing:.32em;text-transform:uppercase;color:var(--as-gold)}
.as-home-title{margin:16px 0 48px;text-align:center;font:400 clamp(32px,4.6vw,54px)/1.1 var(--as-display)}
.as-more{margin:56px 0 0;text-align:center}
.as-menu-label{margin:28px 0 10px;font:400 11px/1 var(--as-body,sans-serif);letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.as-menu-cats{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.as-menu-cats a{display:inline-block;padding:8px 14px;border:1px solid currentColor;font:400 11px/1.2 var(--as-body,sans-serif);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.as-menu-cats a{text-decoration:none}
.menu-chapters{list-style:none;padding:0}
.as-nav-wish{position:relative}
.as-nav-wish svg{fill:none;stroke:currentColor}

@media (max-width:1100px){.as-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .as-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10px}
  .as-head{height:60px}
  .as-logo span{font-size:18px}
  .as-heart,.as-quick{width:36px;height:36px;right:8px}
  .as-heart{top:8px}
  .as-quick{bottom:8px}
  .as-heart svg,.as-quick svg{width:18px;height:18px}
  .as-name{font-size:11px;letter-spacing:.12em}
  .as-price{font-size:13px}
  .as-announce{font-size:10px;letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){.as-drawer-in,.as-sheet-in{animation:none}.as-media .as-img{transition:none}}