/* Tobor Product Hero Widget — base defaults match Figma node 1768:23886 exactly.
   Elementor Style tab controls generate inline overrides on top of these. */

.tobor-phero {
    background-color: #ffffff;
    padding: 32px 96px 64px 96px;
}

.tobor-phero__inner {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
}

/* ---------- Gallery ---------- */

.tobor-phero__gallery {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Theme WooCommerce gallery (custom.js animations + lightbox), restyled to
   Figma: thumbnails horizontal at the BOTTOM, exact sizes/colors. */
.tobor-phero-gallery.woocommerce-product-gallery {
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
}

.tobor-phero-gallery .woocommerce-product-gallery__wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
}

.tobor-phero-gallery .woocommerce-product-gallery__image > a > img {
    width: 100%;
    height: 100%;
    max-height: none !important;
    object-fit: contain;
    border-radius: 16px;
}

/* Figma arrows: 50px circles, white 80%, #a3a3a3 border, always visible. */
.tobor-phero-gallery .gallery-nav {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #a3a3a3;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    color: #525252;
    opacity: 1;
    backdrop-filter: none;
}

.tobor-phero-gallery .woocommerce-product-thumbnails-wrap {
    flex-direction: row;
    width: 100%;
    gap: 0;
}

.tobor-phero-gallery .thumb-nav {
    display: none;
}

.tobor-phero-gallery .woocommerce-product-thumbnails {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.tobor-phero-gallery .woocommerce-product-thumbnail {
    width: 100px;
    height: 100px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: #f8fafc;
}

.tobor-phero-gallery .woocommerce-product-thumbnail.active {
    border-color: #506ccd;
}

.tobor-phero-gallery .woocommerce-product-thumbnail > a > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 6px;
}

/* custom.js injects this button for the old product pages — not in this design. */
.tobor-phero-gallery .single_feature_button {
    display: none;
}

/* ---------- Content column ---------- */

.tobor-phero__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.tobor-phero__top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tobor-phero__badge {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: #f8fafc;
    border: 1px solid #e8e8e8;
    border-radius: 128px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
    align-self: flex-start;
}

.tobor-phero__badge img {
    height: 18px;
    width: auto;
    display: block;
}

/* Desktop: the price sits on the title line, with the model on its own row
   below. The tablet/mobile override below re-lays the same three elements so
   the price drops down beside the model instead. */
.tobor-phero__headline {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title price"
        "model model";
    column-gap: 8px;
    row-gap: 8px;
    align-items: end;
    width: 100%;
}

.tobor-phero__title {
    grid-area: title;
    width: 100%;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #171717;
}

.tobor-phero__price {
    grid-area: price;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #506ccd;
    white-space: nowrap;
}

.tobor-phero__model {
    grid-area: model;
    min-width: 0;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
}

.tobor-phero__model sup {
    font-size: 10.32px;
    line-height: 1;
}

.tobor-phero__description {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
}

.tobor-phero__description p {
    margin: 0;
}

.tobor-phero__description p + p {
    margin-top: 8px;
}

/* ---------- Bundles ---------- */

.tobor-phero__bundles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tobor-phero__bundle-label {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #171717;
}

.tobor-phero__bundle-label .tobor-phero__bundle-name {
    font-weight: 500;
}

.tobor-phero__bundle-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}

/* Mobile bundle dropdown (Figma mobile: "Choose your bundle" field). */
.tobor-phero__bundle-select-wrap {
    display: none;
    width: 100%;
}

.tobor-phero__bundle-select {
    width: 100%;
    padding: 9px 12px;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* 16px also stops iOS Safari zooming the page on focus. */
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #171717;
}

.tobor-phero__bundle-btns {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

/* min-height, not height: labels wrap to 2+ lines as the column narrows and
   must grow the button instead of spilling out of it. */
.tobor-phero__bundle-btn {
    flex: 1;
    min-width: 0;
    min-height: 58px;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #171717;
    text-align: center;
}

/* Figma: long-label buttons size to content with tighter padding, but they
   still shrink below that width rather than squeezing the first two. */
.tobor-phero__bundle-btn:nth-child(n+3) {
    flex: 0 1 auto;
    padding: 9px 13px;
}

.tobor-phero__bundle-btn.is-active {
    background-color: #eff6ff;
    border-color: #506ccd;
}

/* On mid-size desktops the content is a ~half-width column, so four buttons in
   one row squeeze the first two into unreadable slivers. Lay them out 2×2 with
   even widths. Below 1025px the content is full width and one row already fits. */
@media (min-width: 1025px) {
    .tobor-phero__bundle-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tobor-phero__bundle-btn,
    .tobor-phero__bundle-btn:nth-child(n+3) {
        flex: initial;
    }
}

/* Large desktops have room for all four on a single even row. */
@media (min-width: 1200px) {
    .tobor-phero__bundle-btns {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tobor-phero__bundle-card {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 18px;
    background-color: #eff6ff;
    border: 2px solid #506ccd;
    border-radius: 6px;
}

.tobor-phero__bundle-card-img {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
}

.tobor-phero__bundle-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.tobor-phero__bundle-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tobor-phero__bundle-card-title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
}

.tobor-phero__bundle-card-price {
    margin: 4px 0 0 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #506ccd;
}

.tobor-phero__bundle-meta {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
}

.tobor-phero__bundle-specs {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.tobor-phero__bundle-spec {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tobor-phero__bundle-spec:first-child {
    border-right: 0.5px solid #e8e8e8;
    padding-right: 16px;
}

.tobor-phero__bundle-spec-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.tobor-phero__bundle-spec-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tobor-phero__bundle-spec-value {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #171717;
}

.tobor-phero__bundle-spec-label {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: #525252;
}

/* .tobor-phero__detail-link is a <button> (it opens the detail popup), so it
   needs the UA button chrome removed to match the link beside it. */
.tobor-phero__detail-link,
.tobor-phero__compare {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #506ccd;
    text-decoration: none;
    cursor: pointer;
}

.tobor-phero__detail-link:hover,
.tobor-phero__compare:hover {
    color: #506ccd;
}

.tobor-phero__detail-link img,
.tobor-phero__compare img {
    width: 16px;
    height: 16px;
    display: block;
}

.tobor-phero__compare img {
    transform: rotate(90deg);
}

/* ---------- Buy row ---------- */

.tobor-phero__buy {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #e8e8e8;
}

.tobor-phero__qty {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 128px;
}

.tobor-phero__qty button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tobor-phero__qty-minus img {
    width: 12px;
    height: 12px;
    display: block;
}

.tobor-phero__qty-plus img {
    width: 12px;
    height: 12px;
    display: block;
}

.tobor-phero__qty-value {
    width: 32px;
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #525252;
}

.tobor-phero__buy-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tobor-phero__atc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    background-color: #99c300;
    border-radius: 128px;
    /* 2px border matches the outlined buttons' height. */
    border: 2px solid #99c300;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
    text-decoration: none;
}

.tobor-phero__atc:hover {
    background-color: #7da300;
    color: #171717;
}

/* Confirmed state after an AJAX add — matches the accessory cards' flash. */
.tobor-phero__atc.is-added,
.tobor-fcta__btn.is-added {
    background-color: #86ab00;
    border-color: #86ab00;
    color: #171717;
}

.tobor-phero__atc.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.tobor-phero__financing {
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
    text-align: center;
    flex-wrap: wrap;
}

/* Label ("Call") sits outside the tel: link so Google's number swap can't
   replace it; style it to match the link so the pair reads as one unit. */
.tobor-phero__phone {
    font-weight: 500;
    color: #506ccd;
    white-space: nowrap;
}

.tobor-phero__financing a {
    font-weight: 500;
    color: #506ccd;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Trust badges ---------- */

.tobor-phero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.tobor-phero__trust {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: #f8fafc;
    border: 1px solid #e8e8e8;
    border-radius: 100px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
}

.tobor-phero__trust img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ---------- Dark CTA banner ---------- */

.tobor-phero__cta {
    display: block;
    width: 100%;
    padding: 8px;
    background-color: #171717;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.tobor-phero__cta-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    border: 2px solid #99c300;
    border-radius: 6px;
    overflow: hidden;
}

.tobor-phero__cta-bg {
    position: absolute;
    top: 2.89%;
    left: 70.58%;
    width: 25.71%;
    height: auto;
    max-width: none;
    pointer-events: none;
}

.tobor-phero__cta-title {
    position: relative;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #ffffff;
}

.tobor-phero__cta-link {
    position: relative;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.1504px;
    color: #99c300;
    align-self: flex-start;
}

.tobor-phero__cta:hover .tobor-phero__cta-link {
    color: #99c300;
}

.tobor-phero__cta-link img {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---------- Responsive ---------- */

/* Tablet — Figma frame 1449:13338 (768px): stacked, 315px image strip,
   80px thumbs, 4 bundle buttons across, everything full width. */
@media (max-width: 1024px) {
    .tobor-phero {
        /* 70px top, not 32px — at 32px the gallery image slides behind the
           header on tablet. Mobile takes 50px from the <=767px block. */
        padding: 70px 32px 64px 32px;
    }

    .tobor-phero__inner {
        flex-direction: column;
        gap: 32px;
    }

    .tobor-phero__gallery,
    .tobor-phero__content {
        width: 100%;
    }

    /* Figma tablet/mobile: 80px thumbnails. */
    .tobor-phero-gallery .woocommerce-product-thumbnail {
        width: 80px;
        height: 80px;
    }

    .tobor-phero__bundle-btn,
    .tobor-phero__bundle-btn:nth-child(n+3) {
        flex: 1;
        padding: 9px 7px;
    }

    .tobor-phero__badges {
        justify-content: center;
    }

    .tobor-phero__cta {
        width: 100%;
    }

    /* Figma 1512:22278 — quantity left, add to cart right on one row, then the
       financing text and phone centered on their own full-width row. */
    .tobor-phero__buy {
        flex-wrap: wrap;
        align-items: center;
    }

    /* Lifts the button and the financing text out of their column wrapper so
       they can sit on separate rows of the buy row. */
    .tobor-phero__buy-col {
        display: contents;
    }

    .tobor-phero__qty {
        flex: 0 0 auto;
    }

    .tobor-phero__atc {
        flex: 1 1 0;
        width: auto;
    }

    .tobor-phero__financing {
        flex: 0 0 100%;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
}

/* Mobile — Figma frame 1512:22203 (390px): dropdown instead of buttons/card,
   trust badges scroll row, centered financing. */
@media (max-width: 767px) {
    .tobor-phero {
        /* 50px top, not 32px — at 32px the gallery image sits against the
           header on mobile. */
        padding: 50px 16px;
    }

    .tobor-phero__title {
        font-size: 28px;
        line-height: 32px;
    }

    /* Mobile: stack the price on its own row below the model line, left-aligned
       (task 94) — beside-the-model overflowed off-screen on narrow phones. */
    .tobor-phero__headline {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "model"
            "price";
    }

    .tobor-phero__price {
        font-size: 28px;
        line-height: 40px;
        justify-self: start;
    }

    /* "Show Gallery Thumbnails on Mobile" toggle (tobor_pi_show_gallery_thumbs_mobile). */
    .tobor-phero--no-mobile-thumbs .tobor-phero-gallery .woocommerce-product-thumbnails-wrap {
        display: none;
    }

    .tobor-phero__bundle-select-wrap {
        display: block;
    }

    /* Mobile uses the dropdown instead of the button row, but still shows the
       selected bundle card beneath it (Figma 1386:8319). */
    .tobor-phero__bundle-btns {
        display: none;
    }

    /* Card layout per Figma 1386:8319 — small thumbnail + title/price on the
       top row, then the specs and Detail link full-width beneath. `display:
       contents` lifts the body's children into the card grid. */
    .tobor-phero__bundle-card {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "img  head"
            "meta meta";
        column-gap: 12px;
        row-gap: 14px;
        align-items: start;
    }

    .tobor-phero__bundle-card-img {
        grid-area: img;
        width: 64px;
        height: 64px;
    }

    .tobor-phero__bundle-card-body {
        display: contents;
    }

    .tobor-phero__bundle-card-body > div:first-child {
        grid-area: head;
    }

    .tobor-phero__bundle-meta {
        grid-area: meta;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .tobor-phero__badges {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .tobor-phero__trust {
        flex: 0 0 auto;
    }
}

/* Wide screens: content capped at design width (Figma canvas 1440 − 2×96). */
.tobor-phero__inner {
    max-width: 1248px;
    margin: 0 auto;
}

/* ---------- Floating CTA (Figma: pre/post bundle-selection states) ---------- */
.tobor-fcta {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 560px;
    padding: 12px 16px;
    background-color: #eff6ff;
    border: 2px solid #506ccd;
    border-radius: 12px;
    box-shadow: 0px 8px 24px -4px rgba(24, 39, 75, 0.08), 0px 6px 12px -6px rgba(24, 39, 75, 0.12);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tobor-fcta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tobor-fcta__img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
}

.tobor-fcta__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.tobor-fcta__info {
    flex: 1;
    min-width: 0;
}

.tobor-fcta__title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #171717;
}

.tobor-fcta__price {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #506ccd;
}

.tobor-fcta[data-state="post"] .tobor-fcta__from {
    display: none;
}

.tobor-fcta__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: #99c300;
    border-radius: 128px;
    /* 2px border matches the outlined buttons' height. */
    border: 2px solid #99c300;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
    text-decoration: none;
    white-space: nowrap;
}

.tobor-fcta__btn:hover {
    background-color: #7da300;
    color: #171717;
}

@media (max-width: 767px) {
    .tobor-fcta {
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-width: none;
        gap: 12px;
        padding: 10px 12px;
    }

    .tobor-fcta__img {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }

    .tobor-fcta__title,
    .tobor-fcta__price {
        font-size: 14px;
        line-height: 20px;
    }

    .tobor-fcta__btn {
        padding: 10px 16px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* ---------- Bundle detail popup (Figma 1386:8966 desktop,
   1676:10749 tablet, 1537:17966 mobile) ---------- */

.tobor-bdetail {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.tobor-bdetail.is-open {
    display: flex;
}

body.tobor-bdetail-open {
    overflow: hidden;
}

.tobor-bdetail__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(23, 23, 23, 0.5);
}

.tobor-bdetail__dialog {
    position: relative;
    width: 1084px;
    max-width: 100%;
    max-height: calc(100vh - 64px);
    /* dvh tracks the visible viewport; with 100vh alone iOS Safari measures past
       its toolbars, so the centred dialog grew taller than the screen and its top
       was clipped out of reach (the overlay itself does not scroll). */
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 64px 32px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.tobor-bdetail__close {
    position: absolute;
    top: 16px;
    right: 36px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.tobor-bdetail__close img {
    width: 24px;
    height: 24px;
    display: block;
}

.tobor-bdetail__panel {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

.tobor-bdetail__panel[hidden] {
    display: none;
}

.tobor-bdetail__media {
    flex: 0 0 500px;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.tobor-bdetail__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.tobor-bdetail__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
}

.tobor-bdetail__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid #e8e8e8;
}

.tobor-bdetail__title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #171717;
}

.tobor-bdetail__model,
.tobor-bdetail__summary {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
}

.tobor-bdetail__model sup {
    font-size: 10.32px;
    line-height: 1;
}

.tobor-bdetail__best {
    width: 100%;
    padding-right: 48px;
}

.tobor-bdetail__best-title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #525252;
}

.tobor-bdetail__best-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
}

.tobor-bdetail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tobor-bdetail__badge {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 6px 8px 4px;
    background-color: #f8fafc;
    border-radius: 6px;
}

.tobor-bdetail__badge-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.tobor-bdetail__badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tobor-bdetail__badge-value {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #171717;
}

.tobor-bdetail__badge-label {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: #525252;
}

.tobor-bdetail__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: #99c300;
    border-radius: 128px;
    /* 2px border matches the outlined buttons' height. */
    border: 2px solid #99c300;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
    text-decoration: none;
}

.tobor-bdetail__cta:hover {
    background-color: #7da300;
    color: #171717;
}

/* Tablet — Figma 1676:10749: image column flexes instead of a fixed 500px. */
@media (max-width: 1024px) {
    .tobor-bdetail {
        padding: 24px 16px;
    }

    .tobor-bdetail__dialog {
        /* Was 64px/96px: with the dialog taller than the screen and centred, that
           padding pushed the image's top and the CTA at the bottom out of reach
           (task 116, reported at 802px wide). */
        padding: 40px 16px 24px 16px;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        /* The panel scrolls instead of the dialog, so the close button stays put
           and nothing can be clipped off either end. */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .tobor-bdetail__panel {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* A centred flex item taller than its scroll container has the overflow
           clipped at the start edge and unreachable, so top-align it here. */
        align-items: flex-start;
    }

    .tobor-bdetail__title {
        font-size: 28px;
        line-height: 36px;
    }

    .tobor-bdetail__media {
        flex: 1 1 0;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Mobile — Figma 1537:17966: stacked, 150px image, tighter dialog padding. */
@media (max-width: 767px) {
    .tobor-bdetail {
        padding: 32px 16px;
    }

    .tobor-bdetail__dialog {
        padding: 40px 16px 16px 16px;
        max-height: calc(100vh - 64px);
        /* Shorter than the screen on purpose, so the dialog reads as a card with
           breathing room above and below rather than a full-height sheet. */
        max-height: calc(100dvh - 64px);
        display: flex;
        flex-direction: column;
        /* The panel below takes over scrolling, which keeps the close button
           pinned instead of scrolling away with the content. */
        overflow: hidden;
    }

    .tobor-bdetail__close {
        top: 8px;
        right: 16px;
    }

    /* Stacked here; the scrolling itself is inherited from the <=1024px block. */
    .tobor-bdetail__panel {
        flex-direction: column;
        gap: 32px;
        align-items: stretch;
    }

    .tobor-bdetail__media {
        flex: 0 0 150px;
        align-self: center;
        width: 150px;
        height: 150px;
        aspect-ratio: auto;
    }

    .tobor-bdetail__best {
        padding-right: 0;
    }
}

/* Tablet gallery — Figma 1514:22917. The main image is a 315px square there.
   Below 1025px .tobor-phero__inner stacks and the gallery takes the full column
   width; because the wrapper is aspect-ratio 1/1 it then grows as tall as the
   column is wide (~820px at a 886px viewport), which is what task 68 reported.
   Bounded on both sides: the desktop two-column layout and the mobile gallery
   keep their existing sizing. Thumbnails stay 80px from the <=1024px block. */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Fallback for a single-image product, where no strip is built. */
    .tobor-phero-gallery .woocommerce-product-gallery__wrapper {
        width: 315px;
        max-width: 100%;
    }
}

/* Horizontal swipe strip on tablet AND mobile (task 113). The markup is
   server-rendered now, so desktop needs an explicit hide; the <=1024px block
   below turns it back on. */
.tobor-phero-strip {
    display: none;
}

@media (max-width: 1024px) {
    /* The stock viewport stays visible until the strip actually exists — JS adds
       .has-tobor-strip when it builds one. Hiding it up front made first paint
       depend on JS, and production delays every script until the first
       interaction (WP Rocket delay_js), so phones showed an empty gallery until
       touched. The brief stock-viewport moment before the strip appears is the
       acceptable cost. */
    .tobor-phero-gallery.has-tobor-strip .woocommerce-product-gallery__wrapper {
        display: none;
    }

    /* The row itself: 315px squares, 16px apart, scrolling horizontally so the
       next image stays partly visible as a swipe cue. */
    .tobor-phero-strip {
        display: flex;
        gap: 16px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tobor-phero-strip::-webkit-scrollbar {
        display: none;
    }

    .tobor-phero-strip__item {
        flex: 0 0 315px;
        width: 315px;
        height: 315px;
        display: block;
        border-radius: 16px;
        overflow: hidden;
        background-color: #f8fafc;
        scroll-snap-align: start;
    }

    .tobor-phero-strip__item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }
}

/* The interface's sections run full-bleed, so the body's horizontal padding
   exposes the page background as grey strips down both edges (task 108). The
   theme sets that padding on bare `body`, so scope the override to these pages
   via the class added in toborblocks_product_interface_body_class() — every
   other page keeps its padding. */
@media (max-width: 480px) {
    body.tobor-product-interface {
        padding-right: 0;
        padding-left: 0;
    }
}