/* Consumer Product Page Styles - Redesigned */

body {
    background-color: transparent !important;
}

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

.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 #dddddd; /* 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: #007bff;
}

.product-page__thumbnail--loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 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: #fff;
    padding-top: 85px;
    margin-top: -85px;
}

.product-page__pod-top::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ub-grey-light, #E5E9F0);
    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: #378ADD;
}

.product-page__eyebrow-pipe { color: #B5D4F4; }
.product-page__eyebrow-sku { color: #888; 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: #888;
}

.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: #111;
}

.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: #185FA5;
    line-height: 1;
}

.product-page__price-amount {
    font-family: 'Rammetto One', sans-serif;
    font-size: 42px;
    font-weight: 900;
    color: #185FA5;
    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: #185FA5; transform: scale(1); }
    25%  { color: #1d7f3e; transform: scale(1.05); }
    100% { color: #185FA5; transform: scale(1); }
}

@keyframes pp-flash-up {
    0%   { color: #185FA5; transform: scale(1); }
    25%  { color: #c0392b; transform: scale(1.05); }
    100% { color: #185FA5; transform: scale(1); }
}

.product-page__price-incl {
    display: block;
    font-size: 0.8rem;
    color: #888;
    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: #E6F1FB;
    color: #0C447C;
    border: 0.5px solid #85B7EB;
}

.product-page__badge--amber {
    background: #FAEEDA;
    color: #633806;
    border: 0.5px solid #FAC775;
}

/* Description row */
.product-page__spec-row {
    margin-top: -1px;
    padding: 0 0 1rem;
}

.product-page__spec-val {
    font-size: 0.875rem;
    color: #333;
    line-height: 1.5;
    margin: 0 0 10px;
}

.product-page__spec-composition {
    font-size: 0.875rem;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

.product-page__spec-label {
    font-weight: 600;
    color: #333;
    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-bright-blue, #00AAFF);
    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: #fff;
    border: 1px solid #dee2e6;
    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: #f8f9fa;
    border-color: #adb5bd;
}

.product-page__size-button--active {
    border-color: var(--ub-navy, #00293D);
    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: #6c757d;
    margin-top: 4px;
}

.product-page__size-button--out-of-stock {
    background-color: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
    border-color: #dee2e6;
}

.product-page__size-button--out-of-stock .product-page__stock-status {
    color: #dc3545;
}

/* Low stock text color instead of border */
.product-page__stock-status--low-stock {
    color: #ff9800;
    font-weight: 500;
}

.product-page__size-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: var(--ub-magenta, #CE2984);
    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 #dee2e6;
    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 #dee2e6;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.product-page__quantity-decrease:hover,
.product-page__quantity-increase:hover {
    background-color: #f8f9fa;
}

.product-page__quantity-decrease:active,
.product-page__quantity-increase:active {
    background-color: #e9ecef;
}

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

/* Color Selection Message */
.product-page__color-selection-message {
    background-color: #fee2e2;
    color: #b91c1c;
    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: #f3f9ff !important;
}

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

.order-summary__vat-row {
    background-color: #f3f9ff !important;
}

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

.order-summary__table thead th {
    background-color: #e5e7eb !important;
    font-weight: 600;
    color: #374151;
}

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

.product-page__no-selection {
    color: #6c757d;
    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: #555;
    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 #97B5F6;
}

/* 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, #00293D);
    font-weight: 500;
}

.product-page__discount-amount {
    color: #dc2626;
    font-weight: 600;
}

.product-page__incentive-message {
    padding: 0;
    color: #b45309;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.product-page__incentive-message strong {
    color: #92400e;
}

.product-page__final-price {
    margin-top: 15px;
    padding: 12px;
    background-color: #f0f9ff;
    border: 1px solid #e0f2fe;
    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: #0369a1;
}

.product-page__final-price-value {
    color: #0c4a6e;
    font-size: 1.2rem;
}

.product-page__add-to-cart {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: var(--ub-magenta, #CE2984);
    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-dark, #a82070);
}

.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: hidden;
    position: relative;
}

.product-page__color-swatch > div {
    border: 1px solid #cccccc;
    border-radius: 50%;
    position: relative;
    width: 100%;
    height: 100%;
}

.product-page__color-swatch:hover {
    border-color: #dbdbdb;
}

.product-page__color-swatch--active {
    border-color: #dbdbdb;
}

.product-page__stock-info {
    margin: 0;
    background-color: #f8f9fa;
    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 #f1f1f1;
}

.product-page__stock-info th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    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: #f8f9fa;
}

.product-page__stock-info tr:nth-child(even) {
    background-color: #fcfcfc;
}

.product-page__accordion {
    margin: 0;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    width: 100%;
    box-sizing: border-box;
}

.product-page__accordion-header {
    padding: 15px 20px;
    background-color: #f0f2f5;
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #dee2e6;
}

.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: #f8f9fa;
}

/* 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 #f1f1f1;
}

.product-page__description-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    width: 30%;
    color: #495057;
}

.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: #fff;
    color: #333;
    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 #fff;
}

.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: #ebebeb;
    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;
    }
}