/* ==========================================================================
   Storefront promotions UI (cards, product page, cart, campaign hero, nav, combos)
   Shared markup lives in resources/views/components/{pricing,campaign,combo}.
   Each theme only tunes the --pp-* tokens below (see the [data-theme] blocks),
   so a new theme gets a sensible look for free and can restyle with a few vars.
   ========================================================================== */
:root {
    --pp-accent: var(--theme-accent, var(--theme-primary, #e11d48));
    --pp-accent-ink: #fff;
    --pp-pill-bg: var(--pp-accent);
    --pp-pill-ink: var(--pp-accent-ink);
    --pp-pill-radius: 999px;
    --pp-overlay-bg: linear-gradient(180deg, rgba(10, 10, 14, 0) 0%, rgba(10, 10, 14, .55) 100%);
    --pp-overlay-blur: 2px;
    --pp-timer-bg: #15151b;
    --pp-timer-ink: #fff;
    --pp-timer-accent: var(--pp-accent);
    --pp-timer-radius: 5px;
    --pp-now: var(--theme-price, var(--theme-primary, #1c1614));
    --pp-was: #8b919c;
    --pp-tag: #d92d20;
    --pp-tag-bg: rgba(217, 45, 32, .07);
    --pp-font: inherit;
    --pp-display-font: inherit;
    --pp-hero-bg: linear-gradient(120deg, #17171f 0%, #2b2b38 100%);
    --pp-hero-ink: #fff;
    --pp-hero-radius: 18px;
    --pp-card-radius: 14px;
    --pp-surface: #fff;
    --pp-border: rgba(15, 23, 42, .1);
    --pp-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

/* ---------- Countdown ---------- */
.pp-countdown { display: inline-flex; align-items: center; gap: 3px; font-family: var(--pp-font); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.pp-countdown[hidden], .pp-cd-unit[hidden] { display: none !important; }
.pp-countdown__label { font-size: .78em; font-weight: 600; margin-right: 4px; opacity: .85; }
.pp-cd-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.pp-cd-unit small { display: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pp-cd-box { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; padding: .32em .3em; border-radius: var(--pp-timer-radius); background: var(--pp-timer-bg); color: var(--pp-timer-ink); font-weight: 700; }
.pp-cd-box--accent { background: var(--pp-timer-accent); color: var(--pp-accent-ink); }
.pp-cd-sep { font-weight: 700; opacity: .7; }
.pp-countdown--xs { font-size: 10px; }
.pp-countdown--xs .pp-cd-box { min-width: 1.75em; padding: .28em .22em; border-radius: 3px; }
.pp-countdown--sm { font-size: 11px; }
.pp-countdown--md { font-size: 14px; }
.pp-countdown--lg { font-size: clamp(18px, 2.4vw, 26px); gap: 6px; }
.pp-countdown--lg .pp-cd-box { min-width: 2.2em; padding: .38em .3em; border-radius: calc(var(--pp-timer-radius) + 3px); }
.pp-countdown--lg .pp-cd-unit small { display: block; }
.pp-countdown--lg .pp-cd-sep { align-self: flex-start; padding-top: .35em; }
.pp-countdown.is-ended { opacity: .55; }

/* ---------- Card overlay (bottom of the product image) ---------- */
:where(.pp-media, .modern-card__image-wrap, .mb-pcard-media-wrap, .pcard-media, .mb-bs-card__media, .mb-tp-card__img, .dt-ess-media-wrap, .dt-pcard-media, .deal-card-media),
:has(> .pp-card-overlay) { position: relative; }
.pp-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 26px 8px 8px; background: var(--pp-overlay-bg); -webkit-backdrop-filter: blur(var(--pp-overlay-blur)); backdrop-filter: blur(var(--pp-overlay-blur)); pointer-events: none; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
.pp-card-overlay--product, .pp-card-overlay--category { padding-top: 18px; }
.pp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--pp-pill-radius); background: var(--pp-pill-bg); color: var(--pp-pill-ink); font-weight: 800; font-size: 11px; line-height: 1.1; font-family: var(--pp-font); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.pp-card-overlay .pp-countdown { margin-left: auto; }

/* ---------- Price meta under card prices ---------- */
.pp-price-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 3px 0 0; font-weight: 500; font-size: 12px; line-height: 1.35; font-family: var(--pp-font); }
.pp-was { color: var(--pp-was); text-decoration: line-through; font-weight: 500; }
.pp-tag, .pp-cart-line__tag, .pp-combo-save__deal { display: inline-flex; align-items: center; gap: 4px; color: var(--pp-tag); font-weight: 600; min-width: 0; }
.pp-tag, .pp-cart-line__tag { max-width: 100%; align-items: flex-start; white-space: normal; }
/* Long discount names wrap onto (at most) two lines, then end with an ellipsis, so narrow cards never clip them. */
.pp-tag__text { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pp-tag-ico { flex: none; margin-top: .2em; }
.pp-now { color: var(--pp-now); font-weight: 800; }
.pp-price { display: inline-flex; gap: 6px; align-items: baseline; }

/* ---------- Product page / quick view panel ---------- */
.pp-detail { margin: 10px 0 14px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--pp-accent) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--pp-accent) 6%, #fff); font-family: var(--pp-font); display: grid; gap: 8px; max-width: 520px; }
.pp-detail--compact { padding: 9px 11px; gap: 6px; }
.pp-detail__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-detail__name { font-weight: 700; color: inherit; text-decoration: none; }
a.pp-detail__name:hover { text-decoration: underline; }
.pp-detail__prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pp-detail__save { color: var(--pp-tag); font-weight: 700; }
.pp-detail__timer { display: flex; align-items: center; gap: 8px; }

/* ---------- Cart / checkout line ---------- */
.pp-cart-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 500; font-size: 12px; line-height: 1.35; font-family: var(--pp-font); }
.pp-cart-line:empty { display: none; }
.pp-cart-line__now { color: var(--pp-now); font-weight: 800; font-size: 14px; }
.pp-cart-line__was { color: var(--pp-was); }
.pp-cart-line__tag { flex-basis: 100%; }

/* ---------- Category badge ---------- */
.pp-cat-badge { display: inline-flex; align-items: center; padding: 2px 7px; margin-left: 6px; border-radius: var(--pp-pill-radius); background: var(--pp-pill-bg); color: var(--pp-pill-ink); font-weight: 800; font-size: 10px; line-height: 1.3; font-family: var(--pp-font); letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }

/* ---------- Campaign hero banner ---------- */
.pp-hero { margin: clamp(14px, 2.5vw, 28px) 0; font-family: var(--pp-font); }
.pp-hero__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; min-height: 240px; border-radius: var(--pp-hero-radius); overflow: hidden; background: var(--pp-hero-bg); color: var(--pp-hero-ink); text-decoration: none; box-shadow: var(--pp-shadow); isolation: isolate; }
.pp-hero__card:hover { color: var(--pp-hero-ink); text-decoration: none; }
.pp-hero__media { position: relative; min-height: 220px; background: rgba(255, 255, 255, .06); }
.pp-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-hero__collage { position: absolute; inset: 0; display: grid; gap: 3px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.pp-hero__collage--3, .pp-hero__collage--4 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pp-hero__collage--1 { grid-template-columns: 1fr; }
.pp-hero__collage--3 > img:first-child { grid-row: span 2; }
.pp-hero__collage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #fff; }
.pp-hero__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: clamp(18px, 3vw, 36px); }
.pp-hero__eyebrow { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 700; font-size: 11px; line-height: 1.2; font-family: var(--pp-font); letter-spacing: .12em; text-transform: uppercase; }
.pp-hero__title { margin: 0; color: inherit; font-weight: 800; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.08; font-family: var(--pp-display-font); letter-spacing: -.01em; }
.pp-hero__headline { margin: 0; color: var(--pp-accent); font-weight: 800; font-size: clamp(16px, 2vw, 22px); line-height: 1.2; font-family: var(--pp-font); filter: brightness(1.25); }
.pp-hero__desc { margin: 0; max-width: 46ch; opacity: .82; font-size: 14px; line-height: 1.5; }
.pp-hero__timer { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pp-hero .pp-countdown--lg .pp-cd-box { background: rgba(255, 255, 255, .12); color: var(--pp-hero-ink); }
.pp-hero .pp-countdown--lg .pp-cd-box--accent { background: var(--pp-timer-accent); color: var(--pp-accent-ink); }
.pp-hero__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 20px; border-radius: 999px; background: var(--pp-accent); color: var(--pp-accent-ink); font-weight: 800; font-size: 14px; line-height: 1; font-family: var(--pp-font); transition: transform .15s ease; }
.pp-hero__card:hover .pp-hero__cta { transform: translateX(3px); }
.pp-hero__more { font-size: 12px; opacity: .7; }
/* Theme stylesheets style h2/p/span globally; keep the banner legible on its dark background. */
.pp-hero .pp-hero__card .pp-hero__title,
.pp-hero .pp-hero__card .pp-hero__desc,
.pp-hero .pp-hero__card .pp-hero__eyebrow,
.pp-hero .pp-hero__card .pp-hero__more,
.pp-hero .pp-hero__card .pp-countdown__label,
.pp-hero .pp-hero__card .pp-cd-unit small { color: var(--pp-hero-ink) !important; }
.pp-hero .pp-hero__card .pp-hero__cta { color: var(--pp-accent-ink) !important; }
.pp-hero .pp-hero__card .pp-hero__title { font-size: clamp(24px, 3.4vw, 40px) !important; line-height: 1.08 !important; margin: 0 !important; }
.pp-hero .pp-hero__card .pp-cd-sep { color: var(--pp-hero-ink); opacity: .7; }
.pp-hero__collage img { border-radius: 0 !important; }
.pp-hero .pp-hero__card .pp-hero__headline { color: var(--pp-hero-accent, var(--pp-accent)) !important; }
@media (max-width: 767px) {
    .pp-hero__card { grid-template-columns: 1fr; }
    .pp-hero__media { min-height: 170px; }
    .pp-countdown--lg { font-size: 18px; }
}

/* ---------- Navbar campaigns dropdown ---------- */
.pp-nav { display: inline-flex; align-items: center; gap: 14px; font-family: var(--pp-font); }
.pp-nav__dropdown { position: relative; }
.pp-nav__trigger, .pp-nav__link { display: inline-flex; align-items: center; gap: 7px; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-decoration: none; white-space: nowrap; }
.pp-nav .nav-ico,
.pp-nav-mobile .nav-ico { width: 16px; height: 16px; flex: 0 0 16px; }
.pp-nav__item-name .nav-ico,
.pp-nav-mobile__name .nav-ico { margin-right: 0.35rem; vertical-align: -2px; }
.pp-nav__trigger:hover, .pp-nav__link:hover { color: var(--pp-accent); text-decoration: none; }
.pp-nav__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-accent) 60%, transparent); animation: pp-pulse 1.8s infinite; flex: none; }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-accent) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pp-nav__chev { transition: transform .2s ease; }
.pp-nav__panel { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 1200; min-width: 300px; padding: 8px; border: 1px solid var(--pp-border); border-radius: 14px; background: var(--pp-surface); color: #1f2430; box-shadow: 0 18px 40px rgba(15, 23, 42, .16); opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--pp-panel-shift, 0px)), 6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.pp-nav__dropdown--fixed .pp-nav__panel { position: fixed; }
.pp-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pp-nav__dropdown:hover .pp-nav__panel, .pp-nav__dropdown:focus-within .pp-nav__panel, .pp-nav__dropdown.is-open .pp-nav__panel { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--pp-panel-shift, 0px)), 0); }
.pp-nav__dropdown:hover .pp-nav__chev, .pp-nav__dropdown.is-open .pp-nav__chev { transform: rotate(180deg); }
.pp-nav__panel-head { padding: 6px 10px 8px; font-weight: 700; font-size: 11px; line-height: 1; font-family: var(--pp-font); letter-spacing: .1em; text-transform: uppercase; color: #8a8f99; }
.pp-nav__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.pp-nav__item:hover { background: color-mix(in srgb, var(--pp-accent) 8%, #fff); color: inherit; text-decoration: none; }
.pp-nav__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-nav__item-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-nav__item-sub { font-size: 12px; color: var(--pp-tag); font-weight: 600; }
.pp-nav__item--combo { border-top: 1px solid var(--pp-border); border-radius: 0 0 10px 10px; margin-top: 4px; }
.pp-nav-mobile { display: grid; gap: 2px; padding: 6px 0; font-family: var(--pp-font); }
.pp-nav-mobile__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: inherit; font-weight: 700; text-decoration: none; }
.pp-nav-mobile__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* ---------- Combos ---------- */
.pp-combo-save { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; font-weight: 600; font-size: 12.5px; line-height: 1.35; font-family: var(--pp-font); }
.pp-combo-save__deal { padding: 3px 8px; border-radius: 999px; background: var(--pp-tag-bg); }
.pp-combo-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--pp-border); border-radius: var(--pp-card-radius); background: var(--pp-surface); overflow: hidden; font-family: var(--pp-font); box-shadow: 0 4px 16px rgba(15, 23, 42, .05); transition: box-shadow .2s ease, transform .2s ease; }
.pp-combo-card:hover { box-shadow: var(--pp-shadow); transform: translateY(-2px); }
.pp-combo-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f4f4f6; overflow: hidden; }
.pp-combo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-combo-card__pill { position: absolute; left: 10px; top: 10px; z-index: 3; }
.pp-combo-media { position: relative; display: block; width: 100%; height: 100%; }
.pp-combo-media > img, .pp-combo-media__link, .pp-combo-media__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-combo-detail__media .pp-combo-media { aspect-ratio: 4 / 3; }
.pp-combo-ing { position: absolute; inset: 0; }
.pp-combo-ing__track { display: flex; gap: 8px; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 34px 10px 10px; -webkit-overflow-scrolling: touch; }
.pp-combo-ing__track::-webkit-scrollbar { display: none; }
.pp-combo-ing__slide { flex: 0 0 82%; scroll-snap-align: start; height: 100%; min-width: 0; border-radius: 10px; overflow: hidden; background: transparent; box-shadow: none; }
.pp-combo-ing__slide img { width: 100%; height: 100% !important; max-width: none; object-fit: contain !important; object-position: center; display: block; box-shadow: none !important; filter: none !important; }
.pp-combo-ing__swap { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 4; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 0, 0, .08); border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--pp-accent, #333); box-shadow: none; cursor: pointer; }
.pp-combo-ing__swap:hover { transform: translateY(-50%) scale(1.05); }
.pp-combo-ing:not(:has([data-pp-ing-next])) .pp-combo-ing__slide { flex-basis: calc(100% - 20px); }
.pp-combo-ing:not(:has([data-pp-ing-next])) .pp-combo-ing__track { padding-right: 10px; }
.pp-combo-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 14px; }
.pp-combo-card__eyebrow { font-weight: 700; font-size: 11px; line-height: 1; font-family: var(--pp-font); letter-spacing: .1em; text-transform: uppercase; color: var(--theme-accent, var(--pp-accent)); }
.pp-combo-card__title { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.25; font-family: var(--pp-display-font); }
.pp-combo-card__title a { color: inherit; text-decoration: none; }
.pp-combo-card__items { margin: 0; color: #6b7280; font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-combo-card__price { font-size: 18px; }
.pp-combo-card__actions { margin-top: auto; padding-top: 6px; }
.pp-combo-card__actions .addToCartCard { display: flex; gap: 8px; }
.pp-combo-card__actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-radius: 10px; border: 1px solid var(--theme-buy-now, var(--pp-accent)); background: var(--theme-buy-now, var(--pp-accent)); color: var(--on-buy-now, var(--pp-accent-ink)); font-weight: 700; }
.pp-combo-card__actions .btn-cart-add { flex: 1 1 auto; padding: 0 14px; background: transparent; color: var(--theme-add-to-cart, var(--pp-accent)); border-color: var(--theme-add-to-cart, var(--pp-accent)); }
.pp-combo-card__price .pp-now { color: var(--theme-price, var(--pp-now)); }
.pp-combo-card__pill { background: var(--theme-accent, var(--pp-accent)); color: var(--on-accent, #fff); }
.pp-combo-ing__swap { background: var(--theme-accent, var(--pp-accent)); color: var(--on-accent, #fff); }
.pp-combo-card__actions .sc-btn-face { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.pp-combo-card__actions .sc-btn-label { white-space: nowrap; }
.pp-combo-card__actions .sc-dots { display: none; }
/* Both combo buttons carry a label now ("Add to cart" + "Buy"), so cap their size and let them
   shrink side by side / stacked. `html[data-theme]` outranks each theme's base `.btn`. */
html[data-theme] .pp-combo-card__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0.5rem 0.75rem;
    font-size: 0.76rem;
    gap: 6px;
}
/* Add to cart is the primary action: give it the larger share of the row, keep Buy compact.
   Also cancel the shared `.btn-buy { width: 100% }` (add-to-cart.blade.php) — it inflates
   Buy's flex-basis to the full container width and squeezes "Add to cart" into an ellipsis. */
html[data-theme] .pp-combo-card__actions .btn-cart-add { flex: 2 1 auto; padding: 0 0.9rem; }
html[data-theme] .pp-combo-card__actions .btn-buy { flex: 1 1 auto; width: auto; padding: 0 0.9rem; }
html[data-theme] .pp-combo-card__actions .sc-btn-label { overflow: hidden; text-overflow: ellipsis; }
/* Hover: the shared inline `.btn-buy:hover` flips the fill to white while themes force a
   white label via `color: var(--on-accent, #fff) !important` → invisible text. Keep a dark
   fill with a white label instead. Aura / Sweet Crave exclude themselves from the broken
   inline rule and style their own hover, so leave them out. Setting --on-accent locally
   makes Daytrail's forced-white color rule resolve to white as well. */
html[data-theme]:not([data-theme="aura"]):not([data-theme="sweet_crave"]) .pp-combo-card__actions .btn-buy:hover,
html[data-theme]:not([data-theme="aura"]):not([data-theme="sweet_crave"]) .pp-combo-card__actions .btn-cart-add:hover,
html[data-theme]:not([data-theme="aura"]):not([data-theme="sweet_crave"]) .pp-combo-card__actions .btn-buy:focus-visible,
html[data-theme]:not([data-theme="aura"]):not([data-theme="sweet_crave"]) .pp-combo-card__actions .btn-cart-add:focus-visible {
    --on-accent: #fff;
    background-color: color-mix(in srgb, var(--pp-accent) 45%, #17110c) !important;
    border-color: color-mix(in srgb, var(--pp-accent) 45%, #17110c) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18) !important;
}
/* Mobile: custom.css stacks .addToCartCard as a column at ≤991px, so shrink both buttons. */
@media (max-width: 991px) {
    html[data-theme] .pp-combo-card__actions .btn {
        min-height: 32px;
        padding: 0.45rem 0.7rem;
        font-size: 0.72rem;
        gap: 5px;
    }
    html[data-theme] .pp-combo-card__actions .addToCartCard { gap: 6px; }
    html[data-theme] .pp-combo-card__actions .btn-cart-add { padding: 0 0.7rem; }
    html[data-theme] .pp-combo-card__actions .btn-cart-ico { width: 14px; height: 14px; }
}

.pp-rail { margin: clamp(16px, 3vw, 34px) 0; font-family: var(--pp-font); }
.pp-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pp-rail__title { margin: 0; font-weight: 800; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15; font-family: var(--pp-display-font); }
.pp-rail__sub { margin: 4px 0 0; color: #6b7280; font-size: 14px; }
.pp-rail__nav { display: flex; align-items: center; gap: 8px; }
.pp-rail__btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pp-border); background: var(--pp-surface); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.pp-rail__btn:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-rail__btn:disabled { opacity: .35; cursor: default; }
.pp-rail__all { margin-left: 4px; padding: 8px 14px; border-radius: 999px; background: var(--pp-accent); color: var(--pp-accent-ink); font-weight: 700; font-size: 13px; text-decoration: none; }
.pp-rail__all:hover { color: var(--pp-accent-ink); text-decoration: none; filter: brightness(.95); }
.pp-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 3 * 16px) / 4)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: none; }
.pp-rail__track::-webkit-scrollbar { display: none; }
.pp-rail__slide { scroll-snap-align: start; min-width: 0; }
@media (max-width: 991px) { .pp-rail__track { grid-auto-columns: minmax(220px, calc((100% - 16px) / 2.2)); } }
@media (max-width: 575px) { .pp-rail__track { grid-auto-columns: 78%; } }

/* ---------- Shared pages (campaign, combos) ---------- */
.pp-page { padding: clamp(16px, 3vw, 36px) 0 48px; font-family: var(--pp-font); }
.pp-page__wrap { width: min(1240px, 100% - 32px); margin: 0 auto; }
.pp-page__head { margin-bottom: 18px; }
.pp-page__title { margin: 6px 0; font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-family: var(--pp-display-font); }
.pp-page__lead { margin: 0; color: #6b7280; }
.pp-crumbs { font-size: 13px; color: #8a8f99; }
.pp-crumbs a { color: inherit; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pp-grid--products { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pp-grid > * { min-width: 0; }
.pp-empty { padding: 40px 0; text-align: center; color: #8a8f99; }
.pp-hero--page { margin: 12px 0 18px; }
.pp-hero--page .pp-hero__card { cursor: default; }
.pp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.pp-chips__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a8f99; margin-right: 4px; }
.pp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--pp-border); background: var(--pp-surface); color: inherit; font-size: 13px; font-weight: 600; text-decoration: none; }
.pp-chip:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-grid__cell > * { height: 100%; }
.pp-pager { margin-top: 22px; }
.pp-campaign-others { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 20px; }
.pp-campaign-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--pp-border); border-radius: 999px; color: inherit; font-weight: 600; font-size: 13px; text-decoration: none; background: var(--pp-surface); }
.pp-campaign-chip:hover { border-color: var(--pp-accent); color: inherit; text-decoration: none; }
.pp-combo-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 14px; }
.pp-combo-detail__media img { width: 100%; border-radius: var(--pp-card-radius); object-fit: cover; aspect-ratio: 4 / 3; background: #f4f4f6; }
.pp-combo-detail__copy { display: flex; flex-direction: column; gap: 10px; }
.pp-combo-detail__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-combo-detail__items li { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--pp-border); border-radius: 10px; }
.pp-combo-detail__items img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.pp-combo-detail__items a { color: inherit; font-weight: 600; }
@media (max-width: 767px) { .pp-combo-detail { grid-template-columns: 1fr; } }

/* ==========================================================================
   Theme vibes: only tokens + a few signature touches per theme.
   ========================================================================== */
[data-theme="crimson_organica"] {
    --pp-accent: #c8102e; --pp-timer-accent: #c8102e; --pp-timer-bg: #2a0d12;
    --pp-hero-bg: radial-gradient(120% 140% at 0% 0%, #3b0a14 0%, #1b0609 60%, #120406 100%);
    --pp-now: #c8102e; --pp-pill-radius: 6px; --pp-hero-radius: 16px; --pp-hero-accent: #ff8a9b;
}
[data-theme="classic"] {
    --pp-accent: var(--rg-saffron, #e56a33); --pp-timer-bg: var(--rg-plum, #2e1f53); --pp-timer-accent: var(--rg-saffron, #e56a33);
    --pp-hero-bg: linear-gradient(135deg, var(--rg-plum, #2e1f53) 0%, #4a2f7a 100%);
    --pp-display-font: Georgia, "Times New Roman", serif; --pp-now: var(--rg-plum, #2e1f53);
}
[data-theme="natures_nest"] {
    --pp-accent: #3f7d3a; --pp-timer-bg: #1f3a1d; --pp-timer-accent: #e3a33b; --pp-pill-bg: #3f7d3a;
    --pp-hero-bg: linear-gradient(120deg, #1f3a1d 0%, #335f2f 60%, #4f8a45 100%);
    --pp-hero-radius: 26px; --pp-card-radius: 20px; --pp-now: #2f6a2b; --pp-hero-accent: #d4f5a6;
}
[data-theme="natures_nest"] .pp-hero__card { border-radius: 26px 26px 26px 6px; }
[data-theme="daytrail"] {
    --pp-accent: #f26a1b; --pp-timer-bg: #1e2329; --pp-timer-accent: #f26a1b; --pp-pill-radius: 2px; --pp-timer-radius: 2px;
    --pp-hero-bg: linear-gradient(115deg, #1e2329 0%, #2e3640 55%, #3d4753 100%); --pp-hero-radius: 4px; --pp-card-radius: 4px; --pp-now: #1e2329;
}
[data-theme="daytrail"] .pp-pill, [data-theme="daytrail"] .pp-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; }
[data-theme="daytrail"] .pp-hero__cta { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; }
[data-theme="modhu_bari"] {
    --pp-accent: #e09b16; --pp-accent-ink: #2b1a02; --pp-timer-bg: #3a2405; --pp-timer-accent: #f2b233;
    --pp-hero-bg: radial-gradient(130% 120% at 100% 0%, #6b4108 0%, #3a2405 55%, #241602 100%);
    --pp-now: #b5730a; --pp-tag: #b4410f;
}
[data-theme="organic_mart"] {
    --pp-accent: #2e9e48; --pp-timer-bg: #133d1d; --pp-timer-accent: #f4b400; --pp-accent-ink: #fff;
    --pp-hero-bg: linear-gradient(120deg, #0f3d1b 0%, #1f6b33 100%); --pp-now: #1f7a37; --pp-hero-radius: 20px;
}
[data-theme="excellence_mart"] {
    --pp-accent: #c9a227; --pp-accent-ink: #1b2240; --pp-timer-bg: #1b2240; --pp-timer-accent: #c9a227;
    --pp-hero-bg: linear-gradient(120deg, #111a3a 0%, #1b2a5c 100%); --pp-now: #1b2a5c; --pp-pill-radius: 4px;
}
[data-theme="aura"] {
    --pp-accent: #a46150; --pp-timer-bg: #1c1614; --pp-timer-accent: #a46150; --pp-pill-radius: 0; --pp-timer-radius: 0;
    --pp-hero-bg: linear-gradient(120deg, #0d0d0d 0%, #262022 100%); --pp-hero-radius: 0; --pp-card-radius: 0; --pp-now: #111;
    --pp-display-font: "Cormorant Garamond", Georgia, serif;
}
[data-theme="aura"] .pp-pill { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
[data-theme="aura"] .pp-hero__cta { border-radius: 0; background: transparent; border: 1px solid #fff; color: #fff; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
[data-theme="sweet_crave"] {
    --pp-accent: #e8457a; --pp-timer-bg: #4a1f3a; --pp-timer-accent: #e8457a; --pp-timer-radius: 8px;
    --pp-hero-bg: linear-gradient(120deg, #4a1f3a 0%, #8a2f5d 55%, #e8457a 130%); --pp-hero-radius: 28px; --pp-card-radius: 22px; --pp-now: #b0285a;
}
[data-theme="sweet_crave"] .pp-pill { box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
[data-theme="sweet_crave"] .pp-rail--sweet .pp-rail__track { grid-auto-columns: minmax(250px, calc((100% - 2 * 16px) / 3)); }
[data-theme="leather_craft"] {
    --pp-accent: #8b5a2b; --pp-timer-bg: #2a1c12; --pp-timer-accent: #b8864b; --pp-pill-radius: 3px;
    --pp-hero-bg: linear-gradient(120deg, #24170e 0%, #3d2818 60%, #5b3b22 100%); --pp-hero-radius: 6px; --pp-now: #6b4421;
    --pp-display-font: "Playfair Display", Georgia, serif;
}
[data-theme="senorita"] {
    --pp-accent: var(--theme-primary, #5C1F32);
    --pp-pill-bg: #fff;
    --pp-pill-ink: var(--theme-primary-deep, #3A1420);
    --pp-pill-radius: 999px;
    --pp-timer-bg: #2A1A20;
    --pp-timer-accent: var(--theme-primary, #5C1F32);
    --pp-now: var(--theme-price, #C23A4A);
    --pp-was: #9a8a8e;
    --pp-card-radius: 14px;
    --pp-overlay-bg: linear-gradient(180deg, transparent 0%, rgba(42, 26, 32, .38) 100%);
    --pp-overlay-blur: 0px;
    --pp-display-font: "Anek Bangla", "Hind Siliguri", system-ui, sans-serif;
}

/* ==========================================================================
   Card price layout (all themes)
   Line 1: current price + struck regular price (smaller, grey).
   Line 2: discount tag (icon + name + amount), wraps cleanly.
   ========================================================================== */
.pp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; min-width: 0; max-width: 100%; }
.pp-price-row > :first-child { margin-bottom: 0; min-width: 0; }
.pp-was--inline { display: inline-block; flex: none; font-size: 13px; line-height: 1.2; font-weight: 500; color: var(--pp-was); text-decoration: line-through; text-decoration-thickness: 1px; white-space: nowrap; letter-spacing: 0; text-transform: none; vertical-align: baseline; }
:where(.price, .mb-pcard-price, .mb-bs-card__price) > .pp-was--inline { font-size: max(12px, .62em); margin-left: 2px; }
/* width (not flex-basis) so it fills a wrapping row but stays content-high inside column flex bodies. */
.pp-price-meta { width: 100%; flex: 0 0 auto; }
.pp-price-meta:not(:has(.pp-was)) { display: block; }
.pp-price-meta .pp-tag { display: inline-flex; }
/* Theme markups that already print "now + was": keep them on one line. */
.modern-price-stack { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; }
.modern-price-stack .modern-price-original { font-size: 13px; color: var(--pp-was); text-decoration: line-through; font-weight: 500; white-space: nowrap; }
.mb-pcard-price:has(> s), .mb-bs-card__price:has(> s) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; }
.mb-pcard-price > s, .mb-bs-card__price > s { display: inline-block !important; font-size: max(12px, .62em); color: var(--pp-was); font-weight: 500; white-space: nowrap; }
.em-pcard-price--sale { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; }
.em-pcard-price--sale .em-pcard-price__was { order: 2; }

/* Centered card layouts (aura) keep the rows centered. */
[data-theme="aura"] .pcard .price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 8px; }
[data-theme="aura"] .pcard .pp-price-meta { justify-content: center; text-align: center; }
[data-theme="aura"] .pcard .pp-price-meta .pp-tag { justify-content: center; }
/* Aura "soothing blend": the image fades into the card and the name starts on that fade (theme default,
   untouched). The discount badge + timer therefore live at the TOP-LEFT of the image, above the fade zone,
   as compact semi-transparent pills, clear of the name and of the hover buttons on the top-right. */
html[data-theme="aura"] .pcard-media > .pp-card-overlay { top: .6rem; bottom: auto; left: .6rem; right: 3.1rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; border-radius: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
html[data-theme="aura"] .pcard-media > .pp-card-overlay .pp-countdown { margin-left: 0; }
html[data-theme="aura"] .pcard-media > .pp-card-overlay .pp-pill { background: rgba(164, 97, 80, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: .3em .7em; }
html[data-theme="aura"] .pcard-media > .pp-card-overlay .pp-cd-box { background: rgba(17, 17, 17, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-theme="aura"] .pcard-media > .pp-card-overlay .pp-cd-box--accent { background: rgba(164, 97, 80, .88); }
html[data-theme="aura"] .pcard-media > .pp-card-overlay .pp-cd-sep { color: rgba(17, 17, 17, .7); }
@media (max-width: 575px) {
    html[data-theme="aura"] .pcard-media > .pp-card-overlay { top: .45rem; left: .45rem; right: 2.6rem; padding: 0; }
}

/* ---------- Mobile cards (2-column grids at 360-414px) ---------- */
@media (max-width: 575px) {
    .pp-card-overlay { padding: 14px 6px 6px; gap: 4px; flex-wrap: wrap; }
    .pp-card-overlay--product, .pp-card-overlay--category { padding-top: 10px; }
    .pp-pill { padding: 3px 7px; font-size: 10px; letter-spacing: .01em; }
    .pp-card-overlay .pp-countdown { gap: 1px; font-size: 9.5px; }
    .pp-card-overlay .pp-cd-box { min-width: 1.6em; padding: .25em .18em; }
    .pp-card-overlay .pp-countdown__label { display: none; }
    .pp-price-meta { font-size: 11px; margin-top: 2px; }
    .pp-tag { gap: 3px; }
    .pp-tag-ico { width: 11px; height: 11px; }
    .pp-was--inline, .modern-price-stack .modern-price-original { font-size: 11.5px; }
    .pp-price-row { column-gap: 6px; }
}
@media (max-width: 380px) {
    .pp-card-overlay .pp-countdown { display: none; }
}

/* Price row: the theme's price element shrinks to its content so the struck price can sit beside it. */
.pp-price-row > p { width: auto !important; flex: 0 1 auto; max-width: 100%; }
[data-theme="daytrail"] .dt-pcard .pp-price-row { justify-content: center; }
[data-theme="daytrail"] .dt-pcard .pp-price-meta { text-align: center; }
/* Daytrail grid card: the quick-view / wishlist buttons sit on the image's bottom edge, so the
   discount pill + timer move to the top of the image. */
[data-theme="daytrail"] .dt-pcard-media > .pp-card-overlay { top: 0; bottom: auto; align-items: flex-start; padding: 8px 8px 22px;
    background: linear-gradient(0deg, rgba(10, 10, 14, 0) 0%, rgba(10, 10, 14, .45) 100%);
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 18px); mask-image: linear-gradient(0deg, transparent 0, #000 18px);
    border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Aura shop grid is left-aligned. */
[data-theme="aura"] .pcard--shop .price, [data-theme="aura"] .pcard--shop .pp-price-meta, [data-theme="aura"] .pcard--shop .pp-price-meta .pp-tag { justify-content: flex-start; text-align: left; }
/* Crimson: price + Add share a row; the discount line drops to its own full-width line. */
html[data-theme="crimson_organica"] .mb-pcard-foot:has(> .pp-price-meta),
html[data-theme="crimson_organica"] .mb-pcard--lo .mb-pcard-foot:has(> .pp-price-meta) { flex-wrap: wrap !important; row-gap: 4px !important; }
[data-theme="crimson_organica"] .mb-pcard-foot > .pp-price-meta { order: 3; flex: 0 0 100%; margin-top: 0; }
[data-theme="crimson_organica"] .mb-pcard-foot > .mb-pcard-price { flex: 1 1 auto; min-width: 0; }
/* Sweet crave: current price first, struck regular price smaller after it; card text never collapses. */
[data-theme="sweet_crave"] .pcard .price:has(.price-was) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; }
[data-theme="sweet_crave"] .pcard .price .price-was { order: 2; font-size: max(12px, .55em); font-family: var(--pp-font); font-weight: 500; color: var(--pp-was); text-decoration: line-through; }
[data-theme="sweet_crave"] .pcard .pcard-body > h3, [data-theme="sweet_crave"] .pcard .pcard-body > .sub, [data-theme="sweet_crave"] .pcard .pcard-body > .pp-price-meta { flex-shrink: 0; }
/* Price gets the room it needs for "now + was" on one line; the buttons wrap below when the card is narrow. */
html[data-theme="sweet_crave"] .pcard .pcard-foot:has(.price-was) { flex-wrap: wrap; row-gap: 8px; }
html[data-theme="sweet_crave"] .pcard .pcard-foot:has(.price-was) > .price { flex: 1 0 auto; }
html[data-theme="sweet_crave"] .pcard .pcard-foot:has(.price-was) > .pcard-actions { margin-left: auto; }
@media (max-width: 575px) {
    /* 2-column grid: the short blurb is dropped so title, price, tag and buttons always fit the card. */
    html[data-theme="sweet_crave"] .pcard .pcard-body > .sub { display: none; }
    html[data-theme="sweet_crave"] .pcard .pcard-foot { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    html[data-theme="sweet_crave"] .pcard .pcard-foot > .price { flex: 0 0 100%; justify-content: center; }
    html[data-theme="sweet_crave"] .pcard .pcard-foot > .pcard-actions { margin: 0 auto; }
}
html[data-theme="crimson_organica"] .mb-pcard-foot > .mb-pcard-price:has(> s) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline !important; column-gap: 6px; }
/* Overlay never pushes its timer outside a narrow card: it wraps under the pill instead. */
.pp-card-overlay { flex-wrap: wrap; row-gap: 4px; }
.modern-price-stack { column-gap: 8px !important; }
@media (max-width: 575px) {
    /* Crimson 2-column cards are too narrow for "price + was" and the Add button on one row:
       price row first (full width), then the discount line, then Add. */
    html[data-theme="crimson_organica"] .mb-pcard-foot:has(> .pp-price-meta) > .mb-pcard-price { order: 1; flex: 1 0 100%; max-width: 100% !important; column-gap: 6px !important; }
    html[data-theme="crimson_organica"] .mb-pcard-foot > .pp-price-meta { order: 2; }
    html[data-theme="crimson_organica"] .mb-pcard-foot:has(> .pp-price-meta) > .mb-pcard-footer { order: 3; margin-left: auto; }
}

/* crimson: theme caps the price at calc(100% - 4.25rem) to leave room for Add; with a strike + tag line the foot wraps, so give the price row the room it needs */
html[data-theme="crimson_organica"] .mb-pcard-foot:has(> .pp-price-meta) > .mb-pcard-price:has(> s) { column-gap: 6px !important; }

/* sweet_crave: tag line lives inside .pcard-foot, right under the price row; buttons follow. */
html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) { flex-wrap: wrap; row-gap: 8px; }
html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) > .price { order: 1; flex: 1 0 100%; }
html[data-theme="sweet_crave"] .pcard .pcard-foot > .pp-price-meta { order: 2; flex: 0 0 100%; width: 100%; margin: -4px 0 0; }
html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) > .pcard-actions { order: 3; margin-left: auto; }
@media (max-width: 720px) {
    /* the theme turns the foot into a column here: percentage flex-basis would mean height, so reset it */
    html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) { flex-wrap: nowrap; }
    html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) > .price,
    html[data-theme="sweet_crave"] .pcard .pcard-foot > .pp-price-meta,
    html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) > .pcard-actions { flex: 0 0 auto; }
    html[data-theme="sweet_crave"] .pcard .pcard-foot > .pp-price-meta { margin: -2px 0 0; }
}
@media (max-width: 575px) {
    html[data-theme="sweet_crave"] .pcard .pcard-foot > .pp-price-meta,
    html[data-theme="sweet_crave"] .pcard .pcard-foot > .pp-price-meta .pp-tag { justify-content: center; text-align: center; }
    html[data-theme="sweet_crave"] .pcard .pcard-foot:has(> .pp-price-meta) > .pcard-actions { margin: 0 auto; }
}

/* daytrail essentials card (narrow ~100px text column on desktop): tighten so "BDT 901.60 ৳980" fits one line;
   very long prices still wrap rather than clip. */
html[data-theme="daytrail"] .dt-ess-bottom .pp-price-row:has(.pp-was) { column-gap: 4px; }
html[data-theme="daytrail"] .dt-ess-bottom .pp-price-row:has(.pp-was) .pp-was--inline { font-size: 10.5px; }
html[data-theme="daytrail"] .dt-ess-bottom .pp-price-row:has(.pp-was) [data-dt-price-value] { font-size: 14px; }
html[data-theme="daytrail"] .dt-ess-bottom .pp-price-row:has(.pp-was) .cur { font-size: 10px; }

/* daytrail horizontal (essentials) card, discounted only (non-discounted cards keep the original layout,
   no .dt-ess-wide). Row 1 = image | text (title, price, arrow); row 2 under both columns:
   - tablet/desktop (>=576px): discount tag (left half, up to 2 lines) beside the add button (right half),
     then the rule + arrow as the last row under the button (HEAD order);
   - phones (<=575px): tag on its own full-width row, then the add button + arrow row.
   Row 1 absorbs extra height so rail cards stay even. */
html[data-theme="daytrail"] .dt-ess-card:has(> .dt-ess-wide) { grid-template-rows: minmax(0, 1fr) auto; }
html[data-theme="daytrail"] .dt-ess-card > .dt-ess-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: .6rem; row-gap: .35rem; min-width: 0; }
html[data-theme="daytrail"] .dt-ess-wide > .pp-price-meta { margin: 0; min-width: 0; text-align: left; display: flex; align-items: center; }
html[data-theme="daytrail"] .dt-ess-wide > .pp-price-meta .pp-tag { justify-content: flex-start; align-items: center; font-size: 11.5px; line-height: 1.25; max-width: 100%; white-space: normal; }
html[data-theme="daytrail"] .dt-ess-wide > .pp-price-meta .pp-tag-ico { margin-top: 0; }
html[data-theme="daytrail"] .dt-ess-wide > .pp-price-meta .pp-tag__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
html[data-theme="daytrail"] .dt-ess-wide > .dt-ess-add-wrap { min-width: 0; margin: 0; }
html[data-theme="daytrail"] .dt-ess-wide > .dt-ess-foot--wide { grid-column: 2; margin-top: .2rem; } /* tablet/desktop: rule + arrow as the last row, under the button */
@media (max-width: 575px) {
    html[data-theme="daytrail"] .dt-ess-card > .dt-ess-wide { grid-template-columns: minmax(0, 1fr) auto; column-gap: .4rem; }
    html[data-theme="daytrail"] .dt-ess-wide > .pp-price-meta { grid-column: 1 / -1; }
    html[data-theme="daytrail"] .dt-ess-wide > .pp-price-meta .pp-tag { font-size: 11px; }
    html[data-theme="daytrail"] .dt-ess-wide > .dt-ess-add-wrap { grid-column: 1; }
    html[data-theme="daytrail"] .dt-ess-wide > .dt-ess-foot--wide { display: flex; grid-column: 2; margin: 0; width: auto; }
    html[data-theme="daytrail"] .dt-ess-wide > .dt-ess-foot--wide .rule { display: none; }
    /* Non-discounted cards on phones use the same bottom row as discounted ones: a full-width add button
       with the arrow beside it (in the text column the button was squeezed and "REQUEST STOCK" clipped).
       Markup stays as HEAD (tablet/desktop unchanged); the button and arrow are pinned to the card's
       bottom padding, which reserves one button row (32px) + the .35rem row gap used by discounted cards. */
    html[data-theme="daytrail"] .dt-ess-card:not(:has(> .dt-ess-wide)) { position: relative; padding-bottom: calc(.5rem + 32px + .35rem); }
    html[data-theme="daytrail"] .dt-ess-card:not(:has(> .dt-ess-wide)) .dt-ess-body .dt-ess-add-wrap { position: absolute; left: .4rem; right: calc(.4rem + 28px + .4rem); bottom: .5rem; width: auto; margin: 0; }
    html[data-theme="daytrail"] .dt-ess-card:not(:has(> .dt-ess-wide)) .dt-ess-body > .dt-ess-foot { position: absolute; right: .4rem; bottom: calc(.5rem + 2px); left: auto; width: auto; margin: 0; }
    html[data-theme="daytrail"] .dt-ess-card:not(:has(> .dt-ess-wide)) .dt-ess-body > .dt-ess-foot .rule { display: none; }
}

/* Combo card colors follow the live theme tokens. Theme rules below only change shape and type. */
html[data-theme] .pp-combo-card__price .pp-now { color: var(--theme-price, var(--pp-now)); }
html[data-theme] .pp-combo-card__eyebrow { color: var(--theme-accent, var(--pp-accent)); }
html[data-theme] .pp-combo-card__pill { background: var(--theme-accent, var(--pp-accent)); color: var(--on-accent, #fff); }
html[data-theme] .pp-combo-card__actions .btn-buy { background: var(--theme-buy-now, var(--pp-accent)); border-color: var(--theme-buy-now, var(--pp-accent)); color: var(--on-buy-now, #fff); }
html[data-theme] .pp-combo-card__actions .btn-cart-add { background: #fff; color: var(--theme-add-to-cart, var(--pp-accent)); border-color: var(--theme-add-to-cart, var(--pp-accent)); }
html[data-theme] .pp-combo-ing__swap { background: var(--theme-accent, var(--pp-accent)); color: var(--on-accent, #fff); border-color: transparent; }

html[data-theme="leather_craft"] .pp-combo-card { border-radius: 12px; border-color: var(--theme-line, var(--mb-line, #e6e0d8)); font-family: var(--mb-font, Manrope, sans-serif); }
html[data-theme="leather_craft"] .pp-combo-card__title { font-family: var(--mb-display, Merriweather, serif); }
html[data-theme="leather_craft"] .pp-combo-card__actions .btn { border-radius: 999px; }

html[data-theme="daytrail"] .pp-combo-card { border: 0; border-radius: 18px; }
html[data-theme="daytrail"] .pp-combo-card__media { background: color-mix(in srgb, var(--theme-accent, #e59b6a) 16%, #fff); }
html[data-theme="daytrail"] .pp-combo-card__title { font-family: var(--dt-display, Fraunces, serif); letter-spacing: .02em; text-transform: none; }
html[data-theme="daytrail"] .pp-combo-card__actions .btn { border-radius: 999px; }

html[data-theme="aura"] .pp-combo-card { border-radius: 16px; border-color: var(--theme-line, #e4d7ca); }
html[data-theme="aura"] .pp-combo-card__media { background: var(--theme-surface-warm, #f3ebe0); }
html[data-theme="aura"] .pp-combo-card__title { font-family: var(--au-display, "Cormorant Garamond", serif); font-size: 1.35rem; font-weight: 600; }
html[data-theme="aura"] .pp-combo-card__actions .btn { border-radius: 12px; }

html[data-theme="modhu_bari"] .pp-combo-card { border-radius: 16px; border-color: var(--theme-line, var(--mb-line)); background: var(--theme-surface, #fffdf8); }
html[data-theme="modhu_bari"] .pp-combo-card__media { background: var(--theme-surface-warm, #efe8dc); }
html[data-theme="modhu_bari"] .pp-combo-card__title { font-family: var(--mb-display, Merriweather, serif); }
html[data-theme="modhu_bari"] .pp-combo-card__actions .btn { border-radius: 999px; }

html[data-theme="crimson_organica"] .pp-combo-card { border-radius: 16px; border-color: var(--theme-line, #edd6de); }
html[data-theme="crimson_organica"] .pp-combo-card__media { background: var(--theme-surface-warm, #fff0f4); }
html[data-theme="crimson_organica"] .pp-combo-card__title { font-family: var(--mb-display, Merriweather, serif); }
html[data-theme="crimson_organica"] .pp-combo-card__actions .btn { border-radius: 999px; }

html[data-theme="excellence_mart"] .pp-combo-card { border-radius: 8px; border-color: var(--theme-line, #e6e6e6); }
html[data-theme="excellence_mart"] .pp-combo-card__media { background: var(--theme-surface-alt, #f3f3f3); }
html[data-theme="excellence_mart"] .pp-combo-card__title { font-family: var(--mb-font, Manrope, sans-serif); letter-spacing: 0; font-weight: 800; }
html[data-theme="excellence_mart"] .pp-combo-card__actions .btn { border-radius: 6px; }
html[data-theme="excellence_mart"] .pp-combo-ing__slide { border-radius: 4px; }

html[data-theme="organic_mart"] .pp-combo-card { border-radius: 14px; border-color: var(--theme-line, #ddd6c8); }
html[data-theme="organic_mart"] .pp-combo-card__media { background: var(--theme-surface-alt, #eaf2e9); }
html[data-theme="organic_mart"] .pp-combo-card__actions .btn { border-radius: 999px; }

html[data-theme="natures_nest"] .pp-combo-card { border-radius: 20px; border-color: var(--theme-line, #e4ddd0); background: var(--theme-surface, #f8f5ee); }
html[data-theme="natures_nest"] .pp-combo-card__title { font-family: Georgia, serif; font-weight: 600; }
html[data-theme="natures_nest"] .pp-combo-card__actions .btn { border-radius: 999px; }

html[data-theme="sweet_crave"] .pp-combo-card,
html[data-theme="sweet_crave"] .deal-card.combo-card { border-radius: 22px; }
html[data-theme="sweet_crave"] .pp-combo-ing__slide { border-radius: 16px; background: #fff; }
html[data-theme="sweet_crave"] .deal-card-media { position: relative; }
html[data-theme="sweet_crave"] .deal-card-media .pp-combo-media { height: 100%; min-height: 180px; }