/* =========================================================================
   PDP (single product) — Fruit3 child theme. Matches the Spill Station design.
   Loopless Thai font (Anuphan) paired with Roboto, like the shop pages.
   ========================================================================= */
/* PDP uses the shared SITE font variable (defaults to inherit = theme font).
   Override site-wide via  :root { --wccm-site-font: … }  — same variable the
   shop/filter uses, kept separate from the carousel font. */
:root { --wccm-site-font: inherit; }
.wccm-pdp,
.wccm-pdp * { font-family: var(--wccm-site-font); }

.wccm-pdp-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    box-sizing: border-box;
}

/* Breadcrumb */
.wccm-pdp-breadcrumb {
    font-size: 0.9rem;
    color: #637381;
    margin-bottom: 24px;
}
.wccm-pdp-breadcrumb a { color: #637381; text-decoration: none; }
.wccm-pdp-breadcrumb a:hover { color: #1a1a2e; }

/* ── Two-column top ──────────────────────────────────────────────────── */
.wccm-pdp-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* Gallery */
.wccm-pdp-main-image {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.wccm-pdp-main-image img,
.wccm-pdp-noimg img { width: 100%; height: 100%; object-fit: contain; }
.wccm-pdp-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.wccm-pdp-thumb {
    width: 96px; height: 96px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
}
.wccm-pdp-thumb.is-active { border-color: #1a1a2e; }
.wccm-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Summary */
.wccm-pdp-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a2e;
    margin: 0 0 20px;
    text-align: left;   /* was inheriting center from the theme */
}
.wccm-pdp-features { margin: 0 0 28px; }
.wccm-pdp-features ul { margin: 0; padding: 0; list-style: none; }
.wccm-pdp-features li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: #334155;
    line-height: 1.5;
}
.wccm-pdp-features li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #334155;
}

/* Quantity + actions */
.wccm-pdp-actions { margin-bottom: 24px; }
.wccm-pdp-qty { margin-bottom: 16px; }
.wccm-pdp-qty-label {
    display: block;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.wccm-qty-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7dbe4;
    border-radius: 8px;
    overflow: hidden;
    height: 36px;   /* same on desktop and mobile */
}
.wccm-qty-box button {
    width: 44px; height: 100%;
    border: 0;
    background: #f8f9fb;
    font-size: 20px;
    color: #1a1a2e;
    cursor: pointer;
    line-height: 1;
}
.wccm-qty-box button:hover { background: #eef0f4; }
.wccm-qty-input {
    width: 56px; height: 100%;
    border: 0;
    border-left: 1px solid #d7dbe4;
    border-right: 1px solid #d7dbe4;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    -moz-appearance: textfield;
}
.wccm-qty-input::-webkit-outer-spin-button,
.wccm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Both buttons the SAME height & width. Grid gives two exactly-equal columns
   regardless of each button's inner markup (flex basis was uneven because the
   ELEX button is a wrapped DIV while Contact is a bare <a>). */
.wccm-pdp-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.wccm-pdp-buttons > * {
    min-width: 0;
    width: 100%;
}
/* The ELEX add-to-quote button wraps its markup — make every wrapper fill AND
   center its content so both buttons look identical (the ELEX wrapper otherwise
   left-aligns the button, so its icon+label sat left while Contact was centered). */
.wccm-pdp-buttons .elex-rqst-quote-front-wrap,
.wccm-pdp-buttons .add_view_quote_btn,
.wccm-pdp-buttons .w-100,
/* After a product is added, ELEX re-renders the control as
   .w-100 > <a> > <button> ("รายการใบเสนอราคา"). That bare <a> has no class of
   its own, so without it here the anchor shrank to its text and the button
   came out narrower than the Contact button beside it. */
.wccm-pdp-buttons .w-100 > a {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin: 0 !important;
    text-decoration: none !important;
}
/* ELEX hard-codes `display:inline-block;width:auto` inline on the front wrap —
   inline styles beat a plain class rule, so the grid cell never filled. */
.wccm-pdp-buttons .elex-rqst-quote-front-wrap[style] {
    display: flex !important;
    width: 100% !important;
}

/* Add-to-Quote (ELEX) + Contact share one look, one fixed height. */
.wccm-pdp-buttons .add_to_quote,
.wccm-pdp-buttons .button,
.wccm-pdp-contact-btn {
    box-sizing: border-box;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0 18px !important;
    white-space: nowrap;
}
.wccm-pdp-buttons .add_to_quote,
.wccm-pdp-buttons .button {
    background: #111928 !important;
    color: #fff !important;
    border: none !important;
}
.wccm-pdp-contact-btn {
    background: #fff;
    color: #1a1a2e;
    border: 1px solid #d7dbe4;
    text-decoration: none;
}
.wccm-pdp-contact-btn:hover { border-color: #111928; }
.wccm-pdp-contact-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* note_add icon before the "เพิ่มในใบเสนอราคา" label — yellow fill, like the
   shop. Uses background-image so the icon keeps its own color. */
.wccm-pdp-buttons button.add_to_quote::before {
    content: "";
    width: 20px; height: 20px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23FFD230'%3E%3Cpath d='M440-400v80q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-80h80q17 0 28.5-11.5T640-440q0-17-11.5-28.5T600-480h-80v-80q0-17-11.5-28.5T480-600q-17 0-28.5 11.5T440-560v80h-80q-17 0-28.5 11.5T320-440q0 17 11.5 28.5T360-400h80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v487q0 33-23.5 56.5T720-80H240Zm280-560v-160H240v640h480v-480H560q-17 0-28.5-11.5T520-640Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Meta */
.wccm-pdp-meta { font-size: 0.95rem; color: #637381; }
.wccm-pdp-meta > div { margin-bottom: 6px; }
.wccm-meta-label { color: #1a1a2e; font-weight: 600; }
.wccm-pdp-meta a { color: #f5c518; text-decoration: none; }
.wccm-pdp-meta a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .wccm-pdp-top { grid-template-columns: 1fr; gap: 28px; }
    .wccm-pdp-thumb { width: 72px; height: 72px; }
}

/* ── PDP extra sections ──────────────────────────────────────────────── */
.wccm-pdp-section { margin-top: 48px; }
/* Headings: plain (no background) by default — used by วิธีการสั่งซื้อ and
   ดาวน์โหลดเอกสาร in the summary column. */
.wccm-pdp-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px;
    padding: 0;
    background: transparent;
}
/* The "คำอธิบาย" heading keeps the grey band (per design). */
.wccm-pdp-description .wccm-pdp-heading {
    padding: 12px 16px;
    background: #f3f4f6;
    border-radius: 8px;
}

/* Order steps — yellow guide box */
.wccm-pdp-steps-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    background: #fffbe6;
    border: 1px solid #ffe8a3;
    border-radius: 10px;
    padding: 24px;
}
.wccm-pdp-step-title {
    font-weight: 700;
    color: #b7791f;
    margin-bottom: 6px;
}
.wccm-pdp-step-text { color: #4a4a4a; line-height: 1.5; }

/* Downloads */
.wccm-pdp-doc-list { display: flex; flex-wrap: wrap; gap: 12px; }
.wccm-pdp-doc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111928;
    color: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none;
    font-weight: 500;
}
.wccm-pdp-doc:hover { background: #1f2937; }
.wccm-pdp-doc-icon.dashicons { color: #f5c518; font-size: 20px; width: 20px; height: 20px; }

/* Description */
.wccm-pdp-desc-body { color: #2b2b3a; line-height: 1.7; }
.wccm-pdp-desc-body ul { padding-left: 20px; }
.wccm-pdp-desc-body li { margin-bottom: 6px; }
.wccm-pdp-desc-body p { margin: 0 0 14px; }
/* A table with long unbreakable content (English phrases, URLs) will size
   its columns from that content first under the default table-layout:auto
   — a plain `width:100%` on the table doesn't stop that, it just gets
   overridden once content needs more room, silently pushing the table
   wider than its parent (measured on production: 471-477px inside a
   326px-wide mobile column). Rather than force-wrapping that content
   (table-layout:fixed + overflow-wrap, which was tried first but reads
   worse for tables meant to stay readable at their natural width), let
   the table keep its natural width and make ONLY it horizontally
   scrollable when that's wider than its column. `display:block` is what
   makes overflow-x apply to a <table> at all (tables ignore overflow
   while they're display:table) — the border-collapse/th/td styling below
   still renders correctly since those children keep their own table-*
   display values, only the outer <table> element's box behaves like a
   block/scroll-container now. */
.wccm-pdp-desc-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 14px;
}
.wccm-pdp-desc-body th,
.wccm-pdp-desc-body td {
    border: 1px solid #d8d8e0;
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}
.wccm-pdp-desc-body th { background: #f5f5f8; font-weight: 600; }

/* Related products — a FULL-WIDTH section with a light grey band (#FAFAFA)
   that spans the whole viewport, like the shop's related band. */
.wccm-pdp-related {
    background: #FAFAFA;
    /* Break out of .wccm-pdp-inner's max-width/padding to go edge-to-edge. */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 48px 0 32px;
    margin-top: 56px;
}
/* Re-center the section's own content to the inner container width. */
.wccm-pdp-related > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
/* Heading row with arrows on the right (desktop). */
.wccm-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 20px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
.wccm-related-head .wccm-pdp-heading { margin: 0; }
.wccm-related-arrows { display: flex; gap: 8px; }
.wccm-related-arrows button {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dbe4;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
    cursor: pointer;
}
.wccm-related-arrows button:hover { background: #111928; color: #fff; border-color: #111928; }
.wccm-related-arrows button:disabled { opacity: .35; cursor: default; }
.wccm-related-arrows button:disabled:hover { background: #fff; color: #1a1a2e; border-color: #d7dbe4; }

/* Horizontal scroll track — one row, scrollable/swipeable, snap per card. */
.wccm-pdp-related ul.products.wccm-related-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;   /* all cards match the tallest → equal height */
    gap: 24px;
    list-style: none;
    margin: 0 auto;
    max-width: 1200px;
    padding: 4px 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;   /* Firefox */
}
.wccm-pdp-related ul.products.wccm-related-track::-webkit-scrollbar { display: none; }
/* Each card: fixed share so ~4 show on desktop; scroll reveals the rest. */
.wccm-pdp-related li.product.wccm-related-item {
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    max-width: calc((100% - 3 * 24px) / 4);
    display: flex;
    flex-direction: column;
    margin: 0;
    scroll-snap-align: start;
}
/* Product title clamped to exactly 2 lines (override shop-card min-height). */
.wccm-pdp-related .woocommerce-loop-product__title,
.wccm-pdp-related li.product .woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important;
    max-height: 2.8em !important;   /* hard cap so a 3rd line can't push the button */
}

/* Related slider dots (● ○ ○ ○) — per design. */
.wccm-related-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.wccm-related-dots .wccm-rel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d7dbe4;
    cursor: pointer;
    transition: background .15s, width .15s;
}
.wccm-related-dots .wccm-rel-dot.is-active {
    background: #444444;
    width: 22px;
    border-radius: 6px;
}
.wccm-related-dots .wccm-rel-dot:hover:not(.is-active) { background: #b7bcc7; }

/* Order steps + downloads live in the SUMMARY column. */
.wccm-pdp-summary .wccm-pdp-order-steps,
.wccm-pdp-summary .wccm-pdp-downloads { margin-top: 28px; }
.wccm-pdp-summary .wccm-pdp-heading { font-size: 1.15rem; }
/* Tighten the gap between the "ดาวน์โหลดเอกสาร" heading and its button. */
.wccm-pdp-downloads .wccm-pdp-heading { margin-bottom: 12px; }
/* Keep the 3 steps side-by-side (design), even inside the narrower column. */
.wccm-pdp-summary .wccm-pdp-steps-box {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 22px 24px;
    border-radius: 14px;
}

@media (max-width: 900px) {
    .wccm-pdp-steps-box,
    .wccm-pdp-summary .wccm-pdp-steps-box { grid-template-columns: 1fr; gap: 14px; }
    .wccm-pdp-related ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* Hide the theme's own breadcrumb on single product — our template renders its
   own inside .wccm-pdp-breadcrumb (in the designed position). Scope to
   single-product so other pages keep the theme breadcrumb.

   `:not()` rather than a parent selector: the theme emits its copy at different
   depths depending on layout (a direct child of .s-container on some templates,
   of <body> on others), so targeting a specific parent missed it and two
   breadcrumbs showed. Hide every copy that is NOT inside our wrapper. */
body.single-product .woocommerce-breadcrumb:not(.wccm-pdp-breadcrumb *) {
    display: none !important;
}
/* …and force OURS visible: the theme also ships a blanket
   `.woocommerce-breadcrumb{display:none}` for small screens, which was hiding
   the PDP breadcrumb entirely on mobile. */
body.single-product .wccm-pdp-breadcrumb,
body.single-product .wccm-pdp-breadcrumb .woocommerce-breadcrumb {
    display: block !important;
}

/* ── XforWC PDF/print button in the "ดาวน์โหลดเอกสาร" block ────────────── */
/* The plugin gives the nav a 32px top margin — remove it so the button sits
   right under the heading. */
.wccm-pdp-downloads .wcspp-navigation { margin: 0 !important; }
.wccm-pdp-downloads .wcspp-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wccm-pdp-downloads .wcspp-navigation li {
    margin: 0;
    width: auto !important;   /* plugin fixes li to 48px (icon-only) */
    max-width: none !important;
}
/* Icon-only download button — square, dark, no text label. */
.wccm-pdp-downloads .wcspp-navigation li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    max-width: none !important;
    background: #111928 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 0 !important;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
}
.wccm-pdp-downloads .wcspp-navigation li a:hover { background: #1f2937; }
/* Icon-only: hide the injected text label. */
.wccm-pdp-downloads .wcspp-navigation li a .wccm-doc-label { display: none !important; }
/* FaFilePdf (Font Awesome file-pdf), tinted #FFD230, on the dark button. */
.wccm-pdp-downloads .wcspp-navigation li a::before {
    content: "";
    width: 22px; height: 24px;
    flex: 0 0 auto;
    background-color: #FFD230;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 144-208 0c-35.3 0-64 28.7-64 64l0 144-48 0c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 144-208 0c-35.3 0-64 28.7-64 64l0 144-48 0c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE (≤767px) — matches PDP mobile design
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* .wccm-pdp-related (further down) is always the LAST piece of content
       before the footer, so a bottom padding on .wccm-pdp-inner meant to
       clear the fixed sticky Add-to-Quote bar landed as dead space between
       the related section and the footer instead of protecting any real
       content. Move that clearance onto .wccm-pdp-top (the actual content
       the sticky bar could obscure — gallery/summary/buttons) so the
       related section's own small bottom padding is what determines the
       gap to the footer. */
    .wccm-pdp-inner { padding: 16px 16px 0; }
    .wccm-pdp-top { padding-bottom: 90px; }

    /* Gallery: thumbnails below, smaller */
    .wccm-pdp-thumb { width: 60px; height: 60px; }

    /* Title a touch smaller */
    .wccm-pdp-title { font-size: 1.4rem; }

    /* Summary buttons: on mobile the qty row keeps ONLY "ติดต่อเรา"; the
       Add-to-Quote button is RELOCATED to the sticky bar by JS (not hidden, so
       it stays functional). One column since only Contact remains. */
    .wccm-pdp-buttons { grid-template-columns: 1fr; }

    /* Contact sits inline with the qty stepper on mobile, so it takes the
       shorter 32px height (the 52px desktop size dominates the row here). */
    .wccm-pdp-contact-btn {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 0.875rem !important;
        padding: 0 14px !important;
    }
    .wccm-pdp-contact-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }

    /* Order steps: NO yellow box on mobile — plain stacked list (design). */
    .wccm-pdp-summary .wccm-pdp-steps-box,
    .wccm-pdp-steps-box {
        display: block;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
    .wccm-pdp-step { margin-bottom: 14px; }
    .wccm-pdp-step-title { color: #1a1a2e; }

    /* Related: horizontal swipe, ~2 cards visible per screen. */
    .wccm-pdp-related { padding: 32px 0 24px; }
    .wccm-related-head { padding-left: 16px; padding-right: 16px; margin-bottom: 16px; }
    .wccm-related-arrows { display: none; }   /* mobile uses swipe, not arrows */
    .wccm-pdp-related ul.products.wccm-related-track {
        padding-left: 16px;
        padding-right: 16px;
        /* Keep the first card off the left edge when snapped/scrolled to start,
           so its gutter matches the right side. */
        scroll-padding-left: 16px;
    }
    /* The scroll container's left padding doesn't offset the very first card in
       all engines; give it an explicit left gutter equal to the page padding. */
    .wccm-pdp-related li.product.wccm-related-item:first-child { margin-left: 0; }
    .wccm-pdp-related li.product.wccm-related-item {
        flex: 0 0 calc((100% - 16px - 32px) / 2);  /* 2 cards inside 16px gutters + 16px gap */
        max-width: calc((100% - 16px - 32px) / 2);
    }

    /* Gallery thumbnails: single scrollable row on mobile. */
    .wccm-pdp-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .wccm-pdp-thumbs::-webkit-scrollbar { display: none; }
    .wccm-pdp-thumb {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Sticky Add-to-Quote bar pinned to the bottom of the viewport. */
    .wccm-pdp-sticky-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 999;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        padding: 10px 16px;
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    }
    .wccm-pdp-sticky-bar .elex-rqst-quote-front-wrap,
    .wccm-pdp-sticky-bar .add_view_quote_btn,
    .wccm-pdp-sticky-bar .w-100,
    /* Once the product is in the quote, ELEX swaps the control for
       .w-100 > <a> > <button> ("ดูใบเสนอราคา"). The anchor carries no class, so
       without this it collapsed to its text width and the bar's button no longer
       spanned the bar — unlike the "เพิ่มในใบเสนอราคา" state. */
    .wccm-pdp-sticky-bar .w-100 > a {
        width: 100% !important;
        display: flex !important;
        text-decoration: none !important;
    }
    /* ELEX hard-codes `display:inline-block;width:auto` inline on the wrapper;
       an attribute selector is needed to out-specify it. */
    .wccm-pdp-sticky-bar .elex-rqst-quote-front-wrap[style] {
        display: flex !important;
        width: 100% !important;
    }
    .wccm-pdp-sticky-bar .add_to_quote,
    .wccm-pdp-sticky-bar .button {
        width: 100% !important;
        height: 50px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #111928 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }
    .wccm-pdp-sticky-bar button.add_to_quote::before {
        content: "";
        width: 20px; height: 20px;
        flex: 0 0 auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23FFD230'%3E%3Cpath d='M440-400v80q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-80h80q17 0 28.5-11.5T640-440q0-17-11.5-28.5T600-480h-80v-80q0-17-11.5-28.5T480-600q-17 0-28.5 11.5T440-560v80h-80q-17 0-28.5 11.5T320-440q0 17 11.5 28.5T360-400h80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v487q0 33-23.5 56.5T720-80H240Zm280-560v-160H240v640h480v-480H560q-17 0-28.5-11.5T520-640Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

/* The sticky bar is mobile-only; hide on desktop. */
.wccm-pdp-sticky-bar { display: none; }
@media (max-width: 767px) { .wccm-pdp-sticky-bar { display: block; } }