/* fix28s-oos-styles */
body.dtc-c .listItem-figure,body.dtc-c .productView-img-container{position:relative}
body.dtc-c .c28-oos-badge{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;height:24px;margin:0;padding:0 10px;border:1px solid #4B2A5C;border-radius:4px;background:#F7F2EA;color:#241A2B;font:600 12px/1 var(--f-body,"Jost",sans-serif);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 1px 2px rgba(36,26,43,.12)}
body.dtc-c .c28-oos-badge[hidden]{display:none!important}
body.dtc-c .c28-oos-badge--pdp{top:12px;left:12px;height:30px;padding:0 12px;font-size:14px;z-index:11}
@media(max-width:800px){body.dtc-c .c28-oos-badge{top:6px;left:6px;height:22px;padding:0 8px;font-size:11px}body.dtc-c .c28-oos-badge--pdp{top:10px;left:10px;height:26px;padding:0 10px;font-size:12px}}
body.dtc-c .c9-stock--na svg{color:#4B2A5C}
/* fix28t: Designer fix28s polish (verbatim). Pill badge with larger insets; PDP badge 16px desktop / 13px mobile (cards stay 12/11px);
   theme's purple hover "Out of stock" pill hidden on badged cards; Home Best Sellers wishlist heart dropped below the badge at <=800px;
   mobile swipe gallery puts the main image first (base theme.css sets .productView-image{order:1!important} at <=1024px, which put
   the display:contents .pdp-stack-rest images ahead of it; at >=801px the gallery is display:block so order has no effect). With the
   main image first, the fix28s pinned mobile badge copy is redundant and was removed: one badge at every width. */
body.dtc-c .c28-oos-badge{border-radius:999px;top:12px;left:12px}
body.dtc-c .c28-oos-badge--pdp{top:16px;left:16px;height:34px;padding:0 14px;font-size:16px}
body.dtc-c .card-figure:has(.c28-oos-badge) .card-figcaption-button[aria-hidden="true"]{display:none!important}
@media(max-width:800px){
  body.dtc-c .c28-oos-badge{top:8px;left:8px}
  body.dtc-c .c28-oos-badge--pdp{top:12px;left:12px;height:28px;padding:0 12px;font-size:13px}
  html body.dtc-c .card-figure:has(.c28-oos-badge) a.c9-heart:not(#a):not(#b){top:36px!important}
  body.dtc-c .pdp-b-gallery .productView-images > .productView-image{order:-1!important}
}
/* fix28u-styles */
html body.dtc-c :is(.card,.productGrid,.productList,.productCarousel,#product-listing-container,#search-results-content,[data-product-listing],.productView-related,.c28-cards) :is(.affirm-banner,.affirm-as-low-as,.affirm-site-messaging,[data-affirm-type],[class^="affirm-"]):not(#c28-affirm){display:none!important}
html body.dtc-c .productView :is(.affirm-as-low-as,.affirm-banner):not(#c28-affirm){display:none!important}
html body.dtc-c .productView .productView-price + .c28-affirm{margin:4px 0 12px!important}
/* fix28u-styles */
/* #2 wholesale (and any web page): embedded forms/videos never wider than the page */
html body.dtc-c .page-content iframe{width:100%!important;max-width:100%!important;border:0}
/* #2 empty paragraphs in web page bodies (only truly empty ones; &nbsp; ones are hidden by fix28u-scripts) */
html body.dtc-c .page-content p:empty{display:none}
html body.dtc-c .page-content p.c28-empty{display:none!important}
/* #4 bowl PDP: shipping/returns live in the benefits row + the one Shipping & returns accordion; the 3-col box keeps only "Questions?" */
html body.dtc-c .pdp-b-below .pdp-assure-row:not(.c8-assure-q){display:none!important}
/* #6 comparison table text */
html body.dtc-c .comparison-table :is(td,th,.product-title a){font-size:14px!important;line-height:1.4!important}
html body.dtc-c .comparison-table td.c28-key{font-size:16px!important;font-weight:600}
/* #11 feature text at 16px (top bars keep the spec sizes; footer legal/copyright stay 14px/12px) */
html body.dtc-c :is(.info-card-d,.subcategory-item .name-label,.h5-card-d,.c10-ss-cat a,.h5-btn,.info-quick span,.new-customer-intro,.pdp-faq-item p,.footer-contact-details--text,.footer-contact-details--text a):not(#c28a){font-size:16px!important;line-height:1.45!important}
html body.dtc-c main.page .page-content :is(p,li,p span):not(#c28a){font-size:16px!important;line-height:1.6!important}
html body.dtc-c.blog-page .blog-post:not(#c28a){font-size:16px!important}
/* #12 category subcategory tiles: capped image on phones; column counts in fix10 (6.14.36) */
@media (max-width:600px){
 /* 6.14.36: column counts live in fix10-styles (Option B even rows; 3 or 2 on mobile). Keep the 12px gap + image cap. */
 html body.dtc-c .subcategory-list:not(#a):not(#b):not(#c){gap:12px!important}
 html body.dtc-c .subcategory-list .subcategory-item .subcategory-item--image:not(#a):not(#b):not(#c){max-height:120px!important}
}
/* #8 Harmony stepper: done steps keep their names on phones too */
#cb .cbd-steps li.is-done .cbd-stn{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}
/* #24 PDP share icons in brand plum instead of full-colour logos */
html body.dtc-c :is(.social-media-product-page,.social-media-product-page-mobile,.social-media-bottom) .socialLinks svg :is(path,circle,rect){fill:#462C59!important}
/* #26 login: less empty space above the cards */
html body.dtc-c .login > .login-row:not(#c28a){margin-top:40px!important}
/* #20 PDP Previous/Next pills */
html body.dtc-c .product-redirect :is(.prev-prod,.next-prod){border-radius:999px!important}
/* #29 blog card posted-by line aligned with title/excerpt */
html body.dtc-c .blog .blog-date{text-align:left!important}
/* #31 breadcrumbs: >=24px tap targets on phones */
@media (max-width:800px){html body.dtc-c .breadcrumbs .breadcrumb a{display:inline-block;padding:4px 0;min-height:24px;line-height:16px}}
/* #25 information page Contact us button */
html body.dtc-c .page-content :is(a.button,a.btn,.button){font-size:16px!important}
/* fix28v-styles */
/* Description: full-width under the buy box, before Pairs */
html body.dtc-c .productView .pdp-b-desc{margin:20px 0 8px;padding-top:8px;border-top:1px solid #DCD3E0;clear:both}
html body.dtc-c .productView .cbp{margin-top:12px}
/* #4 Keep only the Pairs "Find Bowls in Harmony" CTA (hide the buy-box duplicate) */
html body.dtc-c .productView-details .cb-open,
html body.dtc-c .productView-details [data-cb-open],
html body.dtc-c .productView-details .cbx-open-wrap{display:none!important}
/* #6 Pairs titles + Questions box at 16px */
html body.dtc-c .cbp .cbp-n,
html body.dtc-c .cbp .cbp-f,
html body.dtc-c .cbp .cbp-t,
html body.dtc-c .pdp-assure-row.c8-assure-q,
html body.dtc-c .pdp-assure-row.c8-assure-q :is(p,a,div){font-size:16px!important;line-height:1.45!important}
/* #3 Gong: collapse empty listen / Affirm / status slots that leave a gap under the title */
html body.dtc-c .productView-product :is(.sample-audio--icons-wrap,.c28-affirm:empty,[data-c28-affirm]:empty),
html body.dtc-c .productView-product .c9-pdp-status:empty{display:none!important;margin:0!important;padding:0!important;height:0!important}
html body.dtc-c .productView-product .productView-rating:empty,
html body.dtc-c .productView-product .productView-rating:not(:has(*)){display:none!important;margin:0!important;min-height:0!important}
html body.dtc-c .productView-product > .productView-infos:not(:has(dl.productView-info:not([style*="display: none"]))){display:none!important;margin:0!important;padding:0!important}
/* Shell + nav */
html body.dtc-c .cbp .cbp-shell{position:relative;display:flex;align-items:stretch;gap:8px}
html body.dtc-c .cbp .cbp-nav{flex:0 0 40px;align-self:center;width:40px;height:40px;border-radius:999px;border:1px solid #CFC4D6;background:#fff;color:#462C59;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
html body.dtc-c .cbp .cbp-nav[hidden]{display:none!important}
html body.dtc-c .cbp .cbp-nav:hover{border-color:#713592}
html body.dtc-c .cbp .cbp-nav:focus-visible{outline:2px solid #713592;outline-offset:2px}
html body.dtc-c .cbp .cbp-nav:disabled{opacity:.35;cursor:default}
html body.dtc-c .cbp .cbp-range{margin:8px 0 12px;font:500 14px/1.3 Jost,var(--f-body),sans-serif;color:#5E5266;text-align:center}
html body.dtc-c .cbp .cbp-range[hidden]{display:none!important}
/* Track */
html body.dtc-c .cbp .cbp-l{display:flex!important;flex-wrap:nowrap!important;gap:16px!important;list-style:none;margin:0!important;padding:0 2px!important;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;scroll-behavior:smooth}
html body.dtc-c .cbp .cbp-l::-webkit-scrollbar{display:none}
html body.dtc-c .cbp .cbp-i{flex:0 0 calc((100% - 64px)/5)!important;min-width:0;max-width:none;scroll-snap-align:start;display:flex!important;flex-direction:column;padding-bottom:0;box-sizing:border-box}
html body.dtc-c .cbp .cbp-i[hidden],html body.dtc-c .cbp .cbp-i[style*="display: none"]{display:none!important}
html body.dtc-c .cbp .cbp-i.cbp-m5{display:flex!important}
html body.dtc-c .cbp.is-few .cbp-l{justify-content:center}
html body.dtc-c .cbp.is-few .cbp-i{flex:0 1 200px!important;max-width:220px}
html body.dtc-c .cbp.is-stretch .cbp-l{justify-content:stretch}
html body.dtc-c .cbp.is-stretch .cbp-i{flex:1 1 0!important;max-width:none}
/* Tablet incl. 768: 3 across */
@media (max-width:1100px) and (min-width:601px){
  html body.dtc-c .cbp .cbp-i{flex:0 0 calc((100% - 32px)/3)!important}
}
/* Mobile 390: horizontal swipe, 2 visible + peek */
@media (max-width:600px){
  html body.dtc-c .cbp .cbp-shell{gap:0}
  html body.dtc-c .cbp .cbp-nav{position:absolute;z-index:2;top:48px;box-shadow:0 2px 8px rgba(36,26,43,.12)}
  html body.dtc-c .cbp .cbp-prev{left:4px}
  html body.dtc-c .cbp .cbp-next{right:4px}
  html body.dtc-c .cbp .cbp-l{gap:12px!important;padding:0 8px 4px!important}
  /* 6.14.58 CLS: the swipe row renders after its index loads (often after it is on screen on slow phones); hold 300px (rendered row is 304-326px at 360-430) while it loads */
  html body.dtc-c .cbp[data-cbp-wait] .cbp-l:empty{min-height:300px}
  html body.dtc-c .cbp[data-cbp-wait] .cbp-hd[hidden]{display:block;visibility:hidden}
  html body.dtc-c .cbp .cbp-i{flex:0 0 calc((100% - 12px - 28px)/2)!important;scroll-snap-align:center}
  html body.dtc-c .cbp.is-few .cbp-i,html body.dtc-c .cbp.is-stretch .cbp-i{flex:0 0 calc((100% - 12px - 28px)/2)!important;max-width:none}
}
/* #5 Cart 390: stack shipping note under the estimator / Add Info */
@media (max-width:800px){
  html body.dtc-c .cart-total.second{display:flex!important;flex-wrap:wrap!important}
  html body.dtc-c .cart-total.second .cart-total-label,
  html body.dtc-c .cart-total.second .cart-total-value{flex:1 1 auto}
  html body.dtc-c .c28-ship-note{flex:1 1 100%!important;width:100%!important;display:block!important;margin:8px 0 0!important;clear:both!important}
}
/* #2 Create account 390: kill horizontal overflow; search matches other pages */
html body.dtc-c.createAccount-page,
html body.dtc-c[class*="create"]{overflow-x:hidden}
html body.dtc-c .createAccount,
html body.dtc-c form[data-create-account-form],
html body.dtc-c .account{max-width:100%;overflow-x:hidden;box-sizing:border-box}
html body.dtc-c .createAccount :is(input,select,textarea,.form-field,.form-row){max-width:100%;box-sizing:border-box}
html body.dtc-c.createAccount-page .header .form-search,
html body.dtc-c .createAccount ~ * .form .form-field,
html body.dtc-c.createAccount-page #search_query,
html body.dtc-c.createAccount-page .form-input--search{max-width:100%}
/* Force same mobile search chrome as other pages */
@media (max-width:800px){
  html body.dtc-c.createAccount-page .header-search,
  html body.dtc-c.createAccount-page .navPages-container + .header-search,
  html body.dtc-c.createAccount-page form.form--quickSearch,
  html body.dtc-c.createAccount-page .form--quickSearch{width:100%!important;max-width:100%!important;box-sizing:border-box}
  html body.dtc-c.createAccount-page{width:100%!important;max-width:100vw!important}
  html body.dtc-c.createAccount-page .body,
  html body.dtc-c.createAccount-page main.page,
  html body.dtc-c.createAccount-page .container{max-width:100%!important;overflow-x:hidden!important}
}
/* #9 Login: less gap above the cards (tighten further) */
html body.dtc-c .login > .login-row:not(#c28a){margin-top:24px!important}
/* #10 Mobile Bar 1 Listen-first: always underlined */
html body.dtc-c .c28-msg .c28-msg-m{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:3px}
html body.c28-create,html body.c28-create .body,html body.c28-create .container,html body.c28-create main{max-width:100vw!important;overflow-x:hidden!important;width:100%!important}
html body.c28-create .form-search,html body.c28-create .form--quickSearch,html body.c28-create .header .form{width:100%!important;max-width:100%!important}
@media (max-width:600px){html body.c28-create .form-input,html body.c28-create select{width:100%!important;max-width:100%!important}}

/* Hide the Affirm app region product_below_price entirely (removed from this theme; placement still active on live and can inject a 50px empty slot under the title on gongs) */
html body.dtc-c .productView [data-content-region="product_below_price"],
html body.dtc-c .productView [data-placement-id="86a23d58-a8cd-4622-a5b9-ed46b5a317ec"]{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
/* #10 Mobile Bar 1: force underline even when the whole line is the link */
html body.dtc-c a.c28-msg-m,
html body.dtc-c .c28-msg a.c28-msg-m,
html body.dtc-c .c28-msg-m{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}


/* ===== fix28v (Jeff Nov 4): description section two columns >=1024, stacked below ===== */
html body.dtc-c .pdp-b-desc .c28v-grid:not(#c28a){display:flex;flex-direction:column;gap:24px;max-width:1144px;margin:0 auto;align-items:stretch}
html body.dtc-c .c28v-side{display:flex;flex-direction:column;gap:20px;min-width:0}
html body.dtc-c .c28v-main{min-width:0}
html body.dtc-c .c28v-gong .description-accordion.c28v-main:not(#c28a){margin-top:0;padding:0;width:auto!important;max-width:none!important;float:none!important}
html body.dtc-c .c28v-gong .c28v-main>.productView-description:not(#c28a){float:none!important;width:auto!important}
html body.dtc-c .c28v-side .c9-glance-dl:empty~*,html body.dtc-c .c28v-side .c9-glance:not(:has(.c9-glance-dl div)){display:none!important}
html body.dtc-c .c28v-main .productView-description{max-width:70ch}
/* cards */
html body.dtc-c .c28v-side :is(.pdp-specs,.c9-glance):not(#c28a){background:#fff!important;border:1px solid #E6DDEA!important;border-radius:12px!important;padding:24px!important;margin:0!important;box-shadow:none!important;box-sizing:border-box;width:100%;max-width:none}
html body.dtc-c .c28v-side :is(.pdp-card-title,.c9-glance-h):not(#c28a){font:400 22px/1.25 "Playfair Display",Georgia,serif!important;color:#241A2B!important;margin:0 0 12px!important;text-transform:none!important;letter-spacing:0!important}
html body.dtc-c .c28v-side :is(.pdp-specs-list,.c9-glance-dl) :is(dt,dd):not(#c28a){font-family:Jost,var(--f-body),sans-serif!important;font-size:16px!important;line-height:1.45!important}
html body.dtc-c .c28v-side .pdp-specs-list{margin:0;padding:0}
html body.dtc-c .c28v-side .pdp-specs-list dd a:not(#c28a){color:#713592;text-decoration:underline;text-underline-offset:3px}
/* one phone/shipping: the Questions box and the Shipping & returns accordion carry these */
/* fix28y: phone line now lives in At a glance (Questions box drops it) */
html body.dtc-c .pdp-benefits li.c28v-ship{display:none!important}
@media (min-width:1024px){
  html body.dtc-c .pdp-b-desc .c28v-grid:not(#c28a){display:grid!important;grid-template-columns:minmax(0,62fr) minmax(0,34fr);column-gap:40px;align-items:start}
  html body.dtc-c .c28v-main{grid-column:1;grid-row:1}
  html body.dtc-c .c28v-side{grid-column:2;grid-row:1;align-self:start}
  html body.dtc-c .c28v-side.is-sticky{position:sticky;top:96px}
  html body.dtc-c .pdp-b-desc .c28v-grid.no-desc:not(#c28a){grid-template-columns:minmax(0,34fr);justify-content:start}
  html body.dtc-c .c28v-grid.no-desc .c28v-side{grid-column:1}
  html body.dtc-c .pdp-b-desc .c28v-grid.no-side:not(#c28a){display:block!important}
}
/* fix28w-styles */
/* N1: the create-account / gift-certificate "form.form" white card also hit the header quick-search (and footer newsletter) forms */
html body.dtc-c:is(.createaccount-page,.giftcertificates-page) :is(.quick-search,header,.header,footer,.footer,.newsletter-main) form.form:not(#c28w){background:none!important;border:0!important;border-radius:0!important;padding:0!important;max-width:none!important;margin:0!important;box-shadow:none!important}
/* N3: orphaned buy-box caption (its button was removed in fix28u; the one CTA lives under Pairs) */
html body.dtc-c .productView .cbx-h:not(#c28w),html body.dtc-c [data-cbx-h]:not(#c28w){display:none!important}
/* N4: Facebook share glyph white on the plum chip, like X and email */
html body.dtc-c :is(.social-media-product-page,.social-media-product-page-mobile,.social-media-bottom,.social-media-icons-redirect) .socialLinks svg path.c28-fb-f:not(#c28w){fill:#FFFFFF!important}
/* N2: store title/SKU line and the Octave/Frequency/Rim line at the top of the description (hidden by fix28w-scripts only when they match) */
html body.dtc-c .c28w-dup{display:none!important}
/* 6.14.43: 2px share-box padding; hide clearfix so Facebook sits flush */
/* Closed until Share is clicked — beat custom.scss / leftover display:flex on the box */
html body.dtc-c .social-media-product-page .social-media-icons-redirect:not(#c28w){padding:6px 2px!important;box-sizing:border-box;width:auto!important;align-items:center;display:none!important}
html body.dtc-c .social-media-product-page .share-toggle-btn.active + .social-media-icons-redirect:not(#c28w){display:inline-flex!important}
html body.dtc-c :is(.social-media-product-page,.social-media-product-page-mobile) .social-media-icons-redirect .socialLinks:not(#c28w){font-size:0}
html body.dtc-c :is(.social-media-product-page,.social-media-product-page-mobile) .social-media-icons-redirect .socialLinks::before,
html body.dtc-c :is(.social-media-product-page,.social-media-product-page-mobile) .social-media-icons-redirect .socialLinks::after{content:none!important;display:none!important}
@media(max-width:800px){html body.dtc-c .social-media-product-page-mobile .social-media-icons-redirect:not(#c28w){background:transparent!important;border:0!important;box-shadow:none!important;width:auto!important;max-width:100%!important;padding:0!important;margin:0!important;position:relative!important;left:0!important;right:auto!important;top:auto!important;display:flex!important;justify-content:flex-start!important}html body.dtc-c .social-media-product-page-mobile h4.share-title:not(#c28w){text-align:left;margin-left:0}}
/* fix28x-styles */
html body.dtc-c.createaccount-page .account--fixed:not(#c28x){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
/* .account-body is a grid row with -10.5px side margins; with the outer padding gone it pushed the card 10px past the column (right edge on the viewport at 390) */
html body.dtc-c.createaccount-page .account--fixed > .account-body:not(#c28x){margin-left:0!important;margin-right:0!important}
html body.dtc-c section.cbp[hidden]:not(#c28x){display:none!important}
/* fix28x: when a bowl has no Pairs section, bring back the buy-box Find Bowls in Harmony button so there is still exactly one entry point */
html body.dtc-c.c28x-nopairs .productView-details .cbx > a.cb-open:not(#c28x){display:flex!important}
/* dtc-fixes-critical */
/* 6.14.37 critical (inlined): header, storefront shell, mega menu from fix6146. The rest of dtc-fixes.css loads non-blocking. */
/* ===== 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}
}