/* =====================================================================
   Cuprabbits shop components.

   Extends site.css (the original landing-page design system) with the
   pieces a real storefront needs: listing, product detail, cart, checkout,
   account pages, forms, tables and pagination.

   Every rule here reuses the tokens already declared on :root in site.css
   (--brand, --aqua, --ink, --slate, --line, --r-lg …) so the shop pages and
   the marketing page stay visually identical.
   ===================================================================== */

/* ---------- page shell ---------- */
.page{padding:132px 0 96px;min-height:70vh}
.page-head{margin-bottom:34px}
.page-head h1{font-size:clamp(26px,3.4vw,40px);margin:14px 0 10px}
.page-head p{color:var(--slate);font-size:15.5px;max-width:680px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumbs a{color:var(--slate)}
.crumbs a:hover{color:var(--brand)}
.crumbs span.sep{opacity:.5}

/* ---------- generic surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.card + .card{margin-top:18px}
.card-title{font-size:17px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.card-title .count{font-size:13px;font-weight:700;color:var(--muted)}
.muted{color:var(--muted)}
.empty-state{text-align:center;padding:72px 24px;color:var(--muted)}
.empty-state svg{width:54px;height:54px;opacity:.3;margin-bottom:16px}
.empty-state p{font-size:15px;margin-bottom:20px}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field > label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.field .err{font-size:12.5px;color:#d0402c;margin-top:6px;display:none}
.field.has-error .err{display:block}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#d0402c}
.input,input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=date],select,textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:12px 15px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
textarea{min-height:104px;resize:vertical;line-height:1.6}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--aqua-deep);box-shadow:0 0 0 3px rgba(127,205,235,.22);
}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d769c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
html[dir=rtl] select{background-position:left 15px center;padding-right:15px;padding-left:38px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkline{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;user-select:none}
.checkline input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.captcha-row{display:flex;gap:12px;align-items:stretch}

/* Dialling code beside the number, as a phone number is actually written.
   The code column is capped so a long country name cannot squeeze the number
   field down to nothing on a narrow screen. */
.tel-row{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:12px}
.tel-row select{min-width:0}
@media (max-width:420px){ .tel-row{grid-template-columns:1fr;gap:10px} }
.captcha-row img{height:46px;border-radius:12px;border:1px solid var(--line);cursor:pointer;background:var(--white)}

/* ---------- buttons (extends .btn from site.css) ---------- */
.btn[disabled]{opacity:.55;pointer-events:none}

/* A button waiting on the server has to look like it is waiting. Dimming it
   to 55% was too quiet for actions that take seconds — sending a verification
   code, placing an order — and a customer who reads it as "nothing happened"
   clicks again, which can mean two orders. */
.btn.is-loading{pointer-events:none;opacity:.9}
.btn.is-loading::after{
  content:'';display:inline-block;width:13px;height:13px;margin-inline-start:9px;
  vertical-align:-2px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.is-loading::after{animation-duration:2s}
}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-block{width:100%;justify-content:center}
.btn-danger{background:#d0402c;color:#fff;border-color:#d0402c}
.btn-danger:hover{background:#b8371f}
.btn-line{background:none;border:1px solid var(--line);color:var(--slate)}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- auth pages ---------- */
.auth-wrap{max-width:460px;margin:0 auto}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 34px}
.auth-card h1{font-size:27px;margin-bottom:8px}
.auth-card .lead{color:var(--slate);font-size:14.5px;margin-bottom:26px}
.auth-foot{margin-top:22px;text-align:center;font-size:14px;color:var(--slate)}
.auth-foot a{color:var(--brand);font-weight:700}
.auth-note{background:var(--bg-2);border-radius:14px;padding:14px 16px;font-size:13px;color:var(--slate);margin-bottom:20px;line-height:1.6}

/* ---------- product listing ---------- */
.shop-layout{display:grid;grid-template-columns:248px 1fr;gap:34px;align-items:start}
.shop-side{position:sticky;top:110px}
.side-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin-bottom:16px}
.side-block h4{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cat-list a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--slate)}
.cat-list a:hover{background:var(--bg-2);color:var(--brand)}
.cat-list a.active{background:var(--brand);color:#fff}
.cat-list .sub{padding-inline-start:14px}
.cat-list .sub a{font-size:13.5px;font-weight:500}

.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.shop-toolbar .result{font-size:14px;color:var(--slate)}
.sort-tabs{display:flex;gap:6px;flex-wrap:wrap}
.sort-tabs a{padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--slate);border:1px solid var(--line);background:var(--white)}
.sort-tabs a:hover{border-color:var(--aqua)}
.sort-tabs a.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.searchbar{display:flex;gap:10px;margin-bottom:18px}
.searchbar input{flex:1}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:22px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.pcard:hover{transform:translateY(-4px);border-color:var(--aqua)}
.pcard-media{position:relative;aspect-ratio:1/1;background:var(--bg-2);display:flex;align-items:center;justify-content:center;padding:18px}
.pcard-media img{width:100%;height:100%;object-fit:contain}
.pcard-flags{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;gap:6px}
.flag{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.flag-new{background:var(--mint);color:#1c6a52}
.flag-hot{background:var(--yellow);color:#8a6410}
.flag-off{background:rgba(16,42,77,.72);color:#fff}
.pcard-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.pcard-body h3{font-size:15px;font-weight:800;line-height:1.35;margin-bottom:6px}
.pcard-body p{font-size:13px;color:var(--slate);line-height:1.5;margin-bottom:14px;flex:1}
.pcard-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.price{font-family:'Fredoka',sans-serif;font-size:19px;font-weight:700;color:var(--brand);white-space:nowrap}
.price .cur{font-size:12px;font-weight:600;color:var(--slate);margin-inline-end:3px}
.price-was{font-size:12.5px;color:var(--muted);text-decoration:line-through;margin-inline-start:6px}
.pcard-sold{font-size:12px;color:var(--muted)}

/* ---------- pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:40px;flex-wrap:wrap}
.pager a,.pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border-radius:12px;font-size:14px;font-weight:700;color:var(--slate);
  border:1px solid var(--line);background:var(--white)}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .current{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager .disabled{opacity:.4;pointer-events:none}

/* ---------- product detail ---------- */
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.pd-gallery{position:sticky;top:110px}
.pd-main{aspect-ratio:1/1;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;padding:34px;overflow:hidden}
.pd-main img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.pd-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.pd-thumb{width:70px;height:70px;border-radius:16px;border:2px solid transparent;background:var(--bg-2);
  padding:7px;cursor:pointer;overflow:hidden}
.pd-thumb img{width:100%;height:100%;object-fit:contain}
.pd-thumb.active{border-color:var(--brand)}

.pd-info h1{font-size:clamp(24px,3vw,34px);margin:12px 0 10px}
.pd-sub{color:var(--slate);font-size:15px;line-height:1.65;margin-bottom:22px}
.pd-price{background:var(--bg-2);border-radius:var(--r-sm);padding:18px 22px;margin-bottom:24px}
.pd-price .now{font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;color:var(--brand)}
.pd-price .now .cur{font-size:15px;color:var(--slate);margin-inline-end:5px}
.pd-price .meta{display:flex;gap:18px;margin-top:8px;font-size:13px;color:var(--slate);flex-wrap:wrap}

.spec-group{margin-bottom:20px}
.spec-group > label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.spec-opts{display:flex;gap:9px;flex-wrap:wrap}
.spec-opt{padding:9px 17px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate);cursor:pointer;
  transition:all .22s var(--ease)}
.spec-opt:hover:not(.disabled){border-color:var(--aqua)}
.spec-opt.active{border-color:var(--brand);background:var(--brand);color:#fff}
.spec-opt.disabled{opacity:.36;cursor:not-allowed;text-decoration:line-through}

.qty-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.qty-box{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--white)}
.qty-box button{width:34px;height:34px;border-radius:50%;border:none;background:var(--bg-2);color:var(--brand);
  font-size:18px;font-weight:800;cursor:pointer;line-height:1;font-family:inherit}
.qty-box button:hover:not(:disabled){background:var(--sky)}
.qty-box button:disabled{opacity:.4;cursor:not-allowed}
.qty-box input{width:56px;border:none;text-align:center;font-size:15px;font-weight:800;background:none;padding:0}
.qty-box input:focus{outline:none;box-shadow:none}
.stock-note{font-size:13px;color:var(--slate)}
.stock-note.low{color:#c9622f;font-weight:700}
.stock-note.out{color:#d0402c;font-weight:700}

.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.fav-btn{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate);transition:all .25s var(--ease)}
.fav-btn:hover{border-color:var(--brand);color:var(--brand)}
.fav-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.fav-btn svg{width:20px;height:20px}

.pd-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:48px 0 26px}
.pd-tab{padding-bottom:14px;font-size:15px;font-weight:800;color:var(--muted);cursor:pointer;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;background:none;border-top:none;border-inline:none;font-family:inherit}
.pd-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.pd-pane{display:none;line-height:1.8;color:var(--slate);font-size:15px}
.pd-pane.active{display:block}
.pd-pane img{border-radius:var(--r-sm);margin:16px 0}
.pd-pane h3{color:var(--ink);font-size:18px;margin:22px 0 10px}

/* ---------- reviews ---------- */
.rating-summary{display:flex;gap:40px;align-items:center;flex-wrap:wrap;margin-bottom:28px;
  background:var(--bg-2);border-radius:var(--r-md);padding:24px 28px}
.rating-big{text-align:center}
.rating-big b{display:block;font-family:'Fredoka',sans-serif;font-size:44px;color:var(--brand);line-height:1}
.rating-big span{font-size:13px;color:var(--slate)}
.rating-bars{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.rating-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--slate)}
.rating-bar .track{flex:1;height:7px;border-radius:999px;background:rgba(16,42,77,.08);overflow:hidden}
.rating-bar .fill{height:100%;background:linear-gradient(90deg,var(--aqua),var(--brand));border-radius:999px}
.stars{display:inline-flex;gap:2px;color:#f0b429}
.stars svg{width:15px;height:15px}
.stars .off{color:rgba(16,42,77,.16)}
.review{padding:20px 0;border-bottom:1px solid var(--line)}
.review-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.review-user{font-size:14px;font-weight:800}
.review-date{font-size:12.5px;color:var(--muted)}
.review-spec{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.review p{font-size:14.5px;line-height:1.7;color:var(--slate)}
.review-imgs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.review-imgs img{width:78px;height:78px;object-fit:cover;border-radius:12px}
.review-reply{margin-top:12px;background:var(--bg-2);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--slate)}
.review-reply b{color:var(--brand)}
.star-input{display:inline-flex;gap:5px}
.star-input button{background:none;border:none;cursor:pointer;color:rgba(16,42,77,.2);padding:0;line-height:0}
.star-input button svg{width:28px;height:28px}
.star-input button.on{color:#f0b429}

/* ---------- cart page ---------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start}
.cart-line{display:grid;grid-template-columns:auto 92px 1fr auto auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:none}
.cart-line.unavailable{opacity:.55}
.cart-line .thumb{width:92px;height:92px;border-radius:18px;background:var(--bg-2);padding:9px}
.cart-line .thumb img{width:100%;height:100%;object-fit:contain}
.cart-line .info h4{font-size:15px;font-weight:800;margin-bottom:5px;line-height:1.35}
.cart-line .info .spec{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.cart-line .info .warn{font-size:12.5px;color:#d0402c;font-weight:700}
.cart-line .line-total{font-family:'Fredoka',sans-serif;font-size:17px;font-weight:700;color:var(--brand);white-space:nowrap}
.cart-line .drop{background:none;border:none;color:var(--muted);cursor:pointer;font-size:17px;padding:6px}
.cart-line .drop:hover{color:#d0402c}
.cart-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.summary{position:sticky;top:110px}
.sum-row{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;color:var(--slate);padding:9px 0}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-size:16px;font-weight:800;color:var(--ink)}
.sum-row.total .val{font-family:'Fredoka',sans-serif;font-size:24px;font-weight:700;color:var(--brand)}
.sum-row.discount .val{color:#2f9e6e}

/* ---------- checkout ---------- */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}
.addr-list{display:grid;gap:12px}
.addr-opt{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;background:var(--white);transition:border-color .22s var(--ease)}
.addr-opt:hover{border-color:var(--aqua)}
.addr-opt.active{border-color:var(--brand);background:var(--bg)}
.addr-opt input{margin-top:4px;accent-color:var(--brand)}
.addr-opt .who{font-size:14.5px;font-weight:800;margin-bottom:4px}
.addr-opt .who .tag{font-size:10.5px;font-weight:800;background:var(--mint);color:#1c6a52;
  padding:2px 8px;border-radius:999px;margin-inline-start:8px;letter-spacing:.06em;text-transform:uppercase}
.addr-opt .where{font-size:13px;color:var(--slate);line-height:1.55}
.ship-opts{display:grid;gap:10px}
.coupon-pick{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.coupon-pick select{flex:1;min-width:200px}
.co-items{display:grid;gap:14px}
.co-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.co-item .thumb{width:64px;height:64px;border-radius:14px;background:var(--bg-2);padding:6px}
.co-item .thumb img{width:100%;height:100%;object-fit:contain}
.co-item h5{font-size:14px;font-weight:700;line-height:1.35}
.co-item .spec{font-size:12px;color:var(--muted);margin-top:3px}
.co-item .qty{font-size:12.5px;color:var(--slate)}

/* ---------- coupons ---------- */
.coupon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.coupon{position:relative;display:flex;border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff}
.coupon.used,.coupon.expired{background:linear-gradient(120deg,#9fb0c7,#b9c5d6)}
.coupon-value{flex:0 0 116px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 10px;border-inline-end:2px dashed rgba(255,255,255,.35)}
.coupon-value b{font-family:'Fredoka',sans-serif;font-size:26px;line-height:1}
.coupon-value span{font-size:11px;opacity:.85;margin-top:5px;text-align:center}
.coupon-body{flex:1;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.coupon-body h4{font-size:15px;font-weight:800}
.coupon-body p{font-size:12.5px;opacity:.86}
.coupon-body .claim{align-self:flex-start;margin-top:8px;background:#fff;color:var(--brand);
  border:none;border-radius:999px;padding:7px 18px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.coupon-body .claim[disabled]{opacity:.6;cursor:not-allowed}

/* ---------- account ---------- */
.acct-grid{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start}
.acct-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;position:sticky;top:110px}
.acct-nav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:13px;
  font-size:14.5px;font-weight:600;color:var(--slate)}
.acct-nav a svg{width:17px;height:17px;flex:0 0 auto}
.acct-nav a:hover{background:var(--bg-2);color:var(--brand)}
.acct-nav a.active{background:var(--brand);color:#fff}
.acct-hello{display:flex;align-items:center;gap:14px;padding:16px 14px 18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.acct-hello .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,var(--aqua),var(--brand));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:0 0 auto}
.acct-hello b{font-size:14.5px;display:block}
.acct-hello span{font-size:12px;color:var(--muted)}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px}
.stat b{display:block;font-family:'Fredoka',sans-serif;font-size:26px;color:var(--brand);line-height:1.1}
.stat span{font-size:12.5px;color:var(--slate)}

/* ---------- orders ---------- */
.order-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.order-tabs a{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--slate);border:1px solid var(--line);background:var(--white)}
.order-tabs a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.order-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:16px;overflow:hidden}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px;background:var(--bg-2);font-size:13px}
.order-top .no{font-weight:700;color:var(--slate)}
.order-top .no span{color:var(--muted);font-weight:500;margin-inline-end:6px}
.badge{font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.04em}
.badge-wait{background:var(--yellow);color:#8a6410}
.badge-ship{background:var(--sky);color:var(--brand)}
.badge-send{background:var(--mint);color:#1c6a52}
.badge-done{background:rgba(16,42,77,.08);color:var(--slate)}
.badge-cancel{background:rgba(208,64,44,.12);color:#b8371f}
.order-items{padding:6px 22px}
.order-item{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.order-item:last-child{border-bottom:none}
.order-item .thumb{width:70px;height:70px;border-radius:15px;background:var(--bg-2);padding:7px}
.order-item .thumb img{width:100%;height:100%;object-fit:contain}
.order-item h5{font-size:14.5px;font-weight:700;line-height:1.35;margin-bottom:4px}
.order-item .spec{font-size:12.5px;color:var(--muted)}
.order-item .amt{text-align:end;font-size:13.5px;color:var(--slate);white-space:nowrap}
.order-item .amt b{display:block;color:var(--ink);font-size:14.5px}
.order-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--line)}
.order-foot .total{font-size:14px;color:var(--slate)}
.order-foot .total b{font-family:'Fredoka',sans-serif;font-size:21px;color:var(--brand);margin-inline-start:6px}
.order-foot .acts{display:flex;gap:9px;flex-wrap:wrap}

.timeline{position:relative;padding-inline-start:26px}
.timeline::before{content:'';position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:20px}
.tl-item::before{content:'';position:absolute;inset-inline-start:-24px;top:5px;width:11px;height:11px;
  border-radius:50%;background:var(--white);border:2.5px solid var(--aqua)}
.tl-item:first-child::before{border-color:var(--brand);background:var(--brand)}
.tl-item b{display:block;font-size:14px;margin-bottom:3px}
.tl-item span{font-size:12.5px;color:var(--muted)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{color:var(--ink);font-weight:600;word-break:break-word}

/* ---------- payment ---------- */
.pay-wrap{max-width:520px;margin:0 auto;text-align:center}
.pay-icon{width:88px;height:88px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center}
.pay-icon.ok{background:var(--mint);color:#1c6a52}
.pay-icon.wait{background:var(--yellow);color:#8a6410}
.pay-icon.err{background:rgba(208,64,44,.14);color:#b8371f}
.pay-icon svg{width:40px;height:40px}
.pay-wrap h1{font-size:28px;margin-bottom:10px}
.pay-wrap p{color:var(--slate);font-size:15px;line-height:1.7;margin-bottom:26px}
.pay-amount{font-family:'Fredoka',sans-serif;font-size:36px;color:var(--brand);margin-bottom:8px}
.dev-banner{background:#fff4d6;border:1px solid #f0d27a;color:#7a5a12;border-radius:14px;
  padding:14px 18px;font-size:13.5px;font-weight:700;margin-bottom:24px;text-align:start;line-height:1.6}

/* ---------- toast ---------- */
/* Centred, not tucked into a corner. A message pinned to the top-right of a
   wide screen sits diagonally opposite whatever was just clicked and gets
   missed — which matters most for the errors, the ones that need reading.
   Kept clear of the sticky header so it never covers the navigation. */
.toast-host{position:fixed;top:88px;inset-inline:0;z-index:400;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none;padding-inline:16px}
.toast{background:var(--ink);color:#fff;border-radius:14px;padding:13px 20px;font-size:14px;font-weight:600;
  box-shadow:0 12px 34px rgba(16,42,77,.26);opacity:0;transform:translateY(-10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);max-width:340px;line-height:1.5}
.toast.in{opacity:1;transform:none}
.toast.ok{background:#1f7a58}
.toast.err{background:#b8371f}

/* ---------- header cart count ---------- */
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--brand)}
.nav-cart:hover{border-color:var(--brand)}
.nav-cart svg{width:19px;height:19px}
.nav-cart .n{position:absolute;top:-3px;inset-inline-end:-3px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:#d0402c;color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.nav-cart .n.empty{display:none}
.user-menu{position:relative}
.user-menu-pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:186px;background:var(--white);
  border:1px solid var(--line);border-radius:18px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .24s var(--ease);box-shadow:0 18px 44px rgba(16,42,77,.14);z-index:120}
.user-menu-pop.open{opacity:1;visibility:visible;transform:none}
.user-menu-pop a,.user-menu-pop button{display:block;width:100%;text-align:start;padding:10px 14px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--slate);background:none;border:none;cursor:pointer;font-family:inherit}
.user-menu-pop a:hover,.user-menu-pop button:hover{background:var(--bg-2);color:var(--brand)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pd-grid{grid-template-columns:1fr;gap:34px}
  .pd-gallery{position:static}
  .cart-grid,.co-grid{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  .shop-side{position:static}
  .acct-grid{grid-template-columns:1fr}
  .acct-nav{position:static;display:flex;gap:6px;overflow-x:auto;padding:10px}
  .acct-nav a{white-space:nowrap}
  .acct-hello{display:none}
}
@media (max-width:640px){
  .page{padding:104px 0 68px}
  .field-row{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .cart-line{grid-template-columns:auto 68px 1fr;gap:12px}
  .cart-line .thumb{width:68px;height:68px}
  .cart-line .line-total,.cart-line .drop{grid-column:3;justify-self:end}
  .auth-card{padding:28px 22px}
  .toast-host{top:76px}
  .toast{max-width:none}
  .order-item{grid-template-columns:58px 1fr}
  .order-item .amt{grid-column:2;text-align:start}
  .rating-summary{gap:22px;padding:18px}
}

/* Registration confirmed (or not) after following the emailed link. */
.verify-mark{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center}
.verify-mark svg{width:30px;height:30px}
.verify-ok{background:rgba(127,205,235,.22);color:var(--brand)}
.verify-bad{background:rgba(220,80,80,.14);color:#c0392b}

/* Verification code field with its "get code" button alongside. */
.code-row{display:flex;gap:10px;align-items:stretch}
.code-row input{flex:1;min-width:0}
.code-row .btn{flex:0 0 auto;white-space:nowrap;padding-left:18px;padding-right:18px}
.code-row .btn:disabled{opacity:.55;cursor:default}
@media(max-width:420px){.code-row{flex-direction:column}.code-row .btn{width:100%}}

/* ============================================================
   Searchable select (select-search.js)

   A country or dialling-code list is ~250 options, which is too many to
   scroll. The native <select> stays as the form control and stays hidden
   underneath; these styles are for the listbox shown in front of it, and
   they deliberately copy the input styling above so the enhanced control
   is indistinguishable from the plain ones beside it.
   ============================================================ */
/* min-width:0 because .tel-row is a grid and the wrapper is now the grid
   item the select used to be; without it a long country name blows the
   column out instead of ellipsising. */
.ss{position:relative;width:100%;min-width:0}

/* Still rendered, so the browser can focus it when `required` fails —
   display:none would make the form refuse to submit with nothing to point
   at. Kept out of the tab order and hidden from assistive tech instead. */
.ss-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}

.ss-button{
  display:flex;align-items:center;gap:8px;width:100%;
  font-family:inherit;font-size:14.5px;color:var(--ink);text-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:12px 15px;cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ss-button:focus-visible,.ss.is-open .ss-button{
  outline:none;border-color:var(--aqua-deep);box-shadow:0 0 0 3px rgba(127,205,235,.22);
}
.ss-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-caret{color:var(--slate);font-size:11px;line-height:1;flex:none}

/* Pinned to the start edge and allowed to grow past the trigger: on the
   sign-up form the dialling-code column is capped at 150px, and a popup
   locked to that width truncated every country name to "阿拉伯联合酋…".
   It overflows the column instead, which nothing above it clips. */
.ss-pop{
  position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);
  min-width:100%;width:max-content;max-width:min(320px,86vw);
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(16,42,77,.16);padding:8px;
}
.ss-input{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;margin-bottom:6px;
}
.ss-input:focus{outline:none;border-color:var(--aqua-deep)}

.ss-list{list-style:none;margin:0;padding:0;max-height:264px;overflow-y:auto}
.ss-opt{
  padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ss-opt:hover,.ss-opt.is-active{background:rgba(127,205,235,.18)}
.ss-opt.is-chosen{color:var(--brand);font-weight:700}
.ss-empty{margin:0;padding:12px;font-size:13px;color:var(--muted);text-align:center}

/* The invalid-field outline used to land on the select, which is now
   invisible; move it to the control the customer can actually see. */
.field.has-error .ss-button{border-color:#d0402c}

/* On a phone the popup is the whole point, so give it room. */
@media (max-width:420px){ .ss-list{max-height:210px} }

/* The merchant's spec sheet, above the description. Label on the reading
   side, value on the far side — text-align:start/end rather than left/right
   so the Arabic layout needs no separate rule. */
.pd-spec{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 30px}
.pd-spec caption{
  text-align:start;font-size:18px;font-weight:800;
  color:var(--ink);padding-bottom:12px;
}
.pd-spec tr{border-top:1px solid var(--line)}
.pd-spec tr:last-child{border-bottom:1px solid var(--line)}
.pd-spec th{
  text-align:start;font-weight:600;color:var(--slate);
  padding:11px 14px 11px 2px;white-space:nowrap;
}
.pd-spec td{text-align:end;font-weight:700;color:var(--ink);padding:11px 2px}
@media (max-width:560px){
  .pd-spec th{white-space:normal}
}