/* Crowned cart, shared by / and /clay (Kable, 13 Oct): the gold Add to cart bar, the − n + stepper, the running total, the ring on the bag, the bag popover. */
.bar { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.25rem; padding: 0 1.1rem; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; border-radius: 0; }
.btn.add { cursor: pointer; }
.bar svg { width: 1.3rem; height: 1.3rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bar.off { background: transparent; border: 1px solid rgba(197,161,78,0.35); color: var(--paper-lo); box-shadow: none; cursor: default; font-family: "Archivo", sans-serif; font-weight: 700; }
.stepper { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid var(--gold); background: #0B0B0C; }
.stepper button { width: 3.25rem; height: 3.25rem; border: 0; background: transparent; color: var(--gold-hi); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.stepper button:hover { background: var(--gold); color: #0B0B0C; }
.stepper span { min-width: 3rem; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 1.0625rem; color: #FFFFFF; }
.tally { margin-top: 0.8rem; padding-top: 0.75rem; border-top: 1px solid rgba(197,161,78,0.22); }
.tally p { margin: 0; }
.tally-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9375rem; color: var(--paper-lo); }
.tally-row strong { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 1.25rem; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tally-note { min-height: 1.3em; margin-top: 0.3rem !important; font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--gold-hi); }
.bag-ring { position: absolute; inset: 2px; border-radius: 999px; border: 1.5px solid var(--gold-hi); pointer-events: none; }
.stepper span { display: inline-block; }
.btn.bar { display: flex; }   /* beats each page's own .btn { display: inline-block } */
.checkout { width: 100%; margin-top: 0.9rem; }
.checkout.bar { justify-content: center; gap: 0.6rem; }
/* bag popover (the homepage's; /clay styles its own .pop and only borrows the note line) */
.cart-pop { position: absolute; top: calc(100% + 12px); right: 0; width: min(300px, calc(100vw - 32px)); background: #0E0C14; border: 1px solid rgba(197,161,78,0.45); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 18px 50px rgba(0,0,0,0.6); z-index: 30; text-align: left; }
.cart-pop h4 { margin: 0 0 0.4rem; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05rem; color: var(--paper); }
.cart-pop p { margin: 0 0 0.85rem; font-size: 0.875rem; line-height: 1.5; color: rgba(245,240,230,0.78); }
.cart-pop .line { display: flex; justify-content: space-between; gap: 1rem; font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; color: var(--paper); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0.65rem 0; }
.cart-pop .row { display: flex; gap: 0.5rem; }
.cart-pop .btn { padding: 0.55rem 0.9rem; font-size: 0.8125rem; flex: 1; text-align: center; }
.bag-note { margin: -0.4rem 0 0.85rem !important; min-height: 0; font-family: "IBM Plex Mono", monospace; font-size: 0.75rem !important; color: var(--gold-hi) !important; }
.bag-note:empty { display: none; }

/* Subscribe & save box on /clay (Kable, 15 Oct): 2-8 jars, every 4/6/8 weeks, free shipping. */
.sub { margin-top: 1.75rem; max-width: 26rem; padding: 1.1rem 1.1rem 1.2rem; border: 1px solid rgba(197,161,78,0.35); background: #0E0C14; }
.sub p { margin: 0; }
.sub-kicker { font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); }
.sub-lede { margin-top: 0.45rem !important; font-size: 0.875rem; line-height: 1.5; color: var(--paper-lo); }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.9rem; }
.sub-label { font-size: 0.875rem; color: var(--paper); flex: none; }
.sub-step { width: auto; }
.sub-step button { width: 2.75rem; height: 2.75rem; }
.sub-step button:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--gold-hi); }
.sub-weeks { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.sub-weeks button { min-height: 2.75rem; padding: 0 0.8rem; border: 1px solid rgba(197,161,78,0.45); background: transparent; color: var(--paper); font: 600 0.8125rem "Archivo", sans-serif; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.sub-weeks button:hover { border-color: var(--gold); }
.sub-weeks button[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: #0B0B0C; }
.sub .tally { margin-top: 1rem; }