/* ============================================================
   AMBIKA TOY SHOP — inner page styles (shop, product, cart,
   checkout, account, auth, about, contact, wholesale)
   Loads after styles.css; reuses its tokens/components.
   ============================================================ */

/* card link fixes (cards now wrap media + title in links) */
.card{position:relative}
a.card-media{display:block}
.card-body h3 a{color:inherit;transition:.15s}
.card-body h3 a:hover{color:var(--pink)}

/* ---------- Page hero / breadcrumb ---------- */
.page-hero{background:var(--alt);border-bottom:1px solid var(--line);padding:30px 0}
.page-hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.86rem;color:var(--muted);font-weight:600;margin-bottom:8px}
.crumb a:hover{color:var(--pink)}
.crumb span{color:var(--line)}
.page-pad{padding:46px 0}

/* ---------- Generic forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:700;font-size:.86rem;color:var(--ink)}
.input,.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;color:var(--ink);background:#fff;outline:none;transition:.18s}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(236,63,135,.1)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:.82rem;color:var(--muted)}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.qty button{width:40px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.15s}
.qty button:hover{background:var(--alt);color:var(--pink)}
.qty input{width:46px;height:42px;text-align:center;border:none;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);font-weight:700;color:var(--ink);outline:none}
.qty .ic{width:16px;height:16px}

/* circular color swatches (client request — boxes, not text) */
.swatches{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12);transition:.15s var(--bounce)}
.swatch:hover{transform:scale(1.12)}
.swatch[aria-checked="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.swatch[aria-checked="true"]::after{content:"";position:absolute;inset:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;mix-blend-mode:difference}
.swatch-label{font-weight:700;color:var(--ink-soft);font-size:.85rem}

/* ---------- Gift wrap component (PDP + cart) ---------- */
.giftwrap{border:1.5px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.gw-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--alt);font-weight:700;color:var(--ink)}
.gw-head .ic{width:20px;height:20px;color:var(--pink)}
.gw-body{padding:16px}
.gw-types{display:flex;gap:10px;flex-wrap:wrap}
.gw-type{flex:1;min-width:110px;border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer;text-align:center;font-weight:700;color:var(--ink-soft);transition:.15s}
.gw-type small{display:block;font-weight:600;color:var(--muted);font-size:.78rem;margin-top:2px}
.gw-type[aria-checked="true"]{border-color:var(--pink);background:#fff5f9;color:var(--ink);box-shadow:0 0 0 3px rgba(236,63,135,.1)}
.gw-colors{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.gw-colors[hidden]{display:none}
.gw-colors .swatch-label{display:block;margin-bottom:9px}

/* ============================================================
   SHOP / category listing
   ============================================================ */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}
.filters{border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 18px 18px;position:sticky;top:18px;background:#fff}
.filter-group{padding:16px 0;border-bottom:1px solid var(--line)}
.filter-group:last-child{border-bottom:none}
.filter-group h4{font-size:.95rem;margin-bottom:12px}
.check{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:.92rem;color:var(--ink-soft)}
.check input{width:18px;height:18px;accent-color:var(--pink)}
.check:hover{color:var(--ink)}
.check .cnt{margin-left:auto;color:var(--muted);font-size:.82rem}
.swatch.sm{width:26px;height:26px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.toolbar .count{font-weight:600;color:var(--ink-soft)}
.toolbar select{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-weight:700;color:var(--ink);background:#fff}
.filter-toggle{display:none;align-items:center;gap:8px;font-weight:700;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:9px 14px}
.filter-toggle .ic{width:18px;height:18px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}
.pagination a{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:10px;font-weight:700;color:var(--ink-soft);padding:0 12px}
.pagination a:hover{border-color:var(--ink);color:var(--ink)}
.pagination a.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.gallery{position:sticky;top:18px}
.gallery-main .ph{aspect-ratio:1;border-radius:var(--r-lg)}
.gallery-thumbs{display:flex;gap:12px;margin-top:14px}
.gallery-thumbs .ph{width:84px;height:84px;border-radius:12px;cursor:pointer;border:2px solid transparent}
.gallery-thumbs .ph.active{border-color:var(--pink)}
.pdp-info .pdp-cat{font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--pink)}
.pdp-info h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:6px 0 10px}
.pdp-rating{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--ink-soft);font-weight:600;font-size:.9rem}
.pdp-rating .stars .ic{width:16px;height:16px}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pdp-price b{font-family:"Baloo 2",sans-serif;font-size:2.1rem;color:var(--ink)}
.pdp-price s{color:var(--muted);font-size:1.1rem}
.pdp-price .save{background:#e6f6ef;color:var(--green);font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:8px}
.pdp-tax{color:var(--muted);font-size:.82rem;margin-bottom:20px}
.pdp-block{margin:20px 0}
.pdp-block>.swatch-label,.pdp-block>label{display:block;font-weight:700;color:var(--ink);margin-bottom:10px}
.pdp-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:24px 0}
.pdp-actions .btn{flex:1;min-width:160px}
.pdp-meta{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:grid;gap:8px;font-size:.9rem;color:var(--ink-soft)}
.pdp-meta b{color:var(--ink)}
.pdp-usp{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px}
.pdp-usp span{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.pdp-usp .ic{width:18px;height:18px;color:var(--green)}

/* tabs */
.tabs{margin-top:54px}
.tab-nav{display:flex;gap:6px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tab-nav button{padding:13px 20px;font-weight:700;color:var(--ink-soft);border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s}
.tab-nav button.active{color:var(--ink);border-color:var(--pink)}
.tab-panel{padding:26px 0;display:none;max-width:820px;line-height:1.7}
.tab-panel.active{display:block}
.tab-panel h4{margin:14px 0 6px}
.spec-table{width:100%;border-collapse:collapse}
.spec-table td{padding:11px 14px;border:1px solid var(--line)}
.spec-table td:first-child{font-weight:700;color:var(--ink);width:200px;background:var(--alt)}

/* ---------- PDP enrichment (appealing layout) ---------- */
.pdp-wrap{background:linear-gradient(180deg,var(--alt),#fff);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;margin:18px 0 46px}
.pdp{gap:50px}
.gallery-main{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;position:relative;box-shadow:var(--shadow-sm)}
.gallery-main .ph{aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,#fbeff5,#eef4fc,#fff5e6)}
.gallery-main .ph-ic{width:48px;height:48px}
.gallery-badges{position:absolute;top:30px;left:30px;display:flex;flex-direction:column;gap:8px;z-index:2}
.gallery-badges .tag{position:static}
.gallery-thumbs .ph{width:84px;height:84px;border-radius:12px;cursor:pointer;border:1.5px solid var(--line);background:#fff}
.gallery-thumbs .ph.active{border-color:var(--pink);box-shadow:0 0 0 3px rgba(236,63,135,.12)}
.pdp-highlights{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-weight:700;font-size:.8rem;color:var(--ink-soft)}
.pill .ic{width:15px;height:15px;color:var(--pink)}
.swatch.lg{width:42px;height:42px}
.gw-opt{margin-left:auto;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.gw-type .gw-prev{display:flex;gap:3px;justify-content:center;margin-bottom:6px}
.gw-type .gw-prev i{width:12px;height:12px;border-radius:50%;display:block}
.buy-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin:24px 0}
.buy-row .qty{height:50px}.buy-row .qty button{height:48px}.buy-row .qty input{height:48px}
.buy-row .btn{flex:1;min-width:150px;font-size:1rem}
.wish-btn{width:50px;height:50px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.18s var(--bounce)}
.wish-btn:hover{color:var(--pink);border-color:var(--pink)}

/* feature cards / why-love grid */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center;transition:.25s var(--ease)}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.feat-ico{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.feat-ico .ic{width:28px;height:28px}
.feat-card h4{margin-bottom:6px}.feat-card p{font-size:.9rem}

/* description split + in-the-box */
.desc-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.desc-split .ph{aspect-ratio:4/3;border-radius:var(--r-lg)}
.desc-split h2{font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:12px}
.desc-split ul{list-style:none;display:grid;gap:10px;margin-top:14px}
.desc-split li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft)}
.desc-split li .ic{width:20px;height:20px;color:var(--green);flex:0 0 auto;margin-top:2px}
.box-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}

/* review summary */
.rev-summary{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 32px;margin-bottom:24px}
.rev-score{text-align:center}
.rev-score b{font-family:"Baloo 2",sans-serif;font-size:3.4rem;color:var(--ink);display:block;line-height:1}
.rev-score .stars{justify-content:center;margin:6px 0}.rev-score .stars .ic{width:18px;height:18px}
.rev-score small{color:var(--muted)}
.rev-bars{display:grid;gap:9px}
.rev-bar{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--ink-soft);font-weight:600}
.rev-bar .track{flex:1;height:9px;border-radius:999px;background:var(--alt)}
.rev-bar .fill{height:100%;background:var(--amber);border-radius:999px}
.rev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev-cards .t-card{max-width:none}

/* guarantee strip */
.guarantee{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;background:var(--ink);border-radius:var(--r-lg);padding:34px;color:#fff}
.g-item .ic{width:30px;height:30px;color:var(--amber)}
.g-item b{display:block;font-family:"Baloo 2",sans-serif;margin:10px 0 4px;color:#fff}
.g-item span{font-size:.85rem;color:rgba(255,255,255,.75)}

@media (max-width:1024px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .desc-split,.box-grid{grid-template-columns:1fr;gap:24px}
  .rev-cards{grid-template-columns:1fr}
  .guarantee{grid-template-columns:repeat(2,1fr);gap:24px}
}

/* ============================================================
   CART
   ============================================================ */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start}
.cart-items{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:16px;padding:18px;border-bottom:1px solid var(--line);align-items:center}
.cart-row:last-child{border-bottom:none}
.cart-row .ph{width:96px;height:96px;border-radius:12px}
.cart-row h3{font-size:1.02rem}
.cart-meta{color:var(--muted);font-size:.85rem;margin:3px 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cart-mini-sw{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);vertical-align:middle}
.cart-row .ci-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ci-price{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.ci-remove{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600;font-size:.82rem}
.ci-remove:hover{color:var(--red)}.ci-remove .ic{width:15px;height:15px}
.summary{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;position:sticky;top:18px;background:#fff}
.summary h3{font-size:1.2rem;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;padding:8px 0;color:var(--ink-soft)}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-family:"Baloo 2",sans-serif;font-size:1.3rem;color:var(--ink)}
.sum-row.total b{font-weight:800}
.coupon{display:flex;gap:8px;margin:14px 0}
.coupon input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
.cart-empty{text-align:center;padding:60px 20px}
.gw-cart{margin-top:18px}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start}
.co-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:22px;background:#fff}
.co-card h3{font-size:1.15rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.co-step{width:26px;height:26px;border-radius:50%;background:var(--pink);color:#fff;font-size:.85rem;display:flex;align-items:center;justify-content:center;font-weight:800}
.pay-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;cursor:pointer;font-weight:700;color:var(--ink);transition:.15s}
.pay-opt:hover{border-color:var(--pink)}
.pay-opt input{accent-color:var(--pink);width:18px;height:18px}
.pay-opt[data-on="true"]{border-color:var(--pink);background:#fff5f9}
.pay-opt small{font-weight:600;color:var(--muted);margin-left:auto}
.co-items{margin-bottom:16px}
.co-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.co-item .ph{width:54px;height:54px;border-radius:10px;flex:0 0 auto}
.co-item b{display:block;color:var(--ink)}
.co-item .co-q{color:var(--muted)}
.co-item .co-p{margin-left:auto;font-weight:700;color:var(--ink)}

/* ============================================================
   ACCOUNT
   ============================================================ */
.account-layout{display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:start}
.acc-nav{border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;background:#fff;position:sticky;top:18px}
.acc-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;border-radius:11px;font-weight:700;color:var(--ink-soft);transition:.15s}
.acc-nav button .ic{width:18px;height:18px}
.acc-nav button:hover{background:var(--alt);color:var(--ink)}
.acc-nav button.active{background:var(--ink);color:#fff}
.acc-panel{display:none}
.acc-panel.active{display:block}
.acc-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff;margin-bottom:18px}
.order-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.order-row .ph{width:60px;height:60px;border-radius:10px}
.order-status{font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.st-delivered{background:#e6f6ef;color:var(--green)}
.st-transit{background:#e4f2fb;color:var(--blue)}
.st-processing{background:#fdf3da;color:#c79208}
.addr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.addr{border:1px solid var(--line);border-radius:14px;padding:18px;position:relative}
.addr.default{border-color:var(--pink)}
.addr .tagchip{position:absolute;top:14px;right:14px;font-size:.7rem;font-weight:800;text-transform:uppercase;color:var(--pink)}

/* ============================================================
   AUTH (login / register)
   ============================================================ */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:920px;margin:0 auto}
.auth-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:#fff}
.auth-card h2{font-size:1.5rem;margin-bottom:6px}
.auth-card>p{color:var(--ink-soft);margin-bottom:22px}
.auth-alt{text-align:center;margin-top:14px;font-size:.9rem;color:var(--muted)}

/* ============================================================
   ABOUT / CONTACT / WHOLESALE
   ============================================================ */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-split .ph{aspect-ratio:4/3;border-radius:var(--r-lg)}
.about-split h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.about-split p{margin-bottom:12px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:var(--amber);border-radius:var(--r-lg);padding:30px;color:var(--ink);text-align:center}
.stat-strip b{font-family:"Baloo 2",sans-serif;font-size:2rem;display:block}
.stat-strip span{font-weight:700;font-size:.9rem}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.contact-info{display:grid;gap:14px}
.ci-card{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff}
.ci-card .ic{width:22px;height:22px;color:var(--pink);flex:0 0 auto;margin-top:2px}
.ci-card b{color:var(--ink);display:block;margin-bottom:2px}
.map .ph{aspect-ratio:16/7;border-radius:var(--r-lg);margin-top:18px}

.ws-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ws-benefit{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center;background:#fff}
.ws-benefit .why-ico{margin:0 auto 14px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .shop-layout{grid-template-columns:1fr}
  .filters{display:none;position:static}
  .filters.open{display:block;margin-bottom:22px}
  .filter-toggle{display:inline-flex}
  .pdp{grid-template-columns:1fr;gap:30px}
  .gallery{position:static}
  .cart-layout,.checkout-layout{grid-template-columns:1fr}
  .summary{position:static}
  .account-layout{grid-template-columns:1fr}
  .acc-nav{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .acc-nav button{width:auto}
  .about-split,.contact-grid{grid-template-columns:1fr}
  .ws-benefits{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .field-row{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .addr-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr);gap:22px}
  .ws-benefits{grid-template-columns:1fr}
  .cart-row{grid-template-columns:72px 1fr;gap:12px}
  .cart-row .ci-right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .co-item .ph{width:46px;height:46px}
}