/* =====================================================================
   Visual Materials product page - V4 public layout
   ---------------------------------------------------------------------
   Every selector in this file is scoped under `.vm-v4`, the root class on
   resources/views/livewire/product-detail-page-v4.blade.php. Nothing here
   may reach the footer or a V3 page: V3 and V4 run side by side and one
   product can be switched back with a single toggle. The one sanctioned
   exception is the header-bar alignment block, which reaches the shared
   navbar because this stylesheet loads on the V4 page alone - the other
   pages that include the same partial never see these rules.

   Hand-written on purpose. The public site's Tailwind config overrides
   `gray` and `primary` wholesale, and there is no guarantee an arbitrary
   utility survived the content scan - so layout here never depends on one.

   Design tokens come from the handoff README ("Design tokens - Public
   page"). Radius is 6px throughout, 4px on small chips, 20px on pills.
   ===================================================================== */

.vm-v4 {
    /* --- brand ------------------------------------------------------ */
    --vm-green: #91EA2D;
    --vm-green-deep: #22360B;
    --vm-green-mid: #4B7016;
    --vm-green-wash: #F6FDEE;
    --vm-green-border: #D6F0AE;
    --vm-green-fill: #DFF7BD;

    /* --- calls to action -------------------------------------------- */
    --vm-orange: #FF7A00;
    --vm-orange-hover: #EC6C00;
    --vm-whatsapp: #25D366;
    --vm-whatsapp-hover: #1EBE5A;

    /* --- neutrals ---------------------------------------------------- */
    --vm-ink: #1A1A1A;
    --vm-text: #333;
    --vm-muted: #5C5C5C;
    --vm-faint: #8A8A8A;
    --vm-line: #E3E3E3;
    --vm-line-soft: #F0F0F0;
    --vm-fill: #F7F7F7;
    --vm-thead: #2D3748;

    /* --- shape and rhythm -------------------------------------------- */
    --vm-radius: 6px;
    --vm-radius-sm: 4px;
    --vm-radius-pill: 20px;
    --vm-section: clamp(28px, 3.5vw, 40px);
    --vm-pad: clamp(14px, 2vw, 22px);
    --vm-gutter: clamp(14px, 3.5vw, 28px);

    --vm-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    background: #fff;
    color: var(--vm-text);
    font-family: var(--vm-font);
    font-size: 16px;
    /* Inherited: keeps long product codes and URLs from pushing the 320px
       layout sideways. Tables get their own scroll container instead. */
    overflow-wrap: break-word;
    /* The site header is fixed on small screens and absolute from 1080px up,
       so the page has to clear it itself. Matches the V3 page's mt-24/mt-32. */
    padding: clamp(92px, 12vw, 132px) 0 clamp(30px, 4vw, 48px);
    overflow-x: hidden;
}

/* ---------------------------------------------------------- header bar */
/* The shared navbar (partials.main_navbar) renders a 1080px bar at lg -
   Tailwind's lg screen is overridden to 1080px - while every child of the
   shell sits in the 1024px column: a 28px overhang each side. This
   stylesheet loads on the V4 page alone, so these rules can reach the
   header without touching the other pages that include the same partial.
   The green bar spans the viewport edge to edge on mobile - no white
   gutters beside the header or the open menu. */
body > header.fixed {
    left: 0;
    right: 0;
}

/* From lg (1080px) the header is absolute and the bar centres itself:
   cap the bar at the column width and hand the full page back to the
   absolutely positioned header. The bar keeps its own lg:px-32 padding -
   all four menu rows were measured to fit inside the 1024px bar. */
@media (min-width: 1080px) {
    body > header.fixed {
        left: 0;
        right: 0;
    }

    body > header.fixed > div {
        max-width: 1024px;
    }
}

/* Outer shell 1080px; every child column aligns to the inner 1024px so
   nothing on the page is ever wider than the header menu. */
.vm-v4__shell {
    max-width: 1080px;
    margin: 0 auto;
    padding-left: var(--vm-gutter);
    padding-right: var(--vm-gutter);
}

.vm-v4__col {
    max-width: 1024px;
    margin: 0 auto;
    min-width: 0;
}

.vm-v4 *,
.vm-v4 *::before,
.vm-v4 *::after {
    box-sizing: border-box;
}

.vm-v4 img,
.vm-v4 svg {
    max-width: 100%;
}

.vm-v4 a {
    color: var(--vm-green-deep);
    text-decoration: none;
}

.vm-v4 a:hover,
.vm-v4 a:focus-visible {
    color: var(--vm-green-mid);
    text-decoration: underline;
}

.vm-v4 :focus-visible {
    outline: 2px solid var(--vm-green-mid);
    outline-offset: 2px;
}

.vm-v4 summary::-webkit-details-marker {
    display: none;
}

/* ---------------------------------------------------------------- sections */

.vm-v4__section {
    margin-top: var(--vm-section);
    scroll-margin-top: 96px;
}

.vm-v4__bar {
    margin: 0 0 16px;
    padding: 11px 16px;
    background: var(--vm-green);
    border-radius: var(--vm-radius);
    color: var(--vm-ink);
    font: 700 clamp(16px, 2vw, 19px)/1.3 var(--vm-font);
}

/* A section served open in a <details> so its text is in the HTML expanded
   for crawlers and for anyone without JS. The phone sheet folds it shut and
   turns the mark below into the visible affordance; nothing is removed. */
.vm-v4__panel > summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.vm-v4__panel > summary::marker {
    content: '';
}

/* Decorative: the heading text is the label, the glyph only says "this
   folds". Off at desktop width, where the panel is always open. */
.vm-v4__panel-mark {
    display: none;
    flex: 0 0 auto;
    font: 400 12px/1 var(--vm-font);
    color: var(--vm-green-mid);
    transition: transform 0.15s ease;
}

.vm-v4__panel[open] > summary .vm-v4__panel-mark {
    transform: rotate(180deg);
}

/* Folded, the heading is the whole section - it should not leave the gap it
   holds for the content underneath. */
.vm-v4__panel:not([open]) > summary .vm-v4__bar {
    margin-bottom: 0;
}

.vm-v4__note {
    margin: 11px 0 0;
    font: 400 12.5px/1.6 var(--vm-font);
    color: var(--vm-muted);
}

/* ------------------------------------------------------- breadcrumb + title */

.vm-v4__topline {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.vm-v4__back {
    font: 600 12.5px/1 var(--vm-font);
    color: var(--vm-ink);
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    padding: 9px 12px;
}

.vm-v4__back:hover,
.vm-v4__back:focus-visible {
    border-color: var(--vm-ink);
    color: var(--vm-ink);
    text-decoration: none;
}

.vm-v4__crumbs {
    font: 400 12.5px/1.7 var(--vm-font);
    color: var(--vm-muted);
    min-width: 0;
}

.vm-v4__crumbs ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vm-v4__crumbs li::after {
    content: '/';
    margin-left: 6px;
    color: var(--vm-line);
}

.vm-v4__crumbs li:last-child::after {
    content: '';
    margin: 0;
}

.vm-v4__crumbs li[aria-current='page'] {
    color: var(--vm-ink);
    font-weight: 600;
}

.vm-v4__head {
    margin: clamp(10px, 1.6vw, 16px) 0 clamp(14px, 2vw, 20px);
}

.vm-v4__title {
    margin: 0 0 4px;
    font: 800 clamp(28px, 4.6vw, 44px)/1.05 var(--vm-font);
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    overflow-wrap: break-word;
}

.vm-v4__idline {
    margin: 8px 0 0;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.vm-v4__code {
    font: 700 11.5px/1 var(--vm-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vm-ink);
    background: var(--vm-green);
    border-radius: var(--vm-radius);
    padding: 7px 10px;
}

.vm-v4__sublabel {
    font: 400 13.5px/1.4 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__intro {
    margin: clamp(18px, 2.6vw, 26px) 0 0;
    font: 400 clamp(15px, 1.8vw, 16.5px)/1.7 var(--vm-font);
    color: var(--vm-text);
    /* No cap: the prototype's 70ch sat beside an <aside> this layout does not
       have, so it left 364px of empty column at 1280 instead of a measure. */
    max-width: none;
}

/* ------------------------------------------------------------------ gallery */

.vm-v4__gallery {
    margin: 0;
}

.vm-v4__stage {
    position: relative;
    border-radius: var(--vm-radius);
    overflow: hidden;
    background: var(--vm-fill);
    touch-action: pan-y;
}

.vm-v4__slide {
    display: none;
    position: relative;
}

.vm-v4__slide.is-active {
    display: block;
}

.vm-v4__slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 492;
    object-fit: cover;
    display: block;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: #F1F1F1;
}

.vm-v4__slide-empty {
    display: grid;
    place-items: center;
    aspect-ratio: 900 / 492;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: repeating-linear-gradient(135deg, #F1F1F1 0 6px, #FAFAFA 6px 12px);
    font: 400 12px/1.6 var(--vm-font);
    color: var(--vm-faint);
    text-align: center;
    padding: 12px;
}

/* The "04 / 15" chip. Load-bearing: sales quote these numbers to customers,
   so it appears on the stage, in the caption row and on every thumbnail. */
.vm-v4__stagenum {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(34, 54, 11, 0.88);
    color: var(--vm-green);
    font: 700 11.5px/1 var(--vm-font);
    letter-spacing: 0.06em;
    border-radius: var(--vm-radius-sm);
    padding: 7px 9px;
}

/* Phone tap zones over the left and right thirds of the stage. They hold no
   text - the caption row's arrows are the labelled controls - so this is a
   control that is absent at desktop width, not hidden copy. */
.vm-v4__tap {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 33.33%;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.vm-v4__tap--prev {
    left: 0;
}

.vm-v4__tap--next {
    right: 0;
}

/* Video: poster + play button. The player is only built on first click.
   z-index keeps it above the tap zones, which follow it in the DOM. */
.vm-v4__play {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 3;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(26, 26, 26, 0.5);
    display: grid;
    place-items: center;
    border-radius: var(--vm-radius);
}

.vm-v4__play:hover {
    background: rgba(26, 26, 26, 0.66);
}

.vm-v4__play-inner {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.vm-v4__play-dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vm-orange);
    color: var(--vm-ink);
    display: grid;
    place-items: center;
    font: 400 18px/1 var(--vm-font);
    padding-left: 4px;
}

.vm-v4__play-label {
    font: 600 11.5px/1.5 var(--vm-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.vm-v4__player {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--vm-green-deep);
    border-radius: var(--vm-radius);
    overflow: hidden;
}

.vm-v4__player iframe,
.vm-v4__player video {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #000;
}

/* Caption row: prev/next sit beside the counter, deliberately not over the
   artwork - overlay arrows hid too much of the image. */
.vm-v4__caption {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.vm-v4__nav {
    flex: 0 0 auto;
    width: 40px;
    height: 36px;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: #fff;
    color: var(--vm-ink);
    font: 400 15px/1 var(--vm-font);
    cursor: pointer;
    padding: 0;
}

.vm-v4__nav:hover {
    border-color: var(--vm-green);
    background: var(--vm-green-wash);
}

.vm-v4__caption-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 9px;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.vm-v4__caption-num {
    font: 700 12.5px/1.5 var(--vm-font);
    color: var(--vm-green-mid);
    white-space: nowrap;
}

.vm-v4__caption-text {
    font: 400 14.5px/1.55 var(--vm-font);
    color: var(--vm-ink);
    overflow-wrap: break-word;
    min-width: 0;
}

.vm-v4__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.vm-v4__chip {
    font: 600 12.5px/1 var(--vm-font);
    padding: 9px 13px;
    cursor: pointer;
    border-radius: var(--vm-radius-sm);
    background: #fff;
    color: var(--vm-ink);
    border: 1px solid #D8D8D8;
}

.vm-v4__chip[aria-pressed='true'] {
    background: var(--vm-ink);
    color: #fff;
    border-color: var(--vm-ink);
}

.vm-v4__thumbs {
    position: relative;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 10px 2px 12px;
    /* Defect 6: at 390px only 1 of 15 thumbnails is visible with no
       affordance. Force a slim, always-visible scrollbar (Firefox + Blink/
       WebKit switch from auto-hiding overlay bars to a persistent styled
       track once scrollbar styles exist) and give the strip momentum on
       iOS, where ::-webkit-scrollbar is ignored. */
    scrollbar-width: thin;
    scrollbar-color: #A8A8A8 #EDEDED;
    -webkit-overflow-scrolling: touch;
}

/* Always-visible horizontal scrollbar for the thumbnail strip (Defect 6).
   Styling ::-webkit-scrollbar disables the overlay auto-hide behaviour in
   Chrome/Edge/Safari, so the scroll affordance is always on screen. */
.vm-v4__thumbs::-webkit-scrollbar {
    height: 10px;
}

.vm-v4__thumbs::-webkit-scrollbar-track {
    background: #EDEDED;
    border-radius: 5px;
}

.vm-v4__thumbs::-webkit-scrollbar-thumb {
    background: #A8A8A8;
    border-radius: 5px;
    border: 2px solid #EDEDED;
}

.vm-v4__thumbs::-webkit-scrollbar-thumb:hover {
    background: #888888;
}

/* Edge fades: a second affordance that works even on iOS where scrollbars
   never render. Pointer-events are off so the fades never block a click on
   a thumbnail underneath. */
.vm-v4__thumbs::before,
.vm-v4__thumbs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 22px;
    z-index: 2;
    pointer-events: none;
}

.vm-v4__thumbs::before {
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.vm-v4__thumbs::after {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

.vm-v4__thumb {
    flex: 0 0 72px;
    width: 72px;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius-sm);
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #F1F1F1 0 6px, #FAFAFA 6px 12px);
}

.vm-v4__thumb.is-active {
    border: 2px solid var(--vm-green);
}

.vm-v4__thumb[hidden] {
    display: none;
}

.vm-v4__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vm-v4__thumb-badge {
    position: relative;
    z-index: 1;
    font: 700 9.5px/1 var(--vm-font);
    letter-spacing: 0.04em;
    padding: 4px 5px;
    border-radius: 3px;
    color: var(--vm-ink);
    background: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

.vm-v4__thumb.is-active .vm-v4__thumb-badge {
    color: var(--vm-green);
    background: rgba(34, 54, 11, 0.88);
}

.vm-v4__index {
    margin-top: 14px;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    overflow: hidden;
}

.vm-v4__index > summary {
    list-style: none;
    padding: 13px 15px;
    font: 600 13.5px/1.3 var(--vm-font);
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--vm-fill);
    /* One row even on narrow phones - the row truncates instead of wrapping. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-v4__index ol {
    margin: 0;
    padding: 8px 0 12px;
    list-style: none;
}

/* Each row is the "pick by number" control the mobile design asks for. It is
   a button at every width - same grid, same padding, same type as the plain
   rows it replaces, so the desktop index reads exactly as before. */
.vm-v4__index li {
    display: block;
}

.vm-v4__index li > button {
    width: 100%;
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 10px;
    padding: 7px 15px;
    border: 0;
    background: transparent;
    font: 400 13.5px/1.5 var(--vm-font);
    color: var(--vm-ink);
    text-align: left;
    cursor: pointer;
}

.vm-v4__index li > button:hover {
    background: var(--vm-green-wash);
}

.vm-v4__index li > button > span:first-child {
    font: 500 12.5px/1.5 var(--vm-font);
    color: var(--vm-muted);
}

/* -------------------------------------------------------------- price block */

.vm-v4__buy {
    margin-top: clamp(20px, 2.6vw, 28px);
    border: 1px solid var(--vm-line);
    border-top: 3px solid var(--vm-orange);
    border-radius: var(--vm-radius);
    padding: var(--vm-pad);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    scroll-margin-top: 96px;
}

.vm-v4__buy-main {
    flex: 1 1 190px;
    min-width: 0;
}

.vm-v4__buy-kicker {
    margin: 0;
    font: 600 12px/1 var(--vm-font);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #C25E00;
}

.vm-v4__buy-figure {
    margin: 5px 0 0;
    display: flex;
    gap: 9px;
    align-items: baseline;
    flex-wrap: wrap;
}

.vm-v4__buy-price {
    font: 700 clamp(26px, 4vw, 34px)/1 var(--vm-font);
    letter-spacing: -0.025em;
    color: var(--vm-ink);
}

.vm-v4__buy-meta {
    margin: 6px 0 0;
    font: 400 12.5px/1.5 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__buy-code {
    margin: 8px 0 0;
    font: 400 12.5px/1.5 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__buy-code strong {
    font: 700 12.5px/1.5 var(--vm-font);
    color: var(--vm-ink);
}

/* Column holding the CTA pair and the three quick links beneath it, the way
   the desktop rail stacks them in the handoff. It carries the flex basis the
   CTA row used to own, so the buy panel's proportions are unchanged. */
.vm-v4__actions {
    flex: 0 1 300px;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.vm-v4__ctas {
    /* Side by side, per the brief. Without an explicit column track this grid
       stacked them, which is the mobile arrangement, not the desktop one. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 8px;
    flex: 0 1 300px;
}

/* Three green quick links, present at both widths: the desktop rail lists
   them under Order Now and the phone sheet turns them into a 3-up row. */
.vm-v4__quick {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.vm-v4__quick-link {
    display: flex;
    gap: 9px;
    align-items: center;
    background: var(--vm-green);
    border-radius: var(--vm-radius);
    color: var(--vm-ink);
    font: 600 13.5px/1.25 var(--vm-font);
    padding: 14px;
    min-height: 44px;
}

.vm-v4__quick-link::before {
    content: '\25E6';
    flex: 0 0 auto;
}

.vm-v4__quick-link:hover,
.vm-v4__quick-link:focus-visible {
    background: #86D72A;
    color: var(--vm-ink);
    text-decoration: none;
}

.vm-v4__cta {
    display: block;
    text-align: center;
    border-radius: var(--vm-radius);
    font: 600 14.5px/1 var(--vm-font);
    padding: 16px 18px;
    color: #fff;
    border: 0;
    cursor: pointer;
}

.vm-v4__cta:hover,
.vm-v4__cta:focus-visible {
    color: #fff;
    text-decoration: none;
}

.vm-v4__cta--order {
    background: var(--vm-orange);
}

.vm-v4__cta--order:hover,
.vm-v4__cta--order:focus-visible {
    background: var(--vm-orange-hover);
}

.vm-v4__cta--whatsapp {
    background: var(--vm-whatsapp);
}

.vm-v4__cta--whatsapp:hover,
.vm-v4__cta--whatsapp:focus-visible {
    background: var(--vm-whatsapp-hover);
}

/* --------------------------------------------------------------- highlights */

.vm-v4__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1px;
    background: var(--vm-line);
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    overflow: hidden;
}

.vm-v4__card {
    background: #fff;
    padding: clamp(14px, 1.8vw, 18px);
}

.vm-v4__card h3 {
    margin: 0 0 6px;
    font: 700 15.5px/1.3 var(--vm-font);
    color: var(--vm-ink);
}

.vm-v4__card p {
    margin: 0;
    font: 400 14.5px/1.7 var(--vm-font);
    color: var(--vm-text);
}

/* ------------------------------------------------------------ specification */

.vm-v4__specs {
    width: 100%;
    border-collapse: collapse;
}

.vm-v4__specs th {
    text-align: left;
    vertical-align: top;
    padding: 12px 15px 12px 0;
    border-bottom: 1px solid var(--vm-line);
    font: 600 11.5px/1.5 var(--vm-font);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vm-muted);
    width: 32%;
}

.vm-v4__specs td {
    padding: 12px 0;
    border-bottom: 1px solid var(--vm-line);
    font: 400 14.5px/1.65 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__specs tr:last-child th,
.vm-v4__specs tr:last-child td {
    border-bottom: 0;
}

/* -------------------------------------------------------------- price tables */

.vm-v4__tables {
    display: grid;
    gap: clamp(18px, 2.4vw, 26px);
}

/* Defect 5: grid items default to min-width:auto, which sizes the track to
   the table's 520px min-width. On a 390px screen that pushes the wrap past
   the page edge (clipped by .vm-v4 overflow-x:hidden) instead of letting it
   scroll. Let the item shrink so .vm-v4__table-wrap can do its own
   horizontal scrolling. */
.vm-v4__tables > div {
    min-width: 0;
}

.vm-v4__table-head {
    margin: 0 0 12px;
    padding: 11px 16px;
    border-radius: var(--vm-radius);
    font: 700 clamp(16px, 2vw, 19px)/1.3 var(--vm-font);
}

.vm-v4__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    /* Defect 5: on small screens the wrap scrolls its 520px table. Give it
       the same always-visible scrollbar treatment as the thumbnail strip so
       it is obvious the table continues, plus iOS momentum scrolling. No
       bar renders when there is nothing to scroll (desktop). */
    scrollbar-width: thin;
    scrollbar-color: #A8A8A8 #EDEDED;
    -webkit-overflow-scrolling: touch;
}

.vm-v4__table-wrap::-webkit-scrollbar {
    height: 10px;
}

.vm-v4__table-wrap::-webkit-scrollbar-track {
    background: #EDEDED;
    border-radius: 5px;
}

.vm-v4__table-wrap::-webkit-scrollbar-thumb {
    background: #A8A8A8;
    border-radius: 5px;
    border: 2px solid #EDEDED;
}

.vm-v4__table-wrap::-webkit-scrollbar-thumb:hover {
    background: #888888;
}

.vm-v4__table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    /* Fixed layout: column widths come from the header row, never from cell
       content, so one long cell cannot balloon its column while every other
       column collapses (Defect 5 - 655px vs 82px imbalance). */
    table-layout: fixed;
}

.vm-v4__table caption {
    caption-side: top;
    text-align: left;
    padding: 10px 12px;
    background: var(--vm-green-wash);
    color: var(--vm-green-deep);
    font: 600 12.5px/1.5 var(--vm-font);
}

.vm-v4__table thead tr {
    background: var(--vm-thead);
}

.vm-v4__table thead th {
    padding: 11px 12px;
    font: 600 12.5px/1.35 var(--vm-font);
    color: #fff;
    text-align: center;
    border-bottom: 0;
    /* With table-layout: fixed a long label cannot widen its column, so let
       it wrap instead of spilling sideways into the next column. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.vm-v4__table thead th.vm-v4__th-left {
    text-align: left;
}

/* Fixed-layout column widths (Defect 5). The code column keeps the 104px
   that .vm-v4__cell-code already uses; the size column gets a fixed share;
   the price columns (no width) split the remaining space equally, so no
   single column can balloon. */
.vm-v4__table thead th.vm-v4__th-code {
    width: 104px;
}

.vm-v4__table thead th.vm-v4__th-size {
    width: 150px;
}

.vm-v4__table tbody tr:nth-child(even) {
    background: #FBFBFB;
}

.vm-v4__table td,
.vm-v4__table tbody th {
    border-bottom: 1px solid var(--vm-line-soft);
}

.vm-v4__cell-code {
    padding: 12px;
    font: 600 12.5px/1.4 var(--vm-font);
    color: var(--vm-muted);
    text-align: left;
    width: 104px;
    /* The column is fixed at 104px now; wrap a long code rather than
       letting it spill over the size column. */
    overflow-wrap: anywhere;
}

.vm-v4__cell-size {
    text-align: left;
    padding: 12px;
    font-weight: 400;
}

.vm-v4__cell-size span {
    display: block;
    font: 600 clamp(14px, 1.9vw, 15.5px)/1.3 var(--vm-font);
    color: var(--vm-ink);
}

.vm-v4__cell {
    padding: 12px 10px;
    text-align: center;
    /* No nowrap: with fixed layout the column width is decided by the header
       row, so a price longer than its column wraps instead of ballooning the
       column or overflowing into the next cell (Defect 5). */
    white-space: normal;
    overflow-wrap: anywhere;
    background: var(--vm-green-fill);
    font: 800 13.5px/1.3 var(--vm-font);
    color: var(--vm-ink);
    vertical-align: top;
}

/* "Ask" - quoted on request rather than published. */
.vm-v4__cell.is-ask {
    background: var(--vm-green-wash);
    font: 700 12.5px/1.3 var(--vm-font);
    color: var(--vm-green-deep);
}

/* "NA" - not offered for this row. */
.vm-v4__cell.is-na {
    background: #fff;
    font: 600 12.5px/1.3 var(--vm-font);
    color: #6B6B6B;
}

.vm-v4__cell.is-empty {
    background: #fff;
    color: var(--vm-faint);
    font: 400 12.5px/1.3 var(--vm-font);
}

/* Anything past 40 characters relaxes the column and clamps to two lines. */
.vm-v4__cell.is-long {
    text-align: left;
    white-space: normal;
    background: #fff;
    font: 400 12.5px/1.65 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__cell-text {
    display: block;
}

/* The column heading, repeated inside its own cell so the phone's card
   layout can carry it. Desktop shows the identical words in <thead>, so this
   copy is duplicated rather than exclusive to one width - which is why it can
   be dropped here and the <thead> dropped in the phone sheet. */
.vm-v4__cell-label {
    display: none;
}

.vm-v4__cell.is-long .vm-v4__cell-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Break long unbroken tokens inside the fixed column instead of letting
       them push the intrinsic width out (Defect 5). */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vm-v4__cell.is-long.is-open .vm-v4__cell-text,
.vm-v4__cell.is-long.no-truncate .vm-v4__cell-text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    line-clamp: none;
}

.vm-v4__more {
    margin-top: 5px;
    border: 0;
    background: transparent;
    color: var(--vm-green-mid);
    font: 700 11px/1 var(--vm-font);
    padding: 2px 0;
    cursor: pointer;
    text-decoration: underline;
}

.vm-v4__legend {
    margin: 0;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font: 400 12.5px/1.5 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__legend span {
    display: flex;
    gap: 6px;
    align-items: center;
}

.vm-v4__swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid var(--vm-line);
    background: #fff;
}

.vm-v4__swatch--price {
    background: var(--vm-green-fill);
    border-color: #B9E188;
}

.vm-v4__swatch--ask {
    background: var(--vm-green-wash);
    border-color: var(--vm-green-border);
}

/* --------------------------------------------------------- terms / to order */

.vm-v4__twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(20px, 3vw, 34px);
}

.vm-v4__softbar {
    margin: 0 0 14px;
    font: 700 15px/1.3 var(--vm-font);
    background: var(--vm-green-wash);
    border: 1px solid var(--vm-green-border);
    border-radius: var(--vm-radius);
    padding: 10px 14px;
    color: var(--vm-green-deep);
}

.vm-v4__bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.vm-v4__bullets li {
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: 9px;
    font: 400 14px/1.65 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__bullets li > span:first-child {
    color: var(--vm-green-deep);
}

.vm-v4__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.vm-v4__steps li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    font: 400 14px/1.65 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__steps li > span:first-child {
    font: 600 12px/1.6 var(--vm-font);
    color: var(--vm-green-deep);
}

/* ------------------------------------------------------------- enquiry row */

.vm-v4__enquiry {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: var(--vm-fill);
    padding: var(--vm-pad);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.vm-v4__enquiry-copy {
    flex: 1 1 260px;
    min-width: 0;
}

.vm-v4__enquiry h2 {
    margin: 0 0 4px;
    font: 700 17px/1.3 var(--vm-font);
    letter-spacing: -0.01em;
    color: var(--vm-ink);
}

.vm-v4__enquiry p {
    margin: 0;
    font: 400 13.5px/1.6 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__enquiry .vm-v4__ctas {
    flex: 0 1 240px;
}

/* ---------------------------------------------------------------------- FAQ */

.vm-v4__faq-list {
    border-top: 1px solid var(--vm-line);
    /* Was 80ch (731.9px), which stopped the questions 292px short of their
       own green bar and left the pager centred 146px off its content. */
    max-width: none;
}

.vm-v4__faq-page[hidden] {
    display: none;
}

.vm-v4__faq {
    border-bottom: 1px solid var(--vm-line);
    scroll-margin-top: 96px;
}

.vm-v4__faq > summary {
    list-style: none;
    padding: 15px 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
    cursor: pointer;
}

.vm-v4__faq > summary::before {
    content: '+';
    flex: 0 0 auto;
    color: var(--vm-green-mid);
    font: 700 15px/1.45 var(--vm-font);
}

.vm-v4__faq[open] > summary::before {
    content: '\2212';
}

.vm-v4__faq h3 {
    margin: 0;
    font: 600 15.5px/1.45 var(--vm-font);
    color: var(--vm-ink);
    display: inline;
}

.vm-v4__faq-answer {
    margin: 0 0 12px;
    padding-left: 25px;
    font: 400 14.5px/1.75 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__faq-share {
    margin: 0 0 17px;
    padding-left: 25px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}

.vm-v4__faq-share > span:first-child {
    font: 400 11.5px/1.4 var(--vm-font);
    color: var(--vm-faint);
    margin-right: 2px;
}

.vm-v4__mini {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: #fff;
    color: var(--vm-ink);
    font: 600 11.5px/1 var(--vm-font);
    padding: 8px 10px;
    cursor: pointer;
}

.vm-v4__mini:hover,
.vm-v4__mini:focus-visible {
    border-color: var(--vm-green);
    background: var(--vm-green-wash);
    color: var(--vm-ink);
    text-decoration: none;
}

.vm-v4__mini--green {
    border-color: var(--vm-green-border);
    background: var(--vm-green-wash);
    color: var(--vm-green-deep);
}

.vm-v4__mini--green:hover,
.vm-v4__mini--green:focus-visible {
    background: #E8F8D2;
    color: var(--vm-green-deep);
}

.vm-v4__pager {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* The phone's answer to the numbered pager: one tap opens the rest of the
   questions in place. Both controls drive the same question nodes, and only
   one of the two is on screen at any width. */
.vm-v4__faq-more {
    display: none;
    width: 100%;
    min-height: 44px;
    margin-top: 9px;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: #fff;
    color: var(--vm-green-deep);
    font: 600 13.5px/1 var(--vm-font);
    padding: 14px;
    cursor: pointer;
}

.vm-v4__faq-more:hover,
.vm-v4__faq-more:focus-visible {
    border-color: var(--vm-green);
    background: var(--vm-green-wash);
}

.vm-v4__page-btn {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius-pill);
    background: #fff;
    color: var(--vm-ink);
    font: 600 12.5px/1 var(--vm-font);
    padding: 9px 13px;
    cursor: pointer;
    min-width: 40px;
}

.vm-v4__page-btn:hover:not(:disabled) {
    border-color: var(--vm-green);
    background: var(--vm-green-wash);
}

.vm-v4__page-btn[aria-current='true'] {
    background: var(--vm-ink);
    border-color: var(--vm-ink);
    color: #fff;
}

.vm-v4__page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ------------------------------------------------- social posts and guides */

.vm-v4__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
    gap: clamp(10px, 1.6vw, 14px);
}

.vm-v4__post {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vm-v4__post-shot {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: repeating-linear-gradient(135deg, #F1F1F1 0 6px, #FAFAFA 6px 12px);
    font: 400 10.5px/1.5 var(--vm-font);
    color: var(--vm-faint);
    text-align: center;
    padding: 8px;
    line-height: 0;
}

.vm-v4__post-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vm-v4__post-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.vm-v4__post-body p {
    margin: 0;
    font: 400 12.5px/1.6 var(--vm-font);
    color: var(--vm-text);
    overflow-wrap: anywhere;
}

.vm-v4__post-foot {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: auto;
    font: 400 11.5px/1.4 var(--vm-font);
    color: var(--vm-faint);
}

.vm-v4__post-foot a {
    margin-left: auto;
    font: 600 11.5px/1 var(--vm-font);
    white-space: nowrap;
}

.vm-v4__guide {
    color: var(--vm-ink);
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    padding: 15px;
    display: grid;
    gap: 8px;
    align-content: start;
}

.vm-v4__guide:hover,
.vm-v4__guide:focus-visible {
    border-color: var(--vm-green);
    color: var(--vm-ink);
    text-decoration: none;
}

.vm-v4__guide-title {
    font: 700 15px/1.35 var(--vm-font);
}

.vm-v4__guide-excerpt {
    font: 400 13.5px/1.6 var(--vm-font);
    color: var(--vm-muted);
}

/* -------------------------------------------------------- related products */

.vm-v4__rail-head {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--vm-green);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.vm-v4__rail-head h2 {
    margin: 0;
    font: 700 13px/1.3 var(--vm-font);
    color: var(--vm-ink);
}

.vm-v4__refresh {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: #fff;
    color: var(--vm-ink);
    font: 600 11.5px/1 var(--vm-font);
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.vm-v4__refresh:hover {
    border-color: var(--vm-green);
    background: var(--vm-green-wash);
}

/* auto-fit collapses the empty tracks, so a rail of two products renders as
   two columns rather than five with three dead slots. */
.vm-v4__rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
    gap: clamp(10px, 1.6vw, 14px);
}

/* The card internals reuse the product listing page's Tailwind structure
   (name + category bars overlaid on the square thumbnail). These rules only
   keep the card itself sane when that stylesheet is stale. */
.vm-v4__rail-card {
    min-width: 0;
    border-radius: var(--vm-radius);
    border-bottom: 3px solid var(--vm-green);
}

/* The listing-card treatment: square thumbnail with the name and category
   bars overlaid at the bottom of the image, like the product listing page. */
.vm-v4__rail-item {
    position: relative;
    display: block;
    overflow: hidden;
    background: #D4D4D4;
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    color: var(--vm-ink);
    overflow-wrap: break-word;
}

.vm-v4__rail-item:hover,
.vm-v4__rail-item:focus-visible {
    color: var(--vm-green-deep);
    text-decoration: none;
}

.vm-v4__rail-shot {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    line-height: 0;
}

.vm-v4__rail-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vm-v4__rail-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}

.vm-v4__rail-name {
    display: block;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 5px 8px;
    font: 600 12px/1.4 var(--vm-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-v4__rail-name:hover,
.vm-v4__rail-item:hover .vm-v4__rail-name {
    color: #fff;
    text-decoration: none;
}

.vm-v4__rail-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    background: #000;
}

.vm-v4__rail-label {
    display: block;
    color: #fff;
    text-align: center;
    padding: 5px 8px;
    font: 400 10px/1.4 var(--vm-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
}

.vm-v4__rail-label:hover {
    background: var(--vm-green);
    color: #000;
    text-decoration: none;
}

/* ---------------------------------------------------------- long-form copy */

.vm-v4__longform {
    border-top: 1px solid var(--vm-line);
    border-bottom: 1px solid var(--vm-line);
}

.vm-v4__longform > summary {
    list-style: none;
    padding: 14px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--vm-muted);
}

.vm-v4__longform > summary h2 {
    margin: 0;
    font: 600 13.5px/1.4 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__longform > summary::after {
    content: '\2304';
    font: 400 15px/1 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__longform[open] > summary::after {
    content: '\2303';
}

.vm-v4__longform-body {
    padding: 2px 0 24px;
    /* Same reason as the intro and the FAQ list - see those. */
    max-width: none;
}

/* The collapsed copy opens to the same typography the rest of the page
   uses: one style for every heading, paragraph, list and link inside it. */
.vm-v4__longform-body h2 {
    margin: 20px 0 8px;
    font: 700 clamp(16px, 2vw, 18px)/1.35 var(--vm-font);
    color: var(--vm-ink);
}

.vm-v4__longform-body h2:first-child {
    margin-top: 4px;
}

.vm-v4__longform-body p {
    margin: 0 0 14px;
    font: 400 14.5px/1.75 var(--vm-font);
    color: var(--vm-text);
    overflow-wrap: break-word;
}

.vm-v4__longform-body ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.vm-v4__longform-body li {
    margin: 0 0 8px;
    font: 400 14.5px/1.75 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__longform-body a {
    color: var(--vm-green-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vm-v4__longform-body a:hover {
    color: var(--vm-green-mid);
}

/* =====================================================================
   Phone sheet - handoff Part 2, "Mobile product page"
   ---------------------------------------------------------------------
   "A separate design, not just the desktop page at a narrow width. Same
   content, lighter presentation." Everything below re-lays the SAME markup
   the desktop uses: tables become cards, the two panels become one bordered
   stack, the specification loses its boxes, the rail turns into a scrolling
   strip of square thumbs. No branch of this stylesheet removes a word that
   is not visibly repeated somewhere else on the same screen.

   640px is the breakpoint the file already used for the narrow view; the
   prototype's canvas is 430px and nothing here may overflow at 320px.
   ===================================================================== */

@media (max-width: 640px) {

    /* ------------------------------------------------------------ gallery */

    /* Tap the left or right third of the image to step through it. */
    .vm-v4__tap {
        display: block;
    }

    /* Caption row: 44px arrows either side of the counter, on one line. */
    .vm-v4__caption {
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 9px;
    }

    .vm-v4__caption-body {
        order: 0;
        flex: 1 1 auto;
        gap: 6px;
    }

    .vm-v4__caption-text {
        font: 400 13px/1.5 var(--vm-font);
    }

    .vm-v4__nav {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        max-width: none;
        font: 400 16px/1 var(--vm-font);
    }

    .vm-v4__chips {
        margin-top: 10px;
        gap: 5px;
    }

    .vm-v4__chip {
        font: 600 11.5px/1 var(--vm-font);
        padding: 8px 11px;
    }

    /* Numbered thumbnail rail, scrolling sideways. */
    .vm-v4__thumbs {
        gap: 7px;
        padding: 9px 0 2px;
    }

    .vm-v4__thumb {
        flex: 0 0 76px;
        width: 76px;
        height: 46px;
        aspect-ratio: auto;
        border-width: 2px;
        border-color: var(--vm-line);
    }

    .vm-v4__thumb-badge {
        position: absolute;
        left: 3px;
        bottom: 3px;
        font: 700 8.5px/1 var(--vm-font);
        padding: 3px 4px;
        color: var(--vm-green);
        background: rgba(34, 54, 11, 0.85);
    }

    .vm-v4__index > summary {
        padding: 11px 12px;
        font: 600 12.5px/1.4 var(--vm-font);
        color: var(--vm-green-deep);
    }

    .vm-v4__index li > button {
        padding: 9px 12px;
        min-height: 44px;
        font: 400 12.5px/1.5 var(--vm-font);
    }

    .vm-v4__index li > button > span:first-child {
        color: var(--vm-green-mid);
        font: 700 11px/1.5 var(--vm-font);
    }

    .vm-v4__note {
        font: 400 12px/1.6 var(--vm-font);
    }

    /* ------------------------------------------------- price block and CTAs */

    .vm-v4__buy,
    .vm-v4__enquiry {
        display: block;
    }

    .vm-v4__buy {
        padding: 14px;
        text-align: center;
    }

    .vm-v4__buy-figure {
        justify-content: center;
    }

    .vm-v4__actions,
    .vm-v4 .vm-v4__enquiry .vm-v4__ctas {
        margin-top: 12px;
    }

    /* Two columns, WhatsApp leading - the reverse of the desktop emphasis,
       and the one place the phone design overrides the rail's order. */
    .vm-v4 .vm-v4__ctas {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vm-v4__cta {
        padding: 16px 10px;
        font: 700 14.5px/1 var(--vm-font);
    }

    .vm-v4__cta--whatsapp {
        order: -1;
    }

    /* Three quick links, 44px minimum, side by side under the CTAs. */
    .vm-v4__quick {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .vm-v4__quick-link {
        display: grid;
        place-items: center;
        text-align: center;
        border-radius: var(--vm-radius-sm);
        font: 600 10px/1.3 var(--vm-font);
        padding: 11px 6px;
        min-height: 44px;
    }

    .vm-v4__quick-link::before {
        content: none;
    }

    /* -------------------------------------------------- collapsible panels */

    .vm-v4__bar {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
    }

    .vm-v4__panel-mark {
        display: block;
    }

    /* Highlights lose the card grid: hairline-separated blocks, no boxes. */
    .vm-v4__cards {
        border: 0;
        border-radius: 0;
        background: transparent;
        gap: 0;
    }

    .vm-v4__card {
        padding: 11px 0;
        border-top: 1px solid var(--vm-line-soft);
    }

    .vm-v4__card:first-child {
        border-top: 0;
        padding-top: 2px;
    }

    .vm-v4__card h3 {
        font: 700 13.5px/1.4 var(--vm-font);
    }

    .vm-v4__card p {
        font: 400 13.5px/1.7 var(--vm-font);
    }

    /* ------------------------------------------------------- specification */

    /* A plain list: label above value, hairline rules, no shading. */
    .vm-v4__specs,
    .vm-v4__specs tbody,
    .vm-v4__specs tr,
    .vm-v4__specs th,
    .vm-v4__specs td {
        display: block;
        width: auto;
    }

    .vm-v4__specs tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--vm-line-soft);
    }

    .vm-v4__specs tr:last-child {
        border-bottom: 0;
    }

    .vm-v4__specs th {
        padding: 0 0 4px;
        border-bottom: 0;
        font: 700 10.5px/1.4 var(--vm-font);
        letter-spacing: 0.07em;
        color: var(--vm-green-mid);
    }

    .vm-v4__specs td {
        padding: 0;
        border-bottom: 0;
        font: 400 13.5px/1.65 var(--vm-font);
        color: var(--vm-ink);
    }

    /* -------------------------------------------------------- price tables */

    /* Not a sideways-scrolling table: a theme bar, then one card per size
       with the value columns side by side inside it. */
    .vm-v4__tables {
        gap: 16px;
    }

    .vm-v4__table-head {
        margin: 0 0 4px;
        padding: 9px 12px;
        border-radius: var(--vm-radius-sm);
        font: 700 13px/1.4 var(--vm-font);
    }

    .vm-v4__table-wrap {
        overflow-x: visible;
        border: 0;
        border-radius: 0;
    }

    .vm-v4__table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vm-v4__table caption {
        display: block;
        padding: 0 0 10px;
        background: transparent;
        color: var(--vm-muted);
        font: 400 11.5px/1.5 var(--vm-font);
    }

    /* The only text this sheet drops, and it is not exclusive: every column
       heading is repeated by .vm-v4__cell-label inside each card below. */
    .vm-v4__table thead {
        display: none;
    }

    .vm-v4__table tbody {
        display: grid;
        gap: 10px;
    }

    .vm-v4__table tbody tr,
    .vm-v4__table tbody tr:nth-child(even) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
        gap: 7px 10px;
        padding: 11px 12px;
        border: 1px solid var(--vm-line);
        border-radius: var(--vm-radius);
        background: #fff;
    }

    /* The row rules are drawn by the card border now. Written with the same
       element selectors the base uses, because `.vm-v4__table td` outranks a
       lone class and would keep its hairline inside the card. */
    .vm-v4__table tbody td,
    .vm-v4__table tbody th {
        border-bottom: 0;
    }

    .vm-v4__cell-code,
    .vm-v4__cell-size {
        grid-column: 1 / -1;
        display: block;
        width: auto;
        padding: 0;
        text-align: left;
    }

    .vm-v4__cell-code {
        font: 600 11px/1.5 var(--vm-font);
        color: var(--vm-muted);
    }

    .vm-v4__cell-size span {
        font: 700 13.5px/1.5 var(--vm-font);
    }

    .vm-v4__cell,
    .vm-v4__cell.is-ask,
    .vm-v4__cell.is-na,
    .vm-v4__cell.is-empty,
    .vm-v4__cell.is-long {
        display: block;
        min-width: 0;
        padding: 0;
        background: transparent;
        text-align: left;
        white-space: normal;
    }

    .vm-v4__cell-label {
        display: block;
        font: 400 10px/1.4 var(--vm-font);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--vm-faint);
    }

    /* Published prices orange, Ask muted grey, NA light grey. */
    .vm-v4__cell .vm-v4__cell-text {
        margin-top: 2px;
        font: 700 14px/1.3 var(--vm-font);
        color: var(--vm-orange);
    }

    .vm-v4__cell.is-ask .vm-v4__cell-text {
        color: var(--vm-muted);
    }

    .vm-v4__cell.is-na .vm-v4__cell-text,
    .vm-v4__cell.is-empty .vm-v4__cell-text {
        color: #B8B8B8;
    }

    /* A long value takes the whole card rather than forcing a 210px track. */
    .vm-v4__cell.is-long {
        grid-column: 1 / -1;
    }

    .vm-v4__cell.is-long .vm-v4__cell-text {
        margin-top: 2px;
        font: 400 12.5px/1.65 var(--vm-font);
        color: var(--vm-text);
    }

    .vm-v4__legend {
        gap: 8px 12px;
        font: 400 11.5px/1.5 var(--vm-font);
    }

    /* --------------------------------------------------- terms and to order */

    /* One bordered stack with hairline dividers, not two cards. */
    .vm-v4__twocol {
        display: block;
        border: 1px solid var(--vm-line);
        border-radius: var(--vm-radius);
        overflow: hidden;
    }

    .vm-v4__twocol > div {
        padding: 12px 14px 14px;
    }

    .vm-v4__twocol > div + div {
        border-top: 1px solid var(--vm-line);
    }

    .vm-v4__softbar {
        margin: 0 0 10px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        font: 700 13.5px/1.3 var(--vm-font);
        color: var(--vm-ink);
    }

    .vm-v4__bullets li,
    .vm-v4__steps li {
        font: 400 13.5px/1.65 var(--vm-font);
    }

    /* ----------------------------------------------------- closing help block */

    .vm-v4__enquiry {
        background: var(--vm-green-wash);
        border-color: var(--vm-green-border);
        padding: 16px;
    }

    .vm-v4__enquiry h2 {
        font: 700 15px/1.4 var(--vm-font);
        color: var(--vm-green-deep);
    }

    .vm-v4__enquiry p {
        font: 400 13.5px/1.65 var(--vm-font);
        color: var(--vm-text);
    }

    /* ---------------------------------------------------------------- FAQ */

    /* Four questions and one "show the rest" control instead of the pager.
       Both drive the same nodes; neither is content. */
    .vm-v4__pager {
        display: none;
    }

    .vm-v4__faq-more {
        display: block;
    }

    .vm-v4__faq > summary {
        padding: 13px 0;
    }

    .vm-v4__faq h3 {
        font: 600 13.5px/1.45 var(--vm-font);
    }

    .vm-v4__faq-answer {
        padding-left: 22px;
        font: 400 13.5px/1.7 var(--vm-font);
    }

    .vm-v4__faq-share {
        padding-left: 22px;
    }

    /* ---------------------------------------------------- related products */

    /* Square thumbs in a scrolling rail, dark name and category bars over
       the image, green rule under each card. */
    .vm-v4__rail {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: none;
    }

    .vm-v4__rail-card {
        flex: 0 0 132px;
        scroll-snap-align: start;
    }

    .vm-v4__rail-head h2 {
        font: 700 14px/1.3 var(--vm-font);
    }

    .vm-v4__refresh {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    /* ------------------------------------------------------ long-form copy */

    .vm-v4__longform > summary::after {
        content: '\25BC';
        font: 400 11px/1 var(--vm-font);
    }

    .vm-v4__longform[open] > summary::after {
        content: '\25B2';
    }

    .vm-v4__longform > summary h2 {
        font: 600 13px/1.4 var(--vm-font);
    }

    /* Defect 5: on a 390px screen the price table scrolls at its 520px
       min-width, so price columns are ~88-133px. Trim cell padding so
       prices still sit on one line where they fit. */
    .vm-v4__cell {
        padding: 12px 6px;
    }
}

/* =====================================================================
   Design revamp - two-column product page ("Large Cheque Page v4")
   ---------------------------------------------------------------------
   The public V4 page now matches the handoff's desktop composition: the
   main column carries the sections in reading order and a new sidebar
   aside holds the order CTAs plus the related products rail. The rail
   markup and its ids/data-vm attributes are unchanged, so the shuffle JS
   keeps working. Everything here layers on the same tokens as the rest
   of the file; nothing below reaches outside .vm-v4.
   ===================================================================== */

/* Two-column shell: the main column grows, the sidebar caps at 310px and
   wraps beneath the main column on narrow screens. */
.vm-v4__shell {
    display: flex;
    gap: clamp(20px, 2.8vw, 36px);
    align-items: flex-start;
    flex-wrap: wrap;
}

.vm-v4__col {
    flex: 1 1 460px;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.vm-v4__side {
    flex: 1 1 240px;
    max-width: 310px;
    min-width: 0;
    display: grid;
    gap: clamp(14px, 2vw, 20px);
    align-content: start;
}

/* Sidebar CTA stack: orange Order Now on top, then the green link rows
   with their leading bullet, exactly as the design's aside. */
.vm-v4__side-ctas {
    display: grid;
    gap: 7px;
    align-content: start;
}

.vm-v4__side-order {
    display: block;
    background: var(--vm-orange);
    color: var(--vm-ink);
    font: 700 15px/1 var(--vm-font);
    padding: 16px;
    border-radius: var(--vm-radius);
    text-align: center;
}

.vm-v4__side-order:hover,
.vm-v4__side-order:focus-visible {
    background: var(--vm-orange-hover);
    color: var(--vm-ink);
    text-decoration: none;
}

.vm-v4__side-link {
    display: flex;
    gap: 9px;
    align-items: center;
    background: var(--vm-green);
    color: var(--vm-ink);
    font: 600 13.5px/1.25 var(--vm-font);
    padding: 14px;
    border-radius: var(--vm-radius);
    min-height: 44px;
}

.vm-v4__side-link:hover,
.vm-v4__side-link:focus-visible {
    background: #86D72A;
    color: var(--vm-ink);
    text-decoration: none;
}

/* Related products inside the sidebar: single-column rail under the same
   2px green underline heading the design's aside uses. */
.vm-v4__side-related {
    min-width: 0;
}

.vm-v4__side-related .vm-v4__rail-head {
    margin-bottom: 10px;
}

/* "Buy from" note beside the price ("1200 x 595 mm, common size"). */
.vm-v4__buy-note {
    font: 400 13px/1.4 var(--vm-font);
    color: var(--vm-muted);
}

/* Highlight tag pills, like the design's bank-template card. */
.vm-v4__highlight-chips {
    margin-top: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.vm-v4__highlight-chip {
    font: 500 11.5px/1 var(--vm-font);
    background: var(--vm-green-wash);
    border: 1px solid var(--vm-green-border);
    padding: 6px 8px;
    color: #2F4A12;
}

/* Pricing tables: pale tinted caption strip directly above each table,
   one tint per theme (the model's THEME_STYLES carry the head colours;
   these tints mirror the design's per-theme caption row). */
.vm-v4__table-caption {
    padding: 10px 14px;
    font: 600 12.5px/1.4 var(--vm-font);
    text-align: left;
}

.vm-v4__table-caption--buying {
    background: #FFF4E5;
    color: #9A4E00;
}

.vm-v4__table-caption--renting,
.vm-v4__table-caption--promotion {
    background: var(--vm-green-wash);
    color: var(--vm-green-deep);
}

.vm-v4__table-caption--clearance {
    background: #FDF2F3;
    color: #9B1017;
}

/* Row note under the size; the "most ordered" note reads louder in the
   dark green the design gives it. */
.vm-v4__row-note {
    display: block;
    margin-top: 2px;
    font: 400 12px/1.4 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__row-note--best {
    font-weight: 700;
    color: var(--vm-green-mid);
}

/* Footnote paragraph under each price table. */
.vm-v4__table-footnote {
    margin: 11px 0 0;
    font: 400 12.5px/1.6 var(--vm-font);
    color: var(--vm-muted);
}

/* Static green callout closing the pricing section. */
.vm-v4__pricing-callout {
    margin: 0;
    background: var(--vm-green-wash);
    border-left: 4px solid var(--vm-green);
    border-radius: var(--vm-radius);
    padding: 13px 15px;
    font: 400 14px/1.7 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__pricing-callout a {
    font-weight: 600;
}

/* Guide card meta line: "Aug 3, 2026 · 13 min read". */
.vm-v4__guide-meta {
    font: 400 11.5px/1.4 var(--vm-font);
    color: var(--vm-muted);
}

/* Ask box: question textarea, live counter, submit. */
.vm-v4__ask {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    background: var(--vm-fill);
    padding: var(--vm-pad);
}

.vm-v4__ask h2 {
    margin: 0 0 4px;
    font: 700 17px/1.3 var(--vm-font);
    letter-spacing: -0.01em;
    color: var(--vm-ink);
}

.vm-v4__ask p {
    margin: 0 0 12px;
    font: 400 13.5px/1.6 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__ask-input {
    width: 100%;
    font: 400 14.5px/1.6 var(--vm-font);
    padding: 12px;
    border: 1px solid #D8D8D8;
    background: #fff;
    color: var(--vm-ink);
    resize: vertical;
}

.vm-v4__ask-input:focus-visible {
    outline: 2px solid var(--vm-green-mid);
    outline-offset: 0;
}

.vm-v4__ask-foot {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vm-v4__ask-count {
    font: 500 12.5px/1 var(--vm-font);
    color: var(--vm-muted);
}

.vm-v4__ask-submit {
    margin-left: auto;
    background: var(--vm-green);
    color: var(--vm-ink);
    font: 700 14px/1 var(--vm-font);
    padding: 14px 24px;
    border: 0;
    border-radius: var(--vm-radius);
    cursor: pointer;
}

.vm-v4__ask-submit:hover,
.vm-v4__ask-submit:focus-visible {
    background: #86D72A;
    color: var(--vm-ink);
}

/* Narrow screens: the aside stacks under the main column and takes the
   full width so the CTAs and rail match the content column. */
@media (max-width: 640px) {
    .vm-v4__side {
        flex-basis: 100%;
        max-width: none;
    }

    .vm-v4__table-caption {
        font: 600 12px/1.4 var(--vm-font);
        padding: 9px 12px;
    }

    .vm-v4__ask-input {
        font: 400 13.5px/1.6 var(--vm-font);
    }
}

/* ------------------------------------------------- related social posts */
/* One big featured card with a sideways-scrolling thumbnail strip below it.
   Tapping a thumb swaps the featured card; the strip itself scrolls on
   touch like the gallery's thumbnail row. */
.vm-v4__social {
    display: grid;
    gap: 12px;
}

.vm-v4__social-feature {
    border: 1px solid var(--vm-line);
    border-radius: var(--vm-radius);
    overflow: hidden;
    background: #fff;
}

.vm-v4__social-shot {
    display: block;
    line-height: 0;
}

.vm-v4__social-shot img {
    width: 100%;
    aspect-ratio: 900/492;
    object-fit: cover;
    display: block;
    background: var(--vm-fill);
}

.vm-v4__social-body {
    padding: 14px 16px 16px;
}

.vm-v4__social-text {
    margin: 0 0 12px;
    font: 400 14.5px/1.7 var(--vm-font);
    color: var(--vm-text);
}

.vm-v4__social-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 4px 0 6px;
    -webkit-overflow-scrolling: touch;
}

.vm-v4__social-thumb {
    flex: 0 0 68px;
    width: 68px;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: grid;
    place-items: center;
    border: 2px solid transparent;
    border-radius: var(--vm-radius);
    overflow: hidden;
    background: var(--vm-fill);
    color: var(--vm-muted);
    font: 400 10px/1.3 var(--vm-font);
    scroll-snap-align: start;
}

.vm-v4__social-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-v4__social-thumb.is-active {
    border-color: var(--vm-ink);
}