/* 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}
}