:root {
  --bg: #fffaf6;
  --surface: #ffffff;
  --surface-soft: #fff4ec;
  --text: #302b2b;
  --muted: #7d7370;
  --border: #eee2da;
  --primary: #493b37;
  --accent: #f3a77c;
  --accent-deep: #dc8052;
  --pink: #f5d7dc;
  --sage: #dfe9dc;
  --lavender: #e9e2f2;
  --cream: #fff1d8;
  --danger: #c85d5d;
  --success: #4f8a68;
  --shadow: 0 18px 50px rgba(74, 56, 46, .08);
  --shadow-small: 0 8px 24px rgba(74, 56, 46, .07);
  --radius: 20px;
  --radius-small: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, .btn, a { cursor: pointer; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny-note { color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Shared */
.notice {
  position: fixed;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(520px, calc(100% - 30px));
  padding: 13px 17px;
  border-radius: 14px;
  background: #fff4d6;
  border: 1px solid #f0d39c;
  box-shadow: var(--shadow-small);
}
.notice.error { background: #fff0f0; border-color: #e7b5b5; color: var(--danger); }
.notice.success { background: #edf8f0; border-color: #b9ddc3; color: var(--success); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 13px;
  background: var(--primary);
  color: white;
  font-weight: 750;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-small); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn.accent { background: var(--accent); color: #3b2923; }
.btn.soft { background: var(--surface-soft); color: var(--primary); }
.btn.full { width: 100%; }

.container {
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0;
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #a47b69;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 22px;
}
.section-head h1, .section-head h2 { margin: 0; letter-spacing: -.025em; }
.result-count { color: var(--muted); font-size: 13px; }

/* Customer header */
.store-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 246, .94);
  border-bottom: 1px solid rgba(238, 226, 218, .85);
  backdrop-filter: blur(16px);
}
.header-inner {
  width: min(1280px, calc(100% - 34px));
  min-height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.brand-mark {
  width: 39px; height: 39px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--pink);
  color: #8e5962;
  font-size: 18px;
}
.brand strong { display: block; font-size: 18px; letter-spacing: .04em; }
.brand small { display: block; color: var(--muted); font-size: 10px; margin-top: -2px; }
.search-wrap {
  flex: 1;
  max-width: 680px;
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 98px 0 42px;
  border: 1px solid var(--border);
  border-radius: 15px;
  outline: none;
  background: white;
  color: var(--text);
  transition: border .15s, box-shadow .15s;
}
.search-wrap input:focus { border-color: #d7b6a6; box-shadow: 0 0 0 4px rgba(243,167,124,.14); }
.search-icon { position: absolute; left: 15px; color: #a58d83; font-size: 22px; z-index: 1; }
.search-wrap button {
  position: absolute;
  right: 5px;
  height: 36px;
  padding: 0 15px;
  border-radius: 11px;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 750;
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.header-link, .cart-btn {
  min-width: 54px;
  padding: 6px 8px;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
}
.header-link:hover, .cart-btn:hover { background: var(--surface-soft); }
.header-link span { display: block; font-size: 17px; }
.header-link small { display: block; color: var(--muted); font-size: 10px; }
.cart-btn { position: relative; font-size: 20px; }
.cart-btn b {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #39251d;
  font-size: 10px;
}

/* Hero */
.hero {
  min-height: 475px;
  padding: 65px max(6vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(245,215,220,.9), transparent 24%),
    radial-gradient(circle at 92% 76%, rgba(223,233,220,.9), transparent 28%),
    linear-gradient(135deg, #fff8f1 0%, #fffdfb 52%, #f8f1ec 100%);
}
.hero-copy { width: min(630px, 100%); }
.hero-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(255,255,255,.75);
  color: #986b59;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 17px 0 14px;
  max-width: 660px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 500;
}
.hero p { max-width: 570px; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.text-link { color: var(--primary); font-weight: 700; font-size: 14px; }
.hero-art { width: min(410px, 38vw); min-width: 300px; height: 320px; position: relative; }
.hero-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.hero-card span { color: #927d75; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.hero-card strong { font-family: Georgia, serif; font-size: 29px; font-weight: 500; }
.hero-card-one { width: 230px; height: 250px; top: 22px; left: 25px; transform: rotate(-7deg); background: var(--pink); }
.hero-card-two { width: 230px; height: 250px; right: 18px; bottom: 3px; transform: rotate(7deg); background: var(--sage); }
.hero-spark { position: absolute; z-index: 3; font-size: 27px; }
.spark-one { top: 0; right: 65px; color: #d78b67; }
.spark-two { left: 5px; bottom: 20px; color: #a87581; }

/* Trust + category */
.trust-strip {
  width: min(1150px, calc(100% - 40px));
  margin: -25px auto 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-small);
}
.trust-strip > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  padding: 19px;
  border-right: 1px solid var(--border);
}
.trust-strip > div:last-child { border-right: 0; }
.trust-strip span { grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-soft); color: #a8735d; }
.trust-strip strong { font-size: 12px; }
.trust-strip small { color: var(--muted); font-size: 10px; }

.category-row { display: flex; gap: 9px; overflow-x: auto; padding: 3px 0 20px; scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }
.category-chip {
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: white;
  color: #675b56;
  font-size: 12px;
  font-weight: 700;
}
.category-chip:hover { background: var(--surface-soft); border-color: #e1c4b4; }
.category-chip.active { background: var(--primary); color: white; border-color: var(--primary); }
.empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.product-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: 19px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card-media { position: relative; aspect-ratio: 1 / 1.03; overflow: hidden; background: #f5eee9; }
.product-card-media > a { display: block; width: 100%; height: 100%; }
.product-card-media img, .product-card-media .image-placeholder { width: 100%; height: 100%; object-fit: cover; }
.image-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, #f8ddd9, transparent 25%),
    radial-gradient(circle at 75% 70%, #e3ebdf, transparent 28%),
    #f6eee9;
  color: #ba9686;
  font-size: 33px;
}
.sale-pill {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 9px;
  border-radius: 99px;
  background: white;
  color: #a65e43;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 12px #5b3d3014;
}
.heart-btn {
  width: 37px; height: 37px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #8f7b74;
  font-size: 19px;
  box-shadow: 0 5px 16px #4a302020;
  transition: .15s;
}
.product-card-media .heart-btn { position: absolute; right: 11px; top: 11px; }
.heart-btn.active { color: #c75f71; background: #fff2f4; }
.product-info { padding: 15px 16px 17px; }
.product-info h3 { margin: 3px 0 6px; font-size: 15px; line-height: 1.25; }
.product-description { min-height: 36px; margin: 0 0 13px; color: var(--muted); font-size: 12px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font-size: 17px; font-weight: 850; color: var(--text); }
.old-price { margin-left: 5px; color: #a79b95; text-decoration: line-through; font-size: 11px; }
.mini-add {
  width: 35px; height: 35px;
  border-radius: 11px;
  background: var(--primary);
  color: white;
  font-size: 19px;
}
.mini-add:hover { background: var(--accent-deep); }

.soft-banner {
  width: min(1160px, calc(100% - 40px));
  margin: 15px auto 50px;
  min-height: 190px;
  padding: 35px 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 27px;
  background: var(--lavender);
}
.soft-banner h2 { margin: 5px 0; font-family: Georgia, serif; font-weight: 500; font-size: 30px; }
.soft-banner p { margin: 7px 0 0; color: var(--muted); }
.soft-banner-icon { font-size: 70px; color: #9a87ae; }

/* Detail */
.back-link { display: inline-block; margin-bottom: 17px; color: #8a756d; font-size: 13px; font-weight: 650; }
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: 55px;
  padding: 15px 0 50px;
}
.detail-gallery { min-width: 0; }
.detail-image {
  aspect-ratio: 1 / .92;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: #f6eee9;
}
.detail-image img { width: 100%; height: 100%; object-fit: contain; }
.detail-decor { font-size: 80px; color: #bc9a8b; }
.thumb-row { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.thumb { width: 68px; height: 68px; flex: 0 0 auto; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: white; }
.thumb.active { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy { padding-top: 18px; }
.detail-title-row { display: flex; align-items: start; gap: 15px; }
.detail-title-row h1 { flex: 1; margin: 0; font-family: Georgia, serif; font-size: clamp(34px, 4vw, 48px); line-height: 1.04; font-weight: 500; letter-spacing: -.035em; }
.detail-heart { flex: 0 0 auto; }
.rating-line { display: flex; align-items: center; gap: 9px; margin: 15px 0; }
.rating-line span { color: #dc9a42; letter-spacing: 2px; }
.rating-line small { color: var(--muted); }
.detail-description { color: var(--muted); font-size: 15px; line-height: 1.8; }
.detail-price { margin: 26px 0; }
.detail-price .price { font-size: 29px; }
.variant-picker { margin: 22px 0; }
.variant-picker > label { display: block; margin-bottom: 9px; font-weight: 750; font-size: 13px; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option {
  min-width: 110px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}
.variant-option.active { border-color: var(--accent-deep); background: #fff5ef; }
.variant-option small { display: block; color: var(--muted); margin-top: 3px; }
.buy-row { display: flex; gap: 10px; margin-top: 24px; }
.grow { flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: white; }
.qty button { width: 39px; height: 44px; background: white; color: var(--text); font-size: 19px; }
.qty input { width: 48px; height: 44px; border: 0; outline: 0; text-align: center; background: white; }
.delivery-note { margin-top: 27px; padding: 16px; border-radius: 15px; background: var(--surface-soft); }
.delivery-note > div { display: flex; gap: 12px; padding: 7px 0; }
.delivery-note span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: white; }
.delivery-note strong, .delivery-note small { display: block; }
.delivery-note small { color: var(--muted); margin-top: 2px; }
.detail-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-info-grid > div { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: white; }
.detail-info-grid span { font-size: 20px; color: #a77b67; }
.detail-info-grid strong { display: block; margin-top: 9px; }
.detail-info-grid p { color: var(--muted); font-size: 12px; }

/* Cart */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.cart-list { display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 105px minmax(0,1fr) auto; gap: 17px; padding: 14px; border: 1px solid var(--border); border-radius: 17px; background: white; }
.cart-item-img { width: 105px; height: 115px; overflow: hidden; border-radius: 13px; background: #f5eee9; }
.cart-item-img img, .cart-item-img .image-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cart-item-main h3 { margin: 2px 0 5px; font-size: 16px; }
.cart-controls { display: flex; align-items: center; gap: 13px; margin-top: 16px; }
.cart-line-total { padding-top: 4px; white-space: nowrap; }
.text-danger { background: transparent; color: var(--danger); font-size: 12px; font-weight: 650; }
.summary { padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: white; box-shadow: var(--shadow-small); }
.summary h2 { margin: 3px 0 20px; font-family: Georgia, serif; font-weight: 500; }
.row { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; }
.total-row { font-size: 17px; padding-bottom: 18px; }
.divider { border-top: 1px solid var(--border); margin: 10px 0; }

/* Forms/auth/checkout */
.form-card { width: min(620px, 100%); margin: 30px auto; padding: 30px; border: 1px solid var(--border); border-radius: 22px; background: white; box-shadow: var(--shadow-small); }
.field { margin-bottom: 15px; }
.field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 750; color: #5c504b; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dfd2ca;
  border-radius: 11px;
  outline: 0;
  background: white;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #d4a08a; box-shadow: 0 0 0 4px rgba(243,167,124,.12); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.auth-layout { min-height: calc(100vh - 160px); display: grid; grid-template-columns: 1fr 460px; align-items: center; gap: 70px; width: min(1060px, calc(100% - 40px)); margin: auto; }
.auth-art { padding: 50px 0; }
.auth-art h1 { max-width: 590px; font-family: Georgia, serif; font-size: clamp(38px,5vw,60px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.auth-art p { max-width: 500px; color: var(--muted); font-size: 16px; }
.auth-card { margin: 0; }
.auth-card h2 { margin: 4px 0 20px; font-family: Georgia, serif; font-size: 34px; font-weight: 500; }
.auth-switch { color: var(--muted); font-size: 13px; }
.auth-switch a { color: var(--accent-deep); font-weight: 750; }
.checkout-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #aaa09b; font-size: 12px; font-weight: 750; }
.checkout-progress span.active { color: var(--text); }
.checkout-progress i { width: 50px; border-top: 1px solid var(--border); }
.checkout-card { padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: white; }
.checkout-section { padding: 5px 0 17px; margin-bottom: 15px; border-bottom: 1px solid var(--border); }
.checkout-section h3 { margin: 0 0 17px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.checkout-submit { margin-top: 5px; }
.saved-addresses { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.saved-addresses > label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 750; }
.address-picker { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.saved-address { padding: 12px; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: white; }
.saved-address.active { border-color: var(--accent-deep); background: #fff5ef; }
.saved-address strong, .saved-address small { display: block; }
.saved-address small { margin-top: 3px; color: var(--muted); }
.success-screen { width: min(680px, calc(100% - 40px)); min-height: 60vh; margin: auto; padding: 80px 0; text-align: center; }
.success-bubble { width: 75px; height: 75px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: #5e7c58; font-size: 34px; }
.success-screen h1 { margin: 0; font-family: Georgia, serif; font-size: 54px; font-weight: 500; }
.success-screen p { max-width: 520px; margin: 15px auto; color: var(--muted); }
.success-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }

/* Account/orders */
.account-hero { display: flex; align-items: center; gap: 17px; padding: 27px; border-radius: 22px; background: var(--pink); }
.account-hero h1 { margin: 0; font-family: Georgia, serif; font-size: 35px; font-weight: 500; }
.avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: white; color: #9b6570; font-size: 23px; font-weight: 800; }
.account-logout { margin-left: auto; }
.account-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin: 18px 0 35px; }
.account-tile { min-height: 140px; padding: 21px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 17px; background: white; transition: transform .15s, box-shadow .15s; }
.account-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-small); }
.account-tile span { font-size: 22px; }
.account-tile strong { margin-top: 14px; }
.account-tile small { color: var(--muted); margin-top: 3px; }
.account-section { padding-top: 5px; }
.address-card { padding: 17px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 15px; background: white; }
.address-title { margin-bottom: 6px; color: #8c7165; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.address-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 99px; background: #f2ece8; color: #74665f; font-size: 10px; font-weight: 800; }
.small-empty { padding: 24px; }
.order-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px; margin-bottom: 11px; border: 1px solid var(--border); border-radius: 17px; background: white; }
.order-card h3 { margin: 3px 0; }
.order-card p { margin: 0; font-size: 12px; }
.order-link:hover { border-color: #dfc4b4; box-shadow: var(--shadow-small); }
.order-total { font-weight: 800; white-space: nowrap; }
.order-total span { color: #a57b6a; margin-left: 8px; }
.order-detail-head { display: flex; justify-content: space-between; align-items: end; margin: 15px 0 24px; }
.order-detail-head h1 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 42px; }
.status-pill { padding: 8px 12px; border-radius: 99px; background: var(--sage); color: #5c7756; font-size: 11px; font-weight: 800; text-transform: capitalize; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start; }
.order-items { padding: 7px 20px; border: 1px solid var(--border); border-radius: 18px; background: white; }
.order-line { display: grid; grid-template-columns: 55px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border); }
.order-line:last-child { border-bottom: 0; }
.order-line-art { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-soft); color: #ad806b; }
.order-line p { margin: 3px 0 0; font-size: 12px; }

/* Empty/loading */
.loading-screen { min-height: 390px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: #6e625d; }
.loading-orb { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 18px; background: var(--pink); color: #a36b76; font-size: 22px; animation: float 1.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px) rotate(4deg); } }
.empty { padding: 55px 20px; text-align: center; color: var(--muted); background: white; border: 1px solid var(--border); border-radius: 20px; }
.empty h2 { margin: 8px 0; color: var(--text); font-family: Georgia, serif; font-weight: 500; }
.empty-icon, .cute-empty > div:first-child { font-size: 44px; color: #b68574; }
.cute-empty p { max-width: 430px; margin: 0 auto 20px; }

/* Footer */
.footer { margin-top: 45px; padding: 30px 20px; border-top: 1px solid var(--border); background: #fff7f1; color: var(--muted); font-size: 11px; }
.footer-inner { width: min(1150px,100%); margin: auto; display: flex; justify-content: space-between; gap: 20px; }
.footer-inner div { display: flex; gap: 17px; }
.footer strong { color: var(--text); }

/* Admin */
.admin-shell { min-height: 100vh; display: flex; background: #f7f7f8; }
.sidebar {
  width: 245px; background: #2f2b2a; color: white; padding: 19px 13px;
  position: fixed; inset: 0 auto 0 0; z-index: 20;
}
.admin-brand { padding: 9px 13px 27px; font-size: 21px; font-weight: 850; letter-spacing: .03em; }
.admin-brand span { display: block; margin-top: 2px; color: #b9aaa4; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.nav-item { width: 100%; margin: 2px 0; padding: 11px 13px; border-radius: 11px; text-align: left; color: #d8d0cd; background: transparent; font-size: 13px; }
.nav-item:hover, .nav-item.active { background: #514945; color: white; }
.admin-main { margin-left: 245px; width: calc(100% - 245px); }
.admin-topbar { min-height: 78px; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #e8e6e5; background: rgba(255,255,255,.93); backdrop-filter: blur(14px); }
.top-actions { display: flex; gap: 8px; }
.secondary-btn { padding: 9px 13px; border: 1px solid #e2dfdd; border-radius: 10px; background: white; color: var(--text); font-size: 12px; font-weight: 700; }
.dev-banner { margin: 14px 28px 0; padding: 9px 12px; border-radius: 10px; background: #fff3e8; border: 1px solid #efd4c1; color: #966247; font-size: 11px; font-weight: 700; }
.admin-content { padding: 28px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.kpi { padding: 19px; border: 1px solid #e7e3e0; border-radius: 16px; background: white; }
.kpi .value { margin-top: 5px; font-size: 29px; font-weight: 850; }
.admin-panel { padding: 20px; margin-top: 16px; border: 1px solid #e7e3e0; border-radius: 16px; background: white; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid #eeeae8; text-align: left; white-space: nowrap; }
th { color: #938984; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
td { font-size: 13px; }
.actions { display: flex; gap: 6px; }
.icon-btn { padding: 7px 10px; border: 1px solid #e2dfdd; border-radius: 8px; background: white; font-size: 11px; font-weight: 700; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(37,31,28,.55); backdrop-filter: blur(4px); }
.modal { width: min(720px,100%); max-height: 90vh; overflow: auto; padding: 25px; border-radius: 19px; background: white; box-shadow: 0 30px 80px #0004; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-head h2 { margin: 0; font-family: Georgia, serif; font-weight: 500; }
.admin-content .notice { position: static; transform: none; width: auto; box-shadow: none; margin: 0 0 15px; }
.admin-content .btn { min-height: 39px; padding: 9px 14px; border-radius: 10px; }
.admin-content .field input, .admin-content .field select, .admin-content .field textarea { min-height: 40px; }
.admin-content .badge { background: #fff0e7; color: #a36043; }
.admin-content .empty { padding: 35px; }

@media (max-width: 1050px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hero-art { opacity: .7; }
}
@media (max-width: 850px) {
  .header-inner { width: calc(100% - 20px); min-height: 66px; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
  .brand { min-width: auto; }
  .brand small { display: none; }
  .search-wrap { order: 5; flex-basis: 100%; max-width: none; }
  .store-header { padding-bottom: 9px; }
  .header-actions { margin-left: auto; }
  .header-link small { display: none; }
  .hero { min-height: 430px; padding: 55px 24px 90px; }
  .hero-art { display: none; }
  .trust-strip { grid-template-columns: 1fr 1fr; margin-top: -35px; }
  .trust-strip > div:nth-child(2) { border-right: 0; }
  .trust-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .container { width: min(100% - 28px, 700px); padding: 32px 0; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
  .product-info { padding: 12px; }
  .product-description { min-height: 0; }
  .product-detail, .cart-layout, .order-detail-grid { grid-template-columns: 1fr; gap: 22px; }
  .detail-copy { padding-top: 0; }
  .detail-info-grid, .account-grid { grid-template-columns: 1fr; }
  .soft-banner { width: calc(100% - 28px); padding: 28px; }
  .soft-banner-icon { display: none; }
  .auth-layout { grid-template-columns: 1fr; gap: 0; }
  .auth-art { padding: 35px 0 5px; }
  .auth-art h1 { font-size: 42px; }
  .auth-card { margin-bottom: 30px; }
  .sidebar { width: 70px; padding: 12px 7px; }
  .admin-brand { font-size: 0; text-align: center; padding: 8px 3px 20px; }
  .admin-brand::first-letter { font-size: 22px; }
  .admin-brand span { display: none; }
  .nav-item { font-size: 0; text-align: center; padding: 12px 4px; }
  .admin-main { margin-left: 70px; width: calc(100% - 70px); }
  .admin-content { padding: 16px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .admin-topbar { padding: 0 16px; }
  .admin-topbar .muted { display: none; }
  .two-col, .address-picker { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 42px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .trust-strip { width: calc(100% - 20px); }
  .trust-strip > div { padding: 14px; }
  .cart-item { grid-template-columns: 78px minmax(0,1fr); }
  .cart-item-img { width: 78px; height: 90px; }
  .cart-line-total { grid-column: 2; padding-top: 0; }
  .success-screen h1 { font-size: 42px; }
  .footer-inner, .footer-inner div { flex-direction: column; }
}

/* Organization storefront theming */
:root { --header-bg: var(--bg); --hero-bg: linear-gradient(135deg, #fff8f1 0%, #fffdfb 52%, #f8f1ec 100%); }
.store-header { background: color-mix(in srgb, var(--header-bg) 94%, transparent); }
.hero { background: var(--hero-bg); }
.brand-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 13px; }

/* Storefront filtering */
.category-chip.active { background: var(--primary); color: white; border-color: var(--primary); }
.filter-panel { margin: 0 0 24px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-small); }
.filter-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.filter-head strong { display:block; font-size: 14px; }
.filter-head span { display:block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.filter-grid { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; align-items:end; }
.filter-field { display:flex; flex-direction:column; gap:6px; }
.filter-field > span { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.filter-field input, .filter-field select { width:100%; min-height:42px; border:1px solid var(--border); border-radius:11px; padding:0 11px; background:var(--surface); color:var(--text); outline:none; }
.filter-field input:focus, .filter-field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.filter-check { min-height:42px; display:flex; align-items:center; gap:8px; padding:0 8px; border:1px solid var(--border); border-radius:11px; font-size:12px; font-weight:700; background:var(--surface-soft); }
.filter-check input { accent-color:var(--accent-deep); }
.filter-apply { display:none; margin-top:12px; }
@media (max-width: 1000px) { .filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .filter-apply { display:inline-flex; } }
@media (max-width: 620px) { .filter-grid { grid-template-columns: 1fr 1fr; } .filter-head { align-items:flex-start; } }

/* =========================================================
   LUXURY STOREFRONT — tenant-themeable
   ========================================================= */
:root {
  --bg: #F7EDE8;
  --surface: #FFFDFC;
  --surface-soft: #F1E5DE;
  --text: #3D3532;
  --muted: #7C716C;
  --primary: #8C6A5A;
  --accent: #D9A7A0;
  --accent-deep: #62483D;
  --border: #E5D8D1;
  --shadow: 0 24px 70px rgba(80, 56, 45, .08);
}
body[data-app="customer"] { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }
body[data-app="customer"] .announcement-bar { min-height: 29px; display:grid; place-items:center; padding:6px 15px; background:var(--primary); color:#fff; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
body[data-app="customer"] .store-header { background: color-mix(in srgb, var(--header-bg) 96%, transparent); border-bottom:1px solid var(--border); }
.luxury-header { min-height:82px; gap:30px; }
.luxury-brand { min-width:250px; }
.luxury-brand .brand-mark { width:58px;height:58px;border-radius:50%;background:var(--surface-soft);color:var(--primary);border:1px solid var(--border); }
.luxury-brand strong { font-family: Georgia, serif; font-size:17px; font-weight:500; letter-spacing:.15em; }
.luxury-brand small { font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.store-nav { display:flex; align-items:center; gap:25px; margin:auto; }
.store-nav a { color:var(--text); font-size:11px; letter-spacing:.1em; text-transform:uppercase; position:relative; }
.store-nav a:after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--primary); transition:width .2s; }
.store-nav a:hover:after { width:100%; }
.header-tools { display:flex; align-items:center; gap:3px; }
.tool-btn { position:relative; width:39px;height:39px; display:grid;place-items:center;border-radius:50%;background:transparent;color:var(--text);font-size:19px; }
.tool-btn:hover { background:var(--surface-soft); }
.bag-tool b { position:absolute; top:0;right:0; min-width:16px;height:16px;padding:0 4px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:9px; }
.mobile-menu { display:none; background:none;color:var(--text);font-size:20px; }
.search-bar-row { display:none; padding:0 17px 13px; }
.search-bar-row.open { display:block; }
.luxury-search { max-width:720px; margin:auto; }
.luxury-search input { border-radius:0; background:var(--surface); border-color:var(--border); }
.luxury-search button { border-radius:0; background:var(--primary); }
.luxury-hero { padding:0; min-height:650px; background:var(--hero-bg); }
.hero-image-panel { position:relative; width:100%; min-height:650px; display:flex; align-items:center; background-color:var(--hero-bg); background-size:cover; background-position:center; }
.hero-image-panel:not([style*="background-image"]) { background-image: radial-gradient(circle at 80% 25%, color-mix(in srgb,var(--accent) 30%,transparent),transparent 25%), linear-gradient(110deg,var(--hero-bg),var(--surface)); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb,var(--bg) 95%, transparent) 0%, color-mix(in srgb,var(--bg) 68%, transparent) 48%, transparent 78%); }
.hero-editorial-copy { position:relative; z-index:2; width:min(600px, calc(100% - 50px)); margin-left:max(7vw,25px); padding:60px 0; }
.hero-kicker { background:transparent; padding:0; color:var(--primary); border-radius:0; letter-spacing:.22em; }
.hero-editorial-copy h1 { max-width:590px; margin:18px 0 18px; font-family:Georgia,serif; font-size:clamp(48px,6vw,80px); line-height:.96; font-weight:400; letter-spacing:-.05em; }
.hero-editorial-copy p { max-width:480px; font-size:15px; line-height:1.9; color:var(--muted); }
.luxury-btn { margin-top:14px; min-width:210px; border-radius:0; background:var(--primary); color:#fff; text-transform:uppercase; font-size:10px; letter-spacing:.16em; font-weight:700; }
.editorial-intro { text-align:center; padding-top:85px; padding-bottom:50px; }
.editorial-intro h2 { margin:8px auto 13px; font-family:Georgia,serif; font-weight:400; font-size:clamp(34px,4vw,50px); letter-spacing:-.04em; }
.editorial-intro p { max-width:650px; margin:auto; color:var(--muted); line-height:1.9; }
body[data-app="customer"] .section-head h2 { font-family:Georgia,serif; font-weight:400; font-size:34px; }
body[data-app="customer"] .category-chip { border-radius:0; background:transparent; border-color:var(--border); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
body[data-app="customer"] .category-chip.active { background:var(--primary); }
body[data-app="customer"] .filter-panel { border-radius:0; box-shadow:none; background:transparent; border-left:0;border-right:0; padding:18px 0; }
body[data-app="customer"] .product-grid { gap:28px 20px; }
body[data-app="customer"] .product-card { border:0; border-radius:0; background:transparent; box-shadow:none; }
body[data-app="customer"] .product-card:hover { transform:none; box-shadow:none; }
body[data-app="customer"] .product-card-media { border-radius:0; aspect-ratio:1/1.12; background:var(--surface-soft); }
body[data-app="customer"] .product-card-media img { transition:transform .5s ease; }
body[data-app="customer"] .product-card:hover .product-card-media img { transform:scale(1.035); }
body[data-app="customer"] .product-info { padding:15px 2px 0; }
body[data-app="customer"] .product-info h3 { font-family:Georgia,serif; font-size:18px; font-weight:400; }
body[data-app="customer"] .product-description { font-size:11px; line-height:1.6; }
body[data-app="customer"] .mini-add { border-radius:50%; background:var(--primary); }
body[data-app="customer"] .heart-btn { border:1px solid var(--border); box-shadow:none; }
.luxury-banner { width:min(1160px,calc(100% - 40px)); margin:70px auto; border-radius:0; background:var(--surface-soft); border:1px solid var(--border); min-height:240px; }
.luxury-banner h2 { font-size:40px; }
body[data-app="customer"] .footer { background:var(--surface); border-top:1px solid var(--border); }

@media (max-width: 850px) {
  .luxury-header { min-height:66px; }
  .mobile-menu { display:block; }
  .luxury-brand { min-width:0; flex:1; }
  .luxury-brand strong { font-size:13px; letter-spacing:.1em; }
  .luxury-brand small { display:none; }
  .store-nav { display:none; position:absolute; left:0;right:0;top:100%; padding:16px 20px; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; gap:16px; }
  .store-nav.open { display:flex; }
  .hero-image-panel,.luxury-hero { min-height:600px; }
  .hero-overlay { background:linear-gradient(90deg, color-mix(in srgb,var(--bg) 94%,transparent), color-mix(in srgb,var(--bg) 78%,transparent)); }
}
@media (max-width:520px) {
  .header-tools .tool-btn { width:34px;height:34px; }
  .hero-editorial-copy { width:calc(100% - 34px); margin-left:17px; }
  .hero-editorial-copy h1 { font-size:48px; }
  .luxury-banner { width:calc(100% - 28px); }
  .luxury-banner h2 { font-size:31px; }
}


/* Luxury storefront information pages */
.luxury-footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:34px; align-items:start; }
.footer-brand-block,.footer-column { display:flex; flex-direction:column; gap:8px; }
.footer-brand-block strong { font-family:Georgia,serif; font-size:20px; letter-spacing:.04em; }
.footer-brand-block span,.footer-column span,.footer-column a { color:var(--muted); font-size:13px; }
.footer-column strong { font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.footer-column a:hover { color:var(--primary); }
.legal-page { max-width:900px; min-height:60vh; }
.legal-page h1 { font-family:Georgia,serif; font-size:clamp(40px,6vw,64px); font-weight:500; letter-spacing:-.04em; margin:10px 0 28px; }
.legal-card { background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:32px; box-shadow:var(--shadow-small); }
.legal-card p { color:var(--muted); line-height:1.9; white-space:pre-wrap; }
@media (max-width: 800px) { .luxury-footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px) { .luxury-footer-grid { grid-template-columns:1fr; } .legal-card { padding:22px; } }

.contact-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.contact-details div { display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--surface-soft); border:1px solid var(--border); border-radius:16px; }
.contact-details strong { font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.contact-details span { color:var(--muted); font-size:14px; }
@media(max-width:600px){.contact-details{grid-template-columns:1fr;}}

/* Admin catalog builder */
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.admin-section{margin:18px 0;padding:16px;border:1px solid var(--border,#e8ded7);border-radius:16px;background:var(--surface-soft,#f1e5de)}
.section-title{font-weight:700;margin-bottom:12px}
.tiny-note{display:block;font-size:12px;color:var(--muted,#7c716c);margin-top:5px}
@media(max-width:800px){.three-col{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}}
.custom-details{margin-top:34px;padding-top:28px;border-top:1px solid var(--border,#e8ded7)}
.custom-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border,#e8ded7);margin-top:12px;border:1px solid var(--border,#e8ded7);border-radius:14px;overflow:hidden}
.custom-detail{background:var(--surface,#fff);padding:14px 16px;display:flex;justify-content:space-between;gap:20px}.custom-detail span{color:var(--muted,#7c716c)}.custom-detail strong{text-align:right}@media(max-width:650px){.custom-details-grid{grid-template-columns:1fr}}

/* Luxury variant cards + purchase actions */
body[data-app="customer"] .variant-card { position:relative; }
body[data-app="customer"] .variant-card .product-card-media { position:relative; overflow:hidden; }
body[data-app="customer"] .variant-quick-add { position:absolute; left:14px; right:14px; bottom:14px; border:1px solid rgba(255,255,255,.75); background:rgba(255,253,252,.94); color:var(--text); padding:12px 16px; border-radius:999px; font:600 11px/1 Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:.25s ease; cursor:pointer; }
body[data-app="customer"] .variant-card:hover .variant-quick-add, body[data-app="customer"] .variant-quick-add:focus { opacity:1; transform:translateY(0); }
body[data-app="customer"] .variant-card-name { color:var(--muted); font-size:12px; letter-spacing:.04em; margin:6px 0 10px; }
body[data-app="customer"] .view-variant { color:var(--primary); font-size:11px; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; padding:8px 0; }
body[data-app="customer"] .view-variant:hover { color:var(--accent-deep); }
body[data-app="customer"] .buy-actions { display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:22px; }
body[data-app="customer"] .buy-actions .qty { grid-row:1 / span 2; align-self:stretch; }
body[data-app="customer"] .luxury-add, body[data-app="customer"] .luxury-buy { min-height:56px; border-radius:14px; border:1px solid var(--primary); font:600 12px/1 Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.2s ease; }
body[data-app="customer"] .luxury-add { background:transparent; color:var(--primary); }
body[data-app="customer"] .luxury-add:hover { background:var(--surface-soft); }
body[data-app="customer"] .luxury-buy { background:var(--primary); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; box-shadow:0 10px 24px rgba(98,72,61,.16); }
body[data-app="customer"] .luxury-buy:hover { background:var(--accent-deep); transform:translateY(-1px); }
body[data-app="customer"] .luxury-buy small { font-size:9px; letter-spacing:.05em; text-transform:none; opacity:.78; font-weight:400; }
body[data-app="customer"] .detail-price { margin-top:18px; font-size:25px; }
body[data-app="customer"] .variant-option { min-width:120px; }
@media (max-width:640px) {
  body[data-app="customer"] .variant-quick-add { opacity:1; transform:none; }
  body[data-app="customer"] .buy-actions { grid-template-columns:1fr 1fr; }
  body[data-app="customer"] .buy-actions .qty { grid-column:1 / -1; grid-row:auto; }
  body[data-app="customer"] .luxury-add, body[data-app="customer"] .luxury-buy { min-height:52px; }
}

/* v7 catalog interaction polish */
body[data-app="customer"] .product-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
body[data-app="customer"] .product-card-actions .btn{min-height:42px;border-radius:12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
body[data-app="customer"] .variant-image-details{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;flex-wrap:wrap;gap:5px 8px;padding:9px 11px;border:1px solid rgba(255,255,255,.62);border-radius:12px;background:rgba(61,53,50,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:10px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
body[data-app="customer"] .variant-image-details span{display:block;white-space:nowrap}
body[data-app="customer"] .variant-image-details b{font-weight:600;opacity:.72;margin-right:3px}
body[data-app="customer"] .variant-card:hover .variant-image-details{opacity:1;transform:translateY(0)}
@media(max-width:640px){body[data-app="customer"] .variant-image-details{opacity:1;transform:none;left:8px;right:8px;bottom:8px;padding:7px 9px;gap:4px 7px;font-size:9px}}
body[data-app="customer"] .premium-buy-actions{grid-template-columns:auto 1.5fr 1fr!important;align-items:stretch}
body[data-app="customer"] .premium-buy-actions .qty{grid-row:auto!important}
body[data-app="customer"] .detail-copy .custom-details{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
body[data-app="customer"] .detail-copy .custom-details-grid{margin-top:8px}
body[data-app="customer"] .product-details-below{margin-top:54px;padding-top:36px;border-top:1px solid var(--border)}
body[data-app="customer"] .product-details-below .custom-details{margin-top:10px}
body[data-app="customer"] .product-details-below .text-link{display:inline-block;margin-top:18px}
.media-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:60vh;overflow:auto;padding:4px}
.media-pick{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:8px;text-align:left;cursor:pointer}
.media-pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;margin-bottom:7px}
.media-pick span{font-size:11px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.media-picker{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-app="customer"] .premium-buy-actions{grid-template-columns:1fr 1fr!important}.premium-buy-actions .qty{grid-column:1/-1}}


/* =========================================================
   CROSS-BROWSER FOUNDATION + ADMIN WORKSPACE THEME
   The customer storefront keeps its warm luxury palette above.
   Admin is intentionally cooler and lower-contrast for long sessions.
   ========================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { appearance: none; -webkit-appearance: none; border-radius: 0; }
button { touch-action: manipulation; }
input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; }

body[data-app="customer"] {
  --customer-focus: rgba(140,106,90,.18);
  min-width: 320px;
}
body[data-app="customer"] input:focus-visible,
body[data-app="customer"] select:focus-visible,
body[data-app="customer"] textarea:focus-visible,
body[data-app="customer"] button:focus-visible,
body[data-app="customer"] a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
body[data-app="customer"] .store-header {
  background: rgba(255,253,252,.96);
  background: color-mix(in srgb, var(--header-bg) 96%, transparent);
}

/* Admin-only design tokens */
body[data-app="admin"] {
  --admin-bg: #f4f6fa;
  --admin-surface: #ffffff;
  --admin-surface-soft: #eef2f7;
  --admin-sidebar: #172033;
  --admin-sidebar-hover: #24324a;
  --admin-sidebar-text: #b9c3d3;
  --admin-sidebar-active: #6f8df7;
  --admin-text: #202938;
  --admin-muted: #697586;
  --admin-border: #e2e7ef;
  --admin-primary: #526fd6;
  --admin-primary-dark: #3f59b4;
  --admin-success: #3c8a69;
  --admin-warning: #b7791f;
  --admin-danger: #c05252;
  --admin-focus: rgba(82,111,214,.17);
  --admin-shadow: 0 8px 26px rgba(23,32,51,.055);
  --admin-shadow-lg: 0 20px 60px rgba(23,32,51,.13);
  background: var(--admin-bg);
  color: var(--admin-text);
  min-width: 320px;
}
body[data-app="admin"] .admin-shell {
  min-height: 100dvh;
  background: var(--admin-bg);
}
body[data-app="admin"] .sidebar {
  width: 252px;
  padding: 18px 12px;
  background: var(--admin-sidebar);
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 8px 0 28px rgba(23,32,51,.07);
}
body[data-app="admin"] .admin-brand {
  padding: 8px 14px 22px;
  color: #fff;
  letter-spacing: .01em;
}
body[data-app="admin"] .admin-brand span {
  color: #8491a7;
  letter-spacing: .14em;
}
body[data-app="admin"] .nav-item {
  min-height: 42px;
  margin: 3px 0;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--admin-sidebar-text);
  font-size: 13px;
  font-weight: 650;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body[data-app="admin"] .nav-item:hover {
  background: var(--admin-sidebar-hover);
  color: #fff;
}
body[data-app="admin"] .nav-item.active {
  background: rgba(111,141,247,.16);
  border-color: rgba(111,141,247,.18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--admin-sidebar-active);
}
body[data-app="admin"] .admin-main {
  margin-left: 252px;
  width: calc(100% - 252px);
  min-width: 0;
}
body[data-app="admin"] .admin-topbar {
  min-height: 76px;
  padding: 0 30px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--admin-border);
  box-shadow: 0 1px 0 rgba(23,32,51,.02);
}
body[data-app="admin"] #adminPageTitle {
  color: var(--admin-text);
  font-size: 16px;
  letter-spacing: -.01em;
}
body[data-app="admin"] .admin-topbar .muted,
body[data-app="admin"] .muted {
  color: var(--admin-muted);
}
body[data-app="admin"] .top-actions { flex-wrap: wrap; }
body[data-app="admin"] .secondary-btn {
  min-height: 38px;
  padding: 8px 13px;
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body[data-app="admin"] .secondary-btn:hover {
  background: var(--admin-surface-soft);
  border-color: #ccd4e0;
  box-shadow: 0 3px 10px rgba(23,32,51,.05);
}
body[data-app="admin"] .dev-banner {
  margin: 14px 30px 0;
  padding: 10px 13px;
  background: #fff8e8;
  border: 1px solid #f1dfb9;
  color: #8b641e;
  border-radius: 9px;
}
body[data-app="admin"] .admin-content {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 28px 30px 50px;
}
body[data-app="admin"] .admin-content > .admin-content { padding: 0; }
body[data-app="admin"] .kpi-grid {
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}
body[data-app="admin"] .kpi {
  min-width: 0;
  padding: 18px 19px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}
body[data-app="admin"] .kpi .value {
  color: var(--admin-text);
  font-size: 28px;
  line-height: 1.15;
}
body[data-app="admin"] .admin-panel {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}
body[data-app="admin"] .admin-panel h2,
body[data-app="admin"] .admin-panel h3 { color: var(--admin-text); }
body[data-app="admin"] .toolbar {
  min-height: 40px;
  margin-bottom: 16px;
}
body[data-app="admin"] .toolbar h2,
body[data-app="admin"] .panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
}
body[data-app="admin"] .table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
body[data-app="admin"] table { min-width: 680px; }
body[data-app="admin"] th,
body[data-app="admin"] td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--admin-border);
}
body[data-app="admin"] th {
  background: #f8f9fb;
  color: #778396;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}
body[data-app="admin"] tbody tr:last-child td { border-bottom: 0; }
body[data-app="admin"] tbody tr { transition: background .12s ease; }
body[data-app="admin"] tbody tr:hover { background: #fafbfc; }
body[data-app="admin"] td {
  color: #303a4a;
  font-size: 13px;
  vertical-align: middle;
}
body[data-app="admin"] .actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
body[data-app="admin"] .icon-btn {
  min-height: 32px;
  padding: 6px 9px;
  border-color: var(--admin-border);
  background: #fff;
  color: #435064;
  border-radius: 8px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
body[data-app="admin"] .icon-btn:hover {
  background: var(--admin-surface-soft);
  border-color: #cbd4e1;
  color: var(--admin-primary-dark);
}
body[data-app="admin"] .btn {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 9px;
  background: var(--admin-primary);
  box-shadow: none;
}
body[data-app="admin"] .btn:hover {
  background: var(--admin-primary-dark);
  box-shadow: 0 5px 14px rgba(82,111,214,.18);
}
body[data-app="admin"] .btn.accent { background: var(--admin-primary); color: #fff; }
body[data-app="admin"] .btn.soft { background: var(--admin-surface-soft); color: var(--admin-text); }
body[data-app="admin"] .admin-content .field { min-width: 0; }
body[data-app="admin"] .admin-content .field label {
  display: block;
  margin-bottom: 6px;
  color: #526074;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
}
body[data-app="admin"] .admin-content .field input,
body[data-app="admin"] .admin-content .field select,
body[data-app="admin"] .admin-content .field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  background: #fff;
  color: var(--admin-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-app="admin"] .admin-content .field textarea { min-height: 96px; resize: vertical; }
body[data-app="admin"] .admin-content .field input:focus,
body[data-app="admin"] .admin-content .field select:focus,
body[data-app="admin"] .admin-content .field textarea:focus {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px var(--admin-focus);
}
body[data-app="admin"] .admin-content .field input[type="color"] {
  min-height: 42px;
  padding: 4px;
}
body[data-app="admin"] .modal-backdrop {
  background: rgba(17,24,39,.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body[data-app="admin"] .modal {
  width: min(760px,100%);
  max-height: min(90dvh,900px);
  padding: 24px;
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-lg);
}
body[data-app="admin"] .modal-head {
  position: sticky;
  top: -24px;
  z-index: 2;
  margin: -24px -24px 20px;
  padding: 18px 24px 16px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--admin-border);
}
body[data-app="admin"] .modal-head h2 { font-family: inherit; font-size: 17px; font-weight: 750; }
body[data-app="admin"] .modal .icon-btn { min-width: 34px; }
body[data-app="admin"] .admin-content .notice {
  border-radius: 10px;
  margin-bottom: 14px;
}
body[data-app="admin"] .admin-content .badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff4df;
  color: #9a681b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}
body[data-app="admin"] .admin-content .empty {
  padding: 46px 24px;
  background: var(--admin-surface);
  border-color: var(--admin-border);
}
body[data-app="admin"] .admin-section-title {
  margin: 24px 0 10px;
  padding-top: 8px;
  border-top: 1px solid var(--admin-border);
}
body[data-app="admin"] .admin-section-title h3 { margin: 3px 0; font-size: 15px; }
body[data-app="admin"] .admin-section-title .eyebrow { color: var(--admin-primary); }
body[data-app="admin"] code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--admin-surface-soft);
  color: #4e5e75;
  font-size: .9em;
}
body[data-app="admin"] a { color: inherit; }
body[data-app="admin"] button:focus-visible,
body[data-app="admin"] a:focus-visible,
body[data-app="admin"] input:focus-visible,
body[data-app="admin"] select:focus-visible,
body[data-app="admin"] textarea:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  body[data-app="admin"] .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body[data-app="admin"] .sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    z-index: 40;
    box-shadow: 0 5px 18px rgba(23,32,51,.12);
  }
  body[data-app="admin"] .admin-brand {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-right: 1px solid rgba(255,255,255,.1);
  }
  body[data-app="admin"] .admin-brand span { display: inline; margin-left: 5px; }
  body[data-app="admin"] .nav-item {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
  }
  body[data-app="admin"] .admin-main {
    margin-left: 0;
    width: 100%;
  }
  body[data-app="admin"] .admin-topbar { position: sticky; top: 61px; }
  body[data-app="admin"] .admin-content { padding: 22px 20px 42px; }
}
@media (max-width: 650px) {
  body[data-app="admin"] .admin-topbar {
    min-height: auto;
    padding: 12px 14px;
    gap: 10px;
    align-items: flex-start;
  }
  body[data-app="admin"] .top-actions { justify-content: flex-end; }
  body[data-app="admin"] .top-actions .secondary-btn { font-size: 11px; }
  body[data-app="admin"] .dev-banner { margin: 10px 14px 0; }
  body[data-app="admin"] .admin-content { padding: 16px 14px 32px; }
  body[data-app="admin"] .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  body[data-app="admin"] .kpi { padding: 14px; }
  body[data-app="admin"] .kpi .value { font-size: 23px; }
  body[data-app="admin"] .admin-panel { padding: 14px; }
  body[data-app="admin"] .toolbar { align-items: flex-start; flex-wrap: wrap; }
  body[data-app="admin"] .modal-backdrop { padding: 8px; align-items: flex-end; }
  body[data-app="admin"] .modal { max-height: 94dvh; border-radius: 14px 14px 0 0; padding: 20px; }
  body[data-app="admin"] .modal-head { top: -20px; margin: -20px -20px 18px; padding: 15px 20px; }
}
@media (max-width: 430px) {
  body[data-app="admin"] .kpi-grid { grid-template-columns: 1fr; }
  body[data-app="admin"] .admin-topbar { display: block; }
  body[data-app="admin"] .top-actions { margin-top: 10px; justify-content: flex-start; }
}

/* Admin navigation groups */
body[data-app="admin"] .sidebar { overflow-y: auto; overflow-x: hidden; }
body[data-app="admin"] .nav-group { margin: 4px 0 13px; }
body[data-app="admin"] .nav-group-label {
  padding: 8px 13px 5px;
  color: #69778d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body[data-app="admin"] .nav-group + .nav-group { border-top: 1px solid rgba(255,255,255,.06); padding-top: 8px; }
@media (max-width: 900px) {
  body[data-app="admin"] .sidebar { overflow-y: hidden; }
  body[data-app="admin"] .nav-group { display: contents; }
  body[data-app="admin"] .nav-group-label { display: none; }
  body[data-app="admin"] .nav-group + .nav-group { border-top: 0; padding-top: 0; }
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  body[data-app="customer"] .store-header { background: var(--header-bg, #fffdfc); }
  body[data-app="customer"] .filter-field input:focus,
  body[data-app="customer"] .filter-field select:focus { box-shadow: 0 0 0 3px rgba(217,167,160,.18); }
  body[data-app="customer"] .hero-image-panel:not([style*="background-image"]) { background-image: linear-gradient(110deg,var(--hero-bg),var(--surface)); }
  body[data-app="customer"] .hero-overlay { background: linear-gradient(90deg, rgba(247,237,232,.95) 0%, rgba(247,237,232,.68) 48%, transparent 78%); }
}

/* v10 consistency + catalog UX */
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button{appearance:none;-webkit-appearance:none}
body{margin:0;min-width:320px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body[data-app="customer"] .tool-btn{width:40px;height:40px;padding:0;display:grid;place-items:center;flex:0 0 40px}
body[data-app="customer"] .tool-btn svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
body[data-app="customer"] .bag-tool svg{width:19px;height:19px}
body[data-app="customer"] .bag-tool b{top:1px;right:1px}
body[data-app="customer"] .heart-btn{width:38px;height:38px;min-width:38px;padding:0;display:grid;place-items:center;line-height:1;font-size:19px}
body[data-app="customer"] .custom-details-grid{display:none!important}
body[data-app="customer"] .custom-details-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
body[data-app="customer"] .custom-details-list li{position:relative;padding-left:18px;display:flex;justify-content:space-between;gap:18px;border:0!important;background:none!important;min-height:0!important}
body[data-app="customer"] .custom-details-list li::before{content:"•";position:absolute;left:1px;top:0;color:var(--primary);font-size:16px;line-height:1.35}
body[data-app="customer"] .custom-details-list li span{color:var(--muted);font-size:12px}
body[data-app="customer"] .custom-details-list li strong{text-align:right;font-size:12px;font-weight:650;color:var(--text)}
body[data-app="customer"] #catalogResults{min-height:120px}
body[data-app="customer"] #catalogResults .product-grid{transition:opacity .16s ease}
body[data-app="customer"] #catalogResults .filter-panel{scroll-margin-top:100px}
@media(max-width:700px){body[data-app="customer"] .custom-details-list li{align-items:flex-start}body[data-app="customer"] .custom-details-list li strong{max-width:58%}}

/* v12: consistent controls and theme-safe hover states */
button, .btn, .icon-btn, .secondary-btn, .luxury-btn, .luxury-add, .luxury-buy, .mini-add {
  -webkit-tap-highlight-color: transparent;
}
.btn { min-height: 42px; line-height: 1.1; white-space: nowrap; }
.btn:hover { background: var(--primary); color: #fff; }
.btn.accent:hover { background: var(--accent-deep); color: #fff; }
.btn.soft:hover { background: var(--surface-soft); color: var(--primary); }

body[data-app="customer"] .luxury-btn:hover,
body[data-app="customer"] .luxury-buy:hover {
  background: var(--accent-deep);
  color: #fff;
}
body[data-app="customer"] .luxury-add:hover {
  background: var(--surface-soft);
  color: var(--primary);
}
body[data-app="customer"] .category-chip:hover {
  color: var(--primary);
  background: var(--surface-soft);
}
body[data-app="customer"] .category-chip.active:hover {
  color: #fff;
  background: var(--primary);
}
body[data-app="customer"] .mini-add:hover {
  background: var(--accent-deep);
  color: #fff;
}

/* Admin controls: fixed dimensions and explicit hover contrast */
body[data-app="admin"] .top-actions,
body[data-app="admin"] .actions,
body[data-app="admin"] .theme-preset-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-app="admin"] .top-actions > button,
body[data-app="admin"] .actions > button,
body[data-app="admin"] .theme-preset-bar > button {
  flex: 0 0 auto;
}
body[data-app="admin"] .icon-btn,
body[data-app="admin"] .secondary-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  white-space: nowrap;
}
body[data-app="admin"] .icon-btn:hover {
  background: var(--admin-surface-soft);
  color: var(--admin-primary-dark);
}
body[data-app="admin"] .secondary-btn:hover {
  background: var(--admin-surface-soft);
  color: var(--admin-text);
}
body[data-app="admin"] .btn:hover,
body[data-app="admin"] .btn.accent:hover {
  background: var(--admin-primary-dark);
  color: #fff;
}
body[data-app="admin"] .btn.soft:hover {
  background: var(--admin-surface-soft);
  color: var(--admin-text);
}
body[data-app="admin"] .theme-preset-bar {
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-surface-soft);
}
body[data-app="admin"] .theme-preset-bar .field {
  flex: 1 1 260px;
  min-width: 220px;
}
body[data-app="admin"] .theme-preset-bar .field label { margin-bottom: 5px; }

/* Prevent theme colors from ever producing invisible text on hover. */
body[data-app="customer"] button:hover,
body[data-app="customer"] a:hover,
body[data-app="admin"] button:hover,
body[data-app="admin"] a:hover { text-decoration-thickness: 1px; }

@media (max-width: 600px) {
  body[data-app="admin"] .theme-preset-bar .field { flex-basis: 100%; min-width: 0; }
  body[data-app="admin"] .theme-preset-bar > button { flex: 1 1 auto; }
}
body[data-app="admin"] #websiteSwitcher select{
  min-height:34px;padding:0 30px 0 10px;border:1px solid var(--admin-border,#e2dfdd);border-radius:9px;background:var(--admin-surface,#fff);color:var(--admin-text,#2b2928);font-size:12px;font-weight:650;
}
body[data-app="admin"] #adminRoleBadge{white-space:nowrap}
body[data-app="admin"] .customer-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:10px 0 20px}
body[data-app="admin"] .customer-detail-grid>div{padding:12px;border:1px solid var(--admin-border,#e2dfdd);border-radius:10px;background:var(--admin-surface-soft,#f7f5f3)}
@media(max-width:700px){body[data-app="admin"] .customer-detail-grid{grid-template-columns:1fr}}

/* Storefront-first admin context */
body[data-app="admin"] .store-context {
  margin: 2px 2px 16px;
  padding: 13px 12px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
body[data-app="admin"] .store-context-label {
  margin-bottom: 7px;
  color: #78869a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
body[data-app="admin"] #sidebarWebsiteSwitcher select {
  width: 100%;
  min-height: 40px;
  padding: 0 32px 0 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  background: #24324a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  outline: none;
}
body[data-app="admin"] #sidebarWebsiteSwitcher select:focus {
  border-color: #6f8df7;
  box-shadow: 0 0 0 3px rgba(111,141,247,.15);
}
body[data-app="admin"] .store-context-domain {
  margin-top: 7px;
  padding: 0 2px;
  overflow: hidden;
  color: #8290a4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-app="admin"] .current-store-topbar {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  background: var(--admin-surface-soft);
}
body[data-app="admin"] .current-store-name {
  max-width: 220px;
  overflow: hidden;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-app="admin"] .store-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}
body[data-app="admin"] .store-context-banner h2 { margin: 2px 0 4px; }

/* Storefront catalog UX */
.catalog-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.catalog-sidebar { position:sticky; top:108px; }
.catalog-sidebar-inner { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow-small); }
.sidebar-block > strong { display:block; margin-bottom:10px; font-size:13px; }
.sidebar-category-list { display:flex; flex-direction:column; gap:3px; }
.sidebar-category { padding:9px 10px; border-radius:10px; color:var(--muted); font-size:13px; }
.sidebar-category:hover { background:var(--surface-soft); color:var(--text); }
.sidebar-category.active { background:var(--primary); color:#fff; font-weight:750; }
.catalog-main { min-width:0; }
.category-assignment { margin:12px 0 18px; padding:14px; border:1px solid var(--admin-border, var(--border)); border-radius:12px; background:var(--admin-surface-soft, var(--surface-soft)); }

@media (max-width: 850px) {
  .catalog-layout { grid-template-columns:1fr; }
  .catalog-sidebar { position:relative; top:auto; }
  .catalog-sidebar-inner { overflow-x:auto; }
  .sidebar-category-list { flex-direction:row; overflow-x:auto; padding-bottom:2px; }
  .sidebar-category { flex:0 0 auto; white-space:nowrap; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .header-inner { width:calc(100% - 20px); min-height:64px; gap:8px; }
  .brand { min-width:0; flex:1; }
  .brand strong { font-size:13px; }
  .brand small { font-size:8px; }
  .brand-mark { width:32px; height:32px; }
  .store-nav { position:absolute; left:10px; right:10px; top:60px; display:none; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
  .store-nav.open { display:flex; flex-direction:column; }
  .header-tools { gap:0; }
  .tool-btn { min-width:38px; }
  .container { width:calc(100% - 24px); padding:28px 0; }
  .product-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .product-card { border-radius:13px; }
  .filter-grid { grid-template-columns:1fr; }
  .filter-panel { padding:13px; }
  .filter-field select[multiple] { min-height:92px; }
  .hero { padding:36px 18px; min-height:420px; }
  .hero h1 { font-size:40px; }
  .hero-art { display:none; }
  .trust-strip { grid-template-columns:1fr 1fr; width:calc(100% - 24px); }
  .trust-strip > div:nth-child(2) { border-right:0; }
  .trust-strip > div { padding:13px; }
  .section-head { align-items:flex-start; }
  .catalog-sidebar-inner { padding:10px; }
}

/* ================================================================
   v13.2 UX refinement — storefront + admin responsive system
   ================================================================ */
body[data-app="customer"] { overflow-x:hidden; }
body[data-app="customer"] .container { max-width:1240px; }
body[data-app="customer"] .catalog-layout { grid-template-columns:230px minmax(0,1fr); gap:28px; }
body[data-app="customer"] .catalog-sidebar-inner { position:sticky; top:92px; }
body[data-app="customer"] .catalog-main { min-width:0; }
body[data-app="customer"] .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body[data-app="customer"] .filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body[data-app="customer"] .filter-field { min-width:0; }
body[data-app="customer"] .filter-field select,
body[data-app="customer"] .filter-field input { width:100%; min-width:0; }
body[data-app="customer"] .filter-field select[multiple] { min-height:110px; }
body[data-app="customer"] .section-head { gap:18px; }
body[data-app="customer"] .product-card-media { overflow:hidden; }
body[data-app="customer"] .product-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
body[data-app="customer"] .product-card-actions .quick-add-btn { flex:1 1 120px; }
body[data-app="customer"] .search-wrap { display:flex; gap:8px; }
body[data-app="customer"] .search-wrap input { min-width:0; }
body[data-app="customer"] .search-wrap button { flex:0 0 auto; }

/* Keep catalog transitions in-place instead of moving the viewport. */
body[data-app="customer"] #catalogResults { scroll-margin-top:100px; }
body[data-app="customer"] .catalog-sidebar { align-self:start; }

@media (max-width: 1020px) {
  body[data-app="customer"] .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-app="customer"] .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-app="customer"] .catalog-layout { grid-template-columns:190px minmax(0,1fr); gap:18px; }
}

@media (max-width: 850px) {
  body[data-app="customer"] .store-header { position:sticky; top:0; z-index:50; }
  body[data-app="customer"] .luxury-header { padding:8px 12px; }
  body[data-app="customer"] .luxury-brand { gap:8px; }
  body[data-app="customer"] .luxury-brand .brand-mark { display:flex; flex:0 0 42px; width:42px;height:42px; }
  body[data-app="customer"] .luxury-brand strong { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body[data-app="customer"] .header-tools { flex:0 0 auto; }
  body[data-app="customer"] .mobile-menu { flex:0 0 38px; width:38px; height:38px; }
  body[data-app="customer"] .catalog-layout { display:block; }
  body[data-app="customer"] .catalog-sidebar { position:sticky; top:67px; z-index:30; margin:0 -2px 14px; }
  body[data-app="customer"] .catalog-sidebar-inner { position:static; padding:10px; border-radius:12px; box-shadow:0 5px 18px rgba(80,56,45,.07); }
  body[data-app="customer"] .sidebar-block > strong { display:none; }
  body[data-app="customer"] .sidebar-category-list { gap:7px; padding:1px 1px 2px; overflow-x:auto; scrollbar-width:none; }
  body[data-app="customer"] .sidebar-category-list::-webkit-scrollbar { display:none; }
  body[data-app="customer"] .sidebar-category { padding:9px 13px; border:1px solid var(--border); background:var(--surface); border-radius:999px; }
  body[data-app="customer"] .sidebar-category.active { border-color:var(--primary); }
  body[data-app="customer"] .catalog-main .filter-panel { margin-bottom:14px; }
  body[data-app="customer"] .filter-grid { grid-template-columns:1fr 1fr; }
  body[data-app="customer"] .filter-field select[multiple] { min-height:88px; }
  body[data-app="customer"] .hero-image-panel { min-height:540px; }
}

@media (max-width: 600px) {
  body[data-app="customer"] .announcement-bar { min-height:27px; font-size:8px; letter-spacing:.09em; text-align:center; }
  body[data-app="customer"] .luxury-header { min-height:60px; }
  body[data-app="customer"] .luxury-brand strong { font-size:11px; letter-spacing:.07em; }
  body[data-app="customer"] .header-tools .tool-btn { width:32px;height:32px; }
  body[data-app="customer"] .header-tools .tool-btn svg { width:18px;height:18px; }
  body[data-app="customer"] .container { width:calc(100% - 24px); padding-top:22px; padding-bottom:30px; }
  body[data-app="customer"] .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
  body[data-app="customer"] .section-head h1 { font-size:30px; line-height:1.05; }
  body[data-app="customer"] .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; }
  body[data-app="customer"] .product-card-media { aspect-ratio:1/1.08; }
  body[data-app="customer"] .product-info { padding-top:10px; }
  body[data-app="customer"] .product-info h3 { font-size:15px; line-height:1.25; }
  body[data-app="customer"] .variant-card-name { font-size:10px; }
  body[data-app="customer"] .product-card-actions .btn { min-height:38px; padding:8px 10px; font-size:10px; }
  body[data-app="customer"] .filter-grid { grid-template-columns:1fr; gap:9px; }
  body[data-app="customer"] .filter-panel { padding:12px; border:1px solid var(--border); background:var(--surface); border-radius:12px; }
  body[data-app="customer"] .filter-panel .actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  body[data-app="customer"] .filter-panel .actions .btn { width:100%; }
  body[data-app="customer"] .luxury-search { padding:0; }
  body[data-app="customer"] .search-wrap { display:grid; grid-template-columns:1fr auto; }
  body[data-app="customer"] .search-wrap input { grid-column:1/-1; }
  body[data-app="customer"] .search-wrap button { width:100%; }
  body[data-app="customer"] .hero-image-panel { min-height:500px; background-position:62% center; }
  body[data-app="customer"] .hero-editorial-copy { width:calc(100% - 30px); margin-left:15px; padding:40px 0; }
  body[data-app="customer"] .hero-editorial-copy h1 { font-size:42px; line-height:.98; max-width:330px; }
  body[data-app="customer"] .hero-editorial-copy p { font-size:13px; line-height:1.65; max-width:320px; }
  body[data-app="customer"] .luxury-btn { min-width:0; width:100%; max-width:270px; }
  body[data-app="customer"] .luxury-banner { margin:38px auto; padding:28px 20px; min-height:0; }
  body[data-app="customer"] .luxury-banner h2 { font-size:28px; line-height:1.1; }
  body[data-app="customer"] .cart-layout { grid-template-columns:1fr; }
  body[data-app="customer"] .cart-item { grid-template-columns:78px minmax(0,1fr); gap:11px; }
  body[data-app="customer"] .cart-line-total { grid-column:2; text-align:left; }
  body[data-app="customer"] .summary { position:static; }
  body[data-app="customer"] .auth-layout { grid-template-columns:1fr; }
  body[data-app="customer"] .auth-art { min-height:250px; padding:30px 22px; }
  body[data-app="customer"] .auth-card { padding:22px; }
}

/* Admin: predictable desktop + compact mobile workspace */
body[data-app="admin"] .admin-shell { display:flex; }
body[data-app="admin"] .sidebar { overflow-y:auto; }
body[data-app="admin"] .admin-main { min-height:100dvh; }
body[data-app="admin"] .top-actions { justify-content:flex-end; }
body[data-app="admin"] .admin-content { box-sizing:border-box; }
body[data-app="admin"] .admin-panel { overflow:hidden; }
body[data-app="admin"] .toolbar { gap:10px; }
body[data-app="admin"] .toolbar > * { min-width:0; }

@media (max-width: 900px) {
  body[data-app="admin"] .sidebar { position:sticky; top:0; z-index:100; width:100%; height:auto; margin:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.07); box-shadow:0 5px 18px rgba(23,32,51,.12); }
  body[data-app="admin"] .admin-main { margin-left:0; width:100%; }
  body[data-app="admin"] .admin-brand { padding:6px 8px 8px; }
  body[data-app="admin"] .store-context { margin:0 0 8px; padding:8px; }
  body[data-app="admin"] .store-context-domain { display:none; }
  body[data-app="admin"] .nav-group { display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:3px; }
  body[data-app="admin"] .nav-group::-webkit-scrollbar { display:none; }
  body[data-app="admin"] .nav-group-label { display:none; }
  body[data-app="admin"] .nav-item { flex:0 0 auto; min-height:36px; padding:8px 11px; font-size:11px; white-space:nowrap; }
  body[data-app="admin"] .admin-topbar { position:sticky; top:0; z-index:90; min-height:64px; padding:8px 14px; gap:8px; }
  body[data-app="admin"] .top-actions { width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  body[data-app="admin"] .top-actions::-webkit-scrollbar { display:none; }
  body[data-app="admin"] .current-store-topbar,
  body[data-app="admin"] .top-actions .secondary-btn,
  body[data-app="admin"] #adminRoleBadge { flex:0 0 auto; }
  body[data-app="admin"] .admin-content { padding:18px 14px 35px; }
  body[data-app="admin"] .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-app="admin"] .admin-panel { padding:15px; border-radius:11px; }
  body[data-app="admin"] .toolbar { align-items:flex-start; flex-direction:column; }
  body[data-app="admin"] .toolbar .actions { width:100%; }
  body[data-app="admin"] .toolbar .actions > * { flex:1 1 auto; }
}

@media (max-width: 560px) {
  body[data-app="admin"] .admin-topbar { display:block; }
  body[data-app="admin"] .admin-topbar > div:first-child { margin-bottom:7px; }
  body[data-app="admin"] .top-actions { width:calc(100vw - 28px); }
  body[data-app="admin"] .kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
  body[data-app="admin"] .kpi { padding:13px; }
  body[data-app="admin"] .kpi .value { font-size:22px; }
  body[data-app="admin"] .table-wrap { border-radius:8px; }
  body[data-app="admin"] table { min-width:620px; }
  body[data-app="admin"] .modal { width:calc(100vw - 18px); max-height:92dvh; padding:16px; border-radius:12px; }
  body[data-app="admin"] .modal-head { top:-16px; margin:-16px -16px 16px; padding:14px 16px; }
  body[data-app="admin"] .actions { width:100%; }
  body[data-app="admin"] .actions .btn,
  body[data-app="admin"] .actions .secondary-btn { min-height:40px; }
}

/* v13.3 storefront stock + mobile filters + richer admin detail */
.stock-pill,
.detail-stock { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:5px 9px; border-radius:999px; font-size:10px; line-height:1.2; font-weight:800; letter-spacing:.02em; }
.stock-in_stock { background:#e4f0e2; color:#2f6540; }
.stock-low_stock { background:#f6edd7; color:#806018; }
.stock-out_of_stock { background:#f2e2e0; color:#8a4038; }
.product-card-media .stock-pill { position:absolute; left:10px; bottom:10px; z-index:3; }
.detail-stock { margin:10px 0 14px; }

.filter-head-actions { display:flex; align-items:center; gap:10px; }
.filter-toggle { display:none; min-height:36px; padding:0 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-soft); color:var(--text); font-size:12px; font-weight:800; }

body[data-app="admin"] .complete-store-settings { padding:0; overflow:hidden; }
body[data-app="admin"] .settings-section { padding:24px; border-bottom:1px solid var(--admin-border,#e2dfdd); }
body[data-app="admin"] .settings-section:last-of-type { border-bottom:0; }
body[data-app="admin"] .settings-card { margin-top:14px; padding:16px; border:1px solid var(--admin-border,#e2dfdd); border-radius:12px; background:var(--admin-surface-soft,#f7f5f3); }
body[data-app="admin"] .settings-card h4 { margin:0 0 12px; }
body[data-app="admin"] .settings-row { display:grid; grid-template-columns:minmax(0,1fr) auto 90px; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--admin-border,#e2dfdd); }
body[data-app="admin"] .settings-row:last-child { border-bottom:0; }
body[data-app="admin"] .settings-order { width:90px; min-height:40px; box-sizing:border-box; padding:0 10px; border:1px solid var(--admin-border,#e2dfdd); border-radius:9px; background:var(--admin-surface,#fff); }
body[data-app="admin"] .settings-grid-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
body[data-app="admin"] .theme-color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body[data-app="admin"] .settings-savebar { position:sticky; bottom:0; z-index:5; display:flex; justify-content:flex-end; gap:10px; padding:14px 24px; border-top:1px solid var(--admin-border,#e2dfdd); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }
body[data-app="admin"] .customer-360 { min-width:min(760px, calc(100vw - 40px)); }
body[data-app="admin"] .customer-360-hero { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
body[data-app="admin"] .customer-360-hero h2 { margin:4px 0; }
body[data-app="admin"] .customer-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body[data-app="admin"] .customer-info-card { padding:12px; border:1px solid var(--admin-border,#e2dfdd); border-radius:10px; background:var(--admin-surface-soft,#f7f5f3); }
body[data-app="admin"] .customer-info-card p { margin:6px 0 0; line-height:1.55; }
body[data-app="admin"] .customer-custom-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body[data-app="admin"] .customer-custom-data > div { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--admin-border,#e2dfdd); border-radius:9px; background:var(--admin-surface-soft,#f7f5f3); }
body[data-app="admin"] .customer-custom-data span { color:var(--admin-muted,#72706d); }
body[data-app="admin"] .customer-order-card { padding:13px; margin:8px 0; border:1px solid var(--admin-border,#e2dfdd); border-radius:11px; background:var(--admin-surface,#fff); }
body[data-app="admin"] .order-mini-items { margin:9px 0; border-top:1px solid var(--admin-border,#e2dfdd); border-bottom:1px solid var(--admin-border,#e2dfdd); }
body[data-app="admin"] .order-mini-items > div, body[data-app="admin"] .order-line { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--admin-border,#e2dfdd); }
body[data-app="admin"] .order-mini-items > div:last-child { border-bottom:0; }
body[data-app="admin"] .order-status-banner { margin-bottom:12px; padding:14px; border-radius:11px; background:var(--admin-surface-soft,#f7f5f3); border:1px solid var(--admin-border,#e2dfdd); }
body[data-app="admin"] .order-status-banner strong { display:block; margin:4px 0; font-size:20px; text-transform:capitalize; }
body[data-app="admin"] .status-history-item { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--admin-border,#e2dfdd); }
body[data-app="admin"] .status-history-item:last-child { border-bottom:0; }

@media (max-width: 700px) {
  .filter-head-actions { gap:6px; }
  .filter-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .filter-panel:not(.open) .filter-grid { display:none; }
  .filter-panel:not(.open) { padding-bottom:10px; }
  .filter-panel:not(.open) .filter-head { margin-bottom:0; }
  .filter-panel.open .filter-toggle { background:var(--primary); color:#fff; border-color:var(--primary); }
  .stock-pill { font-size:9px; padding:4px 7px; }
  body[data-app="admin"] .settings-section { padding:16px; }
  body[data-app="admin"] .settings-grid-checks,
  body[data-app="admin"] .theme-color-grid,
  body[data-app="admin"] .customer-info-grid,
  body[data-app="admin"] .customer-custom-data { grid-template-columns:1fr; }
  body[data-app="admin"] .settings-row { grid-template-columns:1fr auto; }
  body[data-app="admin"] .settings-order { grid-column:2; grid-row:1; width:70px; }
  body[data-app="admin"] .customer-360 { min-width:0; }
  body[data-app="admin"] .customer-360-hero { flex-direction:column; }
  body[data-app="admin"] .settings-savebar { padding:12px 16px; }
}


/* =========================================================
   MOBILE APP EXPERIENCE — storefront only
   Mobile is intentionally a separate interaction model from desktop.
   ========================================================= */
body[data-app="customer"] { padding-bottom: 0; }
.mobile-app-nav, .mobile-drawer-backdrop { display:none; }

@media (max-width: 700px) {
  html { scroll-padding-top: 68px; }
  body[data-app="customer"] { padding-bottom: calc(74px + env(safe-area-inset-bottom)); background: #fbf8f5; }
  body[data-app="customer"] .announcement-bar { display:none; }
  body[data-app="customer"] .store-header {
    position: sticky; top: 0; z-index: 80; padding: 0;
    border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  body[data-app="customer"] .luxury-header {
    width:100%; min-height:62px; height:62px; padding:0 12px; gap:8px; flex-wrap:nowrap;
  }
  body[data-app="customer"] .mobile-menu { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%; font-size:18px; }
  body[data-app="customer"] .mobile-menu:active { background:var(--surface-soft); }
  body[data-app="customer"] .luxury-brand { min-width:0; flex:1; justify-content:flex-start; gap:8px; }
  body[data-app="customer"] .luxury-brand .brand-mark { display:flex; flex:0 0 40px; width:40px;height:40px; }
  body[data-app="customer"] .luxury-brand strong { font-size:12px; letter-spacing:.16em; white-space:nowrap; }
  body[data-app="customer"] .luxury-brand small { display:none; }
  body[data-app="customer"] .store-nav {
    position:fixed; left:12px; right:12px; top:70px; z-index:95; display:none; margin:0; padding:8px;
    border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:2px;
  }
  body[data-app="customer"] .store-nav.open { display:flex; }
  body[data-app="customer"] .store-nav a { padding:13px 14px; border-radius:10px; font-size:11px; letter-spacing:.08em; }
  body[data-app="customer"] .store-nav a:after { display:none; }
  body[data-app="customer"] .store-nav a:active { background:var(--surface-soft); }
  body[data-app="customer"] .header-tools { gap:0; }
  body[data-app="customer"] .header-tools .tool-btn { width:36px; height:36px; }
  body[data-app="customer"] .header-tools .tool-btn[data-route="/account"],
  body[data-app="customer"] .header-tools .tool-btn[data-route="/favourites"] { display:none; }
  body[data-app="customer"] .header-tools .bag-tool { display:grid; }
  body[data-app="customer"] .search-bar-row { padding:7px 12px 10px; background:var(--surface); }
  body[data-app="customer"] .luxury-search input { height:44px; padding-right:74px; border-radius:13px; }
  body[data-app="customer"] .luxury-search button { height:34px; right:5px; border-radius:9px; }

  body[data-app="customer"] #app { min-height:calc(100dvh - 62px); }
  body[data-app="customer"] .container { width:100%; max-width:none; padding:20px 14px; }
  body[data-app="customer"] .hero { min-height:0; }
  body[data-app="customer"] .luxury-hero { min-height:0; margin:0; }
  body[data-app="customer"] .hero-image-panel { min-height:430px; border-radius:0; background-position:center; }
  body[data-app="customer"] .hero-overlay { background:linear-gradient(180deg, transparent 30%, color-mix(in srgb,var(--bg) 88%,transparent) 100%); }
  body[data-app="customer"] .hero-editorial-copy { width:calc(100% - 34px); margin:0 17px; padding:0 0 34px; align-self:flex-end; }
  body[data-app="customer"] .hero-editorial-copy h1 { max-width:330px; margin:10px 0; font-size:39px; line-height:.98; }
  body[data-app="customer"] .hero-editorial-copy p { max-width:330px; font-size:13px; line-height:1.55; margin:0 0 14px; }
  body[data-app="customer"] .luxury-btn { width:auto; min-width:0; min-height:45px; padding:12px 18px; }
  body[data-app="customer"] .editorial-intro { padding:30px 20px 18px; text-align:left; }
  body[data-app="customer"] .editorial-intro h2 { font-size:29px; margin:6px 0 8px; }
  body[data-app="customer"] .editorial-intro p { font-size:13px; line-height:1.65; }
  body[data-app="customer"] .section-head { margin-bottom:12px; gap:8px; align-items:end; }
  body[data-app="customer"] .section-head h2 { font-size:28px; line-height:1.05; }
  body[data-app="customer"] .result-count { font-size:11px; white-space:nowrap; }
  body[data-app="customer"] .category-row { gap:8px; padding:2px 0 5px; margin:0 -14px; padding-left:14px; padding-right:14px; }
  body[data-app="customer"] .category-chip { min-height:39px; display:inline-flex; align-items:center; padding:0 14px; font-size:9px; border-radius:999px; background:var(--surface); }

  /* Shop header: app toolbar, not desktop sidebar */
  body[data-app="customer"] .catalog-shell { padding-top:12px; }
  body[data-app="customer"] .catalog-shell > .section-head { padding:0 2px; }
  body[data-app="customer"] .catalog-layout { display:block; }
  body[data-app="customer"] .catalog-sidebar { display:none; }
  body[data-app="customer"] .catalog-main { min-width:0; }
  body[data-app="customer"] .catalog-main:before { content:""; display:block; }
  body[data-app="customer"] .filter-panel {
    margin:0 0 14px; padding:0; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:none;
  }
  body[data-app="customer"] .filter-head { min-height:58px; margin:0; padding:10px 12px; }
  body[data-app="customer"] .filter-head strong { font-size:13px; }
  body[data-app="customer"] .filter-head span { font-size:10px; max-width:190px; line-height:1.3; }
  body[data-app="customer"] .filter-head-actions { margin-left:auto; }
  body[data-app="customer"] .filter-toggle { min-height:38px; border-radius:10px; padding:0 14px; font-size:11px; background:var(--primary); color:#fff; border-color:var(--primary); }
  body[data-app="customer"] .filter-head-actions .text-link { font-size:11px; }
  body[data-app="customer"] .filter-grid { display:none; }
  body[data-app="customer"] .filter-panel.open .filter-grid {
    display:grid; grid-template-columns:1fr; gap:10px; padding:14px 12px 8px; max-height:calc(100dvh - 170px); overflow:auto;
  }
  body[data-app="customer"] .filter-panel.open {
    position:fixed; left:0; right:0; bottom:0; z-index:220; margin:0; border-radius:20px 20px 0 0;
    box-shadow:0 -20px 60px rgba(45,33,27,.18); max-height:86dvh; overflow:hidden; background:var(--surface);
    padding-bottom:env(safe-area-inset-bottom);
  }
  body[data-app="customer"] .filter-panel.open .filter-head { border-bottom:1px solid var(--border); }
  body[data-app="customer"] .filter-panel.open .filter-toggle { background:var(--surface-soft); color:var(--text); border-color:var(--border); }
  body[data-app="customer"] .filter-field input, body[data-app="customer"] .filter-field select { min-height:47px; border-radius:12px; font-size:14px; }
  body[data-app="customer"] .filter-check { min-height:47px; border-radius:12px; padding:0 12px; }
  body[data-app="customer"] .filter-check span { font-size:12px; }
  body[data-app="customer"] .mobile-filter-actions { display:block; padding:8px 12px 12px; background:var(--surface); border-top:1px solid var(--border); }
  body[data-app="customer"] .mobile-filter-actions .btn { width:100%; min-height:48px; }
  body[data-app="customer"] .mobile-drawer-backdrop { display:none; }
  body[data-app="customer"].mobile-filter-open .mobile-drawer-backdrop { display:block; position:fixed; inset:0; z-index:210; background:rgba(42,31,27,.34); backdrop-filter:blur(2px); }
  body[data-app="customer"].mobile-filter-open { overflow:hidden; }

  body[data-app="customer"] .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  body[data-app="customer"] .product-card { border-radius:14px; border-color:#eaded7; box-shadow:none; }
  body[data-app="customer"] .product-card:hover { transform:none; box-shadow:none; }
  body[data-app="customer"] .product-card-media { aspect-ratio:1 / 1.08; }
  body[data-app="customer"] .product-card-media .heart-btn { width:34px; height:34px; right:8px; top:8px; font-size:17px; }
  body[data-app="customer"] .product-card-media .stock-pill { left:8px; bottom:8px; max-width:calc(100% - 16px); }
  body[data-app="customer"] .sale-pill { left:8px; top:8px; padding:5px 7px; font-size:8px; }
  body[data-app="customer"] .variant-image-details { display:none; }
  body[data-app="customer"] .product-info { padding:10px 9px 10px; }
  body[data-app="customer"] .product-info .eyebrow { margin-bottom:3px; font-size:8px; }
  body[data-app="customer"] .product-info h3 { font-size:13px; margin:2px 0 3px; line-height:1.2; }
  body[data-app="customer"] .variant-card-name { font-size:9px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body[data-app="customer"] .product-bottom { margin-top:6px; }
  body[data-app="customer"] .price { font-size:14px; font-weight:750; }
  body[data-app="customer"] .old-price { font-size:10px; }
  body[data-app="customer"] .product-card-actions { grid-template-columns:1fr; margin-top:8px; gap:0; }
  body[data-app="customer"] .product-card-actions .quick-buy-btn { display:none; }
  body[data-app="customer"] .product-card-actions .btn { min-height:37px; border-radius:10px; font-size:9px; letter-spacing:.05em; }
  body[data-app="customer"] .stock-pill { font-size:8px; padding:4px 6px; }

  /* Mobile product detail = app product screen */
  body[data-app="customer"] .detail-container { padding:0 0 calc(86px + env(safe-area-inset-bottom)); }
  body[data-app="customer"] .detail-container > .back-link { position:absolute; top:76px; left:12px; z-index:5; width:38px; height:38px; display:grid; place-items:center; overflow:hidden; white-space:nowrap; text-indent:-999px; border-radius:50%; background:rgba(255,255,255,.88); box-shadow:0 5px 18px rgba(60,40,30,.12); }
  body[data-app="customer"] .detail-container > .back-link:before { content:"‹"; text-indent:0; font-size:28px; line-height:1; }
  body[data-app="customer"] .product-detail { display:block; }
  body[data-app="customer"] .detail-gallery { margin:0; }
  body[data-app="customer"] .detail-image { aspect-ratio:1/1.08; min-height:0; border-radius:0; overflow:hidden; }
  body[data-app="customer"] .detail-image img { width:100%; height:100%; object-fit:cover; }
  body[data-app="customer"] .thumb-row { position:absolute; margin-top:-46px; left:50%; transform:translateX(-50%); z-index:4; padding:4px 6px; border-radius:99px; background:rgba(255,255,255,.75); backdrop-filter:blur(8px); }
  body[data-app="customer"] .thumb { width:32px; height:32px; border-radius:7px; }
  body[data-app="customer"] .detail-copy { padding:20px 16px 0; }
  body[data-app="customer"] .detail-title-row h1 { font-size:29px; line-height:1.05; }
  body[data-app="customer"] .detail-description { font-size:13px; line-height:1.65; }
  body[data-app="customer"] .detail-price { font-size:22px; }
  body[data-app="customer"] .premium-buy-actions { position:fixed; left:0; right:0; bottom:0; z-index:100; margin:0; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:rgba(255,253,252,.96); border-top:1px solid var(--border); box-shadow:0 -8px 30px rgba(60,40,30,.1); backdrop-filter:blur(14px); }
  body[data-app="customer"] .premium-buy-actions .qty { display:none; }
  body[data-app="customer"] .premium-buy-actions .luxury-add, body[data-app="customer"] .premium-buy-actions .luxury-buy { min-height:49px; border-radius:12px; }
  body[data-app="customer"] .product-details-below { margin:30px 16px 0; padding-top:24px; }
  body[data-app="customer"] .detail-info-grid { margin:25px 16px; grid-template-columns:1fr; }

  /* App-style cart and checkout */
  body[data-app="customer"] .cart-layout { display:block; }
  body[data-app="customer"] .cart-list { display:grid; gap:8px; }
  body[data-app="customer"] .cart-item { grid-template-columns:78px minmax(0,1fr); padding:10px; border-radius:13px; }
  body[data-app="customer"] .cart-item-img { width:78px; height:90px; }
  body[data-app="customer"] .cart-line-total { grid-column:2; font-size:14px; }
  body[data-app="customer"] .summary { margin-top:12px; border-radius:15px; }

  /* Native-like bottom navigation */
  body[data-app="customer"] .mobile-app-nav {
    position:fixed; display:grid; grid-template-columns:repeat(5,1fr); left:0; right:0; bottom:0; z-index:150;
    min-height:64px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:rgba(255,253,252,.97);
    border-top:1px solid var(--border); box-shadow:0 -8px 28px rgba(60,40,30,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  }
  body[data-app="customer"] .mobile-app-nav a { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:#948780; border-radius:11px; }
  body[data-app="customer"] .mobile-app-nav a.active { color:var(--primary); background:var(--surface-soft); }
  body[data-app="customer"] .mobile-nav-icon { font-size:19px; line-height:21px; }
  body[data-app="customer"] .mobile-app-nav small { font-size:8px; font-weight:750; letter-spacing:.03em; }
  body[data-app="customer"] .mobile-cart-nav b { position:absolute; top:2px; margin-left:18px; min-width:15px; height:15px; display:grid; place-items:center; padding:0 3px; border-radius:99px; background:var(--primary); color:#fff; font-size:8px; }
  body[data-app="customer"] .footer { padding-bottom:95px; }

  /* Keep mobile pages from looking like desktop forms */
  body[data-app="customer"] .form-card, body[data-app="customer"] .auth-card, body[data-app="customer"] .legal-card { border-radius:16px; padding:18px; }
  body[data-app="customer"] .field input, body[data-app="customer"] .field select, body[data-app="customer"] .field textarea { min-height:47px; border-radius:12px; }
}

/* Admin workflow / Customer 360 finishing details */
body[data-app="admin"] .customer-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
body[data-app="admin"] .customer-detail-grid > div { padding:12px; border:1px solid var(--admin-border,#e2e7ef); border-radius:10px; background:var(--admin-surface-soft,#f7f8fa); }
body[data-app="admin"] .customer-detail-grid p { margin:4px 0 0; font-weight:650; }
body[data-app="admin"] .order-badges { display:flex; gap:4px; justify-content:flex-end; margin-top:5px; flex-wrap:wrap; }
body[data-app="admin"] .customer-order-more { margin-top:10px; border-top:1px solid var(--admin-border,#e2e7ef); padding-top:8px; }
body[data-app="admin"] .customer-order-more summary { cursor:pointer; color:var(--admin-primary,#526fd6); font-size:12px; font-weight:700; }
body[data-app="admin"] .customer-order-address { margin-top:8px; padding:10px; border-radius:9px; background:var(--admin-surface-soft,#f7f8fa); }
body[data-app="admin"] .customer-order-address p { margin:5px 0 0; line-height:1.55; }
body[data-app="admin"] .transition-steps { display:flex; gap:5px; overflow:auto; padding:2px 0 12px; }
body[data-app="admin"] .transition-step { flex:1 0 auto; padding:7px 9px; border:1px solid var(--admin-border,#e2e7ef); border-radius:999px; background:var(--admin-surface-soft,#f7f8fa); color:var(--admin-muted,#697586); font-size:10px; text-align:center; text-transform:capitalize; }
body[data-app="admin"] .transition-step.current { background:#e7edf9; color:var(--admin-primary-dark,#3f59b4); border-color:#cbd7f4; font-weight:800; }
body[data-app="admin"] .transition-step.available { border-color:#bcd8c8; background:#edf8f0; color:#3c7655; font-weight:700; }
@media (max-width:700px) {
  body[data-app="admin"] .customer-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* Cart inline updates: never blank/repaint the whole page for quantity changes. */
body[data-app="customer"] .cart-item.is-updating { opacity: .65; pointer-events: none; transition: opacity .15s ease; }
body[data-app="customer"] .cart-item.is-removing { opacity: 0; transform: translateX(12px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transition: opacity .18s ease, transform .18s ease, max-height .2s ease, margin .2s ease, padding .2s ease; }
body[data-app="customer"] #checkoutForm select[name="state"] { width: 100%; }
@media (max-width:640px) {
  body[data-app="customer"] .cart-controls .qty { min-width: 126px; }
  body[data-app="customer"] .cart-controls .qty button { width: 38px; height: 38px; }
  body[data-app="customer"] .cart-controls .qty input { width: 48px; height: 38px; }
}

/* Checkout bag / inventory warning */
.checkout-bag-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.text-link{font-size:.85rem;text-decoration:underline}.checkout-bag-items{display:grid;gap:14px}.checkout-bag-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line,#e9e1da)}.checkout-bag-image{width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f5f1ed;display:block}.checkout-bag-image img{width:100%;height:100%;object-fit:cover}.checkout-bag-info{display:grid;gap:3px;min-width:0}.checkout-bag-info strong{font-size:.9rem}.checkout-qty{display:flex;align-items:center;gap:7px;margin-top:5px}.checkout-qty button{border:1px solid #ddd;background:#fff;border-radius:7px;min-width:28px;height:28px}.checkout-qty .text-danger{border:0;background:transparent;color:#9b4d4d;font-size:.75rem}.stock-warning{font-size:.75rem;font-weight:600;color:#a6532f}.stock-problem{background:#fff8f4;border-radius:10px;padding:10px}.checkout-stock-warning{margin:8px 0 12px}@media(max-width:700px){.checkout-bag-item{grid-template-columns:58px 1fr auto}.checkout-bag-image{width:58px;height:58px}.checkout-bag{order:-1}.checkout-bag-head h2{margin-bottom:0}.checkout-page .cart-layout{display:flex;flex-direction:column}.checkout-page .checkout-card{order:2}.checkout-page .checkout-bag{order:1}.checkout-submit{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:8;box-shadow:0 8px 24px rgba(0,0,0,.12)}}

/* v13.3 storefront polish: product metadata never overlays product imagery. */
body[data-app="customer"] .variant-card .product-card-media .stock-pill,
body[data-app="customer"] .variant-image-details { display:none !important; }
body[data-app="customer"] .variant-card-details {
  display:flex;
  flex-wrap:wrap;
  gap:5px 7px;
  margin-top:9px;
}
body[data-app="customer"] .variant-card-details span {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  max-width:100%;
}
body[data-app="customer"] .variant-card-details b { color:var(--text); font-weight:700; }
body[data-app="customer"] .product-card-stock {
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin-top:9px;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:750;
  line-height:1.2;
  background:var(--surface-soft);
  color:var(--muted);
}
body[data-app="customer"] .product-card-stock .stock-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
body[data-app="customer"] .product-card-stock.stock-in_stock { color:#34704a; background:#edf7ef; }
body[data-app="customer"] .product-card-stock.stock-low_stock { color:#9a6a25; background:#fff7e8; }
body[data-app="customer"] .product-card-stock.stock-out_of_stock { color:#9b4b42; background:#faece9; }
body[data-app="customer"] .variant-card .product-bottom { margin-top:10px; }

body[data-app="admin"] .admin-theme-preset-bar {
  display:grid;
  grid-template-columns:minmax(220px,320px) auto 1fr;
  align-items:end;
  gap:12px;
  margin-bottom:14px;
  padding:14px;
  border:1px solid var(--admin-border,#e2dfdd);
  border-radius:12px;
  background:var(--admin-surface-soft,#f7f5f3);
}
body[data-app="admin"] .admin-theme-preset-bar .field { margin:0; }
@media (max-width:700px) {
  body[data-app="customer"] .variant-card-details { gap:4px; }
  body[data-app="customer"] .variant-card-details span { font-size:9px; padding:4px 6px; }
  body[data-app="customer"] .product-card-stock { font-size:9px; }
  body[data-app="admin"] .admin-theme-preset-bar { grid-template-columns:1fr; align-items:stretch; }
}

/* Image source controls: upload and direct URL stay aligned without changing storefront/product grids. */
.image-source-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;grid-column:1/-1}
.image-source-field .field{min-width:0}
@media(max-width:700px){.image-source-field{grid-template-columns:1fr}}

/* v13.5 storefront product-grid stability fix
   Keep every card in a row equal-height and align the CTA row to the bottom,
   even when a product has variant custom fields or a longer stock label. */
body[data-app="customer"] .product-grid {
  align-items: stretch;
}
body[data-app="customer"] .product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
body[data-app="customer"] .product-card-media {
  flex: 0 0 auto;
}
body[data-app="customer"] .product-info {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}
body[data-app="customer"] .product-card .product-info > .product-card-actions {
  margin-top: auto;
}
body[data-app="customer"] .product-card-stock {
  min-height: 30px;
  display: flex;
  align-items: center;
}
body[data-app="customer"] .variant-card-details {
  min-height: 0;
}

/* Keep the desktop catalog at a predictable 3-column layout. */
@media (min-width: 1021px) {
  body[data-app="customer"] .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}


/* v13.7 mobile commerce corrections */
body[data-app="customer"] .view-all-details { border:0; background:transparent; color:var(--accent,#b96e50); padding:8px 0; cursor:pointer; text-align:left; text-decoration:underline; }
@media (max-width: 700px) {
  body[data-app="customer"] .product-card-actions { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:6px !important; }
  body[data-app="customer"] .product-card-actions .quick-buy-btn { display:inline-flex !important; }
  body[data-app="customer"] .product-card-actions .btn { min-width:0; padding:8px 5px; font-size:9px; white-space:normal; }
  body[data-app="customer"] .premium-buy-actions { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:8px !important; visibility:visible !important; }
  body[data-app="customer"] .premium-buy-actions .luxury-add, body[data-app="customer"] .premium-buy-actions .luxury-buy { display:flex !important; visibility:visible !important; min-width:0; }
  body[data-app="customer"] .detail-container { scroll-margin-top:0; }
}


/* v13.8 storefront usability fixes */
body[data-app="customer"] .applied-filters { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
body[data-app="customer"] .applied-filters-label { font-size:11px; font-weight:800; color:var(--muted); }
body[data-app="customer"] .applied-filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
body[data-app="customer"] .applied-filter-chip { display:inline-flex; gap:4px; align-items:center; padding:6px 9px; border:1px solid var(--border); border-radius:999px; background:var(--surface-soft); font-size:11px; color:var(--text); }
body[data-app="customer"] .no-applied-filters { color:var(--muted); font-size:11px; }
body[data-app="customer"] .wishlist-tool b { position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:99px; display:grid; place-items:center; background:var(--primary); color:#fff; font-size:9px; }
body[data-app="customer"] .wishlist-tool b[hidden] { display:none; }
body[data-app="customer"] .search-bar-row.open { display:block; position:relative; z-index:160; }
body[data-app="customer"] .search-bar-row.open .search-wrap { display:flex; gap:8px; }
body[data-app="customer"] .search-bar-row.open input { display:block; flex:1; min-width:0; width:100%; }
body[data-app="customer"] .search-bar-row.open button { flex:0 0 auto; }
body[data-app="customer"] #catalogResults { scroll-margin-top:18px; }
@media (max-width:700px) {
  body[data-app="customer"] .product-card-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px; }
  body[data-app="customer"] .product-card-actions .quick-buy-btn { display:inline-flex; }
  body[data-app="customer"] .product-card-actions .btn { min-width:0; padding:0 5px; font-size:8px; white-space:nowrap; }
  body[data-app="customer"] .premium-buy-actions { bottom:calc(64px + env(safe-area-inset-bottom)); z-index:180; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  body[data-app="customer"] .premium-buy-actions .luxury-add, body[data-app="customer"] .premium-buy-actions .luxury-buy { display:flex !important; width:100%; min-width:0; min-height:46px; justify-content:center; padding:0 8px; font-size:11px; }
  body[data-app="customer"] .premium-buy-actions .luxury-buy small { display:none; }
  body[data-app="customer"] .mobile-filter-actions { display:none !important; }
  body[data-app="customer"] .filter-panel.open { padding-bottom:14px; }
  body[data-app="customer"] .mobile-app-nav { z-index:190; }
  body[data-app="customer"] .detail-container { padding-bottom:calc(160px + env(safe-area-inset-bottom)); }
}

/* Customer account address management */
.address-list { display:grid; gap:12px; }
.address-card { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px; border:1px solid var(--border, #e6d8d1); border-radius:16px; background:var(--surface, #fffdfc); }
.address-card-content { min-width:0; }
.address-card-content p { overflow-wrap:anywhere; }
.address-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.address-actions .btn { min-height:38px; padding:8px 12px; }
.address-actions .danger { color:#a83232; }
.address-edit-form { margin-top:18px; padding:20px; border:1px solid var(--border, #e6d8d1); border-radius:18px; background:var(--surface, #fffdfc); }
.address-edit-form .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.address-edit-form .field { display:grid; gap:6px; }
.address-edit-form input:not([type=checkbox]) { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border, #e6d8d1); border-radius:10px; background:#fff; color:inherit; }
.address-edit-form .checkbox-row { display:flex; align-items:center; gap:10px; margin:16px 0; }
@media (max-width:640px) { .address-card { flex-direction:column; } .address-actions { justify-content:flex-start; } .address-edit-form .form-grid { grid-template-columns:minmax(0,1fr); } }
.gst-inclusive-note{display:block;margin-top:3px;font-size:.72rem;line-height:1.2;color:var(--muted,#8b7167)}

/* Final mobile search layout: input and button are siblings, never overlap. */
body[data-app="customer"] .search-bar-row.open .search-wrap { display:flex !important; align-items:stretch; gap:8px; position:relative; }
body[data-app="customer"] .search-bar-row.open .search-wrap .search-icon { display:none !important; }
body[data-app="customer"] .search-bar-row.open #searchInput { flex:1 1 auto; width:1%; min-width:0; padding-right:12px !important; position:relative; z-index:1; }
body[data-app="customer"] .search-bar-row.open #searchButton { flex:0 0 auto; position:relative; inset:auto; z-index:2; white-space:nowrap; }
@media(max-width:700px) { body[data-app="customer"] .search-bar-row.open { padding:8px 12px; } body[data-app="customer"] .search-bar-row.open #searchInput { font-size:14px; } body[data-app="customer"] .search-bar-row.open #searchButton { min-width:70px; } }

/* v14.1 checkout estimates, expandable product details, and compact search */
body[data-app="customer"] .luxury-search { position:relative; }
body[data-app="customer"] .search-bar-row.open .luxury-search { display:block !important; }
body[data-app="customer"] .search-bar-row.open .luxury-search #searchInput { width:100%; flex:none; padding-right:52px !important; min-height:46px; border:1px solid var(--border); border-radius:999px; }
body[data-app="customer"] .search-bar-row.open .luxury-search #searchButton { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; min-width:38px; height:38px; padding:8px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:#fff; }
body[data-app="customer"] #searchButton svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body[data-app="customer"] .search-suggestions { position:absolute; z-index:240; top:calc(100% + 5px); left:0; right:0; max-height:min(60vh,360px); overflow:auto; background:var(--surface,#fff); border:1px solid var(--border,#e5d9d1); box-shadow:0 12px 28px rgba(0,0,0,.12); }
body[data-app="customer"] .search-suggestions[hidden] { display:none !important; }
body[data-app="customer"] .search-suggestion { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; border:0; border-bottom:1px solid var(--border,#eee); text-align:left; background:transparent; color:var(--text); cursor:pointer; }
body[data-app="customer"] .search-suggestion:hover, body[data-app="customer"] .search-suggestion:focus { background:var(--surface-soft,#f8f2ee); }
body[data-app="customer"] .search-suggestion-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body[data-app="customer"] .search-suggestion-price { white-space:nowrap; color:var(--muted); font-size:.82rem; }
body[data-app="customer"] .search-suggestion-all { font-weight:700; justify-content:center; }
body[data-app="customer"] .search-suggestion-empty { padding:14px; color:var(--muted); font-size:.9rem; }
body[data-app="customer"] .view-all-details { display:inline-flex; margin:12px 0 4px; cursor:pointer; }
body[data-app="customer"] #productDetails[hidden] { display:none !important; }
body[data-app="customer"] #productDetails { scroll-margin-top:20px; }
body[data-app="customer"] .checkout-bag #checkoutShippingNote { margin-top:-4px; }
body[data-app="customer"] .checkout-bag #checkoutShippingAmount { text-align:right; }
@media(max-width:700px) {
  body[data-app="customer"] .search-bar-row.open { padding:8px 12px; }
  body[data-app="customer"] .search-bar-row.open .luxury-search { width:100%; }
  body[data-app="customer"] .search-bar-row.open .luxury-search #searchInput { font-size:14px; }
}

/* Storefront hero media: render remote image URLs as an actual image element so
   signed URLs and query-string URLs load consistently across browsers. */
body[data-app="customer"] .hero-background-image { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
body[data-app="customer"] .hero-overlay { z-index:1; }

/* v14.5: compact mobile checkout summary and accessible suggestions */
body[data-app="customer"] .checkout-bag-items[hidden] { display:none !important; }
body[data-app="customer"] .checkout-bag-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
body[data-app="customer"] .checkout-bag-toggle { border:0; background:transparent; color:var(--primary); cursor:pointer; padding:3px; }
body[data-app="customer"] .checkout-submit { width:100%; margin-top:14px; }
body[data-app="customer"] .search-wrap { overflow:visible; }
body[data-app="customer"] .search-suggestions { display:block; }
body[data-app="customer"] .search-suggestion-empty { display:block; min-height:40px; }

/* v14.7: clickable search suggestion links and larger storefront logo */
body[data-app="customer"] .search-suggestion[href^="#/product/"] { text-decoration:none; }
body[data-app="customer"] .luxury-brand .brand-logo { width:58px; height:58px; border-radius:12px; }
@media(max-width:700px) { body[data-app="customer"] .luxury-brand .brand-logo { width:42px; height:42px; } }


/* v15.2: checkout rows must keep price and product/SKU text in separate, shrink-safe grid areas. */
body[data-app="customer"] .checkout-bag-item { grid-template-columns: 64px minmax(0, 1fr) minmax(76px, auto); }
body[data-app="customer"] .checkout-bag-info { min-width: 0; overflow-wrap: anywhere; }
body[data-app="customer"] .checkout-bag-info strong,
body[data-app="customer"] .checkout-bag-info .muted { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
body[data-app="customer"] .checkout-bag-line-total { min-width: 0; max-width: 120px; text-align: right; overflow-wrap: anywhere; }
body[data-app="customer"] .checkout-bag-line-total strong { display: block; white-space: normal; font-variant-numeric: tabular-nums; }
body[data-app="customer"] .checkout-qty { flex-wrap: wrap; min-width: 0; }
.shipping-calculation { margin-top: 12px; }
.shipping-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.shipping-calc-grid > div { min-width: 0; padding: 10px; background: var(--surface-soft, #f8f5f2); border-radius: 8px; }
.shipping-calc-grid span, .shipping-calc-grid strong { display: block; overflow-wrap: anywhere; }
.shipping-calc-grid span { color: var(--muted, #756d66); font-size: .78rem; margin-bottom: 4px; }
.shipping-line-breakdown { display: grid; gap: 8px; margin-top: 10px; }
.shipping-line-breakdown > div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border, #e8e0da); border-radius: 8px; overflow-wrap: anywhere; }
.shipping-event-list { display: grid; gap: 10px; }
.shipping-event { border: 1px solid var(--border, #e8e0da); border-radius: 10px; padding: 12px; min-width: 0; }
.shipping-event > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.shipping-event pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: .78rem; }
@media (max-width: 520px) {
  body[data-app="customer"] .checkout-bag-item { grid-template-columns: 54px minmax(0, 1fr); gap: 9px; }
  body[data-app="customer"] .checkout-bag-image { width: 54px; height: 54px; }
  body[data-app="customer"] .checkout-bag-line-total { grid-column: 2; justify-self: end; max-width: 100%; }
  body[data-app="customer"] .checkout-qty { gap: 5px; }
  .shipping-calc-grid { grid-template-columns: minmax(0, 1fr); }
}


/* Product description rich text and admin editor */
body[data-app="admin"] .rich-description-field { margin: 18px 0; }
body[data-app="admin"] .rich-editor-toolbar { display:flex; flex-wrap:wrap; gap:5px; padding:8px; border:1px solid var(--border); border-bottom:0; border-radius:10px 10px 0 0; background:var(--surface-soft); }
body[data-app="admin"] .rich-editor-toolbar button { min-height:30px; padding:4px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; }
body[data-app="admin"] .rich-editor { min-height:120px; max-height:420px; overflow:auto; padding:12px; border:1px solid var(--border); border-radius:0 0 10px 10px; background:var(--surface); color:var(--text); line-height:1.65; white-space:normal; overflow-wrap:anywhere; }
body[data-app="admin"] .rich-editor:focus { outline:2px solid var(--accent); outline-offset:1px; }
body[data-app="admin"] .rich-editor table, .product-rich-content table { width:100%; border-collapse:collapse; margin:12px 0; }
body[data-app="admin"] .rich-editor th, body[data-app="admin"] .rich-editor td, .product-rich-content th, .product-rich-content td { border:1px solid var(--border); padding:8px; text-align:left; vertical-align:top; }
body[data-app="admin"] .rich-editor th, .product-rich-content th { font-weight:700; background:var(--surface-soft); }
body[data-app="customer"] .product-rich-content { line-height:1.8; overflow-wrap:anywhere; }
body[data-app="customer"] .product-rich-content p { margin:0 0 1em; }
body[data-app="customer"] .product-rich-content h1 { font-size:1.8em; line-height:1.2; margin:.8em 0 .45em; }
body[data-app="customer"] .product-rich-content h2 { font-size:1.5em; line-height:1.25; margin:.8em 0 .45em; }
body[data-app="customer"] .product-rich-content h3 { font-size:1.25em; margin:.75em 0 .4em; }
body[data-app="customer"] .product-rich-content ul, body[data-app="customer"] .product-rich-content ol { padding-left:1.5em; margin:.7em 0; }
body[data-app="customer"] .product-rich-content blockquote { border-left:3px solid var(--accent); padding-left:1em; margin:1em 0; color:var(--muted); }
body[data-app="customer"] .product-rich-content img { max-width:100%; height:auto; }

/* v15.4 admin workspace simplification */
body[data-app="admin"] .nav-group-label {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; line-height: 1.3;
}
body[data-app="admin"] .nav-group-label span { font-size: 14px; transition: transform .15s ease; }
body[data-app="admin"] .nav-group-label[aria-expanded="false"] span { transform: rotate(-90deg); }
body[data-app="admin"] .nav-item[hidden] { display: none !important; }
body[data-app="admin"] #adminQuickSwitch { white-space: nowrap; }
body[data-app="admin"] #adminQuickSwitch .tiny-note { margin-left: 8px; color: var(--admin-muted); }
.admin-palette-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: min(16vh,130px) 16px 20px; background: rgba(15,23,42,.46); backdrop-filter: blur(5px); }
.admin-palette { width: min(560px,100%); max-height: 72vh; overflow: hidden; padding: 16px; border: 1px solid var(--admin-border,#e2e8f0); border-radius: 18px; background: var(--admin-surface,#fff); box-shadow: 0 24px 80px rgba(15,23,42,.22); }
.admin-palette-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.admin-palette > input { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid var(--admin-border,#e2e8f0); border-radius: 11px; outline: none; font: inherit; }
.admin-palette > input:focus { border-color: var(--admin-sidebar-active,#6f8df7); box-shadow: 0 0 0 3px rgba(111,141,247,.14); }
.admin-palette-results { max-height: 46vh; overflow: auto; padding: 8px 0; }
.admin-palette-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: var(--admin-text,#172033); }
.admin-palette-option > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.admin-palette-option small { color: var(--admin-muted,#64748b); font-size: 11px; }
.admin-palette-option.selected, .admin-palette-option:hover { background: var(--admin-surface-soft,#f1f5f9); }
.admin-palette .tiny-note { margin: 6px 0 0; color: var(--admin-muted,#64748b); font-size: 11px; }
@media (max-width: 900px) {
  body[data-app="admin"] .nav-group-label { display: flex; }
  body[data-app="admin"] .sidebar { overflow-y: auto; }
  body[data-app="admin"] .nav-group { display: block; }
  body[data-app="admin"] .nav-group-label { color: #8491a7; }
}
@media (max-width: 600px) {
  body[data-app="admin"] .admin-topbar { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px; }
  body[data-app="admin"] .top-actions { display: flex; width: 100%; gap: 6px; }
  body[data-app="admin"] #websiteSwitcher { display: none; }
  body[data-app="admin"] #adminQuickSwitch { flex: 1; }
}