:root{color-scheme:light;--brand:#d91f59;--brand-bright:#ff3f78;--brand-soft:#fff0f4;--ink:#171217;--muted:#70666c;--line:#eee7eb;--surface:#fff;--soft:#faf8fa;--radius:18px;--shadow:0 14px 40px #5423380d;--font:Arial,"Segoe UI",system-ui,sans-serif;--display:Georgia,"Times New Roman",serif;--page-width:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--surface);color:var(--ink);font:15px/1.5 var(--font)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}img{max-width:100%;display:block}button{color:inherit}input,select,textarea{min-width:0}h1,h2,h3,p{margin-top:0}h1{line-height:1.1}h2{font-size:27px;line-height:1.2;letter-spacing:-.7px}h3{font-size:18px}p{color:var(--muted)}.container{width:min(calc(100% - 64px),var(--page-width));margin-inline:auto}.section{margin-block:42px}.icon{width:23px;height:23px;flex:0 0 auto;vertical-align:middle}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;inset-block-start:-100px;inset-inline-start:20px;z-index:100;background:var(--ink);color:white;padding:12px;border-radius:10px}.skip:focus{inset-block-start:12px}:focus-visible{outline:3px solid var(--brand);outline-offset:4px}.preview-label{text-align:center;background:var(--brand-soft);color:var(--brand);font-size:11px;padding:6px 14px}.announcement{background:var(--ink);color:#fff;padding:9px 16px;text-align:center;font-size:12px}.site-header{background:var(--surface);border-bottom:1px solid var(--line)}.header-main{height:88px;display:flex;align-items:center;gap:34px}.logo{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}.logo-type{font-family:var(--display);font-size:32px;letter-spacing:-1.1px;line-height:1.1;white-space:nowrap}.logo-type>span{color:var(--brand-bright)}.logo-type small{display:block;text-align:center;font:7px/1.5 var(--font);letter-spacing:4.2px;color:var(--muted);margin-top:6px}.logo-image{max-width:210px;max-height:55px;object-fit:contain}.flower{display:block;width:40px;height:44px;position:relative}.flower i{position:absolute;inset-inline-start:13px;inset-block-start:4px;width:15px;height:32px;border-radius:90% 15% 90% 15%;background:linear-gradient(var(--brand-bright),var(--brand));transform-origin:bottom}.flower i:first-child{transform:rotate(-36deg)}.flower i:nth-child(2){inset-block-start:0}.flower i:last-child{transform:rotate(40deg)}.search{height:46px;display:flex;border:1px solid var(--line);background:var(--soft);border-radius:99px;overflow:hidden;flex:1}.search input{border:0;background:transparent;outline:0;padding-inline:20px;width:100%;color:var(--ink)}.search:focus-within{box-shadow:0 0 0 3px var(--brand-soft);border-color:var(--brand)}.search button{border:0;background:var(--brand);color:white;min-width:48px;display:grid;place-items:center}.header-actions{display:flex;align-items:center;gap:24px;margin-inline-start:auto}.header-action{display:flex;flex-direction:column;align-items:center;font-size:11px;gap:5px;position:relative;min-width:44px;min-height:44px;justify-content:center}.header-action b{position:absolute;inset-block-start:-5px;inset-inline-end:2px;background:var(--brand);color:white;font-size:10px;border-radius:99px;min-width:18px;height:18px;text-align:center;padding-inline:4px;line-height:18px}.lang-button{border:1px solid var(--line);border-radius:10px;background:white;padding:8px;font-size:11px;min-height:40px}.main-nav{display:flex;gap:25px;align-items:center;height:46px;overflow-x:auto;scrollbar-width:none;font-size:12px;white-space:nowrap}.main-nav a{padding-block:14px}.main-nav a:hover,.main-nav a[aria-current=page]{color:var(--brand)}.mobile-menu,.mobile-search,.bottom-nav{display:none}.icon-button{border:1px solid var(--line);background:white;display:grid;place-items:center;border-radius:50%;width:44px;height:44px}
.hero{margin-block-start:22px;height:405px;border-radius:25px;overflow:hidden;position:relative;background:var(--brand-soft);box-shadow:var(--shadow)}.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#fff0f4 0%,#fff0f4f2 25%,#fff0f4d9 36%,#fff0f450 52%,#fff0f400 68%)}.hero-shade:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:46%;backdrop-filter:blur(6px);mask-image:linear-gradient(90deg,#000 45%,transparent)}.hero-copy{position:relative;padding:54px 46px;width:49%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.eyebrow{font-size:10px;letter-spacing:3.5px;color:var(--muted);display:block;margin-bottom:12px}.hero h1{font:normal clamp(36px,4.1vw,60px)/1.04 var(--display);letter-spacing:-1.5px;margin-bottom:22px}.hero h1 strong{display:block;font-weight:normal;color:var(--brand)}.hero p{font-size:15px;line-height:1.65;max-width:380px;color:var(--ink);margin-bottom:25px}.button{border:0;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--brand);color:white;min-height:46px;padding:12px 23px;font-weight:600;font-size:13px;transition:background .15s,transform .15s;box-shadow:0 7px 18px #d91f5915}.button:hover{background:var(--ink);transform:translateY(-1px)}.button .icon{width:18px;height:18px}.button.small{min-height:40px;padding:9px 12px;font-size:12px;width:100%;gap:8px}.button.secondary{background:white;color:var(--ink);border:1px solid var(--line);box-shadow:none}.category-section{position:relative;margin-block:28px;padding-inline:24px}.category-strip{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-block:4px 10px}.category-strip::-webkit-scrollbar{display:none}.category{flex:0 0 calc((100% - 162px)/10);min-width:89px;text-align:center;scroll-snap-align:start}.category>span{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);padding:3px;background:white;transition:transform .15s}.category img{width:100%;height:100%;border-radius:50%;object-fit:cover}.category:hover>span{transform:translateY(-3px)}.category b{font-size:10px;display:block;margin-block-start:10px;white-space:nowrap}.category-arrow{position:absolute;inset-block-start:calc(50% - 35px);border:1px solid var(--line);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;background:white;box-shadow:var(--shadow);z-index:1}.category-arrow.previous{inset-inline-start:-8px}.category-arrow.next{inset-inline-end:-8px}.category-arrow .icon{width:18px;height:18px}.category-arrow:disabled{visibility:hidden}.promo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.promo{position:relative;aspect-ratio:2/1;border-radius:var(--radius);overflow:hidden;background:var(--soft)}.promo>img{width:100%;height:100%;object-fit:cover}.explore{position:absolute;inset-inline-start:20px;inset-block-end:17px;min-height:40px;border-radius:99px;display:inline-flex;align-items:center;gap:15px;background:white;color:var(--ink);font-size:12px;font-weight:600;padding:10px 18px;box-shadow:var(--shadow)}.explore .icon{width:17px;height:17px}.explore:hover{background:var(--brand);color:white}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.section-heading h2{margin:0}.title-line{display:block;width:42px;height:3px;border-radius:3px;background:var(--brand);margin-top:10px}.text-link{font-size:12px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:8px}.text-link .icon{width:17px;height:17px}.product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.product-card{border:1px solid var(--line);border-radius:15px;background:white;overflow:hidden;min-width:0;transition:box-shadow .15s,transform .15s}.product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.product-photo{height:210px;position:relative;padding:24px 18px 10px}.product-photo>a{display:block;height:100%}.product-photo img{height:100%;width:100%;object-fit:contain}.wish{position:absolute;inset-block-start:9px;inset-inline-end:8px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffffed;display:grid;place-items:center;z-index:1}.wish .icon{width:19px;height:19px}.wish[aria-pressed=true]{color:var(--brand)}.wish[aria-pressed=true] svg{fill:var(--brand-soft)}.product-info{padding:12px;display:flex;flex-direction:column;gap:7px}.brand-name{font-size:10px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--muted);min-height:26px}.product-name{font-size:12px;line-height:1.45;min-height:36px}.product-price{font-size:15px;font-weight:700;direction:ltr;text-align:start;margin-bottom:5px;color:var(--brand)}.brands-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:thin}.brands-strip a{min-width:155px;flex:1;border:1px solid var(--line);border-radius:12px;padding:24px 14px;text-align:center;white-space:nowrap;font:bold 15px var(--display)}.brands-strip a:hover{border-color:var(--brand)}.shopping-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block:55px}.shopping-notes>div{padding:24px;border:1px solid var(--line);border-radius:15px;background:var(--brand-soft)}.shopping-notes .icon{color:var(--brand);margin-bottom:12px}.shopping-notes h2{font-size:16px;letter-spacing:0;margin-bottom:8px}.shopping-notes p{font-size:12px;margin:0}.site-footer{border-top:1px solid var(--line);background:var(--soft);padding-block:45px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1.3fr;gap:45px}.footer-grid h2{font-size:13px;letter-spacing:0;margin-bottom:16px}.footer-grid>div>a:not(.logo){display:block;margin-block:9px;font-size:12px;color:var(--muted)}.footer-grid p{font-size:12px;max-width:280px;line-height:1.7;margin-block:18px}.footer-grid .logo-type{font-size:25px}.footer-grid .flower{transform:scale(.8);transform-origin:top}.footer-bottom{border-top:1px solid var(--line);margin-block-start:30px;padding-block:18px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}.creator-credit{text-align:center;padding:14px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}.creator-credit a{color:var(--brand)}.creator-credit small{margin-inline-start:7px;font-size:10px}.page-heading{margin-bottom:32px}.page-heading h1{font-size:38px;margin-bottom:12px;letter-spacing:-1px}.page-heading p{font-size:14px}.catalog-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}input,select,textarea{width:100%;min-height:44px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink)}textarea{min-height:95px;resize:vertical}.result-count{font-size:12px;margin-block:20px}.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-grid .product-photo{height:260px}.empty-state{grid-column:1/-1;padding:40px 24px;text-align:center;border:1px dashed var(--line);border-radius:15px}.empty-state p{margin:0}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-bottom:30px}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:65px}.product-gallery{min-width:0}.detail-photo{width:100%;height:480px;object-fit:contain;border:1px solid var(--line);border-radius:20px;padding:35px}.gallery-thumbs{display:flex;gap:12px;margin-top:15px;overflow-x:auto}.thumbnail{width:70px;height:70px;padding:7px;background:white;border:1px solid var(--line);border-radius:10px}.thumbnail img{height:100%;width:100%;object-fit:contain}.detail-info{padding-block:22px}.detail-info h1{font-family:var(--display);font-size:40px;font-weight:normal;letter-spacing:-1px;margin-bottom:20px}.detail-price{font-size:27px;color:var(--brand);font-weight:700}.stock-label{font-size:12px}.detail-description{font-size:14px;line-height:1.8;white-space:pre-line}.detail-actions{display:flex;align-items:end;gap:15px;margin-block:20px 25px}.quantity-label{width:90px}.detail-actions .button{flex:1}.cart-layout,.checkout-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:32px}.cart-row{display:grid;grid-template-columns:90px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}.cart-row img{width:90px;height:100px;object-fit:contain}.cart-row h2{font-size:15px;letter-spacing:0;margin-bottom:6px}.cart-row p{font-size:12px;margin-bottom:8px}.cart-quantity{display:flex;align-items:center;gap:6px}.cart-quantity button{width:36px;height:36px;background:white;border:1px solid var(--line);border-radius:8px}.remove-button{font-size:11px;border:0;background:white;color:var(--brand);padding:8px 0}.cart-summary,.panel{border:1px solid var(--line);border-radius:18px;padding:25px;background:var(--soft);height:fit-content}.cart-summary h2{font-size:20px;letter-spacing:0}.summary-row{display:flex;justify-content:space-between;gap:15px;margin-block:12px;font-size:13px}.summary-total{padding-block-start:16px;border-top:1px solid var(--line);font-weight:700;font-size:18px}.cart-summary .button{width:100%;margin-block-start:16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wide{grid-column:1/-1}.narrow{max-width:700px}.form-error{color:var(--brand);font-size:12px;margin:0}.honeypot{position:absolute;inset-inline-start:-10000px}.muted{color:var(--muted);font-size:12px}.brands-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.brands-list a{border:1px solid var(--line);border-radius:15px;padding:25px;display:flex;justify-content:space-between;align-items:center;font:20px var(--display)}.toast{position:fixed;inset-block-end:30px;inset-inline-start:50%;transform:translate(-50%,15px);padding:13px 22px;background:var(--ink);color:white;box-shadow:var(--shadow);border-radius:99px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--line);border-radius:18px;padding:24px;max-width:calc(100vw - 30px)}dialog::backdrop{background:#17121766}#mobile-drawer{margin:0;height:100dvh;max-height:none;width:320px;border-radius:0;border:0;inset-inline-end:auto;inset-inline-start:0}#mobile-drawer .drawer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}#mobile-drawer nav{display:flex;flex-direction:column}#mobile-drawer nav a{padding:14px 0;border-bottom:1px solid var(--line)}.success-panel{margin-block:25px;background:var(--brand-soft);border-radius:15px;padding:25px}.success-panel h2{font-size:20px}
/* Dashboard is deliberately neutral: the shop owner works in black and white, the storefront keeps the brand. */
.admin-body{--brand:#141414;--brand-bright:#141414;--brand-soft:#f1f1f1;--ink:#141414;--muted:#6b6b6b;--line:#e2e2e2;--soft:#fafafa;--shadow:0 10px 30px #0000000f;background:var(--soft)}.admin-body .flower i{background:#141414}.admin-body .logo-type>span{color:inherit}.admin-body .button:hover{background:#3a3a3a}.admin-body .admin-tab.active{background:var(--brand-soft);color:var(--ink);font-weight:600}.admin-body .admin-error,.admin-body .form-error{color:#b3261e}.admin-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100dvh}.admin-sidebar{background:white;border-inline-end:1px solid var(--line);padding:28px 20px;position:sticky;inset-block-start:0;height:100dvh;display:flex;flex-direction:column}.admin-sidebar .logo-type{font-size:24px}.admin-sidebar .flower{width:30px;transform:scale(.75);transform-origin:center}.admin-sidebar nav{display:flex;flex-direction:column;gap:6px;margin-block:35px}.admin-tab{padding:12px 14px;background:white;border:0;border-radius:10px;text-align:start;font-size:13px;display:flex;align-items:center;gap:11px}.admin-tab.active{background:var(--brand-soft);color:var(--brand);font-weight:600}.admin-sidebar .view-shop{margin-block-start:auto;font-size:12px;color:var(--muted)}.admin-main{padding:35px;min-width:0;max-width:1500px}.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:15px}.admin-top h1{font-size:26px;margin:0}.admin-top p{font-size:12px;margin:5px 0 0}.admin-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:25px}.metric{padding:24px;border:1px solid var(--line);background:white;border-radius:15px}.metric span{color:var(--muted);font-size:12px;display:block}.metric b{display:block;font-size:30px;margin-block-start:8px}.admin-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr);gap:24px;align-items:start}.admin-panel{background:white;border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}.admin-panel h2{font-size:19px;letter-spacing:0}.admin-panel .form-grid{gap:15px}.admin-product-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}.admin-product{display:grid;grid-template-columns:55px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);padding:12px;border-radius:12px}.admin-product img{width:55px;height:65px;object-fit:contain}.admin-product b{font-size:12px;display:block}.admin-product small{font-size:11px;color:var(--muted)}.edit-button{border:1px solid var(--line);border-radius:8px;background:white;padding:8px 10px;font-size:11px}.check-label{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:44px}.check-label input{width:17px;min-height:17px}.upload-zone{border:1px dashed var(--line);background:var(--soft);border-radius:12px;padding:18px;text-align:center}.upload-zone input{padding:8px;background:white;font-size:11px}.upload-zone p{font-size:11px;margin-block:8px}.admin-image-preview{width:100%;height:130px;object-fit:contain;margin-bottom:12px}.admin-alert{padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--brand-soft);font-size:12px;margin-bottom:25px;color:var(--ink)}.admin-error{color:var(--brand);font-size:12px;margin-block:15px}.admin-login{width:min(calc(100% - 32px),420px);margin:80px auto;background:white;padding:32px;border:1px solid var(--line);border-radius:20px}.admin-login .logo{margin-bottom:28px}.admin-login h1{font-size:25px}.admin-login form{display:flex;flex-direction:column;gap:17px}.admin-order{border:1px solid var(--line);border-radius:12px;padding:18px;margin-block:12px}.admin-order header{display:flex;justify-content:space-between;gap:15px;margin-bottom:15px}.admin-order p{font-size:12px}.admin-order select{width:100%;margin-top:10px}.variants-editor{display:flex;flex-direction:column;gap:12px}.variant-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:8px}.variant-row input{font-size:11px}.admin-section-help{font-size:12px;color:var(--muted);margin-bottom:22px}
[dir=rtl] .hero-shade{background:linear-gradient(270deg,#fff0f4 0%,#fff0f4f2 25%,#fff0f4d9 36%,#fff0f450 52%,#fff0f400 68%)}[dir=rtl] .hero-shade:before{mask-image:linear-gradient(270deg,#000 45%,transparent)}[dir=rtl] .eyebrow{letter-spacing:0}[dir=rtl] .hero h1{line-height:1.35}[dir=rtl] .hero .icon,[dir=rtl] .text-link .icon,[dir=rtl] .explore .icon{transform:scaleX(-1)}
@media(min-width:1450px){.hero{height:435px}.product-photo{height:235px}}
@media(max-width:1100px){.container{width:calc(100% - 40px)}.header-main{gap:22px}.logo-type{font-size:28px}.header-actions{gap:12px}.main-nav{gap:20px}.hero-copy{width:52%;padding:40px 35px}.hero h1{font-size:48px}.category{min-width:90px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-photo{height:250px}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-grid{gap:25px}.admin-main{padding:25px}.admin-workspace{grid-template-columns:1fr}.admin-shell{grid-template-columns:185px minmax(0,1fr)}}
@media(max-width:760px){body{font-size:14px;padding-bottom:65px}.container{width:calc(100% - 28px)}.announcement{font-size:10px;padding:7px 12px}.preview-label{font-size:9px}.header-main{height:65px;gap:12px;justify-content:space-between}.logo{gap:6px}.logo-type{font-size:25px}.logo-type small{font-size:5px;letter-spacing:2.8px;margin-top:4px}.flower{width:30px;height:35px;transform:scale(.8);transform-origin:center}.header-actions{gap:4px;margin:0}.header-action{min-width:34px;min-height:42px}.header-action .icon{width:20px;height:20px}.header-action b{inset-inline-end:-1px;font-size:9px;min-width:16px;height:16px;line-height:16px}.lang-button{font-size:9px;padding:6px;min-height:34px}.desktop-only,.desktop-search,.main-nav{display:none!important}.mobile-menu{display:grid;width:34px;height:40px;border:0;border-radius:8px;flex:0 0 auto}.mobile-search{display:flex;height:42px;margin-block-end:12px}.mobile-search input{font-size:12px;padding-inline:15px}.mobile-search button{min-width:43px}.hero{height:450px;margin-block-start:14px;border-radius:20px}.hero-background{object-position:65% 50%}.hero-shade{background:linear-gradient(180deg,#fff0f4 0%,#fff0f4f5 23%,#fff0f4c2 40%,#fff0f400 66%)}.hero-shade:before{width:100%;height:55%;mask-image:linear-gradient(180deg,#000 20%,transparent);backdrop-filter:blur(4px)}.hero-copy{width:100%;height:auto;padding:26px 24px;justify-content:flex-start}.hero .eyebrow{font-size:8px;letter-spacing:2.5px;margin-bottom:10px}.hero h1{font-size:38px;margin-bottom:14px;letter-spacing:-.9px}.hero p{font-size:12px;line-height:1.55;max-width:260px;margin-bottom:17px}.hero .button{min-height:42px;font-size:11px;padding:11px 18px}.category-section{padding-inline:0;margin-block:22px}.category-strip{gap:15px;padding-inline:0;padding-block:2px 8px}.category{min-width:78px;flex-basis:78px}.category b{font-size:9px;margin-top:8px}.category-arrow{display:none}.promo-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}.promo{flex:0 0 88%;aspect-ratio:2/1;scroll-snap-align:start;border-radius:15px}.explore{inset-block-end:13px;inset-inline-start:15px;min-height:36px;font-size:11px;padding:9px 15px;gap:12px}.section{margin-block:30px}.section-heading{gap:12px;margin-bottom:18px}.section-heading h2{font-size:22px}.text-link{font-size:11px;gap:5px}.product-grid,.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-photo,.catalog-grid .product-photo{height:185px;padding:24px 16px 10px}.product-info{padding:10px;gap:6px}.brand-name{font-size:9px;min-height:22px}.product-name{font-size:11px;min-height:33px}.product-price{font-size:14px}.button.small{min-height:39px;font-size:11px;padding:9px 8px}.brands-strip a{min-width:125px;padding:20px 12px;font-size:14px}.shopping-notes{grid-template-columns:1fr;gap:12px;margin-block:32px}.shopping-notes>div{padding:20px}.shopping-notes .icon{float:inline-start;margin-inline-end:15px;margin-bottom:35px}.shopping-notes h2{font-size:14px}.site-footer{padding-block-start:30px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px 20px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid p{max-width:340px}.footer-bottom{font-size:10px;margin-top:22px}.creator-credit{font-size:10px}.bottom-nav{display:flex;justify-content:space-around;position:fixed;inset-inline:0;inset-block-end:0;background:#fffffff7;border-top:1px solid var(--line);z-index:40;padding:8px 10px calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(10px)}.bottom-nav a{min-width:64px;min-height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:9px;color:var(--muted)}.bottom-nav .icon{width:20px;height:20px}.bottom-nav a[aria-current=page]{color:var(--brand)}.toast{inset-block-end:85px;font-size:12px;border-radius:14px;min-width:200px}.page-heading h1{font-size:30px}.page-heading p{font-size:12px}.catalog-filters{grid-template-columns:1fr 1fr;gap:12px;padding:15px}.catalog-filters label:first-child{grid-column:1/-1}.catalog-filters label:last-child{grid-column:1/-1}.product-detail{grid-template-columns:1fr;gap:20px}.detail-photo{height:350px;padding:25px}.detail-info{padding-block:5px}.detail-info h1{font-size:33px}.detail-price{font-size:25px}.detail-actions{gap:10px}.detail-actions .button{font-size:12px}.cart-layout,.checkout-layout{grid-template-columns:1fr;gap:25px}.cart-row{grid-template-columns:65px 1fr auto;gap:10px}.cart-row img{width:65px;height:85px}.cart-row h2{font-size:12px}.cart-row p{font-size:10px}.cart-quantity{gap:4px;font-size:12px}.cart-quantity button{width:30px;height:34px}.form-grid{grid-template-columns:1fr}.form-grid>*{grid-column:1/-1}.panel,.cart-summary{padding:20px}.brands-list{grid-template-columns:1fr 1fr;gap:12px}.brands-list a{font-size:16px;padding:18px 15px}.admin-body{padding-bottom:0}.admin-shell{display:flex;flex-direction:column}.admin-sidebar{position:relative;height:auto;padding:18px 16px;border-inline-end:0;border-bottom:1px solid var(--line)}.admin-sidebar>.logo{display:none}.admin-sidebar nav{flex-direction:row;overflow-x:auto;gap:7px;margin:0}.admin-tab{white-space:nowrap;padding:11px 12px;font-size:12px}.admin-tab .icon{width:18px;height:18px}.admin-sidebar .view-shop{display:none}.admin-main{padding:22px 15px}.admin-top h1{font-size:23px}.admin-top .button{font-size:11px;padding:10px 14px;min-height:40px}.admin-metrics{gap:10px}.metric{padding:17px 13px}.metric b{font-size:25px}.metric span{font-size:10px}.admin-panel{padding:18px}.admin-workspace{gap:18px}.admin-product{grid-template-columns:45px minmax(0,1fr) auto;padding:10px;gap:10px}.admin-product img{width:45px;height:55px}.admin-product b{font-size:11px}.admin-login{margin-block:45px}.variant-row{grid-template-columns:1fr 1fr}.admin-alert{font-size:11px}.admin-order header{font-size:12px}[dir=rtl] .hero-shade{background:linear-gradient(180deg,#fff0f4 0%,#fff0f4f5 23%,#fff0f4c2 40%,#fff0f400 66%)}[dir=rtl] .hero-shade:before{mask-image:linear-gradient(180deg,#000 20%,transparent)}[dir=rtl] .hero h1{font-size:34px;line-height:1.2}}
@media(max-width:360px){.logo-type{font-size:22px}.header-main{gap:5px}.header-actions{gap:0}.lang-button{font-size:8px}.hero-copy{padding:23px 19px}.hero h1{font-size:34px}.hero{height:430px}.product-photo{height:165px}.product-info{padding:9px}.brand-name{font-size:8px}}
@media(prefers-reduced-motion:reduce){html.honor-motion{scroll-behavior:auto}.honor-motion *,.honor-motion *::before,.honor-motion *::after{transition:none!important;scroll-behavior:auto!important}}
.site-header .mobile-menu{display:none}.hero-background{inset-inline-start:28%;width:72%;object-position:center}.hero-shade{background:linear-gradient(90deg,#fff0f4 0%,#fff0f4f5 26%,#fff0f4b3 38%,#fff0f400 54%)}[dir=rtl] .hero-shade{background:linear-gradient(270deg,#fff0f4 0%,#fff0f4f5 26%,#fff0f4b3 38%,#fff0f400 54%)}@media(max-width:760px){.site-header .mobile-menu{display:grid}.hero-background{inset-inline-start:0;width:100%;object-position:40% center}.hero-shade,[dir=rtl] .hero-shade{background:linear-gradient(180deg,#fff0f4 0%,#fff0f4f5 23%,#fff0f4c2 40%,#fff0f400 66%)}}

.row-list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.row-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:white}
.row-item>b{font-size:13px}
.row-item>small{font-size:11px;color:var(--muted)}
.row-actions{display:flex;gap:7px;margin-inline-start:auto;flex-wrap:wrap}
.row-button{border:1px solid var(--line);background:white;border-radius:9px;min-height:40px;min-width:40px;padding:9px 13px;font-size:12px;color:var(--ink)}
.row-button:hover:not(:disabled){border-color:var(--ink)}
.row-button:disabled{opacity:.35;cursor:not-allowed}
.row-button.danger{color:#b3261e;border-color:#f0d4d1}
.row-button.danger:hover{background:#fdf3f2;border-color:#b3261e}
.zone-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:14px;background:white}
.zone-row>b{font-size:13px;align-self:center;min-width:90px}
.zone-row label{font-size:11px;max-width:120px}
.zone-row input[type=number]{min-height:40px;font-size:12px}
.zone-row .check-label{max-width:none;align-self:center}
@media(max-width:760px){.row-item,.zone-row{gap:9px;padding:11px}.row-actions{margin-inline-start:0;width:100%}.row-button{flex:1}.zone-row label{max-width:none;flex:1 1 120px}.zone-row>b{width:100%}}

/* Shared surfaces, hero legibility and the maker credit. */

:root{--card:#fff;--on-brand:#fff;--footer:var(--ink);--footer-ink:#fff}

/* Surfaces that were literal white in the base sheet. */
.icon-button,.lang-button,.category>span,.product-card,.explore,.thumbnail,
.cart-quantity button,.remove-button,.admin-sidebar,.admin-panel,.metric,
.admin-product img,.edit-button,.admin-login,.upload-zone input,
input,select,textarea{background:var(--card)}
.wish{background:color-mix(in srgb,var(--card) 93%,transparent)}
.bottom-nav{background:color-mix(in srgb,var(--card) 97%,transparent)}
.announcement{background:var(--ink);color:var(--surface)}
.skip{color:var(--surface)}
.button,.search button,.header-action b{color:var(--on-brand)}
.button.secondary{background:var(--card);color:var(--ink)}
.button:hover{background:var(--brand-bright);color:var(--on-brand)}
.admin-body .button:hover{background:var(--brand-bright)}
.logo-image{filter:none}

/* ---- Hero ---------------------------------------------------
   The shade was hard-coded pink, so it never followed the theme,
   and on a phone it covered the model's face. Desktop keeps the
   side wash; the phone stacks the photo above the words instead. */
.hero{background:var(--brand-soft)}
.hero-shade{background:linear-gradient(90deg,var(--brand-soft) 0%,
  color-mix(in srgb,var(--brand-soft) 95%,transparent) 26%,
  color-mix(in srgb,var(--brand-soft) 82%,transparent) 38%,
  color-mix(in srgb,var(--brand-soft) 30%,transparent) 54%,
  transparent 70%)}
[dir=rtl] .hero-shade{background:linear-gradient(-90deg,var(--brand-soft) 0%,
  color-mix(in srgb,var(--brand-soft) 95%,transparent) 26%,
  color-mix(in srgb,var(--brand-soft) 82%,transparent) 38%,
  color-mix(in srgb,var(--brand-soft) 30%,transparent) 54%,
  transparent 70%)}
.hero-shade:before{mask-image:linear-gradient(90deg,#000 42%,transparent)}
[dir=rtl] .hero-shade:before{mask-image:linear-gradient(-90deg,#000 42%,transparent)}

@media(max-width:760px){
  .hero{height:auto;display:flex;flex-direction:column;background:var(--brand-soft)}
  .hero-background{position:relative;width:100%;height:auto;aspect-ratio:4/3;
    object-fit:cover;object-position:60% 22%}
  .hero-shade,[dir=rtl] .hero-shade{display:none}
  .hero-copy{width:100%;height:auto;padding:22px 22px 26px;justify-content:flex-start}
  .hero h1{font-size:32px;margin-bottom:12px}
  .hero p{max-width:none;font-size:13px;margin-bottom:16px}
}

/* ---- Footer and maker credit ------------------------------- */
.site-footer{background:var(--footer);color:var(--footer-ink);border-top:0}
.site-footer .logo-type,.site-footer h2{color:var(--footer-ink)}
.site-footer .logo-image{filter:invert(1)}
.footer-grid p,.footer-grid>div>a:not(.logo){color:color-mix(in srgb,var(--footer-ink) 68%,transparent)}
.footer-grid>div>a:not(.logo):hover{color:var(--footer-ink)}
.footer-bottom{border-top:1px solid color-mix(in srgb,var(--footer-ink) 14%,transparent);
  color:color-mix(in srgb,var(--footer-ink) 55%,transparent)}

.creator-credit{background:var(--footer);border-top:1px solid color-mix(in srgb,var(--footer-ink) 12%,transparent);
  color:color-mix(in srgb,var(--footer-ink) 70%,transparent);padding:18px 14px 26px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:12px}
.creator-credit .heart{color:var(--brand-bright)}
.creator-credit a{display:inline-flex;align-items:center;gap:7px;color:var(--footer-ink);
  background:color-mix(in srgb,var(--footer-ink) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--footer-ink) 18%,transparent);
  border-radius:99px;padding:7px 15px;font-weight:600;min-height:38px;
  transition:background .16s,border-color .16s,transform .16s}
.creator-credit a:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-1px)}
.creator-credit a svg{width:15px;height:15px}

/* ---- Buttons ------------------------------------------------ */
.button{transition:background .18s,transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--brand) 70%,transparent)}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px color-mix(in srgb,var(--brand) 80%,transparent)}
.button:active{transform:translateY(0) scale(.985)}
.button .icon{transition:transform .2s}
.button:hover .icon{transform:translateX(3px)}
[dir=rtl] .button:hover .icon{transform:translateX(-3px)}
.explore{transition:background .16s,color .16s,transform .16s}
.explore:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.honor-motion .button,.honor-motion .button .icon,.honor-motion .explore,.honor-motion .creator-credit a{transition:none}.honor-motion .button:hover,.honor-motion .explore:hover,.honor-motion .creator-credit a:hover{transform:none}}

/* ============================================================
   Premium product presentation: swatches, format pills and a
   quieter, more considered card and detail page.
   ============================================================ */

.option-block{margin-block:18px}
.option-head{display:flex;align-items:baseline;gap:9px;margin-bottom:11px;font-size:12px;font-weight:600}
.option-head span{color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;font-size:10px}
.option-head b{font-weight:600;color:var(--ink)}

.swatch-row{display:flex;flex-wrap:wrap;gap:11px}
.swatch{width:38px;height:38px;border-radius:50%;border:0;padding:0;position:relative;cursor:pointer;
  background:var(--swatch,var(--soft));box-shadow:inset 0 0 0 1px #0000001f;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .18s}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #0000001f,0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.swatch:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
.swatch[data-empty]{opacity:.4}
.swatch[data-empty]:after{content:"";position:absolute;inset-inline:3px;inset-block-start:calc(50% - 1px);
  height:1.5px;background:var(--ink);transform:rotate(-45deg)}
.swatch-text{width:auto;min-width:46px;height:38px;border-radius:99px;padding:0 15px;font-size:12px;
  background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.swatch-text[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}

.size-row{display:flex;flex-wrap:wrap;gap:9px}
.size-pill{min-height:42px;padding:0 20px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s}
.size-pill:hover{border-color:var(--muted);transform:translateY(-1px)}
.size-pill[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.size-pill[data-empty]{opacity:.45;text-decoration:line-through}
.size-pill:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ---- Card: the photo gets the room, the type stays quiet ---- */
.product-card{border-radius:20px;border-color:color-mix(in srgb,var(--line) 70%,transparent);
  transition:box-shadow .28s,transform .28s,border-color .28s}
.product-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px -26px #3a172b40;border-color:var(--line)}
.product-photo{background:linear-gradient(170deg,color-mix(in srgb,var(--brand-soft) 60%,var(--card)),var(--card));
  padding:26px 22px 14px}
.product-photo img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.product-card:hover .product-photo img{transform:scale(1.06)}
.brand-name{letter-spacing:1.3px;font-size:9px}
.product-name{font-size:12.5px;line-height:1.5}
.product-price{font-size:16px;letter-spacing:-.2px;color:var(--ink)}
.product-info{padding:14px 14px 16px;gap:6px}
.wish{width:34px;height:34px;box-shadow:0 2px 8px #0000001a;transition:transform .18s,color .18s}
.wish:hover{transform:scale(1.1)}

/* A row of dots tells the shopper a product has shades before opening it. */
.card-shades{display:flex;gap:5px;align-items:center;margin-top:2px}
.card-shades i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000021}
.card-shades span{font-size:10px;color:var(--muted);margin-inline-start:3px}

/* ---- Detail page ---- */
.detail-photo{border-radius:26px;border-color:color-mix(in srgb,var(--line) 70%,transparent);
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-soft) 55%,var(--card)),var(--card));padding:44px}
.gallery-thumbs .thumbnail{border-radius:14px;transition:border-color .16s,transform .16s}
.gallery-thumbs .thumbnail:hover{transform:translateY(-2px);border-color:var(--muted)}
.detail-info h1{letter-spacing:-1.3px;margin-bottom:14px}
.detail-info .eyebrow{color:var(--brand);font-weight:700}
.detail-price{letter-spacing:-.8px;margin-bottom:6px}
.stock-label{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--muted)}
.stock-label:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.detail-description{color:var(--muted);max-width:52ch}
.detail-actions{margin-block:26px 22px}
@media(max-width:760px){
  .detail-photo{padding:26px;border-radius:20px}
  .swatch{width:34px;height:34px}
  .product-photo{padding:20px 16px 10px}
}

/* Variant editor: shade, swatch, format and unit are separate fields. */
.variant-row{grid-template-columns:1.2fr 84px .8fr .7fr 1fr .9fr .9fr}
.swatch-field>span{display:flex;gap:5px;align-items:center}
.swatch-field input[type=color]{min-height:44px;width:100%;padding:3px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);cursor:pointer}
.swatch-clear{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:9px;
  min-height:44px;min-width:32px;font-size:11px;cursor:pointer}
.swatch-clear:hover{color:var(--ink);border-color:var(--muted)}
@media(max-width:1100px){.variant-row{grid-template-columns:1fr 1fr}}
.swatch-field.cleared input[type=color]{opacity:.35}
.swatch-field.cleared .swatch-clear{border-color:var(--brand);color:var(--brand)}

/* ============================================================
   Luxury beauty typography and product presentation.
   Georgia and Arial were browser fallbacks, not choices; the
   Playfair Display / Inter pair is the standard for high-end
   beauty retail, with Amiri and Tajawal carrying Arabic.
   ============================================================ */

:root{
  --font:"Inter","Segoe UI",system-ui,sans-serif;
  --display:"Playfair Display",Georgia,serif;
}
[dir=rtl]{--font:"Tajawal","Segoe UI",system-ui,sans-serif;--display:"Amiri",Georgia,serif}

body{font-family:var(--font);letter-spacing:-.005em}
h1,h2,h3,.logo-type,.detail-info h1,.hero h1,.brands-strip a,.brands-list a{font-family:var(--display)}
h2{letter-spacing:-.9px;font-weight:600}
.hero h1{font-weight:500;letter-spacing:-1.8px}
.hero h1 strong{font-weight:600}
.detail-info h1{font-weight:600;letter-spacing:-1.1px;line-height:1.12}
.page-heading h1{font-family:var(--display);font-weight:600}
.eyebrow{font-family:var(--font);font-weight:600;letter-spacing:2.6px;font-size:10px}
.button{font-family:var(--font);font-weight:600;letter-spacing:.2px}
.detail-price{font-family:var(--font);font-weight:700;letter-spacing:-1px}
.product-price{font-family:var(--font);font-weight:600}

/* ---- Product card: the photograph does the selling ---------
   The reference photos already carry their own tinted circle,
   so the card ground stays plain; two backgrounds read as
   clip-art rather than retail. */
.product-photo{background:var(--card);padding:18px 18px 8px;height:240px}
.product-card{border-radius:16px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent)}
.product-card:hover{box-shadow:0 18px 44px -28px #3a172b59;transform:translateY(-4px)}
.product-info{padding:4px 16px 18px;gap:5px}
.brand-name{font-size:9.5px;letter-spacing:1.6px;font-weight:600;color:var(--muted);min-height:0;margin-bottom:2px}
.product-name{font-size:13px;line-height:1.45;font-weight:500;min-height:38px;color:var(--ink)}
.product-price{font-size:15.5px;margin-bottom:8px}
.card-option-slot{min-height:24px;display:flex;align-items:center}
.card-shades{margin:0}
.card-shades i{width:12px;height:12px}
.product-card .button.small{border-radius:10px;font-weight:600;min-height:42px}
.catalog-grid .product-photo{height:290px}

/* ---- Detail page ---- */
.detail-photo{background:var(--card);padding:30px;border-radius:20px;height:520px}
.detail-info{padding-block:6px}
.detail-info .eyebrow{color:var(--brand);letter-spacing:2.2px}
.detail-price{font-size:30px;margin-block:4px 10px}
.stock-label{font-size:11.5px;letter-spacing:.3px}
.detail-description{font-size:14px;line-height:1.85;margin-block:16px 4px}
.product-detail{gap:56px}

/* ---- Section headings ---- */
.section-heading h2{font-size:29px}
.title-line{width:34px;height:2px;background:var(--brand);border-radius:2px}
.shopping-notes h2{font-family:var(--display);font-size:17px;font-weight:600}
.footer-grid h2{font-family:var(--font);letter-spacing:1.4px;font-size:11px;text-transform:uppercase}

@media(max-width:760px){
  .product-photo{height:190px;padding:14px 14px 6px}
  .catalog-grid .product-photo{height:200px}
  .detail-photo{height:340px;padding:22px}
  .detail-price{font-size:26px}
  .section-heading h2{font-size:23px}
}

/* A sold-out shade keeps its colour — the shopper still needs to recognise it. */
.swatch[data-empty]{opacity:1;filter:saturate(.55)}
.swatch[data-empty]:after{inset-inline:-2px;height:1px;background:var(--ink);opacity:.75}
.swatch[data-empty]:before{content:"";position:absolute;inset:0;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 42%,transparent)}

/* Storefront discovery: editorial cards, touch-first reels, and restrained motion. */
.hero{isolation:isolate}
.hero-background{animation:hero-breathe 18s ease-in-out infinite alternate}
.hero:after{content:"";position:absolute;z-index:1;inset-inline-end:-70px;inset-block-start:-95px;width:300px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ff9fbc45,transparent 68%);filter:blur(8px);pointer-events:none;animation:hero-glow 6s ease-in-out infinite alternate}
.hero-copy{z-index:2}
@keyframes hero-breathe{to{transform:scale(1.055)}}
@keyframes hero-glow{to{transform:translate(-24px,30px) scale(.82);opacity:.55}}
.beauty-ticker{margin-block:30px 0;overflow:hidden;border-block:1px solid var(--line);background:var(--ink);color:#fff}
.beauty-ticker-track{display:flex;width:max-content;animation:ticker-drift 25s linear infinite}
.beauty-ticker-set{display:flex;align-items:center;flex:none}
.beauty-ticker span{display:flex;align-items:center;gap:28px;padding:15px 28px;font-size:10px;font-weight:700;letter-spacing:2.8px;white-space:nowrap}
.beauty-ticker i{color:var(--brand-bright);font-style:normal;font-size:13px}
.beauty-ticker:hover .beauty-ticker-track{animation-play-state:paused}
@keyframes ticker-drift{to{transform:translateX(-50%)}}
[dir=rtl] .beauty-ticker-track{animation-name:ticker-drift-rtl}
@keyframes ticker-drift-rtl{to{transform:translateX(50%)}}
.discovery-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.discovery-heading h2{font:600 clamp(26px,2.7vw,38px)/1.15 var(--display);letter-spacing:-1.2px;margin:0}
.discovery-heading p{font-size:12px;margin:9px 0 0}
.category-section{padding-inline:0;margin-block:46px 58px}
.category-controls{display:flex;gap:8px}
.category-controls .category-arrow{position:static;width:44px;height:44px;box-shadow:none;flex:none;background:var(--card);color:var(--ink)}
.category-controls .category-arrow:disabled{visibility:visible;opacity:.35}
.category-strip{gap:18px;padding:4px 2px 22px;scroll-snap-type:x mandatory;counter-reset:category}
.category{counter-increment:category;position:relative;isolation:isolate;flex:0 0 clamp(190px,18vw,238px);height:300px;min-width:0;display:block;overflow:hidden;border-radius:28px;text-align:start;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);box-shadow:0 22px 48px -32px #35101f99;transition:transform .35s,box-shadow .35s}
.category:before{content:counter(category,decimal-leading-zero);position:absolute;z-index:3;inset-block-start:18px;inset-inline-start:18px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#160b10a8;color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;backdrop-filter:blur(9px);border:1px solid #ffffff30}
.category:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 35%,#12060cb5 71%,#12060cf2 100%);pointer-events:none}
.category .category-photo{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;border-radius:inherit;padding:0;border:0;background:var(--card);box-shadow:none;transition:none}
.category .category-photo img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.category:hover{transform:translateY(-8px);box-shadow:0 30px 54px -28px #35101fbb}
.category:hover .category-photo{transform:none;box-shadow:none}
.category:hover img{transform:scale(1.075)}
.category b{position:absolute;z-index:2;inset-inline:20px;inset-block-end:55px;color:#fff;font:600 24px/1.08 var(--display);letter-spacing:-.55px;margin:0;white-space:normal;text-shadow:0 2px 12px #10030a75}
.category-discover{position:absolute;z-index:2;inset-inline-start:20px;inset-block-end:18px;display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:10px;font-weight:700;margin:0}
.category-discover .icon{width:14px;height:14px;transition:transform .25s}
.category:hover .category-discover .icon{transform:translateX(4px)}
[dir=rtl] .category:hover .category-discover .icon{transform:translateX(-4px)}
.collection-section{margin-block:0 62px}
.collection-section>.section-heading h2{font:600 clamp(26px,2.7vw,38px)/1.15 var(--display);letter-spacing:-1.2px}
.promo-grid{gap:18px;grid-template-columns:1.12fr 1fr 1fr}
.promo-card{min-width:0;border-radius:24px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 42px -34px #37111f88;transition:transform .35s,box-shadow .35s}
.promo-photo{height:auto;aspect-ratio:2/1;overflow:hidden;background:var(--soft)}
.promo-photo img{height:100%;width:100%;object-fit:cover;transition:transform .55s}
.promo-card:hover{transform:translateY(-7px);box-shadow:0 26px 50px -32px #37111faa}
.promo-card:hover .promo-photo img{transform:scale(1.055)}
.promo-caption{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.promo-caption h3{font:600 21px/1.2 var(--display);letter-spacing:-.4px;margin:0}
.promo-caption .explore{position:static;box-shadow:none;min-height:36px;padding:8px 13px;border:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.promo-caption .explore:hover{border-color:var(--brand);background:var(--brand);color:#fff}
.brand-motion{position:relative;padding-block:58px 64px;background:radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--brand) 17%,transparent),transparent 35%),linear-gradient(125deg,var(--brand-soft),var(--soft));overflow:hidden}
.brand-motion .section-heading{margin-bottom:25px}
.brand-motion .section-heading h2{font-size:clamp(26px,2.7vw,38px)}
.brand-marquee{overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);touch-action:pan-x;cursor:grab}
.brand-marquee::-webkit-scrollbar{display:none}
.brand-track{display:flex;gap:14px;width:max-content;animation:brand-drift 19s linear infinite}
.brand-set{display:flex;gap:14px;flex:none}
.brand-tile{width:255px;min-height:124px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px 52px 18px 20px;border-radius:24px;background:linear-gradient(135deg,var(--card),var(--brand-soft));border:1px solid var(--line);box-shadow:0 16px 34px -28px #36132388;position:relative;transition:transform .25s,border-color .25s,box-shadow .25s}
.brand-set .brand-tile:nth-child(3n+2){background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--brand) 10%,var(--card)))}
.brand-set .brand-tile:nth-child(3n){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,var(--card)),var(--card))}
.brand-tile:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:0 24px 38px -26px #361323aa}
.brand-tile-art{height:70px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.brand-art{width:100%;height:100%;object-fit:contain}
.brand-wordmark{font:600 30px/1.05 var(--display);letter-spacing:-1px;text-align:start}
.brand-tile-name{display:none}
.brand-tile>.icon{position:absolute;inset-inline-end:18px;inset-block-start:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--brand)}
.brand-marquee:hover .brand-track,.brand-marquee:focus-within .brand-track,.brand-marquee.is-paused .brand-track{animation-play-state:paused}
@keyframes brand-drift{to{transform:translateX(calc(-50% - 7px))}}
[dir=rtl] .brand-track{animation-name:brand-drift-rtl}
@keyframes brand-drift-rtl{to{transform:translateX(calc(50% + 7px))}}
.featured-section{margin-block:64px;padding:44px 32px 38px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,var(--soft),var(--surface))}
.featured-section .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.product-card{border-radius:20px;overflow:hidden}
.product-photo{height:295px;padding:24px 20px 8px}
.product-info{padding:9px 18px 19px;gap:7px}
.product-name{font-size:14px;line-height:1.45;min-height:40px}
.brand-name{font-size:10px;letter-spacing:1.5px}
.product-price{font-size:17px}
.product-card .button.small{margin-top:auto}
.brand-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.brand-feature{position:relative;min-height:245px;border-radius:20px;overflow:hidden;background:linear-gradient(120deg,var(--brand-soft),var(--card));border:1px solid var(--line);display:flex;align-items:stretch}
.brand-feature-photo{position:absolute;inset-inline-end:0;inset-block:0;width:62%;opacity:.92}
.brand-feature-photo img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .45s}
.brand-feature:hover img{transform:scale(1.07)}
.brand-feature-copy{z-index:1;width:64%;padding:25px 18px;display:flex;flex-direction:column;justify-content:end;gap:10px;background:linear-gradient(90deg,var(--brand-soft) 15%,color-mix(in srgb,var(--brand-soft) 88%,transparent) 70%,transparent)}
[dir=rtl] .brand-feature-copy{background:linear-gradient(-90deg,var(--brand-soft) 15%,color-mix(in srgb,var(--brand-soft) 88%,transparent) 70%,transparent)}
.brand-feature-label{text-transform:uppercase;font-size:10px;letter-spacing:1.4px;color:var(--muted)}
.brand-feature-copy strong{font:600 clamp(22px,2vw,31px)/1.1 var(--display)}
.brand-feature-copy>span:last-child{font-size:11px;line-height:1.4;font-weight:600;display:inline-flex;gap:5px;align-items:center}
.brand-feature-copy .icon{width:15px;height:15px;color:var(--brand)}
@media(max-width:1100px){
  .featured-section .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-feature:last-child{display:none}
}
@media(max-width:760px){
  .beauty-ticker{margin-top:20px}
  .beauty-ticker span{padding:12px 20px;gap:20px;font-size:8px;letter-spacing:2px}
  .category-section{margin-block:36px 42px}
  .discovery-heading{margin-bottom:18px}
  .discovery-heading h2{font-size:25px}
  .discovery-heading p{font-size:11px;max-width:280px}
  .category-controls{display:none}
  .category-strip{gap:12px;margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px}
  .category{flex-basis:min(68vw,220px);height:275px;border-radius:24px}
  .category b{font-size:22px;inset-inline:18px;inset-block-end:52px}
  .category-discover{font-size:9px;inset-inline-start:18px;inset-block-end:17px}
  .collection-section{margin-bottom:46px}
  .collection-section>.section-heading h2{font-size:25px}
  .promo-grid{display:flex;gap:12px}
  .promo-card{flex:0 0 88%;scroll-snap-align:start}
  .promo-caption{padding:12px 13px}
  .promo-caption h3{font-size:17px}
  .brand-motion{padding-block:42px 46px}
  .brand-motion .section-heading h2{font-size:25px}
  .brand-tile{width:205px;min-height:104px;padding:15px 44px 15px 17px;border-radius:20px}
  .brand-tile-art{height:60px}
  .brand-wordmark{font-size:24px}
  .featured-section{margin-block:42px;padding:30px 14px 24px;border-radius:24px}
  .featured-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-photo,.catalog-grid .product-photo{height:195px;padding:15px 13px 6px}
  .product-info{padding:7px 12px 14px}
  .product-name{font-size:12px;min-height:35px}
  .brand-name{font-size:9px}
  .product-price{font-size:15px}
  .brand-feature-grid{grid-template-columns:1fr}
  .brand-feature{min-height:200px}
  .brand-feature:last-child{display:flex}
}
@media(max-width:370px){.brand-motion .section-heading{align-items:start}.brand-motion .text-link{max-width:90px}.promo-card{flex-basis:89%}}
@media(prefers-reduced-motion:reduce){.honor-motion .hero-background,.honor-motion .hero:after{animation:none}.honor-motion .brand-tile,.honor-motion .category .category-photo,.honor-motion .category img,.honor-motion .promo-photo img,.honor-motion .brand-feature img{transition:none}
}

.brand-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.brand-directory-card{min-width:0;border:1px solid var(--line);border-radius:19px;background:var(--card);overflow:hidden}
.brand-directory-main{position:relative;display:block;padding:22px;min-height:270px}
.brand-directory-art{height:158px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:13px;background:linear-gradient(135deg,var(--brand-soft),var(--soft))}
.brand-directory-art .brand-art{object-fit:contain}
.brand-directory-art .brand-wordmark{font-size:34px}
.brand-directory-heading{display:flex;flex-direction:column;gap:5px;margin-top:15px;padding-inline-end:30px}
.brand-directory-heading strong{font:600 23px/1.2 var(--display)}
.brand-directory-heading span{font-size:11px;color:var(--muted);line-height:1.45}
.brand-directory-main>.icon{position:absolute;inset-inline-end:22px;inset-block-end:33px;width:18px;height:18px;color:var(--brand)}
.brand-category-links{display:flex;flex-wrap:wrap;gap:7px;padding:0 22px 20px}
.brand-category-links a{border:1px solid var(--line);border-radius:99px;padding:6px 10px;font-size:10px;font-weight:600}
.brand-category-links a:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:900px){.brand-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.brand-directory{grid-template-columns:1fr}.brand-directory-main{min-height:240px}.brand-directory-art{height:135px}}

.category>.category-discover{display:inline-flex;aspect-ratio:auto;width:auto;border:0;border-radius:99px;background:#fff;color:#171217;box-shadow:0 8px 20px #11050b30;padding:7px 10px;overflow:visible;transform:none}
.category:hover>.category-discover{transform:none}
/* The supplied mockup photos contain a heart icon in the top-right pixels. */
:is(.product-photo img,.detail-photo):is([src$="reference-14.webp"],[src$="reference-15.webp"],[src$="reference-16.webp"],[src$="reference-17.webp"],[src$="reference-18.webp"],[src$="reference-19.webp"]){clip-path:polygon(0 0,82% 0,82% 18%,100% 18%,100% 100%,0 100%)}

.product-card .button.small{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.product-card .button.small:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.brand-marquee:active .brand-track{animation-play-state:paused}
.announcement{padding:0;overflow:hidden;text-align:start}
.announcement-track{display:flex;width:max-content;animation:announcement-drift 16s linear infinite}
.announcement-set{display:flex;align-items:center;flex:none}
.announcement-set span{padding:9px 34px;white-space:nowrap}
.announcement-set i{color:var(--brand-bright);font-style:normal}
.announcement:hover .announcement-track{animation-play-state:paused}
@keyframes announcement-drift{to{transform:translateX(-50%)}}
[dir=rtl] .announcement-track{animation-name:announcement-drift-rtl}
@keyframes announcement-drift-rtl{to{transform:translateX(50%)}}
.category-strip,[data-drag-rail],.brand-marquee{cursor:grab;touch-action:pan-y;user-select:none}
.category-strip.is-moving{scroll-snap-type:none}
.category-strip.is-dragging,[data-drag-rail].is-dragging,.brand-marquee.is-dragging{cursor:grabbing;scroll-snap-type:none}
.featured-section .product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.featured-section .product-grid::-webkit-scrollbar{display:none}
.featured-section .product-card{flex:0 0 calc((100% - 60px)/4);height:auto;scroll-snap-align:start}
.product-grid{grid-auto-rows:1fr}
.product-card{display:flex;flex-direction:column;height:100%;background:var(--card)}
.product-photo{background:linear-gradient(145deg,#fff 25%,var(--brand-soft));overflow:hidden}
.product-photo>a{display:flex;align-items:center;justify-content:center}
.product-photo img{filter:drop-shadow(0 18px 15px #3a182218);transition:transform .4s ease}
.product-card:hover .product-photo img{transform:scale(1.035)}
.product-info{flex:1}
@media(prefers-reduced-motion:reduce){.honor-motion .hero-background,.honor-motion .hero:after{animation:none}.honor-motion .product-photo img{transition:none}}
@media(max-width:760px){.featured-section .product-card{flex-basis:calc((100% - 12px)/2)}}
@media(max-width:360px){.header-main .logo-image{max-width:112px}}

/* ============================================================
   Card anatomy borrowed from Storefront UI's ProductCard (MIT):
   a square image well, a rule separating photo from copy, the
   wishlist sitting on the image bottom-end, and a pill action.
   The library itself needs Vue/React and Tailwind, which this
   Worker-rendered storefront does not use — only the pattern.
   ============================================================ */

.product-photo{height:auto;aspect-ratio:1;padding:20px;display:grid;place-items:center}
.catalog-grid .product-photo{height:auto;aspect-ratio:1}
.product-photo>a{height:100%;width:100%;display:grid;place-items:center}
.product-photo img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.product-info{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);padding:14px}
.product-card{overflow:hidden}
/* The wishlist belongs on the image, out of the way of the title. */
.wish{inset-block-start:auto;inset-block-end:10px;inset-inline-end:10px}
.product-card .button.small{border-radius:99px}
:root[data-theme=dark] .wish{inset-block-start:auto;inset-block-end:18px;inset-inline-end:18px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .wish{inset-block-start:auto;inset-block-end:18px;inset-inline-end:18px}}
@media(max-width:760px){.product-photo,.catalog-grid .product-photo{height:auto;aspect-ratio:1;padding:14px}}

/* The grid child needs an explicit basis or the image ignores the square. */
.product-photo{overflow:hidden}
.product-photo>a{width:100%;height:100%;min-height:0;min-width:0;display:block}
.product-photo img,.product-photo>a img{width:100%;height:100%;max-height:none;max-width:none;object-fit:contain}

/* Storefront pass: wider canvas, explicit controls, and lightweight native motion. */
:root{--page-width:1480px;--line:#ddd2d8}
.container{width:min(calc(100% - 48px),var(--page-width))}
input,select,textarea,.icon-button,.lang-button{border-color:var(--line)}
input:hover,select:hover,textarea:hover,.icon-button:hover,.lang-button:hover{border-color:#aa929e}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:3px solid color-mix(in srgb,var(--brand) 18%,transparent);outline-offset:1px}
.lang-button{min-width:44px;font-weight:800;letter-spacing:.8px}

.announcement-track,.beauty-ticker-track,.brand-track{animation:none}
.announcement.is-animated .announcement-track{animation:announcement-drift var(--announcement-speed,28s) linear infinite}
[dir=rtl] .announcement.is-animated .announcement-track{animation-name:announcement-drift-rtl}
.beauty-ticker.is-animated .beauty-ticker-track{animation:ticker-drift var(--ticker-speed,42s) linear infinite}
[dir=rtl] .beauty-ticker.is-animated .beauty-ticker-track{animation-name:ticker-drift-rtl}
.brand-marquee.is-animated .brand-track{animation:brand-drift var(--brand-speed,52s) linear infinite}
[dir=rtl] .brand-marquee.is-animated .brand-track{animation-name:brand-drift-rtl}

.hero-carousel{height:520px;touch-action:pan-y}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero-slide .hero-background{animation:none}
.hero-controls{position:absolute;z-index:5;inset-inline-start:42px;inset-block-end:24px;display:flex;align-items:center;gap:10px}
.hero-controls>button{width:40px;height:40px;border:1px solid #ffffffb8;border-radius:50%;background:#ffffffdd;display:grid;place-items:center;box-shadow:0 8px 22px #40101d22}
.hero-controls .icon{width:17px;height:17px}
.hero-dots{display:flex;gap:7px;padding:10px 12px;border-radius:99px;background:#ffffffcf}
.hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#ad959e}
.hero-dots button.is-active{width:24px;border-radius:99px;background:var(--brand)}

.promo-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 1px 10px;gap:18px}
.promo-grid::-webkit-scrollbar{display:none}
.promo-grid.is-moving{scroll-snap-type:none}
.promo-card{flex:0 0 calc(42% - 9px);scroll-snap-align:start}

.brand-tile{min-height:132px}
.brand-tile-copy{display:flex;flex-direction:column;gap:3px;min-width:0;padding-inline-end:18px}
.brand-tile-copy b{font:600 17px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tile-copy small{color:var(--muted);font-size:10px;min-height:15px}
.brand-tile-name{display:none}

.catalog-page{max-width:var(--page-width)}
.catalog-layout{display:grid;grid-template-columns:275px minmax(0,1fr);gap:32px;align-items:start}
.catalog-sidebar{position:sticky;top:18px}
.catalog-filters{display:flex;flex-direction:column;gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 55px -44px #3a172b80}
.filter-title{display:flex;align-items:center;gap:11px;padding:6px 5px 10px}
.filter-title>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.filter-title .icon{width:18px;height:18px}
.filter-title b,.filter-title small{display:block}
.filter-title b{font:600 15px var(--display)}
.filter-title small{margin-top:2px;color:var(--muted);font-size:9.5px}
.catalog-search{margin:0 0 2px;padding:0 4px;color:var(--muted);font-size:10px}
.catalog-search>span{position:relative;display:block}
.catalog-search input{padding-inline-end:42px;margin-top:4px;background:var(--soft);border-color:var(--line);border-radius:13px}
.catalog-search .icon{position:absolute;inset-inline-end:12px;inset-block-start:11px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.filter-group{border:1px solid var(--line);border-radius:15px;background:var(--soft);padding:0 11px;overflow:hidden}
.filter-group summary{font-weight:700;font-size:11.5px;cursor:pointer;min-height:45px;display:flex;align-items:center;justify-content:space-between;list-style:none}
.filter-group summary::-webkit-details-marker{display:none}
.filter-group summary:after{content:'+';width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--brand);font-size:16px}
.filter-group[open] summary:after{content:'−'}
.filter-options{max-height:214px;overflow:auto;padding:0 2px 8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.filter-option{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:34px;padding:5px 8px;margin-inline-start:calc(var(--depth,0)*12px);border:1px solid transparent;border-radius:10px;font-size:10.5px;font-weight:500;cursor:pointer}
.filter-option input{appearance:none;width:16px;min-height:16px;height:16px;padding:0;border:1.5px solid #bcaab3;border-radius:50%;flex:0 0 16px}
.filter-option input:checked{border:5px solid var(--brand)}
.filter-option:hover,.filter-option:has(input:checked){background:#fff;border-color:var(--line)}
.filter-option:has(input:checked) span{color:var(--brand);font-weight:700}
.catalog-sort{border:0;padding:4px;color:var(--muted);font-size:10px}
.catalog-sort select{margin-top:4px;border-color:var(--line);border-radius:13px}
.filter-reset{margin:1px 4px 4px;min-height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:700;font-size:10.5px}
.filter-reset:hover{border-color:var(--brand);color:var(--brand)}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;border-bottom:1px solid var(--line);margin-bottom:18px}
.catalog-toolbar .result-count{margin:0;font-weight:700;color:var(--ink)}
.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr}
.product-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-info>.button.small{margin-top:auto}

#mobile-drawer{padding:18px;width:min(390px,92vw);background:#fff;border-inline-end:1px solid var(--line);box-shadow:20px 0 60px #32122024}
#mobile-drawer .drawer-heading{margin:-18px -18px 16px;padding:20px 18px 16px;background:linear-gradient(135deg,var(--brand-soft),#fff)}
#mobile-drawer .drawer-heading>b{font:600 22px var(--display)}
.drawer-search{margin-bottom:16px;min-height:44px}
#mobile-drawer nav{gap:8px}
#mobile-drawer nav>a,#mobile-drawer nav>details{border:1px solid var(--line);border-radius:14px;background:var(--soft);overflow:hidden}
#mobile-drawer nav>a{padding:13px 14px}
#mobile-drawer nav summary{padding:14px;font-weight:700;cursor:pointer;list-style:none}
#mobile-drawer nav summary::-webkit-details-marker{display:none}
#mobile-drawer nav summary:after{content:'+';float:inline-end;color:var(--brand);font-size:18px}
#mobile-drawer nav details[open]>summary:after{content:'−'}
#mobile-drawer nav details a{padding:11px 14px;border:0;border-radius:9px}
#mobile-drawer nav details a:hover{background:var(--brand-soft);color:var(--brand)}
#mobile-drawer .drawer-category{margin:0 8px 8px;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
#mobile-drawer .drawer-child{margin-inline-start:16px;color:var(--muted)}
#mobile-drawer nav a small{display:block;font-size:9px;color:var(--muted);margin-top:2px}

.creator-credit{background:linear-gradient(90deg,#21151b,#4b1a2b,#21151b);color:#f9dce6;border:0;padding:18px;display:flex;align-items:center;justify-content:center;gap:10px}
.creator-credit a{background:linear-gradient(135deg,#ff3f78,#e91f5a);border:1px solid #ff83a8;color:#fff!important;border-radius:99px;padding:7px 13px;letter-spacing:1px;font-weight:800;box-shadow:0 8px 24px #d91f5940}
.creator-credit .heart{filter:drop-shadow(0 0 8px #ff7da4)}
.hero-admin-slide{margin-bottom:16px}

@media(max-width:1180px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:760px){
  .container{width:calc(100% - 28px)}
  .hero-carousel{height:540px;display:block}
  .hero-slide{display:block}
  .hero-slide .hero-background{position:absolute;width:100%;height:100%;aspect-ratio:auto;object-position:center;inset:0}
  .hero-slide .hero-shade{display:block;background:linear-gradient(180deg,#fff0f4f7 0%,#fff0f4df 42%,#fff0f41a 72%)}
  .hero-slide .hero-copy{position:relative;padding:28px 22px 90px;width:100%;height:100%}
  .hero-controls{inset-inline-start:18px;inset-block-end:18px}
  .hero-controls>button{width:44px;height:44px}
  .promo-card{flex-basis:86%}
  .brand-tile{width:220px}
  .catalog-layout{display:block}
  .catalog-sidebar{position:static;margin-bottom:20px}
  .catalog-filters{padding:15px;border-radius:16px}
  .filter-group:not([open]){padding-bottom:0}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .creator-credit{flex-wrap:wrap;padding:16px 12px 82px}
}
@media(prefers-reduced-motion:reduce){.honor-motion .hero-slide{transition:none}.honor-motion .announcement-track,.honor-motion .beauty-ticker-track,.honor-motion .brand-track{animation:none!important}}

/* Visible structure: every selectable and grouped surface keeps an outline at rest. */
:root{--line:#d9ccd2;--line-strong:#b9a4ae;--line-soft:#eee7ea}
.hero,.category,.promo-card,.brand-tile,.brand-feature,.brand-directory-card,
.featured-section,.shopping-notes>div,.catalog-filters,.cart-summary,.panel,
.detail-photo,.thumbnail,.empty-state{border-color:var(--line)}
.product-grid{align-items:stretch}
.product-card{height:100%;border:1px solid var(--line);box-shadow:0 8px 22px -19px #3a172b73}
.featured-section .product-card{height:auto}
.product-card:hover{border-color:var(--brand);box-shadow:0 20px 42px -25px #3a172b59}
.product-info{border-top:1px solid var(--line)}
.product-name{min-height:36px}
.product-price{min-height:24px}
.product-card .button.small,.button.secondary,.explore,.filter-reset,.size-pill,.swatch-text,
.icon-button,.lang-button,.wish{border:1px solid var(--line-strong)}
.wish{background:#fff}
input,select,textarea{border:1px solid var(--line-strong);background:#fff}
input::placeholder,textarea::placeholder{color:#7d6d75;opacity:1}
.search{border-color:var(--line-strong);background:#fff}
.search:hover,.search:focus-within{border-color:var(--brand)}
.filter-group,.catalog-sort,.catalog-toolbar{border-color:var(--line)}
.filter-option input:not(:checked){border:2px solid var(--line-strong);background:#fff}
.filter-option:hover input:not(:checked){border-color:var(--brand)}
.empty-state{border:2px dashed var(--line-strong);background:var(--soft)}
.upload-zone{border-color:var(--line-strong)}
.admin-body{--line:#c8c8c8}

/* ---- Photo wells and phone hero, 2026-09-24 ----------------- */
/* Supplier photos have white grounds; multiply lets the well's tint show through
   instead of a white rectangle, and a drop-shadow would outline that rectangle. */
.product-photo img{filter:none;mix-blend-mode:multiply}
@media(max-width:760px){
  .hero-carousel{height:600px}
  .hero-slide{display:flex;flex-direction:column}
  .hero-slide .hero-shade{display:none}
  .hero-slide .hero-copy{order:-1;flex:none;height:auto;padding:24px 22px 18px}
  .hero-slide .hero-background{position:relative;inset:auto;flex:1;min-height:0;height:auto;object-position:50% 30%}
  .hero-controls{inset-block-end:16px}
}

/* ---- Rails, bars, navigation and desktop scale, 2026-09-24 --------------- */
/* Every moving strip is a [data-rail]; the script drifts, loops and drags it,
   so the older CSS keyframe marquees and scroll snapping are switched off. */
main{overflow-x:clip}
[data-rail]{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:none!important;animation:none!important;transform:none!important;cursor:grab;user-select:none;-webkit-user-select:none}
[data-rail]::-webkit-scrollbar{display:none}
[data-rail]>*{flex-shrink:0}
[data-rail] img{-webkit-user-drag:none}
[data-rail].is-dragging{cursor:grabbing}
.announcement-track,.beauty-ticker-track,.brand-track{width:auto!important}
.announcement-track,.beauty-ticker-track{overflow:hidden;touch-action:pan-y}
.brand-marquee{overflow:visible;cursor:auto}
.brand-track{gap:16px}
.brand-track .brand-tile:nth-child(3n+2){background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--brand) 10%,var(--card)))}
.brand-track .brand-tile:nth-child(3n){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,var(--card)),var(--card))}
/* Room above and below so a lifted card or its shadow is never sliced off. */
.category-strip,.promo-grid,.brand-track,#featured-grid{padding-block:18px 30px;margin-block:-18px -30px;padding-inline:4px}

/* Top bar: a warm gradient instead of flat black, several messages allowed. */
.announcement{background:linear-gradient(90deg,#2b0d1c,#7b1942 50%,#c81d55);color:#fff;padding:0}
.announcement-track span{padding:10px 26px;font-size:12.5px;font-weight:500;letter-spacing:.2px;white-space:nowrap}
.announcement-track i{align-self:center;color:#ffb3c9;font-style:normal;font-size:11px}

/* Ticker: a slightly tilted pink ribbon in italic display type. */
.beauty-ticker{position:relative;z-index:1;margin:40px -12px 18px;border:0;background:linear-gradient(90deg,var(--brand),#ff4f86 50%,var(--brand));color:#fff;transform:rotate(-1.1deg);box-shadow:0 22px 40px -26px #d91f59}
.beauty-ticker span{display:flex;align-items:center;gap:28px;padding:15px 28px;font:italic 500 22px/1 var(--display);letter-spacing:.4px;white-space:nowrap}
.beauty-ticker i{color:#ffd6e2;font-style:normal;font-size:15px}
[dir=rtl] .beauty-ticker{transform:rotate(1.1deg)}
[dir=rtl] .beauty-ticker span{font-style:normal}

/* Navigation band on computers. */
@media(min-width:761px){
  .main-nav{height:58px;gap:4px;font-size:14px;font-weight:500}
  .main-nav a{padding:8px 14px;border-radius:99px;transition:background .2s,color .2s}
  .main-nav a:hover,.main-nav a[aria-current=page]{background:var(--brand-soft);color:var(--brand)}
  .main-nav .nav-catalog{display:inline-flex;align-items:center;gap:8px;margin-inline-end:10px;padding:10px 18px;background:var(--ink);color:#fff;font-weight:600}
  .main-nav .nav-catalog .icon{width:16px;height:16px}
  .main-nav .nav-catalog:hover,.main-nav .nav-catalog[aria-current=page]{background:var(--brand);color:#fff}
  .main-nav .nav-new::before{content:"✦";margin-inline-end:6px;color:var(--brand)}
  .catalog-layout{grid-template-columns:300px minmax(0,1fr)}
  .filter-group summary{font-size:14px}
  .filter-option{font-size:14px;min-height:40px}
  .filter-title b,.filter-title h2{font-size:19px}
  .catalog-filters label,.catalog-filters select,.catalog-filters input{font-size:14px}
}
/* The storefront was drawn for small type; wide screens get it at a readable size. */
@media(min-width:1180px){body:not(.admin-body){zoom:1.1}}
@media(min-width:1600px){body:not(.admin-body){zoom:1.2}}

/* Maker credit: a signature card with a beating heart and a take-off plane. */
.creator-credit{display:flex;justify-content:center;padding:26px 16px;background:radial-gradient(60% 140% at 50% 0,#5a1733 0,#1a0d14 70%);border:0}
.credit-card{display:inline-flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;border-radius:99px;background:#ffffff0d;border:1px solid #ff8fb040;color:#fff!important;box-shadow:inset 0 1px 0 #ffffff14,0 20px 40px -24px #ff3f78;transition:transform .3s,border-color .3s,box-shadow .3s}
a.credit-card:hover{transform:translateY(-2px);border-color:#ff8fb0;box-shadow:inset 0 1px 0 #ffffff1f,0 24px 50px -20px #ff3f78}
.credit-heart{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#ff3f78 0,#d91f59 70%);box-shadow:0 0 0 0 #ff3f7880;animation:credit-pulse 1.8s ease-out infinite}
.credit-heart svg{width:17px;height:17px;fill:#fff;animation:credit-beat 1.8s ease-in-out infinite}
.credit-text{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.credit-text small{font:italic 12px var(--display);color:#f6c9d7}
.credit-text b{font-size:17px;letter-spacing:4px;background:linear-gradient(90deg,#fff 0,#ffb1c8 25%,#fff 50%,#ffb1c8 75%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:credit-shine 4s linear infinite}
.credit-plane{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#d91f59;margin-inline-start:4px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.credit-plane svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
a.credit-card:hover .credit-plane{transform:translate(3px,-3px) rotate(-12deg)}
[dir=rtl] a.credit-card:hover .credit-plane{transform:translate(-3px,-3px) rotate(12deg) scaleX(-1)}
[dir=rtl] .credit-plane svg{transform:scaleX(-1)}
@keyframes credit-beat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.22)}28%{transform:scale(1.08)}}
@keyframes credit-pulse{0%{box-shadow:0 0 0 0 #ff3f7880}70%,100%{box-shadow:0 0 0 12px #ff3f7800}}
@keyframes credit-shine{to{background-position:-200% 0}}
@media(max-width:760px){.creator-credit{padding:22px 12px 86px}.beauty-ticker span{font-size:17px;padding:12px 20px;gap:20px}.announcement-track span{font-size:11px;padding:8px 18px}}
@media(prefers-reduced-motion:reduce){.honor-motion .credit-heart,.honor-motion .credit-heart svg,.honor-motion .credit-text b{animation:none}}
.creator-credit a.credit-card{background:#ffffff0d;border:1px solid #ff8fb040;padding:10px 12px 10px 14px;letter-spacing:0;font-weight:inherit;box-shadow:inset 0 1px 0 #ffffff14,0 20px 40px -24px #ff3f78}
.creator-credit a.credit-card:hover{background:#ffffff14;border-color:#ff8fb0}

/* ---- Dashboard in the shop's own colours, 2026-09-24 --------------------- */
.admin-body{--brand:#d91f59;--brand-bright:#ff3f78;--brand-soft:#fff0f4;--ink:#1d1319;--muted:#76686f;--line:#eadfe4;--soft:#fbf7f9;background:var(--soft);font-size:15px}
.admin-body .button{background:var(--brand);color:#fff}
.admin-body .button:hover{background:#b8174a}
.admin-body .button.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.admin-shell{grid-template-columns:250px minmax(0,1fr)}
.admin-sidebar{background:linear-gradient(180deg,#24101b,#3b1427);color:#f7e6ed;border:0;padding:28px 18px}
.admin-sidebar .logo-image{filter:invert(1) brightness(1.2)}
.admin-sidebar .admin-tab{background:transparent;color:#e8cfd9;font-size:14px;padding:13px 14px;border-radius:12px;transition:background .2s,color .2s}
.admin-sidebar .admin-tab:hover{background:#ffffff12;color:#fff}
.admin-body .admin-sidebar .admin-tab.active{background:linear-gradient(90deg,var(--brand),#ff4f86);color:#fff;font-weight:600;box-shadow:0 12px 26px -14px #ff3f78}
.admin-sidebar .view-shop{color:#f3c3d4;font-size:13px}
.admin-top h1{font-size:30px}
.admin-top p{font-size:13px}
.admin-panel{border-radius:20px;border-color:var(--line);box-shadow:0 18px 40px -34px #3a172b66}
.admin-panel h2{font-size:21px}
.admin-section-help{font-size:13.5px;line-height:1.6}
.admin-alert{background:#fff7e6;border-color:#f3dfb3;color:#6b4d12;font-size:13px}
.admin-body label{font-size:13px}
.admin-body input,.admin-body select,.admin-body textarea{font-size:14px}
.admin-product b{font-size:14px}.admin-product small{font-size:12.5px}
.shop-status{display:flex;align-items:center;gap:14px;padding:16px 20px;margin-bottom:22px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.shop-status>div{flex:1;display:flex;flex-direction:column;gap:2px}
.shop-status small{color:var(--muted)}
.status-dot{width:12px;height:12px;border-radius:50%;background:#d9a13b;box-shadow:0 0 0 5px #d9a13b26}
.shop-status.is-open .status-dot{background:#1f9d62;box-shadow:0 0 0 5px #1f9d6226}
.admin-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-metrics .metric{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.admin-metrics .metric:first-child{background:linear-gradient(135deg,var(--brand),#ff5a8c);color:#fff;border:0}
.admin-metrics .metric:first-child small,.admin-metrics .metric:first-child span{color:#ffe3ec}
.metric-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--brand-soft);color:var(--brand);margin-bottom:8px}
.metric:first-child .metric-icon{background:#ffffff2e;color:#fff}
.metric b{font-size:26px;font-family:var(--display)}
.metric small{color:var(--muted);font-size:12px}
.admin-overview-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}
.recent-order{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.recent-order>div{display:flex;flex-direction:column}
.recent-order small{color:var(--muted)}
.order-pill{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand)}
.order-pill.status-completed{background:#e5f6ee;color:#17774a}.order-pill.status-cancelled{background:#f1eef0;color:#6f6168}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.quick-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;text-align:start;border:1px solid var(--line);border-radius:16px;background:var(--soft);cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.quick-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 16px 30px -22px #d91f59}
.quick-card .icon{color:var(--brand);width:22px;height:22px;margin-bottom:6px}
.quick-card span{font-size:12.5px;color:var(--muted)}
.admin-block-head{display:flex;align-items:center;justify-content:space-between}
.admin-block-head h3{margin:0}
#slide-list,#promo-list{counter-reset:block}
.hero-admin-slide .admin-block-head h3::after,[data-promo-index] .admin-block-head h3::after{counter-increment:block;content:" " counter(block)}
@media(max-width:1100px){.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-overview-grid{grid-template-columns:1fr}}
@media(max-width:760px){.admin-sidebar{background:linear-gradient(90deg,#24101b,#3b1427)}.quick-grid{grid-template-columns:1fr}.metric b{font-size:21px}}

/* ---- Not found, outage and empty states, 2026-09-24 ---------------------- */
.not-found-hero{max-width:640px;margin:10px auto 50px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.not-found-code{display:flex;align-items:center;gap:6px;font:500 clamp(84px,14vw,150px)/1 var(--display);color:var(--ink);letter-spacing:-4px}
.not-found-code i{display:grid;place-items:center;width:.82em;height:.82em;border-radius:50%;background:linear-gradient(135deg,var(--brand),#ff5a8c);color:#fff;box-shadow:0 24px 50px -24px var(--brand);animation:credit-beat 2.2s ease-in-out infinite}
.not-found-code .icon{width:44%;height:44%;fill:#fff;stroke:none}
.not-found-hero h1{font-size:clamp(28px,4vw,40px);margin:6px 0 0}
.not-found-hero p{color:var(--muted);margin:0;max-width:480px}
.not-found-search{width:100%;display:flex!important;margin-top:8px}
.not-found-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.not-found-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.not-found-chips a{padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:14px;transition:border-color .2s,color .2s}
.not-found-chips a:hover{border-color:var(--brand);color:var(--brand)}
.not-found-title{text-align:center;margin-bottom:22px}
.not-found .product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.outage{min-height:90vh;display:grid;place-items:center}
.outage-logo{height:56px;width:auto;margin-bottom:10px}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 24px;border:1px dashed var(--line-strong);border-radius:22px;background:linear-gradient(180deg,var(--brand-soft),var(--card))}
.empty-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 12px 26px -16px var(--brand)}
.empty-state p{font-size:15px;color:var(--ink)}
.stock-label{color:#1f8a58}
@media(max-width:760px){.not-found .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(prefers-reduced-motion:reduce){.honor-motion .not-found-code i{animation:none}}
/* Option pills: clear chosen state, struck-through when nothing is in stock. */
.detail-info .size-pill,.detail-info .swatch-text{min-height:44px;padding:10px 20px;border-radius:99px;border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);font-size:14px;font-weight:500;box-shadow:none;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.detail-info .size-pill:hover,.detail-info .swatch-text:hover{border-color:var(--brand);color:var(--brand)}
.detail-info .size-pill[aria-pressed=true],.detail-info .swatch-text[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:700;box-shadow:inset 0 0 0 1px var(--brand)}
.detail-info .size-pill[data-empty],.detail-info .swatch-text[data-empty]{color:var(--muted);text-decoration:line-through;border-style:dashed}
.detail-info .size-row,.detail-info .swatch-row{display:flex;flex-wrap:wrap;gap:10px}
.detail-info .option-head span{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.detail-info .option-head b{font-size:15px}
/* Variant rows wrap into a readable card instead of squeezing nine inputs into one line. */
.variants-editor{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.variants-editor .variant-row{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px 12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.variants-editor .variant-row input{font-size:14px}

/* ---- Living storefront: glow, motion and colour, 2026-09-24 (round 2) ---- */
:root{--glow:linear-gradient(120deg,#d91f59,#ff4f86,#ff8fb0,#c81d55,#7b1942)}

/* Header actions become soft round buttons; counts pop in brand gradient. */
@media(min-width:761px){
  .header-actions{gap:6px}
  .header-action{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 12px;border-radius:16px;transition:background .25s,color .25s,transform .25s}
  .header-action:hover{background:var(--brand-soft);color:var(--brand);transform:translateY(-2px)}
  .header-action .icon{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .header-action:hover .icon{transform:scale(1.15) rotate(-6deg)}
  .search{box-shadow:0 10px 30px -24px #d91f59;transition:box-shadow .3s,border-color .3s}
  .search:focus-within{box-shadow:0 0 0 4px #ff3f7822,0 18px 40px -24px #d91f59}
}
.header-action b{background:var(--glow)!important;background-size:200% 200%!important;animation:glow-shift 6s ease infinite;box-shadow:0 4px 12px -3px #d91f59}
.lang-button{border-radius:99px;background:linear-gradient(#fff,#fff) padding-box,var(--glow) border-box;border:1.5px solid transparent!important;color:var(--brand);transition:transform .25s,box-shadow .25s}
.lang-button:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px #d91f59}
.main-nav .nav-catalog{background:linear-gradient(120deg,#24101b,#5a1733);transition:box-shadow .3s}
.main-nav .nav-catalog:hover,.main-nav .nav-catalog[aria-current=page]{background:var(--glow);box-shadow:0 12px 26px -14px #d91f59}
.button{background-image:var(--glow);background-size:220% 100%;background-position:0 0;transition:background-position .6s,transform .25s,box-shadow .25s}
.button:hover{background-position:100% 0}
.button.secondary{background-image:none}

/* Top bar: flowing colour and twinkling stars. */
.announcement{background:linear-gradient(90deg,#2b0d1c,#7b1942,#d91f59,#ff4f86,#7b1942,#2b0d1c);background-size:300% 100%;animation:glow-flow 14s linear infinite}
.announcement-track i,.beauty-ticker i{display:inline-block;animation:twinkle 2.4s ease-in-out infinite}
.announcement-track i:nth-of-type(2n),.beauty-ticker span:nth-child(2n) i{animation-delay:1.2s}

/* Two crossed ribbons running in opposite directions. */
.ribbon-cross{position:relative;height:150px;margin-block:24px 8px;display:grid;align-items:center}
.ribbon-cross .beauty-ticker{grid-area:1/1;margin:0 -14px;overflow:hidden}
.ribbon-cross .beauty-ticker:not(.ribbon-back){transform:rotate(-2.2deg)}
.ribbon-cross .ribbon-back{transform:rotate(2.2deg);background:linear-gradient(90deg,#24101b,#5a1733,#24101b);box-shadow:0 18px 40px -24px #24101b}
.ribbon-back span{color:#ffd6e2}
.beauty-ticker:not(.ribbon-back){background:linear-gradient(90deg,#d91f59,#ff4f86,#ff8fb0,#ff4f86,#d91f59);background-size:300% 100%;animation:glow-flow 9s linear infinite}
.beauty-ticker:not(.ribbon-back)::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff55 50%,transparent 70%);background-size:250% 100%;animation:sheen 4.5s ease-in-out infinite;pointer-events:none}
[dir=rtl] .ribbon-cross .beauty-ticker:not(.ribbon-back){transform:rotate(2.2deg)}
[dir=rtl] .ribbon-cross .ribbon-back{transform:rotate(-2.2deg)}

/* Brand cards: gradient ring, monogram badge, sheen on hover. */
.brand-track .brand-card,.brand-card{position:relative;width:270px;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:16px;border-radius:24px;border:1.5px solid transparent;background:linear-gradient(135deg,#fff,#fff5f8) padding-box,linear-gradient(135deg,#f3d4df,#fff,#f3d4df) border-box;box-shadow:0 18px 36px -30px #3a172b;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.brand-card::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffffcc 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none}
.brand-card:hover{transform:translateY(-6px);background:linear-gradient(135deg,#fff,#fff0f5) padding-box,var(--glow) border-box;box-shadow:0 26px 44px -26px #d91f59}
.brand-card:hover::after{transform:translateX(120%)}
.brand-mono{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--glow);background-size:200% 200%;animation:glow-shift 8s ease infinite;color:#fff;font:600 22px/1 var(--display);letter-spacing:.5px;box-shadow:0 12px 24px -14px #d91f59;overflow:hidden}
.brand-track .brand-card:nth-child(3n+2) .brand-mono{background:linear-gradient(135deg,#24101b,#7b1942);animation:none}
.brand-track .brand-card:nth-child(3n) .brand-mono{background:linear-gradient(135deg,#ff8fb0,#d91f59);animation:none}
.brand-mono-img{width:100%;height:100%;object-fit:cover}
.brand-card .brand-tile-copy{padding:0;flex:1;min-width:0}
.brand-card .brand-tile-copy b{font-size:19px}
.brand-card .brand-tile-copy small{font-size:12px}
.brand-go{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);transition:background .3s,color .3s,transform .3s}
.brand-card .brand-go .icon{width:17px;height:17px;position:static;transform:none}
.brand-card:hover .brand-go{background:var(--brand);color:#fff;transform:translateX(3px)}
[dir=rtl] .brand-card .brand-go .icon{transform:scaleX(-1)}
[dir=rtl] .brand-card:hover .brand-go{transform:translateX(-3px)}
.brand-motion{background:radial-gradient(40% 70% at 10% 20%,#ffd3e1aa,transparent 70%),radial-gradient(40% 70% at 90% 80%,#ffe4ecaa,transparent 70%),linear-gradient(180deg,#fff7fa,#fff)}

/* Hero: slow zoom on the photo, copy rising in, progress on the active dot. */
.hero-slide.is-active .hero-background{animation:hero-zoom calc(var(--hero-interval,5s) + 1s) ease-out both}
.hero-slide.is-active .hero-copy>*{animation:rise .8s cubic-bezier(.2,.8,.3,1) both}
.hero-slide.is-active .hero-copy>:nth-child(2){animation-delay:.1s}
.hero-slide.is-active .hero-copy>:nth-child(3){animation-delay:.2s}
.hero-slide.is-active .hero-copy>:nth-child(4){animation-delay:.3s}
.hero-slide{transition:opacity .9s ease}
.hero-dots button{position:relative;overflow:hidden;transition:width .4s}
.hero-dots button.is-active{background:#f3c1d1}
.hero-dots button.is-active::after{content:"";position:absolute;inset:0;background:var(--brand);transform-origin:left;animation:dot-fill var(--hero-interval,5s) linear both}
[dir=rtl] .hero-dots button.is-active::after{transform-origin:right}
.hero-carousel:hover .hero-dots button.is-active::after{animation-play-state:paused}
.hero h1 strong{background:linear-gradient(90deg,#d91f59,#ff4f86,#c81d55,#d91f59);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glow-flow 6s linear infinite}

/* Ambient fades behind sections. */
.category-section,.collection-section,.featured-section,.brand-spotlights,.not-found{position:relative;isolation:isolate}
.category-section::before,.featured-section::before,.brand-spotlights::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#ffd3e1 0,#ffd3e100 68%);filter:blur(10px);pointer-events:none;animation:float-blob 14s ease-in-out infinite alternate}
.category-section::before{inset-inline-start:-180px;top:-120px}
.featured-section::before{inset-inline-end:-160px;top:-60px;background:radial-gradient(circle,#ffe0ea 0,#ffe0ea00 68%)}
.brand-spotlights::before{inset-inline-start:30%;bottom:-200px;animation-duration:18s}
.eyebrow{background:linear-gradient(90deg,var(--brand),#ff6f9a);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.section-heading h2::after,.discovery-heading h2::after{content:"";display:block;width:54px;height:3px;margin-top:10px;border-radius:3px;background:var(--glow);background-size:200% 100%;animation:glow-shift 5s ease infinite}

/* Footer in the same warm glow as the credit. */
.site-footer{position:relative;overflow:hidden;background:radial-gradient(50% 80% at 0% 0%,#7b194266,transparent 70%),radial-gradient(45% 70% at 100% 100%,#d91f5955,transparent 70%),linear-gradient(160deg,#1c0b14,#2f0f20 55%,#1a0a12)}
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--glow);background-size:200% 100%;animation:glow-flow 8s linear infinite}
.footer-grid h2{color:#ff9ab8!important}
.footer-grid>div>a:not(.logo){position:relative;width:fit-content;transition:color .25s,transform .25s}
.footer-grid>div>a:not(.logo)::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:100%;height:1.5px;background:#ff6f9a;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.footer-grid>div>a:not(.logo):hover{color:#fff;transform:translateX(3px)}
.footer-grid>div>a:not(.logo):hover::after{transform:scaleX(1)}
.footer-bottom{border-color:#ffffff1a!important}

/* Credit: rotating gradient halo and hearts floating up. */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.creator-credit{position:relative;overflow:hidden;background:radial-gradient(50% 160% at 50% 0,#6d1a3d 0,#1a0a12 72%)}
.credit-card{position:relative;isolation:isolate}
.credit-card::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;padding:2px;background:conic-gradient(from var(--spin),#ff3f78,#ffb1c8,#7b1942,#ff3f78);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin-halo 5s linear infinite}
.credit-heart{position:relative}
.credit-heart::before,.credit-heart::after{content:"\2665";position:absolute;left:50%;top:0;color:#ff8fb0;font-size:12px;opacity:0;animation:float-heart 3s ease-out infinite}
.credit-heart::after{left:20%;font-size:9px;animation-delay:1.5s;color:#ffd0dd}

/* Scroll reveal. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--reveal-delay,0ms),transform .8s cubic-bezier(.2,.8,.3,1) var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}

@keyframes glow-flow{to{background-position:300% 0}}
@keyframes glow-shift{50%{background-position:100% 100%}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(90deg);opacity:.55}}
@keyframes sheen{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
@keyframes hero-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes float-blob{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes spin-halo{to{--spin:360deg}}
@keyframes float-heart{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-34px) scale(1.1)}}

@media(max-width:760px){
  .ribbon-cross{height:112px;margin-block:16px 0}
  .brand-track .brand-card,.brand-card{width:230px;padding:13px}
  .brand-mono{width:48px;height:48px;font-size:18px;border-radius:15px}
  .brand-card .brand-tile-copy b{font-size:16px}
  .category-section::before,.featured-section::before,.brand-spotlights::before{width:320px;height:320px}
}
@media(prefers-reduced-motion:reduce){.honor-motion .announcement,.honor-motion .beauty-ticker,.honor-motion .beauty-ticker::after,.honor-motion .brand-mono,.honor-motion .header-action b,.honor-motion .hero h1 strong,.honor-motion .credit-card::before,.honor-motion .credit-heart::before,.honor-motion .credit-heart::after,.honor-motion .section-heading h2::after,.honor-motion .discovery-heading h2::after,.honor-motion .site-footer::before,.honor-motion .announcement-track i,.honor-motion .beauty-ticker i,.honor-motion .hero-slide.is-active .hero-background,.honor-motion .hero-slide.is-active .hero-copy>*,.honor-motion .category-section::before,.honor-motion .featured-section::before,.honor-motion .brand-spotlights::before{animation:none!important}.honor-motion .hero-dots button.is-active::after{animation:none;transform:none}
}
.brand-card .brand-tile-copy b{white-space:normal;line-height:1.1}

/* ---- Round 3: brighter bands, brand wordmarks, phone menu, 2026-09-24 ---- */
/* Brighter top bar and back ribbon, as the owner preferred. */
.announcement{background:linear-gradient(90deg,#d91f59,#ff4f86,#ff8fb0,#ff4f86,#d91f59,#ff4f86);background-size:300% 100%}
.announcement-track span{font-weight:600;text-shadow:0 1px 8px #a0103f55}
.announcement-track i{color:#fff}
.ribbon-cross .ribbon-back{background:linear-gradient(90deg,#ffd6e2,#fff0f5,#ffc2d4,#fff0f5,#ffd6e2);background-size:300% 100%;animation:glow-flow 12s linear infinite;box-shadow:0 18px 40px -26px #d91f59}
.ribbon-back span{color:#c81d55}
.ribbon-back i{color:#ff4f86}
.ribbon-cross.is-single{height:auto;padding-block:18px}

/* Brand cards: each brand typed like its own logo. */
.brand-track .brand-card,.brand-card{width:250px;min-height:128px;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 18px;text-align:center}
.brand-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;color:var(--ink);line-height:1;transition:transform .4s cubic-bezier(.2,.8,.3,1),color .3s}
.brand-logo b{display:block;white-space:nowrap}
.brand-logo small{display:block;margin-top:6px;font:600 9px/1 var(--font);letter-spacing:.45em;padding-inline-start:.45em}
.brand-logo.has-image{width:100%;height:60px}
.brand-logo-img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.wm-spaced b{font:800 21px/1 var(--font);letter-spacing:.2em;padding-inline-start:.2em;text-transform:uppercase}
.wm-serif b{font:600 25px/1 var(--display);letter-spacing:.12em;padding-inline-start:.12em;text-transform:uppercase}
.wm-heavy b{font:900 27px/1 var(--font);letter-spacing:-.02em;text-transform:uppercase}
.wm-light b{font:300 30px/1 var(--font);letter-spacing:.04em}
.wm-clean b{font:600 24px/1 var(--font);letter-spacing:-.01em}
.brand-meta{font-size:11.5px;color:var(--muted);letter-spacing:.3px}
.brand-card:hover .brand-logo{transform:scale(1.07);color:var(--brand)}
.brand-card .brand-mono,.brand-card .brand-go{display:none}
.brand-directory-art .brand-logo{min-height:90px}
.brand-directory-art .wm-spaced b,.brand-directory-art .wm-serif b{font-size:26px}
.brand-directory-art .wm-heavy b,.brand-directory-art .wm-light b{font-size:32px}
@media(max-width:760px){
  .brand-track .brand-card,.brand-card{width:200px;min-height:108px;padding:16px 12px}
  .wm-spaced b{font-size:16px}.wm-serif b{font-size:19px}.wm-heavy b{font-size:21px}.wm-light b{font-size:23px}.wm-clean b{font-size:19px}
}

/* Phone header: logo truly centred between menu and actions. */
@media(max-width:760px){
  .header-main{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
  .header-main>.mobile-menu{justify-self:start}
  .header-main>.logo{justify-self:center}
  .header-main>.header-actions{justify-self:end}
}

/* Maker credit centred inside and out. */
.creator-credit{justify-content:center;text-align:center}
.credit-card{margin-inline:auto}
.credit-text{align-items:center;text-align:center}

/* Phone menu. */
#mobile-drawer{padding:0;width:min(400px,92vw);border:0;background:#fff;box-shadow:24px 0 70px #3a172b44;overflow-y:auto}
#mobile-drawer[open]{animation:drawer-in .35s cubic-bezier(.2,.8,.3,1)}
[dir=rtl] #mobile-drawer[open]{animation-name:drawer-in-rtl}
#mobile-drawer::backdrop{background:#2b0d1c66;backdrop-filter:blur(3px)}
#mobile-drawer .drawer-heading{margin:0;padding:22px 18px 26px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#d91f59,#ff4f86 55%,#ff8fb0);background-size:200% 200%;animation:glow-shift 8s ease infinite;border-radius:0 0 26px 26px}
#mobile-drawer .drawer-heading .logo-image{filter:brightness(0) invert(1);height:44px;width:auto}
#mobile-drawer .drawer-heading .icon-button{background:#ffffff33;border:1px solid #ffffff66!important;color:#fff;border-radius:50%}
#mobile-drawer .drawer-search{margin:-20px 16px 16px;position:relative;background:#fff;box-shadow:0 14px 30px -18px #d91f59}
.drawer-quicks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 8px}
.drawer-quick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;font-size:11.5px;font-weight:600;text-align:center}
.drawer-quick span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);transition:transform .25s,background .25s,color .25s}
.drawer-quick:hover span,.drawer-quick:active span{background:var(--brand);color:#fff;transform:translateY(-2px)}
.drawer-title{margin:14px 16px 10px;font:600 13px var(--font);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.drawer-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px}
.drawer-cat{position:relative;height:92px;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;padding:10px 12px;isolation:isolate}
.drawer-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.drawer-cat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,#2b0d1ccc)}
.drawer-cat b{color:#fff;font:600 16px var(--display)}
.drawer-cat:hover img{transform:scale(1.08)}
.drawer-brands{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px}
.drawer-brands a{display:grid;place-items:center;min-height:62px;padding:8px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#fff,#fff5f8)}
.drawer-brands .brand-logo{min-height:0}
.drawer-brands .brand-logo b{font-size:14px!important}
.drawer-brands .brand-logo small{font-size:7px;margin-top:4px}
.drawer-brands .brand-logo-img{max-height:40px}
.drawer-contact{display:flex;flex-direction:column;gap:6px;margin:20px 16px 24px;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--brand-soft),#fff);font-size:13px;color:var(--muted)}
.drawer-contact a{color:var(--ink);font-weight:600}
.drawer-lang{align-self:flex-start;margin-top:6px;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--brand)!important}
@keyframes drawer-in{from{transform:translateX(-100%)}}
@keyframes drawer-in-rtl{from{transform:translateX(100%)}}
.brand-logo.is-long b{font-size:.74em}.brand-card .brand-logo.is-long b{font-size:17px;letter-spacing:.06em}@media(max-width:760px){.brand-card .brand-logo.is-long b{font-size:13px}}

/* ---- Round 4: phone bar, phone banners, cities, orders, 2026-09-24 ------- */
@media(max-width:760px){
  /* Floating glass bottom bar; the current page sits in a pink pill. */
  .bottom-nav{inset-inline:10px;inset-block-end:calc(8px + env(safe-area-inset-bottom));padding:6px;border:1px solid #ffffffb3;border-radius:24px;background:#ffffffd9;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 18px 40px -18px #7b194266,0 2px 8px #3a172b14}
  .bottom-nav a{flex:1;min-height:52px;gap:3px;border-radius:18px;font-size:10.5px;font-weight:600;color:#8a7880;transition:color .25s,background .25s}
  .bottom-nav a i{position:relative;display:grid;place-items:center;width:40px;height:30px;border-radius:14px;font-style:normal;transition:background .3s,transform .3s cubic-bezier(.3,1.6,.5,1)}
  .bottom-nav .icon{width:21px;height:21px}
  .bottom-nav a[aria-current=page]{color:var(--brand)}
  .bottom-nav a[aria-current=page] i{background:var(--glow);background-size:200% 200%;animation:glow-shift 6s ease infinite;color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px -8px #d91f59}
  .bottom-nav a:active i{transform:scale(.9)}
  .bottom-nav b{position:absolute;inset-block-start:-4px;inset-inline-end:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font-size:9.5px;line-height:1;color:#fff;background:var(--glow);box-shadow:0 0 0 2px #fff}
  .bottom-nav b[hidden]{display:none}
  body{padding-bottom:92px}

  /* Phone banners: three layouts chosen in the dashboard. */
  .hero-carousel.hero-m-card,.hero-carousel.hero-m-overlay{height:580px}
  .hero-m-card .hero-slide,.hero-m-overlay .hero-slide{display:block}
  .hero-m-card .hero-slide .hero-background,.hero-m-overlay .hero-slide .hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  .hero-m-card .hero-slide .hero-shade{display:block;background:linear-gradient(180deg,transparent 45%,#ffe3ec99 75%,#fff0f4 100%)}
  .hero-m-card .hero-slide .hero-copy{position:absolute;inset-inline:12px;inset-block-end:74px;width:auto;height:auto;padding:18px 18px 20px;border-radius:24px;background:#ffffffc7;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid #ffffffcc;box-shadow:0 24px 44px -24px #7b194299}
  .hero-m-card .hero-copy h1{font-size:30px;margin-bottom:8px}
  .hero-m-card .hero-copy p{font-size:13px;margin-bottom:14px}
  .hero-m-overlay .hero-slide .hero-shade{display:block;background:linear-gradient(0deg,#2b0d1cf2 0%,#2b0d1cb3 34%,#2b0d1c00 62%)}
  .hero-m-overlay .hero-slide .hero-copy{position:absolute;inset-inline:0;inset-block-end:70px;width:auto;height:auto;padding:0 22px;background:none}
  .hero-m-overlay .hero-copy h1{color:#fff;font-size:34px;margin-bottom:8px}
  .hero-m-overlay .hero-copy .eyebrow{background:none;-webkit-text-fill-color:#ffc2d4;color:#ffc2d4}
  .hero-m-overlay .hero-copy h1 strong{background:linear-gradient(90deg,#ff8fb0,#ffd6e2,#ff4f86,#ff8fb0);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
  .hero-m-overlay .hero-copy p{color:#ffe9f0;font-size:13px;margin-bottom:14px}
  .hero-m-overlay .hero-controls>button{background:#ffffff33;border-color:#ffffff66;color:#fff;backdrop-filter:blur(8px)}
  .hero-m-overlay .hero-dots{background:#ffffff33}
  .hero-m-stacked .hero-slide .hero-background{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%);margin-top:-40px}
  .hero-m-stacked .hero-slide .hero-copy{position:relative;z-index:2}
}

/* Checkout: delivery cities as cards. */
.city-picker{border:0;padding:0;margin:0;min-width:0}
.city-picker legend{font-weight:600;margin-bottom:8px;font-size:14px}
.city-note{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--brand-soft);font-size:13.5px}
.city-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.city-option{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:14px 14px 12px;border:1.5px solid var(--line-strong);border-radius:18px;background:var(--card);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.city-option:hover{border-color:var(--brand);transform:translateY(-2px)}
.city-option input{position:absolute;opacity:0;pointer-events:none}
.city-option:has(input:checked){border-color:var(--brand);background:linear-gradient(135deg,#fff,var(--brand-soft));box-shadow:0 0 0 1px var(--brand),0 16px 30px -22px #d91f59}
.city-option:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
.city-name{font:600 18px var(--display)}
.city-fee{font-weight:700;color:var(--brand)}
.city-option small{grid-column:1/-1;color:var(--muted);font-size:12px}

/* Dashboard: cities and orders. */
.zone-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft);margin-bottom:10px}
.zone-row .row-actions{grid-column:1/-1}
.order-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.order-chip{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:13px;cursor:pointer}
.order-chip b{margin-inline-start:4px;color:var(--brand)}
.order-chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.order-chip[aria-pressed=true] b{color:#ff8fb0}
#order-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
#order-list:not([data-filter=all]) .admin-order{display:none}
#order-list[data-filter=new] [data-status=new],#order-list[data-filter=called] [data-status=called],#order-list[data-filter=confirmed] [data-status=confirmed],#order-list[data-filter=preparing] [data-status=preparing],#order-list[data-filter=ready] [data-status=ready],#order-list[data-filter=completed] [data-status=completed],#order-list[data-filter=cancelled] [data-status=cancelled]{display:flex!important}
.admin-order{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.admin-order[data-status=new]{border-color:var(--brand);box-shadow:0 14px 30px -24px #d91f59}
.admin-order header{margin:0;align-items:flex-start}
.admin-order header>div{display:flex;flex-direction:column}
.admin-order header small{color:var(--muted);font-size:12px}
.order-customer{display:flex;flex-direction:column;font-size:13.5px}
.order-customer span{color:var(--muted)}
.order-items{list-style:none;margin:0;padding:10px 0;border-block:1px dashed var(--line);display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.order-items li{display:flex;justify-content:space-between;gap:10px}
.order-items small{color:var(--brand);font-weight:600}
.order-note{margin:0;padding:8px 12px;border-radius:12px;background:#fff7e6;font-size:13px;color:#6b4d12}
.order-total{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.order-total b{font:600 20px var(--display);color:var(--ink)}
.admin-order footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-order footer select{flex:1;min-width:140px;margin:0}
.row-button.whatsapp{background:#e8f8ef;color:#128c4a;border-color:#bfe8d0}
.order-pill.status-new{background:var(--brand);color:#fff}
.order-pill.status-ready{background:#e6f0ff;color:#2556a8}
.order-pill.status-preparing,.order-pill.status-confirmed{background:#fff3df;color:#94620c}
@media(max-width:760px){.hero-carousel.hero-m-card,.hero-carousel.hero-m-overlay{height:540px}.hero-m-card .hero-slide .hero-background,.hero-m-overlay .hero-slide .hero-background{object-position:54% 30%}}
.hero-slide picture{display:contents}

/* ---- Round 5, 2026-09-24 ------------------------------------------------ */
/* "Un univers" cards at half their former height; one swipeable row on phones. */
.brand-feature{min-height:150px}
.brand-feature-photo img{object-fit:cover}
.brand-feature-copy{padding:18px 16px;gap:6px}
.brand-feature-copy strong{font-size:clamp(20px,1.7vw,26px)}
@media(max-width:760px){
  .brand-feature-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:-14px;padding:4px 14px 12px}
  .brand-feature-grid::-webkit-scrollbar{display:none}
  .brand-feature,.brand-feature:last-child{display:flex;flex:0 0 78%;min-height:128px;scroll-snap-align:start}
}
/* Banner arrows and dots centred on phones. */
@media(max-width:760px){.hero-controls{inset-inline:0;justify-content:center}}
/* Credit hearts stay inside the card. */
.credit-heart::before,.credit-heart::after{top:6px;font-size:9px}
.credit-heart::after{font-size:7px}
@keyframes float-heart{0%{opacity:0;transform:translate(-50%,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px) scale(1)}}

/* Dashboard: section tabs, tables, dialogs, product grid, folding orders. */
.section-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;padding:6px;border-radius:18px;background:#fff;border:1px solid var(--line);width:fit-content;max-width:100%}
.section-tabs button{padding:10px 16px;border:0;border-radius:13px;background:transparent;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.section-tabs button:hover{color:var(--brand)}
.section-tabs button[aria-pressed=true]{background:var(--glow);background-size:200% 100%;color:#fff;box-shadow:0 10px 22px -14px #d91f59}
[data-sectioned] [data-section]{display:none!important}
[data-sectioned][data-active=banners] [data-section=banners],[data-sectioned][data-active=bands] [data-section=bands],[data-sectioned][data-active=collections] [data-section=collections],[data-sectioned][data-active=titles] [data-section=titles],[data-sectioned][data-active=motion] [data-section=motion],[data-sectioned][data-active=identity] [data-section=identity],[data-sectioned][data-active=contact] [data-section=contact],[data-sectioned][data-active=texts] [data-section=texts],[data-sectioned][data-active=orders] [data-section=orders],[data-sectioned][data-active=cities] [data-section=cities],[data-sectioned][data-active=categories] [data-section=categories],[data-sectioned][data-active=brands] [data-section=brands]{display:block!important}
[data-sectioned][data-active=banners] .form-grid[data-section=banners],[data-sectioned][data-active=bands] .form-grid[data-section=bands],[data-sectioned][data-active=titles] .form-grid[data-section=titles],[data-sectioned][data-active=motion] .form-grid[data-section=motion],[data-sectioned][data-active=identity] .form-grid[data-section=identity],[data-sectioned][data-active=contact] .form-grid[data-section=contact],[data-sectioned][data-active=texts] .form-grid[data-section=texts],[data-sectioned][data-active=orders] .form-grid[data-section=orders]{display:grid!important}
[data-sectioned][data-active=cities] .settings-save{display:none}
.sticky-save{position:sticky;bottom:16px;z-index:5;display:flex;justify-content:flex-end;margin-top:16px;pointer-events:none}
.sticky-save .button{pointer-events:auto;min-width:240px;box-shadow:0 18px 36px -18px #d91f59}
#settings-form{gap:0}
.switch-label span{display:flex;flex-direction:column}.switch-label small{color:var(--muted)}
.admin-dialog{width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:26px;background:transparent;overflow:auto}
.admin-dialog::backdrop{background:#2b0d1c73;backdrop-filter:blur(4px)}
.admin-dialog[open]{animation:dialog-in .3s cubic-bezier(.2,.8,.3,1)}
.admin-dialog>.admin-panel{margin:0;border:0;border-radius:26px}
.dialog-head{position:sticky;top:-24px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-24px -24px 18px;padding:18px 24px;background:linear-gradient(135deg,#fff,var(--brand-soft));border-bottom:1px solid var(--line);border-radius:26px 26px 0 0}
.dialog-head h2{margin:0}
.dialog-head .icon-button{border-radius:50%;width:40px;height:40px;display:grid;place-items:center;background:#fff}
.admin-dialog .row-picker{display:none}
@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
.admin-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.admin-product-card{display:flex;flex-direction:column;text-align:start;padding:0;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s}
.admin-product-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 20px 36px -26px #d91f59}
.admin-product-card[hidden]{display:none}
.apc-photo{height:150px;display:grid;place-items:center;background:linear-gradient(145deg,#fff 30%,var(--brand-soft))}
.apc-photo img{max-height:130px;max-width:80%;object-fit:contain;mix-blend-mode:multiply}
.apc-body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 6px}
.apc-body small{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.apc-body b{font-size:15px;line-height:1.3}
.apc-price{font-weight:700;color:var(--brand)}
.apc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.apc-tags i{font-style:normal;font-size:11px;font-weight:600;padding:3px 8px;border-radius:99px;background:var(--soft);border:1px solid var(--line)}
.apc-tags i.ok{background:#e5f6ee;border-color:#c5ead7;color:#17774a}
.apc-tags i.off{background:#f1eef0;color:#6f6168}
.apc-tags i.warn{background:#fff3df;border-color:#f3dfb3;color:#94620c}
.apc-tags i.star{background:var(--brand-soft);border-color:#f3c1d1;color:var(--brand)}
.apc-edit{margin:8px 14px 14px;padding:9px;border-radius:12px;text-align:center;font-size:13px;font-weight:600;background:var(--soft);color:var(--ink);transition:background .2s,color .2s}
.admin-product-card:hover .apc-edit{background:var(--brand);color:#fff}
.table-wrap{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:16px}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{padding:12px 14px;text-align:start;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line)}
.admin-table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tbody tr:hover{background:#fff8fb}
.admin-table td>small{display:block;color:var(--muted);font-size:12px}
.table-thumb{display:block;width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--soft)}
.table-logo .brand-logo{min-height:0;align-items:flex-start}
.table-logo .brand-logo b{font-size:15px!important}
.table-logo .brand-logo small{font-size:7px;margin-top:3px}
.table-logo .brand-logo-img{max-height:36px}
.table-actions{white-space:nowrap;text-align:end}
.table-actions .row-button{margin-inline-start:4px}
details.admin-order{display:block;padding:0;gap:0;border-radius:16px;overflow:hidden}
#order-list{display:flex;flex-direction:column;gap:8px}
#order-list[data-filter=new] [data-status=new],#order-list[data-filter=called] [data-status=called],#order-list[data-filter=confirmed] [data-status=confirmed],#order-list[data-filter=preparing] [data-status=preparing],#order-list[data-filter=ready] [data-status=ready],#order-list[data-filter=completed] [data-status=completed],#order-list[data-filter=cancelled] [data-status=cancelled]{display:block!important}
.admin-order summary{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.6fr) auto auto 24px;gap:14px;align-items:center;min-height:64px;padding:10px 16px;list-style:none;cursor:pointer}
.admin-order summary::-webkit-details-marker{display:none}
.admin-order summary:hover{background:#fff8fb}
.order-id,.order-who{display:flex;flex-direction:column;min-width:0}
.order-id small,.order-who small{color:var(--muted);font-size:12px}
.order-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-sum{font:600 17px var(--display)}
.order-chevron .icon{width:18px;height:18px;color:var(--muted);transition:transform .25s}
details[open] .order-chevron .icon{transform:rotate(90deg)}
.order-body{display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px;border-top:1px dashed var(--line)}
@media(max-width:760px){
  .admin-order summary{grid-template-columns:1fr auto 20px;grid-template-areas:"id pill chev" "who sum chev"}
  .order-id{grid-area:id}.order-who{grid-area:who}.order-sum{grid-area:sum}
  .admin-order summary .order-pill{grid-area:pill;justify-self:end}
  .order-chevron{grid-area:chev}
  .section-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .section-tabs button{white-space:nowrap}
  .admin-table{font-size:13px}
}

/* ---- Round 6, 2026-09-24 ------------------------------------------------ */
/* Options builder: kinds first, then only their columns. */
.options-builder{display:flex;flex-direction:column;gap:12px}
.option-types{display:flex;flex-wrap:wrap;gap:10px}
.type-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:16px;background:#fff;cursor:pointer;font-weight:600;font-size:14px;transition:border-color .2s,background .2s,transform .15s}
.type-chip:hover{border-color:var(--brand)}
.type-chip:active{transform:scale(.97)}
.type-chip input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
.type-chip:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.type-chip input[data-extra-name]{width:170px;min-height:34px;padding:6px 10px;font-weight:500}
.type-chip:not(:has(input:checked)) input[data-extra-name]{display:none}
.option-generator{border:1px dashed var(--brand);border-radius:16px;background:#fffafb;padding:0 14px}
.option-generator summary{padding:12px 0;font-weight:700;color:var(--brand);cursor:pointer}
.option-generator .form-grid{padding-bottom:14px}
.options-builder:not(:has([data-axis-toggle=shade]:checked)) .gen-shade,
.options-builder:not(:has([data-axis-toggle=size]:checked)) .gen-size,
.options-builder:not(:has([data-axis-toggle=extra]:checked)) .gen-extra{display:none}
#variants-editor:not([data-axes~=shade]) .vf-shade,
#variants-editor:not([data-axes~=size]) .vf-size,
#variants-editor:not([data-axes~=extra]) .vf-extra{display:none}
#variants-editor[data-axes=""] .variant-row,#variants-editor[data-axes=""]+[data-add-variant]{display:none}
.variants-editor .variant-row{position:relative;padding-inline-end:48px}
.vr-remove{position:absolute;inset-inline-end:10px;top:10px;width:30px;height:30px;padding:0;border-radius:50%}

/* Playful presses everywhere: buttons squash, cards dip, tabs pop. */
.button,.row-button,.edit-button,.icon-button,.admin-tab,.section-tabs button,.order-chip,.quick-card,.admin-product-card,.size-pill,.swatch,.city-option,.header-action,.lang-button,.category,.promo-card,.brand-card,.product-card .button.small,.wish,.hero-controls>button,.bottom-nav a{-webkit-tap-highlight-color:transparent}
.button:active,.row-button:active,.edit-button:active,.order-chip:active,.section-tabs button:active,.size-pill:active,.lang-button:active,.hero-controls>button:active,.wish:active{transform:scale(.94)!important;transition-duration:.08s!important}
.admin-product-card:active,.quick-card:active,.city-option:active,.brand-card:active,.promo-card:active,.category:active{transform:scale(.97)!important;transition-duration:.08s!important}
.admin-tab{transition:background .25s,color .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.admin-tab:hover{transform:translateX(4px)}
[dir=rtl] .admin-tab:hover{transform:translateX(-4px)}
.admin-tab .icon{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.admin-tab:hover .icon,.admin-tab.active .icon{transform:scale(1.15) rotate(-8deg)}
.section-tabs button[aria-pressed=true]{animation:tab-pop .35s cubic-bezier(.3,1.6,.5,1)}
.order-chip[aria-pressed=true]{animation:tab-pop .35s cubic-bezier(.3,1.6,.5,1)}
.row-button{transition:background .2s,color .2s,border-color .2s,transform .2s}
.row-button:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.row-button.danger:hover{background:#fdecef;color:#b3261e;border-color:#f0b8c2}
.edit-button{transition:background .2s,color .2s,transform .2s}
.edit-button:hover{color:var(--brand);transform:translateY(-1px)}
.wish{transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s}
.wish:hover{transform:scale(1.12)}
.wish[aria-pressed=true]{background:var(--brand);color:#fff;border-color:var(--brand);animation:heart-pop .45s cubic-bezier(.3,1.6,.5,1)}
.wish[aria-pressed=true] .icon{fill:currentColor}
.button:hover .icon{transform:translateX(3px)}
[dir=rtl] .button:hover .icon{transform:translateX(-3px) scaleX(-1)}
.admin-order summary{transition:background .2s}
.admin-order[open]{box-shadow:0 18px 36px -28px #d91f59}
@keyframes tab-pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes heart-pop{0%{transform:scale(.7)}50%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Product photos beside names in orders, overview and checkout. */
.line-thumb{flex:none;width:42px;height:42px;border-radius:12px;object-fit:contain;background:linear-gradient(145deg,#fff,var(--brand-soft));border:1px solid var(--line);mix-blend-mode:normal}
.order-items li>span{display:flex;align-items:center;gap:10px}
.order-items li>span>span{display:flex;flex-direction:column}
.order-thumbs{display:flex;margin-inline-start:4px}
.order-thumbs img{width:34px;height:34px;border-radius:50%;object-fit:contain;background:#fff;border:2px solid #fff;box-shadow:0 2px 6px #3a172b22;margin-inline-start:-10px}
.order-thumbs img:first-child{margin-inline-start:0}
.admin-order summary{grid-template-columns:minmax(120px,.8fr) auto minmax(0,1.5fr) auto auto 24px}
.summary-line{display:flex;align-items:center;gap:10px;margin:6px 0}
.summary-line .line-thumb{width:46px;height:46px}
.summary-line span{flex:1;font-size:13.5px}
.summary-line small{display:block;color:var(--brand);font-weight:600}

/* Catalogue: shoppers choose 2, 3 or 4 per row (1 or 2 on phones). */
.grid-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:#fff}
.grid-switch button{width:36px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,transform .15s}
.grid-switch button:hover{color:var(--brand)}
.grid-switch button:active{transform:scale(.9)}
.grid-switch button[aria-pressed=true]{background:var(--brand);color:#fff}
.grid-switch svg{width:18px;height:18px}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
#catalog-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#catalog-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#catalog-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:760px){
  .grid-switch [data-cols="3"],.grid-switch [data-cols="4"]{display:none}
  #catalog-grid[data-cols="1"]{grid-template-columns:1fr!important}
  #catalog-grid[data-cols="3"],#catalog-grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(min-width:761px){.grid-switch [data-cols="1"]{display:none}#catalog-grid[data-cols="1"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.recent-order{grid-template-columns:minmax(0,1fr) auto auto auto}
/* Dashboard language switch. */
html[lang=ar] .when-fr,html:not([lang=ar]) .when-ar{display:none}
.admin-top-actions{display:flex;align-items:center;gap:10px}
.admin-login-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}
.admin-login-top .logo{margin:0}
.admin-lang{min-width:84px;min-height:42px;font-size:14px}
html[lang=ar] .admin-body{font-family:var(--font)}
html[lang=ar] .admin-sidebar .admin-tab,html[lang=ar] .admin-body label,html[lang=ar] .admin-body button{letter-spacing:0}
[dir=rtl] .order-chevron .icon{transform:scaleX(-1)}[dir=rtl] details[open] .order-chevron .icon{transform:rotate(90deg)}

/* ---- Round 7, 2026-09-24 ------------------------------------------------ */
/* Catalogue per-row choice: 1, 2 or 3 on phones; 2, 3 or 4 on computers. */
@media(max-width:760px){
  .grid-switch [data-cols="3"]{display:grid}
  .grid-switch [data-cols="4"]{display:none}
  #catalog-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  #catalog-grid[data-cols="3"] .product-info{padding:8px}
  #catalog-grid[data-cols="3"] .product-name{font-size:11.5px;min-height:0}
  #catalog-grid[data-cols="3"] .brand-name{font-size:8px;letter-spacing:.6px}
  #catalog-grid[data-cols="3"] .product-price{font-size:12px}
  #catalog-grid[data-cols="3"] .button.small{font-size:0;min-height:34px;padding:0}
  #catalog-grid[data-cols="3"] .button.small .icon{width:17px;height:17px;margin:0}
  #catalog-grid[data-cols="3"] .wish{width:30px;height:30px}
  #catalog-grid[data-cols="1"] .product-card{flex-direction:row}
  #catalog-grid[data-cols="1"] .product-photo{width:42%;flex:none;aspect-ratio:1}
  #catalog-grid[data-cols="1"] .product-info{border-top:0;border-inline-start:1px solid var(--line)}
}

/* Phone menu: brand names never spill out of their tiles. */
.drawer-brands a{min-width:0;overflow:hidden}
.drawer-brands .brand-logo{max-width:100%}
.drawer-brands .brand-logo b{white-space:normal;text-align:center;line-height:1.15;overflow-wrap:anywhere}
.drawer-brands .brand-logo.is-long b{font-size:11px!important;letter-spacing:.04em}
.drawer-brands .wm-spaced b{letter-spacing:.12em}

/* Usage bars on the overview. */
.usage-card{margin-bottom:22px}
.usage-plan{font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;background:#e5f6ee;color:#17774a}
.usage-row{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.usage-head{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.usage-head span{color:var(--muted);font-variant-numeric:tabular-nums}
.usage-bar{height:12px;border-radius:99px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.usage-bar i{display:block;height:100%;border-radius:inherit;background:var(--glow);background-size:200% 100%;animation:glow-shift 6s ease infinite}
.usage-bar.is-high i{background:linear-gradient(90deg,#e8a33b,#d9412b)}
.usage-row small{color:var(--muted);font-size:12px}
.row-button.danger{color:#b3261e}

/* Dashboard on phones: content first, navigation in a bottom bar like the shop's. */
@media(max-width:760px){
  .admin-body{padding-bottom:96px}
  .admin-sidebar{position:fixed!important;inset-inline:8px;inset-block-end:calc(8px + env(safe-area-inset-bottom));inset-block-start:auto;z-index:50;height:auto;padding:6px!important;border-radius:24px;background:#24101bf2!important;backdrop-filter:blur(14px);box-shadow:0 18px 40px -16px #24101b99}
  .admin-sidebar nav{display:grid!important;grid-template-columns:repeat(6,1fr);gap:2px!important;margin:0!important;overflow:visible!important}
  .admin-sidebar .admin-tab{flex-direction:column;justify-content:center;gap:4px;padding:8px 2px!important;min-height:56px;font-size:9.5px!important;text-align:center;line-height:1.1;white-space:normal!important;border-radius:16px}
  .admin-sidebar .admin-tab .icon{width:21px;height:21px}
  .admin-sidebar .admin-tab:hover{transform:none}
  .admin-main{padding:16px 12px 20px!important}
  .admin-top{flex-wrap:wrap;gap:10px;margin-bottom:16px}
  .admin-top h1{font-size:24px!important}
  .admin-top-actions{width:100%;justify-content:space-between}
  .admin-top-actions .button{flex:1}
  .admin-metrics{grid-template-columns:1fr 1fr!important;gap:10px}
  .admin-metrics .metric{padding:14px}
  .admin-panel{padding:16px!important;border-radius:18px}
  .shop-status{flex-wrap:wrap}
  .admin-product-grid{grid-template-columns:1fr 1fr;gap:10px}
  .apc-photo{height:120px}
  .admin-dialog{width:100vw;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:26px 26px 0 0}
  .admin-dialog[open]{animation:sheet-in .35s cubic-bezier(.2,.8,.3,1)}
  .dialog-head{top:-16px;margin:-16px -16px 16px;padding:14px 16px}
  .sticky-save{bottom:92px}
  .sticky-save .button{width:100%;min-width:0}
  .table-actions .row-button{padding:6px 8px;font-size:12px}
  .order-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .order-chip{white-space:nowrap}
  .admin-order footer .row-button{flex:1 1 auto;text-align:center}
  .toast{bottom:100px}
}
@keyframes sheet-in{from{transform:translateY(40%);opacity:.4}}
[data-sectioned][data-active=blocked] [data-section=blocked]{display:block!important}
/* Finger swipes must be allowed sideways on strips that scroll natively (an old rule said pan-y only). */
.category-strip[data-rail],.promo-grid[data-rail],.brand-track[data-rail],#featured-grid[data-rail],.brand-feature-grid{touch-action:pan-x pan-y}
@media(max-width:760px){#catalog-grid[data-cols="3"] .product-name{font-size:12px!important;line-height:1.25!important;min-height:0!important}#catalog-grid[data-cols="3"] .product-price{font-size:12.5px!important;min-height:0!important}#catalog-grid[data-cols="3"] .brand-name{font-size:8px!important}#catalog-grid[data-cols="3"] .product-photo{padding:8px!important}#catalog-grid[data-cols="3"] .card-option-slot{min-height:12px}}

/* ---- Round 8, 2026-09-25 ------------------------------------------------ */
/* Sticky header: stays at the top and turns glassy and compact once scrolled. */
.site-header{position:sticky;top:0;z-index:45;background:#ffffffeb;transition:box-shadow .3s,background .3s}
body.is-scrolled .site-header{background:#ffffffd6;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 14px 34px -24px #7b1942}
@media(min-width:761px){
  .header-main{transition:height .3s}
  body.is-scrolled .header-main{height:74px}
  body.is-scrolled .main-nav{height:48px}
}
@media(max-width:760px){
  .mobile-search{transition:max-height .3s,opacity .25s,margin .3s,padding .3s;max-height:80px;overflow:hidden}
  body.is-scrolled .mobile-search{max-height:0;opacity:0;margin-block:0;padding-block:0}
  body.is-scrolled .header-main{height:60px}
  .mobile-menu,.header-actions .header-action{transition:background .3s,color .3s,box-shadow .3s,transform .3s}
  body.is-scrolled .mobile-menu{background:var(--glow);background-size:200% 200%;animation:glow-shift 6s ease infinite;color:#fff;border-color:transparent!important;box-shadow:0 10px 22px -10px #d91f59}
  body.is-scrolled .header-actions .header-action[href*="/cart"]{background:var(--glow);background-size:200% 200%;color:#fff;border-radius:14px;padding:8px;box-shadow:0 10px 22px -10px #d91f59}
  body.is-scrolled .header-actions .header-action[href*="/cart"] b{box-shadow:0 0 0 2px #fff}
  .mobile-menu{border-radius:14px}
}

/* Product buttons always show an icon; narrow grids keep only the icon. */
.product-card .button.small .icon{width:17px;height:17px;flex:none}
.product-card .button.small{gap:8px}
@media(max-width:760px){
  #catalog-grid[data-cols="3"] .button.small{font-size:inherit!important;padding:0!important;min-height:36px}
  #catalog-grid[data-cols="3"] .button.small .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #catalog-grid[data-cols="3"] .button.small .icon{width:19px!important;height:19px!important;margin:0}
}

/* Empty states carry their own button, inside the box. */
.empty-state .button{margin-top:6px}

/* Order tracking: timeline, items and totals. */
.track-card{display:flex;flex-direction:column;gap:20px;margin-top:22px;padding:24px;border-radius:26px;background:linear-gradient(160deg,#fff,var(--brand-soft));border:1px solid var(--line);box-shadow:0 24px 50px -36px #7b1942;animation:rise .5s cubic-bezier(.2,.8,.3,1)}
.track-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.track-card h2{margin:4px 0 2px;font-size:clamp(18px,3vw,24px);overflow-wrap:anywhere}
.track-card header small{color:var(--muted)}
.track-badge{flex:none;padding:7px 14px;border-radius:99px;background:var(--glow);background-size:200% 100%;color:#fff;font-weight:700;font-size:13px;box-shadow:0 10px 22px -12px #d91f59}
.is-cancelled .track-badge{background:#6f6168}
.track-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;position:relative}
.track-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;color:var(--muted)}
.track-steps li::before{content:"";position:absolute;top:17px;inset-inline-start:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.track-steps li:first-child::before{display:none}
.track-steps li.done::before,.track-steps li.current::before{background:var(--brand)}
.track-dot{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line-strong);font-weight:700;color:var(--muted)}
.track-dot .icon{width:18px;height:18px}
.track-steps li.done .track-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.track-steps li.current .track-dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 6px #ff3f7822;animation:credit-pulse 1.8s ease-out infinite}
.track-steps li.current b,.track-steps li.done b{color:var(--ink)}
.track-steps b{font-weight:600;line-height:1.25}
.track-cancel{margin:0;padding:12px 16px;border-radius:14px;background:#f1eef0;color:#6f6168}
.track-items{list-style:none;margin:0;padding:14px 0;border-block:1px dashed var(--line-strong);display:flex;flex-direction:column;gap:10px}
.track-items li{display:flex;align-items:center;gap:12px}
.track-items li>span:not(.line-thumb){flex:1;display:flex;flex-direction:column;font-size:14px}
.track-items small{color:var(--brand);font-weight:600}
.track-items em{font-style:normal;font-weight:700}
.track-totals{margin:0;display:flex;flex-direction:column;gap:6px}
.track-totals div{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.track-totals dd{margin:0;color:var(--ink);font-weight:600}
.track-totals .grand{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink);font-weight:700}
.track-totals .grand dd{font:600 22px var(--display);color:var(--brand)}
@media(max-width:760px){
  .track-card{padding:18px}
  .track-steps{grid-template-columns:1fr;gap:0}
  .track-steps li{flex-direction:row;text-align:start;gap:12px;padding-block:6px}
  .track-steps li::before{top:-50%;inset-inline-start:17px;width:3px;height:100%}
}

/* Upload buttons in the dashboard (the browser's own "Choose File" is hidden). */
.upload-zone label,.admin-dialog label:has(input[type=file]){position:relative}
.admin-body input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.pick-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;padding:12px 20px;border-radius:99px;background:var(--glow);background-size:200% 100%;color:#fff;font-weight:700;font-size:14px;box-shadow:0 12px 24px -14px #d91f59;transition:background-position .5s,transform .2s;pointer-events:none}
.pick-btn .icon{width:18px;height:18px}
label:has(input[type=file]):hover .pick-btn{background-position:100% 0;transform:translateY(-2px)}
label:has(input[type=file]:focus-visible) .pick-btn{outline:3px solid var(--brand);outline-offset:3px}
.upload-zone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;border:2px dashed #f0b9cb!important;border-radius:20px;background:linear-gradient(180deg,#fff,var(--brand-soft));text-align:center}
.upload-zone>label{display:flex;flex-direction:column;align-items:center;font-weight:600}
.upload-zone .admin-image-preview{max-height:150px;border-radius:14px;background:#fff}

/* Order state as tappable steps. */
.status-steps{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.status-step{padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.status-step:hover{border-color:var(--brand);color:var(--brand)}
.status-step:active{transform:scale(.94)}
.status-step[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 18px -10px #d91f59}
.status-step.s-completed[aria-pressed=true]{background:#1f9d62;border-color:#1f9d62}
.status-step.s-cancelled[aria-pressed=true]{background:#6f6168;border-color:#6f6168}
.shop-status .edit-button{padding:10px 18px;border-radius:99px;border:1px solid var(--brand);color:var(--brand);font-weight:700}

/* ---- Dashboard inspection fixes, 2026-09-25 ------------------------------ */
[hidden]{display:none!important}
/* The save button rides on a soft fade so it never sits on top of a field's text. */
.sticky-save{padding-top:26px;margin-top:0;background:linear-gradient(180deg,#fbf7f900,#fbf7f9 45%)}
/* Prices read left to right even inside Arabic text. */
[dir=rtl] :is(.order-sum,.order-total b,.metric b,.apc-price,.recent-order>b,.track-totals dd,.usage-head span){direction:ltr;unicode-bidi:isolate}
.admin-block-head .row-button{padding:6px 12px;font-size:12px}
@media(min-width:761px){.catalog-sidebar{top:150px}}
@media(max-width:760px){
  .sticky-save{bottom:86px;padding-top:18px;margin-inline:-12px;padding-inline:12px}
  /* Tables become stacked cards on phones. */
  .table-wrap{border:0;overflow:visible}
  .admin-table,.admin-table tbody{display:block}
  .admin-table thead{display:none}
  .admin-table tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px;margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:#fff}
  .admin-table td{padding:0;border:0}
  .admin-table td:first-child{grid-row:span 2}
  .admin-table td:nth-child(2) small{white-space:normal}
  .admin-table td:nth-last-child(2){font-weight:700;color:var(--brand)}
  .admin-table td:nth-last-child(2)::after{content:" produit(s)";font-weight:500;color:var(--muted);font-size:12px}
  .admin-table td[dir=rtl]{grid-column:2;text-align:start;color:var(--muted);font-size:13px}
  .admin-table .table-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;padding-top:8px;border-top:1px dashed var(--line)!important;white-space:normal}
  .admin-table .table-actions .row-button{margin:0}
  .table-logo .brand-logo b{font-size:13px!important}
  .admin-table tr:has(.table-logo) td:nth-child(3){display:none}
  /* Folded orders: number and state on top, customer and total below. */
  .admin-order summary{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"id pill chev" "who sum chev";row-gap:6px;padding:12px 14px}
  .admin-order summary .order-thumbs{display:none}
  .order-sum{font-size:16px}
  .status-step{padding:7px 10px;font-size:12px}
}
[dir=rtl] .admin-table td:nth-last-child(2)::after{content:" منتج"}
html{scroll-padding-top:150px}@media(max-width:760px){html{scroll-padding-top:90px}}