.product-detail-page,
.product-detail-page *,
.product-detail-page *::before,
.product-detail-page *::after {
    box-sizing: border-box;
}
.product-size-table th:nth-child(3),
.product-size-table td:nth-child(3) {
    border-left: 2px dashed var(--product-primary);
}
/* ---- Centre divider: bold vertical line between the two column-pairs ---- */
.product-size-table th:nth-child(3) {
    border-left: 2px dashed rgba(255, 255, 255, 1);
}

.product-size-table td:nth-child(3) {
    border-left: 2px dashed var(--product-primary);
}
.product-size-table td:nth-child(3) {
    position: relative;
    padding-left: 42px;
    border-left: 2px solid var(--product-primary);
}

.product-size-table td:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 12px;
    height: 11px;
    background: var(--product-primary);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    transform: translateY(-50%);
}

.product-detail-page {
    --product-primary: #102D3B;
    --product-dark: #222222;
    --product-text: #444444;
    --product-muted: #757575;
    --product-light: #f7f7f7;
    --product-border: #e6e6e6;
    --product-white: #ffffff;
    --product-whatsapp: #25d366;
    --product-whatsapp-ink: #0b2e1a; /* dark text on WhatsApp green: white on #25D366 is unreadable */


    padding-block: clamp(28px, 5vw, 64px);
    background: var(--product-light);
    color: var(--product-text);
    font-family: var(--product-font);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

/* Low-specificity resets: every class below overrides them */
.product-detail-page :where(h1, h2, p, figure) {
    margin: 0;
}

.product-detail-page :where(img, svg) {
    display: block;
    max-width: 100%;
}

.product-detail-page a:focus-visible,
.product-detail-page [tabindex]:focus-visible {
    outline: 2px solid var(--product-dark);
    outline-offset: 3px;
}

.product-detail-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

/* ---- Page heading above the list (optional) ---- */
.product-page-header {
    margin-bottom: clamp(22px, 3vw, 34px);
}

.product-page-title {
    color: var(--product-dark);
    font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.625rem); /* 30px -> 42px */
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
}

/* Short red line + longer hairline, used under the page title and each product name */
.product-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.product-title-line::before {
    content: "";
    width: 44px;
    height: 3px;
    background: var(--product-primary);
}

.product-title-line::after {
    content: "";
    width: 72px;
    height: 1px;
    background: #cfcfcf;
}

/* ==========================================================================
   Card
   The image fills one side edge to edge; name, sizes and button fill the
   other. The image side alternates: 1st card left, 2nd right, 3rd left ...
   ========================================================================== */
.product-showcase {
    display: grid;
    grid-template-columns: minmax(260px, .64fr) minmax(0, 1fr);
    grid-template-areas: "visual content";
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    background: var(--product-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    overflow: hidden; /* clips the image to the rounded corners */
}

/* One below another */
.product-showcase + .product-showcase {
    margin-top: clamp(18px, 2.4vw, 28px);
}

.product-visual {
    grid-area: visual;
}

.product-content {
    grid-area: content;
}

/* Every second card: image on the right.
   Counts the <article class="product-showcase"> elements next to each other.
   Add class "product-showcase--reverse" to force it on any single card. */
.product-showcase:nth-of-type(even),
.product-showcase--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .64fr);
    grid-template-areas: "content visual";
}

/* ---- Image: fills its side completely, no frame, border or padding ---- */
.product-visual {
    display: flex;
}

.product-image-frame {
    position: relative;
    flex: 1;
    min-height: 300px;
    background: #eeeeee; /* shows only while the photo loads */
    overflow: hidden;
}

.product-image-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* full height and width; edges may be cropped */
    object-position: center;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* Hover: slow zoom, a soft dark veil, and two red corner brackets drawing in */
.product-visual {
    position: relative;
}

.product-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.product-image-frame::before,
.product-image-frame::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 0;
    height: 0;
    border: 0 solid #fff;
    opacity: 0;
    transition: width .45s ease, height .45s ease, opacity .25s ease;
    pointer-events: none;
}

.product-image-frame::before {
    top: 16px;
    left: 16px;
    border-top-width: 3px;
    border-left-width: 3px;
}

.product-image-frame::after {
    right: 16px;
    bottom: 16px;
    border-right-width: 3px;
    border-bottom-width: 3px;
}

@media (hover: hover) {
    .product-visual:hover .product-image-frame img {
        transform: scale(1.07);
    }

    .product-visual:hover::after {
        opacity: 1;
    }

    .product-visual:hover .product-image-frame::before,
    .product-visual:hover .product-image-frame::after {
        width: 42px;
        height: 42px;
        opacity: 1;
    }
}

/* ---- Right: name, sizes, WhatsApp button ---- */
.product-content {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.6vw, 34px);
}

.product-title {
    color: var(--product-dark);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); /* 24px -> 30px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.product-size-section {
    margin-top: clamp(16px, 2vw, 22px);
}

/* Only this box scrolls sideways if a table is genuinely wide; the page never does */
.product-table-scroll {
    border: 1px solid var(--product-border);
    border-radius: 10px;
    overflow-x: auto;
}

.product-size-table,
.product-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    text-align: center;
}

.product-size-table th,
.product-spec-table th {
    padding: 10px 20px;
    background: var(--product-primary);
    color: var(--product-white);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

.product-size-table td,
.product-spec-table td {
    padding: 9px 12px;
    border-top: 1px solid #eeeeee;
    color: var(--product-dark);
    font-weight: 500;
}

.product-size-table tbody tr:first-child td,
.product-spec-table tbody tr:first-child td {
    border-top: 0;
}

/* Small red hexagon on the first cell of every row */
.product-size-table td:first-child,
.product-spec-table td:first-child {
    position: relative;
    padding-left: 40px;
}

.product-size-table td:first-child::before,
.product-spec-table td:first-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 12px;
    height: 11px;
    background: var(--product-primary);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    transform: translateY(-50%);
}

/* Secondary value inside a cell, e.g. the inch size */
.product-size-table td span,
.product-spec-table td span {
    margin-left: 4px;
    color: var(--product-muted);
    font-weight: 400;
}

.product-size-table tbody tr,
.product-spec-table tbody tr {
    background: var(--product-white);
    transition: background-color .2s ease;
}

.product-size-table tbody tr:nth-child(even),
.product-spec-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.product-size-table tbody tr:hover,
.product-spec-table tbody tr:hover {
    background: rgba(16, 45, 59, 0.09);
}

.product-spec-table td {
    white-space: nowrap;
}

/* WhatsApp button: pinned to the bottom right of the card */
.product-whatsapp-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: clamp(16px, 2vw, 22px);
}

.product-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px 0 8px;
    border-radius: 8px;
    background: var(--product-whatsapp);
    box-shadow: 0 8px 20px rgba(37, 211, 102, .20);
    color: var(--product-whatsapp-ink);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-whatsapp-btn:hover {
    color: var(--product-whatsapp-ink);
    box-shadow: 0 12px 25px rgba(37, 211, 102, .28);
    transform: translateY(-2px);
}

.product-whatsapp-btn .whatsapp-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--product-white);
    color: #0e7a40;
}

.product-whatsapp-btn .whatsapp-icon svg {
    width: 22px;
    height: 22px;
}

/* Text for screen readers only (names the product in each button) */
.product-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ==========================================================================
   Mobile: below 768px (image always on top, then name, sizes, button)
   ========================================================================== */
@media (max-width: 767.98px) {
    .product-showcase,
    .product-showcase:nth-of-type(even),
    .product-showcase--reverse {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "visual"
            "content";
    }

    .product-image-frame {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .product-whatsapp-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-detail-page *,
    .product-detail-page *::before,
    .product-detail-page *::after {
        transition: none !important;
    }

    .product-visual:hover .product-image-frame img,
    .product-whatsapp-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   Click to zoom
   Needs hardwareProductZoom.js. The script adds the class
   "product-zoom-ready" to .product-detail-page, so none of this shows if the
   script is missing. Clicking a product image opens the whole, uncropped
   photo in a full-screen viewer; Esc, the close button or a click outside
   the photo closes it.
   ========================================================================== */
.product-zoom-ready .product-image-frame {
    cursor: zoom-in;
}

/* Magnifier badge, top right of the image (also the cue on touch screens) */
.product-zoom-ready .product-visual::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
    pointer-events: none;
    transition: background-color .25s ease;
}

@media (hover: hover) {
    .product-zoom-ready .product-visual:hover::before {
        background-color: var(--product-primary);
    }
}

/* Keyboard focus on the image */
.product-detail-page .product-image-frame:focus-visible {
    outline: 3px solid var(--product-primary);
    outline-offset: -6px;
}

/* ---- The viewer ---- */
.product-zoom {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.product-zoom[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-zoom::backdrop {
    background: rgba(10, 10, 10, .9);
}

.product-zoom-image {
    width: auto;
    height: auto;
    max-width: calc(100vw - clamp(24px, 8vw, 120px));
    max-height: calc(100vh - clamp(24px, 8vw, 120px));
    max-height: calc(100dvh - clamp(24px, 8vw, 120px));
    object-fit: contain; /* the whole photo, never cropped */
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    animation: product-zoom-in .25s ease;
}

@keyframes product-zoom-in {
    from {
        opacity: 0;
        transform: scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.product-zoom-close {
    position: absolute;
    top: clamp(12px, 2.5vw, 24px);
    right: clamp(12px, 2.5vw, 24px);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.product-zoom-close:hover {
    border-color: var(--product-primary);
    background: var(--product-primary);
}

.product-zoom-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.product-zoom-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* The page behind does not scroll while the viewer is open */
html:has(.product-zoom[open]) {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .product-zoom-image {
        animation: none;
    }
}

/* ==========================================================================
   Scroll animations
   Needs hardwareProductZoom.js (the same script as the zoom). The script
   adds "product-reveal-ready" to .product-detail-page and then "is-visible"
   to each card when it scrolls into view, so:
     - nothing here applies, and nothing is hidden, if the script is missing
     - it works in every current browser, and inside any page wrapper

   Each card fades and rises into place, the photo settles back from a
   slight zoom, and the name, line, size table and button follow one after
   another. Only opacity, translate and scale are animated, which browsers
   can run smoothly. translate / scale are used on purpose (not "transform")
   so the hover effects above, which use "transform", keep working.

   The transitions sit on the "is-visible" rules only: hiding is instant,
   revealing is animated.
   ========================================================================== */

/* 1. The card */
.product-reveal-ready .product-showcase {
    opacity: 0;
    translate: 0 56px;
}

.product-reveal-ready .product-showcase.is-visible {
    opacity: 1;
    translate: none;
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
    translate .9s cubic-bezier(.22, .61, .36, 1);
}

/* 2. The photo eases back from a slight zoom.
      (The transform part of the transition is the existing hover zoom.) */
.product-reveal-ready .product-showcase .product-image-frame img {
    scale: 1.16;
}

.product-reveal-ready .product-showcase.is-visible .product-image-frame img {
    scale: 1;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1),
    scale 1.6s cubic-bezier(.22, .61, .36, 1);
}

/* 3. Name, line, size table, button: one after another */
.product-reveal-ready .product-content > * {
    opacity: 0;
    translate: 0 26px;
}

.product-reveal-ready .is-visible .product-content > * {
    opacity: 1;
    translate: none;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
    translate .7s cubic-bezier(.22, .61, .36, 1);
}

.product-reveal-ready .is-visible .product-content > :nth-child(1) {
    transition-delay: .20s;
}

.product-reveal-ready .is-visible .product-content > :nth-child(2) {
    transition-delay: .32s;
}

.product-reveal-ready .is-visible .product-content > :nth-child(3) {
    transition-delay: .44s;
}

.product-reveal-ready .is-visible .product-content > :nth-child(n+4) {
    transition-delay: .56s;
}

/* Visitors who asked their device to reduce motion (on Windows this is the
   "Animation effects" switch being off) get a plain fade: no movement and
   no zoom. This overrides the "transition: none" rule further up. */
@media (prefers-reduced-motion: reduce) {
    .product-reveal-ready .product-showcase,
    .product-reveal-ready .product-content > * {
        translate: none;
    }

    .product-reveal-ready .product-showcase .product-image-frame img {
        scale: 1;
    }

    .product-reveal-ready .product-showcase.is-visible,
    .product-reveal-ready .is-visible .product-content > * {
        transition: opacity .6s ease !important;
        transition-delay: 0s !important;
    }
}

/* Printing: always fully visible */
@media print {
    .product-reveal-ready .product-showcase,
    .product-reveal-ready .product-content > * {
        opacity: 1 !important;
        translate: none !important;
    }
}