/* ==========================================================================
   ByDesign Commerce Theme — theme.css
   ========================================================================== */

/* ── Custom Properties ────────────────────────────────────────────────────── */
/* Brand colors (primary / accent) are replaced by the chosen scheme — see
   inc/color-schemes.php. Contrast (WCAG 2.2 AA), measured:
     text-muted on white / #f6f7f9           5.74 / 5.36  (≥ 4.5)
     success / error / warning on their tints 7.00 / 5.74 / 4.98
     border-strong vs white / #f6f7f9        3.98 / 3.71  (≥ 3, form-field edges)
   --bd-border (#ddd) is for decorative dividers only, never a control's edge. */
:root {
  --bd-primary:       #0059b3;
  --bd-primary-dark:  #00427f;
  --bd-primary-light: #e8f0fb;
  --bd-accent:        #a35c00;
  --bd-success:       #1b5e20;
  --bd-error:         #b71c1c;
  --bd-warning:       #b44700;
  --bd-text:          #1a1a1a;
  --bd-text-muted:    #666;
  --bd-border:        #ddd;
  --bd-border-strong: #7a808a;
  --bd-bg:            #fff;
  --bd-bg-subtle:     #f6f7f9;
  --bd-radius:        8px;
  --bd-radius-sm:     4px;
  --bd-shadow:        0 2px 8px rgba(0,0,0,.1);
  --bd-shadow-lg:     0 8px 32px rgba(0,0,0,.15);
  --bd-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bd-transition:    .2s ease;
  --bd-container-w:   1200px;
  --bd-gap:           1.5rem;
}

/* ── Reset / Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--bd-font); color: var(--bd-text); background: var(--bd-bg); line-height: 1.6; }
img  { max-width: 100%; height: auto; display: block; }
/* Keep the hidden attribute authoritative over display:flex/grid component rules */
[hidden] { display: none !important; }
a    { color: var(--bd-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside running text are underlined, not told apart by color alone (WCAG 1.4.1) */
:is(p, li, td, dd, .bd-alert) a:not(.bd-btn) { text-decoration: underline; text-underline-offset: .15em; }
/* One visible keyboard focus style everywhere, ≥ 3:1 against white in every scheme (WCAG 1.4.11) */
:focus-visible { outline: 2px solid var(--bd-primary); outline-offset: 2px; }
ul, ol { list-style: none; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.bd-container  { max-width: var(--bd-container-w); margin-inline: auto; padding-inline: 1.25rem; }
.bd-main       { min-height: 60vh; }
.bd-sr-only    { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.bd-muted      { color: var(--bd-text-muted); font-size: .875rem; }
.bd-required   { color: var(--bd-error); }
.bd-link       { color: var(--bd-primary); cursor: pointer; font-weight: 500; }
.bd-link:hover { text-decoration: underline; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.bd-site-header           { background: var(--bd-bg); border-top: 3px solid var(--bd-accent); border-bottom: 1px solid var(--bd-border); position: sticky; top: 0; z-index: 100; }
.bd-site-header__inner    { display: flex; align-items: center; gap: 1rem; padding-block: .875rem; }
.bd-site-header__brand    { flex-shrink: 0; }
.bd-site-header__title    { font-size: 1.25rem; font-weight: 700; color: var(--bd-text); text-decoration: none; }
.bd-site-nav              { flex: 1; }
.bd-nav__list             { display: flex; gap: 1.5rem; }
.bd-nav__list a           { color: var(--bd-text); font-weight: 500; transition: color var(--bd-transition); }
.bd-nav__list a:hover     { color: var(--bd-primary); text-decoration: none; }
.bd-site-header__side     { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.bd-site-header__actions  { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
/* Replicated site: the Rep whose site this is, above Log In / cart (inc/replicated.php) */
.bd-header-rep            { display: flex; align-items: center; gap: .625rem; max-width: 22rem; }
.bd-header-rep__photo     { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
                            display: flex; align-items: center; justify-content: center;
                            background: var(--bd-primary-light); color: var(--bd-primary-dark); font-weight: 700; font-size: .875rem; }
.bd-header-rep__photo img { width: 100%; height: 100%; object-fit: cover; }
.bd-header-rep__info      { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bd-header-rep__label     { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bd-text-muted); }
.bd-header-rep__name      { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-header-rep__contact   { display: flex; flex-wrap: wrap; gap: 0 .75rem; font-size: .8rem; }
.bd-header-rep__contact a { overflow-wrap: anywhere; }
.bd-header-greeting       { font-size: .875rem; color: var(--bd-text-muted); }
.bd-cart-icon             { position: relative; color: var(--bd-text); display: flex; align-items: center; }
.bd-cart-icon:hover       { color: var(--bd-primary); text-decoration: none; }
.bd-cart-count            { position: absolute; top: -6px; right: -8px; background: var(--bd-primary);
                            color: #fff; font-size: .65rem; font-weight: 700; border-radius: 50%;
                            min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.bd-site-footer           { background: var(--bd-bg-subtle); border-top: 1px solid var(--bd-border); margin-top: 4rem; padding-block: 2.5rem; }
.bd-site-footer__inner    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; align-items: start; }
.bd-site-footer__name     { font-size: 1.1rem; font-weight: 700; }
.bd-site-footer__tagline  { font-size: .875rem; color: var(--bd-text-muted); margin-top: .25rem; }
.bd-footer-nav__list      { display: flex; flex-direction: column; gap: .5rem; }
.bd-footer-nav__list a    { color: var(--bd-text-muted); font-size: .9rem; }
.bd-footer-nav__list a:hover { color: var(--bd-primary); text-decoration: none; }
.bd-site-footer__legal    { font-size: .8rem; color: var(--bd-text-muted); }
.bd-powered-by            { margin-top: .5rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .625rem 1.25rem; border-radius: var(--bd-radius-sm);
  font-size: .9rem; font-weight: 600; line-height: 1; cursor: pointer;
  border: 2px solid transparent; transition: all var(--bd-transition);
  text-decoration: none; white-space: nowrap;
}
.bd-btn:disabled             { opacity: .5; cursor: not-allowed; }
.bd-btn--primary             { background: var(--bd-primary); color: #fff; border-color: var(--bd-primary); }
.bd-btn--primary:hover:not(:disabled) { background: var(--bd-primary-dark); border-color: var(--bd-primary-dark); text-decoration: none; color: #fff; }
.bd-btn--ghost               { background: transparent; color: var(--bd-primary); border-color: var(--bd-primary); }
.bd-btn--ghost:hover:not(:disabled)  { background: var(--bd-primary-light); text-decoration: none; }
.bd-btn--outline             { background: transparent; color: var(--bd-text); border-color: var(--bd-border-strong); }
.bd-btn--outline:hover       { border-color: var(--bd-primary); color: var(--bd-primary); text-decoration: none; }
.bd-btn--sm                  { padding: .4rem .875rem; font-size: .8rem; }
.bd-btn--full                { width: 100%; }
.bd-btn--loading             { pointer-events: none; opacity: .7; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.bd-form-group               { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.bd-form-group label         { font-size: .875rem; font-weight: 600; color: var(--bd-text); }
.bd-form-group input,
.bd-form-group select,
.bd-form-group textarea      { padding: .6rem .875rem; border: 1px solid var(--bd-border-strong); border-radius: var(--bd-radius-sm);
                               font-size: .9rem; font-family: inherit; transition: border-color var(--bd-transition); width: 100%; }
.bd-form-group input:focus,
.bd-form-group select:focus,
.bd-form-group textarea:focus { outline: 2px solid var(--bd-primary); outline-offset: 0; border-color: var(--bd-primary); }
.bd-form-group input.bd-error,
.bd-form-group select.bd-error { border-color: var(--bd-error); }
.bd-field-note               { font-size: .8rem; }
.bd-field-note--error        { color: var(--bd-error); }
.bd-field-note--ok           { color: var(--bd-success); }
.bd-form-row                 { display: grid; gap: 1rem; }
.bd-form-row--2col           { grid-template-columns: 1fr 1fr; }
.bd-field-hint                { font-size: .75rem; color: var(--bd-text-muted); margin-top: .25rem; }
.bd-form-group--wide          { grid-column: 1 / -1; }
.bd-form-row--3col           { grid-template-columns: 1fr 1fr 1fr; }
.bd-fieldset                 { border: 1px solid var(--bd-border); border-radius: var(--bd-radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.bd-fieldset legend          { font-weight: 700; font-size: .95rem; padding-inline: .5rem; }
.bd-input-group              { display: flex; gap: .5rem; }
.bd-input-group input        { flex: 1; }
.bd-checkbox-label           { display: flex; gap: .625rem; align-items: flex-start; cursor: pointer; font-size: .9rem; }
.bd-checkbox-label input     { margin-top: .2rem; flex-shrink: 0; width: 16px; height: 16px; }
.bd-select                   { padding: .5rem .75rem; border: 1px solid var(--bd-border-strong); border-radius: var(--bd-radius-sm); font-size: .875rem; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.bd-alert            { padding: .875rem 1rem; border-radius: var(--bd-radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.bd-alert--error     { background: #fdecea; color: var(--bd-error); border: 1px solid #f5c6c6; }
.bd-alert--success   { background: #e8f5e9; color: var(--bd-success); border: 1px solid #c8e6c9; }
.bd-alert--info      { background: var(--bd-primary-light); color: var(--bd-primary); border: 1px solid color-mix(in srgb, var(--bd-primary) 30%, #fff); }
.bd-alert--warning   { background: #fff3e0; color: var(--bd-warning); border: 1px solid #ffcc80; }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-spinner      { display: inline-block; width: 24px; height: 24px;
                   border: 3px solid var(--bd-border); border-top-color: var(--bd-primary);
                   border-radius: 50%; animation: bd-spin .7s linear infinite; }
.bd-spinner--lg  { width: 48px; height: 48px; border-width: 4px; }
.bd-spinner-wrap { display: flex; align-items: center; gap: .75rem; padding: 2rem; color: var(--bd-text-muted); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.bd-modal                { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.bd-modal[hidden]        { display: none; }
.bd-modal__overlay       { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.bd-modal__content       { position: relative; background: var(--bd-bg); border-radius: var(--bd-radius);
                           padding: 2rem; max-width: 460px; width: 90%; box-shadow: var(--bd-shadow-lg); z-index: 1; }
.bd-modal__content--product { max-width: 800px; }
.bd-modal__close         { position: absolute; top: .75rem; right: .875rem; background: none; border: none;
                           font-size: 1.5rem; cursor: pointer; color: var(--bd-text-muted); line-height: 1; }
.bd-modal__close:hover   { color: var(--bd-text); }
.bd-modal__footer-note   { margin-top: 1.25rem; font-size: .875rem; text-align: center; color: var(--bd-text-muted); }
.bd-modal h2             { margin-bottom: 1.25rem; }

/* ── Page Titles ──────────────────────────────────────────────────────────── */
.bd-page-title           { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; }
.bd-page-content         { padding-block: 2rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ENROLLMENT
   ════════════════════════════════════════════════════════════════════════════ */
.bd-enrollment-page      { padding-block: 2.5rem 4rem; max-width: 760px; }

.bd-enrollment-header    { text-align: center; margin-bottom: 2.5rem; }
.bd-enrollment-header__title    { font-size: 2rem; font-weight: 800; }
.bd-enrollment-header__subtitle { color: var(--bd-text-muted); margin-top: .5rem; }

/* Progress Steps */
.bd-steps          { display: flex; justify-content: center; gap: 0; margin-top: 1.75rem; counter-reset: step; }
.bd-step           { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; max-width: 140px; }
.bd-step::before   { content: ''; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px;
                     background: var(--bd-border); z-index: 0; }
.bd-step:last-child::before { display: none; }
.bd-step__num      { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bd-border);
                     background: var(--bd-bg); display: flex; align-items: center; justify-content: center;
                     font-size: .8rem; font-weight: 700; position: relative; z-index: 1;
                     transition: all var(--bd-transition); color: var(--bd-text-muted); }
.bd-step__label    { font-size: .75rem; margin-top: .4rem; color: var(--bd-text-muted); font-weight: 500; }
.bd-step--active .bd-step__num   { background: var(--bd-primary); border-color: var(--bd-primary); color: #fff; }
.bd-step--active .bd-step__label { color: var(--bd-primary); font-weight: 700; }
.bd-step--done .bd-step__num     { background: var(--bd-success); border-color: var(--bd-success); color: #fff; }
.bd-step--done .bd-step__label   { color: var(--bd-success); }

/* Enrollment form sections */
.bd-enroll-step    { animation: bd-fadein .25s ease; }
@keyframes bd-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bd-enroll-step h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.bd-enroll-step > p { color: var(--bd-text-muted); margin-bottom: 1.5rem; }
.bd-step-actions   { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bd-border); }

/* Sponsor search results */
.bd-sponsor-results           { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.bd-sponsor-result-item       { display: flex; align-items: center; justify-content: space-between;
                                border: 1px solid var(--bd-border); border-radius: var(--bd-radius-sm);
                                padding: .75rem 1rem; cursor: pointer; transition: all var(--bd-transition); }
.bd-sponsor-result-item:hover { border-color: var(--bd-primary); background: var(--bd-primary-light); }
.bd-sponsor-result-item__name { font-weight: 600; }
.bd-sponsor-result-item__id   { font-size: .8rem; color: var(--bd-text-muted); }
.bd-sponsor-card              { display: flex; align-items: center; gap: 1rem; border: 2px solid var(--bd-success);
                                border-radius: var(--bd-radius); padding: 1rem; margin-top: .75rem; }
.bd-sponsor-card__label       { font-size: .8rem; color: var(--bd-text-muted); flex-shrink: 0; }
.bd-sponsor-card__info        { flex: 1; }
.bd-sponsor-card__info span   { display: block; }

/* Chosen sponsor — photo (or initials) shared by the step-1 card and the summary bar */
.bd-sponsor-summary__photo    { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
                                display: flex; align-items: center; justify-content: center;
                                background: var(--bd-primary-light); color: var(--bd-primary-dark);
                                font-weight: 700; font-size: 1.1rem; }
.bd-sponsor-summary__photo img { width: 100%; height: 100%; object-fit: cover; }
.bd-sponsor-summary           { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: .875rem 1rem;
                                border: 1px solid var(--bd-border-strong); border-left: 4px solid var(--bd-primary);
                                border-radius: var(--bd-radius); background: #fff; }
.bd-sponsor-summary[hidden]   { display: none; }
.bd-sponsor-summary__info     { flex: 1; min-width: 0; }
.bd-sponsor-summary__info p   { margin: 0; }
.bd-sponsor-summary__label    { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bd-text-muted); }
.bd-sponsor-summary__name     { font-weight: 700; font-size: 1.05rem; }
.bd-sponsor-summary__meta     { font-size: .875rem; }
.bd-sponsor-summary__contact  { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; margin-top: .25rem !important; }
.bd-sponsor-summary__contact a { overflow-wrap: anywhere; }
.bd-sponsor-summary__contact[hidden] { display: none; }
@media (max-width: 480px) {
  .bd-sponsor-summary         { flex-wrap: wrap; }
  .bd-sponsor-summary__photo  { width: 44px; height: 44px; }
}

/* Kit grid */
.bd-kit-grid                  { gap: 1rem; }
.bd-kit-card                  { border: 2px solid var(--bd-border); border-radius: var(--bd-radius); padding: 1.25rem;
                                cursor: pointer; transition: all var(--bd-transition); text-align: center; }
.bd-kit-card:hover            { border-color: var(--bd-primary); }
.bd-kit-card.bd-kit-card--selected { border-color: var(--bd-primary); background: var(--bd-primary-light); }
.bd-kit-card__img-wrap        { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.bd-kit-card__img             { width: 120px; height: 120px; object-fit: contain; }
.bd-kit-card__placeholder     { font-size: 2.5rem; color: #ccc; }
.bd-kit-card__name            { font-weight: 700; font-size: .95rem; margin-bottom: .375rem; }
.bd-kit-card__price           { color: var(--bd-primary); font-weight: 600; font-size: 1rem; }
.bd-kit-card__excerpt         { font-size: .8rem; color: var(--bd-text-muted); line-height: 1.5; margin-top: .5rem; }
.bd-kit-card__details         { margin-top: .75rem; font-size: .8rem; text-align: left; }
.bd-kit-card__details summary { cursor: pointer; color: var(--bd-primary); font-weight: 600; text-align: center; }
.bd-kit-card__desc            { margin-top: .5rem; line-height: 1.6; }
.bd-kit-card__desc p,
.bd-kit-card__desc ul,
.bd-kit-card__desc ol         { margin-bottom: .5rem; }
.bd-kit-card__desc ul,
.bd-kit-card__desc ol         { padding-left: 1.25rem; }
.bd-kit-card__desc hr         { display: none; }
.bd-kit-card__check           { font-size: 1.25rem; color: var(--bd-success); margin-top: .5rem; display: none; }
.bd-kit-card--selected .bd-kit-card__check { display: block; }

/* Debug panel (only rendered while Debug Mode is on) */
.bd-debug-panel               { margin: 2rem 0; border: 2px dashed #d63638; border-radius: var(--bd-radius); background: #fff; font-size: .8rem; }
.bd-debug-panel__head         { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
                                padding: .75rem 1rem; background: #fdecea; color: #8a1f11; }
.bd-debug-panel__body details { border-top: 1px solid var(--bd-border); padding: .5rem 1rem; }
.bd-debug-panel__body summary { cursor: pointer; font-weight: 600; }
.bd-debug-panel__body pre     { white-space: pre-wrap; word-break: break-all; background: #f6f7f9; padding: .75rem; margin: .5rem 0;
                                max-height: 400px; overflow: auto; font-size: .75rem; line-height: 1.5; }

/* Terms */
.bd-terms-scroll              { height: 280px; overflow-y: auto; border: 1px solid var(--bd-border);
                                border-radius: var(--bd-radius-sm); padding: 1rem; font-size: .875rem;
                                line-height: 1.7; background: var(--bd-bg-subtle); }
.bd-terms-accept              { margin-top: 1rem; }

/* Processing overlay */
.bd-processing-overlay        { position: fixed; inset: 0; background: rgba(255,255,255,.9); z-index: 500;
                                display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.bd-processing-overlay[hidden] { display: none; }
.bd-processing-overlay p      { font-size: 1rem; color: var(--bd-text-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   SHOP
   ════════════════════════════════════════════════════════════════════════════ */
.bd-shop-page              { padding-block: 1.5rem 4rem; }
.bd-shop-hero              { margin-bottom: 1.5rem; }
.bd-shop-hero__title       { font-size: 2rem; font-weight: 800; }
.bd-shop-hero__desc        { color: var(--bd-text-muted); margin-top: .5rem; }

.bd-shop-layout            { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }

/* Sidebar */
.bd-shop-sidebar           { position: sticky; top: 80px; }
.bd-sidebar-section        { margin-bottom: 1.5rem; }
.bd-sidebar-section h3     { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.bd-category-list          { display: flex; flex-direction: column; gap: .25rem; }
.bd-category-btn           { background: none; border: none; text-align: left; padding: .4rem .625rem;
                             border-radius: var(--bd-radius-sm); font-size: .875rem; cursor: pointer;
                             width: 100%; color: var(--bd-text-muted); transition: all var(--bd-transition); }
.bd-category-btn:hover     { background: var(--bd-primary-light); color: var(--bd-primary); }
.bd-category-btn--active   { background: var(--bd-primary-light); color: var(--bd-primary); font-weight: 600; }
/* Header: "Welcome NAME" + Log Out (bydesign-auth.js) */
.bd-header-auth            { display: inline-flex; align-items: center; gap: .625rem; }
.bd-header-welcome         { font-size: .875rem; white-space: nowrap; }
.bd-header-role            { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                             padding: .1rem .4rem; border-radius: 999px; background: var(--bd-primary-light); color: var(--bd-primary); }

/* My Account (bydesign-account.js) */
.bd-account-form .bd-fieldset { margin-bottom: 1.25rem; }
.bd-account-address        { font-size: .875rem; color: var(--bd-text-muted); line-height: 1.6; }
#bd-password-section       { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bd-border); }
.bd-account-form input[readonly] { background: var(--bd-bg-subtle); color: var(--bd-text-muted); }

/* Price-change popup (shop) */
.bd-price-changes          { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem; }
.bd-price-changes th,
.bd-price-changes td       { padding: .5rem; border-bottom: 1px solid var(--bd-border); text-align: left; }
.bd-price-changes td.num,
.bd-price-changes th.num   { text-align: right; white-space: nowrap; }
.bd-price-old              { text-decoration: line-through; color: var(--bd-text-muted); }
.bd-modal__actions         { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }

/* Login popup: Customer / Rep choice */
.bd-login-type             { border: none; display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1rem; }
.bd-login-type legend      { float: left; font-weight: 600; margin-right: .25rem; }
.bd-login-type label       { display: inline-flex; gap: .375rem; align-items: center; cursor: pointer; }

/* Cart drawer: remembered ByDesign login */
.bd-cart-signed-in         { font-size: .8rem; color: var(--bd-text-muted); margin-bottom: .5rem; text-align: center; }
.bd-link-btn               { background: none; border: none; padding: 0; color: var(--bd-primary); text-decoration: underline; cursor: pointer; font: inherit; }

/* Subcategories indent by depth (set inline as --bd-cat-depth) */
.bd-category-btn--child    { padding-left: calc(.625rem + var(--bd-cat-depth, 1) * .875rem); font-size: .85em; }

/* Toolbar */
.bd-shop-toolbar           { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.bd-product-count          { font-size: .875rem; color: var(--bd-text-muted); }
.bd-shop-toolbar__right    { display: flex; align-items: center; gap: .75rem; }

/* Product Grid */
.bd-product-grid           { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.bd-product-card           { border: 1px solid var(--bd-border); border-radius: var(--bd-radius);
                             overflow: hidden; transition: box-shadow var(--bd-transition); background: var(--bd-bg); }
.bd-product-card:hover     { box-shadow: var(--bd-shadow); }
.bd-product-card__img-wrap { aspect-ratio: 1; overflow: hidden; background: var(--bd-bg-subtle); display: flex; align-items: center; justify-content: center; }
.bd-product-card__img      { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform var(--bd-transition); }
.bd-product-card:hover .bd-product-card__img { transform: scale(1.04); }

/* Banner widget areas (Appearance → Widgets: Enrollment Banner, Shop Banner, Cart Notice).
   Text sits on white or the scheme's light tint, so it keeps the schemes' contrast. */
.bd-banner-area            { display: flex; flex-direction: column; gap: 1rem; margin-block: 1rem 1.5rem; }
.bd-banner-widget          { border-radius: var(--bd-radius); overflow: hidden; }
.bd-banner-widget:has(> p, > h2, > .wp-block-paragraph, > .wp-block-group, > .textwidget, > ul) {
                             background: var(--bd-primary-light); padding: 1rem 1.25rem; }
.bd-banner-widget__title   { font-size: 1.1rem; margin-bottom: .375rem; color: var(--bd-primary-dark); }
.bd-banner-widget img      { width: 100%; height: auto; border-radius: var(--bd-radius); }
.bd-banner-widget p + p    { margin-top: .5rem; }
.bd-banner-widget .wp-block-image,
.bd-banner-widget figure   { margin: 0; }
.bd-banner-area--cart-notice { margin-block: 0 1rem; gap: .5rem; }
.bd-banner-area--cart-notice .bd-banner-widget { font-size: .85rem; }
.bd-banner-area--cart-notice .bd-banner-widget:has(> p, > h2, > .wp-block-paragraph, > .wp-block-group, > .textwidget, > ul) { padding: .625rem .875rem; }
.bd-banner-area--cart-notice .bd-banner-widget__title { font-size: .95rem; }

/* Card image carousel (more than one image): one image at a time, ‹ › arrows */
.bd-product-card__img-wrap[data-index] { position: relative; }
.bd-product-card__img-wrap[data-index] .bd-product-card__img:not(.is-active) { display: none; }
.bd-card-img-nav           { position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem;
                             border: none; border-radius: 50%; background: rgba(255,255,255,.55); color: var(--bd-text);
                             font-size: 1.35rem; line-height: 1; cursor: pointer; opacity: .55;
                             transition: opacity var(--bd-transition), background var(--bd-transition); z-index: 1; }
.bd-card-img-nav--prev     { left: .375rem; }
.bd-card-img-nav--next     { right: .375rem; }
.bd-product-card:hover .bd-card-img-nav,
.bd-card-img-nav:focus-visible { opacity: 1; }
.bd-card-img-nav:hover     { background: rgba(255,255,255,.9); }

/* Product popup: thumbnails on the left, selected image beside them */
.bd-quick-view             { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.bd-gallery                { display: flex; gap: .625rem; align-items: flex-start; }
.bd-gallery__thumbs        { display: flex; flex-direction: column; gap: .5rem; width: 64px; flex-shrink: 0;
                             max-height: 360px; overflow-y: auto; }
.bd-gallery__thumb         { padding: 0; border: 2px solid transparent; border-radius: 6px; background: var(--bd-bg-subtle);
                             cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.bd-gallery__thumb img     { width: 100%; height: 100%; object-fit: contain; display: block; }
.bd-gallery__thumb.is-active,
.bd-gallery__thumb:hover   { border-color: var(--bd-primary); }
.bd-gallery__main          { flex: 1; min-width: 0; background: var(--bd-bg-subtle); border-radius: 8px; padding: 1rem;
                             aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.bd-gallery__main img      { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .bd-quick-view           { grid-template-columns: 1fr; }
}
.bd-product-card__body     { padding: 1rem; }
.bd-product-card__name     { font-weight: 700; font-size: .9rem; margin-bottom: .25rem; line-height: 1.3; }
.bd-product-card__sku      { font-size: .75rem; color: var(--bd-text-muted); letter-spacing: .02em; margin-bottom: .375rem; }
.bd-product-card__desc     { font-size: .8rem; color: var(--bd-text-muted); display: -webkit-box;
                             -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: .625rem; }
.bd-product-card__price    { font-weight: 700; color: var(--bd-primary); font-size: 1rem; }
.bd-product-card__footer   { padding: .75rem 1rem; border-top: 1px solid var(--bd-border); display: flex; gap: .5rem; }
.bd-product-card__footer .bd-btn { flex: 1; }

/* Empty state */
.bd-empty-state            { text-align: center; padding: 3rem 1rem; color: var(--bd-text-muted); }
.bd-empty-state p          { margin-bottom: 1.25rem; }

/* Cart Drawer */
.bd-cart-drawer            { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw;
                             background: var(--bd-bg); box-shadow: -4px 0 24px rgba(0,0,0,.15);
                             z-index: 200; display: flex; flex-direction: column;
                             transform: translateX(0); transition: transform var(--bd-transition); }
.bd-cart-drawer[hidden]    { display: none; }
.bd-cart-drawer__backdrop  { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; }
.bd-cart-drawer__backdrop[hidden] { display: none; }
.bd-cart-drawer__header    { display: flex; align-items: center; justify-content: space-between;
                             padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--bd-border); }
.bd-cart-drawer__header h2 { font-size: 1.1rem; }
.bd-cart-drawer__close     { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--bd-text-muted); }
.bd-cart-drawer__body      { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.bd-cart-drawer__footer    { padding: 1rem 1.25rem; border-top: 1px solid var(--bd-border); }
.bd-cart-drawer__footer .bd-cart-clear { margin-top: .5rem; }

/* Promo codes (cart drawer footer) */
.bd-promo-code             { margin-bottom: .875rem; }
.bd-promo-code label       { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .25rem; }
.bd-promo-code input       { flex: 1; min-width: 0; padding: .45rem .625rem; border: 1px solid var(--bd-border-strong);
                             border-radius: var(--bd-radius-sm); font: inherit; font-size: .875rem; text-transform: uppercase; }
.bd-promo-code input:focus { outline: 2px solid var(--bd-primary); outline-offset: 0; border-color: var(--bd-primary); }
.bd-promo-code__list       { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.bd-promo-code__list:empty { display: none; }
.bd-promo-chip             { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .25rem .15rem .625rem;
                             border-radius: 999px; background: var(--bd-primary-light); color: var(--bd-primary);
                             font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.bd-promo-chip__remove     { background: none; border: none; color: inherit; font-size: 1rem; line-height: 1;
                             width: 1.5rem; height: 1.5rem; border-radius: 50%; cursor: pointer; }
.bd-promo-chip__remove:hover { background: var(--bd-bg); }
.bd-promo-code__help       { font-size: .75rem; color: var(--bd-text-muted); margin-top: .375rem; }
.bd-promo-rejected         { margin: .25rem 0 0 1.1rem; list-style: disc; font-size: .9rem; }
.bd-promo-rejected li + li { margin-top: .25rem; }

/* Promotion messages (top of the cart drawer) */
.bd-cart-promos            { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.bd-cart-promo             { background: var(--bd-primary-light); border-radius: var(--bd-radius-sm); padding: .625rem .75rem; font-size: .85rem; }
.bd-cart-promo--blocking   { background: #fff3e0; color: var(--bd-warning); font-weight: 600; }
.bd-cart-promo--applied    { background: #e8f5e9; }
.bd-cart-promos__checking  { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--bd-text-muted); }
.bd-spinner--sm            { width: 14px; height: 14px; border-width: 2px; }
.bd-cart-promos.is-checking .bd-cart-promo { opacity: .6; transition: opacity var(--bd-transition); }
@media (prefers-reduced-motion: reduce) { .bd-spinner { animation-duration: 2s; } }
.bd-cart-promo--applied strong { color: var(--bd-success); }
.bd-cart-promo__detail     { font-size: .8rem; color: var(--bd-text-muted); margin-top: .2rem; }
.bd-cart-promo__bar        { height: 6px; margin-top: .4rem; border-radius: 999px; background: var(--bd-bg); overflow: hidden;
                             border: 1px solid var(--bd-border-strong); }
.bd-cart-promo__bar span   { display: block; height: 100%; background: var(--bd-primary); }
.bd-cart-empty             { text-align: center; padding: 2rem 0; color: var(--bd-text-muted); }
.bd-cart-item              { display: grid; grid-template-columns: 64px 1fr auto; gap: .75rem; align-items: start;
                             padding-block: .875rem; border-bottom: 1px solid var(--bd-border); }
.bd-cart-item:last-child   { border-bottom: none; }
.bd-cart-item__img         { width: 64px; height: 64px; object-fit: contain; border-radius: var(--bd-radius-sm); background: var(--bd-bg-subtle); padding: .25rem; }
.bd-cart-item__name        { font-weight: 600; font-size: .875rem; line-height: 1.3; margin-bottom: .25rem; }
.bd-cart-item__price       { font-size: .875rem; color: var(--bd-text-muted); }
.bd-cart-item__qty         { display: flex; align-items: center; gap: .375rem; margin-top: .375rem; }
.bd-cart-item__qty button  { width: 24px; height: 24px; border: 1px solid var(--bd-border-strong); background: none;
                             border-radius: var(--bd-radius-sm); cursor: pointer; font-size: .875rem; display: flex; align-items: center; justify-content: center; }
.bd-cart-item__qty span    { font-size: .875rem; min-width: 20px; text-align: center; }
.bd-cart-item__remove      { background: none; border: none; color: var(--bd-text-muted); cursor: pointer;
                             font-size: 1.1rem; padding: .125rem; line-height: 1; }
.bd-cart-item__remove:hover { color: var(--bd-error); }
.bd-cart-summary           { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .375rem; }
.bd-cart-summary__note     { font-size: .8rem; color: var(--bd-text-muted); margin-bottom: .875rem; }

/* Volumes / other prices (Settings → Product Values) on kit cards and cart lines */
.bd-product-values         { display: flex; flex-wrap: wrap; gap: .125rem .75rem; font-size: .8rem; color: var(--bd-text-muted); }
.bd-product-values__label  { font-weight: 600; }
.bd-kit-card__values       { justify-content: center; margin-top: .25rem; }
.bd-cart-item__values      { margin: .125rem 0 .25rem; }
.bd-cart-value-totals      { margin: 0 0 .375rem; font-size: .875rem; }
.bd-cart-value-totals[hidden] { display: none; }
.bd-cart-value-totals__row { display: flex; justify-content: space-between; }
.bd-cart-value-totals dt,
.bd-cart-value-totals dd   { margin: 0; }
.bd-cart-value-totals dt   { color: var(--bd-text-muted); }

/* AutoShip row on cart lines (IsAutoShipItem products) */
.bd-cart-item__autoship    { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
                             padding: .5rem .75rem; border: 1px solid var(--bd-border); border-radius: var(--bd-radius-sm); font-size: .85rem; }
.bd-cart-item__autoship.is-on { border-color: var(--bd-primary); background: var(--bd-primary-light); }
.bd-as-check               { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; cursor: pointer; }
.bd-as-check input         { width: 18px; height: 18px; accent-color: var(--bd-primary); }
.bd-as-icon                { font-size: 1rem; color: var(--bd-primary); }
.bd-as-field               { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; }
.bd-as-field select,
.bd-as-field input         { padding: .3rem .5rem; border: 1px solid var(--bd-border-strong); border-radius: var(--bd-radius-sm);
                             font: inherit; font-weight: 400; background: var(--bd-bg); color: var(--bd-text); }
.bd-as-field select:focus,
.bd-as-field input:focus   { outline: 2px solid var(--bd-primary); outline-offset: 0; border-color: var(--bd-primary); }
.bd-as-note                { color: var(--bd-text-muted); }
.bd-cart-page .bd-cart-item__autoship { font-size: .9rem; }

/* ── Full cart page (Appearance → Customize → Shop → Cart display) ───────────── */
.bd-cart-page              { padding-block: 2rem 3rem; }
.bd-cart-page__title       { font-size: 1.6rem; margin-bottom: 1.25rem; }
.bd-cart-page__layout      { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.bd-cart-page__items       { background: var(--bd-bg); border: 1px solid var(--bd-border); border-radius: var(--bd-radius); padding: .25rem 1.25rem; }
.bd-cart-page__summary     { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }
.bd-cart-page__card        { background: var(--bd-bg); border: 1px solid var(--bd-border); border-radius: var(--bd-radius); padding: 1.25rem; }
.bd-cart-page__card .bd-cart-summary { font-size: 1.15rem; }
.bd-cart-page__savings h2  { font-size: 1.05rem; margin-bottom: .75rem; }
.bd-cart-page__savings .bd-cart-promos { margin-bottom: .875rem; }
.bd-cart-page__savings .bd-promo-code  { margin-bottom: 0; }
.bd-cart-page__continue    { font-size: .875rem; text-align: center; }
.bd-cart-page .bd-cart-item { grid-template-columns: 112px 1fr auto; gap: 1.25rem; padding-block: 1.25rem; }
.bd-cart-page .bd-cart-item + .bd-cart-item { border-top: 1px solid var(--bd-border); }
.bd-cart-page .bd-cart-item__img  { width: 112px; height: 112px; }
.bd-cart-page .bd-cart-item__name { font-size: 1rem; }
.bd-cart-page .bd-cart-item__price { font-size: .95rem; color: var(--bd-text); }
.bd-cart-item__sku         { font-size: .8rem; color: var(--bd-text-muted); margin-bottom: .25rem; }
.bd-cart-page .bd-cart-item__qty  { margin-top: .625rem; }
.bd-cart-page .bd-cart-item__qty button { width: 32px; height: 32px; font-size: 1rem; }
.bd-cart-item__end         { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.bd-cart-item__line-total  { font-weight: 700; font-size: 1.05rem; }
.bd-cart-page .bd-cart-item__remove { color: var(--bd-text); font-size: .8rem; }
.bd-cart-page .bd-cart-item__remove:hover { color: var(--bd-error); border-color: var(--bd-error); }
.bd-cart-page .bd-cart-empty { padding: 3rem 0; }
@media (max-width: 860px) {
  .bd-cart-page__layout    { grid-template-columns: 1fr; }
  .bd-cart-page__summary   { position: static; }
}
@media (max-width: 520px) {
  .bd-cart-page .bd-cart-item { grid-template-columns: 72px 1fr; }
  .bd-cart-page .bd-cart-item__img { width: 72px; height: 72px; }
  .bd-cart-item__end       { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* "Added to cart · View cart" (full cart page mode, on the shop) */
.bd-cart-toast             { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 300; display: flex; align-items: center; gap: .875rem;
                             background: var(--bd-bg); border: 1px solid var(--bd-border); border-left: 4px solid var(--bd-success);
                             border-radius: var(--bd-radius); box-shadow: var(--bd-shadow-lg); padding: .75rem 1rem; font-size: .9rem; font-weight: 600; }
.bd-cart-toast__count      { font-weight: 400; color: var(--bd-text-muted); }
.bd-cart-toast__close      { background: none; border: none; font-size: 1.25rem; line-height: 1; color: var(--bd-text-muted); cursor: pointer; padding: .125rem .25rem; }
@media (max-width: 520px) { .bd-cart-toast { left: 1rem; right: 1rem; bottom: 1rem; justify-content: space-between; } }

/* ════════════════════════════════════════════════════════════════════════════
   ACCOUNT PORTAL
   ════════════════════════════════════════════════════════════════════════════ */
.bd-account-page          { padding-block: 2rem 4rem; }
.bd-account-header        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bd-border); }
.bd-account-header__greeting { font-size: 1.6rem; font-weight: 800; }
.bd-account-header__name  { color: var(--bd-primary); }

/* Tabs */
.bd-account-tabs          { display: flex; gap: 0; border-bottom: 2px solid var(--bd-border); margin-bottom: 2rem; }
.bd-account-tab           { background: none; border: none; padding: .75rem 1.5rem; font-size: .95rem;
                            font-weight: 600; color: var(--bd-text-muted); cursor: pointer;
                            border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--bd-transition); }
.bd-account-tab:hover     { color: var(--bd-primary); }
.bd-account-tab--active   { color: var(--bd-primary); border-bottom-color: var(--bd-primary); }
.bd-tab-panel             { animation: bd-fadein .2s ease; }

/* Dashboard Grid */
.bd-dashboard-grid        { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.bd-dashboard-card        { background: var(--bd-bg); border: 1px solid var(--bd-border); border-radius: var(--bd-radius);
                            padding: 1.5rem; }
.bd-dashboard-card__title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }

/* Definition list */
.bd-definition-list dt   { font-size: .8rem; color: var(--bd-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .75rem; }
.bd-definition-list dd   { font-weight: 500; }
.bd-definition-list dt:first-child { margin-top: 0; }

/* Quick links */
.bd-quick-links           { display: flex; flex-direction: column; gap: .625rem; }

/* Orders Table */
.bd-orders-view           { }
.bd-orders-view h2        { font-size: 1.4rem; margin-bottom: 1.25rem; }
.bd-orders-table          { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bd-orders-table th,
.bd-orders-table td       { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--bd-border); }
.bd-orders-table th       { font-weight: 700; color: var(--bd-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; background: var(--bd-bg-subtle); }
.bd-orders-table tr:hover td { background: var(--bd-bg-subtle); }
.bd-order-status          { display: inline-flex; align-items: center; padding: .2rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.bd-order-status--shipped  { background: #e8f5e9; color: var(--bd-success); }
.bd-order-status--pending  { background: #fff3e0; color: var(--bd-warning); }
.bd-order-status--processing { background: var(--bd-primary-light); color: var(--bd-primary); }
.bd-order-status--cancelled  { background: #fdecea; color: var(--bd-error); }

/* Order Detail */
.bd-order-detail          { margin-top: 1.5rem; }
.bd-order-detail__header  { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.bd-order-detail__id      { font-size: 1.2rem; font-weight: 700; }
.bd-order-detail__meta    { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .875rem; color: var(--bd-text-muted); }
.bd-line-items-table      { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bd-line-items-table th,
.bd-line-items-table td   { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--bd-border); }
.bd-line-items-table th   { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; background: var(--bd-bg-subtle); }
.bd-order-totals          { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; margin-top: .875rem; }
.bd-order-totals .bd-total-row      { display: flex; justify-content: space-between; gap: 2rem; min-width: 240px; font-size: .875rem; }
.bd-order-info            { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; margin-bottom: 1.5rem; }
.bd-order-info h3         { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .375rem; }
.bd-order-info p          { margin: 0; }
.bd-order-detail__footer  { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-top: .875rem; }
.bd-order-detail__footer .bd-order-totals { margin-top: 0; margin-left: auto; }
.bd-order-totals .bd-total-row--grand { font-weight: 700; font-size: 1rem; border-top: 2px solid var(--bd-border); padding-top: .5rem; margin-top: .25rem; }
.bd-total-row span:first-child        { color: var(--bd-text-muted); }
.bd-total-row--discount span:last-child { color: var(--bd-success); font-weight: 600; }

/* AutoShip edit (My Account) */
.bd-as-meta                { flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.bd-as-meta .bd-select,
.bd-as-date-input          { padding: .3rem .5rem; border: 1px solid var(--bd-border-strong); border-radius: var(--bd-radius-sm); font: inherit; color: var(--bd-text); background: var(--bd-bg); }
.bd-as-date-input:focus,
.bd-as-meta .bd-select:focus { outline: 2px solid var(--bd-primary); outline-offset: 0; border-color: var(--bd-primary); }
.bd-as-qty                 { display: inline-flex; align-items: center; gap: .375rem; }
.bd-as-qty__btn            { width: 28px; height: 28px; border: 1px solid var(--bd-border-strong); border-radius: var(--bd-radius-sm); background: var(--bd-bg); cursor: pointer; font-size: 1rem; line-height: 1; }
.bd-as-qty__btn:disabled   { opacity: .4; cursor: not-allowed; }
.bd-as-add                 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .875rem; font-size: .9rem; }
.bd-as-add label           { font-weight: 600; }
.bd-as-add .bd-select      { max-width: 100%; min-width: 0; flex: 1 1 260px; }
.bd-as-actions             { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.bd-as-cancel              { margin-left: auto; color: var(--bd-error); border-color: var(--bd-error); }
.bd-as-cancel:hover:not(:disabled) { background: #fdecea; color: var(--bd-error); }
@media (max-width: 520px) { .bd-as-cancel { margin-left: 0; } }

/* "Promotions applied" under an order's items (My Account) */
.bd-order-promos           { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--bd-radius); background: var(--bd-primary-light); }
.bd-order-promos h3        { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .375rem; color: var(--bd-primary-dark); }
.bd-order-promos li        { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.bd-order-promos li + li   { margin-top: .25rem; }
.bd-order-promos li span:last-child { color: var(--bd-success); font-weight: 600; white-space: nowrap; }

/* AutoShip */
.bd-autoship-intro        { color: var(--bd-text-muted); margin-bottom: 1.5rem; }
.bd-autoship-list         { display: flex; flex-direction: column; gap: 1rem; }
.bd-autoship-card         { border: 1px solid var(--bd-border); border-radius: var(--bd-radius); padding: 1.25rem;
                            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.bd-autoship-card__info   { }
.bd-autoship-card__name   { font-weight: 700; margin-bottom: .25rem; }
.bd-autoship-card__meta   { font-size: .875rem; color: var(--bd-text-muted); }
.bd-autoship-status       { display: inline-flex; padding: .2rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.bd-autoship-status--active   { background: #e8f5e9; color: var(--bd-success); }
.bd-autoship-status--inactive { background: #f5f5f5; color: var(--bd-text-muted); }
.bd-autoship-card--cancelled  { background: var(--bd-bg-subtle); }
.bd-autoship-card__thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .375rem 0 .5rem; font-size: .8rem; }
.bd-autoship-cancelled    { margin-top: 1.5rem; }
.bd-autoship-cancelled__toggle { font-weight: 600; font-size: .9rem; }
.bd-autoship-cancelled__list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
/* Product pictures on AutoShip items */
.bd-as-thumb              { display: inline-block; flex-shrink: 0; object-fit: contain; background: var(--bd-bg-subtle);
                            border: 1px solid var(--bd-border); border-radius: var(--bd-radius-sm); padding: 2px; }
.bd-as-thumb--sm          { width: 40px; height: 40px; }
.bd-as-thumb--md          { width: 56px; height: 56px; }
.bd-as-product            { display: flex; align-items: center; gap: .75rem; }
.bd-autoship-detail       { margin-top: 1rem; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bd-shop-layout        { grid-template-columns: 1fr; }
  .bd-shop-sidebar       { position: static; display: flex; gap: 1rem; flex-wrap: wrap; }
  .bd-sidebar-section    { flex: 1; min-width: 180px; }
  .bd-form-row--3col     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .bd-site-header__inner { flex-wrap: wrap; }
  .bd-site-nav           { order: 3; width: 100%; }
  .bd-site-header__side  { flex-shrink: 1; min-width: 0; margin-left: auto; }
  .bd-nav__list          { gap: 1rem; }
  .bd-form-row--2col,
  .bd-form-row--3col     { grid-template-columns: 1fr; }
  .bd-account-tabs       { overflow-x: auto; }
  .bd-dashboard-grid     { grid-template-columns: 1fr; }
  .bd-cart-drawer        { width: 100%; }
  .bd-orders-table       { font-size: .8rem; }
  .bd-orders-table th,
  .bd-orders-table td    { padding: .5rem .625rem; }
}