/* ===========================================================
   DiaperDrop — public-facing styles
   ---
   Design direction: warm editorial. A premium parenting magazine
   that happens to be a price tool. Serif display headings, humanist
   sans body, generous whitespace, real product photography front-
   and-center, soft cream background with sage and coral accents.
   No corporate blue. No generic flat-card-on-white.
   =========================================================== */

.diaperdrop-app {
    /* === Color story ===
       Warm cream base, deep ink for text, sage as the calm action color,
       coral as the energy/CTA accent. Gold appears only in price pills. */
    --dd-cream:       #FAF6EE;
    --dd-cream-deep:  #F2EBDB;
    --dd-paper:       #FFFCF6;
    --dd-ink:         #1F1A14;
    --dd-ink-soft:    #5C544A;
    --dd-ink-faint:   #8C8478;
    --dd-line:        #E5DECF;
    --dd-line-strong: #C9BFA8;

    --dd-sage:        #6B8E6B;
    --dd-sage-deep:   #4F6F50;
    --dd-sage-mist:   #DCE7DC;

    /* "Coral" tokens are the primary-action color slot. Re-pointed from coral
       to teal as part of the soft baby palette refresh. The token names are
       kept stable so existing component CSS keeps working without rewrites. */
    --dd-coral:       #2A8A82;  /* deep teal — primary CTA */
    --dd-coral-deep:  #1F6F68;  /* deeper teal — hover state */
    --dd-coral-mist:  #E6F2EF;  /* teal mist — soft tints, focus rings */

    --dd-gold:        #C9A572;
    --dd-gold-mist:   #F3E8D2;

    --dd-shadow-sm:   0 1px 2px rgba(31,26,20,.04), 0 2px 8px rgba(31,26,20,.05);
    --dd-shadow-md:   0 2px 4px rgba(31,26,20,.05), 0 12px 32px rgba(31,26,20,.08);
    --dd-shadow-lg:   0 4px 8px rgba(31,26,20,.06), 0 24px 64px rgba(31,26,20,.12);

    --dd-radius:      18px;
    --dd-radius-sm:   12px;
    --dd-radius-pill: 999px;

    --dd-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --dd-font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* === Container === */
    max-width: 980px;
    margin: 2rem auto;
    padding: 0;
    background: var(--dd-cream);
    border-radius: var(--dd-radius);
    color: var(--dd-ink);
    font-family: var(--dd-font-body);
    font-size: 16px;
    line-height: 1.55;
    overflow: hidden;
    position: relative;
}

/* Decorative grain overlay - subtle paper-like quality */
.diaperdrop-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(31,26,20,.04) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.diaperdrop-app > * { position: relative; z-index: 1; }

/* === Header === */
.dd-header {
    text-align: center;
    padding: 3rem 2rem 2.5rem;
    background: linear-gradient(180deg, var(--dd-paper) 0%, var(--dd-cream) 100%);
    border-bottom: 1px solid var(--dd-line);
    position: relative;
}
.dd-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--dd-coral);
    border-radius: var(--dd-radius-pill);
}
.dd-title {
    font-family: var(--dd-font-display);
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 .5rem;
    color: var(--dd-ink);
    font-variation-settings: "opsz" 144;
}
.dd-title em {
    font-style: italic;
    color: var(--dd-coral);
    font-weight: 400;
}
.dd-subtitle {
    font-size: 1.05rem;
    color: var(--dd-ink-soft);
    margin: 0 auto;
    max-width: 520px;
    font-weight: 400;
}

/* === Content area === */
.dd-content {
    padding: 2rem;
}
@media (max-width: 600px) {
    .diaperdrop-app { margin: .5rem; border-radius: var(--dd-radius); }
    .dd-header { padding: 2rem 1.25rem 1.75rem; }
    .dd-content { padding: 1.25rem; }
}

/* ===========================================================
   Tabs
   =========================================================== */
.dd-tabs-wrap {
    display: flex;
    justify-content: center;
}
.dd-tabs {
    display: inline-flex;
    background: var(--dd-paper) !important;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius-pill);
    padding: 4px;
    gap: 2px;
    margin: 0 auto 2rem;
    box-shadow: var(--dd-shadow-sm);
}
.dd-tab {
    background: transparent !important;
    border: none !important;
    padding: .65rem 1.4rem !important;
    font-family: var(--dd-font-body) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--dd-ink-soft) !important;
    cursor: pointer;
    border-radius: var(--dd-radius-pill) !important;
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    transition: all .2s ease;
    white-space: nowrap;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}
.dd-tab:hover { color: var(--dd-ink) !important; }
.dd-tab-active {
    background: var(--dd-ink) !important;
    color: var(--dd-paper) !important;
    box-shadow: 0 1px 4px rgba(31,26,20,.2) !important;
}
.dd-tab-active:hover { color: var(--dd-paper) !important; }
.dd-tab-icon {
    font-size: 1.05em;
    line-height: 1;
    opacity: .85;
}

/* ===========================================================
   Panels & forms
   =========================================================== */
.dd-panel {
    display: none;
    animation: dd-fade-in .35s ease;
}
.dd-panel-active { display: block; }
@keyframes dd-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dd-form {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
    box-shadow: var(--dd-shadow-sm);
}
.dd-form-fit {
    grid-template-columns: 1fr 1fr 1fr auto;
}
@media (max-width: 900px) {
    .dd-form { grid-template-columns: 1fr 1fr; }
    .dd-form .dd-button-primary { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .dd-form,
    .dd-form-fit { grid-template-columns: 1fr; }
}

.dd-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.dd-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dd-ink-faint);
}

.dd-select,
.dd-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1.5px solid var(--dd-line-strong);
    background: var(--dd-cream);
    padding: .9rem 1.1rem;
    border-radius: var(--dd-radius-sm);
    font-family: var(--dd-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--dd-ink);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.dd-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231F1A14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
.dd-select:hover,
.dd-input:hover {
    border-color: var(--dd-sage);
    background: var(--dd-paper);
}
.dd-select:focus,
.dd-input:focus {
    outline: none;
    border-color: var(--dd-sage-deep);
    background: var(--dd-paper);
    box-shadow: 0 0 0 4px var(--dd-sage-mist);
}

/* ===========================================================
   Theme isolation
   ---
   WordPress themes often style every <button> globally (cobalt blue
   background, white text, etc.) which clobbers our cream styling.
   These resets force theme styles to lose to ours on every button
   inside the plugin. They look defensive, but the cost is tiny and
   the alternative is broken UIs on themes we can't preview.
   =========================================================== */
.diaperdrop-app button {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    letter-spacing: normal;
    text-decoration: none;
}
.diaperdrop-app input[type="number"],
.diaperdrop-app input[type="text"],
.diaperdrop-app select {
    /* Themes sometimes paint inputs with backgrounds/borders that
       conflict with our form aesthetic. Force a clean baseline; our
       .dd-input/.dd-select rules below provide the final styling. */
    background: var(--dd-cream);
    color: var(--dd-ink);
    text-shadow: none;
    box-shadow: none;
}
.diaperdrop-app a {
    text-decoration: none;
}

/* ===========================================================
   Buttons
   ===========================================================
   The primary button is the CTA — make it warm and inviting.
   Coral fill (the brand's energy color) on a soft pill shape,
   with generous padding so it's easy to tap on mobile.

   Note on !important: WordPress themes routinely paint all
   <button> elements with their own colors (often using high
   specificity selectors like .site-content button {...}).
   We use !important on the critical visual properties so our
   coral CTA wins regardless of what the host theme does. */
.dd-button {
    appearance: none;
    border: none !important;
    cursor: pointer;
    font-family: var(--dd-font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 1.05rem 1.75rem !important;
    border-radius: var(--dd-radius-pill) !important;
    transition: transform .15s ease, background .15s, box-shadow .2s;
    background: var(--dd-cream-deep) !important;
    color: var(--dd-ink) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    white-space: nowrap;
    min-height: 52px;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
.dd-button:hover {
    background: var(--dd-line-strong) !important;
    transform: translateY(-1px);
}
.dd-button:active { transform: translateY(0); }

.dd-button-primary {
    background: var(--dd-coral) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(42,138,130,.32), inset 0 -1px 0 rgba(0,0,0,.08) !important;
}
.dd-button-primary:hover {
    background: var(--dd-coral-deep) !important;
    box-shadow: 0 6px 22px rgba(42,138,130,.42), inset 0 -1px 0 rgba(0,0,0,.08) !important;
}
.dd-button-primary:focus-visible {
    outline: 3px solid var(--dd-coral-mist) !important;
    outline-offset: 2px;
}

/* Inline icon - rendered as a unicode glyph that pairs with the button label.
   Sized at 1.1em so it reads as the same visual weight as the text. */
.dd-button-icon {
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    transform: translateY(-1px);
    color: inherit !important;
}

.dd-button-ghost {
    background: transparent !important;
    color: var(--dd-ink-soft) !important;
    box-shadow: inset 0 0 0 1.5px var(--dd-line-strong) !important;
}
.dd-button-ghost:hover {
    background: var(--dd-cream-deep) !important;
    color: var(--dd-ink) !important;
}

/* ===========================================================
   QR scanner
   =========================================================== */
.dd-qr-wrap {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1.75rem;
    text-align: center;
    box-shadow: var(--dd-shadow-sm);
}
.dd-qr-viewport {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    background: #14110d;
    border-radius: var(--dd-radius-sm);
    overflow: hidden;
}
#dd-qr-video { width: 100%; height: 100%; object-fit: cover; }
.dd-qr-frame {
    position: absolute;
    inset: 18%;
    border: 2px solid var(--dd-coral);
    border-radius: var(--dd-radius-sm);
    box-shadow: 0 0 0 9999px rgba(20,17,13,.35);
    pointer-events: none;
}
.dd-qr-hint {
    color: var(--dd-ink-soft);
    margin: .5rem 0 1rem;
    font-size: .95rem;
}
.dd-qr-actions {
    display: flex;
    justify-content: center;
    gap: .65rem;
}

/* ===========================================================
   Status / loading
   =========================================================== */
.dd-status {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius-sm);
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    color: var(--dd-ink-soft);
    text-align: center;
    font-size: .95rem;
}
.dd-status-error {
    background: var(--dd-coral-mist);
    border-color: var(--dd-coral);
    color: var(--dd-coral-deep);
}
/* In-pane loading state — replaces the small status-bar spinner.
   Lives inside .dd-results-list so it appears where results will. */
.dd-loading-pane {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--dd-ink-soft);
}
.dd-loading-spinner {
    display: inline-block;
    width: 38px;
    height: 38px;
    border: 3px solid var(--dd-cream-deep);
    border-top-color: var(--dd-coral);
    border-radius: 50%;
    animation: dd-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}
.dd-loading-text {
    margin: 0;
    font-family: var(--dd-font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--dd-ink-soft);
}

.dd-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--dd-line-strong);
    border-top-color: var(--dd-coral);
    border-radius: 50%;
    animation: dd-spin 0.8s linear infinite;
    vertical-align: -3px;
    margin-right: .55rem;
}
@keyframes dd-spin { to { transform: rotate(360deg); } }

/* ===========================================================
   Results section
   =========================================================== */
.dd-results { margin-top: 2.5rem; }
.dd-results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--dd-line);
}
.dd-results-title {
    font-family: var(--dd-font-display);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0;
    color: var(--dd-ink);
    letter-spacing: -0.01em;
}
.dd-results-meta {
    font-size: .85rem;
    color: var(--dd-ink-faint);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* === Price-search result rows ===
   4-column layout: rank · thumbnail · retailer/title/shipping · price.
   The thumbnail comes from SerpApi (Google Shopping). Quality varies but
   pairs well with the SerpApi title to give parents enough info to mentally
   filter the obviously-bad ones (e.g. blurry eBay seller photos).
*/
.dd-result {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
    display: grid;
    grid-template-columns: 36px 64px 1fr auto;
    gap: 1rem;
    align-items: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    text-decoration: none;
    color: inherit;
}
.dd-result:hover {
    transform: translateY(-2px);
    box-shadow: var(--dd-shadow-md);
    border-color: var(--dd-coral);
}

/* Rank column — number for #2+ results, star for the best */
.dd-result-rank {
    font-family: var(--dd-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--dd-coral);
    text-align: center;
    line-height: 1;
}
.dd-result-rank-best {
    color: var(--dd-paper);
    background: var(--dd-coral);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.05rem;
    font-style: normal;
}

/* Thumbnail column — SerpApi product image */
.dd-result-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--dd-cream);
    border-radius: var(--dd-radius-sm);
    padding: 4px;
    border: 1px solid var(--dd-line);
}
.dd-result-thumb-placeholder {
    background: var(--dd-cream-deep);
    background-image: linear-gradient(135deg, var(--dd-cream) 25%, transparent 25%, transparent 50%, var(--dd-cream) 50%, var(--dd-cream) 75%, transparent 75%);
    background-size: 8px 8px;
    opacity: .5;
}

.dd-result-info { min-width: 0; }
.dd-result-retailer {
    font-weight: 700;
    font-size: 1rem;
    color: var(--dd-ink);
    margin: 0;
    line-height: 1.2;
}
.dd-result-title {
    color: var(--dd-ink-soft);
    font-size: .85rem;
    margin: .2rem 0 0;
    line-height: 1.35;
    /* Cap to 2 lines so the card height stays consistent */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dd-result-shipping {
    display: inline-block;
    font-size: .76rem;
    color: var(--dd-sage-deep);
    font-weight: 500;
}

/* Pack count badge — shows quantity of diapers in the pack so parents can
   mentally compare apples to apples (a "$24" 168ct vs a "$24" 80ct). */
.dd-result-pack {
    display: inline-block;
    background: var(--dd-cream-deep);
    color: var(--dd-ink);
    font-size: .76rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--dd-radius-pill);
    letter-spacing: .02em;
}
/* Container for the meta-pill row beneath the title */
.dd-result-meta {
    margin: .35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.dd-result-price {
    text-align: right;
    white-space: nowrap;
}
.dd-result-price-amount {
    font-family: var(--dd-font-display);
    font-weight: 600;
    font-size: 1.55rem;
    color: var(--dd-ink);
    line-height: 1;
    letter-spacing: -0.01em;
}
.dd-result-price-ppd {
    margin-top: .25rem;
    font-size: .76rem;
    color: var(--dd-ink-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dd-result-on-sale {
    display: inline-block;
    background: var(--dd-coral-mist);
    color: var(--dd-coral-deep);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 2px 8px;
    border-radius: var(--dd-radius-pill);
    margin-left: .4rem;
    vertical-align: 1px;
}

@media (max-width: 600px) {
    .dd-result {
        grid-template-columns: 28px 56px 1fr;
        gap: .75rem;
        padding: .85rem 1rem;
    }
    .dd-result-thumb { width: 56px; height: 56px; }
    .dd-result-rank-best { width: 28px; height: 28px; font-size: .85rem; }
    .dd-result-rank { font-size: 1.1rem; }
    .dd-result-price {
        grid-column: 1 / -1;
        text-align: left;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-top: .65rem;
        margin-top: .15rem;
        border-top: 1px solid var(--dd-line);
    }
    .dd-result-price-ppd { margin-top: 0; }
    .dd-result-price-amount { font-size: 1.4rem; }
}

/* === Catalog mode ===
   When a search returns multiple products (e.g. "Size 7"), we list them
   without burning SerpApi credits. Each card is a button that triggers a
   targeted price search by product_id. Visually similar to fit cards but
   button semantics + a "Compare" CTA instead of a price.
*/
.dd-catalog-intro {
    color: var(--dd-ink-soft);
    font-size: .92rem;
    margin: 0 0 .85rem;
    padding: .5rem 0 0;
    font-style: italic;
    font-family: var(--dd-font-display);
    font-weight: 400;
    text-align: center;
}
.dd-catalog-card {
    /* Reset button defaults */
    appearance: none;
    border: 1px solid var(--dd-line);
    background: var(--dd-paper);
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
.dd-catalog-card .dd-fit-shop-cta {
    /* Tweak the Compare CTA to look more like a button cue than a link */
    background: var(--dd-cream-deep);
    color: var(--dd-ink);
    padding: .5rem .9rem;
    border-radius: var(--dd-radius-pill);
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s;
}
.dd-catalog-card:hover .dd-fit-shop-cta {
    background: var(--dd-coral);
    color: #fff;
}
.dd-catalog-card .dd-fit-shop-cta::after {
    content: "";  /* override the arrow inheritance from .dd-fit-shop-cta */
}
.dd-catalog-card:hover .dd-fit-shop-cta::after {
    transform: none;
}

/* ===========================================================
   Product hero (above price results)
   ---
   When the user searches by brand+size and we have a matching
   product in the database, this hero shows the actual diaper
   they're shopping for: image, brand · line, size, weight range.
   Sets the visual anchor so prices below feel like "prices for
   THIS thing", not a disconnected list of $ values.
   =========================================================== */
.dd-product-hero {
    background: linear-gradient(135deg, var(--dd-paper) 0%, var(--dd-cream-deep) 100%);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1.5rem;
    align-items: center;
    box-shadow: var(--dd-shadow-sm);
}
.dd-hero-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    background: var(--dd-paper);
    border-radius: var(--dd-radius-sm);
    padding: 12px;
    display: block;
    border: 1px solid var(--dd-line);
}
.dd-hero-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dd-font-display);
    font-size: 3.4rem;
    font-weight: 500;
    color: var(--dd-coral);
    background: var(--dd-coral-mist);
    text-transform: uppercase;
}
.dd-hero-info { min-width: 0; }
.dd-hero-brand {
    font-family: var(--dd-font-display);
    font-weight: 500;
    font-size: 1.65rem;
    line-height: 1.15;
    margin: 0 0 .35rem;
    color: var(--dd-ink);
    letter-spacing: -0.015em;
}
.dd-hero-line {
    font-family: var(--dd-font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--dd-coral);
}
.dd-hero-meta {
    margin: 0;
    color: var(--dd-ink-soft);
    font-size: .95rem;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}
.dd-hero-range {
    background: var(--dd-sage-mist);
    color: var(--dd-sage-deep);
    padding: 4px 12px;
    border-radius: var(--dd-radius-pill);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .dd-product-hero {
        grid-template-columns: 88px 1fr;
        gap: 1rem;
        padding: 1.1rem;
    }
    .dd-hero-img { width: 88px; height: 88px; padding: 8px; }
    .dd-hero-img-placeholder { font-size: 2.2rem; }
    .dd-hero-brand { font-size: 1.3rem; }
}

/* ===========================================================
   Fit Finder cards
   =========================================================== */
.dd-fit-card {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1.25rem;
    margin-bottom: .85rem;
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 1.25rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: var(--dd-shadow-sm);
}
.dd-fit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dd-shadow-md);
    border-color: var(--dd-coral);
}
a.dd-fit-card:focus-visible {
    outline: 3px solid var(--dd-sage);
    outline-offset: 2px;
}

.dd-fit-img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: var(--dd-cream-deep);
    border-radius: var(--dd-radius-sm);
    padding: 8px;
    display: block;
}
.dd-fit-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dd-font-display);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--dd-coral);
    background: var(--dd-coral-mist);
    text-transform: uppercase;
}

.dd-fit-info { min-width: 0; }
.dd-fit-brand {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 .15rem;
    color: var(--dd-ink);
    line-height: 1.25;
}
.dd-fit-line {
    font-weight: 500;
    color: var(--dd-ink-soft);
}
.dd-fit-meta {
    font-size: .82rem;
    color: var(--dd-ink-faint);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.dd-fit-meta-pill {
    display: inline-flex;
    align-items: center;
    background: var(--dd-sage-mist);
    color: var(--dd-sage-deep);
    padding: 3px 10px;
    border-radius: var(--dd-radius-pill);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dd-fit-cta {
    text-align: right;
    white-space: nowrap;
}
.dd-fit-price {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}
.dd-fit-price-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dd-ink-faint);
    font-weight: 700;
}
.dd-fit-price-amount {
    font-family: var(--dd-font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dd-ink);
    line-height: 1;
    margin: .15rem 0;
}
.dd-fit-price-retailer {
    font-size: .8rem;
    color: var(--dd-ink-soft);
}
.dd-fit-shop-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--dd-coral);
    font-weight: 600;
    font-size: .92rem;
}
.dd-fit-shop-cta::after {
    content: "→";
    transition: transform .15s ease;
}
.dd-fit-card:hover .dd-fit-shop-cta::after {
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .dd-fit-card {
        grid-template-columns: 72px 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    .dd-fit-img { width: 72px; height: 72px; }
    .dd-fit-cta {
        grid-column: 1 / -1;
        text-align: left;
        padding-top: .75rem;
        border-top: 1px solid var(--dd-line);
    }
    .dd-fit-price { flex-direction: row; align-items: baseline; gap: .5rem; }
    .dd-fit-price-amount { font-size: 1.3rem; margin: 0; }
}

/* ===========================================================
   Pro teaser & badges
   =========================================================== */
.dd-pro-badge-sm {
    display: inline-block;
    margin-left: .4rem;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em;
    background: linear-gradient(135deg, var(--dd-coral) 0%, var(--dd-gold) 100%);
    color: #fff;
    vertical-align: 2px;
    line-height: 1.4;
}

.dd-pro-teaser {
    background: linear-gradient(135deg, var(--dd-paper) 0%, var(--dd-coral-mist) 100%);
    border-radius: var(--dd-radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--dd-coral);
    border-left-width: 3px;
}
.dd-pro-teaser h3 {
    font-family: var(--dd-font-display);
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0 0 .35rem;
    color: var(--dd-ink);
    letter-spacing: -0.01em;
}
.dd-pro-teaser p {
    margin: 0 0 .5rem;
    color: var(--dd-ink-soft);
}
.dd-pro-teaser-sample {
    font-size: .85rem !important;
    color: var(--dd-coral-deep) !important;
    font-weight: 600;
}

.dd-fit-upsell {
    background: var(--dd-cream-deep);
    border: 1.5px dashed var(--dd-coral);
    padding: 1.25rem 1.5rem;
    border-radius: var(--dd-radius);
    text-align: center;
    color: var(--dd-ink-soft);
    margin-top: 1rem;
}
.dd-fit-upsell strong {
    color: var(--dd-ink);
    display: block;
    margin-bottom: .25rem;
    font-family: var(--dd-font-display);
    font-size: 1.15rem;
    font-weight: 500;
}

/* ===========================================================
   Branding & ads
   =========================================================== */
.dd-branding {
    text-align: center;
    margin: 2rem 0 1rem;
    font-size: .78rem;
    color: var(--dd-ink-faint);
    letter-spacing: .04em;
    font-weight: 500;
}
.dd-branding strong {
    font-family: var(--dd-font-display);
    font-style: italic;
    color: var(--dd-ink-soft);
    font-weight: 400;
}

.dd-ad {
    margin: 1.5rem 0;
    text-align: center;
    background: var(--dd-cream-deep);
    border-radius: var(--dd-radius-sm);
    padding: .5rem;
    min-height: 100px;
}

/* Pagination — Prev / Page N / Next */
.dd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0 .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dd-line);
}
.dd-pagination-btn {
    min-height: 44px !important;
    padding: .65rem 1.25rem !important;
}
.dd-pagination-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none !important;
}
.dd-pagination-page {
    font-family: var(--dd-font-display);
    font-style: italic;
    color: var(--dd-ink-soft);
    font-size: 1rem;
}

/* ===== Scanned product card (barcode scan results) ===== */
.dd-scanned-card {
    background: var(--dd-paper);
    border: 1px solid var(--dd-coral);
    border-radius: var(--dd-radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.dd-scanned-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.dd-scanned-eyebrow {
    color: var(--dd-coral-deep);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
}
.dd-scanned-cache-flag {
    color: var(--dd-coral);
    font-size: 1rem;
}
.dd-scanned-body {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.dd-scanned-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: var(--dd-radius-sm);
    overflow: hidden;
    background: var(--dd-cream);
}
.dd-scanned-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dd-scanned-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dd-font-display);
    font-size: 2.5rem;
    color: var(--dd-coral);
    background: var(--dd-coral-mist);
}
.dd-scanned-info {
    flex: 1;
    min-width: 0;
}
.dd-scanned-title {
    font-family: var(--dd-font-display);
    font-weight: 500;
    font-size: 1.3rem;
    margin: 0 0 0.4rem;
    line-height: 1.25;
}
.dd-scanned-subline {
    color: var(--dd-ink-soft);
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}
.dd-scanned-pricing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.dd-scanned-ppd {
    font-family: var(--dd-font-display);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--dd-coral-deep);
    line-height: 1;
}
.dd-scanned-total {
    color: var(--dd-ink-faint);
    font-size: 0.9rem;
}
.dd-button-small {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
}
.dd-scanned-alts-header {
    margin: 2rem 0 1rem;
    text-align: center;
}
.dd-scanned-alts-header h3 {
    font-family: var(--dd-font-display);
    font-weight: 500;
    font-size: 1.4rem;
    margin: 0 0 0.4rem;
}
.dd-scanned-alts-lede {
    color: var(--dd-ink-soft);
    font-size: 0.95rem;
    margin: 0;
}
.dd-scanned-alts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 600px) {
    .dd-scanned-body { flex-direction: column; gap: 1rem; }
    .dd-scanned-img { width: 100%; height: 200px; }
}

/* ============================================================
   Tracker
   ============================================================ */
.dd-tracker {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--dd-font-body, "Plus Jakarta Sans", system-ui, sans-serif);
}

/* Logged-out state */
.dd-tracker-loggedout {
    text-align: center;
    padding: 2rem 1rem;
}
.dd-tracker-loggedout h3 {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0 0 1rem;
}
.dd-tracker-lead {
    color: var(--dd-ink-soft, #5C544A);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 50ch;
    margin: 0 auto 1.5rem;
}
.dd-tracker-loggedout-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
}
.dd-tracker-privacy {
    color: var(--dd-ink-faint, #8C8478);
    font-size: 0.85rem;
    max-width: 50ch;
    margin: 0 auto;
}

/* App header */
.dd-tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}
.dd-tracker-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.dd-tracker-header h3 {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
}
.dd-tracker-child-picker {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.dd-tracker-child-select {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius-sm, 8px);
    background: var(--dd-paper);
    font-size: 0.95rem;
}
.dd-tracker-add-child-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dd-line);
    border-radius: 50%;
    background: var(--dd-paper);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--dd-coral);
    transition: all .15s;
}
.dd-tracker-add-child-btn:hover {
    background: var(--dd-coral-mist, #E6F2EF);
    border-color: var(--dd-coral);
}

/* Summary tiles */
.dd-tracker-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.dd-tracker-summary-tile {
    background: var(--dd-cream, #FAF6EE);
    border-radius: var(--dd-radius-sm, 12px);
    padding: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dd-tracker-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dd-ink-faint, #8C8478);
    font-weight: 600;
}
.dd-tracker-stat-value {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-style: italic;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--dd-coral-deep, #1F6F68);
    line-height: 1;
}
.dd-tracker-stat-detail {
    font-size: 0.78rem;
    color: var(--dd-ink-soft, #5C544A);
    min-height: 1.2em;
}

/* Quick-log groups */
.dd-tracker-quicklog {
    margin-bottom: 1.5rem;
}
.dd-tracker-quicklog h4,
.dd-tracker-timeline h4 {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
    color: var(--dd-ink, #1F1A14);
}
.dd-tracker-log-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--dd-line);
}
.dd-tracker-log-group:last-child { border-bottom: 0; }
.dd-tracker-log-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dd-ink-soft, #5C544A);
    min-width: 60px;
    margin-right: 0.5rem;
}
.dd-tracker-quicklog-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius-pill, 999px);
    background: var(--dd-paper);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--dd-ink);
    transition: all .15s;
}
.dd-tracker-quicklog-btn:hover {
    background: var(--dd-coral-mist, #E6F2EF);
    border-color: var(--dd-coral);
    color: var(--dd-coral-deep);
}
.dd-tracker-quicklog-btn:active {
    transform: scale(0.97);
}

/* Today's events list */
.dd-tracker-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dd-tracker-event {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--dd-cream, #FAF6EE);
    border-radius: var(--dd-radius-sm, 8px);
    font-size: 0.93rem;
}
.dd-tracker-event-time {
    color: var(--dd-ink-faint, #8C8478);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
}
.dd-tracker-event-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.dd-tracker-event-label {
    font-weight: 500;
}
.dd-tracker-event-detail {
    font-size: 0.85rem;
    color: var(--dd-ink-soft, #5C544A);
    text-align: right;
}
.dd-tracker-event-delete {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--dd-ink-faint, #8C8478);
    cursor: pointer;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.dd-tracker-event:hover .dd-tracker-event-delete {
    opacity: 1;
}
.dd-tracker-event-delete:hover {
    background: var(--dd-coral-mist, #E6F2EF);
    color: var(--dd-coral-deep);
}
.dd-tracker-empty {
    text-align: center;
    color: var(--dd-ink-faint, #8C8478);
    padding: 1.5rem 1rem;
    font-style: italic;
}

/* Modal */
.dd-tracker-modal {
    position: fixed;
    inset: 0;
    background: rgba(31, 26, 20, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.dd-tracker-modal[hidden] { display: none; }
.dd-tracker-modal-inner {
    background: var(--dd-paper);
    border-radius: var(--dd-radius);
    padding: 2rem 1.5rem 1.5rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.dd-tracker-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dd-ink-soft);
}
.dd-tracker-modal-title {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 1.25rem;
}
.dd-tracker-modal-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.dd-tracker-modal-row > span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dd-ink, #1F1A14);
}
.dd-tracker-modal-hint {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--dd-ink-faint, #8C8478);
    margin-top: 0.25rem;
}
.dd-tracker-modal-row em {
    font-weight: 400;
    color: var(--dd-ink-faint, #8C8478);
    font-style: normal;
    font-size: 0.85em;
}
.dd-tracker-modal-row input,
.dd-tracker-modal-row textarea,
.dd-tracker-modal-row select {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius-sm, 8px);
    font-size: 1rem;
    font-family: inherit;
    background: var(--dd-paper);
}
.dd-tracker-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Status messages */
.dd-tracker-status {
    margin-top: 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--dd-radius-sm, 8px);
    font-size: 0.9rem;
    min-height: 1.2em;
}
.dd-tracker-status:empty { display: none; }
.dd-tracker-status-success {
    background: var(--dd-coral-mist, #E6F2EF);
    color: var(--dd-coral-deep, #1F6F68);
}
.dd-tracker-status-error {
    background: #fbe5dc;
    color: #b85a3f;
}

/* Responsive */
@media (max-width: 600px) {
    .dd-tracker-summary { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .dd-tracker-summary-tile { padding: 0.6rem 0.4rem; }
    .dd-tracker-stat-value { font-size: 1.4rem; }
    .dd-tracker-event {
        grid-template-columns: auto auto 1fr auto;
    }
    .dd-tracker-event-detail { display: none; }
    .dd-tracker-event-delete { opacity: 1; }
}

/* ============================================================
   Formula search
   ============================================================ */
.dd-formula-search {
    background: var(--dd-paper);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.dd-formula-title {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 1rem;
}
.dd-formula-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    align-items: end;
}
.dd-formula-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.dd-formula-field-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dd-ink-faint, #8C8478);
    font-weight: 600;
}
.dd-formula-field select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius-sm, 8px);
    background: var(--dd-paper);
    font-size: 0.95rem;
}
.dd-formula-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--dd-ink-soft, #5C544A);
}
.dd-formula-prompt {
    text-align: center;
    color: var(--dd-ink-faint, #8C8478);
    padding: 1rem;
    font-style: italic;
}
.dd-admin-hint {
    background: #fff8e1;
    border-left: 3px solid #c9a572;
    padding: 0.6rem 0.85rem;
    margin-top: 1rem;
    text-align: left;
    color: #8b6f47;
    font-size: 0.9rem;
}

/* ============================================================
   Scanner: "couldn't identify" empty state
   ============================================================ */
.dd-scan-notfound {
    background: var(--dd-cream, #FAF6EE);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    padding: 2.5rem 1.75rem;
    text-align: center;
    margin: 1.5rem 0;
}
.dd-scan-notfound-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}
.dd-scan-notfound-title {
    font-family: var(--dd-font-display, "Fraunces", Georgia, serif);
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
    color: var(--dd-ink);
}
.dd-scan-notfound-message {
    color: var(--dd-ink-soft, #5C544A);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}
.dd-scan-notfound-hint {
    color: var(--dd-ink-soft, #5C544A);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 50ch;
    margin: 0 auto 1.5rem;
}
.dd-scan-notfound-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}