/* ===========================================================
   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;

    --dd-coral:       #D26F52;
    --dd-coral-deep:  #B85A3F;
    --dd-coral-mist:  #FBE5DC;

    --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(210,111,82,.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(210,111,82,.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;
}