/* ==========================================================================
   ByAnhStudio — Shared Stylesheet
   Editorial, magazine-inspired design system.
   All colors / fonts / spacing / radii are CSS variables — swap freely.
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --color-peach-500: #F0983C;
  --color-peach-600: #DE882B;
  --color-peach-700: #B87024;
  --color-peach-100: #F9E4CB;
  --color-peach-050: #FCF6EC;

  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;

  --color-ink-900: #22303A;
  --color-navy: #1F3355;
  --color-ink-600: #5F6B73;
  --color-ink-400: #97A3AB;

  --color-line-200: #E9EFF3;
  --color-line-300: #DCE5EA;
  --color-neutral-100: #F4F8FA;

  --color-success-bg: #E8F4EC;
  --color-success-text: #2F6B45;
  --color-error-bg: #FBECEA;
  --color-error-text: #A6402F;

  --surface-page: var(--color-bg);
  --surface-card: var(--color-surface);
  --surface-sunken: var(--color-neutral-100);

  --text-primary: var(--color-ink-900);
  --text-secondary: var(--color-ink-600);
  --text-muted: var(--color-ink-400);
  --text-on-primary: #FFFFFF;
  --text-link: var(--brand-primary-active);

  --border-default: var(--color-line-300);
  --border-subtle: var(--color-line-200);

  --brand-primary: var(--color-peach-500);
  --brand-primary-hover: var(--color-peach-600);
  --brand-primary-active: var(--color-peach-700);

  --focus-ring: rgba(240, 152, 60, 0.45);

  --brand-primary-tint: var(--color-peach-100);
  --surface-muted: var(--color-neutral-100);
  --shadow-overlay: 0 12px 32px rgba(34,48,58,0.16), 0 3px 8px rgba(34,48,58,0.10);

  /* ---- Type ---- */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  --font-mono: "Space Mono", monospace;

  --text-display-size: clamp(2rem, 4vw, 3.25rem);
  --text-display-weight: 800;
  --text-display-lh: 1.02;
  --text-display-ls: -0.01em;

  --text-headline-size: clamp(1.5rem, 2.4vw, 2rem);
  --text-headline-weight: 700;
  --text-headline-lh: 1.12;
  --text-headline-ls: -0.005em;

  --text-subhead-size: clamp(1.125rem, 1.6vw, 1.3rem);
  --text-subhead-weight: 600;
  --text-subhead-lh: 1.3;

  --text-body-lg-size: 1.0625rem;
  --text-body-lg-lh: 1.65;

  --text-body-size: 1rem;
  --text-body-lh: 1.65;

  --text-body-sm-size: 0.875rem;
  --text-body-sm-lh: 1.55;

  --text-caption-size: 0.75rem;
  --text-caption-lh: 1.4;

  --text-overline-size: 0.6875rem;
  --text-overline-weight: 700;
  --text-overline-ls: 0.16em;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --section-mobile: 28px;
  --section-tablet: 40px;
  --section-desktop: 56px;

  --container-max: 1360px;
  --container-pad: clamp(16px, 3.5vw, 44px);

  /* ---- Radius ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadow ---- */
  --shadow-subtle: 0 1px 2px rgba(43,40,37,0.04), 0 1px 1px rgba(43,40,37,0.03);
  --shadow-medium: 0 6px 16px rgba(43,40,37,0.06), 0 2px 6px rgba(43,40,37,0.05);
  --shadow-large: 0 16px 32px rgba(43,40,37,0.10), 0 4px 10px rgba(43,40,37,0.06);
  --shadow-product-hover: 0 18px 34px rgba(240,152,60,0.22), 0 4px 10px rgba(240,152,60,0.14);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 200ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-display); }

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* The hand-drawn filter lives here. It must be in the document but never seen. */
.ink-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink-900);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 999;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-mobile); }
@media (min-width: 720px) { .section { padding-block: var(--section-tablet); } }
@media (min-width: 1180px) { .section { padding-block: var(--section-desktop); } }

.section--tight { padding-block: var(--space-3); }
@media (max-width: 600px) { .section--tight { padding-block: var(--space-2); } }

.section--half { padding-block: var(--space-5); }
@media (min-width: 1180px) { .section--half { padding-block: var(--space-6); } }

.overline {
  font-family: var(--font-body);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-ls);
  text-transform: uppercase;
  color: var(--brand-primary-active);
  display: inline-block;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.eyebrow-row::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-primary);
  display: inline-block;
  flex: none;
}

.display {
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
}
.display em { font-style: normal; font-family: "Kalam", var(--font-display), cursive; color: var(--brand-primary-active); }

.headline {
  font-size: var(--text-headline-size);
  font-weight: var(--text-headline-weight);
  line-height: var(--text-headline-lh);
  letter-spacing: var(--text-headline-ls);
  overflow-wrap: break-word;
}
@media (max-width: 600px) { .headline { font-size: 1.5rem; } }

.subhead {
  font-size: var(--text-subhead-size);
  font-weight: var(--text-subhead-weight);
  line-height: var(--text-subhead-lh);
}

.body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-secondary);
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* The wobbly rule. Signature mark, used only beside a section headline. */
.ink-rule {
  display: block;
  width: 132px;
  height: 8px;
  margin-top: var(--space-2);
  color: var(--brand-primary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: background-color var(--transition-fast) var(--ease-out),
              border-color var(--transition-fast) var(--ease-out),
              color var(--transition-fast) var(--ease-out);
  white-space: nowrap;
}

.btn--primary { background: var(--brand-primary); color: var(--text-on-primary); }
.btn--primary:hover { background: var(--brand-primary-hover); }
.btn--primary:active { background: var(--brand-primary-active); }

.btn--outline { background: transparent; color: var(--text-primary); border-color: var(--color-ink-900); }
.btn--outline:hover { background: var(--brand-primary); color: var(--text-on-primary); border-color: var(--brand-primary); }

.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-default); }
.btn--ghost:hover { background: var(--color-peach-050); border-color: var(--brand-primary); }

.btn--danger { color: var(--color-error-text); border-color: var(--color-error-text); }
.btn--danger:hover { background: var(--color-error-bg); border-color: var(--color-error-text); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 10px 24px 11px;
}
.logo__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo__type {
  display: inline-flex;
  align-items: center;
  font-family: "Kalam", "Poppins", cursive;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
.logo__ink { color: var(--color-navy); }
.logo__accent { color: var(--color-peach-500); }
.logo__o { width: 0.9em; height: 0.9em; align-self: flex-end; margin: 0 -0.02em 0.2em 0.02em; }
.site-footer .logo__ink { color: #F3EFE9; }
.site-footer .logo__accent { color: var(--color-peach-500); }
@media (max-width: 420px) {
  .logo { padding: 7px 14px 8px; }
  .logo__type { font-size: 1.12rem; }
  /* The header now shows the saved heart as well. A narrow phone needs
     smaller buttons, or the row is wider than the screen. */
  .site-header__inner { gap: var(--space-2); }
  .header-actions { gap: 4px; }
  .header-actions .cart-link,
  .header-actions .nav-toggle-label { width: 38px; height: 38px; }
  .header-actions .cart-link svg { width: 19px; height: 19px; }
}

.primary-nav > ul { display: flex; align-items: center; gap: var(--space-5); }
.primary-nav a {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding-block: var(--space-1);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast) var(--ease-out);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--brand-primary-active); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.primary-nav li { position: relative; }
.primary-nav .has-menu > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-chev { width: 14px; height: 14px; color: var(--text-muted); }
.nav-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  margin-top: 10px;
  min-width: 210px;
  padding: var(--space-2);
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-large);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast) var(--ease-out),
              transform var(--transition-fast) var(--ease-out),
              visibility 0s linear var(--transition-fast);
  z-index: 20;
}
.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.nav-menu a::after { content: none; }
.nav-menu a:hover { background: var(--color-peach-050); color: var(--text-primary); }
.nav-menu li:first-child a { color: var(--text-primary); }

.nav-toggle-input { display: none; }

.nav-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-label svg { width: 20px; height: 20px; }
.nav-toggle-label .icon-close { display: none; }

.mobile-nav-panel { display: none; }

@media (max-width: 1100px) {
  .primary-nav > ul { gap: var(--space-4); }
  .primary-nav a { font-size: 0.9rem; }
}

@media (max-width: 940px) {
  .primary-nav { display: none; }
  .nav-toggle-label { display: flex; }

  .mobile-nav-panel {
    display: block;
    /* The panel hangs off the bottom of the header, so it never covers the
       close button. A fixed top guess breaks when the admin bar is present. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    background: var(--surface-page);
    z-index: 99;
    padding: var(--space-6) var(--container-pad);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-out),
                visibility 0s linear var(--transition-fast);
  }
  .nav-toggle-input:checked ~ .mobile-nav-panel {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-out),
                visibility 0s linear 0s;
  }
  .nav-toggle-input:checked ~ .site-header__inner .nav-toggle-label .icon-menu { display: none; }
  .nav-toggle-input:checked ~ .site-header__inner .nav-toggle-label .icon-close { display: block; }

  .mobile-nav-list { display: flex; flex-direction: column; gap: var(--space-2); }
  .mobile-nav-list > a,
  .mobile-nav-cat > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
  }
  .mobile-nav-list a[aria-current="page"] { color: var(--brand-primary-active); }
  .mobile-nav-list a svg { width: 20px; height: 20px; color: var(--text-muted); }

  /* One collection per <details>. It is closed until the visitor taps it. */
  /* The colour matches the theme link colour, so a collection title looks the
     same as Home and FAQ next to it. A summary is not a link. */
  .mobile-nav-cat > summary { cursor: pointer; list-style: none; color: #7C4A32; }
  .mobile-nav-cat > summary::-webkit-details-marker { display: none; }
  .mobile-nav-cat > summary svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform var(--transition-fast) var(--ease-out);
  }
  .mobile-nav-cat[open] > summary svg { transform: rotate(90deg); }

  .mobile-nav-subs { display: flex; flex-direction: column; padding: var(--space-2) 0 var(--space-3) var(--space-4); }
  .mobile-nav-subs a {
    padding: var(--space-2) 0;
    border: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-secondary);
  }

  .mobile-nav-cta { margin-top: var(--space-7); padding-bottom: var(--space-8); }
  .mobile-nav-cta .btn { width: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-ink-900);
  color: #F3EFE9;
  padding-block: var(--space-7) var(--space-5);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-tagline { margin-top: var(--space-3); color: #B8B0A6; max-width: 32ch; }

.footer-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B8B0A6;
  margin-bottom: var(--space-4);
}

.footer-links li + li { margin-top: var(--space-3); }
.footer-links a:hover { color: var(--color-peach-500); }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(243,239,233,0.25);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.social-icon:hover { background: var(--color-peach-500); border-color: var(--color-peach-500); }
.social-icon svg { width: 18px; height: 18px; }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(243,239,233,0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: #93897D;
  font-size: var(--text-body-sm-size);
}
.footer-bottom a:hover { color: #F3EFE9; }

.newsletter-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.newsletter-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(243,239,233,0.3);
  background: transparent;
  color: #F3EFE9;
  border-radius: var(--radius-full);
  padding: 12px 18px;
}
.newsletter-form input::placeholder { color: #93897D; }
.newsletter-form input:focus { outline: none; border-color: var(--color-peach-500); }
.newsletter-form .btn { padding: 13px 26px; align-self: flex-start; }
.form-note { font-size: var(--text-body-sm-size); }
.form-note.is-ok { color: var(--color-peach-500); }
.form-note.is-error { color: #F0A6A6; }

/* ==========================================================================
   Announce bar
   ========================================================================== */

.announce {
  background: var(--color-peach-100);
  color: var(--text-primary);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px var(--space-4);
}

/* ==========================================================================
   Home banner
   ========================================================================== */

.home-banner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--surface-card);
}
/* The photo drove the banner height, leaving a gap under the copy. Cap it
   with an aspect ratio so the two columns end at about the same place. */
.home-banner__media { background: var(--color-peach-050); aspect-ratio: 16 / 11; }
.home-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.home-banner__body {
  padding: clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
}
.home-banner__body .eyebrow-row { margin-bottom: 0; }
.home-banner__body .display { font-size: clamp(1.85rem, 3.2vw, 2.9rem); text-wrap: balance; }
.home-banner__body .btn-row { margin-top: var(--space-3); }
@media (max-width: 860px) {
  .home-banner { grid-template-columns: 1fr; }
  .home-banner__media { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Category cards
   ========================================================================== */

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.category-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast) var(--ease-out),
              transform var(--transition-fast) var(--ease-out),
              border-color var(--transition-fast) var(--ease-out);
}
.category-card:hover { box-shadow: var(--shadow-product-hover); transform: translateY(-3px); border-color: var(--border-default); }
.category-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-peach-050); }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.category-card__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.category-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-primary-active);
}
.category-card__link svg { width: 15px; height: 15px; }
.category-card:hover .category-card__link { text-decoration: underline; }

@media (max-width: 700px) {
  .category-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .category-card__media { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Chips
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.chip__n { color: var(--text-muted); font-weight: 600; }
.chip--link:hover { border-color: var(--brand-primary); color: var(--text-primary); }

.tab-input, .size-input { display: none; }
.chip--tab {
  cursor: pointer;
  transition: background var(--transition-fast) var(--ease-out),
              color var(--transition-fast) var(--ease-out),
              border-color var(--transition-fast) var(--ease-out);
}
.chip--tab:hover { border-color: var(--color-ink-400); }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip--tab[aria-pressed="true"],
.tab-input:checked + label.chip--tab,
.size-input:checked + label.chip--tab {
  background: var(--brand-primary);
  color: var(--text-on-primary);
  border-color: var(--brand-primary);
}
.size-input:focus-visible + label.chip--tab { outline: 3px solid var(--brand-primary); outline-offset: 3px; }

/* ==========================================================================
   Product grid & card
   ========================================================================== */

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-3); }
@media (min-width: 600px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }

.product-card-wrap { position: relative; display: flex; }
.product-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-primary);
  min-width: 0;
}
.product-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-peach-050);
  margin-bottom: var(--space-2);
  transition: opacity var(--transition-fast) var(--ease-out);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card:hover .product-card__media { opacity: 0.85; }
.product-card__tag { align-self: flex-start; font-size: var(--text-caption-size); padding: 4px 10px; }
.product-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card:hover .product-card__name { text-decoration: underline; text-underline-offset: 3px; }
.product-card__price { font-family: var(--font-mono); color: var(--text-secondary); font-size: var(--text-body-sm-size); margin-top: auto; }

/* --------------------------------------------------------------------------
   Sale sticker

   A sibling of the card link rather than a child of .product-card__media,
   because that box clips to a 16px radius and would nick the sticker's
   corner. .product-card-wrap is already positioned, and the saved heart
   already owns the top-right corner, so the sticker takes the top-left.

   pointer-events: none keeps a click on the sticker falling through to the
   product link underneath.

   The white ring is load-bearing: brand peach on pale nail art has almost no
   contrast on its own, and most of the catalogue is pale nail art.
   -------------------------------------------------------------------------- */
.sale-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px 8px 15px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-on-primary);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(240, 152, 60, 0.45), 0 2px 6px rgba(34, 48, 58, 0.18);
  transform: rotate(-4deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Two cards per row on a phone, so the card is about 165px wide. */
@media (max-width: 599px) {
  .sale-badge {
    padding: 6px 10px 6px 12px;
    border-width: 2px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sale-badge { transform: none; }
}

/* The single product photo is about twice a card, so the sticker grows with
   it. It hangs on .product-gallery rather than .product-gallery__main: that
   box clips to a 16px radius, and it is the zoom click target. */
.product-gallery { position: relative; }

.sale-badge--lg {
  top: var(--space-3);
  left: var(--space-3);
  padding: 11px 18px 11px 21px;
  border-width: 3px;
  font-size: 15px;
}

@media (max-width: 899px) {
  .sale-badge--lg {
    padding: 8px 13px 8px 15px;
    border-width: 2.5px;
    font-size: 12px;
  }
}

/* The saving, stated once more where the shopper reads the price. Ink on the
   peach tint, because peach-700 on peach-100 does not clear 4.5:1 at this
   size. */
.price-save {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-peach-100);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* The single product price is 1.25rem display type, so the tag scales with it. */
.product-price .price-save {
  margin-left: var(--space-3);
  padding: 4px 11px;
  font-size: 12px;
  vertical-align: middle;
}

.wish-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: color var(--transition-fast) var(--ease-out), border-color var(--transition-fast) var(--ease-out);
}
.wish-btn svg { width: 17px; height: 17px; }
.wish-btn:hover { color: var(--brand-primary-active); border-color: var(--brand-primary); }
.wish-btn.is-on { color: var(--brand-primary); border-color: var(--brand-primary); }
.wish-btn.is-on svg { fill: var(--brand-primary); }
.wish-inline.is-on { border-color: var(--brand-primary); color: var(--brand-primary-active); }
.wish-inline.is-on svg { fill: var(--brand-primary); }

/* ==========================================================================
   Shop toolbar, filters, pagination
   ========================================================================== */

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.collection-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-right: auto;
}
.section--shop { padding-block: var(--space-5) var(--space-6); }

.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 260px;
  max-width: 380px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 10px 18px;
  background-color: var(--surface-card);
}
.search-field:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--focus-ring); }
.search-field svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.search-field input { flex: 1; min-width: 0; border: none; background: none; outline: none; }
.search-field--lg { max-width: 560px; margin-top: var(--space-6); padding: 16px 24px; }
.search-field--lg svg { width: 22px; height: 22px; }
.search-field--lg input { font-size: 1.05rem; }

.sort-field { display: flex; align-items: center; gap: var(--space-3); }
.sort-field label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.sort-field select {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  background-color: var(--surface-card);
  cursor: pointer;
}
.sort-field select:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--focus-ring); }

.shop-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.shop-count { font-size: var(--text-body-sm-size); white-space: nowrap; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  background-color: var(--surface-card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease-out),
              border-color var(--transition-fast) var(--ease-out),
              color var(--transition-fast) var(--ease-out);
}
.page-btn:hover:not(:disabled) { background: var(--color-peach-050); border-color: var(--brand-primary); }
.page-btn[aria-current="page"] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-primary); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn svg { width: 16px; height: 16px; }
.page-ellipsis { min-width: 24px; text-align: center; color: var(--text-muted); }
@media (max-width: 560px) {
  .pagination { gap: var(--space-1); }
  .page-btn { min-width: 38px; height: 38px; padding: 0 var(--space-2); }
}

/* ==========================================================================
   Section heads, breadcrumb, empty state
   ========================================================================== */

.section-head { max-width: 680px; margin-bottom: var(--space-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-4); }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.breadcrumb a:hover { color: var(--brand-primary-active); text-decoration: underline; }
.breadcrumb svg { width: 13px; height: 13px; color: var(--text-muted); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 700; }

.empty-state {
  padding-block: var(--space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty-state--page { padding-block: var(--space-8); }
.empty-state .btn { margin-top: var(--space-2); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-link);
}
.text-link svg { width: 15px; height: 15px; }
.text-link:hover { color: var(--brand-primary-active); text-decoration: underline; }

.custom-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.custom-band p { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }

/* Collections page */
.collection-stack { display: flex; flex-direction: column; gap: var(--space-9); }
.collection-block .filter-chips { margin-bottom: var(--space-5); }

/* ==========================================================================
   Product page
   ========================================================================== */

.product-page { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .product-page { grid-template-columns: 1fr; gap: var(--space-6); } }

.product-gallery__main {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--color-peach-050);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery { min-width: 0; }
/* Up to eight photos per product, so the strip wraps like the live page. */
.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.product-gallery__thumb {
  width: 68px;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: border-color var(--transition-fast) var(--ease-out);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb:hover { border-color: var(--color-ink-400); }
.product-gallery__thumb.is-on { border-color: var(--brand-primary); }

.product-info__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.product-info .headline { font-size: 1.3rem; line-height: 1.3; }
.product-price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: var(--space-3); }

.product-options { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.product-option__label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-3); padding: 0; }
.product-size-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-option .field-hint { margin-top: var(--space-2); }

.product-actions { display: flex; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-6); flex-wrap: wrap; }
.qty-field { display: flex; flex-direction: column; gap: var(--space-2); }
.qty-field label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.qty-input {
  width: 76px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 13px 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-body-size);
}
.product-actions .btn { flex-shrink: 0; }
.product-accordion { margin-top: var(--space-6); }

/* ==========================================================================
   Accordions (FAQ + product)
   ========================================================================== */

.accordion-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  overflow: hidden;
}
.accordion-item + .accordion-item { margin-top: var(--space-3); }

.accordion-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary .chev { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition-fast) var(--ease-out); }
.accordion-item[open] summary .chev { transform: rotate(180deg); }
.accordion-item[open] summary { border-bottom: 1px solid var(--border-subtle); }

.accordion-body { padding: var(--space-4) var(--space-6) var(--space-6); color: var(--text-secondary); }
.accordion-body > * + * { margin-top: var(--space-4); }
.accordion-body ul { display: flex; flex-direction: column; gap: var(--space-2); }
.accordion-body li { padding-left: var(--space-5); position: relative; }
.accordion-body li::before {
  content: "";
  position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.accordion-body table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.accordion-body th, .accordion-body td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-body-sm-size);
}
.accordion-body th { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); }
.accordion-body code {
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
}
.accordion-body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   FAQ page
   ========================================================================== */

.faq-layout { display: grid; grid-template-columns: 0.8fr 2fr; gap: var(--space-9); align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: var(--space-6); } }
.faq-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-3); }
.faq-toc a {
  font-family: var(--font-display);
  font-weight: 600;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.faq-toc a:hover { color: var(--brand-primary-active); }
.faq-group + .faq-group { margin-top: var(--space-8); }
.faq-group h2 { margin-bottom: var(--space-5); }

/* ==========================================================================
   Forms
   ========================================================================== */

.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-info-card {
  background: var(--color-ink-900);
  color: #F3EFE9;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.contact-info-card .overline { color: var(--color-peach-500); }
.contact-info-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-peach-500); margin-top: 2px; }
.contact-info-item a { text-decoration: underline; text-underline-offset: 3px; }
.contact-info-item a:hover { color: var(--color-peach-500); }
.contact-info-item .text-muted { color: #B8B0A6; font-size: var(--text-body-sm-size); }
.contact-info-card .footer-social { margin-top: 0; }

.form-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 44px);
}

.form-tabs { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.form-tabs a {
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.form-tabs a:hover { color: var(--text-primary); }
.form-tabs a.is-active { color: var(--text-primary); border-color: var(--brand-primary); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.form-row .field { margin-top: 0; }
.field:first-child { margin-top: 0; }

.field label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.field .req { color: var(--brand-primary-active); }

.field input,
.field select,
.field textarea {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background-color: var(--surface-card);
  font-size: var(--text-body-size);
  min-width: 0;
  max-width: 100%;
  transition: border-color var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.field textarea { resize: vertical; min-height: 120px; font-family: var(--font-body); }
.field-hint { font-size: var(--text-caption-size); color: var(--text-muted); }
.field-hint a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }

.field-error { font-size: var(--text-caption-size); color: var(--color-error-text); font-weight: 700; }
.is-invalid { border-color: var(--color-error-text) !important; }
.is-invalid:focus { box-shadow: 0 0 0 4px rgba(166,64,47,0.14) !important; }

.checkbox-field { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); }
.checkbox-field input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand-primary); flex: none; }
.checkbox-field label { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-sm-size); color: var(--text-secondary); }

.form-submit-row { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); flex-wrap: wrap; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
  font-size: var(--text-body-sm-size);
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert p + p { margin-top: var(--space-1); }
.alert--success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert--error { background: var(--color-error-bg); color: var(--color-error-text); }
.alert--info { background: var(--surface-sunken); color: var(--text-secondary); }

.radio-stack { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.radio-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out);
}
.radio-card:hover { border-color: var(--color-ink-400); }
.radio-card input { accent-color: var(--brand-primary); width: 18px; height: 18px; flex: none; }
.radio-card:has(input:checked) { border-color: var(--brand-primary); background: var(--color-peach-050); }
.radio-card__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.radio-card__title { font-family: var(--font-display); font-weight: 600; }
.radio-card__meta { font-size: var(--text-body-sm-size); color: var(--text-secondary); }
.radio-card__price { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   Bag
   ========================================================================== */

.cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--text-primary); transition: background-color var(--transition-fast) var(--ease-out); }
.cart-link:hover { background: var(--brand-primary-tint); }
.cart-link svg { width: 21px; height: 21px; }
.cart-count {
  position: absolute; top: 3px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-on-primary);
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  line-height: 18px; text-align: center;
}
.account-link.is-authed::after { content: ""; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand-primary); }

.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-8); align-items: start; }
.cart-items__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto auto; gap: var(--space-5); align-items: center; padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.cart-item__media { display: block; width: 96px; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-peach-050); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cart-item__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.cart-item__name:hover { color: var(--brand-primary-active); }
.cart-item__meta { color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.cart-item__price { font-family: var(--font-mono); color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.cart-item__remove { align-self: flex-start; margin-top: var(--space-1); background: none; border: none; padding: 0; color: var(--text-muted); font-size: var(--text-body-sm-size); text-decoration: underline; cursor: pointer; }
.cart-item__remove:hover { color: var(--brand-primary-active); }
.cart-item__qty { display: inline-flex; align-items: center; gap: var(--space-2); border: 1.5px solid var(--border-default); border-radius: var(--radius-full); padding: 4px 6px; }
.qty-step { width: 28px; height: 28px; border: none; border-radius: var(--radius-full); background: transparent; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--text-primary); transition: background-color var(--transition-fast) var(--ease-out); }
.qty-step:hover { background: var(--brand-primary-tint); }
.qty-val { min-width: 20px; text-align: center; font-family: var(--font-mono); }
.cart-item__line { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.cart-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); flex-wrap: wrap; }

.cart-summary {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: var(--space-6);
}
.cart-summary__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 var(--space-4); }
.cart-summary__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; }
.cart-summary__total { border-top: 1px solid var(--border-subtle); margin-top: var(--space-2); padding-top: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.cart-summary__checkout { width: 100%; margin-top: var(--space-5); }
.cart-summary__continue { display: block; text-align: center; margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.cart-summary__continue:hover { color: var(--brand-primary-active); }

.ship-progress { margin-top: var(--space-4); font-size: var(--text-body-sm-size); color: var(--text-secondary); }
.ship-progress.is-free { color: var(--color-success-text); font-weight: 700; }
.ship-bar { display: block; height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); margin-top: var(--space-2); overflow: hidden; }
.ship-bar__fill { display: block; height: 100%; background: var(--brand-primary); border-radius: var(--radius-full); }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 72px 1fr; grid-template-areas: "media info" "qty line"; column-gap: var(--space-4); row-gap: var(--space-3); }
  .cart-item__media { width: 72px; grid-area: media; }
  .cart-item__info { grid-area: info; }
  .cart-item__qty { grid-area: qty; justify-self: start; }
  .cart-item__line { grid-area: line; justify-self: end; align-self: center; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-8); align-items: start; }
@media (max-width: 940px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; order: -1; } }

.checkout-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  color: var(--border-default);
}
.checkout-rail__line { position: absolute; left: 5%; right: 5%; top: 17px; width: 90%; height: 6px; z-index: 0; }
.checkout-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; text-align: center; }
.checkout-step__n {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default);
  background-color: var(--surface-card);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--text-muted);
}
.checkout-step__n svg { width: 16px; height: 16px; }
.checkout-step__l { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--text-muted); }
.checkout-step.is-current .checkout-step__n { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-primary); }
.checkout-step.is-current .checkout-step__l { color: var(--text-primary); }
.checkout-step.is-done { cursor: pointer; }
.checkout-step.is-done .checkout-step__n { border-color: var(--brand-primary); color: var(--brand-primary-active); }
.checkout-step.is-done .checkout-step__l { color: var(--text-secondary); }

.checkout-form { display: flex; flex-direction: column; gap: var(--space-5); }
.checkout-summary { position: sticky; top: var(--space-6); }
.checkout-lines { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.checkout-line { display: flex; align-items: center; gap: var(--space-3); }
.checkout-line__media { position: relative; width: 52px; height: 52px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: var(--color-peach-050); }
.checkout-line__media img { width: 100%; height: 100%; object-fit: cover; }
.checkout-line__qty {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-ink-900); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 20px; text-align: center;
}
.checkout-line__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.checkout-line__name { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.checkout-line__meta { font-size: var(--text-caption-size); color: var(--text-secondary); }
.checkout-line__price { font-family: var(--font-mono); font-size: var(--text-body-sm-size); white-space: nowrap; }

/* Order confirmed */
.confirm-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.confirm-mark {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-success-bg); color: var(--color-success-text);
  margin-bottom: var(--space-3);
}
.confirm-mark svg { width: 26px; height: 26px; }
.confirm-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-8); align-items: start; }
@media (max-width: 940px) { .confirm-layout { grid-template-columns: 1fr; } }
.confirm-address { margin-top: var(--space-4); }

/* ==========================================================================
   Timeline (order tracking) — a real sequence, so it is numbered by position
   ========================================================================== */

.timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-2); }
.timeline__item { position: relative; display: flex; gap: var(--space-4); padding-left: var(--space-6); }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 13px; top: 26px; bottom: calc(var(--space-5) * -1);
  width: 2px;
  background: var(--border-subtle);
}
.timeline__item:last-child::before { display: none; }
.timeline__item.is-done::before { background: var(--brand-primary); }
.timeline__dot {
  position: absolute; left: 0; top: 2px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-default);
  background-color: var(--surface-card);
  color: var(--text-on-primary);
}
.timeline__dot svg { width: 14px; height: 14px; }
.timeline__item.is-done .timeline__dot { background: var(--brand-primary); border-color: var(--brand-primary); }
.timeline__item.is-current .timeline__dot { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--focus-ring); }
.timeline__item.is-current .timeline__title { color: var(--brand-primary-active); }
.timeline__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 2px; }

/* ==========================================================================
   Account
   ========================================================================== */

.auth-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: start; }
.auth-layout > *, .account-layout > *, .contact-layout > * { min-width: 0; }
.account-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) {
  .auth-layout, .account-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

.auth-link { color: var(--brand-primary-active); text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-body-sm-size); }
.auth-link:hover { color: var(--text-primary); }
.auth-email { font-family: var(--font-mono); font-size: 0.95em; }

.auth-aside, .account-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-aside__block {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.auth-aside__block p { color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.auth-aside__block .subhead { margin: 0; }
.auth-track { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.auth-track .field { margin-top: 0; width: 100%; }
.account-address { line-height: 1.6; }

.order-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}
.order-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.order-card__id { display: block; font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
a.order-card__id:hover { color: var(--brand-primary-active); text-decoration: underline; }
.order-card__date { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.order-status { border-radius: var(--radius-sm); padding: 4px 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.order-status--transit { background: var(--color-peach-050); color: var(--brand-primary-active); }
.order-status--done { background: var(--surface-muted); color: var(--text-secondary); }
.order-card__items { display: flex; flex-direction: column; }
.order-item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.order-item:last-child { border-bottom: none; }
.order-item__media { display: block; width: 64px; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-peach-050); }
.order-item__media img { width: 100%; height: 100%; object-fit: cover; }
.order-item__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.order-item__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--text-primary); }
.order-item__name:hover { color: var(--brand-primary-active); }
.order-item__meta { color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.order-item__price { font-family: var(--font-mono); color: var(--text-primary); white-space: nowrap; }
.order-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.order-card__total { font-family: var(--font-body); color: var(--text-secondary); font-size: var(--text-body-sm-size); }
.order-card__total strong { font-family: var(--font-display); color: var(--text-primary); margin-left: var(--space-2); }

@media (max-width: 480px) {
  .form-tabs { flex-wrap: wrap; }
  .order-card { padding: var(--space-5); }
  .order-card__head, .order-card__foot { flex-wrap: wrap; }
  .order-card__foot .btn { width: 100%; justify-content: center; }
  .auth-track .btn { width: 100%; justify-content: center; }
  .product-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast-host { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 200; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 380px; padding: var(--space-3);
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast__media { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-peach-050); }
.toast__media img { width: 100%; height: 100%; object-fit: cover; }
.toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast__title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.toast__name { color: var(--text-secondary); font-size: var(--text-body-sm-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__link { flex: none; margin-left: auto; align-self: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: var(--brand-primary); color: var(--text-on-primary); font-weight: 700; font-size: var(--text-body-sm-size); white-space: nowrap; }
.toast__link:hover { background: var(--brand-primary-active); color: var(--text-on-primary); }
@media (max-width: 560px) {
  .toast-host { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .toast { max-width: none; }
}

/* ==========================================================================
   Utility & motion
   ========================================================================== */

.mt-0 { margin-top: 0 !important; }

@media (max-width: 360px) {
  .site-header__inner { gap: var(--space-3); }
  .logo { padding: 8px 12px 9px; }
  .logo__type { font-size: 0.98rem; }
  .header-actions { gap: 0; }
  .cart-link { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .category-card:hover { transform: none; }
}

/* Narrow phones: the search and saved icons move into the menu panel so the
   header row fits without shrinking any tap target. */
@media (max-width: 640px) {
  .header-actions .hide-sm { display: none; }
}

/* ==========================================================================
   Product options and description — laid out like the live product page:
   one dropdown per attribute, then a single Description panel below.
   ========================================================================== */

.product-options .field { margin-top: 0; }
.product-option select { cursor: pointer; }

.product-description { max-width: 860px; }
.product-description summary { font-size: 1.05rem; }
.product-description__body > h2,
.product-description__body > h3,
.product-description__body > h4 {
  color: var(--text-primary);
  line-height: 1.25;
  margin-top: var(--space-6);
}
.product-description__body > *:first-child { margin-top: 0; }
.product-description__body > h2 { font-size: 1.3rem; font-weight: 700; }
.product-description__body > h3 { font-size: 1.1rem; font-weight: 700; }
.product-description__body > h4 { font-size: 1rem; font-weight: 600; }
.product-description__body strong,
.product-description__body b { color: var(--text-primary); }
.product-description__body ol { display: flex; flex-direction: column; gap: var(--space-2); counter-reset: d; }
.product-description__body ol li { counter-increment: d; }
.product-description__body ol li::before {
  content: counter(d);
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--brand-primary-active);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* The shop page's type chips sit as a plain second row under the collection
   row. No indent — the nesting read as a tree, which it is not. */
.filter-chips--sub { margin-top: calc(var(--space-4) * -1 + var(--space-2)); }

/* ==========================================================================
   Carousel — a scroll strip for "more like this". A partial card at the right
   edge says there is more; the arrows sit on the strip's edges, centred on the
   photo row, and appear on hover the way they do on a shop you already know.
   ========================================================================== */

.carousel {
  --carousel-card: clamp(148px, 40vw, 216px);
  position: relative;
}
.carousel__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-block: var(--space-1) var(--space-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  flex: 0 0 var(--carousel-card);
  scroll-snap-align: start;
}

.carousel-btn {
  position: absolute;
  /* The card photo is square, so its middle is half a card width down. */
  top: calc(var(--space-1) + var(--carousel-card) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background-color: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-medium);
  opacity: 0;
  transition: opacity var(--transition-fast) var(--ease-out),
              background-color var(--transition-fast) var(--ease-out),
              border-color var(--transition-fast) var(--ease-out);
}
.carousel-btn--prev { left: -8px; }
.carousel-btn--next { right: -8px; }
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover:not(:disabled) { background: var(--color-peach-050); border-color: var(--brand-primary); }
.carousel-btn:disabled { opacity: 0 !important; pointer-events: none; }

/* Reveal on hover, and always for a keyboard. */
.carousel:hover .carousel-btn,
.carousel:focus-within .carousel-btn,
.carousel-btn:focus-visible { opacity: 1; }


/* Phones swipe, so the arrows are dead weight there. */
@media (hover: none), (max-width: 700px) {
  .carousel-btn { display: none; }
  .carousel__track { padding-inline-end: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* ==========================================================================
   WordPress and WooCommerce bridge
   The prototype owns its own markup. These rules map the same design onto the
   markup WordPress, the block theme and WooCommerce produce.
   ========================================================================== */

/* The block theme sets its own root sizing and a global layout wrapper. */
.byanh-page .wp-site-blocks > * { margin-block-start: 0; }
.byanh-page :where(.is-layout-constrained) > * { margin-block-start: 0; }

/* Buttons rendered by WooCommerce and by core blocks. */
.byanh-page .woocommerce a.button,
.byanh-page .woocommerce button.button,
.byanh-page .woocommerce input.button,
.byanh-page .woocommerce a.button.alt,
.byanh-page .woocommerce button.button.alt,
.byanh-page .wp-element-button,
.byanh-page .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-on-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background-color var(--transition-fast) var(--ease-out);
}
.byanh-page .woocommerce a.button:hover,
.byanh-page .woocommerce button.button:hover,
.byanh-page .woocommerce input.button:hover,
.byanh-page .woocommerce a.button.alt:hover,
.byanh-page .woocommerce button.button.alt:hover,
.byanh-page .wp-element-button:hover,
.byanh-page .wc-block-components-button:hover { background: var(--brand-primary-hover); color: var(--text-on-primary); }
.byanh-page .woocommerce button.button:disabled,
.byanh-page .woocommerce button.button.alt:disabled { opacity: 0.45; }

/* WooCommerce form fields, so checkout matches the prototype's inputs. */
.byanh-page .woocommerce form .form-row input.input-text,
.byanh-page .woocommerce form .form-row textarea,
.byanh-page .woocommerce form .form-row select,
.byanh-page .woocommerce .select2-container .select2-selection--single {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background-color: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  height: auto;
  line-height: 1.4;
}
.byanh-page .woocommerce form .form-row input.input-text:focus,
.byanh-page .woocommerce form .form-row textarea:focus,
.byanh-page .woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.byanh-page .woocommerce form .form-row label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}
.byanh-page .woocommerce form .form-row { padding: 0; margin: 0 0 var(--space-5); }
.byanh-page .woocommerce .required { color: var(--brand-primary-active); }

/* Variation dropdowns on the product page — the live shop uses selects. */
.byanh-page .variations { border: none; margin: 0; }
.byanh-page .variations tr { display: block; margin-bottom: var(--space-5); }
.byanh-page .variations th,
.byanh-page .variations td { display: block; padding: 0; text-align: left; border: none; }
.byanh-page .variations th.label label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
  display: block;
}
.byanh-page .variations td.value select {
  width: 100%;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background-color: var(--surface-card);
  font-family: var(--font-body);
  cursor: pointer;
}
.byanh-page .variations td.value select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.byanh-page .reset_variations {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--text-link);
}
.byanh-page .woocommerce-variation-price { margin-bottom: var(--space-4); }
.byanh-page .woocommerce-variation-price .price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }

/* Quantity box */
.byanh-page .woocommerce .quantity .qty {
  width: 76px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 13px 10px;
  text-align: center;
  font-family: var(--font-mono);
}

/* Notices */
.byanh-page .woocommerce-message,
.byanh-page .woocommerce-info,
.byanh-page .woocommerce-error {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-sm-size);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  list-style: none;
}
.byanh-page .woocommerce-message::before,
.byanh-page .woocommerce-info::before,
.byanh-page .woocommerce-error::before { content: none; }
.byanh-page .woocommerce-message { background: var(--color-success-bg); color: var(--color-success-text); }
.byanh-page .woocommerce-error { background: var(--color-error-bg); color: var(--color-error-text); }

/* Cart and checkout tables */
.byanh-page .woocommerce table.shop_table {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.byanh-page .woocommerce table.shop_table th,
.byanh-page .woocommerce table.shop_table td {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
}
.byanh-page .woocommerce table.shop_table thead th {
  border-top: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-sm-size);
}
.byanh-page .woocommerce-cart-form__cart-item img { border-radius: var(--radius-md); }
.byanh-page .cart_totals h2,
.byanh-page .woocommerce-checkout #order_review_heading,
.byanh-page .woocommerce-billing-fields h3,
.byanh-page .woocommerce-additional-fields h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: var(--space-4);
}
.byanh-page .woocommerce .cart-collaterals .cart_totals,
.byanh-page .woocommerce-checkout #order_review {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.byanh-page #add_payment_method #payment,
.byanh-page .woocommerce-cart #payment,
.byanh-page .woocommerce-checkout #payment { background: transparent; border-radius: 0; }

/* My account */
.byanh-page .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-6); }
.byanh-page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.byanh-page .woocommerce-MyAccount-navigation li.is-active a { color: var(--text-primary); border-color: var(--brand-primary); }
.byanh-page .woocommerce-MyAccount-content { max-width: 100%; }

/* Product gallery produced by WooCommerce */
.byanh-page .woocommerce-product-gallery { margin: 0; float: none; width: 100%; }
.byanh-page .woocommerce-product-gallery__wrapper { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); background: var(--color-peach-050); }
.byanh-page .woocommerce-product-gallery__image img { border-radius: 0; }
.byanh-page .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; }
.byanh-page .flex-control-thumbs li { width: 68px; list-style: none; margin: 0; }
.byanh-page .flex-control-thumbs img {
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-subtle);
  opacity: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast) var(--ease-out);
}
.byanh-page .flex-control-thumbs img.flex-active,
.byanh-page .flex-control-thumbs img:hover { border-color: var(--brand-primary); }
.byanh-page .woocommerce-product-gallery__trigger { display: none; }

/* WooCommerce's own product loop, used by the archive fallback */
.byanh-page ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); margin: 0; padding: 0; }
@media (min-width: 600px) { .byanh-page ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); } }
@media (min-width: 900px) { .byanh-page ul.products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .byanh-page ul.products { grid-template-columns: repeat(5, 1fr); } }
.byanh-page ul.products li.product { list-style: none; margin: 0 !important; width: auto !important; float: none !important; }

/* WordPress admin bar leaves room at the top; keep the sticky header under it. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* The variation-swatch plugin styles bare buttons site-wide, which turned the
   gallery thumbnails into peach circles. Win those back explicitly. */
.byanh-page .product-gallery__thumb {
  background: var(--color-peach-050);
  border-radius: var(--radius-sm);
  padding: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.byanh-page .product-gallery__thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;
}
.byanh-page .product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Block-theme overrides

   The Hostinger block theme sets its own type on form controls and its own
   padding on table cells. Both beat the plain element rules above, so they are
   restated here, scoped to our pages.
   ========================================================================== */

/* The theme drops every form control to --wp--preset--font-size--small (12px).
   Buttons are left alone so .btn keeps its own size. */
.byanh-page :is(input, select, textarea) {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.4;
}
.byanh-page :is(input, select, textarea)::placeholder { font-size: var(--text-body-size); }

/* The variations table stayed a shrink-to-fit table, so every row was 149px
   wide, and the theme added 40px of cell padding under each one. */
.byanh-page table.variations {
  display: block;
  width: 100%;
  margin: var(--space-6) 0 0;
  border: 0;
}
.byanh-page table.variations tbody { display: block; width: 100%; }
.byanh-page table.variations tr {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-5);
}
.byanh-page table.variations :is(th, td) {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: left;
}
.byanh-page table.variations th.label { margin-bottom: var(--space-2); }
.byanh-page table.variations th.label label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}
.byanh-page table.variations td.value select {
  width: 100%;
  height: auto;
  min-height: 0;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background-color: var(--surface-card);
  cursor: pointer;
}
.byanh-page table.variations td.value select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
/* The swatch plugin prints an empty span beside each label. */
.byanh-page .woo-selected-variation-item-name:empty { display: none; }

/* The add-to-cart row that follows the variations */
.byanh-page .woocommerce-variation-add-to-cart,
.byanh-page form.cart:not(.variations_form) {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.byanh-page .woocommerce-variation-add-to-cart .quantity,
.byanh-page form.cart .quantity { margin: 0; }
.byanh-page .single_add_to_cart_button { flex-shrink: 0; }

/* The theme's own line height leaks into our copy. */
.byanh-page { line-height: var(--text-body-lh); }

/* WooCommerce ships `.woocommerce div.product form.cart .variations th` and
   friends, which outrank anything reasonable we can write. The 40px of cell
   padding it adds is the gap under each option label. */
.byanh-page table.variations :is(th, td) { padding: 0 !important; }
.byanh-page table.variations th.label { padding-bottom: var(--space-2) !important; }

/* Something in the theme or a plugin sets form-control type with !important —
   the variable resolves correctly, so this is a priority fight, not a value
   one. Buttons stay out of it so .btn keeps its own size. */
.byanh-page :is(input, select, textarea) {
  font-size: var(--text-body-size) !important;
  font-family: var(--font-body) !important;
}
.byanh-page .qty-input,
.byanh-page .woocommerce .quantity .qty { font-family: var(--font-mono) !important; }

/* ==========================================================================
   Block-theme reset

   The site's block theme is configured with the old SoftSun palette and styles
   every bare <button> as a filled primary button. Its global styles outrank a
   plain class selector, so the design's own surfaces are restated here, scoped
   to .byanh-page. Buttons need !important; the theme sets them that way.
   ========================================================================== */

.byanh-page { background: var(--surface-page); color: var(--text-primary); }
.byanh-page :is(h1, h2, h3, h4):not(.footer-heading) { font-family: var(--font-display); color: var(--text-primary); }

.byanh-page .collection-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.byanh-page .display { font-size: var(--text-display-size); font-weight: var(--text-display-weight); line-height: var(--text-display-lh); }
.byanh-page .headline { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); line-height: var(--text-headline-lh); }
.byanh-page .subhead { font-size: var(--text-subhead-size); font-weight: var(--text-subhead-weight); line-height: var(--text-subhead-lh); }

/* Chips are <button>s, so the theme paints them as primary buttons. */
.byanh-page .chip,
.byanh-page button.chip {
  background: var(--surface-sunken) !important;
  background-image: none !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-full) !important;
  padding: 6px 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: var(--text-body-sm-size) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.byanh-page .chip--tab[aria-pressed="true"],
.byanh-page button.chip--tab[aria-pressed="true"] {
  background: var(--brand-primary) !important;
  color: var(--text-on-primary) !important;
  border-color: var(--brand-primary) !important;
}
.byanh-page .product-card__tag.chip { font-size: var(--text-caption-size) !important; padding: 4px 10px !important; }

/* Other bare buttons the design owns. */
.byanh-page .carousel-btn {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.byanh-page .product-gallery__thumb {
  background: var(--color-peach-050) !important;
  background-image: none !important;
  border: 2px solid var(--border-subtle) !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.byanh-page .product-gallery__thumb.is-on { border-color: var(--brand-primary) !important; }
.byanh-page .qty-step {
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.byanh-page .page-btn {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border: 1.5px solid var(--border-default) !important;
}
.byanh-page .page-btn[aria-current="page"] {
  background: var(--brand-primary) !important;
  color: var(--text-on-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* The design's own buttons, restated so the theme cannot recolour them. */
.byanh-page .btn--primary {
  background: var(--brand-primary) !important;
  background-image: none !important;
  color: var(--text-on-primary) !important;
  border-color: transparent !important;
}
.byanh-page .btn--primary:hover { background: var(--brand-primary-hover) !important; }
.byanh-page :is(.btn--ghost, .btn--outline) {
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}
.byanh-page .btn--ghost { border-color: var(--border-default) !important; }
.byanh-page .btn--outline { border-color: var(--color-ink-900) !important; }
.byanh-page :is(.btn--ghost, .btn--outline):hover { background: var(--color-peach-050) !important; border-color: var(--brand-primary) !important; }

/* The add-to-cart row: WooCommerce's own quantity box and submit button.
   A variable product's form.cart IS the variations form, and making that flex
   collapses the option table inside it. Only the simple form gets the row. */
.byanh-page .woocommerce-variation-add-to-cart,
.byanh-page form.cart:not(.variations_form) {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.byanh-page .quantity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 !important;
  float: none !important;
}
.byanh-page .quantity label,
.byanh-page label.screen-reader-text[for^="quantity"] {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.byanh-page .quantity .qty {
  width: 76px !important;
  border: 1.5px solid var(--border-default) !important;
  border-radius: var(--radius-full) !important;
  padding: 13px 10px !important;
  text-align: center;
  font-family: var(--font-mono) !important;
  background-color: var(--surface-card) !important;
  height: auto !important;
  min-height: 0 !important;
}
.byanh-page .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 13px 26px !important;
  border-radius: var(--radius-full) !important;
  background: var(--brand-primary) !important;
  background-image: none !important;
  color: var(--text-on-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border: 1.5px solid transparent !important;
  min-height: 0 !important;
  height: auto !important;
  float: none !important;
  text-transform: none !important;
}
.byanh-page .single_add_to_cart_button:hover:not(.disabled) { background: var(--brand-primary-hover) !important; }
.byanh-page .single_add_to_cart_button.disabled,
.byanh-page .single_add_to_cart_button[disabled] { opacity: 0.45 !important; cursor: not-allowed; }

/* PayPal's own button sits below, full width, and keeps its own branding. */
.byanh-page .wc-ppcp-gateway-buttons,
.byanh-page .ppcp-button-apm { margin-top: var(--space-4); }

/* ==========================================================================
   Product form spacing

   Matched to the prototype: 8px from a label to its control, 24px between
   option groups, 32px above the add-to-cart row.
   ========================================================================== */

/* The swatch plugin prints an empty inline-block span beside every option
   label. Empty or not, an inline-block still generates a full line box, which
   was adding 26px under each label. */
.byanh-page .woo-selected-variation-item-name { display: none !important; }

/* One 8px gap under an option label, not a margin and a padding. */
.byanh-page table.variations th.label {
  padding: 0 0 var(--space-2) !important;
  margin: 0 !important;
}
.byanh-page table.variations tr { margin: 0 0 var(--space-5) !important; }
.byanh-page table.variations tr:last-child { margin-bottom: 0 !important; }

/* The Custom order field comes from Relist Custom Fields. Give it the same
   shape as an option group. */
.byanh-page .relist-custom { margin-top: var(--space-5); }
.byanh-page .relist-custom__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 !important;
  padding: 0 !important;
}
.byanh-page .relist-custom__row > label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin: 0 !important;
}
.byanh-page .relist-custom textarea {
  min-height: 96px;
  resize: vertical;
  border: 1.5px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--surface-card) !important;
}

/* Quantity label sits 8px above its box, like every other field. */
.byanh-page .quantity label { margin: 0 !important; padding: 0 !important; }

/* 32px above the add-to-cart row, matching .product-actions. */
.byanh-page .woocommerce-variation-add-to-cart { margin-top: var(--space-6) !important; }

/* ==========================================================================
   Select chevron

   The native arrow sits hard against the right edge and differs per browser.
   Draw our own, inset from the edge, with room reserved for it.
   ========================================================================== */

.byanh-page select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px 16px !important;
  padding-right: 44px !important;
}
/* Firefox keeps a focus ring on the removed arrow area. */
.byanh-page select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--text-primary); }

/* The toolbar selects are shorter, so the chevron sits a little tighter in. */
.byanh-page .sort-field select {
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

/* The Sort label and its select sit on one line, centred to each other. */
.byanh-page .sort-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.byanh-page .sort-field label { margin: 0 !important; padding: 0 !important; white-space: nowrap; }

/* ==========================================================================
   Description panel

   The card spans the content width so there is no orphaned empty column, but
   the copy inside stays at a readable measure. Full-bleed text would run to
   about 154 characters a line; 80 is already at the top of the comfortable
   range, and the tables and lists get the full width because they need it.
   ========================================================================== */

/* The card hugs the copy. Widening the card and capping only the text left a
   bordered box that was half empty, which reads worse than a narrow card. */
.byanh-page .product-description { max-width: 780px; }
.byanh-page .product-description__body > :is(table, figure, img) { max-width: none; }

/* ==========================================================================
   Photo viewer

   Replaces the zoom WooCommerce's own gallery would have provided. A dark
   scrim, no blur — the design uses a plain overlay rather than frosted glass.
   ========================================================================== */

.byanh-page .product-gallery__main.is-zoomable { cursor: zoom-in; }
.byanh-page .product-gallery__main.is-zoomable:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox[hidden] { display: none; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(34, 48, 58, 0.82); }
.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - clamp(96px, 16vw, 160px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.lightbox__btn {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  color: #fff !important;
  padding: 0 !important;
  min-height: 0 !important;
  transition: background-color var(--transition-fast) var(--ease-out);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24) !important; }
.lightbox__btn:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn--close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lightbox__btn--prev { left: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }

.lightbox__counter {
  position: absolute;
  bottom: clamp(12px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}

@media (max-width: 560px) {
  .lightbox__btn { width: 42px; height: 42px; }
  .lightbox__btn--prev { left: 6px; }
  .lightbox__btn--next { right: 6px; }
}

/* ==========================================================================
   WooCommerce cart and checkout layout

   WooCommerce still lays these out with floats and percentage widths. Replace
   that with the grid the design uses: form on the left, totals on the right.
   ========================================================================== */

/* ---- Checkout ---- */
@media (min-width: 900px) {
  .byanh-page form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    grid-template-areas:
      "details heading"
      "details review";
    gap: 0 var(--space-8);
    align-items: start;
  }
  .byanh-page form.woocommerce-checkout #customer_details { grid-area: details; }
  .byanh-page form.woocommerce-checkout #order_review_heading { grid-area: heading; margin: 0 0 var(--space-4); }
  .byanh-page form.woocommerce-checkout #order_review { grid-area: review; position: sticky; top: var(--space-6); }
}

/* Billing and shipping stack; their fields sit in a two-column grid. */
.byanh-page .woocommerce form .col2-set { display: block; width: 100%; }
.byanh-page .woocommerce form .col2-set > :is(.col-1, .col-2) {
  width: 100%;
  float: none;
  margin: 0 0 var(--space-6);
}
.byanh-page .woocommerce-billing-fields__field-wrapper,
.byanh-page .woocommerce-shipping-fields__field-wrapper,
.byanh-page .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}
@media (max-width: 560px) {
  .byanh-page .woocommerce-billing-fields__field-wrapper,
  .byanh-page .woocommerce-shipping-fields__field-wrapper,
  .byanh-page .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
}
.byanh-page .woocommerce form .form-row {
  float: none !important;
  width: auto !important;
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.byanh-page .woocommerce form .form-row-first,
.byanh-page .woocommerce form .form-row-last { grid-column: span 1; }
.byanh-page .woocommerce form .form-row :is(input.input-text, textarea, select),
.byanh-page .woocommerce form .form-row .select2-container { width: 100% !important; }
.byanh-page .woocommerce form .form-row label { display: block; }
.byanh-page .woocommerce-shipping-fields h3,
.byanh-page .woocommerce-additional-fields h3 { margin-top: 0; }
.byanh-page .woocommerce-shipping-fields h3 label { display: inline-flex; align-items: center; gap: var(--space-3); }

.byanh-page #order_review table.shop_table { width: 100%; }
.byanh-page .woocommerce-checkout-payment .place-order { margin-top: var(--space-5); }
.byanh-page #place_order { width: 100%; }

/* ---- Cart ---- */
.byanh-page .woocommerce-cart-form { width: 100%; }
.byanh-page .woocommerce .cart-collaterals { width: 100%; float: none; }
.byanh-page .woocommerce .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
  max-width: 400px;
  margin-left: auto;
}
.byanh-page .woocommerce .cart-collaterals .cross-sells { width: 100%; float: none; }
.byanh-page .woocommerce table.cart .product-thumbnail img { width: 72px; }
.byanh-page .woocommerce .cart .actions .coupon { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.byanh-page .woocommerce .cart .actions .coupon .input-text { width: auto !important; min-width: 180px; }
.byanh-page .wc-proceed-to-checkout .checkout-button { width: 100%; }

/* WooCommerce sets `.form-row { display: grid }` itself, which pushed each
   label into its own cell beside the input instead of above it. And its
   `.col-1 / .col-2` widths are more specific than a plain override. */
.byanh-page .woocommerce form .form-row {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2);
}
.byanh-page .woocommerce form .form-row > label { order: 0; margin: 0 !important; }
.byanh-page .woocommerce form .form-row .woocommerce-input-wrapper { width: 100%; display: block; }
.byanh-page .woocommerce form .col2-set > :is(.col-1, .col-2) { width: 100% !important; max-width: none !important; }
.byanh-page .woocommerce form .form-row.create-account,
.byanh-page .woocommerce form .form-row .checkbox { flex-direction: row; align-items: center; gap: var(--space-3); }

/* ==========================================================================
   Footer links

   styles.css relies on `a { color: inherit }`, a bare element selector. The
   block theme's link colour outranks it, which turned the footer orange.
   ========================================================================== */

.byanh-page .site-footer a { color: #F3EFE9; }
.byanh-page .site-footer .footer-links a:hover,
.byanh-page .site-footer .footer-bottom a:hover { color: var(--color-peach-500); }
.byanh-page .site-footer .footer-heading { color: #B8B0A6; }
.byanh-page .site-footer .footer-tagline,
.byanh-page .site-footer .footer-bottom { color: #B8B0A6; }

/* ==========================================================================
   WPForms

   The contact form is a real WPForms form. Its fields already inherit the
   design's input rules; its button and checkbox ship plugin defaults.
   ========================================================================== */

.byanh-page .wpforms-container { margin: 0; max-width: none; }
.byanh-page .wpforms-form .wpforms-field { padding: 0 0 var(--space-5); }
.byanh-page .wpforms-form .wpforms-field-label {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-2) !important;
}
.byanh-page .wpforms-form .wpforms-required-label { color: var(--brand-primary-active) !important; }
.byanh-page .wpforms-form .wpforms-field-description {
  font-size: var(--text-caption-size);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.byanh-page .wpforms-form :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea) {
  border: 1.5px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  background-color: var(--surface-card) !important;
  box-shadow: none !important;
  height: auto !important;
  max-width: none !important;
}
.byanh-page .wpforms-form :is(input, select, textarea):focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}
.byanh-page .wpforms-form input[type=checkbox],
.byanh-page .wpforms-form input[type=radio] { accent-color: var(--brand-primary); width: 18px; height: 18px; }

.byanh-page .wpforms-form button[type=submit],
.byanh-page .wpforms-form .wpforms-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 13px 26px !important;
  border-radius: var(--radius-full) !important;
  background: var(--brand-primary) !important;
  background-image: none !important;
  color: var(--text-on-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  text-transform: none !important;
}
.byanh-page .wpforms-form button[type=submit]:hover,
.byanh-page .wpforms-form .wpforms-submit:hover { background: var(--brand-primary-hover) !important; }

.byanh-page .wpforms-confirmation-container-full,
.byanh-page div[submit-success] > .wpforms-confirmation-container-full {
  background: var(--color-success-bg) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-success-text) !important;
  padding: var(--space-4) var(--space-5) !important;
}
.byanh-page .wpforms-error { color: var(--color-error-text) !important; font-size: var(--text-caption-size); }

/* The footer column headings are <h2>, so the theme's heading size beat the
   .footer-heading rule once our reset stopped resetting it. */
.byanh-page .site-footer .footer-heading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B8B0A6;
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Cart table

   WooCommerce renders the bag as a six-column table. Lay it out as the
   design's rows: photo, details, price, quantity, line total.
   ========================================================================== */

/* A bug I introduced: un-hiding the quantity label for the product page also
   exposed WooCommerce's verbose screen-reader label in the cart. Only the
   single product page gets a visible one. */
.byanh-page .quantity label,
.byanh-page label.screen-reader-text[for^="quantity"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap;
}
body.single-product.byanh-page .quantity label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* Product links in the bag are body text, not brand-coloured links. */
.byanh-page .woocommerce table.cart td.product-name > a,
.byanh-page .woocommerce table.cart td.product-name > a:visited {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}
.byanh-page .woocommerce table.cart td.product-name > a:hover { color: var(--brand-primary-active); }
.byanh-page .woocommerce table.cart .variation,
.byanh-page .woocommerce table.cart dl.variation {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.byanh-page .woocommerce table.cart dl.variation :is(dt, dd) { display: inline; margin: 0; font-weight: 400; }
.byanh-page .woocommerce table.cart dl.variation dd { margin-right: var(--space-3); }
.byanh-page .woocommerce table.cart dl.variation p { margin: 0; }

@media (min-width: 780px) {
  .byanh-page .woocommerce-cart-form table.shop_table,
  .byanh-page .woocommerce-cart-form table.shop_table tbody { display: block; width: 100%; }
  .byanh-page .woocommerce-cart-form table.shop_table thead { display: none; }
  .byanh-page .woocommerce-cart-form tr.woocommerce-cart-form__cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6) var(--space-5) 0;
    border-top: 1px solid var(--border-subtle);
  }
  .byanh-page .woocommerce-cart-form tr.woocommerce-cart-form__cart-item > td {
    border: 0 !important;
    padding: 0 !important;
  }
  .byanh-page .woocommerce-cart-form td.product-thumbnail { order: 1; }
  .byanh-page .woocommerce-cart-form td.product-thumbnail img {
    width: 96px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
  }
  .byanh-page .woocommerce-cart-form td.product-name { order: 2; }
  .byanh-page .woocommerce-cart-form td.product-price { order: 3; font-family: var(--font-mono); color: var(--text-secondary); font-size: var(--text-body-sm-size); }
  .byanh-page .woocommerce-cart-form td.product-quantity { order: 4; }
  .byanh-page .woocommerce-cart-form td.product-subtotal { order: 5; font-family: var(--font-mono); font-weight: 700; }
  /* The remove × sits at the row's edge rather than taking a whole column. */
  .byanh-page .woocommerce-cart-form td.product-remove {
    position: absolute;
    top: var(--space-5);
    right: 0;
    width: auto;
  }
  .byanh-page .woocommerce-cart-form tr.woocommerce-cart-form__cart-item > td.product-remove { order: 0; }
  .byanh-page .woocommerce-cart-form tr:last-of-type { border-bottom: 1px solid var(--border-subtle); }
}

.byanh-page .woocommerce table.cart a.remove {
  color: var(--text-muted) !important;
  font-size: 1.35rem;
  line-height: 1;
}
.byanh-page .woocommerce table.cart a.remove:hover { color: var(--color-error-text) !important; background: none !important; }
.byanh-page .woocommerce table.cart td.actions { padding: var(--space-5) 0 !important; }

/* ==========================================================================
   My account

   WooCommerce floats the navigation into a 30% column and styles the list as
   stacked links. The design wants one tab row above the content.
   ========================================================================== */

.byanh-page .woocommerce-account .woocommerce { display: block; width: 100%; }
.byanh-page .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin: 0 0 var(--space-6) !important;
}
.byanh-page .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  align-items: flex-end;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
  padding: 0;
  list-style: none;
}
.byanh-page .woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
  width: auto !important;
  float: none !important;
}
.byanh-page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-3) var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  white-space: nowrap;
}
.byanh-page .woocommerce-MyAccount-navigation li a:hover { color: var(--text-primary); }
.byanh-page .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--text-primary);
  border-bottom-color: var(--brand-primary);
}

.byanh-page .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  max-width: 860px;
}
.byanh-page .woocommerce-MyAccount-content a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.byanh-page .woocommerce-MyAccount-content a.button { text-decoration: none; }
.byanh-page .woocommerce-MyAccount-content > p:first-child { margin-bottom: var(--space-4); }

/* Sign-in and register forms sit in the design's card. */
.byanh-page .woocommerce-account .woocommerce-form-login,
.byanh-page .woocommerce-account .woocommerce-form-register {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 44px);
  max-width: 520px;
}

/* Click the photo to zoom, then move the pointer to pan. */
.lightbox__figure { overflow: hidden; border-radius: var(--radius-lg); }
.lightbox__img { cursor: zoom-in; transition: transform 0.25s var(--ease-out); will-change: transform; }
.lightbox__img.is-zoomed { cursor: zoom-out; transform: scale(2.2); }
@media (prefers-reduced-motion: reduce) { .lightbox__img { transition: none; } }

/* WooCommerce wraps each variation value in a <p>, which is block, so every
   value fell to its own line. Lay the meta out as a compact label/value grid. */
.byanh-page .woocommerce table.cart dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--space-2);
  margin: var(--space-2) 0 0;
}
.byanh-page .woocommerce table.cart dl.variation :is(dt, dd) {
  display: block;
  margin: 0;
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.byanh-page .woocommerce table.cart dl.variation dt { font-weight: 600; }
.byanh-page .woocommerce table.cart dl.variation dd p { display: inline; margin: 0; }
.byanh-page .woocommerce table.cart .product-thumbnail img { width: 96px !important; }

/* Address card headings are <h3>, so the theme's heading size wins unless we
   say otherwise — the same trap as the footer column headings. */
.byanh-page .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-4); }
@media (max-width: 640px) { .byanh-page .woocommerce-Addresses { grid-template-columns: 1fr; } }
.byanh-page .woocommerce-Address { width: 100% !important; float: none !important; }
.byanh-page .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.byanh-page .woocommerce-Address-title :is(h2, h3) {
  font-family: var(--font-display);
  font-size: var(--text-subhead-size);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.byanh-page .woocommerce-Address address { font-style: normal; line-height: 1.6; color: var(--text-secondary); }
.byanh-page fieldset legend { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); padding: 0; margin: var(--space-5) 0 var(--space-2); }
.byanh-page .woocommerce-account fieldset { border: 0; padding: 0; }

/* ==========================================================================
   Account - profile form

   WooCommerce stacks seven fields in one column, which made the tab a long
   scroll. The four identity fields now sit two to a row inside one card, and
   the three password fields live in a panel that stays shut until someone
   means to change a password. Addresses moved to a tab of their own.
   ========================================================================== */

.byanh-page .woocommerce-EditAccountForm.edit-account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
  align-items: start;
  max-width: 720px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 40px);
}
.byanh-page .account-form-title { grid-column: 1 / -1; margin: 0 0 var(--space-5); }

/* form-row-wide is WooCommerce's own class on display name and email. Both are
   short fields, so they pair up rather than running the full width. */
.byanh-page .woocommerce form.edit-account .form-row-wide { grid-column: span 1; }
.byanh-page .woocommerce form.edit-account .clear { display: none; }
.byanh-page .woocommerce form.edit-account > p:not(.form-row) {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
}
.byanh-page form.edit-account span.description,
.byanh-page form.edit-account em {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
  color: var(--text-secondary);
  font-style: normal;
}

/* ---- Password panel ---- */
.byanh-page .pw-panel {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-page);
}
.byanh-page .pw-panel__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
}
.byanh-page .pw-panel__summary::-webkit-details-marker { display: none; }
.byanh-page .pw-panel__summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s var(--ease-out, ease);
}
.byanh-page .pw-panel[open] .pw-panel__summary::after { transform: translateY(2px) rotate(-135deg); }
.byanh-page .pw-panel__summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.byanh-page .pw-panel__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-1);
  border-top: 1px solid var(--border-subtle);
}
.byanh-page .woocommerce .pw-panel__body .form-row { grid-column: span 1; }
.byanh-page .woocommerce .pw-panel__body .form-row:first-child { grid-column: 1 / -1; }

/* ---- Addresses tab ---- */
.byanh-page .woocommerce-Address {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 2.4vw, 32px);
  background-color: var(--surface-card);
}
.byanh-page .woocommerce-Address-title .edit { font-size: var(--text-body-sm-size); white-space: nowrap; }

/* WooCommerce clears its old float layout with ::before and ::after on the
   wrapper. In a grid those become items of their own, which took cell one and
   pushed the billing card into the second column and the shipping card onto a
   second row. */
.byanh-page .woocommerce-Addresses::before,
.byanh-page .woocommerce-Addresses::after { display: none; }

@media (max-width: 640px) {
  .byanh-page .woocommerce-EditAccountForm.edit-account,
  .byanh-page .pw-panel__body { grid-template-columns: 1fr; }
  .byanh-page .woocommerce form.edit-account .form-row-wide,
  .byanh-page .woocommerce form.edit-account .form-row-first,
  .byanh-page .woocommerce form.edit-account .form-row-last,
  .byanh-page .woocommerce .pw-panel__body .form-row { grid-column: 1 / -1; }
}

/* ---- One address form (Add or Edit) ---- */
.byanh-page form:has(> .woocommerce-address-fields) {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 40px);
  max-width: 720px;
}
.byanh-page form:has(> .woocommerce-address-fields) > :is(h2, h3) {
  font-family: var(--font-display);
  font-size: var(--text-subhead-size);
  font-weight: var(--text-subhead-weight);
  line-height: 1.3;
  margin: 0 0 var(--space-5);
}
.byanh-page .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
  align-items: start;
}
/* Short fields pair up. Street, country and email stay full width because
   half a column truncates them on a laptop. */
.byanh-page .woocommerce #billing_postcode_field,
.byanh-page .woocommerce #billing_city_field,
.byanh-page .woocommerce #billing_state_field,
.byanh-page .woocommerce #billing_phone_field,
.byanh-page .woocommerce #shipping_postcode_field,
.byanh-page .woocommerce #shipping_city_field,
.byanh-page .woocommerce #shipping_state_field,
.byanh-page .woocommerce #shipping_phone_field { grid-column: span 1; }
.byanh-page .woocommerce #billing_email_field { grid-column: 1 / -1; }

/* select2 hides the real select with width:1px. An earlier rule in this file
   forces every select to 100% with !important, which made the hidden one full
   width and gave the page a horizontal scrollbar. */
.byanh-page .woocommerce form .form-row select.select2-hidden-accessible { width: 1px !important; }

@media (max-width: 640px) {
  .byanh-page .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
  .byanh-page .woocommerce-address-fields__field-wrapper > .form-row { grid-column: 1 / -1 !important; }
}

/* ==========================================================================
   Saved heart on a product card

   The bridge layer in this file styles bare buttons for WooCommerce, and
   ".byanh-page button" outranks ".wish-btn". That gave the heart the primary
   pill: orange, 32px of padding, and a white icon squeezed to nothing.
   ========================================================================== */
.byanh-page .wish-btn {
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  box-shadow: none;
  font-size: inherit;
  line-height: 1;
}
.byanh-page .wish-btn svg { width: 17px; height: 17px; flex: none; stroke: currentColor; }
.byanh-page .wish-btn:hover { background-color: #fff; color: var(--brand-primary-active); border-color: var(--brand-primary); }
.byanh-page .wish-btn.is-on { background-color: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }
.byanh-page .wish-btn.is-on svg { fill: var(--brand-primary); }

/* ==========================================================================
   Bag

   WooCommerce ships the bag as a table plus a totals block stacked under it,
   which left the whole left half of the page empty. The design puts the lines
   in one column and a sticky summary card beside them, so this rebuilds the
   table as cart_item rows, design shape.
   ========================================================================== */
body.woocommerce-cart.byanh-page .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
}
body.woocommerce-cart.byanh-page .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* An empty bag has no form, so the two column grid would strand the message. */
body.woocommerce-cart.byanh-page .woocommerce:not(:has(.woocommerce-cart-form)) { display: block; }

.byanh-page .woocommerce table.shop_table.cart,
.byanh-page .woocommerce table.shop_table.cart tbody { display: block; width: 100%; border: 0; }
.byanh-page .woocommerce table.shop_table.cart thead { display: none; }

.byanh-page .woocommerce tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.byanh-page .woocommerce tr.woocommerce-cart-form__cart-item > td { display: block; border: 0; padding: 0; }
.byanh-page .woocommerce tr.woocommerce-cart-form__cart-item > td.product-remove,
.byanh-page .woocommerce tr.woocommerce-cart-form__cart-item > td.product-price { display: none; }

.byanh-page .woocommerce table.cart td.product-thumbnail { width: 96px; }
.byanh-page .woocommerce table.cart td.product-thumbnail img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-peach-050);
}

.byanh-page .woocommerce td.product-name { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.byanh-page .woocommerce td.product-name > a:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.byanh-page .woocommerce td.product-name > a:first-child:hover { color: var(--brand-primary-active); }
.byanh-page .woocommerce td.product-name dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-2);
  margin: 0;
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.byanh-page .woocommerce td.product-name dl.variation dt { font-weight: 400; }
.byanh-page .woocommerce td.product-name dl.variation dd { margin: 0; }
.byanh-page .woocommerce td.product-name dl.variation dd p { margin: 0; }
.byanh-page .cart-item__price { font-family: var(--font-mono); font-size: var(--text-body-sm-size); color: var(--text-secondary); }
.byanh-page .woocommerce td.product-name a.remove {
  align-self: flex-start;
  width: auto;
  height: auto;
  margin-top: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  font-size: var(--text-body-sm-size);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline;
}
.byanh-page .woocommerce td.product-name a.remove:hover { background: none; color: var(--brand-primary-active); }

.byanh-page .woocommerce td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 4px 6px;
}
.byanh-page .woocommerce td.product-quantity input.qty {
  width: 48px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  padding: 0;
  box-shadow: none;
}
.byanh-page .woocommerce td.product-quantity input.qty:focus { outline: none; }

.byanh-page .woocommerce td.product-subtotal {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}

.byanh-page .woocommerce tr:has(> td.actions) { display: block; }
.byanh-page .woocommerce td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0 0;
  border: 0;
}

.byanh-page .woocommerce .cart-collaterals { position: sticky; top: var(--space-6); width: 100%; }
.byanh-page .woocommerce .cart-collaterals .cart_totals {
  width: 100%;
  max-width: none;
  margin: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.byanh-page .cart_totals > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 var(--space-4);
}
.byanh-page .cart_totals table.shop_table,
.byanh-page .cart_totals table.shop_table tbody { display: block; width: 100%; border: 0; }
.byanh-page .cart_totals table.shop_table tr {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border: 0;
}
.byanh-page .cart_totals table.shop_table :is(th, td) {
  display: block;
  border: 0;
  padding: 0;
  text-align: right;
  font-weight: 400;
}
.byanh-page .cart_totals table.shop_table th { text-align: left; color: var(--text-primary); }
.byanh-page .cart_totals tr.order-total {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.byanh-page .cart_totals .wc-proceed-to-checkout { padding: 0; margin-top: var(--space-5); }

@media (max-width: 900px) {
  body.woocommerce-cart.byanh-page .woocommerce { grid-template-columns: 1fr; gap: var(--space-6); }
  .byanh-page .woocommerce .cart-collaterals { position: static; }
}
@media (max-width: 560px) {
  .byanh-page .woocommerce tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "media info" "qty line";
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
  .byanh-page .woocommerce td.product-thumbnail { grid-area: media; width: 72px; }
  .byanh-page .woocommerce table.cart td.product-thumbnail img { width: 72px; height: 72px; }
  .byanh-page .woocommerce td.product-name { grid-area: info; }
  .byanh-page .woocommerce td.product-quantity { grid-area: qty; justify-self: start; }
  .byanh-page .woocommerce td.product-subtotal { grid-area: line; justify-self: end; align-self: center; }
}

/* ---- Bag, corrections ----
   The "> td { display: block }" reset above carries one more element selector
   than "td.product-name", so it won the display and left the details cell as a
   block with a centred remove link. */
.byanh-page .woocommerce tr.woocommerce-cart-form__cart-item > td.product-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  text-align: left;
}
.byanh-page .woocommerce tr.woocommerce-cart-form__cart-item { border-top: 0; }
.byanh-page .woocommerce table.cart td.product-name a.remove {
  width: auto;
  height: auto;
  text-align: left;
  margin: var(--space-1) auto 0 0;
}
/* The pill lives on the wrapper. A second pill on the input made an oval. */
.byanh-page .woocommerce table.cart td.product-quantity input.qty { border-radius: 0; border: 0; }
.byanh-page .woocommerce table.cart tr:has(> td.actions) { border-bottom: 0; }
.byanh-page .woocommerce table.cart td.actions { border-top: 0; }

/* ---- Bag, quantity pill sizing ---- */
.byanh-page .woocommerce table.cart td.product-quantity .quantity { padding: 2px 6px; }
.byanh-page .woocommerce table.cart td.product-quantity input.qty {
  height: 32px;
  padding: 0 4px;
  font-size: 0.95rem;
  -moz-appearance: textfield;
}
.byanh-page .woocommerce table.cart td.product-quantity input.qty::-webkit-outer-spin-button,
.byanh-page .woocommerce table.cart td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   Account, width and empty state fixes
   ========================================================================== */

/* The block theme constrains every child of a layout container to its 1000px
   content width. That capped the tab strip, so its rule ended short of the
   help aside instead of running the width of the page. */
.byanh-page .woocommerce { max-width: none !important; }

/* The forms held a 720px cap, which left a band of empty page between the card
   and the aside. They fill their column now, the way the design draws them. */
.byanh-page .woocommerce-EditAccountForm.edit-account,
.byanh-page form:has(> .woocommerce-address-fields) { max-width: none; }

/* Add and Edit were bare orange text. They are the only action on an address
   card, so they take the ghost button the rest of the design uses. */
.byanh-page .woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body-sm-size);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.byanh-page .woocommerce-Address-title .edit:hover {
  background-color: var(--color-peach-050);
  border-color: var(--brand-primary);
  color: var(--text-primary);
}

/* No country is chosen yet, so WooCommerce swaps the state field for a hidden
   input and leaves the label behind. That read as a field with no box. */
.byanh-page .woocommerce .form-row:has(> .woocommerce-input-wrapper > input.hidden) { display: none !important; }

/* ==========================================================================
   The country picker is select2, not a plain select

   WooCommerce swaps the country and state selects for select2 widgets. The
   bridge padding landed on the outer box while select2 put its own padding on
   the text inside, so the control stood 81px tall beside a 53px text input.
   These rules make it read as one of the design's fields.
   ========================================================================== */
/* Scoped to the form. select2 appends the open dropdown to <body> with an
   inline width, and a blanket 100% overrode it and pushed the page sideways. */
.byanh-page .woocommerce .select2-container { width: 100% !important; }

.byanh-page .woocommerce .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 14px 44px 14px 16px !important;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) 50%;
  background-size: 16px 16px;
  transition: border-color var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out);
}
.byanh-page .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4;
  height: auto;
  color: var(--text-primary);
}
.byanh-page .woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted);
}
/* select2 draws its own triangle. The design has one chevron, above. */
.byanh-page .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

.byanh-page .woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.byanh-page .woocommerce .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
  outline: none;
}

.byanh-page .select2-dropdown {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
}
.byanh-page .select2-container--default .select2-search--dropdown { padding: var(--space-3); }
.byanh-page .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--text-body-size);
}
.byanh-page .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--brand-primary);
}
.byanh-page .select2-container--default .select2-results__option {
  padding: 10px 16px;
  font-size: var(--text-body-size);
  color: var(--text-primary);
}
.byanh-page .select2-container--default .select2-results__option--highlighted {
  background-color: var(--color-peach-050);
  color: var(--text-primary);
}
.byanh-page .select2-container--default .select2-results__option[aria-selected="true"],
.byanh-page .select2-container--default .select2-results__option[data-selected="true"] {
  background-color: var(--brand-primary-tint);
  color: var(--text-primary);
}

/* ---- Add and Edit on an address card ----
   The ghost pill was too heavy for a card whose only other content is two
   lines of address. It takes the design's inline link instead. */
.byanh-page .woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-link);
  text-decoration: none;
  white-space: nowrap;
}
.byanh-page .woocommerce-Address-title .edit:hover {
  background: none;
  color: var(--brand-primary-active);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Bag, quantity steppers and chrome

   .qty-step comes from the prototype, but the bridge rule for bare buttons
   carries more weight, so each property is restated under .byanh-page.
   ========================================================================== */
.byanh-hidden { display: none !important; }

.byanh-page .woocommerce table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 5px;
}
.byanh-page .woocommerce table.cart td.product-quantity .qty-step {
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease-out);
}
.byanh-page .woocommerce table.cart td.product-quantity .qty-step:hover { background-color: var(--brand-primary-tint); }
.byanh-page .woocommerce table.cart td.product-quantity .qty-step:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}
.byanh-page .woocommerce table.cart td.product-quantity input.qty {
  width: 34px;
  height: 28px;
  padding: 0;
  text-align: center;
}

.byanh-page .cart-items__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.byanh-page .cart-summary__continue {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.byanh-page .cart-summary__continue:hover { color: var(--brand-primary-active); }

/* ---- Bag steppers, direction and size ----
   The product page lays its quantity box out as a column, label above input.
   That flex-direction leaked into the bag and stacked minus, count and plus.
   The .qty sizing there is marked important, so these match it. */
.byanh-page .woocommerce table.cart td.product-quantity .quantity {
  flex-direction: row;
  align-items: center;
  width: auto;
}
.byanh-page .woocommerce table.cart td.product-quantity input.qty {
  width: 34px !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  text-align: center;
}

/* ---- single address card ---- */
/* One card should not leave a phantom second column. */
.byanh-page .woocommerce-Addresses:has(> :only-child) { grid-template-columns: minmax(0, 460px); }

/* ---- Bag, coupon field and remove link ----
   The coupon input sits outside .form-row, so none of the WooCommerce field
   styling above reached it and it kept the browser's square box. */
.byanh-page .woocommerce .cart .actions .coupon .input-text {
  width: auto !important;
  min-width: 220px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.4;
  transition: border-color var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out);
}
.byanh-page .woocommerce .cart .actions .coupon .input-text:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.byanh-page .woocommerce .cart .actions .coupon .input-text::placeholder { color: var(--text-muted); }

/* Remove is a quiet action beside a bold product name. */
.byanh-page .woocommerce table.cart td.product-name a.remove {
  font-size: var(--text-caption-size);
  font-weight: 400;
}

/* ---- Product card title colour ----
   The card is one <a>, and the prototype leaves the title colour to the bare
   rule a { color: inherit }. An element selector like that loses to the theme,
   which paints every link with the link brown. The design has the title in the
   body ink and keeps the brown for real links. */
.byanh-page .product-card__name { color: var(--text-primary); }
.byanh-page .product-card:hover .product-card__name { color: var(--brand-primary-active); }