/* Belleza & Estilo is intentionally separate from Makeup Beauty and Boutique Editorial. */
body.beauty-boutique-template { background:var(--bb-paper,#fff8f5); color:var(--bb-ink,#402325); }
body.beauty-boutique-template .wrap > .hero { display:none; }
.bb-storefront { --bb-primary:#a85d5c; --bb-ink:#402325; --bb-paper:#fff8f5; --bb-blush:#f5dfd8; max-width:1440px; margin:0 auto; overflow:hidden; background:var(--bb-paper); font-family:Georgia,"Times New Roman",serif; }
.bb-announcement { min-height:38px; display:grid; place-items:center; padding:0 18px; color:#6d2f30; background:linear-gradient(90deg,#eed4cf,#f8ebe7,#efd4cf); font:600 13px/1.2 Arial,sans-serif; letter-spacing:.01em; text-align:center; }
.bb-header { display:grid; grid-template-columns:minmax(190px,.7fr) minmax(220px,1.2fr) auto; align-items:center; gap:26px; padding:22px 42px 14px; background:#fffdfa; }
.bb-brand { min-width:0; color:var(--bb-ink); text-decoration:none; display:flex; align-items:center; gap:10px; }
.bb-brand::before { content:'✧'; display:grid; place-items:center; width:39px; height:39px; border:1px solid color-mix(in srgb,var(--bb-primary) 55%,#fff); border-radius:50%; color:var(--bb-primary); font-size:25px; }
.bb-brand-logo { width:43px; height:43px; flex:0 0 43px; object-fit:contain; border-radius:12px; }
.bb-brand-logo[hidden] { display:none; }
.bb-storefront.has-brand-logo .bb-brand::before { display:none; }
.bb-brand-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(22px,2.2vw,34px); font-style:italic; font-weight:500; }
.bb-search-slot { min-width:0; }
.bb-search-slot .searchBox, .bb-search-slot #stSearchField { width:100%; }
.bb-search-slot input { height:42px!important; border:1px solid #c9a7a1!important; border-radius:24px!important; background:#fffaf8!important; }
.bb-actions { display:flex; align-items:center; gap:7px; }
.bb-icon-action { position:relative; width:58px; min-height:48px; border:0; background:transparent; color:var(--bb-ink); display:grid; place-items:center; gap:2px; font:600 11px/1.05 Arial,sans-serif; cursor:pointer; }
.bb-icon-action svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bb-icon-action b { position:absolute; top:1px; right:4px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 3px; border-radius:50%; color:#fff; background:var(--bb-primary); font-size:10px; }
.bb-icon-action b[hidden] { display:none; }
.bb-main-nav { display:flex; justify-content:center; gap:clamp(14px,3vw,52px); padding:0 30px 14px; background:#fffdfa; border-bottom:1px solid #efdeda; overflow:auto; scrollbar-width:none; }
.bb-main-nav :is(a,button) { flex:0 0 auto; border:0; color:var(--bb-ink); text-decoration:none; padding:9px 2px; background:transparent; white-space:nowrap; font:500 15px/1 Arial,sans-serif; cursor:pointer; }
.bb-main-nav :is(a,button):first-child, .bb-main-nav .is-active { padding:9px 17px; border-radius:22px; color:#fff; background:var(--bb-primary); }
.bb-hero { min-height:365px; display:grid; grid-template-columns:minmax(280px,.86fr) minmax(350px,1.14fr); background:#ecd4ce; overflow:hidden; }
.bb-hero-copy { padding:clamp(36px,5vw,80px) clamp(28px,6vw,82px); display:flex; align-items:flex-start; justify-content:center; flex-direction:column; background:linear-gradient(90deg,#f8e6df 0%,#efd3ca 100%); }
.bb-hero-copy h1 { max-width:500px; margin:0 0 20px; color:var(--bb-ink); font-size:clamp(37px,4vw,63px); line-height:.98; font-style:italic; font-weight:500; letter-spacing:-.04em; }
.bb-hero-highlight { display:block; }
.bb-hero-copy p { max-width:390px; margin:0 0 25px; font:400 18px/1.3 Arial,sans-serif; }
.bb-hero-cta { border:0; border-radius:28px; padding:14px 27px; color:#fff; background:var(--bb-primary); font:600 16px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 12px 24px color-mix(in srgb,var(--bb-primary) 25%,transparent); }
.bb-hero-image-wrap { min-height:330px; position:relative; background:#dbc2bb; }
.bb-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.bb-category-section { padding:24px clamp(18px,3vw,42px) 32px; background:#fffaf8; }
.bb-category-grid { display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); gap:12px; }
.bb-category-card { min-width:0; border:0; border-radius:17px; overflow:hidden; padding:0 0 12px; color:var(--bb-ink); background:#f3ded7; text-align:left; font:600 17px/1 Georgia,serif; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.bb-category-card:hover { transform:translateY(-3px); box-shadow:0 12px 22px #b17b6c33; }
.bb-category-picture { display:grid; place-items:center; position:relative; height:110px; overflow:hidden; background:linear-gradient(145deg,#f4d6ce,#e8beb6); }
.bb-category-picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bb-category-picture b { color:#fff; font:italic 42px Georgia,serif; text-shadow:0 2px 10px #51231f66; }
.bb-category-card strong { display:inline-block; max-width:calc(100% - 30px); overflow:hidden; margin:11px 0 0 13px; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle; }
.bb-category-card > :last-child { float:right; margin:10px 13px 0 0; font-size:22px; }
.bb-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0 auto; max-width:1440px; color:var(--bb-ink); background:#e7cfc8; }
.bb-benefits article { display:flex; align-items:center; gap:11px; min-width:0; padding:17px clamp(16px,2.3vw,34px); background:#fff9f6; }
.bb-benefits i { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; color:var(--bb-primary); }
.bb-benefits svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bb-benefits strong,.bb-benefits small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-benefits strong { font-size:14px; }
.bb-benefits small { margin-top:3px; color:#765b59; font:400 12px/1.2 Arial,sans-serif; }
.bb-featured { max-width:1440px; margin:0 auto; padding:clamp(34px,4vw,58px) clamp(18px,4vw,58px); background:linear-gradient(135deg,#fffaf8 0%,#f7e6df 100%); }
.bb-featured header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.bb-featured header small { color:var(--bb-primary); font:700 11px/1 Arial,sans-serif; letter-spacing:.13em; }
.bb-featured h2 { margin:6px 0; color:var(--bb-ink); font:italic 500 clamp(29px,3vw,42px)/1 Georgia,serif; }
.bb-featured header p { max-width:520px; margin:0; color:#725b59; font:400 15px/1.35 Arial,sans-serif; }
.bb-featured header button { flex:0 0 auto; border:0; border-bottom:1px solid var(--bb-primary); padding:0 0 4px; color:#7a3434; background:transparent; font:600 14px/1 Arial,sans-serif; cursor:pointer; }
.bb-featured-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.bb-featured-card { position:relative; isolation:isolate; min-height:245px; overflow:hidden; border:0; border-radius:18px; padding:0; background:#d9bbb2; color:#fff; text-align:left; cursor:pointer; }
.bb-featured-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.bb-featured-card::after { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,#28120eaa,transparent 78%); }
.bb-featured-card:has(img:not([hidden]))::after { z-index:1; }
.bb-featured-card > span { position:relative; z-index:2; display:flex; min-height:245px; max-width:280px; padding:28px; flex-direction:column; align-items:flex-start; justify-content:end; text-shadow:0 2px 8px #2b161166; }
.bb-featured-card small { font:700 10px/1 Arial,sans-serif; letter-spacing:.12em; }
.bb-featured-card strong { margin:8px 0 13px; font:italic 500 clamp(25px,3vw,38px)/.98 Georgia,serif; }
.bb-featured-card em { border-bottom:1px solid currentColor; padding-bottom:3px; font:600 13px/1 Arial,sans-serif; font-style:normal; }
.bb-featured-card:hover img { transform:scale(1.045); }
body.beauty-boutique-template .catalogSection { max-width:1440px; margin:0 auto; padding:4px clamp(18px,3vw,42px) 42px; background:var(--bb-paper); }
body.beauty-boutique-template .catalogHead { padding:22px 0 12px; border-bottom:1px solid color-mix(in srgb,var(--bb-primary) 35%,#fff); }
body.beauty-boutique-template .catalogHead h3 { color:var(--bb-ink); font:italic 500 clamp(28px,3vw,42px)/1 Georgia,serif; }
body.beauty-boutique-template .grid { gap:18px; }
body.beauty-boutique-template .productCard { border:1px solid #ead8d3; border-radius:17px; background:#fffdfb; box-shadow:none; }
body.beauty-boutique-template .productCard:hover { transform:translateY(-3px); box-shadow:0 14px 26px #4d25131a; }
body.beauty-boutique-template .productCard .price, body.beauty-boutique-template .price { color:#7a3434; }
.bb-footer { max-width:1440px; display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:22px; margin:0 auto; padding:34px clamp(24px,5vw,70px); color:#f9e9e4; background:#442629; font-family:Arial,sans-serif; }
.bb-footer strong { display:block; margin-bottom:8px; font:italic 27px Georgia,serif; }
.bb-footer p,.bb-footer a,.bb-footer button { margin:0; color:#f4dbd3; font-size:13px; }
.bb-footer a,.bb-footer button { display:block; padding:3px 0; border:0; background:transparent; text-align:left; cursor:pointer; }
.bb-footer h4 { margin:0 0 8px; color:#fff; font-size:14px; }
.bb-mobile-nav { display:none; }
@media (max-width:900px){ .bb-header { grid-template-columns:1fr auto; gap:12px; padding:15px 18px 10px; } .bb-search-slot { grid-column:1/-1; grid-row:2; } .bb-main-nav { justify-content:flex-start; padding:0 18px 12px; } .bb-hero { grid-template-columns:1fr; } .bb-hero-image-wrap { min-height:275px; } .bb-category-grid { grid-template-columns:repeat(3,minmax(120px,1fr)); } .bb-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); } .bb-footer { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bb-announcement { min-height:32px; font-size:11px; } .bb-brand-name { font-size:24px; } .bb-brand::before { width:32px; height:32px; font-size:20px; } .bb-brand-logo { width:34px; height:34px; flex-basis:34px; } .bb-actions { gap:0; } .bb-icon-action { width:42px; min-height:38px; } .bb-icon-action span { display:none; } .bb-icon-action b { right:0; } .bb-hero-copy { padding:38px 25px; } .bb-hero-copy h1 { font-size:42px; } .bb-hero-image-wrap { min-height:245px; } .bb-category-section { padding-bottom:28px; } .bb-category-grid { display:flex; overflow:auto; padding-bottom:5px; scroll-snap-type:x mandatory; } .bb-category-card { flex:0 0 145px; scroll-snap-align:start; } .bb-benefits article { padding:14px 15px; } .bb-benefits small { display:none; } .bb-featured { padding:32px 18px; } .bb-featured header { align-items:flex-start; flex-direction:column; } .bb-featured-grid { grid-template-columns:1fr; } .bb-featured-card,.bb-featured-card > span { min-height:210px; } .bb-footer { grid-template-columns:1fr; padding-bottom:92px; } .bb-mobile-nav { position:fixed; z-index:30; right:12px; bottom:12px; left:12px; display:grid; grid-template-columns:repeat(4,1fr); padding:7px; border:1px solid #f0ddd7; border-radius:22px; background:#fffdfaee; box-shadow:0 14px 34px #51231f33; backdrop-filter:blur(12px); } .bb-mobile-nav button { position:relative; display:grid; place-items:center; gap:3px; min-height:45px; border:0; background:transparent; color:var(--bb-ink); font:600 10px/1 Arial,sans-serif; } .bb-mobile-nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .bb-mobile-nav b { position:absolute; top:0; right:14px; min-width:16px; height:16px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--bb-primary); font-size:9px; } .bb-mobile-nav b[hidden] { display:none; } }