/** * Castico Sample Builder — WP Bakery element styles. * Ported from mockups/castico-color-samples.html. * * Everything is scoped to .castico-sb (page elements) or .sb-portal (the * fixed bar / modal / toast, which JS relocates to so no themed * ancestor with a transform can break position:fixed). * * Typography matches the mockup — Archivo for headings, Inter for body — * pulled in one Google Fonts request that the plugin only enqueues on pages * that actually use these elements (see castico_sb_maybe_enqueue). */ /* ============================================================ Boxed page shell — mirrors the mockup's .wrap The page template is Full Width, so this wrapper supplies the 1140px cap plus the breathing room under the header and above the footer. Injected around the_content by the plugin. ============================================================ */ /* No horizontal padding here on purpose: the theme's .sec_row.container inside each WP Bakery row already supplies ~20px, and the row's -15px margin cancels its columns' 15px gutter. Adding our own stacked on top and squeezed the mobile grid. */ .castico-sb-page{ box-sizing:border-box; max-width:1140px; margin:0 auto; padding:64px 0 96px; } @media (max-width:899px){ .castico-sb-page{padding:32px 0 56px;} } /* WP Bakery inline editor: elements render inside a .vc_element wrapper and the boxed .castico-sb-page shell is absent, so rows would sprawl to the full editor width — the grid jumps to 4 columns and the summary panel drifts. Give each sample row the same 1140px measure while editing. The .vc_element ancestor is what scopes this to the editor: on the published page .castico-sb never has that ancestor, so the rule stays completely inert there. */ .vc_row:has(.vc_element .castico-sb){max-width:1140px;margin-left:auto;margin-right:auto;} /* Typography — Archivo for headings, Inter for everything else, mirroring the mockup. The Goya theme fights us with two inline rules: `body,h1..h9 { font-family:… !important }` and a blanket `* { -apple-system }`, so neither plain inheritance nor a wrapper rule reaches our text. So: set Inter on the wrappers, force every descendant to actually inherit it (beats the non-important `*`), then re-assert Archivo on the headings with !important to clear the theme's !important. Families enqueued from PHP, scoped to sample pages. */ .castico-sb, .sb-portal{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;} .castico-sb *, .sb-portal *{font-family:inherit;} .castico-sb .sb-h1, .castico-sb .sb-h2, .castico-sb .sb-ptier b, .castico-sb .sb-bundle-tag, .castico-sb .sb-summary h3, .sb-portal .sb-modal-head h3, .sb-portal .sb-bar-sheet-head{font-family:'Archivo',system-ui,sans-serif !important;} .castico-sb, .sb-portal{ --ink:#141414; --ink-soft:#454545; --line:#e6e3dd; --paper:#ffffff; --stone:#e9e4db; --stone-deep:#d8d1c4; --chip:#f2efe9; --yellow:#FDE000; --green:#2f8f5e; --sb-maxw:1140px; --r:12px; /* finished-edge look for the chip: thin rim + top sheen + bottom shade */ --chip-edge:inset 0 0 0 1px rgba(0,0,0,.16), inset 0 2px 3px rgba(255,255,255,.30), inset 0 -4px 8px rgba(0,0,0,.10); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; } .castico-sb *, .sb-portal *{box-sizing:border-box;} .castico-sb p{margin:0;} /* ============================================================ Hero — result header, headline, lead paragraph, pricing panel ============================================================ */ .result-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .result-title-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .result-tag { background: var(--ink); color: var(--paper); padding: 6px 12px; font-size: 11px; letter-spacing: .2em; font-weight: 600; text-transform: uppercase; } .result-tag .yellow-mark { background: var(--yellow); color: var(--ink); padding: 2px 6px; margin-left: 8px; } .result-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; } .back-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 10px 18px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, gap .2s; } .back-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); gap: 12px; } .castico-sb .sb-h1{ font-weight:600; font-size:clamp(30px,4.6vw,42px); line-height:1.05; letter-spacing:-.01em; margin:0 0 6px; } .castico-sb .sb-lead{font-size:16.5px;color:var(--ink);max-width:78ch;margin:9px 0 0;line-height:1.55;} .castico-sb .sb-lead strong{color:var(--ink);font-weight:700;} .castico-sb .sb-note{ display:inline-flex;align-items:center;gap:7px; font-size:13.5px;color:#8a8a8a;margin:14px 0 0;line-height:1.35; } .castico-sb .sb-note svg{width:14px;height:14px;flex:none;color:#aaa;} /* Pricing panel: one pill per chip count, then the bundle tag + shipping line. The pills are derived from the same pricing the cart fee uses, so they can never advertise a price the checkout won't honour. */ .castico-sb .sb-pricing{margin:12px 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line);} .castico-sb .sb-tiers{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 11px;} .castico-sb .sb-ptier{ display:inline-flex;align-items:baseline;gap:5px; background:var(--chip);border:1px solid var(--line);border-radius:999px; padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--ink-soft); } .castico-sb .sb-ptier b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink);} .castico-sb .sb-bundle{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;font-size:14px;color:var(--ink-soft);} /* Solid colours first so browsers without color-mix() still get the yellow tint. */ .castico-sb .sb-bundle-tag{ display:inline-block;border-radius:999px;padding:3px 10px; font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; color:#8a6d10;background:#fef6b3;border:1px solid #f3e163; background:color-mix(in srgb, var(--yellow) 30%, #fff); border-color:color-mix(in srgb, var(--yellow) 55%, var(--line)); } .castico-sb .sb-ship-inc{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--green);} .castico-sb .sb-ship-inc svg{width:14px;height:14px;flex:none;} /* ============================================================ Promo / info card — a

accordion Collapsed and tappable up to 1199px, permanently open (and inert) from 1200px up. The open state is driven by CSS alone so the card is correct before — and without — JavaScript; sample-builder.js only syncs the `open` attribute afterwards so the summary reports the right state to a screen reader. See castico_sb_sc_info_card(). ============================================================ */ /* Each element sits in its own WP Bakery row, which contributes no spacing of its own — so the rhythm from the mockup lives on the blocks themselves. */ .castico-sb .sb-promo{ margin:12px 0 0;display:block; border:1px solid var(--line);background:none;border-radius:var(--r); padding:14px 17px; } .castico-sb .sb-promo-sum{ display:flex;align-items:center;gap:14px; cursor:pointer;list-style:none;outline:none; } /* Kill the native disclosure triangle in both engines. */ .castico-sb .sb-promo-sum::-webkit-details-marker{display:none;} .castico-sb .sb-promo-sum::marker{content:'';} .castico-sb .sb-promo-ic{ flex:none;width:36px;height:36px;border-radius:50%;background:var(--yellow); display:flex;align-items:center;justify-content:center;color:#111; } .castico-sb .sb-promo-ic svg{width:19px;height:19px;display:block;} .castico-sb .sb-promo-lead{flex:1 1 auto;min-width:0;margin:0;font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:.005em;} .castico-sb .sb-promo-chev{ flex:none;width:12px;height:12px;margin-right:2px; border-right:2px solid #b3aca0;border-bottom:2px solid #b3aca0; transform:rotate(45deg);transition:transform .18s ease; } .castico-sb .sb-promo[open] .sb-promo-chev{transform:rotate(-135deg);} .castico-sb .sb-promo-body{margin:10px 0 0;padding-left:54px;font-size:14px;color:var(--ink-soft);line-height:1.5;} /* Below 1200px the card collapses. The rule is scoped to this range on purpose: above it there is simply nothing hiding the body, so the card reads as open whatever the `open` attribute happens to say. */ @media (max-width:1199px){ .castico-sb details.sb-promo:not([open]) > .sb-promo-body{display:none;} } @media (min-width:601px) and (max-width:1199px){ .castico-sb .sb-promo{padding:14px 16px;border-radius:12px;} .castico-sb .sb-promo-body{padding-left:57px;} } @media (min-width:1200px){ .castico-sb .sb-promo-sum{pointer-events:none;} /* nothing left to toggle */ .castico-sb .sb-promo-chev{display:none;} .castico-sb .sb-promo-body{padding-left:0;} } .castico-sb .sb-promo-body b, .castico-sb .sb-promo-body strong{color:var(--ink);font-weight:700;} .castico-sb .sb-promo-body a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;} .castico-sb .sb-promo-body a:hover{color:#000;} /* ============================================================ Pro / trade banner (whole card is the link) ============================================================ */ .castico-sb .sb-pro{ margin:14px 0 0; display:flex;align-items:center;gap:15px;flex-wrap:wrap; background:var(--ink);border:1px solid var(--ink);border-radius:var(--r); padding:14px 17px;text-decoration:none;color:inherit;cursor:pointer; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease; } .castico-sb .sb-pro:hover{background:#000;border-color:#000;box-shadow:0 6px 18px rgba(0,0,0,.22);} .castico-sb .sb-pro-ic{ flex:none;width:40px;height:40px;border-radius:10px; background:var(--yellow);color:var(--ink); display:flex;align-items:center;justify-content:center; } .castico-sb .sb-pro-ic svg{width:21px;height:21px;display:block;} .castico-sb .sb-pro-txt{flex:1 1 160px;min-width:0;} .castico-sb .sb-pro-badge{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;border-radius:999px;padding:3px 10px;margin:0 0 5px; color:#8a6d10;background:#fef6b3; } .castico-sb .sb-pro-lead{display:block;font-size:15.5px;font-weight:700;color:#fff;line-height:1.25;} .castico-sb .sb-pro-sub{display:block;font-size:14px;color:rgba(255,255,255,.72);margin-top:3px;line-height:1.4;} .castico-sb .sb-pro-btn{ flex:none;background:#fff;color:var(--ink);border-radius:8px; padding:12px 20px;font-size:14px;font-weight:600;white-space:nowrap; transition:background .15s ease; } .castico-sb .sb-pro:hover .sb-pro-btn{background:var(--yellow);} .castico-sb .sb-pro-btn .sb-pro-btn-short{display:none;} /* Phones: keep the banner on one line — the lead truncates and the button swaps to its short label instead of stacking full width. */ @media (max-width:560px){ .castico-sb .sb-pro{gap:11px;flex-wrap:nowrap;padding:12px 14px;} .castico-sb .sb-pro-ic{width:34px;height:34px;} .castico-sb .sb-pro-ic svg{width:18px;height:18px;} .castico-sb .sb-pro-txt{flex:1 1 auto;min-width:0;} .castico-sb .sb-pro-badge{font-size:10.5px;padding:2px 8px;margin:0 0 3px;} .castico-sb .sb-pro-lead{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .castico-sb .sb-pro-sub{display:none;} .castico-sb .sb-pro-btn{flex:none;padding:9px 14px;font-size:13px;white-space:nowrap;} .castico-sb .sb-pro-btn .sb-pro-btn-full{display:none;} .castico-sb .sb-pro-btn .sb-pro-btn-short{display:inline;} } @media (max-width:389px){ .castico-sb .sb-pro-lead{font-size:12px;} .castico-sb .sb-pro-btn{padding:9px 11px;font-size:12.5px;} } /* ============================================================ Choose section — heading, toolbar ============================================================ */ .castico-sb .sb-h2{ font-weight:600;font-size:clamp(22px,3.2vw,27px); letter-spacing:-.01em;margin:0;line-height:1.1; } .castico-sb .sb-sub{font-size:14.5px;color:var(--ink-soft);margin:4px 0 0;} .castico-sb .sb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px;} /* Heading and toolbar share one row, so the grid starts higher up the page. */ .castico-sb .sb-choose-bar{ display:flex;align-items:center;justify-content:space-between; gap:14px 16px;flex-wrap:wrap;margin:0 0 12px; } .castico-sb .sb-choose-bar .sb-h2{margin:0;} .castico-sb .sb-choose-bar .sb-toolbar{margin:0;flex:0 0 auto;} .castico-sb .sb-btn-sm{ background:var(--stone);border:1px solid var(--stone-deep);border-radius:999px; padding:8px 16px;cursor:pointer;font:inherit;font-size:14px;font-weight:600; color:var(--ink);transition:background .12s ease,border-color .12s ease; } .castico-sb .sb-btn-sm:hover{background:#e9e4db;border-color:#cec6b7;} .castico-sb .sb-count{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink-soft);} .castico-sb .sb-count b{color:var(--ink);} /* ============================================================ Swatch grid ============================================================ */ .castico-sb .sb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:4px 18px; } /* Explicit column counts beat auto-fill here: next to the 316px summary panel the gap was pushing auto-fill down to 2 columns on a laptop. */ @media (min-width:900px) and (max-width:1199px){ .castico-sb .sb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;} } @media (min-width:1200px){ .castico-sb .sb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 16px;} } .castico-sb .sb-chip{ background:none;border:none;padding:0;margin:0; cursor:pointer;text-align:center;font:inherit;color:inherit; display:block;position:relative; } .castico-sb .sb-swatch{ aspect-ratio:10 / 5;width:100%;display:block;position:relative; border-radius:4px;overflow:hidden;background:var(--chip); box-shadow:var(--chip-edge), 0 5px 14px rgba(0,0,0,.13); transition:box-shadow .16s ease, transform .16s ease; } .castico-sb .sb-swatch img, .castico-sb .sb-swatch-fill{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; } .castico-sb .sb-chip:hover .sb-swatch{transform:translateY(-3px);box-shadow:var(--chip-edge), 0 12px 26px rgba(0,0,0,.18);} .castico-sb .sb-chip:focus-visible{outline:none;} .castico-sb .sb-chip:focus-visible .sb-swatch{box-shadow:var(--chip-edge), 0 0 0 3px var(--yellow);} .castico-sb .sb-badge{ position:absolute;top:9px;right:9px;z-index:2; width:24px;height:24px;border-radius:50%;background:var(--yellow); display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.6);transition:.16s ease; box-shadow:0 2px 6px rgba(0,0,0,.22); } .castico-sb .sb-badge svg{width:13px;height:13px;display:block;} .castico-sb .sb-badge-add{ position:absolute;top:9px;right:9px;z-index:2; width:24px;height:24px;border-radius:50%; background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.12); display:flex;align-items:center;justify-content:center; color:#333;font-size:19px;line-height:1;font-weight:400; opacity:0;transform:scale(.7);transition:.15s ease;pointer-events:none; } .castico-sb .sb-chip:hover .sb-badge-add, .castico-sb .sb-chip:focus-visible .sb-badge-add{opacity:1;transform:scale(1);} .castico-sb .sb-chip.is-on .sb-badge-add{opacity:0;} /* min-height reserves room for the finish so rows of chips line up even when one caption wraps to a second line. */ .castico-sb .sb-chip-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 4px 0;min-height:44px;} .castico-sb .sb-chip-name{flex:0 0 auto;font-size:15px;font-weight:600;letter-spacing:.005em;line-height:1.25;white-space:nowrap;} .castico-sb .sb-chip-finish{ flex:0 1 auto;min-width:0;font-size:13.5px;font-weight:600;color:#8a8a8a; letter-spacing:.02em;text-align:right;line-height:1.25; } /* Multi-column chips beside the sticky panel are too narrow for one line — stack the finish under the name instead of squeezing both. */ @media (min-width:900px){ .castico-sb .sb-chip-meta{display:block;padding:8px 3px 0;min-height:50px;} .castico-sb .sb-chip-name{display:block;white-space:normal;line-height:1.2;} .castico-sb .sb-chip-finish{display:block;text-align:left;margin-top:2px;line-height:1.2;} } .castico-sb .sb-chip-low{flex-basis:100%;font-size:11.5px;font-weight:600;color:#b8860b;margin:2px 0 0;} /* selected state */ .castico-sb .sb-chip.is-on .sb-swatch{box-shadow:var(--chip-edge), 0 8px 20px rgba(0,0,0,.20);transform:translateY(-2px);} .castico-sb .sb-chip.is-on .sb-badge{opacity:1;transform:scale(1);} /* sold out */ .castico-sb .sb-sold{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; background:rgba(17,17,17,.86);color:#fff;font-size:11.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap; } .castico-sb .sb-chip.is-out{cursor:not-allowed;} .castico-sb .sb-chip.is-out .sb-swatch{filter:grayscale(.55) opacity(.55);} .castico-sb .sb-chip.is-out:hover .sb-swatch{transform:none;box-shadow:var(--chip-edge), 0 5px 14px rgba(0,0,0,.13);} .castico-sb .sb-chip.is-out .sb-badge-add{display:none;} .castico-sb .sb-chip.is-out .sb-chip-name{color:#9a9a9a;} /* already in the cart — locked, shown with the check badge (no label) */ .castico-sb .sb-chip.is-oncart{cursor:default;} .castico-sb .sb-chip.is-oncart .sb-badge{opacity:1;transform:scale(1);} .castico-sb .sb-chip.is-oncart .sb-badge-add{display:none;} .castico-sb .sb-chip.is-oncart:hover .sb-swatch{transform:none;} .castico-sb .sb-approx{font-size:13.5px;color:#9a9a9a;margin:14px 0 0;max-width:70ch;line-height:1.55;} /* ============================================================ Order summary (desktop sidebar) ============================================================ */ .castico-sb .sb-summary{ margin:14px 0 0;border:1px solid var(--stone-deep);border-radius:var(--r); padding:18px 18px 16px;background:var(--paper); } .castico-sb .sb-summary h3{font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 16px;} .castico-sb .sb-empty{color:#a2a2a2;font-size:15px;margin:2px 0;} .castico-sb .sb-li, .sb-portal .sb-li{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:7px 0;border-bottom:1px solid #efeae1;font-size:14.5px; } .castico-sb .sb-li:first-child, .sb-portal .sb-li:first-child{padding-top:0;} .castico-sb .sb-li-name, .sb-portal .sb-li-name{display:flex;align-items:center;gap:11px;min-width:0;} .castico-sb .sb-li-sw, .sb-portal .sb-li-sw{ flex:none;width:30px;height:30px;border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); background-size:cover;background-position:center; } .castico-sb .sb-li-txt, .sb-portal .sb-li-txt{min-width:0;} .castico-sb .sb-li-nm, .sb-portal .sb-li-nm{display:block;font-weight:600;font-size:15px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .castico-sb .sb-li-meta, .sb-portal .sb-li-meta{display:block;font-size:13px;color:#a2a2a2;line-height:1.25;margin-top:1px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .castico-sb .sb-li-right, .sb-portal .sb-li-right{display:flex;align-items:center;gap:8px;flex:none;} .castico-sb .sb-li-price, .sb-portal .sb-li-price{color:var(--ink-soft);white-space:nowrap;font-size:15px;display:inline-flex;align-items:baseline;gap:5px;} /* Struck-through full price on every sample riding along in an open box — the difference is what the cart's bundle-discount fee gives back. */ .castico-sb .sb-li-price s, .sb-portal .sb-li-price s{color:#b6b0a4;font-weight:400;font-size:12.5px;} .castico-sb .sb-li-remove, .sb-portal .sb-li-remove{ background:none;border:none;cursor:pointer; width:26px;height:26px;border-radius:50%;flex:none; color:#b4b4b4;font-size:19px;line-height:1; display:flex;align-items:center;justify-content:center; transition:background .12s ease,color .12s ease; } .castico-sb .sb-li-remove:hover, .sb-portal .sb-li-remove:hover{background:#f1f1f1;color:var(--ink);} .castico-sb .sb-totals{margin-top:16px;border-top:1px solid #ededed;padding-top:16px;} .castico-sb .sb-row{display:flex;justify-content:space-between;gap:10px;font-size:16px;margin:0 0 10px;color:var(--ink-soft);} /* Let the long "Bundle discount (2 samples)" label wrap, never the amount. */ .castico-sb .sb-row > span + span{white-space:nowrap;} .castico-sb .sb-row.sb-disc{color:var(--green);font-weight:600;} .castico-sb .sb-row.sb-total{font-size:23px;font-weight:700;color:var(--ink);margin:12px 0 0;padding-top:14px;border-top:1px solid #ededed;} /* ============================================================ Add button ============================================================ */ .castico-sb .sb-add, .sb-portal .sb-add{ background:var(--ink);color:#fff;border:none;cursor:pointer; font:inherit;font-size:15px;font-weight:600;letter-spacing:.01em; padding:14px 34px;border-radius:4px;transition:background .15s ease; min-width:220px; } .castico-sb .sb-add:hover, .sb-portal .sb-add:hover{background:#000;} .castico-sb .sb-add:disabled, .sb-portal .sb-add:disabled{background:#d6d6d6;color:#fff;cursor:not-allowed;} .castico-sb .sb-add.is-busy, .sb-portal .sb-add.is-busy{opacity:.7;cursor:progress;} /* ============================================================ Two-column shop layout ============================================================ */ /* Mirrors the mockup's

between the banner and the picker. */ .castico-sb .sb-shop{ display:block; margin:22px 0 0; padding-top:22px; border-top:1px solid var(--line); } .castico-sb .sb-shop-side{min-width:0;display:none;} /* mobile: sticky bar instead */ .castico-sb .sb-add-side{width:100%;margin-top:18px;min-width:0;display:none;} @media (min-width:900px){ .castico-sb .sb-shop{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:44px;align-items:start;} /* --sb-sticky-top clears the theme's on-scroll fixed header (the 70px `header.sticky-display-top`) plus a small gap, so the summary panel never slides underneath it. max-height keeps the panel inside the viewport below that offset. On a page without a sticky header this just reads as a bit more top inset. */ .castico-sb .sb-shop-side{ --sb-sticky-top:86px; display:flex;position:sticky;top:var(--sb-sticky-top); max-height:calc(100vh - var(--sb-sticky-top) - 24px); flex-direction:column; } .castico-sb .sb-summary{margin-top:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;} .castico-sb .sb-summary h3{flex:none;} .castico-sb .sb-lines{overflow-y:auto;min-height:0;} .castico-sb .sb-totals{flex:none;} .castico-sb .sb-add-side{display:block;flex:none;} .castico-sb .sb-approx{margin-top:30px;} } /* ============================================================ Sticky action bar (mobile / tablet) — lives in .sb-portal on ============================================================ */ .sb-portal .sb-bar{ position:fixed;left:0;right:0;bottom:0;z-index:9040; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(0,0,0,.06); padding-bottom:env(safe-area-inset-bottom); } /* The theme's side panels — cart, mobile menu, search, filters — sit at z-index 600, far below this bar, so an open drawer would otherwise have the bar floating over it. The theme flags the open panel on (panel-open-cart and friends), so key off that instead of fighting the stacking order: the page behind a drawer should not be reachable anyway. */ body[class*="panel-open-"] .sb-portal .sb-bar, body[class*="panel-open-"] .sb-portal .sb-totop{ display:none; } .sb-portal .sb-bar-thumbs{ display:none;gap:6px;max-width:var(--sb-maxw);margin:0 auto; padding:9px 22px 0;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .sb-portal .sb-bar-thumbs::-webkit-scrollbar{display:none;} .sb-portal .sb-bar-thumbs.is-show{display:flex;} .sb-portal .sb-bar-thumb{ flex:none;width:38px;height:26px;border-radius:4px; background-size:cover;background-position:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); animation:sbThumbIn .18s ease; } @keyframes sbThumbIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}} .sb-portal .sb-bar-in{ max-width:var(--sb-maxw);margin:0 auto;padding:14px 22px; display:flex;align-items:center;gap:16px;flex-wrap:wrap; } .sb-portal .sb-bar-info{font-size:14.5px;font-weight:500;color:var(--ink-soft);} .sb-portal .sb-bar-info b{color:var(--ink);font-weight:700;} .sb-portal .sb-bar-total{font-size:17px;font-weight:700;margin-left:auto;} .sb-portal .sb-bar-cta{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .sb-portal .sb-bar-toggle{ display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0; background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;text-align:left;color:inherit; } .sb-portal .sb-bar-caret{flex:none;width:16px;height:16px;transition:transform .2s ease;color:#9a9a9a;} .sb-portal .sb-bar-toggle:disabled{cursor:default;} .sb-portal .sb-bar-toggle:disabled .sb-bar-caret{opacity:0;} .sb-portal .sb-bar-toggle[aria-expanded="true"] .sb-bar-caret{transform:rotate(180deg);} .sb-portal .sb-bar-sheet{ max-width:var(--sb-maxw);margin:0 auto;padding:0 22px; overflow:hidden;max-height:0;transition:max-height .24s ease; } .sb-portal .sb-bar-sheet.is-open{max-height:74vh;padding-top:14px;padding-bottom:2px;} .sb-portal .sb-bar-sheet-head{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);padding:0 0 8px;} .sb-portal .sb-bar-items{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 0 4px;} .sb-portal .sb-bar-items .sb-li{padding:9px 0;} .sb-portal .sb-bar-brows{border-top:1px solid var(--line);padding-top:11px;} .sb-portal .sb-brow{display:flex;justify-content:space-between;gap:10px;font-size:16px;margin:0 0 10px;color:var(--ink-soft);} .sb-portal .sb-brow > span + span{white-space:nowrap;} .sb-portal .sb-brow.sb-disc{color:var(--green);font-weight:600;} .sb-portal .sb-brow.sb-total{color:var(--ink);font-weight:700;font-size:22px;border-top:1px solid var(--line);padding-top:11px;margin-top:2px;} /* leave room so the fixed bar never covers page content */ @media (max-width:899px){ body.sb-has-bar{padding-bottom:calc(172px + env(safe-area-inset-bottom));} } @media (min-width:900px){ .sb-portal .sb-bar{display:none;} /* replaced by the sticky sidebar */ } /* ============================================================ Confirm-before-add modal ============================================================ */ .sb-portal .sb-modal{position:fixed;inset:0;z-index:9060;display:flex;align-items:flex-end;justify-content:center;} .sb-portal .sb-modal[hidden]{display:none;} .sb-portal .sb-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:sbFadeIn .18s ease;} @keyframes sbFadeIn{from{opacity:0}to{opacity:1}} .sb-portal .sb-modal-card{ position:relative;width:100%;max-width:520px; background:var(--paper);border-radius:16px 16px 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); max-height:88vh;display:flex;flex-direction:column; box-shadow:0 -10px 40px rgba(0,0,0,.25); animation:sbSlideUp .22s cubic-bezier(.2,.8,.3,1); } @keyframes sbSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .sb-portal .sb-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;} .sb-portal .sb-modal-head h3{font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0;} .sb-portal .sb-modal-x{ background:none;border:none;font-size:26px;line-height:1;color:#9a9a9a;cursor:pointer; width:36px;height:36px;border-radius:50%;flex:none; } .sb-portal .sb-modal-x:hover{background:#f1f1f1;color:var(--ink);} .sb-portal .sb-modal-sub{margin:4px 0 12px;font-size:13.5px;color:var(--ink-soft);} .sb-portal .sb-modal-items{ overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1 1 auto; border-top:1px solid var(--line);padding-top:4px; } .sb-portal .sb-modal-totals{flex:none;border-top:1px solid var(--line);padding-top:12px;margin-top:8px;} .sb-portal .sb-modal-totals .sb-brow{font-size:15px;margin:0 0 9px;} .sb-portal .sb-modal-actions{flex:none;display:flex;flex-direction:column;gap:9px;margin-top:14px;} .sb-portal .sb-modal-confirm{ background:var(--ink);color:#fff;border:none;border-radius:10px; padding:15px 18px;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer; } .sb-portal .sb-modal-confirm:hover{background:#000;} .sb-portal .sb-modal-confirm:disabled{background:#d6d6d6;cursor:progress;} .sb-portal .sb-modal-cancel{ background:none;border:none;color:var(--ink-soft);font:inherit;font-size:14.5px; font-weight:600;padding:10px;cursor:pointer;border-radius:8px; } .sb-portal .sb-modal-cancel:hover{background:#f4f4f3;color:var(--ink);} @media (min-width:640px){ .sb-portal .sb-modal{align-items:center;} .sb-portal .sb-modal-card{border-radius:16px;max-height:82vh;} } /* ============================================================ Toast + back to top ============================================================ */ .sb-portal .sb-toast{ position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(12px); background:var(--ink);color:#fff;border-radius:8px; padding:14px 20px;font-size:14px;font-weight:500; box-shadow:0 10px 34px rgba(0,0,0,.28); opacity:0;pointer-events:none;transition:.22s ease;z-index:9070;max-width:90vw; } .sb-portal .sb-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} .sb-portal .sb-toast b{color:var(--yellow);} .sb-portal .sb-toast a{color:#fff;text-decoration:underline;text-underline-offset:2px;margin-left:10px;font-weight:700;} .sb-portal .sb-t-sw{ display:inline-block;width:26px;height:18px;border-radius:3px;vertical-align:-4px; margin-right:9px;background-size:cover;background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); } @media (min-width:900px){ .sb-portal .sb-toast{bottom:24px;} } .sb-portal .sb-totop{ position:fixed;right:20px;bottom:24px;z-index:9045; width:46px;height:46px;border-radius:50%; background:#fff;border:1px solid var(--line); box-shadow:0 5px 16px rgba(0,0,0,.16); cursor:pointer;display:flex;align-items:center;justify-content:center; color:var(--ink); opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .2s ease,transform .2s ease; } .sb-portal .sb-totop svg{width:20px;height:20px;display:block;} .sb-portal .sb-totop.is-show{opacity:1;transform:translateY(0);pointer-events:auto;} @media (max-width:899px){ .sb-portal .sb-totop{bottom:calc(140px + env(safe-area-inset-bottom));right:16px;} } /* ============================================================ Focus rings ============================================================ */ .castico-sb .sb-btn-sm:focus-visible, .castico-sb .sb-add:focus-visible, .castico-sb .sb-li-remove:focus-visible, .castico-sb .sb-pro:focus-visible, .castico-sb .sb-promo-sum:focus-visible, .castico-sb .sb-promo-body a:focus-visible, .sb-portal .sb-add:focus-visible, .sb-portal .sb-bar-toggle:focus-visible, .sb-portal .sb-li-remove:focus-visible, .sb-portal .sb-modal-x:focus-visible, .sb-portal .sb-modal-confirm:focus-visible, .sb-portal .sb-modal-cancel:focus-visible, .sb-portal .sb-totop:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px;} /* ============================================================ Responsive ============================================================ */ @media (max-width:600px){ .result-header { flex-direction: column; align-items: flex-start; padding-bottom: 16px; margin-bottom: 20px; gap: 12px; } .result-title-block { gap: 10px; } .result-title { font-size: 18px; } .back-btn { align-self: stretch; justify-content: center; padding: 12px 18px; } .castico-sb .sb-h1{line-height:1.03;margin-bottom:6px;} .castico-sb .sb-h2{margin-bottom:2px;} .castico-sb .sb-sub{display:none;} /* "Tap any color…" is obvious on touch */ .castico-sb .sb-lead{font-size:15.5px;line-height:1.5;margin-top:7px;} .castico-sb .sb-note{font-size:12.5px;margin-top:11px;} .castico-sb .sb-toolbar{margin:6px 0 8px;} .castico-sb .sb-pricing{padding-bottom:12px;margin-bottom:12px;} .castico-sb .sb-tiers{gap:6px 8px;margin-bottom:9px;} .castico-sb .sb-ptier{padding:4px 10px;font-size:12px;} .castico-sb .sb-ptier b{font-size:13.5px;} .castico-sb .sb-bundle{gap:6px 9px;font-size:13.5px;} .castico-sb .sb-ship-inc{flex-basis:100%;} /* shipping on its own line */ .castico-sb .sb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 9px;} .castico-sb .sb-chip-meta{display:block;padding:5px 1px 0;min-height:58px;} .castico-sb .sb-chip-name{display:block;font-size:13.5px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;letter-spacing:0;} .castico-sb .sb-chip-finish{display:block;font-size:13px;margin-top:1px;text-align:left;line-height:1.2;} .castico-sb .sb-promo{padding:12px 14px;border-radius:10px;} .castico-sb .sb-promo-ic{width:32px;height:32px;} .castico-sb .sb-promo-ic svg{width:17px;height:17px;} .castico-sb .sb-promo-lead{font-size:14.5px;} .castico-sb .sb-promo-body{padding-left:0;margin-top:9px;} .castico-sb .sb-summary{padding:20px 16px;} .castico-sb .sb-li{font-size:15px;} .castico-sb .sb-btn-sm{padding:8px 18px;} .castico-sb .sb-count{margin-left:auto;width:auto;font-size:14px;} .sb-portal .sb-bar-in{padding:9px 14px;gap:7px 12px;} .sb-portal .sb-bar-thumbs{padding:8px 14px 0;gap:5px;} .sb-portal .sb-bar-thumb{width:34px;height:22px;} .sb-portal .sb-bar-info{flex:1 1 auto;font-size:15px;} .sb-portal .sb-bar-total{margin-left:auto;font-size:17px;} .sb-portal .sb-bar-cta{width:100%;margin-left:0;} .sb-portal .sb-add{min-width:0;flex:1;padding:13px 18px;} .sb-portal .sb-toast{bottom:130px;font-size:13.5px;padding:12px 16px;} } @media (max-width:389px){ .castico-sb .sb-chip-meta{min-height:54px;} .castico-sb .sb-chip-name{font-size:12.5px;} .castico-sb .sb-chip-finish{font-size:11.5px;} .castico-sb .sb-grid{gap:6px 7px;} } @media (max-width:360px){ .castico-sb .sb-choose-bar .sb-toolbar{width:100%;flex-wrap:wrap;} .castico-sb .sb-count{flex-basis:100%;margin-left:0;margin-top:2px;} .sb-portal .sb-bar-info{flex-basis:100%;margin-bottom:2px;} .sb-portal .sb-bar-total{margin-left:0;} } /* ============================================================ VISTA DE PARED COMPLETA Una lupa en cada chip abre la foto del color ya instalado. Una muestra de cinco pulgadas no puede contar como corre el veteado a lo largo de una pared, y eso es justo lo que el comprador esta intentando imaginar. ============================================================ */ /* Proporcion del marco. Los renders del kit son 840x1000 verticales: --sb-wall-ar es la relacion y --sb-wall-hw el alto dividido entre el ancho. Si se vuelve a fotografiar con otro encuadre, se cambian las dos. */ .castico-sb, .sb-portal{--sb-wall-ar:21 / 25;--sb-wall-hw:1.1905} .sb-chip-cell{position:relative;min-width:0} /* El chip ya no es el hijo directo de la rejilla, asi que hay que decirle que llene la celda: un