:root {
  --teal: #0f5f61;
  --teal-dark: #093d42;
  --orange: #e0783f;
  --orange-soft: #f4a064;
  --cream: #fff3e8;
  --paper: #fffaf4;
  --panel: #ffffff;
  --panel-alt: #f3e8df;
  --border: #e5d5c9;
  --border-strong: #cdb9aa;
  --ink: #251f1b;
  --muted: #78675e;
  --faint: #a89990;
  --berry: #8b3d55;
  --success: #4e7449;
  --danger: #b54034;
  --heading-font: Georgia, "Times New Roman", serif;
  --body-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-xs: .375rem;
  --sp-sm: .625rem;
  --sp-md: .875rem;
  --sp-lg: 1.25rem;
  --sp-xl: 1.75rem;
  --sp-2xl: 2.5rem;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(37,31,27,.06);
  --shadow-md: 0 2px 10px rgba(37,31,27,.1);
  --shadow-lg: 0 18px 45px rgba(37,31,27,.18);
  --maxw: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font: 15px/1.55 var(--body-font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { color: var(--teal-dark); font-family: var(--heading-font); line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 4vw, 4.6rem); }
h2 { font-size: clamp(1.45rem, 2vw, 2.1rem); }
h3 { font-size: 1.05rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 3px solid var(--orange);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
.header-inner {
  max-width: var(--maxw);
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(320px, 380px) auto;
  align-items: center;
  justify-content: space-between;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: var(--sp-sm);
  margin: 0 auto;
  padding: 9px var(--sp-lg);
}
.brand {
  width: 190px;
  flex: 0 0 auto;
  justify-self: start;
}
.brand img { width: 100%; }
.header-search-wrap {
  width: 100%;
  max-width: none;
  justify-self: center;
  position: relative;
}
.header-search {
  display: flex;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: var(--sp-xs) 0;
  max-height: 380px;
  overflow-y: auto;
  z-index: 300;
}
.search-dropdown-header {
  padding: var(--sp-xs) var(--sp-md);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
}
.search-result-item:hover,
.search-result-item:focus,
.search-result-item.is-active {
  background: var(--cream);
  outline: none;
}
.search-result-item img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.search-result-item span {
  display: block;
  font-size: .8rem;
  color: var(--muted);
}
.search-result-category-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: var(--r-sm);
}
.header-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 10px 13px;
  color: var(--ink);
  background: transparent;
  outline: 0;
}
.header-search input::placeholder { color: var(--faint); }
.header-search button {
  border: 0;
  padding: 0 16px;
  color: var(--teal-dark);
  background: var(--orange-soft);
  font-weight: 800;
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: .35rem;
  color: var(--teal-dark);
  font-size: .9rem;
  white-space: nowrap;
}
.header-actions a {
  color: inherit;
  border-radius: var(--r-sm);
  padding: 8px 7px;
}
.header-actions a:hover { color: var(--orange); }
.cart-toggle {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 8px 12px;
  color: var(--teal-dark);
  background: #fff;
  font-weight: 600;
}
.cart-toggle span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-left: 5px;
  place-items: center;
  border-radius: 50%;
  color: var(--teal-dark);
  background: var(--orange-soft);
  font-size: .78rem;
  font-weight: 900;
}

.app-main {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
}
.app-main--narrow { max-width: 860px; }
.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
  gap: var(--sp-xl);
  align-items: center;
  margin-bottom: var(--sp-lg);
  padding: var(--sp-xl);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--paper), #f8e8d9);
  box-shadow: var(--shadow-sm);
}
.hero-panel img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.hero-text {
  max-width: 520px;
  margin-top: var(--sp-sm);
  color: var(--muted);
  font-size: 1.04rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.eyebrow {
  margin-bottom: .35rem;
  color: var(--orange);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-weight: 800;
  text-decoration: none;
}
.btn.primary {
  color: white;
  background: var(--teal);
}
.btn.quiet {
  color: var(--teal-dark);
  border-color: var(--border);
  background: var(--panel);
}
.btn.full { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.kpi {
  position: relative;
  overflow: hidden;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 4px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--orange);
}
.kpi-label {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kpi-value {
  display: block;
  margin-top: .2rem;
  color: var(--teal-dark);
  font-family: var(--heading-font);
  font-size: 1.55rem;
}
.kpi-sub {
  display: block;
  color: var(--faint);
  font-size: .82rem;
}

.panel {
  margin-bottom: var(--sp-lg);
  padding: var(--sp-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}
.panel-head > div > .eyebrow {
  margin-bottom: 0;
}
.panel-head > div > h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
}
.panel-head > div > .muted {
  font-size: .82rem;
}
.panel-head select {
  width: auto;
  min-width: 140px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 28px 6px 12px;
  color: var(--muted);
  background: var(--paper);
  font-size: .8rem;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%2378675e'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.panel-head select:hover {
  border-color: var(--border-strong);
}
.token-form input,
.contact-form input,
.contact-form textarea,
.checkout-form input,
.checkout-form textarea,
.site-footer input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
}
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-lg);
}
.category-tabs button {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  color: var(--muted);
  background: var(--paper);
}
.category-tabs button.active {
  color: white;
  border-color: var(--teal);
  background: var(--teal);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-md);
}
.catalog-head {
  align-items: end;
}
.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-sm);
}
.catalog-actions select {
  min-width: 150px;
}
.catalog-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-xs);
  padding: var(--sp-md);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(255,250,244,.72);
}
.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
.product-card figure {
  display: grid;
  place-items: center;
  min-height: 178px;
  padding: 0;
  background: var(--paper);
}
.product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.product-body {
  display: grid;
  gap: var(--sp-sm);
  padding: var(--sp-md);
}
.product-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  color: var(--muted);
  font-size: .78rem;
}
.price {
  color: var(--berry);
  font-weight: 900;
}
.product-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-xs);
  margin-top: auto;
}
.product-actions button {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 10px;
  background: var(--panel);
}
.card-add {
  width: 100%;
  color: #fff;
  border-color: var(--orange) !important;
  background: var(--orange) !important;
  font-weight: 800;
}

.two-col,
.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}
.two-col .panel { margin-bottom: 0; }
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}
.contact-form label,
.checkout-form label,
.site-footer label {
  display: grid;
  gap: .3rem;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
.contact-form .full { grid-column: 1 / -1; }
.form-status {
  min-height: 22px;
  color: var(--muted);
  font-size: .86rem;
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  justify-content: end;
  background: rgba(37,31,27,.42);
}
.cart-drawer.open { display: flex; }
.cart-panel {
  width: min(100%, 430px);
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-lg) 0;
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cart-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
}
.cart-head button,
.dialog-close {
  align-self: start;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 10px;
  color: var(--teal-dark);
  background: var(--panel);
}
.cart-lines {
  display: grid;
  align-content: start;
  gap: var(--sp-sm);
}
.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border);
}
.cart-line img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: white;
}
.qty-controls {
  display: flex;
  gap: var(--sp-xs);
  align-items: center;
  margin-top: var(--sp-xs);
}
.qty-controls button {
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.checkout-form {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.cart-scroll {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: var(--sp-md);
  padding-right: 4px;
  overflow-y: auto;
}
.cart-checkout-section {
  display: grid;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-md);
}
.cart-checkout-section h3 {
  font-size: 1rem;
}
.cart-checkout-footer {
  flex: 0 0 auto;
  display: grid;
  gap: var(--sp-sm);
  margin: var(--sp-md) calc(var(--sp-lg) * -1) 0;
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  border-top: 1px solid var(--border);
  background: var(--cream);
  box-shadow: 0 -10px 20px rgba(37, 31, 27, .06);
}
.cart-totals {
  display: grid;
  gap: var(--sp-xs);
  padding: var(--sp-sm) 0;
}
.cart-totals div {
  display: flex;
  justify-content: space-between;
}
.cart-totals div:last-child {
  padding-top: var(--sp-xs);
  border-top: 1px solid var(--border);
  font-size: 1.1rem;
}

.product-dialog {
  width: min(860px, calc(100vw - 24px));
  border: 0;
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.product-dialog::backdrop { background: rgba(37,31,27,.48); }
.dialog-close {
  position: absolute;
  top: var(--sp-md);
  right: var(--sp-md);
}
.dialog-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-lg);
  padding: var(--sp-xl);
}
.dialog-content img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--r-md);
  background: white;
}
.dialog-content p {
  color: var(--muted);
  margin: var(--sp-sm) 0;
}

.site-footer {
  background: var(--teal-dark);
  border-top: 3px solid var(--orange);
  color: rgba(255,255,255,.72);
}
.footer-inner {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 340px);
  gap: var(--sp-lg);
  align-items: center;
  margin: 0 auto;
  padding: var(--sp-lg);
}
.footer-inner img {
  width: 130px;
  margin-bottom: var(--sp-xs);
}
.footer-inner form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-sm);
  align-items: end;
}

.success-panel {
  max-width: 720px;
  margin: 10vh auto;
}
.empty-state {
  padding: var(--sp-lg);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  background: var(--paper);
}
.token-form {
  display: flex;
  gap: var(--sp-sm);
}
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-input {
  width: 90px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
}

@media (max-width: 960px) {
  .header-inner {
    grid-template-columns: 190px 1fr;
    min-height: 0;
    gap: var(--sp-sm) var(--sp-md);
    padding-block: var(--sp-sm);
  }
  .header-search-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-panel,
  .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app-main { padding-inline: var(--sp-sm); }
  .header-actions {
    width: 100%;
    overflow-x: auto;
  }
  .hero-panel,
  .panel { padding: var(--sp-md); }
  .kpi-grid,
  .two-col,
  .footer-inner,
  .footer-inner form,
  .contact-form,
  .dialog-content { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-head,
  .catalog-actions,
  .catalog-more {
    align-items: stretch;
  }
  .catalog-actions,
  .catalog-more {
    flex-direction: column;
  }
  .catalog-actions select,
  .catalog-actions .btn,
  .catalog-more .btn {
    width: 100%;
  }
}

@media (max-width: 470px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ---- Added: a11y, reviews, promo/gift, care, ratings ---- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.form-status.ok { color: var(--success); }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }

.rating { margin: .25rem 0; color: var(--orange); letter-spacing: 1px; }
.rating .muted { color: var(--muted); letter-spacing: normal; }

.care-list { line-height: 1.7; padding-left: 1.1rem; }
.care-list li { margin-bottom: .4rem; }

.ship-progress { color: var(--success); font-size: .85rem; margin: .25rem 0 .75rem; }

.promo-row { display: flex; gap: .5rem; }
.promo-row input { flex: 1; }

label.checkbox { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
label.checkbox input { width: auto; }

.spec-list { display: grid; gap: .35rem; margin: .75rem 0; }
.spec-list > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
.spec-list dt { color: var(--muted); margin: 0; }
.spec-list dd { margin: 0; font-weight: 600; }
.care-link {
  display: inline-flex;
  margin-bottom: .75rem;
  color: var(--teal-dark);
  font-size: .88rem;
  font-weight: 800;
}
.care-link:hover { color: var(--orange); }
ul.notes { margin: .25rem 0 .5rem; padding-left: 1.1rem; columns: 2; }

.reviews { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.review { border-bottom: 1px solid var(--border); padding: .5rem 0; }
.review-form { display: grid; gap: .5rem; margin-top: 1rem; }
.restock-form { display: grid; gap: .5rem; margin-top: .5rem; }

.coupon-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.coupon-form input, .coupon-form select { width: auto; flex: 1 1 120px; }

/* Admin settings + product editor */
.settings-form { display: grid; gap: .6rem; max-width: 420px; }
.settings-form label { display: grid; gap: .25rem; font-size: .85rem; color: var(--muted); }

.product-admin { display: grid; gap: 1.1rem; }
.product-admin-tools {
  display: flex;
  align-items: center;
}
.product-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.product-metrics span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 34px;
  padding: .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}
.product-metrics strong { color: var(--ink); font-size: .95rem; }
.product-metrics .warn { border-color: #f0d0a0; background: #fff8f0; color: #9a5a0a; }

/* ---- Create panel + the shared "card form" layout used for create & edit ---- */
.product-create {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
/* Legacy compact grid form — still used by the Users admin page */
.product-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: .55rem;
  padding: .7rem;
}
.product-form label { display: grid; gap: .22rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.product-form .full { grid-column: 1 / -1; }

.prod-form { display: grid; gap: 1rem; }
.prod-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
  gap: .9rem;
  align-items: start;
}
.prod-form-cols { display: grid; gap: .8rem; min-width: 0; }
.prod-form-side { position: sticky; top: .75rem; }
.prod-fieldset {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .55rem .85rem .9rem;
  background: var(--paper);
}
.prod-fieldset > legend {
  padding: 0 .35rem;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--teal-dark);
}
.prod-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.prod-field-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod-field-grid .full { grid-column: 1 / -1; }
.prod-field-grid label {
  display: grid;
  gap: .25rem;
  align-content: start;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
}
.prod-field-grid .field-hint {
  font-weight: 500;
  font-size: .68rem;
  color: var(--muted);
  opacity: .8;
}
.prod-field-grid input[type="text"],
.prod-field-grid input[type="number"],
.prod-field-grid input:not([type]),
.prod-field-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 400;
}
.prod-field-grid input:focus,
.prod-field-grid textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 95, 97, .12);
}
.prod-field-grid textarea { min-height: 60px; resize: vertical; }
.prod-photo-fieldset { display: grid; }

/* ---- Image drop zone (shared by create + each edit card) ---- */
.img-upload { display: grid; gap: .5rem; }
.img-upload-zone {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 150px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 1rem;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.img-upload-large .img-upload-zone { min-height: 220px; }
.img-upload-zone:hover,
.img-upload-zone:focus-visible { border-color: var(--teal); background: #f3faf8; }
.img-upload.is-dragover .img-upload-zone { border-color: var(--teal); background: #eaf6f3; }
.img-upload-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-upload[data-has-image="false"] .img-upload-preview { display: none; }
.img-upload-overlay {
  position: relative;
  display: grid;
  gap: .25rem;
  justify-items: center;
  padding: .65rem .85rem;
  border-radius: var(--r-sm);
}
.img-upload-title { font-size: .82rem; font-weight: 800; color: var(--ink); }
.img-upload-hint { font-size: .72rem; color: var(--muted); }
.img-upload[data-has-image="true"] .img-upload-overlay {
  background: rgba(255, 255, 255, .9);
  opacity: 0;
  transition: opacity .15s;
}
.img-upload[data-has-image="true"] .img-upload-zone:hover .img-upload-overlay,
.img-upload[data-has-image="true"] .img-upload-zone:focus-visible .img-upload-overlay,
.img-upload.is-dragover .img-upload-overlay { opacity: 1; }
.img-upload-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 18px;
}
.img-upload-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  color: var(--muted);
}
.img-upload-clear {
  flex: none;
  border: none;
  background: none;
  padding: 0;
  color: var(--danger);
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}
.img-upload-clear:hover { text-decoration: underline; }

.product-form-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}
.product-form-actions .form-status { margin: 0; min-height: auto; }
.product-inventory { margin-bottom: 0; }
.product-list { display: grid; gap: .55rem; }
.product-edit {
  display: grid;
  gap: .45rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .65rem;
  background: var(--panel);
}
.product-edit-head {
  display: flex;
  gap: .6rem;
  align-items: center;
}
.product-edit-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--paper);
}
.product-edit-title { flex: 1; min-width: 0; display: grid; gap: .06rem; }
.product-edit-title strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-edit-title span {
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-edit-header-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.product-badges { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }

/* ---- Compact upload button in card header ---- */
.img-upload-header { display: grid; gap: .15rem; text-align: right; }
.img-upload-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}
.prod-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 28px;
  padding: .28rem .65rem;
  font-size: .74rem;
  font-weight: 700;
}
.img-upload-clear-sm {
  border: none;
  background: none;
  padding: 0 .2rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}
.img-upload-clear-sm:hover { color: var(--danger); opacity: 1; }
.img-upload-name-sm {
  display: block;
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  color: var(--muted);
  margin-left: auto;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .18rem .45rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}
.status-pill.active { border-color: #b9dfd6; background: #eefaf7; color: var(--teal-dark); }
.status-pill.inactive { border-color: #ddd6cf; background: #f5f1ed; color: var(--muted); }
.status-pill.featured { border-color: #f0d0a0; background: #fff8f0; color: #9a5a0a; }
.status-pill.low { border-color: #f1b4a7; background: #fff1ee; color: var(--danger); }
.product-edit-quick {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .55rem;
  align-items: end;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}
.product-edit-quick label { display: grid; gap: .16rem; font-size: .74rem; font-weight: 800; color: var(--muted); }
.product-edit-quick .chk {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 34px;
  gap: .35rem;
  color: var(--ink);
}
.product-edit-quick .chk input { width: auto; margin: 0; }
.product-edit-quick input[type="number"] { width: 90px; min-height: 34px; padding: 6px 9px; }
.product-review-meta {
  align-self: center;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}
.product-edit-actions {
  margin-left: auto;
  display: flex;
  gap: .35rem;
  align-items: end;
  flex: none;
}
.product-edit-details { /* full width in single-column parent */ }
.product-edit-details > summary {
  cursor: pointer;
  width: max-content;
  padding: .15rem 0;
  color: var(--teal-dark);
  font-size: .78rem;
  font-weight: 800;
}
.product-edit-details[open] > summary { margin-bottom: .65rem; }
.product-edit-details > .prod-form-cols {
  padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.product-edit-actions .btn { min-height: 34px; padding: .42rem .7rem; }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

@media (max-width: 860px) {
  .product-admin-tools { align-items: stretch; }
  .product-form { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .prod-form-grid { grid-template-columns: 1fr; }
  .prod-form-side { position: static; }
}

@media (max-width: 560px) {
  .product-form { grid-template-columns: 1fr; }
  .prod-field-grid,
  .prod-field-grid-3 { grid-template-columns: 1fr; }
  .img-upload-large .img-upload-zone { min-height: 180px; }
  /* wrap the right-side controls below the title on very narrow screens */
  .product-edit-header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .product-edit-title strong,
  .product-edit-title span { white-space: normal; }
  .product-edit-quick input[type="number"] { width: 80px; }
}

/* Account menu (top-right) */
.user-menu-slot { display: inline-flex; align-items: center; }
.user-menu { position: relative; }
.account-fallback:not([open]) > .user-dropdown { display: none; }
.account-fallback summary { list-style: none; }
.account-fallback summary::-webkit-details-marker { display: none; }
/* Circular avatar — echoes the orange-on-teal cart badge motif. */
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--orange-soft); color: var(--teal-dark);
  border: 2px solid rgba(9, 61, 66, .18);
  font-weight: 900; font-size: .82rem; letter-spacing: .02em;
  cursor: pointer; padding: 0; line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.avatar:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.avatar svg { width: 20px; height: 20px; }
.avatar-guest { background: var(--teal); color: #fff; border-color: transparent; }
.avatar-guest:hover { background: var(--teal-dark); }
.role-badge {
  display: inline-block; background: var(--teal); color: #fff; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .04em; padding: .1rem .35rem;
  border-radius: 6px; margin: 0 .15rem;
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + .4rem); min-width: 230px; z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: .35rem; display: grid; gap: .1rem;
}
.user-dropdown-head { padding: .4rem .6rem; margin: 0; color: var(--muted); font-size: .8rem; border-bottom: 1px solid var(--border); }
.user-dropdown a, .user-dropdown button {
  text-align: left; background: none; border: 0; color: var(--ink); font: inherit;
  padding: .5rem .6rem; border-radius: 6px; cursor: pointer; text-decoration: none; display: block;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--panel-alt); }
.user-dropdown-sep { height: 1px; background: var(--border); margin: .25rem .35rem; }
.user-dropdown [data-signout] { color: var(--danger); border-top: 1px solid var(--border); margin-top: .15rem; }

/* Inline login panel inside the guest-avatar dropdown */
.user-dropdown.login-dropdown { min-width: 272px; }
.login-panel { padding: .25rem .1rem .1rem; }
.login-panel-head {
  font-family: var(--heading-font);
  font-size: 1rem;
  color: var(--teal-dark);
  padding: .15rem .5rem .65rem;
  margin-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.login-inline-form { display: grid; gap: .5rem; padding: 0 .25rem .1rem; }
.login-field { display: grid; gap: .2rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.login-field input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  background: var(--cream);
  color: var(--ink);
  outline: none;
  transition: border-color .12s, background .12s;
  width: 100%;
}
.login-field input:focus { border-color: var(--teal); background: #fff; }
.login-inline-form .btn { margin-top: .2rem; font-size: .88rem; min-height: 36px; }
.login-inline-form .form-status { text-align: center; min-height: 18px; font-size: .8rem; }

/* ===== AUTH PAGES (login, forgot-password, reset-password) ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-2xl) var(--sp-lg);
  background: var(--cream);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--paper);
  border-top: 4px solid var(--orange);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem 2rem 1.5rem;
}
.auth-brand { display: block; width: 130px; margin: 0 auto 1.5rem; }
.auth-brand img { width: 100%; }
.auth-heading {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  color: var(--teal-dark);
  text-align: center;
  margin-bottom: .3rem;
}
.auth-sub { text-align: center; color: var(--muted); font-size: .85rem; margin-bottom: 1.25rem; }
.auth-card .form-status { margin-bottom: .65rem; text-align: center; min-height: 20px; }
.auth-field { display: grid; gap: .25rem; font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: .75rem; }
.auth-field input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 9px 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  width: 100%;
  font-size: .95rem;
  transition: border-color .12s, box-shadow .12s;
}
.auth-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,95,97,.1); }
/* toggle switch (remember-me) */
.auth-remember { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--teal); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-label { font-size: .83rem; color: var(--muted); cursor: pointer; user-select: none; }
.auth-foot { text-align: center; margin-top: 1rem; font-size: .83rem; }
.auth-foot a { color: var(--teal); }
.auth-back { text-align: center; margin-top: .4rem; font-size: .8rem; }
.auth-back a { color: var(--faint); }
.auth-back a:hover { color: var(--teal); }

.login-dialog {
  width: min(420px, calc(100vw - 24px));
  border: 0;
  border-radius: var(--r-lg);
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.login-dialog::backdrop {
  background: rgba(37,31,27,.48);
  backdrop-filter: blur(2px);
}
.login-form {
  padding: 1.5rem;
  border-top: 4px solid var(--orange);
}
.login-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: .25rem;
}
.login-dialog-head h2 {
  font-size: 1.45rem;
}
.login-dialog-head button,
.login-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--teal-dark);
  background: #fff;
  font-size: 1.25rem;
  line-height: 1;
}
.login-form .form-status {
  min-height: 20px;
  margin: .25rem 0 .65rem;
  text-align: center;
}
.login-form .auth-field {
  margin-bottom: .75rem;
}
.password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #fff;
}
.password-field:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,95,97,.1);
}
.auth-field .password-field input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.password-field button {
  min-width: 58px;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--teal-dark);
  background: var(--paper);
  font-size: .82rem;
  font-weight: 900;
}
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: var(--sp-lg);
}
.login-overlay:target {
  display: grid;
}
.login-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(37,31,27,.48);
  backdrop-filter: blur(2px);
}
.login-overlay .login-form {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 24px));
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.login-close {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}
.login-close:hover { color: var(--orange); text-decoration: none; }


/* ===== NEW ADDITIONS: Toast, skeleton, filter bar, password meter, etc. ===== */

.toast-container {
  position: fixed;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  z-index: 100;
  display: grid;
  gap: var(--sp-sm);
  max-width: 340px;
}
.toast {
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
  background: var(--teal-dark);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

/* --- Skeleton loading placeholders --- */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-md);
}
.skeleton-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.skeleton-img {
  height: 150px;
  background: linear-gradient(90deg, #f0e8e0 25%, #e8ddd2 50%, #f0e8e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-body {
  padding: var(--sp-md);
  display: grid;
  gap: var(--sp-sm);
}
.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0e8e0 25%, #e8ddd2 50%, #f0e8e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-btn {
  height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, #f0e8e0 25%, #e8ddd2 50%, #f0e8e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Active filter chips --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 4px 10px;
  border: 1px solid var(--teal);
  border-radius: var(--r-pill);
  background: rgba(15, 95, 97, .08);
  color: var(--teal-dark);
  font-size: .8rem;
  font-weight: 600;
}
.filter-chip button {
  border: 0;
  background: none;
  color: var(--teal);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.filter-chip button:hover { color: var(--danger); }
.clear-filters {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
}
.clear-filters:hover { color: var(--danger); }

/* --- Password strength meter --- */
.pw-meter {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}
.pw-meter-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.pw-meter-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .2s ease, background .2s ease;
}
.pw-meter-fill.weak { width: 25%; background: var(--danger); }
.pw-meter-fill.medium { width: 50%; background: var(--orange); }
.pw-meter-fill.strong { width: 75%; background: var(--success); }
.pw-meter-fill.very-strong { width: 100%; background: var(--teal); }
.pw-meter-label {
  font-size: .75rem;
  color: var(--muted);
}

/* --- Image upload preview in admin --- */
.image-upload-area {
  display: grid;
  gap: var(--sp-sm);
}
.image-upload-area input[type="file"] {
  font-size: .85rem;
}
.image-preview {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: white;
}

/* --- Clear cart button --- */
.cart-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-sm);
}
.btn-outline-danger {
  border: 1px solid var(--danger);
  color: var(--danger);
  background: transparent;
  font-weight: 600;
  font-size: .8rem;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.btn-outline-danger:hover {
  background: var(--danger);
  color: #fff;
}

/* --- Review skeleton --- */
.skeleton-review {
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-review-line {
  height: 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0e8e0 25%, #e8ddd2 50%, #f0e8e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-review-line.short { width: 40%; }

/* --- Confirm password field --- */
input.error-outline {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 1px var(--danger);
}
.pw-match-status {
  font-size: .78rem;
  min-height: 1.2em;
}
.pw-match-status.ok { color: var(--success); }
.pw-match-status.error { color: var(--danger); }

/* --- Scroll margin for shop anchor --- */
#shop {
  scroll-margin-top: 80px;
}

@media (max-width: 960px) {
  .skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 470px) {
  .skeleton-grid { grid-template-columns: 1fr; }
}

/* ===== CHECKOUT PAGE ===== */

.checkout-page .checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-xl);
  align-items: start;
}
.checkout-main {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
}
.checkout-main h1 {
  margin-bottom: var(--sp-lg);
}
.checkout-section-title {
  font-size: 1rem;
  color: var(--teal-dark);
  margin: var(--sp-lg) 0 var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--border);
}
.checkout-section-title:first-of-type {
  margin-top: 0;
}
.checkout-field-row {
  margin-bottom: var(--sp-sm);
}
.checkout-field-row label {
  display: grid;
  gap: .3rem;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
.checkout-field-row input,
.checkout-field-row textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
}
.checkout-promo-row {
  display: flex;
  gap: var(--sp-sm);
}
.checkout-promo-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
}

/* Stripe Elements wrapper */
.checkout-stripe-wrapper {
  min-height: 200px;
}
#stripe-payment-element {
  margin-bottom: var(--sp-md);
}
/* Stripe Elements mount a div with class "StripeElement" */
#stripe-payment-element .StripeElement {
  padding: 2px 0;
}

/* Submit button with spinner */
.checkout-submit {
  position: relative;
  min-height: 48px;
  font-size: 1rem;
  margin-top: var(--sp-md);
}
.checkout-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}
.spinner.dark { border-top-color: #fff; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.checkout-secure-note {
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
  margin-top: var(--sp-sm);
}

/* Error display */
.checkout-errors {
  padding: var(--sp-md);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  background: rgba(181, 64, 52, .06);
  color: var(--danger);
  font-size: .9rem;
  margin-bottom: var(--sp-lg);
}
.checkout-errors a {
  color: var(--danger);
  text-decoration: underline;
}

/* Order summary panel */
.checkout-summary {
  position: sticky;
  top: 90px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}
.checkout-summary h2 {
  font-size: 1.1rem;
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border);
}
.checkout-summary-items {
  display: grid;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.checkout-summary-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-sm);
  align-items: center;
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border);
}
.checkout-summary-item-details {
  min-width: 0;
}
.checkout-summary-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: white;
}
.checkout-summary-item-details {
  display: grid;
  gap: 2px;
}
.checkout-summary-item-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--teal-dark);
  overflow-wrap: anywhere;
}
.checkout-summary-item-qty {
  font-size: .82rem;
  color: var(--muted);
}
.checkout-summary-item-price {
  font-weight: 700;
  color: var(--berry);
  font-size: .9rem;
}
.checkout-summary-totals {
  padding: var(--sp-sm) 0 0;
  border-top: 0;
}
.checkout-summary-totals div:last-child {
  padding-top: var(--sp-sm);
}

/* Responsive */
@media (max-width: 860px) {
  .checkout-page .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-summary {
    position: static;
    order: -1;
  }
}

@media (max-width: 470px) {
  .cart-panel {
    width: 100%;
    padding: var(--sp-md) var(--sp-md) 0;
  }
  .cart-line {
    grid-template-columns: 56px 1fr;
  }
  .cart-line img {
    width: 56px;
    height: 56px;
  }
  .cart-checkout-footer {
    margin-inline: calc(var(--sp-md) * -1);
    padding: var(--sp-md);
  }
  .promo-row {
    display: grid;
  }
}

/* Override panel-head alignment for checkout page */
.checkout-page .panel-head {
  align-items: flex-start;
}

/* ===== ADMIN LAYOUT (full-bleed top header + content centered at site width) ===== */
.admin-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cream);
}
/* Top header bar spans the whole browser width; its inner row is centered at the
   main-site width (--maxw) so the nav lines up with the content below. */
.admin-sidebar {
  background: var(--teal-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}
.admin-header-inner {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem var(--sp-lg);
}
.admin-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
}
.admin-logo img { width: 64px; filter: brightness(0) invert(1); opacity: .9; }
.admin-nav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .45rem;
  flex: 1;
  min-width: 0;
}
.admin-nav-section {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}
.admin-nav-section + .admin-nav-section {
  padding-left: .45rem;
  border-left: 1px solid rgba(255,255,255,.16);
}
.admin-nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
}
.admin-nav a {
  display: inline-block;
  padding: .45rem .56rem;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.admin-nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.admin-nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.admin-sidebar-foot {
  flex: 0 0 auto;
  padding: 0;
}
/* Override avatar colors inside the dark header */
.admin-sidebar-foot .avatar { border-color: rgba(255,255,255,.25); }
/* Main column — centered at the main-site content width. */
.admin-main {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 var(--sp-lg);
}
.admin-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.4rem 0 .9rem;
  border-bottom: 1px solid var(--border);
}
.admin-topbar h1 { font-size: 1.3rem; margin: 0; }
/* Sub-page tab switcher — shown in the topbar on grouped pages (Catalog, Settings, Users). */
.admin-page-tabs {
  display: flex;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  flex: 1;
}
.admin-page-tabs a {
  padding: .3rem .7rem;
  border-radius: calc(var(--r-md) - 2px);
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.admin-page-tabs a:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.admin-page-tabs a.active { background: var(--teal-dark); color: #fff; }
.admin-content { padding: 1.5rem 0; flex: 1; }
/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.2rem;
}
.kpi-card .kpi-label { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .3rem; }
.kpi-card .kpi-value { display: block; font-size: 1.7rem; font-weight: 900; color: var(--teal-dark); line-height: 1; }
.kpi-card .kpi-sub { display: block; font-size: .75rem; color: var(--faint); margin-top: .25rem; }
/* Revenue sparkline */
.rev-chart-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.rev-chart-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .6rem; }
.rev-chart { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.rev-bar {
  flex: 1;
  background: var(--teal);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: background .12s;
  position: relative;
  cursor: default;
}
.rev-bar:hover { background: var(--orange); }
.rev-bar-label { display: flex; justify-content: space-around; margin-top: .3rem; }
.rev-bar-label span { flex: 1; text-align: center; font-size: .65rem; color: var(--faint); }
/* Low-stock alert */
.low-stock-list { display: grid; gap: .35rem; }
.low-stock-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  background: #fff8f0;
  border: 1px solid #f0d0a0;
  border-radius: var(--r-sm);
  font-size: .85rem;
}
.low-stock-item .stock-count { margin-left: auto; font-weight: 800; color: var(--orange); }
.low-stock-item .stock-count.zero { color: var(--danger); }
/* Admin section */
.admin-section { margin-bottom: 2rem; }
.admin-section-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; flex-wrap: wrap; }
.admin-section-head h2 { flex: 1; font-size: 1.1rem; margin: 0; }
.admin-section-head .admin-section-desc { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--muted); }
/* Two-column admin layout that collapses on small screens */
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
/* Shared admin form controls — one consistent look across every admin page. */
.admin-form { display: grid; gap: 1.1rem; }
.admin-form .field { display: grid; gap: .3rem; }
.admin-form .field > .field-label,
.admin-form > label,
.admin-form .field > label { font-size: .82rem; font-weight: 700; color: var(--ink); }
.admin-form .hint { font-size: .78rem; font-weight: 400; color: var(--muted); }
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="url"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
}
.admin-form textarea { resize: vertical; min-height: 72px; }
.admin-form input[type="color"] { width: 100%; height: 38px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--paper); }
.admin-form input[type="file"] { width: 100%; font-size: .85rem; color: var(--ink); }
.admin-form .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.admin-form .check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
.admin-form .check input { width: auto; margin: 0; }
.admin-divider { border: 0; border-top: 1px solid var(--border); margin: .35rem 0; }
.admin-checklist { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); padding: .5rem .65rem; display: grid; gap: .1rem; background: var(--paper); }
.admin-checklist .check { font-weight: 400; padding: .15rem 0; }
/* Bundle product picker */
/* Bundle name / description / price / discount on one row: description widest, price + % narrow */
.admin-form .field-row.bundle-meta-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 110px 110px;
  align-items: start;
}
@media (max-width: 680px) { .admin-form .field-row.bundle-meta-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .admin-form .field-row.bundle-meta-row { grid-template-columns: 1fr; } }
.bundle-picker { margin-top: .35rem; align-items: stretch; }
/* Live pricing summary in the picker's right panel */
.bundle-picker-summary {
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: .2rem;
}
.bundle-picker-summary > div { display: flex; justify-content: space-between; font-size: .82rem; }
.bundle-picker-summary > div span { color: var(--muted); }
.bundle-picker-summary-net strong { color: var(--success); }
.bundle-picker-left,
.bundle-picker-right {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: .65rem .75rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.bundle-picker-left h4,
.bundle-picker-right h4 {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .15rem;
}
.bundle-picker-left .checklist-search { width: 100%; }
.bundle-picker-scroll,
.bundle-picker-selected-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 220px;
}
.bundle-picker-product-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}
.bundle-picker-product-row:last-child { border-bottom: 0; }
.bundle-picker-product-row.is-selected { opacity: .55; }
.bundle-picker-product-row img,
.bundle-picker-no-img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.bundle-picker-no-img { background: var(--panel-alt); }
.bundle-picker-product-info { flex: 1; min-width: 0; }
.bundle-picker-product-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle-picker-product-info .muted { font-size: .76rem; }
.bundle-picker-added { font-size: .75rem; color: var(--success); font-weight: 600; flex-shrink: 0; }
.bundle-picker-selected-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}
.bundle-picker-selected-row:last-child { border-bottom: 0; }
.bundle-picker-remove { color: var(--danger); font-size: 1rem; line-height: 1; padding: 2px 6px; flex-shrink: 0; }
.bundle-picker-empty { font-size: .84rem; color: var(--faint); margin: auto 0; text-align: center; padding: 1rem 0; }
/* $ / % adornment shown inside a number input */
.admin-form .adorn { position: relative; }
.admin-form .adorn > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .9rem; }
.admin-form .adorn.adorn-pre > span { left: 11px; }
.admin-form .adorn.adorn-pre input { padding-left: 24px; }
.admin-form .adorn.adorn-post > span { right: 12px; }
.admin-form .adorn.adorn-post input { padding-right: 26px; }
.admin-subcard { border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; background: var(--paper); }
.admin-subcard + .admin-subcard { margin-top: .75rem; }
.admin-subcard-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .6rem; }
.admin-form-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .35rem; }
@media (max-width: 720px) { .admin-grid-2 { grid-template-columns: 1fr; } }
/* Responsive: header wraps; nav drops to its own row and scrolls horizontally. */
@media (max-width: 860px) {
  .admin-header-inner { flex-wrap: wrap; gap: .5rem; padding: .5rem var(--sp-md); }
  .admin-sidebar-foot { margin-left: auto; }
  .admin-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-nav-section {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
    padding-right: .35rem;
    flex: 0 0 auto;
  }
  .admin-nav-section + .admin-nav-section { padding-left: .65rem; }
  .admin-nav-links { flex-wrap: nowrap; }
  .admin-main { padding: 0 var(--sp-md); }
}

/* ===== STOREFRONT MERCHANDISING UPGRADES ===== */
.hero-panel {
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr);
}
.hero-panel img {
  aspect-ratio: 16 / 10;
  height: clamp(320px, 34vw, 470px);
  object-fit: cover;
  object-position: center;
}
.hero-banner {
  display: block;
  padding: 0;
  overflow: hidden;
}
.hero-banner img {
  width: 100%;
  aspect-ratio: 2173 / 724;
  height: auto;
  max-height: none;
  object-fit: cover;
  background: #f6eadc;
  border-radius: var(--r-lg);
  box-shadow: none;
}

.category-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.category-card {
  position: relative;
  min-height: 220px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: #fff;
  background: var(--teal-dark);
  box-shadow: var(--shadow-sm);
}
.category-card:hover { text-decoration: none; }
.category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .24s ease, opacity .24s ease;
}
.category-card:hover img {
  transform: scale(1.04);
  opacity: .94;
}
.category-card::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to bottom, rgba(9,61,66,0), rgba(9,61,66,.86));
}
.category-card span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: var(--sp-lg);
}
.category-card strong {
  color: #fff;
  font-family: var(--heading-font);
  font-size: 1.45rem;
  line-height: 1.1;
}
.category-card small {
  color: rgba(255,255,255,.82);
  font-weight: 700;
}
.feature-card { min-height: 280px; }

.scent-panel {
  background: linear-gradient(135deg, #fffaf4, #f6eadc);
}
.finder-panel {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 210px) minmax(160px, 210px) auto;
  gap: var(--sp-md);
  align-items: end;
  margin-bottom: var(--sp-md);
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
.finder-panel h3 {
  font-size: 1.15rem;
}
.finder-panel label,
.status-form label,
.checkout-address-grid label {
  display: grid;
  gap: .3rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}
.finder-panel select,
.contact-form select,
.status-form input,
.checkout-address-grid input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
}

.badge-row {
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  color: #fff;
  background: var(--berry);
  font-size: .7rem;
  font-weight: 900;
}
.product-badge.soft {
  color: var(--teal-dark);
  background: rgba(15,95,97,.1);
}
.product-card {
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.product-card figure {
  min-height: 150px;
}
.product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.product-body {
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
}
.product-actions {
  /* One compact row: the Add button (or quantity stepper) stretches to fill,
     with the wishlist heart beside it. */
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.card-qty {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: stretch;
  justify-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
.card-qty button {
  min-width: 34px;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  background: var(--panel);
}
.card-qty span {
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 900;
}
.icon-like {
  width: 36px;
  min-width: 36px;
  display: inline-grid;
  place-items: center;
  color: var(--berry);
  font-size: 1.2rem;
}
.icon-like.saved {
  color: #fff;
  border-color: var(--berry);
  background: var(--berry);
}

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-md);
}
.bundle-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-md);
  align-items: center;
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
.bundle-card .btn {
  grid-column: 1 / -1;
}
.bundle-image-stack {
  position: relative;
  height: 92px;
}
.bundle-image-stack img {
  position: absolute;
  width: 62px;
  height: 62px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
}
.bundle-image-stack img:nth-child(1) { left: 0; top: 0; z-index: 3; }
.bundle-image-stack img:nth-child(2) { left: 24px; top: 16px; z-index: 2; }
.bundle-image-stack img:nth-child(3) { left: 8px; top: 32px; z-index: 1; }

.related-products {
  margin: 0 var(--sp-xl) var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
}
.related-products > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
}
.related-products button {
  display: grid;
  gap: var(--sp-xs);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-sm);
  background: #fff;
  color: var(--teal-dark);
  text-align: left;
}
.related-products img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.fulfillment-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.fulfillment-toggle label {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--paper);
  color: var(--teal-dark);
  font-weight: 900;
}
.shipping-fields {
  display: grid;
  gap: var(--sp-sm);
}
.checkout-address-grid {
  display: grid;
  grid-template-columns: 1fr 88px 120px;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.addr-picker {
  display: grid;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}
.addr-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  background: var(--paper);
  transition: border-color .12s, box-shadow .12s;
}
.addr-option:hover { border-color: var(--teal); }
.addr-option--selected {
  border-color: var(--teal-dark);
  box-shadow: 0 0 0 1px var(--teal-dark);
}
.addr-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--teal-dark);
}
.addr-option-body {
  display: grid;
  gap: .1rem;
  font-size: .875rem;
  line-height: 1.4;
}
.addr-option-body strong { color: var(--ink); }
.addr-option-body span { color: var(--muted); }
.addr-option-new { color: var(--teal-dark); }
.save-address-wrap { margin-top: var(--sp-xs); }

/* LocationIQ address autofill dropdown */
.address-autocomplete { position: relative; display: block; }
.address-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  max-height: 260px;
  overflow-y: auto;
}
.address-suggestion {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
}
.address-suggestion:hover,
.address-suggestion.is-active {
  background: var(--teal);
  color: #fff;
}

.support-page {
  max-width: 760px;
}
.support-card {
  display: grid;
  gap: var(--sp-md);
}
.status-form {
  display: grid;
  gap: var(--sp-md);
  max-width: 520px;
}
.order-result .panel-head {
  align-items: start;
}
.status-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xs);
  margin: var(--sp-md) 0;
}
.status-steps span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  background: var(--paper);
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}
.status-steps span.done {
  color: #fff;
  border-color: var(--success);
  background: var(--success);
}
.order-lines {
  display: grid;
  gap: var(--sp-xs);
}
.order-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--border);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs);
}
.footer-links a {
  color: rgba(255,255,255,.84);
  font-size: .84rem;
}

@media (max-width: 960px) {
  .category-showcase,
  .bundle-grid {
    grid-template-columns: 1fr;
  }
  .feature-card,
  .category-card {
    min-height: 210px;
  }
  .finder-panel {
    grid-template-columns: 1fr 1fr;
  }
  .finder-panel > div,
  .finder-panel .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: static;
  }
  .brand {
    width: 160px;
  }
  .header-inner {
    grid-template-columns: 1fr auto;
    gap: .55rem;
    padding: 9px var(--sp-sm) 10px;
  }
  .header-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    gap: .25rem .35rem;
    max-width: 230px;
  }
  .header-actions a {
    padding: 4px 3px;
    font-size: .84rem;
    line-height: 1.15;
  }
  .header-search-wrap {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
  .header-search input {
    padding: 10px 12px;
  }
  .header-search button {
    padding-inline: 14px;
  }
  .cart-toggle {
    padding: 5px 9px;
    font-size: .84rem;
  }
  .cart-toggle span {
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
  }
  .hero-panel {
    grid-template-columns: 1fr;
  }
  .hero-panel img {
    aspect-ratio: 4 / 3;
    height: 380px;
  }
  .hero-banner img {
    aspect-ratio: 2173 / 724;
    height: auto;
    max-height: none;
  }
  .product-actions {
    grid-template-columns: 1fr auto;
  }
  .related-products {
    margin-inline: var(--sp-md);
  }
  .related-products > div,
  .status-steps {
    grid-template-columns: 1fr 1fr;
  }
  .checkout-address-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .finder-panel,
  .fulfillment-toggle {
    grid-template-columns: 1fr;
  }
  .product-card figure {
    min-height: 230px;
  }
  .product-card img {
    width: 100%;
    height: auto;
  }
  .hero-panel img {
    height: 360px;
  }
  .hero-banner img {
    height: auto;
  }
  .bundle-card {
    grid-template-columns: 1fr;
  }
}

/* ===== Promo bar ===== */
.promo-bar {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .55rem 1rem; font-size: .88rem; font-weight: 600; position: relative;
}
.promo-bar [data-promo-close] {
  position: absolute; right: .75rem; background: none; border: none;
  color: inherit; opacity: .7; font-size: 1.1rem; cursor: pointer; padding: 0 .25rem;
}

/* ===== Footer rich ===== */
.site-footer {
  background:
    linear-gradient(180deg, rgba(255, 250, 244, .05), rgba(255, 250, 244, 0)),
    var(--teal-dark);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(130px, .8fr) minmax(150px, .9fr) minmax(240px, 1.25fr);
  align-items: start;
  gap: clamp(1.4rem, 4vw, 3rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.75rem var(--sp-lg) 2rem;
}
.footer-brand img {
  width: 140px;
  margin-bottom: .9rem;
}
.footer-brand p {
  max-width: 280px;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  line-height: 1.55;
}
.footer-brand .footer-note {
  margin-top: .85rem;
  padding-left: .8rem;
  border-left: 3px solid var(--orange-soft);
  color: rgba(255,255,255,.62);
  font-size: .82rem;
}
.footer-nav h4,
.footer-contact h4,
.footer-newsletter label {
  margin-bottom: .7rem;
  color: var(--orange-soft);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: .48rem;
}
.footer-nav a {
  width: fit-content;
  color: rgba(255,255,255,.82);
  font-size: .9rem;
  line-height: 1.25;
}
.footer-nav a:hover {
  color: #fff;
  text-decoration-color: var(--orange-soft);
  text-underline-offset: 4px;
}
.footer-contact {
  display: grid;
  gap: .8rem;
}
.footer-contact-card {
  padding: .95rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
}
.footer-contact p {
  color: rgba(255,255,255,.76);
  font-size: .86rem;
  line-height: 1.4;
}
.footer-contact p:empty { display: none; }
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-social:empty { display: none; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  padding: .35rem .75rem;
  color: #fff;
  background: rgba(255,255,255,.07);
  font-size: .82rem;
  font-weight: 800;
}
.footer-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  padding-top: .15rem;
}
.footer-newsletter label,
.footer-newsletter .form-status {
  grid-column: 1 / -1;
}
.footer-newsletter input {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.95);
}
.footer-newsletter .btn {
  min-height: 39px;
  border-color: transparent;
  color: var(--teal-dark);
  background: var(--orange-soft);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  padding: 1rem;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
}
.order-status-link { display: block; text-align: center; margin-top: .5rem; font-size: .82rem; color: var(--muted); }

/* ===== Admin operations ===== */
.ops-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-sm);
}
.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}
.ops-pipeline,
.ops-list {
  display: grid;
  gap: var(--sp-xs);
}
.ops-pipeline div,
.ops-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.ops-list-row span {
  display: grid;
  min-width: 0;
}
.ops-list-row small {
  color: var(--muted);
  font-size: .78rem;
}
.ops-order-list {
  display: grid;
  gap: var(--sp-md);
}
.ops-order-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, .45fr)) auto;
  gap: var(--sp-sm);
  align-items: end;
}
.ops-order-card .full,
.ops-order-card .form-status {
  grid-column: 1 / -1;
}
.ops-order-card label {
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.ops-order-card input,
.ops-order-card select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  background: #fff;
}

@media (max-width: 960px) {
  .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-grid,
  .ops-order-card { grid-template-columns: 1fr; }
}

/* ===== Recently viewed ===== */
.recently-viewed-section { margin-top: var(--sp-xl); }
.recently-viewed-section h2 { margin-bottom: 1rem; }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1.2fr 1fr; gap: 1.75rem; }
  .footer-contact { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; padding-inline: var(--sp-md); }
  .footer-contact { grid-column: auto; grid-template-columns: 1fr; }
  .footer-newsletter { grid-template-columns: 1fr; }
}

/* ===== BLOG ===== */
.blog-section { margin-top: var(--sp-xl); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-lg);
}
.blog-card {
  display: grid;
  grid-template-rows: 180px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.blog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card-noimage {
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--faint);
  font-size: .85rem;
}
.blog-card-body {
  display: grid;
  gap: var(--sp-xs);
  padding: var(--sp-md);
}
.blog-card-body h3 {
  font-size: 1rem;
  color: var(--teal-dark);
  line-height: 1.2;
}
.blog-card-body .muted {
  font-size: .78rem;
}
.blog-card-body p {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}
.blog-detail {
  max-width: 720px;
  margin: 0 auto;
}
.blog-detail img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-lg);
}
.blog-detail h2 {
  margin-bottom: var(--sp-sm);
}
.blog-detail .blog-meta {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: var(--sp-lg);
}
.blog-body {
  line-height: 1.7;
  color: var(--ink);
}
.blog-body p { margin-bottom: var(--sp-md); }
.blog-body h3 { margin-top: var(--sp-lg); margin-bottom: var(--sp-sm); }
.blog-body ul, .blog-body ol { margin-bottom: var(--sp-md); padding-left: 1.2rem; }
.blog-body li { margin-bottom: var(--sp-xs); }
.blog-body blockquote {
  border-left: 3px solid var(--orange);
  padding: var(--sp-sm) var(--sp-md);
  margin: var(--sp-md) 0;
  background: var(--cream);
  color: var(--muted);
  font-style: italic;
}
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-lg);
  color: var(--teal);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
.blog-back:hover { text-decoration: underline; }

/* ===== CHAT WIDGET ===== */
.chat-container {
  position: fixed;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-sm);
}
.chat-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease;
}
.chat-toggle:hover { transform: scale(1.05); background: var(--teal-dark); }
.chat-toggle.open { background: var(--danger); }
.chat-widget {
  width: 340px;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat-header {
  padding: var(--sp-md) var(--sp-lg);
  background: var(--teal-dark);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.chat-messages {
  flex: 1;
  min-height: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--sp-md);
  display: grid;
  align-content: start;
  gap: var(--sp-sm);
}
.chat-msg {
  max-width: 85%;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-md);
  font-size: .85rem;
  line-height: 1.4;
}
.chat-msg.bot {
  justify-self: start;
  background: var(--cream);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  justify-self: end;
  background: var(--teal);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg .chat-time {
  display: block;
  font-size: .68rem;
  opacity: .7;
  margin-top: 3px;
}
.chat-form {
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border-top: 1px solid var(--border);
  background: var(--paper);
}
.chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 12px;
  font-size: .85rem;
  background: #fff;
  outline: none;
}
.chat-input:focus { border-color: var(--teal); }
.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-size: 1rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-send-btn:hover { background: var(--teal-dark); }
.chat-send-btn:disabled { opacity: .5; cursor: not-allowed; }
.chat-welcome {
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  padding: var(--sp-md);
}

/* ===== ACCOUNT DASHBOARD ===== */
.account-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.account-summary-card {
  display: grid;
  gap: .12rem;
  min-height: 92px;
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  text-align: left;
}
.account-summary-card.action {
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.account-summary-card.action:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.account-summary-card span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.account-summary-card strong {
  overflow-wrap: anywhere;
  color: var(--teal-dark);
  font-size: 1rem;
  line-height: 1.2;
}
.account-summary-card small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.account-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
}
.account-tab {
  padding: var(--sp-sm) var(--sp-lg);
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .12s, border-color .12s;
}
.account-tab:hover { color: var(--teal); }
.account-tab.active {
  color: var(--teal-dark);
  border-bottom-color: var(--orange);
}
.account-panel { display: none; }
.account-panel.active { display: block; }
.account-panel h2 {
  font-size: 1.1rem;
  margin-bottom: var(--sp-md);
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md);
  align-items: start;
}
.account-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: var(--sp-lg);
}
.account-card-head {
  display: grid;
  gap: .25rem;
  margin-bottom: var(--sp-md);
}
.account-card-head h3 {
  margin: 0;
  color: var(--teal-dark);
  font-size: 1rem;
}
.account-form {
  display: grid;
  gap: var(--sp-sm);
}
.account-form label {
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.account-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
}
.account-form input:disabled {
  opacity: .62;
  cursor: not-allowed;
  background: var(--panel-alt);
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  margin-top: .25rem;
}
.order-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
  background: var(--paper);
}
.order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}
.order-card-id {
  font-weight: 700;
  font-size: .85rem;
  color: var(--teal-dark);
}
.order-card-status {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.order-card-status.paid { background: rgba(78, 116, 73, .12); color: var(--success); }
.order-card-status.shipped { background: rgba(15, 95, 97, .12); color: var(--teal); }
.order-card-status.pending { background: rgba(224, 120, 63, .12); color: var(--orange); }
.order-card-status.cancelled { background: rgba(181, 64, 52, .12); color: var(--danger); }
.order-card-meta {
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  gap: var(--sp-md);
}
.order-card-total {
  font-weight: 900;
  color: var(--berry);
  margin-top: var(--sp-xs);
}
.address-list {
  display: grid;
  gap: var(--sp-sm);
}
.address-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
.address-card p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.address-card button {
  border: 0;
  background: none;
  color: var(--danger);
  font-size: .82rem;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.address-card button:hover { text-decoration: underline; }
.address-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
.address-form .full { grid-column: 1 / -1; }
.address-form label {
  display: grid;
  gap: .2rem;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 700;
}
.address-form input {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  background: #fff;
}
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-sm);
}
.wishlist-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-sm);
  background: var(--paper);
  text-align: center;
}
.wishlist-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: var(--sp-xs);
}
.wishlist-item h4 {
  font-size: .88rem;
  color: var(--teal-dark);
  margin-bottom: 2px;
}
.wishlist-item .price {
  font-size: .85rem;
}
.wishlist-item button {
  margin-top: var(--sp-xs);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  background: var(--panel);
  font-size: .78rem;
  cursor: pointer;
}
.wishlist-item button:hover { background: var(--panel-alt); }

/* ===== GIFT CARD FORM ===== */
.gift-card-form {
  max-width: 520px;
  margin: 0 auto;
}
.gift-card-form h2 {
  margin-bottom: var(--sp-md);
}
.gift-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}
.gift-card-grid .full { grid-column: 1 / -1; }
.gift-card-grid label {
  display: grid;
  gap: .25rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
}
.gift-card-grid input,
.gift-card-grid textarea,
.gift-card-grid select {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  background: var(--paper);
  color: var(--ink);
}
.gift-card-grid input:focus,
.gift-card-grid textarea:focus {
  border-color: var(--teal);
  outline: none;
}

/* ===== REVIEW IMAGES ===== */
.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}
.review-images img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .12s ease;
}
.review-images img:hover {
  transform: scale(1.1);
}
.review-image-upload {
  display: grid;
  gap: var(--sp-xs);
}
.review-image-upload input[type="file"] {
  font-size: .82rem;
}
.review-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.review-image-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* ===== PRODUCT DIALOG ENHANCEMENTS ===== */
.dialog-content .spec-list {
  margin: var(--sp-sm) 0;
}
.dialog-content .notes {
  margin: var(--sp-xs) 0 var(--sp-sm);
  padding-left: 1.1rem;
  columns: 2;
  color: var(--muted);
  font-size: .85rem;
}
.dialog-content .notes li {
  margin-bottom: .2rem;
}
.dialog-content .restock-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}
.dialog-content .restock-form input {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: .85rem;
}
.dialog-content .reviews {
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-md);
}
.dialog-content .reviews h3 {
  margin-bottom: var(--sp-sm);
}
.dialog-content .review {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
}
.dialog-content .review:last-child {
  border-bottom: 0;
}
.dialog-content .review .rating {
  margin: 0;
}
.dialog-content .review-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--teal-dark);
}
.dialog-content .review-date {
  font-size: .75rem;
  color: var(--faint);
}
.dialog-content .review-body {
  color: var(--muted);
  font-size: .88rem;
  margin-top: 2px;
}
.dialog-content .review-form {
  display: grid;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
}
.dialog-content .review-form label {
  display: grid;
  gap: .25rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
}
.dialog-content .review-form input,
.dialog-content .review-form textarea,
.dialog-content .review-form select {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  background: var(--paper);
  color: var(--ink);
}

/* ===== GIFT CARD REDEMPTION IN CHECKOUT ===== */
.checkout-giftcard-row {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.checkout-giftcard-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
}
.checkout-giftcard-status {
  font-size: .82rem;
  min-height: 1.2em;
  margin-bottom: var(--sp-sm);
}
.checkout-giftcard-status.ok { color: var(--success); }
.checkout-giftcard-status.error { color: var(--danger); }

/* ===== BLOG PAGE ===== */
.blog-page-header {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.blog-page-header h1 {
  margin-bottom: var(--sp-xs);
}
.blog-page-header p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Order History Page                                                  */
/* ------------------------------------------------------------------ */
.order-history-page {
  max-width: 780px;
  margin: 0 auto;
}

/* Filters bar */
.order-filters {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--border);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-group label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.filter-group select,
.filter-group input {
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: .85rem;
  min-width: 140px;
}
.filter-group.search-group {
  flex: 1;
  min-width: 180px;
}
.filter-group.search-group input {
  width: 100%;
  min-width: 0;
}

/* Loading state */
.order-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}


/* Empty state */
.empty-state-card {
  text-align: center;
  padding: 3rem 1rem;
}
.empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--sp-md);
}
.empty-state-card h3 {
  margin-bottom: var(--sp-sm);
  font-family: var(--heading-font);
}
.empty-state-card p {
  color: var(--muted);
  margin-bottom: var(--sp-lg);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Order list */
.order-list {
  display: grid;
  gap: var(--sp-sm);
}

/* Enhanced order cards for the order history page */
.order-card {
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
  position: relative;
}
.order-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.order-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.order-card::after {
  content: "›";
  position: absolute;
  right: var(--sp-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--faint);
  font-weight: 700;
}
.order-card-items {
  font-size: .82rem;
  margin: var(--sp-xs) 0;
  padding-right: 1.5rem;
}

/* Order detail dialog */
.order-detail-dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 600px;
  width: calc(100% - 24px);
  max-height: 85vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.order-detail-dialog::backdrop {
  background: rgba(0,0,0,.4);
}
.order-detail-panel {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.order-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-lg);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}
.order-detail-head h2 {
  font-size: 1rem;
  font-family: var(--body-font);
  color: var(--teal-dark);
}
.order-detail-body {
  padding: var(--sp-lg);
  overflow-y: auto;
}

/* Status bar */
.order-detail-status-bar {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  align-items: center;
}
.order-detail-payment-status {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.order-detail-payment-status.paid { background: rgba(78, 116, 73, .12); color: var(--success); }
.order-detail-payment-status.pending { background: rgba(224, 120, 63, .12); color: var(--orange); }
.order-detail-payment-status.refunded { background: rgba(139, 61, 85, .12); color: var(--berry); }

/* Info grid */
.order-detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
  padding: var(--sp-md);
  background: var(--cream);
  border-radius: var(--r-md);
}
.order-detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-detail-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

/* Items section */
.order-detail-section {
  margin-bottom: var(--sp-lg);
}
.order-detail-section h3 {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: var(--sp-sm);
}
.order-detail-items {
  display: grid;
  gap: var(--sp-sm);
}
.order-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
}
.order-detail-item:last-child {
  border-bottom: none;
}
.order-detail-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.order-detail-item-name {
  font-weight: 600;
  font-size: .9rem;
}
.order-detail-item-qty {
  font-size: .78rem;
  color: var(--muted);
}
.order-detail-item-price {
  font-weight: 700;
  font-size: .9rem;
}

/* Summary */
.order-detail-summary {
  display: grid;
  gap: var(--sp-xs);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .88rem;
}
.summary-row span:last-child {
  font-weight: 600;
}
.summary-discount span:last-child {
  color: var(--success);
}
.summary-total {
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-sm);
  margin-top: var(--sp-xs);
  font-size: 1rem;
}
.summary-total span:last-child {
  font-size: 1.1rem;
  color: var(--berry);
}

/* Responsive */
@media (max-width: 860px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-grid { grid-template-columns: 1fr; }
  .gift-card-grid { grid-template-columns: 1fr; }
  .address-form { grid-template-columns: 1fr; }
  .order-filters { flex-direction: column; align-items: stretch; }
  .filter-group select,
  .filter-group input { min-width: 0; width: 100%; }
  .order-detail-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .account-summary { grid-template-columns: 1fr; }
  .account-card { padding: var(--sp-md); }
  .account-actions .btn { width: 100%; }
  .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-widget { width: calc(100vw - 24px); max-height: 70vh; }
}

/* ─── Product detail page ──────────────────────────────────────────────────── */
.product-card[data-product-id] { cursor: pointer; }
.product-title-link {
  color: inherit;
  text-decoration: none;
}
.product-title-link:hover { text-decoration: underline; }

.product-main { display: block; }
.breadcrumbs {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange); text-decoration: underline; }
.breadcrumbs span { margin: 0 .35rem; }

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: var(--sp-xl);
  align-items: start;
}
.product-gallery { display: grid; gap: var(--sp-sm); }
.product-gallery-main {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: white;
  overflow: hidden;
}
.product-gallery-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}
.product-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.product-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: white;
  cursor: pointer;
  overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-thumb.is-active { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }

.product-info h1 { margin: .25rem 0 var(--sp-sm); }
.product-info .product-desc { color: var(--muted); margin: var(--sp-sm) 0; }
.product-price { font-size: 1.5rem; margin: var(--sp-sm) 0 .25rem; }
.product-stock {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 999px;
  margin-bottom: var(--sp-sm);
}
.product-stock.in { background: rgba(40, 140, 80, .12); color: #1f7a45; }
.product-stock.out { background: rgba(180, 60, 40, .12); color: #a8331f; }
.product-buy {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin: var(--sp-md) 0;
  flex-wrap: wrap;
}
.product-reviews { max-width: 720px; }

@media (max-width: 760px) {
  .product-page { grid-template-columns: 1fr; }
}

/* ─── Product detail: rating summary + tabbed Description / Reviews ──────────── */
.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  margin: 0 0 var(--sp-xs);
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.rating-summary:hover { opacity: .75; }
.rating-summary.is-empty { color: var(--muted); }

.review-gate { margin-top: var(--sp-sm); }
.review-gate p { margin: 0; }
.review-gate a { color: var(--orange); }

.product-tabs { margin-top: var(--sp-md); }
.product-tablist {
  display: flex;
  gap: var(--sp-md);
  border-bottom: 1px solid var(--border);
}
.product-tab {
  padding: .5rem .15rem;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.product-tab:hover { color: var(--ink); }
.product-tab.is-active,
.product-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--orange);
}
.product-tabpanel { padding-top: var(--sp-md); }
.product-tabpanel:focus { outline: none; }

.review-scroll {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--sp-sm);
  padding-right: var(--sp-xs);
}
.review-scroll .review:last-child { border-bottom: 0; }
.product-tabpanel .review-form { margin-top: var(--sp-sm); }