/* No breadcrumb/topbar section on this page — product content starts
   immediately below the (now compact) header, with enough clearance
   that the fixed header never overlaps it. */
.product-details-single { margin-top: 64px; padding-top: 32px; padding-bottom: 48px; }

/* Gallery — sized by aspect-ratio, not a fixed pixel height, so it
   scales naturally at every breakpoint instead of being cropped or
   squeezed. object-fit:cover only ever crops overflow *within* a
   correctly-proportioned box, never forces a mismatched one. */
#productGallery { width: 100%; }
#productGallery .shop-single-slide .product-gallery-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
}
#productGallery .shop-single-slide { position: relative; }

/* Dots only exist for a real carousel. .has-multiple-media is set by
   shop-single.js once the CMS media list is known, so a single-image
   product never renders a lone meaningless dot. */
#productGallery .shop-single-pagination { display: none; }
#productGallery.has-multiple-media .shop-single-pagination {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    pointer-events: auto;
}
#productGallery .shop-single-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 4px !important;
    background: #ffffff;
    opacity: 0.5;
    /* Sits over uploaded artwork of unknown brightness — the shadow keeps the
       inactive dots legible on a white or washed-out frame. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: opacity 0.2s ease, width 0.2s ease;
}
#productGallery .shop-single-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 18px;
    border-radius: 4px;
}

/* Videos share the slide sizing of images so a mixed gallery doesn't
   change height as it advances (a CLS source right above the CTA). */
#productGallery .shop-single-slide video.product-gallery-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

#productGallery .shop-slider-thumb { margin-top: 12px !important; }
#productGallery .slide-smoll .product-gallery-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}
@media (min-width: 992px) {
    .product-details-single .col-lg-7 { padding-left: 32px; }
}

/* Subtle category eyebrow — supports the title, never competes with it */
.product-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paragraph-light);
    margin-bottom: 10px;
    transition: var(--transition);
}
.product-eyebrow:hover { color: var(--primary-color); }

.product-title { font-size: 26px; margin-bottom: 6px; line-height: 1.25; }
.product-creator {
    font-size: 14px;
    color: var(--paragraph-light);
    margin-bottom: 10px;
}
.product-price { font-size: 22px; color: var(--primary-color); font-weight: 700; margin-bottom: 14px; }
.product-summary { color: var(--paragraph); font-size: 15px; line-height: 1.7; margin-bottom: 20px; }

/* Purchase area — everything needed to buy, nothing that competes with it */
.purchase-area { padding-top: 8px; border-top: 1px solid var(--border); }

.discount-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 14px 0 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--paragraph-light);
    cursor: pointer;
    transition: var(--transition);
}
.discount-toggle:hover { color: var(--primary-color); }
.discount-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    max-width: 360px;
}
.discount-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--sub-bg);
    font-size: 13px;
}
.discount-row button {
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--heading-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.discount-row button:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* Premium single CTA — big, thumb-friendly, visually dominant on mobile */
.btn-add-to-bag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    margin-top: 6px;
    border-radius: var(--radius);
    background: var(--primary-color);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.28);
    transition: var(--transition);
}
.btn-add-to-bag:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(26, 26, 26, 0.36); color: #ffffff; }
.btn-add-to-bag:active { transform: translateY(0); }
.btn-add-to-bag.added { background: var(--success); box-shadow: 0 6px 22px rgba(5, 150, 105, 0.32); }

.purchase-note {
    font-size: 12px;
    color: var(--paragraph-light);
    text-align: center;
    margin-top: 12px;
}

@media (max-width: 991px) {
    .product-title { font-size: 22px; }
    .product-price { font-size: 19px; }

    /* ---- Above-the-fold hero (mobile only) ----------------------------
       The desktop layout puts the gallery in a 5-col beside the content,
       so its 4/5 aspect-ratio never costs vertical room. Stacked on a
       phone that same ratio renders ~448px tall on a 390px viewport, and
       with the thumb strip below it the title/price/CTA were all pushed
       past the fold. Everything here is inside the mobile breakpoint —
       the desktop rules above are untouched.

       Measured, not estimated: on a 390x844 viewport this puts Add to Bag's
       bottom edge at ~640px, which clears the fold even after iOS Safari's
       own toolbars come off the 844. */
    .product-details-single { margin-top: 56px; padding-top: 16px; }

    /* Cap by viewport height rather than swapping the aspect-ratio, so the
       image stays correctly proportioned (never squashed) and simply gets
       letterboxed by its own container on short screens. */
    /* video.product-gallery-img is listed explicitly: the video rule above
       carries an extra element selector, so it outranks a bare
       .product-gallery-img here regardless of source order and would
       otherwise restore the full-height 4/5 box on phones. */
    #productGallery .shop-single-slide .product-gallery-img,
    #productGallery .shop-single-slide video.product-gallery-img {
        max-height: 38vh;
        width: auto;
        max-width: 100%;
        margin-inline: auto;
    }
    #productGallery .shop-single-slide .swiper-slide {
        display: flex;
        justify-content: center;
    }

    /* The thumb strip costs ~92px of fold for no value on a phone — it is
       a duplicate of the main image today, and swiping the main gallery
       already does what tapping a thumb would. Desktop keeps it. */
    #productGallery .shop-slider-thumb { display: none; }

    /* Put the CTA directly under the price. The discount toggle is a
       secondary action and was sitting between them, pushing the primary
       conversion target down the page. */
    .purchase-area {
        display: flex;
        flex-direction: column;
        padding-top: 12px;
    }
    .btn-add-to-bag { order: 1; margin-top: 0; }
    .purchase-note { order: 2; margin-top: 10px; }
    .discount-toggle { order: 3; align-self: center; padding-bottom: 0; }
    .discount-row { order: 4; margin-top: 10px; margin-bottom: 0; max-width: none; }

    /* Hidden above the fold, not clamped. Measured on a 390x844 viewport the
       two-line summary cost ~66px and pushed Add to Bag's bottom edge to
       705px — under the fold once iOS Safari's own chrome is taken off the
       844. The first screen only has to answer what this is, who made it,
       what it costs, and how to buy; the same copy is still shown in full in
       the description section below. */
    .product-summary { display: none; }

    .product-creator { font-size: 13px; margin-bottom: 8px; }
}