/* =========================
   Base (keep your existing)
   ========================= */
.product-detail-wrapper {
    background-color: rgba(var(--color-background, var(--color-page-background)));
}

.product-detail {
    background-color: rgba(var(--color-background, var(--color-page-background)));
    justify-content: center;
}

.product-detail__row {
    display: flex;
    flex-direction: column;
}

#lf-quick-add-modal-content {
    padding-inline: var(--page-padding);
}

.product-detail__info {
    padding: 16px 24px;
    height: 100%;
}

.product-detail__description {
    text-transform: uppercase;
    font-weight: 700;
}

._title_product {
    font-size: 32px;
}

._lexend {
    letter-spacing: 0.27em;
    font-size: 14px;
}

@media (min-width: 960px) {
    ._title_product {
    font-size: 48px;
}

    ._lexend {
        letter-spacing: 0.27em;
        font-size: 24px;
    }
}

/* =========================
   Full-bleed + 50px gutters
   ========================= */
:root {
    --pdp-gutter-desktop: 50px;
    /* ← your requested gutter */
    --pdp-gutter-mobile: 20px;
    /* change to 50px if you truly want 50 on phones */
    --pdp-gap: 40px;
    /* space between image and info on desktop */
    --pdp-img-maxvh: 80vh;
    /* cap so the image never overwhelms the page */
}

/* Make the section span the full viewport width and add gutters */
.product-detail-wrapper .page-width {
    max-width: none !important;
    width: 100vw;
    /* pull container to edges */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* gutters */
    padding-left: var(--pdp-gutter-mobile);
    padding-right: var(--pdp-gutter-mobile);
}

@media (min-width: 960px) {
    .product-detail-wrapper .page-width {
        padding-left: var(--pdp-gutter-desktop);
        padding-right: var(--pdp-gutter-desktop);
    }
}

/* =========================
   Desktop 50 / 50 split
   ========================= */
@media (min-width: 960px) {

    /* force horizontal layout + gap, let items stretch to the same height */
    .product-detail[data-desktop-direction="row"] .product-detail__row {
        flex-direction: row !important;
        align-items: center !important;
        height: fit-content;
        width: fit-content;
    }

    /* hard 50/50 regardless of theme helper widths */
    .product-detail[data-desktop-direction="row"] .product-detail__col {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 662px !important;
        min-width: 0;
        /* allow long text to wrap */
    }

    /* remove any stray margins on gallery column */
    .product-detail[data-desktop-direction="row"] .product-detail__media-gallery {
        margin: 0 !important;
    }
}

/* =========================
   Center the image (fit/contain)
   ========================= */
@media (min-width: 960px) {

    /* make the media column fill the row height and center its content */
    .product-detail[data-desktop-direction="row"] .product-detail__media-gallery {
        height: 100%;
        display: grid;
        /* safe for sticky + carousels */
        place-items: center;
        /* centers both axes */
    }

    /* inner wrapper also centers (covers more gallery implementations) */
    .product-detail[data-desktop-direction="row"] .product-detail__media-gallery .media-gallery__item .media-gallery__media {
        display: grid;
        place-items: center;
    }

    /* image/video fits within its half and is centered */
    .product-detail[data-desktop-direction="row"] .product-detail__media-gallery img,
    .product-detail[data-desktop-direction="row"] .product-detail__media-gallery video,
    .product-detail[data-desktop-direction="row"] .product-detail__media-gallery picture>img {
        max-width: 100%;
        height: auto;
        max-height: var(--pdp-img-maxvh);
        object-fit: contain;
        display: block;
    }
}

/* =========================
   Keep your sticky behavior
   ========================= */
@media (min-width: 960px) {

    .product-detail[data-desktop-direction="row"] .product-detail__info,
    .product-detail[data-desktop-direction="row"] .product-detail__media {
        position: sticky;
        inset-block-start: var(--detail-padding-block-start, 0);
        z-index: var(--z-index-hover);
    }
}

.product-detail__buy-buttons .shopline-payment-button-wrapper {
    display: none !important;
}

/* ============ PDP: Qty left of CTA (desktop) ============ */
@media (min-width: 960px) {

    /* Make the info column a simple 2-col grid */
    .product-detail__info {
        display: grid !important;
        /* tweak these two to taste */
        --pdp-qty-col: 170px;
        /* width of qty column */
        --pdp-gap: 24px;
        /* gap between qty and button */
        grid-template-columns: var(--pdp-qty-col) 1fr;
        column-gap: 16px;
        row-gap: var(--info-row-gap, 16px);
        align-items: center;
        overflow: visible;
        /* let button slab render outside */
    }

    /* Put qty in col 1, CTA in col 2 */
    .product-detail__quantity-selector {
        grid-column: 1;
        align-self: stretch;
    }

    .product-detail__buy-buttons {
        grid-column: 2;
        align-self: stretch;
    }

    /* Everything else above/below spans both columns naturally */
    .product-detail__info> :not(.product-detail__quantity-selector, .product-detail__buy-buttons) {
        grid-column: 1 / -1;
    }

    /* Hide the “Quantity” label on desktop (optional) */
    .product-detail__quantity-selector>.body3 {
        display: none;
    }

    /* Match qty control height to the CTA */
    .product-detail__quantity-selector theme-input-number {
        /* approximate CTA plate height; adjust if you tweak plate padding */
        --pdp-cta-height: 56px;
        height: var(--pdp-cta-height);
        display: flex;
        align-items: center;
    }

    .product-detail__quantity-selector theme-input-number input,
    .product-detail__quantity-selector theme-input-number button {
        height: 100%;
    }

    /* Flatten the button wrapper so the grid column sizing applies nicely */
    .product-detail__buy-buttons .product-detail__form .form__buttons {
        display: block;
        /* or display: contents; if supported */
    }

    /* Make the CTA fill its grid column */
    .product-detail__buy-buttons .button {
        width: 100%;
    }
}

/* Keep the button’s slab (shadow) visible */
.product-detail__buy-buttons,
.product-detail__form {
    overflow: visible;
}

/* === Mobile: keep Qty left of CTA (non-destructive) === */
@media (max-width: 959px) {

    /* turn the info column into a tiny 2-col grid */
    .product-detail__info {
        display: grid !important;
        grid-template-columns: var(--pdp-qty-col-mobile, 140px) 1fr;
        column-gap: var(--pdp-gap-mobile, 16px);
        row-gap: var(--info-row-gap, 12px);
        align-items: center;
        overflow: visible;
        /* keep CTA slab visible */
    }

    /* put qty in col 1, CTA in col 2 */
    .product-detail__info>.product-detail__quantity-selector {
        grid-column: 1;
        align-self: center;
    }

    .product-detail__info>.product-detail__buy-buttons {
        grid-column: 2;
        align-self: stretch;
    }

    /* everything else spans both columns naturally */
    .product-detail__info> :not(.product-detail__quantity-selector, .product-detail__buy-buttons) {
        grid-column: 1 / -1;
    }

    /* tidy up qty block */
    .product-detail__quantity-selector>.body3 {
        display: none;
    }

    /* hide "Quantity" label */
    .product-detail__quantity-selector theme-input-number {
        height: var(--pdp-cta-height, 56px);
        display: flex;
        align-items: center;
    }

    .product-detail__quantity-selector theme-input-number input,
    .product-detail__quantity-selector theme-input-number button {
        height: 100%;
    }

    /* make sure CTA fills its cell and slab isn’t clipped */
    .product-detail__buy-buttons .product-detail__form .form__buttons {
        display: block;
    }

    .product-detail__buy-buttons .button {
        width: 100%;
    }

    .product-detail__buy-buttons,
    .product-detail__form {
        overflow: visible;
    }
}

/* --- PDP mobile overflow fix --- */
@media (max-width: 959px) {

    /* Stop the full-bleed wrapper from causing horizontal scroll on iOS */
    .product-detail-wrapper .page-width {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0;
    }

    /* Clamp the info column and its children */
    .product-detail__info {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .product-detail__info>* {
        min-width: 0;
    }

    /* RTE/description: break long words/URLs, images stay fluid */
    .product-detail__description,
    .product-detail__description * {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .product-detail__description img,
    .product-detail__description svg {
        height: auto;
        max-width: 100% !important;
    }

    /* Inputs / qty / buttons shouldn’t push wider than screen */
    .product-detail__quantity-selector theme-input-number {
        max-width: 140px;
        /* adjust to taste */
        width: 100%;
    }

    .product-detail__quantity-selector theme-input-number>* {
        min-width: 0;
    }

    .product-detail__buy-buttons .button {
        width: 100%;
    }

    /* Just in case any rogue element uses 100vw inside the column */
    .product-detail__info [style*="100vw"],
    .product-detail__info [class*="100vw"] {
        width: 100% !important;
    }
}

@media (max-width: 959px) {

    /* note the escaped colon in the class name */
    .layout\:template--product__main-product-info--spacing {
        --s-padding-inline-start: 16px;
        --s-padding-inline-end: 16px;
        --s-padding-block-start: 16px;
        --s-padding-block-end: 16px;
    }

    .product-detail__info {
        text-align: center;
        padding: 0;
    }

    .product-detail__info .rte h1 {
        font-size: 32px;
    }

    .product-detail__info .rte h4 {
        font-size: 14px;
        letter-spacing: 5px;
    }
}

/* =========================================
   Product description RTE font routing
========================================= */
.product-detail__description-typography {
  --rte-title-font-family: 'Brother', sans-serif;
  --rte-subtitle-font-family: 'FraktionMono Bold Italic'. sans-serf;
  --rte-body-font-family: 'FraktionMono Bold', sans-serf;
  --rte-bold-font-family: 'FraktionMono Bold', sans-serf;
  --rte-italic-font-family: 'FraktionMono Bold Italic', sans-serf;
}

/* Body */
.product-detail__description-typography :is(p, ul, ol, li, div, span, a, blockquote, table, thead, tbody, tr, td, th) {
  font-family: var(--rte-body-font-family) !important;
}

/* Title */
.product-detail__description-typography :is(h1, h2) {
  font-family: var(--rte-title-font-family) !important;
}

/* Subtitle */
.product-detail__description-typography :is(h3, h4, h5, h6) {
  font-family: var(--rte-subtitle-font-family) !important;
}

/* Bold */
.product-detail__description-typography :is(strong, b) {
  font-family: var(--rte-bold-font-family) !important;
  font-weight: 800;
}

/* Italic */
.product-detail__description-typography :is(em, i) {
  font-family: var(--rte-italic-font-family) !important;
  font-style: italic;
}

/* =========================================================
   PDP Description RTE — remove theme/default margins
   (Scopes only to product description rich text)
   ========================================================= */
.product-detail__description.rte :is(h1, h2, h3, h4, h5, h6,
    p,
    ul, ol,
    li,
    span,
    blockquote,
    hr) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin: 0 !important;
}

/* Optional: keep list indentation sane while margins are zeroed */
.product-detail__description.rte :is(ul, ol) {
    padding-left: 1.2em;
}

/* Optional: remove extra spacing some themes add to list items */
.product-detail__description.rte li {
    padding: 0;
}

/* =========================================================
   PDP Description RTE — margins + font routing
   h1/h2 = Brother
   h3/h4 = Fraktion Italic
   everything else = Fraktion (regular)
   ========================================================= */

/* 1) Remove theme/default margins */
.product-detail__description.rte :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, li, blockquote, hr) {
    margin: 0 !important;
}

/* Optional: keep lists readable */
.product-detail__description.rte :is(ul, ol) {
    padding-left: 1.2em;
}

/* 2) Default font for “everything else” */
.product-detail__description.rte {
    font-family: "FraktionMono Bold", sans-serif;
    /* your Fraktion */
}

/* Make sure richtext children inherit unless overridden below */
.product-detail__description.rte :is(p, span, strong, em, a, li, small, div, blockquote) {
    font-family: inherit;
}

/* 3) h1/h2 = Brother */
.product-detail__description.rte :is(h1, h2) {
    font-family: "Brother Bold", "Brother", sans-serif !important;
    font-weight: 800;
}

/* 4) h3/h4 = Fraktion Italic */
.product-detail__description.rte :is(h3, h4) {
    font-family: "FraktionMono Italic", sans-serif !important;
    font-style: italic;
    font-weight: 400;
}

/* 5) If you want h5/h6 to follow “everything else” explicitly */
.product-detail__description.rte :is(h5, h6) {
    font-family: "FraktionMono Bold", sans-serif !important;
}

#pdpContainer {
    font-family: 'Brother', sans-serif !important;
}

@media (max-width: 959px) {
    .product-detail__info {
        grid-template-columns: var(--pdp-qty-col-mobile, 118px) 1fr !important;
        column-gap: var(--pdp-gap-mobile, 8px) !important;
    }

    .product-detail__buy-buttons,
    .product-detail__buy-buttons .product-detail__form {
        width: 100% !important;
    }

    .product-detail__quantity-selector theme-input-number {
        max-width: 100% !important;
    }
}