/* ============================================================
   HWP Walltool v0.3.5-staging — Full-screen mural configurator
   - empty-state pattern preview
   - dark overlay card replaces broken text
   - corner-flares hidden in empty state (kills the X artifact)
   - premium toolbar contrast + larger icons (v0.3.3 polish)
   - Flip + Grayscale tool buttons + states
   - horizontal 3-column desktop CTA with trust bullets + payment row
   - person silhouette via Media Library erasebg PNG (v0.3.3)
   No changes to ruler/panel/person/pxPerFt math.
   ============================================================ */

/* ── Page shell (standalone, no theme chrome) ─────────────── */

html, body.hwp-walltool-body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body.hwp-walltool-body {
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1a1a1a;
}
/* suppress admin bar offset inside the tool */
body.hwp-walltool-body.admin-bar { margin-top: 0 !important; }

.hwp-walltool-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
}

/* ── Preview area: dominates the screen like Sandberg ─────── */

.hwp-preview-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 88vh;        /* v0.4.4: preview fills viewport top-to-bottom like Sandberg */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f6f4;     /* warm off-white so the white wall reads as wall */
    overflow: hidden;
}
@media (min-width: 1025px) {
    /* v0.4.4: minimal padding around preview so the wall/pattern occupies as much space as possible */
    .hwp-preview-area { padding: 10px 14px 10px 14px; }
}
@media (max-width: 1024px) {
    .hwp-preview-area { min-height: 62vh; padding: 8px; }
}
@media (max-width: 640px) {
    .hwp-preview-area { min-height: 56vh; padding: 6px; }
}

/* v0.4.2: when pan is disabled per source data, kill grabbing affordances */
.hwp-wall-surface.hwp-pan-disabled,
.hwp-wall-surface.hwp-pan-disabled:hover,
.hwp-wall-surface.hwp-pan-disabled.hwp-dragging {
    cursor: default !important;
}

/* v0.4.2: Mural badge — minimal frosted glass, Sandberg-scoped */
.hwp-mural-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d1117;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(13, 17, 23, 0.12);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(13, 17, 23, 0.08);
    line-height: 1;
    user-select: none;
    margin: 4px 0 12px 0;
    vertical-align: middle;
}
.hwp-mural-badge-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a574 0%, #8b5a2b 100%);
}
.hwp-mural-badge--preview {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 25;
}

/* v0.4.4: Material texture thumbnails on wallpaper-type options — square, rounded, LEFT-aligned */
.hwp-mat-card {
    position: relative;
    padding-left: 74px;    /* 48px thumb + 14px left + 12px gutter */
    padding-right: 14px;
}
.hwp-mat-thumb {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 10px;   /* square with rounded corners (was circle) */
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(13,17,23,0.10), 0 2px 6px rgba(13,17,23,0.10);
    flex: none;
    pointer-events: none;
}
.hwp-mat-card.hwp-mat-active .hwp-mat-thumb {
    box-shadow: 0 0 0 2px #0d1117, 0 4px 10px rgba(13,17,23,0.18);
}
@media (max-width: 640px) {
    .hwp-mat-card { padding-left: 62px; }
    .hwp-mat-thumb { width: 40px; height: 40px; left: 10px; border-radius: 8px; }
}

/* v0.4.3: Compact info panel below preview so the pattern dominates the viewport */
.hwp-controls-panel { padding: 16px 24px 20px 24px; }
.hwp-ctrl-heading { margin: 0 0 8px 0; font-size: 13px; letter-spacing: 0.06em; }
.hwp-mat-card { padding-top: 10px; padding-bottom: 10px; }

/* v0.4.4: PDP wallpaper-type chips — clickable, square thumbs on left, size matches walltool */
.hwp-pdp-wallpaper-types { margin: 16px 0 20px 0; padding: 0; }
.hwp-pdp-wt-heading {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 10px;
}
.hwp-pdp-wt-list { display: flex; flex-direction: column; gap: 8px; }
.hwp-pdp-wt-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e5e3dd;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    cursor: pointer;
    user-select: none;
    text-align: left;
}
.hwp-pdp-wt-chip:hover {
    border-color: #0d1117;
    box-shadow: 0 2px 6px rgba(13,17,23,0.08);
}
.hwp-pdp-wt-chip--selected,
.hwp-pdp-wt-chip--default {
    border-color: #0d1117;
    box-shadow: 0 2px 8px rgba(13,17,23,0.10);
    background: #faf9f6;
}
.hwp-pdp-wt-thumb {
    display: inline-block;
    width: 48px;   /* same size as walltool */
    height: 48px;
    border-radius: 10px;   /* square with rounded corners */
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(13,17,23,0.10);
    flex: none;
}
.hwp-pdp-wt-chip--selected .hwp-pdp-wt-thumb,
.hwp-pdp-wt-chip--default .hwp-pdp-wt-thumb {
    box-shadow: 0 0 0 2px #0d1117, 0 4px 10px rgba(13,17,23,0.16);
}
.hwp-pdp-wt-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.hwp-pdp-wt-name { font-size: 14px; font-weight: 500; color: #222; }
.hwp-pdp-wt-rate { font-size: 12px; color: #666; margin-top: 2px; }
.hwp-pdp-wt-note {
    font-size: 12px;
    color: #666;
    margin: 10px 0 0 0;
    font-style: italic;
}

/* ── Toolbar: round white buttons, top-left ───────────────── */

.hwp-vp-toolbar {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hwp-vt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;          /* desktop button */
    border-radius: 50%;
    border: 2px solid #0d1117;          /* navy edge */
    background: #ffffff;
    color: #0d1117;                     /* navy ink (drives currentColor SVG) */
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(13,17,23,0.10), 0 8px 18px rgba(13,17,23,0.08);
}
.hwp-vt-btn:hover {
    background: #f5f3ee;
    transform: scale(1.05);
    color: #0d1117;
    border-color: #0d1117;
    box-shadow: 0 4px 10px rgba(13,17,23,0.16), 0 12px 24px rgba(13,17,23,0.10);
    text-decoration: none;
}
.hwp-vt-btn.hwp-vt-active {
    background: #0d1117;
    color: #fff;
    border-color: #0d1117;
    box-shadow: 0 6px 14px rgba(13,17,23,0.32);
}
.hwp-vt-btn.hwp-vt-active:hover { background: #000; color: #fff; }
.hwp-vt-btn:focus-visible { outline: 3px solid #5a86ff; outline-offset: 3px; }
.hwp-vt-back { width: 54px; height: 54px; }
.hwp-vt-btn svg {
    display: block !important;
    width: 24px !important;             /* desktop icon size */
    height: 24px !important;
    stroke-width: 2.2;                  /* heavier strokes for readability */
    flex: none;                          /* don't shrink inside flex */
}
.hwp-vt-back svg { width: 22px !important; height: 22px !important; }

/* ── Wall frame: rulers sit OUTSIDE the dashed wall ───────── */

.hwp-wall-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty state — give the frame a default size so the pattern + overlay
   render at a pleasant 16:9 box instead of collapsing to 0×0 (which used
   to cluster the corner flares into an X behind the message). */
.hwp-walltool-page.hwp-empty .hwp-wall-frame {
    width: min(72vw, 880px);
    aspect-ratio: 16 / 9;
}
.hwp-walltool-page.hwp-empty .hwp-wall-viewport {
    width: 100% !important;
    height: 100% !important;
}
.hwp-walltool-page.hwp-empty .hwp-flare { display: none; }
.hwp-walltool-page.hwp-empty .hwp-wall-surface {
    /* Show the pattern at a calm default scale in empty state. JS sets
       background-image; we just give it a default tile size. */
    background-size: 280px auto !important;
    background-repeat: repeat !important;
    background-position: center center !important;
    opacity: 1;
}

/* Outside rulers (Sandberg style: light ticks + "N ft" labels) */
.hwp-ruler-top {
    position: absolute;
    top: -30px;
    left: 0;
    height: 24px;
    z-index: 6;
    pointer-events: none;
}
.hwp-ruler-left {
    position: absolute;
    left: -34px;
    top: 0;
    width: 28px;
    z-index: 6;
    pointer-events: none;
}
.hwp-ruler-top .hwp-tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 6px;
    background: #999;
}
.hwp-ruler-top .hwp-tick-major { height: 10px; background: #444; }
.hwp-ruler-top .hwp-tick-label {
    position: absolute;
    bottom: 12px;
    transform: translateX(-50%);
    font-size: 10px;
    color: #444;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.hwp-ruler-left .hwp-tick {
    position: absolute;
    right: 0;
    height: 1px;
    width: 6px;
    background: #999;
}
.hwp-ruler-left .hwp-tick-major { width: 10px; background: #444; }
.hwp-ruler-left .hwp-tick-label {
    position: absolute;
    right: 13px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 10px;
    color: #444;
    white-space: nowrap;
}

/* ── Wall viewport: dashed boundary + corner flares ───────── */

.hwp-wall-viewport {
    position: relative;
    width: 86%;
    height: 86%;
    transition: width 0.35s ease, height 0.35s ease;
    background: #fafafa;
    border: 1.5px dashed #1a1a1a;
    box-sizing: border-box;
}

.hwp-wall-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-repeat: repeat;
    background-position: 0 0;
    background-color: #fafafa;
    cursor: grab;
    transition: filter 0.25s, transform 0.25s;
    transform-origin: center center;
}
.hwp-wall-surface.hwp-dragging { cursor: grabbing; }

/* Flip — mirror the pattern horizontally (preview-only) */
.hwp-wall-surface.hwp-flipped { transform: scaleX(-1); }

/* Grayscale — preview-only */
.hwp-wall-surface.hwp-grayscale { filter: grayscale(1); }

/* Corner flares: diagonal lines extending outward (Sandberg look) */
.hwp-flare {
    position: absolute;
    width: 46px;
    height: 1.5px;
    background: #1a1a1a;
    pointer-events: none;
    z-index: 5;
}
.hwp-flare-tl { top: 0;    left: 0;   transform: translate(-100%, 0) rotate(45deg) ;  transform-origin: right center; }
.hwp-flare-tr { top: 0;    right: 0;  transform: translate(100%, 0)  rotate(-45deg);  transform-origin: left center; }
.hwp-flare-bl { bottom: 0; left: 0;   transform: translate(-100%, 0) rotate(-45deg);  transform-origin: right center; }
.hwp-flare-br { bottom: 0; right: 0;  transform: translate(100%, 0)  rotate(45deg);   transform-origin: left center; }

/* Size pills ("20 ft 0 in" top, "10 ft 0 in" right) */
.hwp-size-pill {
    position: absolute;
    z-index: 12;
    background: #fff;
    border: 1px solid #1a1a1a;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    pointer-events: none;
}
.hwp-size-pill-w {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hwp-size-pill-h {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%) rotate(90deg);
}

/* ── Drag hint pill (below wall, Sandberg style) ──────────── */

.hwp-drag-hint {
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.hwp-drag-hint button {
    background: none;
    border: none;
    font-size: 15px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 0 0 4px;
}
.hwp-drag-hint button:hover { color: #333; }

/* ── Panels overlay: bright green seams, full height ──────── */

.hwp-panels-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

.hwp-panel-seam {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: #2bd615;
}

/* ── Person silhouette ────────────────────────────────────── */

/* Person silhouette overlay — anchored OUTSIDE the right edge of the wall
   viewport by default (left:100% + margin-left:8). JS may override
   margin-left to slide the figure inward when the preview area is too
   narrow to fit the figure beside the wall, but the figure always remains
   pinned to the wall's bottom (feet at floor). */
.hwp-person-overlay {
    position: absolute;
    bottom: 0;
    left: 100%;
    margin-left: 8px;
    right: auto;
    z-index: 12;            /* above corner flares (z:5) */
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    height: auto;
}

.hwp-person-figure {
    position: relative;
    /* width/height set by JS at true scale from wall height */
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.22));
    overflow: hidden;       /* in case the PNG has extra transparent margin */
    line-height: 0;
}
.hwp-person-figure svg { display: block; width: 100%; height: 100%; }
.hwp-person-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;   /* pin the figure feet to the wall floor */
    pointer-events: none;
    user-select: none;
}

.hwp-person-label {
    position: absolute;
    top: 38%;                          /* upper-chest / mid-torso of the visible body */
    left: 56%;                         /* shift right to land on the body's visual center
                                          (silhouette walks to the right; the visible
                                           mass at chest height sits ~6% right of the
                                           bounding-box center) */
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,0.78);
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

/* ── Debug overlay ────────────────────────────────────────── */

.hwp-debug-overlay {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 40;
    background: rgba(0,0,0,0.82);
    color: #0f0;
    font-size: 10px;
    font-family: monospace;
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1.8;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Initial overlay (empty state) — dark translucent card ────────────────
   Replaces the broken white-on-white text + accidental X mark. The card
   sits OVER the pattern preview so customers see the wallpaper first. */

.hwp-wall-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 10;
    padding: 1.25rem;
    pointer-events: none;
}
.hwp-wall-overlay-card {
    background: rgba(20, 24, 35, 0.78);
    color: #fff;
    padding: 18px 26px;
    border-radius: 10px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 6px 30px rgba(0,0,0,0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.hwp-wall-overlay-card p {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.hwp-wall-overlay.hwp-hidden { display: none; }

/* ── Control bar ──────────────────────────────────────────── */

.hwp-control-bar {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    box-shadow: 0 -4px 18px rgba(0,0,0,0.04);
}

/* Higher specificity (form.cart is a WC core class with display:flex on PDP) */
.hwp-control-bar form.hwp-tool-form {
    display: grid;
    grid-template-columns: 240px 1fr 340px;
    gap: 2.25rem;
    max-width: 1380px;
    margin: 0 auto;
    padding: 1.5rem 2.25rem 1.75rem;
    align-items: start;
}
/* Premium card edges for each column */
.hwp-ctrl-col {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 1.05rem 1.1rem 1.1rem;
    min-height: 100%;
    box-sizing: border-box;
}

.hwp-control-bar .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* ── Section headings ─────────────────────────────────────── */

.hwp-ctrl-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.85rem;
    padding: 0;
}

/* ── Dimension inputs ─────────────────────────────────────── */

.hwp-dim-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}
.hwp-dim-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    width: 44px;
    flex-shrink: 0;
}
.hwp-dim-inputs { display: flex; align-items: center; gap: 0.3rem; }

.hwp-dim-input {
    width: 64px;
    padding: 0.5rem 0.35rem;
    border: 1.5px solid #1a1a1a;
    border-radius: 4px;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    color: #111;
    -moz-appearance: textfield;
    appearance: textfield;
}
.hwp-dim-input::-webkit-outer-spin-button,
.hwp-dim-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hwp-dim-input:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

.hwp-unit { font-size: 0.78rem; color: #888; min-width: 14px; }
.hwp-dim-tip { font-size: 0.72rem; color: #999; margin: 0.45rem 0 0; line-height: 1.45; max-width: 230px; }

/* ── Material cards ───────────────────────────────────────── */

.hwp-mat-list { display: flex; flex-direction: column; gap: 0.5rem; }

.hwp-mat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    position: relative;
    background: #fff;
}
.hwp-mat-card:hover { border-color: #c0c0c0; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

.hwp-mat-card::before {
    content: '';
    flex-shrink: 0;
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 2px solid #cfcfcf;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    background: #fff;
}

.hwp-mat-card input[type="radio"] { display: none; }

.hwp-mat-active {
    border-color: #579E42;
    background: #f6fbf4;
    box-shadow: 0 0 0 1px rgba(87,158,66,0.25);
}
.hwp-mat-active::before {
    border-color: #579E42;
    background: #579E42;
    box-shadow: inset 0 0 0 3px #f6fbf4;
}

.hwp-mat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.hwp-mat-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hwp-mat-desc { font-size: 0.7rem; color: #999; line-height: 1.35; }
.hwp-mat-rate { font-size: 0.78rem; font-weight: 600; color: #444; margin-top: 0.15rem; }

.hwp-mat-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #fdf3d8;
    color: #8a6d1d;
    padding: 0.25rem 0.55rem;
    border-radius: 3px;
    white-space: nowrap;
}

/* ── CTA column ───────────────────────────────────────────── */

.hwp-ctrl-cta { display: flex; flex-direction: column; gap: 0.8rem; }
.hwp-product-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.hwp-product-name { font-size: 0.92rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.hwp-product-sku  { font-size: 0.72rem; color: #999; }
.hwp-min-order-label { font-size: 0.74rem; color: #666; }

.hwp-atc-btn {
    display: block;
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    background: #579E42;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    line-height: 1.2;
}
.hwp-atc-btn:hover:not(:disabled) { background: #4a8a37; color: #fff; transform: translateY(-1px); }
.hwp-atc-btn:active:not(:disabled) { transform: translateY(0); }
.hwp-atc-btn:disabled { background: #2b2b2b; color: rgba(255,255,255,0.75); cursor: not-allowed; }

.hwp-comment-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.hwp-comment-toggle {
    background: none; border: none; padding: 0;
    font-size: 0.78rem; color: #555; cursor: pointer;
    text-align: left; line-height: 1.4; transition: color 0.15s;
    text-decoration: underline;
}
.hwp-comment-toggle:hover { color: #111; }
.hwp-comment-textarea {
    width: 100%; box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc; border-radius: 4px;
    font-size: 0.8rem; resize: vertical; line-height: 1.4; color: #333;
}
.hwp-comment-textarea:focus { outline: none; border-color: #555; }
.hwp-no-return { font-size: 0.68rem; color: #aaa; margin: 0; line-height: 1.45; }

/* ── Trust bullets ──────────────────────────────────────── */

.hwp-trust-list {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-top: 1px solid #ececec;
    padding-top: 0.85rem;
}
.hwp-trust-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.84rem;
    color: #2c2c2c;
    font-weight: 500;
}
.hwp-trust-icon { color: #579E42; flex-shrink: 0; }

/* ── Payment method row — uniform SVG logos ────────────── */

.hwp-pay-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f1f1;
}
.hwp-pay-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;          /* kill inline-block whitespace beneath SVG */
    border-radius: 4px;
    overflow: hidden;
}
.hwp-pay-logo svg {
    display: block;
    width: 42px;             /* uniform card width */
    height: 26px;            /* uniform card height — keeps text/letter size identical */
}
@media ( max-width: 600px ) {
    .hwp-pay-icons { gap: 5px; }
    .hwp-pay-logo svg { width: 38px; height: 24px; }
}

/* ============================================================
   Product page CTA button (unchanged behavior)
   ============================================================ */

.hwp-cta-wrap { margin: 0.75rem 0 0; }
.hwp-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem; font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    background: #579E42; color: #fff;
    border-radius: 6px; cursor: pointer;
    border: none; transition: background 0.2s;
}
.hwp-cta-button:hover { background: #4a8a37; color: #fff; text-decoration: none; }
.hwp-price-on-config { font-size: 1.25rem; font-weight: 500; color: #555; }

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 1200px ) {
    .hwp-control-bar form.hwp-tool-form { grid-template-columns: 220px 1fr 300px; gap: 1.75rem; padding: 1.35rem 1.5rem; }
}

@media ( max-width: 960px ) {
    .hwp-preview-area { min-height: 46vh; }
    .hwp-control-bar form.hwp-tool-form { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem 1rem; max-width: 540px; }
    .hwp-mat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .hwp-mat-card:not(:first-child) .hwp-mat-badge { display: none; }
    .hwp-vp-toolbar { left: 12px; top: 12px; gap: 12px; }
    .hwp-vt-btn { width: 50px; height: 50px; }       /* keep 44px+ tap target on mobile */
    .hwp-vt-back { width: 52px; height: 52px; }
    .hwp-vt-btn svg { width: 26px !important; height: 26px !important; stroke-width: 2.4; }
    .hwp-vt-back svg { width: 22px !important; height: 22px !important; }
    .hwp-walltool-page.hwp-empty .hwp-wall-frame { width: min(86vw, 600px); }
}

@media ( max-width: 600px ) {
    .hwp-preview-area { min-height: 42vh; }
    .hwp-control-bar form.hwp-tool-form { padding: 1rem 0.875rem; max-width: 100%; }
    .hwp-mat-list { grid-template-columns: 1fr; }
    .hwp-dim-input { width: 56px; font-size: 0.95rem; }
    .hwp-atc-btn { font-size: 0.82rem; padding: 0.9rem 1rem; }
    .hwp-size-pill { font-size: 10px; padding: 2px 9px; }
    .hwp-drag-hint { font-size: 11px; bottom: -34px; }
    .hwp-ruler-left { display: none !important; }
    .hwp-walltool-page.hwp-empty .hwp-wall-frame { width: 90vw; aspect-ratio: 4 / 3; }
}


/* ============================================================
   v0.4.4 override � MUST come after the v0.3.5 .hwp-mat-card
   flex rules (~line 643) so cascade wins. Fixes the thumbnail
   overlapping text bug by forcing padding-left = 74px and
   hiding the redundant radio-dot ::before pseudo-element (the
   thumbnail with its selected box-shadow is now the visual
   selection indicator).
   ============================================================ */
.hwp-mat-card {
    padding-left: 74px !important;
    padding-right: 14px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.hwp-mat-card::before { display: none !important; }
@media (max-width: 640px) {
    .hwp-mat-card { padding-left: 62px !important; }
}

/* ============================================================
   v0.4.6 — MOBILE UX CORRECTIONS
   Scoped to <= 960px / <= 600px. Desktop (>= 961px) is untouched.
   No calculation, rate, min-order or pricing rule is affected here.
   ============================================================ */

/* ── 1. ROOT CAUSE: horizontal overflow ─────────────────────
   `grid-template-columns: 1fr` resolves to minmax(AUTO, 1fr), and an
   auto floor never shrinks below the item's min-content width. The
   materials column min-content measured 461px (74px thumb gutter +
   non-wrapping name + 107px "Customer favorite" badge), so on a 375px
   phone the single-column grid was pinned at 461px and an ancestor's
   overflow:hidden silently clipped the right edge — which is why the
   Add to Cart button showed a left edge but no right edge.
   Giving every track and item a real zero floor lets them shrink.  */
@media (max-width: 960px) {
    .hwp-control-bar form.hwp-tool-form { grid-template-columns: minmax(0, 1fr); }
    .hwp-ctrl-col,
    .hwp-mat-card,
    .hwp-mat-info,
    .hwp-dim-group,
    .hwp-product-meta { min-width: 0; }
    .hwp-mat-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    /* Nothing may exceed the viewport, and padding must be inside the box. */
    .hwp-control-bar, .hwp-controls-panel, .hwp-ctrl-col,
    .hwp-atc-btn, .hwp-comment-textarea, .hwp-preview-room-btn {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Long product names / SKUs must wrap rather than push the track wider. */
    .hwp-product-name, .hwp-product-sku, .hwp-mat-desc, .hwp-ctrl-heading {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .hwp-mat-list { grid-template-columns: minmax(0, 1fr); }
    /* Symmetric gutters + iPhone safe-area (landscape notch). */
    .hwp-control-bar form.hwp-tool-form {
        padding-left:  max(0.875rem, env(safe-area-inset-left));
        padding-right: max(0.875rem, env(safe-area-inset-right));
    }
}

/* ── 4. Material cards ──────────────────────────────────────
   The badge was flex-shrink:0 + nowrap at 107px, forcing the card
   wider than the phone. Let it sit on its own line instead of
   fighting the name for horizontal room.                          */
@media (max-width: 600px) {
    .hwp-mat-card { flex-wrap: wrap; row-gap: 0.25rem; }
    .hwp-mat-name { white-space: normal; overflow: visible; text-overflow: clip; }
    .hwp-mat-badge {
        order: 3;
        flex-basis: 100%;
        align-self: flex-start;
        width: fit-content;
        max-width: 100%;
    }
    /* v0.4.4 hid the badge on non-first cards at <=960px; keep that. */
}

/* ── 8. Dimension inputs ────────────────────────────────────
   16px font stops iOS Safari auto-zooming on focus. Rows stay on one
   line; only the tip below wraps. 4-inch helper logic untouched.   */
@media (max-width: 600px) {
    .hwp-dim-group { flex-wrap: nowrap; gap: 0.5rem; }
    .hwp-dim-label { width: 42px; flex-shrink: 0; }
    .hwp-dim-inputs { flex: 1 1 auto; min-width: 0; }
    .hwp-dim-input {
        width: 100%;
        min-width: 0;
        max-width: 84px;
        font-size: 16px;          /* iOS zoom guard — do not lower */
        padding: 0.6rem 0.35rem;  /* keeps a 44px tap target */
    }
    .hwp-dim-tip { max-width: 100%; }
}

/* ── 6. Price typography — lighter, more editorial ──────────
   Values are never changed; only weight/letter-spacing.           */
@media (max-width: 960px) {
    .hwp-mat-rate    { font-weight: 500; color: #3a3a3a; }
    .hwp-mat-name    { font-weight: 600; }
    .hwp-product-name{ font-weight: 600; }
    .hwp-atc-btn {
        font-weight: 500;
        letter-spacing: 0.06em;
        font-size: 0.85rem;
    }
}
/* Desktop gets the same refinement on the two price elements only —
   requested "premium, delicate, calm"; hierarchy kept via size/colour. */
.hwp-mat-rate { font-weight: 500; }
.hwp-atc-btn  { font-weight: 500; letter-spacing: 0.05em; }

/* ── 7. Secondary CTA: Preview this wallpaper in your room ──
   Outlined so it never competes with the solid green Add to Cart.  */
.hwp-preview-room-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    border: 1.5px solid #1a1a1a;
    border-radius: 6px;
    background: #fff;
    color: #1a1a1a;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}
.hwp-preview-room-btn:hover,
.hwp-preview-room-btn:focus {
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
}
.hwp-preview-room-btn svg { flex-shrink: 0; }
@media (max-width: 600px) {
    .hwp-preview-room-btn { padding: 0.85rem 0.75rem; font-size: 0.8rem; }
}

/* ── 3. Mobile collapsible Tools menu ───────────────────────
   Mobile only. The desktop rail (>=961px) never gets these rules, so
   there is no second toolbar system on desktop.                    */
@media (max-width: 960px) {
    .hwp-vp-toolbar { flex-direction: row; align-items: flex-start; gap: 10px; }

    /* The moved tool buttons live here; hidden until the trigger opens. */
    .hwp-vt-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        display: none;
        flex-direction: column;
        gap: 10px;                       /* comfortable separation between tap targets */
        padding: 10px;
        background: rgba(255,255,255,0.97);
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        box-shadow: 0 8px 26px rgba(0,0,0,0.14);
        z-index: 40;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);

        /* v0.4.7: one-finger vertical scrolling on short phones.
           The menu is anchored ~70px below the viewport top, so cap it against
           the *visible* viewport and reserve the bottom safe area. dvh tracks
           the shrinking URL bar on iOS; the vh line below is the fallback for
           browsers without dvh (declaration order = progressive enhancement). */
        max-height: calc(100vh - 132px - env(safe-area-inset-bottom));
        max-height: calc(100dvh - 132px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;   /* iOS momentum */
        overscroll-behavior: contain;        /* no scroll-chaining to the page behind */
        scrollbar-width: thin;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    /* Subtle "more below" cue — a soft fade pinned to the menu's bottom edge.
       pointer-events:none so it never intercepts a tap or a swipe. */
    .hwp-vt-menu::after {
        content: '';
        position: sticky;
        bottom: -10px;
        display: block;
        height: 14px;
        margin: -14px -10px calc(-10px - env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(255,255,255,0.97), rgba(255,255,255,0));
        pointer-events: none;
        flex: none;
    }
    .hwp-vt-menu > .hwp-vt-btn { flex: none; }   /* never squash when scrolling */
    .hwp-vp-toolbar.hwp-vt-open .hwp-vt-menu { display: flex; }

    .hwp-vt-trigger {
        width: auto !important;
        height: 44px !important;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-radius: 22px;
        background: rgba(255,255,255,0.95);
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.10);
        color: #1a1a1a;
        cursor: pointer;
    }
    .hwp-vt-trigger svg { width: 18px !important; height: 18px !important; stroke-width: 2; }
    .hwp-vt-trigger-label {
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1;
    }
    /* Active-tool affordance while collapsed. */
    .hwp-vt-trigger-active {
        border-color: #1a1a1a;
        box-shadow: 0 0 0 1px #1a1a1a, 0 2px 10px rgba(0,0,0,0.12);
    }
    .hwp-vt-count:not(:empty) {
        min-width: 17px; height: 17px;
        border-radius: 9px;
        background: #579E42; color: #fff;
        font-size: 10px; font-weight: 600;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* The trigger/menu only exist on mobile; belt-and-braces for desktop. */
@media (min-width: 961px) {
    .hwp-vt-trigger, .hwp-vt-menu { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v0.4.9 — MURAL ENGINE
   Every rule below is scoped under .hwp-mode-mural, a class JS adds only when
   _hwp_render_mode='mural'. Pattern/Sandberg rendering is therefore untouched
   by this block, by construction rather than by convention.
   ══════════════════════════════════════════════════════════════════════════ */

/* Stacking context so the ghost can sit behind the wall without changing the
   viewport's overflow (which pattern-mode overlays depend on). */
.hwp-mode-mural #hwp-preview-area { position: relative; }

/* v0.4.12 — mural sizing is INSTANT.
   The pattern path animates the viewport (transition: width/height .35s), which
   is fine when the surface is a repeating texture: mid-animation frames still
   look correct. A mural's artwork, dimmed ghost and crop mask must agree on one
   box at all times, so an animating box guarantees a window where they disagree
   — visible as the ghost briefly showing the wrong region after a size change.
   Removing the transition for murals removes that window entirely.
   Pattern products are untouched: this rule is scoped to .hwp-mode-mural. */
.hwp-mode-mural #hwp-wall-viewport {
    position: relative;
    z-index: 2;
    transition: none !important;
}

/* Mural stage: give the artwork more room than the pattern default (86%).
   Murals are one continuous artwork, so preview area is the whole point; the
   pattern path keeps its original breathing room for rulers and seam overlays. */
.hwp-mode-mural #hwp-preview-area { --hwp-mural-usable: 0.94; }

/* The discarded artwork: full mural, dimmed, extending past the wall edges so
   the customer can see exactly what is being cropped away. */
.hwp-mode-mural .hwp-mural-ghost {
    z-index: 1;
    opacity: .22;
    filter: grayscale(35%);
    pointer-events: none;
    border-radius: 2px;
    transition: opacity .18s ease;
}
/* Lift the discarded area while actively repositioning — the moment the
   customer most needs to see what they are giving up.
   v0.4.12: the original rule also carried a sibling selector
   (#hwp-wall-surface.hwp-dragging ~ .hwp-mural-ghost) which could never match —
   the ghost is a child of #hwp-preview-area while the surface is nested inside
   #hwp-wall-viewport, so they are not siblings. Removed; the page-level
   .hwp-mural-moving class (set by the drag handlers) is the working hook. */
.hwp-mode-mural.hwp-mural-moving .hwp-mural-ghost { opacity: .40; }

/* Crop edge: makes printable vs discarded unambiguous. */
.hwp-mode-mural #hwp-wall-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 0 0 2px rgba(0,0,0,.35);
    z-index: 3;
}

/* Repositioning affordance. */
.hwp-mode-mural #hwp-wall-surface.hwp-mural-draggable { cursor: grab; }
.hwp-mode-mural #hwp-wall-surface.hwp-mural-draggable:active,
.hwp-mode-mural #hwp-wall-surface.hwp-dragging { cursor: grabbing; }
.hwp-mode-mural #hwp-wall-surface:focus-visible {
    outline: 2px solid #2b6cb0;
    outline-offset: 2px;
}

/* v0.4.10 — the Center button + its .hwp-mural-controls block were removed
   (forensics: as a flex sibling in the wall row they clamped a 2:1 wall to
   1.53 and desynced displayed vs stored crop). Home key recentres instead. */

/* v0.4.10 — drag-hint close button, mural pages.
   Forensics: the button computed 13.9x42px with appearance:button — Safari/iPad
   painted its full native active state on tap, the "oversized gray rectangle".
   Neutralise the native appearance, give it a proper square hit target, keep a
   subtle pressed state for pointer users and a visible ring for keyboard. */
.hwp-mode-mural .hwp-drag-hint #hwp-drag-hint-close {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    width: 28px;
    height: 28px;
    /* Woodmart applies a global button min-height (~42px), which stretched the
       28px target back into the tall gray tap zone. Pin all four bounds. */
    min-width: 28px;
    max-width: 28px;
    min-height: 28px;
    max-height: 28px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 6px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.hwp-mode-mural .hwp-drag-hint #hwp-drag-hint-close:active {
    background: rgba(0, 0, 0, 0.12);
}
.hwp-mode-mural .hwp-drag-hint #hwp-drag-hint-close:focus {
    outline: none;
}
.hwp-mode-mural .hwp-drag-hint #hwp-drag-hint-close:focus-visible {
    outline: 2px solid #2b6cb0;
    outline-offset: 1px;
}

/* Murals are one continuous artwork — panel seams and pattern-repeat affordances
   are meaningless here. Hidden defensively in case the markup renders them. */
.hwp-mode-mural #hwp-panels-overlay { display: none !important; }