/* 6.14.33 combined companion CSS — same cascade order as the previous individual tags. */
/* ===== fix28y.css ===== */
/* fix28y (Nov 4): static assets so the product template stays under 1 MB. */
/* fix2 single PDP sound player (moved from components/pdp/sound-player.html) */
.sp{border:1px solid #e6dcec;border-radius:16px;background:#fbf8fc;padding:14px 16px 10px;margin:14px 0 18px}
.sp-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 6px;font:700 13px/1.3 Jost, sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4a2f57}
.sp-h span{font-weight:500;color:#6b5a73;white-space:nowrap}
.sp-player+.sp-player{border-top:1px solid #ece4f0;margin-top:8px;padding-top:8px}
.sp-label{font:600 14px/1.3 "Jost",sans-serif;color:#333;margin:6px 0 4px}.sp-n{color:#6b5a73;font-weight:400}.sp-n i{font-style:normal}
.sp-player:only-of-type .sp-n{display:none}
.sp-row{display:flex;align-items:center;gap:12px}
.sp-play{position:relative;flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:0;background:#713592;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.sp-play:hover{background:#6d3f80}.sp-play:focus-visible,.sp-mute:focus-visible,.sp-wave:focus-visible{outline:3px solid #c9a8d6;outline-offset:2px}
.sp-ico{width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.sp.is-x{}
.sp-player.is-playing .sp-ico{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.sp-spin{display:none;position:absolute;inset:3px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-r .8s linear infinite}
.sp-player.is-loading .sp-spin{display:block}.sp-player.is-loading .sp-ico{opacity:.4}
@keyframes sp-r{to{transform:rotate(360deg)}}
.sp-wave{position:relative;flex:1;height:44px;cursor:pointer;touch-action:none}
.sp-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.sp-bars i{flex:1;min-width:1px;background:#cdbad6;border-radius:2px}
.sp-bars--on{clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}.sp-bars--on i{background:#713592}
.sp-mute{flex:0 0 38px;height:38px;border:0;background:none;color:#713592;cursor:pointer;display:grid;place-items:center}
.sp-mute .sp-x{display:none}.sp-mute[aria-pressed="true"] .sp-x{display:inline}.sp-mute[aria-pressed="true"] .sp-w{display:none}
.sp-times{display:flex;justify-content:space-between;margin:2px 50px 0 58px;font:12px/1 Jost, sans-serif;color:#6b5a73;font-variant-numeric:tabular-nums}
@media (max-width:800px){.sp{padding:12px}.sp-h{font-size:12px}.sp-wave{height:40px}.sp-times{margin-right:50px}}
.sp-player.sp-more{display:none}.sp.is-all .sp-player.sp-more{display:block}
.sp-all{display:inline-flex;align-items:center;gap:6px;margin:10px 0 4px;padding:8px 16px;border:1px solid #713592;border-radius:999px;background:#fff;color:#713592;font:600 15px/1.2 Jost,sans-serif;cursor:pointer}
.sp-all:hover,.sp-all:focus-visible{text-decoration:underline;text-underline-offset:3px}.sp-all:focus-visible{outline:2px solid #4B2A5C;outline-offset:2px}
.sp-all[hidden]{display:none}
/* fix28y Designer set player: "Listen to each bowl" (soundtopia-set-audio mockup) */
.ssp{background:#fff;border:1px solid #E3DAE7;border-radius:12px;padding:16px 18px;margin:14px 0 18px;color:#2E1D3B;font:16px/1.45 Jost,sans-serif;box-sizing:border-box}
.ssp *{box-sizing:border-box}
html body .ssp .ssp-h:not(#a):not(#b){font:600 16px/1.45 Jost,sans-serif!important;color:#462C59!important;margin:0 0 2px!important;text-transform:none!important;letter-spacing:0!important}
html body .ssp .ssp-sub:not(#a){font:400 14px/1.45 Jost,sans-serif!important;color:#5A4A66!important;margin:0 0 10px!important}
.ssp-l{list-style:none;margin:0!important;padding:0!important}
.ssp-i{display:flex;align-items:center;gap:12px;min-height:60px;border-top:1px solid #EEE8F0;margin:0!important;padding:0}
.ssp-i::before{content:none!important}
.ssp-i.more{display:none}.ssp.open .ssp-i.more{display:flex}
html body .ssp-pb{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:1.5px solid #462C59;background:#fff;color:#462C59;display:flex;align-items:center;justify-content:center;flex:none;padding:0;margin:0;cursor:pointer}
.ssp-pb:hover{background:#F4EFF6}.ssp-pb[aria-pressed="true"]{background:#462C59;color:#fff}
.ssp-pb .ssp-pa,.ssp-pb[aria-pressed="true"] .ssp-pl{display:none}.ssp-pb[aria-pressed="true"] .ssp-pa{display:block}
.ssp-pb.is-loading{opacity:.7}
.ssp-pb:focus-visible,.ssp-wv:focus-visible,.ssp-tg:focus-visible{outline:3px solid #c9a8d6;outline-offset:2px}
.ssp-mid{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;gap:14px}
.ssp-lbl{flex:0 0 104px;font-size:16px;font-weight:500;line-height:1.3;color:#2E1D3B}.ssp-lbl b{font-weight:600}
.ssp-lbl em{display:block;font-style:normal;font-size:14px;font-weight:600;color:#462C59}.ssp-lbl em[hidden]{display:none}
.ssp-wv{position:relative;flex:1;height:40px;display:flex;align-items:center;gap:2px;min-width:0;cursor:pointer;touch-action:none}
.ssp-wv i{flex:1;min-width:0;border-radius:2px;background:#937FA2;transform:scaleX(.55)}
.ssp-wv i.p{background:#462C59;transform:none}
.ssp-wv b.ph{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:#2E1D3B;border-radius:1px}
.ssp-st{font-size:14px;color:#5A4A66;min-width:64px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.ssp-tg{margin-top:10px;width:100%;min-height:44px;border:1.5px solid #462C59;background:#fff;color:#462C59;border-radius:22px;font:500 16px Jost,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:0 16px}
.ssp-tg:hover{background:#F4EFF6}
.ssp-tg .ssp-o,.ssp.open .ssp-tg .ssp-c{display:none}.ssp.open .ssp-tg .ssp-o{display:inline}.ssp.open .ssp-tg svg{transform:rotate(180deg)}
@media (max-width:600px){.ssp-st{min-width:80px}.ssp-lbl em{display:inline;margin-left:8px}.ssp-i{min-height:72px;padding:6px 0}
.ssp-mid{flex-direction:column;align-items:stretch;gap:4px}.ssp-lbl{flex:none}.ssp-wv{height:30px;flex:none}.ssp-st{align-self:flex-end;padding-bottom:4px}}
/* fix28y / Nov 10 (Jeff): phone shown once - Key specs (formerly At a glance) carries it, so the Questions box drops its row */
body:has(.c9-glance-call) .pdp-assure .c8-assure-q{display:none!important}
/* Nov 10 (Jeff): hide the leftover empty white rounded .pdp-assure card (and its .pdp-b-below slot)
between the disclaimer and reviews when every row in this slot is hidden. Do not hide the card
when the Questions row is still the visible content (no .c9-glance-call on the page). */
html body.dtc-c:has(.c9-glance-call) .pdp-b-below .pdp-assure,
html body.dtc-c .pdp-b-below .pdp-assure:empty,
html body.dtc-c:has(.c9-glance-call) .pdp-b-below,
html body.dtc-c .pdp-b-below:empty{display:none!important}
/* fix28y: comparison rows with no data */
.comparison-table tr.c28y-nodata{display:none!important}
html body .comparison-table .c28z-nl:not(#a){color:#6B5A73;font:400 14px/1.4 Jost,sans-serif!important}
.c28y-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* fix28y 5c: "Listen to the sound · Best with headphones"; on phones the sub wraps to its own line, so the dot drops */
.sp-h .sp-dot{font-style:normal}
@media (max-width:480px){html body .sp-h .sp-dot:not(#a){display:none!important}html body .sp .sp-h>span:not(#a){flex-basis:100%;display:block;margin:0!important;white-space:normal}}
/* fix28z: no "At a glance" H2 (Brand-only card): the brand row starts the card */
html body.dtc-c .c9-glance--brand .c9-glance-dl>div:first-child{padding-top:0}
/* fix28z (Designer B1): set player after the add-to-cart form (.productView-options is a flex column and the form has order:1) */
html body .productView-options > .ssp{order:1;width:100%;margin:16px 0 0}
/* fix28z (Designer B1): sets and pairs keep price + Add to Cart above the fold (mockup: small photo, buy box, then the set player).
Scoped to product pages that carry the set player. */
@media (max-width:1023px){
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container:not(#a){height:300px!important;max-height:300px!important;min-height:0!important;padding:0!important;aspect-ratio:auto!important}
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container a{display:block;height:100%}
html body.dtc-c:has([data-ssp]) .productView-images .productView-image:not(#a),html body.dtc-c:has([data-ssp]) .productView-images:not(#a),html body.dtc-c:has([data-ssp]) .pdp-b-gallery:not(#a){height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important}
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container img:not(#a),html body.dtc-c:has([data-ssp]) .productView-images .pdp-stack-item img:not(#a){height:300px!important;width:100%!important;max-height:300px!important;object-fit:contain!important;position:static!important;transform:none!important}
}
@media (max-width:800px){
/* one-line breadcrumb: back to the parent category only */
html body.dtc-c:has([data-ssp]) ol.breadcrumbs > li:not(:nth-last-child(2)){display:none!important}
html body.dtc-c:has([data-ssp]) ol.breadcrumbs > li:nth-last-child(2)::before,html body.dtc-c:has([data-ssp]) ol.breadcrumbs > li:nth-last-child(2)::after{content:none!important;display:none!important}
html body.dtc-c:has([data-ssp]) ol.breadcrumbs > li:nth-last-child(2) > a::before{content:"\2039";display:inline-block;margin-right:6px;text-decoration:none}
}
@media (max-width:600px){
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container:not(#a){height:240px!important;max-height:240px!important}
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container img:not(#a),html body.dtc-c:has([data-ssp]) .productView-images .pdp-stack-item img:not(#a){height:240px!important;max-height:240px!important}
html body.dtc-c:has([data-ssp]) h1.productView-title:not(#a){font-size:24px!important;line-height:1.25!important}
}
/* fix28z B1 fold, part 2: sets and pairs only */
@media (max-width:1023px){
html body.dtc-c:has([data-ssp]) .product-next-container:not(#a){display:none!important}
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container:not(#a){height:260px!important;max-height:260px!important}
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container img:not(#a),html body.dtc-c:has([data-ssp]) .productView-images .pdp-stack-item img:not(#a){height:260px!important;max-height:260px!important}
html body.dtc-c:has([data-ssp]) form[data-cart-item-add] .form-field:not(.form-field--increments):not(#a){margin-bottom:8px!important}
html body.dtc-c:has([data-ssp]) form[data-cart-item-add] .productOptions-list:not(#a){margin-bottom:0!important}
}
@media (max-width:600px){
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container:not(#a){height:240px!important;max-height:240px!important}
html body.dtc-c:has([data-ssp]) .productView-images .productView-img-container img:not(#a),html body.dtc-c:has([data-ssp]) .productView-images .pdp-stack-item img:not(#a){height:240px!important;max-height:240px!important;object-fit:contain!important}
html body.dtc-c:has([data-ssp]) h1.productView-title:not(#a){font-size:22px!important;line-height:1.25!important}
}
@media (min-width:1024px){
html body.dtc-c:has([data-ssp]) h1.productView-title:not(#a){font-size:30px!important;line-height:1.25!important}
}
/* fix28z2 polish (Designer PASS follow-ups) */
/* 2: set/pair option chips >=44px */
html body.dtc-c .productView-options [data-product-attribute="product-list"] .productOptions-list-item:not(#a){min-height:44px!important;padding-top:10px!important;padding-bottom:10px!important;box-sizing:border-box!important}
html body.dtc-c .productView-options [data-product-attribute="set-rectangle"] .form-option:not(#a),
html body.dtc-c .productView-options [data-product-attribute="set-radio"] .form-label:not(#a){min-height:44px!important}
/* 3: qty -/+ >=44x44 (override the 40px mobile rule) */
html body.dtc-c .productView .form-increment .button--icon:not(#a){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
html body.dtc-c .productView .form-increment:not(#a){height:44px!important}
html body.dtc-c .productView .form-increment .form-input--incrementTotal:not(#a){height:44px!important;line-height:44px!important}
/* 4: Affirm one line at 390 */
@media (max-width:480px){
html body.dtc-c .productView .c28-affirm:not(#a),html body.dtc-c .productView #c28-affirm:not(#a){min-height:22px!important;margin:4px 0 8px!important;font-size:12px!important;line-height:20px!important;letter-spacing:-.01em!important;white-space:nowrap!important;overflow:hidden!important}
html body.dtc-c .productView .c28-affirm:not(#a) .__affirm-logo,html body.dtc-c .productView #c28-affirm:not(#a) .__affirm-logo{font-size:1em!important}
html body.dtc-c .productView .c28-affirm:not(#a) .__apr_badge,html body.dtc-c .productView #c28-affirm:not(#a) .__apr_badge{font-size:11px!important;padding:1px 6px!important}
}
/* sticky ATC already ships on all can_purchase PDPs (sticky-atc.html); keep footer/player clear */
@media (max-width:800px){
html body.dtc-c.product-page:has(.pdp-sticky-atc.is-visible) .ssp:not(#a),
html body.dtc-c.product-page:has(.pdp-sticky-atc.is-visible) [data-ssp]:not(#a){scroll-margin-bottom:80px}
html body.dtc-c.product-page:has(.pdp-sticky-atc.is-visible) footer.footer:not(#a){padding-bottom:16px}
}
/* fix28z3: sticky invalid-option scroll clear of sticky header; sticky qty 44x44 */
@media (max-width:800px){
html body.dtc-c .productView-options .form-field:not(#a),
html body.dtc-c .productView-options [data-product-attribute]:not(#a),
html body.dtc-c .productView-options .productOptions-list-item:not(#a),
html body.dtc-c .productView-options input.form-radio:not(#a),
html body.dtc-c .productView-options input.form-checkbox:not(#a),
html body.dtc-c .productView-options .form-input:not(#a),
html body.dtc-c .productView-options select:not(#a){scroll-margin-top:260px!important}
}
html body.dtc-c .pdp-sticky-atc .c5-sq:not(#a){height:44px!important;align-items:stretch}
html body.dtc-c .pdp-sticky-atc .c5-sq-b:not(#a){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:0 0 44px;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important}
html body.dtc-c .pdp-sticky-atc .c5-sq-v:not(#a){min-width:28px;height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Nov 10 (Jeff): desktop gallery aspect-ratio auto (beats dtc/styles.html 1/1) */
@media (min-width:801px){
html body.dtc-c .pdp-b-gallery .productView-img-container img[data-main-image],
html body .pdp-b-gallery img[data-main-image]{
aspect-ratio:auto !important;
height:auto !important;
max-height:none !important;
}
html body.dtc-c .pdp-b-gallery .productView-image,
html body.dtc-c .pdp-b-gallery .productView-img-container{
aspect-ratio:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
}
}
/* 6.14.2 (Jeff / Designer): shared gold Harmony button (pdp-harm-btn) used above Key specs,
below Key specs, and in the closing row above "Pairs well with".
Fill #C4A25A, text #1D1524 (7.31:1, WCAG AAA), Jost 500 16px, 48px tall, padding 0 36px,
radius 8px, border 1px #A98A45, focus 2px #462C59 / 2px offset. Phones: full width, max 360px.
6.14.3: above Key specs and above Pairs well with (below-Key-specs block removed). Nothing after the Pairs pager. */
html body.dtc-c .pdp-harm-slot:not(:has(.pdp-harm)){display:none!important}
html body.dtc-c .pdp-harm{margin:0}
html body.dtc-c .pdp-harm-kicker{margin:0 0 8px;font:400 16px/1.4 Jost,var(--f-body),sans-serif;color:#241A2B}
html body.dtc-c a.pdp-harm-btn,
html body.dtc-c .productView a.pdp-harm-btn,
html body.dtc-c .productView-details a.pdp-harm-btn,
html body.dtc-c .productView-details [data-cb-open].pdp-harm-btn,
html body.dtc-c .cbp a.pdp-harm-btn,
html body.dtc-c .cbp [data-cb-open].pdp-harm-btn{
display:inline-flex!important;align-items:center;justify-content:center;
box-sizing:border-box;width:auto;height:48px;min-height:48px;padding:0 36px;
background:#C4A25A!important;border:1px solid #A98A45!important;border-radius:8px;color:#1D1524!important;
font:500 16px/1 Jost,var(--f-body),sans-serif!important;font-weight:500!important;text-decoration:none!important;
letter-spacing:0;cursor:pointer;
}
html body.dtc-c a.pdp-harm-btn:hover,
html body.dtc-c .productView a.pdp-harm-btn:hover,
html body.dtc-c .cbp a.pdp-harm-btn:hover{
background:#B89348!important;color:#1D1524!important;text-decoration:none!important;border-color:#A98A45!important;
}
html body.dtc-c a.pdp-harm-btn:active,
html body.dtc-c .cbp a.pdp-harm-btn:active{
background:#A98440!important;color:#1D1524!important;
}
html body.dtc-c a.pdp-harm-btn:focus-visible,
html body.dtc-c .cbp a.pdp-harm-btn:focus-visible{
outline:2px solid #462C59!important;outline-offset:2px!important;
}
/* Key specs column: 16px gap above / below the card; keep both placements on all breakpoints */
html body.dtc-c .c28v-side:has(> .pdp-harm-slot .pdp-harm){gap:0}
html body.dtc-c .c28v-side > .pdp-harm-slot--top:has(.pdp-harm){margin:0 0 16px}
html body.dtc-c .c28v-side > .pdp-harm-slot--side:has(.pdp-harm){margin:16px 0 0}
/* Closing row above "Pairs well with": description, 28px, lead-in, 14px, button, 40px, 1px #D9CFDC, 32px, heading.
Same cbOk/cbAny gate as the section (row lives inside section.cbp). No button after the pager. */
html body.dtc-c .productView .cbp,
html body.dtc-c section.cbp{
margin:0!important;padding-top:0!important;border-top:none!important;
}
html body.dtc-c section.cbp:not([hidden]) .cbp-close{display:block!important;text-align:center;margin:28px 0 0;padding:0}
html body.dtc-c .cbp .cbp-close{text-align:center;margin:28px 0 0;padding:0}
html body.dtc-c .cbp .cbp-close-kicker,
html body.dtc-c .cbp p.cbp-close-kicker{
margin:0 0 14px!important;padding:0;
font:400 17px/1.35 Jost,var(--f-body),sans-serif!important;color:#241A2B!important;
text-align:center;
}
html body.dtc-c .cbp .cbp-close .pdp-harm-btn{margin:0 auto}
html body.dtc-c .cbp .cbp-hd{
margin:40px 0 0!important;padding-top:32px!important;
border-top:1px solid #D9CFDC;
}
/* Pager: centered under the cards, >=16px Jost, 28px above and below; clear of Great match badges.
Nothing hangs below the pager (the old .cbp-open button is removed). */
html body.dtc-c .cbp .cbp-shell{overflow:visible}
html body.dtc-c .cbp .cbp-i,
html body.dtc-c .cbp .cbp-v{overflow:visible}
html body.dtc-c .cbp .cbp-range,
html body.dtc-c .cbp p.cbp-range{
display:block;box-sizing:border-box;
margin:28px 0!important;padding:0;
font:400 16px/1.4 Jost,var(--f-body),sans-serif!important;
color:#5E5266;text-align:center;
position:relative;z-index:1;
}
html body.dtc-c .cbp .cbp-range[hidden]{display:none!important}
html body.dtc-c .cbp .cbp-open{display:none!important}
@media (max-width:767px){
html body.dtc-c a.pdp-harm-btn,
html body.dtc-c .productView a.pdp-harm-btn,
html body.dtc-c .productView-details a.pdp-harm-btn,
html body.dtc-c .productView-details [data-cb-open].pdp-harm-btn,
html body.dtc-c .cbp a.pdp-harm-btn,
html body.dtc-c .cbp [data-cb-open].pdp-harm-btn{
display:flex!important;width:100%;max-width:360px;height:48px;min-height:48px;margin-left:auto;margin-right:auto;
}
html body.dtc-c .cbp .cbp-close-kicker{
max-width:360px;margin-left:auto;margin-right:auto;margin-bottom:14px;
/* "Looking for a bowl that pairs with this one?" wraps to at most two lines at 390px */
font:400 17px/1.35 Jost,var(--f-body),sans-serif;
}
}
/* Nov 10 (Jeff): PDP description disclaimer at least 14px on desktop and mobile (footer .c27-disc is already 14px;
a more specific rule keeps the PDP line from being shrunk by later typography). */
html body.dtc-c p.c27-disc.c27-disc-pdp,
html body p.c27-disc.c27-disc-pdp{
font:400 14px/1.5 Jost,sans-serif!important;
color:#5A4E63;
}
/* 6.14.2 (Jeff): mailto next to theme phone numbers. Opened-menu Email pill; 3 buttons may wrap on narrow phones. */
@media (max-width:800px){
html body.dtc-c .navPages .c9-drawer-ct{flex-wrap:wrap}
html body.dtc-c .navPages .c9-drawer-ct a{flex:1 1 96px;min-width:96px}
}
/* ===== fix6146.css ===== */
/* 6.14.6 wide desktop shell + Amazon gallery */
html body.dtc-c{--c28-max:1680px;--c28-pad:32px}
@media (max-width:800px){html body.dtc-c{--c28-pad:16px}}
/* Main storefront container and DTC wraps */
html body.dtc-c .container{max-width:var(--c28-max)!important;width:100%!important;padding-left:var(--c28-pad)!important;padding-right:var(--c28-pad)!important;box-sizing:border-box}
html body.dtc-c .dtc-wrap,html body.dtc-c .dtc-bar-track{max-width:var(--c28-max)}
html body.dtc-c .dtc-wrap--narrow{max-width:820px}
/* Header, utility bar, sticky header, footer — same track as the content */
html body.dtc-c #header-c .header-container,
html body.dtc-c #header-c-sticky .header-container,
html body.dtc-c .c28-util-in,
html body.dtc-c #header-c .navUser .container.customs,
html body.dtc-c #header-c .navUser-section,
html body.dtc-c #header-c .navUser .navUser-section,
html body.dtc-c footer.footer .footer-middle,
html body.dtc-c .hr-trust,
html body.dtc-c .home-section--about,
html body.dtc-c .hbh,
html body.dtc-c .cb-in{max-width:var(--c28-max)!important;box-sizing:border-box}
html body.dtc-c #header-c .header-container,
html body.dtc-c #header-c-sticky .header-container,
html body.dtc-c .c28-util-in{padding-left:var(--c28-pad)!important;padding-right:var(--c28-pad)!important}
/* Info hubs: widen the layout/cards, keep intro prose from going edge-to-edge */
html body.dtc-c .info-hub,
html body.dtc-c .info-layout,
html body.dtc-c .info-subpages,
html body.dtc-c .info-page .c9-gr-sec.c9-gr-page{max-width:var(--c28-max)}
html body.dtc-c .info-main{max-width:none}
html body.dtc-c .info-main > .page-content > :is(p,h2,h3,h4,ol,ul,div):not(.taba):not(.info-pcards):not(.info-subpages):not(.info-pcard){max-width:760px}
html body.dtc-c.page-faqs .info-main > .page-content{max-width:none}
/* Blog list can use the wider shell; the post article stays a readable measure (fix6 already 760px) */
/* Category grids: one more column on very wide screens */
@media (min-width:1600px){
html body.dtc-c.c5-nofacets #product-listing-container .productGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
html body.dtc-c:not(.c5-nofacets) #product-listing-container .productGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* Mega menu can follow the new shell */
@media (min-width:801px){
html body.dtc-c #header-c #menu .navPage-subMenu:has(.navPage-subMenu-item--has-image){width:min(1680px,calc(100vw - 64px))!important}
}
/* PDP: slightly wider image column on large screens (buy panel still solid) */
@media (min-width:801px){
html body.dtc-c .pdp-b-row > .productView-images-container{flex:0 0 58%;width:58%!important}
html body.dtc-c .pdp-b-row > .product-rightside-content{flex:0 0 40%;width:40%!important}
}
@media (min-width:1600px){
html body.dtc-c .pdp-b-row > .productView-images-container{flex:0 0 60%;width:60%!important}
html body.dtc-c .pdp-b-row > .product-rightside-content{flex:0 0 38%;width:38%!important}
}
/* 6.14.6 Amazon-style gallery: desktop thumbs in a left column; lightbox; +N overflow */
.pdp-gal-hint{display:none}
.pdp-thumb-more{display:none}
.pdp-lb[hidden]{display:none!important}
@media (min-width:801px){
/* Beat earlier .pdp-b-row > .productView-images-container{display:block !important} — the gallery IS that container. */
html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery,
html body.dtc-c .pdp-b-gallery{
display:grid!important;grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:start
}
html body.dtc-c .pdp-b-gallery > .pdp-thumbs{
grid-column:1;grid-row:1;display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
gap:8px;margin:0!important;width:72px;padding:0;
}
html body.dtc-c .pdp-b-gallery > .pdp-thumbs[hidden],
html body.dtc-c .pdp-b-gallery > .pdp-thumbs:has(> :only-child){display:none!important}
html body.dtc-c .pdp-b-gallery > .pdp-gal-main{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
html body.dtc-c .pdp-b-gallery > .productView-images{grid-column:2;grid-row:1;min-width:0}
html body.dtc-c .pdp-b-gallery > .pdp-gal-hint{grid-column:2;grid-row:2}
html body.dtc-c .pdp-b-gallery > .pdp-gal-count,
html body.dtc-c .pdp-b-gallery > .pdp-dots{display:none!important}
html body.dtc-c .pdp-b-gallery > .product-slider{grid-column:1/-1;grid-row:2}
html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery.pdp-b-gal-single,
html body.dtc-c .pdp-b-gallery.pdp-b-gal-single{grid-template-columns:minmax(0,1fr)!important}
html body.dtc-c .pdp-b-gallery.pdp-b-gal-single > .pdp-gal-main,
html body.dtc-c .pdp-b-gallery.pdp-b-gal-single > .productView-images,
html body.dtc-c .pdp-b-gallery.pdp-b-gal-single > .pdp-gal-hint{grid-column:1}
/* single image or hidden thumbs: no left column */
html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery:has(> .pdp-thumbs[hidden]),
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs[hidden]),
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:not(:has(.pdp-thumb))),
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:has(> :only-child)){grid-template-columns:minmax(0,1fr)!important}
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs[hidden]) > .productView-images,
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs[hidden]) > .pdp-gal-hint,
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:not(:has(.pdp-thumb))) > .productView-images,
html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:not(:has(.pdp-thumb))) > .pdp-gal-hint{grid-column:1}
html body.dtc-c .pdp-b-gallery .pdp-thumb{
position:relative;flex:0 0 auto;width:64px;height:64px;padding:2px;box-sizing:border-box;
border:2px solid #ECE5EE;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s
}
html body.dtc-c .pdp-b-gallery .pdp-thumb img{width:100%;height:100%;object-fit:contain;border-radius:5px;display:block}
html body.dtc-c .pdp-b-gallery .pdp-thumb:hover{border-color:#b9a3c4}
html body.dtc-c .pdp-b-gallery .pdp-thumb.is-active{border-color:#713592;box-shadow:0 0 0 2px rgba(113,53,146,.25)}
html body.dtc-c .pdp-b-gallery .pdp-thumb.is-active::after{display:none!important}
html body.dtc-c .pdp-b-gallery .pdp-thumb:focus-visible{outline:2px solid #462C59;outline-offset:2px}
html body.dtc-c .pdp-b-gallery .pdp-thumbs.is-capped .pdp-thumb.pdp-thumb--overflow{display:none}
html body.dtc-c .pdp-b-gallery .pdp-thumb-more{
display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:0;
border:2px solid #ECE5EE;border-radius:8px;background:#F7F2EA;color:#462C59;
font:600 15px/1 Jost,sans-serif;cursor:pointer
}
html body.dtc-c .pdp-b-gallery .pdp-thumb-more:hover,
html body.dtc-c .pdp-b-gallery .pdp-thumb-more:focus-visible{border-color:#713592;color:#713592;outline:0}
html body.dtc-c .pdp-gal-hint{
display:inline-block;margin:0;padding:0;border:0;background:none;cursor:pointer;
font:500 14px/1.4 Jost,sans-serif;color:#713592;text-align:left;text-decoration:underline;text-underline-offset:3px
}
html body.dtc-c .pdp-gal-hint:hover,html body.dtc-c .pdp-gal-hint:focus-visible{color:#462C59;outline:0}
/* keep the original hidden theme thumbs out of the way */
html body.dtc-c .pdp-b-gallery .productView-images > .productView-thumbnails{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
}
@media (max-width:800px){
/* hint sits under the swipe + thumb row; keep it compact so it doesn't collide with Add to Cart */
html body.dtc-c .pdp-gal-hint{
display:block;width:100%;margin:4px 0 0;padding:0;border:0;background:none;cursor:pointer;
font:500 13px/1.4 Jost,sans-serif;color:#713592;text-align:center;text-decoration:underline;text-underline-offset:3px
}
html body.dtc-c .pdp-thumb-more{display:none!important}
}
/* Lightbox */
.pdp-lb{position:fixed;inset:0;z-index:200000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(36,26,43,.94);padding:24px 16px 32px;box-sizing:border-box}
.pdp-lb-stage{position:relative;max-width:min(1200px,100%);max-height:calc(100vh - 96px);display:flex;align-items:center;justify-content:center}
.pdp-lb-stage img{display:block;max-width:100%;max-height:calc(100vh - 96px);width:auto;height:auto;object-fit:contain;background:#fff;border-radius:8px}
.pdp-lb-video{width:min(960px,100vw - 32px);aspect-ratio:16/9;max-height:calc(100vh - 96px);background:#000;border-radius:8px;overflow:hidden}
.pdp-lb-video iframe{width:100%;height:100%;border:0;display:block}
.pdp-lb-close,.pdp-lb-prev,.pdp-lb-next{position:absolute;border:0;background:#fff;color:#462C59;cursor:pointer;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.pdp-lb-close{top:16px;right:16px;position:fixed;font-size:24px;line-height:1}
.pdp-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.pdp-lb-next{right:12px;top:50%;transform:translateY(-50%)}
.pdp-lb-close:hover,.pdp-lb-prev:hover,.pdp-lb-next:hover,
.pdp-lb-close:focus-visible,.pdp-lb-prev:focus-visible,.pdp-lb-next:focus-visible{background:#F7F2EA;outline:2px solid #713592;outline-offset:2px}
.pdp-lb-count{margin:12px 0 0;color:#fff;font:500 14px/1.3 Jost,sans-serif}
.pdp-lb-prev[hidden],.pdp-lb-next[hidden]{display:none!important}
@media (max-width:800px){
.pdp-lb-prev,.pdp-lb-next{width:36px;height:36px}
.pdp-lb{padding:56px 8px 24px}
}
/* ===== fix6147.css ===== */
/* 6.14.7 — PDP hybrid buy box (Jeff approved Designer hybrid, Nov 11 2026) + fluid gallery.
Loaded after fix6146.css. Selectors carry :not(#a):not(#b) so they beat the fix12/fix22/fix23 rules (which use :not(#a)). */
/* ---------- 1. PDP width: follow the 1680px shell instead of the old 1144px column (fix22) ---------- */
@media (min-width:801px){
html body.dtc-c .productView .pdp-b-row:not(#a):not(#b),
html body.dtc-c .pdp-b-below:not(#a):not(#b),
html body.dtc-c .pdp-store-reviews.c9-gr-sec:not(#a):not(#b),
html body.dtc-c section.pdp-faq:not(#a):not(#b),
html body.dtc-c .pdp-b-desc .c9-desc-grid:not(#a):not(#b),
html body.dtc-c .product-comparison-container:not(#a):not(#b){
--c22w:min(calc(var(--c28-max,1680px) - 2 * var(--c28-pad,32px)), calc(var(--c9-vw,100vw) - 2 * var(--c28-pad,32px)));
}
/* columns: gallery | buy box */
html body.dtc-c .pdp-b-row:not(#a):not(#b){gap:3%}
html body.dtc-c .pdp-b-row > .productView-images-container:not(#a):not(#b){flex:0 0 57%;width:57%!important}
html body.dtc-c .pdp-b-row > .product-rightside-content:not(#a):not(#b){flex:0 0 40%;width:40%!important;background:transparent}
}
@media (min-width:801px) and (max-width:1100px){
html body.dtc-c .pdp-b-row > .productView-images-container:not(#a):not(#b){flex:0 0 54%;width:54%!important}
html body.dtc-c .pdp-b-row > .product-rightside-content:not(#a):not(#b){flex:0 0 43%;width:43%!important}
}
/* ---------- 2. Gallery: main image fills its column, thumbs in a row under it, hint under the thumbs ---------- */
html body.dtc-c{--pdp-img-max:max(380px, calc(100vh - 300px))}
@media (min-width:801px){
html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery:not(#a):not(#b){
display:flex!important;flex-direction:column;align-items:stretch;gap:10px;grid-template-columns:none!important;background:transparent
}
html body.dtc-c .pdp-b-gallery > .pdp-gal-main:not(#a):not(#b){display:contents!important}
html body.dtc-c .pdp-b-gallery .productView-images:not(#a):not(#b){order:1;width:100%!important;min-width:0}
html body.dtc-c .pdp-b-gallery > .pdp-thumbs:not(#a):not(#b){
order:2;display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px;width:auto!important;margin:0!important;padding:0
}
html body.dtc-c .pdp-b-gallery > .pdp-thumbs[hidden]:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery > .pdp-thumbs:has(> .pdp-thumb:only-child):not(#a):not(#b),
html body.dtc-c .pdp-b-gallery > .pdp-thumbs:not(:has(.pdp-thumb)):not(#a):not(#b){display:none!important}
html body.dtc-c .pdp-b-gallery .pdp-thumb:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .pdp-thumb-more:not(#a):not(#b){width:68px;height:68px}
html body.dtc-c .pdp-b-gallery .pdp-gal-hint:not(#a):not(#b){order:3;align-self:flex-start;margin:0}
html body.dtc-c .pdp-b-gallery > .product-slider:not(#a):not(#b){order:4}
/* the main image box: full column width, height follows the photo, capped by the viewport (no forced square) */
html body.dtc-c .pdp-b-gallery .productView-image:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .productView-img-container:not(#a):not(#b){
width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;aspect-ratio:auto!important
}
html body.dtc-c .pdp-b-gallery .productView-image:not(#a):not(#b){background:#fff;border:1px solid #E6E0EA;border-radius:8px;overflow:hidden;box-sizing:border-box}
html body.dtc-c .pdp-b-gallery img[data-main-image]:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .productView-img-container img[data-main-image]:not(#a):not(#b){
display:block;width:100%!important;max-width:100%!important;height:auto!important;max-height:var(--pdp-img-max)!important;aspect-ratio:auto!important;object-fit:contain!important;background:#fff;margin:0 auto
}
}
/* phones/tablets: swipe slides follow the photo shape (no forced square), capped; hint under the thumb row */
@media (max-width:800px){
html body.dtc-c .pdp-b-gallery:not(#a):not(#b){display:flex!important;flex-direction:column;align-items:stretch}
html body.dtc-c .pdp-b-gallery > .pdp-gal-main:not(#a):not(#b){display:contents!important}
html body.dtc-c .pdp-b-gallery .productView-images:not(#a):not(#b){order:1;align-items:center;background:#fff;border-radius:8px}
html body.dtc-c .pdp-b-gallery > .pdp-thumbs:not(#a):not(#b){order:2;margin:8px 0 2px!important}
html body.dtc-c .pdp-b-gallery .pdp-gal-hint:not(#a):not(#b){order:3;margin:2px 0 0!important;text-align:left;font-size:14px}
html body.dtc-c .pdp-b-gallery > .pdp-gal-count:not(#a):not(#b){display:none!important}
html body.dtc-c .pdp-b-gallery > .product-slider:not(#a):not(#b){order:4}
html body.dtc-c .pdp-b-gallery .productView-image:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .productView-img-container:not(#a):not(#b){height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important}
html body.dtc-c .pdp-b-gallery img[data-main-image]:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .pdp-stack-item img:not(#a):not(#b){aspect-ratio:auto!important;width:100%!important;height:auto!important;max-height:min(68vh,560px)!important;object-fit:contain!important;background:#fff}
}
/* lightbox: the photo fills the viewport height (no white matte around a small image) */
html body .pdp-lb-stage:not(#a){width:100%;height:calc(100vh - 96px)}
html body .pdp-lb-stage img:not(#a){width:auto;height:100%;max-width:100%;max-height:calc(100vh - 96px);object-fit:contain;background:transparent;border-radius:0}
@media (max-width:800px){html body .pdp-lb-stage:not(#a){height:calc(100vh - 120px)}html body .pdp-lb-stage img:not(#a){max-height:calc(100vh - 120px)}}
/* ---------- 3. Status row: In stock · Shipping (same line >=801px; own line above In stock below 801px) ---------- */
html body.dtc-c .productView .pdp-ship-dl:not(#a):not(#b){display:none!important}
html body.dtc-c .productView .c9-pdp-status:not(#a):not(#b){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
html body.dtc-c .productView .c9-pdp-status > .c9-sale-badge{order:0}
html body.dtc-c .productView .c9-pdp-status > .c9-stock{order:1}
html body.dtc-c .productView .pdp-ship-inline:not(#a):not(#b){order:2;font:400 15px/1.4 Jost,"Jost Fallback",sans-serif;color:#4A3F52;white-space:nowrap}
@media (min-width:801px){
html body.dtc-c .productView .c9-pdp-status:has(.c9-stock:not([hidden])) .pdp-ship-inline:not(#a):not(#b)::before{content:"\00B7";margin-right:10px;color:#4A3F52}
}
@media (max-width:800px){
html body.dtc-c .productView .pdp-ship-inline:not(#a):not(#b){order:2;flex:0 0 100%;white-space:normal}
}
/* ---------- 4. Buy-box card (lavender) ---------- */
html body.dtc-c .productView .pdp-card:not(#a):not(#b){
display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;margin:12px 0 0;padding:16px 16px 14px;box-sizing:border-box;
background:#EBE5ED;border:1px solid #D4CAD9;border-radius:14px;width:100%
}
html body.dtc-c .productView .pdp-card > .productView-price:not(#a):not(#b){order:1;flex:0 0 auto;margin:0!important;padding:0}
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b){order:2;flex:1 1 200px;min-height:40px;margin:0!important;display:flex;align-items:center}
html body.dtc-c .productView .pdp-card > .c28-affirm.c28-affirm--off:not(#a):not(#b){display:none}
html body.dtc-c .productView .pdp-card > .productView-options:not(#a):not(#b),
html body.dtc-c .productView .pdp-card form.cart-value:not(#a):not(#b){display:contents!important}
html body.dtc-c .productView .pdp-card > .productView-options > p:not(#a):not(#b){order:10;flex:0 0 100%;margin:0}
html body.dtc-c .productView .pdp-card .productAttributes-message:not(#a):not(#b){order:3;flex:0 0 100%;margin:0}
/* qty | Add to Cart | heart */
html body.dtc-c .productView .pdp-card .form-field--increments:not(#a):not(#b){order:4;flex:0 0 auto;width:auto!important;margin:0!important;padding:0!important}
html body.dtc-c .productView .pdp-card .form-field--increments > .form-label:not(#a):not(#b){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}
html body.dtc-c .productView .pdp-card .form-increment:not(#a):not(#b){display:flex!important;align-items:center;height:48px!important;width:auto!important;margin:0!important;border:1.5px solid #462C59!important;border-radius:999px!important;background:#fff;overflow:hidden;box-sizing:border-box}
html body.dtc-c .productView .pdp-card .form-increment .button:not(#a):not(#b){width:40px!important;height:45px!important;min-width:0;margin:0!important;padding:0!important;border:0!important;background:none!important;color:#462C59!important;display:flex;align-items:center;justify-content:center}
html body.dtc-c .productView .pdp-card .form-increment .form-input--incrementTotal:not(#a):not(#b){width:30px!important;height:45px!important;border:0!important;background:none!important;padding:0!important;text-align:center;font:600 16px/45px Jost,sans-serif!important;color:#241A2B}
html body.dtc-c .productView .pdp-card form.cart-value > .form-action:not(.form-wishlist):not(#a):not(#b){order:5;flex:1 1 150px!important;min-width:0;width:auto!important;margin:0!important}
html body.dtc-c .productView .pdp-card #form-action-addToCart:not(#a):not(#b){
display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%!important;height:48px!important;min-height:48px;margin:0!important;padding:0 16px!important;
border-radius:999px!important;font:600 16px/1 Jost,"Jost Fallback",sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase;white-space:nowrap;overflow:hidden
}
html body.dtc-c .productView .pdp-card #form-action-addToCart:not([data-c28-off]):not([disabled]):not(#a):not(#b){background:#462C59!important;border:1px solid #462C59!important;color:#fff!important}
html body.dtc-c .productView .pdp-card #form-action-addToCart:not([data-c28-off]):not([disabled]):is(:hover,:focus-visible):not(#a):not(#b){background:#713592!important;border-color:#713592!important}
html body.dtc-c .productView .pdp-card #form-action-addToCart:focus-visible{outline:3px solid #241A2B;outline-offset:2px}
html body.dtc-c .productView .pdp-card .form-wishlist:not(#a):not(#b){order:6;flex:0 0 48px!important;width:48px!important;min-width:48px;margin:0!important;padding:0!important;position:relative}
html body.dtc-c .productView .pdp-card .form-wishlist .c10-wish:not(#a):not(#b){
display:flex!important;align-items:center;justify-content:center;width:48px!important;height:48px!important;min-width:48px;margin:0!important;padding:0!important;
border:1.5px solid #462C59!important;border-radius:50%!important;background:#fff!important;color:#462C59!important;box-sizing:border-box
}
html body.dtc-c .productView .pdp-card .form-wishlist .c10-wish svg{width:22px;height:22px}
html body.dtc-c .productView .pdp-card .form-wishlist .dropdown-menu{right:0;left:auto!important}
/* options: label + pills on one line, wrapping only when needed */
html body.dtc-c .productView .pdp-card [data-product-option-change]:not(#a):not(#b){display:block!important;order:7;flex:0 0 100%;margin:0;padding:0}
html body.dtc-c .productView .pdp-card [data-product-option-change]:empty{display:none!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] > .form-field:not(#a):not(#b){display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px!important;padding:0!important;min-height:44px;position:relative;border:0}
html body.dtc-c .productView .pdp-card [data-product-option-change] > .form-field:last-child:not(#a):not(#b){margin-bottom:0!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > .form-label--alternate:not(#a):not(#b){
display:inline-flex!important;align-items:baseline;gap:4px;flex:0 0 auto;width:auto!important;margin:0 4px 0 0!important;padding:0!important;
font:600 16px/1.3 Jost,"Jost Fallback",sans-serif!important;color:#241A2B!important;white-space:nowrap;height:auto!important
}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-label--alternate small:not(#a):not(#b){font:400 16px/1.3 Jost,sans-serif!important;color:#4A3F52!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input.form-radio:not(#a):not(#b),
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input.form-checkbox:not(#a):not(#b){
position:absolute!important;left:0;top:50%;width:1px!important;height:1px!important;opacity:0!important;margin:0!important;pointer-events:none;scroll-margin-top:220px
}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input.form-radio + label.form-label:not(#a):not(#b),
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input.form-checkbox + label.form-label:not(#a):not(#b){
display:inline-flex!important;align-items:center;gap:6px;min-height:44px;margin:0!important;padding:8px 14px!important;box-sizing:border-box;width:auto!important;max-width:100%;
border:1.5px solid #462C59!important;border-radius:999px!important;background:#fff!important;color:#462C59!important;cursor:pointer;
font:500 16px/1.25 Jost,"Jost Fallback",sans-serif!important;text-align:left;white-space:normal;position:relative
}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input + label.form-label:not(#a):not(#b)::before,
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input + label.form-label:not(#a):not(#b)::after{content:none!important;display:none!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input:checked + label.form-label:not(#a):not(#b){
background:#462C59!important;color:#fff!important;border-width:2.5px!important;font-weight:600!important;padding:7px 13px!important
}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input:checked + label.form-label:not(#a):not(#b)::before{
content:""!important;display:inline-block!important;position:static!important;flex:0 0 auto;width:12px!important;height:7px!important;margin:-3px 2px 0 0!important;
border:0!important;border-left:2.4px solid currentColor!important;border-bottom:2.4px solid currentColor!important;border-radius:0!important;background:none!important;transform:rotate(-45deg)!important;box-shadow:none!important;opacity:1!important
}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input:focus-visible + label.form-label{outline:3px solid #241A2B!important;outline-offset:2px}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input:not(:checked) + label.form-label:hover{background:#F7F2EA!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field select:not(#a):not(#b){min-height:44px;font:500 16px Jost,sans-serif;border:1.5px solid #462C59;border-radius:10px;background-color:#fff;scroll-margin-top:220px}
html body.dtc-c .productView .pdp-card .form-field--stock:not(#a):not(#b){order:8;flex:0 0 100%;margin:0!important}
html body.dtc-c .productView .pdp-card form.cart-value > .alertBox:not(.productAttributes-message):not(#a):not(#b){order:9;flex:0 0 100%;margin:0!important}
html body.dtc-c .productView .pdp-card .sp-set:not(#a),html body.dtc-c .productView .pdp-card .productView-options > .set-player:not(#a){order:11;flex:0 0 100%}
html body.dtc-c .productView .pdp-card .cbx:not(#a):not(#b){order:12}
/* We accept + 10 badges on one wrapping line */
html body.dtc-c .productView .pdp-card .footer-payment-icons.pdp-pay:not(#a):not(#b){
order:13;flex:0 0 100%;display:flex!important;flex-wrap:wrap!important;align-items:center;gap:6px;margin:2px 0 0!important;padding:0!important;
height:auto!important;max-height:none!important;overflow:visible!important;grid-template-columns:none!important
}
html body.dtc-c .productView .pdp-card .pdp-pay > *:not(#a):not(#b){display:inline-flex!important}
html body.dtc-c .productView .pdp-card .pdp-pay-lbl:not(#a):not(#b){align-items:center;margin:0 4px 0 0!important;font:500 16px/1.3 Jost,"Jost Fallback",sans-serif;color:#241A2B;white-space:nowrap}
html body.dtc-c .productView .pdp-card .pdp-pay-b:not(#a):not(#b){align-items:center;justify-content:center;width:38px!important;height:26px;margin:0!important;padding:0 2px!important;box-sizing:border-box;background:#fff;border:1px solid #CFC4D6;border-radius:5px}
html body.dtc-c .productView .pdp-card .pdp-pay-b img:not(#a):not(#b){display:block;width:auto!important;height:auto!important;max-width:33px!important;max-height:18px!important;object-fit:contain;margin:0!important}
/* Harmony: full-card-width gold button, two stacked lines (crystal only, gated in the partial) */
html body.dtc-c .productView .pdp-card > .pdp-harm--card:not(#a):not(#b){order:14;flex:0 0 100%;margin:2px 0 0!important;padding:0!important;border:0!important;background:none!important}
html body.dtc-c .productView .pdp-card .pdp-harm-btn.pdp-harm-btn--stack:not(#a):not(#b){
display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%!important;max-width:none!important;height:auto!important;min-height:68px;
margin:0!important;padding:12px 20px!important;box-sizing:border-box;background:#C4A25A!important;color:#1D1524!important;border:1px solid #A98A45!important;border-radius:8px!important;
text-decoration:none!important;text-align:center;text-transform:none!important;letter-spacing:0!important;white-space:normal!important;box-shadow:none
}
html body.dtc-c .productView .pdp-card .pdp-harm-btn--stack::before,html body.dtc-c .productView .pdp-card .pdp-harm-btn--stack::after{content:none!important;display:none!important}
html body.dtc-c .productView .pdp-card .pdp-harm-btn--stack:is(:hover,:focus-visible):not(#a):not(#b){background:#B8954C!important}
html body.dtc-c .productView .pdp-card .pdp-harm-btn--stack:focus-visible{outline:3px solid #241A2B!important;outline-offset:2px}
html body.dtc-c .productView .pdp-card .pdp-harm-lead:not(#a){display:block;font:400 16px/1.25 Jost,"Jost Fallback",sans-serif;color:#1D1524}
html body.dtc-c .productView .pdp-card .pdp-harm-main:not(#a){display:block;font:600 20px/1.25 Jost,"Jost Fallback",sans-serif;color:#1D1524}
/* ---------- 5. Phones ---------- */
@media (max-width:520px){
html body.dtc-c .productView .pdp-card:not(#a):not(#b){padding:14px 12px 12px;gap:10px 8px}
html body.dtc-c .productView .pdp-card #form-action-addToCart:not(#a):not(#b){padding:0 10px!important;letter-spacing:.03em!important;gap:6px}
html body.dtc-c .productView .pdp-card #form-action-addToCart i,html body.dtc-c .productView .pdp-card #form-action-addToCart svg{display:none!important}
html body.dtc-c .productView .pdp-card .form-increment:not(#a):not(#b){height:44px!important}
html body.dtc-c .productView .pdp-card .form-increment .button:not(#a):not(#b){width:36px!important;height:41px!important}
html body.dtc-c .productView .pdp-card .form-increment .form-input--incrementTotal:not(#a):not(#b){width:24px!important;height:41px!important;line-height:41px!important}
html body.dtc-c .productView .pdp-card #form-action-addToCart:not(#a):not(#b){height:44px!important;min-height:44px}
html body.dtc-c .productView .pdp-card .form-wishlist:not(#a):not(#b){flex:0 0 44px!important;width:44px!important;min-width:44px}
html body.dtc-c .productView .pdp-card .form-wishlist .c10-wish:not(#a):not(#b){width:44px!important;height:44px!important;min-width:44px}
html body.dtc-c .productView .pdp-card form.cart-value > .form-action:not(.form-wishlist):not(#a):not(#b){flex:1 1 120px!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-label--alternate small:not(#a):not(#b){display:none!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input.form-radio + label.form-label:not(#a):not(#b){padding:8px 10px!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input:checked + label.form-label:not(#a):not(#b){padding:7px 9px!important}
html body.dtc-c .productView .pdp-card .pdp-pay-b:not(#a):not(#b){width:44px!important;height:28px}
html body.dtc-c .productView .pdp-card .pdp-harm-btn.pdp-harm-btn--stack:not(#a):not(#b){min-height:64px;padding:10px 14px!important}
html body.dtc-c .productView .pdp-card .pdp-harm-main:not(#a){font-size:18px}
}
/* ---------- 6. Sticky bars: none on desktop (hybrid); the phone bar (.pdp-sticky-atc, <=800px) is unchanged ---------- */
@media (min-width:801px){
html body.dtc-c .sticky-cart:not(#a):not(#b){display:none!important}
html body.dtc-c:has(.sticky-cart.show):not(#a){padding-bottom:0!important}
}
/* validation scroll lands below the sticky header */
html body.dtc-c .productView [data-product-option-change] .form-field{scroll-margin-top:220px}
html body.dtc-c .productView .pdp-card > .pdp-card-br{order:3;flex:0 0 100%;height:0;margin:-6px 0 0;padding:0}
html body.dtc-c .productView .pdp-card > .productView-price .price-section:not(#a),html body.dtc-c .productView .pdp-card > .productView-price > *:not(#a){margin-left:0!important;padding-left:0!important}
html body.dtc-c .productView .pdp-card:not(#a):not(#b){justify-content:flex-start}
html body.dtc-c .productView .pdp-card .cbx:not(#a):not(#b){flex:0 0 100%;margin-top:-12px}
/* one-line payments row at desktop card widths */
html body.dtc-c .productView .pdp-card .pdp-pay:not(#a):not(#b){gap:4px 3px!important;column-gap:3px!important}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-lbl:not(#a):not(#b){font-size:14px;margin-right:4px;white-space:nowrap}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b:not(#a):not(#b){width:38px;height:26px;padding:0 2px}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b img:not(#a):not(#b){max-width:33px;max-height:18px}
/* display:contents wrappers still emit clearfix pseudo boxes as flex items -> remove */
html body.dtc-c .productView .pdp-card .productView-options:not(#a)::before,html body.dtc-c .productView .pdp-card .productView-options:not(#a)::after,html body.dtc-c .productView .pdp-card form[data-cart-item-add]:not(#a)::before,html body.dtc-c .productView .pdp-card form[data-cart-item-add]:not(#a)::after{content:none!important;display:none!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > .form-label:first-child:not(#a):not(#b){margin-left:0!important;padding-left:0!important}
@media (max-width:520px){
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > .form-label:first-child:not(#a):not(#b){font-size:15px!important}
html body.dtc-c .productView .pdp-card [data-product-option-change] .form-field > input + .form-label:not(#a):not(#b){font-size:15px!important;padding-left:12px!important;padding-right:12px!important}
}
/* set-sample player + Google micro rating when they render inside the options block (set products): after the options, before payments */
html body.dtc-c .productView .pdp-card section.ssp:not(#a):not(#b){order:11!important;flex:0 0 100%;margin:4px 0 0}
html body.dtc-c .productView .pdp-card .c9-gr--micro:not(#a):not(#b){order:12!important;flex:0 0 100%;margin:0}
/* 6.14.8 (Jeff t343u): status line = In stock, then "Shipping: Calculated in cart" (DOM order now matches).
>=801px same line with a dot; <=800px its own line under In stock. Hidden when the selected variant is out of stock / unavailable. */
html body.dtc-c .productView .c9-pdp-status:has(.c9-stock--out:not([hidden])) .pdp-ship-inline:not(#a):not(#b),
html body.dtc-c .productView .c9-pdp-status:has(.c9-stock--na:not([hidden])) .pdp-ship-inline:not(#a):not(#b){display:none!important}
/* ---------- 6.14.8 gallery (Jeff t344u / t345): photo keeps growing with the window, box = photo, thumbs + hint tight under it ----------
- 6.14.7 capped the photo height at 100vh-300px, so past ~1400px wide the photo stopped and the box filled with white bands, and the
thumb row (column width) no longer lined up with the photo. The cap is removed: photo = full column width, height from its own shape.
- The PDP block may now grow past the 1680px site shell, up to 2200px, so the photo keeps growing on 1920/2560/3440 screens.
- Tall (portrait) photos only: the gallery column is narrowed so the photo fits the window height (thumbs stay photo-width).
- section.productView-images carried a 36.8px bottom margin (theme), which was the gap between photo and thumbs. */
@media (min-width:801px){
html body.dtc-c .productView .pdp-b-row:not(#a):not(#b),
html body.dtc-c .pdp-b-below:not(#a):not(#b),
html body.dtc-c .pdp-store-reviews.c9-gr-sec:not(#a):not(#b),
html body.dtc-c section.pdp-faq:not(#a):not(#b),
html body.dtc-c .pdp-b-desc .c9-desc-grid:not(#a):not(#b),
html body.dtc-c .product-comparison-container:not(#a):not(#b){
--c22w:min(2200px, calc(var(--c9-vw,100vw) - 2 * var(--c28-pad,32px)));
}
html body.dtc-c .pdp-b-gallery:not(#a):not(#b){gap:8px!important;align-self:flex-start;height:auto!important;min-height:0!important}
html body.dtc-c .pdp-b-gallery section.productView-images:not(#a):not(#b){margin:0!important;padding:0!important;height:auto!important;min-height:0!important;max-height:none!important}
html body.dtc-c .pdp-b-gallery img[data-main-image]:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .productView-img-container img[data-main-image]:not(#a):not(#b){max-height:none!important;height:auto!important;width:100%!important;position:static!important}
html body.dtc-c .pdp-b-gallery > .pdp-thumbs:not(#a):not(#b){width:100%!important;max-width:100%!important;box-sizing:border-box;margin:0!important}
html body.dtc-c .pdp-b-gallery .pdp-gal-hint:not(#a):not(#b){margin:-2px 0 0!important;padding:0!important;line-height:20px;overflow:visible}
html body.dtc-c .pdp-b-gallery > .product-slider:not(#a):not(#b){margin-top:10px!important}
html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery.pdp-gal--tall:not(#a):not(#b){max-width:calc((100vh - 140px) * var(--pdp-arn,1))}
}
@media (min-width:801px){
/* portrait photo: keep the buy box right next to the narrowed photo column (no gap between them) */
html body.dtc-c .pdp-b-row:has(> .pdp-gal--tall):not(#a):not(#b){justify-content:flex-start!important}
html body.dtc-c .pdp-b-row:has(> .pdp-gal--tall) > .product-rightside-content:not(#a):not(#b){margin-left:0!important}
}
/* ===== fix6149s.css ===== */
/* 6.14.9: PDP ZIP-code shipping estimate (Option 3). Markup: product-view.html .pdp-zip; logic: fix6149s.js */
html body.dtc-c .productView .pdp-ship-inline .pdp-ship-link:not(#a):not(#b){color:inherit;text-decoration:underline dotted #713592;text-decoration-thickness:1px;text-underline-offset:3px}
html body.dtc-c .productView .pdp-ship-inline .pdp-ship-link:not(#a):not(#b):hover{color:#713592;text-decoration-style:solid}
/* once a quote (or the fallback link) shows in the box, the status-line copy would repeat it */
html body.dtc-c .productView:has(.pdp-zip[data-state="ok"]) .pdp-ship-inline:not(#a):not(#b),
html body.dtc-c .productView:has(.pdp-zip[data-state="fail"]) .pdp-ship-inline:not(#a):not(#b){display:none!important}
/* same rule as the status line: nothing to quote when the chosen variant is out of stock */
html body.dtc-c .productView .c9-pdp-status:has(.c9-stock--out:not([hidden])) + .pdp-zip:not(#a):not(#b),
html body.dtc-c .productView .c9-pdp-status:has(.c9-stock--na:not([hidden])) + .pdp-zip:not(#a):not(#b){display:none!important}
html body.dtc-c .productView .pdp-zip:not(#a):not(#b){box-sizing:border-box;width:100%;min-width:0;contain:inline-size;margin:4px 0 12px;font:400 16px/1.4 Jost,"Jost Fallback",sans-serif;color:#241A2B;max-width:100%}
html body.dtc-c .productView .pdp-zip[hidden]:not(#a):not(#b){display:none!important}
html body.dtc-c .productView .pdp-zip .pdp-zip-form:not(#a):not(#b){display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
html body.dtc-c .productView .pdp-zip .pdp-zip-form[hidden]:not(#a):not(#b),html body.dtc-c .productView .pdp-zip .pdp-zip-sum[hidden]:not(#a):not(#b){display:none!important}
html body.dtc-c .productView .pdp-zip .pdp-zip-lbl:not(#a):not(#b){display:inline-block;margin:0;padding:0;font:500 16px/1.3 Jost,"Jost Fallback",sans-serif;color:#241A2B;text-transform:none;letter-spacing:0}
html body.dtc-c .productView .pdp-zip .pdp-zip-row:not(#a):not(#b){display:flex;align-items:stretch;gap:8px;flex:1 1 auto;min-width:0;max-width:430px}
html body.dtc-c .productView .pdp-zip select.pdp-zip-country:not(#a):not(#b){flex:0 0 132px;width:132px;min-width:0;height:44px;margin:0;padding:0 26px 0 10px;border:1.5px solid #8D7A99;border-radius:8px;background-color:#fff;font:400 15px/1 Jost,"Jost Fallback",sans-serif;color:#241A2B;text-overflow:ellipsis}
html body.dtc-c .productView .pdp-zip input.pdp-zip-input:not(#a):not(#b){flex:1 1 0;min-width:0;width:0;height:44px;margin:0;padding:0 12px;border:1.5px solid #8D7A99;border-radius:8px;background:#fff;font:400 16px/1 Jost,"Jost Fallback",sans-serif;color:#241A2B;box-shadow:none}
html body.dtc-c .productView .pdp-zip input.pdp-zip-input:not(#a):not(#b)::placeholder{color:#6B5C75;opacity:1}
html body.dtc-c .productView .pdp-zip select.pdp-zip-country:not(#a):not(#b):focus-visible,
html body.dtc-c .productView .pdp-zip input.pdp-zip-input:not(#a):not(#b):focus-visible{outline:2px solid #713592;outline-offset:1px;border-color:#713592}
html body.dtc-c .productView .pdp-zip .pdp-zip-check:not(#a):not(#b){flex:0 0 auto;height:44px;min-width:84px;margin:0;padding:0 18px;border:0;border-radius:8px;background:#462C59;color:#fff;font:600 15px/1 Jost,"Jost Fallback",sans-serif;letter-spacing:.03em;cursor:pointer}
html body.dtc-c .productView .pdp-zip .pdp-zip-check:not(#a):not(#b):hover{background:#713592}
html body.dtc-c .productView .pdp-zip .pdp-zip-check:not(#a):not(#b):focus-visible,
html body.dtc-c .productView .pdp-zip .pdp-zip-change:not(#a):not(#b):focus-visible{outline:2px solid #713592;outline-offset:2px}
html body.dtc-c .productView .pdp-zip .pdp-zip-check[disabled]:not(#a):not(#b){opacity:.75;cursor:progress}
html body.dtc-c .productView .pdp-zip .pdp-zip-err:not(#a):not(#b){flex-basis:100%;font-size:15px;color:#A12A2A}
html body.dtc-c .productView .pdp-zip .pdp-zip-err:empty{display:none}
html body.dtc-c .productView .pdp-zip .pdp-zip-sum:not(#a):not(#b){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
html body.dtc-c .productView .pdp-zip .pdp-zip-code:not(#a):not(#b){display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1.5px solid #8D7A99;border-radius:8px;background:#fff;font-weight:500}
html body.dtc-c .productView .pdp-zip .pdp-zip-change:not(#a):not(#b){all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;cursor:pointer;font:500 16px/1 Jost,"Jost Fallback",sans-serif;color:#462C59;text-decoration:underline;text-underline-offset:3px}
html body.dtc-c .productView .pdp-zip .pdp-zip-res:not(#a):not(#b){margin-top:6px}
html body.dtc-c .productView .pdp-zip .pdp-zip-res:empty{display:none}
html body.dtc-c .productView .pdp-zip .pdp-zip-opt:not(#a):not(#b){display:flex;align-items:flex-start;gap:8px;padding:9px 12px;margin:0 0 6px;border:1.5px solid #8D7A99;border-radius:8px;background:#fff;max-width:560px}
html body.dtc-c .productView .pdp-zip .pdp-zip-opt svg{flex:0 0 auto;margin-top:1px;color:#462C59}
html body.dtc-c .productView .pdp-zip .pdp-zip-t:not(#a):not(#b){display:flex;flex-direction:column;gap:2px;min-width:0}
html body.dtc-c .productView .pdp-zip .pdp-zip-l:not(#a):not(#b){font:500 16px/1.35 Jost,"Jost Fallback",sans-serif;color:#241A2B}
html body.dtc-c .productView .pdp-zip .pdp-zip-m:not(#a):not(#b){font:400 14px/1.3 Jost,"Jost Fallback",sans-serif;color:#5B4B66}
html body.dtc-c .productView .pdp-zip .pdp-zip-more:not(#a):not(#b){margin:2px 0 0;font:400 14px/1.45 Jost,"Jost Fallback",sans-serif;color:#5B4B66}
html body.dtc-c .productView .pdp-zip .pdp-zip-more a:not(#a):not(#b),
html body.dtc-c .productView .pdp-zip a.pdp-zip-fb:not(#a):not(#b){color:#462C59;font-weight:500;text-decoration:underline;text-underline-offset:3px}
html body.dtc-c .productView .pdp-zip a.pdp-zip-fb:not(#a):not(#b){display:inline-flex;align-items:center;min-height:32px;font-size:16px}
@media (max-width:800px){
html body.dtc-c .productView .pdp-zip .pdp-zip-form:not(#a):not(#b){flex-direction:column;align-items:stretch}
html body.dtc-c .productView .pdp-zip .pdp-zip-row:not(#a):not(#b){max-width:none}
html body.dtc-c .productView .pdp-zip select.pdp-zip-country:not(#a):not(#b){flex-basis:104px;width:104px}
html body.dtc-c .productView .pdp-zip .pdp-zip-l:not(#a):not(#b){font-size:15px}
}
/* ===== fix6150.css ===== */
/* 6.14.11 audio fit (Nov 11): players shrink to their container on phone and tablet.
Root cause on category cards: .card-body is content-box with width equal to the card
plus 12px left/right padding, so the body is 24px wider than the card. The card's
overflow:hidden then clips the right 12px — waveforms and duration times are cut off. */
/* 1) Keep the card body (and therefore the player) inside the card. */
html body.dtc-c .card .card-body:not(#a):not(#b){
box-sizing:border-box!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
/* 2) Every player layout can shrink; waves never paint past their box. */
html body.dtc-c .c9p-list,
html body.dtc-c .c9p,
html body.dtc-c .c9p-mid,
html body.dtc-c .c9p-top,
html body.dtc-c .c9p-wave,
html body.dtc-c .sp,
html body.dtc-c .sp-row,
html body.dtc-c .sp-wave,
html body.dtc-c .ssp,
html body.dtc-c .ssp-i,
html body.dtc-c .ssp-mid,
html body.dtc-c .ssp-wv,
html body.dtc-c .cb-c9p,
html body.dtc-c .h5-hear-card .c9p-list{
min-width:0;
max-width:100%;
box-sizing:border-box;
}
html body.dtc-c .c9p-list,
html body.dtc-c .c9p,
html body.dtc-c .sp,
html body.dtc-c .sp-row,
html body.dtc-c .ssp{
width:100%;
}
html body.dtc-c .c9p-wave,
html body.dtc-c .c9p-bars,
html body.dtc-c .sp-wave,
html body.dtc-c .sp-bars,
html body.dtc-c .ssp-wv{
overflow:hidden;
min-width:0;
max-width:100%;
}
html body.dtc-c .c9p-bars i,
html body.dtc-c .sp-bars i,
html body.dtc-c .ssp-wv i{
min-width:0!important;
flex:1 1 0%!important;
max-width:100%;
box-sizing:border-box;
}
@media (max-width:800px){
html body.dtc-c .card .c9p-bars{gap:1px}
}
/* 3) Duration/time stays on the row and stays fully visible. */
html body.dtc-c .c9p-dur,
html body.dtc-c .sp-times,
html body.dtc-c .ssp-st{
flex:0 0 auto;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
html body.dtc-c .card .c9p .c9p-top:not(#a){
min-width:0;
max-width:100%;
box-sizing:border-box;
}
html body.dtc-c .card .c9p .c9p-dur:not(#a){
min-width:3ch!important;
flex:0 0 auto!important;
}
/* 4) Legacy Play Sound / meta-container players (compare, leftover markup). */
html body .meta-container,
html body .sample-audio,
html body .sample-audio--timeline,
html body .sample-audio--wrap{
min-width:0;
max-width:100%;
box-sizing:border-box;
}
html body .sample-audio--timeline,
html body .sample-audio .progress,
html body .sample-audio .progress-bar{
max-width:100%;
overflow:hidden;
}
/* 6.14.11 carousel gold frame (Nov 11):
The slide art (3000×1120) has a thin gold frame inset ~27px from each edge.
.c8-car used aspect-ratio:3000/1120 with max-height:620px. Past ~1661px that
cap makes the box wider than the art, and object-fit:cover crops the top and
bottom of the frame (laptop widths stay intact). Drop the height cap so the
ratio holds at every width, and use contain so the frame cannot be clipped. */
@media (min-width: 801px){
html body.dtc-c .c8-car:not(#a){
max-height:none!important;
aspect-ratio:3000/1120;
width:100%;
height:auto;
}
}
html body.dtc-c .c8-slide picture,
html body.dtc-c .c8-slide img{
object-fit:contain;
object-position:center center;
}
/* ===== fix6152.css ===== */
/* 6.14.12 (Nov 11): Best Sellers photo fit, hide duplicate card play overlay,
30% larger PDP "We accept" badges, fuller lower Harmony band. */
/* ---- 1. Best Sellers photo boxes ----
Root cause: .card-figure is locked to aspect-ratio 1/1. Many Best Sellers
photos (and Koshi / crystal shots) are ~4/3, so object-fit:contain leaves
~25% empty height above and below the product. 4/3 is the common landscape
ratio; square photos letterbox on the sides and are never cropped.
box-sizing + max-width keep the figure inside the card (the 16px figure
padding was overflowing the card box, especially at 390). */
html body.dtc-c .h5-best .card-figure:not(#a):not(#b){
aspect-ratio:4/3!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
box-sizing:border-box!important;
padding:8px!important;
overflow:hidden!important;
margin:0 0 12px!important;
}
html body.dtc-c .h5-best .card-figure>a:not(#a),
html body.dtc-c .h5-best .card-img-container:not(#a){
position:absolute!important;inset:0;
width:100%!important;height:100%!important;
max-width:100%!important;box-sizing:border-box!important;
}
html body.dtc-c .h5-best .card-figure img.card-image:not(#a){
object-fit:contain!important;
object-position:center center!important;
}
html body.dtc-c .h5-best-grid>.product{display:flex}
html body.dtc-c .h5-best .card:not(#a){height:100%;box-sizing:border-box!important}
/* Duplicate gray play button on the photo (injected only on .h5-best when a
Sound sample player is present). Keep the main .c9p player. */
html body.dtc-c .c9-play-ov{display:none!important}
/* ---- 2. PDP "We accept" badges ~30% larger (38x26 -> 50x34; img 33x18 -> 43x23).
Native mark art is larger than the new CSS size, so they stay sharp.
Label stays on the first line with the badges; badges wrap evenly if the
buy-box is narrower than 10 enlarged marks (phone, and tight desktop cards).
Do not touch footer icons or the phone sticky ATC bar. */
html body.dtc-c .productView .pdp-card .footer-payment-icons.pdp-pay:not(#a):not(#b),
html body.dtc-c .productView .pdp-card .pdp-pay:not(#a):not(#b){
display:flex!important;
flex-wrap:wrap!important;
align-items:center!important;
gap:8px 6px!important;
column-gap:6px!important;
row-gap:8px!important;
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
height:auto!important;
max-height:none!important;
overflow:visible!important;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-lbl:not(#a):not(#b){
flex:0 0 auto;
white-space:nowrap!important;
margin:0 2px 0 0!important;
font:500 14px/1.3 Jost,"Jost Fallback",sans-serif;
color:#241A2B;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b:not(#a):not(#b){
flex:0 0 auto;
width:50px!important;
height:34px!important;
padding:0 3px!important;
margin:0!important;
box-sizing:border-box!important;
background:#fff;
border:1px solid #CFC4D6;
border-radius:5px;
display:inline-flex!important;
align-items:center;
justify-content:center;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b img:not(#a):not(#b){
display:block;
width:auto!important;
height:auto!important;
max-width:43px!important;
max-height:23px!important;
object-fit:contain!important;
image-rendering:auto;
margin:0!important;
}
@media (max-width:520px){
html body.dtc-c .productView .pdp-card .pdp-pay:not(#a):not(#b){
gap:8px 6px!important;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b:not(#a):not(#b){
width:57px!important;
height:34px!important;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b img:not(#a):not(#b){
max-width:49px!important;
max-height:23px!important;
}
}
/* ---- 3. Lower PDP Harmony block (.cbp-close, under Key specs, above Pairs).
Lavender band with Listen first eyebrow, the original Playfair heading, and
the larger gold button whose visible text is only "Find Bowls in Harmony".
Crystal-only gating is unchanged (the row lives inside section.cbp).
Buy-box stacked button is left as-is, including its colors. */
html body.dtc-c section.cbp .cbp-close:not(#a):not(#b),
html body.dtc-c section.cbp:not([hidden]) .cbp-close:not(#a):not(#b){
display:block!important;
box-sizing:border-box!important;
width:100%!important;
max-width:none!important;
margin:32px 0 0!important;
padding:40px 24px 44px!important;
background:#EBE5ED;
color:#241A2B;
text-align:center;
font-family:Jost,"Jost Fallback",sans-serif;
}
html body.dtc-c .cbp .cbp-close-in{width:100%;max-width:760px;margin:0 auto;box-sizing:border-box}
html body.dtc-c .cbp .cbp-close-e{
margin:0 0 10px!important;padding:0;
font:600 16px/1.2 Jost,"Jost Fallback",sans-serif;
letter-spacing:.12em;text-transform:uppercase;color:#462C59;
}
html body.dtc-c .cbp .cbp-close-t,
html body.dtc-c .cbp h2.cbp-close-t{
margin:0 0 24px!important;padding:0;
font:500 34px/1.2 'Playfair Display',Georgia,serif!important;
color:#241A2B!important;
text-transform:none!important;
letter-spacing:0!important;
}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:not(#a):not(#b),
html body.dtc-c .cbp .cbp-close [data-cb-open].pdp-harm-btn:not(#a):not(#b){
display:inline-flex!important;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;justify-content:center;
box-sizing:border-box;
width:auto!important;
min-width:560px;
max-width:min(640px,100%)!important;
height:auto!important;
min-height:64px!important;
margin:0 auto!important;
padding:14px 56px!important;
border-radius:10px!important;
border:1.5px solid #A8822E!important;
background:#C9A24A!important;
color:#241A2B!important;
font:700 18px/1.2 Jost,"Jost Fallback",sans-serif!important;
text-decoration:none!important;
text-transform:none!important;
letter-spacing:0!important;
white-space:nowrap;
cursor:pointer;
}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:hover:not(#a),
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:is(:hover,:focus-visible):not(#a){
background:#D4B062!important;
color:#241A2B!important;
border-color:#A8822E!important;
text-decoration:none!important;
}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:focus-visible{
outline:3px solid #4B2A5C!important;
outline-offset:2px!important;
}
html body.dtc-c section.cbp:has(.cbp-close) .cbp-hd{
border-top:0!important;
margin-top:32px!important;
padding-top:0!important;
}
html body.dtc-c .cbp .cbp-close-in{width:100%!important;max-width:760px;box-sizing:border-box;margin:0 auto}
@media (max-width:1100px){
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:not(#a):not(#b),
html body.dtc-c .cbp .cbp-close [data-cb-open].pdp-harm-btn:not(#a):not(#b){
flex-wrap:wrap;
white-space:normal;
min-width:0;
max-width:100%!important;
padding:14px 40px!important;
}
}
@media (max-width:800px){
html body.dtc-c section.cbp .cbp-close:not(#a):not(#b){
padding:28px 16px 32px!important;
margin:24px 0 0!important;
}
html body.dtc-c .cbp .cbp-close-t,
html body.dtc-c .cbp h2.cbp-close-t{font-size:28px!important}
html body.dtc-c .cbp .cbp-close-in{display:block!important;width:100%!important}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:not(#a):not(#b),
html body.dtc-c .cbp .cbp-close [data-cb-open].pdp-harm-btn:not(#a):not(#b){
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
flex:0 0 auto!important;
align-self:stretch!important;
box-sizing:border-box!important;
min-height:60px!important;
padding:12px 20px!important;
white-space:normal;
font-size:18px!important;
}
}
/* ===== fix6160.css ===== */
/* fix6160 — Related products width + footer newsletter alignment (6.14.15b)
Related: match the Pairs well with (section.cbp) content width and stop
half-cards being clipped on both edges. Newsletter: one baseline for
labels/inputs/Subscribe on desktop; stacked full-width on phone.
Form fields, action and Mailchimp/BC wiring are unchanged. */
/* ---- 1. Related products (and Customers also viewed) ---- */
html body.dtc-c .pdp-suggest:not(#a),
html body.dtc-c .pdp-suggest-block:not(#a),
html body.dtc-c section.pdp-suggest-block:not(#a){
max-width:none!important;
width:100%!important;
box-sizing:border-box!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
}
html body.dtc-c .pdp-suggest-block > ul.productGrid:not(#a),
html body.dtc-c .pdp-suggest-block .related-products-slider:not(#a){
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
margin-left:0!important;
margin-right:0!important;
}
html body.dtc-c .pdp-suggest-block .slick-list:not(#a){
overflow:hidden!important;
padding:0!important;
width:100%!important;
box-sizing:border-box!important;
}
html body.dtc-c .pdp-suggest-block .slick-track:not(#a){
display:flex!important;
}
/* Do not force % widths on slick slides (those were % of the track and
clipped cards on both edges). Let slick's pixel widths stand. */
/* .productGrid .product { max-width:270px } was locking each slide at 270px
so a now-wider row still showed clipped half-cards on both edges. */
html body.dtc-c .pdp-suggest-block .related-products.slick-initialized .slick-slide:not(#a),
html body.dtc-c .pdp-suggest-block .related-products .product:not(#a),
html body.dtc-c .pdp-suggest-block .related-products .productCarousel-slide:not(#a){
float:none;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
}
html body.dtc-c .pdp-suggest-block .slick-slide > div,
html body.dtc-c .pdp-suggest-block .slick-slide .card{
width:100%;
max-width:100%;
box-sizing:border-box;
}
/* Phone/tablet grid (related-products1): full cards, no clipped half-cards */
@media (max-width:991px){
html body.dtc-c .pdp-suggest-block > ul.related-products1:not(#a){
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
width:100%!important;
overflow:visible!important;
}
html body.dtc-c .pdp-suggest-block > ul.related-products1 > li.product:not(#a){
width:auto!important;
max-width:none!important;
margin:0!important;
float:none!important;
display:block!important;
}
}
@media (max-width:520px){
html body.dtc-c .pdp-suggest-block > ul.related-products1:not(#a){
grid-template-columns:minmax(0,1fr);
}
}
/* ---- 2. Footer newsletter ("Be the First to Hear…") ---- */
html body.dtc-c .newsletter-section .form-fieldset:not(#a){
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
align-items:end!important;
gap:8px 16px!important;
border:0!important;
margin:0!important;
padding:0!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
html body.dtc-c .newsletter-section .form-fieldset > input[type=hidden]{
display:none!important;
}
html body.dtc-c .newsletter-section .form-field:not(#a){
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
gap:6px!important;
margin:0!important;
padding:0!important;
width:auto!important;
min-width:0!important;
max-width:100%!important;
float:none!important;
position:static!important;
}
html body.dtc-c .newsletter-section .c10-nl-label:not(#a),
html body.dtc-c .newsletter-section .form-label:not(#a){
display:block!important;
position:static!important;
clip:auto!important;
width:auto!important;
height:auto!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
font:500 14px/20px Jost,var(--f-body),sans-serif!important;
color:#241A2B!important;
text-align:left;
text-transform:none;
letter-spacing:0;
}
html body.dtc-c .newsletter-section .form-input:not(#a),
html body.dtc-c .newsletter-section input.form-input:not(#a){
height:48px!important;
min-height:48px!important;
max-height:48px!important;
min-width:0!important;
max-width:100%!important;
width:100%!important;
margin:0!important;
padding:0 14px!important;
box-sizing:border-box!important;
border:1.5px solid #C9B8A8!important;
border-radius:8px!important;
background:#fff!important;
color:#241A2B!important;
font:400 16px/1 Jost,var(--f-body),sans-serif!important;
}
html body.dtc-c .newsletter-section button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a){
height:48px!important;
min-height:48px!important;
max-height:48px!important;
margin:0!important;
min-width:44px;
width:auto!important;
max-width:none;
padding:0 28px!important;
box-sizing:border-box!important;
white-space:nowrap;
align-self:end;
position:static!important;
top:auto!important;
right:auto!important;
}
@media (max-width:800px){
html body.dtc-c .newsletter-section .form-fieldset:not(#a){
grid-template-columns:minmax(0,1fr)!important;
gap:16px!important;
}
html body.dtc-c .newsletter-section .form-field:not(#a),
html body.dtc-c .newsletter-section .form-input:not(#a),
html body.dtc-c .newsletter-section button[type=submit]:not(#a){
width:100%!important;
max-width:100%!important;
}
}
/* ===== fix6170.css ===== */
/* 6.14.17 — gallery gap, Affirm wrap, listen cards, related card photos */
/* ------------------------------------------------------------------
1. Gallery gap
Desktop (≥801): the gallery is a flex column (fix6147). The space
between "Click to see full view" and the trust badges is the flex
gap (~10px) plus .product-usps-main { margin-top:30px; padding-top:10px }.
Measured ~48px at 1440. Cut to about 30% (~14px) by tightening the
badge block only. Do not stretch the left column, do not change
sticky behavior, and leave the mobile usps block (already margin-top:0)
alone.
------------------------------------------------------------------ */
@media (min-width: 801px) {
html body.dtc-c .pdp-b-gallery > .product-slider:not(#a):not(#b) {
/* Beats fix6147's margin-top:10px !important. Gallery column-gap is 8px,
so 6px margin yields a ~14px hint-to-badge gap (~30% of the original 48px). */
margin-top: 6px !important;
}
html body.dtc-c .pdp-b-gallery > .product-slider .product-usps-main:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .product-usps-main:not(.mobile-visible):not(#a):not(#b) {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* ------------------------------------------------------------------
2. Affirm promo wrap (CSS only — do not change the Affirm script,
data-amount, or placement). Keep the line beside the price when it
fits; otherwise drop it onto its own full-width row. Do not let the
container shrink into a cramped column that stacks "0% APR" with
its highlight box. Style the container; also force the badge to
stay inline if the injected markup is reachable.
------------------------------------------------------------------ */
html body.dtc-c .productView .pdp-card:not(#a):not(#b) {
container-type: inline-size;
}
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b) {
/* Own row under the price whenever the promo cannot sit on one clean
line beside it. At 1440 the leftover next to the price is already
too narrow (the badge stacks and the sentence jumbles), so use a
full-width basis. */
flex: 1 0 100%;
width: 100%;
max-width: 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
white-space: normal !important;
overflow: visible !important;
}
html body.dtc-c .c28-affirm .__apr_badge,
html body.dtc-c .affirm-as-low-as .__apr_badge,
html body.dtc-c .c28-affirm [class*="apr_badge"] {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
white-space: nowrap !important;
vertical-align: middle;
}
@container (max-width: 420px) {
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b) {
flex: 0 0 100%;
width: 100%;
}
}
@media (max-width: 800px) {
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b) {
flex: 0 0 100%;
width: 100%;
white-space: normal !important;
overflow: visible !important;
}
}
/* ------------------------------------------------------------------
3+4. Homepage "Hear before you buy" product cards
------------------------------------------------------------------ */
html body.dtc-c .h5-hear-list[data-listen-cards]:not(#a):not(#b) {
list-style: none;
margin: 0;
padding: 0;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
max-width: none !important;
}
html body.dtc-c .h5-hear-list[data-listen-cards] > li {
min-width: 0;
}
html body.dtc-c .h5lc {
background: #fff;
border: 1px solid #ECE5EE;
border-radius: 12px;
padding: 16px 16px 18px;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
box-sizing: border-box;
}
html body.dtc-c .h5lc-photo {
display: block;
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
background: #fff;
border: 1px solid #F0EAF3;
}
html body.dtc-c .h5lc-photo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
html body.dtc-c .h5lc-name {
font: 400 18px/24px var(--f-head), "Playfair Display", Georgia, serif;
margin: 0;
color: #241A2B;
}
html body.dtc-c .h5lc-name a {
color: #241A2B !important;
text-decoration: none;
}
html body.dtc-c .h5lc-name a:hover,
html body.dtc-c .h5lc-name a:focus-visible {
color: #713592 !important;
text-decoration: underline;
text-underline-offset: 3px;
}
html body.dtc-c .h5lc-price {
font: 600 16px/1.3 var(--f-body), Jost, sans-serif;
color: #241A2B;
margin: 0;
}
html body.dtc-c .h5lc-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
}
html body.dtc-c .h5lc-play {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: #713592;
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
margin: 0;
}
html body.dtc-c .h5lc-play:hover { background: #5E2C7A; }
html body.dtc-c .h5lc-play:focus-visible {
outline: 2px solid #4B2A5C;
outline-offset: 2px;
}
html body.dtc-c .h5lc-ico {
width: 0;
height: 0;
border-left: 12px solid #fff;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
margin-left: 3px;
display: block;
}
html body.dtc-c .h5lc.is-playing .h5lc-ico,
html body.dtc-c .h5lc-play[aria-pressed="true"] .h5lc-ico {
width: 12px;
height: 14px;
border: 0;
margin: 0;
background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%);
}
html body.dtc-c .h5lc-go {
font: 500 13px/18px var(--f-body), Jost, sans-serif;
color: #713592 !important;
text-transform: uppercase;
letter-spacing: .08em;
text-decoration: none;
}
html body.dtc-c .h5lc-go:hover,
html body.dtc-c .h5lc-go:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
html body.dtc-c .h5-hear-list[data-listen-cards][data-empty] {
display: block;
}
@media (max-width: 1100px) and (min-width: 801px) {
html body.dtc-c .h5-hear-list[data-listen-cards]:not(#a):not(#b) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px !important;
}
}
@media (max-width: 800px) {
html body.dtc-c .h5-hear-list[data-listen-cards]:not(#a):not(#b) {
display: flex !important;
grid-template-columns: none !important;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: 12px;
grid-template-columns: none;
-webkit-overflow-scrolling: touch;
padding: 0 0 8px;
margin: 0 -16px;
padding-left: 16px;
padding-right: 16px;
}
html body.dtc-c .h5-hear-list[data-listen-cards] > li {
flex: 0 0 78%;
max-width: 320px;
scroll-snap-align: start;
}
}
/* Related products: no layout change; images swapped in JS when a white shot is known. */
/* 6.14.24: Hear cards reuse the shared compact (c9p) Best Sellers player.
Play button size stays 44x44 via fix6190. Duration slot is reserved even
when empty (real metadata only; never a made-up time). */
html body.dtc-c .h5lc .c9p-list:not(#a) {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
box-sizing: border-box;
}
html body.dtc-c .h5lc .c9p:not(#a) {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 44px;
align-items: center;
}
html body.dtc-c .h5lc .c9p-dur:not(#a) {
min-width: 3ch;
flex: 0 0 auto;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
html body.dtc-c .h5lc .c9p-wave:not(#a) {
height: 20px;
overflow: hidden;
min-width: 0;
max-width: 100%;
}
html body.dtc-c .h5lc-go {
margin-top: auto;
}
/* ===== fix6180.css ===== */
/* 6.14.18 — Affirm as one quiet line, Key specs aligned to the buy box.
Layout/styling only. Does not change Affirm settings or script config. */
/* ------------------------------------------------------------------
1. Affirm: always its own full-width row under the price. One short
quiet line. Hide the highlighted 0% APR pill so it cannot stack.
------------------------------------------------------------------ */
html body.dtc-c .productView .pdp-card:not(#a):not(#b) {
container-type: inline-size;
}
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b):not(#c) {
flex: 0 0 100% !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
align-content: center !important;
gap: 0.3em;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
min-height: 22px !important;
font: 400 13px/1.4 Jost, var(--f-body), sans-serif !important;
color: #5A4E62 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
}
html body.dtc-c .productView .pdp-card > .c28-affirm.c28-affirm--off:not(#a):not(#b):not(#c) {
display: none !important;
}
/* Drop the highlighted 0% APR pill (never let it stack). */
html body.dtc-c .c28-affirm .__apr_badge,
html body.dtc-c .affirm-as-low-as .__apr_badge,
html body.dtc-c .c28-affirm [class*="apr_badge"],
html body.dtc-c .c28-affirm [class*="__apr"] {
display: none !important;
}
html body.dtc-c .c28-affirm .c6180-line {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.3em;
min-width: 0;
font: inherit;
color: inherit;
white-space: nowrap;
}
html body.dtc-c .c28-affirm .c6180-line a {
font: inherit;
color: #713592;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
html body.dtc-c .c28-affirm .__affirm-logo,
html body.dtc-c .c28-affirm [class*="affirm-logo"],
html body.dtc-c .c28-affirm .c6180-line img {
display: inline-block !important;
height: 1.05em !important;
width: auto !important;
max-height: 16px !important;
vertical-align: -0.15em;
flex: 0 0 auto;
}
/* Hide leftover Affirm nodes once we have rebuilt the quiet line. */
html body.dtc-c .c28-affirm[data-c6180="1"] > :not(.c6180-line) {
display: none !important;
}
/* Long form by default; short form ("From $X/mo with [logo]") when the
line would wrap, or on narrow phones. */
html body.dtc-c .c28-affirm .c6180-short { display: none !important; }
html body.dtc-c .c28-affirm .c6180-full { display: inline !important; }
html body.dtc-c .c28-affirm.c6180-short-mode .c6180-full { display: none !important; }
html body.dtc-c .c28-affirm.c6180-short-mode .c6180-short { display: inline !important; }
@media (max-width: 480px) {
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b):not(#c),
html body.dtc-c .productView .c28-affirm:not(#a):not(#b),
html body.dtc-c .productView #c28-affirm:not(#a):not(#b) {
min-height: 20px !important;
margin: 2px 0 6px !important;
font-size: 12px !important;
line-height: 20px !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
}
}
/* ------------------------------------------------------------------
2. Key specs: match the lavender buy box left/right edges.
The buy box sits in the right column of .pdp-b-row (57/3/40, or
54/3/43 at 801–1100). The description grid used a 62/34 split inside
a 1144px cap, so Key specs was narrower and offset. Use the same
shell width and the same column fractions at >=1024. JS in fix6180.js
refines this when a tall gallery shifts the buy box.
Below 1024 the grid already stacks; keep Key specs full width
(including phones at 390).
------------------------------------------------------------------ */
@media (min-width: 1024px) {
html body.dtc-c .pdp-b-desc .c9-desc-grid.c28v-grid:not(#a):not(#b),
html body.dtc-c .pdp-b-desc .c28v-grid:not(#a):not(#b) {
display: grid !important;
grid-template-columns: 57% 40% !important;
column-gap: 3% !important;
row-gap: 24px !important;
max-width: none !important;
align-items: start;
}
}
@media (min-width: 1024px) and (max-width: 1100px) {
html body.dtc-c .pdp-b-desc .c9-desc-grid.c28v-grid:not(#a):not(#b),
html body.dtc-c .pdp-b-desc .c28v-grid:not(#a):not(#b) {
grid-template-columns: 54% 43% !important;
column-gap: 3% !important;
}
}
@media (max-width: 1023px) {
html body.dtc-c .pdp-b-desc .c9-desc-grid.c28v-grid:not(#a):not(#b),
html body.dtc-c .pdp-b-desc .c28v-grid:not(#a):not(#b) {
grid-template-columns: none !important;
}
}
/* FAQ: keep the existing accordion look after Shipping & returns is removed.
#pdp-faq now lives on the Frequently Asked Questions block. */
html body.dtc-c .additonal-content-section.pdp-faq,
html body.dtc-c section.additonal-content-section.pdp-faq {
scroll-margin-top: 120px;
}
html body.dtc-c #pdp-faq-shipping,
html body.dtc-c #pdp-faq-return {
scroll-margin-top: 120px;
}
/* Hide Affirm's original bare text nodes once the quiet line is built. */
html body.dtc-c .productView .pdp-card > .c28-affirm[data-c6180="1"]:not(#a):not(#b):not(#c) {
font-size: 0 !important;
}
html body.dtc-c .c28-affirm[data-c6180="1"] .c6180-line {
font: 400 13px/1.4 Jost, var(--f-body), sans-serif !important;
color: #5A4E62 !important;
}
@media (max-width: 480px) {
html body.dtc-c .c28-affirm[data-c6180="1"] .c6180-line { font-size: 12px !important; line-height: 20px !important; }
}
/* ===== fix6181.css ===== */
/* fix6181 — Newsletter labels + one baseline (after 6.14.18 / fix6180)
Fixes dark labels and uneven First name / Email / Subscribe alignment
on the "Be the First to Hear About New Instruments & Offers" block.
White labels on plum; labels, inputs and Subscribe share one baseline
on desktop; stacked full-width on phone. Form fields, action and
BigCommerce subscribe wiring are unchanged.
Load after assets/companions/fix6180.css from layout/base.html:
*/
/* Hidden subscribe fields must not occupy a grid cell */
html body.dtc-c .newsletter-section .form-fieldset > input[type=hidden]{
display:none!important;
}
html body.dtc-c .newsletter-section .form-fieldset:not(#a){
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
align-items:end!important;
justify-items:stretch!important;
gap:16px!important;
border:0!important;
margin:0!important;
padding:0!important;
min-width:0!important;
max-width:100%!important;
width:100%!important;
box-sizing:border-box!important;
float:none!important;
flex-flow:unset!important;
}
html body.dtc-c .newsletter-section .form-field:not(#a){
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
align-items:stretch!important;
gap:6px!important;
margin:0!important;
padding:0!important;
width:auto!important;
min-width:0!important;
max-width:100%!important;
float:none!important;
position:static!important;
top:auto!important;
right:auto!important;
}
/* Theme .form-field::before/::after clearfix become flex items, so the
6px gap also appears above the labels and below the inputs and Subscribe
sits lower than the fields. Drop those pseudos so label + 6px + 48px
input pack flush; fieldset align-items:end then gives the inputs and
button one shared top edge and one shared bottom edge. */
html body.dtc-c .newsletter-section .form-field:not(#a)::before,
html body.dtc-c .newsletter-section .form-field:not(#a)::after{
display:none!important;
content:none!important;
width:0!important;
height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
}
/* White labels, equal height, no wrap on desktop so First name and Email
stay the same height. Overrides fix6160's dark #241A2B and the theme
form-label-font-color (#666 / #333). */
html body.dtc-c .newsletter-section .c10-nl-label:not(#a),
html body.dtc-c .newsletter-section .form-label:not(#a){
display:block!important;
position:static!important;
clip:auto!important;
clip-path:none!important;
width:auto!important;
min-width:0!important;
height:24px!important;
min-height:24px!important;
max-height:24px!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
font:500 16px/24px Jost,var(--f-body),sans-serif!important;
color:#FFFFFF!important;
text-align:left!important;
text-transform:none!important;
letter-spacing:0!important;
white-space:nowrap!important;
float:none!important;
-webkit-text-fill-color:#FFFFFF!important;
}
/* Email is required; a , asterisk or ::after on that label only
would make it taller and drop the Email box below First name. The
required attribute and accessible name stay on the input. */
html body.dtc-c .newsletter-section .form-label small:not(#a),
html body.dtc-c .newsletter-section .form-label .required:not(#a){
display:none!important;
float:none!important;
content:none!important;
}
html body.dtc-c .newsletter-section .c10-nl-label::before:not(#a),
html body.dtc-c .newsletter-section .c10-nl-label::after:not(#a),
html body.dtc-c .newsletter-section .form-label::before:not(#a),
html body.dtc-c .newsletter-section .form-label::after:not(#a){
display:none!important;
content:none!important;
}
html body.dtc-c .newsletter-section .form-input:not(#a),
html body.dtc-c .newsletter-section input.form-input:not(#a){
height:48px!important;
min-height:48px!important;
max-height:48px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:0 14px!important;
box-sizing:border-box!important;
border:1.5px solid #C9B8A8!important;
border-radius:8px!important;
background:#FFFFFF!important;
color:#1D1524!important;
font:400 16px/1 Jost,var(--f-body),sans-serif!important;
-webkit-text-fill-color:#1D1524!important;
float:none!important;
display:block!important;
position:static!important;
}
html body.dtc-c .newsletter-section .form-input:not(#a)::placeholder,
html body.dtc-c .newsletter-section input.form-input:not(#a)::placeholder{
color:#5E5763!important;
opacity:1!important;
-webkit-text-fill-color:#5E5763;
}
/* Focus is an outline plus offset, not a colour-only change (Jeff is colourblind). */
html body.dtc-c .newsletter-section .form-input:focus:not(#a),
html body.dtc-c .newsletter-section .form-input:focus-visible:not(#a){
outline:2px solid #F6F1EA!important;
outline-offset:2px!important;
box-shadow:none!important;
border-color:#1D1524!important;
}
/* Reset leftover theme / prefixPostfix margins that sit the button lower
than the inputs. Gold fill, ink text, gold border — 7.3:1 contrast. */
html body.dtc-c .newsletter-section button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a){
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
width:auto!important;
min-width:44px!important;
max-width:none!important;
margin:0!important;
padding:0 28px!important;
box-sizing:border-box!important;
border:2px solid #A98A45!important;
border-radius:8px!important;
background:#C4A25A!important;
color:#1D1524!important;
-webkit-text-fill-color:#1D1524!important;
font:600 16px/1 Jost,var(--f-body),sans-serif!important;
letter-spacing:0!important;
text-transform:none!important;
text-decoration:none!important;
white-space:nowrap!important;
align-self:end!important;
position:static!important;
top:auto!important;
right:auto!important;
float:none!important;
order:0!important;
cursor:pointer;
}
html body.dtc-c .newsletter-section button[type=submit]:hover:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:hover:not(#a){
background:#B3914E!important;
text-decoration:underline!important;
text-underline-offset:3px!important;
}
html body.dtc-c .newsletter-section button[type=submit]:focus-visible:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:focus-visible:not(#a){
outline:2px solid #F6F1EA!important;
outline-offset:2px!important;
text-decoration:underline!important;
text-underline-offset:3px!important;
}
/* Error: thicker ink border plus a text message — not colour alone. */
html body.dtc-c .newsletter-section .form-field--error .form-input:not(#a){
border:2px solid #1D1524!important;
}
html body.dtc-c .newsletter-section .form-inlineMessage:not(#a){
display:block!important;
margin:4px 0 0!important;
color:#F6F1EA!important;
font:500 14px/1.3 Jost,var(--f-body),sans-serif!important;
}
@media (max-width:800px){
html body.dtc-c .newsletter-section .form-fieldset:not(#a){
grid-template-columns:minmax(0,1fr)!important;
gap:16px!important;
}
html body.dtc-c .newsletter-section .form-field:not(#a),
html body.dtc-c .newsletter-section .form-input:not(#a),
html body.dtc-c .newsletter-section button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a){
width:100%!important;
max-width:100%!important;
}
html body.dtc-c .newsletter-section .c10-nl-label:not(#a),
html body.dtc-c .newsletter-section .form-label:not(#a){
white-space:nowrap!important;
}
}
/* ------------------------------------------------------------------
6.14.27 — Structural two-row grid (labels row, controls row).
------------------------------------------------------------------ */
html body.dtc-c .newsletter-section .form-fieldset > input[type=hidden]{
display:none!important;
position:absolute!important;
width:0!important;
height:0!important;
}
html body.dtc-c .newsletter-section .c10-nl-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-label:not(#a):not(#b){
display:block!important;
height:24px!important;
min-height:24px!important;
max-height:24px!important;
line-height:24px!important;
font-size:16px!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
align-self:stretch!important;
}
html body.dtc-c .newsletter-section .form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section input.form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a):not(#b){
box-sizing:border-box!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
margin:0!important;
border-width:2px!important;
border-style:solid!important;
border-radius:8px!important;
align-self:stretch!important;
}
html body.dtc-c .newsletter-section .form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section input.form-input:not(#a):not(#b){
border-color:#C9B8A8!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
justify-self:stretch!important;
}
html body.dtc-c .newsletter-section #nl_first_name:not(#a):not(#b){
padding-right:40px!important;
}
html body.dtc-c .newsletter-section input.form-input:-webkit-autofill,
html body.dtc-c .newsletter-section input.form-input:-webkit-autofill:hover,
html body.dtc-c .newsletter-section input.form-input:-webkit-autofill:focus{
height:48px!important;
min-height:48px!important;
max-height:48px!important;
box-sizing:border-box!important;
border:2px solid #C9B8A8!important;
-webkit-box-shadow:0 0 0 48px #FFFFFF inset!important;
box-shadow:0 0 0 48px #FFFFFF inset!important;
-webkit-text-fill-color:#1D1524!important;
caret-color:#1D1524!important;
transition:background-color 9999s ease-out 0s;
}
html body.dtc-c .newsletter-section input.form-input::-ms-reveal,
html body.dtc-c .newsletter-section input.form-input::-ms-clear,
html body.dtc-c .newsletter-section input.form-input::-webkit-contacts-auto-fill-button,
html body.dtc-c .newsletter-section input.form-input::-webkit-credentials-auto-fill-button{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
/* Desktop and tablet: 2 rows x 3 columns. min-width keeps these
placements from leaking into the phone stack. */
@media (min-width:801px){
html body.dtc-c .newsletter-section .form-fieldset:not(#a):not(#b){
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
grid-template-rows:24px 48px!important;
column-gap:16px!important;
row-gap:6px!important;
gap:6px 16px!important;
align-items:stretch!important;
justify-items:stretch!important;
}
@supports (grid-template-rows: subgrid){
html body.dtc-c .newsletter-section .form-field:not(#a):not(#b){
display:grid!important;
grid-template-rows:subgrid!important;
grid-row:1 / span 2!important;
margin:0!important;
padding:0!important;
/* Inherit the parent 6px row-gap. gap:0 packed the input 3px
above the button (input centered in the leftover space). */
row-gap:6px!important;
column-gap:0!important;
position:relative!important;
/* Beat leftover fix10 width:auto!important which shrinks the
1fr column item to the placeholder's intrinsic width. */
width:100%!important;
max-width:100%!important;
min-width:0!important;
justify-self:stretch!important;
/* A row-only subgrid sizes its implicit column to the input's
intrinsic width; force one full-width column so both inputs
fill the 1fr tracks. */
grid-template-columns:minmax(0,1fr)!important;
justify-items:stretch!important;
}
html body.dtc-c .newsletter-section .form-field:nth-of-type(1):not(#a):not(#b){grid-column:1!important;}
html body.dtc-c .newsletter-section .form-field:nth-of-type(2):not(#a):not(#b){grid-column:2!important;}
html body.dtc-c .newsletter-section .form-field .form-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field .c10-nl-label:not(#a):not(#b){grid-row:1!important;}
html body.dtc-c .newsletter-section .form-field .form-input:not(#a):not(#b){grid-row:2!important;}
}
@supports not (grid-template-rows: subgrid){
html body.dtc-c .newsletter-section .form-field:not(#a):not(#b){
display:contents!important;
margin:0!important;
padding:0!important;
}
html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .c10-nl-label:not(#a):not(#b){grid-column:1!important;grid-row:1!important;}
html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-input:not(#a):not(#b){grid-column:1!important;grid-row:2!important;}
html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .c10-nl-label:not(#a):not(#b){grid-column:2!important;grid-row:1!important;}
html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-input:not(#a):not(#b){grid-column:2!important;grid-row:2!important;}
}
html body.dtc-c .newsletter-section button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-fieldset > *:last-child:not(#a):not(#b){
grid-column:3!important;
grid-row:2!important;
width:auto!important;
min-width:44px!important;
max-width:none!important;
border-color:#A98A45!important;
justify-self:start!important;
}
}
/* Phone: one column, fields stacked, full-width Subscribe. */
@media (max-width:800px){
html body.dtc-c .newsletter-section .form-fieldset:not(#a):not(#b){
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:none!important;
row-gap:16px!important;
column-gap:0!important;
gap:16px!important;
}
html body.dtc-c .newsletter-section .form-field:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(1):not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(2):not(#a):not(#b){
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
gap:6px!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
grid-column:1 / -1!important;
grid-row:auto!important;
}
html body.dtc-c .newsletter-section .form-field .form-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field .c10-nl-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field .form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .c10-nl-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .c10-nl-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-input:not(#a):not(#b){
grid-column:auto!important;
grid-row:auto!important;
width:100%!important;
}
html body.dtc-c .newsletter-section button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-fieldset > *:last-child:not(#a):not(#b){
grid-column:1 / -1!important;
grid-row:auto!important;
width:100%!important;
max-width:100%!important;
justify-self:stretch!important;
border-color:#A98A45!important;
}
}
/* ===== fix6190.css ===== */
/* 6.14.19 pre-launch fixes (Designer report Nov 12). Loaded after fix6180. */
/* 1. Related products: 4:3 photo box, contain, optional 1.12 zoom (skipped for tightly framed photos) */
html body.dtc-c .pdp-suggest-block .card-figure:not(#a):not(#b){
aspect-ratio:4/3!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;
box-sizing:border-box!important;overflow:hidden!important;background:#fff!important;position:relative!important}
html body.dtc-c .pdp-suggest-block .card-figure>a:not(#a),
html body.dtc-c .pdp-suggest-block .card-img-container:not(#a){
position:absolute!important;inset:0;width:100%!important;height:100%!important;padding:0!important;margin:0!important;max-width:none!important}
html body.dtc-c .pdp-suggest-block .card-figure img.card-image:not(#a){
width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:50% 50%!important}
html body.dtc-c .pdp-suggest-block .card.c6190-zoom .card-figure img.card-image:not(#a){
transform:scale(1.12)!important;transform-origin:50% 85%!important}
/* equal-height cards, 2-line title, price pinned to the bottom */
html body.dtc-c .pdp-suggest-block .slick-track:not(#a){display:flex!important;align-items:stretch!important}
html body.dtc-c .pdp-suggest-block .slick-slide:not(#a){height:auto!important;float:none!important}
html body.dtc-c .pdp-suggest-block .slick-slide>div,
html body.dtc-c .pdp-suggest-block li.product{height:100%}
html body.dtc-c .pdp-suggest-block .card:not(#a){display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;box-sizing:border-box!important}
html body.dtc-c .pdp-suggest-block .card .card-body:not(#a){padding:12px 14px 14px!important;display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
html body.dtc-c .pdp-suggest-block .card-title:not(#a){display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;min-height:2.8em;margin-bottom:8px!important}
html body.dtc-c .pdp-suggest-block .card-body .card-price,
html body.dtc-c .pdp-suggest-block .card-body .price-section:last-child{margin-top:auto!important}
/* Pairs well with: same 4:3 box */
html body.dtc-c .cbp .cbp-w:not(#a){aspect-ratio:4/3!important;width:100%!important;height:auto!important}
html body.dtc-c .cbp .cbp-w img:not(#a){width:100%!important;height:100%!important;object-fit:contain!important}
/* 2. Card play buttons: 44x44 tap targets */
html body.dtc-c .c9p-play:not(#a):not(#b),
html body.dtc-c .h5lc-play:not(#a):not(#b){flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
/* 3. Phone secondary text >= 14px */
@media (max-width:600px){
html body.dtc-c .pdp-c-sku:not(#a):not(#b),
html body.dtc-c .dtc-muted:not(#a):not(#b){font-size:14px!important;line-height:1.45!important}
html body.dtc-c .c28-affirm[data-c6180="1"] .c6180-line:not(#a):not(#b){font-size:14px!important;line-height:20px!important}
}
/* 4. Pairs well with heading lines up with the cards (arrow gutter = 40px nav + 8px gap) */
@media (min-width:992px){
html body.dtc-c .cbp .cbp-hd:not(#a){padding-left:48px;padding-right:48px;box-sizing:border-box}
}
/* 5. Hear before you buy: never a blank photo; one photo frame for listen cards and Best Sellers */
html body.dtc-c .h5lc-photo:not(#a){background:#F7F2EA!important;border:1px solid #ECE5EE!important;border-radius:8px!important}
html body.dtc-c .h5lc-photo img:not(#a){background:#fff}
html body.dtc-c .h5-best .card-figure:not(#a):not(#b){border:1px solid #ECE5EE!important;border-radius:8px!important;overflow:hidden!important}
/* 6. FAQ phone side padding */
@media (max-width:520px){
html body.dtc-c #pdp-faq:not(#a):not(#b){padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important}
}
/* ===== fix6210.css ===== */
/* 6.14.21 — gallery crop fix on set-player PDPs, and Related/Pairs photos fill the 4:3 box.
Loaded after fix6190. */
/* 1. Main gallery: products with a set-player ([data-ssp]) were getting a 240px height cap
from fix28y, while fix6147 sized the image to its natural height. The figure is
overflow:hidden, so square/portrait photos were clipped at the bottom on phone.
Let the photo determine the height (still capped at 68vh). */
@media (max-width: 1023px){
html body.dtc-c .pdp-b-gallery .productView-image:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .productView-img-container:not(#a):not(#b){
height:auto!important;max-height:none!important;min-height:0!important;
aspect-ratio:auto!important}
html body.dtc-c .pdp-b-gallery .productView-img-container a:not(#a):not(#b){
height:auto!important;display:block!important}
html body.dtc-c .pdp-b-gallery img[data-main-image]:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .productView-img-container img:not(#a):not(#b),
html body.dtc-c .pdp-b-gallery .pdp-stack-item img:not(#a):not(#b){
width:100%!important;height:auto!important;max-height:min(68vh,560px)!important;
object-fit:contain!important;aspect-ratio:auto!important}
}
/* 2. Related Products + Pairs well with: 4:3 box, fill edge to edge, no white bands, no zoom. */
html body.dtc-c .pdp-suggest-block .card-figure:not(#a):not(#b){
aspect-ratio:4/3!important;width:100%!important;height:auto!important;padding:0!important;
overflow:hidden!important;background:#fff!important;position:relative!important}
html body.dtc-c .pdp-suggest-block .card-figure img.card-image:not(#a):not(#b),
html body.dtc-c .pdp-suggest-block .card.c6190-zoom .card-figure img.card-image:not(#a):not(#b){
width:100%!important;height:100%!important;object-fit:cover!important;
object-position:50% 50%!important;transform:none!important;transform-origin:50% 50%}
html body.dtc-c .cbp .cbp-w:not(#a):not(#b){
aspect-ratio:4/3!important;width:100%!important;height:auto!important;overflow:hidden!important;
background:#fff!important}
html body.dtc-c .cbp .cbp-w img:not(#a):not(#b){
width:100%!important;height:100%!important;object-fit:cover!important;
object-position:50% 50%!important;transform:none!important}
/* ===== fix6220.css ===== */
/* 6.14.22 — Related Products photos fill the 4:3 box in the real BigCommerce / Page Builder render.
Local Stencil did not reproduce this. Server markup uses Cornerstone's card-img-container
::after padding-bottom hack (productgallery_size is 500x659, so padding-bottom: 131.8%)
and .card-image { position:absolute; inset:0; margin:auto; max-height:100%; width:100%;
object-fit:contain; height:auto }. width:100% + height:auto leaves a landscape photo as a
short strip in the 4:3 figure, with white bands above/below.
6.14.21 set height:100% and object-fit:cover on img.card-image only; it did not zero the
::after, max-height, or margin:auto, so the image still did not fill on the server render.
Pairs (.cbp-w img) already filled because that markup has no ::after / max-height.
Loaded after fix6210. */
html body.dtc-c .pdp-suggest-block .card-figure:not(#a):not(#b):not(#c){
aspect-ratio:4/3!important;width:100%!important;height:auto!important;
padding:0!important;margin:0!important;overflow:hidden!important;
background:#fff!important;position:relative!important;box-sizing:border-box!important}
html body.dtc-c .pdp-suggest-block .card-figure>a:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure .card-img-container:not(#a):not(#b):not(#c){
position:absolute!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;
padding:0!important;padding-bottom:0!important;margin:0!important;display:block!important;
box-sizing:border-box!important}
/* Kill the lazy-loaded-padding ::after (padding-bottom from productgallery_size 500x659). */
html body.dtc-c .pdp-suggest-block .card-img-container:not(#a):not(#b):not(#c)::after{
content:none!important;display:none!important;padding:0!important;padding-bottom:0!important;height:0!important}
html body.dtc-c .pdp-suggest-block .card-figure img:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure img.card-image:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure img.lazyload:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure img.lazyloaded:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure picture:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure picture img:not(#a):not(#b):not(#c){
position:absolute!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;
object-fit:cover!important;object-position:50% 50%!important;
margin:0!important;padding:0!important;transform:none!important;transform-origin:50% 50%!important}
/* ===== fix6182.css ===== */
/* fix6182 — "USD" after every visible price (Designer spec Nov 12).
Load AFTER the latest companion CSS in layout/base.html
(after fix6181.css on the 6.14.18 tree; after fix6220.css on the
current unpublished Theme Dev draft).
Approach: a real USD sibling
after each amount (see components/products/price-currency.html).
JS that does .html(formatted) on the amount node leaves the sibling
in place. Do not use a CSS ::after "USD" safety net: a :has() guard
can be dropped by a CSS pipeline or fail in Page Builder, which
painted a second USD on server-rendered category cards
("$499.98 USD USD"). JS injectors already emit the span.
"USD" is 0.75em / 500 weight / slightly tracked, same colour as the
amount (not colour-only meaning). price+USD do not wrap. */
html body.dtc-c .price-usd:not(#a){
white-space:nowrap!important;
display:inline!important;
}
html body.dtc-c .price-currency:not(#a){
display:inline-block!important;
font-size:.75em!important;
font-weight:500!important;
letter-spacing:.06em!important;
margin-left:.28em!important;
color:inherit!important;
-webkit-text-fill-color:currentColor!important;
text-decoration:none!important;
font-style:normal!important;
white-space:nowrap!important;
line-height:1!important;
vertical-align:baseline;
}
/* Keep the amount + USD on one line at 390 and 1440 */
html body.dtc-c .price-section:not(#a),
html body.dtc-c .card-price:not(#a),
html body.dtc-c .listItem-price:not(#a),
html body.dtc-c .cart-item-value:not(#a),
html body.dtc-c .cart-total-value:not(#a),
html body.dtc-c .total-cart-price:not(#a),
html body.dtc-c .previewCartItem-price:not(#a),
html body.dtc-c .previewCartCheckout-price:not(#a),
html body.dtc-c .pdp-sticky-atc-price:not(#a),
html body.dtc-c .h5lc-price:not(#a),
html body.dtc-c .cbd-pr:not(#a),
html body.dtc-c .dtc-xs-price:not(#a),
html body.dtc-c .cart1-prod-price:not(#a),
html body.dtc-c .account-product-price:not(#a),
html body.dtc-c .account-orderTotal-value:not(#a),
html body.dtc-c .gift-certificate-balance-amount:not(#a),
html body.dtc-c .shipping-mess:not(#a),
html body.dtc-c .cbd-tot:not(#a),
html body.dtc-c .pdp-zip-l:not(#a),
html body.dtc-c .cart-totals-value:not(#a),
html body.dtc-c .pdp-sticky-cart-total:not(#a){
white-space:nowrap;
}
/* Keep empty rrp / was-price USD labels hidden if the section's
inline display:none is overridden (Page Builder / !important). */
html body.dtc-c .price-section[style*="display: none"],
html body.dtc-c .price-section[style*="display:none"]{
display:none!important;
}
html body.dtc-c .price--rrp:empty + .price-currency,
html body.dtc-c .price--non-sale:empty + .price-currency,
html body.dtc-c [data-product-rrp-with-tax]:empty + .price-currency,
html body.dtc-c [data-product-rrp-price-with-tax]:empty + .price-currency,
html body.dtc-c [data-product-rrp-price-without-tax]:empty + .price-currency,
html body.dtc-c [data-product-non-sale-price-with-tax]:empty + .price-currency,
html body.dtc-c [data-product-non-sale-price-without-tax]:empty + .price-currency,
html body.dtc-c [data-product-price-saved]:empty + .price-currency{
display:none!important;
}
/* Phone PDP sticky bar: fit "$192.98 USD" (and longer amounts) at
360 / 390 / 430 without overlapping the quantity stepper. Stack
the USD under the amount; keep Add to Cart at least 44px tall. */
@media (max-width:800px){
html body.dtc-c .pdp-sticky-atc:not(#a){
gap:6px;
padding-left:10px;
padding-right:10px;
}
html body.dtc-c .pdp-sticky-atc .c5-sq:not(#a){
margin-right:0;
flex:0 0 auto;
}
html body.dtc-c .pdp-sticky-atc-info:not(#a){
flex:1 1 auto;
min-width:0;
}
html body.dtc-c .pdp-sticky-atc-price:not(#a),
html body.dtc-c .pdp-sticky-atc-price .price-usd:not(#a){
display:flex!important;
flex-direction:column;
align-items:flex-start;
white-space:nowrap!important;
line-height:1.15;
font-size:clamp(13px,4.1vw,16px);
}
html body.dtc-c .pdp-sticky-atc-price .price-currency:not(#a){
margin-left:0!important;
margin-top:1px;
font-size:.7em!important;
line-height:1.2!important;
}
html body.dtc-c .pdp-sticky-atc-btn:not(#a){
min-height:44px;
height:auto;
padding:10px 12px;
flex:0 0 auto;
}
}
/* ===== fix6280.css ===== */
/* 6.14.28 — Related products: match the category-card gap between the
sound-player row (play button + waveform) and the price.
Category cards (#product-listing-container) use padding-top: 12px on
.card-price; Related cards had padding-top: 0, so the price sat flush
against the player. Measured at 1440 and 390 in local Stencil:
category visual gap (player border-box bottom → price text top) = 12px;
Related was 0px. Pairs well with uses a different component (.cbp), not
this card, so it is left unchanged.
Loaded after fix6182.css from layout/base.html. */
html body.dtc-c .pdp-suggest-block .card-price:not(#a){
padding-top: 12px !important;
}
/* ===== fix6320.css ===== */
/* 6.14.32 — category description: full content width, float image, category pages only.
Does not change product, info, or blog 68ch rules.
Purple check-mark icons in Crystal Singing Bowls are coll-tick images in
category description HTML (not theme ::before); content is left unchanged. */
/* Kill the 760px wrap cap (category.html inline + fix10-styles). */
html body.dtc-c.category-page .c10-desc-wrap:not(#a):not(#b),
html body.dtc-c .category-description.c10-desc-wrap:not(#a):not(#b) {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
/* Kill fix26 max-width:68ch on category description typography only. */
html body.dtc-c.category-page .category-description .c10-desc :is(p, ul, ol, dl, blockquote, table, h2, h3, h4, h5, h6):not(#a):not(#b),
html body.dtc-c .category-description .c10-desc :is(p, ul, ol, dl, blockquote, table, h2, h3, h4, h5, h6):not(#a):not(#b) {
max-width: none !important;
}
/* Expanded: text uses the full width; right-column image floats so text wraps. */
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content {
display: block !important;
width: 100%;
overflow: hidden; /* clearfix */
}
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-left {
display: block !important;
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
@media (min-width: 801px) {
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-right {
float: right !important;
display: block !important;
width: auto !important;
max-width: min(34%, 360px) !important;
margin: 0 0 16px 28px !important;
}
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-right img,
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-right picture,
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-right figure {
display: block !important;
width: 100%;
height: auto;
max-width: 100%;
margin: 0;
}
}
/* Mobile: JS moved the image column first, so a block stack puts it full-width above the text. */
@media (max-width: 800px) {
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content {
display: block !important;
overflow: visible;
}
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-left,
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-right {
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 16px !important;
}
html body.dtc-c .c10-desc:not(.is-clamped):not(#a) .ssi-cat-content-right img {
display: block !important;
width: 100%;
height: auto;
max-width: 100%;
}
}
/* Remove theme CSS purple ✓ ::before on category description bullets (cd-styles
.category-mainpoints li:before). Keep a normal disc. Content-embedded coll-tick
images are left unchanged. */
html body.dtc-c.category-page .category-description ul.category-mainpoints:not(#a) {
list-style: disc;
padding-left: 1.25em;
margin-left: 0;
}
html body.dtc-c.category-page .category-description ul.category-mainpoints:not(#a) li {
list-style: disc;
}
html body.dtc-c.category-page .category-description ul.category-mainpoints:not(#a) li:before {
content: none !important;
background: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
color: transparent !important;
}
/* ===== 6.14.33 UI: PDP description full width, Key specs row rules, wishlist button. Mega menu is the 6.14.32 original (fix6146 width rule earlier in this file; no shrink-wrap). ===== */
/* PDP description: fill the accordion (override fix26 68ch and fix28v 70ch). Category/info/blog 68ch unchanged. */
html body.dtc-c .c28v-main .productView-description:not(#a):not(#b),
html body.dtc-c .description-accordion .productView-description:not(#a):not(#b),
html body.dtc-c .productView .productView-description:not(#a):not(#b){
max-width:none!important;
width:100%!important;
}
html body.dtc-c .productView-description :is(p,ul,ol,dl,blockquote,table,h2,h3,h4,h5,h6):not(#a):not(#b){
max-width:none!important;
width:100%!important;
box-sizing:border-box;
}
html body.dtc-c .productView-description :is(img,picture,figure,iframe,video):not(#a){
max-width:100%!important;
height:auto;
}
html body.dtc-c p.c27-disc.c27-disc-pdp:not(#a):not(#b){
max-width:none!important;
width:100%!important;
text-align:left!important;
margin-left:0!important;
margin-right:0!important;
}
/* Key specs: draw each row rule across the full card, including a last row with one item. */
html body.dtc-c .pdp-specs-list{position:relative}
html body.dtc-c .pdp-specs-list>.pdp-spec{border-top-color:transparent!important;position:relative}
html body.dtc-c .pdp-specs-list>.pdp-spec:nth-child(odd)::before{
content:"";
position:absolute;
left:0;
top:0;
height:1px;
width:200%;
background:#f0ecf2;
pointer-events:none;
z-index:1;
}
/* Wishlist heart is a submit button. Match the previous 44px a.c10-wish circle (fix10). */
html body.dtc-c .productView .form-wishlist button.c10-wish:not(#a){
appearance:none;
-webkit-appearance:none;
display:inline-flex!important;
align-items:center;
justify-content:center;
width:44px!important;
height:44px!important;
min-width:44px;
flex:0 0 44px;
padding:0!important;
margin:0;
border-radius:50%!important;
border:1px solid #ECE5EE!important;
background:#fff!important;
color:#713592!important;
box-shadow:none!important;
cursor:pointer;
font:inherit;
}
html body.dtc-c .productView .form-wishlist button.c10-wish > span:not(#a){display:contents!important;background:none!important;border:0!important}
html body.dtc-c .productView .form-wishlist button.c10-wish svg{width:20px;height:20px;display:block}
html body.dtc-c .productView .form-wishlist button.c10-wish:hover{border-color:#713592!important}
html body.dtc-c .productView .form-wishlist button.c10-wish:focus-visible{outline:2px solid #4B2A5C;outline-offset:2px}
html body.dtc-c .productView .form-wishlist button.c10-wish::before,
html body.dtc-c .productView .form-wishlist button.c10-wish::after{display:none!important}