/* ============================================================
   SOR Luxury Cards — All Small Rugs category page only.
   Served by Wix HTTP function. Edit src/backend/http-functions.js
   then git push + wix publish to deploy.
   ============================================================ */

/* ── Card container ── */
[id^="comp-lvoxau18__"] {
    background: #F8F5F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(60,40,20,0.06) !important;
    padding: 16px !important;
    transition: transform 200ms ease, box-shadow 200ms ease !important;
    overflow: hidden !important;
}
[id^="comp-lvoxau18__"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(60,40,20,0.12) !important;
}

/* ── Product image ── */
[id^="comp-lvoxdhg2__"] {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ── Horizontal rule below image — gold tint ── */
[id^="comp-lxj586hh__"] {
    background: rgba(201,168,90,0.25) !important;
    opacity: 1 !important;
}

/* ── Title — pulled up, centered serif ── */
[id^="comp-lvoxfngn__"] {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    text-align: center !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    color: #2a2a2a !important;
    margin-top: 8px !important;
    padding: 0 12px !important;
}
[id^="comp-lvoxfngn__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    color: #2a2a2a !important;
}
[id^="comp-lvoxfngn__"]::after {
    content: "\25C6";
    display: block;
    text-align: center;
    color: #c9a85a;
    font-size: 10px;
    margin: 14px auto;
    letter-spacing: 0.5em;
}

/* ── PRICE label — small caps, centered ── */
[id^="comp-lxdje6o9__"] {
    display: block !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin: 0 auto 6px !important;
    height: auto !important;
    min-height: 0 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* ── Force price row to be its own block, NOT overlapping with size ── */
[id^="comp-lxdlh8f0__"] {
    position: relative !important;
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    height: auto !important;
}

/* ── Price — large centered serif ──
   Velo writes the price via .text, so Wix wraps it in the element's default
   theme markup: <h6 class="font_6" style="font-size:16px"> ... </h6>.
   That inline 16px on the inner <h6> beat our 36px (which sat on the wrapper,
   not the <h6>), and the wrapper shrink-wrapped to the text width (~89px) so
   text-align:center had nothing to center within. Force size onto the inner
   nodes and make the wrapper span its grid track so it actually centers. */
[id^="comp-lvoxlait__"] {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 36px !important;
    text-align: center !important;
    color: #1a1a1a !important;
    padding-left: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-decoration: none !important;
    width: 100% !important;
    justify-self: center !important;
    display: block !important;
}
[id^="comp-lvoxlait__"],
[id^="comp-lvoxlait__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 36px !important;
    text-align: center !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}
[id^="comp-lvoxlait__"] s,
[id^="comp-lvoxlait__"] strike,
[id^="comp-lvoxlait__"] del,
[id^="comp-lvoxlait__"] [style*="text-decoration: line-through"],
[id^="comp-lvoxlait__"] [style*="line-through"] {
    display: none !important;
    visibility: hidden !important;
}

/* ── Grid reorder — SIZE between price and pills ──
   The card's inner grid (an anonymous div two levels inside the card)
   auto-sizes its rows to content — verified: row 5 grew 73px→101px when
   the price became 36px, which a fixed-px track could not do. So we can
   reassign rows without crushing anyone:
     row 5 = price (unchanged)   row 6 = SIZE   row 7 = pills   row 8 = cart
   Previously SIZE used grid-row:auto and auto-placed into the empty row 7,
   landing BELOW the pills. */
[id^="comp-lvoxau18__"] [id^="comp-lxsxt05n__"] {
    grid-area: unset !important;
    grid-row: 6 / 7 !important;
    grid-column: 1 / -1 !important;
    clear: both !important;
    float: none !important;
    display: block !important;
}
[id^="comp-lvoxau18__"] [id^="comp-lxsxsm8i__"] {
    grid-row: 7 / 8 !important;
}

/* ── Divider below price ── */
[id^="comp-lxdlh8f0__"]::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background: rgba(201,168,90,0.25);
    margin: 16px auto;
}

/* ── Size row inner wrapper — flatten the single-cell sub-grid to block ──
   Inside the size row, the SIZE label and value live in a one-column
   sub-grid, BOTH in the same cell; the value is nudged right by left:42px
   so they read as "SIZE: 2x4" on one line. Force that wrapper to block flow
   so the two stack vertically (label on top, value below), like the PRICE
   block where label and value are already separate grid rows. */
[id^="comp-lxsxt05n__"] > div,
[id^="comp-lxsxt05n__"] > div > div {
    display: block !important;
    width: 100% !important;
}

/* ── SIZE label — block, centered small caps (matches PRICE label) ── */
[id^="comp-lvoxhsxy__"] {
    display: block !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin: 0 auto 6px !important;
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
[id^="comp-lvoxhsxy__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    text-align: center !important;
}

/* ── Size value — block, centered large serif (price treatment, 24px) ──
   24px keeps the $36px price as the visual anchor while the size still
   reads as a substantial serif value. As with price, the value text sits
   in a default <h6 style="font-size:16px"> from Velo's .text, so the size
   must be forced onto the inner nodes, and left:0 cancels the 42px offset. */
[id^="comp-lvoxjbmb__"] {
    display: block !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.1 !important;
    width: 100% !important;
    left: 0 !important;
    margin: 0 auto !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
[id^="comp-lvoxjbmb__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-align: center !important;
}

/* ── Force size row to be its own block BELOW price row ── */
[id^="comp-lxsxt05n__"] {
    position: relative !important;
    display: block !important;
    text-align: center !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    margin: 8px auto !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
}
[id^="comp-lxsxt05n__"]::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background: rgba(201,168,90,0.25);
    margin: 16px auto;
}

/* ── Pills container ── */
[id^="comp-lxsxsm8i__"] {
    padding-top: 0 !important;
    overflow: visible !important;
    height: auto !important;
}

/* ── BRUTE-FORCE: nuke every background/radius on every descendant ── */
[id^="comp-lxsxsm8i__"] * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Named pill wrappers — flatten to divider rows ── */
[id^="comp-lxdod0pb__"],
[id^="comp-lxdohki0__"],
[id^="comp-lxdokaps__"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(201,168,90,0.18) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* ── No border on last pill row ── */
[id^="comp-lxdokaps__"] {
    border-bottom: none !important;
}

/* ── Direct children of pills container — ensure row stacking ── */
[id^="comp-lxsxsm8i__"] > [id^="comp-"]:not(:last-child),
[id^="comp-lxsxsm8i__"] > interact-element:not(:last-child) > [id^="comp-"] {
    border-bottom: 1px solid rgba(201,168,90,0.18) !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

/* ── Pill text content ── */
[id^="comp-lvoxoi0e__"],
[id^="comp-lvoxp85o__"],
[id^="comp-lvzfkacq__"] {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 14px !important;
    color: #4a3a20 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    display: block !important;
}
[id^="comp-lvoxoi0e__"] *,
[id^="comp-lvoxp85o__"] *,
[id^="comp-lvzfkacq__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 14px !important;
    color: #4a3a20 !important;
    border-radius: 0 !important;
}

/* ── Pill icons ── */
[id^="comp-lxdwazrw__"],
[id^="comp-lxdwazrv__"],
[id^="comp-lxdwazru__"] {
    display: inline-block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

/* ── HIDE — only elements we actually want gone ── */
[id^="comp-lvzdja05__"],
[id^="comp-lvoxmuco__"],
[id^="comp-lvoxnhk1__"],
[id^="comp-lxdlcpwp__"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}
[id^="comp-lvoxmuco__"]:not([data-show="true"]),
[id^="comp-lvoxnhk1__"]:not([data-show="true"]) {
    display: none !important;
    height: 0 !important;
}