/* Catalogue and product menus share the catalogue's existing capsule/pill geometry. */
html body .sq-menu-capsule.sq-menu-capsule{box-sizing:border-box;background:#090b0f!important;border:1px solid rgba(255,255,255,.035)!important;border-radius:16px!important;padding:6px!important;gap:8px!important}
html body .sq-menu-capsule .sq-menu-pill.sq-menu-pill{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;height:44px;min-height:44px;padding:11px 16px!important;border:1px solid transparent;border-radius:11px!important;background:#141619!important;color:#fff!important;font:500 16px/1.2 "Soin Sans Neue Medium",sans-serif!important;letter-spacing:0!important;text-transform:none;text-decoration:none;white-space:nowrap;user-select:none;transition:background .24s}
html body .sq-menu-capsule .sq-menu-pill :is(p,span){font:inherit!important;color:inherit!important;white-space:nowrap}
html body .sq-menu-capsule .sq-menu-pill:is([aria-current="page"],[aria-pressed="true"],:hover){background:#0047DE!important}
html body .sq-menu-capsule .sq-menu-pill:is([aria-current="page"],[aria-pressed="true"]){border-color:rgba(152,194,255,.28)}
html body .sq-menu-capsule .sq-menu-pill:focus-visible{outline:2px solid #fff;outline-offset:-3px}
html body .sq-detail-menu{width:100%;min-width:0;max-width:100%;margin:0 auto 16px;padding:0;background:transparent;border:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
html body .sq-detail-menu .sprinqs-category-tabs{width:100%;min-width:0;background:transparent;border:0;overflow:visible}
html body .sq-detail-menu .sq-menu-capsule.sq-menu-capsule{display:flex;grid-template-columns:none!important;flex-wrap:nowrap;justify-content:flex-start;width:max-content!important;min-width:0!important;max-width:100%!important;margin:0;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding:16px}
html body .sq-detail-menu .sq-menu-capsule::-webkit-scrollbar{display:none}
html body .sq-detail-menu .sprinqs-product-subnav{width:100%;min-width:0;max-width:100%;margin:0;padding:0;border:0;background:transparent;overflow:visible;mask-image:none;max-height:none}
html body .sq-detail-menu .sq-menu-products .sq-menu-pill{font-size:15px!important;padding:10px 14px!important}
html body .sq-detail-menu .sq-menu-capsule::after{display:none}
html body .sq-detail-menu .sq-menu-fade-right{mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)}
html body .sq-detail-menu .sq-menu-fade-left{mask-image:linear-gradient(to right,transparent,#000 16px)}
html body .sq-detail-menu .sq-menu-fade-left.sq-menu-fade-right{mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
html body .sq-detail-menu .sq-menu-clipped span{opacity:0}
@media(prefers-reduced-motion:reduce){html body .sq-menu-capsule .sq-menu-pill{transition:none}}

@media(max-width:809px){html body .sq-menu-capsule.sq-menu-capsule{padding:5px!important;gap:5px!important}}

/* Desktop: wrap long product rows (e.g. 11 Pouqette products) instead of hiding the first/last pills behind a mouse-unscrollable edge. Phones keep the swipe row. */
@media(min-width:810px){html body .sq-detail-menu .sq-menu-products.sq-menu-capsule{flex-wrap:wrap!important;width:fit-content!important;max-width:100%!important;overflow:visible!important;mask-image:none!important}html body .sq-detail-menu .sq-menu-products .sq-menu-clipped span{opacity:1}}
/* Never show empty pills: a pill at the swipe edge keeps its label under the fade. The 3-item category row wraps instead of swiping. */
html body .sq-detail-menu .sq-menu-clipped span{opacity:1!important}
html body .sq-detail-menu .sprinqs-category-tabs .sq-menu-capsule.sq-menu-capsule{flex-wrap:wrap!important;width:fit-content!important;max-width:100%!important;overflow:visible!important;mask-image:none!important}

/* Phone: the three category pills fit one row (Premium Pouqette no longer wraps to a second line). */
@media(max-width:809px){html body .sq-detail-menu .sprinqs-category-tabs .sq-menu-capsule.sq-menu-capsule{flex-wrap:nowrap!important;width:100%!important;justify-content:space-between}html body .sq-detail-menu .sprinqs-category-tabs .sq-menu-pill.sq-menu-pill{flex:1 1 auto;padding:10px 10px!important;font-size:15px!important}}

/* Desktop (Ayberk 10 Oct): the whole menu is centred; a long product row is split into two rows with the same number of pills (break element from skipped-notes.js). Pill widths follow their text. */
@media(min-width:810px){html body .sq-detail-menu{align-items:center}html body .sq-detail-menu :is(.sprinqs-product-subnav,.sprinqs-category-tabs){display:flex;justify-content:center}html body .sq-detail-menu .sq-menu-products.sq-menu-capsule{justify-content:center!important}html body .sq-detail-menu .sq-menu-break{flex:0 0 100%;height:0;margin-top:-8px}}
/* No flash of the old block menu: on product pages the original Framer tabs/sub-row never paint; the pill menu replaces them. */
html body:has(.sprinqs-product-header,.sq-detail-title) .sprinqs-category-tabs:not(.sq-detail-menu .sprinqs-category-tabs),html body:has(.sprinqs-product-header,.sq-detail-title) .sprinqs-product-subnav:not(.sq-detail-menu .sprinqs-product-subnav){display:none!important}

/* Product cards: no product codes; the copy block starts with the name. */
html body .sq-catalog .sq-card h2{margin:0 0 8px!important}
html body .sq-catalog .sq-card-copy{padding:16px 18px 18px!important}
@media(max-width:767px){html body .sq-catalog .sq-card-copy{padding:12px 12px 14px!important}}
/* Product pages (Ayberk 11 Oct): main categories on top, the product name in the middle, the other products
   below; no "Back to products"; "Request a price" sits, a little smaller, under the text next to the first image. */
html body main.sprinqs-product .sprinqs-hero>.sprinqs-wrap{display:flex;flex-direction:column}
html body main.sprinqs-product .sprinqs-hero>.sprinqs-wrap>:is(.sq-detail-menu,.sprinqs-product-header){display:contents}
html body main.sprinqs-product .sprinqs-hero>.sprinqs-wrap>*{order:10}
html body main.sprinqs-product .sq-detail-menu>.sprinqs-category-tabs{order:1}
html body main.sprinqs-product .sprinqs-product-header>h1{order:2;align-self:center;text-align:center;margin:28px 0 24px!important}
html body main.sprinqs-product .sq-detail-menu>.sprinqs-product-subnav{order:3}
html body main.sprinqs-product .sprinqs-product-header>.sq-variant-options{order:4;align-self:center;margin-top:24px!important}
html body main.sprinqs-product .sprinqs-product-actions{display:none!important}
html body main.sprinqs-product .sq-price-inline{position:relative;display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:44px;margin-top:28px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#fff;font-size:15px;line-height:1.3;letter-spacing:0;text-transform:none;text-decoration:none;transition:background .25s,border-color .25s}
/* The visible button is small; the touch area stays 44 px. */
html body main.sprinqs-product .sq-price-inline::after{content:"";position:absolute;left:-1px;right:-1px;top:-7px;bottom:-7px}
html body main.sprinqs-product .sq-price-inline:is(:hover,:focus-visible){background:var(--sprinqs-blue,#0047DE);border-color:var(--sprinqs-blue,#0047DE)}
html body .sq-catalog article{display:flex!important;flex-direction:column!important}
html body .sq-catalog article>:is(.sq-detail-menu,.sq-detail-top){display:contents!important}
html body .sq-catalog article>*{order:10}
html body .sq-catalog article .sq-detail-menu>.sprinqs-category-tabs{order:1}
html body .sq-catalog article .sq-detail-top>.sq-detail-title{order:2;align-self:center;text-align:center;margin:28px 0 24px!important}
html body .sq-catalog article .sq-detail-menu>.sprinqs-product-subnav{order:3;margin-bottom:28px}
html body .sq-catalog article .sq-detail-title h1{font-size:clamp(52px,6.6vw,96px)!important;line-height:1.02!important;letter-spacing:-.03em}
html body main.sprinqs-product .sprinqs-hero>.sprinqs-wrap>.sprinqs-kicker{margin-top:28px!important}

html body .sq-catalog .sq-photo-dots button{min-width:44px!important;min-height:44px!important}
/* Ayberk, 16 Oct: "All" before the three categories, and a back arrow in the top left; both open the Products page.
   Desktop: the arrow sits at the left of the centred category row; phone: on its own line above it. */
html body .sq-detail-back{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#141619;color:#fff;text-decoration:none;transition:background .24s,border-color .24s}
html body .sq-detail-back svg{width:22px;height:22px}
html body .sq-detail-back:is(:hover,:focus-visible){background:#0047DE;border-color:rgba(152,194,255,.28)}
html body .sq-detail-back:focus-visible{outline:2px solid #fff;outline-offset:2px}
html body main.sprinqs-product .sq-detail-menu>.sq-detail-back,html body .sq-catalog article .sq-detail-menu>.sq-detail-back{order:0;align-self:flex-start;margin:0 0 8px}
@media(min-width:810px){html body main.sprinqs-product .sprinqs-hero>.sprinqs-wrap,html body .sq-catalog article{position:relative}html body main.sprinqs-product .sq-detail-menu>.sq-detail-back,html body .sq-catalog article .sq-detail-menu>.sq-detail-back{position:absolute;left:0;top:6px;margin:0;z-index:20}html body main.sprinqs-product .sq-detail-menu>.sprinqs-category-tabs,html body .sq-catalog article .sq-detail-menu>.sprinqs-category-tabs{pointer-events:none}html body .sq-detail-menu>.sprinqs-category-tabs .sq-menu-capsule{pointer-events:auto}}
@media(max-width:809px){html body .sq-detail-menu .sprinqs-category-tabs .sq-menu-pill.sq-menu-all{flex:0 0 auto;padding:10px 12px!important}}