/* ==========================================================================
   Tabbed product information
   Three tabs in one row, replacing three stacked accordions. Sits inside the
   PDP info column, so it borrows the same rules and rhythm as the accordions
   above and below it.
   ========================================================================== */

.product-tabs {
    --pt-ink: #15140F;
    --pt-soft: #4E4A40;
    --pt-line: #DDD7C7;
    --pt-accent: #675A88;
    border-top: 1px solid rgb(var(--color-border, 221 215 199) / 45%);
    border-bottom: 1px solid rgb(var(--color-border, 221 215 199) / 45%);
    margin: 0;
}

.product-tabs__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.product-tabs__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 14px 6px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--pt-soft);
    cursor: pointer;
    text-align: center;
    transition: color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.product-tabs__tab:hover {
    color: var(--pt-ink);
}

.product-tabs__tab.is-active {
    color: var(--pt-ink);
    border-bottom-color: var(--pt-ink);
}

.product-tabs__tab:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: -2px;
}

/* The icon comes either from an uploaded file or the built-in icon set, so the
   box is sized here rather than relying on either one's intrinsic size. */
.product-tabs__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
}

.product-tabs__icon svg,
.product-tabs__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-tabs__label {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.25;
}

.product-tabs__panel {
    padding: 16px 5px 20px 10px;
    font-size: var(--fs-small);
    font-weight: 300;
    line-height: 1.5;
    color: var(--pt-soft);
}

/* Panels ship open in the markup so a script failure still shows the content.
   The inline script in the snippet adds .pt-js before first paint, which is
   what actually folds them — doing it in JS alone would flash all three open. */
.pt-js .product-tabs__panel:not(.is-open) {
    display: none;
}

.product-tabs__panel + .product-tabs__panel {
    border-top: 1px solid rgb(var(--color-border, 221 215 199) / 45%);
}

.pt-js .product-tabs__panel + .product-tabs__panel {
    border-top: 0;
}

.product-tabs__panel > *:first-child {
    margin-top: 0;
}

.product-tabs__panel > *:last-child {
    margin-bottom: 0;
}

.product-tabs__panel strong {
    color: var(--pt-ink);
    font-weight: 600;
}

/* Payment strip, matching the accordion treatment. */
.product-tabs__payment-methods {
    margin-top: 14px;
}

.product-tabs__payment-methods .payment-methods {
    margin: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-tabs__payment-methods .payment-methods li {
    display: inline-flex;
}

.product-tabs__payment-methods .payment-methods li svg {
    width: 34px;
    height: auto;
    display: block;
}

@media screen and (max-width: 480px) {
    .product-tabs__tab {
        padding: 12px 4px 9px;
        gap: 6px;
    }

    .product-tabs__label {
        letter-spacing: 0.05em;
    }
}