/**
 * MGH Storefront — Commerce & Account Pages
 * Extends app.css design system
 */

.section { padding: 48px 0 100px; }

/* Legacy flash alias (cart AJAX) */
.flash {
  padding: 14px 18px;
  margin: 16px 0;
  border-radius: 12px;
  font-size: 14px;
  border-left: 3px solid;
}
.flash.success { background: #E6F4EA; color: #1E6F3F; border-color: #34A853; }
.flash.error { background: #FCE8E6; color: #8F2727; border-color: #EA4335; }
.flash.warning { background: #FEF7E0; color: #874D00; border-color: #FBBC04; }

/* Buttons legacy */
.btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 22px;
  background: var(--black);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.3s var(--ease);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn.gold { background: var(--gold); color: var(--black); }
.btn.gold:hover { background: var(--gold-light); }
.btn.ghost { background: transparent; border: 1.5px solid var(--beige-dark); color: var(--charcoal); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn.danger { background: #8F2727; color: #fff; }
.btn.small { min-height: 40px; padding: 9px 16px; font-size: 13px; }
.btn.wide { width: 100%; }

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.muted { color: var(--gray); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 3px;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  flex-wrap: wrap;
}
.breadcrumbs a:hover { color: var(--black); }

/* Catalog */
.catalog-hero {
  position: relative;
  background: var(--black);
  color: #fff;
  padding: 100px 0 80px;
  overflow: hidden;
}
.catalog-orbit {
  position: absolute;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(201, 169, 97, 0.15);
  right: -100px;
  top: -200px;
  transform: rotate(45deg);
  pointer-events: none;
}
.catalog-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 16px 0 32px;
  color: #fff;
  line-height: 1.05;
}
.catalog-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.catalog-intro p { max-width: 560px; color: rgba(255,255,255,0.75); margin: 0; }
.catalog-intro span { font-size: 12px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; }
.catalog-intro b { font-family: var(--font-serif); font-size: 2rem; color: var(--gold-light); margin-right: 6px; }

.catalog-shell { padding: 48px 0 100px; background: var(--beige); }
.catalog-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
}
.search-field, .select-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  background: var(--white);
  border: 1.5px solid var(--beige-dark);
  border-radius: 14px;
}
.search-field svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--gray); fill: none; }
.search-field input, .select-field select {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  min-width: 0;
}
.select-field span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); white-space: nowrap; }
.filter-clear { font-size: 13px; color: var(--gray); align-self: center; white-space: nowrap; }
.filter-clear:hover { color: var(--gold); }

.category-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 28px 0 40px;
  scrollbar-width: none;
}
.category-chips::-webkit-scrollbar { display: none; }
.category-chips a {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1.5px solid var(--beige-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  background: var(--white);
  transition: all 0.25s var(--ease);
}
.category-chips a:hover, .category-chips a.active {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

/* Product grid (catalog) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 20px;
}
.product-image-link { display: block; position: relative; }
.product-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--beige-dark);
  border-radius: 12px;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card:hover .product-img img { transform: scale(1.04); }
.product-label {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 11px;
  background: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
}
.product-view {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 9px 13px;
  background: rgba(8,10,9,0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.3s var(--ease);
}
.product-card:hover .product-view { opacity: 1; transform: none; }
.card-body { padding: 16px 4px; }
.product-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--beige-dark);
  font-size: 13px;
}
.price-click-link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: 700;
  font-size: 12px;
}
.price-click-link span { color: var(--gold); }
.stock-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray); }
.stock-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #34A853; }
.stock-indicator.out-stock i { background: #EA4335; }
.product-card-cart {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "label quantity" "status quantity";
  align-items: center;
  gap: 3px 10px;
  margin-top: 13px;
  padding: 10px 11px;
  border: 1px solid rgba(var(--tier-rgb,183,140,53),.24);
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(var(--tier-rgb,183,140,53),.09),rgba(255,255,255,.82));
}
.product-card > .product-card-cart { margin: 10px 8px 0; }
.product-card-cart-label { grid-area: label; color: #24251f; font-size: 10px; font-weight: 700; letter-spacing: .035em; }
.product-card-cart-status { grid-area: status; min-width: 0; overflow: hidden; color: #77766f; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.product-card-cart-status.is-error { color: #a82835; }
.product-card-qty-control { grid-area: quantity; display: grid; grid-template-columns: 29px 38px 29px; overflow: hidden; border: 1px solid rgba(var(--tier-rgb,183,140,53),.38); border-radius: 9px; background: #fff; }
.product-card-qty-control button,.product-card-qty-control input { width: 100%; height: 34px; margin: 0; border: 0; border-radius: 0; background: transparent; color: #151612; text-align: center; }
.product-card-qty-control button { padding: 0; color: var(--gold-dark); font-size: 18px; cursor: pointer; }
.product-card-qty-control button:hover { background: rgba(var(--tier-rgb,183,140,53),.12); }
.product-card-qty-control input { padding: 0 2px; border-inline: 1px solid rgba(var(--tier-rgb,183,140,53),.2); font-weight: 700; -moz-appearance: textfield; }
.product-card-qty-control input::-webkit-inner-spin-button,.product-card-qty-control input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.product-card-cart.is-syncing { opacity: .72; }
.product-card-cart.is-in-cart { border-color: rgba(var(--tier-rgb,183,140,53),.58); box-shadow: 0 7px 20px rgba(var(--tier-rgb,183,140,53),.1); }
.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gray-light);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.image-placeholder i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-light);
  font-family: var(--font-serif);
  font-style: normal;
  transform: rotate(45deg);
  font-size: 13px;
}
.catalog-empty {
  text-align: center;
  padding: 80px 40px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
}
.catalog-empty > span { font-size: 2rem; color: var(--gold); display: block; margin-bottom: 16px; }

/* Product detail */
.product-detail-section { padding: 32px 0 100px; }
.product-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}
.product-gallery { position: sticky; top: 120px; }
.gallery-stage {
  position: relative;
  aspect-ratio: 1/1.05;
  overflow: hidden;
  background: var(--beige-dark);
  border-radius: 16px;
}
.gallery-main-button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.gallery-main-button img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(8,10,9,0.7);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  z-index: 2;
}
.gallery-prev { left: 16px; }
.gallery-next { right: 16px; }
.gallery-meta {
  position: absolute;
  inset: auto 0 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(0deg, rgba(8,10,9,0.75), transparent);
  color: #fff;
  font-size: 11px;
  pointer-events: none;
}
.gallery-meta button { pointer-events: auto; background: none; border: 0; color: #fff; cursor: pointer; font-size: 11px; }
.gallery-thumbnails { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.gallery-thumb {
  flex: 0 0 72px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.25s;
}
.gallery-thumb.active, .gallery-thumb:hover { opacity: 1; border-color: var(--gold); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.detail-category {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.detail-category em { font-style: normal; padding-left: 14px; border-left: 1px solid var(--beige-dark); color: var(--gray); }
.product-detail-info > h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 10px; }
.detail-sku { font-size: 11px; letter-spacing: 0.1em; color: var(--gray); text-transform: uppercase; }

.member-lock {
  margin-top: 32px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
}
.lock-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--beige-dark);
  border-radius: 12px;
  color: var(--gold);
  margin-bottom: 20px;
}
.lock-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.member-lock h2 { font-size: 1.5rem; margin: 12px 0; }
.member-login-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--gray); }

.detail-commerce {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 28px 0;
  padding: 24px 0;
  border-top: 1px solid var(--beige-dark);
  border-bottom: 1px solid var(--beige-dark);
}
.detail-price strong { font-family: var(--font-serif); font-size: 2.25rem; display: block; margin: 8px 0; }
.detail-price span, .detail-price small { display: block; font-size: 11px; color: var(--gray); }
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--beige-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.stock-pill i { width: 6px; height: 6px; border-radius: 50%; background: #34A853; }
.stock-pill.unavailable i { background: #EA4335; }

.add-to-cart-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin: 24px 0;
}
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--beige-dark);
  border-radius: 12px;
  overflow: hidden;
}
.qty-btn {
  width: 40px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}
.qty-btn:hover { background: var(--beige); }
.qty {
  width: 52px;
  height: 44px;
  border: 0;
  border-left: 1.5px solid var(--beige-dark);
  border-right: 1.5px solid var(--beige-dark);
  text-align: center;
  background: transparent;
  appearance: textfield;
}
.qty::-webkit-inner-spin-button { appearance: none; }

.detail-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--beige-dark);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 24px;
}
.detail-specs > div { padding: 16px; border-right: 1px solid var(--beige-dark); border-bottom: 1px solid var(--beige-dark); }
.detail-specs span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); }
.detail-specs b { display: block; margin-top: 6px; font-size: 13px; }
.color-swatch-item { display: inline-flex; align-items: center; gap: 6px; }
.color-swatch-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); display: inline-block; flex-shrink: 0; }
.color-swatch-sep { opacity: .65; }
.detail-description { margin-top: 20px; border-bottom: 1px solid var(--beige-dark); }
.detail-description summary { padding: 16px 0; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.detail-description summary::-webkit-details-marker { display: none; }
.detail-assurance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.detail-assurance p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 0;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 12px;
}
.detail-assurance b, .detail-assurance small { display: block; }
.detail-assurance small { color: var(--gray); font-size: 11px; }

.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8,10,9,0.96);
  display: grid;
  place-items: center;
  padding: 40px;
}
.gallery-lightbox img { max-width: min(1100px, 90vw); max-height: 85vh; object-fit: contain; }
.lightbox-close, .lightbox-arrow {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
}
.lightbox-close { top: 24px; right: 24px; width: 48px; height: 48px; font-size: 28px; }
.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter { position: absolute; bottom: 24px; color: rgba(255,255,255,0.7); font-size: 12px; }

/* Cart */
.commerce-page { background: var(--beige); min-height: 60vh; }
.commerce-head { align-items: flex-end; margin-bottom: 40px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.page-head h1, .page-head h2, .commerce-head h1 { margin: 8px 0; }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.cart-items-card {
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  overflow: hidden;
}
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  background: var(--beige);
  border-bottom: 1px solid var(--beige-dark);
}
.cart-table td { padding: 20px; border-bottom: 1px solid var(--beige-dark); vertical-align: middle; }
.cart-product { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.cart-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 86px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--beige-dark);
  display: grid;
  place-items: center;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb i { font-family: var(--font-serif); font-style: normal; color: var(--gold); font-size: 12px; }
.cart-product small { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.cart-product b { font-family: var(--font-serif); font-size: 17px; display: block; margin: 4px 0; }
.cart-product em { font-style: normal; font-size: 10px; color: var(--gray); }
.stock-note { display: block; margin-top: 6px; font-size: 11px; color: var(--gray); }
.cart-line-total { font-weight: 700; }
.remove-item {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--beige-dark);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: var(--gray);
  transition: all 0.2s;
}
.remove-item:hover { background: #8F2727; border-color: #8F2727; color: #fff; }

.cart-summary {
  position: sticky;
  top: 120px;
  padding: 32px;
  background: var(--black);
  color: #fff;
  border-radius: 16px;
}
.cart-summary h2 { font-size: 2rem; margin: 8px 0 24px; color: #fff; }
.summary-row, .summary-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 14px;
}
.summary-total { align-items: flex-end; border-bottom: 0; margin-bottom: 20px; }
.summary-total strong { font-family: var(--font-serif); font-size: 1.75rem; color: var(--gold-light); }
.summary-assurance {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.summary-assurance > span { color: var(--gold); }
.cart-busy { opacity: 0.55; pointer-events: none; }

.empty-cart { text-align: center; padding: 80px 24px; }
.empty-cart-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border: 2px solid var(--gold);
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  color: var(--gold);
}

/* Checkout / Payment stepper */
.checkout-page { background: var(--beige); padding: 48px 0 100px; }
.checkout-steps {
  display: flex;
  gap: 0;
  margin-bottom: 48px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  overflow: hidden;
}
.checkout-step {
  flex: 1;
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  border-right: 1px solid var(--beige-dark);
  position: relative;
}
.checkout-step:last-child { border-right: 0; }
.checkout-step.active { background: rgba(201,169,97,0.08); color: var(--black); }
.checkout-step.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
}
.checkout-step-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 4px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

.summary-box, .form-card {
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  padding: 28px;
}
.summary-box h3, .form-card h3 { margin: 0 0 20px; font-size: 1.25rem; }
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--beige-dark);
  font-size: 14px;
}
.summary-line:last-of-type { border-bottom: 0; }
.summary-line-total {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--beige-dark);
  font-size: 1.1rem;
  font-weight: 600;
}
.summary-line-total strong { font-family: var(--font-serif); font-size: 1.5rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--charcoal);
}
.field input, .field textarea, .field select, .return-qty {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid var(--beige-dark);
  border-radius: 14px;
  background: var(--white);
  font-size: 15px;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.12);
}

.iban-box {
  padding: 28px;
  background: var(--black);
  color: #fff;
  border-radius: 16px;
  margin-bottom: 24px;
}
.iban-box p { margin: 0 0 12px; font-size: 14px; color: rgba(255,255,255,0.75); }
.iban-box .iban-value {
  font-family: monospace;
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--gold-light);
  word-break: break-all;
  padding: 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  margin: 12px 0;
}
.transfer-warning {
  padding: 20px;
  background: #FCE8E6;
  border: 2px solid #EA4335;
  border-radius: 14px;
  color: #8F2727;
  font-size: 14px;
  line-height: 1.6;
  margin: 20px 0;
}
.transfer-warning strong { display: block; margin-bottom: 8px; font-size: 15px; }

.file-upload {
  position: relative;
  padding: 32px;
  border: 2px dashed var(--beige-dark);
  border-radius: 14px;
  text-align: center;
  transition: border-color 0.2s;
}
.file-upload:hover { border-color: var(--gold); }
.file-upload input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Receipt upload */
.payment-page .muted-inline { opacity: 0.7; }
.payment-page .iban-amount {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--gold-light);
}
.receipt-form { margin-top: 8px; }
.receipt-help {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.receipt-alert { margin-bottom: 24px; }
.receipt-summary-link { margin-top: 20px; display: inline-flex; }

.receipt-upload { display: grid; gap: 16px; }

.receipt-dropzone {
  position: relative;
  padding: 40px 28px;
  border: 2px dashed var(--beige-dark);
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(248,246,240,0.65), rgba(255,255,255,0.9));
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
  cursor: pointer;
}
.receipt-dropzone:hover,
.receipt-dropzone:focus-visible,
.receipt-dropzone.is-dragover {
  border-color: var(--gold);
  background: rgba(201, 169, 97, 0.08);
  outline: none;
}
.receipt-dropzone-icon svg {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin: 0 auto 14px;
}
.receipt-dropzone-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--charcoal);
}
.receipt-dropzone-title span {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.receipt-dropzone-meta {
  margin: 0;
  font-size: 13px;
  color: var(--gray);
}
.receipt-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.receipt-preview {
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
}
.receipt-preview-image-wrap {
  background: #111;
  display: grid;
  place-items: center;
  min-height: 280px;
  max-height: 520px;
}
.receipt-preview-image-wrap img,
.receipt-existing-preview img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  display: block;
}
.receipt-existing-preview {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--beige-dark);
}
.receipt-preview-details {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid var(--beige-dark);
  flex-wrap: wrap;
}
.receipt-preview-file-meta strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  word-break: break-word;
}
.receipt-preview-file-meta small {
  color: var(--gray);
  font-size: 12px;
}
.receipt-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.danger-outline {
  border-color: rgba(155, 59, 59, 0.35);
  color: #9b3b3b;
}

.receipt-pdf-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  background: var(--beige);
  border-bottom: 1px solid var(--beige-dark);
}
.receipt-pdf-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #9b3b3b;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.receipt-pdf-frame {
  width: 100%;
  min-height: 360px;
  border: 0;
  background: #f3f1eb;
}
.receipt-pdf-frame.is-hidden { display: none; }

.receipt-error {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(155, 59, 59, 0.08);
  border: 1px solid rgba(155, 59, 59, 0.25);
  color: #8f2f2f;
  font-size: 14px;
}

.receipt-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.receipt-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.receipt-submit.is-loading { pointer-events: none; }
.receipt-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: receipt-spin 0.8s linear infinite;
}
@keyframes receipt-spin {
  to { transform: rotate(360deg); }
}

.receipt-history-card { margin-bottom: 24px; }
.receipt-history-list {
  display: grid;
  gap: 18px;
}
.receipt-history-item {
  padding: 16px;
  border: 1px solid var(--beige-dark);
  border-radius: 14px;
  background: var(--beige);
}
.receipt-history-item.is-latest {
  border-color: rgba(201, 169, 97, 0.45);
  background: rgba(201, 169, 97, 0.08);
}
.receipt-history-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.receipt-history-meta .status-badge { margin-left: 8px; }
.receipt-reject-reason {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.18);
  color: var(--charcoal);
  font-size: 13px;
  line-height: 1.5;
}
.receipt-preview-actions--inline {
  width: 100%;
  margin-top: 12px;
}
.receipt-status-card .checkout-prefill-notice { margin-bottom: 16px; }

@media (max-width: 768px) {
  .receipt-preview-details,
  .receipt-pdf-card {
    grid-template-columns: 1fr;
  }
  .receipt-pdf-frame { min-height: 240px; }
  .receipt-preview-actions { width: 100%; }
  .receipt-preview-actions .btn-secondary { flex: 1; }
}


/* Order detail */
.order-detail-page { padding: 48px 0 100px; }
.order-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.track-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0;
}
.track-step {
  text-align: center;
  font-size: 11px;
  color: var(--gray);
}
.track-step span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--beige-dark);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-weight: 700;
  font-size: 13px;
}
.track-step.done { color: var(--charcoal); }
.track-step.done span { background: var(--gold); color: var(--black); }
.track-steps-full { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.track-step.active { color: var(--charcoal); font-weight: 600; }
.track-step.active span {
  background: var(--charcoal);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(209, 173, 100, 0.35);
}

.shipping-card-modern {
  background: linear-gradient(135deg, rgba(209, 173, 100, 0.08), rgba(255, 255, 255, 0.98));
  border: 1px solid var(--beige-dark);
  border-left: 4px solid var(--gold);
  border-radius: 18px;
  padding: 28px;
  margin: 24px 0;
}
.shipping-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.shipping-card-head h3 { margin: 4px 0 0; }
.shipping-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  display: grid;
  place-items: center;
  color: var(--gold-dark, #9a7b3c);
}
.shipping-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.shipping-card-grid small {
  display: block;
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.shipping-card-grid strong { font-size: 15px; color: var(--charcoal); }
.shipping-track-btn { margin-top: 4px; }

.summary {
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
}
.summary h3 { margin: 0 0 16px; }
.shipping-card { border-left: 4px solid var(--gold); }
.payment-line { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--beige-dark); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.customer-order-grid { margin-top: 20px; }
.inline-form { display: inline-block; margin: 12px 0; }

.table-wrap {
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  overflow: auto;
}
table { width: 100%; border-collapse: collapse; }
table th {
  padding: 14px 18px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  background: var(--beige);
}
table td { padding: 16px 18px; border-bottom: 1px solid var(--beige-dark); font-size: 14px; }

.return-box {
  padding: 24px;
  border: 1px solid var(--beige-dark);
  border-radius: 14px;
  margin-bottom: 16px;
  background: var(--white);
}
.return-form-wrap summary { cursor: pointer; list-style: none; }
.return-form-wrap summary::-webkit-details-marker { display: none; }
.return-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--beige-dark); }
.return-qty { width: 80px; }

/* Notifications page */
.notification-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.notification-filter a {
  padding: 10px 16px;
  border: 1.5px solid var(--beige-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  background: var(--white);
  transition: all 0.2s;
}
.notification-filter a:hover, .notification-filter a.active {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
.notification-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.customer-notification-list { display: flex; flex-direction: column; gap: 12px; }
.customer-notification-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
}
.customer-notification-item:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.customer-notification-item.unread {
  background: rgba(201,169,97,0.04);
  border-left: 3px solid var(--gold);
}
.customer-notification-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--beige);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 18px;
}
.notification-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.notification-meta b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.notification-meta small { font-size: 12px; color: var(--gray); }
.customer-notification-content strong { display: block; font-size: 15px; margin-bottom: 4px; }
.customer-notification-content > span:last-child { font-size: 14px; color: var(--gray); line-height: 1.5; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 8px; }
.notification-footer-actions { margin-top: 24px; }

/* CMS page */
.cms-page { padding: 60px 0 100px; }
.cms-card {
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  padding: 48px;
  max-width: 860px;
  margin: 0 auto;
}
.cms-card h1 { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--beige-dark); }
.cms-content { line-height: 1.85; color: var(--charcoal); font-size: 16px; }
.cms-content p { margin-bottom: 1em; }
.cms-contact-block {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--beige-dark);
}
.cms-contact-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.cms-contact-grid p {
  margin: 0;
  line-height: 1.6;
}
.cms-contact-grid strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}

/* Error page */
.error-page {
  min-height: 50vh;
  display: grid;
  place-items: center;
  padding: 80px 24px;
  text-align: center;
}
.error-page h1 { font-size: 4rem; margin-bottom: 16px; color: var(--beige-dark); }
.error-page p { color: var(--gray); margin-bottom: 32px; max-width: 480px; }

/* Header search */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
}
.header-search input {
  width: 180px;
  padding: 10px 14px 10px 38px;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: all 0.3s;
}
.header-search input::placeholder { color: rgba(255,255,255,0.45); }
.header-search input:focus {
  width: 220px;
  border-color: var(--gold);
  background: rgba(255,255,255,0.1);
}
.header-search svg {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  stroke: rgba(255,255,255,0.5);
  fill: none;
  pointer-events: none;
}
.notif-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  transition: all 0.2s;
}
.notif-link:hover { border-color: var(--gold); color: var(--gold); }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gold);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.in-cart-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.28);
  font-size: 14px;
}
.in-cart-note strong {
  color: var(--gold-dark);
}
.cart-add-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(201, 169, 97, 0.12);
  color: var(--charcoal);
  font-size: 13px;
}
.add-cart-button.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.checkout-save-profile {
  margin-bottom: 20px;
}

.checkout-new-address-label {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--beige-dark);
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.04);
}

.checkout-new-address-label .field + .field {
  margin-top: 12px;
}

.is-hidden {
  display: none !important;
}

.checkout-main,
.form-card {
  background: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  padding: 28px;
}

.checkout-section {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--beige-dark);
}
.checkout-section:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.checkout-section h3,
.form-card h3 {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
}
.checkout-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.checkout-section-head h3 { margin: 0; }

.checkout-prefill-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.28);
  color: var(--charcoal);
  font-size: 14px;
}
.checkout-prefill-notice svg {
  width: 20px;
  height: 20px;
  color: var(--gold-dark);
  flex-shrink: 0;
}

.select-control,
.auth-form select.select-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--beige-dark);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4B47' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.select-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}
.select-control:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background-color: #f3f1eb;
}

.address-picker {
  display: grid;
  gap: 12px;
}
.address-option {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--beige-dark);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.address-option:hover { border-color: rgba(201, 169, 97, 0.45); }
.address-option input { margin-top: 4px; accent-color: var(--gold); }
.address-option:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.25);
}
.address-option-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.address-option-body strong {
  font-size: 15px;
}
.address-option-body em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-left: 8px;
}
.address-option-body small {
  color: var(--gray);
  line-height: 1.5;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  font-size: 14px;
  color: var(--charcoal);
}
.checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.checkout-payment-note {
  padding: 18px;
  border-radius: 12px;
  background: var(--beige);
  border: 1px solid var(--beige-dark);
}
.checkout-payment-note strong { display: block; margin-bottom: 6px; }
.checkout-payment-note p {
  margin: 0;
  color: var(--gray);
  font-size: 14px;
  line-height: 1.6;
}
.checkout-summary-note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.6;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--beige);
  border-radius: 12px;
  margin-bottom: 24px;
}
.sidebar-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--black);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}
.sidebar-user-meta {
  min-width: 0;
}
.sidebar-user-meta strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.sidebar-user-meta span {
  display: block;
  font-size: 12px;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  border-radius: 11px;
}
.sidebar-nav .sidebar-logout {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--beige-dark);
}

.address-book-list {
  display: grid;
  gap: 16px;
}
.address-book-card {
  padding: 20px;
  border: 1px solid var(--beige-dark);
  border-radius: 14px;
  background: var(--beige);
}
.address-book-card.is-default {
  border-color: rgba(201, 169, 97, 0.45);
  background: rgba(201, 169, 97, 0.08);
}
.address-book-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.address-book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.inline-form {
  display: inline;
  margin: 0;
}
.inline-form button.text-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.danger-link { color: #9b3b3b; }

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .header-search { display: none; }
  .mobile-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mobile-search input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--white);
  }
}

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .track-steps { grid-template-columns: repeat(2, 1fr); }
  .track-steps-full { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .form-row, .detail-specs { grid-template-columns: 1fr; }
  .detail-assurance { grid-template-columns: 1fr; }
  .checkout-steps { flex-direction: column; }
  .checkout-step { border-right: 0; border-bottom: 1px solid var(--beige-dark); }
  .cart-table thead { display: none; }
  .cart-table tr { display: block; padding: 16px; border-bottom: 1px solid var(--beige-dark); position: relative; }
  .cart-table td { display: block; padding: 6px 0; border: 0; }
  .cart-table td:last-child { position: absolute; top: 12px; right: 12px; width: auto; }
  .customer-notification-item { grid-template-columns: auto 1fr; }
  .unread-dot { display: none; }
  .cms-card { padding: 28px 24px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 10px; }
}

/* Opportunity products */
.opportunity-hero { position: relative; overflow: hidden; padding: 108px 0 92px; background: #11120f; color: #fff; }
.opportunity-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(197,151,62,.16), transparent 48%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.08), transparent 30%); }
.opportunity-glow { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(197,151,62,.2); border-radius: 50%; right: -120px; top: -210px; box-shadow: 0 0 0 70px rgba(197,151,62,.035), 0 0 0 140px rgba(197,151,62,.02); }
.opportunity-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 64px; }
.opportunity-hero-copy h1 { margin: 12px 0 20px; color: #fff; font-family: var(--font-serif); font-weight: 400; font-size: clamp(4rem, 8vw, 7.2rem); line-height: .78; letter-spacing: -.04em; }
.opportunity-hero-copy > p:last-child { max-width: 650px; margin: 0; color: rgba(255,255,255,.68); line-height: 1.75; font-size: 1rem; }
.opportunity-summary { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.opportunity-summary div { padding: 24px 18px; border-right: 1px solid rgba(255,255,255,.12); }
.opportunity-summary div:last-child { border-right: 0; }
.opportunity-summary strong,.opportunity-summary span { display: block; }
.opportunity-summary strong { font-family: var(--font-serif); color: #d6b76f; font-size: 2rem; font-weight: 500; }
.opportunity-summary span { margin-top: 5px; color: rgba(255,255,255,.58); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.opportunity-shell { min-height: 52vh; padding: 86px 0 110px; background: #f6f3ed; }
.opportunity-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 42px; }
.opportunity-toolbar h2 { margin: 8px 0 0; font-family: var(--font-serif); font-size: clamp(2rem,4vw,3.3rem); font-weight: 500; }
.opportunity-search { display: flex; align-items: center; gap: 10px; }
.opportunity-search input { width: min(300px,42vw); min-height: 44px; border: 1px solid #d8d0c3; background: rgba(255,255,255,.72); padding: 0 15px; outline: 0; }
.opportunity-search input:focus { border-color: #ae8436; box-shadow: 0 0 0 3px rgba(174,132,54,.12); }
.opportunity-search a { color: #6d655a; font-size: 12px; text-decoration: underline; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.opportunity-card { min-width: 0; background: #fff; border: 1px solid rgba(98,77,41,.13); box-shadow: 0 14px 34px rgba(45,35,20,.06); transition: transform .25s ease, box-shadow .25s ease; }
.opportunity-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(45,35,20,.12); }
.opportunity-image { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: #e9e4da; }
.opportunity-image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.opportunity-card:hover .opportunity-image > img { transform: scale(1.045); }
.opportunity-ribbon { position: absolute; left: 18px; top: 18px; max-width: calc(100% - 90px); padding: 8px 11px; background: #12130f; color: #e8d19d; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.opportunity-discount { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #b5362b; color: #fff; font-size: 14px; }
.opportunity-view { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 13px 16px; background: rgba(17,18,15,.92); color: #fff; text-align: center; font-size: 12px; letter-spacing: .04em; transform: translateY(12px); opacity: 0; transition: .25s ease; }
.opportunity-card:hover .opportunity-view { transform: none; opacity: 1; }
.opportunity-card-body { padding: 24px; }
.opportunity-card-body h3 { margin: 8px 0 6px; font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; }
.opportunity-card-body h3 a { color: #191a16; }
.opportunity-price-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #ebe6dd; }
.opportunity-price-row del,.opportunity-price-row strong { display: block; }
.opportunity-price-row del { margin-bottom: 3px; color: #9b9285; font-size: 12px; }
.opportunity-price-row strong { color: #a02720; font-family: var(--font-serif); font-size: 1.65rem; }
.opportunity-member-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid #ebe6dd; color: #8b651e; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.opportunity-empty { padding: 90px 24px; border: 1px dashed #cfc5b5; background: rgba(255,255,255,.5); text-align: center; }
.opportunity-empty > span { color: #b98e3e; font-size: 3rem; }
.opportunity-empty h2 { margin: 8px 0; font-family: var(--font-serif); font-size: 2.2rem; }
.opportunity-empty p { color: #766e62; margin: 0 0 24px; }
.detail-category .opportunity-chip { background: #a82f27; color: #fff; border-color: #a82f27; }
.detail-price del { display: block; margin-top: 8px; color: #988e80; font-size: 13px; }

@media (max-width: 1024px) {
  .opportunity-hero-inner { grid-template-columns: 1fr; gap: 42px; }
  .opportunity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .opportunity-hero { padding: 76px 0 64px; }
  .opportunity-hero-copy h1 { font-size: clamp(3.7rem,20vw,5.5rem); }
  .opportunity-summary { grid-template-columns: 1fr; }
  .opportunity-summary div { display: flex; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding: 16px 4px; }
  .opportunity-summary div:last-child { border-bottom: 0; }
  .opportunity-summary span { text-align: right; }
  .opportunity-shell { padding: 60px 0 76px; }
  .opportunity-toolbar { align-items: stretch; flex-direction: column; margin-bottom: 28px; }
  .opportunity-search { display: grid; grid-template-columns: 1fr auto; }
  .opportunity-search input { width: 100%; }
  .opportunity-search a { grid-column: 1/-1; }
  .opportunity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 10px; }
  .opportunity-view { opacity: 1; transform: none; }
}

/* Premium authentication experience */
.page-login .auth-page,
.page-register .auth-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 8%, rgba(201,169,97,.17), transparent 28%),
    radial-gradient(circle at 88% 92%, rgba(70,55,31,.09), transparent 30%),
    #f3efe7;
}
.page-login .auth-page::before,
.page-register .auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(60,47,25,.08) 0 1px, transparent 1px 12px);
  mask-image: linear-gradient(to bottom, #000, transparent 42%);
}
.page-login .auth-container,
.page-register .auth-container {
  border: 1px solid rgba(122,94,43,.18);
  box-shadow: 0 32px 80px rgba(34,27,17,.16);
}
.page-login .auth-visual,
.page-register .auth-visual {
  overflow: hidden;
}
.page-login .auth-visual-overlay,
.page-register .auth-visual-overlay {
  background:
    linear-gradient(150deg, rgba(8,9,7,.96) 0%, rgba(12,13,10,.76) 48%, rgba(8,9,7,.91) 100%),
    radial-gradient(circle at 70% 20%, rgba(201,169,97,.3), transparent 42%);
}
.page-login .auth-visual::after,
.page-register .auth-visual::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -190px;
  width: 410px;
  height: 410px;
  z-index: 1;
  border: 1px solid rgba(201,169,97,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(201,169,97,.035), 0 0 0 108px rgba(201,169,97,.025);
  pointer-events: none;
}
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #dec17d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}
.auth-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.page-login .auth-header,
.page-register .auth-header {
  position: relative;
  padding-top: 18px;
}
.page-login .auth-header::before,
.page-register .auth-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, #ae8436, #dec17d);
}
.page-login .form-input,
.page-register .form-input {
  min-height: 56px;
  background: rgba(255,255,255,.92);
}
.page-login .float-whatsapp,
.page-register .float-whatsapp {
  display: none;
}

@media (max-width: 600px) {
  .page-login .header-top-inner,
  .page-register .header-top-inner {
    min-height: 28px;
    padding: 6px 0;
  }
  .page-login .header-label,
  .page-register .header-label {
    padding: 0 8px;
    font-size: 8.5px;
    letter-spacing: .11em;
  }
  .page-login .header-main-inner,
  .page-register .header-main-inner {
    min-height: 66px;
    padding: 10px 0;
  }
  .page-login .brand-mark,
  .page-register .brand-mark {
    width: 40px;
    height: 40px;
  }
  .page-login .brand-mark span,
  .page-register .brand-mark span {
    font-size: 13px;
  }
  .page-login .header-actions,
  .page-register .header-actions {
    gap: 12px;
  }
  .page-login .header-actions .btn-small,
  .page-register .header-actions .btn-small {
    min-height: 42px;
    padding: 11px 17px;
    font-size: 12px;
  }
  .page-login .menu-toggle,
  .page-register .menu-toggle {
    width: 40px;
    height: 40px;
  }
  .page-login .auth-page,
  .page-register .auth-page {
    display: block;
    min-height: auto;
    padding: 0;
    background: #fff;
  }
  .page-login .auth-page::before,
  .page-register .auth-page::before {
    display: none;
  }
  .page-login .auth-container,
  .page-register .auth-container {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .page-login .auth-visual,
  .page-register .auth-visual {
    min-height: 270px;
    padding: 26px 24px 24px;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .page-login .auth-visual-image img,
  .page-register .auth-visual-image img {
    object-position: center 34%;
  }
  .page-login .auth-visual::after,
  .page-register .auth-visual::after {
    right: -118px;
    bottom: -182px;
    width: 320px;
    height: 320px;
  }
  .page-login .auth-visual-content,
  .page-register .auth-visual-content {
    width: 100%;
    max-width: none;
  }
  .page-login .auth-eyebrow,
  .page-register .auth-eyebrow {
    margin-bottom: 9px;
    font-size: 9px;
  }
  .page-login .auth-visual-icon,
  .page-register .auth-visual-icon {
    display: none;
  }
  .page-login .auth-visual-content h2,
  .page-register .auth-visual-content h2 {
    max-width: 310px;
    margin: 0 0 9px;
    font-size: clamp(1.8rem, 8.3vw, 2.1rem);
    line-height: 1.02;
    letter-spacing: -.02em;
  }
  .page-login .auth-visual-content > p,
  .page-register .auth-visual-content > p {
    max-width: 330px;
    margin: 0 0 17px;
    color: rgba(255,255,255,.76);
    font-size: 13px;
    line-height: 1.5;
  }
  .page-login .auth-visual-features,
  .page-register .auth-visual-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
  }
  .page-login .visual-feature,
  .page-register .visual-feature {
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 7px 5px;
    border: 1px solid rgba(222,193,125,.22);
    background: rgba(7,8,6,.46);
    color: rgba(255,255,255,.84);
    font-size: 9.5px;
    line-height: 1.25;
    text-align: center;
    backdrop-filter: blur(8px);
  }
  .page-login .visual-feature svg,
  .page-register .visual-feature svg {
    width: 15px;
    height: 15px;
  }
  .page-register .visual-feature:nth-child(4) {
    display: none;
  }
  .page-login .auth-form-wrapper,
  .page-register .auth-form-wrapper {
    position: relative;
    padding: 34px 24px 42px;
    background: #fff;
  }
  .page-login .auth-form-wrapper::before,
  .page-register .auth-form-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(174,132,54,.55), transparent);
  }
  .page-login .auth-header,
  .page-register .auth-header {
    margin-bottom: 27px;
    padding-top: 15px;
  }
  .page-login .auth-header h1,
  .page-register .auth-header h1 {
    margin-bottom: 8px;
    font-size: 1.9rem;
    line-height: 1.08;
  }
  .page-login .auth-header p,
  .page-register .auth-header p {
    font-size: 13px;
    line-height: 1.55;
  }
  .page-login .auth-form,
  .page-register .auth-form {
    gap: 20px;
  }
  .page-login .form-input,
  .page-register .form-input {
    min-height: 56px;
    padding-left: 49px;
    border-radius: 12px;
    font-size: 14px;
  }
  .page-login .input-icon,
  .page-register .input-icon {
    left: 16px;
  }
  .page-login .password-toggle,
  .page-register .password-toggle {
    right: 10px;
  }
  .page-login .form-actions,
  .page-register .form-actions {
    align-items: flex-end;
  }
  .page-login .auth-footer,
  .page-register .auth-footer {
    margin-top: 30px;
    padding-top: 25px;
  }
  .page-login .auth-info,
  .page-register .auth-info {
    margin-top: 20px;
  }
}

@media (max-width: 380px) {
  .page-login .auth-visual,
  .page-register .auth-visual {
    min-height: 260px;
    padding-inline: 20px;
  }
  .page-login .auth-form-wrapper,
  .page-register .auth-form-wrapper {
    padding-inline: 20px;
  }
  .page-login .auth-header h1,
  .page-register .auth-header h1 {
    font-size: 1.75rem;
  }
  .page-login .visual-feature,
  .page-register .visual-feature {
    font-size: 9px;
  }
}
/* Halısan membership and upcoming-product experience */
.membership-hub{margin:0 0 28px;padding:28px;border:1px solid #dedbd2;border-radius:22px;background:linear-gradient(145deg,#fff 0%,#f6f3eb 100%);box-shadow:0 18px 45px rgba(20,18,14,.06)}
.membership-hub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}.membership-hub-head h2{font-family:"Cormorant Garamond",serif;font-size:38px;margin:5px 0}.membership-hub-head p{margin:0;color:#6b6861}
.membership-balances{display:flex;gap:10px}.membership-balances>div{min-width:116px;padding:16px 18px;border-radius:16px;background:#11120f;color:#fff}.membership-balances strong{display:block;font-family:"Cormorant Garamond",serif;font-size:31px;color:#d5b568}.membership-balances span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#c8c7c2}
.membership-progress{padding:16px 18px;margin-bottom:22px;border-radius:15px;background:#fff;border:1px solid #e5e1d8}.membership-progress>div:first-child{display:flex;justify-content:space-between;gap:18px;font-size:13px}.membership-progress>div:first-child span{color:#6b6861}.membership-progress-track{height:7px!important;margin:13px 0 7px!important;border-radius:99px;background:#e9e5dc;overflow:hidden}.membership-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b78c35,#e0c675)}.membership-progress small{color:#6b6861}.membership-progress-complete{display:flex;justify-content:space-between;background:#11120f;color:#fff}.membership-progress-complete span{color:#d5b568}
.membership-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.membership-card-grid>.membership-card{display:block;grid-template-columns:none;gap:0;align-items:initial;position:relative;overflow:hidden;min-height:310px;padding:22px;border-radius:20px;color:#fff;box-shadow:0 15px 32px rgba(17,18,15,.14);transition:transform .25s,box-shadow .25s}.membership-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px rgba(17,18,15,.2)}.membership-card:after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-90px;top:-90px}.membership-card-member{background:linear-gradient(145deg,#706d66,#302f2b)}.membership-card-plus{background:linear-gradient(145deg,#c6a760,#69501d)}.membership-card-elite{background:linear-gradient(145deg,#233e50,#0b1821)}.membership-card-black{background:linear-gradient(145deg,#242323,#050505)}.membership-card.is-current{outline:3px solid #d5b568;outline-offset:2px}.membership-card.is-locked{filter:saturate(.65);opacity:.82}.membership-card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.membership-card-top span{font-size:10px;letter-spacing:.17em;font-weight:700}.membership-card-top i{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.35);transform:rotate(45deg);font-family:serif;font-style:normal}.membership-card-top i::first-letter{transform:rotate(-45deg)}.membership-card h3{position:relative;z-index:1;margin:25px 0 2px;color:#fff;font:600 31px/1 "Cormorant Garamond",serif}.membership-card-number{position:relative;z-index:1;margin:0 0 20px;font-size:10px;letter-spacing:.19em;opacity:.7}.membership-card ul{position:relative;z-index:1;list-style:none;padding:0;margin:0;display:grid;gap:8px}.membership-card li{display:flex;gap:8px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.88)}.membership-card li span{color:#ead389}.membership-rule-note{margin:18px 2px 0;color:#68655e;font-size:12px}.sidebar-tier{display:inline-flex!important;width:max-content;margin-top:5px;padding:4px 8px;border-radius:99px;background:#f1e8d3;color:#80611d!important;font-size:10px!important;font-weight:700}
.upcoming-page{background:#f4f1e9;min-height:70vh;padding-bottom:70px}.upcoming-hero{padding:76px 0;background:radial-gradient(circle at 75% 20%,#354d55 0,transparent 32%),linear-gradient(135deg,#121b1e,#071011);color:#fff}.upcoming-hero h1{margin:8px 0 14px;font:500 clamp(52px,8vw,88px)/.82 "Cormorant Garamond",serif}.upcoming-hero p:last-child{max-width:620px;color:#bec8c7;line-height:1.7}.upcoming-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:-30px}.upcoming-card{overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 18px 45px rgba(12,20,21,.12)}.upcoming-card-image{display:block;position:relative;height:320px;background:#172326;color:#d6b762}.upcoming-card-image img{width:100%;height:100%;object-fit:cover}.upcoming-card-image>span{display:grid;place-items:center;height:100%;font:34px "Cormorant Garamond",serif}.upcoming-card-image em{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:99px;background:rgba(7,16,17,.88);color:#fff;font-size:11px;font-style:normal;letter-spacing:.08em}.upcoming-card-body{padding:21px}.upcoming-card-body>small{color:#9a7932;text-transform:uppercase;letter-spacing:.12em}.upcoming-card-body h2{margin:7px 0;font:600 28px "Cormorant Garamond",serif}.upcoming-card-body h2 a{color:#161916}.upcoming-card-body p{min-height:40px;color:#6a6c67;font-size:13px}.upcoming-card-body>span{font-size:11px;color:#526363;text-transform:uppercase;letter-spacing:.1em}.upcoming-empty{grid-column:1/-1;padding:60px;text-align:center;border-radius:20px;background:#fff}.upcoming-empty>span{font-size:38px;color:#b18a3e}.upcoming-detail-notice{margin:16px 0;padding:18px 20px;border-radius:15px;background:linear-gradient(135deg,#112326,#1f3a40);color:#fff}.upcoming-detail-notice small{color:#d5b568;letter-spacing:.13em}.upcoming-detail-notice h2{margin:6px 0;font-family:"Cormorant Garamond",serif}.upcoming-detail-notice p{margin:0;color:#c4cecc}.loyalty-saving strong{color:#27865a!important}
.cart-summary .btn.is-disabled{pointer-events:none;opacity:.5;filter:grayscale(.45)}
@media(max-width:900px){.upcoming-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.membership-hub-head{flex-direction:column}.membership-balances{width:100%}.membership-balances>div{flex:1}}
@media(max-width:620px){.membership-hub{padding:18px;border-radius:16px}.membership-card-grid,.upcoming-grid{grid-template-columns:1fr}.membership-balances>div{min-width:0;padding:13px}.membership-card{min-height:0}.membership-progress>div:first-child{flex-direction:column;gap:4px}.upcoming-hero{padding:55px 0}.upcoming-card-image{height:280px}}

/* Rank palette, opportunity balance and compact mobile commerce grids */
.membership-card-member{background:linear-gradient(145deg,#c29a49,#624817)}
.membership-card-plus{background:linear-gradient(145deg,#3b9caf,#123f4a)}
.membership-card-elite{background:linear-gradient(145deg,#8b68c3,#39245f)}
.membership-card-black{background:linear-gradient(145deg,#c43850,#24060d)}
.membership-card.is-current{outline-color:var(--gold)}
.membership-card li span{color:#fff0b9}
.sidebar-tier{background:rgba(var(--tier-rgb,183,140,53),.14);color:var(--gold-dark)!important}
.opportunity-m2-badge{position:fixed;z-index:85;top:118px;left:max(24px,calc((100vw - 1280px)/2));display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(255,255,255,.25);border-left:3px solid var(--gold);background:rgba(5,6,5,.88);color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.22);backdrop-filter:blur(12px)}
.opportunity-m2-badge span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.opportunity-m2-badge strong{color:var(--gold-light);font:600 1.2rem var(--font-serif)}

@media(max-width:700px){
  .product-card-cart{grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;margin-top:8px;padding:7px}
  .product-card>.product-card-cart{margin:7px 1px 0}
  .product-card-cart-label{font-size:8px}
  .product-card-cart-status{font-size:7px}
  .product-card-qty-control{grid-template-columns:25px 31px 25px}
  .product-card-qty-control button,.product-card-qty-control input{height:30px}
  .opportunity-m2-badge{top:104px;left:10px;padding:8px 11px}
  .opportunity-hero{padding-top:88px}
  .opportunity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .opportunity-card-body{padding:13px 11px}
  .opportunity-card-body h3{min-height:2.5em;margin:5px 0;font-size:1.08rem;line-height:1.18}
  .opportunity-card-body .product-category,.opportunity-card-body .sku{font-size:8px}
  .opportunity-ribbon{left:8px;top:8px;max-width:calc(100% - 50px);padding:5px 7px;font-size:7px}
  .opportunity-discount{right:8px;top:8px;width:36px;height:36px;font-size:10px}
  .opportunity-view{display:none}
  .opportunity-price-row{align-items:flex-start;flex-direction:column;gap:7px;margin-top:12px;padding-top:11px}
  .opportunity-price-row strong{font-size:1.2rem}
  .opportunity-price-row del{font-size:9px}
  .opportunity-price-row .stock-indicator{font-size:8px}
}

@media(max-width:480px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .catalog-shell .card-body{padding:12px 1px}
  .catalog-shell .card-body h3{min-height:2.55em;margin:5px 0;font-size:14px;line-height:1.28}
  .catalog-shell .product-category,.catalog-shell .sku{font-size:8px}
  .catalog-shell .product-card-foot{align-items:flex-start;flex-direction:column;gap:7px;margin-top:10px;padding-top:10px;font-size:11px}
  .catalog-shell .product-label{top:8px;left:8px;padding:5px 7px;font-size:7px}
  .catalog-shell .product-view{display:none}
}

/* Profile dashboard: member identity, Mill progress and tier accordions */
.account-profile-page{background:radial-gradient(circle at 84% -8%,rgba(var(--tier-rgb,183,140,53),.18),transparent 34%),linear-gradient(180deg,#f5f2eb 0,#fbfaf7 32%,#f3f0e8 100%)}
.profile-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}
.profile-page-heading h1{margin:8px 0 8px;font:600 clamp(2.7rem,5vw,4.6rem)/.9 "Cormorant Garamond",serif;color:#151612}
.profile-page-heading p{max-width:690px;margin:0;color:#6b6861;line-height:1.65}
.profile-approved-badge{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 14px;border:1px solid rgba(var(--tier-rgb,183,140,53),.28);border-radius:999px;background:rgba(var(--tier-rgb,183,140,53),.09);color:var(--gold-dark);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.profile-approved-badge i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--gold);color:#fff;font-style:normal}
.profile-dashboard{display:grid;grid-template-columns:minmax(275px,340px) minmax(0,1fr);gap:24px;align-items:start}
.profile-identity-card,.profile-membership-panel{min-width:0}
.profile-identity-card{position:sticky;top:120px;overflow:hidden;padding:25px;border:1px solid rgba(var(--tier-rgb,183,140,53),.22);border-radius:22px;background:#fff;box-shadow:0 20px 48px rgba(26,23,17,.07)}
.profile-identity-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light))}
.profile-person{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:15px;padding:6px 0 23px;border-bottom:1px solid #ebe7de}
.profile-person-icon{display:grid;place-items:center;width:68px;height:68px;border:1px solid rgba(var(--tier-rgb,183,140,53),.35);border-radius:50%;background:linear-gradient(145deg,rgba(var(--tier-rgb,183,140,53),.18),rgba(var(--tier-rgb,183,140,53),.04));color:var(--gold-dark)}
.profile-person-icon svg{width:33px;height:33px}
.profile-person-kicker,.profile-panel-kicker{display:block;color:var(--gold-dark);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.profile-person h2{overflow:hidden;margin:4px 0 5px;color:#171815;font:600 1.45rem/1.05 "Cormorant Garamond",serif;text-overflow:ellipsis}
.profile-current-tier{display:inline-flex;max-width:100%;padding:5px 8px;border-radius:99px;background:rgba(var(--tier-rgb,183,140,53),.12);color:var(--gold-dark);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.profile-contact-list{display:grid;gap:0;margin:20px 0}
.profile-contact-list>div{padding:12px 2px;border-bottom:1px solid #f0ede6}
.profile-contact-list>div:last-child{border-bottom:0}
.profile-contact-list dt{display:flex;align-items:center;gap:8px;margin-bottom:5px;color:#918c82;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.profile-contact-list dt svg{width:15px;height:15px;color:var(--gold)}
.profile-contact-list dd{overflow:hidden;margin:0;padding-left:23px;color:#22231f;font-size:12px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.profile-contact-list dd a{color:inherit}
.profile-contact-list dd span{color:#908d86}
.profile-contact-list dd strong{font-size:13px;letter-spacing:.08em}
.profile-quick-nav{display:grid;gap:7px}
.profile-quick-nav>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;padding:11px 13px;border:1px solid #e9e5dc;border-radius:12px;background:#faf9f6;color:#33342f;font-size:11px;font-weight:650;transition:border-color .2s,transform .2s,background .2s}
.profile-quick-nav>a:hover,.profile-quick-nav>a:focus-visible{border-color:var(--gold);background:rgba(var(--tier-rgb,183,140,53),.07);transform:translateX(2px)}
.profile-quick-nav>a>i{color:var(--gold-dark);font-size:16px;font-style:normal}
.profile-quick-nav>a>b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:var(--gold);color:#fff;font-size:10px}
.profile-quick-nav .profile-orders-link{min-height:58px;border-color:transparent;background:linear-gradient(135deg,#171915,#090a08);color:#fff;box-shadow:0 10px 24px rgba(16,17,14,.17)}
.profile-orders-link>span{display:flex;align-items:center;gap:10px}
.profile-orders-link svg{width:20px;height:20px;color:var(--gold-light)}
.profile-quick-nav .profile-orders-link:hover,.profile-quick-nav .profile-orders-link:focus-visible{border-color:var(--gold);background:linear-gradient(135deg,#20231d,#0c0e0b)}
.profile-logout{display:block;margin-top:19px;padding-top:17px;border-top:1px solid #ebe7de;color:#8a4b54;font-size:10px;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.1em}
.profile-membership-panel{display:grid;gap:18px}
.profile-mill-card{overflow:hidden;padding:26px;border-radius:22px;background:radial-gradient(circle at 88% 2%,rgba(var(--tier-rgb,183,140,53),.4),transparent 35%),linear-gradient(135deg,#1b1e19,#080907 72%);color:#fff;box-shadow:0 20px 48px rgba(13,14,11,.2)}
.profile-mill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.profile-mill-head .profile-panel-kicker{color:var(--gold-light)}
.profile-mill-head h2{margin:5px 0 0;color:#fff;font:600 clamp(2rem,4vw,3rem)/1 "Cormorant Garamond",serif}
.profile-mill-score{display:flex;align-items:baseline;gap:7px;color:var(--gold-light)}
.profile-mill-score strong{font:600 clamp(2.4rem,5vw,4rem)/.8 "Cormorant Garamond",serif}
.profile-mill-score span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.profile-progress-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-top:29px}
.profile-progress-copy>div{display:grid;gap:4px}
.profile-progress-copy b{font-size:12px;letter-spacing:.02em}
.profile-progress-copy span{color:rgba(255,255,255,.58);font-size:10px}
.profile-progress-copy>strong{color:var(--gold-light);font:600 1.65rem "Cormorant Garamond",serif}
.profile-progress-track{height:11px;overflow:hidden;margin-top:10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.1)}
.profile-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));box-shadow:0 0 20px rgba(var(--tier-rgb,183,140,53),.65)}
.profile-balance-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:21px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.profile-balance-row>div{display:grid;gap:5px;min-width:0}
.profile-balance-row>div+div{padding-left:18px;border-left:1px solid rgba(255,255,255,.1)}
.profile-balance-row span{color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.profile-balance-row strong{overflow:hidden;color:#fff;font-size:12px;text-overflow:ellipsis}
.profile-tier-list{padding:25px;border:1px solid rgba(var(--tier-rgb,183,140,53),.2);border-radius:22px;background:linear-gradient(145deg,#fff,#fbfaf7);box-shadow:0 20px 48px rgba(28,24,17,.08)}
.profile-tier-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.profile-tier-list-head h2{margin:4px 0 0;font:600 clamp(1.7rem,3vw,2.25rem)/1 "Cormorant Garamond",serif}
.profile-tier-list-head p{margin:0;color:#89857d;font-size:10px}
.profile-tier-accordion{--profile-tier:#bd8740;--profile-tier-deep:#43290e;--profile-tier-soft:#f6ecdc;position:relative;overflow:hidden;margin-top:12px;border:1px solid color-mix(in srgb,var(--profile-tier) 44%,#e9e5dc);border-radius:17px;background:#fff;box-shadow:0 9px 24px rgba(27,25,20,.08);transition:border-color .2s,box-shadow .2s,transform .2s}
.profile-tier-accordion.profile-tier-plus{--profile-tier:#1887a5;--profile-tier-deep:#073340;--profile-tier-soft:#e1f2f5}
.profile-tier-accordion.profile-tier-elite{--profile-tier:#7a57b5;--profile-tier-deep:#2e184e;--profile-tier-soft:#eee7f8}
.profile-tier-accordion.profile-tier-black{--profile-tier:#ba2442;--profile-tier-deep:#08080a;--profile-tier-soft:#f7e5e9}
.profile-tier-accordion::before{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--profile-tier),var(--profile-tier-deep))}
.profile-tier-accordion:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(27,25,20,.08)}
.profile-tier-accordion.is-current{border-color:var(--profile-tier);box-shadow:0 0 0 2px color-mix(in srgb,var(--profile-tier) 18%,transparent),0 16px 34px color-mix(in srgb,var(--profile-tier) 16%,transparent)}
.profile-tier-accordion summary{display:grid;grid-template-columns:46px minmax(0,1fr) auto 26px;align-items:center;gap:13px;min-height:78px;padding:13px 17px;cursor:pointer;list-style:none;background:radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--profile-tier) 88%,white),transparent 38%),linear-gradient(120deg,var(--profile-tier-deep),var(--profile-tier) 82%)}
.profile-tier-accordion.is-current summary{background:radial-gradient(circle at 88% 15%,color-mix(in srgb,var(--profile-tier) 82%,white),transparent 40%),linear-gradient(120deg,var(--profile-tier-deep),var(--profile-tier) 76%)}
.profile-tier-accordion.is-locked summary{background:radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--profile-tier) 82%,white),transparent 40%),linear-gradient(120deg,var(--profile-tier-deep),var(--profile-tier) 82%)}
.profile-tier-accordion summary::-webkit-details-marker{display:none}
.profile-tier-accordion summary:focus-visible{outline:2px solid var(--profile-tier);outline-offset:-3px}
.profile-tier-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(255,255,255,.3);border-radius:13px;background:rgba(255,255,255,.13);color:#fff;font:600 1.35rem "Cormorant Garamond",serif;box-shadow:inset 0 1px rgba(255,255,255,.18)}
.profile-tier-accordion.is-current .profile-tier-mark{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.2)}
.profile-tier-name{display:grid;gap:3px;min-width:0}
.profile-tier-name small{color:rgba(255,255,255,.7);font-size:8px;font-weight:800;letter-spacing:.13em}
.profile-tier-name strong{color:#fff;font:600 1.45rem "Cormorant Garamond",serif}
.profile-tier-accordion.is-current .profile-tier-name small{color:#fff0c8}
.profile-tier-accordion.is-current .profile-tier-name strong{color:#fff}
.profile-tier-state{display:inline-flex;align-items:center;gap:6px;min-height:29px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--profile-tier) 24%,white);border-radius:999px;background:rgba(255,255,255,.72);color:var(--profile-tier-deep);font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.profile-tier-state svg{width:14px;height:14px}
.profile-tier-state.is-current{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.15);color:#fff}
.profile-tier-state.is-locked{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.14);color:#fff}
.profile-tier-state.is-earned{background:#edf6ef;color:#277244;border-color:#cfe6d4}
.profile-tier-toggle{position:relative;width:23px;height:23px;border:1px solid #ddd8cd;border-radius:50%}
.profile-tier-toggle::before,.profile-tier-toggle::after{content:"";position:absolute;left:6px;right:6px;top:10px;height:1px;background:#55574f;transition:transform .2s}
.profile-tier-accordion.is-current .profile-tier-toggle{border-color:rgba(255,255,255,.35)}
.profile-tier-accordion.is-current .profile-tier-toggle::before,.profile-tier-accordion.is-current .profile-tier-toggle::after{background:#fff}
.profile-tier-accordion .profile-tier-toggle{border-color:rgba(255,255,255,.35)}
.profile-tier-accordion .profile-tier-toggle::before,.profile-tier-accordion .profile-tier-toggle::after{background:#fff}
.profile-tier-toggle::after{transform:rotate(90deg)}
.profile-tier-accordion[open] .profile-tier-toggle::after{transform:rotate(0)}
.profile-tier-content{padding:0 19px 19px 75px;border-top:1px solid color-mix(in srgb,var(--profile-tier) 14%,#eeeae2);background:#fff}
.profile-tier-lock-note{display:flex;align-items:center;gap:10px;margin:16px 0 3px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--profile-tier) 19%,white);border-radius:11px;background:var(--profile-tier-soft);color:var(--profile-tier-deep);font-size:9px;line-height:1.5}
.profile-tier-lock-note svg{flex:0 0 auto;width:17px;height:17px;color:var(--profile-tier)}
.profile-tier-content ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin:16px 0 0;padding:0;list-style:none}
.profile-tier-content li{display:flex;align-items:flex-start;gap:8px;color:#626058;font-size:10px;line-height:1.5}
.profile-tier-content li span{display:grid;place-items:center;flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;background:color-mix(in srgb,var(--profile-tier) 13%,white);color:var(--profile-tier);font-size:8px;font-weight:800}
.profile-membership-rule{margin:0;padding:0 4px;color:#77736b;font-size:10px;line-height:1.55}

/* Rank promotion dialog and confetti */
body.tier-celebration-open{overflow:hidden}
.tier-celebration{--celebration:#98682f;--celebration-deep:#4c3215;position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:22px;opacity:0;transition:opacity .25s ease}
.tier-celebration[data-tier="plus"]{--celebration:#176d86;--celebration-deep:#0a3747}
.tier-celebration[data-tier="elite"]{--celebration:#65459b;--celebration-deep:#30204f}
.tier-celebration[data-tier="black"]{--celebration:#b32643;--celebration-deep:#16070b}
.tier-celebration[hidden]{display:none}
.tier-celebration.is-visible{opacity:1}
.tier-celebration-backdrop{position:absolute;inset:0;background:rgba(5,6,5,.78);backdrop-filter:blur(10px)}
.tier-celebration-card{position:relative;z-index:2;width:min(500px,100%);overflow:hidden;padding:44px 38px 38px;border:1px solid color-mix(in srgb,var(--celebration) 58%,white);border-radius:26px;background:radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--celebration) 62%,transparent),transparent 34%),linear-gradient(145deg,var(--celebration-deep),#080908 75%);color:#fff;text-align:center;box-shadow:0 36px 100px rgba(0,0,0,.5);transform:translateY(18px) scale(.96);transition:transform .3s cubic-bezier(.2,.85,.25,1)}
.tier-celebration.is-visible .tier-celebration-card{transform:translateY(0) scale(1)}
.tier-celebration-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.09);border-radius:19px;pointer-events:none}
.tier-celebration-close{position:absolute;z-index:2;top:17px;right:18px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:300 22px/1 Arial,sans-serif;cursor:pointer}
.tier-celebration-close:hover,.tier-celebration-close:focus-visible{border-color:#fff;background:rgba(255,255,255,.16)}
.tier-celebration-eyebrow{display:block;color:color-mix(in srgb,var(--celebration) 35%,white);font-size:9px;font-weight:800;letter-spacing:.22em}
.tier-celebration-emblem{display:grid;place-items:center;width:78px;height:78px;margin:24px auto 20px;border:1px solid rgba(255,255,255,.35);transform:rotate(45deg);background:linear-gradient(145deg,color-mix(in srgb,var(--celebration) 82%,white),var(--celebration-deep));color:transparent;font:600 2rem "Cormorant Garamond",serif;box-shadow:0 0 40px color-mix(in srgb,var(--celebration) 48%,transparent)}
.tier-celebration-emblem::before{content:"H";color:#fff;transform:rotate(-45deg)}
.tier-celebration-card h2{margin:0;color:#fff;font:600 clamp(2.8rem,8vw,4.4rem)/.9 "Cormorant Garamond",serif}
.tier-celebration-card p{margin:16px 0 5px;font-size:17px}.tier-celebration-card p strong{color:color-mix(in srgb,var(--celebration) 34%,white)}
.tier-celebration-card small{display:block;color:rgba(255,255,255,.62);font-size:11px}
.tier-celebration-action{display:inline-flex;justify-content:center;margin-top:28px;padding:13px 19px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#fff;color:var(--celebration-deep);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tier-celebration-confetti{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}
.tier-celebration-confetti i{position:absolute;top:-12vh;left:var(--confetti-x);width:8px;height:15px;border-radius:2px;background:var(--confetti-color);animation:tier-confetti-fall var(--confetti-duration) var(--confetti-delay) cubic-bezier(.12,.65,.28,1) forwards}
@keyframes tier-confetti-fall{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--confetti-drift),118vh,0) rotate(var(--confetti-spin));opacity:.85}}

@media(max-width:940px){
  .profile-dashboard{grid-template-columns:1fr}
  .profile-identity-card{position:static}
  .profile-contact-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .profile-contact-list>div{padding:12px;border:1px solid #eeeae2;border-radius:12px}
  .profile-contact-list dd{padding-left:0}
  .profile-quick-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-logout{width:max-content;margin-inline:auto}
}

@media(max-width:640px){
  .account-profile-page{padding-top:34px}
  .profile-page-heading{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:22px}
  .profile-page-heading h1{font-size:3.15rem}
  .profile-page-heading p{font-size:12px}
  .profile-approved-badge{padding:8px 11px}
  .profile-identity-card,.profile-mill-card,.profile-tier-list{padding:18px;border-radius:17px}
  .profile-person{grid-template-columns:58px minmax(0,1fr)}
  .profile-person-icon{width:58px;height:58px}
  .profile-contact-list{grid-template-columns:1fr;margin:15px 0}
  .profile-contact-list>div{padding:10px 12px}
  .profile-quick-nav{grid-template-columns:1fr}
  .profile-mill-head h2{font-size:1.7rem}
  .profile-mill-score strong{font-size:2.55rem}
  .profile-progress-copy{margin-top:23px}
  .profile-balance-row{grid-template-columns:1fr}
  .profile-balance-row>div+div{padding:10px 0 0;border-top:1px solid rgba(255,255,255,.1);border-left:0}
  .profile-tier-list-head{align-items:flex-start;flex-direction:column;gap:6px}
  .profile-tier-accordion summary{grid-template-columns:38px minmax(0,1fr) auto 23px;gap:9px;padding:11px 12px}
  .profile-tier-mark{width:36px;height:36px}
  .profile-tier-content{padding:0 13px 15px}
  .profile-tier-content ul{grid-template-columns:1fr}
  .profile-tier-state{width:29px;padding:6px;justify-content:center}
  .profile-tier-state span{display:none}
  .tier-celebration-card{padding:40px 23px 31px;border-radius:21px}
  .tier-celebration-emblem{width:65px;height:65px;margin-top:20px}
}

@media(max-width:380px){
  .profile-page-heading h1{font-size:2.8rem}
  .profile-identity-card,.profile-mill-card,.profile-tier-list{padding:15px}
  .profile-mill-score strong{font-size:2.2rem}
  .profile-progress-copy{align-items:flex-start;flex-direction:column;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .profile-tier-accordion,.tier-celebration,.tier-celebration-card{transition:none}
  .tier-celebration-confetti{display:none}
}