:root {
  --color-bg: #DDDDD8;
  --color-surface: #ffffff;
  --color-border: #e5e1da;
  --color-text: #211f1c;
  --color-text-muted: #6b6459;
  --color-primary: #073269;
  --color-primary-dark: #052241;
  --color-primary-light: #2e72b8;
  --color-danger: #b3413a;
  --color-danger-dark: #922f29;
  --color-success: #073269;
  --radius: 0;
  --shadow: 0 1px 2px rgba(30, 25, 15, 0.06), 0 4px 12px rgba(30, 25, 15, 0.05);
  font-family: 'Maitree', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: 600; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Maitree', Georgia, 'Times New Roman', serif;
  color: var(--color-primary);
  font-weight: 300;
}

h1 { font-size: 1.75rem; margin: 0.2em 0 0.3em; }
h2 { font-size: 1.2rem; margin: 0.5em 0 0.25em; }

/* Header */
/* Site-wide promotional strip, above the header. */
.promo-banner {
  display: flex;
  align-items: center;
  background: #dbeedd;
  color: #17482c;
  border-bottom: 1px solid #c2ddc7;
  white-space: nowrap;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 6px 0;
}
/* `overflow: hidden` here is what makes the crawl work: the track is wider than the viewport and
   slides left under this clip. It sits on an inner element rather than on .promo-banner so the
   pause control stays outside the clipped, moving region. */
.promo-banner-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Two identical halves side by side, translated by exactly half the track's width so the second
   half lands where the first began and the loop restarts with no visible jump. `width: max-content`
   keeps the track sized to its text rather than to the viewport. */
.promo-banner-track {
  display: flex;
  width: max-content;
  animation: promo-banner-crawl 35s linear infinite;
}
/* At least viewport-wide, or the shift would drag the end of the track into view and leave a blank
   gap before the loop restarts. Wider than its text on most screens, so the sentences are spread
   across it rather than bunched at one edge. */
.promo-banner-half {
  display: flex;
  flex: none;
  min-width: 100vw;
  justify-content: space-around;
}
.promo-banner-text {
  padding: 0 2rem;
}
@keyframes promo-banner-crawl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Motion that can't be paused is a problem for vestibular disorders, and this site commits to
   WCAG 2.1 AA. Readers who ask for reduced motion get the same sentence, centred and still. */
/* WCAG 2.2.2 (Pause, Stop, Hide): motion that starts on its own and runs past five seconds needs a
   way to stop it. A checkbox drives this rather than a scripted button so the control works with no
   JavaScript; the checkbox itself is hidden from sight but still focusable and operable, with the
   label beside it acting as the visible target. */
.promo-banner-pause-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.promo-banner-toggle {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 10px;
  cursor: pointer;
  color: inherit;
}
/* Focus lands on the visually hidden checkbox, so the ring has to be drawn on its label instead, or
   a keyboard user cannot tell where they are. */
.promo-banner-pause-input:focus-visible ~ .promo-banner-toggle {
  outline: 2px solid #17482c;
  outline-offset: -2px;
}
.promo-banner-pause-input:checked ~ .promo-banner-viewport .promo-banner-track {
  animation-play-state: paused;
}
/* The icon shows the action the control will perform, so it flips with the state. */
.promo-banner-icon-play { display: none; }
.promo-banner-pause-input:checked ~ .promo-banner-toggle .promo-banner-icon-pause { display: none; }
.promo-banner-pause-input:checked ~ .promo-banner-toggle .promo-banner-icon-play { display: inline; }
/* Reachable by screen readers and by keyboard, but not taking space in a 29px strip. */
.promo-banner-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .promo-banner-track { animation: none; width: 100%; }
  .promo-banner-half { min-width: 100%; justify-content: center; }
  .promo-banner-half[aria-hidden='true'] { display: none; }
  .promo-banner-text[aria-hidden='true'] { display: none; }
  .promo-banner-text { padding: 0; }
  /* Nothing is moving, so there is nothing to pause. */
  .promo-banner-toggle { display: none; }
}

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px;
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
}
.logo img {
  height: 54px;
  width: auto;
  display: block;
}
.logo:hover { text-decoration: none; }
.search-form {
  flex: 1;
  display: flex;
  min-width: 200px;
  gap: 6px;
}
.search-form input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: 'Maitree', Georgia, 'Times New Roman', serif;
  font-weight: 300;
}
.search-form button {
  padding: 7px 14px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-family: 'Maitree', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  border-radius: var(--radius);
  cursor: pointer;
}
.search-form button:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.main-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--color-primary);
}
.hamburger-icon { width: 24px; height: 24px; display: block; }
@media (max-width: 640px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
  }
  .nav-toggle { display: inline-flex; grid-column: 1; grid-row: 1; }
  .logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav-link-cart { grid-column: 3; grid-row: 1; justify-self: end; }
  .search-form { grid-column: 1 / -1; grid-row: 2; padding-right: 24px; }
  .main-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
  }
  .main-nav.is-open { display: flex; }
}
.nav-link { color: #073269; font-weight: 300; position: relative; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav-link:hover { text-decoration: none; color: var(--color-primary-light); }
.nav-link-active { border-bottom-color: #073269; }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-dropdown-trigger::-webkit-details-marker { display: none; }
.nav-dropdown-trigger::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.nav-dropdown[open] .nav-dropdown-trigger::after { transform: rotate(-135deg) translateY(1px); }
.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  display: flex;
  gap: 40px;
  padding: 22px 28px;
  background: var(--color-primary);
  border: 1px solid #fff;
  color: #fff;
  box-shadow: var(--shadow);
  z-index: 50;
}
.nav-dropdown-column { display: flex; flex-direction: column; gap: 20px; min-width: 160px; white-space: nowrap; }
.nav-dropdown-section { display: flex; flex-direction: column; gap: 10px; }
.nav-dropdown-heading {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 4px;
  padding-bottom: 6px;
  color: #fff;
  border-bottom: 1px solid #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-dropdown-link { color: #fff; font-weight: 300; }
.nav-dropdown-link:hover { color: #fff; }
@media (max-width: 640px) {
  .nav-dropdown-panel {
    position: static;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
    padding: 4px 0 4px 14px;
    border: none;
    box-shadow: none;
  }
}
.nav-user {
  color: #073269;
  font-size: 16px;
  font-weight: 300;
  font-family: 'Maitree', Georgia, 'Times New Roman', serif;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav-user:hover { text-decoration: none; color: var(--color-primary-light); border-bottom-color: var(--color-primary-light); }
.nav-user-active { border-bottom-color: #073269; }
.nav-user-icon { width: 18px; height: 18px; display: block; }
.main-nav .link-button {
  color: #073269;
  font-size: 16px;
  font-weight: 300;
  font-family: 'Maitree', Georgia, 'Times New Roman', serif;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.main-nav .link-button:hover { color: var(--color-primary-light); }
.main-nav .link-button:focus { border-bottom-color: #073269; outline: none; }
.badge {
  background: var(--color-primary);
  color: #fff;
  border-radius: 0;
  padding: 1px 7px;
  font-size: 0.75rem;
  margin-left: 2px;
}
.nav-link-cart {
  display: inline-flex;
  align-items: center;
}
.cart-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.nav-link-cart .badge {
  position: absolute;
  top: -10px;
  right: -12px;
  padding: 0 5px;
  font-size: 0.65rem;
  line-height: 1.5;
  margin-left: 0;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 0.95rem;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-dark); }
.btn-disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.btn-sm { padding: 3px 9px; font-size: 0.8rem; margin-left: 8px; }
.ai-generate-status { margin-left: 8px; color: var(--color-danger); }
.ai-generate-row { margin: 6px 0 0; }
.ai-generate-row .ai-generate-btn { margin-left: 0; }
.link-button {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  text-decoration: underline;
}
.inline-form { display: inline; }

/* Flash */
.flash {
  padding: 8px 12px;
  border-radius: var(--radius);
  margin: 8px 0;
  font-size: 0.95rem;
}
.flash-success { background: #e4f3ee; color: var(--color-primary-dark); border: 1px solid #bfe3d5; }
.flash-error { background: #fbeceb; color: var(--color-danger); border: 1px solid #f0cfcb; }
.flash ul { margin: 0; padding-left: 20px; }

/* Catalog */
.welcome-banner { margin: 14px auto 0; max-width: 640px; text-align: center; }
.welcome-banner h1 { margin-bottom: 0.2em; }
.welcome-banner p { color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* Hero banner — full-bleed background image + 75% black overlay, mirrors the Figma
   "Hero Banner" component. The calc(50% - 50vw) margins break the section out of .container's
   max-width entirely so it spans the full browser viewport, not just the container's own box. */
.hero {
  position: relative;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.hero-inner { max-width: 640px; padding: 40px 24px; }
.hero-logo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto 16px;
}
.hero-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px;
}
.hero-cta { background: #fff; color: var(--color-text); border-color: var(--color-border); padding: 14px 32px; }
.hero-cta:hover { background: var(--color-bg); text-decoration: none; }
@media (max-width: 640px) {
  .hero { min-height: 360px; }
  .hero-inner { padding: 28px 20px; }
}

.catalog-header { margin-top: 10px; }

/* About page — full-bleed hero band, metals/stones swatch strips, labeled story sections.
   The hero uses the same calc(50% - 50vw) full-bleed trick as .hero above. */
.about-hero {
  position: relative;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 40px 56px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #0a4a86 100%);
}
.about-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px;
}
.about-hero-logo { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 14px; }
.about-hero-text { color: rgba(255, 255, 255, 0.82); max-width: 46ch; margin: 0 auto; font-size: 1.05rem; line-height: 1.6; }
.about-hero-wave { display: block; width: 100%; max-width: 400px; height: 24px; margin: 36px auto 0; }

.about-materials-block { max-width: 900px; margin: 0 auto; background: var(--color-bg); }
.about-materials-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 12px 0 0;
  margin: 0;
}
.about-materials { display: flex; justify-content: center; flex-wrap: wrap; }
.about-materials-block + .about-materials-block .about-materials { border-bottom: 1px solid var(--color-border); }
.about-material { flex: 1 1 100px; text-align: center; padding: 14px 8px 18px; border-left: 1px solid var(--color-border); }
.about-material:first-child { border-left: none; }
.about-chip { display: block; width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 7px; border: 1px solid rgba(33, 31, 28, 0.08); }
.about-material-name { display: block; font-size: 0.68rem; letter-spacing: 0.02em; color: var(--color-text-muted); }

.about-sections { max-width: 900px; margin: 0 auto; }
.about-section { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 34px 20px; border-bottom: 1px solid var(--color-border); }
.about-section:last-child { border-bottom: none; }
.about-section-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #a15a37;
  margin: 4px 0 0;
}
.about-section-body p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 14px; max-width: 62ch; }
.about-section-body p:last-child { margin-bottom: 0; }
.about-pullquote { font-size: 1.2rem; font-style: italic; color: var(--color-text); max-width: 44ch; margin: 6px 0 0; }
.about-signature { color: var(--color-primary); font-size: 1.05rem; margin: 6px 0 0; }

.about-footer { max-width: 900px; margin: 0 auto; padding: 30px 20px 10px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.about-footer-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--color-text-muted); margin: 0 0 8px; }
.about-footer address { font-style: normal; color: var(--color-text-muted); line-height: 1.7; font-size: 0.95rem; }
.about-footer address a { color: var(--color-primary); text-decoration: none; }
.about-footer address a:hover { text-decoration: underline; }
.about-footer-coast { height: 28px; opacity: 0.5; }
@media (max-width: 640px) {
  .about-hero { padding: 44px 24px 36px; }
  .about-hero h1 { font-size: 1.9rem; }
  .about-section { grid-template-columns: 1fr; padding: 26px 20px; gap: 8px; }
}

/* Policy/support pages (Privacy, Returns, FAQ) — compact header band + jump nav, reusing the
   About page's label/body section pattern and footer treatment for visual consistency. */
.policy-header {
  position: relative;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 34px 40px 30px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #0a4a86 100%);
}
.policy-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 10px;
}
.policy-header h1 { color: #fff; margin: 0 0 6px; font-size: 1.9rem; }
.policy-header .updated { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; margin: 0; }

.policy-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 16px 24px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 26px;
}
.policy-jumpnav a {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  white-space: nowrap;
}
.policy-jumpnav a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.policy-intro { max-width: 62ch; margin: 0 auto 6px; padding: 0 24px; color: var(--color-text-muted); line-height: 1.7; }

.policy-sections { max-width: 900px; margin: 0 auto; padding-top: 6px; }
.policy-section { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding: 26px 24px; border-bottom: 1px solid var(--color-border); scroll-margin-top: 16px; }
.policy-section:last-child { border-bottom: none; }
.policy-section-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 600;
  color: #a15a37;
  margin: 4px 0 0;
}
.policy-section-body p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 1em; max-width: 62ch; }
.policy-section-body p:last-child { margin-bottom: 0; }
.policy-section-body ul { color: var(--color-text-muted); line-height: 1.7; margin: 0; padding-left: 1.4em; max-width: 62ch; }
.policy-section-body li { margin-bottom: 0.25em; }
.policy-section-body li:last-child { margin-bottom: 0; }

/* Composition/comparison bar charts — plain CSS, no charting library, consistent with the rest
   of this app's vanilla-JS/CSS UI pieces. */
.argentium-chart { display: flex; gap: 40px; flex-wrap: wrap; margin: 16px 0; max-width: 640px; }
.argentium-chart-group { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.argentium-chart-title { margin: 0 0 2px; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.argentium-chart-row { display: grid; grid-template-columns: 90px 1fr 52px; align-items: center; gap: 10px; }
.argentium-chart-label { font-size: 0.85rem; color: var(--color-text-muted); }
.argentium-chart-track { background: var(--color-bg); border: 1px solid var(--color-border); height: 14px; overflow: hidden; }
.argentium-chart-fill { height: 100%; }
.argentium-fill-silver { background: #9aa7b0; }
.argentium-fill-copper { background: #b3673f; }
.argentium-fill-germanium { background: var(--color-primary); }
.argentium-chart-value { font-size: 0.8rem; color: var(--color-text-muted); text-align: right; }
.argentium-chart-compare { flex-direction: column; gap: 6px; max-width: 560px; }
.argentium-compare-row { display: grid; grid-template-columns: 150px 1fr 74px; align-items: center; gap: 10px; }
.argentium-fill-standard { background: #c9a227; }
.argentium-fill-argentium { background: var(--color-primary); }
.argentium-value-standard { color: #a1841c; font-size: 0.8rem; }
.argentium-value-argentium { color: var(--color-primary); font-size: 0.8rem; font-weight: 600; }
@media (max-width: 640px) {
  .argentium-chart-row,
  .argentium-compare-row { grid-template-columns: 84px 1fr 48px; }
}

/* Content catalog (/blog) */
.content-catalog { max-width: 700px; margin: 6px auto 0; padding: 0 24px; display: flex; flex-direction: column; }
.content-catalog-item {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}
.content-catalog-item:first-child { padding-top: 6px; }
.content-catalog-item:last-child { border-bottom: none; }
.content-catalog-item:hover { text-decoration: none; }
.content-catalog-item:hover .content-catalog-title { color: var(--color-primary-light); }
.content-catalog-date { margin: 0 0 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.content-catalog-title { margin: 0 0 6px; font-size: 1.3rem; }
.content-catalog-synopsis { margin: 0; color: var(--color-text-muted); line-height: 1.6; max-width: 62ch; }

/* Reference tables (blog-measuring-your-wrist.ejs, blog-necklace-sizes.ejs) — a real <table> so
   columns line up correctly by content width regardless of how many columns there are, unlike a
   flexbox row (space-between only ever aligns cleanly for exactly two items). */
.spec-table { width: 100%; max-width: 480px; margin-top: 12px; border: 1px solid var(--color-border); border-collapse: collapse; }
.spec-table th,
.spec-table td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--color-border); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table thead th {
  background: var(--color-bg);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.spec-table td:first-child { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.spec-table td:not(:first-child) { color: var(--color-text-muted); }

/* Necklace length diagram (blog-necklace-sizes.ejs) */
.necklace-length-diagram { display: block; width: 100%; max-width: 380px; height: auto; margin: 16px 0 20px; }

/* FAQ accordion — native <details>/<summary>, no JS required */
.policy-faq-item { border-bottom: 1px solid var(--color-border); }
.policy-faq-item:last-child { border-bottom: none; }
.policy-faq-item summary {
  cursor: pointer;
  padding: 14px 2px;
  font-size: 1rem;
  color: var(--color-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.policy-faq-item summary::-webkit-details-marker { display: none; }
.policy-faq-item summary::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.policy-faq-item[open] summary::after { content: '\2212'; }
.policy-faq-item p { color: var(--color-text-muted); line-height: 1.7; font-size: 0.95rem; margin: 0 0 16px; max-width: 62ch; }

.policy-footer { max-width: 900px; margin: 0 auto; padding: 30px 24px 34px; }
.policy-footer-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--color-text-muted); margin: 0 0 8px; }
.policy-footer address { font-style: normal; color: var(--color-text-muted); line-height: 1.7; }
.policy-footer address a { color: var(--color-primary); text-decoration: none; }
.policy-footer address a:hover { text-decoration: underline; }
.policy-footer p.hint { color: var(--color-text-muted); margin: 0; }
@media (max-width: 640px) {
  .policy-header { padding: 28px 22px 24px; }
  .policy-header h1 { font-size: 1.5rem; }
  .policy-section { grid-template-columns: 1fr; padding: 20px 20px; gap: 6px; }
}

.catalog-header-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.category-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--color-primary);
}
.category-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
@media (max-width: 640px) {
  .category-toggle { display: inline-flex; }
  .category-filters {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
  }
  .category-filters.is-open { display: flex; }
}
.pill {
  padding: 6px 14px;
  border-radius: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
}
.pill-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Category filter pills (home page only — other .pill uses, e.g. admin filters, keep the default look above). */
.category-filters .pill {
  background: none;
  color: #073269;
  font-size: 20px;
  font-weight: 300;
}
.category-filters .pill:hover { text-decoration: none; }
.category-filters .pill-active { background: none; border-color: transparent; color: #073269; border-bottom: 1px solid #073269; }
.category-filters .pill { display: inline-flex; align-items: center; gap: 8px; }
.category-filters .pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 2px;
  margin: 10px 0 20px;
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; gap: 16px; }
}
.product-card {
  position: relative;
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.product-card:hover { text-decoration: none; }
.product-card img,
.product-card .product-card-image-empty { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f0ede6; transition: transform 0.3s ease; }
.product-card:hover img { transform: scale(1.05); }
.product-card:hover .product-card-title-bar h3,
.product-card:hover .product-card-price-bar { color: #9fcbd3; }

.product-card-title-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 76px;
  background: rgba(0, 0, 0, 0.55);
  padding: 0 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-title-bar h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 200;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  cursor: default;
  transition: color 0.2s ease;
}

.product-card-price-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.product-card-stock-badge {
  position: absolute;
  bottom: 54px;
  right: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 0;
  font-size: 0.75rem;
  color: #fff;
}
.product-card-stock-badge.out { background: rgba(179, 65, 58, 0.9); }
.product-card-stock-badge.low { background: rgba(165, 115, 15, 0.9); }
.product-card-stock-badge.made-to-order { background: rgba(7, 50, 105, 0.9); }
.product-card-stock-badge.custom { background: rgba(107, 63, 160, 0.9); }

.price { font-weight: 600; }
.price-lg { font-size: 1.4rem; }
.stock-badge { font-size: 0.8rem; margin: 4px 0 0; font-weight: 600; }
.stock-badge.out { color: var(--color-danger); }
.stock-badge.low { color: #a5730f; }
.stock-badge.in { color: var(--color-success); }
.stock-badge.made-to-order { color: var(--color-primary); }
.stock-badge.custom { color: #6b3fa0; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--color-text-muted); }

/* Product detail */
.breadcrumb { margin: 10px 0; color: var(--color-text-muted); font-size: 0.9rem; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.product-detail-info h1 { font-size: 40px; }
.product-detail-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); background: #f0ede6; display: block; }
.product-thumbnails { display: flex; gap: 6px; margin-top: 6px; }
.product-thumbnail {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  width: 100px;
  height: 100px;
  flex: 0 0 auto;
}
.product-thumbnail img, .product-thumbnail video { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumbnail-active { border-color: var(--color-primary); }
.product-thumbnail-video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.product-long-description {
  margin: 0 0 24px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  line-height: 1.6;
}
.related-products { margin: 0 0 36px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.related-products h2 { margin-top: 0; }

.related-carousel { position: relative; margin-top: 10px; }
.related-carousel-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.related-carousel-track::-webkit-scrollbar { display: none; }
.related-carousel-track .product-card {
  flex: 0 0 calc((100% - 20px) / 3);
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .related-carousel-track .product-card { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 560px) {
  .related-carousel-track .product-card { flex-basis: 85%; }
}
.related-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.related-carousel-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.related-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.related-carousel-btn:disabled:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.related-carousel-prev { left: -14px; }
.related-carousel-next { right: -14px; }
@media (max-width: 560px) {
  .related-carousel-prev { left: -6px; }
  .related-carousel-next { right: -6px; }
}
.description, .product-long-description { line-height: 1.6; }
.description h2, .product-long-description h2 { margin-top: 0; }
.description h3, .description h4, .product-long-description h3, .product-long-description h4 { margin: 0.9em 0 0.3em; }
.description p, .product-long-description p { margin: 0 0 0.8em; }
.description ul, .description ol, .product-long-description ul, .product-long-description ol { margin: 0 0 0.8em; padding-left: 1.5em; }
.description li, .product-long-description li { margin-bottom: 0.25em; }
.description blockquote, .product-long-description blockquote {
  margin: 0 0 0.8em;
  padding-left: 1em;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}
.description a, .product-long-description a { text-decoration: underline; }
.description { color: var(--color-text-muted); margin: 8px 0 10px; }
.product-options { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; margin: 4px 0 10px; }
.product-options label { font-size: 0.85rem; color: var(--color-text-muted); }
.product-options select, .product-options input[type="text"], .product-options input[type="number"] { padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); width: 100%; }
.product-request { margin: 4px 0 10px; }
.product-request label { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 4px; }
.product-request textarea { width: 100%; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; resize: vertical; }
.info-icon { cursor: help; color: var(--color-text-muted); }
.product-options + #add-to-cart-button, .product-request + #add-to-cart-button { margin-top: 4px; }
.add-to-cart-form { display: flex; align-items: center; gap: 10px; }
.add-to-cart-form input[type=number] { width: 70px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.add-to-cart-form button:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 700px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* Cart */
.cart-table, .orders-table, .admin-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.cart-table th, .cart-table td,
.orders-table th, .orders-table td,
.admin-table th, .admin-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
/* Order-edit items table: rows are as tall as the product thumbnail (100px), and every other
   cell's content — the qty/price/total/remove controls — should sit centered on that same line,
   matching the thumbnail and product name (vertical-align: middle, the admin-table default,
   handles that). Each control is wrapped in a fixed-height box so a bare number input (which
   renders taller than plain text — browser default padding/border/margin) lines up exactly with
   the plain-text cells instead of sitting lower. The qty cell's stock-availability hint is
   absolutely positioned below its wrapper rather than stacked in normal flow, so its extra height
   doesn't pull that one wrapper's centered position away from the other three. */
#order-items-table .order-item-line { display: flex; align-items: center; min-height: 40px; position: relative; }
#order-items-table .order-item-line .hint { position: absolute; top: 100%; left: 0; white-space: nowrap; padding-top: 2px; }
/* Small icon-only action button (e.g. a trash icon replacing a "Remove"/"Delete" text link) —
   used wherever a compact row/list needs a remove affordance: cart items, admin table rows,
   product option rows, media folders. */
.icon-button {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-button-remove:hover { color: var(--color-danger); }
/* Keeps a row of icon-button forms (e.g. Duplicate + Delete) side by side on one line instead of
   stacking — an admin-table action cell with no header text can otherwise size down to fit just
   one icon's width, wrapping the next inline form onto a second line and throwing the row's
   vertical-align: middle off from shorter single-line cells like a checkbox column. */
.row-actions { display: flex; align-items: center; gap: 4px; }
.row-actions .btn-sm { margin-left: 0; }
#order-items-table input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
  height: 40px;
  margin: 0;
  box-sizing: border-box;
}
#order-items-table input[type=number]::-webkit-outer-spin-button,
#order-items-table input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-product-cell { display: flex; align-items: center; gap: 10px; }
.cart-product-cell img { width: 100px; height: 100px; object-fit: cover; border-radius: 0; background: #f0ede6; }
.admin-table .product-cell { display: flex; align-items: center; gap: 10px; }
.product-list-thumb { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); flex-shrink: 0; }
.product-list-thumb-empty { background: #f0ede6; }
.cart-product-info { display: flex; flex-direction: column; gap: 2px; }
.cart-table input[type=number] { width: 60px; padding: 6px; border: 1px solid var(--color-border); border-radius: 0; }
.cart-summary { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 12px 0 28px; }
.cart-subtotal { font-size: 1.1rem; }
@media (max-width: 640px) {
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .cart-table td { display: block; width: auto; border-bottom: none; padding: 0; }
  .cart-product-cell { flex: 1 1 100%; }
  .cart-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }
  .cart-table td:last-child { margin-left: auto; }
  .cart-summary { flex-direction: column; align-items: stretch; text-align: left; }
  .cart-coupon-form { max-width: none; }
}

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 24px; align-items: start; }
.checkout-form, .order-summary, .account-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; }

.account-nav { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.account-nav a {
  padding: 7px 14px;
  border-radius: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 500;
}
.account-nav a:hover { text-decoration: none; }
.account-nav a.account-nav-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.account-card h2 { margin-top: 0; }
.account-card-wide { max-width: 560px; }

.order-history-list { list-style: none; padding: 0; margin: 0; }
.order-history-entry { padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
.order-history-entry:last-child { border-bottom: none; }
.order-history-meta { margin: 0 0 2px; font-size: 0.9rem; }
.order-history-summary { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }
.order-history-diff { margin-left: 8px; font-weight: 600; }
.order-history-diff-up { color: var(--color-danger); }
.order-history-diff-down { color: var(--color-success); }

.media-upload-panel summary {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}
.media-upload-panel summary::-webkit-details-marker { display: none; }
.media-upload-panel summary::before { content: '▸ '; font-size: 0.85em; }
.media-upload-panel[open] summary::before { content: '▾ '; }
.media-upload-panel[open] summary { margin-bottom: 10px; }
@media (max-width: 700px) {
  .account-grid { grid-template-columns: 1fr; }
}
.checkout-form label, .admin-form label, .auth-form label, .account-form label, .review-form label,
.deletion-form label,
.field-caption {
  display: block;
  margin-bottom: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.field-group { margin-bottom: 8px; }
.field-group .field-caption { margin-bottom: 5px; }
.field-dimmed { opacity: 0.5; background: var(--color-bg); }
.checkout-form input, .checkout-form textarea, .checkout-form select,
.admin-form input, .admin-form textarea, .admin-form select,
.auth-form input, .account-form input,
.review-form input, .review-form textarea,
.deletion-form input {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
}
.form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.order-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-status-row form { display: flex; align-items: center; gap: 8px; margin: 0; }
.order-status-row label { display: flex; align-items: center; gap: 8px; margin: 0; }
.shippo-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.shippo-form label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); width: 90px; margin: 0; }
.shippo-form input { display: block; width: 100%; margin-top: 3px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; font-family: inherit; color: var(--color-text); }
.shippo-rate-list { list-style: none; padding: 0; margin: 0 0 12px; }
.shippo-rate-option { display: flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0; cursor: pointer; font-weight: normal; }
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(7, 50, 105, 0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
  vertical-align: -3px;
}
/* For use on dark backgrounds (e.g. the variant image's hover overlay) where the default navy
   spinner would be invisible against a similarly-dark background. */
.spinner-light { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
.cart-summary { position: relative; }
.cart-recalc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
}
.cart-recalc-overlay .spinner { width: 22px; height: 22px; border-width: 3px; }
.summary-recalc-spinner { margin-left: 8px; opacity: 0; transition: opacity 0.15s ease; }
.summary-recalc-spinner.is-active { opacity: 1; }
.hint { font-size: 0.85rem; color: var(--color-text-muted); }
.hint-warning { color: var(--color-danger); }
#card-container { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; min-height: 40px; max-width: 400px; }
.summary-items { list-style: none; padding: 0; margin: 0; }
.summary-items li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--color-border); font-size: 0.95rem; }
.order-items-list li { align-items: center; }
.summary-item-label { display: flex; align-items: center; gap: 10px; }
.summary-items + .summary-items { margin-top: 5px; }
@media (max-width: 800px) {
  .checkout-layout { grid-template-columns: 1fr; }
}

/* Shipping methods */
.shipping-methods { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.shipping-method-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0;
}
.shipping-method-option:has(input:checked) { border-color: var(--color-primary); background: #f2f8f6; }
.shipping-method-option input[type="radio"] { width: auto; flex: 0 0 auto; }
.shipping-method-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shipping-method-label { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.shipping-method-price { font-weight: 600; color: var(--color-text); }
/* Free shipping on the method a coupon covers. The struck-through original stays visible so the
   saving is legible, and so it is obvious which method the offer applies to when there are several. */
.shipping-method-was { font-weight: 400; color: var(--color-text-muted); margin-right: 6px; }
.shipping-method-free { color: #17482c; }

/* Order confirmation */
.order-confirmation { max-width: 560px; margin: 10px auto 28px; }
.order-confirmation-actions { display: flex; gap: 10px; margin-top: 12px; }

/* Auth */
.auth-form { max-width: 400px; margin: 18px auto; }
.auth-form-actions { display: flex; align-items: center; gap: 10px; }

/* Data deletion request form, embedded in the /data-deletion policy page's first section. Kept to
   the width of the policy prose beside it rather than the full column. */
.deletion-form { max-width: 42ch; margin: 18px 0 0; }
.deletion-form label { margin-bottom: 12px; }
.deletion-confirm .summary-items { margin: 14px 0 10px; }
/* Scoped to this page rather than .policy-section-body generally: it's the only policy page whose
   sections put a paragraph directly after a list, and the shared rule zeroes the list's margin. */
.deletion-sections .policy-section-body ul + p { margin-top: 1em; }

/* Terms/privacy consent line sitting directly under a form's submit button (checkout, register). */
.form-consent { margin: 10px 0 0; max-width: 46ch; }

/* Status badges */
.status-badge { padding: 2px 10px; border-radius: 0; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.status-paid { background: #e4f3ee; color: var(--color-primary-dark); }
.status-pending { background: #fdf3e0; color: #a5730f; }
.status-shipped { background: #e6eefc; color: #2757a6; }
.status-delivered { background: #e4f3ee; color: var(--color-primary-dark); }
.status-cancelled { background: #f1eeea; color: var(--color-text-muted); }
.status-refunded { background: #fbeceb; color: var(--color-danger); }

/* Admin dashboard */
.dashboard-panel { background: var(--color-surface); border: 1px solid var(--color-border); padding: 14px 18px; margin-top: 16px; }
.dashboard-panel h3 { margin-top: 0; }
.dashboard-panel h3 + h3 { margin-top: 20px; }
.dashboard-panel-wide { grid-column: 1 / -1; }
.dashboard-alerts { border-color: var(--color-danger); }

.dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); padding: 12px 16px; }
.stat-tile-label { margin: 0 0 4px; font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-tile-value { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--color-primary); }
.stat-tile-sub { margin: 4px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .dashboard-grid { grid-template-columns: 1fr; } }

.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.alert-list li:last-child { border-bottom: none; }
.alert-count { font-weight: 600; color: var(--color-danger); }

/* Admin */
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.admin-header span { display: flex; gap: 8px; }
.admin-form-narrow { max-width: 560px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.checkbox-label input { width: auto; }
.stock-adjust { margin-left: 6px; }
.stock-count { font-weight: 600; }
/* Inline catalog-position box on the product list: narrow enough not to widen the row, and the
   spinner arrows hidden so it reads as a value in the table rather than a form control. */
.sequence-input { width: 56px; text-align: right; padding: 3px 5px; -moz-appearance: textfield; appearance: textfield; }
.sequence-input::-webkit-outer-spin-button,
.sequence-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Etsy/FB/IG publish-status columns on the product list: a tick linking to the live listing or
   post, a hollow ring for an Etsy draft (published, but not visible to shoppers), a dash for
   never-published. Narrow and centred so three of them don't crowd the row. */
.publish-cell { text-align: center; width: 40px; }
.publish-yes { font-weight: 600; color: var(--color-text); text-decoration: none; }
a.publish-yes:hover { text-decoration: none; opacity: 0.7; }
.publish-draft { color: var(--color-text-muted); }
.publish-none { color: var(--color-text-muted); }

.attribute-pairs-sequence-col { width: 90px; }
.attribute-pairs-sequence-col input { width: 100%; }

/* Link-in-bio page (/links) — a single tappable column, sized for a phone since that is where
   Instagram's in-app browser puts every one of its visitors. Rows are deliberately tall: a 44px
   minimum touch target is the usual guidance, and these clear it comfortably. */
.links-page { max-width: 560px; margin: 0 auto 40px; }
.links-header { text-align: center; padding: 18px 0 10px; }
.links-header h1 { margin: 0 0 6px; font-size: 1.4rem; }
.links-tagline { margin: 0 auto; max-width: 40ch; color: var(--color-text-muted); font-size: 0.9rem; }
.links-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.links-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-surface);
}
.links-item:hover { text-decoration: none; border-color: var(--color-text-muted); }
.links-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); flex: 0 0 auto; background: #f0ede6; }
.links-thumb-empty { display: block; }
.links-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.links-item-name {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
}
.links-item-price { font-size: 0.85rem; color: var(--color-text-muted); }
.links-item-badge { margin-left: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
.links-item-arrow { flex: 0 0 auto; color: var(--color-text-muted); padding-right: 4px; }
.links-actions { margin: 18px 0 14px; text-align: center; }
.links-shop-all { display: inline-block; }
.links-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; }

/* Media library */
.media-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; margin: 10px 0 28px; align-items: start; }
.media-sidebar { position: sticky; top: 10px; }
.media-sidebar h3 { margin-top: 0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.media-folder-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.media-folder-list > a { padding: 6px 8px; border-radius: 0; color: var(--color-text); }
.media-folder-list > a:hover { background: var(--color-surface); text-decoration: none; }
.media-folder-row { display: flex; align-items: center; justify-content: space-between; border-radius: 0; }
.media-folder-row a { flex: 1; padding: 6px 8px; color: var(--color-text); border-radius: 0; }
.media-folder-row:hover { background: var(--color-surface); }
.media-folder-row .link-button { padding: 0 8px; text-decoration: none; color: var(--color-text-muted); }
.media-folder-active { background: var(--color-primary); color: #fff !important; }
.media-new-folder-form { display: flex; gap: 6px; margin-bottom: 12px; }
.media-new-folder-form input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 0; font-size: 0.85rem; }
.media-new-folder-form button { font-size: 0.8rem; padding: 6px 10px; }
.media-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.media-search-form { margin: 10px 0; max-width: 400px; }
.admin-search-form { margin: 10px 0; max-width: 400px; }

.media-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 24px 16px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: pointer;
  font-weight: normal;
}
.media-dropzone:hover { border-color: var(--color-primary); }
.media-dropzone-active { border-color: var(--color-primary); background: #f2f8f6; }
.media-dropzone-text { color: var(--color-text-muted); font-size: 0.95rem; }
.media-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.duplicate-group { margin-bottom: 16px; }
.duplicate-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.duplicate-group-header h3 { margin: 0; }
.duplicate-group-skipped { opacity: 0.5; }
.duplicate-group-items { display: flex; flex-wrap: wrap; gap: 16px; }
.duplicate-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px; text-align: center; font-weight: normal; }
.duplicate-item-name { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.duplicate-item-keep { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.duplicate-item-keep input { width: auto; }

.bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin: 10px 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.bulk-actions-bar #bulk-selected-count, .bulk-actions-bar #variant-selected-count { margin-right: auto; }
/* .admin-form input/label force display:block + width:100% for text fields — override for this checkbox+label pair so it stays inline like the rest of the bulk bar. */
#variant-bulk-bar .checkbox-label { display: flex; margin-bottom: 0; }
#variant-bulk-bar .checkbox-label input { display: inline-block; width: auto; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
#product-variants-table tr.variant-row-inactive { opacity: 0.5; }
#products-table tr.row-inactive { opacity: 0.5; }
.variant-image-cell { text-align: center; }
.variant-image-wrap { position: relative; display: inline-block; width: 100px; height: 100px; vertical-align: middle; }
.variant-image-thumb { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); display: block; }
.variant-image-change-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius);
  background: rgba(7, 50, 105, 0.75);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.variant-image-wrap:hover .variant-image-change-btn,
.variant-image-wrap:focus-within .variant-image-change-btn { opacity: 1; }
.variant-image-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.variant-image-remove-btn svg { width: 14px; height: 14px; }
.variant-image-wrap:hover .variant-image-remove-btn,
.variant-image-wrap:focus-within .variant-image-remove-btn { opacity: 1; }
.variant-active-cell { text-align: center; }
.variant-active-checkbox { width: 16px; height: 16px; cursor: pointer; }

.media-view-toggle { display: flex; gap: 8px; margin: 10px 0 0; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.media-grid-list { grid-template-columns: 1fr; gap: 6px; }
.media-grid-list .media-card { display: flex; align-items: center; gap: 12px; }
.media-grid-list .media-card img,
.media-grid-list .media-card video {
  width: 100px;
  height: 100px;
  flex: 0 0 auto;
}
.media-grid-list .media-card-body { flex: 1; min-width: 0; padding: 8px 8px 8px 0; }
.media-grid-list .media-card-name { white-space: normal; }
.media-grid-list .media-card-video-badge { position: static; order: 3; margin-right: 10px; flex: 0 0 auto; }
.media-card-wrapper { position: relative; }
.media-card-select {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  cursor: pointer;
}
.media-card-select input { margin: 0; width: 16px; height: 16px; cursor: pointer; }
.media-card {
  position: relative;
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--color-text);
}
.media-card:hover { text-decoration: none; }
.media-card img, .media-card video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f0ede6; }
.media-card-video-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 0;
}
.media-card-body { padding: 6px 8px; }
.media-card-name { margin: 0; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-detail-preview { max-width: 100%; max-height: 400px; border-radius: var(--radius); background: #f0ede6; display: block; }
.media-detail-preview-zoomable { cursor: zoom-in; }

.media-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.75);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.media-lightbox-overlay.media-lightbox-open { display: flex; }
.media-lightbox-box {
  position: relative;
  width: 500px;
  height: 500px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.media-lightbox-box img { width: 100%; height: 100%; object-fit: contain; }
.media-lightbox-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 18, 15, 0.55);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-lightbox-close:hover { background: rgba(20, 18, 15, 0.8); }
@media (max-width: 800px) {
  .media-layout { grid-template-columns: 1fr; }
  .media-sidebar { position: static; }
}

/* Rich text editor (product form) */
.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0 0;
  border: 1px solid var(--color-border);
  border-bottom: none;
  background: var(--color-surface);
}
.rich-text-toolbar button {
  padding: 7px 11px;
  border: none;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1;
}
.rich-text-toolbar button:hover { background: var(--color-bg); }
.rich-text-editor {
  min-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  overflow-y: auto;
}
.rich-text-editor:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.rich-text-editor h2, .rich-text-editor h3 { margin: 0.5em 0 0.25em; }
.rich-text-editor p { margin: 0 0 0.6em; }
.rich-text-editor ul, .rich-text-editor ol { margin: 0 0 0.6em; padding-left: 1.5em; }
.rich-text-editor blockquote { margin: 0 0 0.6em; padding-left: 1em; border-left: 3px solid var(--color-border); color: var(--color-text-muted); }
/* Higher specificity than the generic ".admin-form textarea" rule (which sets display:block),
   otherwise this raw-HTML backing field for the editor above renders as a second visible box. */
.admin-form textarea.rich-text-hidden-input { display: none; }

/* Media picker (product form) */
.media-field-row { display: flex; gap: 8px; margin-top: 4px; align-items: center; }
.media-field-row input { margin-top: 0; flex: 1; }

/* Image fields + their live-preview gallery, side by side */
.image-fields-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 4px 0 16px;
}
.image-fields-inputs { flex: 1 1 320px; max-width: 420px; }
.image-fields-gallery {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 200px);
  gap: 12px;
}
.image-gallery-item {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f0ede6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-field-thumb { width: 100%; height: 100%; object-fit: cover; display: none; }
.gallery-empty { font-size: 0.8rem; color: var(--color-text-muted); }
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 3px 8px;
  text-align: center;
}
@media (max-width: 700px) {
  .image-fields-gallery { grid-template-columns: repeat(2, 1fr); }
}
.media-picker-dialog {
  width: min(720px, 90vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.media-picker-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.media-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface);
}
.media-picker-header h3 { margin: 0; flex: 0 0 auto; }
.media-picker-header input[type="search"] { flex: 1; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}
.media-picker-item {
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface);
  text-align: left;
}
.media-picker-item:hover { border-color: var(--color-primary); }
.media-picker-item:disabled { opacity: 0.5; cursor: not-allowed; }
.media-picker-item:disabled:hover { border-color: var(--color-border); }
.media-picker-item img, .media-picker-item video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f0ede6; }
.media-picker-item-name { margin: 0; padding: 6px 8px; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Product picker on Admin -> Orders -> New Order: grouped by product, variants indented underneath. */
.item-picker-list { padding: 8px 16px; overflow-y: auto; }
.item-picker-product { border-bottom: 1px solid var(--color-border); }
.item-picker-product:last-child { border-bottom: none; }
.item-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 4px;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
}
.item-picker-row-product img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); background: #f0ede6; flex: 0 0 auto; }
.item-picker-row-header { font-weight: 600; cursor: default; }
.item-picker-row-product:not(.item-picker-row-header) { cursor: pointer; }
.item-picker-row-product:not(.item-picker-row-header):hover { background: var(--color-bg); }
.item-picker-row-variant { cursor: pointer; padding-left: 50px; }
.item-picker-row-variant:hover { background: var(--color-bg); }
.item-picker-row-label { flex: 1; }
.item-picker-row-meta { color: var(--color-text-muted); font-size: 0.85rem; flex: 0 0 auto; }
.item-picker-row:disabled { opacity: 0.5; cursor: not-allowed; }
.item-picker-row:disabled:hover { background: none; }

/* Cart coupon box */
.cart-coupon-form { display: flex; gap: 8px; margin: 10px 0; max-width: 320px; }
.cart-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Admin → Coupons */
.coupon-type-section, .coupon-scope-section { margin: 10px 0 16px; }

/* Compact fields: a percent/quantity/date input doesn't need to stretch to the form's full width,
   and a row of radio options reads better wrapped tightly than spread across a full-width grid. */
.coupon-form .field-narrow input,
.coupon-form .field-narrow select { max-width: 160px; }
.coupon-form .field-medium textarea { max-width: 420px; resize: vertical; }
.coupon-form .field-medium select[multiple] { max-width: 420px; }
.coupon-form .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 6px 0 16px;
}
/* .admin-form label/input force display:block + a box-model margin — both override .checkbox-label's flex
   layout (higher specificity) and throw off vertical centering. Restate/reset for every checkbox and radio
   in this form so they render inline (button, then label text) and centered, not stacked. */
.coupon-form .checkbox-label { display: flex; align-items: center; margin-bottom: 0; }
.coupon-form .checkbox-label input { margin: 0; width: auto; }
/* Same .admin-form label/input override problem as above, for the product form's Active/Taxable checkboxes. */
.product-form .checkbox-label { display: flex; align-items: center; margin-bottom: 0; }
.product-form .checkbox-label input { margin: 0; width: auto; }
.coupon-form .bogo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
}
.coupon-form .bogo-row label { margin-bottom: 0; }
.coupon-form .field-bogo-type { width: 160px; }
.coupon-form .field-bogo-target { width: 270px; }
.coupon-form .field-bogo-qty { width: 90px; }

/* Reviews */
.product-reviews { margin-top: 30px; }
.review-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.review-stars { color: #d9a441; letter-spacing: 1px; white-space: nowrap; }
.review-stars-lg { font-size: 1.4rem; }
.review-note { color: var(--color-text-muted); }

.review-list { margin-top: 16px; }
.review-item { border-top: 1px solid var(--color-border); padding: 14px 0; }
.review-item-mine { background: var(--color-surface); padding: 14px; border: 1px solid var(--color-border); margin-bottom: 16px; }
.review-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.review-date { color: var(--color-text-muted); font-size: 0.85rem; }
.review-photos { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.review-photos img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); }
.review-photo-thumb { cursor: zoom-in; }

.review-reply { margin: 10px 0 0 20px; padding: 10px 12px; background: var(--color-surface); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; }
.review-reply strong { font-size: 0.85rem; }
.review-reply p { margin: 4px 0 0; }

.review-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.75);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.review-lightbox-overlay.review-lightbox-open { display: flex; }
.review-lightbox-box {
  position: relative;
  width: 300px;
  height: 300px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.review-lightbox-box img { width: 100%; height: 100%; object-fit: contain; }
.review-lightbox-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 18, 15, 0.55);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-lightbox-close:hover { background: rgba(20, 18, 15, 0.8); }

.review-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; max-width: 480px; margin: 16px 0; }
.review-form h3 { margin-top: 0; }
.review-form label { margin-top: 10px; }
.review-form label:first-of-type { margin-top: 0; }

.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; border: 0; padding: 0; margin: 0 0 6px; }
.star-input legend { padding: 0; margin-bottom: 4px; font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.8rem; line-height: 1; color: var(--color-border); cursor: pointer; padding: 0 2px; margin: 0; }
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: #d9a441;
}

/* Admin reviews */
.review-status-filters { display: flex; gap: 8px; margin: 12px 0 16px; }
.admin-table .review-stars { display: block; }
.review-preview { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; max-width: 640px; }
.review-preview-actions { display: flex; gap: 10px; margin-top: 16px; }

.review-reply-admin { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; max-width: 640px; margin-top: 16px; }
.review-reply-admin h3 { margin-top: 0; }
.review-reply-admin textarea { width: 100%; box-sizing: border-box; }
.review-reply-meta { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 12px 0;
  margin-top: 18px;
  text-align: center;
}
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.footer-social-label { font-size: 0.85rem; }
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-social-icon:hover { color: var(--color-text); border-color: var(--color-text-muted); text-decoration: none; }
.footer-social-icon svg { width: 16px; height: 16px; }

/* Admin -> Etsy: each block on the page (connection, defaults, category mapping) is a plain
   titled section, spaced apart rather than boxed, to match the rest of the admin screens. */
.etsy-section { margin: 24px 0; }
.etsy-section > h3 { margin-bottom: 6px; }
.etsy-section .admin-table th[scope="row"] { width: 160px; text-align: left; }
.etsy-section .admin-form label { display: block; margin-bottom: 10px; }

/* The Etsy category picker, shared by Admin -> Etsy and the product publish dialog. Browses the
   taxonomy one level at a time: a breadcrumb bar walks back out, rows with a chevron drill in. */
.etsy-taxonomy-dialog { width: min(560px, 92vw); }
.etsy-taxonomy-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.etsy-taxonomy-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex: 1; }
.etsy-crumb {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--color-link, inherit); text-decoration: underline;
}
.etsy-crumb:disabled { color: var(--color-text-muted); text-decoration: none; cursor: default; }
.etsy-crumb-sep { color: var(--color-text-muted); font-size: 0.85rem; }
.etsy-taxonomy-bar .btn-sm { margin-left: 0; white-space: nowrap; }

.etsy-taxonomy-results { max-height: 45vh; overflow-y: auto; margin-top: 10px; }
.etsy-taxonomy-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px;
  background: none; border: none; border-bottom: 1px solid var(--color-border); cursor: pointer;
  font: inherit; color: inherit;
}
.etsy-taxonomy-row > span:first-child { flex: 1; }
.etsy-taxonomy-row:hover { background: var(--color-surface-alt, rgba(0, 0, 0, 0.04)); }
.etsy-taxonomy-chevron { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; }

/* Publish-to-Etsy dialog on the product form. */
.etsy-publish-dialog { width: min(640px, 94vw); }
.etsy-publish-dialog label { display: block; margin-bottom: 10px; }
.etsy-publish-dialog input[type="text"],
.etsy-publish-dialog textarea { width: 100%; }
.etsy-publish-dialog textarea { min-height: 120px; }
.etsy-publish-row { display: flex; align-items: center; gap: 10px; }
.etsy-publish-row > label { flex: 1; margin-bottom: 0; }
.etsy-publish-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.etsy-publish-status { margin-left: auto; }

/* Product form footer: Save sits alongside the Etsy publish button and its listing link. */
.product-form .form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.product-form .form-actions .hint { margin: 0; }

/* Per-post promo text and price toggle for the social publish button. The actions row is narrower
   than the input and that button laid side by side, so the three are grouped: the group wraps as a
   unit and the controls stay next to the button they feed, instead of the Etsy hint landing between
   them. Scoped to .form-actions so the shared input styling elsewhere in the form is untouched. */
.product-form .form-actions .social-publish-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Matches the buttons' height and type size so everything on the line shares a centre line. */
.product-form .form-actions .social-promo-input { width: 30ch; height: 38px; margin: 0; font-size: 0.95rem; }
.product-form .form-actions .social-promo-price { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.product-form .form-actions .social-promo-price input { margin: 0; }

/* Admin -> Etsy category table: the numeric size/weight columns stay narrow so the row still fits
   alongside the Etsy category picker. */
.etsy-section .admin-table th.etsy-num { text-align: right; }
.etsy-section .admin-table td.etsy-num { text-align: right; }
.etsy-section .admin-table td.etsy-num input { width: 72px; text-align: right; }

/* Product form: the Etsy-only size/weight override group, kept visually secondary to the
   fields that drive the storefront itself. */
.etsy-dimensions { border: 1px solid var(--color-border); padding: 10px 12px; margin: 12px 0; }
.etsy-dimensions legend { font-size: 0.85rem; color: var(--color-text-muted); padding: 0 4px; }
.etsy-dimensions .hint { margin: 0 0 8px; }
/* .form-row is a 3-column grid by default, which wraps the fourth of these four fields onto a
   second row. Scoped to this fieldset so the shared rule is left alone everywhere else. */
.etsy-dimensions .form-row { grid-template-columns: repeat(4, 1fr); }
.etsy-dimensions .form-row input { width: 100%; }

/* Admin -> Etsy: the shop-wide unit pickers, sitting directly above the per-category size table
   whose columns they label. */
.etsy-units { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.etsy-units label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.etsy-units select { width: auto; }
.etsy-units .hint { margin: 0; }

/* Admin-only shortcut from a product page to its edit form. Sits between the title and price, so
   it is nudged away from both rather than crowding the heading. */
.product-admin-edit { margin: 0 0 10px; }
.product-admin-edit .btn-sm { margin-left: 0; }