/* --- Licensed webfont ------------------------------------------------------ ONE face across the whole page: GT Eesti Display. Body, headings, the display line inside a heading, everything. GT Ultra Fine has been removed. It is a Grilli Type commercial face and cannot be fetched here, so this block points at a relative fonts/ folder. DROP THE THREE .woff2 FILES NEXT TO THIS HTML IN A fonts/ FOLDER and the real type renders. Nothing on either page uses a weight below 400, so Light is not needed and is not declared. Until the files are in place the Jost fallback applies, which is close in shape but NOT metrically identical, so do not sign off line breaks or heading sizes against it. */ @font-face{font-family:'GT Eesti Display';src:url('fonts/GTEestiDisplay-Regular.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'GT Eesti Display';src:url('fonts/GTEestiDisplay-Medium.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'GT Eesti Display';src:url('fonts/GTEestiDisplay-Bold.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} /* ========================================================================== DC-02 Chesterfield Sofas category page, redesign mockup Scope classes: .dc-scope (shared) + .dc-cat (this page) Every selector is prefixed. In the Blade build, GENERATE this prefix in the asset pipeline and fail the build on an unscoped selector. Do not hand write it. ========================================================================== */ html,body{ overflow: unset !important; } .dc-scope{ /* Palette. Values carried from the DC-01 sign-off, teal confirmed live as msapplication-TileColor. --dc-sale and --dc-star are the two I am least sure of, see QA. */ --dc-teal:#21565f; --dc-teal-d:#163d44; --dc-teal-l:#2f6d78; --dc-teal-05:rgba(33,86,95,.05); --dc-teal-12:rgba(33,86,95,.12); --dc-orange:#e1834f; --dc-orange-d:#c86a37; --dc-orange-08:rgba(225,131,79,.08); --dc-ink:#2c3538; --dc-mut:#000000; --dc-line:#e2ded7; --dc-cream:#f7f4f0; --dc-white:#fff; /* The "You save X" badge in the PDP price row, and nothing else. Signed off against the reference page, which runs a warm vermilion rather than the brick red this used to hold while it was unused. */ --dc-sale:#e2614a; --dc-star:#2f7d5e; --dc-sans:'GT Eesti Display','Eesti Display','Jost','Poppins','Helvetica Neue',Arial,sans-serif; --dc-wrap:1400px; --dc-gut:24px; --dc-rail:268px; /* Must clear whatever the live theme pins to the top. MEASURE IT, do not trust this number, and check no ancestor carries overflow:hidden. */ --dc-rail-top:124px; --dc-sec:80px; --dc-r:4px; } .grid-container.mb-global { max-width: 100% !important; padding: 0 !important; margin-bottom: 0 !important; } /* --- Defensive reset ------------------------------------------------------ Scoping stops our CSS leaking out. It does nothing to stop the theme leaking in on any property we never declare. Two properties earn !important and only two: text-transform and text-align on headings. Both destroy the page. */ .dc-scope,.dc-scope *,.dc-scope *::before,.dc-scope *::after{box-sizing:border-box} .dc-scope{ margin:0;color:var(--dc-ink);background:var(--dc-white); font-family:var(--dc-sans);font-size:16px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;text-align:left; } .dc-scope h1,.dc-scope h2,.dc-scope h3,.dc-scope h4,.dc-scope h5,.dc-scope h6{ margin:0;padding:0;border:0;font-family:var(--dc-sans);font-weight:600; line-height:1.08;color:inherit;text-transform:none !important; } .dc-scope p,.dc-scope ul,.dc-scope ol,.dc-scope li,.dc-scope figure,.dc-scope dl,.dc-scope dd{ margin:0;padding:0;border:0;text-indent:0;list-style:none; } .dc-scope div,.dc-scope section,.dc-scope article,.dc-scope aside,.dc-scope nav, .dc-scope header,.dc-scope footer,.dc-scope form,.dc-scope fieldset{border:0;background:none} .dc-scope a{color:inherit;text-decoration:none;background:none} .dc-scope img,.dc-scope svg{display:block;max-width:100%;height:auto;border:0} .dc-scope button,.dc-scope input,.dc-scope select,.dc-scope textarea{ font:inherit;color:inherit;margin:0;border-radius:0;-webkit-appearance:none;appearance:none; } .dc-scope button{background:none;border:0;cursor:pointer;text-transform:none} .dc-scope table{border-collapse:collapse;width:100%} .dc-scope th,.dc-scope td{text-align:left;padding:0;border:0;vertical-align:top} .dc-scope details,.dc-scope details *{text-transform:none !important} .dc-scope summary{list-style:none;cursor:pointer} .dc-scope summary::-webkit-details-marker{display:none} .dc-scope hr{border:0;height:1px;background:var(--dc-line);margin:0;} .divider { max-width: 1400px; margin: 0 auto; padding: 0 24px; } .dc-scope :focus-visible{outline:2px solid var(--dc-orange);outline-offset:3px} /* --- Layout --------------------------------------------------------------- */ .dc-scope .dc-wrap{max-width:var(--dc-wrap);margin:0 auto;padding:0 var(--dc-gut);width:100%} .dc-scope .dc-wrap--n{max-width:1080px} .dc-scope .dc-sec{padding:var(--dc-sec) 0} .dc-scope .dc-sec--tight{padding:calc(var(--dc-sec) * .62) 0} .dc-scope .dc-sec--cream{background:var(--dc-cream)} .dc-scope .dc-sec--teal{background:var(--dc-teal);color:#fff} .dc-scope .dc-sec--teal .dc-eyebrow{color:var(--dc-orange)} .dc-scope .dc-sec--teal .dc-lead,.dc-scope .dc-sec--teal .dc-body{color:rgba(255,255,255,.82)} /* --- Type ----------------------------------------------------------------- */ /* The brand signature: a small tracked sans line stacked over a large fine serif line, both uppercase. Every section heading uses it. */ .dc-scope .dc-eyebrow{ display:block;font-family:var(--dc-sans);font-size:16px;font-weight:600; text-transform:uppercase;color:var(--dc-orange);margin:0 0 14px; } .dc-scope .dc-h{font-family:var(--dc-sans);font-weight:600;color: #21565f;} .dc-sec--teal h2 { color: white !important; } .dc-scope .dc-h span{display:block} .dc-scope .dc-h .dc-h__a, span.dc-h__a{ font-family:var(--dc-sans);font-weight:600;text-transform:uppercase; font-size:16px;line-height:1;letter-spacing:.8px; } .dc-scope .dc-h .dc-h__b{ font-family:var(--dc-sans);font-weight:600;text-transform:uppercase; font-size:clamp(28px,3.8vw,48px);line-height:1; } .dc-scope .dc-h--sm .dc-h__a { font-size: clamp(28px, 3.8vw, 48px); font-family: 'GT Eesti Display'; font-weight: 600; }.dc-scope .dc-h--sm .dc-h__b{ font-family: 'GT Ultra Fine'; } .dc-band h2 span { font-size: 40px !important; } .dc-scope .dc-h--c{text-align:center} .dc-scope .dc-h--c .dc-h__a,.dc-scope .dc-h--c .dc-h__b{text-align:center !important} .dc-scope .dc-lead{font-size:17px;line-height:1.7;color:var(--dc-mut);max-width:62ch} .dc-scope .dc-body{font-size:15.5px;line-height:1.3;color:var(--dc-mut)} .dc-scope .dc-body + .dc-body{margin-top:14px} .dc-scope .dc-body a{color:var(--dc-teal);text-decoration:underline;text-underline-offset:3px} .dc-scope .dc-sec--teal .dc-body a{color:var(--dc-orange)} .dc-scope .dc-confirm{ display:inline-block;background:#fff3cd;color:#7a5c00;border:1px dashed #c9a227; font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:3px; } /* --- Buttons -------------------------------------------------------------- */ .dc-scope .dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--dc-sans); font-size: 15px; font-weight: 600; text-transform: uppercase; padding: 15px 30px; border-radius: 0; transition: background .18s, color .18s, border-color .18s; text-align: center; border: 1px solid transparent; line-height: 1; letter-spacing: .8px; } .dc-scope .dc-btn--pri{background:var(--dc-orange);color:#fff !important} .dc-scope .dc-btn--pri:hover{background:var(--dc-orange-d)} .dc-scope .dc-btn--teal{background:var(--dc-teal);color:#fff !important} .dc-scope .dc-btn--teal:hover{background:var(--dc-teal-d)} .dc-scope .dc-btn--out{border-color:var(--dc-teal);color:var(--dc-teal) !important;background:transparent} .dc-scope .dc-btn--out:hover{background:var(--dc-teal);color:#fff !important} .dc-scope .dc-btn--ghost{border-color:rgba(255,255,255,.45);color:#fff !important} .dc-scope .dc-btn--ghost:hover{background:#fff;color:var(--dc-teal) !important;border-color:#fff} .dc-scope .dc-btn--sm { padding: 14px 20px; font-size: 15px; border-radius: 0 !important; letter-spacing: 0.8px; margin-top: 6px; }.dc-scope .dc-btn--wide{width:100%} /* --- Site chrome (indicative only, the live theme owns this) -------------- */ .dc-scope .dc-ann{background:var(--dc-teal-d);color:#fff} .dc-scope .dc-ann__in{display:flex;align-items:center;justify-content:center;gap:44px; padding-block:9px;font-size:11.5px;text-transform:uppercase;font-weight:500} .dc-scope .dc-ann__in span{opacity:.9} .dc-scope .dc-head{background:#fff;border-bottom:1px solid var(--dc-line)} .dc-scope .dc-head__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px} .dc-scope .dc-nav{display:flex;gap:26px;font-size:11.5px;font-weight:600;text-transform:uppercase} .dc-scope .dc-nav a:hover{color:var(--dc-orange)} .dc-scope .dc-logo{font-family:var(--dc-sans);font-size:21px;font-weight:600;text-transform:uppercase;color:var(--dc-teal);white-space:nowrap} .dc-scope .dc-logo small{display:block;font-family:var(--dc-sans);font-size:8.5px;color:var(--dc-mut);margin-top:3px;text-align:center} .dc-scope .dc-usp{background:var(--dc-cream);border-bottom:1px solid var(--dc-line)} .dc-scope .dc-usp__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:13px} .dc-scope .dc-usp__i{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600; text-transform:uppercase;color:var(--dc-teal)} .dc-scope .dc-usp__i svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--dc-orange);fill:none;stroke-width:1.6} /* --- Hero ----------------------------------------------------------------- */ /* Replaces the current short banner. Full-bleed editorial image, the two-tone heading, and the three "choose from" numbers promoted out of body copy into a stat rail that overlaps the banner edge. */ .dc-scope .dc-hero{position:relative;background:var(--dc-teal-d);color:#fff;overflow:hidden} .dc-scope .dc-hero__bg{position:absolute;inset:0} .dc-scope .dc-hero__bg::after{content:"";position:absolute;inset:0; background:transparent;} .dc-scope .dc-hero__bg img{width:100%;height:100%;object-fit:cover} .dc-scope .dc-hero__in{position:relative;z-index:2;padding-block:70px} .dc-scope .dc-hero__t{max-width:720px} .dc-scope .dc-crumb{font-size:11.5px;text-transform:uppercase; color:rgba(255,255,255,.6);margin:0 0 26px} .dc-scope .dc-crumb a:hover{color:#fff} .dc-scope .dc-crumb span{margin:0 8px;opacity:.5} .dc-scope .dc-hero .dc-h{color:#fff} .dc-scope .dc-hero__lead{margin-top:22px;font-size:17px;line-height:1.3;color:rgba(255,255,255,.82);max-width:65ch !important} .dc-scope .dc-hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .dc-scope .dc-stats{position:relative;z-index:3;margin-top:-58px} .dc-scope .dc-stats__in{display:flex;background:#fff;border:1px solid var(--dc-line); box-shadow:0 24px 50px -34px rgba(22,61,68,.5)} .dc-scope .dc-stat{flex:1 1 0;padding:24px 28px;border-right:1px solid var(--dc-line);min-width:0} .dc-scope .dc-stat:last-child{border-right:0} .dc-scope .dc-stat b{display:block;font-family:var(--dc-sans);font-size:34px;font-weight:600;line-height:1;color:var(--dc-teal)} .dc-scope .dc-stat span{display:block;margin-top:7px;font-size:11.5px;font-weight:600; text-transform:uppercase;color:var(--dc-mut)} /* --- Grid toolbar --------------------------------------------------------- */ .dc-scope .dc-tools{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--dc-line);margin-bottom:26px} .dc-scope .dc-count{font-size:13.5px;color:var(--dc-mut)} .dc-scope .dc-count b{color:var(--dc-ink);font-weight:600} .dc-scope .dc-tools__r{display:flex;align-items:center;gap:10px} .dc-scope .dc-sel{position:relative} .dc-scope .dc-sel select { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0px 22px !important; border: 1px solid var(--dc-line); background: #fff; font-family: var(--dc-sans); font-size: 13.5px; font-weight: 600; color: var(--dc-teal); white-space: nowrap; cursor: pointer; text-transform: uppercase !important; letter-spacing: .8px; border-radius: 0 !important; min-width: 10px !important; height: 44px; } .dc-scope .dc-sel select:hover { border-color: var(--dc-teal); } .dc-scope .dc-sel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px; border-right:1.5px solid var(--dc-mut);border-bottom:1.5px solid var(--dc-mut); transform:translateY(-70%) rotate(45deg);pointer-events:none} .dc-scope .dc-filtbtn{display:none} /* --- Facet rail ----------------------------------------------------------- */ /* Replaces the two Search & Filter Pro dropdowns with a real multi-group rail. OR within a group, AND across groups, same behaviour as SSW-12. */ .dc-scope .dc-shop{display:flex;align-items:flex-start;gap:40px} .dc-scope .dc-rail{flex:0 0 var(--dc-rail);width:var(--dc-rail);position:sticky;top:var(--dc-rail-top)} .dc-scope .dc-rail__hd{display:flex;align-items:baseline;justify-content:space-between; padding-bottom:14px;border-bottom:2px solid var(--dc-teal);margin-bottom:4px} .dc-scope .dc-rail__hd b { font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--dc-teal); letter-spacing: .8px; }.dc-scope .dc-clear{font-size:12px;color:var(--dc-mut);text-decoration:underline;text-underline-offset:3px} .dc-scope .dc-clear:hover{color:var(--dc-orange)} .dc-scope .dc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 4px} .dc-scope .dc-chip{display:inline-flex;align-items:center;gap:7px;background:var(--dc-teal-05); border:1px solid var(--dc-teal-12);color:var(--dc-teal);font-size:12px;font-weight:500; padding:5px 10px;border-radius:20px} .dc-scope .dc-chip button{color:var(--dc-teal);opacity:.6;font-size:14px;line-height:1} .dc-scope .dc-chip button:hover{opacity:1} .dc-scope .dc-fg{border-bottom:1px solid var(--dc-line)} .dc-scope .dc-fg__s { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 0; font-size: 16px; font-weight: 600; text-transform: uppercase !important; color: var(--dc-ink); letter-spacing: .8px; } font-size:12.5px;font-weight:600;text-transform:uppercase;color:var(--dc-ink)} .dc-scope .dc-fg__s i{width:9px;height:9px;border-right:1.5px solid var(--dc-mut); border-bottom:1.5px solid var(--dc-mut);transform:rotate(45deg);transition:transform .2s;flex:0 0 auto;margin-bottom:3px} .dc-scope .dc-fg[open] .dc-fg__s i{transform:rotate(-135deg);margin-bottom:-3px} .dc-scope .dc-fg__b{padding:0 0 20px} .dc-scope .dc-opt{display:flex;align-items:flex-start;gap:11px;padding:6px 0;cursor:pointer;font-size:16px} .dc-scope .dc-opt input{flex:0 0 17px;width:17px;height:17px;margin-top:3px;border:1.5px solid var(--dc-line); background:#fff;border-radius:3px;cursor:pointer;position:relative} .dc-scope .dc-opt input:checked{background:var(--dc-teal);border-color:var(--dc-teal)} .dc-scope .dc-opt input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px; border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)} .dc-scope .dc-opt span{flex:1 1 auto;min-width:0} .dc-scope .dc-opt em{font-style:normal;color:var(--dc-mut);font-size:12.5px;margin-left:4px} .dc-scope .dc-opt small{display:block;color:var(--dc-mut);font-size:12.5px;line-height:1.45;margin-top:1px} .dc-scope .dc-sw{display:flex;flex-wrap:wrap;gap:9px;padding-top:4px} .dc-scope .dc-sw a{width:34px;height:34px;border-radius:50%;border:1px solid var(--dc-line); box-shadow:inset 0 0 0 2px #fff;transition:transform .15s,box-shadow .15s;display:block} .dc-scope .dc-sw a:hover{transform:scale(1.09);box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px var(--dc-teal)} .dc-scope .dc-rail__cta{margin-top:24px;background:var(--dc-cream);border:1px solid var(--dc-line);padding:22px 20px} .dc-scope .dc-rail__cta b{display:block;font-family:var(--dc-sans);font-size:17px;font-weight:600;line-height:1.3;color:var(--dc-teal)} .dc-scope .dc-rail__cta p{margin:8px 0 15px;font-size:13.5px;color:var(--dc-mut);line-height:1.6} .dc-scope .dc-main{flex:1 1 auto;min-width:0} /* --- Product grid --------------------------------------------------------- */ /* Flex, not grid. The BASIS decides where a line breaks. No auto-fit, no minmax, and flex-grow is 0 so a final lone card sits at column width instead of stretching across the row. Column count steps by class, not by auto-fit. */ .dc-scope .dc-grid{display:flex;flex-wrap:wrap;gap:26px 24px;align-items:stretch} .dc-scope .dc-grid--3 > *{flex:0 0 calc((100% - 48px) / 3 - .5px);max-width:calc((100% - 48px) / 3)} .dc-scope .dc-grid--2 > *{flex:0 0 calc((100% - 24px) / 2 - .5px);max-width:calc((100% - 24px) / 2)} .dc-scope .dc-grid--4 > *{flex:0 0 calc((100% - 72px) / 4 - .5px);max-width:calc((100% - 72px) / 4)} .dc-scope .dc-card { display: flex; flex-direction: column; background: #F7F4F0; border: 1px solid var(--dc-line); transition: border-color .2s, box-shadow .2s; position: relative; } transition:border-color .2s,box-shadow .2s;position:relative} .dc-scope .dc-card:hover{border-color:var(--dc-teal-12);box-shadow:0 22px 44px -32px rgba(22,61,68,.45)} .dc-scope .dc-card__m{position:relative;aspect-ratio:1.7;background:var(--dc-cream);overflow:hidden} .dc-scope .dc-card__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .5s ease} .dc-scope .dc-card:hover .dc-card__m img{transform:scale(1.035)} .dc-scope .dc-badge{position:absolute;top:12px;left:12px;z-index:2;background:#e1834f;color:#fff; font-size:14px;font-weight:600;text-transform:uppercase;padding:6px 10px;border-radius:2px} .dc-scope .dc-badge--q{background:var(--dc-teal);left:auto;right:12px} .dc-scope .dc-card__b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1 1 auto;gap:0} .dc-scope .dc-card__t{font-family:var(--dc-sans);font-size:18px;font-weight:600;line-height:1.25;color:var(--dc-ink);} .dc-scope .dc-card__t span{display:block;font-family:var(--dc-sans);font-size:10.5px;font-weight:500; text-transform:uppercase;color:var(--dc-mut);margin-top:5px} .dc-scope .dc-card:hover .dc-card__t{color:var(--dc-teal)} .dc-scope .dc-card__d{margin-top:7px;font-size:13.5px;line-height:1.55;color:var(--dc-mut); min-height:calc(1.55em * 2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dc-scope .dc-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;min-height:22px} .dc-scope .dc-tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: white; background: rgb(225 131 78); padding: 4px 9px; border-radius: 2px; letter-spacing: 1px; } color:var(--dc-teal);background:var(--dc-teal-05);padding:4px 9px;border-radius:2px} .dc-scope .dc-card__sw{display:flex;gap:6px;margin-bottom:15px;align-items:center} .dc-scope .dc-card__sw i{width:20px;height:20px;border-radius:50%;border:1px solid var(--dc-line);display:block} .dc-scope .dc-card__sw em { font-style: normal; font-size: 11px; color: black; letter-spacing: .8px; text-transform: uppercase; }.dc-scope .dc-card__p{margin-top:auto;padding-top:17px} .dc-scope .dc-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .dc-scope .dc-price b{font-size:21px;font-weight:600;color:var(--dc-ink);} .dc-scope .dc-price b i { font-style: normal; font-size: 12px; font-weight: 500; color: black; margin-right: 3px; text-transform: uppercase; letter-spacing: .5px; }.dc-scope .dc-price s{font-size:14px;color:var(--dc-mut);text-decoration-thickness:1px} .dc-scope .dc-price em{font-style:normal;font-size:11px;font-weight:600; text-transform:uppercase;color:#e1834f} /* The saving, as a filled pill, in the PDP price row ONLY. Scoped to .dc-pbox on purpose. The catalogue card reuses .dc-price, and a solid block of vermilion inside a 240px card is a badge shouting over the product it is attached to. The card keeps the quiet orange text above. */ .dc-scope .dc-pbox .dc-price em{ /* The two figures share a baseline, which is what sits the struck price level with the one replacing it. The badge is a block of colour rather than a number, so it centres on the row: left on the text baseline it hangs below a 30px price and reads as a footnote to it. */ align-self:center; font-size:12px;font-weight:700;letter-spacing:1px;line-height:1; color:var(--dc-white);background:#e1834e !important; padding:8px 12px;border-radius:3px;white-space:nowrap} .dc-scope .dc-fin{margin-top:4px;font-size:12.5px;color:var(--dc-mut)} .dc-scope .dc-card__a{margin-top:16px;display:flex;gap:8px} .dc-scope .dc-card__a .dc-btn{flex:1 1 auto} .dc-scope .dc-icobtn{flex:0 0 46px;border:1px solid var(--dc-line);border-radius:var(--dc-r); display:flex;align-items:center;justify-content:center;transition:border-color .18s,background .18s} .dc-scope .dc-icobtn svg{width:18px;height:18px;stroke:var(--dc-teal);fill:none;stroke-width:1.5} .dc-scope .dc-icobtn:hover{border-color:var(--dc-teal);background:var(--dc-teal-05)} .dc-scope .dc-cardlink{position:absolute;inset:0;z-index:1} /* The three "choose from" icon rows currently repeat on all 18 cards. They are the same three lines every time, so they move out of the card and up to the grid as one statement. */ .dc-scope .dc-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;background:var(--dc-cream); border:1px solid var(--dc-line);padding:15px 20px;margin-bottom:26px} .dc-scope .dc-note__i{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dc-ink)} .dc-scope .dc-note__i svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--dc-teal);fill:none;stroke-width:1.5} .dc-scope .dc-note__i b{font-weight:600} /* --- Pagination ----------------------------------------------------------- */ .dc-scope .dc-page{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:52px; padding-top:34px;border-top:1px solid var(--dc-line)} .dc-scope .dc-page a,.dc-scope .dc-page span{min-width:44px;height:44px;display:inline-flex; align-items:center;justify-content:center;border:1px solid var(--dc-line);font-size:14px; font-weight:500;border-radius:var(--dc-r);padding:0 14px} .dc-scope .dc-page .dc-on{background:var(--dc-teal);border-color:var(--dc-teal);color:#fff} .dc-scope .dc-page a:hover{border-color:var(--dc-teal);color:var(--dc-teal)} /* --- Split, guide cards, table, materials --------------------------------- */ .dc-scope .dc-split{display:flex;align-items:center;gap:64px} .dc-scope .dc-split__c{flex:1 1 0;min-width:0} .dc-scope .dc-split__m{flex:1 1 0;min-width:0;aspect-ratio:5/4;background:var(--dc-cream);position:relative;overflow:hidden} .dc-scope .dc-split__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dc-scope .dc-split--rev{flex-direction:row-reverse} .dc-scope .dc-ul{margin-top:20px;display:flex;flex-direction:column;gap:11px} .dc-scope .dc-ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--dc-mut)} .dc-scope .dc-ul li b{color:var(--dc-ink);font-weight:600} .dc-scope .dc-ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px; background:var(--dc-orange);border-radius:50%} .dc-scope .dc-guide{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dc-line)} .dc-scope .dc-guide__m{aspect-ratio:16/10;background:var(--dc-cream);position:relative;overflow:hidden} .dc-scope .dc-guide__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dc-scope .dc-guide__b{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1 1 auto} .dc-scope .dc-guide__b h3{font-family:var(--dc-sans);font-size:21px;font-weight:600;line-height:1.22;color:var(--dc-teal)} .dc-scope .dc-guide__b p{margin-top:11px;font-size:14.5px;line-height:1.65;color:var(--dc-mut)} .dc-scope .dc-guide__b .dc-link{margin-top:auto;padding-top:18px} .dc-scope .dc-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600; text-transform:uppercase;color:var(--dc-teal)} .dc-scope .dc-link::after{content:"";width:16px;height:1px;background:currentColor;transition:width .2s} .dc-scope .dc-link:hover::after{width:26px} .dc-scope .dc-sec--teal .dc-link{color:var(--dc-orange)} .dc-scope .dc-tbl{border:1px solid var(--dc-line);background:#fff;overflow-x:auto} .dc-scope .dc-tbl th{background:var(--dc-teal);color:#fff;font-size:11.5px;font-weight:600; text-transform:uppercase;padding:15px 18px;white-space:nowrap} .dc-scope .dc-tbl td{padding:15px 18px;font-size:14.5px;border-top:1px solid var(--dc-line);color:var(--dc-mut)} .dc-scope .dc-tbl td:first-child{color:var(--dc-ink);font-weight:600} .dc-scope .dc-tbl tbody tr:nth-child(even) td{background:var(--dc-cream)} .dc-scope .dc-mat{display:flex;flex-wrap:wrap;gap:14px} .dc-scope .dc-mat a{flex:0 0 calc((100% - 70px) / 6 - .5px);max-width:calc((100% - 70px) / 6);text-align:center} .dc-scope .dc-mat i{display:block;aspect-ratio:1;border-radius:50%;border:1px solid var(--dc-line); transition:transform .18s,box-shadow .18s} .dc-scope .dc-mat a:hover i{transform:scale(1.05);box-shadow:0 0 0 1.5px var(--dc-teal)} .dc-scope .dc-mat b{display:block;margin-top:11px;font-size:12px;font-weight:600;color:var(--dc-ink)} .dc-scope .dc-mat small{display:block;font-size:11.5px;color:var(--dc-mut)} /* --- Steps, why, gallery -------------------------------------------------- */ .dc-scope .dc-steps{display:flex;flex-wrap:wrap;gap:24px;counter-reset:s} .dc-scope .dc-steps > *{flex:0 0 calc((100% - 72px) / 4 - .5px);max-width:calc((100% - 72px) / 4)} .dc-scope .dc-step{position:relative;padding-top:15px;border-top:2px solid var(--dc-teal-12)} .dc-scope .dc-step__n{ width: 60px; height: 60px; display: block; margin-bottom: 10px; } .dc-scope .dc-sec--teal .dc-step{border-top-color:rgba(255,255,255,.2)} .single-product .dc-scope .dc-sec--teal .dc-step__n { background: transparent !important; height: auto !important; width: auto !important; font-family: 'GT Ultra Fine' !important; font-size: 20px !important; }.dc-scope .dc-step h3{font-size:15px;font-weight:600;text-transform:uppercase;color:inherit;letter-spacing:0.4px;} .dc-scope .dc-step p{margin-top:10px;font-size:14px;line-height:1.3;color:var(--dc-mut)} .dc-scope .dc-sec--teal .dc-step p{color:rgba(255,255,255,.75)} .dc-scope .dc-why{display:flex;flex-wrap:wrap;gap:34px 24px} .dc-scope .dc-why > *{flex:0 0 calc((100% - 72px) / 4 - .5px);max-width:calc((100% - 72px) / 4)} .dc-scope .dc-why__i{width:60px;height:60px;stroke:var(--dc-orange);fill:none;stroke-width:1.3;margin-bottom:18px} .dc-scope .dc-why h3{font-size:15px;font-weight:600;text-transform:uppercase;color:inherit;letter-spacing:0.4px;} .dc-scope .dc-why p{margin-top:11px;font-size:14px;line-height:1.3;color:var(--dc-mut)} .dc-scope .dc-sec--teal .dc-why p{color:rgba(255,255,255,.75)} .dc-scope .dc-gal{display:flex;flex-wrap:wrap;gap:14px} .dc-scope .dc-gal a{position:relative;overflow:hidden;background:var(--dc-cream);display:block} .dc-scope .dc-gal a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s} .dc-scope .dc-gal a:hover img{transform:scale(1.05)} .dc-scope .dc-gal a:nth-child(1){flex:0 0 calc(50% - 7px);aspect-ratio:4/3} .dc-scope .dc-gal a:nth-child(2),.dc-scope .dc-gal a:nth-child(3){flex:0 0 calc(25% - 10.5px);aspect-ratio:4/3} .dc-scope .dc-gal a:nth-child(4),.dc-scope .dc-gal a:nth-child(5), .dc-scope .dc-gal a:nth-child(6),.dc-scope .dc-gal a:nth-child(7){flex:0 0 calc(25% - 10.5px);aspect-ratio:1} /* --- FAQ ------------------------------------------------------------------ */ .dc-scope .dc-faq{border-top:1px solid var(--dc-line)} .dc-scope .dc-faq details{border-bottom:1px solid var(--dc-line)} .dc-scope .dc-faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px; padding:22px 0;font-size:20px;font-weight:600;color:var(--dc-ink);line-height:1.4} .dc-scope .dc-faq summary:hover{color:var(--dc-teal)} .dc-scope .dc-faq summary i{flex:0 0 14px;width:14px;height:14px;position:relative;margin-top:6px} .dc-scope .dc-faq summary i::before,.dc-scope .dc-faq summary i::after{content:"";position:absolute; background:var(--dc-teal);transition:transform .2s} .dc-scope .dc-faq summary i::before{left:0;top:6px;width:14px;height:1.6px} .dc-scope .dc-faq summary i::after{left:6px;top:0;width:1.6px;height:14px} .dc-scope .dc-faq details[open] summary i::after{transform:scaleY(0)} .dc-scope .dc-faq details p{padding:0 40px 24px 0;font-size:15px;line-height:1.3;color:var(--dc-mut);max-width:78ch} .dc-scope .dc-faq details p + p{padding-top:0;margin-top:-10px;padding-bottom:24px} /* --- Reviews, framing only ------------------------------------------------ */ /* NO quote and NO author is written here by design. Fabricated reviews on a live UK business are unlawful under the DMCC Act 2024 and the liability lands on the client. Slots stay empty until real approved reviews arrive. */ .dc-scope .dc-revs{display:flex;flex-wrap:wrap;gap:24px} .dc-scope .dc-revs > *{flex:0 0 calc((100% - 48px) / 3 - .5px);max-width:calc((100% - 48px) / 3)} .dc-scope .dc-rev{background:#fff;border:1px solid var(--dc-line);padding:28px 26px;display:flex; flex-direction:column;min-height:210px} .dc-scope .dc-rev__s{display:flex;gap:3px;margin-bottom:16px} .dc-scope .dc-rev__s i{width:15px;height:15px;background:var(--dc-star);display:block} .dc-scope .dc-rev__q{flex:1 1 auto;font-family:var(--dc-sans);font-size:15px;font-weight:400;line-height:1.68;color:var(--dc-mut)} .dc-scope .dc-rev__a{margin-top:20px;padding-top:16px;border-top:1px solid var(--dc-line); font-size:12px;font-weight:600;text-transform:uppercase;color:var(--dc-mut)} .dc-scope .dc-slot{background:repeating-linear-gradient(135deg,var(--dc-cream) 0 10px,#fff 10px 20px); border:1px dashed var(--dc-line);color:var(--dc-mut);font-size:12px;padding:8px 10px;font-style:normal} /* --- Related links, CTA bands, footer ------------------------------------- */ .dc-scope .dc-rel{display:flex;flex-wrap:wrap;gap:16px} .dc-scope .dc-rel > *{flex:0 0 calc((100% - 80px) / 6 - .5px);max-width:calc((100% - 80px) / 6)} .dc-scope .dc-rel a{display:block;background:#fff;border:1px solid var(--dc-line);padding:18px 16px; font-size:13px;font-weight:600;color:var(--dc-teal);transition:border-color .18s,background .18s} .dc-scope .dc-rel a:hover{border-color:var(--dc-teal);background:var(--dc-teal-05)} .dc-scope .dc-rel a small{display:block;font-weight:400;color:var(--dc-mut);font-size:12px;margin-top:3px} .dc-scope .dc-band{background:var(--dc-orange);color:#fff} .dc-scope .dc-band__in{display:flex;align-items:center;justify-content:space-between;gap:34px; flex-wrap:wrap;padding-block:46px} .dc-scope .dc-band h2{color:#fff} .dc-scope .dc-band p{margin-top:9px;font-size:15.5px;color:rgba(255,255,255,.88);max-width:52ch} .dc-scope .dc-band .dc-h__a{color:rgba(255,255,255,.75)} .dc-scope .dc-tri{display:flex;flex-wrap:wrap;gap:24px} .dc-scope .dc-tri > *{flex:0 0 calc((100% - 48px) / 3 - .5px);max-width:calc((100% - 48px) / 3)} .dc-scope .dc-tri__c{background:#fff;padding:38px 32px;display:flex;flex-direction:column;align-items:flex-start;min-height:230px} .dc-scope .dc-tri__c h3{font-family:var(--dc-sans);font-size:21px;font-weight:600;line-height:1.28;color:var(--dc-teal);letter-spacing:0.2px;} .dc-scope .dc-tri__c p{margin:11px 0 22px;font-size:14px;line-height:1.6;color:var(--dc-mut)} .dc-scope .dc-tri__c .dc-btn{margin-top:auto} .dc-scope .dc-foot{background:var(--dc-teal-d);color:rgba(255,255,255,.72);padding:60px 0 34px;font-size:13.5px} .dc-scope .dc-foot__in{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;align-items:flex-start} .dc-scope .dc-foot a:hover{color:#fff} .dc-scope .dc-foot__b{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5)} /* --- Mobile facet drawer -------------------------------------------------- */ .dc-scope .dc-scrim{display:none} /* --- Responsive ----------------------------------------------------------- */ /* Column counts step DOWN in whole steps. Three never becomes two, because three items across two columns is 2 + 1, which is the orphan by another route. */ @media (max-width:1180px){ .dc-scope{--dc-rail:236px;--dc-sec:60px} .dc-scope .dc-shop{gap:30px} .dc-scope .dc-grid--3 > *{flex:0 0 calc((100% - 24px) / 2 - .5px);max-width:calc((100% - 24px) / 2)} .dc-scope .dc-mat a{flex:0 0 calc((100% - 42px) / 4 - .5px);max-width:calc((100% - 42px) / 4)} .dc-scope .dc-rel > *{flex:0 0 calc((100% - 48px) / 4 - .5px);max-width:calc((100% - 48px) / 4)} .dc-scope .dc-nav{display:none} } @media (max-width:1024px){ .dc-scope .dc-pdp h1.dc-h--one .dc-h__b { font-size: 22px !important; } .dc-scope .dc-pdp__cfg .dc-pbox .dc-price b, .dc-scope .dc-pdp__cfg .dc-pbox .dc-price b i { font-size: 22px !important; } .dc-band h2 span { font-size: 26px !important; } .grid-container { padding-inline: 20px !important; } .h2, h2 { font-size: 28px !important; } .h4, h4 { font-size: 24px !important; margin-bottom: -10px !important; } section#dc-dims { padding-top: 10px !important; } section#dc-dims .dc-wrap > div { margin-bottom: 25px !important; } .dc-scope .dc-shop{display:block} .dc-scope .dc-rail{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:90vw;background:#fff; z-index:60;padding:24px 22px 40px;overflow-y:auto;transform:translateX(-101%);transition:transform .28s; box-shadow:0 0 60px rgba(0,0,0,.2);flex-basis:auto} .dc-scope .dc-rail.dc-open{transform:none} .dc-scope .dc-scrim{display:block;position:fixed;inset:0;background:rgba(22,61,68,.5);z-index:59; opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s} .dc-scope .dc-scrim.dc-open{opacity:1;visibility:visible} .dc-scope .dc-filtbtn{display:inline-flex} .dc-scope .dc-split{flex-direction:column;gap:34px} .dc-scope .dc-split--rev{flex-direction:column} .dc-scope .dc-split__c,.dc-scope .dc-split__m{width:100%} .dc-scope .dc-steps > *,.dc-scope .dc-why > *{flex:0 0 calc((100% - 24px) / 2 - .5px);max-width:calc((100% - 24px) / 2)} .dc-scope .dc-grid--4 > *{flex:0 0 calc((100% - 24px) / 2 - .5px);max-width:calc((100% - 24px) / 2)} .dc-scope .dc-tri > *,.dc-scope .dc-revs > *{flex:0 0 100%;max-width:100%} .dc-scope .dc-stats__in{flex-wrap:wrap} .dc-scope .dc-stat{flex:1 1 33%;min-width:160px} .dc-scope .dc-usp__in{overflow-x:auto;justify-content:flex-start;gap:26px} .dc-scope .dc-usp__i{white-space:nowrap} .dc-scope .dc-ann__in{gap:22px;overflow-x:auto;justify-content:flex-start;white-space:nowrap} .dc-scope .dc-gal a:nth-child(n){flex:0 0 calc(50% - 7px);aspect-ratio:4/3} } @media (max-width:640px){ .dc-scope{--dc-sec:54px;--dc-gut:18px} .dc-scope .dc-grid--3 > *,.dc-scope .dc-grid--2 > *,.dc-scope .dc-grid--4 > *, .dc-scope .dc-steps > *,.dc-scope .dc-why > *{flex:0 0 100%;max-width:100%} .dc-scope .dc-mat a{flex:0 0 calc((100% - 42px) / 4 - .5px);max-width:calc((100% - 42px) / 4)} .dc-scope .dc-rel > *{flex:0 0 calc((100% - 16px) / 2 - .5px);max-width:calc((100% - 16px) / 2)} .dc-scope .dc-hero__in{padding-block:60px} .dc-scope .dc-stat{padding:18px 20px} .dc-scope .dc-stat b{font-size:30px} .dc-scope .dc-btn{width:100%} .dc-scope .dc-card__a .dc-btn{width:auto} .dc-scope .dc-gal a:nth-child(n){flex:0 0 100%} } @media print{ .dc-scope .dc-rail,.dc-scope .dc-ann,.dc-scope .dc-scrim{display:none} .dc-scope .dc-card{break-inside:avoid} } /* ========================================================================== DC-02 single product, page-specific rules. Scope: .dc-scope .dc-pdp ========================================================================== */ .dc-scope .dc-pdp__top{padding-block:34px var(--dc-sec)} /* The GALLERY is the sticky column now, and the buy column scrolls past it. The hero is capped against the viewport so the whole gallery, thumbs and caption included, always fits inside the sticky box. A sticky element taller than the viewport pins its top and hides its own bottom, which is the usual way this pattern goes wrong. */ .dc-scope .dc-pdp__cols{display:grid;grid-template-columns:minmax(0,1fr) 520px; column-gap:56px;row-gap:0;align-items:start} .dc-scope .dc-pdp__gal{grid-column:1;grid-row:1;position:sticky;top:var(--dc-rail-top)} .dc-scope .dc-pdp__cfg{grid-column:2;grid-row:1;width:100%;position:static} .dc-scope .dc-inc{display:flex;flex-direction:column;gap:16px} .dc-scope .dc-inc > div{padding-left:16px;border-left:2px solid var(--dc-teal-12)} .dc-scope .dc-pdp__desc-a{max-width:66ch} .dc-scope .dc-pdp__desc{margin-top:var(--dc-sec);padding-top:44px;border-top:1px solid var(--dc-line); display:flex;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px;align-items:start} .dc-scope .dc-pdp__desc img { aspect-ratio: 1.5; object-fit: cover; } /* gallery */ .dc-scope .dc-hero-img{position:relative;aspect-ratio:1.25;background:var(--dc-cream);overflow:hidden; border:1px solid var(--dc-line);width:100%;} .dc-scope .dc-hero-img svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5} .dc-scope .dc-hero-img img{position:absolute;inset:0;width:100%;height:100%;background:var(--dc-cream)} .dc-scope .dc-thumbs button img{position:absolute;inset:0;width:100%;height:100%;background:var(--dc-cream);aspect-ratio: 1.3;} .dc-scope .dc-story__m img{position:absolute;inset:0;width:100%;height:100%} .dc-scope .dc-hero-img .dc-badge{top:16px;left:16px} .dc-scope .dc-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .dc-scope .dc-thumbs button{flex:0 0 calc((100% - 50px) / 6 - .5px);aspect-ratio:1;position:relative; border:1px solid var(--dc-line);background:var(--dc-cream);overflow:hidden} .dc-scope .dc-thumbs button svg{position:absolute;inset:0;width:100%;height:100%;opacity:.45} .dc-scope .dc-thumbs button.dc-on{border-color:var(--dc-teal);box-shadow:inset 0 0 0 1px var(--dc-teal)} .dc-scope .dc-galbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px; font-size:12.5px;color:var(--dc-mut)} /* configurator */ .dc-scope .dc-pdp__cfg .dc-crumb{color:var(--dc-mut);margin-bottom:16px} .dc-scope .dc-pdp__cfg .dc-crumb a:hover{color:var(--dc-teal)} .dc-scope .dc-pdp h1{font-family:var(--dc-sans)} .dc-scope .dc-pdp h1 .dc-h__a{font-size:12.5px;color:var(--dc-mut);font-weight:600} .dc-scope .dc-pdp h1 .dc-h__b{font-size:clamp(32px,3.5vw,46px);color:var(--dc-ink);margin-top:5px} .dc-scope .dc-tagline{margin-top:14px;font-size:15.5px;line-height:1.65;color:var(--dc-mut)} .dc-scope .dc-trust{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--dc-mut)} .dc-scope .dc-trust i{width:13px;height:13px;background:var(--dc-star);display:block} .dc-scope .dc-trust a{text-decoration:underline;text-underline-offset:3px} .dc-scope .dc-pbox{border:1px solid var(--dc-line);background:var(--dc-cream);padding:18px 20px;margin-top:22px} .dc-scope .dc-pbox .dc-price b{font-size:30px} .dc-scope .dc-pbox .dc-fin{margin-top:6px;font-size:13px} /* --- Configurator steps, accordions --------------------------------------- NOTE every !important below. The defensive reset carries `details, details * { text-transform:none !important }` because an inherited uppercase from the theme once rendered every FAQ answer in capitals. Turning these steps into
put the step labels, the continue buttons and the inline links inside that reset, so each one that legitimately wants uppercase has to say so at two classes AND with !important. Anything new added inside a step needs adding here too, or it silently renders sentence case. */ .dc-scope .dc-step-b{border:1px solid var(--dc-line);background:#fff;margin-top:12px} .dc-scope .dc-step-b--first{margin-top:26px} .dc-scope .dc-step-b[open]{border-color:var(--dc-teal-12);box-shadow:0 18px 40px -34px rgba(22,61,68,.55)} .dc-scope .dc-step-b__h{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer} .dc-scope .dc-step-b__h:hover b{color:var(--dc-teal)} .dc-scope .dc-step-b__h b{flex:0 0 auto;display:flex;align-items:center;gap:12px; font-size:12.5px;font-weight:600;color:var(--dc-ink); text-transform:uppercase !important} .dc-scope .dc-step-b__h b em{flex:0 0 26px;width:26px;height:26px;border-radius:50%; background:var(--dc-teal);color:#fff;display:inline-flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:600;font-style:normal;} .dc-scope .dc-step-b[open] .dc-step-b__h b em{background:var(--dc-orange)} .dc-scope .dc-step-b__v{flex:1 1 auto;min-width:0;text-align:right;font-size:13px;color:var(--dc-mut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dc-scope .dc-step-b__i{flex:0 0 13px;width:13px;height:13px;position:relative} .dc-scope .dc-step-b__i::before,.dc-scope .dc-step-b__i::after{content:"";position:absolute; background:var(--dc-teal);transition:transform .2s} .dc-scope .dc-step-b__i::before{left:0;top:5.7px;width:13px;height:1.6px} .dc-scope .dc-step-b__i::after{left:5.7px;top:0;width:1.6px;height:13px} .dc-scope .dc-step-b[open] .dc-step-b__i::after{transform:scaleY(0)} .dc-scope .dc-step-b__c{padding:2px 20px 20px} .dc-scope .dc-step-b__l{display:flex;justify-content:flex-end;margin-top:13px} .dc-scope .dc-step-b__l a{font-size:12.5px;color:var(--dc-teal);text-decoration:underline;text-underline-offset:3px} .dc-scope .dc-step-b__l a:hover{color:var(--dc-orange)} .dc-scope .dc-step-b .dc-btn,.dc-scope .dc-step-b .dc-link{text-transform:uppercase !important} .dc-scope .dc-next{margin-top:18px} .dc-scope .dc-next svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} .dc-scope .dc-sizes{display:flex;flex-wrap:wrap;gap:9px} .dc-scope .dc-sizes label{flex:0 0 calc((100% - 9px) / 2 - .5px);cursor:pointer} .dc-scope .dc-sizes input{position:absolute;opacity:0;pointer-events:none} .dc-scope .dc-sizes label.dc-on .dc-size-box { background: #f7f4f0 !important; } /* `.dc-sizes span` used to be a BARE ELEMENT SELECTOR and it caught the two spans WooCommerce wraps every price in, so each tile drew a bordered box around the currency symbol and another around the amount. Target a class. Never a bare element inside a component that renders third party markup. */ .dc-scope .dc-size-box{display:flex;align-items:center;justify-content:space-between;gap:12px; border:1px solid var(--dc-line);background:#fff;padding:13px 14px; transition:border-color .18s,background .18s} .dc-scope .dc-size-l{flex:1 1 auto;min-width:0;text-align:left} .dc-scope .dc-size-r{flex:0 0 auto;text-align:right} .dc-scope .dc-size-name{display:block;font-size:14px;font-weight:600;color:var(--dc-ink);line-height:1.25;text-transform:uppercase !important;} /* Dimensions run to three decimal values, so they need to be small enough to stay on one line next to the price. The price side never wraps: a currency symbol on its own line reads as a second price. */ .dc-scope .dc-size-dims{display:block;font-size:13px;font-weight:400;color:var(--dc-mut); margin-top:3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dc-scope .dc-size-r s{display:block;font-size:15px !important;font-weight:400;color:var(--dc-mut); text-decoration-thickness:1px;line-height:1.3;white-space:nowrap} .dc-scope .dc-size-r ins{display:block;text-decoration:none;font-size:17px;font-weight:600; color:var(--dc-ink);line-height:1.25;white-space:nowrap} .dc-scope .dc-size-na{display:block;font-size:13px;font-weight:400;color:var(--dc-mut)} .dc-scope .dc-sizes input:disabled + .dc-size-box{background:var(--dc-cream);color:var(--dc-mut)} .dc-scope .dc-mtabs{display:flex;gap:6px;margin-bottom:14px} .dc-scope .dc-mtabs button{flex:1 1 0;border:1px solid var(--dc-line);padding:9px 8px;font-size:12px; font-weight:600;text-transform:uppercase;color:var(--dc-mut);background:#fff} .dc-scope .dc-mtabs button.dc-on{background:var(--dc-teal);border-color:var(--dc-teal);color:#fff} .dc-scope .dc-msw{display:flex;flex-wrap:wrap;gap:9px} .dc-scope .dc-msw label{cursor:pointer;position:relative} .dc-scope .dc-msw input{position:absolute;opacity:0;pointer-events:none} .dc-scope .dc-msw i{display:block;width:40px;height:40px;border:1px solid var(--dc-line); box-shadow:inset 0 0 0 2px #fff;transition:box-shadow .15s,transform .15s} .dc-scope .dc-msw label:hover i{transform:scale(1.06)} .dc-scope .dc-msw input:checked + i{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--dc-teal)} .dc-scope .dc-msel{margin-top:13px;display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--dc-mut)} .dc-scope .dc-msel b{color:var(--dc-ink);font-weight:600} .dc-scope .dc-fin-rows{display:flex;flex-direction:column;gap:12px} .dc-scope .dc-frow{display:flex;align-items:center;justify-content:space-between;gap:14px} .dc-scope .dc-frow > b{flex:0 0 150px;font-size:13.5px;font-weight:500;color:var(--dc-ink)} .dc-scope .dc-frow .dc-sel{flex:1 1 auto} .dc-scope .dc-frow .dc-sel select{width:100%} .dc-scope .dc-sum{margin-top:28px;border:1px solid var(--dc-teal-12);background:var(--dc-teal-05);padding:18px 20px} .dc-scope .dc-sum dl{display:flex;flex-direction:column;gap:7px;font-size:13.5px} .dc-scope .dc-sum dl > div{display:flex;justify-content:space-between;gap:14px} .dc-scope .dc-sum dt{color:var(--dc-mut)} .dc-scope .dc-sum dd{color:var(--dc-ink);font-weight:500;text-align:right} .dc-scope .dc-sum__t{margin-top:14px;padding-top:14px;border-top:1px solid var(--dc-teal-12); display:flex;align-items:baseline;justify-content:space-between} .dc-scope .dc-sum__t span{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--dc-mut)} .dc-scope .dc-sum__t b{font-size:26px;color:var(--dc-ink)} .dc-scope .dc-acts{margin-top:18px;display:flex;flex-direction:column;gap:10px} .dc-scope .dc-reass{margin-top:18px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--dc-mut)} .dc-scope .dc-reass span{display:flex;gap:10px;align-items:flex-start} .dc-scope .dc-reass svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;stroke:var(--dc-teal);fill:none;stroke-width:1.6} /* sticky mobile buy bar */ .dc-scope .dc-buybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff; border-top:1px solid var(--dc-line);padding:11px 16px;box-shadow:0 -8px 24px -16px rgba(22,61,68,.5); align-items:center;gap:14px} .dc-scope .dc-buybar div{flex:1 1 auto;min-width:0} .dc-scope .dc-buybar b{display:block;font-size:18px;color:var(--dc-ink)} .dc-scope .dc-buybar small{display:block;font-size:11.5px;color:var(--dc-mut)} .dc-scope .dc-buybar .dc-btn{flex:0 0 auto} /* three-block story */ .dc-scope .dc-story{display:flex;flex-wrap:wrap;gap:34px 26px} .dc-scope .dc-story > *{flex:0 0 calc((100% - 52px) / 3 - .5px);max-width:calc((100% - 52px) / 3)} .dc-scope .dc-story__m{aspect-ratio:4/3;background:var(--dc-cream);position:relative;overflow:hidden;margin-bottom:22px} .dc-scope .dc-story__m svg{position:absolute;inset:0;width:100%;height:100%;opacity:.42} .dc-scope .dc-story h3{font-family:var(--dc-sans);font-size:20px;font-weight:600;line-height:1.28;color:var(--dc-teal)} .dc-scope .dc-story p{margin-top:11px;font-size:14.5px;line-height:1.68;color:var(--dc-mut)} .dc-scope .dc-sec--teal .dc-story h3{color:#fff} .dc-scope .dc-sec--teal .dc-story p{color:rgba(255,255,255,.75)} /* spec split */ .dc-scope .dc-spec{display:flex;gap:48px;align-items:flex-start} .dc-scope .dc-spec > *{flex:1 1 0;min-width:0} .dc-scope .dc-firm{border:1px solid var(--dc-line);background:#fff;padding:26px 24px;margin-top: -100px;} .dc-why img { max-width: 60px; margin-bottom: 10px; width: 100%; } .dc-scope .dc-firm h3{font-size:16px;font-weight:600;text-transform:uppercase;color:var(--dc-ink);letter-spacing:0.5px;} .dc-scope .dc-meter{margin-top:20px} .dc-scope .dc-meter + .dc-meter{margin-top:22px} .dc-scope .dc-meter b{display:block;font-size:14px;font-weight:500;color:var(--dc-ink);margin-bottom:9px} .dc-scope .dc-meter__t{height:6px;background:var(--dc-line);border-radius:6px;position:relative} .dc-scope .dc-meter__f{position:absolute;left:0;top:0;bottom:0;background:var(--dc-orange);border-radius:6px} .dc-scope .dc-meter__l{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--dc-mut)} @media (max-width:1180px){ .dc-scope .dc-pdp__cols{grid-template-columns:minmax(0,1fr) 440px;column-gap:36px} .dc-scope .dc-pdp__desc{grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:36px} .dc-scope .dc-story > *{flex:0 0 calc((100% - 26px) / 2 - .5px);max-width:calc((100% - 26px) / 2)} } @media (max-width:980px){ /* On a phone the buy column must come BEFORE the description, so the order is set explicitly rather than left to source order. */ .dc-scope .dc-pdp__cols{grid-template-columns:minmax(0,1fr);row-gap:32px} /* the gallery stops being sticky here, it would pin over the whole page */ .dc-scope .dc-pdp__gal{grid-column:1;grid-row:1;position:static} .dc-scope .dc-hero-img{max-height:none;min-height:0} .dc-scope .dc-pdp__cfg{grid-column:1;grid-row:2;width:100%;position:static} .dc-scope .dc-pdp__desc{grid-template-columns:minmax(0,1fr);row-gap:30px;margin-top:44px;flex-direction: column-reverse;} .dc-scope .dc-spec{flex-direction:column;gap:28px} .dc-scope .dc-spec > *{width:100%} .dc-scope .dc-buybar{display:flex} .dc-scope .dc-thumbs button{flex:0 0 calc((100% - 40px) / 5 - .5px)} } @media (max-width:640px){ .dc-scope .dc-story > *{flex:0 0 100%;max-width:100%} .dc-scope .dc-sizes label{flex:0 0 100%} .dc-scope .dc-frow{flex-direction:column;align-items:stretch;gap:6px} .dc-scope .dc-frow > b{flex:0 0 auto} .dc-scope .dc-buybar .dc-btn{width:auto} .dc-scope .dc-modal__ft { flex-direction: column !important; align-items: baseline !important; } .dc-scope .dc-modal__box {max-height: calc(100vh - 30px) !important;top: 0 !important;} .dc-scope .dc-modal {padding-top: 20px !important;} .dc-scope .dc-swgrid label {max-width: calc(33.33% - 10px) !important;width: 100% !important;flex:unset !important;} .dc-scope .dc-swgrid .dc-sw-name { font-size: 12px !important; } } /* ========================================================================== DC-02 Material picker. Summary row in the step, full choice in a modal. A flat row of range tabs is what broke the first live render: this product carries around twenty ranges, and twenty tabs do not fit anywhere. Family > range > colour, three levels, is the only shape that scales to 119. ========================================================================== */ /* Pinking-shear edge. clip-path clips DESCENDANTS and kills box-shadow on the clipped element, so the selection ring lives on the parent label and only the inner chip is clipped. */ .dc-scope .dc-sw-chip{display:block;width:100%;aspect-ratio:1;background:var(--dc-cream) center/cover no-repeat; clip-path:polygon(5% 0%, 10% 4%, 15% 0%, 20% 4%, 25% 0%, 30% 4%, 35% 0%, 40% 4%, 45% 0%, 50% 4%, 55% 0%, 60% 4%, 65% 0%, 70% 4%, 75% 0%, 80% 4%, 85% 0%, 90% 4%, 95% 0%, 100% 5%, 96% 10%, 100% 15%, 96% 20%, 100% 25%, 96% 30%, 100% 35%, 96% 40%, 100% 45%, 96% 50%, 100% 55%, 96% 60%, 100% 65%, 96% 70%, 100% 75%, 96% 80%, 100% 85%, 96% 90%, 100% 95%, 95% 100%, 90% 96%, 85% 100%, 80% 96%, 75% 100%, 70% 96%, 65% 100%, 60% 96%, 55% 100%, 50% 96%, 45% 100%, 40% 96%, 35% 100%, 30% 96%, 25% 100%, 20% 96%, 15% 100%, 10% 96%, 5% 100%, 0% 95%, 4% 90%, 0% 85%, 4% 80%, 0% 75%, 4% 70%, 0% 65%, 4% 60%, 0% 55%, 4% 50%, 0% 45%, 4% 40%, 0% 35%, 4% 30%, 0% 25%, 4% 20%, 0% 15%, 4% 10%, 0% 5%)} .dc-scope .dc-sw-chip--sq{clip-path:none;border:1px solid var(--dc-line)} /* the row inside the step */ .dc-scope .dc-matrow{display:flex;align-items:center;gap:16px;background:var(--dc-cream); border:1px solid var(--dc-line);padding:14px 16px} .dc-scope .dc-matrow + .dc-matrow{margin-top:10px} .dc-scope .dc-matrow__c{flex:0 0 56px;width:56px} .dc-scope .dc-matrow__b{flex:1 1 auto;min-width:0} .dc-scope .dc-matrow__b b { display: block; font-size: 14px; font-weight: 600; color: var(--dc-ink); line-height: 1.2; text-transform: uppercase !important; }.dc-scope .dc-matrow__b small{display:block;font-size:13.5px;color:var(--dc-mut);margin-top:3px} .dc-scope .dc-matrow .dc-btn{flex:0 0 auto} button#dcMatOpen, button.dc-btn.dc-btn--out.dc-btn--sm.dc-opt-open { padding: 10px 12px; font-size: 12px; } /* modal */ .dc-scope .dc-modal[hidden]{display:none} .dc-scope .dc-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px} .dc-scope .dc-modal__scrim{position:absolute;inset:0;background:rgba(22,61,68,.55)} .dc-scope .dc-modal__box{position:relative;z-index:1;background:#fff;width:min(1040px,100%); max-height:min(760px,calc(100vh - 48px));display:flex;flex-direction:column; box-shadow:0 40px 80px -40px rgba(22,61,68,.7)} .dc-scope .dc-modal__hd{padding:24px 26px 18px;border-bottom:1px solid var(--dc-line);position:relative;flex:0 0 auto} .dc-scope .dc-modal__hd h2{font-size:26px;font-weight:600;text-transform:uppercase;color:var(--dc-ink)} .dc-scope .dc-modal__hd p{margin-top:8px;font-size:13.5px;color:var(--dc-mut);max-width:62ch;line-height:1.6} .dc-scope .dc-modal__x{position:absolute;top:18px;right:18px;width:34px;height:34px;font-size:22px; line-height:1;color:var(--dc-mut);border-radius:50%} .dc-scope .dc-modal__x:hover{background:var(--dc-cream);color:var(--dc-ink)} .dc-scope .dc-fams{display:flex;flex-wrap:wrap;gap:8px;padding:16px 26px;border-bottom:1px solid var(--dc-line);flex:0 0 auto} .dc-scope .dc-fams button{border:1px solid var(--dc-line);background:#fff;padding:9px 18px;font-size:12px; font-weight:600;text-transform:uppercase;color:var(--dc-ink)} .dc-scope .dc-fams button.dc-on{background:var(--dc-teal-d);border-color:var(--dc-teal-d);color:#fff} .dc-scope .dc-modal__b{flex:1 1 auto;display:flex;min-height:0} .dc-scope .dc-ranges{flex:0 0 232px;border-right:1px solid var(--dc-line);overflow-y:auto;padding:8px 0} .dc-scope .dc-ranges button{display:block;width:100%;text-align:left;padding:12px 20px;border-left:3px solid transparent} .dc-scope .dc-ranges button b{display:block;font-size:14.5px;font-weight:600;color:var(--dc-ink)} .dc-scope .dc-ranges button small{display:block;font-size:12.5px;color:var(--dc-mut);margin-top:2px} .dc-scope .dc-ranges button:hover{background:var(--dc-cream)} .dc-scope .dc-ranges button.dc-on{background:var(--dc-cream);border-left-color:var(--dc-teal)} .dc-scope .dc-swgrid{flex:1 1 auto;overflow-y:auto;padding:20px 22px;display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start} .dc-scope .dc-swgrid label{flex:0 0 calc((100% - 56px) / 5 - .5px);max-width:calc((100% - 56px) / 5); cursor:pointer;border:1px solid var(--dc-line);padding:9px 9px 7px;background:#fff} .dc-scope .dc-swgrid label:hover{border-color:var(--dc-teal)} .dc-scope .dc-swgrid:not(.dc-optgrid) label.dc-on {background: #f7f4f0;} .dc-scope .dc-swgrid input{position:absolute;opacity:0;pointer-events:none} /* removed: clip-path on .dc-sw-chip clips outline and box-shadow on the same element, so this rule painted nothing. The ring is on the label. */ .dc-scope .dc-swgrid .dc-sw-name{display:block;margin-top:9px;font-size:12.5px;color:var(--dc-ink);text-align:center; overflow:hidden;} .dc-scope .dc-swgrid em{display:block;font-style:normal;font-size:11.5px;color:var(--dc-orange);text-align:center} .dc-scope .dc-swempty{flex:1 1 100%;color:var(--dc-mut);font-size:14px;padding:20px 0} .dc-scope .dc-modal__ft{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 26px; border-top:1px solid var(--dc-line);background:var(--dc-cream)} .dc-scope .dc-modal__ft .dc-matrow__c{flex:0 0 44px;width:44px} .dc-scope .dc-modal__ft .dc-matrow__b b{font-size:15px} .dc-scope .dc-modal__ft .dc-btn{flex:0 0 auto} @media (max-width:900px){ .dc-scope .dc-modal{padding:0} .dc-scope .dc-modal__box{max-height:100vh;height:100vh;width:100%} .dc-scope .dc-modal__b{flex-direction:column} .dc-scope .dc-ranges{flex:0 0 auto;max-height:150px;border-right:0;border-bottom:1px solid var(--dc-line)} .dc-scope .dc-swgrid label{flex:0 0 calc((100% - 42px) / 4 - .5px);max-width:calc((100% - 42px) / 4)} } @media (max-width:560px){ .dc-scope .dc-swgrid label{flex:0 0 calc((100% - 28px) / 3 - .5px);max-width:calc((100% - 28px) / 3)} .dc-scope .dc-matrow{flex-wrap:wrap} .dc-scope .dc-matrow .dc-btn{width:100%} } /* The [hidden] attribute is display:none in the UA stylesheet, and ANY author rule that sets display beats it. `.dc-ranges button{display:block}` silently un-hid every range in the picker, so the Velvet tab still listed the leather ranges. This rule is the fix and it belongs at the end, after everything that might set display. */ .dc-scope [hidden]{display:none !important} /* "+ £125.00" is two words in a 110px tile, and it wrapped. */ .dc-scope .dc-swgrid em{white-space:nowrap;font-size:11px;margin-top:2px} .dc-scope .dc-swgrid em span{display:inline;white-space:nowrap} /* ========================================================================== WooCommerce price markup, neutralised inside the scope. wc_price() returns span.woocommerce-Price-amount > bdi > span.currencySymbol Three nested inline elements, and ANY rule in this stylesheet or in the live theme that touches span or bdi will decorate them. This is the third documented !important exception, after text-transform and text-align on headings, and it is here because a boxed-up price is a blocker, not a polish item. Add nothing else to this block. ========================================================================== */ .dc-scope .woocommerce-Price-amount, .dc-scope .woocommerce-Price-amount bdi, .dc-scope .woocommerce-Price-currencySymbol, .dc-scope .amount, .dc-scope .amount bdi, .dc-scope bdi{ display:inline !important;border:0 !important;background:none !important; padding:0 !important;margin:0 !important;box-shadow:none !important; font:inherit;color:inherit;white-space:nowrap;text-align:inherit} /* Inline elements the reset never covered. It only ever listed block level tags, so a theme rule on span, bdi, s or em walked straight in. */ .dc-scope span,.dc-scope bdi,.dc-scope s,.dc-scope em,.dc-scope i,.dc-scope b, .dc-scope strong,.dc-scope small,.dc-scope abbr,.dc-scope time,.dc-scope mark, .dc-scope sup,.dc-scope sub,.dc-scope del,.dc-scope ins,.dc-scope var,.dc-scope cite{ border:0;background:none;padding:0;margin:0;text-indent:0} /* ========================================================================== DC-02 Finishing touches as upgrade rows plus a picker, one per option. Selects hid the fact that these options have pictures and prices. A row that shows the current choice, what it costs, and a picture of it, is the whole point of the step. ========================================================================== */ .dc-scope .dc-optrow{display:flex;align-items:center;gap:16px;background:#fff; border:1px solid var(--dc-line);padding:12px 14px} .dc-scope .dc-optrow + .dc-optrow{margin-top:10px} .dc-scope .dc-optrow__m{flex:0 0 56px;width:56px;height:56px;background:var(--dc-cream); border:1px solid var(--dc-line);position:relative;overflow:hidden} .dc-scope .dc-optrow__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dc-scope .dc-optrow__m svg{position:absolute;inset:12px;width:auto;height:auto; stroke:var(--dc-line);fill:none;stroke-width:1.4} .dc-scope .dc-optrow__b{flex:1 1 auto;min-width:0} .dc-scope .dc-optrow__b small{display:block;font-size:11px;font-weight:600; text-transform:uppercase !important;color:var(--dc-mut)} .dc-scope .dc-optrow__b b{display:block;font-size:16px;font-weight:600;color:var(--dc-ink); line-height:1.3;margin-top:3px} .dc-scope .dc-optrow__b b em{font-style:normal;font-weight:400;color:var(--dc-mut);font-size:14px;white-space:nowrap} .dc-scope .dc-optrow .dc-btn{flex:0 0 auto} .dc-scope .dc-modal__b--plain{display:block;overflow-y:auto} .dc-scope .dc-optgrid{padding:20px 22px} .dc-scope .dc-optgrid label{flex:0 0 calc((100% - 56px) / 5 - .5px);max-width:calc((100% - 56px) / 5)} .dc-scope .dc-opt-chip{display:block;width:100%;aspect-ratio:1;background:var(--dc-cream); border:1px solid var(--dc-line);position:relative;overflow:hidden} .dc-scope .dc-opt-chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dc-scope .dc-optgrid input:checked + .dc-opt-chip{outline-offset:2px} .dc-scope .dc-optgrid .dc-inc{display:block;font-size:11.5px;color:var(--dc-mut);text-align:center;margin-top:2px} @media (max-width:900px){ .dc-scope .dc-optgrid label{flex:0 0 calc((100% - 42px) / 4 - .5px);max-width:calc((100% - 42px) / 4)} } @media (max-width:560px){ .dc-scope .dc-optgrid label{flex:0 0 calc((100% - 28px) / 3 - .5px);max-width:calc((100% - 28px) / 3)} .dc-scope .dc-optrow{flex-wrap:wrap} .dc-scope .dc-optrow .dc-btn{width:100%} } /* ========================================================================== DC-02 Corrections after the first live pass. Everything below is a fix for something that was wrong on the site, and each one says which. Fold these into the blocks above at the next tidy. ========================================================================== */ /* --- The modal was opening UNDER the theme's sticky header ---------------- */ .dc-scope{--dc-modal-top:120px} .dc-scope .dc-modal{align-items:flex-start;padding:var(--dc-modal-top) 24px 24px} .dc-scope .dc-modal__box{max-height:calc(100vh - var(--dc-modal-top) - 48px)} /* --- Swatch tiles: no border, no padding, six across --------------------- */ .dc-scope .dc-swgrid label{flex:0 0 calc((100% - 70px) / 6 - .5px);max-width:calc((100% - 70px) / 6); border: 1px solid #0000001f; padding: 8px; background: none; border-radius: 5px; } /* removed: clip-path on .dc-sw-chip clips outline and box-shadow on the same element, so this rule painted nothing. The ring is on the label. */ .dc-scope .dc-swgrid .dc-sw-name{margin-top:8px;font-size:12.5px;font-weight:500;line-height:1.3; color:var(--dc-ink)} /* "(Included)" was the same weight and size as the name, so every tile read as two titles. It is a footnote, so it looks like one. */ .dc-scope .dc-swgrid .dc-inc{display:block;margin-top:1px;font-size:11.5px;font-weight:400; line-height:1.3;color:var(--dc-mut);text-align:center} .dc-scope .dc-swgrid em{margin-top:1px;font-size:11.5px;font-weight:500;line-height:1.3;color:var(--dc-orange)} /* --- Option chips are wider than they are tall --------------------------- */ .dc-scope .dc-opt-chip{aspect-ratio:1.5} .dc-scope .dc-optgrid label{flex:0 0 calc((100% - 70px) / 6 - .5px);max-width:calc((100% - 70px) / 6); border:0;padding:0;background:none} .dc-scope .dc-optgrid label:hover{border:0} .dc-scope .dc-optgrid label:hover .dc-opt-chip{box-shadow:0 0 0 1.5px var(--dc-teal)} /* --- The running summary: dt was inheriting a bold from the theme -------- */ .dc-scope .dc-sum dl{gap:9px} .dc-scope .dc-sum dl > div{align-items:baseline} .dc-scope .dc-sum dt{font-size:13.5px;font-weight:400;line-height:1.45;color:var(--dc-mut)} .dc-scope .dc-sum dd{font-size:13.5px;font-weight:500;line-height:1.45;color:var(--dc-ink)} .dc-scope .dc-sum__t span{font-size:11.5px;font-weight:600;line-height:1.3} .dc-scope .dc-sum__t b{font-size:26px;font-weight:600;line-height:1.1} /* --- The description: a theme p{line-height} beat inheritance ------------ */ .dc-scope .dc-body p,.dc-scope .dc-tagline p{font-size:inherit;line-height:1.3;color:inherit;margin:0} .dc-scope .dc-body p + p{margin-top:14px} .dc-scope .dc-pdp__desc-a .dc-body{font-size:15.5px;line-height:1.75} .dc-scope .dc-pdp__desc-a .dc-body br{line-height:1.75} /* --- Related product cards ----------------------------------------------- */ .dc-scope .dc-card__t{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:0.4px;} /* get_price_html() brings its own del and ins. Wrapping it in made the struck price bold and the same size as the payable one. */ .dc-scope .dc-cardprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px; font-size:17px;font-weight:600;color:var(--dc-ink);line-height:1.3} .dc-scope .dc-cardprice del{font-size:13px;font-weight:400;color:var(--dc-mut); text-decoration:line-through;text-decoration-thickness:1px} .dc-scope .dc-cardprice ins{text-decoration:none;font-size:17px;font-weight:600;color:var(--dc-ink)} .dc-scope .dc-cardprice .woocommerce-Price-amount{font:inherit} /* The card price is now rendered by this template rather than by get_price_html(), so it is From / now / was rather than del / ins. The del and ins rules above stay: a cached page, and any product still printed through WooCommerce's own markup, is still styled correctly. "FROM" is a label, not a number. Small, tracked and the same muted grey as the was, so the eye lands on the figure between them. */ .dc-scope .dc-cardprice i{font-style:normal;font-size:11px;font-weight:600; letter-spacing:.6px;text-transform:uppercase;color:var(--dc-mut)} .dc-scope .dc-cardprice b{font-size:17px;font-weight:600;color:var(--dc-ink)} /* "Was £3,189" crossed through as one phrase, word and figure together, which is why the line is on the and not on a span around the amount alone. */ .dc-scope .dc-cardprice s{font-size:13px;font-weight:400;color:var(--dc-mut); text-decoration:line-through;text-decoration-thickness:1px;white-space:nowrap} /* ========================================================================== DC-02 Round two of live corrections. Appended, so nothing above is rewritten. Sam's hand edits above stand. ========================================================================== */ /* --- 4. Heading tracking -------------------------------------------------- .dc-h carried .06em and .dc-h__a carried .14em, so a product title was set at newspaper-kicker tracking and read as spaced-out capitals rather than a name. Display sizes need LESS tracking, not more: the larger the type the tighter it wants to be. The eyebrow keeps its wide tracking, because at 12px that is what makes it read as a label. */ /* --- 1. The product title is the FULL name, on one line ------------------- */ .dc-scope .dc-pdp h1.dc-h--one .dc-h__b{margin-top:0;font-size:33px; line-height:1.05;color:#21565f} /* --- 2. The points under the title ---------------------------------------- */ .dc-scope .dc-points{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px; font-size:14.5px;font-weight:500;color:var(--dc-ink)} /* A divider drawn BETWEEN items, never after the last one. ::after on every span and then hiding the last is one rule too many, so use the sibling. */ .dc-scope .dc-points span + span{padding-left:16px;border-left:1px solid var(--dc-line)} /* --- 2. The price, its own block, no box ---------------------------------- */ .dc-scope .dc-pdp__cfg .dc-pbox{border:0;background:none;padding:0;margin-top:20px} .dc-scope .dc-pdp__cfg .dc-pbox .dc-price{align-items:baseline;gap:12px} .dc-scope .dc-pdp__cfg .dc-pbox .dc-price b{font-size:30px;line-height:1.05; display:inline-flex;align-items:baseline;gap:10px} .dc-scope .dc-pdp__cfg .dc-pbox .dc-price b i{font-size:30px;font-weight:600; color:var(--dc-ink);margin-right:0} .dc-scope .dc-pdp__cfg .dc-pbox .dc-price s{font-size:19px} /* --- 3. The deposit line -------------------------------------------------- */ .dc-scope .dc-deposit{margin-top:18px;padding:14px 10px;background:var(--dc-cream); border-left:3px solid var(--dc-teal);font-size:13px;line-height:1.6;color:var(--dc-mut)} .dc-scope .dc-deposit b{font-weight:600;color:var(--dc-ink)} /* --- 6. Finishing touch thumbnails are 1.5 wide -------------------------- */ .dc-scope .dc-optrow__m{flex:0 0 84px;width:84px;height:56px;aspect-ratio:1.5} .dc-scope .dc-optrow__m svg{inset:10px 24px} /* --- 7. Gallery thumbs are a slider, never a second row ------------------ flex-wrap:wrap was putting a seventh image on a new line and pushing the caption down, which broke the sticky column height calculation with it. One row, scrolled, with snap points. */ .dc-scope .dc-thumbs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:4px; scrollbar-color:var(--dc-line) transparent} .dc-scope .dc-thumbs button{flex:0 0 calc((100% - 50px) / 6 - .5px);scroll-snap-align:start} .dc-scope .dc-thumbs::-webkit-scrollbar{height:6px} .dc-scope .dc-thumbs::-webkit-scrollbar-track{background:transparent} .dc-scope .dc-thumbs::-webkit-scrollbar-thumb{background:var(--dc-line);border-radius:6px} .dc-scope .dc-thumbs::-webkit-scrollbar-thumb:hover{background:var(--dc-mut)} /* --- 8. The review order, three columns ---------------------------------- */ /* Left: what it is. Middle: what was chosen. Right: what it costs. A column of option names with no headings meant working out from the words alone which step each line came from. */ .dc-scope .dc-sum dl > div{align-items:baseline;gap:16px} .dc-scope .dc-sum dt{flex:0 0 96px;font-size:11.5px;font-weight:600; text-transform:uppercase;color:var(--dc-mut);line-height:1.45} .dc-scope .dc-sum dd{flex:1 1 auto;min-width:0;display:flex;align-items:baseline; justify-content:space-between;gap:14px;text-align:left} .dc-scope .dc-sum .dc-sum-v{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;color:var(--dc-ink)} .dc-scope .dc-sum .dc-sum-p{flex:0 0 auto;font-size:13.5px;font-weight:400;color:var(--dc-mut); white-space:nowrap;text-align:right} /* --- The selected states, on Sam's cream rather than a teal ring --------- Kept as HIS colour. The only addition is a border, because #f7f4f0 against #fff behind a 12% black hairline is not enough on its own to say "this one". Driven by the dc-on CLASS, which is in the served markup before any script runs, so it does not depend on :checked surviving the live stylesheet. */ .dc-scope .dc-swgrid label.dc-on{border-color:var(--dc-teal);} .dc-scope .dc-swgrid label.dc-on .dc-sw-name{color:var(--dc-teal);font-weight:500} .dc-scope .dc-sizes label.dc-on .dc-size-box{border-color:var(--dc-teal); box-shadow:inset 0 0 0 1px var(--dc-teal)} .dc-scope .dc-sizes label.dc-on .dc-size-name{color:var(--dc-teal)} .dc-scope .dc-optgrid label.dc-on .dc-opt-chip{border-color:var(--dc-teal); box-shadow:inset 0 0 0 1px var(--dc-teal)} .dc-scope .dc-optgrid label.dc-on .dc-sw-name{color:var(--dc-teal);} @media (max-width:640px){ .dc-scope .dc-points{font-size:13.5px} .dc-scope .dc-sum dt{flex:0 0 100%} .dc-scope .dc-sum dl > div{flex-wrap:wrap;gap:2px 16px} } /* --- Keyboard focus on the tiles ------------------------------------------ The radio itself is opacity:0 and absolutely positioned, so the global :focus-visible ring in the reset lands on something nobody can see. The ring has to go on the label. */ .dc-scope .dc-swgrid label:has(input:focus-visible), .dc-scope .dc-optgrid label:has(input:focus-visible), .dc-scope .dc-sizes label:has(input:focus-visible) .dc-size-box{ outline:2px solid var(--dc-orange);outline-offset:2px} /* --- No price on a material tile ------------------------------------------ The renderer stopped printing it: twelve colours in one range all cost the same, so twelve copies of "+ $520" is noise, and the rail says it once. This rule is only here so a cached page cannot show one. The FINISHING tiles keep theirs, because those options genuinely cost different amounts. */ .dc-scope .dc-swgrid .dc-inc,.dc-scope .dc-swgrid .dc-sw-up,.dc-scope .dc-swgrid em{display:none} .dc-scope .dc-optgrid .dc-inc,.dc-scope .dc-optgrid em{display:block} /* --- Disabled comes last -------------------------------------------------- After every :checked and .dc-on rule above, or a size nobody can buy still reads as the chosen one. */ .dc-scope .dc-sizes label.dc-size--na .dc-size-box, .dc-scope .dc-sizes input:disabled + .dc-size-box{background:var(--dc-cream) !important; color:var(--dc-mut);border-color:var(--dc-line);box-shadow:none;opacity:.72} .dc-scope .dc-sizes label.dc-size--na .dc-size-name{color:var(--dc-mut)} /* --- Products that are not configurable sofas ----------------------------- A gift card has no size attribute, so it gets WooCommerce's own add-to-cart form where the three steps would be. That form arrives with the theme's and WooCommerce's markup, so this only gives it room and a consistent button. */ .dc-scope .dc-native{margin-top:26px;border:1px solid var(--dc-line);background:#fff;padding:22px 20px} .dc-scope .dc-native form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0} .dc-scope .dc-native .quantity{display:flex;align-items:center} .dc-scope .dc-native .quantity input{width:78px;border:1px solid var(--dc-line);padding:13px 10px;text-align:center} .dc-scope .dc-native button[type="submit"], .dc-scope .dc-native .single_add_to_cart_button{flex:1 1 auto;min-width:220px; display:inline-flex;align-items:center;justify-content:center; background:var(--dc-orange);color:#fff;border:1px solid transparent;border-radius:var(--dc-r); font-size:12.5px;font-weight:600;text-transform:uppercase;padding:15px 30px;line-height:1} .dc-scope .dc-native button[type="submit"]:hover, .dc-scope .dc-native .single_add_to_cart_button:hover{background:var(--dc-orange-d)} .dc-scope .dc-native table.variations{width:100%;margin-bottom:14px} .dc-scope .dc-native table.variations th,.dc-scope .dc-native table.variations td{padding:6px 0;vertical-align:middle} .dc-scope .dc-native table.variations select{width:100%;border:1px solid var(--dc-line);padding:11px 14px;background:#fff} .dc-scope .dc-native .stock{font-size:13px;color:var(--dc-mut);flex:1 1 100%} .dc-scope .dc-native .woocommerce-variation-price{flex:1 1 100%;font-size:20px;font-weight:600;color:var(--dc-ink)} /* ========================================================================== DC-02 The range list becomes a select on narrow screens. The rail is a 150px scroll box on a phone, so twenty ranges are read four at a time through a letterbox. Below 900px the rail is replaced by a select and the platform draws the picker: full height, a scrollbar people already know, and one tap instead of a scroll hunt. Both controls are always in the DOM and both are driven by showRange(), so switching orientation mid-session cannot leave them disagreeing. ========================================================================== */ .dc-scope .dc-rangesel{display:none} @media (max-width:900px){ .dc-scope .dc-ranges{display:none} .dc-scope .dc-rangesel{display:block;flex:0 0 auto;padding:14px 22px;background:#fff; border-bottom:1px solid var(--dc-line);position:relative} .dc-scope .dc-rangesel__l{display:block;font-size:11px;font-weight:600; text-transform:uppercase;color:var(--dc-mut);margin-bottom:7px} .dc-scope .dc-rangesel select{width:100%;border:1px solid var(--dc-line);background:#fff; /* 44px minimum touch target, and room on the right for the chevron */ padding:13px 42px 13px 14px;font-size:15px;font-weight:500;color:var(--dc-ink); border-radius:var(--dc-r);cursor:pointer;line-height:1.2} .dc-scope .dc-rangesel select:focus-visible{outline:2px solid var(--dc-orange);outline-offset:2px} /* -webkit-appearance:none is set in the reset, so the arrow has to be drawn. On the wrapper, not the select: a pseudo element on a select is not rendered by any engine. */ .dc-scope .dc-rangesel::after{content:"";position:absolute;right:36px;bottom:29px; width:8px;height:8px;border-right:1.6px solid var(--dc-mut);border-bottom:1.6px solid var(--dc-mut); transform:rotate(45deg);pointer-events:none} } /* ========================================================================== DC-02 Mobile layout, round three. Three sections that were stacking one per row on a phone. One per row turns a four item list into four screens of scrolling, and the reader loses the sense that it is a list at all. ========================================================================== */ @media (max-width:640px){ /* --- Delivery steps, two across ----------------------------------------- A tighter column gap than the desktop 24px, because at 165px per column every pixel spent on the gap comes off the words. */ .dc-scope .dc-steps{gap:26px 14px} .dc-scope .dc-steps > *{flex:0 0 calc((100% - 14px) / 2 - .5px);max-width:calc((100% - 14px) / 2)} .dc-scope .dc-step{padding-top:22px} .dc-scope .dc-step h3{font-size:14px} .dc-scope .dc-step p{font-size:13px;line-height:1.6} /* --- Why boxes, two across ---------------------------------------------- */ .dc-scope .dc-why{gap:28px 14px} .dc-scope .dc-why > *{flex:0 0 calc((100% - 14px) / 2 - .5px);max-width:calc((100% - 14px) / 2)} .dc-scope .dc-why__i{width:32px;height:32px;margin-bottom:12px} .dc-scope .dc-why h3{font-size:14px} .dc-scope .dc-why p{font-size:13px;line-height:1.6} /* --- Related products, a slider ----------------------------------------- Scoped to dc-grid--rel, NOT to dc-grid--4. That class is a column count, and hanging a slider off it would turn any future four-up grid into one. The row bleeds to the screen edge with a negative margin so the card that is half in view is cut by the SCREEN rather than stopping short inside the padding. A card that ends neatly at the gutter reads as the last one, and nobody swipes. scroll-padding puts the gutter back for the snap. */ .dc-scope .dc-grid--rel{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; gap:14px;scroll-snap-type:x mandatory; margin-inline:calc(var(--dc-gut) * -1); padding-inline:var(--dc-gut); scroll-padding-inline:var(--dc-gut); padding-bottom:6px; scrollbar-width:thin;scrollbar-color:var(--dc-line) transparent} /* 78%, so the next card is visibly cut off. A card at 100% gives no signal that there is anything to the right of it. */ .dc-scope .dc-grid--rel > *{flex:0 0 95%;max-width:95%;scroll-snap-align:start} .dc-scope .dc-grid--rel::-webkit-scrollbar{height:6px} .dc-scope .dc-grid--rel::-webkit-scrollbar-track{background:transparent} .dc-scope .dc-grid--rel::-webkit-scrollbar-thumb{background:var(--dc-line);border-radius:6px} .dc-scope .dc-grid--rel::-webkit-scrollbar-thumb:hover{background:var(--dc-mut)} /* The card button is full width inside a narrower card, so the global .dc-btn{width:100%} at this breakpoint is right here and stays. */ } /* ========================================================================== DC-02 Round three. Appended, so nothing above is rewritten. ========================================================================== */ /* --- 1. "Choose material" is a signpost, not a dead end ------------------- The add to basket button used to be DISABLED while a step was outstanding, so it read "Choose material" and then did nothing at all when it was pressed. It is now live, and its click handler opens and scrolls to the step it names. Which leaves the look. It must still read as unfinished — pressing it does not add anything to a basket — without reading as inert, so it drops to the outline treatment the rest of the configurator uses for "not yet". The !important on colour is forced: .dc-btn--pri sets `color:#fff !important`, so nothing without one can repaint the text. It is the same neutraliser reason the other documented exceptions exist, not a new licence to use them. */ .dc-scope .dc-btn--pri[data-pending]{ background:transparent; border-color:var(--dc-teal); color:var(--dc-teal) !important; } .dc-scope .dc-btn--pri[data-pending]:hover{ background:var(--dc-teal); color:#fff !important; } /* The step that was jumped to. On desktop the configurator column is short enough that the outstanding step is often already on screen, so the scroll moves nothing and the jump would be invisible without this. */ @keyframes dc-ask{ 0%,100%{box-shadow:0 0 0 0 rgba(225,131,79,0)} 18% {box-shadow:0 0 0 4px rgba(225,131,79,.32)} 60% {box-shadow:0 0 0 4px rgba(225,131,79,.32)} } .dc-scope .dc-step-b--ask{ border-color:var(--dc-orange); animation:dc-ask 1.8s ease-out 1; } @media (prefers-reduced-motion:reduce){ .dc-scope .dc-step-b--ask{animation:none;box-shadow:0 0 0 4px rgba(225,131,79,.32)} } /* --- 2. Related product cards -------------------------------------------- The card now carries what the customer is actually choosing between: how much is off, how many colours it comes in and how many sizes. Scoped to .dc-card--rel throughout, because .dc-card is also the catalogue card and this is a different, taller composition. */ /* The border STAYS. dc02_tone() decides this section's background at render time and drops it to plain white when the section above it was already cream, so the card body and the section behind it are the same colour often enough that a borderless card would sometimes have no edge at all. */ .dc-scope .dc-card--rel{background:var(--dc-cream)} .dc-scope .dc-card--rel:hover{box-shadow:0 26px 50px -34px rgba(22,61,68,.45)} .dc-scope .dc-card--rel .dc-card__m{aspect-ratio:1.7} /* Flush to the left edge, as a ribbon rather than as a floating chip. Bigger than the catalogue badge: on a three-up row this is the first thing read. */ .dc-scope .dc-card--rel .dc-badge{ top: 12px; left: 12px; padding: 10px; border-radius: 0; font-size: 14px; font-weight: 700; letter-spacing: .6px; line-height: 1;} .dc-scope .dc-card--rel .dc-card__b{padding:20px 20px 22px;gap:0} .dc-scope .dc-card--rel .dc-card__t{ font-size: 17px; line-height: 1.35; display: block; overflow: visible; text-transform: uppercase !important;} .dc-scope .dc-card--rel .dc-card__p{margin-top:auto;padding-top:0} /* The price line. "FROM" is a label and stays small; the payable figure is the biggest thing in the body, and the was-price sits beside it rather than under it so the pair reads as one before/after. */ .dc-scope .dc-card--rel .dc-cardprice{margin-top:5px;gap:8px;align-items:baseline} .dc-scope .dc-card--rel .dc-cardprice i{font-size:11px;font-weight:700;letter-spacing:.8px; color:var(--dc-mut)} .dc-scope .dc-card--rel .dc-cardprice b{font-size:24px;font-weight:700;line-height:1; letter-spacing:-.5px;color:var(--dc-ink)} .dc-scope .dc-card--rel .dc-cardprice s{font-size:13px;color:var(--dc-mut)} /* Visually hidden, still read out. The swatch circles are aria-hidden decoration, so without this the material COUNT — the only part of that stack that is a fact — is not in the accessibility tree at all. */ .dc-scope .dc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* --- the facts row: colours on the left, sizes on the right --------------- */ .dc-scope .dc-card__f{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-top:18px;min-height:38px} .dc-scope .dc-card__f > *{display:flex;align-items:center;gap:6px;min-width:0} /* Overlapping, because five separate circles in a 300px card is a row of dots and an overlapping stack reads as "a range". The white ring is what keeps two dark leathers from merging into one shape. */ .dc-scope .dc-card__swrow{display:flex;align-items:center;gap:0} .dc-scope .dc-card__swrow i{ flex:0 0 auto;width:24px;height:24px;border-radius:50%; border:1px solid #fff;background:var(--dc-line) center/cover no-repeat; box-shadow:0 1px 3px rgba(22,61,68,.18)} .dc-scope .dc-card__swrow i + i{margin-left:-11px} .dc-scope .dc-card__more{font-style:normal;font-size:11px;font-weight:500; letter-spacing:.4px;text-transform:uppercase;color:var(--dc-ink);white-space:nowrap} .dc-scope .dc-card__sz{font-size:12px;font-weight:600;letter-spacing:.4px; text-transform:uppercase;color:var(--dc-ink);white-space:nowrap;gap:9px} .dc-scope .dc-card__sz svg{flex:0 0 24px;width:24px;height:24px; stroke:var(--dc-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* The button is the card's whole width and its own block of colour. It is not a real button — the card is one link — so it must not be reachable twice. */ .dc-scope .dc-card--rel .dc-card__a{margin-top:22px} .dc-scope .dc-card--rel .dc-card__a .dc-btn{ padding:14px 20px;font-size:15px;font-weight:700;letter-spacing:0.8px} .dc-scope .dc-card:hover .dc-card__a .dc-btn { background: #21565f !important; border-color: #21565f !important; } @media (max-width:1180px){ .dc-scope .dc-card--rel .dc-card__t{font-size:17px} .dc-scope .dc-card--rel .dc-cardprice b{font-size:24px} .dc-scope .dc-card--rel .dc-card__b{padding:22px 20px 24px} .dc-scope .dc-card__swrow i{width:24px;height:24px} .dc-scope .dc-card__swrow i + i{margin-left:-9px} .dc-scope .dc-card__more,.dc-scope .dc-card__sz{font-size:13px} .dc-scope .dc-card--rel .dc-card__a .dc-btn{padding:17px 20px;font-size:15px} } /* Two across before the slider takes over, so the facts row is not trying to hold a swatch stack and a size count in 210px. The lower bound is not optional: the 640px block ABOVE turns this row into a slider, and an unbounded max-width rule down here would win on source order and undo it. */ @media (min-width:641px) and (max-width:980px){ .dc-scope .dc-grid--rel > *{flex:0 0 calc((100% - 24px) / 2 - .5px);max-width:calc((100% - 24px) / 2)} } @media (max-width:640px){ .dc-scope .dc-card__f{gap:10px 14px} } /* --- 3. Was-prices in the review summary and its total -------------------- Every line that carries a discount now prints the price it USED to be beside the price it is. The rule everywhere is the strict one: a was is only rendered when it actually beats the figure next to it, so none of these selectors ever has to hide a "saving" of nothing. The struck figure comes FIRST and is the quieter of the two. Leading with it, or matching its weight to the payable price, makes the eye land on the number the customer is not being asked for. */ .dc-scope .dc-sum .dc-sum-p{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap} .dc-scope .dc-sum .dc-sum-p s{ font-size:12px;font-weight:400;color:var(--dc-mut); text-decoration:line-through;text-decoration-thickness:1px} .dc-scope .dc-sum .dc-sum-p .dc-sum-now{font-weight:500;color:var(--dc-ink)} /* The total. Same pair, at the size the total is already set in, and it has to stay on one line: the row is a label on the left and a figure on the right, and a wrapped total pushes the label out of line with it. */ .dc-scope .dc-sum__t b{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap} .dc-scope .dc-sum__t b s{ font-size:17px;font-weight:400;color:var(--dc-mut); text-decoration:line-through;text-decoration-thickness:1px} .dc-scope .dc-sum__t b ins{text-decoration:none;color:var(--dc-ink)} @media (max-width:420px){ /* At this width the pair and its label will not share a line. Wrapping the total under the label is better than shrinking a 26px figure to fit. */ .dc-scope .dc-sum__t{flex-wrap:wrap;row-gap:4px} .dc-scope .dc-sum__t b{font-size:23px;gap:8px} .dc-scope .dc-sum__t b s{font-size:15px} }