/* ==========================================================================
   Third-party app overrides — PDP
   Restyles apps that render into the page DOM (not iframed) so they read as
   part of the theme rather than bolted on.

   TARGETING RULE: these apps ship two kinds of class name. Stable, semantic
   ones (sales-bundle-root, bundle-product-title, bundle-button) and
   build-hashed ones (_savings_13rc1_8, _option_dxrcz_34, _block_13rc1_71).
   Only ever target the stable names — the hashes regenerate whenever the app
   updates and any rule pinned to them silently stops applying.

   !important is used where the apps ship more specific rules of their own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Complete the look  (sales bundle app)
   -------------------------------------------------------------------------- */
.sales-bundle-root {
    --b-ink: #15140F;
    --b-soft: #4E4A40;
    --b-line: #DDD7C7;
    --b-accent: #675A88;
    --b-ground: #F1EEE6;
}

/* Heading matched to the PDP's display type. The app's own text still supplies
   the words, so this survives a copy change in the app settings. */
.sales-bundle-root .bundle-product-title {
    font-family: var(--title-font), "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--b-ink);
    margin-bottom: 20px;
}

/* Product tiles: warm ground instead of the app's cool blue-grey.

   No corner radius here. The app draws the tile's 1px outline as an absolutely
   positioned ::after at inset:0 with its own border-radius:0, so rounding the
   container (plus overflow:hidden) clipped that overlay and left the corners
   visibly cut. The outline is removed below instead. */
.sales-bundle-root .plugin-bundle-product-image-container {
    background: var(--b-ground) !important;
}

/* The tile outline itself. */
.sales-bundle-root .plugin-bundle-product-image-container::after {
    display: none !important;
}

.sales-bundle-root .bundle-product-item-name {
    font-weight: 500;
    color: var(--b-ink);
    line-height: 1.35;
}

.sales-bundle-root .bundle-product-item-price {
    color: var(--b-soft);
}

/* Savings: the app ships a fire-engine red (rgb(227,38,25)) that appears
   nowhere else on the site. */
.sales-bundle-root .bundle-product-subtotal-save,
.sales-bundle-root .bundle-product-subtotal-save * {
    color: var(--b-accent) !important;
    font-weight: 600;
}

.sales-bundle-root .bundle-product-subtotal-original-amount {
    color: var(--b-soft);
}

/* Summary panel: flat grey box -> the theme's card treatment. */
.sales-bundle-root .bundle-product-subtotal {
    background: var(--b-ground) !important;
    border: 1px solid var(--b-line);
    border-radius: 12px;
    padding: 20px;
}

.sales-bundle-root .bundle-product-subtotal-amount {
    font-weight: 600;
    color: var(--b-ink);
}

.sales-bundle-root .bundle-button {
    border-radius: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600 !important;
}

/* The button carries its own inset ::after ring; without this it keeps the
   app's 6px radius inside a 10px button and shows the same clipped corners. */
.sales-bundle-root .bundle-button::after {
    border-radius: 9px !important;
}

/* The variant picker is a custom div, not a native select. */
.sales-bundle-root .bundle-select {
    border-radius: 8px;
    border-color: var(--b-line) !important;
}

/* With only two products the app leaves ~275px of dead space between the items
   and the summary panel, because the panel is pushed right inside a full-width
   flex wrapper. That wrapper's class is build-hashed, so the width is capped on
   the root instead -- the one stable handle that affects both children. */
@media (min-width: 960px) {
    .sales-bundle-root {
        max-width: 780px;
    }
}

/* --------------------------------------------------------------------------
   Reviews  (product comment app)

   The app renders THREE different structures depending on viewport and state:
     1. masonry   -- .waterCommentWrap inside .water-col columns
     2. wide list -- .commentItem (meta column + .infoWrap content column)
     3. narrow    -- unnamed row divs, no .commentItem and no .infoWrap
   So rules here target the classes common to all three (.userInfo, .date,
   .content-info, the two title classes) rather than any one layout's wrapper.
   Anything layout-specific is scoped under the wrapper that only exists there.
   -------------------------------------------------------------------------- */
.plugin-product-comment {
    --r-ink: #15140F;
    --r-soft: #4E4A40;
    --r-line: #DDD7C7;
    --r-accent: #675A88;
    --r-ground: #F1EEE6;
}

/* Rhythm. .CommentAndHelpfulBtns-box closes every review in all three
   structures and is full width in each, so it carries the hairline. */
.plugin-product-comment .plugin-product-comment-CommentAndHelpfulBtns-box {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--r-line);
    margin-bottom: 26px;
}

/* Titles. Two class names for the same thing across layouts. */
.plugin-product-comment .plugin-product-comment-content-title,
.plugin-product-comment .plugin-product-comment-comment__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    /* the app force-capitalises every word ("Wear These A Lot"); this restores
       the reviewer's own casing */
    text-transform: none !important;
    line-height: 1.3;
    color: var(--r-ink);
    margin-bottom: 8px;
}

/* Body copy. The app inherits 11.31px from the theme reset, which is too small
   to read comfortably at these line lengths; the measure is capped too. */
.plugin-product-comment .plugin-product-comment-content-info,
.plugin-product-comment .plugin-product-comment-content {
    font-size: var(--fs-base) !important;
    line-height: 1.6;
    color: var(--r-soft);
    max-width: 68ch;
}

/* Meta: name and date become quiet uppercase micro-labels. */
.plugin-product-comment .plugin-product-comment-nickname,
.plugin-product-comment .plugin-product-comment-nicknameskuAttributes,
.plugin-product-comment .plugin-product-comment-nickname_skuAttributes,
.plugin-product-comment .plugin-product-comment-date {
    font-size: var(--fs-micro) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(78, 74, 64, 0.8) !important;
}

.plugin-product-comment .plugin-product-comment-userInfo {
    margin-bottom: 10px;
}

/* "Qualified" chip: black pill -> brand accent, sized like a label. */
.plugin-product-comment .qualified {
    background: var(--r-accent) !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 9px !important;
}

/* Tabs as display type -- the app already tags them .title-font. */
.plugin-product-comment .plugin-product-comment-tab-list-item {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--r-soft);
}

.plugin-product-comment .plugin-product-comment-tab-list-item-active {
    color: var(--r-ink);
}

/* Filter controls. */
.plugin-product-comment .plugin-product-comment-select-buttons-item-button {
    border-radius: 999px !important;
    border-color: var(--r-line) !important;
    font-size: var(--fs-micro) !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Masonry mode only -- there .infoWrap really is the card. In the wide list
   .infoWrap is the full-width content column, so this must stay scoped or it
   draws a box around every review body. */
.plugin-product-comment .plugin-product-comment-waterCommentWrap .plugin-product-comment-infoWrap {
    border: 1px solid var(--r-line) !important;
    border-radius: 12px;
    padding: 18px 16px 14px;
    background: #FFF;
}

/* The floating white star pill the masonry layout centres above each card. */
.plugin-product-comment .plugin-product-comment-waterCommentWrap .plugin-product-comment-rate {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

/* Wide list only: the meta column is 300px, which pushes the review body a
   long way right and leaves the capped measure floating. */
@media (min-width: 960px) {
    .plugin-product-comment .plugin-product-comment-commentItem .plugin-product-comment-userInfo {
        flex: 0 0 200px !important;
        width: 200px !important;
    }
}

/* The app renders the reviews full-bleed (10px -> 1270px at a 1280 viewport)
   while the rest of the PDP sits inside .product-detail-page, which is
   max-width 1024px with --page-padding either side. Mirror those exact values
   so the reviews share the page's left and right bound.

   Desktop only: under 960px .page-width drops to a 5px gutter and the reviews
   already fill it correctly. */
@media (min-width: 960px) {
    .plugin-product-comment {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Complete the look — mobile
   Measured at 375px before these rules: product names 14px, prices 16px,
   struck prices 12.8px, summary panel 180px tall on 20px padding, and the
   add-to-cart button 45px on 16px padding. All of it ran large against an
   11.3px body, so the block shouted louder than the product it sits under.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 959px) {
    /* The app ships font-size on this at equal specificity WITH !important, and
       its stylesheet loads after this one, so it wins on source order. Four
       class levels settles it. line-height needed none — only the size is
       contested. */
    .sales-bundle-root .bundle-product-items .bundle-product-item .bundle-product-item-name {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    /* Prices come back in line with the rest of the mobile body copy. */
    .sales-bundle-root .bundle-product-item-price {
        font-size: var(--fs-base) !important;
    }

    .sales-bundle-root .bundle-product-item-promotional-price {
        font-size: var(--fs-small) !important;
    }

    /* Breathing room between the product tiles and the summary panel. */
    .sales-bundle-root .bundle-product-items {
        margin-bottom: 18px;
    }

    /* Panel and button both tighten up: 20px -> 14px and 16px -> 11px. */
    .sales-bundle-root .bundle-product-subtotal {
        padding: 14px !important;
        font-size: var(--fs-base) !important;
    }

    .sales-bundle-root .bundle-product-subtotal-save {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .sales-bundle-root .bundle-product-subtotal-amount,
    .sales-bundle-root .bundle-product-subtotal-original-amount {
        font-size: var(--fs-base) !important;
    }

    .sales-bundle-root .bundle-button {
        padding: 11px 16px !important;
        margin-top: 12px !important;
        font-size: 12.5px !important;
    }
}