/* Product Details page (/product/{id}-{slug}) — a full visual redesign layered on
   top of the Wolmart theme base (style.min.css). Markup structure and every
   Livewire/Alpine hook (wire:*, x-data, swiper data-attrs, .product-sticky-content)
   are left intact; this file only re-skins the page into a modern two-column
   buy-box layout with a card-based tab section below. Scale assumes the theme's
   62.5% root (1rem ≈ 10px). Accent: --q2u-primary (#cfad3c). */

.pd-page {
    background: #f6f6f4;
    padding-top: 1.5rem;
    /* Drop the theme's mb-10 so the gray page background runs straight into the
       footer instead of leaving a white band above it. */
    margin-bottom: 0;
}

.pd-page .page-content {
    padding-bottom: 6rem;
}

/* ---------- Breadcrumb ---------- */
.pd-breadcrumb {
    margin-bottom: 2rem;
}

.pd-breadcrumb .breadcrumb {
    padding: 0;
    margin: 0;
    font-size: 1.25rem;
}

.pd-breadcrumb .breadcrumb li a {
    color: #8a8a8a;
}

.pd-breadcrumb .breadcrumb li:last-child {
    color: #222;
    font-weight: 500;
}

/* ---------- Overall two-column layout ---------- */
.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    /* stretch: both columns take the height of the taller one so the two cards
       line up top and bottom. */
    align-items: stretch;
}

@media (max-width: 991px) {
    .pd-layout {
        /* minmax(0, …) not `1fr`: `1fr` is minmax(auto, 1fr) and the auto floor
           grows to the widest child (the swiper's `.row` bleed, the 800px img),
           blowing the single column past the viewport. */
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .pd-gallery-card,
    .pd-summary {
        height: auto;
    }
}

/* ---------- Gallery ---------- */
.pd-gallery-col,
.pd-summary-col {
    min-width: 0;
}

.pd-gallery-col {
    position: relative;
}

/* The swiper wrappers carry `.row` (negative side margins). Swiper's inline
   styles override this once initialised; until then, stop the bleed. */
.pd-gallery-card .swiper-wrapper.row {
    margin-left: 0;
    margin-right: 0;
}

.pd-gallery-card .product-thumbs-wrap {
    overflow: hidden;
}

.pd-gallery-card {
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 1.6rem;
    padding: 1.8rem;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.04);
}

.pd-sale-flag {
    position: absolute;
    top: 3rem;
    left: 3rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    border-radius: 10rem;
    background: #e0322f;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(224, 50, 47, 0.35);
}

.pd-gallery-card .product-gallery {
    margin: 0;
}

.pd-gallery-card .product-single-swiper {
    border-radius: 1.1rem;
    overflow: hidden;
    background: #fff;
}

/* Uniform gallery: every slide is the same square box and the image is cropped
   to fill it (object-fit: cover). Overrides the theme's fixed 500px swiper +
   `height:100%;width:auto` centring and the jquery.zoom wrapper's inline sizing. */
.pd-gallery-card .swiper-container.product-single-swiper,
.pd-gallery-card .swiper-container.product-single-swiper .swiper-wrapper,
.pd-gallery-card .swiper-container.product-single-swiper .swiper-slide {
    height: auto !important;
}

.pd-gallery-card .swiper-container.product-single-swiper .product-image {
    position: relative;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    border-radius: 1.1rem;
    overflow: hidden;
}

/* jquery.zoom wraps <img> in an inline-block <span> sized in px, and appends a
   .zoomImg overlay — pin both to the square box. */
.pd-gallery-card .swiper-container.product-single-swiper .product-image > span,
.pd-gallery-card .swiper-container.product-single-swiper .product-image .zoomImg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.pd-gallery-card .swiper-container.product-single-swiper .product-image img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.pd-gallery-card .product-single-swiper:hover .product-image img {
    transform: scale(1.03);
}

.pd-gallery-card .product-thumbs-wrap {
    margin-top: 1.4rem;
}

.pd-gallery-card .product-thumb {
    cursor: pointer;
}

/* The theme draws the active indicator with .product-thumb::before — a border
   overlay stretched to the whole slide box, which is taller than the thumbnail
   image, so it reads as a broken/oversized border. Disable it and put the
   border on the image itself so it hugs the actual thumbnail. */
.pd-gallery-card .product-thumb::before {
    content: none;
}

.pd-gallery-card .product-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #e6e6e6;
    border-radius: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-gallery-card .product-thumb:hover img,
.pd-gallery-card .product-thumb.active img {
    border-color: var(--q2u-primary, #cfad3c);
    box-shadow: 0 0 0 1px var(--q2u-primary, #cfad3c);
}

/* Arrows: compact circular controls that only surface on hover — no persistent
   pill/box sitting over the image. */
.pd-gallery-card .product-single-swiper .swiper-button-next,
.pd-gallery-card .product-single-swiper .swiper-button-prev {
    top: 50%;
    width: 3.6rem;
    height: 3.6rem;
    margin-top: -1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pd-gallery-card .product-single-swiper:hover .swiper-button-next,
.pd-gallery-card .product-single-swiper:hover .swiper-button-prev {
    opacity: 1;
}

/* ---------- Summary / buy box ---------- */
.pd-summary-col {
    position: sticky;
    top: 2rem;
}

@media (max-width: 991px) {
    .pd-summary-col {
        position: static;
    }
}

.pd-summary {
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 1.6rem;
    padding: 2.8rem;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.04);
}

@media (max-width: 575px) {
    .pd-summary {
        padding: 2rem 1.8rem;
    }
}

/* Vendor chip */
.pd-vendor-chip {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.2rem 0.6rem 0.6rem;
    border: 1px solid #ececec;
    border-radius: 10rem;
    margin-bottom: 1.8rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pd-vendor-chip:hover {
    border-color: var(--q2u-primary, #cfad3c);
    background: #fdfaf0;
}

.pd-vendor-chip img {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    object-fit: cover;
    background: #353b55;
}

.pd-vendor-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pd-vendor-chip-label {
    font-size: 1.1rem;
    color: #999;
}

.pd-vendor-chip-name {
    font-size: 1.35rem;
    font-weight: 600;
    color: #222;
}

/* Title */
.pd-title {
    font-size: 2.6rem;
    line-height: 1.35;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 1.4rem;
}

@media (max-width: 575px) {
    .pd-title {
        font-size: 2.1rem;
    }
}

/* Meta row (category + SKU) inside the Livewire component */
.pd-buybox .product-bm-wrapper {
    margin-bottom: 1.4rem;
}

.pd-buybox .product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.6rem;
    font-size: 1.2rem;
    color: #8a8a8a;
    border: 0;
    padding: 0;
}

.pd-buybox .product-meta .product-category a {
    color: #555;
}

.pd-buybox .product-meta .product-category a:hover {
    color: var(--q2u-primary, #cfad3c);
}

.pd-buybox .product-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 1.8rem 0;
}

/* Rating row */
.pd-buybox .ratings-container {
    margin-bottom: 1.6rem;
}

.pd-buybox .rating-reviews {
    font-size: 1.25rem;
    color: #8a8a8a;
    margin-left: 0.6rem;
}

.pd-buybox .rating-reviews:hover {
    color: var(--q2u-primary, #cfad3c);
}

/* Price */
.pd-buybox .product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.pd-buybox .product-price .new-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--q2u-primary-active, #ba992e);
    text-decoration: none;
}

.pd-buybox .product-price .old-price {
    font-size: 1.7rem;
    color: #b3b3b3;
    text-decoration: line-through;
}

/* Short description */
.pd-buybox .product-short-desc {
    font-size: 1.4rem;
    line-height: 1.75;
    color: #5a5a5a;
    margin-bottom: 1.8rem;
}

/* Variant + quantity rows: a shared 9rem label column and a capped 32rem control
   column so the select and the stepper line up on the same left AND right edge
   without stretching the full width of the card. */
.pd-buybox .product-variation-forms {
    grid-template-columns: 9rem minmax(0, 32rem);
    gap: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
}

.pd-buybox .product-variation-form label,
.pd-buybox .product-qty-form.with-label > label {
    font-weight: 600;
    color: #333;
    font-size: 1.3rem;
}

.pd-buybox .product-variation-form .product-variant-select {
    width: 100%;
    min-width: 0;
}

.pd-buybox .product-variant-select .shop-select-toggle {
    border: 1px solid #dcdcdc;
    border-radius: 0.9rem;
    padding: 1.1rem 1.4rem;
    font-size: 1.35rem;
    background: #fafafa;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pd-buybox .product-variant-select .shop-select-toggle:hover,
.pd-buybox .product-variant-select .shop-select-toggle.is-open {
    border-color: var(--q2u-primary, #cfad3c);
    background: #fff;
}

/* Quantity + add to cart */
.pd-buybox .product-sticky-content {
    margin-top: 0.4rem;
}

.pd-buybox .product-sticky-content .product-form {
    padding: 0;
}

/* Keep the theme's flex stepper intact (its +/- buttons are absolutely
   positioned and break under a grid) — but pin the row to the same overall width
   as the variant grid (9rem label + 1.4rem gap + 32rem control) and stop it
   wrapping, so the stepper lines up with the selects on both edges. */
.pd-buybox .product-qty-form.with-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    flex: none;
    width: 100%;
    max-width: 42.4rem;
    margin-bottom: 1.8rem;
}

.pd-buybox .product-qty-form.with-label > label {
    flex: 0 0 9rem;
    max-width: 9rem;
    margin: 0;
}

.pd-buybox .product-qty-form.with-label .input-group {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 4.4rem;
    border: 1px solid #dcdcdc;
    border-radius: 0.9rem;
    background: #fafafa;
}

.pd-buybox .product-qty-form.with-label > small {
    flex: 0 0 100%;
    margin: 0.4rem 0 0 10.4rem;
}

.pd-buybox .product-qty-form .qty-field {
    border: 0;
    background: transparent;
}

/* "Please select Colour / Size first" hint shown when the customer tries to
   change quantity or add to cart before choosing every required option. */
.pd-buybox .pd-variant-prompt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.4rem;
    padding: 1rem 1.3rem;
    border: 1px solid #f0d9a8;
    border-radius: 0.8rem;
    background: #fdf3e0;
    color: #a86b1f;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.45;
}

.pd-buybox .pd-variant-prompt i {
    flex-shrink: 0;
    font-size: 1.6rem;
}

/* Narrow screens: stack every label above its control so the selects and the
   quantity stepper all start at the same left edge and take the full width.
   (The variant grid and the flex quantity row wrap differently otherwise.) */
@media (max-width: 767px) {
    .pd-buybox .product-variation-forms {
        display: block;
        margin-bottom: 0;
    }

    .pd-buybox .product-variation-form {
        display: block;
        margin-bottom: 1.4rem;
    }

    .pd-buybox .product-variation-form label,
    .pd-buybox .product-qty-form.with-label > label {
        display: block;
        flex: none;
        max-width: none;
        margin: 0 0 0.5rem;
    }

    .pd-buybox .product-variation-form .d-flex,
    .pd-buybox .product-variation-form .product-variant-select {
        width: 100%;
    }

    .pd-buybox .product-qty-form.with-label {
        display: block;
        width: 100%;
        max-width: none;
    }

    .pd-buybox .product-qty-form.with-label .input-group {
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    .pd-buybox .product-qty-form.with-label > small {
        margin-left: 0;
    }
}

.pd-buybox .product-sticky-content .btn-primary {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(207, 173, 60, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-buybox .product-sticky-content .btn-primary i {
    margin-right: 0.8rem;
}

.pd-buybox .product-sticky-content .btn-primary:not(:disabled):not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(207, 173, 60, 0.45);
}

/* Delivery estimate line */
.pd-buybox .product-delivery-form {
    margin-top: 0.4rem;
    font-size: 1.3rem;
    color: #444;
}

/* ---------- Trust badges ---------- */
.pd-trust {
    list-style: none;
    margin: 2rem 0 0;
    padding: 2rem 0 0;
    border-top: 1px solid #eee;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

@media (max-width: 575px) {
    .pd-trust {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.pd-trust li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #555;
}

.pd-trust li i {
    flex-shrink: 0;
    font-size: 1.9rem;
    color: var(--q2u-primary, #cfad3c);
}

/* ---------- Share + wishlist ---------- */
.pd-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.pd-actions .social-links {
    margin: 0;
}

.pd-actions .social-icons {
    display: flex;
    gap: 0.6rem;
}

.pd-actions .product-link-wrapper {
    margin: 0;
}

.pd-actions .btn-product-icon {
    width: 4rem;
    height: 4rem;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pd-actions .btn-product-icon:hover {
    border-color: var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
}

/* ---------- Tabs section ---------- */
.pd-tabs-section {
    margin-top: 3.5rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 1.6rem;
    padding: 1rem 3rem 3rem;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.04);
}

@media (max-width: 575px) {
    .pd-tabs-section {
        /* Equal top/bottom: on mobile the tab nav collapses to a dropdown, so
           there's no nav-link padding padding out the top like on desktop. */
        padding: 2rem 1.8rem;
    }

    .pd-tabs-section .tab-content {
        padding-top: 2rem;
    }
}

.pd-tabs-section .nav-tabs {
    border-bottom: 1px solid #eee;
    gap: 0.5rem;
}

.pd-tabs-section .nav-tabs .nav-link {
    font-size: 1.45rem;
    font-weight: 600;
    color: #888;
    padding: 1.8rem 1.2rem;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pd-tabs-section .nav-tabs .nav-link:hover {
    color: #333;
}

.pd-tabs-section .nav-tabs .nav-link.active {
    color: var(--q2u-primary-active, #ba992e);
    border-bottom-color: var(--q2u-primary, #cfad3c);
}

.pd-tabs-section .tab-content {
    padding-top: 2.5rem;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #555;
}

.pd-tabs-section .tab-pane-title {
    font-size: 1.7rem;
    color: #1d1d1d;
}

.pd-tabs-section .tab-content ul.list-none li,
.pd-tabs-section #product-tab-specification li {
    display: flex;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.pd-tabs-section #product-tab-specification li label {
    flex: 0 0 18rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.pd-tabs-section #product-tab-specification li p {
    margin: 0;
}

/* Reviews */
.pd-tabs-section .ratings-wrapper {
    background: #faf6ea;
    border-radius: 1.2rem;
    padding: 2.5rem;
    text-align: center;
}

.pd-tabs-section .avg-rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.pd-tabs-section .avg-mark {
    font-size: 4.2rem;
    line-height: 1;
    color: var(--q2u-primary-active, #ba992e);
}

.pd-tabs-section .comments .comment {
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 1.2rem;
    margin-bottom: 1.5rem;
}

.pd-tabs-section .comments .comment-avatar img {
    border-radius: 50%;
}

.pd-tabs-section .comment-author span:first-child {
    font-weight: 600;
    color: #1d1d1d;
}

.pd-tabs-section .comment-date {
    font-size: 1.2rem;
    color: #999;
    font-weight: 400;
}

/* ---------- Vendor Info tab ---------- */
.pd-vendor-panel {
    border: 1px solid #ececec;
    border-radius: 1.4rem;
    overflow: hidden;
    background: #fff;
}

.pd-vendor-cover {
    position: relative;
    height: 20rem;
    background: #353b55;
}

@media (max-width: 575px) {
    .pd-vendor-cover {
        height: 14rem;
    }

    .pd-vendor-avatar {
        margin-top: -3.6rem;
        width: 7.2rem;
        height: 7.2rem;
    }
}

.pd-vendor-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-vendor-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}

.pd-vendor-body {
    position: relative;
    /* Top padding keeps the name/meta text off the dark banner — only the
       avatar is pulled up to overlap it. */
    padding: 2.2rem 2.6rem 2.6rem;
}

@media (max-width: 575px) {
    .pd-vendor-body {
        padding: 1.6rem 1.6rem 2rem;
    }
}

.pd-vendor-identity {
    display: flex;
    align-items: flex-end;
    gap: 1.6rem;
}

.pd-vendor-avatar {
    flex-shrink: 0;
    margin: -5rem 0 0;
    width: 8.8rem;
    height: 8.8rem;
    border-radius: 1.4rem;
    overflow: hidden;
    border: 3px solid #fff;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.pd-vendor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-vendor-headline {
    padding-bottom: 0.4rem;
}

.pd-vendor-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    margin: 0 0 0.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.pd-vendor-name a {
    color: #1d1d1d;
}

.pd-vendor-name a:hover {
    color: var(--q2u-primary, #cfad3c);
}

.pd-vendor-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    border-radius: 10rem;
    background: #eaf7ee;
    color: #1f9d55;
    font-size: 1.15rem;
    font-weight: 600;
}

.pd-vendor-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
    font-size: 1.25rem;
    color: #7a7a7a;
}

.pd-vendor-meta li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.pd-vendor-meta li i {
    font-size: 1.4rem;
    color: var(--q2u-primary, #cfad3c);
}

.pd-vendor-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2.2rem;
    padding: 1.8rem 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

.pd-vendor-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pd-vendor-stat + .pd-vendor-stat {
    border-left: 1px solid #f0f0f0;
}

.pd-vendor-stat-num {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1d;
}

.pd-vendor-stat-label {
    font-size: 1.15rem;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pd-vendor-holiday {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 2rem;
    padding: 1.3rem 1.6rem;
    border-radius: 0.9rem;
    background: #fdf3e0;
    color: #a86b1f;
    font-size: 1.3rem;
    line-height: 1.6;
}

.pd-vendor-holiday i {
    font-size: 1.7rem;
    flex-shrink: 0;
}

.pd-vendor-bio {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #555;
}

.pd-vendor-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.2rem;
}

.pd-vendor-cta .btn {
    padding: 1.15rem 2.2rem;
    font-size: 1.35rem;
}

.pd-vendor-cta .btn-primary i {
    margin-left: 0.6rem;
}

.pd-vendor-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid #f0f0f0;
}

.pd-vendor-social-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #666;
}

/* Mobile: stack the vendor profile and centre everything. */
@media (max-width: 575px) {
    .pd-vendor-identity {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .pd-vendor-headline {
        padding-bottom: 0;
    }

    .pd-vendor-name,
    .pd-vendor-meta,
    .pd-vendor-cta,
    .pd-vendor-social {
        justify-content: center;
    }

    .pd-vendor-bio {
        text-align: center;
    }

    .pd-vendor-holiday {
        text-align: left;
    }
}

/* ---------- Mobile tab dropdown ---------- */
.pd-tabs-section .product-tabs-select {
    display: block;
    width: 100%;
}

.pd-tabs-section .product-tabs-select .shop-select-toggle {
    width: 100%;
    min-width: 0;
    padding: 1.4rem 4rem 1.4rem 1.6rem;
    border: 1px solid #e4e4e4;
    border-radius: 1rem;
    background: #fff;
    color: #1d1d1d;
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-tabs-section .product-tabs-select .shop-select-toggle:hover,
.pd-tabs-section .product-tabs-select .shop-select-toggle:focus-visible,
.pd-tabs-section .product-tabs-select .shop-select-toggle.is-open {
    border-color: var(--q2u-primary, #cfad3c);
    box-shadow: 0 0 0 3px rgba(207, 173, 60, 0.15);
    outline: none;
}

/* Chevron (replaces the theme's grey triangle) */
.pd-tabs-section .product-tabs-select .shop-select-toggle::after {
    content: "";
    right: 1.7rem;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.6rem;
    border: 0;
    border-right: 2px solid var(--q2u-primary, #cfad3c);
    border-bottom: 2px solid var(--q2u-primary, #cfad3c);
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin-top 0.2s ease;
}

.pd-tabs-section .product-tabs-select .shop-select-toggle.is-open::after {
    margin-top: -0.2rem;
    transform: rotate(-135deg);
}

.pd-tabs-section .product-tabs-select .shop-select-menu {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.6rem;
    border: 1px solid #ededed;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.pd-tabs-section .product-tabs-select .shop-select-option {
    padding: 1.15rem 1.3rem;
    border-radius: 0.7rem;
    font-size: 1.45rem;
    font-weight: 500;
    color: #4a4a4a;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pd-tabs-section .product-tabs-select .shop-select-option:hover {
    background: #faf6ea;
    color: #1d1d1d;
}

.pd-tabs-section .product-tabs-select .shop-select-option.is-selected {
    background: #faf6ea;
    color: var(--q2u-primary-active, #ba992e);
    font-weight: 700;
}

.pd-tabs-section .product-tabs-select .shop-select-option.is-selected::after {
    content: "\2713";
    float: right;
    font-weight: 700;
}

/* ---------- Related products ---------- */
.pd-related {
    margin-top: 4rem;
}

.pd-related .pd-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pd-related .pd-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6e6e6;
}

/* "From The Same Shop" (product-from-vendor) sits directly under the related grid;
   give it matching rhythm and drop the theme's dark heading treatment. */
.pd-page .vendor-product-section {
    margin-top: 4rem;
    padding-top: 0;
    border-top: 0;
}

.pd-page .vendor-product-section .title.text-light {
    color: #1d1d1d !important;
    font-size: 2rem;
}