/* Expressive Heritage component layer.
   Loaded after styles.css / vendors.css on every page, so these rules win over the older ones they share a selector with.
   Colors, fonts and the type scale come from tokens.css.
   The 3D showcase mechanics stay in styles.css and web/tilt.js: only its labels' type and colors are set here. */

/* ---------- Base ---------- */
:root{color-scheme:light}
body{font-family:var(--wl-font-interface);font-size:var(--wl-type-body);line-height:1.6;color:var(--wl-ink);background:var(--wl-paper);font-optical-sizing:auto}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--wl-focus);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2{font-family:var(--wl-font-editorial);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:500}
h3{text-wrap:balance}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase}
.preview-bar{background:var(--wl-beige);color:var(--wl-gold-ink);font-size:12px;letter-spacing:.06em;padding:8px 16px}
.skip{top:8px;left:16px;background:var(--wl-navy);color:var(--wl-ivory);border-radius:var(--wl-radius-control);font-weight:600;font-size:14px;text-decoration:none}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap}

/* ---------- Header: one navigation on every page ---------- */
.site-header{background:var(--wl-paper);color:var(--wl-ink);border-bottom:1px solid var(--wl-line)}
/* Sticky on single-row desktops only (above 1000px). Below that the header wraps to three rows and the phone dock already carries navigation. */
@media(min-width:1001px){
 .site-header{position:sticky;top:0;z-index:40;transition:box-shadow var(--wl-duration-feedback)}
 .site-header.is-stuck{box-shadow:0 1px 8px #25314A14}
 html{scroll-padding-top:calc(var(--sticky-offset,104px) + var(--wl-space-4))}
 /* The Make a card preview sticks below the header (its legacy top:25px sat underneath it). */
 .custom-display{top:calc(var(--sticky-offset,104px) + var(--wl-space-4))}
}
.site-header .masthead{display:flex;align-items:center;gap:32px;min-height:0;padding-block:12px}
.site-header .brand{display:inline-flex;align-items:center;flex-shrink:0;margin-right:0}
.site-header .brand img{display:block;height:var(--wl-logo-height);width:auto;aspect-ratio:928/705;max-width:none}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--wl-radius-control);font-size:15px;font-weight:500;color:var(--wl-muted);transition:color var(--wl-duration-feedback),background-color var(--wl-duration-feedback)}
.site-nav a:hover{color:var(--wl-ink);background:var(--wl-beige)}
.site-nav a[aria-current=page]{color:var(--wl-ink);font-weight:600;box-shadow:inset 0 -2px var(--wl-navy);border-radius:0}
.site-nav a[aria-current=page]:hover{background:none}
.header-tools{display:flex;align-items:center;gap:20px;flex:1;min-width:0;justify-content:flex-end}
.site-header #search-form{flex:1;max-width:460px;height:44px;margin:0;border:1px solid var(--wl-border);border-radius:var(--wl-radius-control);background:var(--wl-surface)}
.site-header #search{font-size:15px;padding:0 14px}
#search::placeholder{color:var(--wl-muted)}
.site-header #search-form button{width:46px;background:var(--wl-navy);color:var(--wl-ivory)}
.header-action{color:var(--wl-ink);font-size:14px;font-weight:500}
.header-tools .header-contact span{display:inline}
.header-action b{background:var(--wl-navy);color:var(--wl-ivory);font-size:11px}
.site-nav:last-child{margin-left:auto}

@media(max-width:1000px){
 .site-header .masthead{flex-wrap:wrap;gap:8px 16px}
 .site-header .brand{margin-right:auto}
 .header-tools{display:contents}
 .header-action span{display:none}
 .header-tools .header-contact span{display:inline}
 .header-search{justify-content:center;min-width:44px}
 .site-header #search-form{order:5;flex-basis:100%;max-width:none}
 .site-nav{order:4;flex-basis:100%;border-top:1px solid var(--wl-line);padding-top:4px;margin-left:0!important}
 .site-nav a{padding:0 12px}
 .site-nav a:first-child{padding-left:0}
}
@media(max-width:550px){
 .site-header .masthead{padding-block:10px 12px}
 .site-nav{justify-content:space-between;gap:0}
 .site-nav a{padding:0 4px;font-size:15px}
 .site-nav .nav-shop{white-space:nowrap}
 .site-header #search-form{height:44px}
 .site-header #search{font-size:16px}
}

@media(max-width:380px){.site-nav a{font-size:13px;padding:0}}

/* ---------- Buttons and controls ---------- */
.button{gap:14px;min-height:48px;padding:13px 22px;border-radius:var(--wl-radius-control);font-size:var(--wl-type-button);font-weight:600;line-height:1.3;transition:background-color var(--wl-duration-feedback),transform var(--wl-duration-press) var(--wl-ease-out)}
.button:hover{transform:none}
.button:active,.add-button:active,.filter-button:active{transform:scale(.98)}
.gold{background:var(--wl-gold);color:var(--wl-navy)}
.gold:hover{background:var(--wl-gold-hover)}
.navy,.add-button{background:var(--wl-navy);color:var(--wl-ivory)}
.navy:hover,.add-button:hover{background:var(--wl-collector-blue)}
.outline{border:1px solid var(--wl-navy);background:transparent;color:var(--wl-navy)}
.outline:hover{background:var(--wl-beige)}
.add-button{min-height:44px;padding:11px 16px;border-radius:var(--wl-radius-control);font-size:var(--wl-type-button);font-weight:600;gap:12px;transition:background-color var(--wl-duration-feedback),transform var(--wl-duration-press) var(--wl-ease-out)}
.add-button.added{background:var(--wl-success)}
.text-link{font-size:var(--wl-type-button);font-weight:600;border-bottom-color:var(--wl-gold-ink)}
.filter-button,.sort-label select{min-height:44px;border:1px solid var(--wl-border);border-radius:var(--wl-radius-control);background:var(--wl-surface);color:var(--wl-ink);font-size:14px}
.saved-toggle[aria-pressed=true]{background:var(--wl-navy);border-color:var(--wl-navy);color:var(--wl-ivory)}
.saved-toggle[aria-pressed=true] svg{fill:currentColor}
.filter-button b{background:var(--wl-navy);color:var(--wl-ivory);font-size:11px;width:19px;height:19px}
.filter-chip{font-size:13px;min-height:36px;border-color:var(--wl-line);background:var(--wl-beige)}

/* ---------- Hero copy (the stage itself is unchanged) ---------- */
.hero{background:var(--wl-navy)}
.hero h1{font-size:clamp(40px,2.2rem + 2vw,var(--wl-type-hero));line-height:1.08;letter-spacing:-.02em}
.hero-copy .eyebrow{font-size:12px;letter-spacing:.16em}
.hero-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#C9D0DC}
.hero-copy .button{font-size:var(--wl-type-button)}
/* Same eyebrow type as "The White Lotus Edit"; the slate color keeps it secondary to the headline and card art. */
.stage-top>span{font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:#AEB7C6}
.motion-toggle{font-size:13px}
.stage-controls span{font-size:12px;letter-spacing:.12em;color:var(--wl-gold)}
.stage-controls p{font-size:16px}
.hero-thumbs button span{font-size:13px}
.hero-thumbs button{background:#1F2A40}
.gesture-hint{font-size:13px;color:#AEB7C6}
.hero-name-box{display:grid}
.hero-name-box>p{grid-area:1/1}
.hero-name-sizer{display:grid;visibility:hidden}
.hero-name-box .hero-name-sizer>span{grid-area:1/1;font:inherit;letter-spacing:inherit;color:inherit}
/* Autoplay pause/play: a small round control at the end of the thumbnail row, styled like the stage arrows. The row keeps the thumbnails' height, so nothing shifts. */
.hero-thumb-row{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
.hero-autoplay{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;margin-left:4px;border:1px solid #D4C6A235;border-radius:50%;background:transparent;color:#D9C38F;transition:border-color var(--wl-duration-feedback),color var(--wl-duration-feedback)}
.hero-autoplay:hover{border-color:var(--wl-gold);color:var(--wl-gold)}
.hero-autoplay:focus-visible{outline:3px solid var(--wl-gold);outline-offset:3px}
.hero-autoplay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-autoplay svg path[d^="M8 5.5"]{fill:currentColor;stroke-width:1.5}
@media(max-width:800px){.hero-thumb-row{gap:6px}}
@media(max-width:550px){.hero-thumb-row{gap:6px}.hero-autoplay{width:44px;height:44px}}

/* Hero service CTAs: two equal, solid ivory buttons (navy label + arrow) for the custom and wholesale services.
   "Explore the collection" is a tertiary text link on its own line directly beneath them.
   The grid stacks the buttons instead of letting a label wrap when the column gets narrow.
   Extra bottom padding sits the copy slightly above centre, nearer the card's optical centre (the stage controls weigh the showcase down). */
.hero{--hero-inset:59px}
.hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:40px 40px 64px var(--hero-inset)}
.hero-copy>.eyebrow{margin-bottom:16px}
.hero h1{margin-bottom:16px}
.hero-copy>p:not(.eyebrow){margin-bottom:36px}
.hero-ctas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),240px));gap:12px}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 20px;border:1px solid var(--wl-ivory);border-radius:var(--wl-radius-control);background:var(--wl-ivory);color:var(--wl-navy);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:.01em;white-space:nowrap;text-decoration:none;transition:border-color var(--wl-duration-feedback),background-color var(--wl-duration-feedback),transform var(--wl-duration-press) var(--wl-ease-out)}
.hero-cta span{font-size:17px;color:var(--wl-navy);transition:transform var(--wl-duration-feedback) var(--wl-ease-out)}
.hero-cta:hover{border-color:var(--wl-gold);background:#F6E6C8}
.hero-cta:hover span{transform:translateX(3px)}
.hero-cta:active{transform:scale(.98);border-color:var(--wl-gold);background:var(--wl-gold)}
.hero-cta:focus-visible,.hero-explore:focus-visible{outline:3px solid var(--wl-gold);outline-offset:3px}
.hero-more{display:flex;margin-top:16px}
.hero-explore{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:#C9D0DC;text-decoration:underline;text-decoration-color:#F0C78180;text-decoration-thickness:1px;text-underline-offset:6px;transition:color var(--wl-duration-feedback),text-decoration-color var(--wl-duration-feedback)}
.hero-explore:hover{color:var(--wl-ivory);text-decoration-color:var(--wl-gold)}
@media(prefers-reduced-motion:reduce){.hero-cta,.hero-cta span{transition:none}.hero-cta:hover span,.hero-cta:active{transform:none}}
@media(min-width:1500px){.hero{--hero-inset:72px}.hero-copy{padding:56px 48px 72px var(--hero-inset)}}
@media(max-width:1150px){.hero{--hero-inset:35px}.hero-copy{padding:36px 24px 64px var(--hero-inset)}.hero-cta{font-size:15px}}
@media(max-width:1000px){.hero-copy>p:not(.eyebrow){margin-bottom:28px}.hero-copy>p br{display:none}.hero-ctas{gap:10px}.hero-more{margin-top:12px}}
@media(max-width:800px){.hero{--hero-inset:28px}.hero-copy{padding:32px 16px 84px var(--hero-inset)}}
/* Hero signature: the fan-art line sits in the copy column's bottom corner (same grid cell as the copy, aligned to the end),
   sharing the showcase's bottom padding and line box so it lines up with "Drag sideways to tilt". The copy's bottom padding (64px; 84px below 800px, where the line can wrap)
   keeps the signature clear of the copy at every width. On phones it follows the showcase. */
@media(min-width:551px){.hero-copy,.hero-signature{grid-column:1;grid-row:1}.hero>.showcase{grid-column:2;grid-row:1}}
.hero-signature{align-self:end;position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:0;padding:0 24px 20px var(--hero-inset);font-family:var(--wl-font-ui);font-size:13px;font-weight:500;line-height:1.7;color:#AEB7C6}
.hero-signature span{font-size:15px;color:var(--wl-gold)}
@media(max-width:800px){.hero-signature{padding-bottom:18px}}
@media(max-width:550px){.hero-signature{justify-content:center;padding:14px 20px 22px;border-top:1px solid #FFFFFF12}}
/* Phones: tighter rhythm so both CTAs clear the fixed bottom dock on a 360x740 screen; on shorter screens, focused links scroll clear of it. */
@media(max-width:550px){.hero{margin-top:12px}.hero-copy{padding:22px 20px 24px}.hero-copy>.eyebrow,.hero h1{margin-bottom:12px}.hero-copy>p:not(.eyebrow){line-height:1.5;margin-bottom:20px}.hero-ctas{grid-template-columns:1fr;gap:8px}.hero-cta{font-size:16px}}
@media(max-width:550px){html{scroll-padding-bottom:88px}}
/* ---------- Strips and banners ---------- */
.collection-strip{font-size:12px;letter-spacing:.14em;color:var(--wl-muted);gap:24px}
.collection-strip i{background:var(--wl-gold-ink)}
.vendor-banner{background:var(--wl-collector-blue);border-color:#F0C78155;border-radius:var(--wl-radius-art)}
.vendor-banner .eyebrow{font-size:12px;color:var(--wl-gold)}
.vendor-banner h2{font-size:var(--wl-type-subheading);line-height:1.3}
.vendor-banner p:last-child{font-size:15px;color:#C9D0DC}
.vendor-banner .button{font-size:var(--wl-type-button)}
/* The whole banner is the Contact Us link; its button is a visual cue, not a second control. */
a.vendor-banner{color:#fff;text-decoration:none;transition:border-color var(--wl-duration-feedback)}
a.vendor-banner:hover{border-color:var(--wl-gold)}
a.vendor-banner:hover .button{background:var(--wl-gold-hover)}
a.vendor-banner:focus-visible{outline:3px solid var(--wl-gold);outline-offset:3px}

/* ---------- Shop ---------- */
.section-heading{align-items:flex-end}
.section-heading .eyebrow{color:var(--wl-gold-ink);margin-bottom:8px}
.section-heading h1{font-weight:500;margin-bottom:0}
.section-heading h2,.shop h2#shop-title,.section-heading h1{font-size:clamp(32px,1.6rem + 1.4vw,var(--wl-type-section));line-height:1.15;letter-spacing:-.02em}
.section-heading>p{font-size:15px;color:var(--wl-muted)}
.catalog-toolbar{align-items:center;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.catalog-toolbar,.shop>*{min-width:0;max-width:100%}
.category-tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
.category-tabs button{min-height:40px;padding:0 16px;border:1px solid var(--wl-line);border-radius:999px;background:var(--wl-surface);color:var(--wl-ink);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color var(--wl-duration-feedback),border-color var(--wl-duration-feedback)}
.category-tabs button:hover{border-color:var(--wl-border)}
.category-tabs button.active{background:var(--wl-navy);border-color:var(--wl-navy);color:var(--wl-ivory)}
.category-tabs button span{font-size:12px;margin-left:6px;opacity:.75}
.result-count{font-size:13px;color:var(--wl-muted);margin:0 0 16px}
.product-grid{gap:32px 24px}
.product-visual{background-color:var(--wl-beige);border-color:var(--wl-line);border-radius:var(--wl-radius-art)}
.save{background:#FFFFFFE6;border-color:var(--wl-line);color:var(--wl-muted)}
.save[aria-pressed=true]{color:var(--wl-gold-ink)}
.save[aria-pressed=true] svg{fill:var(--wl-gold)}
.inspect-label{font-size:12px;color:var(--wl-muted)}
.product{display:flex;flex-direction:column}
.product-copy{padding:16px 2px 4px;flex:1;display:flex;flex-direction:column}
.product-bottom{margin-top:auto}
.section-heading .eyebrow,.hero-copy .eyebrow,.closer .eyebrow,.detail-copy .eyebrow,.drawer-heading .eyebrow{font-size:12px;letter-spacing:.14em}
.product-kicker{font-size:12px;letter-spacing:.12em;color:var(--wl-gold-ink);margin-bottom:6px}
.product h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;font-weight:600;margin-bottom:4px}
.descriptor{font-size:14px;color:var(--wl-muted);margin:0 0 14px}
.price{font-size:20px;font-weight:600;letter-spacing:-.01em}
.price-note{font-size:12px;color:var(--wl-muted)}
.catalog-note{font-size:13px;line-height:1.7}
.empty h3{font-family:var(--wl-font-editorial);font-weight:600;font-size:var(--wl-type-subheading)}
.empty p{font-size:15px}
.closer{background:var(--wl-beige);border-radius:var(--wl-radius-art)}
.closer-mark{border-right-color:var(--wl-line)}
.closer-mark img{width:132px;height:auto;aspect-ratio:928/519}
.closer .eyebrow{font-size:12px;color:var(--wl-gold-ink)}
.closer h2{font-size:var(--wl-type-subheading);line-height:1.3}
.closer p:last-child{font-size:15px;line-height:1.7}
/* Homepage preview: three cards in the three-column grid, four on two-column screens so the rows stay even. */
.preview-grid .product:nth-child(n+4){display:none}
/* Spacing follows the design tokens: heading 40, columns 24, art-to-label 20, copy-to-actions 24, cards-to-CTA 48, CTA-to-banner 88 (56 on phones). */
.shop-preview{padding-bottom:0}
.shop-preview .section-heading{margin-bottom:var(--wl-space-8)}
.preview-grid{column-gap:var(--wl-space-6);row-gap:var(--wl-space-12)}
.preview-grid .product-copy{padding-top:20px}
.preview-grid .descriptor{margin-bottom:var(--wl-space-6)}
.preview-more{display:flex;justify-content:center;margin:var(--wl-space-12) 0 0}
.preview-more .button{min-width:260px}
.view-button{background:transparent;color:var(--wl-ink);border:1px solid var(--wl-navy)}
.view-button:hover{background:var(--wl-beige);color:var(--wl-ink)}
/* The Contact banner closes the page as its own section, clear of the collection above and the footer below. */
.shop-preview+.vendor-banner{margin-top:calc(var(--wl-space-20) + var(--wl-space-2));margin-bottom:var(--wl-space-16)}
/* Shop page: category tabs plus a More menu for categories beyond the visible row; Load More reveals the next batch. */
.category-nav{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.category-nav .category-tabs{flex:0 1 auto}
.category-more{position:relative;flex-shrink:0}
.category-more summary{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 16px;border:1px solid var(--wl-line);border-radius:999px;background:var(--wl-surface);color:var(--wl-ink);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;list-style:none}
.category-more summary::-webkit-details-marker{display:none}
.category-more summary:hover{border-color:var(--wl-border)}
.category-more summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--wl-duration-feedback)}
.category-more[open] summary svg{transform:rotate(180deg)}
.category-more.active summary{background:var(--wl-navy);border-color:var(--wl-navy);color:var(--wl-ivory)}
.category-menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:200px;padding:6px;display:grid;gap:2px;background:var(--wl-surface);border:1px solid var(--wl-line);border-radius:var(--wl-radius-control);box-shadow:0 12px 32px #25314A1F}
.category-menu button{min-height:40px;padding:0 12px;text-align:left;border-radius:6px;background:none;color:var(--wl-ink);font-size:14px;font-weight:500}
.category-empty{margin:0;white-space:nowrap;padding:10px 12px;color:var(--wl-muted);font-size:14px;line-height:1.4}
.category-menu button:hover{background:var(--wl-surface-muted)}
.category-menu button.active{background:var(--wl-navy);color:var(--wl-ivory)}
.filter-context{margin:0 0 var(--wl-space-4);font-size:14px;color:var(--wl-muted)}
.reset-all{min-height:36px;padding:0 var(--wl-space-2);font-size:13px;font-weight:600;color:var(--wl-ink);text-decoration:underline;text-underline-offset:3px}
#clear-filters:disabled{opacity:.45;cursor:default}
.load-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin:40px 0 4px}
.load-more p{font-size:13px;color:var(--wl-muted);margin:0}
.load-more .button{min-width:220px}

@media(max-width:800px){
 .catalog-toolbar{flex-direction:column;align-items:stretch}
 .category-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-inline:-2px;padding-inline:2px}
 .toolbar-actions{justify-content:flex-end}
 .preview-grid .product:nth-child(4){display:flex}
 .category-menu{left:auto;right:0}
}
@media(max-width:550px){
 .shop-preview+.vendor-banner{margin-top:calc(var(--wl-space-12) + var(--wl-space-2));margin-bottom:var(--wl-space-12)}
 .preview-grid{column-gap:12px}
 .preview-more .button{width:100%}
 .section-heading{flex-direction:column;align-items:flex-start;gap:6px}
 .section-heading>p{max-width:none;text-align:left;font-size:15px}
 .toolbar-actions{display:grid;grid-template-columns:auto auto 1fr;gap:8px}
 .sort-label select{max-width:none;width:100%;font-size:16px}
 .filter-button{font-size:14px}
 .product-grid{gap:28px 12px}
 .product-kicker{font-size:11px;letter-spacing:.08em}
 .product h3{font-size:16px;min-height:0}
 .descriptor{font-size:13px;margin-bottom:10px}
 .price{font-size:18px}
 .price-note{font-size:12px}
 .add-button{font-size:14px;justify-content:space-between}
 .inspect-label{display:none}
 .section-heading .eyebrow,.hero-copy .eyebrow,.closer .eyebrow,.detail-copy .eyebrow,.drawer-heading .eyebrow{font-size:11px;letter-spacing:.12em}
 .catalog-note{font-size:13px}
 .collection-strip{font-size:11px;letter-spacing:.1em}
 /* Phones show all three phrases, centered and wrapping, instead of hiding the last one. */
 .collection-strip{flex-wrap:wrap;justify-content:center;gap:6px 20px;text-align:center}
 .collection-strip span:last-child{display:inline}
 .collection-strip i{display:none}
 .closer .eyebrow{font-size:11px}
 .vendor-banner .eyebrow{font-size:11px}
 .hero-copy .eyebrow{font-size:11px}
 .hero-copy>p:not(.eyebrow){font-size:16px}
 .stage-top>span{font-size:11px;letter-spacing:.12em}
}

/* ---------- Dialogs and bag ---------- */
dialog{color:var(--wl-ink)}
dialog::backdrop{background:#25314AB3}
.dialog-top>span{font-size:12px;letter-spacing:.14em;color:var(--wl-muted)}
.close:hover{background:var(--wl-beige)}
.detail-gallery{background-color:var(--wl-beige)}
.detail-copy .eyebrow,.drawer-heading .eyebrow{font-size:12px;color:var(--wl-gold-ink)}
.detail-copy h2{font-size:clamp(28px,1.4rem + 1vw,34px);line-height:1.2}
.detail-description{font-size:16px;line-height:1.7}
.detail-price>span:last-child{font-size:13px}
.detail-copy .view-bag{font-size:14px;color:var(--wl-ink)}
.detail-copy dl{font-size:14px}
.viewer-controls button{font-size:14px}
.viewer-hint,.viewer-disclaimer,.preview-message{font-size:13px}
.drawer-heading h2,.info-dialog h2{font-size:28px}
.filter-dialog legend{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.filter-dialog fieldset label{font-size:16px}
.cart-item h3{font-size:16px;font-weight:600}
.cart-item p{font-size:15px}
.quantity span{font-size:15px}
.cart-caption,.checkout-note{font-size:13px}
.subtotal{font-size:16px}
.info-dialog p{font-size:15px;line-height:1.7}
.toast{background:var(--wl-navy);color:var(--wl-ivory);border-color:var(--wl-gold);font-size:14px;border-radius:var(--wl-radius-control)}
.mobile-dock{background:color-mix(in srgb,var(--wl-navy) 97%,transparent);color:#D9DEE7}
.mobile-dock>a,.mobile-dock>button{font-size:12px}
.mobile-dock b{background:var(--wl-gold);color:var(--wl-navy);font-size:11px}

/* Filter sheet on phones: the sticky action bar sits flush with the sheet's bottom edge so options never show beneath it */
@media(max-width:550px){
 .filter-dialog{padding-bottom:0}
 .sheet-actions{padding:16px 0 calc(16px + env(safe-area-inset-bottom));background:var(--wl-surface);border-top:1px solid var(--wl-line)}
}

/* ---------- Footer ---------- */
footer{background:var(--wl-navy)}
.footer-brand{display:inline-block}
.footer-brand img{display:block;width:150px;height:auto;aspect-ratio:928/705}
.footer-grid p,.b2b-footer p{font-size:14px;line-height:1.7;color:#C9D0DC}
.footer-grid h3{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#AEB7C6}
.footer-grid>div>a:not(.footer-brand),.footer-grid button,.b2b-footer>div:last-child{font-size:15px;color:#D9DEE7}
.footer-grid>div>a:not(.footer-brand):hover,.footer-grid button:hover,.b2b-footer a:hover{color:var(--wl-gold)}
.footer-bottom{font-size:13px;color:#AEB7C6}
@media(max-width:700px){.footer-brand img{width:132px}}

/* ---------- Make a card and For vendors pages ---------- */
.b2b-hero h1,.custom-heading h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(40px,2.2rem + 2vw,var(--wl-type-hero))}
.b2b-section-title h2,.process-heading h2,.consultation h2,.b2b-faq h2,.brand-upsell h2{font-weight:600;letter-spacing:-.02em;font-size:clamp(30px,1.5rem + 1.3vw,var(--wl-type-section))}
.custom-heading h1 em{color:var(--wl-gold-ink)}
.back-link,.b2b-small,.scope-note,.field label,.consent,.optional-details summary{font-size:14px}
.field-hint,.field-error,.form-privacy,.form-footnote,.optional-details summary>span,.field label>.optional-label{font-size:13px}
.field input,.field select,.field textarea{font-size:16px}
.display-label,.display-caption,.b2b-strip{font-size:12px}
.consultation-copy>.eyebrow,.form-heading>span{font-size:12px}
.process-grid span,.process-grid p,.custom-steps span{font-size:14px}
.wholesale-price>span{font-size:12px}
.wholesale-price p,.proof-strip span,.calc-controls label,.calc-controls>p,.calc-takeaway small,.calc-note,.custom-price small,.custom-display>p,.custom-display>small,.upload-zone>small,.custom-total small,.custom-total p,.margin-comparison article>p:last-child,.lead time,.lead-ref{font-size:13px}
.brand-upsell p:not(.eyebrow){font-size:16px}
.upload-zone{border-color:var(--wl-border);border-radius:var(--wl-radius-art)}
@media(max-width:700px){.b2b-strip{font-size:11px;letter-spacing:.06em}.display-label,.display-caption{font-size:11px}}

/* ---------- Contact page ---------- */
.contact-main{padding-block:35px 80px}
.contact-heading{max-width:720px}
.contact-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:48px}
.contact-paths:focus{outline:none}
.contact-path{display:flex;flex-direction:column;align-items:flex-start;padding:32px 28px 28px;background:var(--wl-surface);border:1px solid var(--wl-line);border-radius:var(--wl-radius-art)}
.contact-path-number{font-family:var(--wl-font-editorial);font-size:var(--wl-type-subheading);color:var(--wl-gold-ink);line-height:1;margin-bottom:24px}
.contact-path .eyebrow{color:var(--wl-gold-ink);margin:0 0 8px}
.contact-path h2{font-size:var(--wl-type-subheading);line-height:1.3;margin:0 0 12px}
.contact-path p:not(.eyebrow){font-size:15px;line-height:1.7;color:var(--wl-muted);margin:0 0 24px}
.contact-path .button{margin-top:auto}
.contact-address{margin-top:12px;font-size:var(--wl-type-caption);color:var(--wl-muted);overflow-wrap:anywhere}
.contact-follow{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px;background:var(--wl-beige);border-radius:var(--wl-radius-art)}
.contact-follow .eyebrow{color:var(--wl-gold-ink);margin:0 0 8px}
.contact-follow h2{font-size:var(--wl-type-subheading);line-height:1.3;margin:0 0 4px}
.contact-follow p:not(.eyebrow){font-size:15px;color:var(--wl-muted);margin:0}
.contact-social{display:flex;flex-wrap:wrap;gap:8px 24px}
.contact-social a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--wl-ink)}
.contact-social a:hover{color:var(--wl-gold-ink)}
@media(max-width:1000px){.contact-paths{grid-template-columns:1fr;gap:16px}.contact-path .button{margin-top:0}}
@media(max-width:700px){.contact-main{padding-block:25px 56px}.contact-follow{flex-direction:column;align-items:flex-start;gap:12px;padding:24px}}
@media(max-width:550px){.contact-path{padding:24px 20px}.contact-path-number{margin-bottom:16px}.contact-path .button{width:100%;justify-content:space-between}}

/* Vendor upsell placeholder card: the lotus symbol stands in for "your brand"; the card is not rotated so the mark isn't either. */
.upsell-card{transform:none;background:var(--wl-collector-blue)}

/* ---------- Make a card introduction ---------- */
/* A short, functional heading row: the heading sits over the preview column and the one-line explanation over the form column. Price lives at the top of the form. */
.custom-main{padding-block:var(--wl-space-8) var(--wl-space-20)}
.custom-heading{display:grid;grid-template-columns:1fr 1.1fr;gap:0 55px;align-items:baseline;margin-bottom:var(--wl-space-6)}
.custom-heading h1{font-family:var(--wl-font-editorial);font-weight:600;font-size:clamp(32px,1.5rem + 1.4vw,44px);line-height:1.1;letter-spacing:-.02em;margin:0}
.custom-heading>p:not(.eyebrow){margin:0;font-size:16px;line-height:1.6;color:var(--wl-muted)}
.custom-form-heading{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--wl-space-2) var(--wl-space-4)}
.custom-form-heading h2{margin:0;font-family:var(--wl-font-ui);font-size:18px;font-weight:600;letter-spacing:0;color:var(--wl-ink)}
.custom-form-heading .custom-price{display:block;margin:0;font-size:14px;color:var(--wl-muted);white-space:nowrap}
.custom-form-heading .custom-price strong{font-family:var(--wl-font-editorial);font-size:24px;font-weight:600;color:var(--wl-ink);margin-right:2px}
.custom-form-heading .custom-form-note{grid-column:1/-1;margin:0;font-size:14px;line-height:1.5}
@media(max-width:1000px){.custom-heading{gap:0 25px}}
@media(max-width:800px){.custom-heading{grid-template-columns:1fr;gap:var(--wl-space-2)}.custom-main{padding-block:var(--wl-space-6) var(--wl-space-16)}}

/* ---------- Storefront pages (Pocket Cosmos) ---------- */
/* With no category row the toolbar holds only Saved and Sort, so they sit on the right as they do on the Shop. */
body[data-storefront] .catalog-toolbar{justify-content:flex-end}
@media(max-width:550px){body[data-storefront] .catalog-toolbar{justify-content:stretch}}
/* Numbered pages (12 cards each) with Previous / Next; the current page is navy, like the active Shop pill. */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin:var(--wl-space-12) 0 var(--wl-space-6)}
.pagination[hidden]{display:none}
.pagination ol{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pagination a,.page-step{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--wl-line);border-radius:var(--wl-radius-control);background:var(--wl-surface);color:var(--wl-ink);font-size:15px;font-weight:600;text-decoration:none;transition:background-color var(--wl-duration-feedback)}
.pagination a:hover{background:var(--wl-beige)}
.pagination a[aria-current=page]{background:var(--wl-navy);border-color:var(--wl-navy);color:var(--wl-ivory)}
.page-step[aria-disabled=true]{color:var(--wl-border);background:transparent}
.page-gap{display:flex;align-items:flex-end;padding:0 2px 10px;color:var(--wl-muted)}
.page-count{flex-basis:100%;margin:0;text-align:center;font-size:13px;color:var(--wl-muted)}
/* Local development preview of cards not yet published (Show on Website unchecked). Never rendered for visitors. */
.preview-note{margin:0 0 var(--wl-space-6);padding:12px 16px;border:1px dashed var(--wl-gold-ink);border-radius:var(--wl-radius-control);background:var(--wl-beige);font-size:14px;line-height:1.6}
.preview-note b{margin-right:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wl-gold-ink)}
.preview-badge{position:absolute;left:12px;top:12px;z-index:3;padding:4px 10px;border-radius:999px;background:var(--wl-navy);color:var(--wl-ivory);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:550px){.pagination{gap:8px}.page-step{padding:0}.page-step-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.pagination ol{gap:4px}.preview-badge{left:8px;top:8px;padding:3px 8px;font-size:10px;letter-spacing:.04em}}

/* ---------- Coming Soon pages ---------- */
/* Shown in production in place of an unfinished feature (see launch.config.json). Plain and calm: one heading, one line, one button. */
.coming-soon{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--wl-space-4);min-height:52vh;padding-block:var(--wl-space-16) var(--wl-space-20)}
.coming-soon h1{margin:0;font-family:var(--wl-font-editorial);font-weight:600;font-size:clamp(34px,1.6rem + 1.6vw,48px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;max-width:20ch}
.coming-soon p{margin:0;max-width:44ch;font-size:18px;line-height:1.6;color:var(--wl-muted)}
.coming-soon .button{margin-top:var(--wl-space-2)}
@media(max-width:800px){.coming-soon{min-height:0;padding-block:var(--wl-space-12) var(--wl-space-16)}.coming-soon p{font-size:16px}}

/* ---------- Product card: View details ---------- */
/* A quiet secondary link under the descriptor on Shop and Pocket Cosmos cards; Add to bag stays the one primary action. The title and artwork open the same detail modal. */
.product h3 a{color:inherit;text-decoration:none}
.product h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.view-details{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;min-height:32px;margin:-8px 0 8px;font-size:14px;font-weight:500;color:var(--wl-muted);text-decoration:none}
.view-details:hover{color:var(--wl-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- Checkout ---------- */
/* Guest checkout: numbered steps on white cards over ivory, a sticky order summary on wide screens, and a collapsible summary above the form on phones. */
.checkout-main{padding-block:35px 80px}
.checkout-main:focus{outline:none}
.checkout-heading{margin-bottom:var(--wl-space-8)}
.checkout-heading .back-link{margin-bottom:var(--wl-space-6)}
.checkout-heading .eyebrow{margin:0 0 var(--wl-space-2);color:var(--wl-gold-ink)}
.checkout-heading h1{margin:0;font-family:var(--wl-font-editorial);font-weight:600;font-size:clamp(34px,1.6rem + 1.6vw,48px);line-height:1.1;letter-spacing:-.02em}
.checkout-heading h1 em{color:var(--wl-gold-ink)}
.checkout-mode{display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:var(--wl-space-4) 0 0;padding:10px 14px;border:1px solid var(--wl-gold);border-radius:var(--wl-radius-control);background:var(--wl-beige);font-size:14px;line-height:1.5;color:var(--wl-ink)}
.checkout-mode[hidden]{display:none}
.checkout-mode b{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--wl-gold-ink)}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:var(--wl-space-8);align-items:start}
.checkout-layout[hidden]{display:none}
.checkout-form{grid-column:1;grid-row:1;min-width:0}
.checkout-step{margin:0 0 var(--wl-space-6);padding:28px 28px 12px;border:1px solid var(--wl-line);border-radius:var(--wl-radius-art);background:var(--wl-surface);min-width:0}
.checkout-step:disabled{opacity:.7}
.checkout-step legend{float:left;width:100%;display:flex;align-items:baseline;gap:14px;margin:0 0 var(--wl-space-6);padding:0;font-family:var(--wl-font-editorial);font-size:var(--wl-type-subheading);font-weight:600;line-height:1.2}
.checkout-step legend+*{clear:both}
.checkout-step-number{font-size:16px;color:var(--wl-gold-ink)}
.checkout-hint{margin:-10px 0 18px}
.card-container{min-height:90px}
.payment-status{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--wl-muted)}
.payment-status:empty{display:none}
.payment-status.is-warning{padding:12px 14px;border-radius:var(--wl-radius-sm);background:var(--wl-surface-muted);color:var(--wl-ink)}
.checkout-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pay-button{width:100%;min-height:56px;font-size:16px}
.pay-button:disabled{background:var(--wl-border);cursor:not-allowed}
.checkout-fineprint{text-align:left;margin-top:var(--wl-space-3)}
.checkout-summary{grid-column:2;grid-row:1;position:sticky;top:calc(var(--wl-logo-height) + 48px);padding:24px;border:1px solid var(--wl-line);border-radius:var(--wl-radius-art);background:var(--wl-beige)}
.checkout-summary summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;list-style:none;cursor:pointer;font-family:var(--wl-font-editorial);font-size:var(--wl-type-subheading);font-weight:600}
.checkout-summary summary::-webkit-details-marker{display:none}
.checkout-summary summary b{font-family:var(--wl-font-interface);font-size:16px;font-weight:600}
.checkout-summary details[open] summary b{display:none}
.summary-lines{list-style:none;margin:var(--wl-space-4) 0 0;padding:0}
.summary-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--wl-line)}
.summary-line img{width:56px;height:auto;aspect-ratio:5/7;object-fit:cover;border-radius:4px;background:var(--wl-surface)}
.summary-line p{margin:0;font-size:15px;font-weight:600;line-height:1.35}
.summary-line small{font-size:13px;color:var(--wl-muted)}
.summary-line b{font-size:15px;font-weight:600}
.summary-line.unavailable{opacity:.75}
.summary-line.unavailable small{color:var(--wl-error)}
.summary-totals{margin:var(--wl-space-4) 0 0}
.summary-totals div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px}
.summary-totals dt{color:var(--wl-muted)}
.summary-totals dd{margin:0;text-align:right}
.summary-totals .summary-total{margin-top:8px;padding-top:12px;border-top:1px solid var(--wl-line);font-size:18px;font-weight:600}
.summary-total dt{color:var(--wl-ink)}
.summary-note{margin:var(--wl-space-3) 0 0;font-size:13px;line-height:1.6;color:var(--wl-muted)}
.checkout-panel{max-width:560px;padding:40px 32px;border:1px solid var(--wl-line);border-radius:var(--wl-radius-art);background:var(--wl-surface)}
.checkout-panel[hidden]{display:none}
.checkout-panel:focus{outline:none}
.checkout-panel .eyebrow{margin:0 0 var(--wl-space-2);color:var(--wl-gold-ink)}
.checkout-panel h2{margin:0 0 var(--wl-space-3);font-size:clamp(28px,1.4rem + 1vw,36px);line-height:1.15}
.checkout-panel h2 em{color:var(--wl-gold-ink)}
.checkout-panel>p{color:var(--wl-muted);line-height:1.7}
.checkout-reference{padding:12px 14px;border-radius:var(--wl-radius-sm);background:var(--wl-beige);color:var(--wl-ink)!important}
.checkout-reference b{letter-spacing:.06em}
.checkout-done-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--wl-space-6)}
@media(max-width:1000px){.checkout-layout{grid-template-columns:minmax(0,1fr) 320px;gap:var(--wl-space-6)}}
@media(max-width:800px){
 .checkout-layout{grid-template-columns:minmax(0,1fr)}
 .checkout-summary{grid-column:1;grid-row:1;position:static;padding:16px 18px}
 .checkout-form{grid-row:2}
 .checkout-summary summary{font-size:18px}
 .checkout-summary summary b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg)}
}
@media(max-width:550px){
 .checkout-main{padding-block:24px 56px}
 .checkout-step{padding:22px 18px 6px}
 .checkout-panel{padding:28px 20px}
 .checkout-done-actions .button{width:100%}
}

/* ---------- Live store ---------- */
.store-live .sample-note{display:none}

/* ---------- Store policies ---------- */
.policies-main{padding-block:35px 80px}
.policies-heading{max-width:720px;display:block}
.policies-heading h1{margin:10px 0 14px}
.policies-toc{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.policies-toc a{color:var(--wl-navy);font-weight:600;text-underline-offset:4px}
.policies-body{max-width:760px;margin-top:40px}
.policy{padding:32px 0;border-top:1px solid var(--wl-line);scroll-margin-top:120px}
.policy h2{font-family:var(--wl-font-editorial);font-size:30px;font-weight:600;margin:4px 0 14px}
.policy h3{font-size:17px;margin:22px 0 8px}
.policy p,.policy li{font-size:16px;line-height:1.65;color:var(--wl-navy)}
.policy ul,.policy ol{padding-left:22px;margin:0 0 14px}
.policy li+li{margin-top:8px}
.policy-lead{font-size:18px!important;margin-bottom:16px}
.policy a{color:var(--wl-navy);text-underline-offset:3px}
.policy-updated{color:var(--wl-muted)!important;font-size:14px!important}
.checkout-policy{margin-bottom:14px}
.checkout-policy a,.summary-shipping{color:var(--wl-navy)}
.summary-shipping{margin:10px 0 0;font-size:13px;line-height:1.5}
@media(max-width:700px){.policies-main{padding-block:25px 56px}.policy{padding:26px 0}.policy h2{font-size:26px}}

/* ---------- Order inbox (owners only) ---------- */
.order-head h2{font-family:var(--wl-font-editorial);font-size:24px;font-weight:600}
.order-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.order-badge{padding:3px 10px;border-radius:999px;background:var(--wl-surface-muted);font-size:12px;font-weight:600;letter-spacing:.04em}
.order-badge.payment-paid{background:#E3EEE6;color:var(--wl-success)}
.order-badge.payment-needs_review,.order-badge.payment-payment_uncertain,.order-badge.payment-payment_failed{background:#F7E4E1;color:var(--wl-error)}
.order-badge.sandbox{background:var(--wl-beige);color:var(--wl-gold-ink)}
.order-items{margin:16px 0 0;padding-left:20px;font-size:15px;line-height:1.7}
.order-bundle{margin:4px 0 8px;font-size:14px}.order-bundle summary{cursor:pointer;font-weight:600}.order-bundle ol{margin:6px 0 0;padding-left:22px;columns:2;column-gap:24px}
@media(max-width:550px){.order-bundle ol{columns:1}}
.order-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--wl-line)}
.order-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
.order-form-grid .field:last-child{grid-column:1/-1}
.order-actions{display:flex;flex-wrap:wrap;gap:12px}
.order-message{margin:10px 0 0;font-size:13px;color:var(--wl-muted)}
.order-inbox .inbox-tools{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.order-inbox .inbox-tools .inbox-reload{margin-top:0}
.order-inbox .inbox-test-status{margin:8px 0 0;font-size:13px;color:var(--wl-muted)}.order-inbox .inbox-test-status:empty{display:none}
.order-inbox .square-check{margin-top:12px;padding:12px 16px;border:1px solid var(--wl-line);border-radius:10px;font-size:14px}.order-inbox .square-check dl{margin:0}.order-inbox .square-check dd{white-space:pre-line;margin:0 0 6px}
.order-inbox .tax-check{margin-top:16px;font-size:14px}.order-inbox .tax-check summary{cursor:pointer;font-weight:600}.order-inbox .tax-check-form{margin-top:12px}.order-inbox .tax-check-form>p{margin:0 0 8px;color:var(--wl-muted)}
.order-inbox .tax-check-grid{display:grid;grid-template-columns:2fr 1.4fr .6fr 1fr;gap:0 12px}
@media(max-width:700px){.order-inbox .tax-check-grid{grid-template-columns:1fr 1fr}}
.order-inbox #inbox-status{margin:12px 0 0;color:var(--wl-muted);font-size:14px}
.order-history{margin-top:16px;font-size:13px;color:var(--wl-muted)}
.order-history summary{cursor:pointer;font-weight:600;color:var(--wl-ink)}
.order-history ol{margin:8px 0 0;padding-left:20px;line-height:1.7}
@media(max-width:700px){.order-form-grid{grid-template-columns:1fr}.order-actions .button{width:100%}}

/* ---------- Pocket Cosmos bundle ---------- */
.bundle-offer{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:center;margin:8px 0 40px;padding:32px 40px;border:1px solid var(--wl-line);border-radius:16px;background:var(--wl-surface-muted)}
.bundle-offer[hidden]{display:none}
.bundle-art{position:relative;height:240px}
.bundle-art img{position:absolute;top:10px;left:calc(var(--i) * 70px);width:150px;height:210px;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px rgba(37,49,74,.18);transform:rotate(calc((var(--i) - 1) * 6deg))}
.bundle-copy h2{margin:6px 0 10px;font-family:var(--wl-font-editorial);font-size:32px;font-weight:600;line-height:1.15}
.bundle-copy>p:not(.eyebrow){margin:0 0 16px;max-width:52ch;line-height:1.55}
.bundle-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 18px}
.bundle-price .price{font-size:24px}
.bundle-compare{color:var(--wl-muted);text-decoration:line-through;font-size:15px}
.bundle-shipping{font-size:14px;font-weight:600;color:var(--wl-gold-ink)}
.bundle-copy .button[disabled]{opacity:.55;cursor:not-allowed}
.cart-bundle{margin:2px 0 4px;font-size:13px;color:var(--wl-muted)}
@media(max-width:800px){.bundle-offer{grid-template-columns:1fr;gap:16px;padding:24px}.bundle-art{height:200px;max-width:290px}.bundle-art img{width:124px;height:174px;left:calc(var(--i) * 60px)}}
@media(max-width:550px){.bundle-offer{padding:20px 16px}.bundle-art{height:160px}.bundle-art img{width:104px;height:146px;left:calc(var(--i) * 52px)}.bundle-copy h2{font-size:26px}.bundle-copy .button{width:100%}}