body { margin: 0; font-family: sans-serif; background: #fff; padding-bottom: 70px; overflow-x: hidden; }

/* The full site header (added to match the rest of the storefront) is
   desktop-only on this page - on mobile the compact back/cart bar below
   stays, same as before this page had the full header at all. */
.ls-header { display: none; }

.pd-topbar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #fff; z-index: 10; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pd-back-btn { background: none; border: none; font-size: 22px; cursor: pointer; }
.pd-cart-btn { text-decoration: none; color: #000; font-size: 16px; }
.pd-gallery { width: 100%; background: #fff; position: relative; }
.pd-gallery-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.pd-gallery-scroll img { flex: 0 0 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; object-fit: cover; display: block; }
.pd-gallery-counter { position: absolute; bottom: 16px; right: 16px; background: rgba(0,0,0,0.6); color: #fff; padding: 8px 18px; border-radius: 20px; font-size: 16px; font-weight: 600; cursor: pointer; }
.pd-gallery-scroll img { cursor: pointer; }
.pd-fullscreen-viewer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 1000; }
.pd-fullscreen-viewer.hidden { display: none; }
.pd-fullscreen-close { position: absolute; top: 16px; left: 16px; z-index: 1001; background: rgba(0,0,0,0.45); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; }
.pd-fullscreen-share { position: absolute; top: 16px; right: 16px; z-index: 1001; background: rgba(0,0,0,0.45); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; }
.pd-fullscreen-counter { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1001; background: rgba(0,0,0,0.45); color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.pd-fullscreen-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; -webkit-overflow-scrolling: touch; }
.pd-fullscreen-scroll img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; }
.pd-info { padding: 16px; }
.pd-info h1 { font-size: 20px; margin: 8px 0; }
.pd-price { font-size: 22px; color: #16a34a; font-weight: bold; margin: 8px 0; }
.pd-selector-section.hidden { display: none; }
.pd-selector-row { margin: 16px 0; }
.pd-selector-label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 600; }
.pd-color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-color-swatch { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 3px solid #eee; cursor: pointer; box-sizing: border-box; position: relative; }
.pd-color-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-color-swatch.selected { border-color: #0f1b3d; box-shadow: 0 0 0 2px rgba(15,27,61,0.25); }
.pd-selected-color-name { font-size: 13px; color: #666; margin-left: 4px; }
.pd-size-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-size-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid #ccc; background: #fff; font-size: 14px; cursor: pointer; }
.pd-size-btn.selected { border-color: #0f1b3d; color: #0f1b3d; font-weight: bold; }
.pd-size-btn.disabled { color: #ccc; border-color: #eee; text-decoration: line-through; cursor: not-allowed; }
.pd-section { margin-top: 24px; }
.pd-section h2 { font-size: 16px; margin-bottom: 8px; }
.pd-specs-table { width: 100%; border-collapse: collapse; }
.pd-specs-table td { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.pd-spec-label { color: #666; width: 40%; }
.pd-spec-value { color: #111; font-weight: 500; }
.pd-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 10px 16px; box-shadow: 0 -1px 6px rgba(0,0,0,0.1); }
.pd-add-to-cart-btn { width: 100%; padding: 14px; background: #f5c518; color: #0f1b3d; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; }

/* ---- Product details card: Temu tuning ---- */
.pd-title { font-size: 21px; font-weight: 700; }
.pd-action { font-size: 16px; font-weight: 600; }
.pd-grid { padding: 18px 0 10px; }
.pd-cell { border-right: none; position: relative; padding: 0 10px; }
.pd-cell::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 58%; background: #e6e6e6; }
.pd-cell:last-child::after { display: none; }
.pd-cell-label { font-size: 14px; color: #999; font-weight: 400; margin-bottom: 6px; }
.pd-cell-value { font-size: 17px; font-weight: 700; color: #000; line-height: 1.3; }
.pd-see-all { padding: 18px 0 16px; font-size: 16px; color: #888; }
.pd-item-id { font-size: 12px; color: #aaa; margin: 2px 0 6px; }

/* ---- Desktop layout ----
   Below 900px this file's mobile design is untouched. Above it, the gallery
   and the buying panel sit side by side, and the sticky bar becomes a normal
   button inside the panel. */

@media (min-width: 900px) {
    body { padding-bottom: 0; background: #fff; }

    /* The full site header (added to this page to match the rest of the
       storefront) already provides a home link and a cart icon, so the
       mobile-style back/cart bar is redundant once there's room for the
       real header. It stays for mobile below this breakpoint. */
    .pd-topbar {
        display: none;
    }

    .ls-header {
        display: block;
    }

    .pd-gallery {
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        overflow: hidden;
    }

    .pd-gallery-scroll img {
        object-fit: contain;
        background: #fff;
        max-height: 560px;
    }

    .pd-info { padding: 0; }
    .pd-info h1 { font-size: 26px; line-height: 1.3; margin: 6px 0 14px; }
    .pd-price { font-size: 30px; margin: 14px 0 20px; }

    /* The mobile sticky bar has no place on desktop; the panel gets its own
       button so the call to action sits with the price and options. */
    .pd-sticky-bar {
        position: static;
        box-shadow: none;
        padding: 0;
        max-width: none;
        margin: 22px 0 0;
    }

    .pd-sticky-bar .pd-add-to-cart-btn {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .pd-size-btn { padding: 10px 20px; }
    .pd-color-swatch { width: 64px; height: 64px; }
}

@media (min-width: 1600px) {
    .pd-gallery-scroll img { max-height: 620px; }
}

/* Breadcrumbs and thumbnail rail: desktop only. On a phone the swipe gallery
   and the back button already do this job. */
.pd-breadcrumbs { display: none; }
.pd-thumbs { display: none; }

@media (min-width: 900px) {
    .pd-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        max-width: 1800px;
        margin: 0 auto;
        padding: 20px 48px 0;
        font-size: 13.5px;
        color: #6b7280;
    }

    .pd-breadcrumbs a { color: #6b7280; text-decoration: none; }
    .pd-breadcrumbs a:hover { color: #1a1a2e; text-decoration: underline; }
    .pd-breadcrumbs .pd-crumb-sep { color: #d1d5db; }
    .pd-breadcrumbs .pd-crumb-current { color: #111827; font-weight: 600; }

    .pd-gallery-col { min-width: 0; }

    /* Thumbnails in a row under the main photo (Lulu-style). */
    .pd-thumbs {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        padding: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pd-thumbs::-webkit-scrollbar { display: none; }

    .pd-thumb {
        width: 78px;
        height: 78px;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #e5e7eb;
        background: #fff;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

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

    .pd-thumb.selected { border-color: #1a1a2e; box-shadow: 0 0 0 1px #1a1a2e; }
}

/* Descriptions are pasted with their own line breaks. textContent keeps the
   characters but HTML collapses the whitespace, so preserve it here. */
#pd-description {
    white-space: pre-line;
    line-height: 1.65;
}

/* ---- Product description blocks ---- */
/* Grid cells keep their own left alignment; only section headings centre. */

/* Small caption text under a standalone Image block - optional, shown to
   shoppers (unlike alt text). Deliberately small/gray, unlike the bolder
   .pdb-grid-caption used for multi-column grid images. */

/* Never crop a description image — letterbox if the stored ratio is off */

/* Video block - same width/rounding treatment as .pdb-img, just with a
   16:9 box reserved up front (set inline via style.aspectRatio) so the
   iframe/video doesn't jump the layout on load. */

/* Link block - a bordered pill/button rather than plain underlined text,
   so it reads as a tappable action inside the rich content rather than
   stray blue text. */

/* Full-width (edge-to-edge) Image block, Lulu-style: breaks out of
   .pd-desc-blocks' max-width and of any padding on its ancestors (the
   desktop .pd-layout grid included) to span the full viewport width -
   the standard "100vw + negative margin" breakout, which works regardless
   of how deeply the block is nested. body's overflow-x:hidden above is
   there so a scrollbar's few extra pixels of vw never cause a sideways
   scroll on desktop. */

/* Full-width (edge-to-edge) Grid section - same breakout technique as
   .pdb-img-full, applied to the whole multi-column block (Ryan, Sept 2026:
   grid images had no full-width option at all, which is why images placed
   via the Grid block never covered the full screen no matter what). Side
   padding keeps the images from touching the absolute viewport edge with
   zero breathing room; the inter-column gap is unaffected. */


/* Description blocks: pasted lists keep numbering, ticks and levels. */


/* Description / Specifications tabs sit under the gallery in the left column
   on desktop. On mobile they stack in normal document order. */


/* Price and warranty share a line; the warranty badge is optional and simply
   drops out of the row when hidden. */
.pd-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.pd-price-row .pd-price {
    margin: 8px 0;
}

.pd-price-row .pd-warranty {
    margin: 0;
}


/* Multi-column feature grid. Column count comes from the block payload via
   --pdb-grid-cols; anything above two collapses to two on a phone so the
   images never shrink below a usable size. */

/* Per-item video (grid block) - same 16:9 reserved box as the standalone
   video block, sized to the column instead of the full width. */

/* Per-item link (grid block). "Whole tile" keeps the cell's vertical
   stacking (media/caption/body) since an <a> is inline by default; "media"
   or "caption" only wraps that one piece, so it stays inline-ish there. */

/* A heading that introduces a tick list stays left-aligned with its list. */



/* ------------------------------------------------------------------
   Inline detail column. Reviews, description and specifications stack
   in one scroll instead of hiding behind tabs.
   ------------------------------------------------------------------ */

.pd-section { margin: 0; }

.pd-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f1b3d;
    margin: 0 0 14px;
}

/* Rating line in the buy box, fed by the reviews summary. */
.pd-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    font-size: 14px;
}

.pd-rating-value { font-weight: 700; color: #0f1b3d; }
.pd-rating-count { color: #6b7280; text-decoration: underline; }
.pd-rating-empty { color: #9ca3af; font-size: 13px; }

.pd-star { color: #d1d5db; letter-spacing: 1px; }
.pd-star.filled { color: #E8B33A; }

/* Summary block: big average on the left, star breakdown on the right. */
.pd-review-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding: 18px;
    background: #fafafa;
    border-radius: 12px;
    margin-bottom: 22px;
}

.pd-review-average {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.pd-review-average-value {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: #0f1b3d;
}

.pd-review-average-stars { margin-top: 6px; letter-spacing: 2px; }

.pd-review-average-count {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.pd-review-breakdown {
    flex: 1 1 240px;
    min-width: 0;
}

.pd-breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.pd-breakdown-label { width: 30px; flex-shrink: 0; }

.pd-breakdown-track {
    flex: 1;
    height: 7px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.pd-breakdown-fill {
    display: block;
    height: 100%;
    background: #E8B33A;
}

.pd-breakdown-count { width: 26px; text-align: right; flex-shrink: 0; }

/* Individual reviews. */
.pd-review-list { list-style: none; margin: 0; padding: 0; }

.pd-review-item {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pd-review-item:last-child { border-bottom: 0; }

.pd-review-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-review-stars { letter-spacing: 1px; }

.pd-review-author {
    font-weight: 600;
    font-size: 13px;
    color: #0f1b3d;
}

.pd-review-verified {
    font-size: 11px;
    font-weight: 600;
    color: #067647;
    background: #e7f5ec;
    padding: 2px 8px;
    border-radius: 999px;
}

.pd-review-date {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.pd-review-comment {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #374151;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pd-reviews-empty {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}


/* The fixed Add To Cart bar overlays the end of the page below 900px.
   Reserve its height so the last section can scroll clear of it. */
@media (max-width: 899px) {
    body {
        padding-bottom: 84px;
    }
}

/* Table description block (client/js/lz-table.js toHtml) */


/* ==================================================================
   Page layout (Sept 2026). Desktop: product card + details panel on the
   left, Jumia-style column on the right (delivery & returns, seller, a
   small buy card and chat that stay in view). Phone: one column - photos,
   buy box, delivery & seller, then the details tabs.
   ================================================================== */

.pd-layout { display: flex; flex-direction: column; }
.pd-main { display: contents; }
.pd-top { order: 1; }
.pd-side { order: 2; padding: 0 16px; }
.pd-dpanel { order: 3; }

.pd-box { background: #fff; }

/* Price box: price, was-price, discount and warranty, then the stock line. */
.pd-price-box { margin: 8px 0 4px; }
.pd-price-original { color: #9ca3af; text-decoration: line-through; font-size: 15px; }
.pd-discount-badge {
    background: #fff4d6; color: #a86b00; font-weight: 700; font-size: 13px;
    padding: 2px 8px; border-radius: 4px;
}
.pd-stock { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
.pd-stock-text { font-size: 13px; color: #4b5563; }
.pd-stock-out { color: #c0392b; font-weight: 700; }
.pd-stock-track { display: block; height: 6px; max-width: 360px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.pd-stock-fill { display: block; height: 100%; background: #f4b400; }

/* Previous / next arrows on the main photo - desktop only. */
.pd-gal-arrow { display: none; }

/* ---- Right column boxes ---- */
.pd-side-box { border: 1px solid #eceef1; border-radius: 10px; padding: 14px; margin-top: 14px; }
.pd-side-title {
    margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: #1a1a2e;
}
.pd-side-label { display: block; font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
.pd-loc-select {
    display: block; width: 100%; box-sizing: border-box; margin-bottom: 10px;
    padding: 10px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; color: #111827;
}
.pd-no-zones .pd-side-label, .pd-no-zones .pd-loc-select { display: none; }
.pd-del-row { display: flex; gap: 12px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid #f0f0f0; }
.pd-del-icon {
    flex: 0 0 38px; height: 38px; border: 1px solid #e5e7eb; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; color: #1a1a2e;
}
.pd-del-icon svg { width: 22px; height: 22px; }
.pd-del-head { font-size: 14px; font-weight: 700; color: #111827; }
.pd-del-text { font-size: 12.5px; line-height: 1.45; color: #4b5563; margin-top: 2px; }
.pd-del-text a { color: #1a1a2e; font-weight: 600; }
#pd-seller-box .seller-panel { margin: 0; }

.pd-mini { display: none; }
.pd-ask {
    border: 1px solid #eceef1; border-radius: 10px; padding: 14px; margin-top: 14px;
    text-align: center; font-size: 14px; color: #374151;
}
.pd-ask a {
    display: inline-block; margin-top: 8px; color: #1a1a2e; font-weight: 700;
    text-decoration: none; border-bottom: 2px solid #f4b400;
}

/* ---- Details panel (Lulu-style) ---- */
.pd-dpanel { margin: 18px 16px 0; background: #f6f7f9; border-radius: 14px; overflow: hidden; }
.pd-dmenu {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    padding: 6px 8px; border-bottom: 1px solid #e5e7eb; background: #fff;
}
.pd-dmenu::-webkit-scrollbar { display: none; }
.pd-dmenu-toggle { display: none; }
.pd-dtab {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border: 0; background: none; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.pd-dtab svg { width: 18px; height: 18px; flex-shrink: 0; }
.pd-dtab.active { color: #1a1a2e; border-bottom-color: #1a1a2e; }
.pd-dtab[hidden] { display: none; }
.pd-dbody { padding: 18px 16px 22px; min-width: 0; }
.pd-dbody .pd-section-title {
    border-left: 4px solid #1a1a2e; padding-left: 12px; font-size: 20px; margin-bottom: 18px;
}

.pd-highlights {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 12px 32px;
}
.pd-highlights li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #1f2937; line-height: 1.4; }
.pd-hl-icon {
    flex: 0 0 38px; height: 38px; border-radius: 50%; background: #e8eaf0;
    display: flex; align-items: center; justify-content: center;
    color: #f4b400; font-size: 15px; box-shadow: inset 0 0 0 9px #e8eaf0, inset 0 0 0 20px #1a1a2e;
}

@media (min-width: 640px) {
    .pd-highlights { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    body { background: #f1f2f4; }

    .pd-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 20px;
        max-width: 1500px;
        margin: 0 auto;
        padding: 18px 32px 60px;
        align-items: start;
    }
    .pd-main { display: block; min-width: 0; }
    .pd-breadcrumbs { max-width: 1500px; padding: 18px 32px 0; }

    .pd-box { border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }

    .pd-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 32px;
        padding: 22px;
        align-items: start;
    }

    .pd-gal-arrow {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e7eb;
        background: rgba(255, 255, 255, .92); color: #1a1a2e; font-size: 26px; line-height: 1;
        cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    }
    .pd-gal-arrow[hidden] { display: none; }
    .pd-gal-arrow:disabled { opacity: .3; cursor: default; }
    .pd-gal-prev { left: 10px; }
    .pd-gal-next { right: 10px; }

    .pd-side { padding: 0; }
    .pd-side-box:first-child { margin-top: 0; }
    .pd-side-box, .pd-ask { border: 0; }
    .pd-side-sticky { position: sticky; top: 140px; }

    .pd-mini {
        display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px;
        padding: 12px; margin-top: 14px;
    }
    .pd-mini[hidden] { display: none; }
    .pd-mini img { width: 76px; height: 76px; object-fit: contain; background: #f6f7f9; border-radius: 6px; }
    .pd-mini-name { font-size: 13px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pd-mini-price { font-size: 16px; font-weight: 700; color: #111827; margin-top: 4px; }
    .pd-mini-was { font-size: 12px; color: #9ca3af; margin-top: 2px; }
    .pd-mini-off { color: #a86b00; background: #fff4d6; padding: 0 5px; border-radius: 3px; font-weight: 700; }
    .pd-mini-btn {
        grid-column: 1 / -1; padding: 11px; border: 0; border-radius: 6px; cursor: pointer;
        background: #f4b400; color: #1a1a2e; font-size: 14px; font-weight: 700;
    }

    /* Details panel: menu column on the left, section on the right. */
    .pd-dpanel {
        margin: 20px 0 0;
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        background: #f6f7f9;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
        transition: grid-template-columns .2s ease;
    }
    .pd-dmenu {
        flex-direction: column; gap: 0; overflow: visible;
        padding: 18px 20px; border-bottom: 0; background: transparent;
    }
    .pd-dmenu-toggle {
        display: flex; align-self: flex-end; align-items: center; justify-content: center;
        width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%;
        border: 1px solid #d1d5db; background: #fff; color: #1a1a2e; cursor: pointer;
        font-size: 20px; line-height: 1;
    }
    .pd-dmenu-toggle:hover { border-color: #1a1a2e; }
    .pd-dmenu-arrow { display: inline-block; transition: transform .2s ease; margin-top: -2px; }
    .pd-dtab {
        justify-content: center; padding: 18px 8px; font-size: 16px; color: #9ca3af;
        border-bottom: 1px solid #dfe2e7; white-space: normal; text-align: center;
    }
    .pd-dtab svg { display: none; }
    .pd-dtab:hover { color: #1a1a2e; }
    .pd-dtab.active { color: #111827; border-bottom: 2px solid #1a1a2e; }
    .pd-dbody { padding: 26px 30px 30px; border-left: 1px solid #dfe2e7; margin: 18px 0; }
    .pd-dbody .pd-section-title { font-size: 26px; }

    /* Minimised: the menu shrinks to icons, the section gets the room. */
    .pd-dpanel.pd-dmenu-min { grid-template-columns: 64px minmax(0, 1fr); }
    .pd-dmenu-min .pd-dmenu { padding: 18px 10px; }
    .pd-dmenu-min .pd-dmenu-toggle { align-self: center; }
    .pd-dmenu-min .pd-dmenu-arrow { transform: rotate(180deg); }
    .pd-dmenu-min .pd-dtab { padding: 14px 0; }
    .pd-dmenu-min .pd-dtab span { display: none; }
    .pd-dmenu-min .pd-dtab svg { display: block; width: 22px; height: 22px; }
}

@media (min-width: 1200px) {
    .pd-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Nothing to show (no discount) - keep them out of the price row. */
.pd-price-original[hidden], .pd-discount-badge[hidden], .pd-stock[hidden] { display: none; }

/* ---- Sept 2026 additions: badges, delivery line, share/report,
   seller box, section menu, highlights in columns of five ---- */
.pd-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.pd-badges[hidden] { display: none; }
.pd-badge { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .02em; }
.pd-badge-official { background: #1a1a2e; color: #fff; }
.pd-brand { font-size: 14px; color: #4b5563; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pd-brand[hidden] { display: none; }

.pd-ship-line { font-size: 13px; color: #374151; margin: 2px 0 6px; }
.pd-ship-line[hidden] { display: none; }

.pd-share { display: none; }
@media (min-width: 900px) {
    .pd-share { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f3; }
    .pd-share-title { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #1a1a2e; }
    .pd-share-icons { display: flex; gap: 10px; margin-top: 10px; }
    .pd-share-icons a {
        width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #1a1a2e; color: #1a1a2e;
        display: flex; align-items: center; justify-content: center;
    }
    .pd-share-icons a:hover { background: #1a1a2e; color: #fff; }
    .pd-share-icons svg { width: 18px; height: 18px; }
    .pd-share-note { margin-top: 8px; font-size: 12.5px; color: #166534; background: #ecfdf3; border-radius: 6px; padding: 6px 9px; word-break: break-all; }
    .pd-share-note[hidden] { display: none; }
    .pd-report-link { display: inline-block; margin-top: 16px; font-size: 13.5px; color: #1d4ed8; text-decoration: none; }
    .pd-report-link:hover { text-decoration: underline; }
}

.pd-del-row[hidden] { display: none; }
.pd-side-title-link { display: flex; justify-content: space-between; align-items: center; text-decoration: none; }
.pd-side-title-link span { font-size: 20px; line-height: 1; color: #6b7280; }
#pd-seller-box .seller-panel { border: 0; padding: 0; margin: 0; }
#pd-seller-box .seller-panel-head { padding-top: 10px; border-top: 1px solid #f0f0f0; }
#pd-seller-box .seller-performance-list::before {
    content: "Seller Performance"; font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 4px;
}
#pd-seller-box .seller-perf-item { font-size: 12.5px; }
#pd-seller-box.pd-seller-own .seller-performance-list::before { content: "Why buy here"; }
#pd-seller-box .seller-follow-btn { background: #f4b400; color: #1a1a2e; border-radius: 6px; margin-left: auto; }

.pd-side-nav { display: none; }
@media (min-width: 900px) {
    .pd-side-nav { display: block; overflow: hidden; margin-top: 14px; }
    .pd-side-nav a {
        display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 14.5px;
        color: #1f2937; text-decoration: none; border-top: 1px solid #f0f0f0;
    }
    .pd-side-nav a:first-child { border-top: 0; }
    .pd-side-nav a[hidden] { display: none; }
    .pd-side-nav a svg { width: 20px; height: 20px; flex-shrink: 0; color: #1a1a2e; }
    .pd-side-nav a:hover { background: #f6f7f9; }
    .pd-side-nav a.active { background: #e9ebef; font-weight: 700; }
    .pd-side-sticky { top: 120px; }
}

/* Highlights: five going down; more than five -> two columns of five. */
.pd-highlights, .pd-highlights.pd-hl-two { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .pd-highlights { grid-template-columns: 1fr; }
    .pd-highlights.pd-hl-two {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
    }
}

/* Colour swatches (Sept 2026): photo swatches carry a small dot in the real
   colour; colours without a photo are a round swatch of the colour. */
.pd-color-swatch { position: relative; }
.pd-swatch-hex { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.pd-color-swatch.pd-color-swatch-dot { border-radius: 50%; width: 44px; height: 44px; padding: 3px; }
.pd-swatch-fill { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); box-sizing: border-box; }
.pd-color-swatch.pd-soldout { opacity: .4; }
.pd-color-swatch.pd-soldout::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px;
    background: #b42318; transform: rotate(45deg); }
@media (min-width: 900px) { .pd-color-swatch.pd-color-swatch-dot { width: 48px; height: 48px; } }

/* Colour tiles, Temu-style (Sept 2026): the colour's photo with its name
   under it; the chosen one gets a dark border; a sold-out one is faded. */
.pd-color-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; max-width: 620px; }
.pd-color-swatch.pd-color-tile { width: auto; height: auto; padding: 0; border: 1.5px solid #e5e7eb; border-radius: 8px;
    overflow: hidden; background: #fff; display: flex; flex-direction: column; cursor: pointer; }
.pd-color-tile:hover { border-color: #9ca3af; }
.pd-color-tile:focus-visible { outline: 2px solid #1a1a2e; outline-offset: 2px; }
.pd-color-swatch.pd-color-tile.selected { border: 2px solid #111827; box-shadow: none; }
.pd-tile-media { display: block; aspect-ratio: 1 / 1; background: #f6f7f9; overflow: hidden; }
.pd-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-color-tile .pd-swatch-fill { width: 100%; height: 100%; border-radius: 0; border: 0; display: block; }
.pd-tile-name { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 4px 4px 6px;
    font-size: 12.5px; font-weight: 600; color: #1f2937; text-align: center; line-height: 1.2; word-break: break-word; }
.pd-tile-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; border: 1px solid rgba(0,0,0,.2); }
.pd-color-tile.pd-soldout { opacity: .45; }
.pd-color-tile.pd-soldout::after { top: 0; bottom: auto; height: 140%; left: 50%; }
.pd-selector-label .pd-selected-color-name { color: #111827; font-weight: 700; margin-left: 2px; }
@media (min-width: 900px) {
    .pd-color-swatches { grid-template-columns: repeat(5, minmax(0, 104px)); }
}

/* Official Store links (seller box + badge above the title) */
a.pd-badge-official { text-decoration: none; cursor: pointer; }
a.pd-badge-official:hover { filter: brightness(1.15); }
.pd-official-link { text-decoration: none; color: inherit; cursor: pointer; }
a.seller-panel-name.pd-official-link:hover { text-decoration: underline; }
a.seller-score-badge.pd-official-link:hover { filter: brightness(1.1); }
.pd-official-all { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; color: #1a1a2e;
    font-weight: 700; font-size: 13.5px; text-decoration: none; }
.pd-official-all:hover { color: #a86b00; text-decoration: underline; }

/* Door Delivery "Details" box (delivery timing + policy) */
.pd-del-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-del-more { display: inline; background: none; border: 0; padding: 0; margin-top: 1px; font: inherit; font-size: 12.5px;
    font-weight: 600; color: #1a1a2e; text-decoration: underline; cursor: pointer; text-align: left; }
.pd-del-more:hover { color: #a86b00; }
.pd-del-info { margin: 10px 0 2px; padding: 12px 14px; background: #fffaf0; border: 1px solid #f4d98a; border-left: 4px solid #f4b400;
    border-radius: 8px; font-size: 12.8px; line-height: 1.55; color: #374151; }
.pd-del-info[hidden] { display: none; }
.pd-del-info-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pd-del-info-head strong { font-size: 14px; color: #111827; }
.pd-del-info-close { background: none; border: 0; font-size: 20px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 2px; }
.pd-del-info-close:hover { color: #111827; }
.pd-del-info p { margin: 0 0 8px; }
.pd-del-info ul { margin: 0 0 8px; padding-left: 18px; }
.pd-del-info li { margin-bottom: 4px; }
#pd-door-info-area { background: #fff; border-radius: 6px; padding: 6px 8px; }
.pd-del-info-foot { color: #6b7280; margin-bottom: 0 !important; }
.pd-del-info a { color: #1a1a2e; font-weight: 600; }
.pd-del-row > div:last-child { flex: 1; min-width: 0; }

.pd-del-info-note { background: #fff; border-radius: 6px; padding: 8px 10px; margin-bottom: 0 !important; }

/* Similar Products (bottom of the product page) */
.pd-similar { max-width: 1300px; margin: 28px auto 36px; padding: 0 16px; }
.pd-similar[hidden] { display: none; }
.pd-similar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pd-similar-title { font-size: 24px; font-weight: 800; color: #111827; margin: 0; }
.pd-similar-arrows { display: flex; gap: 10px; }
.pd-similar-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #1a1a2e; background: #fff; color: #1a1a2e;
    font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; }
.pd-similar-arrow:disabled { opacity: .3; cursor: default; }
.pd-similar-scroll { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; }
.pd-similar-scroll::-webkit-scrollbar { display: none; }
.pd-sim-card { flex: 0 0 calc((100% - 5 * 18px) / 6); min-width: 200px; background: #fff; border: 1px solid #eceef1; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit; scroll-snap-align: start; display: flex; flex-direction: column; }
.pd-sim-card:hover { box-shadow: 0 6px 18px rgba(17, 24, 39, .08); }
.pd-sim-media { position: relative; aspect-ratio: 1 / 1; background: #f6f7f9; display: flex; align-items: center; justify-content: center; }
.pd-sim-media { width: 100%; overflow: hidden; }
.pd-sim-media img { position: absolute; top: 7%; left: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.pd-sim-add { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #1a1a2e;
    color: #f4b400; font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pd-sim-add:hover { background: #f4b400; color: #1a1a2e; }
.pd-sim-add.done { background: #16a34a; color: #fff; }
.pd-sim-out { position: absolute; left: 10px; bottom: 10px; background: #6b7280; color: #fff; font-size: 11.5px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; }
.pd-sim-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pd-sim-brand { align-self: flex-start; background: #f2f4f7; color: #1a1a2e; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.pd-sim-name { font-size: 14px; line-height: 1.4; color: #1f2937; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 4.2em; }
.pd-sim-prices { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pd-sim-now { background: #f4b400; color: #1a1a2e; font-weight: 800; font-size: 14.5px; padding: 4px 9px; border-radius: 6px;
    box-shadow: 3px 3px 0 #1a1a2e; }
.pd-sim-was { color: #9ca3af; font-size: 13px; }
@media (max-width: 700px) {
    .pd-similar-title { font-size: 20px; }
    .pd-similar-arrows { display: none; }
    .pd-sim-card { flex-basis: 46%; min-width: 150px; }
    .pd-similar-scroll { gap: 12px; }
}