/** * V-2 redesign layer — loads AFTER theme-layout-014.css and overrides it. * * 1. Copper / ink / cream editorial language (matches the site's hero slider). * 2. Desktop: price rail restored to a true right rail spanning ALL groups * (redesign.js moves .rail back out of the FINISH dock), sticky. * 3. Numbered step headers with serif italic accents. * 4. Chips: 44px tall, 11px captions, wrap allowed on narrow widths. * 5. Mobile: sticky bottom bar (total + Add to cart proxy) built by redesign.js. */ #lmsc-root.lmsc-v2{ --lmsc-copper: #b0713e; --lmsc-copper-deep: #8f5527; --lmsc-ink: #16181c; --lmsc-cream: #faf6f0; --lmsc-serif: "Playfair Display", Georgia, "Times New Roman", serif; } /* --- 0. No flash of the V-1 layout ---------------------------------------- * * This stylesheet loads in , so the widget starts hidden and only * shows once redesign.js finishes re-arranging (adds .lmsc-v2) or gives up * (adds .lmsc-v1-fallback). Height is reserved to avoid a scroll jump. */ #lmsc-root:not(.lmsc-v2):not(.lmsc-v1-fallback){ visibility: hidden; min-height: 320px; } /* --- 1. Editorial accents ------------------------------------------------- */ #lmsc-root.lmsc-v2 .eyebrow{ color: var(--lmsc-copper-deep); letter-spacing: .14em; } #lmsc-root.lmsc-v2 .card-hd h2{ font-family: var(--lmsc-serif); font-weight: 600; } #lmsc-root.lmsc-v2 .group-hd .eyebrow{ font-size: 12px; } #lmsc-root.lmsc-v2 .group-hd .hair{ background: linear-gradient(90deg, rgba(176,113,62,.45), rgba(176,113,62,0)); } #lmsc-root.lmsc-v2 .rule{ background: linear-gradient(90deg, rgba(176,113,62,.5), rgba(22,24,28,.08)); } /* Step numbers (redesign.js sets data-lmsc-step on each group header). */ #lmsc-root.lmsc-v2 .group-hd[data-lmsc-step]::before{ content: attr(data-lmsc-step); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border-radius: 50%; border: 1px solid rgba(176,113,62,.55); color: var(--lmsc-copper-deep); font: italic 600 12px/1 var(--lmsc-serif); flex: none; } #lmsc-root.lmsc-v2 .group-hd{ display: flex; align-items: center; } /* --- 2. V7: price card below the fields ------------------------------------ */ #lmsc-root.lmsc-v2 .group.lmsc-has-rail{ display: block !important; } /* Kill every trace of the 014 rail dock: no reserved right column anywhere. */ #lmsc-root.lmsc-v2 #fields .group, #lmsc-root.lmsc-v2 #fields .group > .grid{ width: 100% !important; max-width: none !important; } #lmsc-root.lmsc-v2 .group.lmsc-has-rail > .grid{ grid-column: auto !important; } #lmsc-root.lmsc-v2 .cols{ display: block; } #lmsc-root.lmsc-v2 .lmsc-railcol{ margin-top: 18px; } #lmsc-root.lmsc-v2 .lmsc-railcol .rail{ position: static; } #lmsc-root.lmsc-v2 .lmsc-railcol .price-card{ max-width: none; } /* Compact card: price row reads horizontally where there's room. */ @container lmsc (min-width: 560px) { #lmsc-root.lmsc-v2 .price-card .pc-top{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } #lmsc-root.lmsc-v2 .price-card .pc-top .eyebrow{ flex: none; } #lmsc-root.lmsc-v2 .price-card .price-meta{ flex: 1 1 auto; } } /* Break-up toggle + collapsed table. */ #lmsc-root.lmsc-v2 .lmsc-breakup-toggle{ all: revert; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.22); color: #f2e8dc; font-size: 13px; font-weight: 600; font-family: inherit; letter-spacing: .04em; text-align: left; padding: 12px 20px; cursor: pointer; } #lmsc-root.lmsc-v2 .lmsc-breakup-toggle .lmsc-bt-plus{ display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 13px; line-height: 1; flex: none; } #lmsc-root.lmsc-v2 .lmsc-breakup-toggle .lmsc-bt-chev{ margin-left: auto; font-style: normal; } #lmsc-root.lmsc-v2 .kv.lmsc-breakup{ display: none; } #lmsc-root.lmsc-v2 .kv.lmsc-breakup.lmsc-breakup-open{ display: block; } /* --- 3. Price card: keep the ORIGINAL (V-1) look --------------------------- * * Owner call: professional, as shipped — no copper/cream re-skin. Only the * break-up toggle below is added. */ /* --- 4. Chips: legible + touchable ---------------------------------------- */ #lmsc-root.lmsc-v2 .sw .chip{ height: 44px; border-radius: 6px; } #lmsc-root.lmsc-v2 .sw .cap{ font-size: 11px; line-height: 1.3; min-height: 1.35em; } #lmsc-root.lmsc-v2 .sw[aria-checked="true"] .chip{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lmsc-copper); } #lmsc-root.lmsc-v2 .sw[aria-checked="true"] .tick{ background: var(--lmsc-copper); } #lmsc-root.lmsc-v2 .sw .tick{ width: 14px; height: 14px; top: 4px; right: 4px; } @container lmsc (max-width: 560px) { /* Wrap to two rows rather than ellipsize five captions into mush. */ #lmsc-root.lmsc-v2 .swatches{ flex-wrap: wrap; } #lmsc-root.lmsc-v2 .sw{ flex: 1 1 30%; min-width: 88px; max-width: none; } #lmsc-root.lmsc-v2 .sw .cap{ white-space: normal; } } /* --- 6. Bottom group: Delivery -------------------------------------------- * * The date input and its standing note live in ONE cell — lay that cell out * as two columns: input left, note right. */ #lmsc-root.lmsc-v2 #fields .group:has(#f_grass_delivery_date) > .grid{ display: grid !important; grid-template-columns: minmax(0, 1fr) !important; max-width: none; } #lmsc-root.lmsc-v2 #fields .group:has(#f_grass_delivery_date) > .grid > div{ display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); column-gap: 18px; align-items: start; } #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) .notice{ grid-column: 2; grid-row: 2 / span 3; margin: 0; align-self: start; } #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) .field-hd{ grid-column: 1 / -1; } #lmsc-root.lmsc-v2 #f_grass_delivery_date, #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) .hint{ grid-column: 1; } #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) [id^="warn_"]{ grid-column: 1 / -1; } @container lmsc (max-width: 430px) { #lmsc-root.lmsc-v2 #fields .group:has(#f_grass_delivery_date) > .grid > div{ grid-template-columns: minmax(0, 1fr); } #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) .notice{ grid-column: 1; grid-row: auto; margin-top: 8px; } } /* The dispatch note: ALWAYS visible (overrides the quiet-first-load rule) until a date is chosen (body.lmsc-date-set, toggled by redesign JS). */ body:not(.lmsc-touched) #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) .notice{ display: flex !important; } body.lmsc-date-set #lmsc-root.lmsc-v2 .group:has(#f_grass_delivery_date) .notice{ display: none !important; } /* --- 6b. V7 Finish: Frame + Mirror Type share one line --------------------- * * 50/50 columns — same rhythm as the Features grid above, so the two * sections align edge to edge. */ #lmsc-root.lmsc-v2 .group.lmsc-finish-inline > .grid, #lmsc-root.lmsc-v2 #fields .group:has(#f_frame):has(#f_mirrortype) > .grid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px; align-items: start; } #lmsc-root.lmsc-v2 .group.lmsc-finish-inline > .grid > *, #lmsc-root.lmsc-v2 #fields .group:has(#f_frame):has(#f_mirrortype) > .grid > *{ grid-column: auto !important; /* frame's span2 no longer spans the row */ } /* Stack only at true phone widths. */ @container lmsc (max-width: 430px) { #lmsc-root.lmsc-v2 .group.lmsc-finish-inline > .grid, #lmsc-root.lmsc-v2 #fields .group:has(#f_frame):has(#f_mirrortype) > .grid{ grid-template-columns: minmax(0, 1fr) !important; } } /* --- 5. Mobile sticky bottom bar (built by redesign.js) -------------------- */ .lmsc-bottombar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: none; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #ffffff; border-top: 1px solid rgba(176,113,62,.35); box-shadow: 0 -6px 24px rgba(22,24,28,.12); } .lmsc-bottombar .lmsc-bb-label{ font: italic 600 11px/1.2 "Playfair Display", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #8f5527; display: block; } .lmsc-bottombar .lmsc-bb-price{ font-size: 20px; font-weight: 700; color: #16181c; line-height: 1.15; white-space: nowrap; } .lmsc-bottombar .lmsc-bb-qty{ display: flex; align-items: center; gap: 0; border: 1px solid rgba(22,24,28,.18); border-radius: 6px; overflow: hidden; flex: none; } .lmsc-bottombar .lmsc-bb-qty button{ appearance: none; border: 0; background: #f4f1ec; color: #16181c; font-size: 18px; font-weight: 700; width: 34px; height: 40px; cursor: pointer; } .lmsc-bottombar .lmsc-bb-qval{ min-width: 28px; text-align: center; font-size: 15px; font-weight: 700; color: #16181c; } .lmsc-bottombar .lmsc-bb-btn{ margin-left: auto; flex: none; appearance: none; border: 0; border-radius: 4px; background: #16181c; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .04em; padding: 13px 22px; cursor: pointer; } .lmsc-bottombar .lmsc-bb-btn:active{ background: #8f5527; } @media (max-width: 767px) { body.lmsc-bb-on .lmsc-bottombar{ display: flex; } body.lmsc-bb-on{ padding-bottom: 74px; } /* WooConnect FAB sits bottom-right — lift it above the bar. */ body.lmsc-bb-on .wooconnect-fab, body.lmsc-bb-on #wooconnect-root{ bottom: 84px !important; } }