/* =========================================================================
 * ZL Tienda De Martino · estilos (archive + single). Replica mockup v1.
 * Fuentes (Cormorant Garamond + Inter) ya se cargan async global en zetalabs-perf.php.
 * ========================================================================= */

.zl-tienda-scope,
body.woocommerce,
body.post-type-archive-product,
body.single-product {
	--zl-black: #1A1410;
	--zl-cream: #FBF8F2;
	--zl-gold: #B8924D;
	--zl-gold-d: #A98351;
	--zl-taupe: #6B5D4F;
	--zl-line: rgba(26, 20, 16, 0.07);
	--zl-line-strong: rgba(26, 20, 16, 0.18);
}

/* Reset acotado a nuestras secciones */
.zl-hero, .zl-toolbar, .zl-layout, .zl-breadcrumb, .zl-product, .zl-terroir, .zl-awards, .zl-related {
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--zl-black);
	box-sizing: border-box;
}
.zl-hero *, .zl-toolbar *, .zl-layout *, .zl-breadcrumb *, .zl-product *, .zl-terroir *, .zl-awards *, .zl-related * { box-sizing: border-box; }
.zl-layout img, .zl-product img, .zl-related img { display: block; max-width: 100%; }
.zl-layout a, .zl-product a, .zl-related a, .zl-breadcrumb a { color: inherit; text-decoration: none; }

/* ============== HERO ============== */
.zl-hero {
	position: relative;
	min-height: 50vh;
	padding: 170px 40px 80px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%),
		var(--hero-bg, linear-gradient(160deg,#2a211a,#1A1410)) center / cover;
	color: #FFF;
	isolation: isolate;
}
.zl-hero__eyebrow {
	display: inline-block;
	font-size: 11px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase;
	color: var(--zl-gold); margin-bottom: 18px; position: relative;
}
.zl-hero__eyebrow::after { content: ''; display: block; width: 48px; height: 1.5px; background: currentColor; opacity: .85; margin: 14px auto 0; }
.zl-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5.6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: 1px; margin: 0; }
.zl-hero__sub { margin-top: 22px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; color: rgba(255,255,255,.85); }
.zl-hero__breadcrumb { margin-top: 28px; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.5); }
.zl-hero__breadcrumb a { color: #fff !important; } /* blanco sólido: no heredar el rojo del tema ni bajar opacidad */
.zl-hero__breadcrumb a:hover { color: var(--zl-gold) !important; }
.zl-hero__breadcrumb .sep { margin: 0 12px; color: var(--zl-gold); }

/* ============== TOOLBAR ============== */
.zl-toolbar { position: sticky; top: 0; z-index: 50; background: var(--zl-cream); border-top: 1px solid var(--zl-line); border-bottom: 1px solid var(--zl-line); }
.zl-toolbar__inner { max-width: 1440px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; gap: 24px; }
.zl-results-count { font-family: 'Cormorant Garamond', serif; font-size: 18px; white-space: nowrap; }
.zl-results-count strong { color: var(--zl-gold-d); font-weight: 500; }
.zl-results-count span { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-taupe); margin-left: 6px; font-family: 'Inter', sans-serif; }
.zl-search { flex: 1; max-width: 480px; position: relative; }
.zl-search__input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--zl-line-strong); padding: 12px 36px 12px 0; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: .5px; color: var(--zl-black); outline: none; transition: border-color .25s ease; }
.zl-search__input::placeholder { color: var(--zl-taupe); font-style: italic; }
.zl-search__input:focus { border-bottom-color: var(--zl-gold); }
.zl-search__icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--zl-gold); pointer-events: none; }
.zl-toolbar__right { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.zl-filter-toggle { display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--zl-line-strong); padding: 9px 14px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-black); cursor: pointer; }
.zl-sort { position: relative; }
.zl-sort__btn { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-black); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 7px 12px; border-radius: 2px; transition: background .2s ease, color .2s ease; font-family: 'Inter', sans-serif; font-weight: 500; }
.zl-sort__btn:hover, .zl-sort__btn:focus, .zl-sort__btn:focus-visible, .zl-sort__btn:active, .zl-sort.open .zl-sort__btn { background: var(--zl-gold) !important; color: #fff !important; outline: none; box-shadow: none; }
.zl-sort__btn:hover .zl-sort__caret, .zl-sort__btn:focus .zl-sort__caret, .zl-sort.open .zl-sort__caret { color: #fff !important; }
.zl-sort__caret { color: var(--zl-gold); }
.zl-sort__menu { position: absolute; right: 0; top: calc(100% + 12px); background: #fff; border: 1px solid var(--zl-line-strong); min-width: 230px; list-style: none; margin: 0; padding: 6px 0; z-index: 60; box-shadow: 0 18px 40px rgba(26,20,16,.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s ease; }
.zl-sort.open .zl-sort__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.zl-sort__menu li { padding: 10px 18px; font-size: 12px; letter-spacing: .4px; cursor: pointer; color: var(--zl-black); }
.zl-sort__menu li:hover, .zl-sort__menu li.active { background: var(--zl-gold); color: #fff; }

/* ============== LAYOUT ============== */
.zl-layout { max-width: 1440px; margin: 0 auto; padding: 50px 40px 80px; display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }

/* SIDEBAR */
.zl-sidebar__head { display: flex; align-items: center; justify-content: space-between; }
.zl-sidebar h3 { font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding-bottom: 10px; margin: 0 0 18px; border-bottom: 1px solid var(--zl-line); position: relative; flex: 1; }
.zl-sidebar h3::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 32px; height: 1.5px; background: var(--zl-gold); }
.zl-sidebar__close { display: none; background: none; border: none; font-size: 26px; line-height: 1; color: var(--zl-taupe); cursor: pointer; }
.zl-filter-group { margin-bottom: 30px; }
.zl-filter-group__title { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; cursor: pointer; font-weight: 500; }
.zl-filter-group__title .caret { color: var(--zl-gold); transition: transform .25s ease; }
.zl-filter-group.collapsed .zl-filter-group__title .caret { transform: rotate(-90deg); }
.zl-filter-group.collapsed .zl-filter-group__body { display: none; }

.zl-filter-list { list-style: none; margin: 0; padding: 0; }
.zl-filter-list li { padding: 7px 0; font-size: 13px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.zl-filter-list li label { display: inline-flex; align-items: center; cursor: pointer; flex: 1; }
.zl-filter-list li:hover { color: var(--zl-gold); }
.zl-filter-list li input { accent-color: var(--zl-gold); margin-right: 10px; }
.zl-filter-list li .count { font-size: 11px; color: var(--zl-taupe); font-feature-settings: 'tnum'; }
.zl-filter-list li.active { color: var(--zl-gold); font-weight: 500; }

.zl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zl-chip { padding: 6px 12px; border: 1px solid var(--zl-line-strong); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zl-taupe); cursor: pointer; transition: all .25s ease; background: transparent; font-family: 'Inter', sans-serif; }
.zl-chip:hover { background: var(--zl-gold); border-color: var(--zl-gold); color: #fff; }
.zl-chip.active { background: var(--zl-black); color: var(--zl-cream); border-color: var(--zl-black); }

/* Range slider (dual) */
.zl-range { position: relative; height: 20px; margin: 26px 6px 10px; }
.zl-range__track { position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: var(--zl-line-strong); transform: translateY(-50%); }
.zl-range__fill { position: absolute; height: 100%; background: var(--zl-gold); }
.zl-range__input { position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.zl-range__input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--zl-cream); border: 1.5px solid var(--zl-gold); box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: grab; }
.zl-range__input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--zl-cream); border: 1.5px solid var(--zl-gold); cursor: grab; }
.zl-range__input::-webkit-slider-runnable-track { background: none; }
.zl-range__values { display: flex; justify-content: space-between; font-size: 13px; font-family: 'Cormorant Garamond', serif; }
.zl-range__values span { color: var(--zl-gold); }

.zl-clear-filters { width: 100%; background: transparent; border: 1px solid var(--zl-line-strong); padding: 12px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-taupe); cursor: pointer; transition: all .25s ease; margin-top: 6px; }
.zl-clear-filters:hover { background: var(--zl-gold); border-color: var(--zl-gold); color: #fff; }

/* Applied filters */
.zl-applied-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; align-items: center; }
.zl-applied-filters[hidden] { display: none; }
.zl-applied-filters .label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--zl-taupe); margin-right: 6px; }
.zl-applied-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(184,146,77,.08); border: 1px solid rgba(184,146,77,.3); color: var(--zl-gold-d); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; }
.zl-applied-tag .x { cursor: pointer; opacity: .6; font-size: 14px; line-height: 1; }
.zl-applied-tag .x:hover { opacity: 1; }

/* ============== GRID + CARD ============== */
.zl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; transition: opacity .25s ease; }
.zl-grid.loading { opacity: .4; pointer-events: none; }
.zl-main { position: relative; }

.zl-card { background: #fff; border: 1px solid var(--zl-line); box-shadow: 0 1px 2px rgba(26,20,16,.04); transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; position: relative; overflow: hidden; }
.zl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26,20,16,.12); border-color: rgba(184,146,77,.3); }
.zl-card__image { position: relative; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.zl-card__image img { max-height: 100%; width: auto; object-fit: contain; transition: transform .8s cubic-bezier(.22,.7,.22,1); mix-blend-mode: multiply; }
.zl-card:hover .zl-card__image img { transform: scale(1.06); }
.zl-card__badge { position: absolute; top: 14px; left: 14px; background: var(--zl-black); color: var(--zl-cream); padding: 6px 10px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; z-index: 2; }
.zl-card__badge.gold { background: var(--zl-gold); color: var(--zl-black); }
.zl-card__quick { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: rgba(255,255,255,.95); border: 1px solid var(--zl-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(-6px); transition: all .35s cubic-bezier(.22,.7,.22,1); z-index: 3; font-size: 20px; color: var(--zl-black); }
.zl-card:hover .zl-card__quick { opacity: 1; transform: translateY(0); }
.zl-card__quick:hover { background: var(--zl-black); color: var(--zl-cream); border-color: var(--zl-black); }
.zl-card__quick[disabled] { opacity: 0 !important; pointer-events: none; }
.zl-card__cta-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); transform: translateY(100%); transition: transform .4s cubic-bezier(.22,.7,.22,1); }
.zl-card:hover .zl-card__cta-overlay { transform: translateY(0); }
.zl-card__cta-overlay button { width: 100%; background: var(--zl-cream); color: var(--zl-black); border: none; padding: 13px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; transition: all .25s ease; }
.zl-card__cta-overlay button:hover { background: var(--zl-gold); color: var(--zl-cream); }
.zl-card__cta-overlay button[disabled] { opacity: .5; cursor: default; }
.zl-card__body { padding: 22px 24px 26px; }
.zl-card__line { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-gold-d); margin-bottom: 8px; font-weight: 500; }
.zl-card__title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: .4px; margin-bottom: 6px; }
.zl-card__meta { font-size: 12px; color: var(--zl-taupe); margin-bottom: 14px; }
.zl-card__meta .dot { color: var(--zl-gold); margin: 0 6px; }
.zl-card__bottom { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--zl-line); padding-top: 14px; gap: 10px; }
.zl-card__price { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--zl-gold-d); font-weight: 500; }
.zl-card__price del { opacity: .5; font-size: 15px; margin-right: 6px; }
.zl-card__price ins { text-decoration: none; }
.zl-card__rating { font-size: 11px; color: var(--zl-taupe); letter-spacing: 1px; white-space: nowrap; }
.zl-card__rating strong { color: var(--zl-gold-d); font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 500; }

.zl-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--zl-taupe); font-family: 'Cormorant Garamond', serif; font-size: 22px; }
.zl-empty .zl-clear-filters { max-width: 220px; margin: 20px auto 0; }

/* ============== PAGINATION ============== */
.zl-pagination { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--zl-line); display: flex; justify-content: center; align-items: center; font-family: 'Cormorant Garamond', serif; }
.zl-pagination__num { position: relative; min-width: 44px; padding: 6px 14px; font-size: 24px; font-weight: 500; color: var(--zl-taupe); text-align: center; cursor: pointer; transition: color .25s ease; }
.zl-pagination__num:hover { color: var(--zl-gold); }
.zl-pagination__num.current { color: var(--zl-black); cursor: default; }
.zl-pagination__num.current::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 22px; height: 1.5px; background: var(--zl-gold); transform: translateX(-50%); }
.zl-pagination__num.dots { cursor: default; }
.zl-pagination__nav { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-black); padding: 0 16px; cursor: pointer; }
.zl-pagination__nav:hover { color: var(--zl-gold); }

/* ============================================================
 * SINGLE PRODUCT
 * ============================================================ */
/* El breadcrumb del producto cae bajo el header (position:absolute, z-index:100,
   backdrop-filter:blur) → el blur del header lo difuminaba. Se eleva por encima
   (z-index:101) para que NO quede detrás de la capa con blur y se vea nítido.
   Se baja con `top` (sin empujar el layout) para alinearlo con el eyebrow del
   producto que está al frente, y va en el mismo dorado, sin sombra.
   pointer-events:none → su padding-top (140px, z-index:101) cubría el header y
   bloqueaba los clics del menú; se dejan pasar y solo los enlaces reciben clic. */
.zl-breadcrumb { position: relative; z-index: 101; top: 70px; max-width: 1440px; margin: 0 auto; padding: 140px 40px 30px; font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--zl-gold-d); pointer-events: none; }
.zl-breadcrumb a { color: var(--zl-gold-d) !important; pointer-events: auto; }
.zl-breadcrumb a:hover { color: var(--zl-black) !important; }
.zl-breadcrumb .sep { color: var(--zl-gold); margin: 0 10px; }
.zl-breadcrumb .current { color: var(--zl-gold-d); }

.zl-product { max-width: 1440px; margin: 0 auto; padding: 20px 40px 80px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }

.zl-gallery { position: relative; }
.zl-gallery__main { position: relative; background: #fff; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zl-gallery__main img { max-height: 110%; width: auto; mix-blend-mode: multiply; transform: translateY(-2%); }
.zl-gallery__badge { position: absolute; top: 48px; left: 20px; background: var(--zl-gold); color: var(--zl-black); padding: 8px 14px; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; }
.zl-gallery__thumbs { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.zl-gallery__thumb { width: 80px; aspect-ratio: 4 / 5; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; transition: border-color .25s ease; padding: 0; }
.zl-gallery__thumb img { max-height: 95%; mix-blend-mode: multiply; }
.zl-gallery__thumb.active { border-color: var(--zl-gold); }
.zl-gallery__thumb:hover { border-color: var(--zl-gold-d); }

.zl-info { padding-top: 12px; }
.zl-info__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--zl-gold-d); margin-bottom: 18px; position: relative; }
.zl-info__eyebrow::after { content: ''; display: block; width: 48px; height: 1.5px; background: currentColor; opacity: .85; margin-top: 14px; }
.zl-info__title { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 500; line-height: 1.1; letter-spacing: .5px; margin: 0 0 16px; }
.zl-info__meta { font-size: 13px; letter-spacing: 1px; color: var(--zl-taupe); text-transform: uppercase; font-weight: 500; margin-bottom: 22px; }
.zl-info__meta .dot { color: var(--zl-gold); margin: 0 8px; }
.zl-info__rating { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 30px; padding: 12px 18px; background: rgba(184,146,77,.06); border-left: 3px solid var(--zl-gold); }
.zl-info__rating .score { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 500; color: var(--zl-gold-d); line-height: 1; }
.zl-info__rating .source { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--zl-taupe); }
.zl-info__rating .source strong { color: var(--zl-black); display: block; font-weight: 600; margin-bottom: 3px; }
.zl-info__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; line-height: 1.5; margin: 0 0 30px; padding-left: 20px; border-left: 1px solid var(--zl-gold); max-width: 480px; }
.zl-info__price { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.zl-info__price .amount { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 500; color: var(--zl-gold-d); line-height: 1; }
.zl-info__price .amount .woocommerce-Price-amount { color: var(--zl-gold-d); }
.zl-info__price .unit { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-taupe); }
.zl-info__price-note { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zl-taupe); margin-bottom: 28px; }
.zl-info__price-note .strike { text-decoration: line-through; opacity: .6; }
.zl-info__price-note .save { color: var(--zl-gold); font-weight: 600; }

.zl-actions { display: flex; gap: 12px; align-items: stretch; margin: 0 0 26px; }
.zl-quantity { display: inline-flex; align-items: center; border: 1px solid var(--zl-line-strong); overflow: hidden; }
.zl-quantity button { background: transparent; border: none; width: 44px; height: 50px; font-size: 18px; color: var(--zl-black); cursor: pointer; transition: background .25s ease; }
.zl-quantity button:hover { background: rgba(0,0,0,.04); color: var(--zl-gold); }
.zl-quantity input { width: 44px; height: 50px; border: none; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500; color: var(--zl-black); outline: none; background: transparent; -moz-appearance: textfield; }
.zl-quantity input::-webkit-outer-spin-button, .zl-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zl-btn { flex: 1; padding: 14px 28px; background: var(--zl-black); color: var(--zl-cream); border: 1px solid var(--zl-black); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; transition: all .3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.zl-btn:hover { background: var(--zl-gold); border-color: var(--zl-gold); }
.zl-btn[disabled] { opacity: .5; cursor: default; }
.zl-btn--icon { flex: 0 0 auto; width: 50px; height: 50px; padding: 0; background: transparent; color: var(--zl-black); border: 1px solid var(--zl-line-strong); }
.zl-btn--icon:hover { color: var(--zl-gold); border-color: var(--zl-gold); background: transparent; }
.zl-btn.loading { opacity: .7; pointer-events: none; }

.zl-info__perks { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--zl-line); margin-bottom: 32px; }
.zl-info__perks .perk { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .3px; }
.zl-info__perks .perk svg { color: var(--zl-gold); flex-shrink: 0; }

/* TABS */
.zl-tabs { border-top: 1px solid var(--zl-line); }
.zl-tabs__nav { display: flex; gap: 36px; padding: 22px 0 0; border-bottom: 1px solid var(--zl-line); margin-bottom: 26px; flex-wrap: wrap; }
/* reset con !important: en prod el tema/Elementor pinta los <button> de rojo y, por
   orden de carga, ganaba sobre esta regla; se blinda para que las pestañas no hereden
   estilo de botón (fondo, borde, radio, sombra). */
.zl-tabs__nav button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 0 18px !important; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-taupe); cursor: pointer; position: relative; transition: color .25s ease; }
.zl-tabs__nav button:hover { color: var(--zl-black); }
.zl-tabs__nav button.active { color: var(--zl-black); }
.zl-tabs__nav button.active::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1.5px; background: var(--zl-gold); }
.zl-tabs__panel { font-size: 14px; line-height: 1.75; letter-spacing: .2px; }
.zl-tabs__panel p { margin: 0 0 14px; }
.zl-tabs__panel .zl-serve { color: var(--zl-taupe); font-size: 12px; letter-spacing: .5px; }
.zl-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.zl-note { padding: 18px 20px; background: rgba(184,146,77,.05); border: 1px solid rgba(184,146,77,.15); }
.zl-note__label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--zl-gold-d); font-weight: 500; margin-bottom: 8px; }
.zl-note__value { font-family: 'Cormorant Garamond', serif; font-size: 15px; line-height: 1.4; }
.zl-specs { list-style: none; margin: 0; padding: 0; }
.zl-specs li { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--zl-line); font-size: 13px; gap: 16px; }
.zl-specs li:last-child { border-bottom: none; }
.zl-specs .label { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--zl-taupe); font-weight: 500; }
.zl-specs .value { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 500; text-align: right; }

/* TERROIR */
.zl-terroir { position: relative; margin: 80px 0; padding: 100px 40px; color: var(--zl-cream); text-align: center; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.65) 100%), var(--ter-bg) center / cover; }
.zl-terroir__inner { max-width: 800px; margin: 0 auto; }
.zl-terroir__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: var(--zl-gold); margin-bottom: 22px; display: inline-block; position: relative; }
.zl-terroir__eyebrow::after { content: ''; display: block; width: 48px; height: 1.5px; background: currentColor; opacity: .85; margin: 14px auto 0; }
.zl-terroir h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 4vw, 52px); font-weight: 500; line-height: 1.15; margin: 0 0 22px; }
.zl-terroir p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.6; color: rgba(251,248,242,.9); max-width: 660px; margin: 0 auto 30px; }
.zl-terroir__map { display: inline-flex; gap: 34px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.zl-terroir__map .num { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 500; color: var(--zl-gold); display: block; }
.zl-terroir__map .lab { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(251,248,242,.65); margin-top: 4px; }

/* AWARDS + RELATED shared section title */
.zl-section-title { text-align: center; margin-bottom: 50px; }
.zl-section-title__eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: var(--zl-gold-d); margin-bottom: 18px; position: relative; }
.zl-section-title__eyebrow::after { content: ''; display: block; width: 48px; height: 1.5px; background: currentColor; opacity: .85; margin: 14px auto 0; }
.zl-section-title h2 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 500; line-height: 1.15; margin: 0; }

.zl-awards { max-width: 1200px; margin: 0 auto 80px; padding: 0 40px; }
.zl-awards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.zl-award { padding: 32px 28px; border: 1px solid var(--zl-line); background: #fff; transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease; }
.zl-award:hover { box-shadow: 0 18px 40px rgba(26,20,16,.10); border-color: rgba(184,146,77,.3); transform: translateY(-3px); }
.zl-award__source { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--zl-gold-d); font-weight: 500; margin-bottom: 10px; }
.zl-award__score { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 500; color: var(--zl-black); line-height: 1; margin-bottom: 12px; }
.zl-award__score sup { font-size: 18px; color: var(--zl-gold); font-weight: 500; margin-left: 4px; }
.zl-award__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.55; margin-bottom: 14px; }
.zl-award__author { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-taupe); }

.zl-related { max-width: 1440px; margin: 0 auto 80px; padding: 0 40px; }
.zl-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.zl-card--compact .zl-card__body { padding: 20px 22px 24px; }
.zl-card--compact .zl-card__title { font-size: 19px; }

/* ============== RESPONSIVE ============== */
@media (max-width: 1100px) {
	.zl-product { grid-template-columns: 1fr; gap: 50px; }
	.zl-layout { grid-template-columns: 1fr; }
	.zl-grid { grid-template-columns: repeat(2, 1fr); }
	.zl-related__grid { grid-template-columns: repeat(2, 1fr); }
	.zl-awards__grid { grid-template-columns: 1fr; }
	.zl-filter-toggle { display: inline-flex; }
	/* sidebar como panel off-canvas */
	.zl-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 86vw; background: #fff; z-index: 1000; padding: 28px 24px; overflow-y: auto; transform: translateX(-100%); transition: transform .35s cubic-bezier(.22,.7,.22,1); box-shadow: 0 0 60px rgba(0,0,0,.2); }
	.zl-sidebar.open { transform: translateX(0); }
	.zl-sidebar__close { display: block; }
	.zl-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity .3s ease; }
	.zl-sidebar-backdrop.open { opacity: 1; visibility: visible; }
}
@media (max-width: 768px) {
	/* El hero dejaba una franja oscura abajo: el gradiente llegaba a 0.65 sobre la parte
	   baja (oscura) de la foto. Se aclara el gradiente hacia abajo (0.18) para que ahí se
	   vea la imagen y no negro, se ciñe la altura al contenido y se reduce el pb. */
	.zl-hero {
		padding: 116px 20px 22px; min-height: auto;
		background-image:
			linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.52) 38%, rgba(0,0,0,0.08) 100%),
			var(--hero-bg, linear-gradient(160deg,#2a211a,#1A1410));
	}
	.zl-toolbar__inner { padding: 14px 20px; gap: 12px 14px; flex-wrap: wrap; }
	.zl-results-count { display: none; }
	.zl-search { order: 3; flex: 1 1 100%; max-width: none; }
	/* "Filtros / Ordenar" se cortaban: que no desborden y el menú no se salga */
	.zl-toolbar__right { margin-left: 0; gap: 14px; flex-wrap: wrap; }
	.zl-sort { position: static; }
	.zl-sort__btn { white-space: nowrap; }
	.zl-sort__menu { left: 20px; right: 20px; min-width: 0; width: auto; max-width: none; }
	.zl-layout { padding: 32px 20px 60px; }
	.zl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
	.zl-breadcrumb { padding: 120px 20px 20px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.zl-breadcrumb::-webkit-scrollbar { display: none; }
	.zl-product { padding: 10px 20px 60px; }
	.zl-info__title { font-size: 36px; }
	.zl-notes { grid-template-columns: 1fr; }
	.zl-related__grid { grid-template-columns: repeat(2, 1fr); }
	.zl-terroir { padding: 70px 20px; margin: 50px 0; }
}
@media (max-width: 480px) {
	/* Mantener 2 columnas en mobile (intención del diseño) y compactar la card */
	.zl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
	.zl-related__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
	.zl-card__body { padding: 14px 14px 18px; }
	.zl-card__line { font-size: 9px; letter-spacing: 2px; }
	.zl-card__title { font-size: 17px; }
	.zl-card__meta { font-size: 11px; }
	.zl-card__price { font-size: 18px; }
	.zl-card__price del { font-size: 12px; }
	.zl-card__rating { font-size: 10px; white-space: normal; text-align: right; }
	.zl-card__rating strong { font-size: 12px; }
	.zl-card__badge { font-size: 9px; padding: 5px 8px; }
	.zl-card__bottom { flex-wrap: wrap; gap: 4px; }
	.zl-actions { flex-wrap: wrap; }
	.zl-btn { flex: 1 1 60%; }
}

/* === Precio por litro (junto al precio) ===
   Mismo tratamiento tipográfico que el precio principal: el monto en
   Cormorant Garamond dorado (como .amount, más chico) y la glosa "por litro"
   en el mismo estilo pequeño mayúsculas que "por botella" (.unit). */
.zl-info__price { flex-wrap: wrap; }
.zl-info__price .per-liter { flex-basis: 100%; display: inline-flex; align-items: baseline; gap: 8px; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; color: var(--zl-gold-d); line-height: 1; margin-top: 6px; }
/* el número interno también trae la clase .amount, que en desktop pesa 42px;
   se fija aquí (mayor especificidad) para que el precio/litro sea secundario. */
.zl-info__price .per-liter .woocommerce-Price-amount { color: var(--zl-gold-d); font-weight: 500; font-size: 22px; }
.zl-info__price .per-liter em { font-family: 'Inter', sans-serif; font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-taupe); }

/* === Descargas PDF (ficha técnica ES/EN) === */
.zl-info__docs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 22px; border-top: 1px solid var(--zl-line); margin-bottom: 32px; }
.zl-info__docs .zl-docs__label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-taupe); }
.zl-docs__links { display: flex; flex-wrap: wrap; gap: 10px; }
.zl-doc { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--zl-line-strong); border-radius: 2px; font-size: 12px; letter-spacing: .5px; color: var(--zl-black); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.zl-doc svg { color: var(--zl-gold); flex-shrink: 0; transition: color .2s; }
.zl-doc em { font-style: normal; color: var(--zl-taupe); }
.zl-doc:hover { background: var(--zl-black); color: var(--zl-cream); border-color: var(--zl-black); }
.zl-doc:hover svg, .zl-doc:hover em { color: var(--zl-cream); }

/* =========================================================================
 * SECCIÓN "VINOS" (colecciones) + BANNER CUVÉE — ago 2026 (#1/#4/#5/#6)
 * Autocontenido: define la paleta en las clases raíz porque el Home y /vinos/
 * no tienen el scope de la tienda (body.single-product / .post-type-archive).
 * ========================================================================= */
.zl-vinos-intro, .zl-collections, .zl-collection, .zl-coleccion-hero,
.zl-coleccion, .zl-vinos-foot, .zl-cuvee-banner {
	--zl-black: #1A1410; --zl-cream: #FBF8F2; --zl-gold: #B8924D; --zl-gold-d: #A98351;
	--zl-taupe: #6B5D4F; --zl-line: rgba(26,20,16,.07); --zl-line-strong: rgba(26,20,16,.18);
	font-family: 'Inter', system-ui, sans-serif; color: var(--zl-black); box-sizing: border-box;
}
.zl-vinos-intro *, .zl-collections *, .zl-coleccion-hero *, .zl-coleccion *, .zl-vinos-foot *, .zl-cuvee-banner * { box-sizing: border-box; }
.zl-collection img, .zl-coleccion img { display: block; max-width: 100%; }

/* ---- Intro /vinos/ ---- */
.zl-vinos-intro { max-width: 900px; margin: 0 auto; padding: 150px 24px 20px; text-align: center; }
.zl-vinos-intro__eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: var(--zl-gold); }
.zl-vinos-intro__eyebrow::after { content: ''; display: block; width: 44px; height: 1.5px; background: currentColor; opacity: .8; margin: 14px auto 0; }
.zl-vinos-intro__title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; margin: 18px 0 0; }
.zl-vinos-intro__sub { margin: 16px auto 0; max-width: 620px; color: var(--zl-taupe); font-size: 16px; line-height: 1.6; }

/* ---- Grilla de colecciones ---- */
.zl-collections { max-width: 1280px; margin: 0 auto; padding: 40px 24px 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.zl-collection { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--zl-line); text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.22,.7,.22,1), box-shadow .3s; }
.zl-collection:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(26,20,16,.12); }
.zl-collection__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #f3ede2, #e9e0d0); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.zl-collection__media img { width: auto; max-height: 82%; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.22,.7,.22,1); }
.zl-collection:hover .zl-collection__media img { transform: scale(1.05); }
.zl-collection__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.zl-collection__name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px; line-height: 1.1; margin: 0; }
.zl-collection__count { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-gold); }
.zl-collection__desc { margin: 14px 0 0; color: var(--zl-taupe); font-size: 14px; line-height: 1.6; }
.zl-collection__cta { margin-top: 20px; align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-black); padding-bottom: 4px; border-bottom: 1.5px solid var(--zl-gold); }
.zl-collection:hover .zl-collection__cta { color: var(--zl-gold-d); }

/* ---- Página de colección ---- */
.zl-coleccion-hero { position: relative; min-height: 42vh; padding: 160px 24px 60px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; isolation: isolate;
	background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.72) 100%), var(--col-bg, linear-gradient(160deg,#2a211a,#1A1410)) center / cover; }
.zl-coleccion-hero__inner { max-width: 760px; }
.zl-coleccion-hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: var(--zl-gold); }
.zl-coleccion-hero__eyebrow::after { content: ''; display: block; width: 44px; height: 1.5px; background: currentColor; opacity: .85; margin: 14px auto 0; }
.zl-coleccion-hero__title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(36px, 5.4vw, 64px); line-height: 1; margin: 18px 0 0; }
.zl-coleccion-hero__desc { margin: 20px auto 0; max-width: 620px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.86); }

.zl-coleccion { max-width: 1280px; margin: 0 auto; padding: 50px 24px 40px; }
.zl-coleccion__group + .zl-coleccion__group { margin-top: 54px; }
.zl-coleccion__group-head { text-align: center; margin-bottom: 30px; }
.zl-coleccion__group-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30px; margin: 0; display: inline-block; }
.zl-coleccion__group-head h2::after { content: ''; display: block; width: 40px; height: 1.5px; background: var(--zl-gold); margin: 12px auto 0; }
.zl-coleccion__empty { text-align: center; color: var(--zl-taupe); padding: 40px 0; }

/* Card no-comercial: "Ver ficha" en vez de precio */
.zl-card__view { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--zl-gold-d); }

/* ---- Footer de la sección ---- */
.zl-vinos-foot { text-align: center; padding: 20px 24px 70px; color: var(--zl-taupe); font-size: 14px; }
.zl-vinos-foot a { color: var(--zl-gold-d); text-decoration: none; border-bottom: 1px solid var(--zl-line-strong); }
.zl-vinos-foot a:hover { color: var(--zl-black); }

/* =========================================================================
 * BANNER CUVÉE (Home) — full-screen bajo "Nuestra historia"
 * ========================================================================= */
.zl-cuvee-banner { position: relative; min-height: 92vh; display: flex; align-items: center; isolation: isolate; overflow: hidden;
	background: linear-gradient(90deg, rgba(10,7,5,.82) 0%, rgba(10,7,5,.45) 45%, rgba(10,7,5,.15) 100%),
		var(--cuvee-bg, linear-gradient(120deg,#241a12,#0d0a08)) center / cover; }
.zl-cuvee-banner__inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 60px 48px; color: #fff; }
.zl-cuvee-banner__eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: var(--zl-gold); margin-bottom: 20px; }
.zl-cuvee-banner__title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(48px, 8vw, 104px); line-height: .96; letter-spacing: 1px; margin: 0; }
.zl-cuvee-banner__title span { display: block; }
.zl-cuvee-banner__cta { display: inline-block; margin-top: 40px; padding: 15px 40px; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-decoration: none; background: var(--zl-gold); border: 1px solid var(--zl-gold); transition: background .25s, color .25s; }
.zl-cuvee-banner__cta:hover { background: transparent; color: var(--zl-gold); }

@media (max-width: 768px) {
	.zl-collections { padding: 30px 20px 50px; gap: 22px; grid-template-columns: 1fr; }
	.zl-vinos-intro { padding: 120px 20px 10px; }
	.zl-coleccion-hero { min-height: 38vh; padding: 130px 20px 46px; }
	.zl-coleccion { padding: 40px 20px 30px; }
	.zl-cuvee-banner { min-height: 78vh; background: linear-gradient(180deg, rgba(10,7,5,.5) 0%, rgba(10,7,5,.78) 100%), var(--cuvee-bg, linear-gradient(120deg,#241a12,#0d0a08)) center / cover; }
	.zl-cuvee-banner__inner { padding: 48px 24px; text-align: center; }
	.zl-cuvee-banner__eyebrow { letter-spacing: 4px; }
}

/* =========================================================================
 * VISOR DE FICHA TÉCNICA (PDF) — lightbox estilo tienda (patrón AMSEC)
 * ========================================================================= */
body.zl-has-modal { overflow: hidden; }

.zl-pdf-modal {
	--zl-black: #1A1410; --zl-cream: #FBF8F2; --zl-gold: #B8924D; --zl-gold-d: #A98351;
	--zl-taupe: #6B5D4F; --zl-line: rgba(26,20,16,.10); --zl-line-strong: rgba(26,20,16,.18);
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
	margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
	font-family: 'Inter', system-ui, sans-serif;
}
.zl-pdf-modal:not([open]) { display: none; }
.zl-pdf-modal[open] { display: flex; align-items: center; justify-content: center; }
.zl-pdf-modal::backdrop { background: rgba(20, 14, 10, .74); }
.zl-pdf-modal__backdrop { position: fixed; inset: 0; z-index: 0; cursor: zoom-out; }

.zl-pdf-modal__shell {
	position: relative; z-index: 1; display: flex; flex-direction: column;
	width: min(96vw, 980px); max-height: 92vh; background: var(--zl-cream);
	border: 1px solid var(--zl-line-strong); border-radius: 6px; overflow: hidden;
	box-shadow: 0 40px 100px rgba(0,0,0,.5);
}
.zl-pdf-modal__head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 22px; background: var(--zl-cream);
	border-bottom: 1px solid var(--zl-line); position: relative;
}
.zl-pdf-modal__head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px; background: var(--zl-gold); }
.zl-pdf-modal__brand { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zl-pdf-modal__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--zl-gold-d); }
.zl-pdf-modal__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 23px; line-height: 1.1; color: var(--zl-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-pdf-modal__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.zl-pdf-modal__btn {
	display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; font-size: 12px;
	font-weight: 600; letter-spacing: .04em; text-decoration: none; border-radius: 3px;
	border: 1px solid var(--zl-line-strong); color: var(--zl-black); background: transparent;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.zl-pdf-modal__btn svg { flex-shrink: 0; }
.zl-pdf-modal__dl { background: var(--zl-gold); border-color: var(--zl-gold); color: #fff; }
.zl-pdf-modal__dl:hover { background: var(--zl-gold-d); border-color: var(--zl-gold-d); }
.zl-pdf-modal__open:hover { background: var(--zl-black); border-color: var(--zl-black); color: var(--zl-cream); }
.zl-pdf-modal__close {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 50%; border: 1px solid var(--zl-line-strong); background: transparent;
	color: var(--zl-black); cursor: pointer; transition: background .2s ease, color .2s ease;
}
.zl-pdf-modal__close:hover { background: var(--zl-black); color: var(--zl-cream); border-color: var(--zl-black); }
.zl-pdf-modal__viewer { flex: 1; min-height: 0; background: #2b2724; }
.zl-pdf-modal__viewer iframe { display: block; width: 100%; height: 74vh; max-height: 100%; border: 0; background: #2b2724; }

@media (max-width: 720px) {
	.zl-pdf-modal__shell { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
	.zl-pdf-modal__head { padding: 13px 16px; }
	.zl-pdf-modal__title { font-size: 19px; }
	.zl-pdf-modal__btn span { display: none; }
	.zl-pdf-modal__btn { padding: 9px 11px; }
	.zl-pdf-modal__viewer iframe { height: calc(100dvh - 66px); }
}

/* Fix: la X del botón cerrar del visor PDF no se veía (el tema pisa el color de
   los <button>). Se fuerza el stroke del icono con !important. */
.zl-pdf-modal__close { color: var(--zl-black) !important; }
.zl-pdf-modal__close:hover { color: var(--zl-cream) !important; }
.zl-pdf-modal__close svg,
.zl-pdf-modal__close svg path { stroke: currentColor !important; fill: none !important; }

/* Cerrar del visor con carácter × (el tema dejaba el svg en tamaño 0). */
.zl-pdf-modal__close { font-size: 26px !important; line-height: 1 !important; font-weight: 300; padding: 0 !important; }
.zl-pdf-modal__close span { display: block; font-size: 26px; line-height: 1; color: inherit; }