/* ------------------------------------------------------------------ */
/*  Deal Top Summary                                                    */
/*  Figma: EipWVj74Jb4Y7uuesQVW8T node 914:40777                       */
/*  Server-rendered hero section, auto-injected via the_content filter. */
/*  NOTE: Rendered inside .post-content — overrides below originally   */
/*  used !important to neutralise conflicting theme rules from         */
/*  ut_deals/style.css. style.css was deleted in Phase 4 so the        */
/*  !important flags in the legacy-specificity-war category have been   */
/*  dropped; GT-525 flags + inline-style-fight flags are preserved.    */
/* ------------------------------------------------------------------ */

/* ================================================================== */
/*  Deal page wrapper — contains breadcrumb + card                     */
/* ================================================================== */

.ut-deal-page-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto var(--ut-spacing-lg);
    padding: 0;  /* var(--ut-spacing-md); */
    box-sizing: border-box;
}

/* Breadcrumb inside the deal page wrapper (above card, inside boundary) */
.ut-deal-breadcrumb {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-xs);
    line-height: var(--ut-line-height-sm);
    color: var(--text-secondary-color);
    /* padding: var(--ut-spacing-sm) 0; */
    margin-bottom: var(--ut-spacing-sm);
}

/* ================================================================== */
/*  Outer wrapper — margin below only                                  */
/* ================================================================== */

.ut-deal-top-summary {
    font-family: var(--ut-font-family);
    background: transparent;
}

/* ================================================================== */
/*  Card — white, padded, rounded (desktop)                            */
/* ================================================================== */

.ut-deal-top-summary__card {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: var(--background-secondary);
    padding: var(--ut-spacing-xl);
    border-radius: var(--ut-radius-2xl);
    box-shadow: 0 1px 4px rgb(5, 7, 69, 0.06);
    box-sizing: border-box;
    width: 100%;
}

/* Two-column row: text left + image right (Figma: gap 32px) */
.ut-deal-top-summary__row {
    display: flex;
    flex-direction: row;
    gap: var(--ut-spacing-xl);
    width: 100%;
}

/* ================================================================== */
/*  Left column — text content (flex-1)                                */
/* ================================================================== */

.ut-deal-top-summary__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ut-spacing-lg);
    min-width: 0;
}

/* ================================================================== */
/*  Section 1 — Action Bar                                             */
/* ================================================================== */

.ut-deal-top-summary__action-bar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ut-spacing-md);
}

.ut-deal-top-summary__action-bar-left {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--ut-spacing-md);
}

.ut-deal-top-summary__action-bar-right {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--ut-spacing-md);
    justify-content: flex-end;
}

/* Figma: Button Blue / Tertiary / XS / Icon Left
   node 1039:4090 (default), 1039:4112 (hover), 1039:4101 (active), 1039:4123 (disabled)
   Poppins 12px/20px weight 400, py 8px only (no horizontal padding in deal summary context) */
.ut-deal-top-summary__action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ut-spacing-sm);           /* 8px */
    padding: var(--ut-spacing-sm) 0;     /* 8px 0 — flush with content edges */
    border: none;
    border-radius: var(--ut-radius-lg);  /* 16px */
    background: transparent;
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-xs);   /* 12px */
    font-weight: 400;
    line-height: var(--ut-line-height-sm); /* 20px */
    color: var(--button-default-primary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: color 0.15s ease;
}

/* Hover: text blue-link, underline — icon follows via currentColor */
.ut-deal-top-summary__action-btn:hover {
    color: var(--button-link-default);
    text-decoration: underline;
    background: transparent;
}

/* Active/pressed: text primary, underline */
.ut-deal-top-summary__action-btn:active {
    color: var(--button-default-primary);
    text-decoration: underline;
    background: transparent;
}

/* Focus-visible: keyboard accessibility ring */
.ut-deal-top-summary__action-btn:focus-visible {
    outline: 2px solid var(--ut-blue-700);
    outline-offset: 2px;
}

/* Disabled: text tertiary, no pointer */
.ut-deal-top-summary__action-btn:disabled,
.ut-deal-top-summary__action-btn[aria-disabled="true"] {
    color: var(--button-default-tertiary);
    cursor: default;
    text-decoration: none;
}

.ut-deal-top-summary__action-btn svg {
    flex-shrink: 0;
}

/* Default icon: icon-secondary (#50527D) per Figma — different from text color */
.ut-deal-top-summary__action-btn svg path {
    stroke: var(--icon-secondary);
}

/* Hover/active: icon follows text color */
.ut-deal-top-summary__action-btn:hover svg path {
    stroke: var(--button-link-default);
}

.ut-deal-top-summary__action-btn:active svg path {
    stroke: var(--button-default-primary);
}

.ut-deal-top-summary__action-btn:disabled svg path,
.ut-deal-top-summary__action-btn[aria-disabled="true"] svg path {
    stroke: var(--button-default-tertiary);
}

/* Override wp-favorites card-bookmark.css (absolute pos, opacity:0, bg tint on hover) */
.ut-deal-top-summary__action-btn.utfav-card-bookmark {
    position: static;
    width: auto;
    height: auto;
    border-radius: var(--ut-radius-lg); /* 16px — DS Tertiary button */
    background: transparent;
    box-shadow: none;
    z-index: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none; /* prevent card-bookmark.css scale on hover (originally !important to beat sibling in-house file; dropped post-nuke) */
}

/* Override card-bookmark.css hover bg tint — DS Tertiary uses transparent bg */
.ut-deal-top-summary__action-btn.utfav-card-bookmark:hover:not(.is-saved),
.ut-deal-top-summary__action-btn.utfav-card-bookmark:hover.is-saved {
    background: transparent;
}

/* Saved state: only heart icon is red, text stays default primary */
.ut-deal-top-summary__action-btn.utfav-card-bookmark.is-saved {
    color: var(--button-default-primary);
}

.ut-deal-top-summary__action-btn.utfav-card-bookmark.is-saved svg path {
    fill: var(--ut-red-800, var(--ut-red-800));
    stroke: var(--ut-red-800, var(--ut-red-800));
}

/* Saved hover: text follows DS hover (blue-link + underline), heart stays red */
.ut-deal-top-summary__action-btn.utfav-card-bookmark.is-saved:hover {
    color: var(--button-link-default);
    text-decoration: underline;
    background: transparent;
}

.ut-deal-top-summary__action-btn.utfav-card-bookmark.is-saved:hover svg path {
    fill: var(--ut-red-800, var(--ut-red-800));
    stroke: var(--ut-red-800, var(--ut-red-800));
}

/* ================================================================== */
/*  Section 2 — Title + Description                                    */
/* ================================================================== */

/* 8px gap between dealtype and title only (parent has 24px gap) */
.ut-deal-top-summary__dealtype + .ut-deal-top-summary__title {
    margin-top: -16px; /* var(--ut-spacing-lg) gap - var(--ut-spacing-md) = var(--ut-spacing-sm); originally !important to beat style.css's `.post-content h2` margin-top — dropped post-nuke */
}

/* 8px gap between title and description (parent has 24px gap) */
.ut-deal-top-summary__title + .ut-deal-top-summary__description {
    margin-top: -16px; /* var(--ut-spacing-lg) gap - var(--ut-spacing-md) = var(--ut-spacing-sm); originally !important to beat style.css's `.post-content` margin — dropped post-nuke */
}

/* Title — every declaration was originally !important to beat
   style.css's `.post-content h2` typography (margin/padding/font/color/border).
   style.css deleted in Phase 4 → dropped post-nuke. */
.ut-deal-top-summary__title {
    margin: 0;
    padding: 0;
    font-family: var(--ut-font-family);
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    color: var(--ut-blue-900);
    border: none;
}

.ut-deal-top-summary__description {
    margin: 0; /* originally !important to beat style.css's `.post-content p` margin — dropped post-nuke */
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm);  /* 14px — updated from M to S per feedback */
    font-weight: 400;
    line-height: var(--ut-line-height-md);  /* 22px — matches 14px body text */
    color: var(--text-primary-color);
    max-height: 66px;  /* 3 lines × 22px */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ================================================================== */
/*  Section 2b — Deal Type Label (above title)                         */
/* ================================================================== */

.ut-deal-top-summary__dealtype {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm);
    font-weight: 500;
    line-height: var(--ut-line-height-sm);
    text-transform: uppercase;
    color: var(--text-secondary-color);
    margin: 0; /* originally !important to beat style.css's `.post-content p` margin — dropped post-nuke */
}

/* ================================================================== */
/*  Section 3 — Author + Verification Row                              */
/* ================================================================== */

/* Outer container: avatar + column (name+date row, verified row) */
.ut-deal-top-summary__author-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ut-spacing-md);
}

/* Column: name+date row stacked above verified row */
.ut-deal-top-summary__author-column {
    display: flex;
    flex-direction: column;
    gap: var(--ut-spacing-xs);
}

.ut-deal-top-summary__author-row {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: var(--ut-spacing-xs);
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm); /* 14px */
    line-height: var(--ut-line-height-md); /* 22px — Figma Body/S */
    color: var(--text-secondary-color);
}

/* Author avatar — width/height/border-radius/object-fit/margin/max-width
   were originally !important to beat style.css's `.post-content img` rules
   (width: 100%, default margin). Dropped post-nuke. */
.ut-deal-top-summary__author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 62.5px;
    object-fit: cover;
    flex-shrink: 0;
    margin: 0;
    max-width: 40px;
}

/* Default profile pic = the UT "u" logo on a navy circle (Figma 1928-7492), used when the author
   has no uploaded avatar. The favicon mark is orange-on-transparent, so tint the circle navy and
   letterbox the mark (contain + padding) instead of cropping it (cover). */
.ut-deal-top-summary__author-avatar--default {
    background: var(--ut-blue-900, #050745);
    object-fit: contain;
    padding: 7px;
    box-sizing: border-box;
    /* Show the "u" mark intact at its original size — the base avatar's overflow:clip + round
       radius was shaving the swash/tail against the circle edge. overflow:visible lets the
       letterboxed mark render fully while the navy background stays round. */
    overflow: visible;
}


.ut-deal-top-summary__author-by,
.ut-deal-top-summary__author-date {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm); /* 14px */
    font-weight: 400;
    line-height: var(--ut-line-height-md); /* 22px */
    color: var(--text-secondary-color);
}

.ut-deal-top-summary__author-sep {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm);
    font-weight: 400;
    line-height: var(--ut-line-height-md);
    color: var(--text-secondary-color);
}

/* Figma: dot separator is a 4px circle, not a text middot */
.ut-deal-top-summary__author-sep::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary-color);
    vertical-align: middle;
}

.ut-deal-top-summary__author-name {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm); /* 14px */
    font-weight: 400; /* Figma: 400, not 600 */
    line-height: var(--ut-line-height-md); /* 22px */
    color: var(--text-primary-color);
    /* a11y: was text-decoration:none — fails Lighthouse `link-in-text-block`
       because the link color matches surrounding "Von" + date text, so the
       link is indistinguishable without underline (WCAG 1.4.1 Use of Color).
       Subtle dotted underline keeps the design clean while marking the link. */
    text-decoration: underline dotted var(--text-secondary-color);
    text-underline-offset: 2px;
}

.ut-deal-top-summary__author-name:hover,
.ut-deal-top-summary__author-name:focus-visible {
    text-decoration: underline solid currentColor;
}

.ut-deal-top-summary__verified {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px; /* Figma: 10px gap between check icon and text */
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-sm); /* 14px */
    font-weight: 400;
    line-height: var(--ut-line-height-md); /* 22px */
    color: var(--text-secondary-color);
}

.ut-deal-top-summary__verified svg {
    flex-shrink: 0;
}

/* ================================================================== */
/*  Section 4 — Price + CTA Row                                        */
/* ================================================================== */

.ut-deal-top-summary__price-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 64px;
}

.ut-deal-top-summary__price {
    font-family: var(--ut-font-family);
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
    color: var(--text-primary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

/* CTA button — ORANGE with dark text per Figma. color/text-decoration
   were originally !important to beat style.css's `.entry .post-content a`
   link color and `a:hover { underline }` defaults. Dropped post-nuke. */
.ut-deal-top-summary__cta,
.ut-deal-top-summary__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 48px;
    padding: var(--ut-spacing-sm) var(--ut-spacing-xl);
    border-radius: var(--ut-radius-pill);
    background: var(--ut-orange-500);
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-md);
    font-weight: 600;
    line-height: var(--ut-line-height-lg);
    color: var(--ut-blue-900);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 0;
}

.ut-deal-top-summary__cta:hover,
.ut-deal-top-summary__cta:focus {
    background: var(--color-secondary-hover);
    color: var(--ut-blue-900);
    text-decoration: none;
    opacity: 1;
}

.ut-deal-top-summary__cta:focus-visible {
    outline: 2px solid var(--ut-orange-500);
    outline-offset: 2px;
}

/* Below 380px the price + CTA are too cramped side by side (nowrap, 64px gap). Stack them so the
   "Zum Angebot" button drops to its own full-width line beneath the price. */
@media (max-width: 380px) {
    .ut-deal-top-summary__price-row {
        flex-flow: column nowrap;
        align-items: flex-start;
        gap: var(--ut-spacing-sm);
    }
    /* Keep the price LEFT-aligned when stacked. The <=1023px rule sets the row `align-items:center`;
       an item-level `align-self` beats that regardless of source order. */
    .ut-deal-top-summary__price {
        align-self: flex-start;
    }
    .ut-deal-top-summary__cta {
        flex: none;
        width: 100%;
    }
}

/* ================================================================== */
/*  Section 5 — Details Bar                                            */
/* ================================================================== */

.ut-deal-top-summary__details-bar {
    display: flex;
    flex-flow: row wrap;
    gap: 40px;
    background: var(--background-accent-muted);
    border-radius: var(--ut-radius-lg);
    padding: var(--ut-spacing-md);
    box-sizing: border-box;
}

.ut-deal-top-summary__details-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ut-deal-top-summary__details-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ut-deal-top-summary__details-icon svg {
    width: 24px;
    height: 24px;
}

.ut-deal-top-summary__details-text {
    display: flex;
    flex-direction: column;
    gap: var(--ut-spacing-xs);
}

.ut-deal-top-summary__details-value {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-md);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary-color);
}

.ut-deal-top-summary__details-label {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-md);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary-color);
}

/* ================================================================== */
/*  In-summary ad — between description and details bar (mobile only)  */
/*  Figma: "Tiny AD" with border-top + border-bottom separators        */
/* ================================================================== */

.ut-deal-top-summary__ad {
    display: none; /* hidden on desktop — ad shows in sidebar instead */
}

/* ================================================================== */
/*  Section 6 — Gallery (right column on desktop)                      */
/*  Figma: Gallery_Deal_Pages component, rounded-24, p-16 for arrows  */
/* ================================================================== */

.ut-deal-top-summary__gallery {
    flex: 1;
    height: 330.75px;
    border-radius: var(--ut-radius-2xl);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.ut-deal-top-summary__slide {
    position: absolute;
    inset: 0;
    display: none;
}

.ut-deal-top-summary__slide--active {
    display: block;
}

/* Gallery / slide img — all declarations were originally !important to
   beat style.css's `.post-content img { width: 100% }` and other img rules.
   Dropped post-nuke. */
.ut-deal-top-summary__slide img,
.ut-deal-top-summary__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
    max-width: 100%;
}

/* Gallery arrows (Figma: white 70% circle with dark chevron, 32px) */
.ut-deal-top-summary__gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.ut-deal-top-summary__gallery-arrow:hover {
    background: rgb(255, 255, 255, 0.9);
}

.ut-deal-top-summary__gallery-arrow--prev {
    left: var(--ut-spacing-md);
}

.ut-deal-top-summary__gallery-arrow--next {
    right: var(--ut-spacing-md);
}

.ut-deal-top-summary__gallery-arrow svg {
    width: 24px;
    height: 24px;
}

/* Gallery dots (Figma: white dots at bottom center) */
.ut-deal-top-summary__gallery-dots {
    position: absolute;
    bottom: var(--ut-spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--ut-spacing-sm);
    z-index: 2;
}

.ut-deal-top-summary__gallery-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s;
}

.ut-deal-top-summary__gallery-dot--active {
    background: var(--ut-orange-500); /* Figma: active dot is orange */
}

/* Grab cursor for carousel drag */
.ut-deal-top-summary__gallery--carousel {
    cursor: grab;
    user-select: none;
}

/* Hide arrows/dots when only 1 image (V2 old deals) */
.ut-deal-top-summary__gallery:not(.ut-deal-top-summary__gallery--carousel) .ut-deal-top-summary__gallery-arrow,
.ut-deal-top-summary__gallery:not(.ut-deal-top-summary__gallery--carousel) .ut-deal-top-summary__gallery-dots {
    display: none;
}

/* ================================================================== */
/*  Tablet layout (801px–1280px) — stack image top, content below      */
/* ================================================================== */

@media (min-width: 801px) and (max-width: 1280px) {
    /* .ut-deal-top-summary {
        background: var(--background-primary);
    }

    .ut-deal-top-summary__card {
        gap: var(--ut-spacing-md);
        padding: var(--ut-spacing-lg);
        border-radius: var(--ut-radius-2xl);
        background: var(--background-secondary);
        box-shadow: 0 1px 4px rgba(5, 7, 69, 0.06);
    }

    .ut-deal-top-summary__row {
        flex-direction: column-reverse;
        gap: var(--ut-spacing-md);
    }

    .ut-deal-top-summary__left {
        padding: 0;
        gap: var(--ut-spacing-md);
    } */

    /* Gallery: full width within card, rounded, aspect-ratio scales */
    /* .ut-deal-top-summary__gallery {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 358 / 201.375;
        border-radius: var(--ut-radius-2xl); 
        align-self: stretch;
        flex: none;
    }

    .ut-deal-top-summary__gallery img {
        border-radius: var(--ut-radius-2xl) !important;
    } */

    /* Title: 24px / 28px on tablet */
    /* .ut-deal-top-summary__title {
        font-size: 24px !important;
        line-height: 28px !important;
    } */

    /* Dealtype → title: tighter gap */
    /* .ut-deal-top-summary__dealtype + .ut-deal-top-summary__title {
        margin-top: -8px !important;
    } */

    /* Title → description: tighter gap */
    /* .ut-deal-top-summary__title + .ut-deal-top-summary__description {
        margin-top: -8px !important;
    } */

    /* Description: 2 lines, secondary color on tablet */
    /* .ut-deal-top-summary__description {
        -webkit-line-clamp: 2;
        max-height: 44px;
        color: var(--text-secondary-color);
    } */

    /* Price row: price left, CTA right — no stretch */
    /* .ut-deal-top-summary__price-row {
        flex-wrap: nowrap;
        gap: var(--ut-spacing-lg);
        justify-content: space-between;
    }

    .ut-deal-top-summary__cta {
        flex: none;
        min-width: auto;
        padding: var(--ut-spacing-sm) var(--ut-spacing-xl);
    } */

    /* Details bar: vertical on tablet */
    /* .ut-deal-top-summary__details-bar {
        flex-direction: column;
        gap: var(--ut-spacing-md);
        padding: var(--ut-spacing-md);
    }

    .ut-deal-top-summary__details-item {
        gap: var(--ut-spacing-md);
    }

    .ut-deal-top-summary__details-text {
        gap: 2px;
    }

    .ut-deal-top-summary__details-value,
    .ut-deal-top-summary__details-label {
        font-size: var(--ut-font-size-sm);
    } */

    /* Price row: stack if needed */
    /* .ut-deal-top-summary__price-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ut-deal-top-summary__cta {
        min-width: 160px;
    } */

    /* In-summary ad: show on tablet too (sidebar ad hidden) */
    /* .ut-deal-top-summary__ad {
        display: block;
        width: 100%;
        border-top: 1px solid var(--border-default-secondary, var(--ut-blue-30));
        border-bottom: 1px solid var(--border-default-secondary, var(--ut-blue-30));
        padding: var(--ut-spacing-md) 0;
        margin: var(--ut-spacing-sm) 0;
    } */
}

/* ================================================================== */
/*  Mobile layout (max-width: 1023px) — stack image top, content below */
/* ================================================================== */

@media (max-width: 1023px) {
    .ut-deal-top-summary {
        background: var(--background-secondary);
    }

    .ut-deal-top-summary__card {
        gap: var(--ut-spacing-sm); /* 8px — Figma grid gap */
        padding: 0 var(--ut-spacing-md);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Mobile: flatten to single column, reorder per Figma 390w */
    .ut-deal-top-summary__row {
        flex-direction: column;
        gap: var(--ut-spacing-sm); /* 8px between all items */
    }

    /* display:contents lets __left's children participate in __row's flex ordering */
    .ut-deal-top-summary__left {
        display: contents;
    }

    /* Figma mobile order: DealType(0) → Title(1) → ActionBar(2) → Gallery(3) → Author(4) → Price(5) → Desc(6).
       Each item's `order` is set inline below alongside its other mobile rules. */

    /* Mobile action bar: hide text labels, show only icons + counts */
    .ut-deal-top-summary__action-label {
        display: none;
    }

    /* Mobile action bar: full width */
    .ut-deal-top-summary__action-bar {
        order: 2;
        width: 100%;
    }

    /* Fix: action bar right group — tighten gap between heart and share */
    .ut-deal-top-summary__action-bar-right {
        gap: var(--ut-spacing-md); /* 16px — matches Figma */
    }

    /* Gallery: full width within padding, rounded corners, aspect ratio from Figma */
    .ut-deal-top-summary__gallery {
        order: 3;
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 358 / 201.375; /* Figma mobile ratio */
        border-radius: 14.612px;
        flex: none;
    }

    /* Mobile gallery img — originally !important to mirror desktop gallery
       img specificity fight. Dropped post-nuke. */
    .ut-deal-top-summary__gallery img {
        border-radius: 14.612px;
    }

    /* Title: 24px / 28px on mobile — originally !important to beat
       style.css's mobile `.post-content h2` typography. Dropped post-nuke. */
    .ut-deal-top-summary__title {
        order: 1;
        font-size: 24px;
        line-height: 28px;
    }

    /* Dealtype: 16px gap from breadcrumb above (display:contents breaks
       card padding). Originally !important to beat style.css mobile
       margins. Dropped post-nuke. */
    .ut-deal-top-summary__dealtype {
        order: 0;
        margin-top: var(--ut-spacing-md);
    }

    /* Reset the desktop negative-margin tricks on mobile — items use row gap.
       Originally !important to beat style.css mobile rules. Dropped post-nuke. */
    .ut-deal-top-summary__dealtype + .ut-deal-top-summary__title,
    .ut-deal-top-summary__title + .ut-deal-top-summary__description {
        margin-top: 0;
    }

    /* Description: 2 lines on mobile (Figma: h=44px = 2 × 22px), secondary color */
    .ut-deal-top-summary__description {
        order: 6;
        -webkit-line-clamp: 2;
        max-height: 44px; /* 2 × 22px */
        color: var(--text-secondary-color);
        width: 100%;
    }

    /* Author block: 8px gap from gallery (comes from row gap, no overlap) */
    .ut-deal-top-summary__author-block {
        order: 4;
        margin-top: 0;
    }

    /* Price row: price left, CTA right — single line (Figma mobile) */
    .ut-deal-top-summary__price-row {
        order: 5;
        flex-wrap: nowrap;
        gap: var(--ut-spacing-md);
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    /* Price: 22px/26px on mobile (Figma H2/Mobile) */
    .ut-deal-top-summary__price {
        font-size: 22px;
        line-height: 26px;
    }

    .ut-deal-top-summary__cta {
        flex: none;
        min-width: auto;
        padding: var(--ut-spacing-sm) var(--ut-spacing-xl);
        font-size: var(--ut-font-size-md);
        line-height: var(--ut-line-height-lg);
    }

    /* Details bar: vertical on mobile */
    .ut-deal-top-summary__details-bar {
        flex-direction: column;
        gap: var(--ut-spacing-md);
        padding: var(--ut-spacing-md);
    }

    .ut-deal-top-summary__details-item {
        gap: var(--ut-spacing-md);
    }

    .ut-deal-top-summary__details-text {
        gap: 2px;
    }

    .ut-deal-top-summary__details-value,
    .ut-deal-top-summary__details-label {
        font-size: var(--ut-font-size-sm);
    }

    /* Breadcrumb: margin-bottom 0 — gap to card comes from dealtype margin-top */
    .ut-deal-breadcrumb {
        margin-bottom: 0;
    }

    /* In-summary ad: show on mobile with border separators (Figma: "Tiny AD")
       16px gap from content to border: 8px flex gap + 8px margin = 16px */
    .ut-deal-top-summary__ad {
        display: block;
        width: 100%;
        border-top: 1px solid var(--border-default-secondary, var(--ut-blue-30));
        border-bottom: 1px solid var(--border-default-secondary, var(--ut-blue-30));
        padding: var(--ut-spacing-md) 0;
        margin: var(--ut-spacing-sm) 0; /* 8px + 8px flex gap = 16px total */
    }

    /* !important: GT-525 — load-bearing per inventory; historically
       `body.ut-deal-legacy .ut-deal-page-wrapper` rules in ut_deals/
       style.css would beat this by class-specificity and reintroduce a
       margin-bottom on mobile legacy deals. style.css is now deleted
       (Phase 4) but the !important stays as defensive belt-and-braces
       for any future call-site that might reintroduce a higher-spec
       wrapper rule — the inventory explicitly preserves GT-525 flags. */
    .ut-deal-page-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ================================================================== */
/*  Tablet layout (801px–1023px) — deltas over the mobile block above  */
/*  Figma tablet: gallery top, labels shown, 32px content inset,       */
/*  details-bar stays 2-column. Card: square + no box. No ad shown.    */
/* ================================================================== */

@media (min-width: 801px) and (max-width: 1023px) {
    /* Show action-bar labels (mobile hides them) */
    .ut-deal-top-summary__action-label {
        display: inline;
    }

    /* Content inset 32px on tablet vs 16px on mobile */
    .ut-deal-top-summary__card {
        padding: 0 var(--ut-spacing-xl);
    }

    /* Figma tablet order (top → bottom):
       1 gallery(-1)  2 action-bar(1)  3 dealtype(2)  4 title(3)
       5 description(4)  6 author(5)  7 price(6)  8 details-bar(7)
       Mobile order unchanged: dealtype(0) title(1) action-bar(2)
       gallery(3) author(4) price(5) description(6) */

    /* 1 — Gallery: top (mobile placed it at 3) */
    .ut-deal-top-summary__gallery {
        order: -1;
        max-height: 360px;
    }

    /* 2 — Action bar: below gallery */
    .ut-deal-top-summary__action-bar {
        order: 1;
    }

    /* 3 — Category badge (dealtype) */
    .ut-deal-top-summary__dealtype {
        order: 2;
    }

    /* 4 — Title */
    .ut-deal-top-summary__title {
        order: 3;
    }

    /* 5 — Description (mobile had it last at 6) */
    .ut-deal-top-summary__description {
        order: 4;
    }

    /* 6 — Author block */
    .ut-deal-top-summary__author-block {
        order: 5;
    }

    /* 7 — Price + CTA */
    .ut-deal-top-summary__price-row {
        order: 6;
    }

    /* 8 — Details bar: last + revert mobile single-column to 2-column */
    .ut-deal-top-summary__details-bar {
        order: 7;
        flex-direction: row;
        gap: 40px;
    }

    .ut-deal-top-summary__details-item {
        gap: 12px;
    }

    .ut-deal-top-summary__details-text {
        gap: var(--ut-spacing-xs);
    }

    .ut-deal-top-summary__details-value,
    .ut-deal-top-summary__details-label {
        font-size: var(--ut-font-size-md);
    }

    /* In-summary ad: hide on tablet (only show on mobile <800) */
    .ut-deal-top-summary__ad {
        display: none;
    }
}

/* ================================================================== */
/*  Deal Sticky Bottom Price Bar                                        */
/* ================================================================== */

.ut-deal-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--background-default-muted, var(--ut-gray-50));
    border-top: 1px solid var(--border-default-secondary, var(--ut-blue-30));
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.ut-deal-sticky-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ut-deal-sticky-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--ut-spacing-xl);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--ut-spacing-md) 20px;
    box-sizing: border-box;
}

/* Info section: title + separator + date */
.ut-deal-sticky-bar__info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ut-deal-sticky-bar__title {
    flex: 1;
    min-width: 0;
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-md);
    font-weight: 500;
    line-height: var(--ut-line-height-lg);
    color: var(--ut-blue-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ut-deal-sticky-bar__separator {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--ut-blue-900);
    opacity: 0.3;
    flex-shrink: 0;
}

.ut-deal-sticky-bar__date {
    font-family: var(--ut-font-family);
    font-size: var(--ut-font-size-md);
    font-weight: 400;
    line-height: var(--ut-line-height-lg);
    color: var(--ut-blue-900);
    white-space: nowrap;
}

/* Actions section: price + CTA */
.ut-deal-sticky-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--ut-spacing-xl);
    flex-shrink: 0;
}

/* Scroll-up button — floating above the sticky bar, right-aligned to content */
.ut-deal-sticky-bar__scroll-up {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--background-accent-default, var(--background-accent-default));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ut-blue-900);
    position: absolute;
    bottom: calc(100% + 16px);
    right: calc(50% - 640px + 20px); /* align to right edge of 1280px content + padding */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.ut-deal-sticky-bar__scroll-up.is-scrolling-up {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ut-deal-sticky-bar__scroll-up:hover {
    background: var(--background-hover, #f0f2f8);
}

.ut-deal-sticky-bar__price {
    display: flex;
    align-items: baseline;
    gap: var(--ut-spacing-xs);
    flex-wrap: wrap;
}

.ut-deal-sticky-bar__price-value {
    font-family: var(--ut-font-family);
    font-size: 24px;
    font-weight: 700;
    color: var(--ut-blue-900);
    line-height: 1.1;
}

/* Sticky bar CTA — ORANGE with dark text per Figma. color/text-decoration
   were originally !important to beat style.css's `.entry .post-content a`
   link color and `a:hover` underline. Dropped post-nuke. */
.ut-deal-sticky-bar__cta,
.ut-deal-sticky-bar__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: var(--ut-spacing-sm) var(--ut-spacing-xl);
    border-radius: var(--ut-radius-pill);
    background: var(--ut-orange-500);
    font-family: var(--ut-font-family);
    font-weight: 600;
    font-size: var(--ut-font-size-md);
    line-height: var(--ut-line-height-lg);
    color: var(--ut-blue-900);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
    transition: background 0.2s;
    flex-shrink: 0;
    cursor: pointer;
}

.ut-deal-sticky-bar__cta:hover,
.ut-deal-sticky-bar__cta:focus {
    background: var(--color-secondary-hover);
    color: var(--ut-blue-900);
    text-decoration: none;
    opacity: 1;
}

.ut-deal-sticky-bar__cta:focus-visible {
    outline: 2px solid var(--ut-orange-500);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    .ut-deal-sticky-bar__scroll-up {
        right: 20px;
    }
}

@media (max-width: 800px) {
    .ut-deal-sticky-bar__info {
        display: none;
    }

    .ut-deal-sticky-bar__inner {
        padding: var(--ut-spacing-md);
        justify-content: flex-end;
    }

    .ut-deal-sticky-bar__price-value {
        font-size: 22px;
        font-weight: 700;
        line-height: 26px;
    }

    .ut-deal-sticky-bar__scroll-up {
        right: 16px;
    }
}

/* ================================================================== */
/*  ut_deals theme compatibility overrides                              */
/*  The summary lived inside .post-content whose styles bled in via    */
/*  style.css. style.css was deleted in Phase 4 so every !important in */
/*  this section has been dropped post-nuke — the higher-specificity   */
/*  `.post-content X` and `.entry .post-content X` selectors still     */
/*  win against the base rules above by specificity alone.             */
/* ================================================================== */

/* Reset font/color inheritance */
.post-content .ut-deal-top-summary {
    font: inherit;
    color: var(--ut-blue-900);
}

/* .post-content h1/h2 resets — restore design values */
.post-content .ut-deal-top-summary__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    margin: 0;
    color: var(--ut-blue-900);
    font-family: var(--ut-font-family);
    padding: 0;
    border: none;
}

/* .post-content p margin resets */
.post-content .ut-deal-top-summary__description {
    margin: 0;
}

/* .post-content img resets — scoped to hero image only */
.post-content .ut-deal-top-summary__gallery img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

/* .post-content img reset for author avatar */
.post-content .ut-deal-top-summary__author-avatar {
    width: 40px;
    height: 40px;
    max-width: 40px;
    margin: 0;
    border-radius: 62.5px;
}

/* Ensure CTA link colour/weight is not overridden by .entry .post-content a (specificity 0,2,1) */
.entry .post-content .ut-deal-top-summary__cta,
.entry .post-content .ut-deal-top-summary__cta:visited,
.entry .post-content .ut-deal-top-summary__cta:hover,
.entry .post-content .ut-deal-top-summary__cta:focus {
    color: var(--ut-blue-900);
    font-weight: 600;
    text-decoration: none;
    background: var(--ut-orange-500);
}

/* Action buttons — link override (theme specificity neutraliser) */
.entry .post-content .ut-deal-top-summary__action-btn,
.entry .post-content .ut-deal-top-summary__action-btn:visited {
    color: var(--button-default-primary);
    text-decoration: none;
}
.entry .post-content .ut-deal-top-summary__action-btn:hover {
    color: var(--button-link-default);
    text-decoration: underline;
}
.entry .post-content .ut-deal-top-summary__action-btn:active {
    color: var(--button-default-primary);
    text-decoration: underline;
}
/* Saved heart in theme context — text stays default, only icon is red */
.entry .post-content .ut-deal-top-summary__action-btn.utfav-card-bookmark.is-saved {
    color: var(--button-default-primary);
    text-decoration: none;
}
.entry .post-content .ut-deal-top-summary__action-btn.utfav-card-bookmark.is-saved:hover {
    color: var(--button-link-default);
    text-decoration: underline;
}

/* ================================================================== */
/*  Mobile: deal page layout reset                                      */
/*  The ut_deals mobile layout uses a negative top margin on           */
/*  .entry.entry-single to overlap .post-page-thumbnail.               */
/*  On deal pages the thumbnail is suppressed, so we reset the margin. */
/* ================================================================== */

/* @media (max-width: 1280px) {
    .has-deal-top-summary #content .entry.entry-single {
        margin-top: 10px;
    }
} */

/* Undo the 10px top margin for mobile — no gap below summary at <800 */
@media (max-width: 1280px) {
    .has-deal-top-summary #content .entry.entry-single {
        margin-top: 0;
    }
}

/* ================================================================== */
/*  Hide sidebar on deal pages — deal page is full-width per Figma     */
/*  Originally !important to beat style.css's `.sidebar { display:    */
/*  block }`, `#content { width: 65% }`, and body background. Dropped */
/*  post-nuke (style.css deleted in Phase 4).                          */
/* ================================================================== */

.has-deal-top-summary .desktop-sidebar-container,
.has-deal-top-summary .mobile-sidebar-container {
    display: none;
}

/* Make content full-width when sidebar is hidden */
.has-deal-top-summary #content {
    width: 100%;
    max-width: 100%;
    float: none;
}

/* Page background — accent muted so white card stands out (Figma: Background/Accent/Muted #f7f9fd) */
body.has-deal-top-summary {
    background-color: var(--background-accent-muted);
}

/* Extra footer padding when deal sticky bar is visible — prevents
   legal links from being hidden behind the fixed bottom bar. */
body.has-deal-top-summary ut-footer {
    --ut-footer-bottom-padding: 55px; /* 64px base + 81px sticky bar */
}