/* Photobubble – product page layout (body.pb-pdp)
 * Flatsome + WooCommerce Variation Swatches markup. */

.pb-pdp,
.pb-acc-on {
    --pdp-accent: #d6336c;        /* Photobubble pink – same as the cover picker */
    --pdp-accent-soft: #fdf0f4;   /* pale pink for selected options */
    --pdp-line: #e8e8e8;
    --pdp-ink: #333;
    --pdp-muted: #777;
    --pdp-radius: 6px;
    --pdp-width: 1120px;          /* width of the centred product area */
}

/* ---------------------------------------------------------------
 * 1. Centred product area: smaller image, options beside it
 * ------------------------------------------------------------- */
@media (min-width: 850px) {
    .pb-pdp .product-main > .row,
    .pb-pdp .product-main > .content-row,
    .pb-pdp .product-main .row.content-row {
        max-width: var(--pdp-width);
        margin-left: auto;
        margin-right: auto;
    }
    .pb-pdp .product-main .row > .product-gallery,
    .pb-pdp .product-main .row > .large-6.product-gallery {
        flex-basis: 55%;
        max-width: 55%;
    }
    .pb-pdp .product-main .row > .product-info {
        flex-basis: 45%;
        max-width: 45%;
        padding-left: 40px;
    }
}

.pb-pdp .product-info .product-title {
    font-size: 1.45em;
    line-height: 1.25;
    margin-bottom: .3em;
}
.pb-pdp .product-info .price-wrapper .price {
    font-size: 1.15em;
}

/* Related products: same centred width, so the carousel cards are smaller */
.pb-pdp .product-footer .related,
.pb-pdp .product-footer .related-products-wrapper,
.pb-pdp .product-footer .upsells {
    max-width: var(--pdp-width);
    margin-left: auto;
    margin-right: auto;
}
.pb-pdp .product-footer .related .product-section-title,
.pb-pdp .product-footer .related > h2,
.pb-pdp .product-footer .related > h3 {
    font-size: 1em;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------------------------------------------------------------
 * 2. Options – clean white, uppercase labels, pink selection
 *    (matches the menu and buttons on the rest of the site)
 * ------------------------------------------------------------- */
.pb-pdp form.variations_form table.variations,
.pb-pdp form.variations_form table.variations tbody {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
}
.pb-pdp form.variations_form table.variations tr {
    display: block;
    margin: 0;
    padding: 14px 0;
    background: none;
    border-top: 1px solid var(--pdp-line);
}
.pb-pdp form.variations_form table.variations tr:last-child {
    border-bottom: 1px solid var(--pdp-line);
}
.pb-pdp form.variations_form table.variations th,
.pb-pdp form.variations_form table.variations td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    line-height: 1.3;
}
.pb-pdp form.variations_form table.variations th,
.pb-pdp form.variations_form table.variations td.label {
    margin: 0 0 10px;
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pdp-ink);
}
.pb-pdp form.variations_form table.variations label {
    font-size: inherit;
    letter-spacing: inherit;
    margin: 0;
}
.pb-pdp form.variations_form .reset_variations {
    font-size: .75em;
    color: var(--pdp-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* WooCommerce Variation Swatches */
.pb-pdp .variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}
.pb-pdp .variable-items-wrapper .variable-item {
    margin: 0 !important;
    background: #fff !important;
    border-radius: var(--pdp-radius) !important;
    box-shadow: 0 0 0 1px var(--pdp-line) !important;
    transition: box-shadow .15s, background-color .15s;
}
.pb-pdp .variable-items-wrapper .variable-item:hover {
    box-shadow: 0 0 0 1px var(--pdp-accent) !important;
}
.pb-pdp .variable-items-wrapper .variable-item.selected,
.pb-pdp .variable-items-wrapper .variable-item.selected:hover {
    background: var(--pdp-accent-soft) !important;
    box-shadow: 0 0 0 2px var(--pdp-accent) !important;
}

/* Text options (Gloss, Matte, Layflat…) */
.pb-pdp .variable-items-wrapper .button-variable-item {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 38px;
    padding: 0 14px !important;
}
.pb-pdp .variable-items-wrapper .button-variable-item .variable-item-span,
.pb-pdp .variable-items-wrapper .button-variable-item .variable-item-contents {
    font-size: 13px !important;
    line-height: 1.2;
    padding: 9px 0 !important;
    white-space: nowrap;
    color: var(--pdp-ink);
}
.pb-pdp .variable-items-wrapper .button-variable-item.selected .variable-item-span,
.pb-pdp .variable-items-wrapper .button-variable-item.selected .variable-item-contents {
    color: var(--pdp-accent);
    font-weight: 700;
}

/* Size images */
.pb-pdp .variable-items-wrapper .image-variable-item {
    width: 58px !important;
    height: 58px !important;
    padding: 5px !important;
}

/* Foil colour → circles */
.pb-pdp .variable-items-wrapper .color-variable-item {
    width: 32px !important;
    height: 32px !important;
    padding: 3px !important;
    border-radius: 50% !important;
}
.pb-pdp .variable-items-wrapper .color-variable-item .variable-item-span,
.pb-pdp .variable-items-wrapper .color-variable-item .variable-item-contents {
    border-radius: 50% !important;
}

/* Help button next to the label */
.pb-pdp table.variations .pb-help-btn {
    text-transform: none;
    letter-spacing: 0;
}

/* Quantity + Customize */
.pb-pdp form.variations_form .single_variation_wrap {
    margin-top: 14px;
}

/* ---------------------------------------------------------------
 * 3. Accordions under the button (replaces the tabs below)
 * ------------------------------------------------------------- */
.pb-acc-on .product-footer .woocommerce-tabs { display: none; }   /* in case the theme prints its own tabs */

.pb-acc {
    margin: 20px 0 16px;
    border-top: 1px solid var(--pdp-line, #e8e8e8);
}
.pb-acc__item {
    border-bottom: 1px solid var(--pdp-line, #e8e8e8);
}
.pb-acc__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px;
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: .8em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pdp-ink, #333);
}
.pb-acc__item > summary::-webkit-details-marker { display: none; }
.pb-acc__item > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 1.5px solid var(--pdp-accent, currentColor);
    border-bottom: 1.5px solid var(--pdp-accent, currentColor);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}
.pb-acc__item[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}
.pb-acc__item > summary:focus-visible {
    outline: 2px solid var(--pdp-ink, #1a1a1a);
    outline-offset: 2px;
}
.pb-acc__body {
    padding: 0 2px 18px;
    font-size: .9em;
    line-height: 1.6;
    color: #444;
}
.pb-acc__body h2,
.pb-acc__body h3 {
    font-size: 1.05em;
    margin: 1.2em 0 .4em;
}
.pb-acc__body > :first-child { margin-top: 0; }

/* Specifications table */
.pb-acc__body table.shop_attributes {
    width: 100%;
    margin: 0;
    border: 0;
    font-size: .95em;
}
.pb-acc__body table.shop_attributes th,
.pb-acc__body table.shop_attributes td {
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--pdp-line, #e6e2df);
    background: none;
    text-align: left;
    vertical-align: top;
}
.pb-acc__body table.shop_attributes th {
    width: 38%;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.pb-acc__body table.shop_attributes td p { margin: 0; }

/* Cover picker in the slimmer column: 3 across keeps the tiles a good size */
@media (min-width: 850px) {
    .pb-pdp .product-main .pb-tpl__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: 400px;
    }
}

/* No Category / Tag lines (in case the theme prints them its own way) */
.pb-pdp .product-main .product_meta { display: none; }

/* Pull related products up closer to the product */
.pb-pdp .product-main {
    padding-bottom: 10px;
}
.pb-pdp .product-main .product-info {
    padding-bottom: 0;
}
.pb-pdp .product-footer > .container,
.pb-pdp .product-footer .related,
.pb-pdp .product-footer .related-products-wrapper {
    padding-top: 0;
    margin-top: 0;
}
.pb-pdp .product-footer .related,
.pb-pdp .product-footer .related-products-wrapper {
    padding-top: 24px;
}

/* ---------------------------------------------------------------
 * Sticky images (desktop): the photos stay in view while customers
 * scroll down the options and dropdowns on the right.
 * ------------------------------------------------------------- */
@media (min-width: 850px) {
    .pb-pdp {
        --pdp-sticky-top: 70px;        /* space for the sticky menu bar */
    }
    .pb-pdp .product-main .row > .product-gallery {
        position: -webkit-sticky;
        position: sticky;
        top: var(--pdp-sticky-top);
        align-self: flex-start;
    }
    /* Logged-in admin bar */
    .admin-bar.pb-pdp .product-main .row > .product-gallery {
        top: calc(var(--pdp-sticky-top) + 32px);
    }
}

/* "Clear" link: sits on the right of the option heading instead of floating oddly */
.pb-pdp form.variations_form table.variations tr {
    position: relative;
}
.pb-pdp form.variations_form table.variations .reset_variations {
    position: absolute !important;
    top: 15px;
    right: 0;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pdp-muted);
    text-decoration: underline;
}
.pb-pdp form.variations_form table.variations .reset_variations:hover {
    color: var(--pdp-accent);
}

/* Options with only one choice: compact line, e.g. "SIZES: 55MM" */
.pb-pdp form.variations_form table.variations tr.pb-single-opt {
    padding: 12px 0;
}
.pb-pdp form.variations_form table.variations tr.pb-single-opt th,
.pb-pdp form.variations_form table.variations tr.pb-single-opt td.label {
    margin: 0;
}
.pb-pdp tr.pb-single-opt .variable-items-wrapper,
.pb-pdp tr.pb-single-opt td.value select {
    display: none !important;
}
.pb-pdp .pb-single-value {
    font-weight: 400;
}
.pb-pdp form.pb-all-single .reset_variations {
    display: none !important;
}