/* ============================================================
   Shop, cart, checkout and account styles.
   Extends assets/css/site.css and reuses its design tokens.
   ============================================================ */

/* ---------- shared page furniture ---------- */
.sec-sm{padding:34px 20px 72px}
.pg-h1{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 .3em}
.muted{color:var(--muted)}
.lead{font-size:1.06rem}
.crumb-b{margin:0 0 10px;font-size:.9rem}
.tax-note{font-size:.83rem;color:var(--muted);line-height:1.55;margin:12px 0 0}
.fld-hint{font-size:.8rem;color:var(--muted)}
.opt{font-size:.78rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.inline{display:inline}
.btn-wide{width:100%;margin-top:9px}
.linkish{background:none;border:0;padding:0;color:var(--blue-600);font:inherit;font-size:.88rem;cursor:pointer}
.linkish:hover{text-decoration:underline}
.linkish.danger{color:#b42318}

.cart-link{position:relative}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--gold-l);color:#3a2a00;font-size:.76rem;font-weight:800;line-height:1}

/* ---------- flash messages ---------- */
.flashes{padding-top:16px}
.flash{padding:12px 16px;border-radius:10px;margin:0 0 12px;font-size:.94rem;border:1px solid}
.flash-success{background:#edfbf3;border-color:#a7e6c6;color:#0d6b41}
.flash-error{background:#fdf1f0;border-color:#f2b8b3;color:#a5261c}
.flash-info{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-800)}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:56px 24px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--blue-50)}
.empty p{margin:0 0 10px}

/* ---------- forms ---------- */
.fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:block;margin:0 0 14px}
.fld-wide{grid-column:1/-1}
.fld>span{display:block;font-size:.87rem;font-weight:600;color:var(--ink);margin:0 0 6px}
.fld>span i{font-weight:400;color:var(--muted);font-style:normal}
.fld input,.fld select,.fld textarea,.cl-eng textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;
  font-size:.95rem;color:var(--ink);background:#fff;transition:.15s}
.fld input:focus,.fld select:focus,.fld textarea:focus,.cl-eng textarea:focus{
  outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.fld input:disabled,.fld input[readonly]{background:var(--blue-50);color:var(--muted)}
.fld textarea{resize:vertical}
.fld-err{display:block;margin-top:5px;color:#b42318;font-size:.82rem;font-weight:500}
.chk{display:flex;align-items:flex-start;gap:10px;margin:6px 0 14px;font-size:.93rem;cursor:pointer}
.chk input{margin-top:4px;width:17px;height:17px;accent-color:var(--blue-700)}

/* ---------- cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.cart-line{display:grid;grid-template-columns:120px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.cart-line:first-child{border-top:1px solid var(--line)}
.cl-img img{border-radius:10px;border:1px solid var(--line);background:var(--blue-50)}
.cl-title{font-size:1.05rem;margin:.15em 0 .3em}
.cl-meta{font-size:.86rem;color:var(--muted);margin:0 0 10px}
.cl-eng span{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin:0 0 5px}
.cl-eng textarea{font-size:.9rem}
.cl-actions{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap}
.qty{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--ink)}
.qty input{width:74px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;text-align:center}
.cl-price{font-weight:700;color:var(--ink);font-size:1.05rem;white-space:nowrap}

.cart-sum,.co-side .co-card{position:sticky;top:96px}
.cart-sum{background:var(--blue-50);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.cart-sum h2{font-size:1.15rem}
.sum{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:14px 0 4px;font-size:.94rem}
.sum dt{color:var(--body)}
.sum dd{margin:0;text-align:right;color:var(--ink);font-weight:600}
.sum .grand{padding-top:10px;border-top:1px solid var(--line);font-size:1.1rem;font-weight:800;color:var(--ink)}
.ship-hint{font-size:.85rem;color:var(--blue-700);margin:10px 0 0;font-weight:500}
.ship-hint.ok{color:#0d6b41}

/* ---------- checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start;margin-top:22px}
.co-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:0 0 20px;box-shadow:var(--shadow-s)}
.co-card h2{font-size:1.12rem;margin:0 0 16px;display:flex;align-items:baseline;gap:10px}
.co-side .co-card{background:var(--blue-50)}
.signin-nudge{background:var(--blue-50);border:1px solid var(--blue-300);border-radius:10px;padding:12px 16px;font-size:.93rem;margin:14px 0 0}
.saved-addr{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.saved-addr-h{flex:1 0 100%;font-size:.85rem;font-weight:600;color:var(--ink)}
.addr-pick{flex:1 1 220px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font:inherit;font-size:.86rem;color:var(--body);cursor:pointer;transition:.15s}
.addr-pick:hover{border-color:var(--blue-500);background:var(--blue-50)}
.pay-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);
  border-radius:11px;margin:0 0 12px;cursor:pointer;transition:.15s;font-size:.93rem}
.pay-opt:hover{border-color:var(--blue-500);background:var(--blue-50)}
.pay-opt input{margin-top:4px;width:18px;height:18px;accent-color:var(--blue-700)}
.pay-opt b{color:var(--ink)}
.pay-note{background:#fff8e6;border:1px solid #f2d98d;border-radius:10px;padding:12px 15px;font-size:.9rem;color:#7a5b06}
.co-items{list-style:none;margin:0 0 6px;padding:0}
.co-items li{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.co-items img{border-radius:7px;border:1px solid var(--line);background:#fff}
.co-items b{display:block;color:var(--ink);font-size:.9rem;line-height:1.35}
.co-items span{display:block;font-size:.83rem;color:var(--muted)}
.co-items em{display:block;font-size:.79rem;color:var(--muted);font-style:normal;margin-top:2px}
.co-lt{font-weight:700;color:var(--ink);font-size:.9rem;white-space:nowrap}

/* ---------- payment + success ---------- */
.pay-box,.auth-box{max-width:480px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow-s)}
.auth-box{text-align:left}
.auth-alt{font-size:.9rem;margin:14px 0 0;text-align:center}
.success-box{max-width:720px;margin:0 auto;text-align:center;padding:14px 0 34px}
.tick{width:64px;height:64px;border-radius:50%;background:#12a05c;display:grid;place-items:center;margin:0 auto 18px}
.paid-note{background:#edfbf3;border:1px solid #a7e6c6;color:#0d6b41;border-radius:10px;padding:12px 16px;display:inline-block}
.paid-note.pend{background:#fff8e6;border-color:#f2d98d;color:#7a5b06}
.next-steps{text-align:left;background:var(--blue-50);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:26px 0}
.next-steps h2{font-size:1.1rem}
.next-steps ol{margin:0;padding-left:20px}
.next-steps li{margin:0 0 8px}
.succ-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.claim-note{font-size:.9rem;color:var(--muted);margin-top:22px}
.ord-summary{max-width:720px;margin:34px auto 0;border-top:1px solid var(--line);padding-top:24px}

/* ---------- account ---------- */
.acct-layout{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start;margin-top:24px}
.acct-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px}
.acct-nav a{padding:10px 14px;border-radius:9px;color:var(--ink);font-size:.94rem;font-weight:500}
.acct-nav a:hover{background:var(--blue-50);text-decoration:none}
.acct-nav a.on{background:var(--blue-50);color:var(--blue-700);font-weight:700}
.acct-nav .acct-out{margin-top:10px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:.9rem}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:0 0 20px;box-shadow:var(--shadow-s)}
.acct-card h2{font-size:1.1rem;margin:0 0 14px}
.acct-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 12px}
.acct-card-h h2{margin:0}
.acct-card-h a{font-size:.88rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px}
.stat{background:var(--blue-50);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1.2}
.stat span{font-size:.85rem;color:var(--muted)}

.ord-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.ord-row:last-child{border-bottom:0}
.ord-row:hover{text-decoration:none;background:var(--blue-50)}
.ord-row b{display:block;color:var(--ink);font-size:.95rem}
.ord-row span{font-size:.85rem;color:var(--muted)}
.ord-amt{font-weight:700;color:var(--ink)}

.ord-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.ord-filters a{padding:7px 14px;border:1px solid var(--line);border-radius:20px;font-size:.86rem;color:var(--body);background:#fff}
.ord-filters a:hover{border-color:var(--blue-500);text-decoration:none}
.ord-filters a.on{background:var(--blue-700);border-color:var(--blue-700);color:#fff;font-weight:600}

.ord-card{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 18px;overflow:hidden;background:#fff}
.ord-card-h{display:flex;gap:26px;flex-wrap:wrap;align-items:center;background:var(--blue-50);padding:14px 20px;border-bottom:1px solid var(--line)}
.ord-card-h .lbl{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.ord-card-h b{color:var(--ink);font-size:.92rem}
.ord-card-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.ord-card-b{display:flex;gap:20px;flex-wrap:wrap;padding:16px 20px}
.ord-thumb{display:flex;align-items:center;gap:10px;font-size:.89rem;color:var(--ink)}
.ord-thumb img{border-radius:7px;border:1px solid var(--line)}
.ord-card-f{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;background:#fff8e6;border-top:1px solid #f2d98d;font-size:.9rem;color:#7a5b06}

.pill{display:inline-block;padding:4px 11px;border-radius:20px;font-size:.78rem;font-weight:700;letter-spacing:.01em}
.pill-pending{background:#fff3d6;color:#8a6200}
.pill-confirmed{background:var(--blue-100);color:var(--blue-800)}
.pill-in_production{background:#ece7fb;color:#5b3fbf}
.pill-shipped{background:#dff1fb;color:#0b6a92}
.pill-delivered{background:#e2f7ed;color:#0d6b41}
.pill-cancelled{background:#fbe6e4;color:#a5261c}
.pill-pay-paid{background:#e2f7ed;color:#0d6b41}
.pill-pay-unpaid{background:#fff3d6;color:#8a6200}
.pill-pay-failed{background:#fbe6e4;color:#a5261c}
.pill-pay-refunded{background:#eceff5;color:#4a5a78}

.ord-detail{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start;margin-top:22px}
.ord-line{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}
.ord-line img{border-radius:8px;border:1px solid var(--line);background:var(--blue-50)}
.ord-line b{display:block;color:var(--ink);font-size:.95rem}
.ord-line span{display:block;font-size:.85rem;color:var(--muted)}
.ord-line em{display:block;font-size:.83rem;color:var(--body);font-style:normal;margin-top:3px}
.ord-lt{font-weight:700;color:var(--ink);white-space:nowrap}

.track{list-style:none;display:flex;margin:24px 0 8px;padding:0;counter-reset:step}
.track li{flex:1;position:relative;text-align:center;font-size:.83rem;color:var(--muted)}
.track li::before{content:"";position:absolute;top:9px;left:0;right:50%;height:2px;background:var(--line)}
.track li::after{content:"";position:absolute;top:9px;left:50%;right:0;height:2px;background:var(--line)}
.track li:first-child::before,.track li:last-child::after{display:none}
.track li.done::before,.track li.done .dot{background:var(--blue-700)}
.track li.done:not(.now)::after{background:var(--blue-700)}
.track .dot{position:relative;z-index:1;display:block;width:20px;height:20px;border-radius:50%;
  background:var(--line);margin:0 auto 8px;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.track li.done .dot{box-shadow:0 0 0 1px var(--blue-700)}
.track li.now{color:var(--blue-800);font-weight:700}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:0 0 14px 18px;border-left:2px solid var(--line);position:relative;margin-left:4px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--blue-700)}
.timeline b{display:block;color:var(--ink);font-size:.93rem}
.timeline span{font-size:.82rem;color:var(--muted)}
.timeline p{margin:4px 0 0;font-size:.88rem}

.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:0 0 22px}
.addr-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff;font-size:.92rem}
.addr-card b{color:var(--ink)}
.addr-card p{margin:6px 0 0}
.tag-def{position:absolute;top:12px;right:14px;background:var(--blue-100);color:var(--blue-800);
  font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:12px}
.addr-acts{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.87rem}

.pager{display:flex;gap:6px;justify-content:center;margin:24px 0 0}
.pager a{min-width:38px;text-align:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--body)}
.pager a.on{background:var(--blue-700);border-color:var(--blue-700);color:#fff;font-weight:700}
.pager a:hover{text-decoration:none;border-color:var(--blue-500)}

/* ---------- product page add-to-cart ---------- */
.atc{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 14px}
.atc .qty input{width:82px}
.atc-eng{display:block;margin:0 0 14px}
.atc-eng span{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin:0 0 6px}
.atc-eng textarea{width:100%;max-width:520px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.93rem;resize:vertical}
.atc-msg{font-size:.9rem;font-weight:600;color:#0d6b41;margin:0 0 12px;min-height:1.2em}
.atc-msg.err{color:#b42318}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cart-layout,.checkout-layout,.ord-detail,.acct-layout{grid-template-columns:1fr}
  .cart-sum,.co-side .co-card,.acct-nav{position:static}
  .acct-nav{flex-direction:row;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}
  .acct-nav .acct-out{border-top:0;margin-top:0;padding-top:10px}
}
@media(max-width:640px){
  .fld-grid{grid-template-columns:1fr}
  .cart-line{grid-template-columns:84px 1fr;gap:14px}
  .cl-price{grid-column:2;text-align:right}
  .stat-row{grid-template-columns:1fr}
  .ord-card-h{gap:14px}
  .ord-card-actions{margin-left:0;width:100%}
  .track{flex-wrap:wrap;gap:14px 0}
  .track li{flex:1 0 33%}
  .track li::before,.track li::after{display:none}
}

/* ---------- admin ---------- */
.adm-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.adm-filters input,.adm-filters select{padding:10px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.93rem}
.adm-filters input{flex:1 1 280px}
.adm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.adm-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:820px}
.adm-table th{text-align:left;padding:12px 16px;background:var(--blue-50);color:var(--ink);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.adm-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table tr:hover td{background:var(--blue-50)}

/* ---------- product card call-to-action pair ---------- */
.card-cta{display:flex;gap:8px;flex-wrap:wrap}
.card-cta .btn{flex:1 1 auto;padding:11px 14px;font-size:.9rem}