/* ============================================================
   Wood Veneer - frontend styles
   Palette follows the existing site: #111 ink, #d71920 accent.
   ============================================================ */

.veneer-page {
    /* .site-header is position:fixed at 72px, so the hero has to start below
       it rather than bleeding underneath -- same treatment as .page-main on
       the CMS pages. */
    padding-top: 78px;
    padding-bottom: 96px;

    /* One shared content column for the whole veneer page.
       1440px is the single ceiling for the breadcrumb, the filter bar, the
       product grid and the related block. Before this they each carried their
       own max-width (breadcrumb 1480, body blocks 1320), so the content sat
       ~80px inside the breadcrumb instead of lining up with its red rule.
       The formula is the one the CMS pages use for their own location bar
       (main[data-cms-section] .location-bar), so the two line up exactly. */
    --veneer-col: min(1440px, calc(100% - clamp(40px, 10vw, 144px)));
    /* .location-bar draws a 3px left rule, so its text sits 3px further in than
       the raw padding value. Body blocks match that inset so the first
       dropdown / detail column starts on the breadcrumb's text line. */
    --veneer-col-pad: calc(3px + clamp(18px, 1.5vw, 24px));
}

/* The veneer pages used to pin the whole canvas to 1440px
   (min-width: 1440px on .veneer-page plus a body:has() twin) so the desktop
   grid would keep its 4-up shape. On a phone that meant a 1440px-wide
   layout box in a 390px viewport: the headline, the dropdowns and the card
   grid all ran off the right edge and the page scrolled sideways.

   The column width above is already fluid, so the page now reflows down to
   phone width. The steps below mirror the breakpoints the rest of the site
   uses (900 / 1180 / 767 / 760 / 620) and reuse its spacing values. */

/* ---------------- hero ----------------
   Follows the site-wide .page-cover-hero look: a full-bleed 1920/680 photo with
   a centred uppercase headline over a light top-down scrim. It is re-declared
   here instead of reusing .page-hero because the veneer pages are not CMS
   sections and would otherwise inherit that grid layout. */

.veneer-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink, #111);
}

.veneer-hero-media {
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 680;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
    transform: scale(1);
    transition: transform 700ms ease;
}

.veneer-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 44px 26px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .18) 46%, rgba(0, 0, 0, .3) 100%);
}

.veneer-hero-overlay h1 {
    margin: 0;
    max-width: min(980px, 100%);
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(38px, 4.6vw, 72px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .32);
}

.veneer-hero-overlay p {
    margin: 18px 0 0;
    max-width: 820px;
    color: rgba(255, 255, 255, .94);
    font-size: clamp(15px, 1.08vw, 17px);
    line-height: 1.68;
    text-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

/* Banner is optional in Veneer -> Section Settings. Without one, keep the same
   silhouette as a flat dark panel so the centred white headline stays legible. */
.veneer-hero:not(.has-banner) {
    aspect-ratio: 1920 / 680;
    min-height: 300px;
}

@media (hover: hover) and (min-width: 901px) {
    .veneer-hero.has-banner:hover .veneer-hero-media {
        transform: scale(1.04);
    }
}

/* ---------------- breadcrumb ----------------
   Replica of main[data-cms-section] .location-bar. The veneer pages cannot use
   that rule directly because their <main> carries no data-cms-section. */

.veneer-page .location-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    width: var(--veneer-col);
    max-width: 1440px;
    min-height: 44px;
    margin: clamp(22px, 2.6vw, 38px) auto clamp(8px, 1.6vw, 22px);
    /* The 3px red rule eats into the column, so the text inset is the column
       pad minus that rule. Driving both from --veneer-col-pad keeps the
       breadcrumb text and the blocks below it on the same left edge at every
       width, including the phone breakpoints further down. */
    padding: 0 0 0 calc(var(--veneer-col-pad) - 3px);
    color: var(--ink, #111);
    background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 64%, rgba(255, 255, 255, 0) 100%);
    border: 0;
    border-left: 3px solid var(--red, #d71920);
    border-radius: 0;
    box-shadow: none;
    font-size: 13px;
}

.veneer-page .location-bar::before {
    content: '';
    position: absolute;
    left: calc(var(--veneer-col-pad) - 3px);
    bottom: 4px;
    width: clamp(70px, 6vw, 112px);
    height: 1px;
    background: linear-gradient(90deg, rgba(215, 25, 32, .65) 0%, rgba(215, 25, 32, 0) 100%);
    pointer-events: none;
}

.veneer-page .location-bar a {
    color: rgba(17, 17, 17, .66);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.veneer-page .location-bar a:hover {
    color: #a41a1d;
}

.veneer-page .location-bar em {
    color: rgba(17, 17, 17, .24);
    font-size: 13px;
    line-height: 1;
    font-style: normal;
}

.veneer-page .location-bar strong {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    color: #bd1b22;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

/* ---------------- filter bar ---------------- */

/* The toolbar itself is the centred container. The three dropdowns sit on the
   left and the FILTER label + RESET are pinned to the right of them, on the
   same row. */
.veneer-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    /* Same column as the breadcrumb above it. */
    width: var(--veneer-col);
    max-width: 1440px;
    margin: 0 auto;
    padding: 26px var(--veneer-col-pad) 28px;
    border-bottom: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

.veneer-results {
    width: var(--veneer-col);
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--veneer-col-pad);
    padding-right: var(--veneer-col-pad);
}

.veneer-toolbar-head {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Optically centres the small button against the 46px dropdowns. */
    padding-bottom: 10px;
}

.veneer-filter-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink, #111);
}

.veneer-reset,
.veneer-apply {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--ink, #111);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.6;
    color: var(--ink, #111);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.veneer-apply {
    border-color: var(--red, #d71920);
    color: var(--red, #d71920);
}

.veneer-apply:hover {
    background: var(--red, #d71920);
    color: #fff;
}

.veneer-reset:hover {
    background: var(--ink, #111);
    color: #fff;
}

.veneer-apply[hidden] {
    display: none;
}

.veneer-filters {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.veneer-select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 2px;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #111);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.veneer-select:hover,
.veneer-select:focus {
    border-color: var(--ink, #111);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    outline: none;
}

/* ---------------- results ---------------- */

.veneer-results {
    padding-top: 34px;
}

.veneer-count {
    margin: 0 0 24px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #666);
}

.veneer-grid {
    display: grid;
    /* 280px floor keeps the library 4-up. At this column width the content box
       is 1440 - 2*27 = 1386px: a fifth 280px column would need 1512px, so the
       grid always settles on four. A 260px floor would need 1412px, which only
       stays above the limit on the narrowest screens -- one stray
       min-width change away from silently becoming a 5-up grid. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px 28px;
}

.veneer-card {
    display: flex;
    flex-direction: column;
}

.veneer-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--soft, #f5f5f5);
}

.veneer-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 620ms cubic-bezier(.2, .7, .3, 1);
}

.veneer-card:hover .veneer-card-media img {
    transform: scale(1.04);
}

.veneer-card-blank {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 12px, #ececec 12px, #ececec 24px);
}

.veneer-card-body {
    padding-top: 16px;
}

.veneer-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 14px;
    margin-bottom: 9px;
}

.veneer-card-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
}

.veneer-card-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.veneer-card-title a {
    color: var(--ink, #111);
    text-decoration: none;
    transition: color 180ms ease;
}

.veneer-card-title a:hover {
    color: var(--red, #d71920);
}

.veneer-empty {
    padding: 60px 0;
    font-size: 15px;
    color: var(--muted, #666);
}

/* ---------------- pagination ---------------- */

.veneer-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 56px;
}

.veneer-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line, #e5e5e5);
    font-size: 13px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
    color: var(--ink, #111);
    text-decoration: none;
    transition: all 180ms ease;
}

.veneer-page-btn:hover {
    border-color: var(--ink, #111);
}

.veneer-page-btn.is-current {
    background: var(--ink, #111);
    border-color: var(--ink, #111);
    color: #fff;
}

/* Ellipsis between page-window gaps. Not clickable, so no hover state. */
.veneer-page-gap {
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted, #666);
    user-select: none;
}

/* Prev / Next sit outside the numbered window. */
.veneer-page-step {
    padding: 0 16px;
}

/* ---------------- detail ---------------- */

.veneer-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    /* Was capped at a private 1180px while the breadcrumb, filter bar, grid and
       related block all sit on --veneer-col. Past a 1584px viewport the cap made
       the detail box sit ~130px further right than everything above it, so the
       image no longer started on the breadcrumb's text line. Sharing the one
       column variable puts the image, the filter dropdowns and the Home text on
       the same left edge at every width. Side effect: the square swatch grows
       from ~540px to ~665px, so the block is taller than it was. */
    width: var(--veneer-col);
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px var(--veneer-col-pad) 64px;
    /* stretch (not start) so the copy column matches the square image height
       instead of collapsing to whatever the spec rows happen to need. */
    align-items: stretch;
}

.veneer-detail-media {
    position: relative;
    /* Fixed 1:1 box: the column is 1fr wide, so width drives height and the
       swatch never crops into a portrait or landscape strip. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--soft, #f5f5f5);
}

.veneer-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fill the grid row so the spec rows spread over the same height as the image
   and the CTA buttons sit on the image's baseline. */
.veneer-detail-copy {
    display: flex;
    flex-direction: column;
}

.veneer-detail-copy .eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red, #d71920);
}

.veneer-detail-copy h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ink, #111);
}

.veneer-detail-zh {
    margin: 0 0 18px;
    font-size: 16px;
    color: var(--muted, #666);
}

/* spec table */

.veneer-spec {
    margin: 0 0 34px;
    /* Take up the slack so the rows distribute across the column height. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.veneer-spec-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: center;
    /* Was flex: 1 1 0 + min-height: 0, which forced every row to an identical
       share. That was harmless at three short rows but wrong at six: a long
       "Application" value would be squeezed under the image's height and
       clipped. flex-basis auto lets a tall row keep its natural height while
       the short ones still grow to fill the column. */
    flex: 1 1 auto;
    padding: 14px 0;
    border-bottom: 1px solid var(--line, #e5e5e5);
}

.veneer-spec-label {
    margin: 0;
    /* Was 11px / 800 / .14em: the label shouted louder than the value it was
       labelling while being a third smaller, so neither side led. 13px / 600
       lets the value own the row and the label sit back as a caption.
       Tracking comes down to .07em as well -- .14em at 13px is far too loose
       and also pushed "SURFACE FINISH" past the column. */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted, #666);
}

.veneer-spec-value {
    margin: 0;
    font-size: 16px;
    /* A nudge above regular so the value reads as content rather than filler. */
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink, #111);
    overflow-wrap: anywhere;
}

.veneer-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    /* Pinned to the bottom of the column so the CTAs line up with the
       bottom edge of the square image. */
    margin-top: auto;
}

/* related */

.veneer-related {
    /* Same column as the breadcrumb above it. */
    width: var(--veneer-col);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--veneer-col-pad) 80px;
}

.veneer-related .section-heading {
    margin-bottom: 30px;
}

.veneer-related .eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red, #d71920);
}

.veneer-related h2 {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 38px);
    color: var(--ink, #111);
}

/* ---------------- responsive ----------------
   The steps below reuse the breakpoints the rest of the site already uses
   (the main[data-cms-section] rules in styles.css) so the veneer pages
   behave like the CMS pages on the same device:

     1180px - the directory filters step down from 4 columns to 3
     900px  - the cover hero switches to the short 16/7 crop, the filter
              toolbar stacks, the page padding tightens
     767px  - the breadcrumb tightens up
     760px  - the card grid drops to 2 columns
     620px  - narrow phones: the filters and the spec rows go single file
   -------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .veneer-detail {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    /* Single column: there is no image to align against, so let the spec rows
       go back to their natural content height. */
    .veneer-detail-copy {
        display: block;
    }

    .veneer-spec {
        display: block;
        flex: none;
    }

    .veneer-spec-row {
        flex: none;
        align-items: baseline;
    }

    .veneer-detail-actions {
        margin-top: 0;
    }
}

@media (max-width: 1180px) {
    /* Three dropdowns still fit on one row, but a 4-up card grid no longer
       does. Lower the card floor so the library stays 3-up instead of
       collapsing to 2 wide columns. */
    .veneer-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 32px 24px;
    }
}

@media (max-width: 900px) {
    .veneer-page {
        padding-top: 68px;
        padding-bottom: 64px;

        /* The CMS pages drop their location bar to 100% - 40px on tablet and
           phone. Every block below inherits the same column through
           --veneer-col, so they stay aligned with each other. */
        --veneer-col: calc(100% - 40px);
        --veneer-col-pad: 20px;
    }

    /* Cover hero: the site switches to a short 16/7 crop with a floor so the
       headline stays above the fold instead of filling the whole screen. */
    .veneer-hero-media {
        min-height: 240px;
        aspect-ratio: 16 / 7;
        object-position: center 30%;
    }

    .veneer-hero:not(.has-banner) {
        min-height: 240px;
        aspect-ratio: 16 / 7;
    }

    .veneer-hero-overlay {
        padding: 42px 20px;
    }

    .veneer-hero-overlay h1 {
        font-size: clamp(30px, 9vw, 46px);
    }

    .veneer-hero-overlay p {
        max-width: min(520px, 92vw);
        margin-top: 12px;
        font-size: clamp(13px, 3.6vw, 15px);
        line-height: 1.45;
    }

    /* The toolbar stacks, the same way the product directory toolbar does. */
    .veneer-toolbar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 14px;
        padding: 20px var(--veneer-col-pad);
    }

    .veneer-toolbar-head {
        order: -1;
        padding-bottom: 0;
    }

    .veneer-filters {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .veneer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .veneer-detail {
        padding: 48px var(--veneer-col-pad) 44px;
    }
}

@media (max-width: 767px) {
    .veneer-page {
        --veneer-col-pad: 17px;
    }

    .veneer-page .location-bar {
        min-height: 38px;
        margin: 18px auto 8px;
        gap: 6px;
    }

    .veneer-page .location-bar::before {
        width: 76px;
    }
}

@media (max-width: 760px) {
    /* Two swatches per row -- the product directory drops to two columns at
       the same width. */
    .veneer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }

    .veneer-card-title {
        font-size: 16px;
    }

    /* 44px tap target, same as the site pagination. */
    .veneer-page-btn {
        min-width: 44px;
        height: 44px;
        line-height: 42px;
    }

    .veneer-pagination {
        gap: 8px;
        margin-top: 40px;
    }
}

@media (max-width: 620px) {
    .veneer-filters {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* A 140px label column and the value cannot share a 300px line any more,
       so the spec rows stack the way the site stacks its own spec lists. */
    .veneer-spec-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* Comfortable tap targets for the toolbar buttons. */
    .veneer-reset,
    .veneer-apply {
        padding: 9px 16px;
        font-size: 12px;
    }

    /* Full width CTAs read better than two half-width buttons on a phone. */
    .veneer-detail-actions {
        gap: 10px;
    }

    .veneer-detail-actions .button {
        flex: 1 1 100%;
        justify-content: center;
    }
}