/* Wardrobe by Dipal — pages.css · Plum #4F1448 + Champagne Gold #c9a55a */
/* ============================================================
   Wardrobe by Dipal — Inner pages (Shop · Product · Cart ·
   Checkout · About · Contact). Extends home.css tokens.
   ============================================================ */

/* ── Product-card size chips (shop grid) ── */
.card-sizes { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.card-sizes .cs { font-family:var(--alt); font-size:10px; letter-spacing:.04em; color:var(--ink-2);
  border:1px solid var(--line); border-radius:3px; padding:2px 7px; line-height:1.4; }

/* ── Active size-chip in filter sidebar ── */
.filters .size-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- breadcrumbs / page tops ---------- */
.crumbs{font-family:var(--alt);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--muted);transition:.2s}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs .here{color:var(--ink)}
.page-top{padding:34px 0 0}
.page-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:20px 0 34px;flex-wrap:wrap}

/* ---------- forms (shared) ---------- */
.f-field{display:flex;flex-direction:column}
.f-label{font-family:var(--alt);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
.f-input,.f-area,.f-select{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:0 16px;font-family:var(--sans);font-size:15px;color:var(--ink);height:50px;transition:border-color .2s}
.f-area{height:auto;min-height:130px;padding:14px 16px;resize:vertical}
.f-input:focus,.f-area:focus,.f-select:focus{outline:none;border-color:var(--accent)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-grid .full{grid-column:1/-1}
::placeholder{color:var(--muted)}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,16px);opacity:0;visibility:hidden;z-index:120;background:var(--ink);color:var(--bg);font-family:var(--alt);font-size:13px;letter-spacing:.08em;padding:14px 26px;border-radius:30px;box-shadow:var(--shadow);transition:.35s var(--ease)}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ============================================================
   SHOP
   ============================================================ */
.shop-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:48px;padding-bottom:90px;align-items:start}
.filters{position:sticky;top:110px;display:flex;flex-direction:column;gap:30px}
.filters .fhead{display:flex;align-items:center;justify-content:space-between}
.filters .fhead .t{font-family:var(--display);font-size:22px}
.filters .clear{font-family:var(--alt);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 2px}
.filters .clear:hover{color:var(--accent);border-color:var(--accent)}
.fgroup h4{font-family:var(--alt);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;display:flex;justify-content:space-between;align-items:center}
.fgroup{border-top:1px solid var(--line);padding-top:24px}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fcheck{display:flex;align-items:center;gap:11px;padding:6px 0;cursor:pointer;font-size:14.5px;color:var(--ink-2);transition:.15s}
.fcheck:hover{color:var(--ink)}
.fcheck input{appearance:none;width:18px;height:18px;border:1px solid var(--line);border-radius:2px;background:var(--surface);margin:0;cursor:pointer;display:grid;place-items:center;transition:.15s;flex:0 0 auto}
.fcheck input::after{content:'';width:10px;height:10px;background:var(--accent);transform:scale(0);transition:.15s}
.fcheck input:checked{border-color:var(--accent)}
.fcheck input:checked::after{transform:scale(1)}
.fcheck .ct{margin-left:auto;font-family:var(--alt);font-size:11px;color:var(--muted)}
.size-chips{display:flex;flex-wrap:wrap;gap:9px}
.size-chip{min-width:44px;height:42px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font-family:var(--alt);font-size:13px;color:var(--ink-2);cursor:pointer;transition:.18s}
.size-chip:hover{border-color:var(--ink)}
.size-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.size-chip.oos{color:var(--muted);text-decoration:line-through;cursor:not-allowed;background:var(--bg-2)}
.price-vals{display:flex;justify-content:space-between;font-family:var(--alt);font-size:12.5px;color:var(--ink-2);margin-top:12px}
input[type=range].price{width:100%;accent-color:var(--accent)}

.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.result-count{font-family:var(--alt);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sort-wrap{display:flex;align-items:center;gap:12px}
.sort-wrap label{font-family:var(--alt);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sort-select{appearance:none;border:1px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b4870' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;border-radius:var(--radius);height:44px;padding:0 38px 0 16px;font-family:var(--alt);font-size:13px;color:var(--ink);cursor:pointer}
.filter-btn{display:none}
.pagination{display:flex;justify-content:center;gap:9px;margin-top:54px}
.pg{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font-family:var(--alt);font-size:13px;color:var(--ink-2);cursor:pointer;transition:.18s}
.pg:hover{border-color:var(--ink);color:var(--ink)}
.pg.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.shop-layout .pgrid{grid-template-columns:repeat(3,1fr)}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:56px;padding:36px 0 90px;align-items:start}
.pd-gallery{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;position:sticky;top:110px}
.pd-thumbs{display:flex;flex-direction:column;gap:12px}
.pd-thumb{aspect-ratio:3/4;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.2s;background:var(--surface)}
.pd-thumb.on,.pd-thumb:hover{border-color:var(--ink)}
.pd-main{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--surface);position:relative}
.pd-main .badge{top:16px;left:16px}

.pd-info{display:flex;flex-direction:column}
.pd-info .eyebrow{margin-bottom:10px}
.pd-name{font-family:var(--display);font-weight:500;font-size:clamp(32px,3.4vw,44px);line-height:1.05;margin:0 0 14px}
.pd-price-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.pd-price{font-size:24px;font-weight:600;color:var(--ink)}
.pd-price-row s{color:var(--muted);font-size:17px}
.pd-off{font-family:var(--alt);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:#fff;padding:5px 12px;border-radius:30px}
.pd-rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.pd-rating .stars{font-size:13px}
.pd-rule{height:1px;background:var(--line);border:0;margin:24px 0}
.opt-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.opt-row .l{font-family:var(--alt);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.opt-row .guide{font-family:var(--alt);font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px;cursor:pointer}
.opt-row .guide:hover{color:var(--accent);border-color:var(--accent)}
.qty-row{display:flex;align-items:center;gap:18px;margin-top:22px}
.qty-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);height:52px}
.qty-stepper button{width:46px;border:0;background:transparent;font-size:18px;color:var(--ink-2);transition:.15s}
.qty-stepper button:hover{color:var(--accent)}
.qty-stepper .qv{width:44px;display:grid;place-items:center;font-weight:600;font-size:15px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.buy-row{display:flex;gap:12px;margin-top:24px}
.buy-row .btn{flex:1;justify-content:center;height:54px}
.wish-lg{flex:0 0 54px;height:54px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);display:grid;place-items:center;color:var(--ink);transition:.2s}
.wish-lg:hover{border-color:var(--accent);color:var(--accent)}
.wish-lg.on svg{fill:var(--accent);stroke:var(--accent)}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:54px;margin-top:12px;border:0;border-radius:var(--radius);background:#1f7a45;color:#fff;font-family:var(--alt);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:.25s}
.btn-wa:hover{background:#166135}
.pd-trust{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.pd-trust span{display:flex;align-items:center;gap:8px;font-family:var(--alt);font-size:12px;color:var(--ink-2)}
.pd-trust svg{stroke:var(--gold)}

.acc-item{border-bottom:1px solid var(--line)}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:20px 2px;cursor:pointer;font-family:var(--alt);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);user-select:none}
.acc-head .pm{font-size:18px;color:var(--muted);transition:.25s var(--ease);font-family:var(--sans)}
.acc-item.open .acc-head .pm{transform:rotate(45deg);color:var(--accent)}
.acc-body{display:none;padding:0 2px 22px;color:var(--ink-2);font-size:14.5px;line-height:1.75}
.acc-item.open .acc-body{display:block}

.related{background:var(--bg-2)}

/* ============================================================
   CART
   ============================================================ */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;padding-bottom:90px;align-items:start}
.cart-list{border-top:1px solid var(--line)}
.cart-row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-thumb{width:104px;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.cart-det .nm{font-family:var(--display);font-size:21px;line-height:1.15}
.cart-det .vr{font-family:var(--alt);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:5px}
.cart-det .stock{font-family:var(--alt);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#1f7a45;margin-top:7px}
.cart-det .rm{font-family:var(--alt);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 2px;margin-top:12px}
.cart-det .rm:hover{color:var(--accent);border-color:var(--accent)}
.cart-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.cart-side .pr{font-weight:600;font-size:17px}
.cart-side .qty-stepper{height:42px}
.cart-side .qty-stepper button{width:38px}
.cart-side .qty-stepper .qv{width:38px;font-size:14px}
.cart-cont{margin-top:26px}

.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;position:sticky;top:110px}
.summary h3{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 22px}
.sum-row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--ink-2);padding:7px 0}
.sum-row b{color:var(--ink)}
.sum-row.total{border-top:1px solid var(--line);margin-top:14px;padding-top:18px;font-size:16px}
.sum-row.total .v{font-size:22px;font-weight:600;color:var(--accent)}
.coupon{display:flex;gap:9px;margin:16px 0 6px}
.coupon .f-input{height:46px}
.coupon .btn{padding:0 18px;height:46px}
.summary .btn.checkout{width:100%;justify-content:center;height:54px;margin-top:18px}
.sum-fine{text-align:center;font-family:var(--alt);font-size:11px;letter-spacing:.08em;color:var(--muted);margin-top:14px}
.free-note{background:var(--accent-soft);color:var(--accent-deep);font-family:var(--alt);font-size:12px;letter-spacing:.04em;padding:11px 14px;border-radius:var(--radius);margin-bottom:18px;text-align:center}

/* ============================================================
   CHECKOUT
   ============================================================ */
.steps-bar{display:flex;justify-content:center;align-items:center;gap:14px;padding:38px 0 10px}
.stp{display:flex;align-items:center;gap:10px;font-family:var(--alt);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stp .n{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px}
.stp.on{color:var(--ink)}
.stp.on .n{background:var(--accent);border-color:var(--accent);color:#fff}
.stp-line{width:44px;height:1px;background:var(--line)}
.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;padding:30px 0 90px;align-items:start}
.co-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-bottom:22px}
.co-card h3{font-family:var(--display);font-weight:500;font-size:25px;margin:0 0 24px;display:flex;align-items:center;gap:14px}
.co-card h3 .cn{font-family:var(--alt);font-size:12px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;letter-spacing:0}
.ship-opt{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;cursor:pointer;transition:.2s;margin-bottom:12px;background:var(--bg)}
.ship-opt:hover{border-color:var(--ink)}
.ship-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.ship-opt .rad{width:18px;height:18px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--surface)}
.ship-opt.on .rad{border-color:var(--accent)}
.ship-opt.on .rad::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent)}
.ship-opt .t{font-size:14.5px;color:var(--ink);font-weight:600}
.ship-opt .s{font-family:var(--alt);font-size:12px;color:var(--ink-2)}
.ship-opt .p{margin-left:auto;font-family:var(--alt);font-size:13px;color:var(--ink);font-weight:600}
.pay-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.pay-tab{font-family:var(--alt);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.2s}
.pay-tab:hover{border-color:var(--ink);color:var(--ink)}
.pay-tab.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pay-body{background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius);padding:22px;font-size:14px;color:var(--ink-2)}
.recap .mini{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.recap .mini .th{width:52px;aspect-ratio:3/4;border-radius:3px;overflow:hidden;background:var(--bg-2);flex:0 0 auto}
.recap .mini .n{font-size:13.5px;font-weight:600;line-height:1.3}
.recap .mini .v{font-family:var(--alt);font-size:11px;color:var(--muted)}
.recap .mini .p{margin-left:auto;font-size:13.5px;font-weight:600}

/* success overlay */
.success{position:fixed;inset:0;background:rgba(40,6,48,.55);z-index:130;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s}
.success.show{opacity:1;visibility:visible}
.success .box{background:var(--surface);border-radius:var(--radius);padding:54px 60px;text-align:center;max-width:420px;transform:translateY(10px);transition:.35s var(--ease)}
.success.show .box{transform:none}
.success .tick{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 20px;color:var(--accent-deep);font-size:26px}
.success h3{font-family:var(--display);font-weight:500;font-size:30px;margin:0 0 10px}
.success p{color:var(--ink-2);font-size:14.5px;margin:0 0 24px}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{position:relative;min-height:440px;display:grid;place-items:center;overflow:hidden;text-align:center}
.about-hero .slot{position:absolute;inset:0;width:100%;height:100%}
.about-hero .scrim{position:absolute;inset:0;background:rgba(40,6,48,.5);z-index:2}
.about-hero .inner{position:relative;z-index:3;color:#fff;padding:60px 20px}
.about-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,6vw,72px);margin:14px 0 0;line-height:1}
.about-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
.about-split .portrait{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.about-split h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin:.35em 0 .5em}
.about-split p{color:var(--ink-2);margin:0 0 18px}
.pull-quote{font-family:var(--display);font-style:italic;font-size:24px;color:var(--accent-deep);border-left:2px solid var(--accent);padding-left:22px;margin:28px 0 0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:40px 34px;text-align:center}
.pillar .pic{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 20px;color:var(--accent-deep)}
.pillar h3{font-family:var(--display);font-weight:500;font-size:24px;margin:0 0 10px}
.pillar p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.7}
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.craft{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.craft .slot{width:100%;height:100%;transition:transform .7s var(--ease)}
.craft:hover .slot{transform:scale(1.05)}
.craft .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(40,6,48,.6),transparent 50%);z-index:2}
.craft .cap{position:absolute;left:22px;bottom:20px;z-index:3;color:#fff}
.craft .cap .t{font-family:var(--display);font-size:24px}
.craft .cap .s{font-family:var(--alt);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.cta-band{background:var(--accent-soft);text-align:center}
.cta-band h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,48px);color:var(--ink);margin:0 0 26px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;padding-bottom:90px;align-items:start}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:38px}
.contact-card h3{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 24px}
.info-stack{display:flex;flex-direction:column;gap:22px}
.info-row{display:flex;gap:16px;align-items:flex-start}
.info-row .iic{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-deep);flex:0 0 auto}
.info-row .t{font-family:var(--alt);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.info-row .v{font-size:14.5px;color:var(--ink);line-height:1.6}
.map-slot{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .shop-layout{grid-template-columns:218px minmax(0,1fr);gap:34px}
  .pd-layout{gap:38px}
  .cart-layout,.co-layout{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
}
@media(max-width:860px){
  .shop-layout{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 18% 0 0;z-index:95;background:var(--bg);padding:26px 24px;overflow-y:auto;transform:translateX(-102%);transition:.34s var(--ease);box-shadow:var(--shadow)}
  .filters.open{transform:none}
  .filter-btn{display:inline-flex}
  .shop-layout .pgrid{grid-template-columns:repeat(2,1fr)}
  .pd-layout{grid-template-columns:1fr;gap:34px}
  .pd-gallery{position:static;grid-template-columns:60px minmax(0,1fr)}
  .cart-layout,.co-layout{grid-template-columns:1fr}
  .summary{position:static}
  .about-split{grid-template-columns:1fr;gap:34px}
  .pillars,.craft-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cart-row{grid-template-columns:84px minmax(0,1fr)}
  .cart-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .buy-row{flex-direction:column}
  .buy-row .wish-lg{width:100%;flex:none}
}