/* =========================================================
   Skinnora — main stylesheet
   Design tokens come from :root variables printed by
   inc/customizer/dynamic-css.php (Customizer color scheme).
   ========================================================= */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sk-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--sk-text);
	background: var(--sk-body-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--sk-heading);
	font-weight: 700;
	line-height: 1.25;
}
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: var(--sk-link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--sk-link-hover); }
ul, ol { padding-left: 1.2em; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px 14px; border: 1px solid var(--sk-border); text-align: left; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	overflow: hidden;
	word-wrap: normal !important;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	z-index: 100000;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 10px 16px;
	background: var(--sk-secondary);
	color: #fff;
	border-radius: 6px;
}

.container {
	max-width: var(--sk-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn, button.btn,
.button,
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: var(--sk-btn-radius);
	background: var(--sk-btn-bg);
	color: var(--sk-btn-text);
	font-family: var(--sk-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.btn:hover, .button:hover, input[type="submit"]:hover {
	background: var(--sk-secondary);
	color: #fff;
	transform: translateY(-1px);
}
.btn-outline {
	background: transparent;
	border-color: var(--sk-secondary);
	color: var(--sk-secondary);
}
.btn-outline:hover { background: var(--sk-secondary); color: #fff; }
.btn-lg { padding: 15px 36px; font-size: 14px; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], textarea, select {
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	background: #fff;
	font-family: var(--sk-font);
	font-size: 15px;
	color: var(--sk-text);
	transition: border-color .2s;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--sk-primary);
}

/* ---------- Topbar ---------- */
.topbar {
	background: var(--sk-topbar-bg);
	color: var(--sk-topbar-text);
	font-size: 13px;
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 38px;
	flex-wrap: wrap;
}
.topbar-text { margin: 0; text-align: center; }
.topbar a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Header ---------- */
.site-header {
	background: var(--sk-header-bg);
	border-bottom: 1px solid var(--sk-border);
	position: relative;
	z-index: 900;
}
.site-header.is-sticky { position: sticky; top: 0; }
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 76px;
}
.site-branding { flex-shrink: 0; }
.site-branding img { max-height: 48px; width: auto; display: block; }
.site-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.site-title a { color: var(--sk-heading); }

.main-nav { flex: 1; }
.primary-menu, .primary-menu ul { list-style: none; margin: 0; padding: 0; }
.primary-menu { display: flex; gap: 4px; }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: block;
	padding: 26px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sk-heading);
	position: relative;
}
.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 14px; right: 100%;
	bottom: 18px;
	height: 2px;
	background: var(--sk-primary);
	transition: right .25s;
}
.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after { right: 14px; }

/* Dropdowns */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 230px;
	padding: 10px 0;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 10px;
	box-shadow: 0 14px 40px rgba(0,0,0,.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 950;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-menu .sub-menu li { position: relative; }
.primary-menu .sub-menu a {
	display: block;
	padding: 9px 22px;
	font-size: 14px;
	color: var(--sk-text);
}
.primary-menu .sub-menu a:hover { color: var(--sk-primary); padding-left: 26px; }

/* ---------- Mega menu ----------
   The <li> goes position:static so the panel can span the whole header
   container rather than being anchored to the (narrow) menu item. */
.header-inner { position: relative; }
.primary-menu li.has-mega { position: static; }
.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	margin-top: 6px;
	padding: 26px 30px;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-card-radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* focus-within keeps it usable by keyboard, not just mouse. */
.primary-menu li.has-mega:hover > .mega-menu,
.primary-menu li.has-mega:focus-within > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.mega-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 24px 30px;
}
.mega-col { min-width: 0; }
.mega-col-title {
	display: block;
	padding-bottom: 8px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--sk-primary);
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sk-heading);
}
.mega-col-title:hover { color: var(--sk-primary); }
.mega-list { list-style: none; padding: 0; margin: 0; }
.mega-list li { padding: 4px 0; }
.mega-list a {
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--sk-text-light);
	transition: color .15s, padding-left .15s;
}
.mega-list a:hover { color: var(--sk-primary); padding-left: 4px; }
.primary-menu .sub-menu .sub-menu { top: -10px; left: 100%; }

.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
}
.header-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sk-heading);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.header-icon-btn:hover { background: var(--sk-surface); color: var(--sk-primary); }
.cart-count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 18px; height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--sk-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.mobile-toggle { display: none; }

/* ---------- Modals & drawers ---------- */
.sk-modal, .sk-drawer { position: fixed; inset: 0; z-index: 9999; }
.sk-modal[hidden], .sk-drawer[hidden] { display: none; }
.sk-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 15, 15, .55);
	animation: skFade .25s;
}
@keyframes skFade { from { opacity: 0; } }
@keyframes skUp { from { transform: translateY(24px); opacity: 0; } }
@keyframes skLeft { from { transform: translateX(-100%); } }
@keyframes skRight { from { transform: translateX(100%); } }

.sk-modal-panel {
	position: relative;
	margin: 8vh auto 0;
	max-width: 860px;
	width: calc(100% - 32px);
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	animation: skUp .3s;
	max-height: 84vh;
	overflow: auto;
}
.sk-modal-close {
	position: absolute;
	top: 14px; right: 14px;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: var(--sk-surface);
	color: var(--sk-heading);
	cursor: pointer;
	z-index: 2;
}
.sk-modal-close:hover { background: var(--sk-primary); color: #fff; }

.sk-drawer-panel {
	position: absolute;
	top: 0; bottom: 0;
	width: 380px;
	max-width: 88vw;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.sk-drawer-panel.from-left { left: 0; animation: skLeft .3s; }
.sk-drawer-panel.from-right { right: 0; animation: skRight .3s; }
.sk-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--sk-border);
}
.sk-drawer-title { margin: 0; font-size: 18px; }
.sk-drawer-foot { margin-top: auto; padding: 20px; border-top: 1px solid var(--sk-border); }
.drawer-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }

/* Search modal */
.search-panel { max-width: 720px; }
.search-form-big {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 2px solid var(--sk-secondary);
	padding-bottom: 12px;
}
.search-form-big .search-input {
	border: 0; padding: 8px 0; font-size: 19px; background: transparent;
}
.search-form-big .search-input:focus { border: 0; }
.search-results { margin-top: 18px; }
.search-result-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border-radius: 10px;
}
.search-result-item:hover { background: var(--sk-surface); }
.search-result-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.search-result-item .sr-title { font-weight: 600; font-size: 14px; }
.search-result-item .sr-price { font-size: 13px; color: var(--sk-text-light); }

/* Mobile menu */
.mobile-nav-menu, .mobile-nav-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav-menu { padding: 10px 0; }
.mobile-nav-menu li { border-bottom: 1px solid var(--sk-surface); position: relative; }
.mobile-nav-menu a {
	display: block;
	padding: 13px 20px;
	font-weight: 600;
	font-size: 15px;
}
.mobile-nav-menu .sub-menu { display: none; background: var(--sk-surface); }
.mobile-nav-menu li.is-open > .sub-menu { display: block; }
.mobile-nav-menu .sub-menu a { font-weight: 500; padding-left: 32px; }
.submenu-toggle {
	position: absolute;
	top: 4px; right: 8px;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent;
	color: var(--sk-text-light);
	cursor: pointer;
	transition: transform .2s;
}
li.is-open > .submenu-toggle { transform: rotate(90deg); }
.submenu-toggle .sk-icon { transform: rotate(90deg); }
li.is-open > .submenu-toggle .sk-icon { transform: none; }

/* ---------- Breadcrumbs ---------- */
.skinnora-breadcrumbs {
	padding: 16px 0 4px;
	font-size: 13px;
	color: var(--sk-text-light);
}
.skinnora-breadcrumbs a { color: var(--sk-text-light); }
.skinnora-breadcrumbs a:hover { color: var(--sk-primary); }
.skinnora-breadcrumbs .sep, .skinnora-breadcrumbs .separator { margin: 0 8px; }

/* ---------- Section layout ---------- */
.home-section { padding: 34px 0; }
.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.section-title {
	position: relative;
	margin: 0;
	padding-bottom: 10px;
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}
/* Short accent rule under each heading — gives the page a consistent rhythm
   and separates sections without adding heavy divider lines. */
.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 2px;
	background: var(--sk-primary);
}
.section-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sk-heading);
	border-bottom: 2px solid var(--sk-primary);
	padding-bottom: 2px;
}
.section-link:hover { color: var(--sk-primary); }

/* ---------- Hero ---------- */
/* Height and image darkening come from Theme Options via custom properties set
   on the section, with these values as the fallback when none are configured. */
.home-hero {
	position: relative;
	overflow: hidden;
	background: var(--sk-surface);
	--sk-hero-height: 420px;
	--sk-hero-overlay: 0;
}
.hero-slide {
	position: relative;
	min-height: var(--sk-hero-height);
	display: flex;
	align-items: center;
}
.hero-slide[hidden] { display: none; }
.hero-bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* Scrim for legibility over busy artwork; fully transparent at 0. */
.hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, var(--sk-hero-overlay));
	pointer-events: none;
}
.hero-content {
	position: relative;
	z-index: 2;
	padding-top: 60px;
	padding-bottom: 60px;
	max-width: 640px;
	margin-left: max(24px, calc((100% - var(--sk-container)) / 2 + 24px));
	margin-right: auto;
}
/* Text position. Centre and right keep the copy inside the container gutter. */
.hero-align-center .hero-content {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.hero-align-right .hero-content {
	margin-left: auto;
	margin-right: max(24px, calc((100% - var(--sk-container)) / 2 + 24px));
	text-align: right;
}
.hero-align-center .hero-content .btn,
.hero-align-right .hero-content .btn { display: inline-flex; }
.hero-subtitle {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--sk-primary);
	margin-bottom: 10px;
}
.hero-title {
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sk-heading);
	margin: 0 0 14px;
	letter-spacing: -0.02em;
}
.hero-text { font-size: 17px; color: var(--sk-text); margin-bottom: 26px; max-width: 460px; }
.hero-dots {
	position: absolute;
	bottom: 22px; left: 50%;
	transform: translateX(-50%);
	display: flex; gap: 8px;
	z-index: 3;
}
.hero-dot {
	width: 10px; height: 10px;
	border: 0; border-radius: 50%;
	background: rgba(28,28,28,.25);
	cursor: pointer;
	transition: background .2s, width .2s;
	padding: 0;
}
.hero-dot.is-active { background: var(--sk-primary); width: 26px; border-radius: 5px; }

/* ---------- Category rows ----------
   These rows hold 8–10 circles. As a hidden-scrollbar flex strip the last item
   was cut mid-word with no affordance that more existed, which just reads as
   broken. On desktop they now wrap into a grid so every category is visible;
   the horizontal strip is kept for small screens where it is the right pattern
   (and there gets a visible fade — see the mobile block below). */
.cat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 20px 16px;
	padding-bottom: 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-item {
	width: 100%;
	min-width: 0;
	text-align: center;
}
.cat-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 118px; height: 118px;
	margin: 0 auto 12px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sk-surface);
	border: 2px solid transparent;
	transition: border-color .2s, transform .2s;
}
.cat-item:hover .cat-thumb { border-color: var(--sk-primary); transform: translateY(-4px); }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Category names are long and slash-joined ("CLOGGED PORES/BLACKHEADS
   /WHITEHEADS"). At 13px uppercase in a ~140px column they overflow into the
   neighbour and wrap to three lines, which is what made the rows look broken.
   Smaller, allowed to break inside long tokens, and capped at two lines. */
.cat-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--sk-heading);
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cat-item:hover .cat-name { color: var(--sk-primary); }

/* Grid style (Popular Categories) */
.cat-style-grid .cat-row { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); }
.cat-style-grid .cat-item { width: 100%; }
.cat-style-grid .cat-thumb { width: 156px; height: 156px; border-radius: var(--sk-card-radius); max-width: 100%; }
.cat-count { display: block; font-size: 12px; color: var(--sk-text-light); margin-top: 2px; }

/* ---------- Product rows (homepage carousels) ---------- */
ul.product-row { list-style: none; margin: 0; }
.product-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 72px) / 4);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 12px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.product-row::-webkit-scrollbar { display: none; }
.product-row > * { scroll-snap-align: start; }

/* ---------- Promo banners ---------- */
.banner-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.banner-count-1 { grid-template-columns: 1fr; }
.promo-banner {
	position: relative;
	display: block;
	border-radius: var(--sk-card-radius);
	overflow: hidden;
}
/* The uploaded banner artwork is near-square with a lot of built-in padding.
   Left at its natural height it dominates the page and strands the caption in
   empty space, so crop to a banner ratio and let the art fill the frame. */
.promo-banner img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
/* Scrim so the caption stays legible over any artwork. */
.promo-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .08) 46%, transparent 72%);
	pointer-events: none;
}
.promo-banner:hover img { transform: scale(1.05); }
.promo-banner-title {
	position: absolute;
	left: 24px; bottom: 22px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	background: #fff;
	color: var(--sk-heading);
	border-radius: var(--sk-btn-radius);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
	transition: background .22s ease, color .22s ease, transform .22s ease;
}
.promo-banner:hover .promo-banner-title {
	background: var(--sk-primary);
	color: #fff;
	transform: translateX(3px);
}

/* ---------- Brands ---------- */
.brand-row {
	display: flex;
	align-items: center;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.brand-row::-webkit-scrollbar { display: none; }
.brand-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	height: 84px;
	padding: 12px 22px;
	background: var(--sk-surface);
	border-radius: var(--sk-card-radius);
	filter: grayscale(1);
	opacity: .75;
	transition: filter .2s, opacity .2s;
}
.brand-item:hover { filter: none; opacity: 1; }
.brand-item img { max-height: 52px; width: auto; }
.brand-name { font-weight: 700; }

/* ---------- Blog cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.posts-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.blog-card {
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-card-radius);
	overflow: hidden;
	transition: box-shadow .25s, transform .25s;
}
.blog-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.09); transform: translateY(-3px); }
.blog-card-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px 22px 24px; }
.blog-card-title { font-size: 18px; margin: 8px 0 8px; }
.blog-card-title a { color: var(--sk-heading); }
.blog-card-title a:hover { color: var(--sk-primary); }
.blog-card-excerpt { font-size: 14px; color: var(--sk-text-light); margin-bottom: 10px; }
.entry-meta { font-size: 12.5px; color: var(--sk-text-light); text-transform: uppercase; letter-spacing: .05em; }
.entry-meta a { color: inherit; }
.meta-sep { margin: 0 6px; }
.read-more { font-weight: 700; font-size: 13px; text-transform: uppercase; }

/* ---------- Trust bar ----------
   Presented as a single tinted band rather than four loose rows, so it reads as
   a deliberate reassurance strip closing the page instead of stray text. */
.trust-section { padding: 30px 0 42px; }
.trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: 26px 22px;
	background: var(--sk-surface);
	border-radius: var(--sk-card-radius);
}
.trust-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 14px;
	min-width: 0;
}
/* Divider between items instead of a border box around each. */
.trust-item + .trust-item { border-left: 1px solid var(--sk-border); }
.trust-item .sk-icon {
	color: var(--sk-primary);
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.trust-title { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; }
.trust-text { margin: 0; font-size: 12.5px; color: var(--sk-text-light); line-height: 1.45; }

/* ---------- Content pages / blog ---------- */
.site-main { min-height: 50vh; padding-bottom: 56px; }
.page-title-header { padding: 22px 0 10px; }
.page-title { font-size: 30px; }
.content-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
.content-with-sidebar > .content-area { min-width: 0; }
.single-article .entry-title { font-size: 34px; }
.entry-thumbnail { margin: 18px 0; border-radius: var(--sk-card-radius); overflow: hidden; }
.entry-content { font-size: 16px; line-height: 1.75; }
.entry-content img { border-radius: var(--sk-card-radius); }
.entry-content a { color: var(--sk-primary); text-decoration: underline; }
.tag-links a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 14px;
	background: var(--sk-surface);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}
.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 32px 0;
	padding-top: 20px;
	border-top: 1px solid var(--sk-border);
	font-weight: 600;
}
.share-links {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.share-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sk-text-light); }
.share-links a {
	padding: 6px 16px;
	border: 1px solid var(--sk-border);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}
.share-links a:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
.author-box {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: 28px;
	padding: 22px;
	background: var(--sk-surface);
	border-radius: var(--sk-card-radius);
}
.author-box img { border-radius: 50%; flex-shrink: 0; }
.author-box-name { margin: 0 0 6px; font-size: 16px; }
.author-box-bio { margin: 0; font-size: 14px; color: var(--sk-text-light); }

/* ---------- Better Loyalty plugin compatibility ---------- */
/* The theme never touches loyalty data; these rules just make the plugin's
   product-page points box and account widgets match the design. */
.better-loyalty-product-points,
[class*="better-loyalty"] .points-box,
.bl-points-summary {
	margin: 14px 0;
	padding: 12px 16px;
	background: var(--sk-surface);
	border-left: 4px solid var(--sk-star);
	border-radius: var(--sk-card-radius);
	font-size: 13.5px;
	font-weight: 600;
}
.woocommerce-MyAccount-content [class*="better-loyalty"] table { font-size: 14px; }

/* Sidebar widgets */
.widget-area .widget { margin-bottom: 34px; }
.widget-title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sk-secondary);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 7px 0; border-bottom: 1px solid var(--sk-surface); font-size: 14px; }

/* ============================================================
   Homepage offer strip + countdown
   ============================================================ */
.offer-section {
	margin: 40px 0;
	padding: 38px 0;
	background: var(--sk-secondary);
	background-size: cover;
	background-position: center;
	color: #fff;
	position: relative;
}
.offer-section.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}
.offer-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.offer-copy { flex: 1 1 260px; min-width: 0; }
.offer-title { margin: 0 0 6px; font-size: 27px; color: #fff; line-height: 1.2; }
.offer-text { margin: 0; opacity: .88; font-size: 15px; }

.offer-countdown { display: flex; align-items: center; gap: 8px; }
.cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 62px;
	padding: 10px 8px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--sk-card-radius);
	backdrop-filter: blur(2px);
}
.cd-value { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .82; margin-top: 4px; }
.cd-sep { font-size: 20px; font-weight: 700; opacity: .5; }
.offer-btn { flex: 0 0 auto; }

/* ============================================================
   Welcome popup
   ============================================================ */
.sk-popup { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sk-popup[hidden] { display: none; }
.sk-popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sk-popup-box {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: calc(var(--sk-card-radius) + 4px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	animation: skPopupIn .28s ease-out;
}
@keyframes skPopupIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sk-popup-box { animation: none; } }
.sk-popup-media { flex: 0 0 44%; }
.sk-popup-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-popup-body { flex: 1 1 auto; padding: 34px 32px; text-align: center; }
.sk-popup-title { margin: 0 0 10px; font-size: 24px; line-height: 1.25; }
.sk-popup-text { color: var(--sk-text-light); font-size: 15px; }
.sk-popup-btn { display: inline-block; margin-top: 18px; }
.sk-popup-dismiss {
	display: block;
	margin: 12px auto 0;
	background: none;
	border: 0;
	padding: 4px;
	font-size: 13px;
	color: var(--sk-text-light);
	text-decoration: underline;
	cursor: pointer;
}
.sk-popup-close {
	position: absolute;
	top: 8px; right: 10px;
	width: 34px; height: 34px;
	background: rgba(255, 255, 255, .9);
	border: 0;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: var(--sk-heading);
	cursor: pointer;
	z-index: 2;
}
.sk-popup-close:hover { background: var(--sk-primary); color: #fff; }

@media (max-width: 767px) {
	.sk-popup-box { flex-direction: column; max-width: 420px; }
	.sk-popup-media { flex: 0 0 auto; max-height: 180px; }
	.sk-popup-body { padding: 26px 22px; }
	.offer-inner { justify-content: center; text-align: center; }
	.offer-copy { flex-basis: 100%; }
	.offer-title { font-size: 22px; }
	.cd-unit { min-width: 54px; padding: 8px 6px; }
	.cd-value { font-size: 20px; }
}

/* Pagination — WooCommerce reuses the "page-numbers" class for both the
   wrapping <ul> and each individual link/span inside it, so these rules
   must target only the actual page items, never the bare .page-numbers
   class (which would also flatten the wrapping <ul> into a circle). */
.pagination, .woocommerce-pagination { margin: 36px 0 8px; text-align: center; }
ul.page-numbers { list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; }
ul.page-numbers li { display: inline-block; margin: 0 3px; }
.page-numbers li > a.page-numbers,
.page-numbers li > span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px; height: 42px;
	padding: 0 10px;
	border: 1px solid var(--sk-border);
	border-radius: 50%;
	font-weight: 600;
	font-size: 14px;
	color: var(--sk-heading);
}
.page-numbers li > .page-numbers.current { background: var(--sk-secondary); border-color: var(--sk-secondary); color: #fff; }
.page-numbers li > a.page-numbers:hover { border-color: var(--sk-primary); color: var(--sk-primary); }

/* Search form (inline) */
.search-form { display: flex; gap: 8px; max-width: 460px; }
.search-submit {
	flex-shrink: 0;
	width: 46px; height: 46px;
	border: 0; border-radius: 8px;
	background: var(--sk-secondary);
	color: #fff;
	cursor: pointer;
}
.search-submit:hover { background: var(--sk-primary); }
.search-count { color: var(--sk-text-light); }
.no-results-box { text-align: center; padding: 60px 20px; }
.no-results-box .search-form { margin: 18px auto; }
.no-results-box .btn { margin-top: 10px; }

/* 404 */
.error-404 { text-align: center; padding: 70px 20px; }
.error-code {
	font-size: 120px;
	font-weight: 800;
	line-height: 1;
	color: var(--sk-primary);
	margin: 0 0 10px;
	letter-spacing: -0.04em;
}
.error-404 .search-form { margin: 22px auto; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Comments */
.comments-area { margin-top: 44px; }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 18px 0; border-top: 1px solid var(--sk-border); }
.comment-list .avatar { border-radius: 50%; }
.comment-list .children { list-style: none; padding-left: 40px; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--sk-footer-bg);
	color: var(--sk-footer-text);
	border-top: 1px solid var(--sk-border);
	padding: 56px 0 0;
	margin-top: 40px;
}
/* Brand column stays wider; the rest share the remaining space.
   NOTE: do not write this as `1.6fr repeat(auto-fit, …)`. CSS Grid forbids a
   flexible track outside an auto-repeat, so the browser rejects the whole
   declaration and the footer silently collapses into one narrow column. */
.footer-columns {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 36px;
	padding-bottom: 40px;
}
/* Match however many columns actually rendered.
   Scoped to desktop on purpose: :has() here carries higher specificity than the
   plain `.footer-columns` rules in the mobile media queries below, and media
   queries add no specificity of their own — unscoped, these would override the
   phone layout and keep the footer multi-column on small screens. */
@media (min-width: 861px) {
	.footer-columns:has(> :nth-child(2):last-child) { grid-template-columns: 1.6fr 1fr; }
	.footer-columns:has(> :nth-child(3):last-child) { grid-template-columns: 1.6fr 1fr 1fr; }
	.footer-columns:has(> :nth-child(5)) { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 6px 0; font-size: 14px; line-height: 1.5; }
.footer-links a { opacity: .9; }
.footer-links a:hover { opacity: 1; }
.footer-contact .footer-links li { opacity: .85; }
.site-footer a { color: var(--sk-footer-text); }
.site-footer a:hover { color: var(--sk-primary); }
.footer-about p { font-size: 14px; opacity: .85; margin: 14px 0 18px; max-width: 320px; }
.site-footer .widget-title {
	border: 0;
	padding: 0;
	color: inherit;
	font-size: 14px;
}
.site-footer .widget ul li { border: 0; padding: 6px 0; font-size: 14px; }
.social-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0; }
.social-links a { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 20px 0;
	border-top: 1px solid var(--sk-border);
	font-size: 13px;
}
.footer-bottom .copyright { margin: 0; opacity: .8; }
.footer-menu { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; }
.payment-methods { max-height: 28px; width: auto; }
/* Text badges for enabled gateways (used when no payment image is uploaded). */
.payment-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.payment-badge {
	padding: 5px 10px;
	border: 1px solid var(--sk-border);
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--sk-heading);
	background: #fff;
	white-space: nowrap;
}

/* ---------- Mobile bottom bar ---------- */
.mobile-bottom-bar { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
	.product-row { grid-auto-columns: calc((100% - 48px) / 3); }
	.footer-columns { grid-template-columns: 1fr 1fr; }
	.content-with-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.main-nav { display: none; }
	.mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px; height: 42px;
		border: 0; background: transparent;
		color: var(--sk-heading);
		cursor: pointer;
	}
	.header-inner { min-height: 62px; gap: 12px; }
	.hide-mobile { display: none !important; }
	.blog-grid { grid-template-columns: 1fr; }
	/* Two-up: the desktop divider would fall in the wrong places once items
	   wrap, so drop it and separate the cards with gap instead. */
	.trust-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 18px 12px; }
	.trust-item + .trust-item { border-left: 0; }
	.trust-item { padding: 10px; gap: 11px; }
	.trust-item .sk-icon { width: 38px; height: 38px; padding: 8px; }
	.banner-grid { grid-template-columns: 1fr; }
	/* One-up banners can afford a wider crop. */
	.promo-banner img { aspect-ratio: 2 / 1; }
	.product-row { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
	/* Cap the configured height on tablets so a tall desktop hero doesn't
	   push the rest of the page off-screen. */
	.hero-slide { min-height: min(var(--sk-hero-height), 340px); }
	.section-title { font-size: 19px; }
	.home-section { padding: 24px 0; }
	.container { padding: 0 16px; }

	/* Bottom navigation */
	.has-mobile-bar .mobile-bottom-bar {
		display: flex;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 990;
		background: #fff;
		border-top: 1px solid var(--sk-border);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	}
	.has-mobile-bar { padding-bottom: 66px; }
	.mbb-item {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		font-size: 11px;
		font-weight: 600;
		color: var(--sk-text-light);
	}
	.mbb-item.is-active, .mbb-item:hover { color: var(--sk-primary); }
	.mbb-item .cart-count { top: -4px; right: calc(50% - 20px); }
}

@media (max-width: 520px) {
	/* Back to a horizontal strip on phones, where a wrapping grid of circles
	   would push the rest of the page far down. Scrollbar stays hidden, but a
	   fade on the right edge signals there is more to swipe. */
	.cat-row {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	}
	.cat-item, .cat-style-grid .cat-item { flex: 0 0 auto; scroll-snap-align: start; }
	.cat-item { width: 100px; }
	.cat-thumb { width: 92px; height: 92px; }
	.cat-style-grid .cat-item { width: 128px; }
	.cat-style-grid .cat-thumb { width: 120px; height: 120px; }
	/* Single column on phones — two trust cards side by side leaves the text
	   too cramped to read at this width. */
	.trust-grid { grid-template-columns: 1fr; }
	.section-title::after { width: 36px; height: 2px; }
	.footer-columns { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
	.footer-bottom { justify-content: center; text-align: center; }
	.hero-content { padding-top: 40px; padding-bottom: 46px; }
	.page-title { font-size: 24px; }
	.single-article .entry-title { font-size: 26px; }
}

/* =========================================================
   v1.1 features
   ========================================================= */

/* Honeypot — visually hidden, still in the DOM for bots */
.sk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

/* ---------- Wishlist ---------- */
.wishlist-btn.is-active { background: var(--sk-primary); color: #fff; }
.wishlist-link { position: relative; }
.single-wishlist-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 12px;
}
.single-wishlist-wrap .wishlist-btn { box-shadow: none; border: 1px solid var(--sk-border); }
.single-wishlist-label { font-size: 13.5px; font-weight: 600; color: var(--sk-text-light); }
.wishlist-loading { text-align: center; }

/* ---------- Google login ---------- */
.google-login-wrap { margin-top: 18px; }
.google-login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--sk-text-light);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.google-login-divider::before,
.google-login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sk-border);
}
.google-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-btn-radius);
	background: #fff;
	color: var(--sk-heading);
	font-size: 14px;
	font-weight: 600;
	transition: box-shadow .2s, border-color .2s;
}
.google-login-btn:hover {
	border-color: var(--sk-text-light);
	box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
	color: var(--sk-heading);
}

/* ---------- Phone auth / OTP ---------- */
.email-optional-note {
	font-size: 13px;
	color: var(--sk-text-light);
	background: var(--sk-surface);
	padding: 8px 14px;
	border-radius: 8px;
}
.otp-inline { display: flex; gap: 10px; }
.otp-inline input { flex: 1; letter-spacing: .3em; font-weight: 700; }
.otp-send { flex-shrink: 0; padding: 10px 18px; font-size: 12px; white-space: nowrap; }
.otp-status { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--sk-sale); }
.otp-status.is-success { color: var(--sk-success); }

/* ---------- Back-in-stock alert box ---------- */
.stock-alert-box {
	margin: 18px 0;
	padding: 20px 22px;
	background: var(--sk-surface);
	border-left: 4px solid var(--sk-primary);
	border-radius: var(--sk-card-radius);
}
.stock-alert-title { font-size: 16px; margin-bottom: 4px; }
.stock-alert-text { font-size: 13.5px; color: var(--sk-text-light); margin-bottom: 12px; }
.stock-alert-form { display: flex; gap: 10px; flex-wrap: wrap; }
.stock-alert-form input[type="tel"] { flex: 1; min-width: 180px; }
.stock-alert-status { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--sk-sale); }
.stock-alert-status.is-success { color: var(--sk-success); }

/* ---------- Floating buttons ---------- */
.whatsapp-float {
	position: fixed;
	right: 18px;
	bottom: 86px;
	z-index: 980;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 24px;
	z-index: 979;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sk-secondary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	transition: background .2s;
}
.back-to-top:hover { background: var(--sk-primary); }
.has-mobile-bar .back-to-top { bottom: 84px; }
.has-mobile-bar .whatsapp-float { bottom: 146px; }

/* ---------- AI Shopping Assistant ---------- */
.ai-shop-container { max-width: 860px; }
.ai-shop-header { text-align: center; }
.ai-shop-tagline { color: var(--sk-text-light); }

.ai-chat {
	position: relative;
	border: 1px solid var(--sk-border);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
}

.ai-lead-gate { padding: 46px 24px; display: flex; justify-content: center; background: var(--sk-surface); }
.ai-lead-card { max-width: 400px; width: 100%; text-align: center; }
.ai-lead-title { font-size: 22px; }
.ai-lead-text { color: var(--sk-text-light); font-size: 14px; margin-bottom: 18px; }
.ai-lead-form { display: grid; gap: 14px; text-align: left; }
.ai-lead-form label span {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.ai-lead-status { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--sk-sale); text-align: center; }

.ai-messages {
	height: 480px;
	max-height: 62vh;
	overflow-y: auto;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
}
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-bubble {
	max-width: 78%;
	padding: 11px 16px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.55;
}
.ai-msg-assistant .ai-bubble {
	background: var(--sk-surface);
	color: var(--sk-text);
	border-bottom-left-radius: 4px;
}
.ai-msg-user .ai-bubble {
	background: var(--sk-primary);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.ai-typing .ai-bubble { display: inline-flex; gap: 5px; padding: 14px 18px; }
.ai-typing .ai-bubble span {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sk-text-light);
	animation: aiBlink 1.2s infinite;
}
.ai-typing .ai-bubble span:nth-child(2) { animation-delay: .2s; }
.ai-typing .ai-bubble span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.ai-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	max-width: 92%;
}
.ai-product-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--sk-border);
	border-radius: 12px;
	background: #fff;
	transition: box-shadow .2s, transform .2s;
}
.ai-product-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.ai-product-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; background: var(--sk-surface); }
.ai-product-name { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--sk-heading); }
.ai-product-price { font-size: 13px; font-weight: 700; color: var(--sk-primary); }
.ai-product-price del { color: var(--sk-text-light); font-weight: 500; margin-right: 4px; }
.ai-product-price ins { text-decoration: none; }
.ai-product-oos { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #9e9e9e; }

.ai-composer {
	display: flex;
	gap: 10px;
	padding: 14px 16px;
	border-top: 1px solid var(--sk-border);
	background: #fff;
}
.ai-composer input { border-radius: var(--sk-btn-radius); }
.ai-composer .btn { padding: 12px 20px; flex-shrink: 0; }
.ai-disclaimer {
	margin: 0;
	padding: 8px 16px 12px;
	font-size: 11.5px;
	color: var(--sk-text-light);
	text-align: center;
	background: #fff;
}

/* Agent (human support) messages */
.ai-msg-agent .ai-bubble {
	background: var(--sk-secondary);
	color: #fff;
}
.ai-agent-tag {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .75;
	margin-bottom: 3px;
}
.ai-note {
	align-self: center;
	text-align: center;
	font-size: 12.5px;
	color: var(--sk-text-light);
	background: var(--sk-surface);
	border-radius: 999px;
	padding: 6px 16px;
	margin: 4px 0;
}

/* ---------- Floating chat widget ---------- */
.ai-launcher {
	position: fixed;
	right: 18px;
	bottom: 24px;
	z-index: 985;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--sk-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	transition: transform .2s, background .2s;
}
.ai-launcher:hover { transform: scale(1.07); }
.has-mobile-bar .ai-launcher { bottom: 84px; }
.ai-widget .ai-widget-panel {
	position: fixed;
	right: 18px;
	bottom: 92px;
	z-index: 986;
	width: 380px;
	max-width: calc(100vw - 28px);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .25s, transform .25s, visibility .25s;
}
.has-mobile-bar .ai-widget .ai-widget-panel { bottom: 152px; }
.ai-widget.is-open .ai-widget-panel { opacity: 1; visibility: visible; transform: none; }
.ai-widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--sk-secondary);
	color: #fff;
}
.ai-widget-status { font-size: 12px; opacity: .85; }
.ai-widget-status::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #2ecc71;
	margin-right: 6px;
}
.ai-chat-widget { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.ai-chat-widget .ai-messages { height: 340px; max-height: 48vh; padding: 14px; }
.ai-chat-widget .ai-lead-gate { padding: 24px 16px; }
.ai-chat-widget .ai-lead-title { font-size: 18px; }
.ai-chat-widget .ai-products { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 600px) {
	.ai-messages { height: 56vh; padding: 14px; }
	.ai-bubble { max-width: 88%; }
	.ai-products { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
	.whatsapp-float { width: 48px; height: 48px; right: 14px; }
	.ai-widget .ai-widget-panel { right: 8px; }
	.ai-chat-widget .ai-messages { height: 46vh; }
}

/* ---------- Search overlay extras ---------- */
.search-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.search-cat-chip {
	padding: 6px 14px;
	background: var(--sk-surface);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}
.search-cat-chip:hover { background: var(--sk-primary); color: #fff; }
.search-view-all {
	display: block;
	text-align: center;
	padding: 12px;
	margin-top: 8px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--sk-primary);
	border-top: 1px solid var(--sk-surface);
}
.sr-oos { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #9e9e9e; }
.sr-empty { text-align: center; color: var(--sk-text-light); padding: 16px 0; }

/* ---------- AI Routine Builder ---------- */
.routine-container { max-width: 720px; }
.routine-quiz {
	border: 1px solid var(--sk-border);
	border-radius: 18px;
	padding: 30px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
	margin-bottom: 40px;
}
.routine-progress {
	height: 6px;
	background: var(--sk-surface);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 26px;
}
.routine-progress-bar {
	display: block;
	height: 100%;
	background: var(--sk-primary);
	border-radius: 999px;
	transition: width .3s;
}
.routine-step { display: none; border: 0; padding: 0; margin: 0; }
.routine-step.is-active { display: block; }
.routine-step-title { font-size: 22px; margin-bottom: 18px; }
.routine-step label { display: block; margin-bottom: 16px; }
.routine-step label > span {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
}
.routine-hint { font-size: 13.5px; color: var(--sk-text-light); margin-bottom: 10px; }
.routine-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.routine-chip { margin: 0 !important; }
.routine-chip input { position: absolute; opacity: 0; }
.routine-chip span {
	display: inline-block;
	padding: 10px 20px;
	border: 1.5px solid var(--sk-border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
}
.routine-chip input:checked + span {
	background: var(--sk-primary);
	border-color: var(--sk-primary);
	color: #fff;
}
.routine-chip input:focus-visible + span { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
.routine-photo input[type="file"] {
	padding: 10px;
	border: 2px dashed var(--sk-border);
	border-radius: 10px;
	background: var(--sk-surface);
	width: 100%;
}
.routine-privacy { display: block; font-size: 12px; color: var(--sk-text-light); font-style: normal; margin-top: 6px; }
.routine-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.routine-status { text-align: center; font-weight: 600; margin: 14px 0 0; color: var(--sk-text-light); }
.routine-result {
	border: 1px solid var(--sk-border);
	border-radius: 18px;
	padding: 34px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
	margin-bottom: 40px;
}
.routine-result-text p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.routine-heading {
	font-size: 19px !important;
	font-weight: 800;
	margin: 22px 0 10px !important;
	color: var(--sk-heading);
}
.routine-result-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 24px;
}
.routine-again { text-align: center; margin: 26px 0 0; }
@media (max-width: 600px) {
	.routine-quiz, .routine-result { padding: 20px; }
	.routine-nav { justify-content: stretch; }
	.routine-nav .btn { flex: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

/* ---------- Homepage: vindesi-style refinements (v1.38) ---------- */

/* Hero: taller, editorial type; a soft white scrim behind the copy keeps it
   legible over Skinnora's artwork banners (only when a slide has text). */
.hero-slide.has-text::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 34%, rgba(255,255,255,0) 60%);
	pointer-events: none;
}
.hero-align-center .hero-slide.has-text::before { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.55)); }
.hero-align-right .hero-slide.has-text::before { background: linear-gradient(270deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 34%, rgba(255,255,255,0) 60%); }
.hero-subtitle {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 2vw, 24px);
	text-transform: none;
	letter-spacing: 0;
	color: var(--sk-primary);
	margin-bottom: 8px;
}
.hero-title { font-size: clamp(36px, 4.6vw, 62px); max-width: 560px; }
.hero-text { font-size: 16.5px; max-width: 420px; }
.hero-content .btn-lg { padding: 15px 34px; border-radius: 999px; letter-spacing: .04em; }
.hero-dots { bottom: 26px; }
.hero-dot { background: rgba(28,28,28,.35); }

/* Section headings: sentence case, centred rule like vindesi */
.section-title { font-size: 26px; text-transform: none; letter-spacing: -.01em; }

/* Category circles: larger, thin ring, name under */
.cat-row { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 22px 14px; }
.cat-thumb { width: 128px; height: 128px; border: 1px solid var(--sk-border); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.cat-item:hover .cat-thumb { border-color: var(--sk-primary); box-shadow: 0 10px 24px rgba(0,0,0,.09); }
.cat-thumb img { object-fit: cover; padding: 0; }
.cat-name { font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 600; }
@media (min-width: 1100px) { .cat-row { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }

/* Promo banners: 2 wide tiles with rounded corners */
.banners-section { padding-top: 26px; padding-bottom: 6px; }
.promo-banner { border-radius: 16px; }

/* Brand strip: logos in soft tiles, names for brands without a logo */
.brand-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.brand-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 86px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-card-radius);
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.brand-item:hover { border-color: var(--sk-primary); box-shadow: 0 8px 22px rgba(0,0,0,.07); transform: translateY(-2px); }
.brand-item img { max-height: 56px; width: auto; object-fit: contain; }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sk-heading); text-align: center; }

@media (max-width: 860px) {
	.hero-slide.has-text::before { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.2) 100%); }
	.hero-title { font-size: clamp(28px, 8vw, 40px); }
	.cat-thumb { width: 96px; height: 96px; }
}

/* The hidden attribute must beat the .btn display rule (routine wizard nav). */
.btn[hidden], button[hidden], .button[hidden] { display: none !important; }
.ai-lead-skip { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--sk-text-light); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; }
.ai-lead-skip:hover { color: var(--sk-primary); }
.routine-step label em { font-style: normal; font-weight: 400; color: var(--sk-text-light); font-size: 12px; }

/* Brands mega panel */
.mega-menu-brands { padding: 22px 28px; }
.mega-brand-logos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--sk-border); }
.mega-brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 118px; height: 56px; border: 1px solid var(--sk-border); border-radius: 8px; padding: 6px 10px; background: #fff; }
.mega-brand-logo:hover { border-color: var(--sk-primary); }
.mega-brand-logo img { max-height: 40px; width: auto; object-fit: contain; }
.mega-brand-list { list-style: none; margin: 0; padding: 0; columns: 5 150px; column-gap: 24px; }
.mega-brand-list li { break-inside: avoid; padding: 3px 0; }
.mega-brand-list a { font-size: 13.5px; color: var(--sk-text); }
.mega-brand-list a:hover { color: var(--sk-primary); padding-left: 3px; }
.mega-brands-all { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sk-heading); border-bottom: 2px solid var(--sk-primary); }
.mega-brands-all:hover { color: var(--sk-primary); }

/* Global guarantee: the hidden attribute always wins over component display
   rules (the chat lead gate stayed visible above the conversation because its
   display:flex outranked the browser default). */
[hidden] { display: none !important; }

/* ======================================================================
   v1.40 — rich mega menu, feature tiles, concern cards, footer, chat
   ====================================================================== */

/* ---------- Mega menu (rich) ---------- */
.mega-inner-rich { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 28px; }
.mega-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; }
.mega-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.mega-tile-img { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: var(--sk-surface); border: 1px solid var(--sk-border); transition: border-color .2s, transform .2s; }
.mega-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.mega-tile:hover .mega-tile-img { border-color: var(--sk-primary); transform: translateY(-3px); }
.mega-tile-name { font-size: 12.5px; font-weight: 600; color: var(--sk-text); line-height: 1.3; }
.mega-tile:hover .mega-tile-name { color: var(--sk-primary); }
.mega-all { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--sk-heading); border-bottom: 2px solid var(--sk-primary); }
.mega-all:hover { color: var(--sk-primary); }
.mega-list-thumbs li { padding: 3px 0; }
.mega-list-thumbs a { display: flex; align-items: center; gap: 10px; }
.mega-list-thumb { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sk-surface); border: 1px solid var(--sk-border); }
.mega-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega-promo { position: relative; display: block; border-radius: var(--sk-card-radius); overflow: hidden; min-height: 200px; background: var(--sk-surface); }
.mega-promo img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; transition: transform .4s; }
.mega-promo:hover img { transform: scale(1.04); }
.mega-promo-title { position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; background: var(--sk-primary); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; }
@media (max-width: 1200px) { .mega-inner-rich { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } .mega-promo { display: none; } }

/* ---------- Feature tiles under the hero ---------- */
.tiles-section { padding: 26px 0 8px; }
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 128px;
	padding: 20px 20px 20px 22px;
	border-radius: 16px;
	overflow: hidden;
	color: var(--sk-heading);
	transition: transform .2s, box-shadow .2s;
}
.feature-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.09); color: var(--sk-heading); }
.tile-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; z-index: 1; }
.tile-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.tile-text { font-size: 13px; opacity: .8; }
.tile-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.feature-tile:hover .tile-cta { color: var(--sk-primary); }
.tile-media { flex-shrink: 0; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.tile-media img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 4px solid rgba(255,255,255,.7); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.tile-media .sk-icon { color: var(--sk-primary); opacity: .85; }
.tile-tone-1 { background: linear-gradient(135deg, #ffe4ec, #fff3f6); }
.tile-tone-2 { background: linear-gradient(135deg, #e6f6ec, #f2fbf5); }
.tile-tone-3 { background: linear-gradient(135deg, #fff1dc, #fff8ec); }
.tile-tone-4 { background: linear-gradient(135deg, #e4f0ff, #f0f6ff); }
.tile-tone-5 { background: linear-gradient(135deg, #efe6ff, #f7f2ff); }
.tile-tone-6 { background: linear-gradient(135deg, #e6f7f8, #f1fbfb); }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tile-grid { gap: 10px; } .feature-tile { min-height: 96px; padding: 14px; border-radius: 12px; } .tile-title { font-size: 15px; } .tile-media, .tile-media img { width: 60px; height: 60px; } .tile-text { display: none; } }

/* ---------- Skin concern cards ---------- */
.cat-style-concern .cat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cat-style-concern .cat-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 16px;
	text-align: left;
	border-radius: 16px;
	background: var(--sk-surface);
	border: 1px solid transparent;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cat-style-concern .cat-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08); border-color: var(--sk-primary); }
.cat-style-concern .cat-thumb { width: 96px; height: 96px; margin: 0; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.cat-style-concern .cat-name { display: block; -webkit-line-clamp: 3; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 700; padding: 0; }
.cat-style-concern .cat-count { margin-top: 4px; }
.cat-style-concern .cat-item:nth-child(6n+1) { background: #fff0f4; }
.cat-style-concern .cat-item:nth-child(6n+2) { background: #eef8f1; }
.cat-style-concern .cat-item:nth-child(6n+3) { background: #fff6e8; }
.cat-style-concern .cat-item:nth-child(6n+4) { background: #eaf2ff; }
.cat-style-concern .cat-item:nth-child(6n+5) { background: #f3ecff; }
.cat-style-concern .cat-item:nth-child(6n+6) { background: #e9f7f8; }
@media (max-width: 1000px) { .cat-style-concern .cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cat-style-concern .cat-item { grid-template-columns: 64px minmax(0, 1fr); padding: 12px; gap: 10px; } .cat-style-concern .cat-thumb { width: 64px; height: 64px; } .cat-style-concern .cat-name { font-size: 13px; } }

/* ---------- Brands directory page ---------- */
.brands-header { text-align: center; max-width: 720px; margin: 10px auto 26px; }
.brands-intro { color: var(--sk-text-light); margin: 6px 0 16px; }
.brands-search input { width: 100%; max-width: 420px; padding: 12px 18px; border: 1px solid var(--sk-border); border-radius: 999px; font-size: 15px; }
.brands-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 26px; }
.brands-featured-item { display: flex; align-items: center; justify-content: center; height: 72px; padding: 10px 14px; border: 1px solid var(--sk-border); border-radius: var(--sk-card-radius); background: #fff; }
.brands-featured-item:hover { border-color: var(--sk-primary); }
.brands-featured-item img { max-height: 46px; width: auto; object-fit: contain; }
.brands-index { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 30px; position: sticky; top: 84px; z-index: 5; background: var(--sk-body-bg, #fff); padding: 10px 0; }
.brands-index a, .brands-index span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.brands-index a { background: var(--sk-surface); color: var(--sk-heading); }
.brands-index a:hover { background: var(--sk-primary); color: #fff; }
.brands-index span { color: #c8c8c8; }
.brands-group { margin-bottom: 30px; scroll-margin-top: 150px; }
.brands-letter { font-size: 26px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--sk-primary); display: inline-block; }
.brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.brand-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--sk-border); border-radius: var(--sk-card-radius); background: #fff; transition: border-color .2s, box-shadow .2s; }
.brand-card:hover { border-color: var(--sk-primary); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.brand-card-logo { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--sk-surface); overflow: hidden; }
.brand-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.brand-card-initial { font-size: 22px; font-weight: 800; color: var(--sk-primary); }
.brand-card-name { font-weight: 700; font-size: 14px; color: var(--sk-heading); display: block; }
.brand-card-count { font-size: 12px; color: var(--sk-text-light); display: block; margin-left: auto; white-space: nowrap; }

/* ---------- Footer (enriched) ---------- */
.footer-trust { border-top: 1px solid var(--sk-border); border-bottom: 1px solid var(--sk-border); background: var(--sk-surface); }
.footer-trust-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding-top: 22px; padding-bottom: 22px; }
.footer-trust-item { display: flex; align-items: center; gap: 12px; }
.footer-trust-item .sk-icon { color: var(--sk-primary); flex-shrink: 0; }
.footer-trust-item strong { display: block; font-size: 14px; }
.footer-trust-item span { font-size: 12.5px; color: var(--sk-text-light); }
.site-footer .footer-columns { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; padding-top: 44px; }
.footer-contact-list { list-style: none; padding: 0; margin: 4px 0 16px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14px; line-height: 1.5; }
.footer-contact-list .sk-icon { color: var(--sk-primary); flex-shrink: 0; margin-top: 2px; }
.social-links { display: flex; gap: 8px; list-style: none; padding: 0; margin: 4px 0 0; }
.social-links li a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sk-border); background: #fff; color: var(--sk-heading); transition: all .2s; }
.social-links li a:hover { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
.footer-toggle { all: unset; cursor: default; font: inherit; color: inherit; }
.footer-call { margin-top: 14px; padding: 10px 18px; font-size: 12.5px; }
.footer-payments { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-payments-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sk-text-light); }
@media (max-width: 1000px) { .footer-trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.site-footer .footer-columns { grid-template-columns: 1fr; padding-top: 28px; gap: 0; }
	.footer-about { padding-bottom: 18px; border-bottom: 1px solid var(--sk-border); margin-bottom: 4px; }
	.footer-col:not(.footer-about) { border-bottom: 1px solid var(--sk-border); }
	.footer-col:not(.footer-about) .widget-title { margin: 0; padding: 14px 0; }
	.footer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; }
	.footer-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
	.footer-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
	.footer-col:not(.footer-about) .footer-links, .footer-col:not(.footer-about) .footer-call { display: none; padding-bottom: 14px; }
	.footer-col.is-open .footer-links { display: block; }
	.footer-col.is-open .footer-call { display: inline-flex; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 560px) { .footer-trust-inner { grid-template-columns: 1fr; gap: 12px; padding-top: 16px; padding-bottom: 16px; } }

/* ---------- Chat: rich replies + product cards with add to cart ---------- */
.ai-msg-assistant { align-items: flex-end; gap: 8px; }
.ai-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sk-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; }
.ai-bubble { max-width: 86%; line-height: 1.55; }
.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-bubble li { margin: 2px 0; }
.ai-bubble h4 { margin: 8px 0 4px; font-size: 14px; font-weight: 800; }
.ai-bubble a { color: var(--sk-primary); text-decoration: underline; }
.ai-bubble strong { font-weight: 700; }
.ai-products { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ai-product-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--sk-border); border-radius: 12px; background: #fff; }
.ai-product-card img { width: 64px; height: 64px; aspect-ratio: auto; }
.ai-product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-product-add { padding: 8px 12px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; border: 0; background: var(--sk-primary); color: #fff; cursor: pointer; white-space: nowrap; }
.ai-product-add:hover { background: var(--sk-secondary); }
.ai-product-add.is-added { background: #1a7f45; }
.ai-product-add:disabled { opacity: .6; cursor: default; }
.ai-product-link { font-size: 11.5px; color: var(--sk-text-light); text-decoration: underline; }

/* Brand cards: name and count stacked so long names never clip the count. */
.brand-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
.brand-card-count { margin-left: 0; white-space: normal; }
.ai-chat-widget .ai-products, .ai-chat .ai-products { grid-template-columns: 1fr; max-width: 100%; }
@media (max-width: 600px) { .ai-products, .ai-chat-widget .ai-products { grid-template-columns: 1fr; } }