/* ============================================================
   ec.css — EC-site component styles (supplements style.css)
   ============================================================ */

/* ── Flash Messages ──────────────────────────────────────── */
.flash-container { position:fixed; top:calc(var(--header-h) + var(--sp-3)); inset-inline-end:var(--sp-4); z-index:9999; display:flex; flex-direction:column; gap:var(--sp-2); max-width:380px; }
.flash { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--fw-medium); box-shadow:var(--shadow-lg); animation:slideInFlash .3s var(--ease-out); }
.flash-success { background:var(--clr-success); color:#fff; }
.flash-error   { background:var(--clr-danger);  color:#fff; }
.flash-info    { background:var(--clr-info);    color:#fff; }
.flash-close   { margin-inline-start:auto; background:none; border:none; color:inherit; cursor:pointer; font-size:1.1rem; opacity:.8; }
.flash-close:hover { opacity:1; }
@keyframes slideInFlash { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
[dir="rtl"] .flash-container { inset-inline-end:var(--sp-4); }
@keyframes slideInFlashRtl { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
[dir="rtl"] .flash { animation-name:slideInFlashRtl; }

/* ── Header Search ───────────────────────────────────────── */
.header-search-form { display:flex; align-items:center; background:var(--clr-gray-100); border-radius:var(--radius-full); overflow:hidden; border:1px solid var(--clr-gray-200); transition:border-color var(--dur-fast); }
.header-search-form:focus-within { border-color:var(--clr-primary-400); background:#fff; }
.header-search-input { background:none; border:none; outline:none; padding:.45rem .75rem; font-size:var(--text-sm); color:var(--clr-gray-700); width:180px; font-family:var(--font-body); }
.header-search-input::placeholder { color:var(--clr-gray-400); }
.header-search-btn { background:none; border:none; padding:.45rem .75rem; color:var(--clr-gray-500); cursor:pointer; display:flex; align-items:center; }
.header-search-btn:hover { color:var(--clr-primary-600); }

/* ── Icon Buttons ────────────────────────────────────────── */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-md); color:var(--clr-gray-600); border:1px solid var(--clr-gray-200); transition:all var(--dur-fast); position:relative; text-decoration:none; background:#fff; }
.icon-btn:hover { color:var(--clr-primary-600); border-color:var(--clr-primary-300); background:var(--clr-primary-50); }
.cart-badge { position:absolute; top:-6px; inset-inline-end:-6px; background:var(--clr-danger); color:#fff; font-size:.65rem; font-weight:var(--fw-bold); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

/* ── Hero ────────────────────────────────────────────────── */
.hero-section { background:linear-gradient(135deg, var(--clr-primary-900) 0%, var(--clr-primary-700) 50%, var(--clr-accent-600) 100%); color:#fff; min-height:520px; display:flex; align-items:center; }
.hero-inner { display:grid; grid-template-columns:1fr; gap:var(--sp-8); align-items:center; }
.hero-content { color:#fff; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--text-sm); font-weight:var(--fw-medium); color:rgba(255,255,255,.8); margin-bottom:var(--sp-4); }
.hero-title { color:#fff; margin-bottom:var(--sp-4); }
.hero-subtitle { color:rgba(255,255,255,.85); font-size:var(--text-lg); margin-bottom:var(--sp-8); line-height:var(--leading-loose); }
.hero-actions { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-10); }
.hero-stats { display:flex; align-items:center; gap:var(--sp-6); }
.hero-stat strong { display:block; font-size:var(--text-xl); font-weight:var(--fw-black); color:#fff; }
.hero-stat span { font-size:var(--text-sm); color:rgba(255,255,255,.7); }
.stat-divider { width:1px; height:40px; background:rgba(255,255,255,.2); }

/* ── Categories Grid ─────────────────────────────────────── */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--sp-4); }
.category-card { display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-5) var(--sp-4); background:#fff; border-radius:var(--radius-lg); border:1px solid var(--clr-gray-200); text-decoration:none; transition:all var(--dur-base) var(--ease-out); text-align:center; }
.category-card img { width:64px; height:64px; object-fit:contain; }
.category-icon-placeholder { width:64px; height:64px; background:var(--clr-primary-50); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--clr-primary-500); font-size:1.5rem; }
.category-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--clr-primary-200); }
.category-name { font-size:var(--text-sm); font-weight:var(--fw-semi); color:var(--clr-gray-700); }

/* ── Products Grid ───────────────────────────────────────── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-6); }

/* ── Product Card ────────────────────────────────────────── */
.product-card { background:#fff; border-radius:var(--radius-xl); border:1px solid var(--clr-gray-200); overflow:hidden; position:relative; transition:all var(--dur-base) var(--ease-out); box-shadow:var(--shadow-card); }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--clr-primary-200); }
.product-badge { position:absolute; top:var(--sp-3); inset-inline-start:var(--sp-3); z-index:1; font-size:var(--text-xs); font-weight:var(--fw-bold); padding:3px 10px; border-radius:var(--radius-full); }
.badge-sale     { background:var(--clr-danger); color:#fff; }
.badge-featured { background:var(--clr-primary-600); color:#fff; }
.product-image-link { display:block; overflow:hidden; aspect-ratio:1/1; background:var(--clr-gray-50); }
.product-image { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.product-card:hover .product-image { transform:scale(1.04); }
.product-info { padding:var(--sp-4); }
.product-name { display:block; font-size:var(--text-sm); font-weight:var(--fw-semi); color:var(--clr-gray-800); margin-bottom:var(--sp-1); text-decoration:none; line-height:1.4; }
.product-name:hover { color:var(--clr-primary-600); }
.product-category { font-size:var(--text-xs); color:var(--clr-gray-400); }
.product-price-row { display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0 var(--sp-3); flex-wrap:wrap; }
.product-price { font-size:var(--text-base); font-weight:var(--fw-bold); color:var(--clr-gray-900); }
.product-price--sale { color:var(--clr-danger); }
.product-price--old { font-size:var(--text-sm); color:var(--clr-gray-400); text-decoration:line-through; font-weight:var(--fw-regular); }
.product-actions { display:flex; gap:var(--sp-2); align-items:center; }
.product-actions .btn { flex:1; }
.wishlist-btn { width:36px; height:36px; flex-shrink:0; }

/* ── Why Cards ───────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--sp-6); }
.why-card { text-align:center; padding:var(--sp-8) var(--sp-6); background:#fff; border-radius:var(--radius-xl); border:1px solid var(--clr-gray-100); transition:all var(--dur-base); }
.why-card:hover { box-shadow:var(--shadow-card-hover); border-color:var(--clr-primary-200); }
.why-icon { width:60px; height:60px; border-radius:var(--radius-full); background:linear-gradient(135deg, var(--clr-primary-50), var(--clr-primary-100)); display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--clr-primary-600); margin-bottom:var(--sp-4); }
.why-card h4 { margin-bottom:var(--sp-2); }


/* サマリー商品 */
.summary-product {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 0.875rem;
}
.summary-product-name {
  color: var(--text-secondary, #555);
  flex: 1;
  padding-right: 8px;
}
.summary-product-qty {
  color: var(--text-muted, #999);
  font-size: 0.8rem;
}
.summary-product-price {
  white-space: nowrap;
  font-weight: 500;
}
.summary-divider {
  border: none;
  border-top: 1px solid var(--border-color, #eee);
  margin: 10px 0;
}

/* 通常の行 */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.875rem;
}
.summary-shipping-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 宛先バッジ */
.summary-destination-badge {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 0.75rem;
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* 合計ブロック */
.summary-total-block {
  background: var(--bg-secondary, #f8f8f8);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 0;
}
.summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.summary-total-label {
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.summary-currency-note {
  font-size: 0.75rem;
  color: var(--text-muted, #999);
  font-weight: 400;
}
.summary-total-jpy {
  font-size: 1.3rem;
  font-weight: 600;
}

/* 現地通貨換算 */
.summary-local-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.summary-local-approx {
  font-size: 0.8rem;
  color: var(--text-muted, #999);
}
.summary-local-value {
  font-size: 0.9rem;
  color: var(--text-secondary, #666);
  font-weight: 500;
}

/* 為替レートヒント */
.summary-rate-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #999);
  text-align: right;
  margin-top: 4px;
}
/* ── CTA Section ─────────────────────────────────────────── */
.cta-section { background:linear-gradient(135deg, var(--clr-primary-900), var(--clr-accent-600)); color:#fff; }
.cta-inner { text-align:center; padding:var(--sp-10) 0; }
.cta-title { color:#fff; font-size:clamp(var(--text-2xl),4vw,var(--text-4xl)); margin-bottom:var(--sp-4); }
.cta-inner p { color:rgba(255,255,255,.85); font-size:var(--text-lg); margin-bottom:var(--sp-8); }
.cta-actions { display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }
.section-cta { text-align:center; margin-top:var(--sp-10); }

/* ── Shop Layout ─────────────────────────────────────────── */
.shop-layout { display:grid; grid-template-columns:260px 1fr; gap:var(--sp-8); align-items:start; }
.shop-sidebar { position:sticky; top:calc(var(--header-h) + var(--sp-4)); }
.filter-panel { background:#fff; border-radius:var(--radius-xl); border:1px solid var(--clr-gray-200); padding:var(--sp-6); }
.filter-title { font-size:var(--text-base); font-weight:var(--fw-bold); margin-bottom:var(--sp-5); display:flex; align-items:center; gap:var(--sp-2); color:var(--clr-gray-800); }
.filter-group { margin-bottom:var(--sp-5); }
.filter-group label { display:block; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--clr-gray-600); margin-bottom:var(--sp-2); }
.price-range { display:flex; align-items:center; gap:var(--sp-2); }
.shop-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-6); }
.shop-results-count { font-size:var(--text-sm); color:var(--clr-gray-500); }
#filterToggle { display:none; }

/* ── Form Controls ───────────────────────────────────────── */
.form-control { width:100%; padding:.55rem var(--sp-4); border:1.5px solid var(--clr-gray-300); border-radius:var(--radius-md); font-family:var(--font-body); font-size:var(--text-sm); color:var(--clr-gray-800); background:#fff; transition:border-color var(--dur-fast),box-shadow var(--dur-fast); }
.form-control:focus { outline:none; border-color:var(--clr-primary-500); box-shadow:0 0 0 3px rgb(59 130 246/.15); }
.form-label { display:block; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--clr-gray-700); margin-bottom:var(--sp-2); }
.form-group { margin-bottom:var(--sp-5); }
.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:var(--sp-4); }
.form-check { display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer; font-size:var(--text-sm); }
.form-check-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); }
.text-link { color:var(--clr-primary-600); text-decoration:underline; font-size:var(--text-sm); }
.text-link:hover { color:var(--clr-primary-700); }
.input-password-wrap { position:relative; }
.input-password-wrap .form-control { padding-inline-end:2.5rem; }
.btn-show-pass { position:absolute; inset-inline-end:var(--sp-3); top:50%; transform:translateY(-50%); background:none; border:none; color:var(--clr-gray-400); cursor:pointer; padding:0; }
.btn-show-pass:hover { color:var(--clr-gray-600); }

/* ── Auth Card ───────────────────────────────────────────── */
.auth-card { background:#fff; border-radius:var(--radius-2xl); border:1px solid var(--clr-gray-200); padding:var(--sp-10); box-shadow:var(--shadow-lg); margin:0 auto; }
.auth-title { text-align:center; margin-bottom:var(--sp-8); font-size:var(--text-2xl); }
.auth-switch { text-align:center; margin-top:var(--sp-6); font-size:var(--text-sm); color:var(--clr-gray-500); }

/* ── Cart Layout ─────────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1fr 340px; gap:var(--sp-8); align-items:start; }
.cart-item { display:grid; grid-template-columns:72px 1fr auto auto 32px; align-items:center; gap:var(--sp-4); padding:var(--sp-4); border-bottom:1px solid var(--clr-gray-100); }
.cart-item-image { width:72px; height:72px; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--clr-gray-200); }
.cart-item-name { font-weight:var(--fw-semi); color:var(--clr-gray-800); font-size:var(--text-sm); text-decoration:none; }
.cart-item-name:hover { color:var(--clr-primary-600); }
.cart-item-price { font-size:var(--text-sm); color:var(--clr-gray-500); margin-top:var(--sp-1); }
.cart-item-subtotal { font-weight:var(--fw-bold); color:var(--clr-gray-900); }
.btn-remove { background:none; border:none; color:var(--clr-gray-400); cursor:pointer; padding:var(--sp-1); border-radius:var(--radius-sm); transition:color var(--dur-fast); }
.btn-remove:hover { color:var(--clr-danger); }
.cart-summary { background:#fff; border-radius:var(--radius-xl); border:1px solid var(--clr-gray-200); padding:var(--sp-6); position:sticky; top:calc(var(--header-h)+var(--sp-4)); }
.summary-title { font-size:var(--text-lg); font-weight:var(--fw-bold); margin-bottom:var(--sp-5); }
.summary-rows { display:flex; flex-direction:column; gap:var(--sp-3); }
.summary-row { display:flex; justify-content:space-between; font-size:var(--text-sm); color:var(--clr-gray-600); }
.summary-total { font-size:var(--text-base); font-weight:var(--fw-bold); color:var(--clr-gray-900); border-top:1px solid var(--clr-gray-200); padding-top:var(--sp-3); margin-top:var(--sp-2); }
.coupon-form { margin:var(--sp-5) 0; }
.coupon-row { display:flex; gap:var(--sp-2); }

/* ── Qty Selector ────────────────────────────────────────── */
.qty-selector, .qty-form { display:flex; align-items:center; gap:0; margin-bottom:var(--sp-4); }
.qty-btn { width:36px; height:36px; border:1.5px solid var(--clr-gray-300); background:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--clr-gray-700); transition:all var(--dur-fast); }
.qty-minus { border-radius:var(--radius-md) 0 0 var(--radius-md); }
.qty-plus  { border-radius:0 var(--radius-md) var(--radius-md) 0; }
[dir="rtl"] .qty-minus { border-radius:0 var(--radius-md) var(--radius-md) 0; }
[dir="rtl"] .qty-plus  { border-radius:var(--radius-md) 0 0 var(--radius-md); }
.qty-btn:hover { background:var(--clr-primary-50); border-color:var(--clr-primary-400); color:var(--clr-primary-600); }
.qty-input { width:54px; height:36px; border-top:1.5px solid var(--clr-gray-300); border-bottom:1.5px solid var(--clr-gray-300); border-left:none; border-right:none; text-align:center; font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semi); }

/* ── Checkout ────────────────────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr 360px; gap:var(--sp-8); align-items:start; }
.checkout-main { display:flex; flex-direction:column; gap:var(--sp-6); }
.checkout-card { background:#fff; border-radius:var(--radius-xl); border:1px solid var(--clr-gray-200); padding:var(--sp-6); }
.checkout-card-title { font-size:var(--text-base); font-weight:var(--fw-bold); color:var(--clr-gray-800); margin-bottom:var(--sp-5); display:flex; align-items:center; gap:var(--sp-2); }
.checkout-sidebar { position:sticky; top:calc(var(--header-h)+var(--sp-4)); }
.order-summary-item { display:flex; justify-content:space-between; padding:var(--sp-2) 0; font-size:var(--text-sm); border-bottom:1px solid var(--clr-gray-100); }
.payment-options { display:flex; flex-direction:column; gap:var(--sp-3); }
.payment-option { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--clr-gray-200); border-radius:var(--radius-md); cursor:pointer; transition:all var(--dur-fast); }
.payment-option:has(input:checked) { border-color:var(--clr-primary-500); background:var(--clr-primary-50); }
.payment-label { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--text-sm); font-weight:var(--fw-medium); }
.payment-label i { font-size:1.1rem; color:var(--clr-primary-600); }
.saved-addresses { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.address-option { display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; }
.address-card { padding:var(--sp-3); border:1.5px solid var(--clr-gray-200); border-radius:var(--radius-md); font-size:var(--text-sm); flex:1; }

/* ── Product Detail ──────────────────────────────────────── */
.product-detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:start; }
.product-main-image-wrap { border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--clr-gray-200); }
.product-main-image { width:100%; aspect-ratio:1/1; object-fit:cover; }
.product-thumbs { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.product-thumb { width:64px; height:64px; object-fit:cover; border-radius:var(--radius-md); border:2px solid var(--clr-gray-200); cursor:pointer; transition:border-color var(--dur-fast); }
.product-thumb:hover { border-color:var(--clr-primary-500); }
.product-detail-title { font-size:clamp(var(--text-xl),3vw,var(--text-3xl)); margin-bottom:var(--sp-3); }
.product-rating { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.rating-count { font-size:var(--text-sm); color:var(--clr-gray-500); }
.product-detail-price { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.price-main,.price-sale { font-size:var(--text-3xl); font-weight:var(--fw-black); color:var(--clr-primary-600); }
.price-old { font-size:var(--text-xl); color:var(--clr-gray-400); text-decoration:line-through; font-weight:var(--fw-regular); }
.price-badge { background:var(--clr-danger); color:#fff; font-size:var(--text-sm); font-weight:var(--fw-bold); padding:3px 10px; border-radius:var(--radius-full); }
.product-short-desc { color:var(--clr-gray-600); line-height:var(--leading-loose); margin-bottom:var(--sp-5); }
.stock-badge { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--text-sm); font-weight:var(--fw-medium); padding:4px var(--sp-3); border-radius:var(--radius-full); margin-bottom:var(--sp-5); }
.stock-in  { background:#d1fae5; color:#065f46; }
.stock-out { background:#fee2e2; color:#991b1b; }
.stock-warning { font-size:var(--text-sm); color:var(--clr-warning); margin-inline-start:var(--sp-3); }
.product-add-form { margin-bottom:var(--sp-4); }
.product-meta { margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--clr-gray-200); display:flex; flex-direction:column; gap:var(--sp-2); }
.meta-row { display:flex; gap:var(--sp-2); font-size:var(--text-sm); }
.meta-row span { color:var(--clr-gray-500); min-width:80px; }

/* ── Product Tabs ────────────────────────────────────────── */
.product-tabs { border-top:1px solid var(--clr-gray-200); }
.tab-nav { display:flex; gap:0; border-bottom:1px solid var(--clr-gray-200); margin-bottom:var(--sp-8); }
.tab-btn { padding:var(--sp-4) var(--sp-6); font-size:var(--text-sm); font-weight:var(--fw-semi); color:var(--clr-gray-500); border-bottom:2px solid transparent; background:none; cursor:pointer; transition:all var(--dur-fast); }
.tab-btn.active, .tab-btn:hover { color:var(--clr-primary-600); border-bottom-color:var(--clr-primary-600); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.product-description { line-height:var(--leading-loose); color:var(--clr-gray-700); white-space:pre-wrap; }
.review-item { padding:var(--sp-5) 0; border-bottom:1px solid var(--clr-gray-100); }
.review-header { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-2); }
.review-date { font-size:var(--text-xs); color:var(--clr-gray-400); margin-inline-start:auto; }
.review-title { margin-bottom:var(--sp-1); }
.review-body { font-size:var(--text-sm); color:var(--clr-gray-600); }
.review-form-wrap { margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--clr-gray-200); }
.star-rating-input { display:flex; flex-direction:row-reverse; gap:var(--sp-1); }
.star-rating-input input { display:none; }
.star-rating-input label { cursor:pointer; font-size:1.5rem; color:var(--clr-gray-300); transition:color var(--dur-fast); }
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label { color:#f59e0b; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); font-size:var(--text-sm); color:var(--clr-gray-500); margin-bottom:var(--sp-8); }
.breadcrumb a { color:var(--clr-gray-500); text-decoration:none; }
.breadcrumb a:hover { color:var(--clr-primary-600); }
.breadcrumb-sep { color:var(--clr-gray-300); font-size:var(--text-xs); }
[aria-current="page"] { color:var(--clr-gray-900); font-weight:var(--fw-medium); }

/* ── Orders ──────────────────────────────────────────────── */
.status-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--fw-semi); }
.status-pending    { background:#fef3c7; color:#92400e; }
.status-confirmed  { background:#dbeafe; color:#1e40af; }
.status-processing { background:#ede9fe; color:#5b21b6; }
.status-shipped    { background:#d1fae5; color:#065f46; }
.status-delivered  { background:#bbf7d0; color:#14532d; }
.status-cancelled  { background:#fee2e2; color:#991b1b; }
.status-refunded   { background:#f3f4f6; color:#374151; }
.data-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.data-table th { padding:var(--sp-3) var(--sp-4); background:var(--clr-gray-50); color:var(--clr-gray-600); font-weight:var(--fw-semi); text-align:start; border-bottom:1px solid var(--clr-gray-200); white-space:nowrap; }
.data-table td { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--clr-gray-100); color:var(--clr-gray-700); vertical-align:middle; }
.data-table tr:hover td { background:var(--clr-gray-50); }
.actions-cell { display:flex; gap:var(--sp-2); align-items:center; }
.text-muted { color:var(--clr-gray-400); }
.orders-table-wrap { overflow-x:auto; }

/* ── Order Detail ────────────────────────────────────────── */
.order-detail-header { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-8); flex-wrap:wrap; }
.order-detail-header h1 { font-size:var(--text-2xl); margin:0; }
.order-detail-layout { display:grid; grid-template-columns:1fr 340px; gap:var(--sp-8); align-items:start; }
.order-timeline { display:flex; flex-direction:column; gap:var(--sp-4); }
.timeline-item { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.timeline-note { flex-basis:100%; font-size:var(--text-sm); color:var(--clr-gray-600); margin-top:var(--sp-1); }

/* ── Success Page ────────────────────────────────────────── */
.success-card { background:#fff; border-radius:var(--radius-2xl); border:1px solid var(--clr-gray-200); padding:var(--sp-12); text-align:center; box-shadow:var(--shadow-lg); }
.success-icon { font-size:4rem; color:var(--clr-success); margin-bottom:var(--sp-5); }
.success-card h1 { margin-bottom:var(--sp-3); }
.success-card p  { margin-bottom:var(--sp-6); }
.order-number-box { background:var(--clr-gray-50); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-6); font-size:var(--text-lg); display:inline-block; margin-bottom:var(--sp-6); }
.success-actions { display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }

/* ── Account Layout ──────────────────────────────────────── */
.account-layout { display:flex; gap:var(--sp-8); align-items:start; flex-wrap:wrap; }
.settings-section-title { margin-bottom:var(--sp-5); color:var(--clr-gray-700); display:flex; align-items:center; gap:var(--sp-2); }

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 2fr; gap:var(--sp-10); align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:var(--sp-5); }
.contact-info-item { display:flex; align-items:center; gap:var(--sp-3); }
.contact-icon { width:44px; height:44px; border-radius:var(--radius-full); background:var(--clr-primary-50); display:flex; align-items:center; justify-content:center; color:var(--clr-primary-600); flex-shrink:0; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background:var(--clr-gray-900); color:var(--clr-gray-300); }
.footer-newsletter { background:var(--clr-primary-800); padding:var(--sp-10) 0; }
.newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); flex-wrap:wrap; }
.newsletter-text h3 { color:#fff; margin-bottom:var(--sp-2); }
.newsletter-text p  { color:var(--clr-primary-200); margin:0; }
.newsletter-form { flex:1; max-width:480px; }
.newsletter-input-group { display:flex; border-radius:var(--radius-full); overflow:hidden; }
.newsletter-input-group input { flex:1; padding:.65rem var(--sp-5); border:none; outline:none; font-family:var(--font-body); font-size:var(--text-sm); background:rgba(255,255,255,.12); color:#fff; }
.newsletter-input-group input::placeholder { color:rgba(255,255,255,.5); }
.footer-main { padding:var(--sp-16) 0; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-10); }
.footer-col-title { font-size:var(--text-sm); font-weight:var(--fw-bold); color:#fff; margin-bottom:var(--sp-5); text-transform:uppercase; letter-spacing:.05em; }
.footer-logo-text { font-size:var(--text-xl); font-weight:var(--fw-black); color:#fff; }
.footer-about-text { color:var(--clr-gray-400); font-size:var(--text-sm); margin:var(--sp-4) 0 var(--sp-5); line-height:var(--leading-loose); }
.footer-social { display:flex; gap:var(--sp-3); }
.social-link { width:36px; height:36px; border-radius:var(--radius-full); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--clr-gray-400); transition:all var(--dur-fast); font-size:var(--text-sm); }
.social-link:hover { background:var(--clr-primary-600); color:#fff; }
.footer-links { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-links a { font-size:var(--text-sm); color:var(--clr-gray-400); text-decoration:none; transition:color var(--dur-fast); }
.footer-links a:hover { color:#fff; }
.footer-contact-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-contact-list li { display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--text-sm); color:var(--clr-gray-400); }
.footer-contact-list i { color:var(--clr-primary-400); margin-top:3px; flex-shrink:0; }
.footer-contact-list a { color:var(--clr-gray-400); }
.footer-contact-list a:hover { color:#fff; }
.footer-bottom { border-top:1px solid var(--clr-gray-800); padding:var(--sp-6) 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); }
.footer-bottom p { font-size:var(--text-sm); color:var(--clr-gray-500); margin:0; }
.footer-bottom-links { display:flex; gap:var(--sp-4); }
.footer-bottom-links a { font-size:var(--text-sm); color:var(--clr-gray-500); text-decoration:none; }
.footer-bottom-links a:hover { color:#fff; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-10); flex-wrap:wrap; }
.pagination-btn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 var(--sp-3); border-radius:var(--radius-md); border:1.5px solid var(--clr-gray-200); color:var(--clr-gray-600); font-size:var(--text-sm); text-decoration:none; transition:all var(--dur-fast); }
.pagination-btn:hover, .pagination-btn.active { background:var(--clr-primary-600); border-color:var(--clr-primary-600); color:#fff; }
.pagination-dots { color:var(--clr-gray-400); padding:0 var(--sp-2); }

/* ── Back to Top ─────────────────────────────────────────── */
.back-to-top { position:fixed; bottom:var(--sp-8); inset-inline-end:var(--sp-8); width:44px; height:44px; border-radius:var(--radius-full); background:var(--clr-primary-600); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all var(--dur-base); z-index:500; border:none; cursor:pointer; }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { background:var(--clr-primary-700); transform:translateY(-2px); }

/* ── Empty State ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:var(--sp-24) var(--sp-4); display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.empty-state h3 { color:var(--clr-gray-700); }
.empty-state p { color:var(--clr-gray-500); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .shop-layout        { grid-template-columns: 1fr; }
  .shop-sidebar       { position: static; }
  #filterToggle       { display: flex; }
  .shop-sidebar       { display: none; }
  .shop-sidebar.open  { display: block; }
  .cart-layout        { grid-template-columns: 1fr; }
  .checkout-layout    { grid-template-columns: 1fr; }
  .order-detail-layout{ grid-template-columns: 1fr; }
  .product-detail-layout { grid-template-columns: 1fr; }
  .contact-grid       { grid-template-columns: 1fr; }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer-col--about  { grid-column: span 2; }
}
@media (max-width: 768px) {
  .products-grid      { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .categories-grid    { grid-template-columns: repeat(3, 1fr); }
  .cart-item          { grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; }
  .cart-item-subtotal { grid-column: 3; }
  .btn-remove         { grid-column: 3; grid-row: 2; }
  .cart-item-qty      { grid-column: 1 / 3; }
  .account-layout     { flex-direction: column; }
  .header-search-input { width: 120px; }
}
@media (max-width: 480px) {
  .products-grid      { grid-template-columns: 1fr; }
  .categories-grid    { grid-template-columns: repeat(2, 1fr); }
  .footer-grid        { grid-template-columns: 1fr; }
  .footer-col--about  { grid-column: span 1; }
  .hero-actions       { flex-direction: column; }
  .checkout-sidebar   { position: static; }
  .form-row           { grid-template-columns: 1fr; }
}