/* ============================================================
   ROUX LABS — PDP Polish Layer
   --------------------------------------------------------------
   Scoped to body.page-pdp so it cannot leak into other pages.
   Applies a Supreme-style minimalism pass on top of pages.css:
   - quieter, tighter, hairline-driven
   - kills decorative orange strip & loud badge pills
   - tightens the feature/install blocks into spec cards
   - single orange accent reserved for Add-To-Cart button
   ============================================================ */

/* ---- Breadcrumb: smaller, quieter ------------------------------ */
body.page-pdp .pdp-breadcrumb{
    padding-top: var(--s-3);
    padding-bottom: var(--s-2);
}
body.page-pdp .pdp-breadcrumb .crumbs{
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: lowercase;
    color: var(--grey-500);
}
body.page-pdp .pdp-breadcrumb .crumbs a{
    color: var(--grey-500);
    border-bottom: 1px solid transparent;
}
body.page-pdp .pdp-breadcrumb .crumbs a:hover{
    color: var(--ink);
    border-bottom-color: var(--ink);
}
body.page-pdp .pdp-breadcrumb .crumbs .here{ color: var(--ink); }
body.page-pdp .pdp-breadcrumb .crumbs .sep{ color: var(--grey-300); margin: 0 6px; }

/* ---- PDP grid: keep edge-to-edge hairline frame, slimmer gallery -- */
body.page-pdp .pdp{
    border-top: 1px solid var(--line);
}
body.page-pdp .pdp-gallery{
    padding: var(--s-6);
    min-height: 0;
    gap: var(--s-3);
    border-right: 1px solid var(--line);
}
body.page-pdp .pdp-gallery .hero-shot{
    border: 0;
    background: var(--paper);
}
body.page-pdp .pdp-gallery .hero-shot svg,
body.page-pdp .pdp-gallery .hero-shot img{
    max-width: 78%;
    max-height: 78%;
}
body.page-pdp .pdp-thumbs{ gap: var(--s-2); }
body.page-pdp .pdp-thumbs .thumb{
    border: 1px solid var(--line);
    transition: border-color .12s ease;
}
body.page-pdp .pdp-thumbs .thumb:hover{ border-color: var(--grey-500); }
body.page-pdp .pdp-thumbs .thumb.active{ border-color: var(--ink); border-width: 1px; outline: 1px solid var(--ink); outline-offset: -2px; }

/* ---- Info column: tighter typographic ladder ------------------- */
body.page-pdp .pdp-info{
    padding: var(--s-6);
    gap: var(--s-4);
}
body.page-pdp .pdp-info h1{
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.1;
    letter-spacing: -.005em;
}
body.page-pdp .pdp-info p.lead{
    color: var(--grey-700);
    font-size: 13px;
    line-height: 1.55;
    max-width: 52ch;
    margin: 0;
}
body.page-pdp .pdp-price{
    font-family: var(--f-mono);
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--ink);
}

/* Tag pills above headline: keep one line of mono microcopy, not
   loud bordered chips. The product.html badge row uses .tag-solid
   which feels heavy — knock it back to outline + small. */
body.page-pdp .pdp-info .tag,
body.page-pdp .pdp-info .tag-solid{
    background: var(--paper);
    color: var(--grey-700);
    border: 1px solid var(--line);
    padding: 3px 6px;
    font-size: 9px;
    letter-spacing: .16em;
    margin-right: 4px;
    text-transform: uppercase;
}

/* ---- Sections: thinner hairlines, less vertical padding -------- */
body.page-pdp .pdp-section{
    border-top: 1px solid var(--line);
    padding-top: var(--s-3);
}
body.page-pdp .pdp-section h3{
    font-family: var(--f-mono);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grey-700);
    margin-bottom: var(--s-3);
}

/* ---- Variant chips: lighter borders, hover quieter -------------- */
body.page-pdp .variant-chip{
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    font-weight: 400;
    padding: 7px 11px;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
body.page-pdp .variant-chip:hover{ border-color: var(--ink); background: var(--paper); }
body.page-pdp .variant-chip.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- Orientation toggle: hairline, plain Inter, not Archivo ----- */
body.page-pdp .orientation-toggle{ border: 1px solid var(--line); }
body.page-pdp .orientation-toggle .opt{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: var(--s-3);
    border-right: 1px solid var(--line);
}
body.page-pdp .orientation-toggle .opt:last-child{ border-right: 0; }
body.page-pdp .orientation-toggle .opt .sub{
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: none;
    color: var(--grey-500);
    opacity: 1;
}
body.page-pdp .orientation-toggle .opt.active{ background: var(--ink); color: var(--paper); }
body.page-pdp .orientation-toggle .opt.active .sub{ color: var(--grey-300); }

/* ---- Qty stepper: hairline outline ------------------------------ */
body.page-pdp .qty-stepper{ border-color: var(--ink); }

/* ---- Add to cart: keep the orange, tighten typography ----------- */
body.page-pdp .btn.btn-orange{
    padding: 14px 20px;
    font-size: 11px;
    letter-spacing: .18em;
}

/* Microcopy under the button: smaller, quieter, lowercase mono */
body.page-pdp .pdp-microcopy{
    margin-top: var(--s-3);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: lowercase;
    color: var(--grey-500);
    text-align: center;
}

/* ---- Specs: clean two-column, no wrap clipping ------------------ */
body.page-pdp .specs{
    border-top: 0;
    padding-top: 0;
    grid-template-columns: 1fr 1.4fr;
    column-gap: var(--s-4);
}
body.page-pdp .specs dt,
body.page-pdp .specs dd{
    font-size: 10px;
    letter-spacing: .08em;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    line-height: 1.4;
}
body.page-pdp .specs dt{
    color: var(--grey-700);
    text-transform: uppercase;
}
body.page-pdp .specs dd{
    text-align: right;
    color: var(--ink);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ---- SKU block: just a single mono line, no big h3 -------------- */
body.page-pdp .pdp-sku-line{
    margin-top: var(--s-2);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grey-500);
}
body.page-pdp .pdp-sku-line .lbl{ color: var(--grey-500); margin-right: var(--s-2); }
body.page-pdp .pdp-sku-line .val{ color: var(--ink); }

/* ============================================================
   FEATURE CARDS — make them spec-card-y, not marketing-y
   ============================================================ */
body.page-pdp .feature-grid{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.page-pdp .feature-card{
    padding: var(--s-5);
    border-right: 1px solid var(--line);
    min-height: 0;
    gap: var(--s-2);
}
body.page-pdp .feature-card .num{
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grey-500);
}
body.page-pdp .feature-card h3{
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--ink);
}
body.page-pdp .feature-card p{
    font-size: 12px;
    line-height: 1.55;
    color: var(--grey-700);
    margin: 0;
}

/* ============================================================
   INSTALL SECTION — quieter eyebrow + headline, looser image
   ============================================================ */
body.page-pdp .install{
    border-top: 1px solid var(--line);
    border-bottom: 0;
}
body.page-pdp .install-copy{
    padding: var(--s-7) var(--gutter);
    gap: var(--s-3);
}
body.page-pdp .install-copy .eyebrow{
    color: var(--grey-500);
    font-size: 9px;
    letter-spacing: .2em;
}
body.page-pdp .install-copy h2{
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: -.005em;
}
body.page-pdp .install-copy p.lead{
    font-size: 13px;
    line-height: 1.55;
    color: var(--grey-700);
    max-width: 52ch;
    margin: 0;
}
body.page-pdp .install-img{ border-left: 1px solid var(--line); }
@media (max-width: 900px){
    body.page-pdp .install-img{ border-left: 0; border-top: 1px solid var(--line); }
}

/* ============================================================
   MOBILE — keep mobile clean and quiet
   ============================================================ */
@media (max-width: 900px){
    body.page-pdp .pdp-gallery{
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: var(--s-4);
    }
    body.page-pdp .pdp-info{ padding: var(--s-5) var(--gutter); gap: var(--s-3); }
    body.page-pdp .pdp-info h1{ font-size: 22px; }
    body.page-pdp .feature-card{ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
@media (max-width: 540px){
    body.page-pdp .pdp-thumbs{ grid-template-columns: repeat(4, 1fr); }
    body.page-pdp .orientation-toggle .opt{ padding: var(--s-3) var(--s-2); }
}


/* ============================================================
   Orientation flip — the right-orient FlexPort is, per the
   patent, the same design mirrored at print stage. Reflect
   that visually by flipping the gallery photos when the user
   selects RIGHT.
   ============================================================ */
body.page-pdp [data-pdp-hero][data-orient="R"] img,
body.page-pdp [data-pdp-thumbs][data-orient="R"] img{
    transform: scaleX(-1);
}


/* ============================================================
   Trust line + orientation explainer
   ============================================================ */
body.page-pdp .pdp-trust{
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--grey-700);
    margin-top: -8px;
    margin-bottom: var(--s-2);
}
body.page-pdp .pdp-section-help{
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--grey-700);
    margin-top: 4px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 48ch;
}
body.page-pdp .orientation-toggle .orient-glyph{
    font-family: var(--f-mono);
    font-size: 18px;
    line-height: 1;
    color: var(--grey-700);
    margin-right: 4px;
}
body.page-pdp .orientation-toggle .opt.active .orient-glyph{
    color: var(--paper);
}


/* ============================================================
   CALIPER CURSOR — WOW interaction
   --------------------------------------------------------------
   When the cursor enters a [data-caliper] product photo:
     · OS cursor is hidden; orange tick + readout track instead
     · click-drag = measure; release = lock
   Style: safety-orange ticks, white hairline with 1px black halo
   so it stays readable on any photo background.
   ============================================================ */
html.caliper-active [data-caliper]{ cursor: none; }
.caliper-overlay{
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
    z-index: 60;
}
.caliper-overlay.on{ opacity: 1; }
.caliper-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.caliper-bar{
    stroke: var(--paper);
    stroke-width: 1.25;
    paint-order: stroke;
    stroke-linecap: round;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.85));
    opacity: 0;
    transition: opacity 120ms ease;
}
.caliper-overlay.measuring .caliper-bar,
.caliper-overlay.locked .caliper-bar{ opacity: 1; }
.caliper-tick{
    stroke: var(--rl-orange);
    stroke-width: 2;
    stroke-linecap: square;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.4));
}
.caliper-overlay.locked .caliper-tick{
    stroke: var(--ink);
}
.caliper-readout{
    position: absolute;
    top: 0;
    left: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 4px 8px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
    display: flex;
    flex-direction: column;
    gap: 1px;
    pointer-events: none;
}
.caliper-readout.on{ opacity: 1; }
.caliper-readout .caliper-mm{ font-weight: 600; }
.caliper-readout .caliper-in{
    color: var(--grey-300);
    font-size: 10px;
    letter-spacing: 0.1em;
}
.caliper-overlay.locked .caliper-readout{
    background: var(--rl-orange);
    color: var(--ink);
}
.caliper-overlay.locked .caliper-readout .caliper-mm{ color: var(--ink); }
.caliper-overlay.locked .caliper-readout .caliper-in{ color: rgba(0,0,0,0.55); }
.caliper-hint{
    position: absolute;
    bottom: clamp(16px, 2vw, 28px);
    right: clamp(16px, 2vw, 32px);
    background: var(--ink);
    color: var(--paper);
    padding: 6px 10px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.caliper-hint.show{ opacity: 1; }
@media (hover: none){
    /* Touch: rephrase the hint so finger-tap-tap users know what to do. */
    .caliper-hint::after{ content: " · tap, tap"; }
}


/* ============================================================
   GALLERY VIEW TOGGLE — Photo ↔ Spec
   --------------------------------------------------------------
   Pairs with the Caliper Cursor. Users measure the photo, then
   toggle to the technical drawing to see the patent's real
   dimensions called out in safety-orange. The crossfade is
   short (240ms) so the moment reads as a CAD viewport flip,
   not a slideshow.
   ============================================================ */
body.page-pdp .pdp-view-toggle{
    display: inline-flex;
    margin: 0 0 var(--s-3);
    border: 1px solid var(--ink);
    overflow: hidden;
    align-self: flex-start;
}
body.page-pdp .pdp-view-toggle button{
    padding: 6px 14px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--paper);
    color: var(--ink);
    border: 0;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
body.page-pdp .pdp-view-toggle button + button{
    border-left: 1px solid var(--ink);
}
body.page-pdp .pdp-view-toggle button.is-active{
    background: var(--ink);
    color: var(--paper);
}
body.page-pdp .pdp-view-toggle button:focus-visible{
    outline: 2px solid var(--rl-orange);
    outline-offset: -3px;
}

/* The gallery frame holds the photo + spec SVG as stacked layers
   and crossfades them based on data-pdp-view on .pdp-gallery. */
body.page-pdp .pdp-gallery-frame{
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
body.page-pdp .pdp-gallery-frame > .hero-shot{
    position: absolute;
    inset: 0;
    border: 0;
    flex: none;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 240ms ease;
}
body.page-pdp .pdp-gallery-frame > .hero-shot img{
    max-width: 86%;
    max-height: 86%;
}
body.page-pdp .pdp-spec-diagram{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}
body.page-pdp .pdp-gallery[data-pdp-view="spec"] .hero-shot{
    opacity: 0;
    pointer-events: none;
}
body.page-pdp .pdp-gallery[data-pdp-view="spec"] .pdp-spec-diagram{
    opacity: 1;
    pointer-events: auto;
}