/*
Theme Name: Astra Child
Theme URI: https://securitech1.com
Author: XAD
Author URI: https://xadsites.com
Description: Security & technology — premium WooCommerce theme for Securitech1 Corp. IP cameras, NVR recorders, HD analog and accessories. Mega menu, slide-out cart, product carousels, one-click catalog import and a dedicated admin panel. Built by XAD.
Version: 1.0.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: securitech1
*/

/* ============ Tokens ============ */
:root {
	--noir: #0A1220;        /* azul noche profundo (fondo principal oscuro) */
	--coal: #131C2B;        /* acero un tono más claro */
	--pine-deep: #060C16;   /* casi negro para degradados */
	--ivory: #F7F9FC;
	--paper: #FFFFFF;
	--ink: #0F172A;         /* texto oscuro */
	--muted: #64748B;       /* gris azulado para texto secundario */
	--gold: #1F6FE5;        /* azul de marca (tomado del logo) */
	--gold-soft: #4A90FF;
	--gold-deep: #0B3D91;
	--champagne: #E7EEF7;
	--cyan: #22D3EE;        /* acento técnico */
	--line: #E2E8F0;
	--radius: 16px;
	--radius-sm: 10px;
	--shadow-soft: 0 10px 30px -18px rgba(10, 18, 32, .45);
	--font-display: "Inter", system-ui, -apple-system, sans-serif;   /* SWAN primary (Graphik) */
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--font-editorial: "Fraunces", Georgia, times, serif;             /* SWAN secondary (Tiempos) */
	--gutter: clamp(18px, 4vw, 48px);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; background: var(--ivory); color: var(--ink);
	font-family: var(--font-body); font-size: 16px; line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
.container { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8vw, 96px); }
.section--dark { background: var(--noir); color: var(--champagne); }
.section--dark h2, .section--dark h3 { color: var(--champagne); }
/* Subtle gold pattern texture on dark sections */
.section--dark, .aff-band, .newsletter, .shop-cta {
	background-image: url('assets/img/pattern.svg');
	background-size: 60px 60px;
}
.section--dark { background-color: var(--noir); }
.aff-band { background-image: url('assets/img/pattern.svg'), linear-gradient(115deg, var(--noir), var(--pine-deep)); }
.newsletter { background-image: url('assets/img/pattern.svg'); background-color: var(--noir); }
.eyebrow { display: inline-block; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; font-weight: 600; color: var(--gold); margin-bottom: 12px; }
.section__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.section__sub { color: var(--muted); max-width: 640px; }
.section--dark .section__sub { color: rgba(245, 235, 211, .75); }
.section__head { margin-bottom: clamp(26px, 4vw, 44px); }
.section__head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: .95rem;
	border: 1px solid transparent; cursor: pointer; transition: all .18s ease;
	font-family: var(--font-body); letter-spacing: .02em;
}
.btn--gold { background: var(--gold); color: var(--noir); }
.btn--gold:hover { background: var(--gold-soft); color: var(--noir); transform: translateY(-2px); }
.btn--noir { background: var(--noir); color: var(--champagne); }
.btn--noir:hover { background: var(--coal); color: var(--gold-soft); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.section--dark .btn--ghost { color: var(--champagne); border-color: rgba(245,235,211,.5); }
.section--dark .btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============ Announce bar ============ */
.announce {
	background: var(--pine-deep); color: var(--gold-soft);
	font-size: .78rem; letter-spacing: .06em; text-align: center;
	padding: 8px var(--gutter);
}

/* ============ Header (verde pino) ============ */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: var(--noir);
	background-image: linear-gradient(180deg, var(--noir), var(--coal));
	border-bottom: 1px solid rgba(198,160,91,.3);
	transition: box-shadow .2s ease;
}
.site-header .primary-nav a { color: var(--champagne); }
.site-header .primary-nav a:hover { color: var(--gold-soft); }
.site-header .icon-btn { color: var(--champagne); }
.site-header .icon-btn:hover { background: rgba(198,160,91,.15); color: var(--gold-soft); }
.site-header .brand__name { color: var(--champagne); }
.site-header .nav-caret { color: var(--gold); }
.cur-switch { border-color: rgba(198,160,91,.4); background: rgba(255,255,255,.06); }
.cur-switch a { color: rgba(245,235,211,.7); }
.cur-switch a.is-active { background: var(--gold); color: var(--noir); }
.site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(8,28,18,.25); }
.header-bar {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	gap: 18px; padding: 10px var(--gutter); max-width: 1440px; margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: center; }
.brand__mark { width: 46px; height: 46px; object-fit: contain; }
.brand__name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--ink); letter-spacing: .04em; line-height: 1.1; }
.brand__name em { display: block; font-style: normal; font-size: .62rem; font-family: var(--font-body); letter-spacing: .34em; color: var(--gold); text-transform: uppercase; }
/* When a full logo image is uploaded it carries the wordmark itself — show it larger, no text. */
.brand--logo-only .brand__mark { width: auto; height: 104px; max-width: 420px; }
.primary-nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.primary-nav a { color: var(--ink); font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; gap: 5px; }
.primary-nav a:hover { color: var(--gold); }
.primary-nav--right { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.icon-btn {
	width: 42px; height: 42px; display: grid; place-items: center;
	background: transparent; border: 0; cursor: pointer; color: var(--ink);
	border-radius: 50%; transition: background .15s ease, color .15s ease; position: relative;
}
.icon-btn:hover { background: var(--champagne); color: var(--gold); }
.cart-count {
	position: absolute; top: 2px; inset-inline-end: 0;
	background: var(--gold); color: var(--noir); font-size: .64rem; font-weight: 700;
	min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center; padding-inline: 4px;
}
/* Currency pills */
.cur-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.cur-switch a { padding: 7px 13px; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.cur-switch a.is-active { background: var(--noir); color: var(--gold-soft); }
.menu-toggle { display: none; }

/* Mega menu */
.has-mega { position: static; }
.mega {
	position: absolute; inset-inline: 0; top: 100%;
	background: var(--paper); border-top: 1px solid var(--line);
	box-shadow: 0 30px 60px -30px rgba(8,28,18,.35);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 600;
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner { max-width: 1280px; margin-inline: auto; padding: 30px var(--gutter); display: grid; grid-template-columns: 1fr 250px; gap: 34px; }
.mega__inner--lines { grid-template-columns: 1fr 250px; align-items: start; }
.mega__lines-wrap { display: flex; flex-direction: column; gap: 24px; }
.mega__line-title { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 2px solid var(--gold); }
.mega__line-title:hover { color: var(--gold); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; }
.mega__list li { margin: 0; }
.mega__list a { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); font-size: .92rem; }
.mega__list a:hover { color: var(--gold); }
.mega__list-count { font-size: .72rem; color: var(--muted); background: var(--champagne); border-radius: 999px; padding: 1px 8px; }
@media (max-width: 1100px) { .mega__inner--lines { grid-template-columns: 1fr; } .mega__list { grid-template-columns: repeat(2, 1fr); } }
.mega__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mega__cat { display: flex; flex-direction: column; gap: 8px; text-align: center; padding: 10px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: all .15s ease; }
.mega__cat:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.mega__thumb { aspect-ratio: 1; border-radius: 10px; background: var(--champagne) center/cover no-repeat; }
.mega__label { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1rem; }
.mega__count { font-size: .74rem; color: var(--muted); }
.mega__aside { border-inline-start: 1px solid var(--line); padding-inline-start: 30px; display: flex; flex-direction: column; gap: 12px; }
.mega__aside h4 { margin: 0; font-size: 1.25rem; }
.mega__aside p { color: var(--muted); font-size: .88rem; margin: 0; }
@media (max-width: 1100px) { .mega { display: none; } .nav-caret { display: none; } }

/* Mobile drawer + search overlay */
.drawer-backdrop, .search-overlay { position: fixed; inset: 0; z-index: 800; }
.drawer-backdrop { background: rgba(8,28,18,.5); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-drawer {
	position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(340px, 86vw);
	background: var(--ivory); z-index: 900; padding: 18px 22px 30px; overflow-y: auto;
	transform: translateX(-105%); transition: transform .24s ease;
}
[dir="rtl"] .mobile-drawer { transform: translateX(105%); }
.mobile-drawer.is-open { transform: none; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.mobile-drawer nav a { display: block; padding: 13px 4px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.drawer-lines { margin-top: 16px; }
.drawer-line { border-bottom: 1px solid var(--line); }
.drawer-line summary { cursor: pointer; padding: 14px 4px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); list-style: none; }
.drawer-line summary::-webkit-details-marker { display: none; }
.drawer-line summary::after { content: "+"; float: right; color: var(--gold); font-size: 1.3rem; }
.drawer-line[open] summary::after { content: "−"; }
.drawer-line ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 12px; }
.drawer-line li a { display: block; padding: 9px 4px; color: var(--ink); font-weight: 500; border-bottom: 0; }
.drawer-line li a:hover { color: var(--gold); }
.search-overlay { background: rgba(8,28,18,.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay form { width: min(680px, 90vw); display: flex; gap: 10px; }
.search-overlay input[type="search"] { flex: 1; padding: 16px 22px; border-radius: 999px; border: 0; font-size: 1.05rem; }
.search-close { position: absolute; top: 24px; inset-inline-end: 28px; color: var(--champagne); }

/* Cart drawer */
.cart-backdrop { position: fixed; inset: 0; z-index: 850; background: rgba(8,28,18,.5); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.cart-backdrop.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
	position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(400px, 90vw);
	background: var(--ivory); z-index: 950; display: flex; flex-direction: column;
	transform: translateX(105%); transition: transform .26s ease; box-shadow: -20px 0 50px -30px rgba(8,28,18,.5);
}
[dir="rtl"] .cart-drawer { transform: translateX(-105%); }
.cart-drawer.is-open { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.cart-drawer__body > * { max-width: 100%; }
.cart-drawer .woocommerce-mini-cart__empty-message,
.cart-drawer p.woocommerce-mini-cart__empty-message { color: var(--muted); padding: 50px 0; text-align: center; font-size: 1rem; }
.cart-drawer ul.cart_list { list-style: none; margin: 0; padding: 0; }
.cart-drawer ul.cart_list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); position: relative; }
.cart-drawer ul.cart_list li a.remove { position: absolute; top: 16px; inset-inline-end: 0; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--champagne); color: var(--noir) !important; font-size: 14px; }
.cart-drawer ul.cart_list li a:not(.remove) { color: var(--ink); font-weight: 500; font-size: .9rem; display: block; }
.cart-drawer ul.cart_list li img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; float: none !important; margin: 0 !important; border: 1px solid var(--line); }
.cart-drawer ul.cart_list li .quantity { color: var(--muted); font-size: .82rem; }
.cart-drawer .woocommerce-mini-cart__total,
.cart-drawer p.woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 16px 0; font-size: 1rem; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.cart-drawer .woocommerce-mini-cart__total strong { font-family: var(--font-display); }
.cart-drawer .woocommerce-mini-cart__total .amount { color: var(--gold); font-weight: 700; }
.cart-drawer .woocommerce-mini-cart__buttons,
.cart-drawer p.woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cart-drawer .woocommerce-mini-cart__buttons .button { width: 100%; text-align: center; margin: 0 !important; }
.cart-drawer .woocommerce-mini-cart__buttons .checkout { background: var(--gold) !important; color: var(--noir) !important; }
.cart-drawer .woocommerce-mini-cart__buttons .checkout:hover { background: var(--noir) !important; color: var(--gold-soft) !important; }

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; background: var(--noir); }
.hero__track { display: flex; transition: transform .5s ease; }
.hero__slide { position: relative; flex: 0 0 100%; min-height: clamp(480px, 72vh, 720px); display: grid; align-items: center; }
.hero__slide img.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,28,18,.82) 10%, rgba(8,28,18,.35) 55%, rgba(8,28,18,.15)); }
.hero__inner { position: relative; z-index: 2; padding: 40px var(--gutter); max-width: 1280px; margin-inline: auto; width: 100%; }
.hero__eyebrow { color: var(--gold-soft); letter-spacing: .26em; text-transform: uppercase; font-size: .74rem; font-weight: 600; }
.hero__title { color: #fff; font-size: clamp(2.4rem, 6vw, 4.4rem); margin: 12px 0 14px; max-width: 640px; }
.hero__text { color: rgba(250,247,241,.85); max-width: 520px; margin-bottom: 26px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__dots { position: absolute; bottom: 22px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.hero__dots button { width: 26px; height: 4px; border-radius: 99px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: background .2s ease; }
.hero__dots button[aria-current] { background: var(--gold); }

/* ============ Trust bar ============ */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 26px; }
.trust__item { display: flex; align-items: center; gap: 12px; }
.trust__item svg { color: var(--gold); flex: 0 0 auto; }
.trust__item strong { display: block; font-size: .92rem; color: var(--ink); }
.trust__item em { font-style: normal; font-size: .78rem; color: var(--muted); }
@media (max-width: 860px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ Category tiles ============ */
.cats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cat-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; display: block; background: var(--coal); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,28,18,.85)); }
.cat-tile__name { position: absolute; bottom: 14px; inset-inline: 14px; z-index: 2; color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.cat-tile__count { position: absolute; bottom: 0; inset-inline: 14px; z-index: 2; color: var(--gold-soft); font-size: .74rem; padding-bottom: 2px; opacity: .9; }
@media (max-width: 1000px) { .cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ============ Líneas (IP / Red · HD Analógico) ============ */
.line-block { margin-top: clamp(34px, 5vw, 56px); }
.line-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.line-block__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; }
.line-block__title::before { content: "—"; color: var(--gold); margin-inline-end: 10px; }
.line-block__all { font-weight: 600; font-size: .9rem; color: var(--gold); white-space: nowrap; }
.line-block__all:hover { color: var(--ink); }
.line-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.line-cat { display: flex; flex-direction: column; text-align: center; }
.line-cat__img { aspect-ratio: 1; border-radius: var(--radius); background: var(--coal) center/cover no-repeat; margin-bottom: 10px; position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.line-cat:hover .line-cat__img { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.line-cat__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.line-cat__count { font-size: .76rem; color: var(--muted); }
@media (max-width: 1000px) { .line-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .line-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.prod-card {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease;
}
.prod-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.prod-card__img { aspect-ratio: 1; background: var(--champagne); overflow: hidden; position: relative; }
.prod-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prod-card:hover .prod-card__img img { transform: scale(1.05); }
.prod-card__badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--gold); color: var(--noir); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.prod-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-card__title { font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: var(--ink); line-height: 1.45; margin: 0; }
.prod-card__title a { color: inherit; }
.prod-card__title a:hover { color: var(--gold); }
.prod-card__price { color: var(--gold); font-weight: 700; font-size: 1.02rem; margin-top: auto; }
.prod-card__btn { margin-top: 10px; }
.prod-card__btn .btn { width: 100%; padding: 11px; font-size: .85rem; }
@media (max-width: 1000px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Carousel (new arrivals) */
.carousel { position: relative; }
.carousel__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4);
	gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; padding-bottom: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: start; }
.carousel__nav {
	position: absolute; top: 38%; width: 44px; height: 44px; border-radius: 50%;
	background: var(--paper); border: 1px solid var(--line); color: var(--ink);
	display: grid; place-items: center; cursor: pointer; z-index: 5; font-size: 1.3rem;
	transition: all .15s ease; box-shadow: var(--shadow-soft);
}
.carousel__nav:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }
.carousel__nav--prev { inset-inline-start: -12px; }
.carousel__nav--next { inset-inline-end: -12px; }
@media (max-width: 1000px) { .carousel__track { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; } }
@media (max-width: 700px) { .carousel__track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; } }

/* ============ Fabrication band ============ */
.fab { position: relative; overflow: hidden; }
.fab__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.fab__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--coal); }
.fab__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .fab__inner { grid-template-columns: 1fr; } }

/* ============ Affiliate band ============ */
.aff-band { background: linear-gradient(115deg, var(--noir), var(--pine-deep)); color: var(--champagne); border-block: 1px solid rgba(201,162,39,.35); }
.aff-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; padding-block: clamp(36px, 5vw, 60px); }
.aff-band h2 { color: var(--champagne); margin: 0 0 6px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.aff-band p { margin: 0; color: rgba(245,235,211,.8); max-width: 540px; }

/* ============ Testimonials ============ */
.testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.testi__stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 12px; }
.testi__text { color: var(--ink); font-style: italic; }
.testi__name { margin-top: 14px; font-weight: 700; font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) { .testi__grid { grid-template-columns: 1fr; } }

/* ============ Instagram strip ============ */
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.insta__grid a { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--champagne); display: block; }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.insta__grid a:hover img { transform: scale(1.07); }
@media (max-width: 860px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============ Newsletter ============ */
.newsletter { background: var(--noir); color: var(--champagne); text-align: center; }
.newsletter h2 { color: var(--champagne); }
.newsletter__form { display: flex; gap: 10px; max-width: 520px; margin: 26px auto 0; }
.newsletter__form input[type="email"] { flex: 1; padding: 15px 22px; border-radius: 999px; border: 1px solid rgba(245,235,211,.3); background: rgba(255,255,255,.06); color: #fff; font-size: .95rem; }
.newsletter__form input::placeholder { color: rgba(245,235,211,.5); }
@media (max-width: 560px) { .newsletter__form { flex-direction: column; } }

/* ============ Footer ============ */
.site-footer { background: var(--coal); color: rgba(245,235,211,.75); font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 34px; padding-block: clamp(44px, 6vw, 70px); }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer__brand img { width: 44px; height: 44px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.footer__brand span { font-family: var(--font-display); font-size: 1.3rem; color: var(--champagne); font-weight: 700; }
.site-footer h4 { color: var(--gold-soft); font-family: var(--font-body); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(245,235,211,.75); }
.site-footer a:hover { color: var(--gold-soft); }
.footer__socials { display: flex; gap: 10px; margin-top: 16px; }
.footer__socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(245,235,211,.25); display: grid; place-items: center; color: rgba(245,235,211,.85); transition: all .15s ease; }
.footer__socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }
.footer__bottom { border-top: 1px solid rgba(245,235,211,.12); padding-block: 18px; text-align: center; font-size: .8rem; color: rgba(245,235,211,.5); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.footer__legal { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.footer__legal a { color: rgba(245,235,211,.7); }
.footer__legal a:hover { color: var(--gold-soft); }
.footer__copy { color: rgba(245,235,211,.5); }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============ WooCommerce ============ */
.shop-hero { background: var(--noir); color: var(--champagne); text-align: center; padding: clamp(36px, 6vw, 64px) var(--gutter); margin-bottom: 34px; position: relative; overflow: hidden; }
.shop-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 50% 120%, rgba(201,162,39,.22), transparent); }
.shop-hero__eyebrow { color: var(--gold); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; font-weight: 700; }
.shop-hero__title { color: var(--champagne); font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 8px 0 6px; }
.shop-hero__sub { color: rgba(245,235,211,.7); max-width: 620px; margin-inline: auto; position: relative; z-index: 1; }
.alhg-woo.container { max-width: 1280px; padding-block: 0 clamp(40px, 6vw, 72px); }

.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px !important; margin: 0 0 10px !important; padding: 0 !important; width: 100% !important; float: none !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; max-width: none !important; float: none !important; clear: none !important; margin: 0 !important; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; text-align: start; transition: box-shadow .2s ease, transform .2s ease; }
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.woocommerce ul.products li.product a img { aspect-ratio: 1; object-fit: cover; margin: 0 !important; width: 100%; height: auto; background: var(--champagne); font-size: 0; color: transparent; min-height: 1px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body); font-size: .92rem !important; font-weight: 500;
	color: var(--ink); padding: 16px 18px 4px !important; line-height: 1.4; min-height: 2.7em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product .price { color: var(--gold) !important; font-weight: 700 !important; font-size: 1.05rem !important; padding: 6px 18px 0 !important; margin: 0 !important; margin-top: auto !important; }
.woocommerce ul.products li.product .button { margin: 12px 18px 18px !important; padding: 11px 14px !important; font-size: .82rem !important; border-radius: 999px !important; white-space: normal; line-height: 1.2; }
.woocommerce .woocommerce-result-count { color: var(--muted); }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; background: #fff; color: var(--ink); }
.woocommerce nav.woocommerce-pagination { margin-top: 34px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 999px; padding: 10px 16px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--noir); color: var(--gold-soft); border-color: var(--noir); }

/* Buttons — kill purple */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce ul.products li.product .button, .wc-block-components-button, .wp-element-button {
	background: var(--noir) !important; color: var(--champagne) !important; border: 0 !important;
	border-radius: 999px !important; font-weight: 600 !important; padding: 12px 26px !important;
	transition: all .15s ease !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--gold) !important; color: var(--noir) !important; transform: translateY(-2px);
}
.woocommerce div.product form.cart .single_add_to_cart_button { background: var(--gold) !important; color: var(--noir) !important; font-size: 1rem !important; }
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--noir) !important; color: var(--gold-soft) !important; }

/* Single product */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 4vw, 60px); align-items: start; max-width: 1280px; margin-inline: auto; }
.woocommerce div.product > * { min-width: 0; }
.woocommerce div.product div.images { margin: 0 !important; }
.woocommerce div.product div.images img { border-radius: var(--radius); border: 1px solid var(--line); }
.woocommerce div.product .summary { margin: 0 !important; }
.woocommerce div.product .product_title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.woocommerce div.product p.price { color: var(--gold) !important; font-size: 1.7rem; font-weight: 700; }
.alhg-specs { margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: .9rem; }
.alhg-specs div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 16px; }
.alhg-specs div:nth-child(odd) { background: var(--champagne); }
.alhg-specs b { color: var(--ink); font-weight: 600; }
.alhg-specs span { color: var(--muted); }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 44px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 22px !important; border-bottom: 1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0; margin: 0 18px 0 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--muted) !important; font-weight: 600; padding: 12px 2px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--gold); }
.woocommerce div.product .related.products, .woocommerce div.product .upsells.products { grid-column: 1 / -1; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; } .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } }

/* Quantity stepper */
.woocommerce .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.woocommerce .quantity input.qty { border: 0 !important; width: 54px !important; height: 46px !important; text-align: center; background: transparent; -moz-appearance: textfield; }
.woocommerce .quantity input.qty::-webkit-inner-spin-button, .woocommerce .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.alhg-qty-btn { width: 42px; border: 0; background: var(--champagne); color: var(--ink); font-size: 1.25rem; cursor: pointer; transition: background .15s ease; }
.alhg-qty-btn:hover { background: var(--gold); }

/* Shop pre-footer */
.shop-prefooter { background: var(--paper); border-block: 1px solid var(--line); }
.shop-prefooter__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 30px; }
.shop-feat { text-align: center; }
.shop-feat svg { color: var(--gold); margin-bottom: 8px; }
.shop-feat strong { display: block; color: var(--ink); font-size: .92rem; }
.shop-feat em { font-style: normal; color: var(--muted); font-size: .8rem; }
@media (max-width: 700px) { .shop-prefooter__grid { grid-template-columns: repeat(2, 1fr); } }
.shop-cta { background: linear-gradient(115deg, var(--noir), var(--pine-deep)); color: var(--champagne); text-align: center; padding: clamp(34px, 5vw, 56px) var(--gutter); }
.shop-cta h2 { color: var(--champagne); margin: 0 0 18px; font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* Footer back-to-top link (the floating button was removed for the AI agent widget) */
.footer__top {
	display: inline-flex; align-items: center; gap: 7px;
	color: rgba(245,235,211,.7); font-size: .8rem; letter-spacing: .02em;
	padding: 6px 14px; border: 1px solid rgba(245,235,211,.18); border-radius: 999px;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.footer__top svg { color: var(--gold); transition: color .15s ease; }
.footer__top:hover { color: var(--noir); background: var(--gold); border-color: var(--gold); }
.footer__top:hover svg { color: var(--noir); }

/* ============ Mobile header/hero ============ */
@media (max-width: 1100px) {
	.header-bar { grid-template-columns: auto 1fr auto; }
	.primary-nav--left { display: none; }
	.menu-toggle { display: grid; }
	.brand { justify-self: start; }
	.brand__name { font-size: 1.15rem; }
	.brand__mark { width: 38px; height: 38px; }
	.brand--logo-only .brand__mark { width: auto; height: 64px; max-width: 240px; }
	.primary-nav--right .nav-links { display: none; }
}
@media (max-width: 860px) {
	.hero__slide { min-height: 86vh; }
	.hero__scrim { background: linear-gradient(180deg, rgba(8,28,18,.35), rgba(8,28,18,.2) 40%, rgba(8,28,18,.88)); }
	.hero__inner { align-self: end; padding-bottom: 56px; }
	.hero__title { font-size: clamp(2.2rem, 10vw, 3rem); }
	.hero__cta { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.hero__cta .btn { width: 100%; padding: 15px 10px; }
	.cur-switch { transform: scale(.92); }
}

/* ============================================================
   Almusbah-style homepage sections (restyled for jewelry)
   ============================================================ */

.container--narrow { max-width: 820px; }
.section--tint { background: var(--champagne); }

/* Counters */
.counters { background: var(--noir); color: var(--champagne); padding-block: clamp(30px, 5vw, 50px); }
.counters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.counter__num { display: block; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--gold-soft); line-height: 1; }
.counter__label { display: block; margin-top: 8px; font-size: .82rem; letter-spacing: .04em; color: rgba(245,235,211,.8); }
@media (max-width: 700px) { .counters__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }

/* Hot grid (5-col like Almusbah) */
.hot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1100px) { .hot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .hot-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* About */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.about__img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-soft); }
.about__body h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.about__body > div { color: var(--muted); line-height: 1.8; }
.about__stats { display: flex; gap: 34px; margin-top: 24px; }
.about__stat b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
.about__stat span { font-size: .82rem; color: var(--muted); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about__media { order: -1; } }

/* Why grid */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-tile { text-align: center; padding: 30px 20px; border: 1px solid rgba(245,235,211,.16); border-radius: var(--radius); transition: border-color .2s ease, transform .2s ease; }
.why-tile:hover { border-color: var(--gold); transform: translateY(-4px); }
.why-tile__icon { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(201,162,39,.12); color: var(--gold-soft); margin-bottom: 16px; }
.why-tile h3 { color: var(--champagne); font-size: 1.15rem; margin-bottom: 8px; }
.why-tile p { color: rgba(245,235,211,.7); font-size: .9rem; margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service { padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.service__num { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); display: block; margin-bottom: 10px; }
.service h3 { font-size: 1.2rem; margin-bottom: 8px; }
.service p { color: var(--muted); margin: 0; font-size: .92rem; }
@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { background-image: url('assets/img/pattern.svg'), linear-gradient(115deg, var(--noir), var(--pine-deep)); background-size: 60px 60px, cover; color: var(--champagne); }
.cta-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: var(--champagne); margin: 0 0 6px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cta-band p { margin: 0; color: rgba(245,235,211,.8); }

/* Gallery masonry */
.gallery-masonry { columns: 4; column-gap: 14px; }
.gallery-item { display: block; margin-bottom: 14px; border-radius: var(--radius); overflow: hidden; break-inside: avoid; }
.gallery-item img { width: 100%; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
@media (max-width: 1000px) { .gallery-masonry { columns: 3; } }
@media (max-width: 700px) { .gallery-masonry { columns: 2; column-gap: 10px; } }

/* Video */
.video-box { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; cursor: pointer; }
.video-box__poster { width: 100%; height: 100%; object-fit: cover; }
.video-box__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--gold); color: var(--noir); font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; transition: transform .2s ease; }
.video-box:hover .video-box__play { transform: scale(1.08); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; }
.faq-item summary { cursor: pointer; padding: 16px 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
/* legacy FAQ text +/- icon removed — the single icon is .faq-item__plus */
.faq-item__a { color: var(--muted); padding-bottom: 16px; line-height: 1.7; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.contact__list { list-style: none; margin: 20px 0 0; padding: 0; }
.contact__list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact__list strong { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.contact__map { min-height: 320px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* Inquiry form */
.alhg-form { display: flex; flex-direction: column; gap: 16px; }
.alhg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alhg-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-soft); font-weight: 600; }
.alhg-form input, .alhg-form textarea { padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(245,235,211,.25); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; font-family: var(--font-body); }
.alhg-form input::placeholder, .alhg-form textarea::placeholder { color: rgba(245,235,211,.4); }
.alhg-form .btn { align-self: start; margin-top: 6px; }
@media (max-width: 640px) { .alhg-form__row { grid-template-columns: 1fr; } }

/* ============ Language welcome popup ============ */
.lang-pop { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(8,28,18,.72); backdrop-filter: blur(4px); padding: 20px; }
.lang-pop.is-open { display: flex; animation: langFade .25s ease; }
@keyframes langFade { from { opacity: 0; } to { opacity: 1; } }
.lang-pop__box { position: relative; background: var(--ivory); border: 1px solid var(--gold); border-radius: 20px; max-width: 440px; width: 100%; padding: 40px 34px 34px; text-align: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); background-image: url('assets/img/pattern.svg'); background-size: 60px 60px; }
.lang-pop__close { position: absolute; top: 16px; inset-inline-end: 18px; background: transparent; border: 0; font-size: 1.2rem; color: var(--muted); cursor: pointer; line-height: 1; }
.lang-pop__close:hover { color: var(--ink); }
.lang-pop__logo { height: 64px; width: auto; margin: 0 auto 16px; display: block; }
.lang-pop__title { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin: 0 0 6px; }
.lang-pop__sub { color: var(--muted); font-size: .9rem; margin: 0 0 26px; }
.lang-pop__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lang-pop__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all .16s ease; }
.lang-pop__btn:hover { border-color: var(--gold); background: var(--champagne); transform: translateY(-2px); }
.lang-pop__btn--es { background: var(--noir); color: var(--champagne); border-color: var(--noir); }
.lang-pop__btn--es:hover { background: var(--coal); color: var(--gold-soft); }
.lang-pop__flag { font-size: 1.3rem; line-height: 1; }
@media (max-width: 420px) { .lang-pop__btns { grid-template-columns: 1fr; } }

/* Hide GTranslate's own floating widget — we drive it from the popup/header */
.gtranslate_wrapper { position: absolute !important; left: -9999px !important; height: 0 !important; overflow: hidden !important; }

/* ============================================================
   v2.0.2 — reseñas Google, formulario 3 pasos, banda de
   confianza reubicada, imágenes de producto nítidas + hover.
   (Este bloque va al final: gana sobre reglas anteriores.)
   ============================================================ */

/* ── Banda de confianza (ahora mitad de página, antes del CTA) ── */
.trust { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__grid { padding-block: 30px; }
.trust__item strong { font-weight: 700; }

/* ── Tarjeta de producto: imagen a sangre (como antes) + hover premium ── */
.prod-card { transition: transform .28s ease, box-shadow .28s ease; }
.prod-card__img {
	aspect-ratio: 1;
	background: var(--champagne);
	overflow: hidden;
	position: relative;
	display: block;
}
.prod-card__img img,
.prod-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;           /* llena la caja, a sangre (como en la versión previa) */
	transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s ease;
	image-rendering: -webkit-optimize-contrast; /* nitidez extra al escalar */
	backface-visibility: hidden;
}
.prod-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -22px rgba(12,39,26,.45); }
.prod-card:hover .prod-card__img img,
.prod-card:hover .prod-card__photo { transform: scale(1.07); filter: saturate(1.05); }

/* Barrido de brillo dorado al pasar el cursor */
.prod-card__shine {
	position: absolute; inset: 0; pointer-events: none; z-index: 2;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
	transform: translateX(-120%);
	transition: transform .7s ease;
}
.prod-card:hover .prod-card__shine { transform: translateX(120%); }

/* Aro dorado sutil al pasar el cursor */
.prod-card__img::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .3s ease; border-radius: inherit;
}
.prod-card:hover .prod-card__img::after { box-shadow: inset 0 0 0 2px var(--gold); }

/* ── Reseñas estilo Google ── */
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.reviews__badge { display: inline-flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; box-shadow: 0 10px 24px -18px rgba(12,39,26,.4); }
.reviews__badge > div { display: flex; flex-direction: column; line-height: 1.15; }
.reviews__badge strong { font-size: 1.35rem; color: var(--ink); font-family: var(--font-body); }
.reviews__badge span { font-size: .74rem; color: var(--muted); }
.reviews__note { display: inline-block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); background: var(--champagne); border: 1px dashed var(--gold); border-radius: 999px; padding: 7px 16px; margin: 0 0 22px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .25s ease, transform .25s ease; }
.review-card:hover { box-shadow: 0 20px 40px -26px rgba(12,39,26,.4); transform: translateY(-3px); }
.review-card.is-hidden { display: none; }
.review-card__top { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.05rem; flex: 0 0 auto; }
.review-card__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.review-card__id strong { color: var(--ink); font-size: .95rem; }
.review-card__id span { color: var(--muted); font-size: .78rem; }
.review-card__top .ggl-g { margin-inline-start: auto; flex: 0 0 auto; }
.review-card__stars { color: #fbbc05; letter-spacing: 2px; font-size: 1.02rem; }
.review-card__text { color: var(--ink); font-size: .95rem; line-height: 1.6; margin: 0; }
.reviews__embed { min-height: 40px; }
/* Galería — cargar más */
.gallery-item.is-hidden { display: none; }
.gallery__more { text-align: center; margin-top: 26px; }
.gallery__more .btn { min-width: 230px; }
@media (max-width: 980px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .reviews__grid { grid-template-columns: 1fr; } .reviews__head { align-items: flex-start; } }

/* ── Formulario en 3 pasos (asistente) ── */
.alhg-steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: none; position: relative; }
.alhg-steps__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; }
.alhg-steps__item span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: rgba(245,235,211,.12); color: var(--gold-soft); border: 1px solid rgba(245,235,211,.3); transition: all .2s ease; }
.alhg-steps__item em { font-style: normal; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(245,235,211,.6); }
.alhg-steps__item.is-active span { background: var(--gold); color: var(--noir); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(198,160,91,.18); }
.alhg-steps__item.is-active em { color: var(--gold-soft); }
.alhg-steps__item.is-done span { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }
/* línea conectora */
.alhg-steps__item::before { content: ""; position: absolute; top: 20px; inset-inline-start: -50%; width: 100%; height: 2px; background: rgba(245,235,211,.2); z-index: -1; }
.alhg-steps__item:first-child::before { display: none; }
.alhg-steps__item.is-active ~ .alhg-steps__item::before,
.alhg-steps__item.is-done::before { }
.alhg-step { display: none; flex-direction: column; gap: 16px; animation: alhgStepIn .3s ease; }
.alhg-step.is-active { display: flex; }
/* Sin JS: se muestran todos los campos y un solo botón enviar */
.alhg-wizard:not(.is-ready) .alhg-step { display: flex; }
.alhg-wizard:not(.is-ready) .alhg-steps { display: none; }
.alhg-wizard:not(.is-ready) [data-wizard-next],
.alhg-wizard:not(.is-ready) [data-wizard-back] { display: none; }
.alhg-wizard:not(.is-ready) [data-wizard-submit] { display: inline-flex; }
@keyframes alhgStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.alhg-wizard__nav { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.alhg-wizard__nav .btn { min-width: 150px; }
.btn--ghost-gold { background: transparent; color: var(--gold-soft); border-color: rgba(245,235,211,.4); }
.btn--ghost-gold:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.alhg-form input.is-invalid, .alhg-form textarea.is-invalid { border-color: #e0736a !important; box-shadow: 0 0 0 3px rgba(224,115,106,.18); }
/* Paso 3 — resumen */
.alhg-review__hint { color: var(--gold-soft); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.alhg-review dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.alhg-review dl > div { border-bottom: 1px solid rgba(245,235,211,.15); padding-bottom: 12px; }
.alhg-review dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,235,211,.55); margin-bottom: 4px; }
.alhg-review dd { margin: 0; color: #fff; font-size: 1rem; word-break: break-word; white-space: pre-wrap; }
/* Selects del formulario (mismo estilo que los inputs) */
.alhg-form select {
	padding: 13px 16px; border-radius: var(--radius-sm);
	border: 1px solid rgba(245,235,211,.25); background: rgba(255,255,255,.06);
	color: #fff; font-size: 1rem; font-family: var(--font-body);
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E4C878' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; padding-inline-end: 40px;
	cursor: pointer;
}
.alhg-form select option { color: #14261C; background: #fff; }

/* ============================================================
   v1.0.1 — cabecera: Mi Cuenta (izq), Ofertas (der),
   selector USD/COP legible sobre la cabecera oscura.
   (Bloque final: gana sobre reglas anteriores.)
   ============================================================ */

/* Selector de moneda — claro y con buen contraste en la cabecera oscura */
.site-header .cur-switch {
	border: 1px solid rgba(198,160,91,.55);
	background: rgba(255,255,255,.08);
	border-radius: 999px; overflow: hidden;
}
.site-header .cur-switch a {
	padding: 7px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
	color: #F5EBD3; opacity: .82; transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.site-header .cur-switch a:hover { opacity: 1; color: #fff; background: rgba(198,160,91,.18); }
.site-header .cur-switch a.is-active { background: var(--gold); color: var(--noir); opacity: 1; }

/* Mi Cuenta — icono al extremo derecho, hover igual que los demás icon-btn */
.site-header .account-btn { text-decoration: none; }
.site-header .account-btn:hover,
.site-header .account-btn:focus { background: rgba(198,160,91,.18); color: var(--gold-soft); text-decoration: none; }
.site-header .account-btn svg { display: block; }

/* Ofertas es un enlace de menú normal (hereda .primary-nav a) */

/* ============================================================
   Preloader animado (primera carga) + selector de idioma en el pie
   ============================================================ */
.alhg-loaded #alhg-preloader { display: none; }
.alhg-preloader {
	position: fixed; inset: 0; z-index: 9999;
	background: radial-gradient(120% 120% at 50% 40%, var(--pine-deep, #0F3222), var(--noir));
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
	opacity: 1; transition: opacity .55s ease, visibility .55s ease;
}
.alhg-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.alhg-preloader__badge { position: relative; width: 108px; height: 108px; display: grid; place-items: center; }
.alhg-preloader__ring {
	position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid rgba(198,160,91,.18);
	border-top-color: var(--gold); border-right-color: var(--gold);
	animation: alhgSpin 1s linear infinite;
}
.alhg-preloader__logo {
	width: 66px; height: 66px; object-fit: contain;
	animation: alhgPulse 1.6s ease-in-out infinite;
}
.alhg-preloader__word {
	font-family: var(--font-display); letter-spacing: .34em; text-indent: .34em;
	color: var(--gold-soft); font-size: 1.05rem; text-transform: uppercase;
	opacity: 0; animation: alhgFadeUp .8s ease forwards .15s;
}
@keyframes alhgSpin { to { transform: rotate(360deg); } }
@keyframes alhgPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes alhgFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: .85; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.alhg-preloader__ring, .alhg-preloader__logo, .alhg-preloader__word { animation: none; }
}

/* Selector de idioma en el pie */
.footer__lang { display: inline-flex; align-items: center; gap: 8px; color: rgba(245,235,211,.7); }
.footer__lang svg { color: var(--gold); flex: none; }
.footer__lang select {
	appearance: none; -webkit-appearance: none;
	background: rgba(255,255,255,.06); color: #F5EBD3;
	border: 1px solid rgba(245,235,211,.22); border-radius: 999px;
	padding: 6px 30px 6px 14px; font-size: .8rem; font-weight: 600; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C6A05B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
	transition: border-color .15s ease, background-color .15s ease;
}
.footer__lang select:hover { border-color: var(--gold); background-color: rgba(255,255,255,.1); }
.footer__lang select option { color: #0C271A; }

/* Ocultar la barra superior de Google Translate si aparece */
.goog-te-banner-frame, #goog-gt-tt, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

/* ============================================================
   Menú Tienda simple (2 líneas) · cabecera móvil tipo Almusbah ·
   pie (idioma + volver arriba a la derecha) · carrito móvil
   ============================================================ */

/* Desplegable simple bajo "Tienda" (IP / Red · HD Analógico) */
.has-sub { position: relative; }
.submenu {
	position: absolute; top: 100%; inset-inline-start: 0; min-width: 210px;
	list-style: none; margin: 0; padding: 8px; z-index: 600;
	background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--gold);
	border-radius: 0 0 12px 12px; box-shadow: 0 24px 48px -24px rgba(8,28,18,.35);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu li { margin: 0; }
.submenu a { display: block; padding: 11px 16px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.submenu a:hover { background: var(--champagne); color: var(--gold); }

/* Todos los iconos de la cabecera: hover coherente sobre fondo oscuro */
.site-header .icon-btn:hover,
.site-header .icon-btn:focus { background: rgba(198,160,91,.18); color: var(--gold-soft); }

/* ── Cabecera móvil: hamburguesa izq · logo centro · moneda+buscar+carrito der ── */
@media (max-width: 1100px) {
	.header-bar { grid-template-columns: 1fr auto 1fr; gap: 8px; }
	.primary-nav--left { display: none; }
	.menu-toggle { display: grid; justify-self: start; }
	.brand { justify-self: center; }
	.brand--logo-only .brand__mark { width: 132px; height: auto; max-height: 58px; }
	.primary-nav--right { gap: 6px; justify-self: end; }
	/* Moneda visible en la cabecera; la cuenta vive en el cajón */
	.site-header .primary-nav--right .cur-switch { display: inline-flex; }
	.site-header .primary-nav--right .account-btn { display: none; }
	.site-header .cur-switch a { padding: 5px 9px; font-size: .72rem; }
}
@media (max-width: 430px) {
	.brand--logo-only .brand__mark { width: 108px; }
	.primary-nav--right { gap: 2px; }
	.site-header .cur-switch a { padding: 5px 7px; font-size: .66rem; }
	.header-bar .icon-btn { width: 38px; height: 38px; }
}

/* Selector de moneda dentro del cajón móvil */
.drawer-cur { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 4px; }
.drawer-cur__label { color: var(--muted); font-weight: 600; font-size: .9rem; }
.mobile-drawer .cur-switch { background: #fff; }

/* ── Pie: legal/copy a la izquierda · idioma + volver arriba a la derecha ── */
.footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; flex-wrap: wrap; gap: 16px; }
.footer__bottom-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.footer__bottom-left .footer__legal { justify-content: flex-start; }
.footer__bottom-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
	.footer__bottom { flex-direction: column; align-items: center; text-align: center; }
	.footer__bottom-left { align-items: center; }
	.footer__bottom-left .footer__legal { justify-content: center; }
	.footer__bottom-right { justify-content: center; }
}

/* ── Carrito en móvil: panel redondeado desde arriba (estilo Almusbah) ── */
@media (max-width: 720px) {
	.cart-drawer {
		top: 12px; bottom: auto; inset-inline: 12px; width: auto;
		max-height: 82vh; border-radius: 18px; overflow: hidden;
		transform: translateY(-130%);
		box-shadow: 0 34px 60px -20px rgba(8,28,18,.55);
	}
	[dir="rtl"] .cart-drawer { transform: translateY(-130%); }
	.cart-drawer.is-open { transform: none; }
	.cart-drawer__head { padding: 16px 20px; font-size: 1.15rem; }
	.cart-drawer__body { max-height: calc(82vh - 60px); }
	.cart-drawer .woocommerce-mini-cart__empty-message { padding: 34px 0; }
}

/* ============================================================
   Cuenta (login/registro con OTP) · FAQ con pestañas ·
   botón de cuenta móvil · icono de cuenta redondo
   ============================================================ */

/* Icono de cuenta en la cabecera: círculo perfecto */
.site-header .account-btn {
	width: 42px; height: 42px; padding: 0; line-height: 0; box-sizing: border-box;
	display: grid; place-items: center; border-radius: 50%;
}
.site-header .account-btn svg { display: block; }

/* Botón de cuenta en el cajón móvil (estilo Almusbah, dorado) */
.drawer-account {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin: 18px 24px 26px; padding: 15px 18px; border-radius: 999px;
	background: var(--gold); color: var(--noir); font-weight: 700; font-size: 1rem; letter-spacing: .02em;
	box-shadow: 0 14px 26px -14px rgba(198,160,91,.7);
}
.drawer-account:hover { background: var(--gold-soft); color: var(--noir); }

/* ── FAQ con pestañas ── */
.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 32px; }
.faq-tab {
	display: flex; flex-direction: column; align-items: center; gap: 10px; width: 152px; padding: 18px 12px;
	background: #fff; border: 1px solid var(--line); border-radius: 16px; cursor: pointer;
	color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: .85rem; line-height: 1.25;
	transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.faq-tab__ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--champagne); color: var(--gold); transition: background .18s ease, color .18s ease; }
.faq-tab__label { text-align: center; }
.faq-tab:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.faq-tab.is-active { background: var(--noir); border-color: var(--noir); color: #fff; }
.faq-tab.is-active .faq-tab__ic { background: var(--gold); color: var(--noir); }

.faq-panel { animation: alhgFadeUp .35s ease both; }
.faq-panel[hidden] { display: none; }
.faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin-inline: auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 24px; transition: box-shadow .18s ease, border-color .18s ease; }
.faq-item[open] { border-color: rgba(198,160,91,.5); box-shadow: 0 20px 40px -30px rgba(8,28,18,.4); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; color: var(--ink); }
.faq-item__plus { position: relative; width: 20px; height: 20px; flex: none; }
.faq-item__plus::before, .faq-item__plus::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.faq-item__plus::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq-item__plus::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq-item[open] .faq-item__plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item__a { padding: 0 0 22px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.faq-item[open] .faq-item__a { animation: alhgFadeUp .3s ease both; }
.faq-item__a p { margin: 0 0 10px; }
.faq-item__a p:last-child { margin-bottom: 0; }

/* ── Tarjeta de cuenta: login / registro ── */
.alhg-auth { max-width: 520px; margin: 8px auto 44px; }
.alhg-auth__card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 12px; box-shadow: 0 44px 90px -55px rgba(8,28,18,.55); }
.alhg-auth__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--champagne); border-radius: 14px; padding: 5px; margin-bottom: 24px; }
.alhg-auth__tab { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; padding: 13px; font-family: var(--font-body); font-weight: 700; font-size: .98rem; color: var(--muted); border-radius: 11px; transition: color .2s ease; }
.alhg-auth__tab.is-active { color: #fff; }
.alhg-auth__slider { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); background: var(--noir); border-radius: 11px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.alhg-auth[data-active="register"] .alhg-auth__slider { transform: translateX(100%); }
.alhg-auth__panel { padding: 6px 20px 20px; animation: alhgFadeUp .3s ease both; }
.alhg-auth__panel[hidden] { display: none; }
.alhg-auth__title { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); margin: 0 0 4px; text-align: center; }
.alhg-auth__sub { color: var(--muted); text-align: center; margin: 0 0 22px; font-size: .95rem; }
.alhg-auth__switch { text-align: center; margin-top: 18px; color: var(--muted); font-size: .9rem; }

/* Campos y botones */
.alhg-field { position: relative; margin: 0 0 16px; }
.alhg-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.alhg-field input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 1rem; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.alhg-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,160,91,.18); background: #fff; }
.alhg-field--pass input { padding-right: 46px; }
.alhg-eye { position: absolute; right: 8px; bottom: 6px; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.alhg-eye::before { content: ""; display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.alhg-eye.is-on::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10 10 0 0 1 12 20C5 20 1 12 1 12a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c7 0 11 8 11 8a18 18 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10 10 0 0 1 12 20C5 20 1 12 1 12a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c7 0 11 8 11 8a18 18 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E"); }

.alhg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 15px 20px; border: 0; border-radius: 12px; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1rem; transition: transform .12s ease, background .18s ease, box-shadow .18s ease; }
.alhg-btn--gold { background: var(--gold); color: var(--noir); box-shadow: 0 14px 26px -14px rgba(198,160,91,.75); }
.alhg-btn--gold:hover { background: var(--gold-soft); }
.alhg-btn:active { transform: translateY(1px); }
.alhg-btn.is-busy { opacity: .8; cursor: default; }
.alhg-btn.is-busy .alhg-btn__label::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid rgba(12,39,26,.3); border-top-color: var(--noir); border-radius: 50%; vertical-align: -2px; animation: alhgSpin .7s linear infinite; }

.alhg-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; flex-wrap: wrap; }
.alhg-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.alhg-check input { accent-color: var(--noir); width: 16px; height: 16px; }
.alhg-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold); font-weight: 600; font-size: .9rem; text-decoration: none; font-family: var(--font-body); }
.alhg-link:hover { text-decoration: underline; }

/* Pasos del registro (OTP) */
.alhg-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 22px; }
.alhg-steps__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); transition: background .25s ease, transform .25s ease; }
.alhg-steps__dot.is-active { background: var(--gold); transform: scale(1.15); }
.alhg-steps__bar { width: 44px; height: 2px; background: var(--line); }
.alhg-reg { position: relative; }
.otp-step { opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease; }
.otp-step.is-active { opacity: 1; transform: none; }
.otp-step[hidden] { display: none; }
.alhg-otp-input { text-align: center; font-size: 1.5rem; letter-spacing: .5em; font-weight: 700; }
.alhg-reg__to { text-align: center; color: var(--muted); font-size: .92rem; margin: 0 0 14px; }
.alhg-reg__to strong { color: var(--ink); }
.alhg-reg__row { display: flex; justify-content: space-between; margin-top: 12px; }
.alhg-reg__msg { display: none; margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; font-size: .9rem; text-align: center; }
.alhg-reg__msg.is-ok { display: block; background: rgba(29,120,80,.1); color: #1c6b48; }
.alhg-reg__msg.is-error { display: block; background: rgba(180,50,40,.09); color: #a23b2f; }
.alhg-reg.is-done { opacity: .55; pointer-events: none; }

/* ── My Account (sesión iniciada) ── */
.woocommerce-account .woocommerce { max-width: 1080px; margin-inline: auto; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 13px 16px; border-radius: 12px; color: var(--ink); font-weight: 600; border: 1px solid var(--line); background: #fff; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.woocommerce-MyAccount-navigation li a:hover { border-color: var(--gold); color: var(--gold); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--noir); color: #fff; border-color: var(--noir); }
.woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--gold); }
@media (max-width: 780px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	.alhg-auth__panel { padding: 6px 6px 14px; }
}

/* ============================================================
   Ajustes: tarjeta de cuenta al ejemplo · cajón (categorías
   primero) · botón cerrar grande · moneda en cabecera móvil
   ============================================================ */

/* Tarjeta de cuenta como el ejemplo: título dorado + botón verde */
.alhg-auth__title { color: var(--gold); margin-bottom: 18px; }
.alhg-btn--green { background: var(--noir); color: #fff; box-shadow: 0 14px 26px -14px rgba(12,39,26,.55); }
.alhg-btn--green:hover { background: #123726; }
.alhg-btn--green.is-busy .alhg-btn__label::after { border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; }
.alhg-auth__row { justify-content: flex-start; gap: 20px; }

/* Botón cerrar del cajón (más grande y fácil de tocar) */
.drawer-close { width: 46px; height: 46px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--ink); border-radius: 50%; transition: background .15s ease, color .15s ease; }
.drawer-close:hover { background: var(--champagne); color: var(--gold); }

/* Cajón móvil: categorías primero (tarjetas) → resto del menú → cuenta */
.drawer-cats { margin: 6px 0 18px; }
.drawer-cats__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.drawer-cats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drawer-cat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 108px; padding: 16px 14px; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(150deg, #123524, #0C271A); border: 1px solid rgba(198,160,91,.35); transition: border-color .16s ease, transform .16s ease; }
.drawer-cat--oro-18k { background: linear-gradient(150deg, #241a09, #0C271A); }
.drawer-cat:hover { border-color: var(--gold); transform: translateY(-2px); }
.drawer-cat__ic { position: absolute; top: 12px; right: 12px; color: var(--gold); opacity: .9; }
.drawer-cat__name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.15; color: #fff; }
.drawer-cat__go { font-size: .72rem; font-weight: 600; color: var(--gold-soft); }
.drawer-nav { margin-top: 4px; }
.drawer-nav a { display: block; padding: 13px 4px; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.drawer-nav a:hover { color: var(--gold); }

/* ============================================================
   FAQ simple (texto grande y en negrita) · My Account layout
   robusto (2 columnas) · aislar login del formulario de contacto
   ============================================================ */

/* FAQ: preguntas más grandes y en negrita */
.faq-item__q { font-size: 1.28rem; font-weight: 800; }
.faq-item__a { font-size: 1.04rem; }
@media (max-width: 640px) { .faq-item__q { font-size: 1.12rem; } }

/* My Account (sesión iniciada): 2 columnas fiables, sin depender de :has */
.woocommerce-account.logged-in .woocommerce {
	display: grid !important; grid-template-columns: 240px 1fr; gap: 26px;
	align-items: start; max-width: 1040px; margin: 0 auto; text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
@media (max-width: 780px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr !important; }
}

/* La tarjeta de login/registro no debe heredar estilos del formulario de contacto */
.alhg-auth-form .alhg-field input { background: var(--paper); color: var(--ink); }
.alhg-auth-form label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fix: enlaces del desplegable "Tienda" legibles (el color claro de la
   cabecera oscura tapaba el texto oscuro del menú) */
.site-header .submenu a { color: var(--ink); }
.site-header .submenu a:hover { color: var(--gold); background: var(--champagne); }

/* ── Garantía: icono en el menú + submenú Tienda en el cajón ── */
.nav-warranty a .nav-shield { color: var(--gold); }
.drawer-nav a .nav-shield { color: var(--gold); margin-right: 8px; vertical-align: -4px; }
.drawer-sub { display: flex; flex-direction: column; margin: 0 0 0 4px; padding: 2px 0 6px 14px; border-left: 2px solid var(--line); }
.drawer-sub a { display: block; padding: 9px 4px; color: var(--muted); font-weight: 600; font-size: .92rem; border-bottom: 0; }
.drawer-sub a:hover { color: var(--gold); }

/* ── Sección Garantía ── */
.warranty { background: var(--ivory); }
.warranty__intro { max-width: 720px; margin: 14px auto 0; color: var(--muted); font-size: 1.05rem; }
.warranty__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
.warranty-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-soft); }
.warranty-card__ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--champagne); color: var(--gold-deep); margin-bottom: 16px; }
.warranty-card h3 { font-family: var(--font-display); font-size: 1.42rem; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.warranty-card > p { color: var(--muted); margin: 0 0 14px; }
.warranty__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.warranty__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-weight: 500; }
.warranty__list .wcheck { color: var(--gold-deep); flex: none; margin-top: 3px; }
.warranty-card--laminado { border-color: rgba(198,160,91,.55); box-shadow: 0 18px 44px -24px rgba(169,132,63,.55); }
.warranty-card--laminado .warranty-card__ic { background: var(--gold); color: #fff; }
.warranty__badge { position: absolute; top: 22px; right: 22px; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(150deg, var(--gold-soft), var(--gold-deep)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 10px 22px -8px rgba(169,132,63,.75); }
.warranty__badge strong { font-family: var(--font-display); font-size: 1.7rem; }
.warranty__badge em { font-style: normal; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
.warranty__care { margin-top: clamp(22px, 3.2vw, 38px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.warranty__care-title { font-family: var(--font-display); text-align: center; font-size: 1.5rem; margin: 0 0 22px; color: var(--ink); }
.warranty__care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.care-item { display: flex; gap: 14px; align-items: flex-start; }
.care-item__ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--champagne); color: var(--gold-deep); }
.care-item p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.55; }
@media (max-width: 860px) { .warranty__grid { grid-template-columns: 1fr; } .warranty__care-grid { grid-template-columns: 1fr; gap: 16px; } .warranty__badge { top: 18px; right: 18px; width: 58px; height: 58px; } }


/* ============ v1.0.1 — barra de categorías (chips) ============ */

.cat-chips {
	background: var(--ivory, #FAF7F1);
	border-bottom: 1px solid rgba(20, 38, 28, .08);
	padding: 14px 0 12px;
	position: relative;
	z-index: 2;
}

.cat-chips .container {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cat-chips__label {
	flex: 0 0 auto;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(20, 38, 28, .55);
	white-space: nowrap;
}

.cat-chips__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.cat-chip {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid rgba(198, 160, 91, .40);
	background: #fff;
	color: var(--ink, #14261C);
	font-size: .92rem;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.cat-chip:hover,
.cat-chip:focus-visible {
	border-color: var(--gold, #C6A05B);
	background: rgba(198, 160, 91, .12);
}

.cat-chip.is-active {
	background: var(--noir, #0C271A);
	border-color: var(--noir, #0C271A);
	color: var(--gold, #C6A05B);
}

/* Móvil: fila deslizable en vez de envolver */
@media (max-width: 860px) {
	.cat-chips { padding: 12px 0 10px; }

	.cat-chips .container {
		display: block;
		padding-right: 0;
	}

	.cat-chips__label {
		display: block;
		margin: 0 0 8px;
	}

	.cat-chips__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
		/* deja que los chips lleguen al borde de la pantalla */
		margin-right: -16px;
		padding-right: 16px;
	}

	.cat-chips__list::-webkit-scrollbar { display: none; }

	.cat-chips__list > li { scroll-snap-align: start; }

	.cat-chip {
		padding: 10px 18px;
		font-size: .95rem;
	}
}

/* ============ v1.0.1 — línea agrupada por categoría ============ */

.line-group { margin: 0 0 clamp(38px, 5vw, 58px); }

.line-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.line-group__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.15;
}

.line-group__title::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--gold);
	vertical-align: middle;
	margin-right: 12px;
}

.line-group__all {
	color: var(--gold);
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .18s ease;
}

.line-group__all:hover { opacity: .72; }

.line-group__flat {
	text-align: center;
	margin: 8px 0 40px;
}

.line-group__flat a {
	color: rgba(20, 38, 28, .6);
	font-size: .92rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.line-group__flat a:hover { color: var(--gold); }

@media (max-width: 600px) {
	.line-group__head { margin-bottom: 14px; }
	.line-group__title::before { width: 18px; margin-right: 9px; }
	.line-group__all { font-size: .88rem; }
}

/* ============ v1.0.1 — beneficios de comprar con nosotros ============ */

.aff-head {
	text-align: center;
	padding-top: clamp(38px, 5vw, 62px);
}

.aff-head__title {
	margin: 0;
	color: var(--gold);
	font-size: clamp(1.65rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: .01em;
}

.aff-head__title span {
	display: block;
	color: var(--champagne);
	font-size: .82em;
	margin-top: 4px;
}

.aff-head__rule {
	display: block;
	width: 90px;
	height: 1px;
	margin: 18px auto 0;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.aff-benefits {
	list-style: none;
	margin: clamp(26px, 4vw, 40px) auto 0;
	padding: 0;
	max-width: 900px;
	display: grid;
	gap: 0;
}

.aff-benefit {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 4px;
	border-bottom: 1px solid rgba(201, 162, 39, .22);
}

.aff-benefit:last-child { border-bottom: 0; }

.aff-benefit__ic {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 39, .55);
	color: var(--gold);
	background: rgba(201, 162, 39, .07);
}

.aff-benefit__ic svg { width: 26px; height: 26px; }

.aff-benefit__txt {
	color: var(--champagne);
	font-size: clamp(.98rem, 1.5vw, 1.08rem);
	line-height: 1.45;
}

.aff-benefit__txt::before {
	content: "★";
	color: var(--gold);
	font-size: .72em;
	margin-right: 10px;
	vertical-align: 1px;
}

/* La franja del CTA queda debajo de los beneficios */
.aff-band .aff-band__inner {
	border-top: 1px solid rgba(201, 162, 39, .25);
	margin-top: clamp(26px, 4vw, 40px);
}

.aff-band h3 {
	color: var(--champagne);
	margin: 0 0 6px;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

@media (max-width: 600px) {
	.aff-benefit { gap: 13px; padding: 13px 2px; }
	.aff-benefit__ic { width: 44px; height: 44px; }
	.aff-benefit__ic svg { width: 22px; height: 22px; }
	.aff-benefit__txt { font-size: .96rem; }
}

/* ============ v1.0.1 — Garantía (contenido oficial) ============ */

.warranty__badge--life {
	display: grid;
	place-items: center;
	text-align: center;
	line-height: 1.1;
}

.warranty__badge--life em {
	font-style: normal;
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 6px;
}

.warranty__list li { display: flex; align-items: flex-start; gap: 10px; }

.warranty__li-ic {
	flex: 0 0 auto;
	color: var(--gold);
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.warranty__life { font-size: 1.05rem; }
.warranty__life strong { color: var(--gold); }

.warranty__six {
	margin-top: clamp(26px, 4vw, 40px);
	padding-top: clamp(22px, 3.5vw, 32px);
	border-top: 1px solid rgba(201, 162, 39, .28);
}

.warranty__six-title {
	margin: 0 0 18px;
	text-align: center;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 600;
}

.warranty__six-n {
	color: var(--gold);
	font-size: 1.25em;
	font-weight: 700;
}

.warranty__six-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 30px;
}

.warranty__six-grid li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .97rem;
}

.warranty__six-ic {
	flex: 0 0 auto;
	color: var(--gold);
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
}

.warranty__note {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	max-width: 760px;
	margin: clamp(24px, 3.5vw, 34px) auto 0;
	padding: 15px 18px;
	border: 1px solid rgba(201, 162, 39, .35);
	border-radius: var(--radius-sm);
	background: rgba(201, 162, 39, .06);
	font-size: .93rem;
	line-height: 1.5;
}

.warranty__note-ic { flex: 0 0 auto; color: var(--gold); }

.warranty__tag {
	text-align: center;
	margin: clamp(28px, 4vw, 42px) 0 0;
	color: var(--gold);
	font-size: .82rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.warranty__six-grid { grid-template-columns: 1fr; gap: 12px; }
	.warranty__tag { letter-spacing: .2em; font-size: .74rem; }
}

/* ============ v1.0.1 — Conócenos (3 puntos) ============ */

.about__points {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.about-point {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}

.about-point:last-child { border-bottom: 0; }

.about-point__ic {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 39, .5);
	color: var(--gold);
	background: rgba(201, 162, 39, .06);
}

.about-point__ic svg { width: 23px; height: 23px; }

.about-point p {
	margin: 0;
	font-size: .97rem;
	line-height: 1.55;
}

@media (max-width: 600px) {
	.about-point { gap: 12px; padding: 13px 0; }
	.about-point__ic { width: 40px; height: 40px; }
	.about-point__ic svg { width: 20px; height: 20px; }
	.about-point p { font-size: .93rem; }
}

/* ============ v1.0.1 — Formulario "Quiero ser aliado" ============ */

.aff-form-wrap {
	max-width: 720px;
	margin: 4px auto clamp(38px, 5vw, 58px);
	padding: clamp(22px, 3.5vw, 32px);
	border: 1px solid rgba(201, 162, 39, .35);
	border-radius: var(--radius);
	background: rgba(0, 0, 0, .22);
}

.aff-form-wrap[hidden] { display: none; }

.aff-form__ok {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	background: rgba(86, 168, 120, .16);
	border: 1px solid rgba(86, 168, 120, .5);
	color: #d9f2e2;
	font-size: .95rem;
}

.aff-form label {
	color: var(--champagne);
	font-size: .92rem;
}

.aff-form input[type="text"],
.aff-form input[type="tel"] {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(201, 162, 39, .4);
	background: rgba(255, 255, 255, .06);
	color: var(--champagne);
	font: inherit;
}

.aff-form input::placeholder { color: rgba(245, 235, 211, .45); }

.aff-form input:focus-visible {
	outline: none;
	border-color: var(--gold);
	background: rgba(255, 255, 255, .1);
}

.aff-form .alhg-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.aff-tiers {
	border: 0;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.aff-tiers legend {
	padding: 0;
	margin-bottom: 12px;
	color: var(--gold);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.aff-tier { display: block; cursor: pointer; }

.aff-tier input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.aff-tier__box {
	display: block;
	padding: 15px 18px 15px 48px;
	border: 1px solid rgba(201, 162, 39, .38);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .04);
	position: relative;
	transition: border-color .18s ease, background-color .18s ease;
}

.aff-tier__box::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 39, .7);
	transition: box-shadow .18s ease, background-color .18s ease;
}

.aff-tier input:checked + .aff-tier__box {
	border-color: var(--gold);
	background: rgba(201, 162, 39, .13);
}

.aff-tier input:checked + .aff-tier__box::before {
	background: var(--gold);
	box-shadow: inset 0 0 0 3px rgba(12, 39, 26, .95);
}

.aff-tier input:focus-visible + .aff-tier__box {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.aff-tier__name {
	display: block;
	color: var(--champagne);
	font-weight: 600;
	font-size: 1rem;
}

.aff-tier__amt {
	display: block;
	margin-top: 3px;
	color: var(--gold);
	font-size: .92rem;
}

.aff-form__hint {
	margin: 16px 0 0;
	color: rgba(245, 235, 211, .78);
	font-size: .9rem;
	line-height: 1.5;
	font-style: italic;
}

.aff-form__send { margin-top: 20px; }

@media (max-width: 600px) {
	.aff-form .alhg-form__row { grid-template-columns: 1fr; gap: 14px; }
	.aff-form__send { width: 100%; }
}

/* ============ v1.0.1 — Mi cuenta: 2 columnas en paralelo ============ */
/*
 * El problema: WooCommerce imprime un <div class="woocommerce-notices-wrapper">
 * ANTES del menú. Como es el primer hijo del grid, se quedaba con la columna 1,
 * empujaba el menú a la columna ancha y mandaba el contenido a la fila de abajo.
 * Por eso el menú salía centrado y ancho, y el contenido angosto a la izquierda.
 *
 * Solución: colocar cada pieza en su celda de forma explícita, así da igual
 * cuántos elementos extra meta WooCommerce.
 */

.woocommerce-account.logged-in .woocommerce {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	max-width: 1040px;
	margin: 0 auto;
	text-align: left;
}

/* Los avisos ocupan todo el ancho, arriba de las dos columnas. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}

/* Menú a la izquierda, contenido a la derecha — siempre. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 2;
}

.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
}

/* El contenido ya no se queda angosto */
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content p { max-width: 62ch; }

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Título de la página */
.woocommerce-account .entry-title,
.woocommerce-account .page-title {
	max-width: 1040px;
	margin: 0 auto 22px;
	text-align: left;
}

@media (max-width: 860px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content { padding: 22px 20px; }
}

/* ============ v1.0.1 — páginas hechas con Elementor ============ */
/*
 * Las secciones del tema ya traen su propio ancho, su fondo y su espaciado
 * interno. Elementor, por su parte, le pone a cada contenedor un padding y un
 * "gap" por defecto — por eso aparecían franjas claras entre secciones y unos
 * bordes a los lados. Aquí se anula ese espaciado SOLO donde va una sección
 * del tema, sin tocar los contenedores que el cliente agregue por su cuenta.
 */

.alhg-elementor-page { display: block; overflow-x: clip; }

/* Contenedores (Elementor 3.16+) y secciones/columnas antiguas: sin aire extra */
.alhg-elementor-page > .e-con,
.alhg-elementor-page > .elementor > .e-con,
.alhg-elementor-page .elementor-section,
.alhg-elementor-page .elementor-column,
.alhg-elementor-page .elementor-widget-wrap {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
}

/* El "inner" del contenedor boxed también recorta: lo soltamos */
.alhg-elementor-page .e-con > .e-con-inner {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
}

/* Variables de Elementor que fijan el padding del contenedor */
.alhg-elementor-page .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--content-width: 100%;
}

/* El widget en sí, a sangre completa */
.elementor-widget-alhg_section,
.elementor-widget-alhg_section > .elementor-widget-container {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Cada sección conserva su propio padding interno: no lo tocamos */
.elementor-widget-alhg_section > .elementor-widget-container > section {
	margin-inline: 0;
}

/* Elementor mete un margen inferior a todos los widgets: fuera */
.alhg-elementor-page .elementor-widget:not(:last-child) { margin-bottom: 0; }
.alhg-elementor-page .elementor-element { --widgets-spacing: 0px 0px; }

/* En el editor, que las secciones se puedan seleccionar cómodamente. */
.elementor-editor-active .elementor-widget-alhg_section { min-height: 40px; }

/* ============ v1.0.1 — carrusel de productos ============ */

.carrusel { position: relative; }

.carrusel__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(46%, 1fr);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 10px;
	/* deja que las tarjetas lleguen al borde en móvil */
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { scroll-snap-align: start; }

/* SWAN adaptive-carousel slides-to-show, read off the live page:
   xs/sm = 2, md/lg/xl = 6 */
@media (min-width: 768px) {
	.carrusel__pista { grid-auto-columns: minmax(0, calc(33.333% - 12px)); margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1024px) {
	.carrusel__pista { grid-auto-columns: minmax(0, calc(16.666% - 15px)); }
}

.carrusel__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line); background: var(--paper);
	color: var(--ink); cursor: pointer; z-index: 3;
	display: grid; place-items: center;
	box-shadow: var(--shadow-soft);
	transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}
.carrusel__nav:hover { background: var(--gold); color: var(--noir); border-color: var(--gold); }
.carrusel__nav[disabled] { opacity: .3; cursor: default; }
.carrusel__nav--prev { left: -12px; }
.carrusel__nav--next { right: -12px; }

@media (max-width: 899px) { .carrusel__nav { display: none; } }

.carrusel__punten { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.carrusel__punt { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: 0; padding: 0; cursor: pointer; }
.carrusel__punt.is-actief { background: var(--gold); width: 22px; border-radius: 99px; }

/* ============================================================
   v1.0.1 — RETAIL LAYOUT
   Dense, promo-led e-commerce structure (Vistaprint / A1 pattern)
   instead of the editorial luxury layout.
   ============================================================ */

/* ── Promo strip ─────────────────────────────────────────── */
.promo-strip {
	background: linear-gradient(90deg, var(--gold-deep), var(--gold));
	color: #fff;
	text-align: center;
	padding: 11px 0;
	font-size: .93rem;
	font-weight: 600;
}
.promo-strip b { background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 6px; margin-right: 8px; }
.promo-strip a { text-decoration: underline; margin-left: 10px; }

/* ── Category rail (icon row under the header) ───────────── */
.catrail { background: var(--paper); border-bottom: 1px solid var(--line); }
.catrail__pista {
	display: flex; gap: 8px; overflow-x: auto; padding: 14px 0;
	scrollbar-width: none; scroll-snap-type: x proximity;
}
.catrail__pista::-webkit-scrollbar { display: none; }
.catrail__item {
	flex: 0 0 auto; scroll-snap-align: start;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	min-width: 96px; padding: 10px 12px; border-radius: var(--radius-sm);
	text-align: center; transition: background-color .15s ease;
}
.catrail__item:hover { background: var(--ivory); }
.catrail__ic {
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--champagne); color: var(--gold-deep);
	display: grid; place-items: center; overflow: hidden;
}
.catrail__ic img { width: 100%; height: 100%; object-fit: cover; }
.catrail__item span { font-size: .8rem; font-weight: 600; line-height: 1.25; }

/* ── Promo hero (offer-led, not editorial) ───────────────── */
.promo-hero { background: var(--ivory); padding-block: clamp(22px, 3vw, 40px); }
.promo-hero__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.promo-hero__main, .promo-hero__side {
	border-radius: var(--radius); overflow: hidden; position: relative;
	background: var(--noir); color: #fff; display: flex; align-items: center;
	min-height: 300px;
}
.promo-hero__main { background: linear-gradient(115deg, var(--noir) 0%, var(--coal) 55%, var(--gold-deep) 150%); }
.promo-hero__main::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: radial-gradient(ellipse at 78% 40%, #000 12%, transparent 74%);
}
.promo-hero__in { position: relative; z-index: 1; padding: clamp(24px, 3.4vw, 46px); max-width: 560px; }
.promo-hero__kicker {
	display: inline-block; background: var(--gold); color: #fff;
	font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: 6px 13px; border-radius: 6px; margin-bottom: 14px;
}
.promo-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.9rem); margin: 0 0 12px; }
.promo-hero p { color: rgba(255,255,255,.82); margin: 0 0 20px; }
.promo-hero__side { flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; background: none; min-height: 0; }
.promo-card {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 20px 22px; color: var(--ink); flex: 1;
	display: flex; flex-direction: column; justify-content: center;
	transition: border-color .16s ease, transform .16s ease;
}
.promo-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.promo-card b { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }
.promo-card span { font-size: .88rem; color: var(--muted); }
.promo-card em { font-style: normal; color: var(--gold); font-weight: 700; }

@media (max-width: 900px) { .promo-hero__grid { grid-template-columns: 1fr; } }

/* ── Big category tiles ("Explore all categories") ───────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tile {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--gold); }
.tile__beeld { aspect-ratio: 5/4; background: var(--ivory); display: grid; place-items: center; }
.tile__beeld img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.tile__body { padding: 14px 16px 18px; }
.tile__body h3 { font-size: 1.02rem; margin: 0 0 3px; }
.tile__vanaf { font-size: .85rem; color: var(--muted); margin: 0; }
.tile__vanaf b { color: var(--gold-deep); }
.tile__n { font-size: .78rem; color: var(--muted); }

/* ── Kit / bundle cards ──────────────────────────────────── */
.kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.kit {
	background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius);
	padding: 24px; display: flex; flex-direction: column; gap: 10px; position: relative;
	transition: border-color .16s ease, transform .16s ease;
}
.kit:hover { border-color: var(--gold); transform: translateY(-4px); }
.kit--destacado { border-color: var(--gold); }
.kit__badge {
	position: absolute; top: -12px; left: 24px;
	background: var(--gold); color: #fff; font-size: .7rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px;
}
.kit h3 { margin: 0; font-size: 1.2rem; }
.kit__prijs { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--ink); }
.kit__prijs small { font-size: .8rem; font-weight: 500; color: var(--muted); display: block; }
.kit ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--muted); }
.kit ul li { display: flex; gap: 8px; padding: 4px 0; }
.kit ul li::before { content: "✓"; color: var(--gold); font-weight: 700; flex: none; }
.kit .btn { margin-top: auto; }

/* ── Section head, retail style ──────────────────────────── */
.rt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rt-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.rt-head a { font-weight: 700; color: var(--gold-deep); font-size: .93rem; }
.rt-head a:hover { text-decoration: underline; }

/* Tighter sections for a denser retail rhythm */
.section--retail { padding-block: clamp(34px, 4vw, 56px); }

/* ============================================================
   v1.0.1 — VISTA-STYLE TILE SYSTEM
   Their homepage is one repeated block: a heading + "shop all"
   link above a horizontal carousel of square image tiles.
   Everything below implements that block.
   ============================================================ */

/* Square tile with the name under the image */
.vtile { display: block; }
.vtile__beeld {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--ivory);
	border: 1px solid var(--line);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.vtile:hover .vtile__beeld { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.vtile__beeld img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.vtile__vlag {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	background: var(--gold); color: #fff;
	font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 5px;
}
.vtile__naam {
	margin: 10px 0 2px;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.32;
	color: var(--ink);
	/* keep every tile the same height — long SKUs were stretching the row */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.64em;
}
.vtile__vanaf { margin: 0; font-size: .85rem; color: var(--muted); }
.vtile__vanaf b { color: var(--ink); }

/* Services / tools band — 4 across */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.svc {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 24px; display: flex; flex-direction: column; gap: 8px;
	transition: border-color .16s ease, transform .16s ease;
}
.svc:hover { border-color: var(--gold); transform: translateY(-3px); }
.svc__ic {
	width: 46px; height: 46px; border-radius: 12px;
	background: var(--champagne); color: var(--gold-deep);
	display: grid; place-items: center; margin-bottom: 4px;
}
.svc h3 { margin: 0; font-size: 1.04rem; }
.svc p { margin: 0; font-size: .91rem; color: var(--muted); }
.svc a { margin-top: auto; font-weight: 700; color: var(--gold-deep); font-size: .9rem; }
.svc a:hover { text-decoration: underline; }

/* Brand story band */
.story { background: var(--noir); color: rgba(255,255,255,.82); }
.story__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; padding-block: clamp(40px, 5vw, 72px); }
.story h2 { color: #fff; }
.story__beeld { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--coal); }
.story__beeld img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .story__in { grid-template-columns: 1fr; } }

/* Footer link columns, Vista-style: many short lists */
.vfooter__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-block: clamp(34px, 4vw, 54px); }
.vfooter__grid h4 { color: #fff; font-size: .95rem; margin: 0 0 12px; }
.vfooter__grid ul { list-style: none; margin: 0; padding: 0; }
.vfooter__grid li { padding: 5px 0; }
.vfooter__grid a { font-size: .89rem; color: rgba(255,255,255,.66); }
.vfooter__grid a:hover { color: var(--gold-soft); }
@media (max-width: 860px) { .vfooter__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vfooter__grid { grid-template-columns: 1fr; } }

/* ============================================================
   v1.0.1 — SWAN DESIGN SYSTEM PORT
   Values below are the real tokens from Vistaprint's SWAN system
   (core-omit-vistaprint.css + vistaprint.css + standard-tile.css),
   applied to this theme so the spacing rhythm, type scale, radii
   and button treatment match theirs 1:1.

   Brand hues stay Securitech1 — the SYSTEM is ported, not the identity.
   ============================================================ */

:root {
	/* Type scale — SWAN base-font-size-050 … 1000 */
	--fs-050: 12px;  --fs-075: 14px;  --fs-100: 16px;  --fs-200: 18px;
	--fs-300: 20px;  --fs-400: 24px;  --fs-500: 28px;  --fs-600: 32px;
	--fs-700: 36px;  --fs-800: 42px;  --fs-900: 48px;  --fs-1000: 64px;

	/* Spacing scale — SWAN base-space */
	--sp-025: 2px;  --sp-050: 4px;  --sp-075: 6px;  --sp-100: 8px;
	--sp-150: 12px; --sp-200: 16px; --sp-300: 24px; --sp-400: 32px;
	--sp-550: 44px; --sp-700: 56px; --sp-900: 72px; --sp-1200: 96px;

	/* Radii — SWAN: subtle 4 / standard 8 / strong 16 / rounded max */
	--r-subtle: 4px;
	--r-standard: 8px;   /* actions, inputs */
	--r-strong: 16px;    /* containers */
	--r-rounded: 9999px;

	/* Map the theme's own names onto SWAN values */
	--radius: var(--r-strong);
	--radius-sm: var(--r-standard);

	/* Neutral surfaces — SWAN bg-standard is pure white, hover #f2f2f2 */
	--paper: #FFFFFF;
	--ivory: #F7F7F7;
	--hover-bg: #F2F2F2;
	--active-bg: #E5E5E5;
}

/* Body copy: SWAN body-standard = 16px, generous line-height */
body { font-size: var(--fs-100); line-height: 1.5; background: var(--paper); }

/* Heading skins: headline 42 / section 32 / subsection 20 */
h1, .t-headline    { font-size: clamp(var(--fs-700), 4.2vw, var(--fs-800)); font-weight: 700; line-height: 1.1;  letter-spacing: -.01em; }
h2, .t-section     { font-size: clamp(var(--fs-500), 3vw,   var(--fs-600)); font-weight: 700; line-height: 1.2;  letter-spacing: -.01em; }
h3, .t-subsection  { font-size: var(--fs-300); font-weight: 700; line-height: 1.4; }
.t-body-small      { font-size: var(--fs-075); line-height: 1.5; }
.t-footnote        { font-size: var(--fs-050); line-height: 1.5; }

/* Section rhythm — SWAN space-900 (72px), space-700 on small screens */
.section, .section--retail { padding-block: var(--sp-900); }
@media (max-width: 860px) { .section, .section--retail { padding-block: var(--sp-700); } }

/* Buttons — SWAN action radius is 8px, not pill */
.btn { border-radius: var(--r-standard); font-size: var(--fs-100); padding: 14px var(--sp-300); }

/* Vistaprint's banner primary button is BLACK on white, not brand-coloured */
.promo-hero .btn--gold,
.cta-band .btn--gold {
	background: #111111;
	border-color: #111111;
	color: #FFFFFF;
}
.promo-hero .btn--gold:hover,
.cta-band .btn--gold:hover { background: #383838; border-color: #383838; }

/* Secondary: transparent with a strong border, subtle tint on hover */
.btn--ghost { border-color: rgba(0,0,0,.54); color: inherit; background: transparent; }
.btn--ghost:hover { background: rgba(0,0,0,.04); }

/* standard-tile: container radius, left aligned, vertical gap, name = title-item */
.vtile__beeld { border-radius: var(--r-strong); }
.vtile { text-align: left; }
.vtile__naam { font-size: var(--fs-100); font-weight: 700; line-height: 1.4; }
.vtile__vanaf { font-size: var(--fs-075); }

/* Cards / tiles / kits inherit the container radius */
.tile, .kit, .svc, .promo-card, .carrusel__pista .prod { border-radius: var(--r-strong); }

/* Section heading block spacing — SWAN space-400 under the head */
.rt-head { margin-bottom: var(--sp-400); }
.rt-head h2 { font-size: clamp(var(--fs-500), 3vw, var(--fs-600)); }
.rt-head a  { font-size: var(--fs-100); }

/* Inputs share the action radius */
.st-form input, .st-form select, .st-form textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
	border-radius: var(--r-standard);
}


/* SWAN title-hero skin uses the SECONDARY (serif) family — the one visual
   signature of their homepage that is easy to miss. */
.promo-hero h1, .hero h1, .story h2 { font-family: var(--font-editorial); font-weight: 600; letter-spacing: -.015em; }

/* ============================================================
   v1.0.1 — VISTA LIGHT SHELL
   Vistaprint is a WHITE site: white header, black type, black
   buttons, colour used only for links and small accents.
   This block flips the dark shell to match.
   ============================================================ */

/* ── Header: white, not navy ─────────────────────────────── */
.site-header,
.header-bar,
.sticky-bar,
.header-inner {
	background: #FFFFFF !important;
	color: #111111 !important;
	border-bottom: 1px solid #E5E5E5;
}

.site-header a,
.site-header .primary-nav a,
.site-header .brand__name,
.header-bar a {
	color: #111111 !important;
}

.site-header .primary-nav a:hover,
.header-bar a:hover { color: var(--merk, #1F6FE5) !important; }

/* nav underline on hover, Vista style */
.primary-nav a { position: relative; font-weight: 500; }
.primary-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

.brand__name { color: #111111 !important; letter-spacing: -.01em; font-weight: 700; }
.brand__name em { color: #6E6E6E !important; font-weight: 500; }

/* icons + cart */
.site-header .icon-btn,
.site-header svg { color: #111111; }
.icon-btn:hover { background: #F2F2F2; }

/* Currency pill: quiet utility control, not a hero element */
.cur-switch, .currency-switch {
	background: #F2F2F2 !important;
	border: 1px solid #E5E5E5;
	border-radius: var(--r-rounded, 9999px);
}
.cur-switch a, .currency-switch a { color: #6E6E6E !important; font-size: 13px; }
.cur-switch .is-active, .currency-switch .is-active {
	background: #111111 !important; color: #FFFFFF !important;
}

/* ── One promo strip only, in brand blue ─────────────────── */
.promo-strip { background: var(--merk, #1F6FE5); }
.announce { display: none; }

/* ── Category rail: white, real thumbnails ───────────────── */
.catrail { background: #FFFFFF; border-bottom: 1px solid #E5E5E5; }
.catrail__ic { background: #F2F2F2; border: 1px solid #E5E5E5; }
.catrail__item span { color: #111111; font-weight: 500; }
.catrail__item:hover span { color: var(--merk, #1F6FE5); }

/* ── Hero: light banner, black type — Vista's actual treatment ── */
.promo-hero { background: #FFFFFF; padding-block: var(--sp-300, 24px) var(--sp-400, 32px); }
.promo-hero__main {
	background: #EAF2FF !important;
	color: #111111;
	border-radius: var(--r-strong, 16px);
}
.promo-hero__main::before { opacity: .35; }
.promo-hero h1 { color: #111111 !important; }
.promo-hero p { color: #3D3D3D !important; }
.promo-hero__kicker { background: #111111; color: #FFFFFF; }

/* ── Sections: white / very light grey alternation ───────── */
.section--tint, .section--grijs { background: #F7F7F7; }
.section--dark, .section--donker {
	background: #F7F7F7 !important;
	color: #111111 !important;
}
.section--dark h2, .section--donker h2,
.section--dark h3, .section--donker h3,
.section--dark p,  .section--donker p { color: #111111 !important; }
.section--dark .section__lead, .section--donker .section__lead { color: #6E6E6E !important; }

/* Story band stays dark for contrast — Vista does this once, at the end */
.story { background: #111111; }

/* ── Buttons: black primary everywhere, Vista's signature ── */
.btn--gold, .btn--merk, .btn--primary {
	background: #111111 !important;
	border-color: #111111 !important;
	color: #FFFFFF !important;
}
.btn--gold:hover, .btn--merk:hover, .btn--primary:hover {
	background: #383838 !important;
	border-color: #383838 !important;
}
.btn--ghost, .btn--outline {
	background: transparent !important;
	border-color: rgba(0,0,0,.54) !important;
	color: #111111 !important;
}
.btn--ghost:hover, .btn--outline:hover { background: rgba(0,0,0,.04) !important; }

/* CTA band: light, not saturated */
.cta-band { background: #EAF2FF; color: #111111; }
.cta-band h2, .cta-band p { color: #111111 !important; }

/* ── Footer: Vista's footer is white with grey links ─────── */
.site-footer { background: #FFFFFF; color: #6E6E6E; border-top: 1px solid #E5E5E5; }
.site-footer h4 { color: #111111; }
.vfooter__grid a { color: #6E6E6E; }
.vfooter__grid a:hover { color: #111111; text-decoration: underline; }
.footer__onder { border-top-color: #E5E5E5 !important; color: #6E6E6E; }

/* ── Tiles on white ──────────────────────────────────────── */
.vtile__beeld { background: #F7F7F7; border-color: #E5E5E5; }
.vtile__naam { color: #111111; }
.vtile:hover .vtile__beeld { border-color: #111111; box-shadow: none; }

/* ============================================================
   v1.0.1 — VP HEADER  (purpose-built, replaces the old shell)
   Three rows: utility bar · brand+search · category nav.
   White surface, black type, blue only on interaction.
   ============================================================ */

.vp-wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 24px; }

/* promo strip */
.vp-promo {
	background: #1F6FE5; color: #fff; text-align: center;
	font-size: 14px; font-weight: 600; padding: 10px 0;
}
.vp-promo a { color: #fff; text-decoration: underline; margin-left: 10px; }

/* 1 · utility bar */
.vp-util { background: #fff; border-bottom: 1px solid #EDEDED; font-size: 12px; }
.vp-util__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 36px; }
.vp-util__left, .vp-util__right { display: flex; align-items: center; gap: 18px; }
.vp-util a { color: #555; }
.vp-util a:hover { color: #111; text-decoration: underline; }
.vp-cur { display: inline-flex; border: 1px solid #DDD; border-radius: 999px; overflow: hidden; }
.vp-cur a { padding: 3px 10px; color: #666; font-weight: 600; }
.vp-cur a.is-on { background: #111; color: #fff; }
@media (max-width: 860px) { .vp-util__left { display: none; } }

/* 2 · brand row */
.vp-brandrow { background: #fff; }
.vp-brandrow__in { display: flex; align-items: center; gap: 24px; height: 76px; }

.vp-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.vp-burger span { display: block; width: 20px; height: 2px; background: #111; }

.vp-logo { display: flex; align-items: center; flex: 0 0 auto; }
.vp-logo img { width: auto; } /* height comes from the Customizer, see alhg_dynamic_css() */
.vp-logo__text { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #111; font-family: var(--font-display); }

.vp-search { flex: 1 1 auto; position: relative; max-width: 720px; }
.vp-search input {
	width: 100%; height: 48px; padding: 0 52px 0 18px;
	border: 2px solid #111; border-radius: 999px;
	font-size: 15px; background: #fff; color: #111;
}
.vp-search input::placeholder { color: #767676; }
.vp-search input:focus { outline: none; border-color: #1F6FE5; }
.vp-search button {
	position: absolute; right: 4px; top: 4px;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: #111; color: #fff; cursor: pointer; display: grid; place-items: center;
}
.vp-search button:hover { background: #383838; }

.vp-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.vp-act { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #111; font-size: 11px; font-weight: 600; }
.vp-act:hover { color: #1F6FE5; }
.vp-act__cart { position: relative; display: block; }
.vp-act__cart i {
	position: absolute; top: -5px; right: -8px; font-style: normal;
	min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
	background: #1F6FE5; color: #fff; font-size: 10px; font-weight: 800;
	display: grid; place-items: center;
}

/* 3 · category nav */
.vp-nav { background: #fff; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; position: relative; }
.vp-nav__in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vp-nav__in::-webkit-scrollbar { display: none; }
.vp-nav__item {
	display: block; padding: 13px 14px; font-size: 14px; font-weight: 600;
	color: #111; white-space: nowrap; border-bottom: 3px solid transparent;
}
.vp-nav__item:hover { border-bottom-color: #111; }
.vp-nav__item--deal { color: #C0392B; }
.vp-nav__has { position: static; }

/* mega menu */
.vp-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-bottom: 1px solid #EDEDED;
	box-shadow: 0 14px 28px rgba(0,0,0,.10);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.vp-nav__has:hover .vp-mega,
.vp-nav__has:focus-within .vp-mega { opacity: 1; visibility: visible; transform: none; }

.vp-mega__in { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 32px; padding: 28px 24px 34px; }
.vp-mega__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #767676; margin: 0 0 12px; }
.vp-mega__col ul { list-style: none; margin: 0; padding: 0; }
.vp-mega__col li { padding: 5px 0; }
.vp-mega__col a { font-size: 14px; color: #111; display: flex; justify-content: space-between; gap: 10px; }
.vp-mega__col a:hover { text-decoration: underline; }
.vp-mega__col em { font-style: normal; color: #999; font-size: 12px; }
.vp-mega__promo { background: #F5F8FF; border-radius: 12px; padding: 20px; }
.vp-mega__promo strong { display: block; font-size: 15px; margin-bottom: 6px; }
.vp-mega__promo p { font-size: 13px; color: #555; margin: 0 0 14px; }

.vp-btn {
	display: inline-block; padding: 10px 20px; border-radius: 8px;
	font-size: 14px; font-weight: 700;
}
.vp-btn--dark { background: #111; color: #fff; }
.vp-btn--dark:hover { background: #383838; }

@media (max-width: 1024px) {
	.vp-nav { display: none; }
	.vp-burger { display: flex; }
	.vp-brandrow__in { height: 66px; gap: 14px; }
	.vp-act span:last-child { display: none; }
}
@media (max-width: 640px) {
	.vp-search { order: 3; flex-basis: 100%; max-width: none; }
	.vp-brandrow__in { height: auto; padding: 12px 0; flex-wrap: wrap; }
	.vp-search input { height: 42px; }
	.vp-search button { width: 34px; height: 34px; top: 4px; }
}

/* Old shell is no longer rendered — neutralise any leftover rules so they
   cannot fight the vp-* header. */
.site-header, .announce, .topbar, .hoofdnav, .header__in, .brand__name { }
.site-header { display: none; }
.announce { display: none; }