/* Shop section — copied from the landing page (start.rogalife.com/calm/f/top, section#buy).
   Rules are kept as-is, in their original order; only image paths changed. */
:root{--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);--ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);--dur-xs:120ms;--dur-sm:200ms;--dur-md:300ms;--dur-lg:450ms}
/* The landing loads HK Grotesk from Fontshare; here the same family is served locally as Hanken Grotesk. */
@font-face{font-family:"HK Grotesk";src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HK Grotesk";src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"HK Grotesk";src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* What the landing page's surroundings give this section (its .stage-content.stage-heal wrapper,
   body text settings and Tailwind's reset), scoped to #buy so nothing else on the site changes. */
#buy{--stage-bg:#c0b1ca;--stage-fg:#f6effa;--text:var(--stage-fg);--text-strong:var(--stage-fg);--muted:var(--stage-fg);--text-on-dark:var(--stage-fg);--muted-on-dark:var(--stage-fg);--accent:var(--stage-fg);--accent-h:var(--stage-fg);--bg:var(--stage-bg);--bg-2:var(--stage-bg);--bg-dark:var(--stage-bg);--bg-deepest:var(--stage-bg);
  color:var(--stage-fg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background:var(--stage-bg)!important;position:relative;z-index:1;isolation:isolate}
#buy,:where(#buy) *,:where(#buy) ::before,:where(#buy) ::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:where(#buy) :where(h2,h3){font-size:inherit;font-weight:inherit;margin:0;letter-spacing:normal}
:where(#buy) p{margin:0}
:where(#buy) a{color:inherit;text-decoration:inherit}
:where(#buy) strong{font-weight:bolder}
:where(#buy) button{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;text-transform:none;-webkit-appearance:button;appearance:button;background-color:transparent;background-image:none;cursor:pointer}
:where(#buy) :is(img,svg){display:block;vertical-align:middle}
:where(#buy) img{max-width:100%;height:auto}
:where(#buy).buy-section :is(h1,h2,h3,h4,h5,h6),:where(#buy).buy-section :is(p,li,dt,dd,label,span){color:var(--stage-fg)!important}

#hero-v2 .hv-trust{display:inline-flex; align-items:center; gap:9px; margin-top:20px; text-decoration:none; background:#fff; padding:2px 14px; border-radius:999px; box-shadow:0 4px 18px rgba(0,0,0,.10); transition:transform .15s ease, box-shadow .2s ease;}
#hero-v2 .hv-trust:hover{transform:translateY(-1px); box-shadow:0 6px 22px rgba(0,0,0,.14);}
#hero-v2 .hv-trust-stars{display:inline-flex; gap:2px; line-height:0;}
#hero-v2 .hv-trust-text{font-family:Calibri,"Carlito","Segoe UI",sans-serif; font-size:15px; color:#1a3b3c;}
#hero-v2 .hv-trust-text strong{font-weight:700;}
section#buy.buy-section{background-color: #b5bcc7 !important;
    background-image:
      url('../img/buy/shop-background-planet.webp'),
      linear-gradient(to right, #929fa8, #b5bcc7, #c9aba9, #e09c89) !important;
    background-size: cover, cover !important;
    background-position: right center, center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-blend-mode: normal, normal;
    padding: clamp(150px, 18vh, 220px) 6vw;
    font-family: Calibri, "Carlito", "Segoe UI", sans-serif;
    position: relative;
    z-index: 1;}
.buy-wrap{max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;}
@media (max-width: 1024px){
.buy-wrap{display: flex; flex-direction: column; gap: 22px;}
.buy-info{display: contents;}
.buy-headgroup{order: 1; margin-bottom: 0;}
.buy-title{order: 4; margin-bottom: 0;}
.buy-colors{order: 6; margin-bottom: 6px;}
.buy-gallery{order: 7;}
.buy-price-row{order: 8; margin: 14px 0 -12px !important;}
.buy-cta-wrap{order: 9; margin-bottom: 6px; position: relative;}
.buy-info .buy-trust{order: 10; margin: 0 !important;}
.buy-wrap .buy-pay{order: 11; margin: 26px 0 0 !important;}
@media (max-width: 640px){
#buy .buy-gallery{width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;}
#buy .buy-main{border-radius: 0;}
}
#buy .buy-info-halo{position: absolute;
      left: 50%;
      right: auto;
      top: 26%;
      transform: translate(-50%, -50%);
      width: min(1200px, 190vw);}
section#buy.buy-section{position: relative;}
#buy .buy-info .buy-trust{position: relative;}
#buy .buy-info .buy-trust::before{content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(1000px, 155vw);
      aspect-ratio: 1 / 1;
      background: url('../img/buy/inner-halo-dark.webp') center / contain no-repeat;
      opacity: 0.5;
      z-index: -1;
      pointer-events: none;}
#buy .buy-wrap{align-items: center; text-align: center;}
#buy .buy-headgroup,
#buy .buy-title,
#buy .buy-product-name,
#buy .buy-product-sub{text-align: center; align-items: center; width: 100%;}
#buy .buy-price-row{justify-content: center;}
#buy .buy-colors{justify-content: center; gap: 72px !important; row-gap: 26px !important;}
#buy .buy-trust-badge{align-self: center;}
#buy .buy-cta-wrap{width: 100%;}
#buy .buy-gallery{width: 100%;}
#buy .buy-info .buy-trust{justify-items: center; gap: 10px 18px !important;}
#buy .buy-trust-item{gap: 10px; font-size: 17px;}
#buy .buy-trust-item .buy-trust-icon{width: 42px;}
#buy .buy-trust-item{justify-content: center; text-align: left;}
#buy .buy-pay-pills{justify-content: center;}
.buy-cta-wrap .buy-cta-glow{position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      pointer-events: none;}
}
.buy-main{position: relative;
    touch-action: pan-y;          
    -webkit-user-select: none;
    user-select: none;
    aspect-ratio: 1000 / 1263;    
    border-radius: 24px;
    overflow: hidden;
    background: none;
    
    
    padding: calc(1.1% + 11px) calc(3.3% + 11px) calc(2.1% + 11px) calc(3.1% + 11px);
    box-sizing: border-box;}
.buy-main::before{content: "";
    position: absolute;
    inset: 0;
    background: url('../img/buy/hero-rectangle-contrast.webp') center / 100% 100% no-repeat;
    z-index: 0;
    pointer-events: none;
    transition: filter 0.35s ease;}
.buy-main-img{position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    border-radius: 7.5% / 6%;}
.buy-main-img{--slide-x: 0%;
    --img-scale: 1;
    transform: translateX(var(--slide-x)) scale(var(--img-scale));
    transform-origin: center;
    transition: transform 0.22s ease, opacity 0.22s ease;}
.buy-main-img.is-device-main{--img-scale: 1.08;
    transform-origin: center bottom;
    
    object-fit: contain !important;
    object-position: center bottom;}
.buy-main-img.is-leaving-left{--slide-x: -28%; opacity: 0;}
.buy-main-img.is-leaving-right{--slide-x: 28%;  opacity: 0;}
.buy-main-img.is-entering-left{--slide-x: -28%; opacity: 0; transition: none;}
.buy-main-img.is-entering-right{--slide-x: 28%;  opacity: 0; transition: none;}
@media (prefers-reduced-motion: reduce){
.buy-main-img{transition: none;}
}
.buy-info{position: relative;}
.buy-info-halo{position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: min(2400px, 275%);
    aspect-ratio: 1 / 1;
    background: url('../img/buy/inner-halo-dark.webp') center / contain no-repeat;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;}
.buy-info > *:not(.buy-info-halo){position: relative;
    z-index: 1;}
#buy .buy-trust-badge{display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 16px;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);}
#buy .buy-trust-badge .hv-trust-stars{display: inline-flex; gap: 2px; line-height: 0;}
#buy .buy-trust-badge .hv-trust-text{font-size: 15px; color: #8c97ae !important; -webkit-text-fill-color: #8c97ae !important;}
#buy .buy-trust-badge .hv-trust-text strong{color: #8c97ae !important; -webkit-text-fill-color: #8c97ae !important;}
#buy .buy-trust-badge .hv-trust-text strong{font-weight: 700;}
.buy-product-name{font-family: 'Hero', "Saral Devanagari", sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 3vw, 46px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #1d1d1f;
    margin: 0 0 10px;}
.buy-product-sub{font-size: 19px;
    line-height: 1.55;
    color: #4a4a4f;
    margin: 0 0 22px;}
@media (max-width: 1024px){
.buy-product-sub{font-size: 17px;}
}
.buy-title{font-family: 'Hero', "Saral Devanagari", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 2.6vw, 40px);
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin: 0 0 8px;}
.buy-price-row{display: flex;
    align-items: flex-end;   
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 26px;}
.buy-price{font-size: clamp(34px, 3.2vw, 46px);
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    line-height: 1;
    display: block;}
.buy-price-was{font-size: 20px;
    color: #6b6b70;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    line-height: 1;
    display: block;
    position: relative;
    top: -9px;}
.buy-price-save{display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: #c2543f;
    border-radius: 999px;
    padding: 4px 11px;
    position: relative;
    top: -10px;}
.buy-colors{display: flex; gap: 14px; margin-bottom: 26px;}
.buy-colors{gap: 168px !important; flex-wrap: wrap; row-gap: 18px;}
.buy-swatch{position: relative;
    box-sizing: border-box;      
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    background-clip: padding-box;}
.buy-colors .buy-swatch:nth-child(1){z-index: 3;}
.buy-colors .buy-swatch:nth-child(2){z-index: 2;}
.buy-colors .buy-swatch:nth-child(3){z-index: 1;}
.buy-colors .buy-swatch.is-active{z-index: 4;}
.buy-swatch::before{content: attr(data-name);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    opacity: 0.75;
    transition: opacity 0.3s ease, color 0.3s ease;
    
    pointer-events: auto;
    cursor: pointer;}
.buy-swatch.is-active::before{opacity: 1;}
.buy-swatch[data-color="charcoal"]::before{color: #4b4b4b;}
.buy-swatch[data-color="sky"]::before{color: #b7d5e8;}
.buy-swatch[data-color="rose"]::before{color: #ffffff;}
.buy-colors{margin-top: 18px;}
#buy .buy-wrap .buy-pay{margin: 0;}
#buy .buy-wrap .buy-pay-pills{gap: 8px;}
#buy .buy-info .buy-trust{grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
    margin: 0 !important;}
@media (max-width: 560px){
#buy .buy-info .buy-trust{grid-template-columns: 1fr;}
}
@media (min-width: 1025px){
.buy-wrap{align-items: stretch;}
.buy-info{display: flex;
      flex-direction: column;
      justify-content: flex-start;
      row-gap: clamp(53px, 5.8vh, 83px);
      padding-top: 10px;}
.buy-info > *{margin: 0 !important;}
#buy .buy-gallery{align-self: start;}
#buy .buy-colors,
#buy .buy-cta-wrap,
#buy .buy-info .buy-trust,
#buy .buy-wrap .buy-pay{margin-top: calc(16px - clamp(53px, 5.8vh, 83px)) !important;}
#buy .buy-headgroup{display: flex;
      flex-direction: column;
      align-items: flex-start;
      
      margin-top: 20px !important;}
#buy .buy-headgroup .buy-trust-badge{margin: 0 0 18px !important;}
#buy .buy-headgroup .buy-product-name{margin: 0 !important;}
#buy .buy-headgroup .buy-product-sub{margin: 6px 0 0 !important;}
#buy .buy-cta-wrap{position: relative;}
#buy .buy-cta-glow{position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 0;
      pointer-events: none;}
#buy .buy-info .buy-trust{position: relative;
      z-index: 1;
      padding: 28px 0;
      margin-top: calc(16px - clamp(53px, 5.8vh, 83px)) !important;}
#buy .buy-price-row{margin-top: auto !important;}
#buy .buy-main{aspect-ratio: 1000 / 1263; height: auto;}
#buy .buy-colors{padding-left: 0;
      box-sizing: border-box;}
}
@media (min-width: 1025px) and (hover: hover){
.buy-swatch{transition: box-shadow 0.35s ease, filter 0.35s ease;}
.buy-swatch:hover{box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45),
                  0 0 18px 4px rgba(255, 255, 255, 0.55);
      filter: brightness(1.06);}
.buy-swatch:hover::before{opacity: 1;}
}
@media (prefers-reduced-motion: reduce){
.buy-swatch{transition: none;}
}
@media (max-width: 640px){
.buy-colors{gap: 62px !important;
      padding-left: 0 !important;
      margin-top: 40px !important;
      justify-content: center;}
.buy-swatch::before{left: 50%;
      right: auto;
      top: auto;
      bottom: calc(100% + 12px);
      transform: translateX(-50%);
      font-size: 12px;}
}
.buy-swatch::after{content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 152%;
    aspect-ratio: 1 / 1;
    background: url('../img/buy/shop-circle-glow.webp') center / contain no-repeat;
    z-index: 2;
    
    pointer-events: auto;
    
    transform: translate(-82%, -50%);
    transition: transform var(--dur-sm) cubic-bezier(.34, 1.35, .5, 1);}
.buy-swatch.is-active{box-shadow: none;}
.buy-swatch.is-active::after{transform: translate(-50%, -50%);}
@media (prefers-reduced-motion: reduce){
.buy-swatch::after{transition: none;}
}
.buy-cta{display: block;
    text-align: center;
    background: rgba(29, 29, 31, 0.85);
    color: #fff;
    border-radius: 999px;
    padding: 16px 32px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 30px;
    transition: opacity .15s;}
.buy-cta:hover{opacity: 0.85;}
.buy-cta.is-sold-out{cursor: not-allowed;
    opacity: 0.75;
    pointer-events: none;}
.buy-cta-wrap{display: block; margin-bottom: 30px; position: relative; z-index: 3;}
.buy-cta-wrap .buy-cta{margin-bottom: 0; position: relative; z-index: 2;}
.buy-cta-glow{display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;}
.buy-cta[data-color="charcoal"]{background: rgba(75, 75, 75, 0.85) !important;}
.buy-cta[data-color="sky"]{background: rgba(106, 169, 209, 0.85) !important;}
.buy-cta[data-color="rose"]{background: rgba(203, 150, 145, 0.85) !important;}
.buy-cta{transition: background 0.3s ease, opacity 0.15s ease;}
.buy-trust{display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 30px;}
.buy-trust-item{display: flex;
    align-items: center;
    gap: 14px;
    font-size: 19px;
    color: #1d1d1f;}
.buy-trust-item svg{color: #0071e3; flex: none;}
.buy-trust-item .buy-trust-icon{width: 58px;
    height: auto;
    flex: none;
    display: block;}
.buy-pay-pills{display: flex; flex-wrap: wrap; gap: 8px;}
#buy .op-pill-amazon{background: #FFD814 !important; color: #131A22 !important; font-weight: 700; font-size: 13px; gap: 4px; padding: 0 12px;}
#buy .op-pill-amazon .op-amz-wm{display: inline-flex; align-items: baseline; gap: 4px;}
#buy .op-pill-amazon .op-amz-name{color: #131A22 !important; font-weight: 700; letter-spacing: -0.01em;}
#buy .op-pill-amazon .op-amz-pay{color: #232F3E !important; font-weight: 600; font-size: 11px; text-transform: lowercase;}
#buy .op-pill-google{background: #FFFFFF !important; color: #3C4043 !important; border: 1px solid #DADCE0; font-weight: 500; font-size: 14px; gap: 5px; padding: 0 12px;}
#buy .op-pill-google .op-g-pay{color: #3C4043 !important; font-weight: 500;}
#buy .op-pill-google .op-g-logo{display: inline-block; flex: 0 0 auto;}
.op-pills{display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;}
.op-pill{display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 14px;
    height: 36px;
    min-width: 64px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    letter-spacing: 0;}
.op-pill-hsa{background: #1A3B3C !important; color: #FFFFFF !important; font-weight: 600; letter-spacing: 0.04em; font-size: 12px;}
.op-pill-apple{background: #000000 !important; color: #FFFFFF !important; font-weight: 600;}
.op-pill-apple svg{margin-bottom: 1px; color: #FFFFFF !important; fill: #FFFFFF !important;}
.op-pill-shop{background: #5A31F4 !important; color: #FFFFFF !important; font-style: italic; font-weight: 800; font-size: 15px;}
.op-pill-paypal{background: #FFFFFF !important; color: #003087 !important; border: 1px solid #E1E1E1; font-style: italic; font-weight: 800; font-size: 14px; gap: 0;}
.op-pill-paypal .op-pp-1{color: #003087 !important;}
.op-pill-paypal .op-pp-2{color: #009CDE !important;}
#shop .op-pill-amazon{background: #FFD814 !important; color: #131A22 !important; font-weight: 700; font-size: 13px; gap: 4px; padding: 0 12px;}
#shop .op-pill-amazon .op-amz-wm{display: inline-flex; align-items: baseline; gap: 4px;}
#shop .op-pill-amazon .op-amz-name{color: #131A22 !important; font-weight: 700; letter-spacing: -0.01em;}
#shop .op-pill-amazon .op-amz-pay{color: #232F3E !important; font-weight: 600; font-size: 11px; text-transform: lowercase;}
#shop .op-pill-google{background: #FFFFFF !important; color: #3C4043 !important; border: 1px solid #DADCE0; font-weight: 500; font-size: 14px; gap: 5px; padding: 0 12px;}
#shop .op-pill-google .op-g-pay{color: #3C4043 !important; font-weight: 500;}
#shop .op-pill-google .op-g-logo{display: inline-block; flex: 0 0 auto;}
#buy .buy-colors{display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: start !important;
    align-items: start !important;
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    gap: 16px !important;
    row-gap: 16px !important;
    padding-left: 0 !important;
    margin-top: 8px !important;}
#buy .buy-swatch{position: relative !important;
    display: block !important;
    
    width: 100% !important;
    min-width: 0 !important;
    max-width: 172px !important;
    height: auto !important;
    aspect-ratio: 359 / 368 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    overflow: visible !important;}
#buy .buy-swatch::before,
#buy .buy-swatch::after{content: none !important; display: none !important;}
#buy .bsw-plate{position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;}
#buy .buy-swatch[data-color="charcoal"] .bsw-plate{background-image: url('../img/buy/selector-square-charcoal.webp');}
#buy .buy-swatch[data-color="sky"]      .bsw-plate{background-image: url('../img/buy/selector-square-sky-blue.webp');}
#buy .buy-swatch[data-color="rose"]     .bsw-plate{background-image: url('../img/buy/selector-square-soft-rose.webp');}
#buy .bsw-dot{position: absolute;
    left: 50%;
    top: 42%;
    width: 45.8%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.62;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;}
#buy .buy-swatch[data-color="charcoal"] .bsw-dot{background-image: url('../img/buy/selector-circle-charcoal.webp');}
#buy .buy-swatch[data-color="sky"]      .bsw-dot{background-image: url('../img/buy/selector-circle-sky-blue.webp');}
#buy .buy-swatch[data-color="rose"]     .bsw-dot{background-image: url('../img/buy/selector-circle-soft-rose.webp');}
#buy .buy-swatch:hover .bsw-dot{opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.22));}
#buy .buy-swatch.is-active .bsw-dot{opacity: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));}
#buy .buy-swatch-name{position: absolute;
    left: 0;
    right: 0;
    bottom: 15%;
    z-index: 2;
    font-family: "HK Grotesk", "Segoe UI", sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: center;
    color: #8e97a9;
    pointer-events: none;
    transition: color 0.25s ease;}
#buy .buy-swatch.is-active .buy-swatch-name{color: #1d1d1f; font-weight: 700;}
#buy .buy-swatch-check{position: absolute;
    top: 9%;
    right: 9%;
    z-index: 3;
    line-height: 0;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
    pointer-events: none;}
#buy .buy-swatch.is-active .buy-swatch-check{opacity: 1; transform: scale(1);}
@media (max-width: 1024px){
#buy .buy-colors{justify-items: center !important;
      gap: 14px !important;
      row-gap: 14px !important;
      margin-top: 12px !important;}
#buy .buy-swatch{max-width: 150px !important;}
}
@media (max-width: 560px){
#buy .buy-colors{gap: 10px !important;}
#buy .buy-swatch{max-width: 132px !important;}
#buy .buy-swatch-name{font-size: 12px;}
#buy .buy-swatch-check svg{width: 17px; height: 17px;}
}
#buy .buy-main-img{transform: translateX(calc(var(--slide-x, 0%) + var(--drag-x, 0px))) scale(var(--img-scale, 1)) !important;}
#buy .buy-ghost{position: absolute;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    z-index: 1;
    display: none;
    --slide-x: var(--ghost-side, 100%);}
#buy .buy-ghost.is-live{display: block;}
@media (max-width: 640px){
#buy .buy-main-img{transition: none;}
}
#buy .buy-title{margin-bottom: 2px !important;}
@media (min-width: 1025px){
#buy .buy-title{margin-top: calc(-14px) !important;}
#buy .buy-colors{margin-top: calc(6px - clamp(53px, 5.8vh, 83px)) !important;}
}
@media (max-width: 1024px){
#buy .buy-title{margin-top: -8px !important; margin-bottom: 0 !important;}
#buy .buy-colors{margin-top: 4px !important;}
}
@media (max-width: 1024px){
#buy .buy-info-halo{width: min(1700px, 265vw) !important;}
}
@media (max-width: 640px){
#buy .buy-price-row{position: relative;}
#buy .buy-price-row::before{content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(1000px, 155vw);
      aspect-ratio: 1 / 1;
      background: url('../img/buy/inner-halo-dark.webp') center / contain no-repeat;
      opacity: 0.5;
      z-index: -1;
      pointer-events: none;}
}
.buy-cta,
#buy .buy-swatch{transition: transform var(--dur-xs) var(--ease-out),
                background-color var(--dur-sm) ease,
                opacity var(--dur-sm) ease;}
.buy-cta:active{transform: scale(0.97);}
#buy .buy-swatch:active .bsw-dot{transform: translate(-50%, -50%) scale(0.95);}
.buy-cta.is-sold-out:active{transform: none;}
@media (hover: none), (pointer: coarse){
#hero-v2 .hv-trust:hover{transform: none !important;}
#buy .buy-swatch:hover .bsw-dot{transform: translate(-50%, -50%) !important;
      filter: none !important;}
}
@media (prefers-reduced-motion: reduce){
.buy-cta:active{transform: none !important;}
}
#buy{scroll-margin-top: 80px;}
@media (max-width: 640px){
section#buy.buy-section{padding-top: 28px !important;
      margin-top: 0 !important;}
#buy .buy-headgroup{margin-top: 0 !important;}
#buy .buy-main{border-radius: 18px !important; overflow: hidden;}
#buy .buy-main-img,
#buy .buy-ghost{border-radius: 7.5% / 6% !important;}
#buy .buy-gallery{width: auto !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding: 0 14px;
      box-sizing: border-box;}
}
.buy-trust-item .buy-trust-icon-flag{opacity: 0.88;
    border-radius: 2px;}
@media (max-width: 720px){
#buy{--shop-gap: 22px;}
#buy .buy-wrap{gap: 0 !important;}
#buy .buy-headgroup,
#buy .buy-title,
#buy .buy-colors,
#buy .buy-gallery,
#buy .buy-price-row,
#buy .buy-cta-wrap,
#buy .buy-info .buy-trust,
#buy .buy-wrap .buy-pay{margin-left: 0 !important;
      margin-right: 0 !important;
      margin-bottom: 0 !important;
      margin-top: var(--shop-gap) !important;}
#buy .buy-headgroup{margin-top: 0 !important;}
#buy .buy-headgroup .hv-trust{margin: 0 0 var(--shop-gap) !important;}
#buy .buy-product-name{margin: 0 0 var(--shop-gap) !important;}
#buy .buy-product-sub{margin: 0 !important;}
#buy .buy-trust{row-gap: var(--shop-gap) !important;
      column-gap: var(--shop-gap) !important;}
#buy .buy-pay-pills{gap: var(--shop-gap) !important;}
#buy .buy-pay{padding-bottom: var(--shop-gap) !important;}
#buy .buy-colors{margin-top: var(--shop-gap) !important;}
}
@media (max-width: 720px){
section#buy.buy-section{padding-top: 52px !important;
      padding-bottom: 52px !important;
      margin-bottom: 0 !important;}
#buy .buy-pay{padding-bottom: 0 !important;}
#buy .buy-wrap{padding-bottom: 0 !important; margin-bottom: 0 !important;}
}
@media (min-width: 1025px){
#buy{scroll-margin-top: 100px;}
}
@media (max-width: 720px){
#buy .buy-wrap .buy-pay{margin-top: 48px !important;
      margin-bottom: 0 !important;
      padding-bottom: 48px !important;}
}
@media (max-width: 720px){
#buy .buy-headgroup{display: contents;}
#buy .buy-trust-badge{order: 1;}
#buy .buy-gallery{order: 2;}
#buy .buy-title{order: 3;}
#buy .buy-colors{order: 4;}
#buy .buy-product-name{order: 5;}
#buy .buy-product-sub{order: 6;}
#buy .buy-price-row{order: 7;}
#buy .buy-cta-wrap{order: 8;}
#buy .buy-info .buy-trust{order: 9;}
#buy .buy-wrap .buy-pay{order: 10;}
#buy .buy-trust-badge{margin: 0 !important;
      align-self: center;}
#buy .buy-product-name{margin: var(--shop-gap) 0 0 !important;
      text-align: center;}
#buy .buy-product-sub{margin: 10px 0 0 !important;
      text-align: center;}
}
@media (max-width: 720px){
#buy .buy-gallery{padding: 0 !important;
      width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;}
}
@media (max-width: 720px){
section#buy.buy-section{background-color: #8a93a1 !important;
      background-image:
        url('../img/buy/shop-background-planet.webp'),
        linear-gradient(to bottom right, #6f7a8a, #8a93a1, #a8888a) !important;}
}
#buy .buy-cta{background: rgb(29, 29, 31) !important;}
#buy .buy-cta[data-color="charcoal"]{background: rgb(75, 75, 75) !important;}
#buy .buy-cta[data-color="sky"]{background: rgb(106, 169, 209) !important;}
#buy .buy-cta[data-color="rose"]{background: rgb(203, 150, 145) !important;}
@media (max-width: 720px){
#buy .buy-title,
#buy .buy-product-name,
#buy .buy-product-sub,
#buy .buy-swatch-name,
#buy .buy-swatch.is-active .buy-swatch-name,
#buy .buy-price,
#buy .buy-price-was,
#buy .buy-cta,
#buy .buy-cta.is-sold-out{color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 1 !important;}
#buy .buy-wrap,
#buy .buy-gallery,
#buy .buy-title,
#buy .buy-colors,
#buy .buy-product-name,
#buy .buy-product-sub,
#buy .buy-price-row,
#buy .buy-cta-wrap,
#buy .buy-trust-badge,
#buy .buy-info .buy-trust,
#buy .buy-wrap .buy-pay{position: relative;
      z-index: 3;}
#buy .buy-swatch.is-active .buy-swatch-name{font-weight: 700;}
}
@media (max-width: 720px){
#buy .buy-info-halo{z-index: -1 !important;}
#buy .buy-info .buy-trust::before,
#buy .buy-price-row::before{z-index: -1 !important;}
}
@media (max-width: 720px){
#buy .buy-trust-badge,
#buy .buy-gallery,
#buy .buy-title,
#buy .buy-colors,
#buy .buy-product-name,
#buy .buy-product-sub{z-index: 6 !important;}
#buy .buy-price-row,
#buy .buy-cta-wrap{z-index: 4 !important;}
#buy .buy-info .buy-trust,
#buy .buy-wrap .buy-pay{z-index: 3 !important;}
}
#buy .buy-title{display: none !important;}
@media (min-width: 1025px){
#buy .buy-headgroup .buy-product-sub{margin: 36px 0 10px !important;}
}
@media (min-width: 1025px){
#buy .buy-price-row{margin-bottom: 34px !important;}
}
@media (max-width: 720px){
#buy .buy-product-sub{display: none !important;}
}
@media (max-width: 720px){
#buy .buy-price-row{margin-top: 40px !important;
      margin-bottom: 0 !important;}
#buy .buy-cta-wrap{margin-top: 18px !important;   
      margin-bottom: 0 !important;}
#buy .buy-info .buy-trust{margin-top: 40px !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;}
#buy .buy-wrap .buy-pay{margin-top: 40px !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;}
}
@media (min-width: 1025px){
#buy{scroll-margin-top: 16px;}
}
@media (max-width: 720px){
#buy .buy-price-row{align-items: flex-end !important;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 10px !important;}
#buy .buy-price-was,
#buy .buy-price-save{align-self: flex-end !important;
      top: -4px !important;}
#buy .buy-price-save{margin-bottom: 0;}
}
.buy-dots{position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(28, 32, 40, 0.34);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 2px 14px rgba(20, 24, 32, 0.18);
    max-width: calc(100% - 32px);}
.buy-dot-arrow{flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: color var(--dur-sm) var(--ease-out),
                transform var(--dur-xs) var(--ease-out);}
@media (hover: hover) and (pointer: fine){
.buy-dot-arrow:hover{color: #fff;}
}
.buy-dot-arrow:active{transform: scale(0.88);}
.buy-dot-arrow:focus-visible,
.buy-dot:focus-visible{outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;}
.buy-dot-list{display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;}
.buy-dot{flex: 0 0 auto;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    overflow: hidden;
    
    transition: width var(--dur-md) var(--ease-out),
                background-color var(--dur-md) var(--ease-out);}
@media (hover: hover) and (pointer: fine){
.buy-dot:hover{background: rgba(255, 255, 255, 0.7);}
}
.buy-dot.is-active{width: 34px;
    background: rgba(255, 255, 255, 0.34);}
.buy-dot-fill{display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;}
.buy-dot:not(.is-active) .buy-dot-fill{transform: scaleX(0) !important;}
.buy-dot-play .bdp-ico-play{display: none;}
.buy-dot-play.is-paused .bdp-ico-pause{display: none;}
.buy-dot-play.is-paused .bdp-ico-play{display: block;}
.buy-dot-play{margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0;
    width: auto;}
@media (max-width: 640px){
.buy-dots{bottom: 1px; gap: 8px; padding: 6px 10px;}
.buy-dot-list{gap: 6px;}
}
@media (prefers-reduced-motion: reduce){
.buy-dot{transition: none;}
.buy-dot-arrow{transition: none;}
.buy-dot.is-active .buy-dot-fill{transform: scaleX(1);}
}
@media (min-width: 1025px){
#hero-v2 .hv-trust{background: rgba(255, 255, 255, 0.72);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);}
#hero-v2 .hv-trust .hv-trust-text,
#hero-v2 .hv-trust .hv-trust-text strong{color: #8c97ae;
      -webkit-text-fill-color: #8c97ae;}
}
#hero-v2 .hv-trust-m .hv-trust-stars{flex: 0 0 auto; gap: 0.14em;}
#hero-v2 .hv-trust-m .hv-trust-stars svg{width: 1em; height: 1em;}
#hero-v2 .hv-trust-m .hv-trust-text{font-size: 1em;          
    white-space: nowrap;}
#buy .buy-info-halo,
#buy .buy-info .buy-trust::before,
#buy .buy-price-row::before{z-index: -1 !important;}
#buy .buy-info .buy-trust > .buy-trust-item{position: relative;
    z-index: 1;}
#buy .buy-trust-item,
#buy .buy-trust-item span{color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;}
@media (max-width: 1024px){
#hero-v2 .hv-trust,
#buy .buy-trust-badge{background: rgba(32, 37, 46, 0.82) !important;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;}
#hero-v2 .hv-trust .hv-trust-text,
#hero-v2 .hv-trust .hv-trust-text strong,
#buy .buy-trust-badge .hv-trust-text,
#buy .buy-trust-badge .hv-trust-text strong{color: #f2f4f7 !important;
      -webkit-text-fill-color: #f2f4f7 !important;}
#hero-v2 .hv-trust .hv-trust-stars linearGradient stop + stop,
#buy .buy-trust-badge .hv-trust-stars linearGradient stop + stop{stop-color: rgba(255, 255, 255, 0.34);}
}
@media (min-width: 1025px){
#buy .buy-wrap{grid-template-rows: auto 1fr;}
#buy .buy-wrap > .buy-gallery{grid-row: 1; grid-column: 1;}
#buy .buy-wrap > .buy-info{grid-row: 1 / span 2; grid-column: 2;}
#buy .buy-wrap > .buy-pay{grid-row: 2;
      grid-column: 1;
      
      justify-self: center;
      
      align-self: end;
      margin: 0 0 96px;}
#buy .buy-wrap > .buy-pay .buy-pay-pills{justify-content: center;}
}

/* ---------- rogalife.com: light shop section ----------
   Same cream as the video section above it (--cream), no photo background,
   and dark text so everything reads clearly. Desktop and mobile. */
section#buy.buy-section{background:#FAF8F4 !important;background-image:none !important}
section#buy.buy-section::before,section#buy.buy-section::after{background-image:none !important}
#buy .buy-info-halo{display:none !important}
#buy .buy-product-name,
#buy .buy-product-sub,
#buy .buy-title,
#buy .buy-swatch-name,
#buy .buy-price,
#buy .buy-trust span,
#buy .buy-trust-item,
#buy .buy-trust-item span{color:#14181F !important;-webkit-text-fill-color:#14181F !important;text-shadow:none !important}
#buy .buy-price-was{color:rgba(20,24,31,.55) !important;-webkit-text-fill-color:rgba(20,24,31,.55) !important}
#buy .buy-price-save{color:#fff !important;-webkit-text-fill-color:#fff !important}
#buy .hv-trust-text,#buy .hv-trust-text strong{color:#14181F !important;-webkit-text-fill-color:#14181F !important}
#buy .buy-trust-icon:not(.buy-trust-icon-flag){filter:brightness(0) !important;opacity:.8}
/* colour cards: a light card with a hairline so they still read on cream */
#buy .buy-swatch{background:rgba(255,255,255,.75) !important;border:1px solid rgba(20,24,31,.1) !important;box-shadow:0 6px 18px -10px rgba(20,24,31,.25) !important}
#buy .buy-swatch.is-active{border-color:rgba(20,24,31,.35) !important}
/* (stronger selectors so the phone rules above don't turn the text white again) */
section#buy.buy-section .buy-product-name,
section#buy.buy-section .buy-product-sub,
section#buy.buy-section .buy-title,
section#buy.buy-section .buy-swatch-name,
section#buy.buy-section .buy-swatch.is-active .buy-swatch-name,
section#buy.buy-section .buy-price,
section#buy.buy-section .buy-trust-item span{color:#14181F !important;-webkit-text-fill-color:#14181F !important;text-shadow:none !important}
section#buy.buy-section .buy-price-was{color:rgba(20,24,31,.55) !important;-webkit-text-fill-color:rgba(20,24,31,.55) !important}
section#buy.buy-section .buy-price-row::before,
section#buy.buy-section .buy-info .buy-trust::before,
section#buy.buy-section .buy-trust::before{background-image:none !important}
section#buy.buy-section .buy-trust-badge{background:rgba(255,255,255,.92) !important;box-shadow:0 4px 18px rgba(20,24,31,.08) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
section#buy.buy-section .buy-trust-badge .hv-trust-text,
section#buy.buy-section .buy-trust-badge .hv-trust-text strong{color:#14181F !important;-webkit-text-fill-color:#14181F !important}
/* product title: the three benefit lines a step smaller than "Roga Vagus Nerve Stimulation:" */
#buy .buy-product-name .buy-product-lines{display:block;font-size:.78em;line-height:1.2;margin-top:.15em}