/* ==========================================================================
   LUCA World — main.css
   Colour variables are injected from the Customizer (see inc/dynamic-css.php)
   ========================================================================== */

:root{
	--luca-accent:#C82020;
	--luca-accent-dark:#8E1414;
	--luca-ink:#141414;
	--luca-blush:#FBEDE9;
	--luca-cream:#F7F1EC;
	--luca-star:#F5A623;
	--luca-success:#2E9E5B;

	--luca-white:#ffffff;
	--luca-muted:#6b6b6b;
	--luca-line:#ececec;
	--luca-radius:14px;
	--luca-radius-sm:10px;
	--luca-shadow:0 6px 24px rgba(20,20,20,.06);
	--luca-shadow-lg:0 14px 40px rgba(20,20,20,.10);
	--font-head:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	--font-price:"Source Sans 3","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	--maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;font-family:var(--font-body);color:var(--luca-ink);
	background:var(--luca-white);line-height:1.6;font-size:16px;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em;font-weight:700;color:var(--luca-ink)}
button{font-family:inherit;cursor:pointer}
svg{width:1em;height:1em}

.luca-container{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
.luca-section{padding:56px 0}
.luca-section--tight{padding:36px 0}

/* Section heading (centred, underline accent) */
.luca-heading{text-align:center;margin-bottom:34px}
.luca-heading h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:.3px}
.luca-heading .luca-rule{width:56px;height:3px;background:var(--luca-accent);border-radius:3px;margin:12px auto 0}
.luca-heading p{color:var(--luca-muted);max-width:640px;margin:12px auto 0}

/* ---------- Buttons ---------- */
.luca-btn{
	display:inline-flex;align-items:center;gap:8px;justify-content:center;
	background:var(--luca-ink);color:#fff;border:none;border-radius:10px;
	padding:14px 26px;font-weight:600;font-size:15px;letter-spacing:.3px;
	transition:.18s ease;
}
.luca-btn:hover{transform:translateY(-1px);background:#000}
.luca-btn--accent{background:var(--luca-accent)}
.luca-btn--accent:hover{background:var(--luca-accent-dark)}
.luca-btn--outline{background:transparent;color:var(--luca-ink);border:1.5px solid var(--luca-ink)}
.luca-btn--outline:hover{background:var(--luca-ink);color:#fff}
.luca-btn--block{width:100%}

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.luca-topbar{background:var(--luca-ink);color:#fff;font-size:13px}
.luca-topbar__inner{display:flex;gap:34px;justify-content:center;align-items:center;
	padding:9px 20px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto}
.luca-topbar__item{display:inline-flex;align-items:center;gap:7px;opacity:.95}
.luca-topbar__item svg{color:#fff}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.luca-header{background:#fff;border-bottom:1px solid var(--luca-line);position:sticky;top:0;z-index:60}
.luca-header__inner{display:flex;align-items:center;gap:24px;padding:16px 20px;max-width:var(--maxw);margin:0 auto}
.luca-logo{display:flex;align-items:center;font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:2px}
.luca-logo img{max-height:52px;width:auto}
.luca-logo .luca-logo__accent{color:var(--luca-accent)}
.luca-logo small{display:block;font-size:9px;letter-spacing:2px;font-weight:500;color:var(--luca-muted)}

.luca-nav{margin:0 auto}
.luca-nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.luca-nav a{font-weight:600;font-size:15px;position:relative;padding:6px 0;color:var(--luca-ink)}
.luca-nav a:hover,.luca-nav .current-menu-item>a{color:var(--luca-accent)}
.luca-nav .current-menu-item>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--luca-accent)}
.luca-nav .sub-menu{display:none}

.luca-actions{display:flex;align-items:center;gap:18px}
.luca-actions a{font-size:21px;color:var(--luca-ink);position:relative;display:inline-flex}
.luca-actions a:hover{color:var(--luca-accent)}
.luca-count{position:absolute;top:-8px;right:-9px;background:var(--luca-accent);color:#fff;
	font-size:11px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
	display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--font-body)}
.luca-burger{display:none;font-size:26px;background:none;border:none;color:var(--luca-ink)}

/* Mobile drawer */
.luca-drawer{position:fixed;inset:0 30% 0 0;background:#fff;z-index:200;transform:translateX(-105%);
	transition:.28s ease;box-shadow:var(--luca-shadow-lg);padding:24px;overflow:auto}
.luca-drawer.is-open{transform:none}
.luca-drawer ul{list-style:none;margin:0;padding:0}
.luca-drawer li{border-bottom:1px solid var(--luca-line)}
.luca-drawer a{display:block;padding:14px 4px;font-weight:600;font-size:17px}
.luca-drawer__close{background:none;border:none;font-size:28px;float:right;line-height:1}
.luca-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;opacity:0;visibility:hidden;transition:.28s}
.luca-overlay.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   HERO
   ========================================================================== */
.luca-hero{background:var(--luca-blush)}
.luca-hero__inner{max-width:var(--maxw);margin:0 auto;padding:60px 20px;
	display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.luca-hero__eyebrow{color:var(--luca-accent);font-weight:700;letter-spacing:2px;font-size:13px;text-transform:uppercase}
.luca-hero__title{font-size:clamp(34px,5.5vw,60px);line-height:1.05;margin:14px 0 18px}
.luca-hero__sub{color:#333;max-width:460px;margin-bottom:26px}
.luca-hero__media{position:relative;text-align:center}
.luca-hero__media img{margin:0 auto}
.luca-hero__badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px}
.luca-hero__badge{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#333}
.luca-hero__badge svg{color:var(--luca-accent);font-size:18px}

/* ==========================================================================
   FEATURE ROW (Why choose / value props)
   ========================================================================== */
.luca-featurerow{background:#fff;border-bottom:1px solid var(--luca-line)}
.luca-featurerow__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
	max-width:var(--maxw);margin:0 auto;padding:34px 20px}
.luca-feature{text-align:center;padding:0 8px}
.luca-feature__icon{font-size:26px;color:var(--luca-ink);margin-bottom:8px;display:inline-flex}
.luca-feature h4{font-size:16px;margin-bottom:4px}
.luca-feature p{font-size:13.5px;color:var(--luca-muted);margin:0}

/* ==========================================================================
   PRODUCT CARDS / BEST SELLERS
   ========================================================================== */
.luca-products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.luca-carousel{position:relative}
.luca-carousel__track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.luca-carousel__track::-webkit-scrollbar{display:none}
.luca-carousel__track>*{scroll-snap-align:start}
.luca-carousel .woocommerce{position:static}
/* Force the WooCommerce [products] list inside the carousel to lay out as a
   horizontal scrolling row rather than the default 4-column grid. */
.luca-carousel__track ul.products,
.luca-carousel__track .woocommerce ul.products{
	display:grid;grid-auto-flow:column;grid-template-columns:none;
	grid-auto-columns:minmax(220px,40%);gap:20px;margin:0}
.luca-carousel__track ul.products li.product{width:auto;margin:0}
.luca-carousel__nav{position:absolute;top:38%;width:40px;height:40px;border-radius:50%;
	background:#fff;border:1px solid var(--luca-line);box-shadow:var(--luca-shadow);
	display:flex;align-items:center;justify-content:center;z-index:2;color:var(--luca-ink)}
.luca-carousel__nav--prev{left:-10px;transform:scaleX(-1)}
.luca-carousel__nav--next{right:-10px}

/* The actual product card (loop + shop) */
.luca-card,ul.products li.product{
	background:#fff;border:1px solid var(--luca-line);border-radius:var(--luca-radius);
	padding:14px;position:relative;transition:.2s ease;text-align:left;list-style:none;margin:0}
.luca-card:hover,ul.products li.product:hover{box-shadow:var(--luca-shadow-lg);transform:translateY(-3px)}
.luca-card__media{position:relative;background:var(--luca-cream);border-radius:var(--luca-radius-sm);
	overflow:hidden;margin-bottom:12px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.luca-card__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.luca-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.luca-badge{font-size:11px;font-weight:700;letter-spacing:.5px;color:#fff;border-radius:6px;padding:5px 9px;display:inline-block}
.luca-badge--sale{background:var(--luca-accent)}
.luca-badge--best{background:var(--luca-ink)}
.luca-card__wish{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
	background:#fff;border:1px solid var(--luca-line);display:flex;align-items:center;justify-content:center;
	color:var(--luca-ink);font-size:16px;z-index:2}
.luca-card__wish:hover{color:var(--luca-accent)}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.luca-card h3{font-size:15.5px;font-weight:600;margin:2px 0 6px;padding:0;color:var(--luca-ink)}
.woocommerce ul.products li.product a img{margin:0}

/* Stars */
.luca-stars{display:inline-flex;gap:2px;color:var(--luca-star);vertical-align:middle;font-size:14px}
.luca-star.is-empty{color:#dcdcdc}
.luca-star.is-half{position:relative;color:#dcdcdc}
.luca-star.is-half::before{content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--luca-star)}
.luca-stars__count{color:var(--luca-muted);font-size:13px;margin-left:5px;font-weight:500}

.woocommerce ul.products li.product .price,
.luca-card__price{color:var(--luca-ink);font-weight:700;font-size:17px;margin:6px 0 10px;display:block;font-family:var(--font-head)}
.woocommerce ul.products li.product .price del{color:var(--luca-muted);font-weight:400;font-size:14px;margin-left:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none}

/* Add to cart on cards */
.woocommerce ul.products li.product .button,
.luca-card .button{
	display:block;width:100%;text-align:center;background:var(--luca-ink);color:#fff;
	border-radius:9px;padding:11px 14px;font-weight:600;font-size:14px;margin-top:2px;border:none}
.woocommerce ul.products li.product .button:hover,.luca-card .button:hover{background:var(--luca-accent)}
.woocommerce ul.products li.product .added_to_cart{display:none}

.luca-viewall{display:inline-flex;align-items:center;gap:6px;color:var(--luca-accent);font-weight:600;font-size:14px}
.luca-heading--split{display:flex;justify-content:space-between;align-items:center;text-align:left;margin-bottom:24px}
.luca-heading--split h2{font-size:22px;margin:0}

/* ==========================================================================
   BENEFITS STRIP
   ========================================================================== */
.luca-benefits{background:var(--luca-cream)}
.luca-benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
	max-width:var(--maxw);margin:0 auto;padding:34px 20px}
.luca-benefit{display:flex;gap:12px;align-items:flex-start}
.luca-benefit__icon{font-size:24px;color:var(--luca-accent)}
.luca-benefit h4{font-size:15px;margin:0 0 2px}
.luca-benefit p{font-size:13px;color:var(--luca-muted);margin:0}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.luca-how__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.luca-how__step{text-align:center;position:relative}
.luca-how__num{width:54px;height:54px;border-radius:50%;background:var(--luca-blush);color:var(--luca-accent);
	display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;margin:0 auto 12px;font-family:var(--font-head)}
.luca-how__step h4{font-size:16px;margin-bottom:4px}
.luca-how__step p{font-size:13.5px;color:var(--luca-muted);margin:0}
.luca-how__step:not(:last-child)::after{content:"";position:absolute;top:27px;left:60%;width:80%;
	border-top:2px dashed #e2b3ac}

/* ==========================================================================
   VIDEO TESTIMONIALS
   ========================================================================== */
.luca-vids{background:var(--luca-blush)}
.luca-vids__wrap{display:grid;grid-template-columns:1fr 2.2fr;gap:34px;align-items:center}
.luca-vids__intro h2{font-size:26px}
.luca-vids__intro p{color:#444;margin-bottom:18px}
.luca-vids__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.luca-video{position:relative;border-radius:var(--luca-radius);overflow:hidden;cursor:pointer;
	aspect-ratio:3/4;background:#000;box-shadow:var(--luca-shadow)}
.luca-video__thumb{width:100%;height:100%;object-fit:cover;transition:.3s}
.luca-video:hover .luca-video__thumb{transform:scale(1.05)}
.luca-video__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
	background:rgba(255,255,255,.92);color:var(--luca-accent);display:flex;align-items:center;justify-content:center;
	font-size:26px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.luca-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.luca-video__caption{position:absolute;left:0;right:0;bottom:0;padding:12px;color:#fff;
	background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:13px}
.luca-video__caption .luca-stars{color:var(--luca-star)}
.luca-video__caption strong{display:block;margin-top:4px}

/* ==========================================================================
   RESULTS STATS (dark bar)
   ========================================================================== */
.luca-stats{background:var(--luca-ink);color:#fff}
.luca-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
	max-width:var(--maxw);margin:0 auto;padding:40px 20px;text-align:center}
.luca-stat__num{font-family:var(--font-head);font-weight:700;font-size:34px;line-height:1}
.luca-stat__label{opacity:.75;font-size:14px;margin-top:6px}
.luca-stat{border-right:1px solid rgba(255,255,255,.12)}
.luca-stat:last-child{border:none}

/* ==========================================================================
   INGREDIENTS
   ========================================================================== */
.luca-ingredients__wrap{display:grid;grid-template-columns:1fr 2fr;gap:34px;align-items:center}
.luca-ingredients__intro h2{font-size:28px}
.luca-ingredients__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.luca-ingredient{text-align:center}
.luca-ingredient__img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 10px;background:var(--luca-cream)}
.luca-ingredient h4{font-size:15px;margin:0 0 3px}
.luca-ingredient p{font-size:12.5px;color:var(--luca-muted);margin:0}

/* ==========================================================================
   INSTAGRAM GALLERY
   ========================================================================== */
.luca-gram__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.luca-gram__head strong{font-size:15px}
.luca-gram__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.luca-gram__item{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--luca-cream);position:relative}
.luca-gram__item img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.luca-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.luca-faq__item{border:1px solid var(--luca-line);border-radius:10px;overflow:hidden;background:#fff;height:max-content}
.luca-faq__q{width:100%;text-align:left;background:none;border:none;padding:16px 18px;font-weight:600;
	font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--luca-ink)}
.luca-faq__q span{font-size:22px;color:var(--luca-accent);line-height:1;transition:.2s}
.luca-faq__item.is-open .luca-faq__q span{transform:rotate(45deg)}
.luca-faq__a{max-height:0;overflow:hidden;transition:.28s ease;padding:0 18px;color:var(--luca-muted);font-size:14px}
.luca-faq__item.is-open .luca-faq__a{max-height:260px;padding:0 18px 16px}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.luca-news{background:var(--luca-blush)}
.luca-news__inner{max-width:var(--maxw);margin:0 auto;padding:34px 20px;display:flex;
	align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.luca-news h3{font-size:22px;margin:0 0 4px}
.luca-news p{margin:0;color:#444;font-size:14px}
.luca-news__form{display:flex;gap:10px;flex:1;min-width:280px;max-width:520px}
.luca-news__form input{flex:1;border:1px solid #ddd;border-radius:9px;padding:13px 16px;font-size:15px;background:#fff}
.luca-news__form button{white-space:nowrap}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.luca-footer{background:var(--luca-ink);color:#cfcfcf}
.luca-footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:28px;
	max-width:var(--maxw);margin:0 auto;padding:52px 20px 34px}
.luca-footer__brand .luca-logo{color:#fff}
.luca-footer__brand p{font-size:13.5px;line-height:1.7;margin:14px 0 18px;max-width:260px}
.luca-footer__social{display:flex;gap:12px}
.luca-footer__social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);
	display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.luca-footer__social a:hover{background:var(--luca-accent)}
.luca-footer__col h5{color:#fff;font-size:14px;letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase;font-size:12px;opacity:.9}
.luca-footer__col ul{list-style:none;margin:0;padding:0}
.luca-footer__col li{margin-bottom:9px}
.luca-footer__col a{font-size:13.5px;color:#cfcfcf}
.luca-footer__col a:hover{color:#fff}
.luca-footer__contact div{font-size:13.5px;margin-bottom:8px;line-height:1.6}
.luca-footer__bottom{border-top:1px solid rgba(255,255,255,.1)}
.luca-footer__bottom-inner{max-width:var(--maxw);margin:0 auto;padding:18px 20px;display:flex;
	justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.8}
.luca-footer__pay{display:flex;gap:14px;align-items:center;font-weight:700;font-style:italic;letter-spacing:.5px;opacity:.85}

/* ==========================================================================
   TRUST STRIP (shared)
   ========================================================================== */
.luca-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.luca-trust--strip{padding:26px 0;border-top:1px solid var(--luca-line);border-bottom:1px solid var(--luca-line)}
.luca-trust__item{display:flex;gap:12px;align-items:center}
.luca-trust__icon{font-size:24px;color:var(--luca-ink)}
.luca-trust__item strong{display:block;font-size:14px}
.luca-trust__item span{font-size:12.5px;color:var(--luca-muted)}

/* ==========================================================================
   WOOCOMMERCE — SHOP / COLLECTION
   ========================================================================== */
.luca-shop-hero{background:var(--luca-blush)}
.luca-shop-hero__inner{max-width:var(--maxw);margin:0 auto;padding:44px 20px;display:grid;
	grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
.luca-shop-hero h1{font-size:clamp(34px,5vw,54px);margin:8px 0 12px}
.luca-shop-hero p{color:#444;max-width:420px}
.luca-breadcrumb{font-size:13px;color:var(--luca-muted);margin-bottom:8px}
.luca-breadcrumb a:hover{color:var(--luca-accent)}
.luca-shop{padding:34px 20px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce .woocommerce-result-count{color:var(--luca-muted);font-size:14px;float:none;margin:0}
.woocommerce .woocommerce-ordering{float:none}
.luca-shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.woocommerce .woocommerce-ordering select{border:1px solid var(--luca-line);border-radius:8px;padding:9px 12px}
.woocommerce nav.woocommerce-pagination{margin-top:34px;text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:none;display:inline-flex;gap:6px}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--luca-line);border-radius:8px;
	min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--luca-accent);color:#fff;border-color:var(--luca-accent)}

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product{max-width:var(--maxw);margin:0 auto;padding:28px 20px}
.woocommerce div.product div.images,.woocommerce div.product div.summary{margin-bottom:0}
.woocommerce div.product div.images img{border-radius:var(--luca-radius);background:var(--luca-blush)}
.woocommerce div.product .product_title{font-size:30px;margin:6px 0 10px}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--luca-accent);font-size:26px;font-weight:700;font-family:var(--font-head)}
.woocommerce div.product p.price del{color:var(--luca-muted);font-size:18px;font-weight:400}
.woocommerce div.product form.cart{margin:20px 0;display:flex;gap:12px;align-items:stretch}
.woocommerce div.product form.cart .quantity input{height:52px;width:72px;border:1px solid var(--luca-line);border-radius:9px;text-align:center}
.woocommerce div.product form.cart .button{background:var(--luca-ink);border-radius:9px;padding:0 34px;height:52px;
	display:flex;align-items:center;font-size:15px;font-weight:600}
.woocommerce div.product form.cart .button:hover{background:var(--luca-accent)}
.woocommerce .woocommerce-product-rating{margin-bottom:12px}
.woocommerce-product-details__short-description ul{list-style:none;padding:0}
.woocommerce-product-details__short-description li{padding-left:26px;position:relative;margin-bottom:8px}
.luca-pdp-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 0;border-top:1px solid var(--luca-line);border-bottom:1px solid var(--luca-line);margin:6px 0 16px}
.luca-pdp-trust .luca-trust__item{flex-direction:column;text-align:center;gap:6px}
.luca-pdp-trust .luca-trust__icon{color:var(--luca-accent)}
.luca-pdp-delivery{display:flex;align-items:center;gap:8px;font-size:14px;color:#333}
.luca-pdp-delivery svg{color:var(--luca-accent)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 18px}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--luca-line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:8px 8px 0 0;border-color:var(--luca-line);background:var(--luca-cream)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff;border-bottom-color:#fff}
.woocommerce #reviews .comment-text{border:1px solid var(--luca-line);border-radius:12px;padding:18px}
.woocommerce #reviews .star-rating{color:var(--luca-star)}

/* ==========================================================================
   WOOCOMMERCE — CART
   ========================================================================== */
.woocommerce-cart .luca-page-head,.woocommerce-checkout .luca-page-head{max-width:var(--maxw);margin:0 auto;padding:26px 20px 4px}
.woocommerce-cart .luca-page-head h1,.woocommerce-checkout .luca-page-head h1{font-size:34px;margin:8px 0 2px}
.woocommerce-cart .woocommerce,.woocommerce-checkout .woocommerce{max-width:var(--maxw);margin:0 auto;padding:12px 20px 40px}
.woocommerce table.shop_table{border-radius:12px;border:1px solid var(--luca-line);overflow:hidden}
.woocommerce table.shop_table th{background:var(--luca-cream);font-family:var(--font-head)}
.woocommerce .cart_totals{background:#fff;border:1px solid var(--luca-line);border-radius:12px;padding:20px}
.woocommerce .cart_totals h2{font-size:20px}
.woocommerce-cart table.cart img{width:64px;border-radius:8px}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--luca-ink);color:#fff;border-radius:9px;padding:12px 22px;font-weight:600}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--luca-accent)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce .checkout-button{background:var(--luca-accent)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--luca-accent-dark)}
.woocommerce .cart-collaterals .cart_totals .checkout-button{display:block;text-align:center}

/* ==========================================================================
   WOOCOMMERCE — CHECKOUT
   ========================================================================== */
.woocommerce-checkout #customer_details,.woocommerce-checkout #order_review{border:1px solid var(--luca-line);border-radius:12px;padding:22px;background:#fff}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce-checkout select,.select2-container .select2-selection{border:1px solid var(--luca-line)!important;border-radius:9px;padding:12px 14px;min-height:48px}
.woocommerce #payment{background:var(--luca-cream);border-radius:12px}
.woocommerce #payment div.payment_box{background:#fff;border-radius:8px}
.woocommerce-checkout #payment #place_order{background:var(--luca-ink);width:100%;padding:15px}
.woocommerce-checkout #payment #place_order:hover{background:var(--luca-accent)}
.luca-optin{background:var(--luca-blush);border-radius:9px;padding:10px 14px;margin-bottom:14px}
.luca-optin label{font-size:13.5px}

/* ==========================================================================
   WOOCOMMERCE — THANK YOU
   ========================================================================== */
.woocommerce-order{max-width:var(--maxw);margin:0 auto;padding:40px 20px}
.woocommerce ul.order_details{background:var(--luca-blush);border-radius:12px;padding:22px;display:flex;flex-wrap:wrap;gap:20px}
.woocommerce ul.order_details li{border:none;font-size:14px}
.woocommerce .woocommerce-order .woocommerce-notice{font-size:22px;font-family:var(--font-head);font-weight:700}
.luca-thankyou-hero{text-align:center;padding:20px 0 10px}
.luca-thankyou-hero .luca-check{width:70px;height:70px;border-radius:50%;border:3px solid var(--luca-success);
	color:var(--luca-success);display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 14px}
.luca-thankyou-hero h1{font-size:42px;margin:0}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.luca-about-hero{background:var(--luca-blush)}
.luca-about-hero__inner{max-width:var(--maxw);margin:0 auto;padding:56px 20px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.luca-about-hero h1{font-size:clamp(32px,4.6vw,48px)}
.luca-values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:var(--luca-blush);border-radius:16px;padding:34px 24px}
.luca-value{text-align:center}
.luca-value__icon{width:60px;height:60px;border-radius:50%;background:#fff;color:var(--luca-accent);
	display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px}
.luca-value h4{font-size:16px;margin-bottom:6px}
.luca-value p{font-size:13px;color:var(--luca-muted);margin:0}
.luca-team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.luca-team__card{background:var(--luca-cream);border-radius:14px;padding:18px;text-align:center}
.luca-team__card img{width:100%;border-radius:12px;margin-bottom:12px;aspect-ratio:1/1;object-fit:cover}
.luca-team__card strong{display:block}
.luca-team__card span{font-size:13px;color:var(--luca-muted)}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.luca-contact-hero{background:var(--luca-blush)}
.luca-contact-hero__inner{max-width:var(--maxw);margin:0 auto;padding:50px 20px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.luca-contact-hero h1{font-size:clamp(32px,4.6vw,46px)}
.luca-contact__wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.luca-contact__form,.luca-contact__info{border:1px solid var(--luca-line);border-radius:14px;padding:26px}
.luca-contact__form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.luca-contact__form label{display:block;font-size:13px;font-weight:600;margin:12px 0 6px}
.luca-contact__form input,.luca-contact__form textarea,.luca-contact__form select{width:100%;border:1px solid var(--luca-line);border-radius:9px;padding:12px 14px;font-size:15px;font-family:inherit}
.luca-contact__info-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--luca-line)}
.luca-contact__info-item:last-child{border:none}
.luca-contact__info-item .luca-trust__icon{width:44px;height:44px;border-radius:50%;background:var(--luca-blush);display:flex;align-items:center;justify-content:center;color:var(--luca-accent);flex:0 0 auto}
.luca-contact__info-item a{color:var(--luca-accent);font-weight:600}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
	.luca-footer__top{grid-template-columns:1fr 1fr 1fr;gap:24px}
	.luca-footer__brand{grid-column:1/-1}
	.luca-gram__grid{grid-template-columns:repeat(4,1fr)}
	.luca-vids__wrap,.luca-ingredients__wrap{grid-template-columns:1fr}
	.luca-shop-hero__inner{grid-template-columns:1fr}
}
@media (max-width:900px){
	.luca-nav{display:none}
	.luca-burger{display:inline-flex}
	.luca-header__inner{gap:14px}
	.luca-logo{margin-right:auto}
	.luca-hero__inner,.luca-about-hero__inner,.luca-contact-hero__inner{grid-template-columns:1fr;text-align:center}
	.luca-hero__sub{margin-left:auto;margin-right:auto}
	.luca-hero__badges{justify-content:center}
	.luca-hero__media{order:-1}
	.woocommerce-cart .woocommerce .cart-collaterals,.woocommerce .cart-collaterals .cart_totals{width:100%!important}
	.luca-contact__wrap{grid-template-columns:1fr}
}
@media (max-width:768px){
	.luca-featurerow__grid,.luca-benefits__grid,.luca-how__grid,.luca-stats__grid,
	.luca-products,.woocommerce ul.products,.luca-ingredients__grid,.luca-values,.luca-team,
	.luca-trust,.luca-pdp-trust,.luca-vids__grid,.luca-faq__grid{grid-template-columns:repeat(2,1fr)}
	.luca-how__step::after{display:none}
	.luca-stat{border-right:none}
	.luca-stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
	.luca-stat__num{font-size:26px}
	.luca-topbar__inner{gap:16px;font-size:12px}
	.luca-heading--split{flex-direction:row;align-items:center}
	.woocommerce div.product div.images,.woocommerce div.product div.summary{width:100%!important;float:none}
	.woocommerce-checkout #customer_details,.woocommerce-checkout #order_review{width:100%!important}
	.luca-news__inner{flex-direction:column;text-align:center;align-items:stretch}
	.luca-drawer{inset:0 12% 0 0}
}
@media (max-width:520px){
	.luca-topbar__item:not(:first-child){display:none}
	.luca-featurerow__grid,.luca-benefits__grid,.luca-vids__grid,.luca-ingredients__grid,
	.luca-values,.luca-team,.luca-faq__grid,.luca-contact__form .row{grid-template-columns:1fr}
	.luca-products,.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:12px}
	.luca-card,ul.products li.product{padding:10px}
	.luca-gram__grid{grid-template-columns:repeat(3,1fr)}
	.luca-hero__title{font-size:38px}
	.woocommerce div.product form.cart{flex-direction:column}
	.woocommerce div.product form.cart .button{justify-content:center}
}

/* ==========================================================================
   v2.2 FIXES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HORIZONTAL OVERFLOW / LEFT-ALIGNMENT BUG
   Something wider than the viewport was creating a horizontal scroll area.
   Because .luca-container centres with `margin:0 auto`, it centred against
   that wider box — which reads as "everything is stuck to the left".
   Clip the overflow and stop grid/flex children from refusing to shrink.
   -------------------------------------------------------------------------- */
/* NOTE: `overflow-x:hidden` on html/body turns the document into a scroll
   container, which silently breaks `position:sticky` on .luca-header.
   `overflow-x:clip` clips the overflow WITHOUT creating a scroll container,
   so the sticky header keeps working. Verified in Chromium. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){
	/* Older Safari: prefer "no horizontal scrollbar" over a sticky header. */
	html,body{overflow-x:hidden}
}
.luca-container{max-width:min(var(--maxw),100%)}

/* Grid & flex children default to min-width:auto, so long words / images
   push tracks wider than their column. Force them to be shrinkable. */
.luca-hero__inner>*,.luca-featurerow__grid>*,.luca-benefits__grid>*,
.luca-how__grid>*,.luca-stats__grid>*,.luca-ingredients__wrap>*,
.luca-ingredients__grid>*,.luca-vids__wrap>*,.luca-vids__grid>*,
.luca-faq__grid>*,.luca-footer__top>*,.luca-trust>*,.luca-values>*,
.luca-team>*,.luca-contact__wrap>*,.luca-shop-hero__inner>*,
.luca-products>*,.woocommerce ul.products>li.product{min-width:0}

/* Carousel arrows were sitting outside the container edge. */
.luca-carousel{overflow:hidden}
.luca-carousel__nav--prev{left:6px}
.luca-carousel__nav--next{right:6px}

/* The off-canvas drawer must never contribute to page width. */
.luca-drawer{max-width:340px;inset:0 auto 0 0;width:86%}

/* --------------------------------------------------------------------------
   2. PRODUCT CARD — equal heights, no badge/heart collision, clean images
   -------------------------------------------------------------------------- */
.woocommerce ul.products{align-items:stretch}
.woocommerce ul.products li.product,.luca-card{
	display:flex;flex-direction:column;height:100%}

/* Media block: fixed square, image always contained (never cropped/stretched). */
.luca-card__media{flex:0 0 auto;aspect-ratio:1/1;width:100%}
.woocommerce ul.products li.product .luca-card__media a{display:block;width:100%;height:100%}
.woocommerce ul.products li.product .luca-card__media img,
.luca-card__media img{width:100%;height:100%;object-fit:contain;padding:8px}

/* WooCommerce placeholder image: centre it and mute it instead of stretching. */
.woocommerce ul.products li.product img.woocommerce-placeholder{
	object-fit:contain;padding:22%;opacity:.28;mix-blend-mode:normal}

/* Title: clamp to 2 lines so every card is the same height. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.luca-card h3{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	line-clamp:2;overflow:hidden;min-height:2.6em;font-size:15px;line-height:1.3}

/* Push price + button to the bottom so buttons line up across the row. */
.woocommerce ul.products li.product .price{margin-top:auto}
.woocommerce ul.products li.product .button,.luca-card .button{
	margin-top:8px;white-space:nowrap;padding:11px 10px;font-size:13.5px}

/* Badges: cap their width and keep clear of the heart button. */
.luca-card__badges{max-width:calc(100% - 58px);z-index:2}
.luca-badge{font-size:10.5px;padding:4px 8px;line-height:1.2;white-space:nowrap;
	box-shadow:0 2px 6px rgba(0,0,0,.15)}
.luca-card__wish{z-index:3;width:32px;height:32px}

/* Hide WooCommerce's own sale flash (we render our own badge). */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale{display:none}

/* --------------------------------------------------------------------------
   3. PRODUCT CATEGORY TILES (when the shop shows categories)
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product-category{padding:0;overflow:hidden}
.woocommerce ul.products li.product-category a{display:block;height:100%}
.woocommerce ul.products li.product-category img{
	width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--luca-cream);margin:0}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
	font-family:var(--font-head);font-size:15px;font-weight:600;padding:14px 12px;
	margin:0;text-align:center;display:block;min-height:0}
.woocommerce ul.products li.product-category h2 .count{
	background:transparent;color:var(--luca-muted);font-weight:500;font-size:13px;padding:0 0 0 4px}

/* --------------------------------------------------------------------------
   4. MOBILE PRODUCT GRID — 2 up, readable, no wrapping buttons
   -------------------------------------------------------------------------- */
@media (max-width:520px){
	.woocommerce ul.products,.luca-products{grid-template-columns:repeat(2,1fr);gap:12px}
	.woocommerce ul.products li.product,.luca-card{padding:8px}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.luca-card h3{font-size:13.5px;min-height:2.6em}
	.woocommerce ul.products li.product .price,.luca-card__price{font-size:15px}
	.woocommerce ul.products li.product .button,.luca-card .button{
		font-size:12px;padding:10px 6px}
	.luca-badge{font-size:9.5px;padding:3px 6px}
	.luca-card__wish{width:28px;height:28px;font-size:14px}
	.luca-card__badges{max-width:calc(100% - 44px)}
}

/* ==========================================================================
   v2.3 — PRODUCT CARD (template override: woocommerce/content-product.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HARD RESET of WooCommerce's own loop layout.
   woocommerce.css ships `li.product{float:left;width:22.05%;margin:0 3.8% ...}`
   which collapses the card to a fraction of its grid column while the price
   and Add-to-cart keep their natural width — that's why the button was clipped.
   Grid owns the layout now; the <li> must simply fill its track.
   -------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products{
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
	gap:22px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product{
	float:none!important;width:auto!important;max-width:none!important;
	margin:0!important;padding:0!important;clear:none!important;
	min-width:0;display:flex;flex-direction:column;height:100%}

/* --------------------------------------------------------------------------
   THE CARD
   -------------------------------------------------------------------------- */
.luca-pcard{
	background:#fff;border:1px solid var(--luca-line);border-radius:16px;
	overflow:hidden;position:relative;transition:box-shadow .22s ease,transform .22s ease}
.luca-pcard:hover{box-shadow:var(--luca-shadow-lg);transform:translateY(-3px)}
.luca-pcard:hover .luca-pcard__peek{opacity:1;transform:none}

/* Media tile */
.luca-pcard__media{
	position:relative;aspect-ratio:1/1;width:100%;flex:0 0 auto;
	background:linear-gradient(160deg,var(--luca-blush) 0%,var(--luca-cream) 100%);
	overflow:hidden}
.luca-pcard__imglink{display:block;width:100%;height:100%}
.luca-pcard__media img,.luca-pcard__img{
	width:100%!important;height:100%!important;object-fit:contain;
	padding:12%;margin:0!important;transition:transform .35s ease;mix-blend-mode:multiply}
.luca-pcard:hover .luca-pcard__media img{transform:scale(1.06)}
/* WooCommerce placeholder: don't stretch a grey icon across the tile. */
.luca-pcard__media img.woocommerce-placeholder{padding:26%;opacity:.25;mix-blend-mode:normal}

/* Badges — stacked top-left, never under the heart */
.luca-pcard__badges{
	position:absolute;top:10px;left:10px;z-index:2;
	display:flex;flex-direction:column;align-items:flex-start;gap:6px;
	max-width:calc(100% - 56px)}
.luca-pcard .luca-badge{
	font-size:10.5px;font-weight:700;letter-spacing:.4px;line-height:1;
	padding:6px 9px;border-radius:999px;color:#fff;white-space:nowrap;
	box-shadow:0 2px 8px rgba(0,0,0,.18)}
.luca-badge--sale{background:var(--luca-accent)}
.luca-badge--best{background:var(--luca-ink)}
.luca-badge--oos{background:#8a8a8a}

/* Wishlist heart */
.luca-pcard__wish{
	position:absolute;top:10px;right:10px;z-index:3;
	width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);
	border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;
	color:var(--luca-ink);font-size:16px;cursor:pointer;transition:.18s;
	box-shadow:0 2px 8px rgba(0,0,0,.10)}
.luca-pcard__wish:hover{color:var(--luca-accent);transform:scale(1.08)}

/* Quick-view eye — slides in on hover (always visible on touch) */
.luca-pcard__peek{
	position:absolute;right:10px;bottom:10px;z-index:3;
	width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);
	border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;
	color:var(--luca-ink);font-size:16px;opacity:0;transform:translateY(6px);
	transition:.2s ease;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.luca-pcard__peek:hover{color:var(--luca-accent)}
@media (hover:none){.luca-pcard__peek{opacity:1;transform:none}}

/* Body — flex column so the footer pins to the bottom of every card */
.luca-pcard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 14px 16px;gap:6px}

.luca-pcard__title,
.woocommerce ul.products li.product .luca-pcard__title{
	font-family:var(--font-head);font-size:15px;font-weight:600;line-height:1.35;
	margin:0;padding:0;color:var(--luca-ink);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;
	overflow:hidden;min-height:2.7em}
.luca-pcard__title a{color:inherit}
.luca-pcard__title a:hover{color:var(--luca-accent)}

.luca-pcard__size{font-size:12.5px;color:var(--luca-muted);margin-top:-2px}
.luca-pcard__rating{display:flex;align-items:center;gap:4px;font-size:13px}

/* Footer block: pricing + button, pinned to the bottom */
.luca-pcard__foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:10px}
.luca-pcard__pricing{display:flex;flex-direction:column;gap:2px}

.woocommerce ul.products li.product .luca-pcard__price,
.luca-pcard__price{
	font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--luca-ink);
	margin:0;line-height:1.2;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.luca-pcard__price ins{text-decoration:none;color:var(--luca-accent)}
.luca-pcard__price del{color:var(--luca-muted);font-weight:400;font-size:14px;opacity:.85}
.luca-pcard__price del span{text-decoration:line-through}
.luca-pcard__save{
	font-size:11.5px;font-weight:600;color:var(--luca-success);
	background:rgba(46,158,91,.10);border-radius:6px;padding:3px 7px;align-self:flex-start}

/* Add to cart — full width, never clipped, never wrapped */
.woocommerce ul.products li.product a.button.luca-pcard__btn,
.luca-pcard__btn{
	display:flex!important;align-items:center;justify-content:center;gap:8px;
	width:100%;box-sizing:border-box;margin:0!important;
	background:var(--luca-ink);color:#fff;border:none;border-radius:10px;
	padding:12px 12px;font-family:var(--font-body);font-weight:600;font-size:13.5px;
	letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	transition:background .18s ease}
.woocommerce ul.products li.product a.button.luca-pcard__btn:hover,
.luca-pcard__btn:hover{background:var(--luca-accent)}
.luca-pcard__btn-icon{display:inline-flex;font-size:16px;flex:0 0 auto}
.luca-pcard__btn-icon svg{width:1em;height:1em}
/* WooCommerce's AJAX "View cart" link + loading spinner */
.woocommerce ul.products li.product .added_to_cart{
	display:block;text-align:center;margin-top:8px;font-size:12.5px;
	color:var(--luca-accent);font-weight:600}
.woocommerce ul.products li.product a.button.loading{opacity:.75}
.woocommerce ul.products li.product a.button.added::after{content:none}

/* Kill WooCommerce's default sale flash — we render our own badge */
.woocommerce ul.products li.product span.onsale,.woocommerce span.onsale{display:none!important}

/* --------------------------------------------------------------------------
   SHOP TOOLBAR + HERO
   -------------------------------------------------------------------------- */
.luca-shop-hero__copy h1{margin:6px 0 10px}
.luca-shop-hero__media{aspect-ratio:16/10;border-radius:16px;
	background:linear-gradient(160deg,var(--luca-cream),var(--luca-blush))}
.luca-shop-toolbar{padding:0 0 4px}
.woocommerce .woocommerce-result-count{margin:0;font-size:14px;color:var(--luca-muted)}

/* --------------------------------------------------------------------------
   RESPONSIVE PRODUCT GRID
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
	.woocommerce ul.products,ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
	.woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:520px){
	.woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.luca-pcard__body{padding:12px 10px 14px}
	.luca-pcard__title{font-size:13.5px}
	.luca-pcard__price{font-size:16px}
	.luca-pcard__price del{font-size:12.5px}
	.luca-pcard__btn{font-size:12px;padding:11px 8px;gap:6px}
	.luca-pcard__btn-icon{font-size:14px}
	.luca-pcard__wish,.luca-pcard__peek{width:30px;height:30px;font-size:14px}
	.luca-pcard .luca-badge{font-size:9.5px;padding:5px 7px}
	.luca-pcard__badges{max-width:calc(100% - 46px)}
}
/* Very narrow phones: let the button label shrink rather than overflow. */
@media (max-width:360px){
	.luca-pcard__btn{font-size:11px;letter-spacing:0}
	.luca-pcard__btn-icon{display:none}
}

/* ==========================================================================
   v2.4 — LOGO SIZING + MOBILE DRAWER
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOGO
   the_custom_logo() emits <a class="custom-logo-link"><img class="custom-logo">.
   Target every variant so an uploaded logo can never render at natural size.
   -------------------------------------------------------------------------- */
.luca-logo{display:inline-flex;align-items:center;line-height:1;flex:0 0 auto}
.luca-logo--custom{max-width:190px}
.luca-logo img,
.custom-logo-link,
.custom-logo-link img,
img.custom-logo{
	max-height:52px;width:auto!important;height:auto!important;
	max-width:100%;object-fit:contain;display:block}
.custom-logo-link{display:inline-flex;align-items:center}

@media (max-width:900px){
	.luca-logo--custom{max-width:150px}
	.luca-logo img,.custom-logo-link img,img.custom-logo{max-height:40px}
	.luca-logo{font-size:22px}
}
@media (max-width:520px){
	.luca-logo--custom{max-width:120px}
	.luca-logo img,.custom-logo-link img,img.custom-logo{max-height:34px}
	.luca-header__inner{padding:12px 14px;gap:10px}
	.luca-actions{gap:13px}
	.luca-actions a{font-size:19px}
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */
.luca-drawer{
	position:fixed;top:0;left:0;bottom:0;right:auto;
	width:86%;max-width:340px;z-index:200;
	background:#fff;box-shadow:var(--luca-shadow-lg);
	transform:translateX(-105%);transition:transform .28s ease;
	display:flex;flex-direction:column;
	padding:0;overflow-y:auto;overscroll-behavior:contain}
.luca-drawer.is-open{transform:none}

.luca-drawer__head{
	display:flex;align-items:center;justify-content:space-between;
	padding:18px 20px;border-bottom:1px solid var(--luca-line);flex:0 0 auto}
.luca-drawer__brand{
	font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:2px;color:var(--luca-ink)}
.luca-drawer__close{
	background:none;border:none;font-size:30px;line-height:1;color:var(--luca-ink);
	padding:0 4px;cursor:pointer;float:none}
.luca-drawer__close:hover{color:var(--luca-accent)}

.luca-drawer__nav{padding:6px 20px;flex:1 1 auto}
.luca-drawer__nav ul{list-style:none;margin:0;padding:0}
.luca-drawer__nav li{border-bottom:1px solid var(--luca-line)}
.luca-drawer__nav li:last-child{border-bottom:none}
.luca-drawer__nav a{
	display:block;padding:15px 2px;font-weight:600;font-size:16px;color:var(--luca-ink)}
.luca-drawer__nav a:hover,.luca-drawer__nav .current-menu-item>a{color:var(--luca-accent)}
/* Sub-menus (e.g. Shop > categories) */
.luca-drawer__nav .sub-menu{display:block;padding-left:12px;margin-bottom:6px}
.luca-drawer__nav .sub-menu li{border:none}
.luca-drawer__nav .sub-menu a{padding:9px 2px;font-weight:500;font-size:14.5px;color:var(--luca-muted)}

.luca-drawer__actions{padding:14px 20px 4px;flex:0 0 auto}
.luca-drawer__actions .luca-btn{margin-bottom:12px}
.luca-drawer__link{
	display:block;padding:11px 2px;font-size:14.5px;color:var(--luca-muted);
	border-bottom:1px solid var(--luca-line)}
.luca-drawer__link:hover{color:var(--luca-accent)}

.luca-drawer__foot{
	padding:16px 20px 24px;flex:0 0 auto;background:var(--luca-blush);margin-top:14px}
.luca-drawer__foot a{display:block;font-size:14px;color:var(--luca-ink);padding:4px 0;font-weight:500}
.luca-drawer__foot a:hover{color:var(--luca-accent)}

/* Overlay sits under the drawer, above everything else */
.luca-overlay{
	position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;
	opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.luca-overlay.is-open{opacity:1;visibility:visible}

/* Never show the drawer on desktop, even if a stray class lingers */
@media (min-width:901px){
	.luca-drawer,.luca-overlay{display:none}
}

/* ==========================================================================
   v2.5 — BUNDLED IMAGERY (hero, promo banner, gallery, about/contact)
   ========================================================================== */

/* Hero media: ONE consistent cropped frame for every slide.
   Cropping (cover) instead of shrinking (contain) equalises slide heights —
   previously the tall portrait slide set the whole section's height and the
   landscape slides sat in a sea of empty blush space. */
/* v2.13: the frame now lives on the WRAPPER, not the <img>. Two reasons:
   every slide occupies an identical box no matter what dimensions a custom
   upload has, and the blend/feather in the v2.13 block needs a stable
   blush-painted box behind the image to composite against. */
.luca-hero__media{
	width:100%;max-width:560px;margin:0 auto;
	aspect-ratio:4/3;background:var(--luca-blush)}
.luca-hero__media img,.luca-hero__img{
	width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* --------------------------------------------------------------------------
   FULL-WIDTH PROMO BANNER
   The bundled fragrance banner already contains its own artwork + text, so the
   section is just a clean, clickable, responsive image. No overlay copy — that
   would collide with the text baked into the image.
   -------------------------------------------------------------------------- */
.luca-promo{padding:0 0 8px}
.luca-promo__link{
	display:block;max-width:var(--maxw);margin:0 auto;padding:0 20px;
	border-radius:0;overflow:hidden}
.luca-promo__link img{
	width:100%;height:auto;display:block;border-radius:16px;
	transition:transform .4s ease;box-shadow:var(--luca-shadow)}
.luca-promo__link:hover img{transform:scale(1.01)}

/* --------------------------------------------------------------------------
   SOCIAL GALLERY TILES — real photos now, so crop them square and zoom on hover
   -------------------------------------------------------------------------- */
.luca-gram__item{display:block;position:relative}
.luca-gram__item img{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .35s ease}
.luca-gram__item:hover img{transform:scale(1.07)}
.luca-gram__item::after{
	content:"";position:absolute;inset:0;background:rgba(200,32,32,0);
	transition:background .25s ease}
.luca-gram__item:hover::after{background:rgba(200,32,32,.12)}

/* --------------------------------------------------------------------------
   SHOP / COLLECTION BANNER IMAGE
   -------------------------------------------------------------------------- */
.luca-shop-hero__media{
	aspect-ratio:auto;background:none;border-radius:0;
	display:flex;align-items:center;justify-content:center}
.luca-shop-hero__media img{
	width:100%;max-width:420px;height:auto;object-fit:contain;
	border-radius:16px;display:block}

/* --------------------------------------------------------------------------
   ABOUT PAGE
   -------------------------------------------------------------------------- */
.luca-about-hero__img{
	width:100%;height:auto;border-radius:16px;object-fit:cover;display:block}

/* 3-image story collage: one tall image + two stacked */
.luca-story__grid{
	display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.luca-story__grid img{
	width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;
	background:var(--luca-cream)}
.luca-story__tall{grid-row:span 2;min-height:320px}
.luca-story__grid img:not(.luca-story__tall){aspect-ratio:4/3}

.luca-about__feature-img{
	width:100%;height:auto;border-radius:16px;object-fit:cover;display:block;
	background:var(--luca-cream)}

/* --------------------------------------------------------------------------
   CONTACT PAGE
   -------------------------------------------------------------------------- */
.luca-contact-hero__img{
	width:100%;max-width:460px;height:auto;margin-left:auto;
	border-radius:16px;object-fit:cover;display:block}

@media (max-width:900px){
	.luca-hero__media{max-width:440px}
	.luca-contact-hero__img{margin:0 auto;max-width:340px}
	.luca-shop-hero__media img{max-width:300px}
	.luca-story__tall{min-height:220px}
}
@media (max-width:520px){
	.luca-promo__link{padding:0 14px}
	.luca-promo__link img{border-radius:12px}
	.luca-story__grid{gap:10px}
	.luca-story__tall{min-height:180px}
}

/* ==========================================================================
   v2.6 — REELS (shoppable vertical video carousel)
   ========================================================================== */

.luca-reels{background:var(--luca-blush)}
.luca-reels__carousel{position:relative}

/* Horizontal snap track. Cards keep a strict 9:16 ratio like Instagram Reels. */
/* Flex, not grid: the poster/video are absolutely positioned, so a grid track
   declared `minmax(0, …)` collapses to zero intrinsic width and the cards render
   only a few pixels wide. An explicit flex-basis keeps every card a fixed size. */
.luca-reels__track{
	display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
	padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.luca-reels__track::-webkit-scrollbar{display:none}
.luca-reels__track>.luca-reel{flex:0 0 230px;width:230px;scroll-snap-align:center}

.luca-reels__nav{
	position:absolute;top:calc(50% - 20px);width:42px;height:42px;border-radius:50%;
	background:#fff;border:1px solid var(--luca-line);box-shadow:var(--luca-shadow);
	display:flex;align-items:center;justify-content:center;color:var(--luca-ink);
	z-index:4;cursor:pointer;transition:.18s}
.luca-reels__nav:hover{background:var(--luca-ink);color:#fff}
.luca-reels__nav--prev{left:-14px;transform:scaleX(-1)}
.luca-reels__nav--next{right:-14px}
@media (max-width:900px){.luca-reels__nav{display:none}}

/* ---------- The reel card ---------- */
.luca-reel{margin:0}
.luca-reel__media{
	position:relative;aspect-ratio:9/16;width:100%;
	border-radius:16px;overflow:hidden;background:#111;
	box-shadow:var(--luca-shadow);cursor:pointer;
	transition:transform .25s ease,box-shadow .25s ease}
.luca-reel:hover .luca-reel__media{transform:translateY(-3px);box-shadow:var(--luca-shadow-lg)}

.luca-reel__poster,.luca-reel__video{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.luca-reel__poster--empty{background:linear-gradient(160deg,#2a2a2a,#111)}
.luca-reel__video{opacity:0;transition:opacity .25s ease;z-index:1}
.luca-reel.is-playing .luca-reel__video{opacity:1}
.luca-reel.is-playing .luca-reel__poster{opacity:0}
.luca-reel__poster{transition:opacity .25s ease,transform .4s ease}
.luca-reel:hover .luca-reel__poster{transform:scale(1.04)}

/* Subtle bottom scrim so overlay controls stay legible on any frame */
.luca-reel__media::after{
	content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:2;pointer-events:none;
	background:linear-gradient(transparent,rgba(0,0,0,.65))}

/* Big centre play button — hidden while playing */
.luca-reel__play{
	position:absolute;inset:0;margin:auto;z-index:3;
	width:56px;height:56px;border-radius:50%;border:none;
	background:rgba(255,255,255,.92);color:var(--luca-accent);
	display:flex;align-items:center;justify-content:center;font-size:24px;
	cursor:pointer;transition:.2s ease;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.luca-reel__play:hover{transform:scale(1.08)}
.luca-reel.is-playing .luca-reel__play{opacity:0;pointer-events:none;transform:scale(.7)}

/* Mute / unmute (MP4 only) */
.luca-reel__sound{
	position:absolute;top:10px;right:10px;z-index:4;
	width:34px;height:34px;border-radius:50%;border:none;
	background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(4px);
	display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}
.luca-reel__sound:hover{background:rgba(0,0,0,.7)}
.luca-reel__sound-on{display:none}
.luca-reel__sound[aria-pressed="true"] .luca-reel__sound-on{display:inline-flex}
.luca-reel__sound[aria-pressed="true"] .luca-reel__sound-off{display:none}

/* Instagram badge (source 3) */
.luca-reel__ig-badge{
	position:absolute;top:10px;right:10px;z-index:4;
	width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);
	color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.luca-reel__ig-badge:hover{background:var(--luca-accent)}

/* Shop CTA pinned to the bottom of the card */
.luca-reel__cta{
	position:absolute;left:10px;right:10px;bottom:10px;z-index:4;
	background:#fff;color:var(--luca-ink);border-radius:9px;
	padding:10px 12px;text-align:center;font-weight:600;font-size:13px;
	transition:.18s ease}
.luca-reel__cta:hover{background:var(--luca-accent);color:#fff}

.luca-reel__title{
	margin:10px 2px 0;font-size:13.5px;color:var(--luca-ink);font-weight:500;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden}

/* Instagram's own oEmbed card (fallback when no poster is set) */
.luca-reel--ig{background:#fff;border-radius:16px;overflow:hidden;flex:0 0 300px;width:300px}
.luca-reel--ig .instagram-media{
	min-width:0!important;width:100%!important;margin:0!important;border-radius:16px!important}

@media (max-width:768px){
	.luca-reels__track{gap:14px}
	.luca-reels__track>.luca-reel{flex:0 0 60%;width:60%}
}
@media (max-width:520px){
	.luca-reels__track{gap:12px}
	.luca-reels__track>.luca-reel{flex:0 0 70%;width:70%}
	.luca-reel__play{width:48px;height:48px;font-size:20px}
	.luca-reel__cta{font-size:12px;padding:9px 10px}
}

/* Respect reduced-motion: never autoplay, never zoom. */
@media (prefers-reduced-motion:reduce){
	.luca-reel__poster,.luca-reel__media,.luca-reel__video{transition:none}
	.luca-reel:hover .luca-reel__poster{transform:none}
	.luca-reel:hover .luca-reel__media{transform:none}
}

/* ==========================================================================
   v2.7 — WOOCOMMERCE BLOCKS COMPATIBILITY (Cart & Checkout blocks)
   --------------------------------------------------------------------------
   WooCommerce ships two cart/checkout implementations:
     • the classic shortcode markup (table.shop_table, .cart_totals) — styled above
     • the newer BLOCK markup (.wp-block-woocommerce-cart, .wc-block-*) — styled here
   The block cart was completely unstyled by this theme, so it had no container
   padding and its table's min-content width (image + long product title + price
   + a 107px quantity stepper) pushed the whole page wider than small viewports.
   Because html/body use overflow-x:clip, that surplus width was silently CUT OFF
   rather than scrollable — which is why text appeared chopped on the right.
   ========================================================================== */

/* Container + gutters ----------------------------------------------------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-notices{
	max-width:var(--maxw);margin-left:auto;margin-right:auto;
	padding-left:20px;padding-right:20px;width:100%;box-sizing:border-box}

/* Nothing inside may exceed its column. */
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout *{min-width:0;max-width:100%}

/* Two-column layout ------------------------------------------------------- */
.wc-block-components-sidebar-layout{
	display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.wc-block-components-sidebar-layout .wc-block-components-main{
	flex:1 1 460px;width:auto;padding-right:0}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
	flex:1 1 300px;width:auto;
	background:#fff;border:1px solid var(--luca-line);border-radius:14px;padding:20px}

/* Cart items table --------------------------------------------------------
   `table-layout:fixed` stops the longest product title from dictating the
   table's minimum width — the single biggest cause of the overflow. */
.wc-block-cart-items,
table.wc-block-cart-items{
	table-layout:fixed;width:100%;border-collapse:collapse;margin:0}
.wc-block-cart-items th{
	font-family:var(--font-head);font-size:12px;letter-spacing:.4px;
	text-transform:uppercase;color:var(--luca-muted);border-bottom:1px solid var(--luca-line)}
.wc-block-cart-items__row td{border-bottom:1px solid var(--luca-line);vertical-align:top}
.wc-block-cart-item__image{width:84px}
.wc-block-cart-item__image img{
	width:72px;height:72px;object-fit:contain;border-radius:10px;background:var(--luca-cream)}

.wc-block-components-product-name{
	font-weight:600;color:var(--luca-ink);line-height:1.35;
	overflow-wrap:anywhere;word-break:break-word;display:block}
.wc-block-components-product-name:hover{color:var(--luca-accent)}
.wc-block-cart-item__wrap .wc-block-components-product-metadata{font-size:13px;color:var(--luca-muted)}

/* Quantity stepper — its 107px min-width was another overflow source. */
.wc-block-components-quantity-selector{
	min-width:0!important;max-width:112px;border:1px solid var(--luca-line);border-radius:9px;overflow:hidden}
.wc-block-components-quantity-selector__input{min-width:0;width:34px}
.wc-block-components-quantity-selector__button{width:30px;cursor:pointer}
.wc-block-components-quantity-selector__button:hover{color:var(--luca-accent)}

/* Prices ------------------------------------------------------------------ */
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount{font-family:var(--font-head);font-weight:600;color:var(--luca-ink)}
.wc-block-components-product-price__regular{color:var(--luca-muted);font-weight:400}

/* Totals ------------------------------------------------------------------ */
.wc-block-cart__totals-title,
.wc-block-components-title{font-family:var(--font-head);color:var(--luca-ink)}
.wc-block-components-totals-item{
	display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0}
.wc-block-components-totals-item__label{color:var(--luca-muted)}
.wc-block-components-totals-item__value{font-weight:600;white-space:nowrap}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
	font-family:var(--font-head);font-size:20px;color:var(--luca-ink)}

/* Buttons ----------------------------------------------------------------- */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
	background:var(--luca-ink)!important;color:#fff!important;border:none!important;
	border-radius:10px!important;padding:14px 18px!important;font-family:var(--font-body);
	font-weight:600;font-size:15px;width:100%;box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;text-align:center;
	transition:background .18s ease}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{background:var(--luca-accent)!important}
.wc-block-components-button__text{white-space:normal}

/* Notices ----------------------------------------------------------------- */
.wc-block-components-notice-banner{
	border-radius:10px;border-left-width:4px;align-items:flex-start;
	margin:0 0 18px;font-size:14px;line-height:1.5}
.wc-block-components-notice-banner>.wc-block-components-notice-banner__content{
	overflow-wrap:anywhere;min-width:0}

/* Form fields ------------------------------------------------------------- */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-select__container select{
	border:1px solid var(--luca-line)!important;border-radius:9px!important;
	min-height:48px;box-sizing:border-box;width:100%}

/* Coupon row */
.wc-block-components-panel__button{font-weight:600;color:var(--luca-ink)}
.wc-block-components-totals-coupon__form{display:flex;gap:8px;flex-wrap:wrap}

/* Stack the sidebar under the cart on tablets & phones -------------------- */
@media (max-width:900px){
	.wc-block-components-sidebar-layout{display:block}
	.wc-block-components-sidebar-layout .wc-block-components-main{width:100%;padding-right:0}
	.wc-block-components-sidebar-layout .wc-block-components-sidebar{width:100%;margin-top:26px}
}

/* Phones: collapse the cart table into stacked cards ---------------------- */
@media (max-width:600px){
	.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{padding-left:14px;padding-right:14px}
	.wc-block-cart-items thead{display:none}
	/* NOTE ON SPECIFICITY: `.wc-block-cart-items tr` scores (0,1,1) and would beat a
	   bare `.wc-block-cart-items__row` (0,1,0), so the grid below must be written as
	   `tr.wc-block-cart-items__row` (0,1,1 + later in source) or it never applies. */
	.wc-block-cart-items,.wc-block-cart-items tbody,.wc-block-cart-items td{display:block;width:auto}
	.wc-block-cart-items tr.wc-block-cart-items__row{
		position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);
		gap:0 14px;padding:16px 0;border-bottom:1px solid var(--luca-line);width:auto}
	.wc-block-cart-items tr.wc-block-cart-items__row td{border:none;padding:0;display:block}
	.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__image{
		grid-row:span 2;grid-column:1;width:72px}
	.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total{
		grid-column:2;text-align:left;margin-top:10px;font-family:var(--font-head);font-weight:700}
	.wc-block-components-quantity-selector{max-width:104px;margin-top:10px}
	.wc-block-components-sidebar-layout .wc-block-components-sidebar{padding:16px;border-radius:12px}
	.wc-block-components-totals-item__value{font-size:15px}
}

/* --------------------------------------------------------------------------
   NEWSLETTER — the form's 280px min-width plus the button forced the section
   wider than a 360px phone. Let it wrap and go full width.
   -------------------------------------------------------------------------- */
@media (max-width:560px){
	.luca-news__inner{flex-direction:column;align-items:stretch;text-align:center;gap:16px}
	.luca-news__form{flex-direction:column;min-width:0;width:100%;max-width:none}
	.luca-news__form input{width:100%;min-width:0}
	.luca-news__form button{width:100%}
}

/* --------------------------------------------------------------------------
   GLOBAL OVERFLOW GUARDS
   Anything that can force min-content width wider than the viewport.
   -------------------------------------------------------------------------- */
#luca-main table,.luca-container table{max-width:100%}
#luca-main img,#luca-main video,#luca-main iframe{max-width:100%}
.woocommerce table.shop_table{table-layout:fixed}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{overflow-wrap:anywhere}

/* Classic cart table -> stacked cards on phones */
@media (max-width:600px){
	.woocommerce-cart table.cart thead{display:none}
	.woocommerce-cart table.cart,.woocommerce-cart table.cart tbody,
	.woocommerce-cart table.cart tr,.woocommerce-cart table.cart td{display:block;width:auto}
	.woocommerce-cart table.cart tr{border-bottom:1px solid var(--luca-line);padding:14px 0}
	.woocommerce-cart table.cart td{border:none;padding:4px 0;text-align:left!important}
	.woocommerce-cart table.cart td.product-remove{position:absolute;right:10px}
	.woocommerce-cart table.cart img{width:72px}
}

/* Block cart/checkout page head (rendered by page.php) */
.luca-page-head--block{
	max-width:var(--maxw);margin:0 auto;padding:22px 20px 6px;box-sizing:border-box}
.luca-page-head--block h1{font-size:clamp(26px,4vw,34px);margin:6px 0 2px}
.luca-block-wc{padding-bottom:40px}
@media (max-width:600px){
	.luca-page-head--block{padding:16px 14px 4px}
}

/* ==========================================================================
   v2.8 — HERO SLIDER
   Crossfade between stacked slides. The section's height comes from the
   tallest slide (all slides participate in layout via grid-area stacking,
   invisible ones just have opacity 0), so nothing jumps between slides.
   ========================================================================== */
.luca-hero--slider{position:relative;display:grid;overflow:hidden}
.luca-hero--slider .luca-slide{
	grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);
	transition:opacity .7s ease,visibility .7s ease,transform .7s ease;
	pointer-events:none}
.luca-hero--slider .luca-slide.is-active{
	opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* Slight staggered entrance for the copy on the incoming slide */
.luca-hero--slider .luca-slide .luca-hero__content>*{
	transition:opacity .5s ease .15s,transform .5s ease .15s;
	opacity:0;transform:translateY(8px)}
.luca-hero--slider .luca-slide.is-active .luca-hero__content>*{opacity:1;transform:none}

/* Portrait slide (the bundled Defender shot): same 4/3 frame, crop aimed at
   the roof rack products + bonnet rather than the sky. */
.luca-slide--portrait .luca-hero__media img{object-position:center 42%}

/* Dots */
.luca-hero__dots{
	position:absolute;left:0;right:0;bottom:16px;z-index:5;
	display:flex;gap:8px;justify-content:center}
.luca-hero__dot{
	width:9px;height:9px;border-radius:999px;border:none;padding:0;cursor:pointer;
	background:rgba(20,20,20,.22);transition:.25s ease}
.luca-hero__dot:hover{background:rgba(20,20,20,.45)}
.luca-hero__dot.is-active{width:26px;background:var(--luca-accent)}

@media (max-width:900px){
	.luca-hero__dots{bottom:12px}
}
@media (max-width:520px){
	.luca-hero--slider .luca-hero__inner{padding-bottom:44px} /* room for dots */
}

/* Reduced motion: no fade/slide, instant switch, no autoplay (JS also checks) */
@media (prefers-reduced-motion:reduce){
	.luca-hero--slider .luca-slide,
	.luca-hero--slider .luca-slide .luca-hero__content>*{transition:none;transform:none}
}

/* v2.9 — COD badge on product page */
.luca-pdp-cod{
	display:flex;align-items:center;gap:8px;font-size:14px;color:#333;
	background:rgba(46,158,91,.08);border:1px solid rgba(46,158,91,.25);
	border-radius:9px;padding:9px 12px;margin:10px 0 0}
.luca-pdp-cod svg{color:var(--luca-success);flex:0 0 auto}

/* ==========================================================================
   v2.9.1 — HERO POLISH (compact, equal-height slides, tighter mobile type)
   ========================================================================== */
.luca-hero--slider .luca-hero__inner{padding-top:44px;padding-bottom:52px}

@media (max-width:900px){
	.luca-hero--slider .luca-hero__inner{
		padding-top:22px;padding-bottom:56px;gap:22px}
	/* Media first, then copy — and a slightly wider 16/11 crop reads better
	   than 4/3 in the single-column layout. */
	.luca-hero__media{max-width:none;aspect-ratio:16/11}
	.luca-hero__title{font-size:clamp(28px,8vw,36px);margin:10px 0 12px}
	.luca-hero__sub{font-size:15px;line-height:1.55;margin-bottom:20px}
	.luca-hero__eyebrow{font-size:12px}
	.luca-hero__badges{gap:12px 18px;margin-top:20px}
}
@media (max-width:520px){
	.luca-hero--slider .luca-hero__inner{padding-top:16px;padding-bottom:52px}
	.luca-hero__title{font-size:clamp(26px,7.6vw,32px)}
	.luca-hero__sub{font-size:14px}
	.luca-hero__badges{display:none} /* badges repeat in the feature row right below */
}

/* ==========================================================================
   v2.10 — MINI-CART DRAWER (theme palette, not the Shopify maroon)
   ========================================================================== */
.luca-cartdrawer{
	position:fixed;top:0;right:0;bottom:0;z-index:220;
	width:min(420px,92vw);background:#fff;box-shadow:-12px 0 40px rgba(20,20,20,.16);
	transform:translateX(105%);transition:transform .32s cubic-bezier(.22,.8,.3,1);
	display:flex;flex-direction:column}
.luca-cartdrawer.is-open{transform:none}
.luca-cartoverlay{
	position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:215;
	opacity:0;transition:opacity .3s ease}
.luca-cartoverlay.is-open{opacity:1}

.luca-cartdrawer__head{
	display:flex;align-items:center;justify-content:space-between;
	padding:18px 20px;border-bottom:1px solid var(--luca-line);flex:0 0 auto}
.luca-cartdrawer__head h3{margin:0;font-size:20px}
.luca-cartdrawer__close{
	background:none;border:none;font-size:30px;line-height:1;color:var(--luca-ink);
	cursor:pointer;padding:0 4px}
.luca-cartdrawer__close:hover{color:var(--luca-accent)}

.luca-cartdrawer__body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.luca-cartdrawer__meta{
	padding:12px 20px 0;margin:0;font-size:13px;color:var(--luca-muted)}
.luca-cartdrawer__items{flex:1 1 auto;overflow-y:auto;padding:8px 20px;min-height:0}

/* Item row */
.luca-citem{
	display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--luca-line);
	animation:luca-citem-in .3s ease}
@keyframes luca-citem-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.luca-citem:last-child{border-bottom:none}
.luca-citem__media{flex:0 0 72px}
.luca-citem__media img{
	width:72px;height:72px;object-fit:contain;border-radius:10px;background:var(--luca-cream)}
.luca-citem__info{flex:1 1 auto;min-width:0}
.luca-citem__title{
	display:block;font-weight:600;font-size:14px;line-height:1.35;color:var(--luca-ink);
	overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	line-clamp:2;overflow:hidden}
.luca-citem__title:hover{color:var(--luca-accent)}
.luca-citem__price{font-family:var(--font-head);font-weight:700;font-size:15px;margin:4px 0 8px}
.luca-citem__price del{color:var(--luca-muted);font-weight:400;font-size:13px}
.luca-citem__row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Quantity stepper */
.luca-qty{
	display:inline-flex;align-items:center;border:1px solid var(--luca-line);
	border-radius:9px;overflow:hidden;background:var(--luca-blush);transition:opacity .15s}
.luca-qty.is-busy{opacity:.55;pointer-events:none}
.luca-qty__btn{
	width:32px;height:34px;border:none;background:none;font-size:17px;cursor:pointer;
	color:var(--luca-ink);display:flex;align-items:center;justify-content:center}
.luca-qty__btn:hover{color:var(--luca-accent)}
.luca-qty input{
	width:34px;height:34px;border:none;background:transparent;text-align:center;
	font-weight:600;font-size:14px;padding:0}

.luca-citem__remove{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:9px;color:var(--luca-muted);font-size:16px}
.luca-citem__remove:hover{color:#fff;background:var(--luca-accent)}

/* Footer */
.luca-cartdrawer__foot{
	flex:0 0 auto;border-top:1px solid var(--luca-line);padding:16px 20px 20px;
	background:#fff}
.luca-cartdrawer__subtotal{
	display:flex;justify-content:space-between;align-items:baseline;
	font-size:15px;margin-bottom:2px}
.luca-cartdrawer__subtotal strong{font-family:var(--font-head);font-size:20px}
.luca-cartdrawer__note{margin:0 0 12px;font-size:12.5px;color:var(--luca-muted)}
.luca-cartdrawer__foot .luca-btn{gap:10px}
.luca-cartdrawer__viewcart{
	display:block;text-align:center;margin-top:10px;font-size:13.5px;font-weight:600;
	color:var(--luca-ink)}
.luca-cartdrawer__viewcart:hover{color:var(--luca-accent)}

/* Empty state */
.luca-cartdrawer__empty{
	flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:12px;padding:30px;text-align:center;color:var(--luca-muted)}
.luca-cartdrawer__empty-icon{font-size:44px;color:var(--luca-blush);
	background:var(--luca-blush);color:var(--luca-accent);width:84px;height:84px;border-radius:50%;
	display:flex;align-items:center;justify-content:center}

/* Badge pop when an item is added */
@keyframes luca-badge-pop{
	0%{transform:scale(1)}40%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.luca-count.is-bump{animation:luca-badge-pop .45s cubic-bezier(.22,.8,.3,1)}

/* The old inline "View cart" link on product cards is redundant now the
   drawer opens on add. */
.woocommerce ul.products li.product .added_to_cart{display:none!important}

@media (prefers-reduced-motion:reduce){
	.luca-cartdrawer,.luca-cartoverlay{transition:none}
	.luca-citem{animation:none}
	.luca-count.is-bump{animation:none}
}

/* ==========================================================================
   v2.11 — PRICE TYPOGRAPHY (Nykaa-style: Source Sans 3, tabular figures)
   One rule governs every price surface so they read consistently: product
   cards, single product, cart drawer, cart & checkout (classic + blocks).
   `font-variant-numeric: tabular-nums` keeps digits vertically aligned.
   ========================================================================== */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .luca-pcard__price,
.luca-pcard__price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.luca-citem__price,
.luca-cartdrawer__subtotal strong,
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price{
	font-family:var(--font-price);
	font-variant-numeric:tabular-nums lining-nums;
	font-feature-settings:"tnum" 1,"lnum" 1;
	letter-spacing:-.01em}

/* The rupee symbol in Source Sans sits a touch high; nudge it and give it a
   hair of space from the number, the way Nykaa spaces theirs. */
.woocommerce-Price-currencySymbol{margin-right:1px}

/* Keep struck-through original prices lighter and clearly secondary. */
.woocommerce .price del,
.luca-pcard__price del,
.luca-citem__price del,
.woocommerce div.product p.price del{
	font-family:var(--font-price);font-weight:400;opacity:.7}
.woocommerce .price ins,
.luca-pcard__price ins{font-weight:700}

/* Product card price: slightly larger + tighter, matching the Nykaa hierarchy. */
.luca-pcard__price{font-size:19px;font-weight:700;letter-spacing:-.015em}
.luca-pcard__price del{font-size:13.5px}

/* Single product price. */
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-weight:700}

/* ==========================================================================
   v2.11 — CHECKOUT BLOCK: order summary expanded by default on mobile
   --------------------------------------------------------------------------
   The WooCommerce Checkout block collapses the "Order summary" into a tappable
   accordion on small screens, hiding the line items behind a chevron. We keep
   it open so customers can see exactly what they're paying for. CSS forces the
   panel open; a tiny script also flips aria-expanded so assistive tech agrees.
   ========================================================================== */
.wc-block-components-checkout-order-summary__content,
.wc-block-components-panel__content{
	display:block!important;
	max-height:none!important;
	overflow:visible!important;
	opacity:1!important;
	visibility:visible!important}

/* Hide the collapse/expand toggle affordance so it reads as a static header. */
.wc-block-components-checkout-order-summary .wc-block-components-panel__button svg,
.wc-block-components-panel__button .wc-block-components-panel__button-icon{
	display:none!important}
.wc-block-components-checkout-order-summary .wc-block-components-panel__button{
	cursor:default;pointer-events:none}

/* Give the summary block a clean card, in theme colours. */
.wc-block-components-checkout-order-summary{
	border:1px solid var(--luca-line);border-radius:14px;overflow:hidden}
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-checkout-order-summary .wc-block-components-panel__button{
	font-family:var(--font-head);font-weight:700;color:var(--luca-ink)}
.wc-block-components-order-summary-item{
	display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.wc-block-components-order-summary-item__image{flex:0 0 56px}
.wc-block-components-order-summary-item__image img{
	width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--luca-cream)}
.wc-block-components-order-summary-item__quantity{
	background:var(--luca-ink)!important;color:#fff!important}

/* ==========================================================================
   v2.12 — CUSTOMER ACCOUNT (My Account, login/register, social slot)
   ========================================================================== */
.luca-account-hero{background:var(--luca-blush);padding:40px 0 30px;text-align:center}
.luca-account-hero h1{font-size:clamp(28px,4vw,40px);margin:6px 0 8px}
.luca-account-hero p{color:#444;max-width:520px;margin:0 auto}

.woocommerce-account .woocommerce{max-width:var(--maxw);margin:0 auto;padding:34px 20px 50px}

/* Login / register split into two branded cards */
.luca-account-forms{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;
	max-width:960px;padding:34px 20px 10px}
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2{
	width:auto;float:none;margin:0;
	border:1px solid var(--luca-line);border-radius:16px;padding:28px;background:#fff;
	box-shadow:var(--luca-shadow)}
.woocommerce-account .col2-set .col-1 h2,
.woocommerce-account .col2-set .col-2 h2,
.woocommerce h2{font-family:var(--font-head);font-size:22px;margin-bottom:6px}

/* Form fields */
.woocommerce-account form .form-row label,
.woocommerce form .form-row label{font-weight:600;font-size:13.5px;color:var(--luca-ink)}
.woocommerce-account form .input-text,
.woocommerce form .input-text{
	width:100%;border:1px solid var(--luca-line);border-radius:9px;padding:12px 14px;
	min-height:48px;box-sizing:border-box}
.woocommerce-account form .input-text:focus{
	border-color:var(--luca-accent);outline:none;box-shadow:0 0 0 3px rgba(200,32,32,.10)}

.woocommerce-account .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--luca-muted)}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account button.button{
	background:var(--luca-ink);color:#fff;border:none;border-radius:10px;
	padding:13px 22px;font-weight:600;width:100%;transition:background .18s ease}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account button.button:hover{background:var(--luca-accent)}
.woocommerce-account .lost_password a{color:var(--luca-accent);font-size:13px}

/* ---------- Social login slot ---------- */
.luca-sociallogin{margin:0 0 18px}
/* Style whatever buttons the plugin injects into the slot. */
.luca-sociallogin a,
.luca-sociallogin .nsl-button{
	width:100%!important;box-sizing:border-box;border-radius:10px!important;
	min-height:48px;display:flex!important;align-items:center;justify-content:center;
	font-weight:600!important;margin:0 0 10px!important}
.luca-sociallogin__or{
	position:relative;text-align:center;margin:16px 0 4px;color:var(--luca-muted);font-size:13px}
.luca-sociallogin__or::before{
	content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--luca-line)}
.luca-sociallogin__or span{position:relative;background:#fff;padding:0 12px}

/* Admin-only hint when no social plugin is installed */
.luca-admin-hint{
	max-width:960px;margin:16px auto 0;padding:12px 16px;font-size:13.5px;
	background:#fff7e6;border:1px solid #ffe1a8;border-radius:10px;color:#7a5b00}

/* ---------- Logged-in dashboard ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
	border:1px solid var(--luca-line);border-radius:14px;overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--luca-line)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
	display:block;padding:13px 18px;font-weight:600;color:var(--luca-ink)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
	background:var(--luca-blush);color:var(--luca-accent)}
.woocommerce-account .woocommerce-MyAccount-content{
	border:1px solid var(--luca-line);border-radius:14px;padding:26px}
.woocommerce-account .woocommerce-MyAccount-content mark{background:var(--luca-blush);color:var(--luca-ink)}

@media (max-width:768px){
	.luca-account-forms{grid-template-columns:1fr}
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content{width:100%!important;float:none!important;margin:0 0 20px}
}

/* ==========================================================================
   v2.13 — HERO MEDIA MERGED INTO THE SECTION
   ------------------------------------------------------------------------
   Root cause of the "pasted-on card" look: .luca-hero__media img carried
   background:#fff + border-radius + box-shadow. Slides 1 and 2 are product
   shots photographed on a near-white sweep (#F7F7F7 / ~#FAFAFA), so three
   different tones were stacking up — the photo's own white, the white card
   fill behind it, and the blush section — with a rounded, shadowed border
   drawn around the lot. That border is the rectangle you could see.

   The fix is per-image-type, because the three bundled slides are NOT the
   same kind of picture:
     · slide-all-products.jpg    1400x933  edges ~#F3F3F5–#FCFCFC  → cut-out
     · slide-sun-spray-hand.jpg  1200x800  edges a flat #F7F7F7    → cut-out
     · slide-defender-lifestyle.jpg 900x1600 blue sky top, dark
       ground bottom                                              → scenic
   A blanket mix-blend-mode:multiply would merge the first two beautifully
   and destroy the third (it would go near-black). So each slide declares
   its own mode via the Customizer; the bundled defaults are set above.

   STACKING-CONTEXT NOTE: .luca-slide sets transform on inactive slides,
   which creates a stacking context. mix-blend-mode only composites within
   its own stacking context, so the blush MUST be painted on
   .luca-hero__media (inside the slide) rather than relied upon from
   .luca-hero. That is why the frame rule above sets a background.
   For the same reason the mask goes on the <img>, never on the wrapper —
   masking the wrapper would isolate the subtree and silently kill the
   multiply, leaving a plain white rectangle.
   ========================================================================== */

/* Edge to edge on mobile: cancels .luca-hero__inner's 20px side padding.
   Negative margins rather than 100vw, so a desktop scrollbar can never
   reintroduce the horizontal overflow fixed back in v2.2. */
@media (max-width:900px){
	.luca-hero__media{margin-inline:-20px;width:auto;max-width:none}
}

/* No card treatment in either mode — this is what made it read as a
   separate element sitting on top of the blush. */
.luca-hero__media,
.luca-hero__media .luca-hero__img{border-radius:0;box-shadow:none;background-color:transparent}
.luca-hero__media{background-color:var(--luca-blush)}

/* --- CUT-OUT: product shot on a white/grey studio sweep -------------------
   multiply drops the sweep into the blush; the radial mask feathers what's
   left so there is no boundary at all, which also hides the ~3% tonal
   difference between a #F7F7F7 sweep multiplied over blush and raw blush. */
.luca-hero__media--cutout .luca-hero__img{
	/* Studio sweeps are rarely pure white — the two bundled cut-outs sit at
	   roughly #F7F7F7. Multiplying that over blush lands on rgb(243,230,226)
	   instead of rgb(251,237,233), i.e. a faint darker block. Lifting the
	   image by 255/247 first makes the sweep resolve to exactly blush.
	   Raise/lower --luca-cutout-lift if a future upload has a darker or
	   already-white background. */
	filter:brightness(var(--luca-cutout-lift,1.032));
	mix-blend-mode:multiply;
	-webkit-mask-image:radial-gradient(118% 100% at 50% 48%,#000 62%,rgba(0,0,0,0) 100%);
	        mask-image:radial-gradient(118% 100% at 50% 48%,#000 62%,rgba(0,0,0,0) 100%)}

/* --- SCENIC: a real photograph -------------------------------------------
   Kept intact — no multiply. Only a gentle outer feather so the hard
   rectangle dissolves into the blush while the photo stays punchy. */
.luca-hero__media--scenic .luca-hero__img{
	-webkit-mask-image:radial-gradient(140% 118% at 50% 50%,#000 80%,rgba(0,0,0,0) 100%);
	        mask-image:radial-gradient(140% 118% at 50% 50%,#000 80%,rgba(0,0,0,0) 100%)}

/* Browsers without mask-image support simply render the full image with a
   visible edge — degraded, not broken. Same for mix-blend-mode. */

/* ==========================================================================
   v2.15 — STICKY MOBILE ADD-TO-CART BAR
   Shown only on phones, and only once the real Add to cart button scrolls out
   of view (toggled by JS via IntersectionObserver). z-index 90 keeps it above
   page content but below the nav drawer (150/200) and mini-cart (215/220), so
   opening either still covers it.
   ========================================================================== */
.luca-stickybar{
	position:fixed;left:0;right:0;bottom:0;z-index:90;
	display:none;align-items:center;gap:12px;
	padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
	background:#fff;border-top:1px solid var(--luca-line);
	box-shadow:0 -6px 24px rgba(20,20,20,.12);
	transform:translateY(120%);transition:transform .28s ease}
.luca-stickybar.is-visible{transform:translateY(0)}
.luca-stickybar__info{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.luca-stickybar__img{width:44px;height:44px;flex:0 0 auto;border-radius:8px;
	object-fit:cover;background:var(--luca-blush)}
.luca-stickybar__text{display:flex;flex-direction:column;min-width:0}
.luca-stickybar__name{font-size:13px;font-weight:600;line-height:1.2;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.luca-stickybar__price{font-size:15px;font-weight:700;color:var(--luca-ink);line-height:1.3}
.luca-stickybar__price del{display:none}            /* keep the bar compact */
.luca-stickybar__price ins{text-decoration:none}
.luca-stickybar__btn{
	flex:0 0 auto;background:var(--luca-ink);color:#fff;border:none;
	border-radius:9px;height:46px;padding:0 22px;cursor:pointer;
	font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;
	transition:background .2s ease}
.luca-stickybar__btn:hover{background:var(--luca-accent)}
.luca-stickybar__btn.is-loading{opacity:.7;pointer-events:none}

/* Phones only — on desktop the buy box stays beside the gallery, always visible. */
@media (max-width:900px){ .luca-stickybar{display:flex} }
@media (min-width:901px){ .luca-stickybar{display:none!important} }

@media (prefers-reduced-motion:reduce){
	.luca-stickybar{transition:none}
}

/* ==========================================================================
   v2.16 — HERO CSS ART (NO IMAGES)
   The hero media column is now a crafted, pure-CSS panel instead of a photo.
   Three variants, one per slide: glow (a glowing serum), shield (an SPF sun),
   ritual (the full range as type). Every shape/gradient/animation is CSS.
   This block is appended last so it supersedes the v2.13 image treatment
   (which only ever targeted .luca-hero__media img — now absent).
   ========================================================================== */
.luca-hero__media{
	position:relative;overflow:hidden;border-radius:22px;
	min-height:300px; /* floor for any browser without aspect-ratio support */
	background:
		radial-gradient(120% 95% at 78% 12%, var(--luca-cream) 0%, rgba(247,241,236,0) 56%),
		linear-gradient(155deg, var(--luca-blush) 0%, #F6E0D8 100%);
	box-shadow:inset 0 0 0 1px rgba(200,32,32,.06), 0 22px 55px -32px rgba(142,20,20,.4);
}
@media (max-width:900px){
	.luca-hero__media{margin-inline:0;width:100%;max-width:none;aspect-ratio:16/11}
}
.luca-art,.luca-art__stage{position:absolute;inset:0}
.luca-art__stage{display:grid;place-items:center}
/* Don't animate panels that aren't on screen. */
.luca-slide:not(.is-active) .luca-art *{animation-play-state:paused}

/* ---------- Variant: GLOW — a glowing serum ---------- */
.luca-art--glow .luca-art__halo{
	position:absolute;top:45%;left:50%;width:84%;aspect-ratio:1;transform:translate(-50%,-50%);
	border-radius:50%;
	background:radial-gradient(circle at 50% 50%,
		rgba(245,166,35,.55) 0%, rgba(245,166,35,.24) 26%,
		rgba(200,32,32,.16) 45%, rgba(251,237,233,0) 66%);
	animation:lucaGlowPulse 7s ease-in-out infinite}
.luca-art--glow .luca-art__halo::after{
	content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(200,32,32,.16)}
@keyframes lucaGlowPulse{
	0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}
	50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}

.luca-art--glow .luca-art__bottle{
	position:relative;z-index:2;width:23%;aspect-ratio:5/8;
	border-radius:15px 15px 20px 20px;
	background:linear-gradient(155deg,#fff 0%, var(--luca-blush) 60%, #F1D5CE 100%);
	box-shadow:0 20px 34px -16px rgba(142,20,20,.5),
		inset 0 0 0 1px rgba(255,255,255,.7),
		inset -9px 0 18px -12px rgba(142,20,20,.28)}
.luca-art--glow .luca-art__bottle::before{
	content:"";position:absolute;top:9%;left:17%;width:13%;height:66%;border-radius:999px;
	background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0))}
.luca-art--glow .luca-art__cap{
	position:absolute;top:-13%;left:50%;transform:translateX(-50%);
	width:34%;height:15%;border-radius:6px 6px 4px 4px;
	background:linear-gradient(var(--luca-accent),var(--luca-accent-dark));
	box-shadow:0 5px 9px -4px rgba(142,20,20,.6)}
.luca-art--glow .luca-art__cap::after{
	content:"";position:absolute;bottom:-38%;left:50%;transform:translateX(-50%);
	width:40%;height:40%;background:linear-gradient(var(--luca-accent-dark),var(--luca-accent));
	border-radius:0 0 3px 3px;opacity:.85}
.luca-art--glow .luca-art__label{
	position:absolute;bottom:15%;left:50%;transform:translateX(-50%);
	font-family:var(--font-head);font-weight:800;letter-spacing:.2em;
	font-size:clamp(9px,1.5vw,13px);color:var(--luca-accent)}
.luca-art--glow .luca-art__spark{
	position:absolute;width:8px;height:8px;border-radius:50%;
	background:radial-gradient(circle,#F5A623,var(--luca-accent));
	filter:drop-shadow(0 0 6px rgba(245,166,35,.7));
	animation:lucaTwinkle 3.4s ease-in-out infinite}
.luca-art--glow .luca-art__spark--1{top:25%;left:23%}
.luca-art--glow .luca-art__spark--2{top:66%;left:31%;width:6px;height:6px;animation-delay:.8s}
.luca-art--glow .luca-art__spark--3{top:33%;right:21%;width:10px;height:10px;animation-delay:1.6s}
@keyframes lucaTwinkle{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1);opacity:1}}

/* ---------- Variant: SHIELD — an SPF sun ---------- */
.luca-art--shield .luca-art__sun{position:relative;z-index:2;width:46%;aspect-ratio:1}
.luca-art--shield .luca-art__core{
	position:absolute;inset:19%;border-radius:50%;
	background:radial-gradient(circle at 38% 34%, #FBC66B 0%, #F5A623 40%, var(--luca-accent) 100%);
	box-shadow:0 12px 34px -10px rgba(200,32,32,.55), inset 0 0 22px rgba(255,255,255,.25)}
.luca-art--shield .luca-art__rays{
	position:absolute;inset:-4%;border-radius:50%;
	background:repeating-conic-gradient(from 0deg,
		rgba(245,166,35,0) 0deg 8deg, rgba(245,166,35,.6) 8deg 12deg);
	-webkit-mask:radial-gradient(circle, transparent 45%, #000 46%, #000 71%, transparent 73%);
	        mask:radial-gradient(circle, transparent 45%, #000 46%, #000 71%, transparent 73%);
	animation:lucaSpin 30s linear infinite}
@keyframes lucaSpin{to{transform:rotate(360deg)}}
.luca-art--shield .luca-art__mist{position:absolute;top:15%;left:50%;transform:translateX(-50%);width:64%;height:30%}
.luca-art--shield .luca-art__mist i{position:absolute;width:6px;height:6px;border-radius:50%;
	background:rgba(245,166,35,.6);animation:lucaTwinkle 3s ease-in-out infinite}
.luca-art--shield .luca-art__mist i:nth-child(1){left:2%;top:60%}
.luca-art--shield .luca-art__mist i:nth-child(2){left:20%;top:26%;animation-delay:.4s}
.luca-art--shield .luca-art__mist i:nth-child(3){left:40%;top:6%;animation-delay:.8s}
.luca-art--shield .luca-art__mist i:nth-child(4){left:60%;top:6%;animation-delay:1.2s}
.luca-art--shield .luca-art__mist i:nth-child(5){left:80%;top:26%;animation-delay:1.6s}
.luca-art--shield .luca-art__mist i:nth-child(6){left:98%;top:60%;animation-delay:2s}
.luca-art--shield .luca-art__chips{
	position:absolute;left:0;right:0;bottom:11%;display:flex;gap:8px;
	justify-content:center;flex-wrap:wrap;padding:0 9%}
.luca-art--shield .luca-art__chip{
	font-family:var(--font-body);font-size:clamp(10px,1.4vw,12.5px);font-weight:600;color:var(--luca-accent-dark);
	background:rgba(255,255,255,.72);border:1px solid rgba(200,32,32,.18);
	border-radius:999px;padding:5px 12px}

/* ---------- Variant: RITUAL — the full range as type ---------- */
.luca-art--ritual .luca-art__blob{position:absolute;filter:blur(2px)}
.luca-art--ritual .luca-art__blob--1{
	width:54%;aspect-ratio:1;top:6%;left:-8%;
	border-radius:42% 58% 55% 45%/48% 42% 58% 52%;
	background:radial-gradient(circle at 40% 40%, rgba(200,32,32,.3), rgba(200,32,32,.1));
	animation:lucaMorph 15s ease-in-out infinite}
.luca-art--ritual .luca-art__blob--2{
	width:48%;aspect-ratio:1;bottom:0;right:-6%;
	border-radius:58% 42% 47% 53%/50% 58% 42% 50%;
	background:radial-gradient(circle at 60% 40%, rgba(245,166,35,.34), rgba(247,241,236,.12));
	animation:lucaMorph 19s ease-in-out infinite reverse}
@keyframes lucaMorph{
	0%,100%{border-radius:42% 58% 55% 45%/48% 42% 58% 52%;transform:translateY(0)}
	50%{border-radius:58% 42% 40% 60%/52% 58% 42% 48%;transform:translateY(-5%)}}
.luca-art--ritual .luca-art__words{
	position:relative;z-index:2;list-style:none;margin:0;padding:0;text-align:center;display:grid;gap:2px}
.luca-art--ritual .luca-art__words li{
	font-family:var(--font-head);font-weight:800;line-height:.96;letter-spacing:-.01em;
	font-size:clamp(24px,5.4vw,48px);color:var(--luca-ink)}
.luca-art--ritual .luca-art__words li:nth-child(even){
	color:transparent;-webkit-text-stroke:1.4px var(--luca-accent);text-stroke:1.4px var(--luca-accent)}
.luca-art--ritual .luca-art__seal{
	position:absolute;bottom:8%;left:50%;transform:translateX(-50%);
	font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;
	text-transform:uppercase;color:var(--luca-accent-dark);opacity:.8;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
	.luca-art *{animation:none!important}
}

/* ==========================================================================
   v2.17 — CART CROSS-SELL STRIP  ·  COMPACT MOBILE HERO  ·  ART REFINEMENTS
   ========================================================================== */

/* ---- "You may also like" strip in the mini-cart drawer ---- */
.luca-cartdrawer__recs{
	flex:0 0 auto;border-top:1px solid var(--luca-line);
	padding:12px 20px 6px;background:#fff}
.luca-recs__head{
	margin:0 0 10px;font-family:var(--font-head);font-weight:700;
	font-size:13px;letter-spacing:.01em;color:var(--luca-ink)}
.luca-recs__scroller{
	display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
	scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.luca-recs__scroller::-webkit-scrollbar{height:5px}
.luca-recs__scroller::-webkit-scrollbar-thumb{background:rgba(20,20,20,.15);border-radius:9px}
.luca-rec{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px}
.luca-rec__media{display:block;border-radius:10px;overflow:hidden;background:var(--luca-cream);aspect-ratio:1}
.luca-rec__media img{width:100%;height:100%;object-fit:contain;padding:8%;display:block}
.luca-rec__title{
	font-size:12.5px;font-weight:600;line-height:1.3;color:var(--luca-ink);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden}
.luca-rec__title:hover{color:var(--luca-accent)}
.luca-rec__price{font-family:var(--font-price);font-weight:700;font-size:13px;color:var(--luca-ink)}
.luca-rec__price del{color:var(--luca-muted);font-weight:400;font-size:11px;margin-right:3px}
.luca-rec__price ins{text-decoration:none}
.luca-rec__add{
	margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
	height:34px;border-radius:8px;background:var(--luca-ink);color:#fff;
	font-family:var(--font-body);font-weight:700;font-size:12.5px;transition:background .2s ease}
.luca-rec__add:hover{background:var(--luca-accent);color:#fff}
.luca-rec__add.loading{opacity:.6;pointer-events:none}
.luca-rec__add--view{background:transparent;color:var(--luca-ink);border:1px solid var(--luca-line)}
.luca-rec__add--view:hover{background:var(--luca-ink);color:#fff;border-color:var(--luca-ink)}
/* WooCommerce injects a "View cart" link after ajax add; the fragment re-render
   removes it, this just hides it in the meantime. */
.luca-rec__add.added~.added_to_cart{display:none}

/* ---- Compact mobile hero: keep it to ~40% of the screen so products show ---- */
@media (max-width:900px){
	.luca-hero__media{
		min-height:0;aspect-ratio:auto;margin-inline:auto;
		width:min(320px,74vw);height:clamp(150px,25vh,205px)}
	.luca-hero--slider .luca-hero__inner{padding-top:14px;padding-bottom:38px;gap:14px}
	.luca-hero__eyebrow{font-size:11px;letter-spacing:1.5px}
	.luca-hero__title{font-size:clamp(24px,6.8vw,30px);margin:8px 0 8px;line-height:1.08}
	.luca-hero__sub{font-size:13.5px;line-height:1.5;margin-bottom:14px;max-width:340px}
}
@media (max-width:520px){
	.luca-hero__media{height:clamp(140px,22vh,180px)}
	/* The same "clean, effective, honest" message continues in the feature row
	   immediately below, so drop the paragraph here to hit the ~40vh target. */
	.luca-hero__sub{display:none}
}

/* ---- Elegance pass on the three panels ---- */
/* GLOW: a tighter, softer glow with two faint orbit rings (was one heavy blob). */
.luca-art--glow .luca-art__halo{
	width:64%;
	background:radial-gradient(circle at 50% 50%,
		rgba(245,166,35,.4) 0%, rgba(245,166,35,.15) 30%,
		rgba(200,32,32,.1) 50%, rgba(251,237,233,0) 70%)}
.luca-art--glow .luca-art__halo::after{inset:-22%;border-color:rgba(200,32,32,.12)}
.luca-art--glow .luca-art__halo::before{
	content:"";position:absolute;inset:-48%;border-radius:50%;
	border:1px solid rgba(200,32,32,.07)}

/* SHIELD: finer, more numerous rays read as a refined sun rather than a pinwheel. */
.luca-art--shield .luca-art__rays{
	background:repeating-conic-gradient(from 0deg,
		rgba(245,166,35,0) 0deg 5deg, rgba(245,166,35,.5) 5deg 7.5deg)}
.luca-art--shield .luca-art__chip{font-size:clamp(9.5px,1.3vw,12px);padding:4px 11px}

/* RITUAL: quieter blobs, tighter type, thinner outline. */
.luca-art--ritual .luca-art__blob{filter:blur(3px);opacity:.85}
.luca-art--ritual .luca-art__words li{font-size:clamp(22px,5vw,44px)}
.luca-art--ritual .luca-art__words li:nth-child(even){-webkit-text-stroke-width:1.2px}

/* ==========================================================================
   v2.18 — SHIELD FIX: stack the sun ABOVE the chips (no overlap)
   The chips were absolutely positioned at the bottom while the sun was
   grid-centered, so a large disc sat on top of the chip text. Switch the
   shield stage to a vertical flow: sun, then chips beneath it.
   ========================================================================== */
.luca-art--shield .luca-art__stage{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:clamp(10px,4%,22px);padding:9% 8% 10%}
.luca-art--shield .luca-art__sun{
	position:relative;z-index:2;flex:0 0 auto;
	width:clamp(96px,40%,180px);aspect-ratio:1}
.luca-art--shield .luca-art__chips{
	position:static;left:auto;right:auto;bottom:auto;padding:0;max-width:100%;
	display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.luca-art--shield .luca-art__mist{top:4%;height:16%;width:70%;z-index:1;opacity:.7}

/* Small phones: the panel is short, so show just the sun (the chips' claims are
   decorative and the headline carries the message) — prevents any clipping. */
@media (max-width:520px){
	.luca-art--shield .luca-art__chips{display:none}
	.luca-art--shield .luca-art__stage{gap:0}
	.luca-art--shield .luca-art__sun{width:clamp(96px,46%,150px)}
}

/* ==========================================================================
   v2.19 — SHORTER PRODUCT IMAGE ON MOBILE
   The single-product gallery had no height cap, so a tall product shot filled
   the screen and pushed the title / price / Add-to-cart far below the fold.
   Cap the image height (contained, never cropped) and centre it so the buy
   details appear much sooner. Desktop (two-column) is unchanged.
   ========================================================================== */
@media (max-width:900px){
	.woocommerce div.product{padding-top:14px}
	.woocommerce div.product div.images{max-width:360px;margin-left:auto;margin-right:auto}
	.woocommerce div.product div.images .flex-viewport{max-height:min(44vh,260px)}
	.woocommerce div.product div.images .woocommerce-product-gallery__image img,
	.woocommerce div.product div.images img{
		max-height:min(44vh,260px)!important;width:auto!important;max-width:100%;
		object-fit:contain;margin-left:auto;margin-right:auto;display:block}
	/* Keep the zoom trigger pinned to the (now smaller) image corner. */
	.woocommerce div.product div.images .woocommerce-product-gallery__trigger{top:10px;right:10px}
	/* Thumbnail strip: tidy, smaller, wraps under the capped image. */
	.woocommerce div.product div.images .flex-control-thumbs{margin-top:10px;gap:8px}
	.woocommerce div.product div.images .flex-control-thumbs li img{border-radius:8px}
}
@media (max-width:520px){
	.woocommerce div.product div.images .flex-viewport,
	.woocommerce div.product div.images .woocommerce-product-gallery__image img,
	.woocommerce div.product div.images img{max-height:min(38vh,230px)!important}
}

/* ==========================================================================
   v2.20 — CSS FRAGRANCE PROMO BAND (replaces the poster image)
   Two frosted CSS perfume bottles + a light splash over a rich berry-red
   gradient, with the headline set in type. No image file.
   ========================================================================== */
.luca-promo__link{display:block;text-decoration:none}
.luca-promo__band{
	position:relative;overflow:hidden;border-radius:20px;
	display:grid;grid-template-columns:0.9fr 1.1fr;align-items:center;gap:18px;
	min-height:210px;padding:26px 30px;
	background:
		radial-gradient(120% 150% at 14% 24%, rgba(245,166,35,.16), transparent 52%),
		linear-gradient(118deg,#2a0f12 0%, #4c151c 46%, #86222c 100%);
	box-shadow:0 20px 45px -28px rgba(142,20,20,.7);
	isolation:isolate}
.luca-promo__band::after{ /* subtle top sheen */
	content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(90% 60% at 80% -10%, rgba(255,255,255,.1), transparent 60%)}

/* --- art: two bottles + glow + splash --- */
.luca-promo__art{position:relative;height:150px}
.luca-promo__glow{
	position:absolute;top:50%;left:38%;width:150px;height:150px;transform:translate(-50%,-50%);
	border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%)}
.luca-promo__bottle{
	position:absolute;bottom:8px;width:62px;height:104px;border-radius:12px 12px 14px 14px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 12px 22px -10px rgba(0,0,0,.5);
	backdrop-filter:blur(1px)}
.luca-promo__bottle b{ /* cap */
	position:absolute;top:-15px;left:50%;transform:translateX(-50%);
	width:26px;height:18px;border-radius:4px;background:linear-gradient(#1b1b1f,#3a3a42);
	box-shadow:0 3px 6px -2px rgba(0,0,0,.6)}
.luca-promo__bottle b::after{ /* collar */
	content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
	width:16px;height:7px;background:#2a2a30;border-radius:0 0 3px 3px}
.luca-promo__bottle--a{left:20%;background:linear-gradient(158deg,rgba(150,210,225,.92),rgba(70,140,175,.8));z-index:2}
.luca-promo__bottle--b{left:44%;bottom:2px;height:112px;background:linear-gradient(158deg,rgba(226,132,180,.92),rgba(168,48,110,.82));z-index:1}
.luca-promo__bottle::before{ /* highlight */
	content:"";position:absolute;top:12%;left:18%;width:9px;height:56%;border-radius:99px;
	background:linear-gradient(rgba(255,255,255,.7),transparent)}
.luca-promo__splash{
	position:absolute;top:8px;left:8%;width:70%;height:60px;pointer-events:none;
	background:
		radial-gradient(6px 6px at 10% 40%, rgba(255,255,255,.6) 50%, transparent 55%),
		radial-gradient(4px 4px at 30% 10%, rgba(255,255,255,.5) 50%, transparent 55%),
		radial-gradient(5px 5px at 52% 26%, rgba(255,255,255,.55) 50%, transparent 55%),
		radial-gradient(3px 3px at 70% 6%, rgba(255,255,255,.5) 50%, transparent 55%),
		radial-gradient(4px 4px at 86% 34%, rgba(255,255,255,.45) 50%, transparent 55%)}

/* --- text --- */
.luca-promo__text{display:flex;flex-direction:column;gap:8px;color:#fff}
.luca-promo__eyebrow{
	font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.18em;
	text-transform:uppercase;color:rgba(255,255,255,.72)}
.luca-promo__title{
	font-family:var(--font-head);font-weight:800;line-height:1.08;
	font-size:clamp(20px,2.4vw,28px)}
.luca-promo__cta{
	margin-top:4px;align-self:flex-start;display:inline-flex;align-items:center;
	font-family:var(--font-body);font-weight:700;font-size:13.5px;letter-spacing:.02em;
	color:#2a0f12;background:#fff;border-radius:999px;padding:9px 18px;transition:transform .2s ease}
.luca-promo__link:hover .luca-promo__cta{transform:translateX(3px)}

@media (max-width:600px){
	.luca-promo__band{grid-template-columns:1fr;min-height:0;gap:14px;padding:22px 22px 24px;text-align:center}
	.luca-promo__art{height:128px}
	.luca-promo__bottle--a{left:32%}
	.luca-promo__bottle--b{left:52%}
	.luca-promo__cta{align-self:center}
	.luca-promo__text{align-items:center}
}

/* ==========================================================================
   v2.22 — SHOP HEADER: CSS his-&-hers motif (replaces the photo)
   A small stylised two-person silhouette (short-hair + long-hair) matching the
   unisex "for him, for her" range, on a blush panel. No image. The header is
   also tightened on mobile so the product grid comes up sooner.
   ========================================================================== */
.luca-shop-hero__media--duo{
	aspect-ratio:16/10;border-radius:16px;position:relative;overflow:hidden;
	display:grid;place-items:center;box-shadow:none;max-width:460px;margin:0 auto;width:100%;
	background:
		radial-gradient(120% 130% at 30% 16%, #fff, transparent 55%),
		radial-gradient(95% 120% at 62% 128%, rgba(245,166,35,.30), transparent 60%),
		linear-gradient(150deg,var(--luca-blush),#F6E1DA)}
.luca-duo{position:relative;display:flex;align-items:flex-end;justify-content:center;
	width:min(72%,300px);height:76%}
.luca-duo__glow{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);
	width:82%;height:58%;border-radius:50%;
	background:radial-gradient(circle,rgba(245,166,35,.32),transparent 66%)}
.luca-duo__fig{position:relative;width:46%;height:92%;margin:0}
.luca-duo__fig--him{z-index:1}
.luca-duo__fig--her{margin-left:-9%;z-index:2}
.luca-duo__fig>span{position:absolute;left:50%;transform:translateX(-50%)}
.luca-duo__body{bottom:0;width:100%;height:44%;border-radius:46% 46% 20% 20%/74% 74% 20% 20%}
.luca-duo__neck{bottom:38%;width:24%;height:12%;border-radius:0 0 5px 5px}
.luca-duo__head{bottom:42%;width:52%;aspect-ratio:1;border-radius:50%}
/* him — charcoal, short hair */
.luca-duo__fig--him .luca-duo__body,
.luca-duo__fig--him .luca-duo__neck,
.luca-duo__fig--him .luca-duo__head{background:var(--luca-ink)}
.luca-duo__fig--him .luca-duo__hair{bottom:62%;width:58%;height:28%;background:var(--luca-ink);
	border-radius:52% 52% 40% 40%}
/* her — accent, long hair framing the face */
.luca-duo__fig--her .luca-duo__body,
.luca-duo__fig--her .luca-duo__neck,
.luca-duo__fig--her .luca-duo__head{background:var(--luca-accent)}
.luca-duo__fig--her .luca-duo__hair{bottom:22%;width:84%;height:76%;background:var(--luca-accent);
	border-radius:50% 50% 44% 44%/56% 56% 46% 46%;z-index:-1}

/* Tighten the shop header on mobile so products appear sooner. */
@media (max-width:900px){
	.luca-shop-hero__inner{padding:22px 20px 8px;gap:16px}
	.luca-shop-hero__media--duo{max-width:340px}
}
@media (max-width:520px){
	.luca-shop-hero__inner{padding:16px 18px 6px}
	.luca-shop-hero__media--duo{max-width:260px}
	.luca-shop-hero h1{font-size:clamp(28px,8vw,38px)}
	.luca-shop-hero p{font-size:14px}
}

/* ==========================================================================
   v2.24 — MOTION & POLISH  (scroll-reveal · header · hovers · counters)
   Inspired by a smoother reference build. All reveal states apply ONLY under
   html.luca-motion, which is set in <head> before paint and NOT set when the
   user prefers reduced motion — so there's no flash and reduced-motion users
   get a fully static page. Reveal uses the independent `translate` property so
   hover `transform` stays snappy and never fights the reveal transition.
   ========================================================================== */
:root{--luca-ease-out:cubic-bezier(.16,1,.3,1);--luca-ease:cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:84px}

/* --- scroll reveal --- */
html.luca-motion :where(
	.luca-heading,
	li.product,
	.luca-promo,
	.luca-featurerow__grid > *,
	.luca-benefits__grid > *,
	.luca-faq__item,
	.luca-vids__grid > *,
	.luca-gram__item,
	.luca-stat,
	.luca-shop-hero__inner > *
){opacity:0;translate:0 22px;
	transition:opacity .7s var(--luca-ease-out), translate .7s var(--luca-ease-out)}
html.luca-motion .is-in{opacity:1;translate:0 0}

/* --- sticky header gains blur + shadow once scrolled --- */
.luca-header{transition:background-color .3s var(--luca-ease), box-shadow .3s var(--luca-ease), backdrop-filter .3s var(--luca-ease)}
.luca-header.is-scrolled{
	background:rgba(255,255,255,.86);
	-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
	box-shadow:0 8px 30px -18px rgba(20,20,20,.32)}

/* --- refined hovers (transform is independent of the reveal's translate) --- */
.luca-pcard{transition:transform .35s var(--luca-ease), box-shadow .35s var(--luca-ease)}
.luca-pcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(142,20,20,.42)}
.luca-btn{transition:transform .25s var(--luca-ease), background-color .2s var(--luca-ease), box-shadow .25s var(--luca-ease)}
.luca-btn:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
	.luca-pcard:hover,.luca-btn:hover{transform:none}
}

/* ==========================================================================
   v2.25 — HERO PHOTOS (real imagery) + SHOP-BY-CATEGORY PAGE
   The hero media is a real photo again, filling the panel edge to edge with a
   soft inner ring and a faint blush vignette so it sits in the section rather
   than looking pasted on. (The CSS-art rules still exist but are unused now.)
   ========================================================================== */
.luca-hero__media--photo{
	background:var(--luca-blush);border-radius:22px;overflow:hidden;
	box-shadow:0 26px 60px -34px rgba(142,20,20,.5), inset 0 0 0 1px rgba(255,255,255,.5)}
.luca-hero__media--photo .luca-hero__img{
	width:100%;height:100%;object-fit:cover;display:block}
.luca-hero__media--photo::after{ /* barely-there blush vignette to blend edges */
	content:"";position:absolute;inset:0;pointer-events:none;border-radius:22px;
	box-shadow:inset 0 -40px 60px -40px rgba(251,237,233,.6), inset 0 40px 60px -50px rgba(251,237,233,.5)}
@media (max-width:900px){
	.luca-hero__media--photo{border-radius:18px}
}

/* --------------------------------------------------------------------------
   SHOP BY CATEGORY  (page template: template-shop-categories.php)
   -------------------------------------------------------------------------- */
.luca-cats{max-width:var(--maxw);margin:0 auto;padding:34px 20px 60px}
.luca-cats__head{text-align:center;max-width:640px;margin:0 auto 26px}
.luca-cats__head h1{font-family:var(--font-head);font-weight:800;font-size:clamp(30px,5vw,46px);margin:0 0 10px}
.luca-cats__head p{color:var(--luca-muted);font-size:16px;line-height:1.6;margin:0}
.luca-cats__grid{
	display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.luca-cat{
	position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;
	aspect-ratio:3/4;background:linear-gradient(150deg,var(--luca-blush),#F3D9D2);
	box-shadow:0 18px 40px -28px rgba(142,20,20,.4);isolation:isolate}
.luca-cat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform .6s var(--luca-ease-out)}
.luca-cat:hover .luca-cat__img{transform:scale(1.05)}
.luca-cat__scrim{position:absolute;inset:0;
	background:linear-gradient(180deg, rgba(20,10,10,0) 38%, rgba(20,10,10,.16) 62%, rgba(20,10,10,.62) 100%)}
/* Gradient fallback tile (no image) gets a decorative glow instead of a scrim */
.luca-cat--noimg{background:
	radial-gradient(120% 90% at 30% 18%, #fff, transparent 55%),
	linear-gradient(155deg, var(--luca-blush), #EBB9AE)}
.luca-cat--noimg .luca-cat__scrim{background:linear-gradient(180deg,rgba(20,10,10,0) 55%,rgba(142,20,20,.28) 100%)}
.luca-cat__body{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;z-index:2}
.luca-cat__name{font-family:var(--font-head);font-weight:800;font-size:clamp(20px,2.4vw,26px);
	color:#fff;line-height:1.05;margin:0}
.luca-cat--noimg .luca-cat__name{color:var(--luca-ink)}
.luca-cat__meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.luca-cat__count{font-family:var(--font-body);font-size:12.5px;font-weight:600;
	color:rgba(255,255,255,.82)}
.luca-cat--noimg .luca-cat__count{color:var(--luca-accent-dark)}
.luca-cat__go{margin-left:auto;font-family:var(--font-body);font-size:13px;font-weight:700;
	color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
	border-radius:999px;padding:6px 13px;backdrop-filter:blur(4px);
	transition:background .25s var(--luca-ease), transform .25s var(--luca-ease)}
.luca-cat--noimg .luca-cat__go{color:#fff;background:var(--luca-accent);border-color:transparent}
.luca-cat:hover .luca-cat__go{background:var(--luca-accent);border-color:transparent;transform:translateX(2px)}
/* Make the first tile span two columns on desktop for a hero-tile feel */
.luca-cats__grid > .luca-cat:first-child{grid-column:span 2;aspect-ratio:16/10}
@media (max-width:760px){
	.luca-cats__grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.luca-cats__grid > .luca-cat:first-child{grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:420px){
	.luca-cats__grid{grid-template-columns:1fr}
	.luca-cats__grid > .luca-cat:first-child{aspect-ratio:16/10}
	.luca-cat{aspect-ratio:4/3}
}

/* ==========================================================================
   v2.26 — SHOP CATEGORY BAR (browse by category)
   Horizontal, scrollable pills at the top of the shop and category archives.
   ========================================================================== */
.luca-catbar{margin:2px 0 20px}
.luca-catbar__scroll{
	display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;
	scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.luca-catbar__scroll::-webkit-scrollbar{height:5px}
.luca-catbar__scroll::-webkit-scrollbar-thumb{background:rgba(20,20,20,.14);border-radius:9px}
.luca-catbar__pill{
	flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;text-decoration:none;
	font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--luca-ink);
	background:var(--luca-blush);border:1px solid transparent;border-radius:999px;padding:9px 18px;
	transition:background .2s var(--luca-ease), color .2s var(--luca-ease), transform .2s var(--luca-ease)}
.luca-catbar__pill:hover{background:#F6DED7;transform:translateY(-1px)}
.luca-catbar__pill.is-active{background:var(--luca-ink);color:#fff}
@media (max-width:520px){
	.luca-catbar__pill{font-size:13px;padding:8px 15px}
}

/* ==========================================================================
   v2.33 — GENTLE PARALLAX ON THE PRODUCT IMAGE
   As the product gallery scrolls through the viewport, the image drifts a
   touch slower than the page (a soft parallax recede) — same feel as the
   reference, without changing the image size or layout. Progressive
   enhancement: uses CSS scroll-linked animation, so browsers that don't
   support it (and reduced-motion users) simply get the current static image.
   The frame clips the small scale bleed so no gaps show.
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.woocommerce div.product div.images .woocommerce-product-gallery__image{ overflow:hidden }
		.woocommerce div.product div.images .woocommerce-product-gallery__image img,
		.woocommerce div.product div.images img{
			will-change:transform;
			animation:luca-pdp-parallax linear both;
			animation-timeline:view();
			animation-range:cover 0% cover 100%;
		}
		@keyframes luca-pdp-parallax{
			from{ transform:translateY(4%) scale(1.06); }
			to{   transform:translateY(-4%) scale(1.06); }
		}
	}
}

/* ==========================================================================
   v2.34 — CHECKOUT FIELD LAYOUT FIX  (classic checkout)
   The billing/shipping fields were collapsing to the browser's default narrow
   width (labels wrapping, tiny boxes). Force every field full-width, single
   column, consistent height — a clean, Shopify-style stacked form. Uses higher
   specificity + !important so nothing (WooCommerce core CSS, a plugin, or the
   country select2) can shrink them again.
   ========================================================================== */
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout #customer_details .form-row,
.woocommerce form.woocommerce-form .form-row{
	width:100%!important;float:none!important;clear:both;
	display:flex;flex-direction:column;padding:0;margin:0 0 16px}
.woocommerce-checkout form .form-row label,
.woocommerce form.woocommerce-form .form-row label{
	display:block;margin:0 0 6px;font-family:var(--font-body);
	font-weight:600;font-size:13.5px;line-height:1.3;color:var(--luca-ink)}
.woocommerce-checkout form .form-row .required{color:var(--luca-accent);border:0;text-decoration:none}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row input[type="text"],
.woocommerce-checkout form .form-row input[type="email"],
.woocommerce-checkout form .form-row input[type="tel"],
.woocommerce-checkout form .form-row input[type="password"],
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container{
	width:100%!important;max-width:100%!important;box-sizing:border-box;
	min-height:50px;border:1px solid var(--luca-line);border-radius:10px;
	padding:13px 14px;font-family:var(--font-body);font-size:15px;background:#fff;margin:0}
.woocommerce-checkout form .form-row textarea{min-height:92px;line-height:1.4}
.woocommerce-checkout form .form-row input:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row textarea:focus{
	border-color:var(--luca-accent);outline:none;box-shadow:0 0 0 3px rgba(200,32,32,.10)}
/* Country / State select2 dropdown to match the inputs */
.woocommerce-checkout .select2-container .select2-selection--single{
	height:50px!important;border:0!important;display:flex;align-items:center;padding:0 2px}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height:normal;padding:0 6px;color:var(--luca-ink)}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:48px}
/* Name fields side-by-side on wider screens, stacked on mobile (Shopify-like) */
@media (min-width:640px){
	.woocommerce-checkout form .form-row-first{width:calc(50% - 8px)!important;float:left!important}
	.woocommerce-checkout form .form-row-last{width:calc(50% - 8px)!important;float:right!important}
}

/* ==========================================================================
   v2.35 — CLASSIC CART/CHECKOUT CONTAINER FIX
   The classic cart/checkout was printed with no wrapper, so it had no side
   padding and drifted to the left edge (headings clipped). Wrap it in the
   standard centered, padded column. The checkout head sets its own centering,
   so neutralise that inside the wrapper to avoid double insets.
   ========================================================================== */
.luca-wc-classic{padding-top:8px;padding-bottom:48px;overflow-x:clip}
.luca-wc-classic .luca-page-head{max-width:none;margin:0;padding:18px 0 14px}

/* ==========================================================================
   v2.37 — ABOUT PAGE RESPONSIVE GRIDS + FORCE-LIGHT
   The About template used inline grid styles that couldn't stack on mobile
   (image squished, 4 feature labels overlapping). Move them to classes that
   collapse to one/two columns on small screens. Also declare the site as
   light-only so a browser's "force dark" doesn't invert this light design.
   ========================================================================== */
:root{color-scheme:light}

.luca-about-2col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.luca-about-2col--wide{grid-template-columns:1fr 1.2fr}
@media (max-width:768px){
	.luca-about-2col,.luca-about-2col--wide{grid-template-columns:1fr;gap:22px}
}
/* Feature row on the About page: 4 across on desktop, 2 on tablet/phone so the
   labels have room to wrap instead of overlapping. */
.luca-about-features{grid-template-columns:repeat(4,1fr)!important}
@media (max-width:768px){ .luca-about-features{grid-template-columns:repeat(2,1fr)!important} }

/* ==========================================================================
   v2.38 — WISHLIST AT TOP OF BUY BOX
   The YITH "Add to wishlist" button is now rendered just under Add to cart
   (see luca_wishlist_in_buybox). Hide YITH's own auto-printed copy (which sat
   near the bottom) so only the buy-box one shows, and style it as a clean pill.
   ========================================================================== */
.woocommerce div.product .yith-wcwl-add-to-wishlist{display:none}
.woocommerce div.product .luca-pdp-wishlist{margin:12px 0 4px}
.woocommerce div.product .luca-pdp-wishlist .yith-wcwl-add-to-wishlist{display:block;margin:0}
.luca-pdp-wishlist .yith-wcwl-add-to-wishlist a,
.luca-pdp-wishlist a.add_to_wishlist{
	display:inline-flex;align-items:center;gap:8px;
	font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--luca-ink);
	text-decoration:none;border:1px solid var(--luca-line);border-radius:999px;padding:10px 18px;
	transition:background .2s var(--luca-ease), border-color .2s var(--luca-ease)}
.luca-pdp-wishlist .yith-wcwl-add-to-wishlist a:hover{background:var(--luca-blush);border-color:var(--luca-accent)}
.luca-pdp-wishlist .yith-wcwl-wishlistaddedbrowse a,
.luca-pdp-wishlist .yith-wcwl-wishlistexistsbrowse a{border-color:var(--luca-accent);color:var(--luca-accent)}