/* ============================================================================
   People's Pantry — product card + product page ("baseball card")
   Canonical spec: 12-design-system.html / 13-page-shells.html

   Deliberately namespaced `ppc-card-*` / `ppc-pdp-*` rather than reusing
   `.pp-product-card`: shop-polish.css carries late `!important` rules against
   that class which would beat anything written here.
   ========================================================================= */

.ppc {
    --ppc-green: #356746;
    --ppc-green-dark: #284f36;
    --ppc-brown-dirt: #5e4c2a;
    --ppc-neon: #edfa70;
    --ppc-cream: #f2ead4;
    --ppc-paper: #d8d2c0;
    --ppc-sage: #b5be80;
    --ppc-sage-50: rgba(181, 190, 128, 0.5);
    --ppc-ink: #2f2a1f;
    --ppc-line: #ddd4bc;
    --ppc-error: #b4452f;

    --ppc-r-input: 8px;
    --ppc-r-card: 12px;
    --ppc-r-panel: 16px;
    --ppc-r-pill: 38px;

    --ppc-shadow-sm: 0 2px 8px rgba(40, 30, 15, 0.08);
    --ppc-shadow-md: 0 8px 24px rgba(40, 30, 15, 0.14);
    --ppc-shadow-lg: 0 24px 60px rgba(40, 30, 15, 0.3);

    --ppc-ease: cubic-bezier(0.4, 0, 0.2, 1);

    --ppc-head: 'PP Woodland', 'Hoefler Text', Georgia, 'Times New Roman', serif;
    --ppc-body: 'Planc', 'Helvetica Neue', Inter, Arial, sans-serif;
}

/* Local screen-reader-only helper — doesn't assume a Bootstrap version. */
.ppc .ppc-sr {
    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 card */

.ppc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* Sage border matches the vendor card and keeps a warm cream card
       readable on warm cream/paper section backgrounds. */
    border: 1.5px solid var(--ppc-sage-50);
    border-radius: var(--ppc-r-card);
    box-shadow: 0 4px 14px rgba(40, 30, 15, 0.10);
    /* overflow visible: the fulfillment dropdown menu opens below the
       button and must escape the card. Image corner clipping is handled
       on .ppc-card-media instead. */
    overflow: visible;
    text-align: center;
    font-family: var(--ppc-body);
    color: var(--ppc-ink);
    transition: transform 240ms var(--ppc-ease), box-shadow 240ms var(--ppc-ease);
}

.ppc-card:hover,
.ppc-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--ppc-shadow-md);
}

/* The whole card links to the product through this one overlay anchor. It sits
   ABOVE the passive content (photo, title, price) and BELOW the controls, so a
   click on the card navigates but a click on the select / toggle / CTA does
   not. One link per destination — the title isn't separately focusable. */
.ppc-card-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

.ppc-card-hit:focus-visible {
    outline: 2px solid var(--ppc-neon);
    outline-offset: -3px;
}

/* Controls live above the overlay and keep their own clicks. The whole
   add-to-cart region is raised as one block rather than an enumerated list of
   children — anything the buy component grows later is covered automatically,
   instead of silently falling under the link and navigating away. */
.ppc-card-body .add-to-cart-wrapper,
.ppc-card-body .ppc-card-maker,
.ppc-card-body .ppc-card-note {
    position: relative;
    z-index: 2;
}

/* The buy area fills the remaining card body space so the picker, any
   extras (free-ship teaser, subscribe toggle), and the buy row distribute
   evenly instead of clumping at the top with a huge gap above the CTA.
   Equal-height card bodies + evenly-distributed buy area = every card's
   controls read the same across a rail. */
.ppc-card-body .add-to-cart-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* Belt and braces: even if this card is ever nested inside a wrapping anchor,
   pointer events on the controls must not reach it. */
.ppc-card-body .add-to-cart-wrapper select,
.ppc-card-body .add-to-cart-wrapper input,
.ppc-card-body .add-to-cart-wrapper button,
.ppc-card-body .add-to-cart-wrapper label {
    position: relative;
    z-index: 3;
}

.ppc-card-media {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    padding-top: 100%; /* 1:1 */
    background: var(--ppc-cream);
    overflow: hidden;
    /* Since .ppc-card no longer clips (dropdown needs to escape), the media
       carries its own top corner radius so the photo sits inside the card
       edge. Bottom stays square — the cream card body meets it flush. */
    border-top-left-radius: calc(var(--ppc-r-card) - 1.5px);
    border-top-right-radius: calc(var(--ppc-r-card) - 1.5px);
}

.ppc-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* No neon stroke: the card is white, and the stroke is a green-surface rule. */
}

.ppc-card-media-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(53, 103, 70, 0.45);
}

.ppc-card-media-empty i {
    font-size: 40px;
}

.ppc-card-media-empty span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(94, 76, 42, 0.6);
}

/* Fulfillment chips — bottom-left of the photo, one per supported method. */
.ppc-fchips {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

.ppc-fchip {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--ppc-line);
    box-shadow: var(--ppc-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ppc-green);
}

.ppc-fchip i {
    font-size: 17px;
    line-height: 1;
}

/* Sits inside .ppc-card-media, so it shares the photo's stacking context. */
.ppc-card-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    line-height: 1.5;
    background: var(--ppc-error);
    color: var(--ppc-cream);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--ppc-r-pill);
}

/* Cream below the photo, so the card reads as two halves — the maker's shot,
   then our paper. Ink on cream clears AA comfortably. */
.ppc-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 14px 16px;
    background: var(--ppc-cream);
    border-top: 1px solid var(--ppc-line);
    /* Card is overflow:visible (so the dropdown menu can escape), so the
       body needs its own bottom corner radius — otherwise the cream fill
       sits square inside the rounded card border. Matches .ppc-card-media's
       top-corner treatment: card radius minus the 1.5px border. */
    border-bottom-left-radius: calc(var(--ppc-r-card) - 1.5px);
    border-bottom-right-radius: calc(var(--ppc-r-card) - 1.5px);
}

.ppc-card-maker {
    font-size: 0.694rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ppc-brown-dirt);
    text-decoration: none;
    line-height: 1.3;
}

a.ppc-card-maker:hover {
    color: var(--ppc-green);
    text-decoration: underline;
}

/* Sample-card variant — pure-HTML placeholder used to keep rails visually
   populated when the DB has no matching products. Whole card is a link to
   /register; buy row is replaced with a soft neon-pop pill CTA. Same
   chassis, same rhythm, so an empty homepage still feels lived-in. */
.ppc-card--sample { display: flex; flex-direction: column; }
.ppc-card--sample .ppc-card-body { padding-bottom: 14px; }
.ppc-card--sample-cta {
    margin-top: auto;
    align-self: stretch;
    padding: 9px 12px;
    border: 1.25px solid var(--ppc-brown-dirt);
    border-radius: var(--ppc-r-pill);
    background: var(--ppc-neon);
    color: var(--ppc-brown-dirt);
    font-family: var(--ppc-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: var(--ppc-shadow-sm);
    transition: background 180ms var(--ppc-ease), color 180ms var(--ppc-ease);
}
.ppc-card--sample:hover .ppc-card--sample-cta {
    background: var(--ppc-brown-dirt);
    color: var(--ppc-neon);
}

/* Locality line — only on the "Shop Local" rail. Sits between maker and title
   so a shopper reads "MAKER · Local to City, ST" as one origin fact. */
.ppc-card-locality {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ppc-green);
    line-height: 1.2;
}

.ppc-card-locality i {
    font-size: 13px;
    color: var(--ppc-green);
}

.ppc-card-title {
    font-family: var(--ppc-head);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.18;
    color: var(--ppc-green);
    margin: 0;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a.ppc-card-title:hover {
    color: var(--ppc-green-dark);
}

/* Neon stars with a green stroke — legible on white, unlike neon text. */
.ppc-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.ppc-stars-row {
    display: inline-flex;
    gap: 1px;
}

.ppc-stars i {
    font-size: 14px;
    line-height: 1;
    color: var(--ppc-neon);
    -webkit-text-stroke: 1px var(--ppc-green);
    paint-order: stroke fill;
}

.ppc-stars i.is-empty {
    color: transparent;
    -webkit-text-stroke: 1px rgba(53, 103, 70, 0.35);
}

.ppc-stars-count {
    font-size: 0.833rem;
    color: rgba(94, 76, 42, 0.72);
}

.ppc-card-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ppc-ink);
    margin: 2px 0 0;
}

/* ------------------------------------------------- "how you'll get it" */

.ppc-get {
    width: 100%;
    text-align: left;
    /* Fill the space above the buy row and space its children (dropdown,
       optional free-ship line, optional subscribe toggle) around evenly so
       every card in a rail reads with the same rhythm — a card with just a
       dropdown centers it; a card with three items breathes without
       clumping at the top. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-around;
    gap: 6px;
    min-height: 0;
}

.ppc-get-label {
    display: block;
    font-size: 0.694rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ppc-brown-dirt);
    margin-bottom: 5px;
}

/* Fulfillment select — a pill-shape that pairs with the neon CTA below.
   Cream fill on a cream card body reads as one continuous piece; the brown-dirt
   border + green chevron carry the brand palette. Never neon text on cream. */
.ppc-select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    padding: 0 34px 0 18px;
    border: 1.25px solid var(--ppc-brown-dirt);
    border-radius: var(--ppc-r-pill);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23356746' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    font-family: var(--ppc-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppc-brown-dirt);
    cursor: pointer;
    text-align: center;
    text-align-last: center; /* Firefox honours this; Chromium tolerates it */
    line-height: 1;
    transition: border-color 180ms var(--ppc-ease), box-shadow 180ms var(--ppc-ease);
}

.ppc-select:hover {
    border-color: var(--ppc-green-dark);
    box-shadow: var(--ppc-shadow-sm);
}

.ppc-select:focus-visible {
    outline: 2px solid var(--ppc-neon);
    outline-offset: 2px;
    border-color: var(--ppc-green);
}

/* Button variant of the pill (Alpine-driven custom dropdown). Same shape
   as the native select, but the caret is an inline element so it can
   rotate when the menu opens. */
.ppc-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    background-image: none;
}

.ppc-select-caret {
    font-size: 16px;
    color: var(--ppc-green);
    transition: transform 180ms var(--ppc-ease);
}

.ppc-select-caret.is-open {
    transform: rotate(180deg);
}

/* Custom option list — replaces the native <option> popup so the open state
   respects the palette (cream menu, brown-dirt text, green/neon on hover,
   neon on the selected row). Positioned relative to the wrapper below the
   button. */
.ppc-select-wrap {
    position: relative;
    width: 100%;
}

.ppc-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--ppc-cream);
    border: 1.5px solid var(--ppc-brown-dirt);
    border-radius: var(--ppc-r-card);
    box-shadow: var(--ppc-shadow-md);
    text-align: left;
}

/* On cards, open above the button so the menu never falls into a section
   below or gets clipped by the carousel's overflow. Card bodies have plenty
   of vertical room above the button (label + price + title + maker) for a
   3-option list, so up-open fits inside the card. */
.ppc-select-menu--up {
    top: auto;
    bottom: calc(100% + 6px);
}

.ppc-select-menu li {
    margin: 0;
}

.ppc-select-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: var(--ppc-body);
    font-size: 0.833rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppc-brown-dirt);
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms var(--ppc-ease), color 150ms var(--ppc-ease);
}

.ppc-select-opt i {
    font-size: 15px;
    color: var(--ppc-green);
    transition: color 150ms var(--ppc-ease);
}

.ppc-select-opt:hover,
.ppc-select-opt:focus-visible {
    background: var(--ppc-green);
    color: var(--ppc-neon);
    outline: none;
}

.ppc-select-opt:hover i,
.ppc-select-opt:focus-visible i {
    color: var(--ppc-neon);
}

.ppc-select-opt.is-selected {
    background: var(--ppc-neon);
    color: var(--ppc-brown-dirt);
}

.ppc-select-opt.is-selected i {
    color: var(--ppc-brown-dirt);
}

/* Unavailable option — visible so shoppers see the option is on the
   roadmap (e.g. Local Delivery pending Uber/DoorDash/Favor integration),
   but not clickable and clearly marked with an inline reason. */
.ppc-select-opt.is-disabled {
    color: rgba(94, 76, 42, 0.42);
    cursor: not-allowed;
    flex-wrap: wrap;
    row-gap: 2px;
}

.ppc-select-opt.is-disabled:hover,
.ppc-select-opt.is-disabled:focus-visible {
    background: transparent;
    color: rgba(94, 76, 42, 0.42);
}

.ppc-select-opt.is-disabled i {
    color: rgba(53, 103, 70, 0.35);
}

.ppc-select-opt.is-disabled:hover i {
    color: rgba(53, 103, 70, 0.35);
}

.ppc-select-opt-reason {
    flex-basis: 100%;
    padding-left: 25px; /* line up under the label, past the icon */
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(94, 76, 42, 0.55);
}

/* Alpine x-cloak: keep the menu hidden before Alpine boots so it doesn't
   flash on load. */
[x-cloak] { display: none !important; }

/* Single-method variant — same shape, no chevron, icon on the left so the
   card visually matches its multi-method siblings in a rail. */
.ppc-select-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background-image: none;
    cursor: default;
    border-color: var(--ppc-line);
    color: var(--ppc-ink);
}

.ppc-select-static:hover {
    border-color: var(--ppc-line);
    box-shadow: none;
}

.ppc-select-static i {
    font-size: 16px;
    color: var(--ppc-green);
}

.ppc-freeship {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.833rem;
    color: var(--ppc-brown-dirt);
}

.ppc-freeship i {
    font-size: 15px;
    color: var(--ppc-green);
}

.ppc-freeship b {
    color: var(--ppc-green);
    font-weight: 700;
}

/* Subscribe & save toggle */
.ppc-subtoggle {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 9px 11px;
    border: 1.5px solid var(--ppc-line);
    border-radius: var(--ppc-r-input);
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ppc-ink);
    transition: border-color 240ms var(--ppc-ease), background 240ms var(--ppc-ease);
}

.ppc-subtoggle:hover {
    border-color: var(--ppc-sage);
}

.ppc-subtoggle.is-on {
    border-color: var(--ppc-green);
    background: rgba(53, 103, 70, 0.06);
}

.ppc-subtoggle input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--ppc-green);
    cursor: pointer;
}

.ppc-subtoggle .ppc-save {
    margin-left: auto;
    background: var(--ppc-neon);
    color: var(--ppc-brown-dirt);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--ppc-r-pill);
    padding: 2px 9px;
    white-space: nowrap;
}

/* Non-ship teaser — subscriptions ship, so this is the quiet version. */
.ppc-subteaser {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 9px;
    font-size: 0.833rem;
    line-height: 1.4;
    color: rgba(94, 76, 42, 0.8);
}

.ppc-subteaser i {
    font-size: 15px;
    color: var(--ppc-green);
    flex: 0 0 auto;
    margin-top: 1px;
}

/* -------------------------------------------------------------- the button */

.ppc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--ppc-r-pill);
    background: var(--ppc-neon);
    color: var(--ppc-brown-dirt);
    font-family: var(--ppc-body);
    font-size: 0.833rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 240ms var(--ppc-ease), color 240ms var(--ppc-ease);
}

.ppc-btn:hover,
.ppc-btn:focus-visible {
    background: var(--ppc-brown-dirt);
    color: var(--ppc-neon);
}

.ppc-btn:focus-visible {
    outline: 2px solid var(--ppc-neon);
    outline-offset: 2px;
}

.ppc-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.ppc-btn-block {
    width: 100%;
    margin-top: 10px;
}

/* Card buy row — stepper : CTA in a 1 : 2 width ratio, matching the width
   of the fulfillment pill above (100% of card body). Tighter overall than
   the earlier pass — 40px tall, slimmer padding, 0.75rem CTA type. */
.ppc-buyrow--split {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin-top: 10px;
}

/* Open stepper: outlined circle buttons flanking a bare number, no pill
   container. Sits next to the neon CTA pill on the buy row — the airy
   circles balance the filled pill visually. */
.ppc-mini-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0 4px;
    font-family: var(--ppc-body);
}

.ppc-mini-qty button {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1.5px solid var(--ppc-green);
    background: #fff;
    color: var(--ppc-green);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms var(--ppc-ease), color 150ms var(--ppc-ease);
}

.ppc-mini-qty button:hover {
    background: var(--ppc-green);
    color: var(--ppc-neon);
}

.ppc-mini-qty input {
    flex: 0 0 auto;
    width: 22px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--ppc-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ppc-ink);
    -moz-appearance: textfield;
    cursor: text;
}

.ppc-mini-qty input::-webkit-outer-spin-button,
.ppc-mini-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ppc-mini-qty input:focus {
    outline: none;
    background: var(--ppc-cream);
}

.ppc-buy-cta {
    /* Takes the rest of the row (stepper is fixed-width). */
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    border: 1.25px solid var(--ppc-brown-dirt);
    border-radius: var(--ppc-r-pill);
    background: var(--ppc-neon);
    color: var(--ppc-brown-dirt);
    font-family: var(--ppc-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ppc-shadow-sm);
    transition: background 180ms var(--ppc-ease), color 180ms var(--ppc-ease), transform 120ms var(--ppc-ease);
}

.ppc-buy-cta:hover,
.ppc-buy-cta:focus-visible {
    background: var(--ppc-brown-dirt);
    color: var(--ppc-neon);
    outline: none;
}

.ppc-buy-cta:active {
    transform: translateY(1px);
}

.ppc-buy-cta[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ppc-btn-ghost {
    background: transparent;
    border: 1.5px solid var(--ppc-brown-dirt);
    color: var(--ppc-brown-dirt);
}

.ppc-btn-ghost:hover,
.ppc-btn-ghost:focus-visible {
    background: var(--ppc-brown-dirt);
    color: var(--ppc-cream);
}

.ppc-card-note {
    width: 100%;
    margin-top: 10px;
    font-size: 0.833rem;
    font-weight: 700;
    color: var(--ppc-error);
}

/* ---------------------------------------------------------------- the grid */

/* Cards in a row (grid or carousel) all match the tallest one, so the row
   reads as a set — one card with more copy doesn't leave shorter cards
   stranded above a shelf of white space. */
.ppc-card-grid > .ppc-card,
.pp-carousel-item > .ppc-card {
    height: 100%;
    width: 100%;
}

.pp-carousel-item {
    display: flex;
}

.ppc-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .ppc-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

    .ppc-card-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 420px) {
    .ppc-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   PDP — the big card
   ========================================================================== */

.ppc-pdp-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--ppc-line);
    border-radius: var(--ppc-r-panel);
    box-shadow: var(--ppc-shadow-md);
    overflow: hidden;
    font-family: var(--ppc-body);
    color: var(--ppc-ink);
}

@media (max-width: 900px) {
    .ppc-pdp-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ppc-pdp-media {
    position: relative;
    background: var(--ppc-cream);
    min-height: 320px;
}

.ppc-pdp-media-frame {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

.ppc-pdp-media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppc-pdp-media .ppc-fchips {
    left: 16px;
    bottom: 16px;
}

.ppc-pdp-media .ppc-fchip {
    width: 38px;
    height: 38px;
}

.ppc-pdp-media .ppc-fchip i {
    font-size: 20px;
}

/* Thumb rail under the hero photo */
.ppc-pdp-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 16px 16px;
    overflow-x: auto;
}

.ppc-pdp-thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: var(--ppc-r-input);
    overflow: hidden;
    border: 1px solid var(--ppc-line);
    background: #fff;
}

.ppc-pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "How you get it" legend — one button, all methods explained at once. */
.ppc-legend-wrap {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
}

.ppc-legend-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1px solid var(--ppc-line);
    border-radius: var(--ppc-r-pill);
    background: #fff;
    box-shadow: var(--ppc-shadow-sm);
    font-family: var(--ppc-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppc-brown-dirt);
    cursor: pointer;
    transition: background 240ms var(--ppc-ease), color 240ms var(--ppc-ease);
}

.ppc-legend-btn:hover {
    background: var(--ppc-brown-dirt);
    color: var(--ppc-neon);
}

.ppc-legend-btn i {
    font-size: 15px;
}

.ppc-legend-pop {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 296px;
    max-width: 78vw;
    background: #fff;
    border: 1px solid var(--ppc-line);
    border-radius: var(--ppc-r-panel);
    box-shadow: var(--ppc-shadow-lg);
    padding: 16px;
    text-align: left;
}

.ppc-legend-pop h4 {
    font-family: var(--ppc-head);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ppc-green);
    margin: 0 0 10px;
}

.ppc-legend-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--ppc-line);
}

.ppc-legend-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ppc-legend-item i {
    font-size: 20px;
    color: var(--ppc-green);
    flex: 0 0 auto;
}

.ppc-legend-item b {
    display: block;
    font-size: 0.9rem;
    color: var(--ppc-ink);
}

.ppc-legend-item span {
    font-size: 0.833rem;
    color: rgba(94, 76, 42, 0.85);
    line-height: 1.45;
}

.ppc-legend-close {
    margin-top: 12px;
    width: 100%;
    padding: 8px;
    border: 1.5px solid var(--ppc-brown-dirt);
    border-radius: var(--ppc-r-pill);
    background: transparent;
    color: var(--ppc-brown-dirt);
    font-family: var(--ppc-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ------------------------------------------------------------ right column */

.ppc-pdp-body {
    padding: 28px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 600px) {
    .ppc-pdp-body {
        padding: 22px 18px 24px;
    }
}

.ppc-pdp-makerline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ppc-pdp-maker {
    font-size: 0.833rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ppc-brown-dirt);
    text-decoration: none;
}

.ppc-pdp-shoplink {
    font-size: 0.833rem;
    font-weight: 600;
    color: var(--ppc-green);
    text-decoration: none;
}

.ppc-pdp-shoplink:hover {
    text-decoration: underline;
    color: var(--ppc-green-dark);
}

.ppc-pdp-title {
    font-family: var(--ppc-head);
    font-weight: 400;
    font-size: 2.074rem;
    line-height: 1.14;
    color: var(--ppc-green);
    margin: 0;
}

@media (max-width: 600px) {
    .ppc-pdp-title {
        font-size: 1.728rem;
    }
}

.ppc-pdp-reviewlink {
    font-size: 0.833rem;
    color: var(--ppc-green);
    text-decoration: underline;
}

.ppc-pdp-price {
    font-size: 1.44rem;
    font-weight: 700;
    color: var(--ppc-ink);
    margin: 0;
}

.ppc-pdp-desc {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ppc-ink);
    margin: 0;
}

.ppc-pdp-desc p:last-child {
    margin-bottom: 0;
}

/* Good to know */
.ppc-goodtoknow {
    border: 1px solid var(--ppc-line);
    border-radius: var(--ppc-r-card);
    background: var(--ppc-cream);
    padding: 14px 16px;
}

.ppc-goodtoknow h4 {
    font-family: var(--ppc-head);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ppc-green);
    margin: 0 0 10px;
}

.ppc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ppc-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ppc-sage-50);
    color: var(--ppc-green-dark);
    border-radius: var(--ppc-r-pill);
    padding: 4px 12px;
    font-size: 0.833rem;
    font-weight: 600;
}

.ppc-tag i {
    font-size: 14px;
}

/* Customization / message field */
.ppc-field {
    display: block;
}

.ppc-field-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ppc-brown-dirt);
    margin-bottom: 5px;
}

.ppc-field-label .req {
    color: var(--ppc-error);
}

.ppc-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--ppc-line);
    border-radius: var(--ppc-r-input);
    background: #fff;
    font-family: var(--ppc-body);
    font-size: 0.95rem;
    color: var(--ppc-ink);
}

.ppc-input:focus-visible {
    outline: 2px solid var(--ppc-neon);
    outline-offset: 2px;
    border-color: var(--ppc-green);
}

.ppc-field-help {
    display: block;
    font-size: 0.875rem;
    color: rgba(94, 76, 42, 0.75);
    margin-top: 4px;
}

.ppc-field-label .opt {
    margin-left: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(94, 76, 42, 0.6);
}

.ppc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--ppc-ink);
    margin-bottom: 4px;
    cursor: pointer;
}

.ppc-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--ppc-green);
}

/* Quantity stepper + CTA */
.ppc-buyrow {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 4px;
}

.ppc-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--ppc-line);
    border-radius: var(--ppc-r-pill);
    background: #fff;
    overflow: hidden;
    flex: 0 0 auto;
}

.ppc-qty button {
    width: 42px;
    height: 100%;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--ppc-brown-dirt);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ppc-qty button:hover {
    background: rgba(94, 76, 42, 0.08);
}

.ppc-qty input {
    width: 40px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--ppc-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ppc-ink);
    -moz-appearance: textfield;
}

.ppc-qty input::-webkit-outer-spin-button,
.ppc-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ppc-buyrow .ppc-btn {
    flex: 1 1 auto;
    min-height: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PDP 3-card layout (Drew 2026-08-10, Chrome-Claude spec)
   Product / Customize / Ships & Order — one right column, three stacked cards.
   ═══════════════════════════════════════════════════════════════════════════ */

.pdp3-cards { display: flex; flex-direction: column; gap: 10px; }
.pdp3-maker-above { margin: 0 0 4px 4px; }
/* Card 2 (Customize) + Card 3 (Ships & Order) share one Livewire root
   because Livewire 2 requires a single root element. Give that wrapper the
   same flex/gap as the parent .pdp3-cards so the gap between Card 2 and
   Card 3 matches the gap between Card 1 and Card 2. */
.pdp3-livewire { display: flex; flex-direction: column; gap: 10px; }
/* Tighten the right-column padding when it's carrying the 3-card layout
   so cards go nearly edge-to-edge (matches Chrome-Claude mockup). */
.ppc-pdp-body.pdp3-cards { padding: 18px 20px 22px; gap: 10px; }
@media (max-width: 600px) {
    .ppc-pdp-body.pdp3-cards { padding: 14px 12px 18px; }
}

.pdp3-card {
    border: 1.5px solid var(--ppc-sage);
    border-radius: 14px;
    background: #fff;
    margin: 0;
    /* NO overflow:hidden — the Ships-dropdown menu opens downward and
       needs to escape the card box. Corner-clipping is handled on the
       header + body children individually. */
}

.pdp3-card-head {
    background: var(--ppc-green);
    color: var(--ppc-cream);
    font-family: var(--ppc-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 14px;
    /* Round the header's own top corners (slightly less than the card's
       14px to sit inside the 1.5px sage border cleanly). */
    border-top-left-radius: 12.5px;
    border-top-right-radius: 12.5px;
}

.pdp3-card-body { padding: 12px 14px; }

/* Accordion head: same green bar but clickable, with a rotating chevron.
   Title is centered — chevron is absolutely positioned right so the label
   reads as a heading, not a left-aligned form label. */
.pdp3-card-head--toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: center;
    color: var(--ppc-cream);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--ppc-green);
    padding: 9px 14px;
    border-top-left-radius: 12.5px;
    border-top-right-radius: 12.5px;
    transition: background 0.15s;
}
.pdp3-card--accordion:not(:has(.pdp3-card-body[style*="display: none"])) .pdp3-card-head--toggle {
    /* Open state: keep the top corners rounded even when body is showing. */
}
/* When accordion is CLOSED, the header IS the whole card visually — round
   the bottom corners too. */
.pdp3-card--accordion .pdp3-card-head--toggle[aria-expanded="false"] {
    border-bottom-left-radius: 12.5px;
    border-bottom-right-radius: 12.5px;
}
.pdp3-card-head--toggle .pdp3-card-chev {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.pdp3-card-head--toggle .pdp3-card-chev.is-open {
    transform: translateY(-50%) rotate(180deg);
}
.pdp3-card-head--toggle:hover { background: var(--ppc-green-dark); }
.pdp3-card-chev {
    font-size: 16px;
    transition: transform 0.18s var(--ppc-ease);
    color: var(--ppc-cream);
}
.pdp3-card-chev.is-open { transform: rotate(180deg); }

/* Tighten Card 1's inner typography so the whole panel fits above the fold. */
.pdp3-card .ppc-pdp-makerline { margin: 0 0 4px; }
.pdp3-card .ppc-pdp-maker { font-size: 0.75rem; letter-spacing: 0.1em; }
.pdp3-card .ppc-pdp-title { font-size: 1.5rem; line-height: 1.15; }
.pdp3-card .ppc-pdp-price { font-size: 1.25rem; color: var(--ppc-brown-dirt); margin: 6px 0 0; }
.pdp3-card .ppc-pdp-desc { font-size: 0.95rem; color: var(--ppc-brown-dirt); margin: 8px 0 0; }
.pdp3-card .ppc-goodtoknow { margin-top: 12px; padding: 10px 12px; }
.pdp3-card .ppc-goodtoknow h4 { font-size: 0.95rem; margin: 0 0 8px; }
.pdp3-card .ppc-tag { font-size: 0.75rem; padding: 4px 12px; }

/* Card 3 shiprow: fulfillment dropdown flexes, qty stepper is compact fixed
   width on the right. Add-to-Cart pill sits full-width below on its own row. */
.pdp3-shiprow {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin: 4px 0 10px;
}
.pdp3-shiprow-fulfill {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    position: relative;
    z-index: 100;
}
/* Qty stepper must sit BELOW the fulfill wrapper's stacking context so the
   open dropdown menu (z-index:1000 inside fulfill) paints on top of it. */
.pdp3-shiprow .ppc-qty { position: relative; z-index: 1; }
.pdp3-shiprow-fulfill .ppc-get { margin: 0; padding: 0; width: 100%; }
.pdp3-shiprow-fulfill .ppc-select-wrap { width: 100%; }
.pdp3-shiprow .ppc-select,
.pdp3-shiprow .ppc-select-btn,
.pdp3-shiprow .ppc-select-static {
    height: 44px;
    padding: 0 16px;
    font-size: 0.813rem;
    justify-content: space-between;
    border-width: 2px;
    background: rgba(237, 250, 112, 0.18);
    color: var(--ppc-brown-dirt);
}
.pdp3-shiprow .ppc-select-btn:hover,
.pdp3-shiprow .ppc-select:hover {
    background: rgba(237, 250, 112, 0.35);
    border-color: var(--ppc-green-dark);
}
.pdp3-shiprow .ppc-select-caret { margin-left: auto; }
.pdp3-shiprow .ppc-qty { flex: 0 0 auto; }
.pdp3-shiprow .ppc-qty button { width: 36px; min-height: 44px; }
.pdp3-shiprow .ppc-qty input { width: 32px; }
.pdp3-shiprow .ppc-select-menu { z-index: 1000; }

/* Full-width Add-to-Cart pill below the shiprow. */
.pdp3-cta {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 0.9rem;
}

/* Subscribe row: sits below the CTA. Keep it visually quiet — this isn't
   the primary action. Freeship teaser (above the shiprow) uses the same
   .ppc-freeship the card layout already ships. */
.pdp3-card .ppc-subtoggle { margin: 12px 0 0; font-size: 0.813rem; }

/* Fold "extras" partial (used with part=freeship) so it doesn't add spacing
   from its wrapper div. */
.pdp3-card .ppc-get--extras { margin: 0; padding: 0; }

/* PDP buyrow variant: dropdown + qty + CTA on ONE line. The dropdown carries
   extra visual weight (thicker border, subtle neon tint) so the buyer reads
   it as "you must pick one of these before Add to Cart." */
.ppc-buyrow--pdp { flex-wrap: wrap; align-items: center; }
.ppc-buyrow-fulfill { flex: 1 1 220px; min-width: 200px; display: flex; position: relative; z-index: 20; }
.ppc-buyrow-fulfill .ppc-get {
    /* strip the wrapper so the pill fills the flex cell directly */
    margin: 0; padding: 0; width: 100%;
}
.ppc-buyrow-fulfill .ppc-select-wrap { width: 100%; }
/* Open menu must sit above the qty stepper + CTA in the same buyrow. Flex
   children create local stacking contexts, so bump the wrap + menu high
   enough that they escape any sibling paint order. */
.ppc-buyrow--pdp .ppc-select-menu { z-index: 1000; }
.ppc-buyrow--pdp .ppc-select,
.ppc-buyrow--pdp .ppc-select-btn,
.ppc-buyrow--pdp .ppc-select-static {
    height: 48px;
    padding: 0 20px;
    font-size: 0.875rem;
    justify-content: space-between;
    border-width: 2px;
    background: rgba(237, 250, 112, 0.18);
    color: var(--ppc-brown-dirt);
}
.ppc-buyrow--pdp .ppc-select-btn:hover,
.ppc-buyrow--pdp .ppc-select:hover {
    background: rgba(237, 250, 112, 0.35);
    border-color: var(--ppc-green-dark);
}
.ppc-buyrow--pdp .ppc-select-caret { margin-left: auto; }

/* On narrow screens the dropdown wraps under the CTA — keep qty inline with
   the dropdown for a two-row buy area (Dropdown | full-width; Qty + CTA). */
@media (max-width: 640px) {
    .ppc-buyrow-fulfill { flex: 1 1 100%; }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .ppc-card,
    .ppc-btn,
    .ppc-subtoggle,
    .ppc-legend-btn {
        transition: none;
    }

    .ppc-card:hover,
    .ppc-card:focus-within {
        transform: none;
    }
}