/* Consumer Product Page Styles - Redesigned */

body {
    background-color: transparent !important;
}

.product-page {
    padding: 0;
    /* Using Bootstrap's container for width */
    background-color: transparent !important;
}

/* Breadcrumb-strip , staat boven de flex-container met de twee kolommen,
   krijgt dezelfde container-breedte en wat lucht eronder. */
.product-page__breadcrumb {
    padding: 16px 1rem 0;
    margin-bottom: -4px;
}
.product-page__breadcrumb .breadcrumb-list {
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    background: none;
    --bs-breadcrumb-divider: '/';
}
.product-page__breadcrumb .breadcrumb-item,
.product-page__breadcrumb .breadcrumb-item a {
    font-size: 13px;
    color: var(--ub-grey-dark, #6b7280);
    text-decoration: none;
}
.product-page__breadcrumb .breadcrumb-item a:hover {
    color: var(--ub-navy, #0f2044);
}
.product-page__breadcrumb .breadcrumb-item.active {
    color: var(--ub-navy, #0f2044);
    font-weight: 500;
}

.product-page__container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 40px;
    padding: 1rem;
}

.product-page__image {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 300px;
    max-width: none;
}

.product-page__main-image-container {
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Transparent background */
    display: block; /* Changed to block to fill parent width */
    border: 1px solid var(--ub-grey-light); /* Light grey border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: none;
    z-index: 1; /* Ensure proper stacking context */
    font-size: 0; /* Remove any font-based spacing */
    line-height: 0; /* Remove any line-height spacing */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effects */
}

.product-page__main-image {
    display: block; /* Ensures no extra space below the image */
    width: 100%; /* Fill the entire container width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 7px; /* Slightly smaller radius than container to account for border */
}

.product-page__thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-page__thumbnail {
    width: 70px;
    height: 90px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s;
    overflow: hidden;
    flex-shrink: 0;
}

.product-page__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-page__thumbnail:hover,
.product-page__thumbnail--active {
    border-color: var(--ub-blue);
}

.product-page__thumbnail--loading {
    background: linear-gradient(90deg, var(--ub-grey-ultralight) 25%, var(--ub-grey-ultralight) 50%, var(--ub-grey-ultralight) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.product-page__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-page__right-column {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Pod header , sticks to viewport top while options scroll underneath */
.product-page__pod-top {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "eyebrow  vanaf"
        "title    price-block"
        "badges   .";
    row-gap: 6px;
    column-gap: 1rem;
    padding-bottom: 14px;
    position: sticky;
    top: 100px; /* Matches .product-page__image , sticky start slides under the
                   fixed site header (z-index 1000), eliminating the gap. */
    z-index: 5;
    background: var(--ub-white);
    padding-top: 85px;
    margin-top: -85px;
}

/* The pod-top renders twice in the DOM , once above the image
   (mobile) and once inline in the right column (desktop). Use the
   double-class selector so the display rule beats the base
   .product-page__pod-top { display: grid; } above (specificity 0,2,0
   vs 0,1,0) regardless of source order. */
.product-page__pod-top.product-page__pod-top--mobile  { display: none; }
.product-page__pod-top.product-page__pod-top--desktop { display: grid; }
@media (max-width: 768px) {
    /* ~10px between pod-top and image on mobile. The base pod-top has
       padding-bottom: 14px and the container has a 1rem flex gap; on
       mobile we drop the bottom padding to 0 and shrink the container
       gap to 10px so info doesn't float far above the image. */
    .product-page__container { gap: 10px; }
    .product-page__pod-top.product-page__pod-top--mobile  {
        display: grid;
        /* Don't stick the header on mobile , the image scrolls past
           it; no need to occupy fixed real estate. */
        position: static;
        top: auto;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .product-page__pod-top.product-page__pod-top--desktop { display: none; }
    /* Thumbnails are too small to be useful on phones and they push
       the rest of the page below the fold. Tap on the main image to
       cycle colors works well enough on mobile. */
    .product-page__thumbnail-grid { display: none; }
}

.product-page__pod-top::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ub-grey-ultralight);
    pointer-events: none;
}

.product-page__price-block {
    grid-area: price-block;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    align-self: start;
}

/* Fade the whole price column in once the page loads, so any bootstrap
   price recalculation happens invisibly underneath. */
.product-page__price-vanaf,
.product-page__price-block {
    opacity: 0;
    animation: pp-price-fade-in 0.5s ease 1s forwards;
}

@keyframes pp-price-fade-in {
    to { opacity: 1; }
}


.product-page__eyebrow {
    grid-area: eyebrow;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ub-blue);
}

.product-page__eyebrow-pipe { color: var(--ub-grey-ultralight); }
.product-page__eyebrow-sku { color: var(--ub-grey-dark); letter-spacing: 0.08em; }

.product-page__price-vanaf {
    grid-area: vanaf;
    align-self: center;
    justify-self: end;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ub-grey-dark);
}

.product-page__prod-title {
    grid-area: title;
    margin: -5px 0 0 0;
    padding: 0;
    font-family: 'Rammetto One', sans-serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ub-navy);
}

.product-page__price-main {
    display: flex;
    align-items: baseline;
    gap: 2px;
    justify-content: flex-end;
    margin-top: -5px;
}

.product-page__price-currency {
    font-family: 'Rammetto One', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ub-blue);
    line-height: 1;
}

.product-page__price-amount {
    font-family: 'Rammetto One', sans-serif;
    font-size: 42px;
    font-weight: 900;
    color: var(--ub-blue);
    line-height: 1;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Flash colours when the live per-stuk price changes (set via JS for ~900ms) */
.pp-flash--down { animation: pp-flash-down 0.9s ease; }
.pp-flash--up   { animation: pp-flash-up   0.9s ease; }

@keyframes pp-flash-down {
    0%   { color: var(--ub-blue); transform: scale(1); }
    25%  { color: var(--ub-success); transform: scale(1.05); }
    100% { color: var(--ub-blue); transform: scale(1); }
}

@keyframes pp-flash-up {
    0%   { color: var(--ub-blue); transform: scale(1); }
    25%  { color: var(--ub-danger); transform: scale(1.05); }
    100% { color: var(--ub-blue); transform: scale(1); }
}

.product-page__price-incl {
    display: block;
    font-size: 0.8rem;
    color: var(--ub-grey-dark);
    text-align: right;
}

/* Badges */
.product-page__badges {
    grid-area: badges;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.product-page__badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 100px;
}

.product-page__badge--blue {
    background: var(--ub-grey-ultralight);
    color: var(--ub-navy);
    border: 0.5px solid var(--ub-blue);
}

.product-page__badge--amber {
    background: var(--ub-warning-bg);
    color: var(--ub-warning);
    border: 0.5px solid var(--ub-warning-border);
}

/* Description row , inside the pod-top (under badges) we want a
   bit of breathing room above so "Samenstelling" doesn't touch the
   badges, and no padding below since the pod-top already has its
   own bottom padding (also overridden on mobile).
   grid-column: 1 / -1 forces a new row in the pod-top grid; without
   it the spec-row auto-places into the empty "." cell next to badges
   on the desktop layout, putting pills and Samenstelling side by side. */
.product-page__spec-row {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 0;
}

.product-page__spec-val {
    font-size: 0.875rem;
    color: var(--ub-navy);
    line-height: 1.5;
    margin: 0 0 10px;
}

.product-page__spec-composition {
    font-size: 0.875rem;
    color: var(--ub-navy);
    line-height: 1.5;
    margin: 0;
}

.product-page__spec-label {
    font-weight: 600;
    color: var(--ub-navy);
    margin-right: 4px;
}

.product-page__details p {
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.product-page__details .product-info {
    margin: 0 0 3px 0;
    line-height: 1.2;
}

.product-page__details h2 {
    font-size: 1.1rem;
    margin: 12px 0 8px 0;
    font-weight: 600;
}

/* Size Selection Styles */
.product-page__sizes-container {
    margin: 0;
}

.product-page__sizes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.product-page__size-guide {
    color: var(--ub-blue);
    font-size: 0.9rem;
    text-decoration: none;
}

.product-page__size-guide:hover {
    text-decoration: underline;
}

.product-page__sizes-grid {
    display: grid;
    gap: 10px;
    margin: 0;
    width: 100%;
}

/* Grid column classes for even distribution */
.product-page__sizes-grid.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.product-page__sizes-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.product-page__sizes-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.product-page__sizes-grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.product-page__sizes-grid.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.product-page__sizes-grid.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .product-page__sizes-grid.grid-cols-5,
    .product-page__sizes-grid.grid-cols-6 {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Stack title and price on small screens , grid columns too cramped for 38/42px fonts */
    .product-page__pod-top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "title"
            "price-block"
            "badges";
        row-gap: 4px;
        position: static;
        background: transparent;
    }
    .product-page__pod-top::after { display: none; }
    .product-page__price-vanaf { display: none; }
    .product-page__prod-title { font-size: clamp(26px, 7vw, 34px); }
    .product-page__price-block { align-items: flex-start; margin-top: 6px; }
    .product-page__price-main { justify-content: flex-start; margin-top: 0; }
    .product-page__price-amount { font-size: clamp(30px, 9vw, 38px); }
    .product-page__price-currency { font-size: 15px; }
    .product-page__price-incl { text-align: left; }
}

@media (max-width: 480px) {
    .product-page__sizes-grid.grid-cols-4,
    .product-page__sizes-grid.grid-cols-5,
    .product-page__sizes-grid.grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-page__size-box {
    position: relative;
}

.product-page__size-button {
    width: 100%;
    padding: 10px 5px;
    background-color: var(--ub-white);
    border: 1px solid var(--ub-grey-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

.product-page__size-button:hover {
    background-color: var(--ub-grey-ultralight);
    border-color: var(--ub-grey-medium);
}

.product-page__size-button--active {
    border-color: var(--ub-navy);
    background-color: rgba(0, 41, 61, 0.06);
}

.product-page__size-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.product-page__stock-status {
    font-size: 0.75rem;
    color: var(--ub-grey-dark);
    margin-top: 4px;
}

.product-page__size-button--out-of-stock {
    background-color: var(--ub-grey-ultralight);
    color: var(--ub-grey-medium);
    cursor: not-allowed;
    border-color: var(--ub-grey-light);
}

.product-page__size-button--out-of-stock .product-page__stock-status {
    color: var(--ub-danger);
}

/* Low stock text color instead of border */
.product-page__stock-status--low-stock {
    color: var(--ub-warning);
    font-weight: 500;
}

.product-page__size-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: var(--ub-magenta);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    display: none;
}

.product-page__size-badge--visible {
    display: flex;
}

/* Quantity Selector Styles */
.product-page__quantity-selector {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 5px;
    background-color: white;
    border: 1px solid var(--ub-grey-light);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none;
}

.product-page__quantity-selector--visible {
    display: block;
}

.product-page__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
}

.product-page__quantity-decrease,
.product-page__quantity-increase {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ub-grey-light);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    /* iOS Safari zooms on double-tap; rapid +/- taps to enter a
       quantity look exactly like a zoom gesture. touch-action:
       manipulation tells the browser this element ignores the
       double-tap-to-zoom heuristic, so taps stay snappy and the
       page doesn't bounce in/out of zoom. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.product-page__quantity-decrease:hover,
.product-page__quantity-increase:hover {
    background-color: var(--ub-grey-ultralight);
}

.product-page__quantity-decrease:active,
.product-page__quantity-increase:active {
    background-color: var(--ub-grey-ultralight);
}

.product-page__quantity-value {
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Color Selection Message */
.product-page__color-selection-message {
    background-color: var(--ub-danger-bg);
    color: var(--ub-danger);
    padding: 10px 15px;
    border-radius: 8px;
    margin: 10px 0 15px 0;
    font-weight: 500;
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Order Summary Styles */
.product-page__order-summary {
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background-color: transparent;
    display: contents; /* Make wrapper transparent to flexbox */
}

/* Order Summary Table Styles */
.order-summary__light-blue-bg {
    background-color: var(--ub-grey-ultralight) !important;
}

.order-summary__subtotal-row {
    background-color: rgba(0, 41, 61, 0.03) !important;
    border-top: 2px solid var(--ub-navy);
}

.order-summary__vat-row {
    background-color: var(--ub-grey-ultralight) !important;
}

.order-summary__total-row {
    border-top: 2px solid var(--ub-navy);
}

.order-summary__table thead th {
    background-color: var(--ub-grey-ultralight) !important;
    font-weight: 600;
    color: var(--ub-navy);
}

.product-page__order-summary-content {
    margin-bottom: 16px;
}

.product-page__no-selection {
    color: var(--ub-grey-dark);
    font-style: italic;
}

.product-page__selection-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.product-page__selection-price {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: var(--ub-grey-dark);
    margin-left: 20px;
}

.product-page__selection-total {
    margin-top: 12px;
    padding-top: 12px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--ub-blue);
}

/* Divider styles removed - using content-block__divider instead */

.product-page__discount-info {
    margin-top: 15px;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    color: var(--ub-navy);
    font-weight: 500;
}

.product-page__discount-amount {
    color: var(--ub-danger);
    font-weight: 600;
}

.product-page__incentive-message {
    padding: 0;
    color: var(--ub-warning);
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.product-page__incentive-message strong {
    color: var(--ub-warning);
}

.product-page__final-price {
    margin-top: 15px;
    padding: 12px;
    background-color: var(--ub-grey-ultralight);
    border: 1px solid var(--ub-grey-ultralight);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-page__final-price-label {
    color: var(--ub-blue);
}

.product-page__final-price-value {
    color: var(--ub-navy);
    font-size: 1.2rem;
}

.product-page__add-to-cart {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: var(--ub-magenta);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.product-page__add-to-cart:hover {
    background-color: var(--ub-magenta-hover);
}

.product-page__add-to-cart:disabled {
    background-color: rgba(206, 41, 132, 0.35);
    cursor: not-allowed;
}

.product-page__color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.product-page__color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid white;
    transition: border-color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    /* overflow:visible so the ::after tooltip can extend beyond the swatch.
       The inner colored wrapper has its own overflow:hidden+border-radius
       so the rotating-colour clip-paths still clip correctly. */
    overflow: visible;
    position: relative;
}

/* Instant tooltip above the swatch , shows the color name without the
   browser-native delay. Pointer-events:none so the tooltip doesn't steal
   hover from the swatch itself. */
.product-page__color-swatch::after {
    content: attr(data-color);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.95);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-out;
    pointer-events: none;
    z-index: 10;
}
.product-page__color-swatch::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(17, 24, 39, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-out;
    pointer-events: none;
    z-index: 10;
}
.product-page__color-swatch:hover::after,
.product-page__color-swatch:hover::before,
.product-page__color-swatch:focus-visible::after,
.product-page__color-swatch:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.product-page__color-swatch > div {
    border: 1px solid var(--ub-grey-light);
    border-radius: 50%;
    position: relative;
    width: 100%;
    height: 100%;
}

.product-page__color-swatch:hover {
    border-color: var(--ub-grey-light);
}

.product-page__color-swatch--active {
    border-color: var(--ub-grey-light);
}

.product-page__stock-info {
    margin: 0;
    background-color: var(--ub-grey-ultralight);
    border-radius: 8px;
}

/* Hide the stock info div when it's empty */
.product-page__stock-info:empty {
    display: none;
}

.product-page__stock-info table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.product-page__stock-info th,
.product-page__stock-info td {
    padding: 12px 20px;
    text-align: center;
    border: none;
    border-bottom: 1px solid var(--ub-grey-ultralight);
}

.product-page__stock-info th {
    background-color: var(--ub-grey-ultralight);
    font-weight: 600;
    color: var(--ub-grey-dark);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.product-page__stock-info tr:last-child td {
    border-bottom: none;
}

.product-page__stock-info tr:hover td {
    background-color: var(--ub-grey-ultralight);
}

.product-page__stock-info tr:nth-child(even) {
    background-color: var(--ub-grey-ultralight);
}

.product-page__accordion {
    margin: 0;
    border: 1.5px solid var(--ub-grey-light);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--ub-grey-ultralight);
    width: 100%;
    box-sizing: border-box;
}

.product-page__accordion-header {
    padding: 15px 20px;
    background-color: var(--ub-grey-ultralight);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ub-navy);
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid var(--ub-grey-light);
}

.product-page__accordion-header::after {
    content: '›';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.product-page__accordion-header.active::after {
    transform: translateY(-50%) rotate(-90deg);
}

.product-page__accordion-content {
    padding: 15px 20px;
    display: none;
    background-color: var(--ub-grey-ultralight);
}

/* Responsive adjustments for accordions */
@media (max-width: 767px) {
    .product-page__accordion-header {
        padding: 12px 15px;
    }
    
    .product-page__accordion-content {
        padding: 12px 15px;
    }
}

.product-page__description-table {
    width: 100%;
    border-collapse: collapse;
}

.product-page__description-table th,
.product-page__description-table td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid var(--ub-grey-ultralight);
}

.product-page__description-table th {
    background-color: var(--ub-grey-ultralight);
    font-weight: 600;
    width: 30%;
    color: var(--ub-grey-dark);
}

.product-page__description-table tr:last-child td,
.product-page__description-table tr:last-child th {
    border-bottom: none;
}

/* Tooltip styles */
.product-tooltip {
    position: absolute;
    background-color: var(--ub-white);
    color: var(--ub-navy);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    max-width: 200px;
    text-align: center;
}

.product-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--ub-white);
}

.product-tooltip.visible {
    opacity: 1;
}

/* Zoom effect , jQuery Zoom creates a .zoomImg that must be LARGER than
   the container to produce the magnification effect. Never constrain it
   with max-width/max-height or the zoom will appear to do nothing. */
.zoomImg {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair !important;
    z-index: 10;
    background-color: transparent !important;
    background: none !important;
    pointer-events: none;
    /* Override Bootstrap/reset img { max-width: 100% } so jQuery Zoom can
       size the image larger than the container (required for magnification) */
    max-width: none !important;
    max-height: none !important;
}

/* Zoom control button */
.zoom-control {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 100;
    user-select: none;
}

/* Font Awesome icon styling */
.zoom-control i {
    font-size: 24px;
    color: var(--ub-grey-ultralight);
    border: 3px solid white;
    border-radius: 50%;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.5); /* Adds contrast behind the icon */
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .product-page__container {
        flex-direction: row;
    }
}

@media (max-width: 1024px) {
    .product-page__image {
        flex: 1;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .product-page__container {
        flex-direction: column;
    }

    .product-page__image,
    .product-page__details {
        width: 100%;
        max-width: 100%;
    }

    
    .product-page__thumbnail {
        width: 60px;
        height: 80px;
    }
}