/* Theme Name: Cabin Lane Theme URI: https://love-s-cabin.com/ Description: Catalogue theme for the Love’s cabin bedding and pet range. Author: love-s-cabin.com Version: 1.2.6 Requires at least: 6.0 Tested up to: 6.8.2 Requires PHP: 7.4 Text Domain: cabinlane */ :root{ /* leaf это акцент для плашек и графики: на бумаге он даёт 2.31:1 и текстом быть не может. leaf-d — тот же зелёный, доведённый до 5.24 на linen и 4.87 на linen-d, чтобы им можно было набрать второе слово знака и не разбирать потом провал по контрасту. */ --pine:#0A5133; --pine-d:#04402A; --leaf:#5CC048; --leaf-d:#2C7524; --linen:#F7F5EF; --linen-d:#EBEBE0; --paper:#fff; /* ink-3 is metadata type — 0.86rem, i.e. 13.8px, which is under the 18.7px where WCAG relaxes to 3:1, so it needs a full 4.5:1. The first value here was #6B766A and it came to 4.35 on linen: invisible to the eye, a hard fail in the audit, and failing on the ONE token that carries every caption, rating count and breadcrumb on the site. #646E63 is the same hue two steps down — 4.87 on linen, 5.31 on paper. It is still 4.43 on --linen-d, so the two components that put ink-3 on that darker ground (the disabled button and the out-of-stock flag) use ink-2 instead. */ --ink:#20261F; --ink-2:#4C5749; --ink-3:#646E63; --line:#DDE2D5; --ok:#2F7D5C; --warn:#8A6A2F; --r:14px; --r-s:9px; --r-l:24px; --w:1180px; --gap:24px; --sh:0 1px 2px rgba(24,32,24,.05),0 6px 20px rgba(24,32,24,.06); --sh-h:0 2px 6px rgba(24,32,24,.07),0 14px 36px rgba(24,32,24,.11); } /* Relative to the stylesheet: /wp-content/themes/cabinlane/fonts/ — same URL the head preloads. */ @font-face{font-family:Fraunces;src:url(fonts/fraunces-var.woff2)format("woff2");font-weight:300 800;font-display:swap;font-style:normal} @font-face{font-family:Manrope;src:url(fonts/manrope-var.woff2)format("woff2");font-weight:300 800;font-display:swap;font-style:normal} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--linen);color:var(--ink); font:400 17px/1.62 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased} /* Fraunces is a serif, so the tracking is far looser than a geometric sans would take: negative letter-spacing closes serifs into each other and the headline turns muddy at display sizes. */ h1,h2,h3,h4,.lc-dsp{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600; line-height:1.16;letter-spacing:-.006em;margin:0 0 .5em} h1{font-size:clamp(2.05rem,5vw,3.3rem);letter-spacing:-.014em} h2{font-size:clamp(1.6rem,3.3vw,2.3rem);letter-spacing:-.01em} h3{font-size:1.22rem} p{margin:0 0 1.05em} a{color:var(--pine-d);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--pine)} img{max-width:100%;height:auto;display:block} picture{display:contents} ul,ol{margin:0 0 1.05em;padding-left:1.15em} li{margin:.3em 0} :focus-visible{outline:2.5px solid var(--pine);outline-offset:2px;border-radius:3px} .lc-wrap{max-width:var(--w);margin:0 auto;padding:0 20px} .lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lc-skip{position:absolute;left:-999px;top:0;background:var(--pine);color:#fff;padding:10px 16px;z-index:99;border-radius:0 0 var(--r-s) 0} .lc-skip:focus{left:0} /* ---------- header ---------- */ .lc-hd{background:var(--linen);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .lc-hd-in{display:flex;align-items:center;gap:18px;height:70px} .lc-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pine);flex:0 0 auto} .lc-logo svg{width:30px;height:30px;display:block;color:var(--leaf-d)} .lc-logo .lc-word{font-size:1.4rem} /* Надпись остаётся ТЕКСТОМ, а не картинкой: так она ищется, копируется, читается скринридером и не мылится на retina. Второе слово светлее и легче — это и есть композиция знака. Кегль задаётся в .lc-logo/.lc-ft-logo, здесь только начертание, иначе шапка и футер разъедутся. */ .lc-word{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1;letter-spacing:-.012em; display:inline-flex;align-items:baseline;gap:.22em;white-space:nowrap} .lc-w1{color:var(--pine)} /* leaf-d, не leaf: --leaf это #5CC048, и на бумажном фоне он даёт 2.4:1 — для графики сойдёт, для слова нет. Слово обязано пройти 4.5:1, поэтому тон затемнён до контрастного. */ .lc-w2{color:var(--leaf-d);font-weight:500} /* Seven links instead of the four the sibling sites carry, so the row is tightened: at .93rem with 11px padding the whole nav measures ~570px, which clears the 860px burger breakpoint with the logo alongside. Widening either number brings the links back into the logo at ~880px. */ .lc-nav{margin-left:auto;display:flex;align-items:center;gap:2px} .lc-nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.93rem; padding:9px 11px;border-radius:var(--r-s);white-space:nowrap} .lc-nav a:hover{color:var(--pine-d);background:var(--linen-d)} .lc-nav a[aria-current]{color:var(--pine-d);background:var(--linen-d)} .lc-burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line); border-radius:var(--r-s);width:42px;height:42px;cursor:pointer;padding:0;color:var(--ink)} .lc-burger span{display:block;width:18px;height:2px;background:currentColor;margin:3.5px auto;border-radius:2px} @media(max-width:860px){ .lc-burger{display:block} .lc-nav{position:fixed;inset:70px 0 auto 0;background:var(--linen);flex-direction:column; align-items:stretch;gap:0;padding:8px 14px 18px;border-bottom:1px solid var(--line); box-shadow:var(--sh);display:none} .lc-nav.open{display:flex} .lc-nav a{padding:13px 10px;font-size:1.05rem;border-bottom:1px solid var(--line)} .lc-nav a:last-child{border-bottom:0} } /* ---------- buttons ---------- */ .lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--pine);color:#fff;border:0;border-radius:999px; padding:13px 26px;font:600 1rem/1 Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer; transition:background .15s,transform .15s;box-shadow:0 2px 10px rgba(10,81,51,.26)} .lc-btn:hover{background:var(--pine-d);color:#fff;transform:translateY(-1px)} .lc-btn--g{background:transparent;color:var(--pine-d);border:1.5px solid var(--pine);box-shadow:none} .lc-btn--g:hover{background:var(--pine);color:#fff} /* ink-2, not ink-3: this sits on --linen-d, where ink-3 is 4.43:1. See the note by the token. */ .lc-btn--off{background:var(--linen-d);color:var(--ink-2);box-shadow:none;cursor:default;pointer-events:none} .lc-btn--w{width:100%} /* ---------- hero ---------- */ .lc-hero{background:linear-gradient(168deg,#FCFBF5 0%,var(--linen) 58%,var(--linen-d) 100%); border-bottom:1px solid var(--line);overflow:hidden} /* minmax(0,…), not a bare fr, and it is load-bearing. A bare fr track has an automatic minimum of min-content, and the min-content of the slider column is the intrinsic width of the widest slide image (800px for the cover shot) — a scroll container zeroes its OWN min-width, not the width it contributes to the track. Without this the slider column took 880px and the h1 wrapped one word per line. */ /* padding-top/bottom, never the padding shorthand: this element carries .lc-wrap as well, and the shorthand's "0" for the sides silently cancelled the 20px gutter .lc-wrap sets. On a wide screen the centring hid it; at 500px the h1 and the lede sat flush against the edge of the display. */ .lc-hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px; align-items:center;padding-top:60px;padding-bottom:64px} .lc-hero h1{margin-top:0;margin-bottom:.4em} .lc-hero h1 em{font-style:normal;color:var(--pine)} .lc-lede{font-size:1.13rem;color:var(--ink-2);max-width:52ch;margin-bottom:26px} .lc-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .lc-stats{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px} .lc-stat b{display:block;font:600 1.6rem/1.1 Fraunces,Georgia,serif;color:var(--pine-d);letter-spacing:-.008em} .lc-stat b i{font-style:normal;font-size:.62em;color:var(--ink-3)} .lc-stat span{font-size:.85rem;color:var(--ink-3)} /* ---------- hero slider ---------- Scroll-snap, not a script. The slider sits in the hero, so its first slide is the LCP element: a JS carousel would have to boot, measure and lay out before that image is even chosen, and the mobile performance budget on this site is 90. Here the browser does the whole thing — swipe, momentum, snapping, keyboard scrolling — and /m.js only wires the two arrows, which are hidden until it does (.lc-sl--js). No JS means no dead controls and a slider that still works. No auto-advance either: content moving under a reader is a WCAG 2.2.2 problem and it would also make the LCP image a moving target. */ .lc-sl{position:relative;min-width:0} /* The padding is not spacing, it is room for the slide shadow: setting overflow-x on a box makes the other axis a scrollport too, so a shadow drawn outside the slide would be clipped flat. */ .lc-sl-track{display:flex;gap:16px;list-style:none;margin:0;padding:6px 2px 16px; overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none} .lc-sl-track::-webkit-scrollbar{display:none} /* Snap to start, not center: with a peek showing on narrow screens, center leaves the first and last slide unreachable-looking (they cannot centre themselves against the edge of the track). */ .lc-sl-track>li{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:flex} .lc-slide{display:flex;flex-direction:column;width:100%;aspect-ratio:4/3.35; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden; box-shadow:var(--sh-h);text-decoration:none;color:var(--ink);transition:box-shadow .16s} .lc-slide:hover{box-shadow:0 16px 40px rgba(20,32,22,.16);color:var(--ink)} .lc-slide-fig{flex:1;min-height:0;background:#fff} .lc-slide-fig img{width:100%;height:100%;object-fit:cover;display:block} /* Product shots are cut out on white and their aspect ratios differ by product, so they are contained rather than cropped — a cover crop here would slice the corner off a comforter. */ .lc-slide--p .lc-slide-fig img{object-fit:contain;padding:16px} /* Caption on solid ground rather than a gradient over the photograph: half these slides are near-white product cut-outs, and text laid over those cannot be kept at 4.5:1 by any overlay that still lets the product show through. */ .lc-slide-cap{background:var(--paper);border-top:1px solid var(--line);padding:14px 18px 16px} .lc-slide-k{display:block;font:600 .74rem/1 Manrope,system-ui,sans-serif;letter-spacing:.1em; text-transform:uppercase;color:var(--pine);margin-bottom:7px} /* Two lines, clamped: product names here run from 3 words to 14, and an unclamped caption would push the photograph to a different height in every slide of the same track. */ .lc-slide-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font:600 1.04rem/1.32 Fraunces,Georgia,serif;letter-spacing:-.006em;margin-bottom:9px;min-height:2.64em} .lc-slide-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-3)} .lc-slide-m b{font:600 1.06rem/1 Fraunces,Georgia,serif;color:var(--ink);letter-spacing:-.006em} .lc-sl-nav{display:none} .lc-sl--js .lc-sl-nav{display:flex;align-items:center;gap:10px;margin-top:16px} .lc-sl-b{width:40px;height:40px;padding:0;border-radius:50%;background:var(--paper); border:1px solid var(--line);color:var(--pine-d);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .lc-sl-b:hover{background:var(--pine);border-color:var(--pine);color:#fff} .lc-sl-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .lc-sl-i{font-size:.85rem;color:var(--ink-3);margin-left:2px} @media(max-width:900px){ .lc-hero-in{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:46px} .lc-sl{max-width:520px;margin:0 auto;width:100%} } /* The peek is the swipe affordance on touch, where the arrows are the least likely thing to be used: without the sliver of the next slide showing, a snap track reads as a static picture. */ @media(max-width:640px){.lc-sl-track>li{flex:0 0 88%}} /* ---------- sections ---------- */ .lc-sec{padding:64px 0} .lc-sec--alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .lc-sec-hd{max-width:62ch;margin-bottom:34px} .lc-sec-hd p{color:var(--ink-2);margin:0} .lc-sec-hd--c{margin-left:auto;margin-right:auto;text-align:center} .lc-kicker{display:block;font:600 .82rem/1 Manrope,system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:var(--pine);margin-bottom:12px} /* ---------- grids & cards ---------- */ .lc-grid{display:grid;gap:var(--gap)} .lc-grid--3{grid-template-columns:repeat(3,1fr)} .lc-grid--4{grid-template-columns:repeat(4,1fr)} .lc-grid--2{grid-template-columns:repeat(2,1fr)} @media(max-width:980px){.lc-grid--4{grid-template-columns:repeat(2,1fr)}.lc-grid--3{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.lc-grid--3,.lc-grid--4,.lc-grid--2{grid-template-columns:1fr}} .lc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .16s,transform .16s;position:relative} .lc-card:hover{box-shadow:var(--sh-h);transform:translateY(-2px)} .lc-card-img{position:relative;aspect-ratio:1/1;background:#fff;padding:16px;display:block} .lc-card-img img{width:100%;height:100%;object-fit:contain} .lc-card-bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px} /* h2,h3 because the card's heading level depends on where the grid sits — see card() in lib.js. The card must look identical either way, so both levels are styled together. */ .lc-card-bd h2,.lc-card-bd h3{margin:0;font-size:1.06rem;letter-spacing:-.006em} .lc-card-bd h2 a,.lc-card-bd h3 a{color:var(--ink);text-decoration:none} .lc-card-bd h2 a:hover,.lc-card-bd h3 a:hover{color:var(--pine-d)} .lc-card-meta{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-3);flex-wrap:wrap} .lc-card-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px} .lc-price{font:600 1.22rem/1 Fraunces,Georgia,serif;color:var(--ink);letter-spacing:-.006em} .lc-price s{color:var(--ink-3);font-size:.82rem;font-weight:400} .lc-price--na{font-size:.95rem;color:var(--ink-3);font-weight:500;font-family:Manrope,system-ui,sans-serif} .lc-flag{position:absolute;top:12px;left:12px;z-index:2;background:var(--pine);color:#fff; font:600 .73rem/1 Manrope,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase; padding:6px 11px;border-radius:999px} .lc-flag--alt{background:var(--ink);color:var(--linen)} .lc-flag--oos{background:var(--linen-d);color:var(--ink-2)} /* ditto: ink-3 fails on linen-d */ .lc-card--oos .lc-card-img img{opacity:.55;filter:grayscale(.35)} .lc-stars{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500} /* Three families carry no public rating at all. The row keeps its height and reads as a plain statement instead of five empty stars, which would claim a score of zero. */ .lc-stars--na{color:var(--ink-3);font-weight:400;font-size:.86rem;font-style:italic;min-height:13px} .lc-rate{position:relative;display:inline-block;height:13px;flex:none} .lc-rate-bg,.lc-rate-fg{display:flex;gap:2px;line-height:0} .lc-rate-fg{position:absolute;top:0;left:0;overflow:hidden} .lc-rate svg{width:13px;height:13px;flex:none} .lc-rate-bg svg{fill:#D9DFD1} .lc-rate-fg svg{fill:#E8A33D} .lc-swatch{display:flex;gap:5px;flex-wrap:wrap} .lc-swatch i{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);display:block} /* Row under a truncated grid. Centred, because it is the end of the block, not a caption. */ .lc-more{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px} .lc-more span{font-size:.9rem;color:var(--ink-3)} /* ---------- category tiles ---------- */ .lc-tile{position:relative;display:block;background:var(--paper);border:1px solid var(--line); border-radius:var(--r);padding:26px;text-decoration:none;color:var(--ink); transition:box-shadow .16s,transform .16s;overflow:hidden} .lc-tile:hover{box-shadow:var(--sh-h);transform:translateY(-2px);color:var(--ink)} .lc-tile h3{margin:0 0 6px;font-size:1.3rem} .lc-tile p{color:var(--ink-2);font-size:.95rem;margin:0 0 14px} .lc-tile-n{font:600 .84rem/1 Manrope,system-ui,sans-serif;color:var(--pine-d);letter-spacing:.02em} .lc-tile-ic{width:46px;height:46px;border-radius:12px;background:var(--linen); display:flex;align-items:center;justify-content:center;margin-bottom:16px} .lc-tile-ic svg{width:24px;height:24px;stroke:var(--pine);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ---------- product page ---------- */ .lc-crumb{font-size:.88rem;color:var(--ink-3);padding:18px 0 0} .lc-crumb a{color:var(--ink-3);text-decoration:none} .lc-crumb a:hover{color:var(--pine-d);text-decoration:underline} .lc-crumb span{margin:0 7px;opacity:.5} .lc-pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:26px 0 56px;align-items:start} @media(max-width:900px){.lc-pdp{grid-template-columns:1fr;gap:28px;padding-bottom:40px}} .lc-gal-main{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); aspect-ratio:1/1;padding:26px;position:relative} .lc-gal-main img{width:100%;height:100%;object-fit:contain} .lc-thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap} .lc-thumb{width:64px;height:64px;border:1.5px solid var(--line);border-radius:var(--r-s); background:var(--paper);padding:5px;cursor:pointer;flex:0 0 auto} .lc-thumb img{width:100%;height:100%;object-fit:contain} .lc-thumb[aria-pressed=true]{border-color:var(--pine);box-shadow:0 0 0 2px rgba(10,81,51,.16)} .lc-thumb--oos img{opacity:.45;filter:grayscale(.5)} .lc-pdp h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.35em} /* The tagline sits directly under the h1 here, not at the top of a page, so it needs the spacing of a subtitle rather than the 26px .lc-lede uses to separate itself from a block of buttons. */ .lc-pdp .lc-lede{margin-bottom:14px} .lc-pdp-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;font-size:.93rem;color:var(--ink-2)} .lc-buy{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:22px 0} .lc-buy-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px} .lc-buy-row .lc-price{font-size:2rem} .lc-buy-note{font-size:.84rem;color:var(--ink-3);margin:10px 0 0} .lc-oos{background:var(--linen-d);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:22px 0} .lc-oos b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.05rem;margin-bottom:4px;color:var(--ink)} .lc-oos p{margin:0;font-size:.94rem;color:var(--ink-2)} .lc-vars{margin:20px 0} .lc-vars h2{font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-family:Manrope,system-ui,sans-serif;font-weight:600} .lc-var{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-s); background:var(--paper);text-decoration:none;color:var(--ink);margin-bottom:7px;font-size:.95rem} .lc-var:hover{border-color:var(--pine);color:var(--ink)} .lc-var em{font-style:normal;color:var(--ink-3);font-size:.87rem} .lc-var b{font-weight:600;font-family:Fraunces,Georgia,serif} .lc-var--oos{opacity:.6} .lc-feat{margin:0;padding:0;list-style:none} .lc-feat li{position:relative;padding-left:26px;margin:.55em 0;color:var(--ink-2)} .lc-feat li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--pine)} .lc-spec{width:100%;border-collapse:collapse;font-size:.94rem;margin:0 0 1em} .lc-spec th,.lc-spec td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} .lc-spec th{color:var(--ink-3);font-weight:500;width:40%} /* Two columns for the PDP detail sections. Not .lc-grid--2, which is a card grid and breaks to one column at 640px: prose columns have to break much earlier, at the same 900px where the gallery and the info column stack, or the reading measure drops to about 30 characters on a tablet. */ .lc-pdp-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} @media(max-width:900px){.lc-pdp-2{grid-template-columns:1fr;gap:32px}} /* Provenance lines and footnotes. Replaces three near-identical inline styles in pages.js; the size is above 0.86rem deliberately, because at that size --ink-3 needs the full 4.5:1 it only just clears (see the contrast note in CLAUDE.md). */ .lc-fine{font-size:.89rem;color:var(--ink-3)} /* .lc-stats is a top-bordered strip with no bottom margin, so a footnote after it landed against the labels. Adjacent sibling rather than a modifier class: the relationship is the whole reason the spacing exists. */ .lc-stats+.lc-fine{margin-top:15px} /* Reading measure for the single-column sections. 800px, not a ch value, because these wrap a whole section including a table, and a ch measure would be set by the font of the heading. */ .lc-narrow{max-width:800px} /* The three or four numbers a reader wants next to the price: how many sizes it is cut in, how many colourways, what it weighs. All of them exist elsewhere on the page in a table lower down — the point of the strip is that nobody scrolls to a table before deciding to care. */ .lc-facts{display:flex;gap:26px;flex-wrap:wrap;list-style:none;margin:0 0 22px;padding:0} .lc-facts b{display:block;font:600 1.22rem/1.15 Fraunces,Georgia,serif;letter-spacing:-.008em;color:var(--ink)} .lc-facts span{font-size:.83rem;color:var(--ink-3)} /* Size list. A