@font-face {
font-family:Poppins;
src:url('/static/fonts/poppins-regular.woff2') format('woff2');
font-style:normal;
font-weight:400;
font-display:swap
}

@font-face {
font-family:Poppins;
src:url('/static/fonts/poppins-semibold.woff2') format('woff2');
font-style:normal;
font-weight:600 800;
font-display:swap
}

@font-face {
font-family:'Noto Sans Arabic';
src:url('/static/fonts/noto-sans-arabic.woff2') format('woff2');
font-style:normal;
font-weight:100 900;
font-display:swap
}

:root {
--ink:#302a27;
--muted:#746b65;
--rose:#946966;
--rose-hover:#805a58;
--light-rose:#ecdcd8;
--cream:#f8f5ef;
--paper:#fffefa;
--border:#e3ddd4;
--sans:Poppins,Arial,sans-serif;
--serif:Georgia,'Times New Roman',serif;
--header-height:88px
}

* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:110px
}
body {
margin:0;
color:var(--ink);
background:var(--paper);
font-family:var(--sans);
font-size:14px;
line-height:1.65;
-webkit-font-smoothing:antialiased
}
html[lang=ar] body {
font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif;
font-size:15px
}
button,input,select,textarea {
font:inherit
}
button,a,input,select,textarea {
-webkit-tap-highlight-color:transparent
}
button {
cursor:pointer;
color:inherit
}
button:disabled {
cursor:not-allowed;
opacity:.5
}
button {
background:none;
border:0
}
a {
color:inherit;
text-decoration:none
}
img {
display:block;
max-width:100%;
height:auto
}
video {
display:block;
max-width:100%
}
h1,h2,h3,p {
margin:0
}
h1,h2,h3 {
font-weight:400
}
h1,h2 {
line-height:1.13;
letter-spacing:-.055em
}
html[lang=ar] h1,html[lang=ar] h2 {
letter-spacing:-.035em;
line-height:1.4;
font-weight:500
}
h3 {
line-height:1.3
}
p {
color:var(--muted)
}
::selection {
background:#dfc6c0;
color:var(--ink)
}
:focus-visible {
outline:2px solid var(--rose);
outline-offset:5px;
border-radius:2px
}
[hidden] {
display:none!important
}
.muted {
color:var(--muted)
}
.small {
font-size:12px;
line-height:1.65
}
.line-breaks {
white-space:pre-line
}
.eyebrow {
display:block;
font-size:10px;
font-weight:600;
letter-spacing:.18em;
line-height:1.5;
text-transform:uppercase
}
html[lang=ar] .eyebrow {
letter-spacing:.04em;
font-size:12px
}
.button {
min-height:54px;
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:28px;
padding:16px 25px;
font-size:12px;
font-weight:600;
letter-spacing:.015em;
border:1px solid transparent;
border-radius:4px;
transition:background .2s,transform .2s
}
.button span {
font-size:20px;
line-height:1;
font-weight:400
}
.primary {
background:var(--rose);
color:#fff
}
.primary:hover {
background:var(--rose-hover)
}
.dark {
background:var(--ink);
color:#fff
}
.dark:hover {
background:#151211
}
.text-link {
display:inline-flex;
gap:28px;
align-items:center;
font-size:12px;
border-bottom:1px solid currentColor;
padding-bottom:6px
}
.text-link span {
font-size:23px
}
.skip-link {
position:fixed;
top:8px;
left:8px;
z-index:1000;
background:#fff;
padding:12px;
transform:translateY(-200%)
}
.skip-link:focus {
transform:none
}
.section-shell {
max-width:1440px;
margin:auto;
padding-inline:6.25%
}
.announcement {
display:flex;
align-items:center;
justify-content:center;
gap:22px;
background:#e8d8d1;
color:#4b3934;
min-height:33px;
padding:6px 16px;
text-align:center;
font-size:10px;
letter-spacing:.04em
}
.tiny-spark {
font-size:13px;
line-height:1
}
.site-header {
height:var(--header-height);
position:sticky;
top:0;
z-index:30;
background:rgba(255,254,250,.97);
border-bottom:1px solid var(--border);
padding-inline:4.2%;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}
.brand {
flex:0 0 111px
}
.brand img {
width:111px;
height:44px;
object-fit:contain
}
.desktop-nav {
display:flex;
align-items:center;
gap:38px;
font-size:11px
}
.desktop-nav a {
position:relative;
padding-block:10px
}
.desktop-nav a:after {
content:'';
position:absolute;
bottom:5px;
inset-inline-start:0;
width:0;
height:1px;
background:var(--ink);
transition:width .2s
}
.desktop-nav a:hover:after {
width:100%
}
.header-actions {
display:flex;
align-items:center;
gap:26px
}
.locale-trigger {
display:flex;
align-items:center;
gap:8px;
font-size:10px;
padding:8px 0
}
.locale-trigger>span:first-child {
font-size:17px
}
.chevron {
font-size:15px
}
.bag-trigger {
display:flex;
align-items:center;
gap:6px;
padding:10px 0
}
.bag-count {
min-width:15px;
font-size:11px
}
.hero {
display:grid;
grid-template-columns:1fr 1fr;
background:var(--cream);
min-height:660px;
max-width:1800px;
margin:auto;
overflow:hidden
}
.hero-copy {
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:65px 10% 45px 12.5%;
position:relative
}
.hero .eyebrow {
display:flex;
align-items:center;
gap:13px
}
.little-line {
display:block;
width:26px;
height:1px;
background:currentColor
}
.hero h1 {
font-size:clamp(42px,4.55vw,75px);
margin-top:30px;
white-space:nowrap
}
.hero h1 em {
font-family:var(--serif);
font-weight:400;
color:var(--rose);
letter-spacing:-.045em
}
html[lang=ar] .hero h1 em {
font-family:inherit;
font-style:normal;
font-weight:400
}
.hero-intro {
max-width:390px;
margin-top:28px;
font-size:12px;
line-height:1.95
}
.hero-ctas {
margin-top:32px;
display:flex;
gap:22px;
align-items:center;
flex-wrap:wrap
}
.watch-button {
display:flex;
align-items:center;
gap:10px;
font-size:11px;
min-height:44px;
padding:4px 0
}
.play-icon {
display:grid;
place-items:center;
width:32px;
height:32px;
border:1px solid #c5b8ac;
border-radius:100%;
font-size:9px;
padding-inline-start:2px
}
.hero-footnote {
display:flex;
align-items:center;
gap:12px;
margin-top:55px;
font-size:9px;
color:var(--muted)
}
.footnote-flower {
font-size:27px;
line-height:1;
color:#a28e77
}
.hero-image {
position:relative;
min-width:0;
min-height:660px;
overflow:hidden
}
.hero-image>img {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
object-position:center 49%
}
.hero-image-label {
position:absolute;
inset:25px 25px auto;
display:flex;
align-items:center;
gap:9px;
color:#3f3530;
padding:10px 12px;
background:rgba(255,254,250,.87);
border-radius:3px;
font-size:11px
}
.hero-image-label>span:last-child {
margin-inline-start:auto;
font-size:8px;
letter-spacing:.1em
}
.label-dot {
width:6px;
height:6px;
border-radius:100%;
background:var(--rose)
}
.hero-roundel {
position:absolute;
bottom:27px;
inset-inline-end:27px;
background:var(--cream);
border-radius:100%;
width:111px;
height:111px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
transform:rotate(-9deg);
color:var(--rose);
box-shadow:0 2px 20px #302a2709
}
.hero-roundel span {
font-size:8px;
letter-spacing:.04em;
line-height:1.3
}
.hero-roundel b {
font-size:40px;
font-weight:400;
line-height:1.2
}
.benefit-strip {
max-width:1440px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
padding:32px 6.25%;
border-bottom:1px solid var(--border)
}
.benefit-strip>div {
display:flex;
align-items:center;
justify-content:center;
gap:17px
}
.benefit-strip>div+div {
border-inline-start:1px solid var(--border)
}
.benefit-icon {
font-size:28px;
color:var(--rose);
font-weight:400
}
.nfc-icon {
font-size:38px
}
.benefit-strip strong {
display:block;
font-weight:400;
font-size:11px
}
.benefit-strip div div>span {
display:block;
color:var(--muted);
font-size:9px;
margin-top:3px
}
.product-section {
padding-block:100px 110px;
display:grid;
grid-template-columns:1.05fr 1fr;
gap:8%
}
.product-gallery {
min-width:0
}
.main-product-image {
position:relative;
aspect-ratio:1;
overflow:hidden;
background:#f1e4e1;
border-radius:5px
}
.main-product-image>img {
width:100%;
height:120%;
max-width:none;
object-fit:cover;
object-position:center top
}
.image-label {
position:absolute;
inset:18px auto auto 18px;
z-index:1;
background:#fffefabf;
font-size:8px;
letter-spacing:.1em;
padding:6px 8px;
border-radius:2px
}
.gallery-arrow {
position:absolute;
top:48%;
width:33px;
height:33px;
border-radius:50%;
background:#fffefade;
font-size:24px;
line-height:1;
display:grid;
place-items:center
}
.gallery-prev {
left:14px
}
.gallery-next {
right:14px
}
.gallery-video {
position:absolute;
bottom:15px;
inset-inline-start:16px;
border-radius:3px;
display:flex;
align-items:center;
gap:8px;
background:#fffefaef;
font-size:9px;
padding:9px 12px
}
.gallery-video span {
font-size:8px
}
.gallery-thumbs {
display:flex;
gap:10px;
margin-top:13px
}
.gallery-thumbs button {
padding:3px;
width:70px;
height:70px;
border:1px solid transparent;
border-radius:3px;
overflow:hidden
}
.gallery-thumbs button.active {
border-color:var(--rose)
}
.gallery-thumbs img {
width:100%;
height:120%;
object-fit:cover;
object-position:top
}
.product-copy {
padding-top:12px;
align-self:center
}
.product-copy h2 {
font-size:49px;
margin-top:16px;
letter-spacing:-.05em
}
.product-subtitle {
font-size:13px;
line-height:1.8;
max-width:340px;
margin-top:15px
}
.price-row {
display:flex;
gap:13px;
align-items:center;
flex-wrap:wrap;
margin-top:25px;
direction:ltr;
justify-content:flex-start
}
html[dir=rtl] .price-row {
justify-content:flex-end
}
.price-row>strong {
font-size:22px;
font-weight:400;
letter-spacing:-.04em
}
.price-row del {
font-size:12px;
color:var(--muted)
}
.save-badge {
background:#eee3dc;
color:#654740;
font-size:9px;
padding:4px 7px;
border-radius:2px
}
.fine-rule {
height:1px;
background:var(--border);
margin:26px 0 21px
}
.color-label {
font-size:11px
}
.color-label>span {
margin-inline:5px;
color:#b5a69b
}
.color-label strong {
font-weight:400
}
.swatches {
display:flex;
gap:12px;
margin-top:15px
}
.swatch {
padding:4px;
border:1px solid transparent;
width:38px;
height:38px;
border-radius:50%;
position:relative
}
.swatch span {
width:100%;
height:100%;
display:block;
border-radius:50%
}
.swatch-rose span {
background:#c19a96
}
.swatch-black span {
background:#353735
}
.swatch-clay span {
background:#b8b4ad
}
.swatch.active {
border-color:var(--rose)
}
.swatch.unavailable:after {
content:'';
height:1px;
width:32px;
background:#fff;
position:absolute;
top:18px;
left:2px;
transform:rotate(-45deg)
}
.availability {
font-size:10px;
color:#99614f;
min-height:25px;
padding-top:7px
}
.purchase-row {
display:flex;
gap:10px;
margin-top:5px
}
.quantity-stepper {
display:inline-flex;
align-items:center;
justify-content:space-between;
border:1px solid var(--border);
border-radius:4px;
height:48px;
min-width:100px;
direction:ltr
}
.quantity-stepper button {
width:32px;
height:100%;
font-size:16px
}
.quantity-stepper input {
border:0;
background:none;
width:25px;
text-align:center;
padding:0;
font-size:12px;
appearance:textfield;
-moz-appearance:textfield
}
.quantity-stepper input::-webkit-inner-spin-button {
appearance:none
}
.product-quantity {
height:54px;
flex:0 0 110px
}
.add-to-bag {
flex:1
}
.product-delivery {
display:flex;
gap:14px;
margin-top:22px;
align-items:center;
background:#f0ede5;
padding:14px 16px;
border-radius:3px
}
.delivery-symbol {
font-size:25px;
color:var(--rose)
}
.product-delivery strong {
font-weight:400;
font-size:11px
}
.product-delivery p {
font-size:9px;
margin-top:3px
}
.product-points {
list-style:none;
padding:0;
margin:22px 0
}
.product-points li {
font-size:11px;
display:flex;
align-items:center;
gap:10px;
margin-top:9px
}
.product-points li span {
font-size:12px;
color:var(--rose)
}
.product-meta {
display:flex;
justify-content:space-between;
border-top:1px solid var(--border);
padding-top:15px;
gap:12px;
color:var(--muted);
font-size:9px
}
.ritual-section {
max-width:1800px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
background:#eee6da
}
.ritual-image {
position:relative;
min-height:640px;
overflow:hidden
}
.ritual-image img {
width:100%;
height:100%;
position:absolute;
object-fit:cover;
object-position:center 40%
}
.photo-note {
position:absolute;
bottom:24px;
inset-inline-start:30px;
background:#fffefaeb;
border-radius:2px;
padding:7px 12px;
font-size:8px;
letter-spacing:.13em
}
.ritual-copy {
padding:90px 12%;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center
}
.ritual-copy h2 {
font-size:clamp(35px,3.6vw,57px);
margin-top:24px
}
.ritual-copy>p {
font-size:12px;
line-height:1.95;
margin-top:24px;
max-width:360px
}
.ritual-detail {
display:flex;
align-items:center;
gap:18px;
margin:36px 0 32px
}
.ritual-orbit {
font-size:45px;
line-height:1;
color:#8e7567
}
.ritual-detail>span:last-child {
font-size:10px;
color:var(--muted);
line-height:1.7
}
.how-section {
padding-block:110px
}
.section-heading {
display:flex;
justify-content:space-between;
gap:30px;
align-items:flex-end;
margin-bottom:43px
}
.section-heading h2 {
font-size:48px;
margin-top:19px
}
.section-heading>p {
font-size:12px;
padding-bottom:5px
}
.steps-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px
}
.step-image {
aspect-ratio:1;
position:relative;
overflow:hidden;
border-radius:4px;
background:#e7dfd7
}
.step-image img {
width:100%;
height:100%;
object-fit:cover
}
.step-number {
position:absolute;
top:15px;
inset-inline-start:15px;
display:grid;
place-items:center;
background:var(--paper);
width:29px;
height:29px;
border-radius:100%;
font-size:9px
}
.step h3 {
font-size:18px;
letter-spacing:-.02em;
margin-top:22px
}
.step>p {
font-size:11px;
line-height:1.9;
margin-top:13px;
max-width:320px
}
.compat-section {
border-block:1px solid var(--border);
display:grid;
grid-template-columns:auto 1fr auto;
gap:35px;
align-items:center;
padding-block:42px
}
.compat-flower {
font-size:67px;
color:#9b806c;
line-height:1
}
.compat-section h2 {
font-size:27px;
margin:9px 0 15px
}
.compat-section p {
font-size:11px;
max-width:650px;
line-height:1.9
}
.compat-section p.small {
font-size:9px;
margin-top:10px
}
.compat-section .text-link {
white-space:nowrap
}
.faq-section {
display:grid;
grid-template-columns:1fr 1.3fr;
gap:9%;
padding-block:105px
}
.faq-heading h2 {
font-size:45px;
margin-top:20px
}
.faq-heading p {
font-size:11px;
line-height:2;
margin-top:28px
}
.faq-heading a {
text-decoration:underline;
text-underline-offset:4px
}
.faq-list details {
border-bottom:1px solid var(--border)
}
.faq-list details:first-child {
border-top:1px solid var(--border)
}
.faq-list summary {
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:21px 0;
font-size:12px
}
.faq-list summary::-webkit-details-marker {
display:none
}
.faq-list summary>span {
font-size:21px;
line-height:1;
font-weight:400;
transition:transform .2s
}
.faq-list details[open] summary>span {
transform:rotate(45deg)
}
.faq-list details>p {
font-size:11px;
line-height:1.95;
padding:0 25px 23px 0
}
.closing-banner {
position:relative;
overflow:hidden;
background:#e7d5cd;
padding:65px 6.25%;
text-align:center
}
.closing-banner h2 {
font-size:42px;
margin:22px 0 27px
}
.closing-banner h2 em {
font-family:var(--serif);
font-weight:400;
color:#795653
}
html[lang=ar] .closing-banner h2 em {
font-family:inherit;
font-style:normal
}
.closing-banner .button {
min-width:230px
}
.closing-flower {
position:absolute;
font-size:260px;
line-height:1;
inset-inline-end:-30px;
bottom:-30px;
color:#d5b9ae;
transform:rotate(13deg);
pointer-events:none
}
.closing-banner>*:not(.closing-flower) {
position:relative;
z-index:1
}
.site-footer {
padding:70px 6.25% 25px;
background:var(--cream)
}
.footer-top {
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:10%
}
.footer-brand img {
width:130px;
height:52px;
object-fit:contain
}
.footer-tag {
font-size:12px;
margin-top:21px;
color:var(--ink)
}
.footer-top>div>p.muted {
font-size:10px;
margin-top:6px
}
.footer-links {
display:grid;
grid-template-columns:1fr 1fr;
align-content:start;
gap:13px 15px;
padding-top:10px;
font-size:10px
}
.footer-links>a:last-child {
grid-column:1/-1;
margin-top:6px
}
.footer-market>p:first-child {
font-size:10px;
color:var(--ink)
}
.footer-locale {
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
gap:10px;
border-bottom:1px solid #b7a89a;
padding:12px 0;
font-size:12px
}
.footer-markets {
font-size:9px;
letter-spacing:.15em;
margin-top:20px
}
.footer-bottom {
margin-top:57px;
padding-top:23px;
border-top:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
font-size:8px;
color:var(--muted);
gap:20px
}
.payment-wordmarks {
display:flex;
align-items:center;
gap:17px;
color:#625a53;
font-size:11px
}
.payment-wordmarks>span:nth-child(3) {
font-style:italic;
font-weight:600;
font-size:10px
}
.payment-demo {
font-size:8px;
padding:2px 5px;
border:1px solid #cfc1b5;
border-radius:3px
}
.google-g {
font-family:Arial,sans-serif;
color:#4285f4;
font-weight:700
}
.sticky-buy {
display:none
}
.toast {
position:fixed;
bottom:30px;
left:50%;
transform:translate(-50%,25px);
background:var(--ink);
color:#fff;
padding:13px 22px;
border-radius:4px;
z-index:100;
opacity:0;
transition:opacity .2s,transform .2s;
pointer-events:none;
font-size:12px;
box-shadow:0 5px 20px #0001;
max-width:90vw;
text-align:center
}
.toast.visible {
opacity:1;
transform:translate(-50%,0)
}
dialog {
color:var(--ink);
border:0;
padding:0;
border-radius:6px;
box-shadow:0 12px 80px #201a2333
}
dialog::backdrop {
background:#2a221c66;
backdrop-filter:blur(2px)
}
body.modal-open {
overflow:hidden
}
.icon-close {
font-family:Arial,sans-serif;
font-size:29px;
font-weight:300;
line-height:1;
width:42px;
height:42px;
padding:5px;
display:grid;
place-items:center
}
.locale-dialog {
width:min(450px,calc(100% - 32px));
padding:42px
}
.modal-close-form {
position:absolute;
top:8px;
inset-inline-end:8px
}
.locale-dialog h2 {
font-size:29px;
margin:15px 0
}
.locale-dialog p {
font-size:11px
}
.locale-dialog>form:last-child {
margin-top:24px
}
.locale-dialog label {
display:block;
margin-bottom:17px;
font-size:11px
}
.locale-dialog select {
width:100%;
margin-top:5px
}
.locale-dialog .button {
width:100%;
margin-top:4px
}
.bag-dialog {
height:100dvh;
max-height:100dvh;
width:min(480px,100%);
max-width:100%;
margin:0 0 0 auto;
border-radius:0;
display:flex;
flex-direction:column;
padding:0 30px;
inset:0 0 0 auto
}
html[dir=rtl] .bag-dialog {
margin:0 auto 0 0;
inset:0 auto 0 0
}
.bag-dialog:not([open]) {
display:none
}
.bag-heading {
display:flex;
align-items:center;
justify-content:space-between;
min-height:90px;
border-bottom:1px solid var(--border);
flex-shrink:0
}
.bag-heading h2 {
font-size:25px;
letter-spacing:-.03em
}
.bag-heading h2 span {
font-size:12px;
margin-inline-start:8px;
vertical-align:middle
}
.bag-items {
overflow-y:auto;
min-height:0
}
.bag-row {
display:flex;
gap:17px;
border-bottom:1px solid var(--border);
padding:25px 0
}
.bag-row>img {
width:95px;
height:115px;
object-fit:cover;
border-radius:3px
}
.bag-row-content {
flex:1
}
.bag-row h3 {
font-size:15px
}
.bag-color {
font-size:10px;
margin-top:5px
}
.bag-price {
display:block;
font-size:11px;
font-weight:400;
margin-top:7px
}
.bag-row-controls {
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-top:12px
}
.bag-row-controls .quantity-stepper {
height:33px;
min-width:87px
}
.bag-row-controls .quantity-stepper button {
width:28px
}
.bag-qty {
font-size:11px
}
.text-button {
font-size:10px;
text-decoration:underline;
padding:8px 0
}
.bag-totals {
margin-top:auto;
padding:25px 0 30px;
background:var(--paper)
}
.total-line {
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
font-size:12px
}
.total-line strong {
font-weight:600
}
.bag-totals>p {
margin-top:12px;
font-size:10px
}
.bag-totals .button {
display:flex;
width:100%;
margin-top:20px
}
.bag-empty {
text-align:center;
margin:auto 0;
padding:50px 0
}
.empty-flower {
font-size:65px;
color:var(--rose)
}
.bag-empty h3 {
font-size:24px;
margin:24px 0 14px
}
.bag-empty p {
font-size:12px
}
.bag-empty .button {
margin-top:25px
}
.video-dialog {
width:min(900px,calc(100% - 32px));
background:#12100f
}
.video-dialog video {
width:100%;
max-height:85dvh
}
.video-dialog>.icon-close {
position:absolute;
top:8px;
right:8px;
background:#fffefaeb;
z-index:1;
border-radius:50%
}
input,select,textarea {
border:1px solid #d9d1c5;
border-radius:3px;
background:#fffefa;
color:var(--ink);
padding:13px 14px;
min-height:47px;
min-width:0;
font-size:13px
}
textarea {
resize:vertical
}
input:focus,select:focus,textarea:focus {
outline:1px solid var(--rose);
border-color:var(--rose)
}
.checkout-section {
padding-block:40px 90px
}
.back-link {
font-size:10px;
gap:8px
}
.checkout-heading {
margin-top:35px
}
.checkout-heading h1 {
font-size:45px;
margin-top:15px
}
.checkout-heading>p {
font-size:12px;
margin-top:15px
}
.checkout-layout {
display:grid;
grid-template-columns:1.2fr 1fr;
gap:10%;
margin-top:35px;
align-items:start
}
.checkout-form {
min-width:0
}
.demo-notice {
display:flex;
align-items:center;
gap:16px;
background:#eee8da;
padding:17px;
border-radius:4px;
margin-bottom:32px
}
.demo-notice>span {
font-size:28px;
color:#8b7055
}
.demo-notice strong {
font-size:12px;
font-weight:600
}
.demo-notice p {
font-size:10px;
margin-top:3px
}
.checkout-form fieldset {
border:0;
padding:0;
margin:0 0 32px;
min-width:0
}
.checkout-form legend {
font-size:15px;
font-weight:600;
padding:0;
margin-bottom:19px;
display:flex;
align-items:center;
gap:12px
}
.checkout-form legend span {
font-size:10px;
color:var(--rose);
font-weight:400
}
.checkout-form label:not(.payment-method):not(.consent-label) {
display:block;
font-size:11px;
margin-bottom:16px
}
.checkout-form input:not([type=radio]):not([type=checkbox]),.checkout-form select,.checkout-form textarea {
display:block;
width:100%;
margin-top:6px
}
.form-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px
}
.phone-field {
display:flex;
align-items:center;
gap:0;
margin-top:6px;
border:1px solid #d9d1c5;
border-radius:3px;
overflow:hidden
}
.phone-field>span {
padding:0 14px;
border-right:1px solid #e3ddd4;
font-size:12px;
color:var(--muted)
}
.checkout-form .phone-field input {
border:0;
margin-top:0!important;
flex:1
}
.phone-field:focus-within {
outline:1px solid var(--rose)
}
.phone-field input:focus {
outline:0
}
.payment-methods {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px
}
.payment-method {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
border:1px solid var(--border);
border-radius:4px;
min-height:83px;
cursor:pointer;
padding:14px 8px
}
.payment-method:has(:checked) {
border-color:var(--rose);
background:#f3e9e5;
box-shadow:inset 0 0 0 1px var(--rose)
}
.payment-method input {
position:absolute;
top:9px;
left:8px;
appearance:none;
min-height:0;
width:10px;
height:10px;
margin:0;
padding:0;
border-radius:50%;
border:1px solid #ad9f91
}
.payment-method input:checked {
background:var(--rose);
border-color:var(--rose)
}
.payment-label {
font-size:16px;
font-family:Arial,sans-serif
}
.payment-method small {
font-size:9px;
color:var(--muted)
}
.payment-methods+p {
margin-top:12px;
font-size:10px
}
.honeypot {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden
}
.consent-label {
display:flex;
align-items:flex-start;
gap:10px;
font-size:10px;
line-height:1.9;
cursor:pointer
}
.consent-label input {
appearance:auto;
accent-color:var(--rose);
margin:5px 0 0;
width:15px;
height:15px;
min-height:0;
flex-shrink:0
}
.consent-label a {
text-decoration:underline
}
.submit-order {
width:100%;
margin-top:12px
}
.checkout-security {
font-size:9px;
margin-top:12px;
text-align:center
}
.form-error {
font-size:11px;
color:#a2382e;
margin-top:10px
}
.checkout-summary {
background:var(--cream);
border:1px solid var(--border);
padding:30px;
border-radius:4px;
position:sticky;
top:115px;
min-width:0
}
.checkout-summary h2 {
font-size:24px;
letter-spacing:-.03em;
border-bottom:1px solid var(--border);
padding-bottom:20px
}
.checkout-summary .bag-row {
padding-block:20px
}
.checkout-summary .bag-row>img {
width:72px;
height:91px
}
.checkout-summary .bag-row-controls {
margin-top:10px
}
.checkout-summary .bag-row h3 {
font-size:13px
}
.summary-totals {
padding-top:15px
}
.summary-totals .total-line {
margin-top:12px;
font-size:11px
}
.grand-total {
border-top:1px solid var(--border);
margin-top:18px!important;
padding-top:19px;
font-size:17px!important
}
.grand-total strong {
font-weight:400
}
.summary-delivery {
font-size:11px;
margin-top:24px;
color:var(--ink)
}
.summary-delivery>span {
color:var(--rose);
margin-inline-end:7px
}
.summary-delivery+p {
font-size:9px;
margin-top:8px
}
.checkout-empty {
padding:50px 0 20px
}
.checkout-empty h2 {
font-size:30px;
margin-bottom:25px
}
.order-confirmation {
padding-block:70px 90px;
max-width:760px;
text-align:center
}
.confirmation-mark {
display:grid;
place-items:center;
margin:0 auto 30px;
border:1px solid #b7b49b;
background:#eeeee3;
color:#737c57;
border-radius:50%;
width:65px;
height:65px;
font-size:30px
}
.order-confirmation h1 {
font-size:45px;
margin-top:20px
}
.order-confirmation>p {
font-size:12px;
max-width:450px;
margin:20px auto 0
}
.order-card {
background:var(--cream);
text-align:start;
border:1px solid var(--border);
border-radius:4px;
padding:27px;
margin-top:35px
}
.order-card>.total-line {
margin-bottom:15px;
font-size:11px
}
.order-card>.total-line strong {
font-size:12px
}
.order-card .grand-total strong {
font-size:18px
}
.order-product {
display:flex;
gap:15px;
align-items:center;
border-top:1px solid var(--border);
padding:20px 0;
font-size:11px
}
.order-product>img {
width:62px;
height:75px;
object-fit:cover;
border-radius:3px
}
.order-product>div {
flex:1
}
.order-product p {
margin-top:5px;
font-size:10px
}
.demo-pill {
padding:4px 7px;
background:#e9e3d5;
font-size:9px;
border-radius:3px
}
.order-confirmation>.button {
margin-top:25px
}
.order-confirmation>p.small {
font-size:10px
}
.policy-section {
max-width:850px;
padding-block:45px 90px
}
.policy-section>.eyebrow {
margin-top:45px
}
.policy-section h1 {
font-size:49px;
margin:20px 0 35px
}
.policy-section h2 {
font-size:23px;
margin:32px 0 15px;
letter-spacing:-.03em
}
.policy-section p {
font-size:12px;
line-height:2;
margin-top:15px
}
.policy-section p a {
text-decoration:underline;
text-underline-offset:3px
}
.contact-email {
display:inline-block;
font-size:22px;
margin:30px 0 20px;
border-bottom:1px solid var(--ink);
padding-bottom:7px;
direction:ltr
}
.policy-updated {
font-size:10px!important;
border-top:1px solid var(--border);
margin-top:45px!important;
padding-top:20px
}
.error-section {
padding-block:100px;
text-align:center
}
.error-section h1 {
font-size:48px;
margin:22px 0
}
.error-section p {
margin-bottom:30px
}

@media(min-width:1600px) {
.hero-copy {
padding-inline-start:15%
}
.hero-image {
min-height:740px
}
.hero {
min-height:740px
}

}

@media(max-width:1150px) {
.desktop-nav {
gap:22px
}
.hero-copy {
padding-inline:10% 7%
}
.hero h1 {
font-size:4.55vw
}
.hero-ctas {
gap:14px
}
.hero-ctas .button {
padding-inline:17px;
gap:20px
}
.hero-intro {
font-size:11px
}
.hero,.hero-image {
min-height:600px
}
.hero-footnote {
margin-top:40px
}
.section-shell {
padding-inline:5%
}
.product-section {
gap:6%;
padding-block:80px
}
.product-copy h2 {
font-size:42px
}
.product-copy {
padding-top:0
}
.product-subtitle {
font-size:12px
}
.product-meta {
font-size:8px
}
.ritual-image {
min-height:560px
}
.ritual-copy {
padding-inline:10%
}
.ritual-copy h2 {
font-size:39px
}
.section-heading h2 {
font-size:40px
}
.compat-section {
grid-template-columns:auto 1fr;
gap:25px
}
.compat-section>.text-link {
grid-column:2;
justify-self:start;
margin-top:-10px
}
.compat-flower {
grid-row:1/3
}
.faq-heading h2 {
font-size:37px
}
.checkout-layout {
gap:6%
}
.checkout-summary {
padding:24px
}

}

@media(max-width:800px) {
:root {
--header-height:72px
}
.desktop-nav {
gap:17px;
font-size:10px
}
.header-actions {
gap:17px
}
.brand {
flex-basis:96px
}
.brand img {
width:96px
}
.locale-trigger {
font-size:9px
}
.hero,.hero-image {
min-height:530px
}
.hero-copy {
padding:40px 7% 32px 10%
}
.hero h1 {
font-size:4.8vw
}
.hero-intro {
font-size:10px;
margin-top:20px
}
.hero-ctas {
margin-top:24px;
gap:10px
}
.hero-ctas .button {
font-size:10px;
padding:13px 14px;
min-height:48px
}
.watch-button {
font-size:9px
}
.hero-footnote {
font-size:8px;
margin-top:25px
}
.eyebrow {
font-size:8px
}
.hero .eyebrow {
gap:8px
}
.little-line {
width:17px
}
.hero-roundel {
width:91px;
height:91px;
inset-inline-end:20px;
bottom:20px
}
.hero-roundel b {
font-size:33px
}
.hero-roundel span {
font-size:7px
}
.hero-image-label {
inset:18px 18px auto;
padding:9px;
font-size:10px
}
.hero-image-label>span:last-child {
font-size:6px
}
.benefit-strip {
padding-inline:4%;
padding-block:24px
}
.benefit-strip>div {
gap:10px
}
.benefit-strip strong {
font-size:9px
}
.benefit-strip div div>span {
font-size:7px
}
.benefit-icon {
font-size:22px
}
.product-section {
gap:5%;
padding-block:65px
}
.price-row {
gap:9px;
margin-top:18px
}
.price-row>strong {
font-size:19px
}
.price-row del {
font-size:10px
}
.save-badge {
font-size:8px
}
.fine-rule {
margin-block:18px
}
.product-copy h2 {
font-size:36px
}
.product-subtitle {
font-size:10px;
margin-top:10px
}
.product-copy .eyebrow {
font-size:8px
}
.product-delivery {
padding:10px;
gap:8px
}
.product-delivery strong {
font-size:9px
}
.product-delivery p {
font-size:8px
}
.product-points {
margin-block:16px
}
.product-points li {
font-size:9px
}
.product-meta {
font-size:7px
}
.purchase-row .button {
padding-inline:13px;
font-size:10px;
gap:15px
}
.product-quantity {
flex-basis:85px;
min-width:85px
}
.gallery-thumbs button {
width:57px;
height:57px
}
.gallery-thumbs {
gap:7px
}
.ritual-image {
min-height:500px
}
.ritual-copy {
padding:55px 10%
}
.ritual-copy h2 {
font-size:33px
}
.ritual-copy>p {
font-size:10px
}
.ritual-detail {
margin-block:25px
}
.section-heading h2 {
font-size:36px
}
.section-heading>p {
font-size:10px
}
.how-section {
padding-block:75px
}
.steps-grid {
gap:18px
}
.step h3 {
font-size:15px
}
.step>p {
font-size:10px
}
.compat-section h2 {
font-size:24px
}
.compat-section p {
font-size:10px
}
.compat-section {
gap:20px
}
.compat-flower {
font-size:53px
}
.faq-section {
padding-block:75px;
gap:7%;
grid-template-columns:1fr 1.4fr
}
.faq-heading h2 {
font-size:32px
}
.faq-list summary {
font-size:10px;
padding-block:18px
}
.faq-list details>p {
font-size:10px
}
.closing-banner h2 {
font-size:34px
}
.site-footer {
padding-block:50px 25px
}
.footer-top {
gap:5%
}
.footer-tag {
font-size:10px
}
.footer-links {
font-size:9px
}
.footer-locale {
font-size:10px
}
.checkout-layout {
grid-template-columns:1.1fr 1fr;
gap:5%
}
.checkout-summary {
padding:20px
}
.checkout-summary .bag-row {
gap:10px
}
.checkout-summary .bag-row>img {
width:55px;
height:75px
}
.checkout-summary .bag-row-controls {
flex-wrap:wrap;
gap:3px
}
.checkout-summary h2 {
font-size:21px
}
.payment-methods {
gap:6px
}
.payment-label {
font-size:13px
}

}

@media(max-width:640px) {
:root {
--header-height:67px
}
html {
scroll-padding-top:85px
}
body {
font-size:13px
}
.announcement {
font-size:9px;
min-height:31px;
gap:13px;
padding-block:6px
}
.site-header {
padding-inline:20px;
height:67px;
gap:12px
}
.brand {
flex-basis:91px
}
.brand img {
width:91px;
height:39px
}
.desktop-nav {
display:none
}
.header-actions {
gap:19px
}
.locale-trigger {
font-size:9px;
gap:6px;
min-height:44px
}
.locale-trigger>span:first-child {
font-size:16px
}
.bag-trigger svg {
width:21px;
height:24px
}
.bag-count {
font-size:10px
}
.hero {
display:flex;
flex-direction:column;
min-height:0
}
.hero-copy {
padding:36px 24px 30px;
align-items:flex-start
}
.hero .eyebrow {
font-size:8px;
gap:10px
}
.hero h1 {
font-size:clamp(38px,9.6vw,58px);
margin-top:20px;
letter-spacing:-.06em;
line-height:1.09;
white-space:normal
}
.hero h1 em {
letter-spacing:-.045em
}
.hero-intro {
font-size:11px;
line-height:1.9;
max-width:380px;
margin-top:19px
}
.hero-ctas {
margin-top:24px;
width:100%;
gap:20px
}
.hero-ctas .button {
font-size:11px;
min-height:50px;
padding-inline:20px;
gap:28px
}
.watch-button {
font-size:10px;
gap:8px
}
.play-icon {
width:29px;
height:29px;
font-size:8px
}
.hero-footnote {
display:none
}
.hero-image {
width:100%;
min-height:0;
height:385px
}
.hero-image>img {
object-position:center 47%
}
.hero-image-label {
inset:18px 20px auto;
max-width:260px;
font-size:10px
}
.hero-image-label>span:last-child {
font-size:6px
}
.hero-roundel {
width:85px;
height:85px;
bottom:18px;
inset-inline-end:20px
}
.hero-roundel b {
font-size:31px
}
.hero-roundel span {
font-size:6px
}
.benefit-strip {
padding:22px 16px;
gap:11px;
grid-template-columns:1fr 1fr
}
.benefit-strip>div {
justify-content:flex-start;
gap:9px
}
.benefit-strip>div:nth-child(2) {
padding-inline-start:13px
}
.benefit-strip>div:last-child {
display:none
}
.benefit-strip strong {
font-size:9px
}
.benefit-strip div div>span {
font-size:7px;
margin-top:3px
}
.benefit-icon {
font-size:23px
}
.nfc-icon {
font-size:29px
}
.section-shell {
padding-inline:22px
}
.product-section {
display:flex;
flex-direction:column;
padding-block:47px 55px;
gap:32px
}
.main-product-image {
border-radius:4px
}
.gallery-thumbs {
gap:9px;
margin-top:10px
}
.gallery-thumbs button {
width:56px;
height:56px;
padding:2px
}
.image-label {
inset:14px auto auto 14px;
font-size:6px;
padding:5px 7px
}
.gallery-video {
font-size:8px;
bottom:13px;
inset-inline-start:13px
}
.gallery-arrow {
width:30px;
height:30px
}
.product-copy {
width:100%;
padding:0
}
.product-copy .eyebrow {
font-size:9px
}
.product-copy h2 {
font-size:42px;
margin-top:13px
}
.product-subtitle {
font-size:12px;
line-height:1.9;
max-width:340px;
margin-top:12px
}
.price-row {
margin-top:20px;
gap:13px
}
.price-row>strong {
font-size:23px
}
.price-row del {
font-size:12px
}
.save-badge {
font-size:9px
}
.fine-rule {
margin-block:24px 20px
}
.color-label {
font-size:11px
}
.swatches {
margin-top:13px
}
.swatch {
width:39px;
height:39px
}
.availability {
font-size:10px;
min-height:27px
}
.product-quantity {
flex-basis:100px;
min-width:100px;
height:54px
}
.purchase-row .button {
font-size:11px;
padding-inline:21px;
gap:20px;
min-height:54px
}
.product-delivery {
margin-top:19px;
padding:14px;
gap:12px
}
.product-delivery strong {
font-size:11px
}
.product-delivery p {
font-size:9px;
line-height:1.8;
margin-top:3px
}
.product-points {
margin:21px 0
}
.product-points li {
font-size:10px;
margin-top:10px
}
.product-meta {
font-size:8px;
padding-top:18px
}
.ritual-section {
display:flex;
flex-direction:column
}
.ritual-image {
min-height:0;
height:430px
}
.ritual-image img {
object-position:center 34%
}
.photo-note {
font-size:7px;
inset-inline-start:22px;
bottom:20px;
padding:6px 9px
}
.ritual-copy {
padding:43px 28px 48px;
align-items:flex-start
}
.ritual-copy h2 {
font-size:38px;
margin-top:20px
}
.ritual-copy>p {
font-size:11px;
line-height:1.95;
max-width:370px;
margin-top:21px
}
.ritual-detail {
margin-block:25px 27px;
gap:16px
}
.ritual-orbit {
font-size:40px
}
.ritual-detail>span:last-child {
font-size:9px
}
.text-link {
font-size:11px
}
.how-section {
padding-block:52px 58px
}
.section-heading {
display:block;
margin-bottom:29px
}
.section-heading h2 {
font-size:36px;
margin-top:17px
}
.section-heading>p {
font-size:11px;
margin-top:16px
}
.steps-grid {
display:flex;
flex-direction:column;
gap:32px
}
.step-image {
aspect-ratio:1.1
}
.step h3 {
font-size:19px;
margin-top:19px
}
.step>p {
font-size:11px;
line-height:1.9;
margin-top:10px;
max-width:none
}
.step-number {
width:28px;
height:28px;
font-size:9px;
top:13px;
inset-inline-start:13px
}
.compat-section {
display:flex;
flex-direction:column;
gap:20px;
align-items:flex-start;
padding-block:35px
}
.compat-flower {
font-size:45px
}
.compat-section h2 {
font-size:27px;
margin:14px 0
}
.compat-section p {
font-size:11px;
line-height:1.95
}
.compat-section p.small {
font-size:9px;
margin-top:12px
}
.compat-section>.text-link {
margin-top:0
}
.faq-section {
display:block;
padding-block:52px 55px
}
.faq-heading h2 {
font-size:36px;
margin-top:18px
}
.faq-heading p {
font-size:11px;
margin-top:18px
}
.faq-list {
margin-top:30px
}
.faq-list summary {
font-size:11px;
padding-block:21px;
gap:20px
}
.faq-list details>p {
font-size:10px;
padding:0 10px 22px 0
}
.closing-banner {
padding:47px 24px
}
.closing-banner .eyebrow {
font-size:8px
}
.closing-banner h2 {
font-size:34px;
line-height:1.2;
max-width:330px;
margin:21px auto 25px
}
.closing-banner h2 em {
display:block
}
.closing-banner .button {
min-width:220px;
font-size:11px
}
.closing-flower {
font-size:190px;
inset-inline-end:-80px;
bottom:-20px
}
.site-footer {
padding:43px 24px 100px
}
.footer-top {
grid-template-columns:1fr 1fr;
gap:32px 24px
}
.footer-top>div:first-child {
grid-column:1/-1
}
.footer-brand img {
width:111px;
height:44px
}
.footer-tag {
font-size:11px;
margin-top:16px
}
.footer-top>div>p.muted {
font-size:10px
}
.footer-links {
display:flex;
flex-direction:column;
gap:12px;
padding-top:0;
font-size:10px
}
.footer-links>a:last-child {
font-size:9px;
grid-column:auto;
margin-top:5px;
overflow-wrap:anywhere
}
.footer-market>p:first-child {
font-size:10px
}
.footer-locale {
font-size:10px;
padding-block:10px
}
.footer-markets {
font-size:8px;
margin-top:16px
}
.footer-bottom {
margin-top:32px;
padding-top:20px;
flex-direction:column;
align-items:flex-start;
gap:18px;
font-size:8px
}
.payment-wordmarks {
font-size:12px;
gap:20px
}
.sticky-buy {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
position:fixed;
bottom:0;
left:0;
right:0;
background:#fffefaf5;
padding:11px 20px max(11px,env(safe-area-inset-bottom));
border-top:1px solid var(--border);
z-index:25;
transform:translateY(110%);
transition:transform .25s;
backdrop-filter:blur(8px)
}
.sticky-buy.visible {
transform:translateY(0)
}
.sticky-buy>div {
display:flex;
flex-direction:column;
gap:3px;
font-size:13px;
min-width:85px
}
.sticky-buy>div>strong {
font-weight:600
}
.sticky-buy>div>span {
font-size:10px
}
.sticky-buy .button {
min-height:46px;
font-size:10px;
padding:12px 18px;
gap:30px;
min-width:185px
}
.toast {
bottom:90px;
font-size:11px
}
.locale-dialog {
padding:36px 27px 28px
}
.locale-dialog h2 {
font-size:29px
}
.locale-dialog>.eyebrow {
font-size:8px
}
.bag-dialog {
padding-inline:22px
}
.bag-heading {
min-height:79px
}
.bag-heading h2 {
font-size:24px
}
.bag-row>img {
width:80px;
height:105px
}
.bag-row {
gap:15px
}
.bag-totals {
padding-bottom:max(25px,env(safe-area-inset-bottom))
}
.bag-empty h3 {
font-size:26px
}
.checkout-section {
padding-block:28px 55px
}
.checkout-heading {
margin-top:27px
}
.checkout-heading h1 {
font-size:35px;
margin-top:13px
}
.checkout-heading>p {
font-size:11px;
margin-top:15px
}
.checkout-layout {
display:flex;
flex-direction:column-reverse;
gap:28px;
margin-top:27px
}
.checkout-form,.checkout-summary {
width:100%
}
.checkout-summary {
position:static;
padding:23px;
border-radius:4px
}
.checkout-summary h2 {
font-size:22px;
padding-bottom:16px
}
.checkout-summary .bag-row {
padding-block:18px;
gap:14px
}
.checkout-summary .bag-row>img {
width:65px;
height:80px
}
.checkout-summary .bag-row h3 {
font-size:13px
}
.checkout-summary .bag-row-controls {
flex-wrap:nowrap;
gap:10px
}
.summary-totals {
padding-top:6px
}
.summary-totals .total-line {
font-size:11px
}
.grand-total {
font-size:18px!important;
margin-top:16px!important;
padding-top:16px
}
.summary-delivery {
font-size:11px;
margin-top:20px
}
.summary-delivery+p {
font-size:9px
}
.demo-notice {
margin-bottom:28px;
padding:16px;
gap:12px
}
.demo-notice p {
font-size:10px
}
.checkout-form label:not(.payment-method):not(.consent-label) {
font-size:11px;
margin-bottom:17px
}
.checkout-form input:not([type=radio]):not([type=checkbox]),.checkout-form select,.checkout-form textarea {
font-size:16px;
min-height:50px
}
.form-grid {
gap:12px;
grid-template-columns:1fr 1fr
}
.payment-methods {
gap:9px
}
.payment-method {
min-height:83px
}
.payment-label {
font-size:16px
}
.payment-method small {
font-size:9px
}
.payment-method input {
min-height:0
}
.consent-label {
font-size:10px
}
.submit-order {
min-height:55px;
font-size:12px;
margin-top:14px
}
.checkout-security {
font-size:9px
}
.order-confirmation {
padding-block:45px 60px
}
.order-confirmation h1 {
font-size:35px
}
.order-confirmation>p {
font-size:11px
}
.order-card {
padding:20px;
margin-top:28px
}
.order-card .total-line {
font-size:10px;
align-items:flex-start;
gap:10px
}
.order-card .total-line strong {
font-size:10px
}
.order-card .grand-total strong {
font-size:18px
}
.demo-pill {
font-size:8px
}
.order-product {
gap:12px
}
.order-product>img {
width:57px;
height:70px
}
.policy-section {
padding-block:28px 55px
}
.policy-section>.eyebrow {
margin-top:32px
}
.policy-section h1 {
font-size:36px;
margin:20px 0 28px
}
.policy-section h2 {
font-size:24px;
margin-top:27px
}
.policy-section p {
font-size:11px;
line-height:2
}
.contact-email {
font-size:17px
}
.error-section {
padding-block:70px
}
.error-section h1 {
font-size:35px
}
.error-section p {
font-size:12px
}
html[lang=ar] .hero-copy {
padding-top:30px;
padding-bottom:28px
}
html[lang=ar] .hero h1 {
font-size:clamp(34px,9vw,51px);
line-height:1.4
}
html[lang=ar] .hero-intro {
font-size:13px;
line-height:1.95;
margin-top:14px
}
html[lang=ar] .hero-ctas .button {
font-size:12px
}
html[lang=ar] .watch-button {
font-size:11px
}
html[lang=ar] .product-subtitle {
font-size:13px
}
html[lang=ar] .product-copy h2 {
font-family:Poppins,Arial,sans-serif
}
html[lang=ar] .product-points li {
font-size:12px
}
html[lang=ar] .product-delivery strong {
font-size:12px
}
html[lang=ar] .product-delivery p {
font-size:10px
}
html[lang=ar] .product-meta {
font-size:9px
}
html[lang=ar] .ritual-copy h2 {
font-size:35px
}
html[lang=ar] .ritual-copy>p {
font-size:13px
}
html[lang=ar] .step h3 {
font-size:20px
}
html[lang=ar] .step>p {
font-size:12px
}
html[lang=ar] .faq-list summary {
font-size:13px
}
html[lang=ar] .faq-list details>p {
font-size:12px
}
html[lang=ar] .compat-section p {
font-size:12px
}
html[lang=ar] .compat-section p.small {
font-size:10px
}
html[lang=ar] .closing-banner h2 {
font-size:30px
}
html[lang=ar] .checkout-heading h1 {
font-size:29px
}
html[lang=ar] .policy-section p {
font-size:13px
}
html[lang=ar] .hero .eyebrow {
font-size:10px
}

}

@media(max-width:360px) {
.site-header {
padding-inline:16px
}
.hero-copy {
padding-inline:20px
}
.hero h1 {
font-size:37px
}
.hero-ctas {
gap:13px
}
.hero-ctas .button {
padding-inline:17px;
gap:20px
}
.watch-button {
font-size:9px
}
.hero-image {
height:335px
}
.section-shell {
padding-inline:18px
}
.sticky-buy {
padding-inline:15px
}
.sticky-buy .button {
min-width:166px;
gap:20px
}
.bag-dialog {
padding-inline:18px
}
.price-row>strong {
font-size:21px
}
.locale-text {
font-size:8px
}
.footer-top {
gap:30px 18px
}
.payment-label {
font-size:14px
}
.product-meta {
font-size:7px
}
html[lang=ar] .hero h1 {
font-size:32px
}

}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
* {
transition:none!important;
animation:none!important
}

}

/* Comfortable reading sizes for the shopping and checkout decisions. */
.hero-intro,.ritual-copy>p {
font-size:14px;
line-height:1.85
}
.product-subtitle {
font-size:14px
}
.product-points li {
font-size:13px
}
.step>p,.compat-section p,.faq-list details>p {
font-size:13px
}
.faq-list summary {
font-size:14px
}
.product-delivery p {
font-size:11px
}
.product-delivery strong {
font-size:13px
}
.bag-price {
direction:ltr
}
.checkout-form label:not(.payment-method):not(.consent-label) {
font-size:12px
}
.checkout-form legend {
font-size:16px
}
.policy-section p {
font-size:14px
}

@media(min-width:641px) and (max-width:900px) {
.hero-intro {
font-size:11px
}
.product-subtitle {
font-size:12px
}
.product-points li {
font-size:10px
}
.product-delivery p {
font-size:9px
}
.product-delivery strong {
font-size:10px
}

}

@media(max-width:640px) {
.hero-intro,.ritual-copy>p {
font-size:13px;
line-height:1.85
}
.product-subtitle {
font-size:13px
}
.product-points li {
font-size:12px
}
.step>p,.compat-section p,.faq-list details>p {
font-size:12px
}
.faq-list summary {
font-size:13px
}
.product-delivery p {
font-size:10px
}
.product-delivery strong {
font-size:12px
}
.policy-section p {
font-size:13px
}

}

/* Keep the Arabic explanations in live text; frame the source artwork around the product. */
html[lang=ar] .step-image img {height:235%;transform:translateY(-35%);object-fit:cover;object-position:center;}