/* FITRICH content and lifestyle enhancement only.
   Existing dimensions, navigation and commerce behaviour stay untouched. */

:root{--fitrich-hair-photo:url("assets/lifestyle-haircare-v1.jpg");--fitrich-face-photo:url("assets/lifestyle-facecare-v1.jpg");--fitrich-body-photo:url("assets/lifestyle-bodycare-v1.jpg");--fitrich-tools-photo:url("assets/lifestyle-grooming-tools-v1.jpg")}

/* Existing website category cards now carry genuine lifestyle atmosphere. */
.store-category{isolation:isolate;background-image:linear-gradient(180deg,rgba(250,250,247,.1),rgba(8,12,10,.82)),var(--fitrich-hair-photo);background-size:cover;background-position:center}
.store-category.face{background-image:linear-gradient(180deg,rgba(250,250,247,.08),rgba(8,12,10,.82)),var(--fitrich-face-photo);background-position:center}
.store-category.body{background-image:linear-gradient(180deg,rgba(250,250,247,.08),rgba(8,12,10,.82)),var(--fitrich-body-photo);background-position:center}
.store-category:before{z-index:-1;color:rgba(255,255,255,.1)}
.store-category>span,.store-category b{color:#a9efe2}
.store-category h3{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.35)}
.store-category p{color:rgba(255,255,255,.76)}
.store-category>div>small{display:block;max-width:260px;margin-top:10px;color:#fff;font:700 6px/1.5 Space Grotesk;letter-spacing:.13em}
.store-category>i{border-color:rgba(255,255,255,.8);color:#fff;background:rgba(8,12,10,.18);backdrop-filter:blur(5px)}

/* Existing four content cards become editorial grooming previews. */
.reel-visual:before{inset:0;transform:none;background-image:linear-gradient(180deg,rgba(8,10,9,.05),rgba(8,10,9,.54)),var(--fitrich-hair-photo);background-size:cover;background-position:center;filter:none;opacity:1}
.reel-visual.two:before{background-image:linear-gradient(180deg,rgba(8,10,9,.05),rgba(8,10,9,.56)),var(--fitrich-face-photo)}
.reel-visual.three:before{background-image:linear-gradient(180deg,rgba(8,10,9,.03),rgba(8,10,9,.54)),var(--fitrich-tools-photo)}
.reel-visual.four:before{background-image:linear-gradient(180deg,rgba(8,10,9,.05),rgba(8,10,9,.56)),var(--fitrich-body-photo)}
.reel-visual i{border-color:rgba(255,255,255,.48);background:rgba(255,255,255,.05);backdrop-filter:blur(2px)}

/* Neutral, replaceable product-image placeholders. They never imitate a pack. */
.temp-product-placeholder{--temp-photo:var(--fitrich-tools-photo);position:relative;width:100%;height:100%;min-height:inherit;padding:12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden;background:#dfe3df;color:#fff;text-align:left;isolation:isolate}
.temp-product-placeholder:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(180deg,rgba(247,247,243,.12),rgba(7,11,9,.82)),var(--temp-photo);background-size:cover;background-position:center;filter:saturate(.58)}
.temp-product-placeholder:after{content:"";position:absolute;inset:7px;z-index:-1;border:1px solid rgba(255,255,255,.56)}
.temp-product-placeholder.placeholder-hair{--temp-photo:var(--fitrich-hair-photo)}
.temp-product-placeholder.placeholder-face{--temp-photo:var(--fitrich-face-photo)}
.temp-product-placeholder.placeholder-body{--temp-photo:var(--fitrich-body-photo)}
.temp-product-placeholder-frame{position:absolute;left:50%;top:46%;width:42%;aspect-ratio:1;transform:translate(-50%,-55%);border:1px solid rgba(255,255,255,.76);border-radius:50%;background:rgba(239,242,238,.11);backdrop-filter:blur(3px)}
.temp-product-placeholder-frame:before,.temp-product-placeholder-frame:after{content:"";position:absolute;background:rgba(255,255,255,.7)}
.temp-product-placeholder-frame:before{left:18%;right:18%;top:50%;height:1px}.temp-product-placeholder-frame:after{top:18%;bottom:18%;left:50%;width:1px}
.temp-product-placeholder-frame i{position:absolute;inset:34%;border:1px solid rgba(255,255,255,.78);border-radius:50%}
.temp-product-placeholder>b{position:relative;width:auto!important;margin:0!important;color:#fff!important;font:700 7px/1 Space Grotesk!important;letter-spacing:.16em!important;text-align:left!important}
.temp-product-placeholder>small{position:relative;width:auto!important;margin-top:6px;color:rgba(255,255,255,.74)!important;font:600 5px/1.3 Space Grotesk!important;letter-spacing:.1em!important;text-align:left!important}
.temp-product-placeholder.is-compact{padding:7px}.temp-product-placeholder.is-compact>b{font-size:4px!important;letter-spacing:.08em!important}.temp-product-placeholder.is-compact>small{display:none}.temp-product-placeholder.is-compact .temp-product-placeholder-frame{width:48%}

.product-art.has-temp-placeholder,.home-product-art.has-temp-placeholder,.app-product-art.has-temp-placeholder,.app-bag-art.has-temp-placeholder,.live-product-object.has-temp-placeholder,.product-detail-object.has-temp-placeholder,.product-confirmation-object.has-temp-placeholder,.app-story-product.has-temp-placeholder{padding:0;display:block;overflow:hidden;background:#dfe3df;border-radius:0;color:#fff}
.product-art.has-temp-placeholder:before,.home-product-art.has-temp-placeholder:before,.app-product-art.has-temp-placeholder:before,.app-bag-art.has-temp-placeholder:before,.live-product-object.has-temp-placeholder:before{display:none}
.product-detail-object.has-temp-placeholder,.product-confirmation-object.has-temp-placeholder,.app-story-product.has-temp-placeholder{width:clamp(150px,34vw,260px);height:clamp(190px,42vw,320px);border:1px solid rgba(255,255,255,.72);box-shadow:0 26px 50px rgba(0,0,0,.22);transform:none}
.product-confirmation-object.has-temp-placeholder{width:110px;height:150px;margin:auto}.app-story-product.has-temp-placeholder{width:150px;height:205px;margin:-15px 0 45px}.live-product-object.has-temp-placeholder{width:64px;height:68px}
.modal-object.product-photo-pending{width:180px;height:240px;padding:0;border:1px solid rgba(255,255,255,.66);border-radius:0;background:#dfe3df;box-shadow:0 32px 64px rgba(0,0,0,.35);font-size:inherit}
.phone-product-flow article>.temp-product-placeholder{width:70px;height:95px;min-height:95px;margin:14px auto 8px}.phone-detail-pack>.temp-product-placeholder{width:100%;height:100%;min-height:100%}

/* App atmosphere uses the same premium visual language without moving cards. */
.campaign-card{background-image:linear-gradient(90deg,rgba(8,12,10,.86),rgba(8,12,10,.18)),var(--fitrich-hair-photo)!important;background-size:cover!important;background-position:center!important}
.shop-intro{position:relative;overflow:hidden;isolation:isolate}
.shop-intro:after{content:"";position:absolute;inset:0 0 0 56%;z-index:-1;background:linear-gradient(90deg,var(--app-bg,#f1f2ee),transparent 45%),var(--fitrich-tools-photo);background-size:cover;background-position:center;opacity:.28;filter:saturate(.55)}

/* Existing website story dialog now supports concise education content. */
.story-frame.education-story{align-items:flex-start;justify-content:flex-end;text-align:left;background-position:center;background-size:cover}
.story-frame.education-story:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,9,.12),rgba(7,10,9,.94) 72%)}
.story-education-copy{position:relative;z-index:1;width:min(100%,620px)}
.story-education-copy>p{margin:0 0 12px;color:#a9efe2;font:700 8px/1 Space Grotesk;letter-spacing:.18em}
.story-education-copy h2{margin:0 0 14px;font:600 clamp(34px,7vw,62px)/.9 Space Grotesk;letter-spacing:-.06em;color:#fff}
.story-education-copy>div{color:#c5ceca;font:500 11px/1.65 Manrope}
.story-education-copy ul{margin:20px 0 0;padding:0;display:grid;gap:8px;list-style:none}
.story-education-copy li{padding-top:9px;border-top:1px solid rgba(255,255,255,.18);color:#eff3f1;font:600 9px/1.45 Manrope}

@media(max-width:760px){.store-category{background-position:center}.story-frame.education-story{min-height:660px;padding:70px 22px 28px}.story-education-copy h2{font-size:38px}.story-education-copy li{font-size:8px}.shop-intro:after{inset:45% 0 0}}
