/* ==========================================================================
   Layout — Header, Footer, Containers, Grid Systems
   ========================================================================== */

/* --- Header --- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(180%) blur(12px);
  transition: box-shadow var(--duration-normal) var(--easing-standard);
}
.header--scrolled { box-shadow: var(--shadow-md); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .header__inner { height: 64px; }
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text);
}
.header__logo-img { height: 36px; width: auto; }
.header__logo-text {
  display: none;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  margin-left: var(--space-3);
}
@media (min-width: 769px) {
  .header__logo-text { display: block; }
}

/* Main Navigation */
.header__nav { display: none; flex: 1; justify-content: center; }
@media (min-width: 1024px) { .header__nav { display: flex; } }

.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--easing-standard);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--accent-current); background: var(--accent-current-10); }
.nav__icon { width: 18px; height: 18px; }

/* Mega Menu */
.nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 1024px;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--duration-normal) var(--easing-emphasized);
  z-index: var(--z-dropdown);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.nav__item:hover .nav__mega,
.nav__link[aria-expanded="true"] + .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__column { display: flex; flex-direction: column; gap: var(--space-3); }
.mega__category {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--accent-current);
  background: var(--accent-current-10);
}
.mega__link {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}
.mega__link:hover { color: var(--accent-current); background: var(--accent-current-10); }

/* Search */
.header__search { display: none; flex: 0 0 280px; }
@media (min-width: 1024px) { .header__search { display: block; } }

.search-form { position: relative; width: 100%; }
.search-form__input {
  width: 100%;
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast);
}
.search-form__input:focus {
  background: var(--color-surface);
  border-color: var(--accent-current);
  box-shadow: 0 0 0 3px var(--accent-current-10);
  outline: none;
}
.search-form__input::placeholder { color: var(--color-text-faint); }
.search-form__submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--duration-fast);
}
.search-form__submit:hover { color: var(--accent-current); background: var(--accent-current-10); }

/* Header Actions */
.header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.header__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}
.header__action:hover { background: var(--color-bg); }
.header__action-icon { width: 22px; height: 22px; }
.header__action-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--accent-current);
  border-radius: var(--radius-full);
}

/* Mobile Menu Toggle */
.header__menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: none; color: var(--color-text); cursor: pointer; border-radius: var(--radius-md); }
@media (min-width: 1024px) { .header__menu-toggle { display: none; } }

/* --- Mobile Drawer Navigation --- */
.mobile-nav { max-width: 320px; }
.mobile-nav__header { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.mobile-nav__title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-4); }
.mobile-nav__search { margin-bottom: var(--space-4); }
.mobile-nav__search .search-form__input { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }

.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-nav__item { border-bottom: 1px solid var(--color-border); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.mobile-nav__link:hover { color: var(--accent-current); }
.mobile-nav__link[aria-expanded="true"] { color: var(--accent-current); }
.mobile-nav__icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--duration-normal); }
.mobile-nav__link[aria-expanded="true"] .mobile-nav__icon { transform: rotate(180deg); }

.mobile-nav__sublist { display: none; padding: var(--space-2) 0 var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); }
.mobile-nav__sublist[aria-hidden="false"] { display: block; animation: slide-down var(--duration-normal) var(--easing-standard); }
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-nav__sublink {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}
.mobile-nav__sublink:hover { color: var(--accent-current); background: var(--accent-current-10); }

.mobile-nav__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.mobile-nav__action { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-body); color: var(--color-text); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--duration-fast); }
.mobile-nav__action:hover { border-color: var(--accent-current); color: var(--accent-current); background: var(--accent-current-10); }

/* --- Mini Cart Dropdown --- */
.mini-cart {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--duration-normal) var(--easing-emphasized);
  z-index: var(--z-dropdown);
  overflow: hidden;
}
.header__action[aria-expanded="true"] .mini-cart,
.header__action:hover .mini-cart { opacity: 1; visibility: visible; transform: translateY(0); }

.mini-cart__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.mini-cart__title { font-family: var(--font-display); font-size: var(--text-h3); }
.mini-cart__count { font-size: var(--text-sm); color: var(--color-text-muted); }

.mini-cart__items { max-height: 400px; overflow-y: auto; padding: var(--space-4); }
.mini-cart__item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.mini-cart__item:last-child { border-bottom: none; }
.mini-cart__item-image { width: 60px; height: 60px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.mini-cart__item-image img { width: 100%; height: 100%; object-fit: contain; }
.mini-cart__item-details { flex: 1; min-width: 0; }
.mini-cart__item-name { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); margin-bottom: var(--space-1); }
.mini-cart__item-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-cart__item-price { font-family: var(--font-mono); font-weight: 600; }
.mini-cart__item-qty { font-family: var(--font-mono); }
.mini-cart__item-remove { color: var(--color-text-faint); background: none; border: none; padding: var(--space-1); font-size: var(--text-xs); cursor: pointer; transition: color var(--duration-fast); }
.mini-cart__item-remove:hover { color: var(--color-error); }

.mini-cart__empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); }

.mini-cart__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); }
.mini-cart__subtotal { display: flex; justify-content: space-between; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.mini-cart__subtotal-label { color: var(--color-text-muted); }
.mini-cart__subtotal-value { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); }
.mini-cart__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.mini-cart__btn { width: 100%; }

@media (max-width: 480px) {
  .mini-cart { width: 100vw; right: -16px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

/* --- Footer --- */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.footer__main { padding: var(--space-16) 0 var(--space-12); }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-10);
}

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__brand { max-width: 300px; }
.footer__logo { display: inline-block; margin-bottom: var(--space-4); }
.footer__logo-img { height: 40px; }
.footer__tagline { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); }
.footer__contact { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); }
.footer__contact a { color: var(--color-text-muted); transition: color var(--duration-fast); }
.footer__contact a:hover { color: var(--accent-current); }

.footer__section-title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-5); color: var(--color-text); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__link { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--duration-fast); }
.footer__link:hover { color: var(--accent-current); }

.footer__newsletter { margin-top: var(--space-6); }
.footer__newsletter-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.footer__newsletter-form { display: flex; gap: var(--space-2); }
.footer__newsletter-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.footer__newsletter-input:focus { border-color: var(--accent-current); outline: none; box-shadow: 0 0 0 3px var(--accent-current-10); }
.footer__newsletter-btn { padding: var(--space-3) var(--space-5); white-space: nowrap; }

.footer__bottom {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__social { display: flex; align-items: center; gap: var(--space-4); }
.footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 50%; transition: all var(--duration-fast); }
.footer__social-link:hover { color: var(--accent-current); border-color: var(--accent-current); background: var(--accent-current-10); }
.footer__social-icon { width: 20px; height: 20px; }

.footer__legal { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.footer__legal-link { font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast); }
.footer__legal-link:hover { color: var(--accent-current); }

/* --- Demo Notice (footer) --- */
.demo-notice { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998; }
.demo-notice--hidden { display: none; }

/* --- Page Header (Archive, Search, 404) --- */
.page-header { padding: var(--space-12) 0 var(--space-8); }
.page-header__inner { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-header__title { font-family: var(--font-display); font-size: var(--text-h1); }
.page-header__subtitle { color: var(--color-text-muted); margin-top: var(--space-2); }
.page-header__meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

.page-header--category { border-bottom: 4px solid var(--accent-current); margin-bottom: var(--space-8); }
.page-header--category .page-header__inner { padding-bottom: var(--space-6); }

/* --- Sidebar Layout (Shop) --- */
.sidebar-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-10); align-items: start; }
@media (max-width: 1024px) { .sidebar-layout { grid-template-columns: 1fr; } }

.sidebar { position: sticky; top: 90px; }
.sidebar__section { margin-bottom: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); }
.sidebar__section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar__title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-4); }

/* Filter form */
.filter-form { display: flex; flex-direction: column; gap: var(--space-4); }
.filter-group { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.filter-options { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-option { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.filter-option input { width: 18px; height: 18px; accent-color: var(--accent-current); }
.filter-option label { font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }
.filter-option:hover label { color: var(--accent-current); }

.filter-price { display: flex; align-items: center; gap: var(--space-2); }
.filter-price input { width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.filter-price span { color: var(--color-text-muted); }

.filter-submit { margin-top: var(--space-4); width: 100%; }
.filter-clear { margin-top: var(--space-2); width: 100%; }

/* Mobile filter trigger */
.filter-trigger { display: none; width: 100%; margin-bottom: var(--space-6); padding: var(--space-3) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 500; color: var(--color-text); cursor: pointer; justify-content: space-between; align-items: center; }
@media (max-width: 1024px) { .filter-trigger { display: flex; } }

/* Filter drawer */
.filter-drawer { max-width: 360px; }
.filter-drawer__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.filter-drawer__title { font-family: var(--font-display); font-size: var(--text-h3); }
.filter-drawer__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* --- Main Content Area --- */
.main { flex: 1; }
.main--narrow { max-width: var(--container-narrow); margin: 0 auto; }

/* --- WooCommerce Specific Layout --- */
.woocommerce .page-header { padding: var(--space-10) 0 var(--space-6); }
.woocommerce .product-grid { margin-top: var(--space-8); }
.woocommerce .pagination { margin-top: var(--space-12); }

/* Single Product Layout */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 1024px) { .product-detail { grid-template-columns: 1fr; } }

.product-gallery { position: sticky; top: 90px; }
.product-gallery__main { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); margin-bottom: var(--space-4); cursor: zoom-in; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumbs { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-2) 0; }
.product-gallery__thumb {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--duration-fast);
}
.product-gallery__thumb:hover,
.product-gallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--accent-current); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-summary { padding-top: var(--space-2); }
.product-summary__category { font-size: var(--text-sm); font-weight: 500; color: var(--accent-current); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.product-summary__title { font-family: var(--font-display); font-size: var(--text-h1); margin-bottom: var(--space-4); }
.product-summary__rating { margin-bottom: var(--space-4); }
.product-summary__price { margin-bottom: var(--space-6); }
.product-summary__short-desc { color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.product-summary__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.product-summary__meta-item { display: flex; align-items: center; gap: var(--space-2); }
.product-summary__meta-label { font-weight: 500; color: var(--color-text); }

/* Variations */
.variations { margin-bottom: var(--space-6); }
.variation { margin-bottom: var(--space-4); }
.variation__label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); margin-bottom: var(--space-2); }
.variation__select { width: 100%; max-width: 300px; }

/* Add to cart form */
.product-form { display: flex; flex-direction: column; gap: var(--space-4); }
.product-form__qty { display: flex; align-items: center; gap: var(--space-4); }
.product-form__submit { width: 100%; }

/* Product Tabs */
.product-tabs { margin-top: var(--space-16); }
.product-tabs__panel { line-height: var(--leading-relaxed); }
.product-tabs__panel h2,
.product-tabs__panel h3,
.product-tabs__panel h4 { font-family: var(--font-display); margin: var(--space-6) 0 var(--space-3); }
.product-tabs__panel p { margin-bottom: var(--space-4); }
.product-tabs__panel ul,
.product-tabs__panel ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.product-tabs__panel li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); }

/* Related Products */
.related-products { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--color-border); }
.related-products__title { font-family: var(--font-display); font-size: var(--text-h2); margin-bottom: var(--space-8); }

/* Cart Page */
.cart-table { width: 100%; }
.cart-table th { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); }
.cart-table .product-thumbnail { width: 80px; }
.cart-table .product-thumbnail img { width: 60px; height: 60px; object-fit: contain; border-radius: var(--radius-md); }
.cart-table .product-name { font-weight: 500; }
.cart-table .product-price .amount { font-family: var(--font-mono); font-weight: 600; }
.cart-table .product-quantity .qty-stepper { max-width: 140px; }
.cart-table .product-subtotal .amount { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-h3); }
.cart-table .product-remove a { color: var(--color-text-faint); font-size: var(--text-lg); transition: color var(--duration-fast); }
.cart-table .product-remove a:hover { color: var(--color-error); }

.cart-collaterals { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-10); align-items: start; margin-top: var(--space-10); }
@media (max-width: 768px) { .cart-collaterals { grid-template-columns: 1fr; } }

.cart-coupon { background: var(--color-bg); padding: var(--space-6); border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.cart-coupon__form { display: flex; gap: var(--space-3); }
.cart-coupon__input { flex: 1; }

.cart-totals { background: var(--color-bg); padding: var(--space-6); border-radius: var(--radius-lg); position: sticky; top: 90px; }
.cart-totals__title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-totals__row { display: flex; justify-content: space-between; padding: var(--space-3) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.cart-totals__row:last-of-type { border-bottom: none; font-weight: 600; font-size: var(--text-body); }
.cart-totals__row--total { font-family: var(--font-display); font-size: var(--text-h3); color: var(--accent-current); }
.cart-totals__label { color: var(--color-text-muted); }
.cart-totals__value { font-family: var(--font-mono); font-weight: 600; }
.cart-totals__btn { width: 100%; margin-top: var(--space-6); }
.cart-totals__notice { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-10); align-items: start; }
@media (max-width: 768px) { .checkout { grid-template-columns: 1fr; } }

.checkout__form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.checkout__steps { display: flex; gap: var(--space-4); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.checkout__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; }
.checkout__step::before { content: ""; position: absolute; top: 12px; left: 50%; right: -50%; height: 2px; background: var(--color-border); z-index: -1; }
.checkout__step:last-child::before { display: none; }
.checkout__step--active .checkout__step-number { background: var(--accent-current); border-color: var(--accent-current); color: #fff; }
.checkout__step--active .checkout__step-label { color: var(--accent-current); font-weight: 600; }
.checkout__step--completed .checkout__step-number { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.checkout__step-number { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 50%; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); z-index: 1; }
.checkout__step-label { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; white-space: nowrap; }

.checkout__section { display: none; }
.checkout__section[aria-hidden="false"] { display: block; animation: fade-in var(--duration-normal) var(--easing-standard); }
.checkout__section-title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-6); }

.checkout__order-review { background: var(--color-bg); padding: var(--space-6); border-radius: var(--radius-lg); position: sticky; top: 90px; }
.checkout__order-title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.checkout__order-items { max-height: 300px; overflow-y: auto; margin-bottom: var(--space-5); }
.checkout__order-item { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.checkout__order-item-name { color: var(--color-text); }
.checkout__order-item-qty { color: var(--color-text-muted); margin-left: var(--space-2); }
.checkout__order-item-price { font-family: var(--font-mono); font-weight: 600; }
.checkout__order-totals { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.checkout__order-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--text-sm); }
.checkout__order-row--total { font-weight: 600; font-size: var(--text-body); font-family: var(--font-display); color: var(--accent-current); }
.checkout__payment-methods { margin-top: var(--space-6); }
.checkout__payment-method { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); cursor: pointer; transition: all var(--duration-fast); }
.checkout__payment-method:hover { border-color: var(--accent-current); }
.checkout__payment-method input { accent-color: var(--accent-current); }
.checkout__payment-method-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 500; }
.checkout__payment-method-icon { width: 24px; height: 24px; }
.checkout__place-order { margin-top: var(--space-6); width: 100%; }

/* Account */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-10); }
@media (max-width: 768px) { .account-layout { grid-template-columns: 1fr; } }

.account-sidebar { position: sticky; top: 90px; }
.account-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.account-nav__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); border-radius: var(--radius-md); transition: all var(--duration-fast); }
.account-nav__link:hover,
.account-nav__link[aria-current="page"] { color: var(--accent-current); background: var(--accent-current-10); }
.account-nav__icon { width: 20px; height: 20px; flex-shrink: 0; }

.account-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.account-content__title { font-family: var(--font-display); font-size: var(--text-h2); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }

/* Orders table */
.orders-table { width: 100%; }
.orders-table th { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); }
.orders-table .order-status { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); text-transform: capitalize; }
.orders-table .status-completed { background: var(--color-success-10); color: var(--color-success); }
.orders-table .status-processing { background: var(--color-info-10); color: var(--color-info); }
.orders-table .status-on-hold { background: var(--color-warning-10); color: var(--color-warning); }
.orders-table .status-cancelled { background: var(--color-error-10); color: var(--color-error); }
.orders-table .status-refunded { background: var(--color-text); color: var(--color-surface); }
.orders-table .order-actions { display: flex; gap: var(--space-2); }
.orders-table .btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }

/* Wallet */
.wallet-balance { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-6); background: var(--accent-current-10); border-radius: var(--radius-lg); margin-bottom: var(--space-8); }
.wallet-balance__label { font-size: var(--text-sm); color: var(--accent-current); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.wallet-balance__amount { font-family: var(--font-mono); font-size: var(--text-display); font-weight: 600; color: var(--accent-current); }
.wallet-balance__actions { display: flex; gap: var(--space-3); }

.wallet-transactions { width: 100%; }
.wallet-transactions th { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); }
.wallet-transactions .amount { font-family: var(--font-mono); font-weight: 600; }
.wallet-transactions .amount--credit { color: var(--color-success); }
.wallet-transactions .amount--debit { color: var(--color-error); }

/* Affiliate */
.affiliate-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
@media (max-width: 640px) { .affiliate-stats { grid-template-columns: 1fr; } }
.affiliate-stat { padding: var(--space-6); background: var(--color-bg); border-radius: var(--radius-lg); text-align: center; }
.affiliate-stat__value { font-family: var(--font-mono); font-size: var(--text-h1); font-weight: 600; color: var(--accent-current); }
.affiliate-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

.affiliate-referral-link { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); padding: var(--space-4); background: var(--color-bg); border-radius: var(--radius-lg); }
.affiliate-referral-link__input { flex: 1; font-family: var(--font-mono); font-size: var(--text-sm); background: transparent; border: none; color: var(--color-text); }
.affiliate-referrals { width: 100%; }
.affiliate-referrals th { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); }
.affiliate-referrals .status { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); }

/* Wishlist */
.wishlist-table { width: 100%; }
.wishlist-table th { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); }
.wishlist-table .product-thumbnail { width: 80px; }
.wishlist-table .product-name { font-weight: 500; }
.wishlist-table .product-price .amount { font-family: var(--font-mono); font-weight: 600; }
.wishlist-table .product-stock { font-size: var(--text-sm); }
.wishlist-table .product-stock.in-stock { color: var(--color-success); }
.wishlist-table .product-stock.out-of-stock { color: var(--color-error); }
.wishlist-table .product-actions { display: flex; gap: var(--space-2); }
.wishlist-table .btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }

/* Empty States */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-8); text-align: center; }
.empty-state__icon { width: 96px; height: 96px; color: var(--color-border); margin-bottom: var(--space-6); }
.empty-state__title { font-family: var(--font-display); font-size: var(--text-h2); margin-bottom: var(--space-3); }
.empty-state__text { color: var(--color-text-muted); max-width: 320px; margin-bottom: var(--space-6); }
.empty-state__action { margin-top: var(--space-2); }

/* Error / Notice Messages */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.woocommerce-message { background: var(--color-info-10); border: 1px solid var(--color-info); color: var(--color-info); }
.woocommerce-error { background: var(--color-error-10); border: 1px solid var(--color-error); color: var(--color-error); }
.woocommerce-info { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); }
.woocommerce-message .btn,
.woocommerce-error .btn,
.woocommerce-info .btn { margin-left: auto; flex-shrink: 0; }