/*
Theme Name:  YITH Wonder Child
Theme URI:   https://tecnologiaseducativas.cl/
Description: Child theme for YITH Wonder — Tecnologías Educativas branding and WooCommerce customizations.
Author:      Camilo Wartenberg
Template:    yith-wonder
Version:     1.6.14
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yith-wonder
*/

/* ═══════════════════════════════════════════════════════════════════════════
   Brand colour tokens — Tecnologías Educativas.cl
   Derived from logo palette:
     Navy deep  #0d1626  — darkest backgrounds, overlays
     Navy       #1a2845  — header, hero bg, card accents
     Blue       #1868e0  — primary CTA, buttons, links
     Cyan       #38d4ee  — accent highlights, dots, tags
     Off-white  #f0f6ff  — text on dark backgrounds
     Heading    #182840  — heading text on light backgrounds
     Body       #445568  — body text on light backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --te-navy-deep:   #0d1626;
    --te-navy:        #1a2845;
    --te-navy-mid:    #253356;
    --te-blue:        #1868e0;
    --te-blue-hover:  #2478f4;
    --te-cyan:        #38d4ee;
    --te-cyan-hover:  #5ae0f5;
    --te-off-white:   #f0f6ff;
    --te-heading:     #182840;
    --te-body:        #445568;
    --te-mist:        #edf3fc;
    --te-border:      rgba(0,0,0,.07);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Block theme — Header / Navigation / Footer
   YITH Wonder is a Full Site Editing (FSE) theme. Header & footer are
   rendered as core/template-part blocks; nav uses core/navigation blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove FSE margin-block-start gap between header / content / footer.
   WP core adds margin-block-start via :where(.wp-site-blocks) > * (0-specificity),
   so a plain class selector overrides it without needing !important. */
.wp-site-blocks > * {
    margin-block-start: 0 !important;
}

/* Header template part */
header.wp-block-template-part {
    background-color: var(--te-navy) !important;
    border-bottom: none !important;
}

/* Doofinder search trigger button in header */
.dtcl-search-btn {
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--te-off-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    opacity: .88;
    transition: color .2s, opacity .2s;
}
.dtcl-search-btn:hover,
.dtcl-search-btn:focus-visible {
    color: var(--te-cyan);
    opacity: 1;
    outline: none;
}
.dtcl-search-btn svg { display: block; }

/* Site logo */
.wp-block-site-logo img,
img.custom-logo {
    height: 44px;
    width: auto;
    max-width: 220px;
    image-rendering: -webkit-optimize-contrast;
}

/* Suppress opacity-0 flash while logo swap JS runs */
img.custom-logo:not([src*="logo-te-dark"]) {
    opacity: 0;
    transition: opacity .15s;
}

/* Site title text (when no logo image) */
header.wp-block-template-part .wp-block-site-title a {
    color: var(--te-off-white) !important;
    text-decoration: none !important;
}

/* Primary nav links */
header.wp-block-template-part .wp-block-navigation-item__content {
    color: rgba(240,246,255,.88) !important;
    text-decoration: none !important;
}
header.wp-block-template-part .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var(--te-cyan) !important;
    text-decoration: none !important;
}
header.wp-block-template-part .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--te-cyan) !important;
}

/* Nav submenu dropdown */
header.wp-block-template-part .wp-block-navigation__submenu-container {
    background-color: var(--te-navy-mid) !important;
    border-top: 2px solid var(--te-cyan) !important;
    box-shadow: 0 8px 24px rgba(13,22,38,.4) !important;
}
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: rgba(240,246,255,.82) !important;
}
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--te-cyan) !important;
    background-color: rgba(56,212,238,.08) !important;
}

/* Mobile nav open panel */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--te-navy) !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: rgba(240,246,255,.88) !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part .wp-block-navigation__responsive-container-close {
    color: var(--te-off-white) !important;
}

/* WooCommerce mini-cart in header */
header.wp-block-template-part .wc-block-mini-cart__button {
    color: var(--te-off-white) !important;
}
header.wp-block-template-part .wc-block-mini-cart__badge {
    background-color: var(--te-blue) !important;
    color: #fff !important;
}

/* ── Footer shell ── */
footer.wp-block-template-part {
    background-color: var(--te-navy-deep) !important;
    border-top: none !important;
    color: rgba(240,246,255,.75) !important;
    position: relative;
}

/* Animated top accent line */
footer.wp-block-template-part::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--te-blue) 20%,
        var(--te-cyan) 50%,
        var(--te-blue) 80%,
        transparent 100%);
    box-shadow: 0 0 18px rgba(56,212,238,.5);
    pointer-events: none;
}

footer.wp-block-template-part a {
    text-decoration: none !important;
}

footer.wp-block-template-part p,
footer.wp-block-template-part small,
footer.wp-block-template-part .wp-block-paragraph {
    color: rgba(240,246,255,.5) !important;
}

/* Column headings — small-caps label with cyan underline */
footer.wp-block-template-part .wp-block-heading {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: rgba(56,212,238,.7) !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(56,212,238,.18) !important;
}

/* ── Tag-chip navigation: override vertical list → wrapping chip cloud ── */
footer.wp-block-template-part .wp-block-navigation > ul,
footer.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    align-items: flex-start !important;
}

footer.wp-block-template-part .wp-block-navigation-item {
    display: inline-flex !important;
    flex-shrink: 0 !important;
}

footer.wp-block-template-part .wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(240,246,255,.05) !important;
    border: 1px solid rgba(240,246,255,.12) !important;
    border-radius: 100px !important;
    padding: 5px 13px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
    color: rgba(240,246,255,.7) !important;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease,
        box-shadow .2s ease !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

footer.wp-block-template-part .wp-block-navigation-item__content:hover {
    background: rgba(56,212,238,.12) !important;
    border-color: rgba(56,212,238,.55) !important;
    color: var(--te-cyan) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(56,212,238,.18) !important;
}

/* Social links row */
footer.wp-block-template-part .wp-block-social-links {
    margin-top: 8px !important;
}
footer.wp-block-template-part .wp-block-social-link a {
    background: rgba(240,246,255,.07) !important;
    border: 1px solid rgba(240,246,255,.12) !important;
    border-radius: 50% !important;
    transition: background .2s, border-color .2s, transform .15s !important;
}
footer.wp-block-template-part .wp-block-social-link a:hover {
    background: rgba(56,212,238,.15) !important;
    border-color: rgba(56,212,238,.55) !important;
    transform: translateY(-2px) !important;
}

/* Copyright bar */
footer.wp-block-template-part .wp-block-paragraph {
    font-size: 11px !important;
    letter-spacing: .04em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   New site header (#dtcl-header)
   ═══════════════════════════════════════════════════════════════════════════ */

#dtcl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: var(--te-navy);
	border-bottom: 1px solid transparent;
	transition: background 0.25s, backdrop-filter 0.25s, border-color 0.25s;
}

/* WP admin bar is position:fixed z-index:99999 — header must stick below it */
.admin-bar #dtcl-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* Mobile menu top must match header-bottom when admin bar is present */
.admin-bar #dtcl-mob-menu {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 64px);
}

#dtcl-header.is-scrolled {
	background: rgba(26, 40, 69, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: rgba(56, 212, 238, 0.15);
}

/* ── Nav bar ── */
.dtcl-hdr-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
	gap: 1rem;
}

/* ── Logo ── */
.dtcl-hdr-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none !important;
	border-radius: 6px;
	padding: 4px;
	margin: -4px;
}
.dtcl-hdr-logo img {
	height: 40px;
	width: auto;
	max-width: 200px;
	display: block;
}

/* ── Desktop menu ── */
.dtcl-hdr-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 2px;
	flex: 1;
}
@media (min-width: 768px) {
	.dtcl-hdr-menu { display: flex; }
}

.dtcl-hdr-trigger,
.dtcl-hdr-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(240, 246, 255, 0.88) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: color 0.2s, background 0.2s;
	line-height: 1;
	white-space: nowrap;
	box-shadow: none !important;
}
.dtcl-hdr-trigger:hover,
.dtcl-hdr-link:hover,
.dtcl-hdr-has-dd.is-open > .dtcl-hdr-trigger {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.09) !important;
	transform: none !important;
	filter: none !important;
}

.dtcl-hdr-chevron {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}
.dtcl-hdr-has-dd.is-open .dtcl-hdr-chevron {
	transform: rotate(180deg);
}

/* ── Dropdown ── */
.dtcl-hdr-has-dd { position: relative; }

.dtcl-hdr-dd {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 460px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.06);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 200;
}
.dtcl-hdr-has-dd.is-open .dtcl-hdr-dd {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(0) !important;
}

.dtcl-hdr-dd-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dtcl-hdr-dd-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none !important;
	color: inherit !important;
	transition: background 0.15s;
}
.dtcl-hdr-dd-item:hover {
	background: rgba(24, 104, 224, 0.06) !important;
}

.dtcl-hdr-dd-icon {
	font-size: 18px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--te-mist);
	border: 1px solid rgba(24, 104, 224, 0.1);
	border-radius: 10px;
	flex-shrink: 0;
}

.dtcl-hdr-dd-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dtcl-hdr-dd-body strong {
	font-size: 13px;
	font-weight: 700;
	color: var(--te-heading);
	line-height: 1.2;
}
.dtcl-hdr-dd-body span {
	font-size: 11px;
	color: var(--te-body);
	line-height: 1.4;
}

.dtcl-hdr-dd-foot {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	margin-top: 6px;
	padding: 8px 12px 4px;
}
.dtcl-hdr-dd-foot a {
	font-size: 13px;
	font-weight: 600;
	color: var(--te-blue) !important;
	text-decoration: none !important;
}
.dtcl-hdr-dd-foot a:hover { text-decoration: underline !important; }

/* ── Right actions ── */
.dtcl-hdr-right {
	display: none;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.dtcl-hdr-right { display: flex; }
}

/* ── Icon buttons (search, account, hamburger) ── */
.dtcl-hdr-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px !important;
	background: transparent !important;
	border: none !important;
	color: rgba(240, 246, 255, 0.82) !important;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s, background 0.2s;
	text-decoration: none !important;
	box-shadow: none !important;
	flex-shrink: 0;
}
.dtcl-hdr-icon-btn:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1) !important;
	transform: none !important;
	filter: none !important;
}

/* Override generic .dtcl-search-btn for the new header context */
#dtcl-header .dtcl-search-btn {
	color: rgba(240, 246, 255, 0.82) !important;
	opacity: 1 !important;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 8px !important;
}
#dtcl-header .dtcl-search-btn:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1) !important;
}

/* Mini-cart block inside new header */
#dtcl-header .wc-block-mini-cart__button {
	color: rgba(240, 246, 255, 0.82) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color 0.2s, background 0.2s;
}
#dtcl-header .wc-block-mini-cart__button:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1) !important;
}
#dtcl-header .wc-block-mini-cart__badge {
	background: var(--te-blue) !important;
	color: #fff !important;
}

/* ── CTA button ── */
.dtcl-hdr-cta-btn {
	display: inline-flex;
	align-items: center;
	background: var(--te-blue) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 8px 16px;
	border-radius: 50px !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 4px 14px rgba(24, 104, 224, 0.35) !important;
	white-space: nowrap;
	line-height: 1;
}
.dtcl-hdr-cta-btn:hover {
	background: var(--te-blue-hover) !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(24, 104, 224, 0.5) !important;
	text-decoration: none !important;
	filter: none !important;
}

/* ── Hamburger (mobile only) ── */
.dtcl-hdr-burger {
	display: inline-flex !important;
	width: 40px !important;
	height: 40px !important;
}
@media (min-width: 768px) {
	.dtcl-hdr-burger { display: none !important; }
}

/* ── Mobile search button (shown only on mobile, hidden on desktop where
   .dtcl-hdr-right already shows the search btn) ── */
.dtcl-mob-search {
	display: inline-flex !important;
}
@media (min-width: 768px) {
	.dtcl-mob-search { display: none !important; }
}

/* ── Search overlay (opened by any .dtcl-search-btn) ── */
#dtcl-search-overlay {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	z-index: 101;
	display: flex;
	justify-content: center;
	padding: 14px clamp(1rem, 3vw, 2rem);
	background: rgba(13, 22, 38, 0.98);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(56, 212, 238, 0.18);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
	/* Hidden via opacity/visibility (not display:none) so the field keeps its
	   layout and the overlay can fade in smoothly. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#dtcl-search-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.admin-bar #dtcl-search-overlay {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 64px);
}
.dtcl-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 720px;
	background: #fff;
	border-radius: 12px;
	padding: 8px 12px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.dtcl-search-form-icon { color: var(--te-blue, #1868e0); flex-shrink: 0; }
/* Magnifier is a real submit button so a click always runs the search,
   independent of the Doofinder Live Layer (which may not be loaded). */
.dtcl-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none !important;
	background: transparent !important;
	color: var(--te-blue, #1868e0);
	cursor: pointer;
	border-radius: 8px !important;
	flex-shrink: 0;
	padding: 0;
	box-shadow: none !important;
}
.dtcl-search-submit:hover { background: rgba(24, 104, 224, 0.08) !important; }
.dtcl-search-submit .dtcl-search-form-icon { color: inherit; }
.dtcl-search-field {
	flex: 1;
	min-width: 0;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
	color: #0d1626;
	padding: 6px 0;
	box-shadow: none !important;
}
.dtcl-search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none !important;
	background: transparent !important;
	color: #5a6577;
	cursor: pointer;
	border-radius: 8px !important;
	flex-shrink: 0;
	padding: 0;
	box-shadow: none !important;
}
.dtcl-search-close:hover {
	background: rgba(0, 0, 0, 0.06) !important;
	color: #0d1626;
}

#dtcl-burger-svg {
	transition: transform 0.3s ease;
}
#dtcl-burger-svg.is-open {
	transform: rotate(-45deg);
}
#dtcl-burger-path {
	stroke-dasharray: 12 63;
	transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease;
}
#dtcl-burger-path.is-open {
	stroke-dasharray: 20 300;
	stroke-dashoffset: -32.42px;
}

/* ── Mobile menu ── */
#dtcl-mob-menu {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	background: rgba(13, 22, 38, 0.97);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s;
}
#dtcl-mob-menu[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
@media (min-width: 768px) {
	#dtcl-mob-menu { display: none !important; }
}

.dtcl-mob-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 1.25rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
	overflow-y: auto;
	gap: 1.5rem;
}

.dtcl-mob-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dtcl-mob-section {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(56, 212, 238, 0.7);
	margin: 0 0 6px;
	padding: 0 10px;
}

.dtcl-mob-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(240, 246, 255, 0.88) !important;
	text-decoration: none !important;
	transition: background 0.15s, color 0.15s;
}
.dtcl-mob-link:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #fff !important;
}
.dtcl-mob-link--all {
	font-size: 13px;
	color: var(--te-cyan) !important;
	margin-top: 2px;
}

.dtcl-mob-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.09);
	margin: 6px 10px;
}

.dtcl-mob-footer {
	display: flex;
	flex-direction: column;
}

/* ── Site-wide link colour ── */
a { color: var(--te-blue); }
a:hover { color: var(--te-blue-hover); }

/* ── Global buttons (wp-element-button covers FSE button elements) ── */
.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
    background-color: var(--te-blue) !important;
    color: #fff !important;
    border-radius: 50px !important;
    border: none !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--te-blue-hover) !important;
    color: #fff !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce global overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* All WC classic-template buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button {
    background: var(--te-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    transition: background .2s, transform .15s, box-shadow .2s !important;
    box-shadow: 0 4px 16px rgba(24,104,224,.3) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background: var(--te-blue-hover) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(24,104,224,.45) !important;
    filter: none !important;
}

/* Price colour */
.woocommerce .price,
.woocommerce .woocommerce-Price-amount,
.woocommerce span.price,
.woocommerce ins .woocommerce-Price-amount {
    color: var(--te-blue) !important;
}

/* Star ratings */
.woocommerce .star-rating span,
.woocommerce .star-rating::before { color: var(--te-cyan) !important; }

/* Product gallery — WC JS sets opacity:1 via flexslider callback but the
   HTTPS/HTTP origin mismatch blocks CSSOM, leaving the CSS transition stuck at 0 */
.woocommerce-product-gallery {
    opacity: 1 !important;
    transition: none !important;
}

/* Sale badge */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
    background: var(--te-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
}

/* ── WhatsApp floating button — keep WhatsApp brand green ── */
.dtcl-whatsapp-btn {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    padding: 12px 20px 12px 14px;
    box-shadow: 0 4px 16px rgba(37,211,102,.45);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    transition: background .2s, box-shadow .2s, transform .2s;
    animation: dtcl-wa-pulse 2.8s ease-in-out infinite;
}
.dtcl-whatsapp-btn:hover,
.dtcl-whatsapp-btn:focus {
    background: #1ebe5d;
    box-shadow: 0 6px 24px rgba(37,211,102,.6);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
    animation: none;
}
.dtcl-whatsapp-btn svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    fill: #fff;
}
@keyframes dtcl-wa-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,.45); }
    50%       { box-shadow: 0 4px 28px rgba(37,211,102,.75); }
}
@media (max-width: 600px) {
    .dtcl-whatsapp-btn span { display: none; }
    .dtcl-whatsapp-btn { padding: 13px; border-radius: 50%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: Featured Products Hero Slideshow
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-hero-slideshow {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: var(--te-navy);
}

/* ── Subtle tech-grid beam cones ── */
.dtcl-beam {
    position: absolute;
    top: -10px;
    height: 120%;
    pointer-events: none;
    mix-blend-mode: screen;
    transform-origin: top center;
    z-index: 4;
}
.dtcl-beam--l {
    left: 50%;
    width: 40%;
    background: linear-gradient(180deg,
        rgba(24,104,224,.32)  0%,
        rgba(56,212,238,.12) 42%,
        rgba(56,212,238,.03) 78%,
        transparent 100%);
    clip-path: polygon(40% 0%, 60% 0%, 94% 100%, 6% 100%);
    animation: dtcl-beam-l 9s ease-in-out infinite alternate;
}
.dtcl-beam--r {
    right: 3%;
    width: 28%;
    background: linear-gradient(180deg,
        rgba(24,104,224,.22)  0%,
        rgba(56,212,238,.08) 48%,
        rgba(56,212,238,.02) 80%,
        transparent 100%);
    clip-path: polygon(30% 0%, 70% 0%, 96% 100%, 4% 100%);
    animation: dtcl-beam-r 13s ease-in-out infinite alternate;
}
@keyframes dtcl-beam-l {
    0%   { transform: rotate(-7deg); opacity: .65; }
    100% { transform: rotate(6deg);  opacity: 1;   }
}
@keyframes dtcl-beam-r {
    0%   { transform: rotate(6deg);  opacity: .5;  }
    100% { transform: rotate(-7deg); opacity: .88; }
}

/* ── Masthead strip (hidden) ── */
.dtcl-spotlight-head { display: none; }

/* ── Individual slide ── */
.dtcl-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s cubic-bezier(.4,0,.2,1), visibility .9s;
}
.dtcl-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* ── Background ── */
.dtcl-slide-bg {
    position: absolute;
    inset: 0;
}

/* ── Product image: floats right, vignette mask dissolves edges ── */
.dtcl-slide-img {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%) scale(1.06);
    transition: transform 10s ease-out, opacity .9s ease;
    max-height: 86%;
    max-width: 50%;
    width: auto;
    object-fit: contain;
    filter: brightness(1.05) contrast(1.04);
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%,  black 18%, black 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%,  black  6%, black 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,  transparent 0%,  black 18%, black 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%,  black  6%, black 92%, transparent 100%);
    mask-composite: intersect;
    opacity: 0;
    transition: transform 10s ease-out, opacity 1.1s ease 0.15s;
    pointer-events: none;
}
.dtcl-hero-slide.is-active .dtcl-slide-img {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

/* ── Overlay: left text panel + right edge mask + cyan halo ── */
.dtcl-slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(13,22,38,.97)  0%,
            rgba(13,22,38,.88) 32%,
            rgba(13,22,38,.35) 54%,
            transparent        70%),
        linear-gradient(270deg,
            rgba(13,22,38,.82)  0%,
            rgba(13,22,38,.38) 14%,
            transparent        32%),
        linear-gradient(180deg,
            transparent         55%,
            rgba(13,22,38,.64) 100%),
        radial-gradient(ellipse 50% 68% at 74% 44%,
            rgba(56,212,238,.08) 0%,
            transparent 100%);
}

/* ── Content layout ── */
.dtcl-slide-wrap {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 52px clamp(24px, 6vw, 96px) 48px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Staggered reveal ── */
.dtcl-slide-pre,
.dtcl-slide-cat,
.dtcl-slide-title,
.dtcl-slide-subtitle,
.dtcl-slide-desc,
.dtcl-slide-price,
.dtcl-slide-cta {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
}
.dtcl-hero-slide.is-active .dtcl-slide-pre      { opacity: 1; transform: none; transition-delay: .35s; }
.dtcl-hero-slide.is-active .dtcl-slide-cat      { opacity: 1; transform: none; transition-delay: .48s; }
.dtcl-hero-slide.is-active .dtcl-slide-title    { opacity: 1; transform: none; transition-delay: .58s; }
.dtcl-hero-slide.is-active .dtcl-slide-subtitle { opacity: 1; transform: none; transition-delay: .64s; }
.dtcl-hero-slide.is-active .dtcl-slide-desc     { opacity: 1; transform: none; transition-delay: .72s; }
.dtcl-hero-slide.is-active .dtcl-slide-price    { opacity: 1; transform: none; transition-delay: .82s; }
.dtcl-hero-slide.is-active .dtcl-slide-cta      { opacity: 1; transform: none; transition-delay: .92s; }

.dtcl-slide-subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(56,212,238,.7);
    margin: -8px 0 16px;
}
.dtcl-slide-pre {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--te-cyan);
    margin-bottom: 10px;
}
.dtcl-slide-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--te-cyan);
    background: rgba(56,212,238,.1);
    border: 1px solid rgba(56,212,238,.38);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 18px;
    line-height: 1;
}
.dtcl-slide-title {
    font-size: clamp(22px, 3.5vw, 42px);
    font-weight: 800;
    color: var(--te-off-white);
    line-height: 1.15;
    letter-spacing: -.022em;
    margin: 0 0 14px;
    max-width: 540px;
}
.dtcl-slide-desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(240,246,255,.72);
    margin: 0 0 20px;
    max-width: 460px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dtcl-slide-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--te-cyan);
    margin: 0 0 28px;
    line-height: 1;
}
.dtcl-slide-price ins,
.dtcl-slide-price .woocommerce-Price-amount {
    text-decoration: none;
    color: inherit;
}
.dtcl-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--te-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 6px 28px rgba(24,104,224,.4);
    transition: background .2s, transform .2s, box-shadow .2s;
}
.dtcl-slide-cta svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform .2s;
}
.dtcl-slide-cta:hover,
.dtcl-slide-cta:focus-visible {
    background: var(--te-blue-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(24,104,224,.55);
}
.dtcl-slide-cta:hover svg { transform: translateX(5px); }

/* ── Stage floor glow ── */
.dtcl-stage-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(24,104,224,.6)  18%,
        rgba(56,212,238,1)   50%,
        rgba(24,104,224,.6)  82%,
        transparent 100%);
    box-shadow:
        0  0 14px rgba(56,212,238,.6),
        0 -8px 40px rgba(24,104,224,.18);
    z-index: 21;
}

/* ── Progress bar ── */
.dtcl-slide-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(56,212,238,.12);
    z-index: 22;
}
.dtcl-slide-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--te-blue), var(--te-cyan));
    transform-origin: left;
    transform: scaleX(0);
}

/* ── Prev / Next arrows ── */
.dtcl-slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24,104,224,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(56,212,238,.38);
    border-radius: 50%;
    color: var(--te-cyan);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.dtcl-slide-arrow svg { width: 20px; height: 20px; }
.dtcl-slide-arrow:hover {
    background: rgba(24,104,224,.32);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 22px rgba(56,212,238,.3);
}
.dtcl-slide-arrow--prev { left: 20px; }
.dtcl-slide-arrow--next { right: 20px; }

/* ── Dot navigation ── */
.dtcl-slide-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dtcl-slide-dot {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: rgba(56,212,238,.28);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .25s, width .3s cubic-bezier(.4,0,.2,1);
}
.dtcl-slide-dot.is-active {
    background: var(--te-cyan);
    width: 44px;
}
.dtcl-slide-counter { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .dtcl-hero-slideshow { height: 500px; }
    .dtcl-slide-arrow { display: none; }
    .dtcl-beam--r { display: none; }
}
@media (max-width: 768px) {
    .dtcl-hero-slideshow { height: min(540px, 85svh); }
    .dtcl-slide-desc { -webkit-line-clamp: 2; }
    .dtcl-slide-dots { gap: 6px; bottom: 16px; }
    .dtcl-slide-dot {
        height: 44px;
        padding: 20px 0;
        box-sizing: border-box;
        background-clip: content-box;
        border-radius: 2px;
    }
}
@media (max-width: 600px) {
    .dtcl-hero-slideshow { height: min(560px, 92svh); min-height: 500px; }
    .dtcl-slide-img {
        top: 0;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 68%;
        max-height: 52%;
        opacity: 0;
        -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
        mask-composite: add;
    }
    .dtcl-hero-slide.is-active .dtcl-slide-img {
        opacity: 1;
        transform: translateX(-50%);
    }
    .dtcl-slide-overlay {
        background: linear-gradient(180deg,
            rgba(13,22,38,.18)  0%,
            rgba(13,22,38,.28) 30%,
            rgba(13,22,38,.88) 52%,
            rgba(13,22,38,.97) 65%,
            rgba(13,22,38,1.0) 78%,
            rgba(13,22,38,1.0) 100%);
    }
    .dtcl-slide-wrap {
        align-items: flex-end;
        padding: 0 22px calc(72px + env(safe-area-inset-bottom, 0px)) 22px;
        box-sizing: border-box;
    }
    .dtcl-slide-inner { max-width: 100%; width: 100%; }
    .dtcl-slide-pre      { display: none; }
    .dtcl-slide-subtitle { display: none; }
    .dtcl-hero-slide.is-active .dtcl-slide-cat   { transition-delay: .15s; }
    .dtcl-hero-slide.is-active .dtcl-slide-title { transition-delay: .22s; }
    .dtcl-hero-slide.is-active .dtcl-slide-desc  { transition-delay: .30s; }
    .dtcl-hero-slide.is-active .dtcl-slide-price { transition-delay: .36s; }
    .dtcl-hero-slide.is-active .dtcl-slide-cta   { transition-delay: .42s; }
    .dtcl-slide-cat   { margin-bottom: 10px; font-size: 10px; padding: 4px 12px; }
    .dtcl-slide-title { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.2; max-width: 100%; margin-bottom: 8px; }
    .dtcl-slide-desc  { -webkit-line-clamp: 2; font-size: 14px; line-height: 1.5; margin-bottom: 12px; max-width: 100%; }
    .dtcl-slide-price { font-size: 20px; margin-bottom: 16px; }
    .dtcl-slide-cta   { display: flex; width: 100%; justify-content: center; padding: 14px 20px; font-size: 13px; box-sizing: border-box; }
    .dtcl-slide-counter { display: none; }
    .dtcl-beam { display: none; }
    .dtcl-slide-dots { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
    .dtcl-slide-title { font-size: 20px; }
    .dtcl-slide-desc  { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce Category / Tag Pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the block-theme archive title + breadcrumbs on tag/brand pages — the
   dtcl-cat-hero injected above <main> already shows those. */
.tax-product_tag .wp-block-query-title,
.tax-product_tag .wc-block-breadcrumbs,
.tax-berocket_brand .wp-block-query-title,
.tax-berocket_brand .wc-block-breadcrumbs {
    display: none;
}

/* ── Brand hero logo ── */
.dtcl-brand-hero-logo {
    height: clamp(36px, 6vw, 56px);
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .9;
    flex-shrink: 0;
}

/* ── Manufacturer intro — extends .dtcl-cat-curriculum ── */
.dtcl-brand-intro .dtcl-cat-pills { margin-bottom: 20px; }

.dtcl-brand-website-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cat-color, var(--te-blue));
    text-decoration: none;
    border: 2px solid var(--cat-color, var(--te-blue));
    border-radius: 50px;
    padding: 8px 18px;
    transition: background .2s, color .2s;
    line-height: 1;
    white-space: nowrap;
}
.dtcl-brand-website-link:hover {
    background: var(--cat-color, var(--te-blue));
    color: #fff;
    text-decoration: none;
}
.dtcl-brand-website-link svg { flex-shrink: 0; }

/* ── Sort / result-count bar above the product grid ── */
.dtcl-brand-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(24,104,224,.1);
}
.dtcl-brand-controls .woocommerce-result-count {
    font-size: 13px;
    color: var(--te-body);
    margin: 0;
}
.dtcl-brand-controls .woocommerce-ordering {
    margin: 0;
}
.dtcl-brand-controls .woocommerce-ordering select {
    font-size: 13px;
    border: 1px solid rgba(24,104,224,.25);
    border-radius: 8px;
    padding: 7px 12px;
    color: var(--te-heading);
    background: #fff;
    cursor: pointer;
}

.dtcl-cat-page {
    --cat-color:       var(--te-blue);
    --cat-color-light: rgba(24,104,224,.09);
    --cat-color-glow:  rgba(24,104,224,.4);
}

/* ── Hero ── */
.dtcl-cat-hero {
    background: var(--te-navy);
    border-radius: 16px;
    padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 52px);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.dtcl-cat-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.dtcl-cat-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cat-color);
    box-shadow: 0 0 16px var(--cat-color-glow);
}
.dtcl-cat-breadcrumb {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
    color: rgba(240,246,255,.60);
    margin-bottom: 22px;
    letter-spacing: .02em;
}
.dtcl-cat-breadcrumb a { color: inherit; text-decoration: none; }
.dtcl-cat-breadcrumb a:hover { color: var(--te-cyan); }
.dtcl-cat-breadcrumb span:last-child { color: rgba(240,246,255,.7); }
.dtcl-cat-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}
.dtcl-cat-hero-emoji {
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1;
    filter: drop-shadow(0 0 14px var(--cat-color-glow));
    flex-shrink: 0;
}
.dtcl-cat-hero-title {
    font-size: clamp(34px, 5.5vw, 60px);
    font-weight: 800;
    color: var(--te-off-white);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin: 0;
}
.dtcl-cat-hero-desc {
    position: relative;
    z-index: 1;
    font-size: 16px;
    color: rgba(240,246,255,.62);
    line-height: 1.65;
    margin: 18px 0 0;
    max-width: 660px;
}

/* ── Curriculum intro card ── */
.dtcl-cat-curriculum {
    background: #fff;
    border-left: 4px solid var(--cat-color);
    border-radius: 0 14px 14px 0;
    padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 44px);
    margin-bottom: 36px;
    box-shadow: 0 2px 18px rgba(0,0,0,.07);
}
.dtcl-cat-curriculum h2 {
    font-size: clamp(17px, 2.5vw, 22px);
    font-weight: 800;
    color: var(--te-heading);
    margin: 0 0 14px;
    line-height: 1.2;
}
.dtcl-cat-curriculum p {
    font-size: 15px;
    line-height: 1.78;
    color: var(--te-body);
    margin: 0 0 20px;
}
.dtcl-cat-curriculum p strong { color: var(--te-heading); font-weight: 700; }
.dtcl-cat-curriculum p:last-child { margin-bottom: 0; }

/* Pill tags */
.dtcl-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dtcl-cat-pills li {
    background: var(--cat-color-light);
    color: var(--te-blue);
    border: 1px solid rgba(24,104,224,.35);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* ── Product grid ── */
.dtcl-cat-products { margin-bottom: 48px; }
.dtcl-cat-products .woocommerce-notices-wrapper { margin-bottom: 16px; }
.dtcl-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Product card ── */
.dtcl-product-card {
    background: #fff;
    border: 1px solid rgba(24,104,224,.1);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(26,40,69,.07);
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s cubic-bezier(.4,0,.2,1),
                border-color .25s;
}
.dtcl-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(24,104,224,.14);
    border-color: rgba(24,104,224,.25);
}
.dtcl-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--te-mist);
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
}
.dtcl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .35s ease;
}
.dtcl-product-card:hover .dtcl-card-media img { transform: scale(1.07); }
.dtcl-card-hover-badge {
    position: absolute;
    inset: 0;
    background: rgba(13,22,38,.52);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    opacity: 0;
    transition: opacity .2s;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.dtcl-product-card:hover .dtcl-card-hover-badge { opacity: 1; }
.dtcl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
    gap: 6px;
}
.dtcl-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--te-heading);
    margin: 0;
}
.dtcl-card-title a { color: inherit; text-decoration: none; }
.dtcl-card-title a:hover { color: var(--te-blue); }
.dtcl-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--te-body);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dtcl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(24,104,224,.1);
}
.dtcl-card-price {
    font-size: 17px;
    font-weight: 700;
    color: var(--te-blue);
    line-height: 1;
}
.dtcl-card-price .woocommerce-Price-amount { color: inherit; }
.dtcl-card-price ins { text-decoration: none; }
.dtcl-card-price del { color: rgba(0,0,0,.55); font-size: 13px; }
.dtcl-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--te-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 8px 15px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 3px 12px rgba(24,104,224,.3);
}
.dtcl-card-btn:hover,
.dtcl-card-btn:focus-visible {
    background: var(--te-blue-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(24,104,224,.45);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .dtcl-products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
    .dtcl-cat-hero        { border-radius: 10px; }
    .dtcl-cat-hero-body   { flex-direction: column; align-items: flex-start; gap: 10px; }
    .dtcl-cat-curriculum  { border-radius: 0 8px 8px 0; }
    .dtcl-products-grid   { grid-template-columns: 1fr; gap: 14px; }
    .dtcl-card-footer     { flex-wrap: wrap; }
    .dtcl-card-btn        { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UAGB Homepage section — brand gradient background
   Block ID: uagb-block-78354c94
   ═══════════════════════════════════════════════════════════════════════════ */

.uagb-block-78354c94 { padding: 56px 20px !important; }

.uagb-block-78354c94.uagb-section__background-image,
.uagb-block-78354c94 {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px),
        radial-gradient(ellipse 55% 55% at 85% 20%, rgba(56,212,238,.11) 0%, transparent 65%),
        radial-gradient(ellipse 50% 70% at 15% 80%, rgba(24,104,224,.13) 0%, transparent 65%),
        linear-gradient(145deg, #0d1626 0%, #1a2845 45%, #162240 100%) !important;
    background-size: 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
    background-attachment: scroll !important;
}
.uagb-block-78354c94 > .uagb-section__overlay { opacity: 0 !important; }
.uagb-block-78354c94 h1,
.uagb-block-78354c94 h2,
.uagb-block-78354c94 h3 { color: var(--te-off-white) !important; }
.uagb-block-78354c94 p { color: rgba(240,246,255,.75) !important; }
.uagb-block-78354c94 {
    border-left: 3px solid var(--te-cyan) !important;
    position: relative;
}
.uagb-block-78354c94::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(24,104,224,.5) 20%,
        rgba(56,212,238,.9) 50%,
        rgba(24,104,224,.5) 80%,
        transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Featured Products Strip — homepage section below hero
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-featured-strip {
    background: #fff;
    padding: 72px 0 80px;
    position: relative;
    overflow: hidden;
}
.dtcl-featured-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%, var(--te-blue) 20%, var(--te-cyan) 50%, var(--te-blue) 80%, transparent 100%);
    box-shadow: 0 0 24px rgba(56,212,238,.5);
}
.dtcl-featured-strip::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(56,212,238,.07) 0%, rgba(24,104,224,.04) 45%, transparent 70%);
    pointer-events: none;
}
.dtcl-fs-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 80px);
}
.dtcl-fs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}
.dtcl-fs-titles { flex: 1; }
.dtcl-fs-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--te-cyan);
    padding-left: 28px;
    position: relative;
    margin-bottom: 8px;
}
.dtcl-fs-eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 20px; height: 2px;
    background: var(--te-cyan);
    transform: translateY(-50%);
}
.dtcl-fs-title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    color: var(--te-heading);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
}
.dtcl-fs-see-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--te-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 22px;
    border: 2px solid var(--te-blue);
    border-radius: 50px;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.dtcl-fs-see-all:hover { background: var(--te-blue); color: #fff; text-decoration: none; }
.dtcl-fs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.dtcl-fs-card {
    background: #fff;
    border: 1.5px solid rgba(24,104,224,.1);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s;
}
.dtcl-fs-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(24,104,224,.16), 0 0 0 1px rgba(56,212,238,.3);
    border-color: var(--te-cyan);
    text-decoration: none;
}
.dtcl-fs-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--te-mist);
    overflow: hidden;
    flex-shrink: 0;
}
.dtcl-fs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform .4s ease;
}
.dtcl-fs-card:hover .dtcl-fs-card-img img { transform: scale(1.08); }
.dtcl-fs-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .5s ease;
    pointer-events: none;
}
.dtcl-fs-card:hover .dtcl-fs-card-img::after { transform: translateX(100%); }
.dtcl-fs-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 20px;
    gap: 8px;
}
.dtcl-fs-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--te-heading);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dtcl-fs-card-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--te-blue);
    margin-top: auto;
    padding-top: 8px;
}
.dtcl-fs-card-price .woocommerce-Price-amount { color: inherit; }
.dtcl-fs-card-price ins { text-decoration: none; }
.dtcl-fs-card-price del { font-size: 12px; color: rgba(0,0,0,.55); font-weight: 400; }
.dtcl-fs-card-cta {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--te-blue);
    padding: 10px;
    border-radius: 10px;
    margin-top: 4px;
    transition: background .2s;
}
.dtcl-fs-card:hover .dtcl-fs-card-cta { background: var(--te-cyan); color: var(--te-navy); }
.dtcl-fs-cta-wrap { text-align: center; }
.dtcl-fs-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--te-navy);
    color: var(--te-off-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 24px rgba(26,40,69,.2);
}
.dtcl-fs-cta:hover {
    background: var(--te-blue);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(24,104,224,.4);
}
@media (max-width: 1024px) { .dtcl-fs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .dtcl-fs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .dtcl-fs-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
    .dtcl-fs-see-all { align-self: flex-start; }
    .dtcl-featured-strip { padding: 56px 0 64px; }
}
@media (max-width: 480px) {
    .dtcl-fs-grid { grid-template-columns: 1fr; }
    .dtcl-featured-strip { padding: 40px 0 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* UAGB hero block reduced padding on mobile */
@media (max-width: 768px) { .uagb-block-78354c94 { padding: 40px 20px !important; } }
@media (max-width: 480px) { .uagb-block-78354c94 { padding: 32px 16px !important; } }

/* WooCommerce full-width primary action buttons on small screens */
@media (max-width: 600px) {
    .woocommerce .single_add_to_cart_button,
    .woocommerce .ywraq-add-to-quote,
    .woocommerce .yith-ywraq-add-to-quote-button {
        width: 100% !important;
        text-align: center !important;
    }
    .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Category page tighter padding at very small screens */
@media (max-width: 480px) {
    .dtcl-cat-hero { padding: 22px 18px; }
    .dtcl-cat-curriculum { padding: 18px 18px 18px 20px; }
}

/* ── Homepage card grid (Laboratorios / Energías Renovables sections) ────────
   CSS was previously in Customizer Additional CSS under Astra Child.
   Fonts (Raleway, Roboto Slab) are enqueued via functions.php.
   ─────────────────────────────────────────────────────────────────────────── */
.wrapper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 20rem);
    justify-content: center;
}

.card--1 .card__img, .card--1 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2021/07/Screen-Shot-2022-09-26-at-12.54.07-PM.jpg');
}
.card--2 .card__img, .card--2 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2021/07/Screen-Shot-2022-09-26-at-1.17.11-PM.jpg');
}
.card--3 .card__img, .card--3 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2021/07/Screen-Shot-2022-09-26-at-12.38.41-PM.jpg');
}
.card--4 .card__img, .card--4 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2021/07/Screen-Shot-2022-09-26-at-1.55.29-PM.jpg');
}
.card--5 .card__img, .card--5 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2023/05/action.labq2_.ves-bta.ves-rb.elb-solar._voltage._current._kidwind._solar-energy._middle-school.001-scaled.jpg');
}
.card--6 .card__img, .card--6 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2023/05/action.kw-bwxc.ves-bta.ves-vl._kidwind._environmental._wind-energy._high-school._catalog-cover.001._cmyk-scaled.jpg');
}
.card--7 .card__img, .card--7 .card__img--hover {
    background-image: url('https://tecnologiaseducativas.cl/wp-content/uploads/2023/05/Screenshot-2023-04-03-at-11.18.42-AM.jpg');
}

.card__img {
    visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.card__info-hover {
    position: absolute;
    padding: 16px;
    width: 100%;
    opacity: 0;
    top: 0;
}
.card__img--hover {
    transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 15rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    top: 0;
}
.card {
    margin-right: 25px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fff;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 10px -7px rgba(0,0,0,.1);
}
.card:hover {
    box-shadow: 0px 30px 18px -8px rgba(0,0,0,.1);
    transform: scale(1.10, 1.10);
}
.card__info {
    z-index: 2;
    background-color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 16px 24px 24px 24px;
}
.card__category {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #868686;
}
.card__title {
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: 'Roboto Slab', serif;
}
.card__by {
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    color: #AD7D52;
}
.card__author {
    font-weight: 600;
    text-decoration: none;
    color: #AD7D52;
}
.card:hover .card__img--hover {
    height: 100%;
    opacity: 0.3;
}
.card:hover .card__info {
    background-color: transparent;
    position: relative;
}
.card:hover .card__info-hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Animated footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset outer FSE wrapper so the inner div controls all visuals */
footer.wp-block-template-part {
	background-color: var(--te-navy) !important;
	padding: 0 !important;
	border-top: none !important;
	color: #fff !important;
}
footer.wp-block-template-part::before {
	display: none !important;
}

#dtcl-animated-footer {
	background: var(--te-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: space-between;
	user-select: none;
	position: relative;
}

@media (min-width: 1024px) {
	#dtcl-animated-footer {
		min-height: 100vh;
	}
}

.dtcl-af-container {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	gap: 1rem;
	padding: 2rem 1rem 6rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.dtcl-af-container {
		flex-direction: row;
	}
}

.dtcl-af-col {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.dtcl-af-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

#dtcl-animated-footer .dtcl-af-links a {
	font-size: 0.875rem;
	color: #fff !important;
	text-decoration: none !important;
	transition: color 0.2s;
}

#dtcl-animated-footer .dtcl-af-links a:hover {
	color: #38bdf8 !important;
}

.dtcl-af-copyright {
	font-size: 0.875rem;
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: #fff !important;
}

.dtcl-af-icon {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}

.dtcl-af-col--right {
	gap: 0;
}

.dtcl-af-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1rem;
}

.dtcl-af-search-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: #fff !important;
	opacity: 0.88;
	transition: color 0.2s, opacity 0.2s;
	padding: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.dtcl-af-search-btn:hover {
	color: #38bdf8 !important;
	opacity: 1;
	background: none !important;
	transform: none !important;
	filter: none !important;
}

.dtcl-af-search-btn svg {
	flex-shrink: 0;
}

.dtcl-af-backtop-btn {
	background: none !important;
	border: none !important;
	color: #fff !important;
	font-size: 0.875rem;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.dtcl-af-backtop-btn:hover {
	text-decoration: underline !important;
	color: #fff !important;
	background: none !important;
	transform: none !important;
	filter: none !important;
}

/* Wave */
.dtcl-af-wave {
	overflow: hidden;
	height: 200px;
	flex-shrink: 0;
}

.dtcl-af-wave-inner {
	margin-top: 0;
}

.dtcl-af-bar {
	background-color: #fff;
	will-change: transform;
	margin-top: -2px;
}

/* Account icon in header */
.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg path:not(.ast-hf-account-unfill),
.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg circle {
    fill: var(--te-off-white) !important;
}

/* ── Remove editor highlight (mark) backgrounds — content-authored yellow/colored marks */
mark,
.wp-block-heading mark,
h1 mark, h2 mark, h3 mark, h4 mark, h5 mark, h6 mark,
.elementor-heading-title mark {
    background-color: transparent !important;
    color: inherit !important;
}

/* ── Física subject page — product card grid ─────────────────────────────── */

.dtcl-fisica-page {
    padding-bottom: 64px;
}

.dtcl-fisica-hero {
    background: linear-gradient(135deg, #0a1428 0%, #0d2060 50%, #1868e0 100%);
    color: #fff;
    padding: 56px 24px;
    position: relative;
    overflow: hidden;
}
.dtcl-fisica-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.dtcl-fisica-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.dtcl-fisica-hero-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 10px;
}
.dtcl-fisica-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #fff;
}
.dtcl-fisica-hero p {
    font-size: 1.05rem;
    opacity: .85;
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}

.dtcl-fisica-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 0;
}

/* Section headings */
.dtcl-fisica-brand-head {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--te-blue);
    margin: 40px 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--te-mist);
}
.dtcl-fisica-sub-head {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--te-heading);
    margin: 28px 0 14px;
    padding-left: 10px;
    border-left: 3px solid var(--te-blue);
}

/* Product grid */
.dtcl-pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}

/* Product card */
.dtcl-pc-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--te-border);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    color: inherit;
}
.dtcl-pc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,.11);
}

.dtcl-pc-img {
    background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dtcl-pc-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform .3s ease;
}
.dtcl-pc-card:hover .dtcl-pc-img img {
    transform: scale(1.04);
}

.dtcl-pc-body {
    padding: 16px 18px;
    flex: 1;
}
.dtcl-pc-body h3 {
    font-size: .93rem;
    font-weight: 700;
    color: var(--te-heading);
    margin: 0 0 6px;
    line-height: 1.4;
}
.dtcl-pc-body p {
    font-size: .82rem;
    color: var(--te-body);
    line-height: 1.6;
    margin: 0 0 6px;
}
.dtcl-pc-sku {
    font-size: .7rem;
    font-weight: 700;
    color: #8898aa;
    letter-spacing: .3px;
}

.dtcl-pc-price {
    padding: 8px 18px 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--te-blue);
    letter-spacing: -.01em;
}
.dtcl-pc-price .woocommerce-Price-amount { color: var(--te-blue); }
.dtcl-pc-price del .woocommerce-Price-amount { color: #aab4c0; font-weight: 400; }

.dtcl-pc-foot {
    padding: 12px 18px;
    background: #f8fafc;
    border-top: 1px solid var(--te-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.dtcl-pc-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: #e8f0fe;
    color: var(--te-blue);
    white-space: nowrap;
}
.dtcl-pc-badge--orion  { background: #fff3e0; color: #e65100; }
.dtcl-pc-badge--eisco  { background: #e8f5e9; color: #2e7d32; }
.dtcl-pc-badge--engino { background: #fce4ec; color: #b71c1c; }

.dtcl-pc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 13px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--te-blue);
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}
.dtcl-pc-btn:hover {
    background: var(--te-blue-hover);
    color: #fff !important;
}

@media (max-width: 600px) {
    .dtcl-pc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dtcl-fisica-hero { padding: 40px 16px; }
    .dtcl-fisica-content { padding: 24px 16px 0; }
    .dtcl-pc-body h3 { font-size: .85rem; }
    .dtcl-pc-btn { padding: 5px 10px; font-size: .72rem; }
}
@media (max-width: 380px) {
    .dtcl-pc-grid { grid-template-columns: 1fr; }
}

/* Safety net: hide the auto-rendered WP page title on subject pages that have their own hero h1 */
.dtcl-pg-fisica .wp-block-post-title { display: none !important; }

/* Front page: keep the SEO H1 in the DOM for crawlers/screen readers but don't display it */
.home .wp-block-post-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Química subject page — hero (shares .dtcl-pc-* product grid styles with Física) ── */

.dtcl-quimica-page {
    padding-bottom: 64px;
}

.dtcl-quimica-hero {
    background: linear-gradient(135deg, #071a0d 0%, #0e4020 50%, #1b7a2c 100%);
    color: #fff;
    padding: 56px 24px;
    position: relative;
    overflow: hidden;
}
.dtcl-quimica-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.dtcl-quimica-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.dtcl-quimica-hero-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 10px;
}
.dtcl-quimica-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #fff;
}
.dtcl-quimica-hero p {
    font-size: 1.05rem;
    opacity: .85;
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}

.dtcl-quimica-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 0;
}

/* Badge variants for non-Vernier brands on quimica page */
.dtcl-pc-badge--ohaus   { background: #e3f2fd; color: #0d47a1; }
.dtcl-pc-badge--vr      { background: #ede7f6; color: #4527a0; }
.dtcl-pc-badge--newbyte { background: #fce4ec; color: #880e4f; }

@media (max-width: 600px) {
    .dtcl-quimica-hero { padding: 40px 16px; }
    .dtcl-quimica-content { padding: 24px 16px 0; }
}

/* ── Biología subject page — hero ─────────────────────────────────────────── */

.dtcl-biologia-page {
    padding-bottom: 64px;
}

.dtcl-biologia-hero {
    background: linear-gradient(135deg, #1a0733 0%, #4a1272 50%, #6a1b9a 100%);
    color: #fff;
    padding: 56px 24px;
    position: relative;
    overflow: hidden;
}
.dtcl-biologia-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.dtcl-biologia-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.dtcl-biologia-hero-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 10px;
}
.dtcl-biologia-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #fff;
}
.dtcl-biologia-hero p {
    font-size: 1.05rem;
    opacity: .85;
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}

.dtcl-biologia-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 0;
}

@media (max-width: 600px) {
    .dtcl-biologia-hero { padding: 40px 16px; }
    .dtcl-biologia-content { padding: 24px 16px 0; }
}

/* ── Shared badge variants for all subject pages ──────────────────────────── */
.dtcl-pc-badge--ti        { background: #e3f2fd; color: #0d47a1; }
.dtcl-pc-badge--codrone   { background: #e8eaf6; color: #283593; }
.dtcl-pc-badge--lego      { background: #fff8e1; color: #e65100; }
.dtcl-pc-badge--makeblock { background: #e0f7fa; color: #00695c; }
.dtcl-pc-badge--dobot     { background: #f3e5f5; color: #6a1b9a; }
.dtcl-pc-badge--microbit  { background: #e8f5e9; color: #1b5e20; }
.dtcl-pc-badge--hp        { background: #fce4ec; color: #880e4f; }
.dtcl-pc-badge--kubo      { background: #fff3e0; color: #bf360c; }
.dtcl-pc-badge--cabri     { background: #e8eaf6; color: #1a237e; }
.dtcl-pc-badge--h2gp      { background: #e3f2fd; color: #0277bd; }
.dtcl-pc-badge--kidwind   { background: #e8f5e9; color: #1b5e20; }
.dtcl-pc-badge--horizon   { background: #e0f2f1; color: #004d40; }

/* ── Robótica subject page ────────────────────────────────────────────────── */
.dtcl-robotica-page    { padding-bottom: 64px; }
.dtcl-robotica-hero {
    background: linear-gradient(135deg, #1a0000 0%, #6d1515 50%, #b71c1c 100%);
    color: #fff; padding: 56px 24px; position: relative; overflow: hidden;
}
.dtcl-robotica-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.dtcl-robotica-hero-inner  { max-width: 800px; margin: 0 auto; position: relative; }
.dtcl-robotica-hero-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.dtcl-robotica-hero h1  { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: #fff; }
.dtcl-robotica-hero p   { font-size: 1.05rem; opacity: .85; max-width: 560px; margin: 0; line-height: 1.6; }
.dtcl-robotica-content  { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }

/* ── Matemáticas subject page ─────────────────────────────────────────────── */
.dtcl-matematicas-page   { padding-bottom: 64px; }
.dtcl-matematicas-hero {
    background: linear-gradient(135deg, #1a0e00 0%, #7a3800 50%, #e65100 100%);
    color: #fff; padding: 56px 24px; position: relative; overflow: hidden;
}
.dtcl-matematicas-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.dtcl-matematicas-hero-inner   { max-width: 800px; margin: 0 auto; position: relative; }
.dtcl-matematicas-hero-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.dtcl-matematicas-hero h1  { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: #fff; }
.dtcl-matematicas-hero p   { font-size: 1.05rem; opacity: .85; max-width: 560px; margin: 0; line-height: 1.6; }
.dtcl-matematicas-content  { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }

/* ── Energías Renovables subject page ─────────────────────────────────────── */
.dtcl-energia-page   { padding-bottom: 64px; }
.dtcl-energia-hero {
    background: linear-gradient(135deg, #071a09 0%, #145218 50%, #2e7d32 100%);
    color: #fff; padding: 56px 24px; position: relative; overflow: hidden;
}
.dtcl-energia-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.dtcl-energia-hero-inner   { max-width: 800px; margin: 0 auto; position: relative; }
.dtcl-energia-hero-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.dtcl-energia-hero h1  { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: #fff; }
.dtcl-energia-hero p   { font-size: 1.05rem; opacity: .85; max-width: 560px; margin: 0; line-height: 1.6; }
.dtcl-energia-content  { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }

/* ── Primaria subject page ────────────────────────────────────────────────── */
.dtcl-primaria-page   { padding-bottom: 64px; }
.dtcl-primaria-hero {
    background: linear-gradient(135deg, #0d2e14 0%, #1b5e20 50%, #388e3c 100%);
    color: #fff; padding: 56px 24px; position: relative; overflow: hidden;
}
.dtcl-primaria-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.dtcl-primaria-hero-inner   { max-width: 800px; margin: 0 auto; position: relative; }
.dtcl-primaria-hero-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.dtcl-primaria-hero h1  { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: #fff; }
.dtcl-primaria-hero p   { font-size: 1.05rem; opacity: .85; max-width: 560px; margin: 0; line-height: 1.6; }
.dtcl-primaria-content  { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }

/* Hero highlight chips */
.dtcl-primaria-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dtcl-primaria-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 50px;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25);
    color: #fff; font-size: .83rem; font-weight: 600; white-space: nowrap;
}

/* Quick-nav: anchor chips to each section */
html:has(.dtcl-primaria-page) { scroll-behavior: smooth; }
.dtcl-primaria-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    max-width: 1200px; margin: 0 auto; padding: 20px 24px 0;
}
.dtcl-primaria-nav-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #8898aa;
}
.dtcl-primaria-nav a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 50px;
    background: #fff; border: 1px solid var(--te-border);
    font-size: .86rem; font-weight: 600; color: var(--te-heading);
    text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.dtcl-primaria-nav a:hover {
    border-color: var(--te-blue); color: var(--te-blue);
    transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.09);
}

/* Section header cards */
.dtcl-primaria-sec-head {
    display: flex; align-items: center; gap: 16px;
    margin: 48px 0 22px; padding: 18px 22px;
    background: #fff; border: 1px solid var(--te-border);
    border-left: 5px solid var(--te-blue); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    scroll-margin-top: 110px;
}
.dtcl-primaria-sec-icon {
    width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; background: #e8f0fe;
}
.dtcl-primaria-sec-text h2 {
    margin: 0; font-size: 1.12rem; font-weight: 800;
    color: var(--te-heading); line-height: 1.3;
}
.dtcl-primaria-sec-text p {
    margin: 3px 0 0; font-size: .85rem; color: var(--te-body); line-height: 1.5;
}
.dtcl-primaria-age {
    margin-left: auto; flex-shrink: 0; align-self: flex-start;
    padding: 5px 13px; border-radius: 50px;
    font-size: .73rem; font-weight: 700; letter-spacing: .4px;
    background: #e8f0fe; color: var(--te-blue); white-space: nowrap;
}
/* Per-section accent colors */
.dtcl-primaria-sec-head--blue   { border-left-color: #1868e0; }
.dtcl-primaria-sec-head--blue   .dtcl-primaria-sec-icon, .dtcl-primaria-sec-head--blue   .dtcl-primaria-age { background: #e8f0fe; color: #1868e0; }
.dtcl-primaria-sec-head--purple { border-left-color: #7b1fa2; }
.dtcl-primaria-sec-head--purple .dtcl-primaria-sec-icon, .dtcl-primaria-sec-head--purple .dtcl-primaria-age { background: #f3e5f5; color: #7b1fa2; }
.dtcl-primaria-sec-head--orange { border-left-color: #ef6c00; }
.dtcl-primaria-sec-head--orange .dtcl-primaria-sec-icon, .dtcl-primaria-sec-head--orange .dtcl-primaria-age { background: #fff3e0; color: #ef6c00; }
.dtcl-primaria-sec-head--teal   { border-left-color: #00897b; }
.dtcl-primaria-sec-head--teal   .dtcl-primaria-sec-icon, .dtcl-primaria-sec-head--teal   .dtcl-primaria-age { background: #e0f2f1; color: #00897b; }

@media (max-width: 600px) {
    .dtcl-robotica-hero,
    .dtcl-matematicas-hero,
    .dtcl-energia-hero,
    .dtcl-primaria-hero { padding: 40px 16px; }
    .dtcl-robotica-content,
    .dtcl-matematicas-content,
    .dtcl-energia-content,
    .dtcl-primaria-content { padding: 24px 16px 0; }
    .dtcl-primaria-chip { font-size: .76rem; padding: 6px 12px; }
    .dtcl-primaria-nav { padding: 16px 16px 0; gap: 8px; }
    .dtcl-primaria-nav a { padding: 8px 14px; font-size: .8rem; }
    .dtcl-primaria-sec-head { flex-wrap: wrap; gap: 12px; padding: 16px; margin: 36px 0 18px; scroll-margin-top: 90px; }
    .dtcl-primaria-sec-icon { width: 42px; height: 42px; font-size: 1.25rem; }
    .dtcl-primaria-sec-text { flex: 1 1 200px; min-width: 200px; }
    .dtcl-primaria-sec-text h2 { font-size: 1rem; }
    .dtcl-primaria-sec-text p { font-size: .8rem; }
    .dtcl-primaria-age { margin-left: 54px; align-self: center; order: 3; }
}

/* ── "Ver otros productos" CTA banner — shared across all subject pages ───── */
.dtcl-subject-cta {
    margin: 56px 0 0;
    padding: 56px 24px;
    background: linear-gradient(135deg, #0a1428 0%, #0d2060 60%, #1868e0 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.dtcl-subject-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.dtcl-subject-cta-inner {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.dtcl-subject-cta-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: 10px;
}
.dtcl-subject-cta-heading {
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 28px;
    line-height: 1.25;
}
.dtcl-subject-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    background: #fff;
    color: var(--te-blue) !important;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    letter-spacing: -.01em;
}
.dtcl-subject-cta-btn svg { flex-shrink: 0; transition: transform .2s ease; }
.dtcl-subject-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
    color: var(--te-blue) !important;
}
.dtcl-subject-cta-btn:hover svg { transform: translateX(4px); }
@media (max-width: 600px) {
    .dtcl-subject-cta { padding: 40px 20px; }
    .dtcl-subject-cta-btn { padding: 14px 28px; font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: Hero secondary CTA (ghost button + wrapper)
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-slide-ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* The primary .dtcl-slide-cta keeps its existing animation from the group
   selector. The ghost button mirrors the same entry animation. */
.dtcl-slide-cta-ghost {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
    display: inline-flex;
    align-items: center;
    color: rgba(240,246,255,.82);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 50px;
    border: 1.5px solid rgba(240,246,255,.28);
    line-height: 1;
    white-space: nowrap;
    transition: color .2s, border-color .2s, background .2s;
}
.dtcl-hero-slide.is-active .dtcl-slide-cta-ghost {
    opacity: 1;
    transform: none;
    transition-delay: .98s;
}
.dtcl-slide-cta-ghost:hover {
    color: #fff;
    border-color: rgba(240,246,255,.65);
    background: rgba(240,246,255,.09);
    text-decoration: none;
}

@media (max-width: 600px) {
    .dtcl-slide-ctas { flex-direction: column; }
    .dtcl-slide-ctas .dtcl-slide-cta,
    .dtcl-slide-cta-ghost {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: Brand Logos Strip
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-marquee {
    overflow: hidden;
    background: var(--te-mist);
    border-top: 1px solid rgba(24,104,224,.08);
    border-bottom: 1px solid rgba(24,104,224,.08);
    padding: 4px 0;
    user-select: none;
}
.dtcl-mq-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: dtcl-marquee-scroll 45s linear infinite;
    will-change: transform;
}
.dtcl-marquee:hover .dtcl-mq-track {
    animation-play-state: paused;
}
@keyframes dtcl-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.dtcl-mq-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--te-heading);
    white-space: nowrap;
}
.dtcl-mq-item svg {
    flex-shrink: 0;
    color: var(--te-blue);
}
.dtcl-mq-sep {
    display: inline-flex;
    align-items: center;
    color: rgba(24,104,224,.3);
    padding: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
    .dtcl-mq-track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: Subject Area Tiles
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-subject-tiles {
    background: var(--te-mist);
    padding: 72px 0 80px;
}
.dtcl-st-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 80px);
}
.dtcl-st-head {
    text-align: center;
    margin-bottom: 44px;
}
.dtcl-st-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--te-blue);
    margin-bottom: 10px;
}
.dtcl-st-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: var(--te-heading);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
}
.dtcl-st-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dtcl-st-tile {
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    border-radius: 16px;
    border: 1.5px solid rgba(0,0,0,.07);
    background: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.dtcl-st-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tile-color, var(--te-blue));
    border-radius: 2px 2px 0 0;
}
.dtcl-st-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.1);
    border-color: rgba(0,0,0,.12);
    text-decoration: none;
}
.dtcl-st-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
    display: block;
}
.dtcl-st-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--te-heading);
    line-height: 1.2;
    margin-bottom: 6px;
    display: block;
}
.dtcl-st-desc {
    font-size: 12px;
    color: var(--te-body);
    line-height: 1.55;
    flex: 1;
    display: block;
    margin-bottom: 16px;
}
.dtcl-st-arrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--tile-color, var(--te-blue));
    display: block;
    transition: transform .2s;
}
.dtcl-st-tile:hover .dtcl-st-arrow { transform: translateX(4px); }

@media (max-width: 768px) {
    .dtcl-st-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
    .dtcl-st-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dtcl-st-tile { padding: 18px 16px 14px; }
    .dtcl-st-icon { font-size: 28px; margin-bottom: 8px; }
    .dtcl-st-name { font-size: 13px; }
    .dtcl-subject-tiles { padding: 48px 0 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: Deals Strip — Apple-lineup style cards for discounted products
   (reuses .dtcl-fs-inner/head/eyebrow/title/see-all from the featured strip)
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-deals-strip {
    background: #fff;
    padding: 72px 0 80px;
    position: relative;
    overflow: hidden;
}
.dtcl-deals-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%, var(--te-blue) 20%, var(--te-cyan) 50%, var(--te-blue) 80%, transparent 100%);
    box-shadow: 0 0 24px rgba(56,212,238,.5);
}
.dtcl-deal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
}
.dtcl-deal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dtcl-deal-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    background: linear-gradient(160deg, var(--te-mist) 0%, #f7faff 60%, #eef3fb 100%);
    border: 1.5px solid rgba(24,104,224,.08);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.dtcl-deal-img:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(24,104,224,.15);
}
.dtcl-deal-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    transition: transform .3s ease;
}
.dtcl-deal-img:hover img { transform: scale(1.05); }
.dtcl-deal-badge {
    margin: 16px 0 6px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #e65100;
}
.dtcl-deal-badge--stock { color: #2e7d32; }
.dtcl-deal-name {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--te-heading);
    letter-spacing: -.01em;
    margin: 0 0 8px;
    line-height: 1.25;
}
.dtcl-deal-tag {
    font-size: .85rem;
    color: var(--te-body);
    line-height: 1.55;
    margin: 0 0 10px;
    max-width: 250px;
}
.dtcl-deal-price {
    font-size: .95rem;
    font-weight: 800;
    color: var(--te-heading);
    margin-bottom: 16px;
}
.dtcl-deal-price del { color: #aab4c0; font-weight: 400; margin-right: 6px; }
.dtcl-deal-price ins { text-decoration: none; }
.dtcl-deal-price .woocommerce-Price-amount { color: inherit; }
.dtcl-deal-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}
.dtcl-deal-buy {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 50px;
    background: var(--te-blue);
    color: #fff !important;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease;
}
.dtcl-deal-buy:hover { background: var(--te-blue-hover); text-decoration: none; }
.dtcl-deal-quote {
    font-size: .85rem;
    font-weight: 700;
    color: var(--te-blue);
    text-decoration: none;
}
.dtcl-deal-quote:hover { text-decoration: underline; }

@media (max-width: 1024px) { .dtcl-deal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .dtcl-deal-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
@media (max-width: 600px) {
    .dtcl-deals-strip { padding: 52px 0 56px; }
    .dtcl-deal-name { font-size: 1rem; }
    .dtcl-deal-tag { font-size: .78rem; }
    .dtcl-deal-buy { padding: 8px 16px; font-size: .78rem; }
    .dtcl-deal-ctas { gap: 10px; }
}
@media (max-width: 380px)  { .dtcl-deal-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: STEM Competitions Rail — horizontally scrolling highlight cards
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-comp-rail {
    background: #f2f5f9;
    padding: 72px 0 56px;
    overflow: hidden;
}
.dtcl-comp-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 80px);
}
.dtcl-comp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}
.dtcl-comp-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--te-blue);
    padding-left: 28px;
    position: relative;
    margin-bottom: 8px;
}
.dtcl-comp-eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 20px; height: 2px;
    background: var(--te-blue);
    transform: translateY(-50%);
}
.dtcl-comp-title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    color: var(--te-heading);
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0;
}
.dtcl-comp-see-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--te-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 22px;
    border: 2px solid var(--te-blue);
    border-radius: 50px;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.dtcl-comp-see-all:hover { background: var(--te-blue); color: #fff; text-decoration: none; }

/* The scroller bleeds to the viewport edge, padded to align with .dtcl-comp-inner */
.dtcl-comp-scroller {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px max(calc((100vw - 1280px) / 2 + clamp(20px, 5vw, 80px)), clamp(20px, 5vw, 80px)) 24px;
    scrollbar-width: none;
}
.dtcl-comp-scroller::-webkit-scrollbar { display: none; }

.dtcl-comp-card {
    flex: 0 0 340px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1.5px solid rgba(24,104,224,.1);
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s;
}
.dtcl-comp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(24,104,224,.16), 0 0 0 1px rgba(56,212,238,.3);
    border-color: var(--te-cyan);
    text-decoration: none;
}
.dtcl-comp-card-text { padding: 26px 26px 14px; }
.dtcl-comp-card-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8898aa;
    margin-bottom: 8px;
}
.dtcl-comp-card-text h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--te-heading);
    letter-spacing: -.01em;
    line-height: 1.22;
    margin: 0 0 10px;
}
.dtcl-comp-card-text p {
    font-size: .88rem;
    color: var(--te-body);
    line-height: 1.6;
    margin: 0;
}
.dtcl-comp-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 18px;
}
.dtcl-comp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform .3s ease;
}
.dtcl-comp-card:hover .dtcl-comp-card-img img { transform: scale(1.05); }
.dtcl-comp-card-go {
    position: absolute;
    right: 14px; bottom: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--te-heading);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.dtcl-comp-card:hover .dtcl-comp-card-go { background: var(--te-blue); }

.dtcl-comp-controls {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.dtcl-comp-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: #dde4ee;
    color: var(--te-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.dtcl-comp-btn:hover:not(:disabled) { background: var(--te-blue); color: #fff; }
.dtcl-comp-btn:disabled { opacity: .35; cursor: default; }

@media (max-width: 600px) {
    .dtcl-comp-rail { padding: 52px 0 44px; }
    .dtcl-comp-head { margin-bottom: 24px; }
    .dtcl-comp-card { flex-basis: min(82vw, 320px); }
    .dtcl-comp-card-text { padding: 20px 20px 10px; }
    .dtcl-comp-card-text h3 { font-size: 1.18rem; }
    .dtcl-comp-scroller { gap: 14px; padding-bottom: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage: Trust / Credentials Bar
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-trust-bar {
    background: var(--te-navy);
    padding: 56px 20px;
    position: relative;
    overflow: hidden;
}
.dtcl-trust-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--te-blue) 20%,
        var(--te-cyan) 50%,
        var(--te-blue) 80%,
        transparent 100%);
    box-shadow: 0 0 18px rgba(56,212,238,.4);
}
.dtcl-tb-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.dtcl-tb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.dtcl-tb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.dtcl-tb-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 2px;
}
.dtcl-tb-value {
    font-size: 38px;
    font-weight: 800;
    color: var(--te-cyan);
    line-height: 1;
    letter-spacing: -.03em;
}
.dtcl-tb-label {
    font-size: 12px;
    color: rgba(240,246,255,.65);
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .dtcl-tb-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .dtcl-trust-bar { padding: 40px 20px; }
}
@media (max-width: 480px) {
    .dtcl-tb-value { font-size: 30px; }
}

/* ── Hide legacy homepage card section (2021 hardcoded images) ── */
.wrapper-grid { display: none !important; }

/* ── Shop page: two-column filter + product grid layout ─────────────────── */
.dtcl-shop-layout { align-items: flex-start; }

/* ── Filter sidebar: unified card ────────────────────────────────────────── */

/* Outer wrapper = the card */
.dtcl-shop-filter-col .woof {
    border: 1px solid #dde4ee;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 24px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(26,40,69,.07);
}
/* WOOF inserts empty <p> spacers — hide them */
.dtcl-shop-filter-col .woof > p { display: none; }

/* Navy "Filtros" header bar (matches site header colour) */
.dtcl-shop-filter-col .woof_redraw_zone::before {
    content: 'Filtros';
    display: block;
    background: #1a2845;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 16px;
}

/* Strip individual card styling from woof_container elements
   (text-search container also carries this class, so both are reset here) */
.dtcl-shop-filter-col .woof_container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: static !important;
    box-shadow: none !important;
}

/* Text-search row: padding + bottom separator */
.dtcl-shop-filter-col .woof_text_search_container .woof_container_inner {
    padding: 14px 16px 12px;
    border-bottom: 1px solid #eef2f8;
}
/* Hide the icon-link WOOF renders beside the text search */
.dtcl-shop-filter-col .woof_text_search_go { display: none; }

/* Text search input — with inline magnifier icon */
.dtcl-shop-filter-col .woof_husky_txt-input,
.dtcl-shop-filter-col .woof_text_search_container input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cdd6e0;
    border-radius: 8px;
    padding: 8px 10px 8px 32px;
    font-size: 13px;
    color: #445568;
    background: #f7f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238898aa' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 11px center;
    display: block;
}
.dtcl-shop-filter-col .woof_husky_txt-input:focus,
.dtcl-shop-filter-col .woof_text_search_container input[type="text"]:focus {
    border-color: #1868e0;
    outline: none;
    background: #fff;
}

/* Per-container padding: horizontal only, so sections don't stack big gaps */
.dtcl-shop-filter-col .woof_container:not(.woof_text_search_container) .woof_container_inner {
    padding: 0 16px;
}
.dtcl-shop-filter-col .woof_container { margin: 0 !important; }
.dtcl-shop-filter-col .woof_container:not(.woof_text_search_container) { margin: 12px 0 0 !important; }
.dtcl-shop-filter-col .woof_price_search_container { margin-bottom: 14px !important; }
.dtcl-shop-filter-col .woof_container_inner > form { display: block; }

/* Hide BR spacers and empty paragraphs */
.dtcl-shop-filter-col .woof_container_inner br,
.dtcl-shop-filter-col .woof_block_html_items br,
.dtcl-shop-filter-col .woof_container p:empty,
.dtcl-shop-filter-col .woof_redraw_zone > p { display: none; }

/* Keep WOOF a11y labels hidden — dropdown placeholders already self-describe
   (showing them duplicated "MARCA / Marca" on every section) */
.dtcl-shop-filter-col .woof_wcga_label_hide { display: none !important; }

/* Taxonomy select dropdowns */
.dtcl-shop-filter-col .woof_block_html_items select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cdd6e0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #445568;
    background: #f7f9fc;
    display: block;
    cursor: pointer;
}
.dtcl-shop-filter-col .woof_block_html_items select:focus {
    border-color: #1868e0;
    outline: none;
}
/* Chosen.js containers (if initialized) */
.dtcl-shop-filter-col .chosen-container { width: 100% !important; font-size: 13px; }

/* Price slider — restyle jQuery-UI widget from default purple to brand blue */
.dtcl-shop-filter-col .price_slider_wrapper { padding-top: 4px; }
/* !important needed: WooCommerce + WOOF skin CSS use higher-specificity
   selectors (.woocommerce .widget_price_filter .ui-slider .ui-slider-range) */
.dtcl-shop-filter-col .price_slider.ui-slider {
    height: 5px !important;
    background: #e5eaf2 !important;
    border: none !important;
    border-radius: 3px;
    margin: 10px 8px 16px;
}
.dtcl-shop-filter-col .price_slider .ui-slider-range {
    background: #1868e0 !important;
    border: none !important;
    border-radius: 3px;
}
.dtcl-shop-filter-col .price_slider .ui-slider-handle {
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border: 2px solid #1868e0 !important;
    border-radius: 50%;
    top: -6px !important;
    margin-left: -8px;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(26,40,69,.2);
}
.dtcl-shop-filter-col .price_slider .ui-slider-handle:active { cursor: grabbing; }

/* Price range readout: small centered text; hide the widget's own duplicate
   submit button (WOOF's main button below submits everything incl. price) */
.dtcl-shop-filter-col .price_slider_amount {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #8898aa;
}
.dtcl-shop-filter-col .price_slider_amount .button { display: none !important; }

/* Main submit button — navy, matches header; relabel "Filtro" → "Aplicar filtros" */
/* button.* needed to out-rank the site-wide .woocommerce button.button rule (0,2,1) */
.dtcl-shop-filter-col button.woof_submit_search_form,
.dtcl-shop-filter-col .woof_submit_search_form {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 10px 16px;
    background: #1a2845 !important;
    color: #fff;
    font-size: 0;
    border: none;
    border-radius: 8px !important;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .18s;
}
.dtcl-shop-filter-col .woof_submit_search_form::after {
    content: 'Aplicar filtros';
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dtcl-shop-filter-col button.woof_submit_search_form:hover,
.dtcl-shop-filter-col .woof_submit_search_form:hover { background: #1868e0 !important; }

/* Chosen.js widgets (use_chosen=1 hides the native selects) */
.dtcl-shop-filter-col .chosen-container {
    width: 100% !important;
    font-size: 13px;
}
.dtcl-shop-filter-col .chosen-container-single .chosen-single {
    height: 36px;
    line-height: 34px;
    background: #f7f9fc;
    border: 1px solid #cdd6e0;
    border-radius: 8px;
    box-shadow: none;
    font-size: 13px;
    color: #445568;
    padding-left: 10px;
}
.dtcl-shop-filter-col .chosen-container-active.chosen-with-drop .chosen-single {
    border-radius: 8px 8px 0 0;
    background: #fff;
}
.dtcl-shop-filter-col .chosen-container .chosen-drop {
    border: 1px solid #cdd6e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 14px rgba(26,40,69,.12);
    font-size: 13px;
}
.dtcl-shop-filter-col .chosen-container .chosen-results li {
    padding: 7px 10px;
    color: #445568;
}
.dtcl-shop-filter-col .chosen-container .chosen-results li.highlighted {
    background: #1868e0;
    color: #fff;
}
.dtcl-shop-filter-col .chosen-container .chosen-search input[type="text"] {
    border: 1px solid #cdd6e0;
    border-radius: 6px;
    font-size: 13px;
}
/* Multi-select (Etiqueta): tag-style choices */
.dtcl-shop-filter-col .chosen-container-multi .chosen-choices {
    background: #f7f9fc;
    border: 1px solid #cdd6e0;
    border-radius: 8px;
    box-shadow: none;
    padding: 4px 8px;
    min-height: 36px;
    font-size: 13px;
}
.dtcl-shop-filter-col .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    font-size: 13px;
    color: #8898aa;
    height: 26px;
}
.dtcl-shop-filter-col .chosen-container-multi .chosen-choices li.search-choice {
    background: #1868e0;
    background-image: none;
    color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    padding: 5px 22px 5px 8px;
    font-size: 12px;
}
.dtcl-shop-filter-col .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top: 6px;
    filter: brightness(4);
}

/* Reset link */
.dtcl-shop-filter-col .woof_reset_search_form,
.dtcl-shop-filter-col a.woof_reset {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #8898aa;
    text-decoration: none;
}
.dtcl-shop-filter-col .woof_reset_search_form:hover,
.dtcl-shop-filter-col a.woof_reset:hover { color: #1868e0; text-decoration: underline; }

/* Checkbox/radio items (if filter type is switched to list later) */
.dtcl-shop-filter-col .woof_block_html_items ul { list-style: none; margin: 0; padding: 0; }
.dtcl-shop-filter-col .woof_block_html_items ul li {
    padding: 3px 0;
    font-size: 13px;
    color: #445568;
}
.dtcl-shop-filter-col .woof_block_html_items ul li label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.dtcl-shop-filter-col .woof_block_html_items ul li input[type="checkbox"],
.dtcl-shop-filter-col .woof_block_html_items ul li input[type="radio"] {
    accent-color: #1868e0;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Result count bar */
.dtcl-shop-products-col .woocommerce-result-count { margin: 0; }

/* Mobile: stack filter above products */
@media (max-width: 781px) {
    .dtcl-shop-layout { flex-direction: column !important; }
    .dtcl-shop-filter-col,
    .dtcl-shop-filter-col.wp-block-column { width: 100% !important; flex-basis: auto !important; }
    .dtcl-shop-filter-col .woof { position: static; }
    .dtcl-shop-products-col .products-block-post-template { --column-count: 2 !important; }
}

/* ── Single product page: summary column polish ──────────────────────────── */

/* Title: tighter against price */
.dtcl-product-summary .wp-block-post-title { margin-bottom: 2px; }

/* Price: bigger and bolder; "IVA incluido" stays quiet */
.dtcl-product-summary .wp-block-woocommerce-product-price .woocommerce-Price-amount {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--te-blue);
}

/* Short description: comfortable reading colour and rhythm */
.dtcl-product-summary .wp-block-post-excerpt {
    color: #5a6b7f;
    line-height: 1.65;
}

/* Stock: green badge instead of bare text */
.dtcl-product-summary .stock.in-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e7f6ec;
    color: #1d7a3e;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.dtcl-product-summary .stock.in-stock::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2eaa58;
}
.dtcl-product-summary .stock.out-of-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdeeee;
    color: #b3372f;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}

/* Quantity input: match button height */
.dtcl-product-summary form.cart .quantity .qty {
    height: 48px;
    border: 1px solid #cdd6e0;
    border-radius: 8px;
    font-size: 15px;
    color: #1a2845;
    background: #f7f9fc;
    text-align: center;
}

/* Cart row: qty + Añadir al carrito + Cotizar on one flex line
   (the YITH div is moved inside form.cart by a wp_footer script) */
.dtcl-product-summary form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.dtcl-product-summary .yith-ywraq-add-to-quote { margin: 0 !important; }
.dtcl-product-summary div.clear { display: none; }

/* Cotizar: outline secondary style — a.button needed to out-rank the
   site-wide .woocommerce a.button rule (0,2,1) */
.dtcl-product-summary .yith-ywraq-add-to-quote a.add-request-quote-button {
    background: transparent !important;
    color: var(--te-heading, #1a2845) !important;
    border: 2px solid var(--te-heading, #1a2845) !important;
    box-shadow: none;
    transition: background .18s, color .18s;
}
.dtcl-product-summary .yith-ywraq-add-to-quote a.add-request-quote-button:hover {
    background: var(--te-heading, #1a2845) !important;
    color: #fff !important;
}
/* The original YITH link is replaced by .dtcl-unified-btn, which proxies the
   click to it. Hide only the link — the wrapper stays in the flow so YITH can
   reveal its confirmation notices inside it. !important because YITH re-shows
   .yith-ywraq-add-button inline when an item is removed from the list. */
.dtcl-product-summary .yith-ywraq-add-to-quote.dtcl-quote-proxied .yith-ywraq-add-button {
    display: none !important;
}

/* "Producto agregado a la lista" / "Ver la lista" notices under the row, small.
   YITH suffixes these classes with the product id, hence the substring match;
   visibility is left to YITH, which strips .hide on a successful add. */
.dtcl-product-summary .yith-ywraq-add-to-quote [class*="yith_ywraq_add_item_"] {
    font-size: 12px;
    margin: 4px 0 0;
}
.dtcl-product-summary .yith-ywraq-add-to-quote .yith_ywraq_add_item_browse_message a {
    text-decoration: underline;
}

/* Meta strip: quiet single block under a hairline, no odd SKU divider */
.dtcl-product-summary .wp-block-woocommerce-product-meta {
    border-top: 1px solid #e5eaf2;
    padding-top: 14px;
    margin-top: 18px;
}
.dtcl-product-summary .wp-block-woocommerce-product-meta .wp-block-group {
    row-gap: 4px;
    column-gap: 24px;
}
.dtcl-product-summary .wc-block-components-product-sku,
.dtcl-product-summary .wp-block-post-terms {
    font-size: 12px;
    color: #8898aa;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* WooCommerce blocktheme CSS draws a 100px hairline above the SKU via ::before */
.dtcl-product-summary .wc-block-components-product-sku::before {
    content: none !important;
    display: none !important;
}
.dtcl-product-summary .wc-block-components-product-sku { white-space: nowrap; }
.dtcl-product-summary .wp-block-post-terms a {
    color: #5a6b7f;
    text-decoration: none;
}
.dtcl-product-summary .wp-block-post-terms a:hover {
    color: var(--te-blue);
    text-decoration: underline;
}

/* Mobile: cart form and Cotizar stack cleanly */
@media (max-width: 600px) {
    .dtcl-product-summary .wc-block-add-to-cart-form { display: block; margin: 0 0 10px !important; }
    .dtcl-product-summary .yith-ywraq-add-to-quote { display: block; }
}

/* ============================================================
   Unified add-button — in-stock = Añadir + popover;
   out-of-stock = Cotizar only
   ============================================================ */
.dtcl-unified-wrapper {
    position: relative;
    display: inline-flex;
}

.dtcl-unified-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 0 22px !important;
    height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    border-radius: 8px !important;
    cursor: pointer;
    border: 2px solid var(--te-blue, #1868e0) !important;
    background: var(--te-blue, #1868e0) !important;
    color: #fff !important;
    transition: background .18s, border-color .18s;
}
.dtcl-unified-btn:hover {
    background: #1258c0 !important;
    border-color: #1258c0 !important;
}

/* Out-of-stock variant: navy solid */
.dtcl-unified-btn.dtcl-cotizar-only {
    background: var(--te-heading, #1a2845) !important;
    border-color: var(--te-heading, #1a2845) !important;
}
.dtcl-unified-btn.dtcl-cotizar-only:hover {
    background: #111c32 !important;
    border-color: #111c32 !important;
}

/* Chevron for in-stock button */
.dtcl-unified-btn:not(.dtcl-cotizar-only)::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #fff;
    transition: transform .18s;
}
.dtcl-unified-btn.is-open::after {
    transform: rotate(180deg);
}

/* Popover card */
.dtcl-unified-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid #dde4ee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26,40,69,.14);
    padding: 8px;
    min-width: 230px;
    flex-direction: column;
    gap: 6px;
}
.dtcl-unified-popover.is-open { display: flex; }

/* Popover option buttons */
.dtcl-pop-cart,
.dtcl-pop-quote {
    display: block !important;
    width: 100%;
    padding: 11px 16px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
    letter-spacing: .03em;
}
.dtcl-pop-cart {
    background: var(--te-blue, #1868e0) !important;
    color: #fff !important;
    border: 2px solid var(--te-blue, #1868e0) !important;
    border-radius: 8px !important;
}
.dtcl-pop-cart:hover { background: #1258c0 !important; border-color: #1258c0 !important; }
.dtcl-pop-quote {
    background: transparent !important;
    color: var(--te-heading, #1a2845) !important;
    border: 2px solid var(--te-heading, #1a2845) !important;
    border-radius: 8px !important;
}
.dtcl-pop-quote:hover {
    background: var(--te-heading, #1a2845) !important;
    color: #fff !important;
}

@media (max-width: 600px) {
    .dtcl-unified-popover { min-width: 0; width: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Checkout layout fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two-column checkout (#customer_details floats left 50%, #order_review floats
   right 50%) was overflowing its row because both used content-box sizing —
   their padding was added on top of the 50% width, so the pair totalled more
   than 100% and #order_review had nowhere to fit beside the float, dropping
   below #customer_details instead of sitting next to it. */
@media (min-width: 992px) {
    body.woocommerce-checkout #customer_details,
    body.woocommerce-checkout #order_review {
        box-sizing: border-box;
    }
}

/* Bank transfer account details block inside the BACS gateway description */
.dtcl-bacs-details {
    margin-top: 10px;
}
.dtcl-bacs-details p {
    margin: 0 0 4px;
    font-size: 14px;
}
.dtcl-bacs-details p:last-child {
    margin-top: 8px;
    font-style: italic;
}

/* Checkout "place order" row: the YITH Request-a-Quote button and the WooCommerce
   place-order button were both full-width solid blue with no gap, reading as one
   merged, confusing button. Give the quote option the same navy-outline treatment
   used on product pages (see .dtcl-pop-quote) so the two actions read as distinct. */
body.woocommerce-checkout #ywraq_checkout_quote_button {
    background: transparent !important;
    color: var(--te-heading, #1a2845) !important;
    border: 2px solid var(--te-heading, #1a2845) !important;
    border-radius: 8px !important;
    margin: 0 0 12px !important;
}
body.woocommerce-checkout #ywraq_checkout_quote_button:hover {
    background: var(--te-heading, #1a2845) !important;
    color: #fff !important;
}

/* ── Classic WC product loops: up-sells ("También te recomendamos"), and
   cross-sells/related if they ever fall back to the classic template.
   The FSE theme ships no CSS for this markup (.products/li.product), so the
   <img> — which only carries max-width:100% — stretched to fill an
   unconstrained flex item, rendering each card at roughly half the page width.
   Give it an explicit grid + a capped image box, matching the card look used
   by the block-based related-products section elsewhere on this page.

   NOTE: the real markup is <section class="up-sells upsells products">
   <h2>…</h2><ul class="products columns-4"><li class="product">… — the grid
   container has to be the inner <ul class="products">, NOT the outer
   .up-sells/.cross-sells/.related wrapper (that element's only direct
   children are the <h2> and the single <ul>, so making IT the grid just
   grid-ified two boxes and left the actual product cards inside the <ul>
   stacking as plain unstyled block list items — the bug that shipped). */
.up-sells.products ul.products,
.cross-sells.products ul.products,
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.up-sells.products li.product,
.cross-sells.products li.product,
.related.products li.product {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    text-align: center;
    border: 1px solid var(--te-border);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}
.up-sells.products li.product a.woocommerce-loop-product__link,
.cross-sells.products li.product a.woocommerce-loop-product__link,
.related.products li.product a.woocommerce-loop-product__link {
    display: block;
    width: 100%;
}
.up-sells.products li.product img,
.cross-sells.products li.product img,
.related.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    margin: 0 0 12px;
}
.up-sells.products li.product .woocommerce-loop-product__title,
.cross-sells.products li.product .woocommerce-loop-product__title,
.related.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 6px;
}
.up-sells.products li.product .br_brand_shop_container,
.cross-sells.products li.product .br_brand_shop_container,
.related.products li.product .br_brand_shop_container {
    margin: 0 0 6px;
}
.up-sells.products li.product .button,
.cross-sells.products li.product .button,
.related.products li.product .button {
    margin-top: 10px;
}

@media (max-width: 781px) {
    .up-sells.products ul.products,
    .cross-sells.products ul.products,
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ── Block-based product grids (shop, category, related-products): equal-
   width buttons regardless of label length. "Añadir al carrito" /
   "Seleccionar opciones" (WooCommerce) and "Cotizar" (YITH Request-a-Quote,
   appended as a sibling <div> by its render_block_woocommerce/product-button
   filter) are both plain pill buttons with no explicit width, so each one
   sizes to its own text — "Cotizar" ends up much narrower than "Añadir al
   carrito" in the same row. Force both to fill their card column. */
.wp-block-woocommerce-product-button .wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-block-button__link,
li.product > .yith-ywraq-add-to-quote .add-request-quote-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
li.product > .yith-ywraq-add-to-quote {
    width: 100%;
}

/* Equal button HEIGHT: the WC/FSE add-to-cart family (.wp-block-button__link,
   padding 8px 16px / 14px font) and the YITH quote-button family
   (.woocommerce .button, padding 16px 32px / 16px font) ship different base
   padding and font-size, so even at matching width they render at very
   different heights ("Cotizar" much taller/chunkier than "Añadir al
   carrito"). Force one shared box so every button in a card row lines up. */
.wp-block-woocommerce-product-button .wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-block-button__link,
li.product > .yith-ywraq-add-to-quote .add-request-quote-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 20px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* Equal product-image box: WooCommerce's product-image block ships only
   width:100%/height:auto with no aspect-ratio constraint, so a card's image
   height — and everything below it — is dictated by that one product photo's
   native dimensions. A tall spring-coil close-up next to a square product
   shot produces wildly different card heights in the same row. */
.wp-block-woocommerce-product-image img {
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Added to quote" confirmation modal
   Opened from YITH's yith_wwraq_added_successfully event (see functions.php).
   ═══════════════════════════════════════════════════════════════════════════ */

.dtcl-raq-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dtcl-raq-modal.is-open { display: flex; }

body.dtcl-raq-lock { overflow: hidden; }

.dtcl-raq-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 22, 38, .55);
    backdrop-filter: blur(2px);
}

.dtcl-raq-panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 470px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(13, 22, 38, .28);
    padding: 30px 28px 26px;
    text-align: center;
    animation: dtcl-raq-in .18s ease-out;
}
@keyframes dtcl-raq-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dtcl-raq-panel { animation: none; }
}

.dtcl-raq-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: #8a97a8;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.dtcl-raq-close:hover { background: var(--te-mist, #edf3fc); color: var(--te-heading, #1a2845); }

/* Green check disc — the one non-brand colour, because it has to read
   instantly as "this worked" rather than as another navy UI chrome element */
.dtcl-raq-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e6f7ee;
    color: #1a9d5f;
}

.dtcl-raq-title {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--te-heading, #1a2845);
}

.dtcl-raq-product {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--te-mist, #edf3fc);
    border-radius: 10px;
}
.dtcl-raq-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}
.dtcl-raq-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--te-heading, #1a2845);
}
/* Collapsed by JS when neither name nor thumbnail could be resolved */
.dtcl-raq-product.is-empty { display: none; }

.dtcl-raq-count {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--te-body, #445568);
}

.dtcl-raq-actions {
    display: flex;
    gap: 10px;
}
.dtcl-raq-continue,
.dtcl-raq-go {
    display: inline-flex !important;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    border-radius: 8px;
    border: 2px solid var(--te-heading, #1a2845);
    cursor: pointer;
    text-decoration: none !important;
    transition: background .18s, border-color .18s, color .18s;
}
.dtcl-raq-continue {
    background: transparent;
    color: var(--te-heading, #1a2845);
}
.dtcl-raq-continue:hover {
    background: var(--te-heading, #1a2845);
    color: #fff;
}
.dtcl-raq-go {
    background: var(--te-blue, #1868e0);
    border-color: var(--te-blue, #1868e0);
    color: #fff !important;
}
.dtcl-raq-go:hover {
    background: #1258c0;
    border-color: #1258c0;
}
.dtcl-raq-panel :is(button, a):focus-visible {
    outline: 3px solid var(--te-cyan, #38d4ee);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .dtcl-raq-panel  { padding: 26px 20px 22px; }
    .dtcl-raq-actions { flex-direction: column; }
}