/**
 * cc_header — clean header styling (El Informal, shop 3)
 *
 * Scoped to #header.cc-hdr. Uses cc_ui tokens (--cc-*, loaded globally by
 * cc_ui). Two jobs:
 *  1) lay out our own wrappers (.cc-hdr__*), and
 *  2) RESTYLE the reused theme/module hook output (search widget, ps_shoppingcart
 *     block, tvcmsmegamenu bar + dropdowns, .tvmobile-slidebar drawer) so the
 *     behaviour stays theirs while the look becomes ours.
 * Breakpoint 991px matches the theme's showView() move threshold, so CSS
 * show/hide aligns with where custom.js physically relocates hook content.
 */

/* ============================================================= FOUNDATION */
#header.cc-hdr { background: var(--cc-surface); color: var(--cc-ink); font-family: inherit; }
#header.cc-hdr * { box-sizing: border-box; }
.cc-hdr__offer:empty { display: none; }

/* topbar spans full width; cc_topbar.css owns its internals */
.cc-hdr__topbar { width: 100%; }

/* spectrum signature — full-width slim bar under the topbar */
.cc-hdr__spectrum.cc-spectrum { width: 100%; height: 3px; border-radius: 0; }

/* ============================================================= MAIN ROW */
.cc-hdr__mainrow { background: var(--cc-surface); box-shadow: 0 2px 14px -8px rgba(16, 28, 52, .25); }
.cc-hdr__inner { max-width: 1300px; margin: 0 auto; padding: 16px 22px; display: flex; align-items: center; gap: 26px; }

.cc-hdr__logo img { height: 52px; width: auto; display: block; }
.cc-hdr__logo--mobile { display: none; }

/* burger (mobile only) */
.cc-hdr__burger { display: none; }
.cc-hdr__burger a { display: grid; place-items: center; width: 44px; height: 44px; background: var(--cc-ground); border-radius: 12px; color: var(--cc-ink); }
.cc-hdr__burger svg { width: 24px; height: 24px; }

/* --------- search (restyle the reused displayNavSearchBlock widget) --------- */
.cc-hdr__search { flex: 1; max-width: 620px; }
.cc-hdr__search .tvcmssearch-wrapper, .cc-hdr__search .search-widget { width: 100%; }
/* hide the theme's collapse toggle + icons; we show an always-open pill */
.cc-hdr__search .tvheader-sarch-display { display: none; }
/* The theme's search styles are class-scoped (e.g. .tvsearch-header-display-wrappper
   form{border-radius:3px;border:2px} — a rectangle) and load after us, so we
   out-specify by prefixing #header.cc-hdr (1 ID) rather than using !important. */
#header.cc-hdr .cc-hdr__search .tvsearch-header-display-wrappper { display: block; }
#header.cc-hdr .cc-hdr__search form { display: flex; align-items: center; background: var(--cc-ground); border: 0; border-radius: 999px; padding: 4px 6px 4px 22px; overflow: visible; }
/* collapse the theme's tall inner padding (.tvcmssearch-wrapper/.tvheader-top-search
   carry padding:19px 0 → an 80px box) so the pill is ~50px */
#header.cc-hdr .cc-hdr__search .tvcmssearch-wrapper,
#header.cc-hdr .cc-hdr__search .search-widget,
#header.cc-hdr .cc-hdr__search .tvsearch-top-wrapper,
#header.cc-hdr .cc-hdr__search .tvsearch-header-display-full,
#header.cc-hdr .cc-hdr__search .tvheader-top-search,
#header.cc-hdr .cc-hdr__search .tvheader-top-search-wrapper,
#header.cc-hdr .cc-hdr__search .tvheader-top-search-wrapper-info-box { padding: 0; margin: 0; }
#header.cc-hdr .cc-hdr__search .tvheader-top-search { flex: 1; }
#header.cc-hdr .cc-hdr__search .tvheader-top-search-wrapper-info-box { width: 100%; }
#header.cc-hdr .cc-hdr__search input.tvcmssearch-words { width: 100%; height: 42px; border: 0; background: none; outline: none; font-size: .95rem; padding: 0; color: var(--cc-ink); font-family: inherit; }
#header.cc-hdr .cc-hdr__search .tvheader-top-search-wrapper { flex: 0 0 auto; }
#header.cc-hdr .cc-hdr__search button.tvheader-search-btn { border: 0; background: var(--cc-brand); color: #fff; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: none; }
#header.cc-hdr .cc-hdr__search button.tvheader-search-btn:hover { background: var(--cc-surface-deep); }
/* header.js swaps the theme's multi-circle magnifier for our own clean one
   (a single <circle> + <path>), which sidesteps the `svg circle:nth-child(2)
   {fill:… !important}` rules the theme scatters across its generated
   theme_custom/all_theme_custom files — no !important war, no shared-file edits. */
#header.cc-hdr .cc-hdr__search button.tvheader-search-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
/* the theme paints .tvheader-top-search-wrapper white (front.css) — clear it so
   the button reads as a circle inside our grey pill, not a white box */
#header.cc-hdr .cc-hdr__search .tvheader-top-search-wrapper { background: transparent; }
#header.cc-hdr .cc-hdr__search .tvsearch-result { position: absolute; z-index: 60; }

/* --------- search dropdown (tvcmssearch ajax results, restyled) ---------
   Markup comes from tvcmssearch (display_ajax_result.tpl + the html string in
   tvcmssearch.php) and is injected into .tvsearch-result inside our header, so
   we restyle it here instead of touching the module. Panel styling lives on the
   inner .tvcmssearch-dropdown, not on .tvsearch-result: the JS shows the empty
   container on every keyup, so a styled container would flash an empty card.
   Rules apply to both search slots (desktop pill + mobile row). */
#header.cc-hdr .tvsearch-header-display-wrappper { position: relative; }
#header.cc-hdr .tvsearch-result { left: 0; width: 100%; top: calc(100% + 10px); margin-top: 0; }
/* The frame is contested: custom.css (shared, uneditable) skins this dropdown the
   same way it skins the megamenu panel, all !important —
     .tvcmssearch-dropdown { border:1px solid #e9ecef !important;
       border-top:2px solid #2d3436 !important; border-radius:0 0 8px 8px !important;
       box-shadow:0 8px 24px rgba(0,0,0,.08) !important; background:#fff !important }
   so our border/radius/shadow lost silently and what rendered was a dark 2px bar
   with grey sides. Re-declared !important (our selector carries an ID, theirs
   doesn't, so we win the tie). Unlike the megamenu panel this one FLOATS 10px
   below the search pill, so it's a detached card: all four corners rounded, no
   top hairline. */
#header.cc-hdr .tvsearch-result .tvcmssearch-dropdown {
  position: relative; display: block;
  background: var(--cc-surface) !important;
  border: 0 !important;
  border-radius: var(--cc-radius) !important;
  box-shadow: var(--cc-shadow-lift) !important;
  padding: 10px; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
}
/* result count → quiet label */
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-total-wrapper { margin: 0; padding: 4px 8px 8px; }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-total {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cc-ink-faint);
}
/* close ✕ → small circle pinned top-right (theme draws it as a bordered block) */
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-close {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 30px; height: 30px;
  display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--cc-ground); color: var(--cc-ink-soft); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-close:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-close i { font-size: 18px; }
/* results → single-column rows (theme grids them 50%/50%) */
#header.cc-hdr .tvsearch-result .tvsearch-all-dropdown-wrapper { display: flex; flex-direction: column; margin: 0; }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-wrapper { width: 100%; margin: 0; padding: 0; }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-wrapper > a {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; padding: 8px;
  border: 0; border-radius: var(--cc-radius-sm); text-decoration: none;
  transition: background .15s ease;
}
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-wrapper > a:hover { background: var(--cc-ground); }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-img-block {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  background: var(--cc-ground); display: grid; place-items: center;
}
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-img-block img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-content-box { flex: 1; min-width: 0; width: auto; padding: 0; }
#header.cc-hdr .tvsearch-result .tvsearch-dropdown-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  margin: 0 0 3px; font-size: .9rem; line-height: 1.3; color: var(--cc-ink);
}
#header.cc-hdr .tvsearch-result .product-price-and-shipping { display: flex; align-items: baseline; gap: 8px; margin: 0; }
#header.cc-hdr .tvsearch-result .product-price-and-shipping .price { float: none; margin: 0; font-weight: 700; font-size: .95rem; color: var(--cc-brand); font-variant-numeric: tabular-nums; }
#header.cc-hdr .tvsearch-result .product-price-and-shipping .regular-price { float: none; margin: 0; font-size: .82rem; color: var(--cc-ink-faint); text-decoration: line-through; }
/* "More Result" → full-width brand button (theme's .tvall-inner-btn.btn) */
#header.cc-hdr .tvsearch-result .tvsearch-more-search-wrapper { margin: 6px 0 0; padding: 8px; border-top: 1px solid var(--cc-hairline); }
#header.cc-hdr .tvsearch-result button.tvsearch-more-search {
  display: block; width: 100%; padding: 11px 16px; border: 0; border-radius: 999px;
  background: var(--cc-brand); color: #fff; font-weight: 700; font-size: .88rem;
  cursor: pointer; box-shadow: none; transition: background .15s ease;
}
#header.cc-hdr .tvsearch-result button.tvsearch-more-search:hover { background: var(--cc-surface-deep); }
#header.cc-hdr .tvsearch-result button.tvsearch-more-search span { color: inherit; }

/* ============================================================= ACTIONS */
.cc-hdr__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cc-hdr__act { position: relative; }
.cc-hdr__act--mobile { display: none; }

/* shared pill hover for account + cart clickable faces */
.cc-account__btn, .cc-hdr__cart .tvheader-cart-btn-wrapper > a {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--cc-ink);
  padding: 8px 12px; border-radius: 12px; background: none; border: 0; cursor: pointer;
  transition: background .15s ease; font-family: inherit;
}
.cc-account__btn:hover, .cc-hdr__cart .tvheader-cart-btn-wrapper > a:hover { background: var(--cc-ground); }

/* icons */
.cc-account__btn .cc-ico { width: 24px; height: 24px; color: var(--cc-ink); display: block; }
.cc-account__btn .cc-ico svg { width: 24px; height: 24px; display: block; }

/* two-line labels (artifact style). #header.cc-hdr out-specifies the theme's
   `#header .tv-myaccount-btn span{display:block}`, which otherwise forces the
   two spans inline ("Iniciar sesiónMi cuenta"). */
#header.cc-hdr .cc-account__lbl, #header.cc-hdr .cc-cart-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; white-space: nowrap; }
#header.cc-hdr .cc-account__lbl b, #header.cc-hdr .cc-cart-text .cc-cart-label { display: block; font-size: .9rem; font-weight: 700; color: var(--cc-ink); }
/* the account is an <a> now — stop it inheriting the theme's blue link colour */
#header.cc-hdr .cc-account__btn, #header.cc-hdr .cc-account__btn:hover, #header.cc-hdr .cc-account__btn .cc-ico { color: var(--cc-ink); }
#header.cc-hdr .cc-account__lbl span, #header.cc-hdr .cc-cart-text .cc-cart-total { display: block; color: var(--cc-ink-faint); font-size: .72rem; }
#header.cc-hdr .cc-cart-text .cc-cart-total { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cc-ink-soft); }

/* account is now a plain link (dropdown removed) */
.cc-account { position: relative; }
#header.cc-hdr .cc-account__btn { text-decoration: none; }

/* --------- cart (reused ps_shoppingcart block) ---------
   The theme structure is: a.tvheader-cart-btn-wrapper > .tvcart-icon-text-wrapper
   > [.tv-cart-icon svg] + [.tv-cart-cart-inner (the absolute count BADGE)].
   header.js injects our "Carrito / <total>" label (.cc-cart-text) as a sibling
   INTO .tvcart-icon-text-wrapper (NOT into the tiny absolute badge). We keep the
   theme badge but recolour + pin it on the icon. #header.cc-hdr out-specifies the
   theme's .tv-cart-cart-inner{position:absolute;background:#d90244} in common.css. */
#header.cc-hdr .cc-hdr__cart .blockcart, #header.cc-hdr .cc-hdr__cart .tv-header-cart, #header.cc-hdr .cc-hdr__cart .tvheader-cart-wrapper { background: none; }
#header.cc-hdr .cc-hdr__cart .tvcart-icon-text-wrapper { display: flex; align-items: center; gap: 10px; position: relative; }
#header.cc-hdr .cc-hdr__cart .tv-cart-icon { position: static; width: 26px; height: 26px; }
#header.cc-hdr .cc-hdr__cart .tv-cart-icon svg { width: 26px; height: 26px; display: block; }
/* recolour the themed yellow cart glyph */
#header.cc-hdr .cc-hdr__cart .tv-cart-icon svg path[style*="fill:#FFD741"], #header.cc-hdr .cc-hdr__cart .tv-cart-icon svg path[style*="fill:#FFD742"] { fill: none; }
/* The count badge (theme's absolute .tv-cart-cart-inner), pinned to the icon corner.
   BRAND, not the spectrum's orange it used to wear: the orange belongs to the logo's
   rainbow and to the scarcity badge on the cards, and up here it was the only warm
   thing in a header made of ink and brand blue — it read as a warning, not a count. */
#header.cc-hdr .cc-hdr__cart .tv-cart-cart-inner {
  position: absolute; left: 15px; top: -7px; right: auto; width: 17px; height: 17px; min-width: 17px;
  border-radius: 9px; background-color: var(--cc-brand); color: #fff; font-size: .66rem; font-weight: 700;
  line-height: 17px; text-align: center; padding: 0; display: block;
}
#header.cc-hdr .cc-hdr__cart .cart-products-count { color: #fff; }

/* ============================================================= NAV ROW (megamenu) */
.cc-hdr__navrow { background: var(--cc-surface); border-top: 1px solid var(--cc-hairline); }
.cc-hdr__navwrap { max-width: 1300px; margin: 0 auto; }
#header.cc-hdr .container_tv_megamenu { padding: 0; }
/* gap:0 — the 14px padding on each link already gives a 28px gutter, and the dot
   separator sits centred on the boundary between two links */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content { display: flex; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
/* hide the "Mega Menu" heading li */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.tvmega-menu-title { display: none; }
/* NB: do NOT set position:relative on li.level-1 — that would make the narrow
   li the containing block for the theme's absolute .tv-sub-menu dropdown and
   collapse its grid. The dropdown anchors to .tvcms-header-menu (theme default).
   The underline ::after is anchored to the <a> (which is position:relative). */
#header.cc-hdr ul.menu-content > li.level-1 { list-style: none; }
/* The category names are stored ALL-CAPS in the catalog ("CUMPLEAÑOS Y FIESTAS
   TEMATICAS"), which is why uppercasing them again read as shouting. Lowercase
   the label and put the first letter back — cosmetic, header-only; the caps still
   show in breadcrumbs/listings until the names themselves are fixed (v9 reorg). */
/* NB on specificity — the theme's custom.css (shared, uneditable) carries a full
   !important megamenu skin, e.g.
     #header .tv-menu-horizontal ul li.level-1>a { font-size:13px!important;
       font-weight:500!important; color:#2d3436!important; padding:14px 18px!important }
   !important beats specificity, so our plain declarations lost silently (the bar
   was still rendering at the theme's 13px/500/#2d3436). We therefore mirror their
   selector chain, add .cc-hdr, and mark the same properties !important: equal
   importance → higher specificity wins → ours. Verified in Chrome via computed
   styles, not by reading the cascade. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a {
  position: relative; display: block; white-space: nowrap; text-decoration: none;
  padding: 14px 14px !important; font-size: .94rem !important; font-weight: 600 !important;
  color: var(--cc-ink) !important; letter-spacing: 0 !important; text-transform: lowercase !important;
}
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a::first-letter { text-transform: uppercase; }
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a > span { font: inherit; color: inherit !important; }
/* The theme (custom.css, shared with shop 1 → we can't edit it) ships its OWN
   hover underline as `li.level-1 > a > span::after` (2px #2d3436, all !important)
   AND hides `a::after` on dropdown parents:
       .tv-menu-horizontal li.level-1.parent > a::after { display: none !important }
   Net effect if left alone: the 6 category items show the theme's dark bar and
   swallow ours, while TALLER PERSONALIZACIÓN — the only item with no dropdown,
   so no .parent class — shows BOTH. So: kill theirs, and force ours back on
   parents. !important is required here only because theirs is !important; our
   selector carries an extra ID, so ours wins the tie. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a > span::after { display: none !important; }
/* `top: auto` is load-bearing. The theme uses a::after for its dropdown caret —
     .tv-menu-horizontal li.level-1.parent > a::after { content:'\e313'; top:4px }
   — and hides it elsewhere with display:none!important. Forcing display:block to
   get our underline back on the parents also revives that rule's top:4px, and
   `top` + `height` wins over `bottom`, so the bar rode 4px below the TOP of the
   link on the six dropdown items (and correctly at the bottom on Taller, the only
   non-.parent). Resetting top puts bottom:0 back in charge. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a::after {
  content: ""; display: block !important; position: absolute; left: 14px; right: 14px;
  top: auto; bottom: 0; height: 2px;
  background: var(--cc-brand-bright); transform: scaleX(0);
  transform-origin: left; transition: transform .18s ease;
}
/* dot separators between items. The dot hangs off the LINK (which is already
   position:relative), never off the li — putting position:relative on li.level-1
   would make that narrow li the containing block for the theme's absolutely
   positioned .tv-sub-menu and collapse the dropdown grid (see note above). */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 + li.level-1 > a::before {
  content: "·"; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  color: var(--cc-ink-faint); font-weight: 700; line-height: 1; pointer-events: none;
}
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1:hover > a { color: var(--cc-brand) !important; }
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content > li.level-1:hover > a::after { transform: scaleX(1); }
/* mobile drill toggle hidden on desktop (the drawer keeps its chevrons) */
#header.cc-hdr #tvdesktop-megamenu ul.menu-content > li.level-1 > .icon-drop-mobile { display: none; }

/* ============================================ DROPDOWN PANELS (megamenu)
   The panel is the module's own markup: .tv-sub-menu > .tv-menu-row.row >
   .tv-menu-col.col-sm-2 > ul.ul-column > li.item-header | li.item-line.
   Two things shape this block:
   1) The Group Header / Line split is now correct in the config (shop 3 was 290
      headers / 49 lines — nearly every category had been saved as a header), so
      titles and links can finally be styled as what they are.
   2) The group titles are NOT links: they're HTML blocks whose colour and teal
      underline are INLINE styles (<span style="color:#1f1c3d;text-decoration:
      underline;text-decoration-color:#48b3df">). Inline beats a stylesheet, so
      the overrides below need !important — the only way short of editing the
      module's data. */
/* The panel is 100% theme-skinned in custom.css (shared, uneditable), and every
   property is !important:
     @media (min-width:992px) { #tvdesktop-megamenu .tv-menu-horizontal .menu-dropdown,
       .tv-menu-horizontal .menu-dropdown {
         border: 1px solid #e9ecef !important; border-top: 2px solid #2d3436 !important;
         border-radius: 0 0 8px 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
         padding: 24px !important; background-color:#fff !important } }
   so our plain declarations lost silently: what actually rendered was a dark 2px
   bar on top, grey side borders and an 8px corner. Re-declared !important here —
   two IDs beat their one at equal importance.
   The panel hangs flush under the nav row (margin-top:0), so only the BOTTOM
   corners are rounded; a hairline on top reads as the bar's own bottom rule, and
   depth comes from the one soft shadow instead of a border box. */
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu.menu-dropdown {
  background: var(--cc-surface) !important;
  border: 0 !important; border-top: 1px solid var(--cc-hairline) !important;
  border-radius: 0 0 var(--cc-radius) var(--cc-radius) !important;
  box-shadow: var(--cc-shadow-lift) !important;
  padding: 24px 26px !important;
  overflow: hidden;
}
/* Bootstrap's col-sm-2 grid → an even auto-fitting grid: columns share the width
   evenly whatever their number (menus here run 4–6 columns), with real gutters. */
/* One track per column, always. `repeat(auto-fit, minmax(170px,1fr))` sized the
   grid to the PANEL rather than to the content: at 1298px it laid out 6 tracks
   for the 5 columns Disfraces has, and the empty 6th didn't collapse — leaving
   ~220px of dead space on the right. grid-auto-flow:column derives the count from
   the columns themselves, so each menu (they run 4–6) fills the panel exactly. */
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .tv-menu-row.row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px 26px; margin: 0;
}
/* Bootstrap's clearfix on .row — `.row::before/::after { content:" "; display:table }`
   — is inert in a float layout but becomes a real GRID ITEM here, so it claimed a
   whole extra track: 5 columns laid out in 6, leaving ~220px of dead space on the
   right of the panel. */
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .tv-menu-row.row::before,
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .tv-menu-row.row::after {
  content: none !important; display: none !important;
}
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .tv-menu-col { width: auto; max-width: none; flex: none; float: none; padding: 0; }
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .ul-column { margin: 0; padding: 0 0 0 24px; list-style: none; border-left: 1px solid var(--cc-hairline); }
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .tv-menu-col:first-child .ul-column { padding-left: 0; border-left: 0; }
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu li.menu-item { list-style: none; }

/* group title — quiet uppercase label + hairline, brand blue.
   Two problems solved at once here:
   1) Titles are hand-made HTML blocks in the back office, and EVERY SHOP'S MENU
      DATA IS ITS OWN — the shapes below are what the two shops actually contain:
        a) <div.html-block><p><strong><span style="color:#1f1c3d;text-decoration:
           underline;text-decoration-color:#48b3df">   ← shop 3, 26 of them
        b) <a href="#">TITLE</a>                        ← shop 3, 3 (no inline style)
        c) <div.html-block><p><a href="…">TITLE</a>     ← shop 3, 2 (BOLSAS DE COTILLON, GLOBOS)
        d) <div.html-block><div style="margin:20px 0">
             <h2 style="border-bottom:2px solid #666;display:inline-block;color:#666">
                                                        ← shop 1 (Disfraces/Accesorios Navidad)
        e) <div.html-block><p>TITLE</p>                 ← shop 1, plain
      Styling the header AND every descendant (rather than enumerating tags) is
      what makes them all land identically, and survives whatever markup the next
      title gets pasted with.
   2) The theme forces its own skin on shape (b) with
        #header .tv-menu-horizontal ul li.level-1 ul li.item-header a
          { font-size:13px!important; font-weight:600!important; color:#1a1a2e!important }
      — an !important rule with MORE elements than a plain .tv-sub-menu selector,
      so it outranked us and those 4 titles rendered 13px/#1a1a2e while the other
      26 rendered ours. Mirroring the theme's chain + .cc-hdr wins the tie. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-header,
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-header * {
  text-align: left !important; font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase; line-height: 1.35; font-style: normal !important;
  color: var(--cc-brand) !important; text-decoration: none !important; background: none !important;
}
/* Descendants only: strip the frame the back-office block brought with it. These
   need !important because they are fighting INLINE styles — shape (d) carries
   `border-bottom:2px solid #666` on the <h2> and `margin:20px 0` on its wrapper,
   which is the grey line that showed under "Disfraces Navidad"/"Accesorios
   Navidad" (on top of the li's own hairline below — two lines, not one).
   Scoped to `*` so the li's own frame in the next rule survives. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-header * {
  display: block !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
}
/* re-apply the li's own frame (the rules above zero it) */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-header {
  display: block; margin: 0 0 10px; padding: 0 0 7px !important; border-bottom: 1px solid var(--cc-hairline);
}
/* a title that links to its category (BOLSAS DE COTILLON, GLOBOS) stays clickable */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-header a:hover { color: var(--cc-brand-bright) !important; }

/* category link — left-aligned row, no bullet, soft hover.
   Same fight: the theme forces 13px/400/#555 + a hover that shifts padding-left,
   and draws a bullet via a::before, all !important. .tvmega-menu-link is added to
   the chain to outrank its bullet rule.

   DESCENDANT, not child. The two shops nest the link differently:
     shop 3:  li.item-line > a
     shop 1:  li.item-line > div.html-block > p > a
   A `>` combinator only ever matched shop 3, so shop 1's links kept the THEME's
   look wholesale — 13px/#555 with its bullet dot ("the old design with dots").
   A combinator carries no specificity, so widening it costs nothing in the fight
   against the theme's !important rules. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line a {
  display: block; text-align: left; border-radius: 8px; text-decoration: none; line-height: 1.35;
  font-size: .88rem !important; font-weight: 400 !important; color: var(--cc-ink-soft) !important;
  padding: 5px 8px !important; margin: 0 -8px; letter-spacing: normal !important;
  transition: background .15s ease, color .15s ease;
}
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line a:hover {
  background: var(--cc-ground); color: var(--cc-brand) !important; padding-left: 8px !important;
}
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line.tvmega-menu-link a::before,
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line.tvmega-menu-link a::after,
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line.tvmega-menu-link a:hover::before {
  display: none !important; content: none !important;   /* theme bullet dot */
}
/* flatten shop 1's wrappers — a <p> around each link would otherwise space the
   rows out with its default margins. */
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line .html-block,
#header.cc-hdr #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 ul li.item-line .html-block p {
  display: block; margin: 0 !important; padding: 0 !important; background: none !important;
}

/* leftovers in shop 3's menu data: empty HTML blocks and title-less links would
   render as blank rows / invisible click targets — collapse them */
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu .html-block:empty { display: none; }
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu li.menu-item > a:empty { display: none; }
#header.cc-hdr #tvdesktop-megamenu .tv-sub-menu li.item-header:not(:has(> a)):has(> .html-block:empty) { display: none; }

/* sticky (custom.js adds .sticky) */
.cc-hdr__navrow.tvcmsheader-sticky.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 4px 18px -10px rgba(16, 28, 52, .35); }

/* ============================================================= MOBILE DRAWER (restyle .tvmobile-slidebar) */
.cc-hdr .tvmobile-slidebar.cc-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: min(340px, 86vw); max-width: 86vw; min-width: 0;
  /* the theme's .tvmobile-slidebar adds padding:15px + a grey border + radius —
     clear them so our navy header runs edge-to-edge (our selector out-specifies) */
  padding: 0; border: 0; border-radius: 0;
  background: var(--cc-surface);
  /* Slide + fade-out in lockstep with the .full-wrapper-backdrop (which fades
     over 300ms). We control visibility ourselves: on close it stays visible for
     the full 300ms slide-out, then flips hidden — otherwise it vanished instantly
     while the backdrop was still fading ("background hides faster"). */
  transform: translateX(-100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
  z-index: 1200; display: flex; flex-direction: column; box-shadow: 6px 0 30px -10px rgba(0, 0, 0, .4); overflow: hidden;
}
.cc-hdr .tvmobile-slidebar.cc-drawer.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
.cc-drawer__head { background: var(--cc-surface-deep); padding: 18px; }
.cc-drawer__spectrum.cc-spectrum { width: 90px; height: 4px; margin-bottom: 14px; border-radius: 3px; }
.cc-drawer__headrow { display: flex; align-items: center; justify-content: space-between; }
.cc-drawer__logo img { height: 34px; width: auto; display: block; }
/* the theme's .tvmobile-dropdown-close block (custom.css:15816) is all !important:
   a border-bottom (white line under the X) + a grey #f5f5f5 circle. Override with
   scoped !important for our navy header (can't beat !important otherwise). */
#header.cc-hdr .cc-drawer__close { border: 0 !important; border-bottom: 0 !important; }
#header.cc-hdr .cc-drawer__close a { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .14) !important; color: #fff; display: grid; place-items: center; }
#header.cc-hdr .cc-drawer__close a:hover { background: rgba(255, 255, 255, .24) !important; }
#header.cc-hdr .cc-drawer__close svg { width: 20px; height: 20px; }
/* ---- mobile search row (#tvcmsmobile-search): a full-width pill below the main
   row on phones, hidden on desktop. Same clean pill as desktop (the theme renders
   a bordered rectangle + tall inner padding otherwise). ---- */
.cc-hdr__mobilesearch { display: none; }
#header.cc-hdr .cc-hdr__mobilesearch .tvcmssearch-wrapper,
#header.cc-hdr .cc-hdr__mobilesearch .search-widget,
#header.cc-hdr .cc-hdr__mobilesearch .tvsearch-top-wrapper,
#header.cc-hdr .cc-hdr__mobilesearch .tvsearch-header-display-full,
#header.cc-hdr .cc-hdr__mobilesearch .tvheader-top-search,
#header.cc-hdr .cc-hdr__mobilesearch .tvheader-top-search-wrapper,
#header.cc-hdr .cc-hdr__mobilesearch .tvheader-top-search-wrapper-info-box { padding: 0; margin: 0; background: transparent; }
#header.cc-hdr .cc-hdr__mobilesearch .tvsearch-header-display-wrappper { display: block; }
#header.cc-hdr .cc-hdr__mobilesearch form { display: flex; align-items: center; background: var(--cc-ground); border: 0; border-radius: 999px; padding: 4px 6px 4px 18px; overflow: visible; }
#header.cc-hdr .cc-hdr__mobilesearch .tvheader-top-search { flex: 1; }
#header.cc-hdr .cc-hdr__mobilesearch input.tvcmssearch-words { width: 100%; height: 40px; border: 0; background: none; outline: none; font-size: .95rem; padding: 0; color: var(--cc-ink); font-family: inherit; }
#header.cc-hdr .cc-hdr__mobilesearch button.tvheader-search-btn { border: 0; background: var(--cc-brand); width: 38px; height: 38px; min-width: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
#header.cc-hdr .cc-hdr__mobilesearch button.tvheader-search-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.cc-drawer__menu { flex: 1; overflow: auto; padding: 8px 6px; }
.cc-drawer__foot { border-top: 1px solid var(--cc-hairline); padding: 16px 18px 22px; }
.cc-drawer__hooks:empty { display: none; }
/* quick contact — full-width CTA buttons */
.cc-drawer__contacts { display: flex; flex-direction: column; gap: 10px; }
#header.cc-hdr .cc-drawer__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s ease, transform .15s ease; }
#header.cc-hdr .cc-drawer__btn:hover { transform: translateY(-1px); }
#header.cc-hdr .cc-drawer__btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
#header.cc-hdr .cc-drawer__btn--wa { background: #25d366; color: #fff; }
#header.cc-hdr .cc-drawer__btn--wa:hover { background: #1eb457; }
#header.cc-hdr .cc-drawer__btn--call { background: var(--cc-surface-deep); color: #fff; }
#header.cc-hdr .cc-drawer__btn--call:hover { background: var(--cc-brand); }
/* social row */
.cc-drawer__social { margin-top: 16px; }
.cc-drawer__social-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-ink-faint); font-weight: 700; margin-bottom: 10px; }
.cc-drawer__social-row { display: flex; gap: 10px; }
#header.cc-hdr .cc-drawer__social-row a { width: 40px; height: 40px; border-radius: 10px; background: var(--cc-surface-deep); color: #fff; display: grid; place-items: center; text-decoration: none; transition: transform .15s ease, background .15s ease; }
#header.cc-hdr .cc-drawer__social-row a:hover { background: var(--cc-brand); transform: translateY(-2px); }
.cc-drawer__social-row svg { width: 19px; height: 19px; }

/* Drawer mega-menu (AJAX-filled #tvmobile-megamenu). The megamenu module's
   front.css already ships a full mobile accordion under @media(max-width:991) —
   we let it drive layout/drill-down and only recolour it + fix two leftover
   theme glitches (sub-item ●-bullets and a bootstrap .row overflow). The theme's
   own rules are #header-prefixed (ID specificity), so we scope ours to
   `#header #tvmobile-megamenu` (2 IDs) to win cleanly WITHOUT !important. This
   ID only holds content on mobile / after showView moves it, so it never leaks
   to the desktop menu (#tvdesktop-megamenu) or shop 1. */
#header #tvmobile-megamenu .tvmega-menu-title,
#header #tvmobile-megamenu .title-menu-mobile { display: none; }   /* "Mega Menu" heading */
.cc-drawer__menu { overflow-x: hidden; }
/* The theme's !important megamenu skin (custom.css, shared with shop 1) is NOT
   inside a media query, so it dresses the drawer too: 13px/#555 sub-links, bullet
   dots, a chevron divider. Two IDs beat its one — but importance is compared
   BEFORE specificity, so every property it forces has to be re-forced here. The
   design mirrors the desktop dropdown; the accordion/drill-down stays the theme's. */
/* !important: custom.css forces `.tv-menu-horizontal li.level-1 { border-bottom-color:#f0f0f0 !important }`,
   which was quietly winning — the drawer's row separators rendered flat grey instead of our hairline. */
#header #tvmobile-megamenu li.level-1 { border-bottom-color: var(--cc-hairline) !important; }
/* display:block is load-bearing, not cosmetic: the theme sets these links to
   inline-flex, and ::first-letter only applies to BLOCK containers — so the
   sentence-case trick silently produced all-lowercase labels here while working
   on desktop (where the link is already block). */
#header.cc-hdr #tvmobile-megamenu ul.menu-content > li.level-1 > a {
  display: block !important;
  padding: 13px 4px !important; font-size: .95rem !important; font-weight: 600 !important;
  color: var(--cc-ink) !important; letter-spacing: 0 !important; text-transform: lowercase !important;
}
#header.cc-hdr #tvmobile-megamenu ul.menu-content > li.level-1 > a::first-letter { text-transform: uppercase !important; }
#header.cc-hdr #tvmobile-megamenu ul.menu-content > li.level-1 > a > span { color: inherit !important; }
/* the theme also paints its hover bar on span::after here — kill it, as on desktop */
#header.cc-hdr #tvmobile-megamenu ul.menu-content > li.level-1 > a > span::after { display: none !important; }
/* kill the theme's vertical divider on the chevron cell. custom.css:15739 sets
   `border-left:1px …!important` (the whole block is !important, and it's in the
   shop-1-shared custom.css), so !important on our drawer-scoped selector is the
   only way to override it without touching shop 1. */
#header #tvmobile-megamenu .icon-drop-mobile { border-left: 0 !important; }
#header #tvmobile-megamenu .icon-drop-mobile:after { color: var(--cc-ink-faint); }
/* neutralise bootstrap .row negative gutters (uncountered once the theme zeroes
   the sub-menu padding on mobile) and the desktop column divider */
#header #tvmobile-megamenu .ul-column,
#header #tvmobile-megamenu .ul-column li { list-style: none; }
#header #tvmobile-megamenu .tv-menu-row.row { margin-left: 0; margin-right: 0; }
#header #tvmobile-megamenu .tv-menu-col { width: 100%; padding-left: 0; padding-right: 0; }
#header #tvmobile-megamenu .tv-menu-col .ul-column { border-left: 0; padding: 2px 0 10px 12px; }

/* group title — same label as the desktop dropdown (see the DROPDOWN PANELS block
   for why every descendant is styled: three hand-made markup shapes, inline styles) */
/* Same two shop-1 shapes as the desktop menu above: an inline
   `border-bottom:2px solid #666` on the title's <h2>, and links nested inside
   .html-block > p. Keep both menus fixed together — the drawer serves the same
   per-shop menu data. */
#header.cc-hdr #tvmobile-megamenu li.item-header,
#header.cc-hdr #tvmobile-megamenu li.item-header * {
  text-align: left !important; font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase; line-height: 1.35; font-style: normal !important;
  color: var(--cc-brand) !important; text-decoration: none !important; background: none !important;
}
/* descendants only — !important because these fight inline styles */
#header.cc-hdr #tvmobile-megamenu li.item-header * {
  display: block !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
}
#header.cc-hdr #tvmobile-megamenu li.item-header {
  margin: 12px 0 8px; padding: 0 0 6px !important; border-bottom: 1px solid var(--cc-hairline);
}
#header.cc-hdr #tvmobile-megamenu li.item-header:first-child { margin-top: 2px; }

/* category link — touch-sized rows, no bullets */
/* descendant, not child — shop 1 nests the link in .html-block > p (see the
   desktop rule for the full explanation) */
#header.cc-hdr #tvmobile-megamenu li.item-line a {
  display: block; text-align: left; border-radius: 8px; text-decoration: none; line-height: 1.35;
  font-size: .9rem !important; font-weight: 400 !important; color: var(--cc-ink-soft) !important;
  padding: 9px 10px !important; margin: 0 -10px; letter-spacing: normal !important;
}
#header.cc-hdr #tvmobile-megamenu li.item-line a:active,
#header.cc-hdr #tvmobile-megamenu li.item-line a:hover {
  background: var(--cc-ground); color: var(--cc-brand) !important; padding-left: 10px !important;
}
#header.cc-hdr #tvmobile-megamenu li.item-line .html-block,
#header.cc-hdr #tvmobile-megamenu li.item-line .html-block p {
  display: block; margin: 0 !important; padding: 0 !important; background: none !important;
}
#header.cc-hdr #tvmobile-megamenu li.item-line.tvmega-menu-link a::before,
#header.cc-hdr #tvmobile-megamenu li.item-line.tvmega-menu-link a::after,
#header.cc-hdr #tvmobile-megamenu li.item-line.tvmega-menu-link a:hover::before {
  display: none !important; content: none !important;   /* theme bullet dot */
}
/* same leftovers as desktop: empty HTML blocks / title-less links */
#header.cc-hdr #tvmobile-megamenu .html-block:empty { display: none; }
#header.cc-hdr #tvmobile-megamenu li.menu-item > a:empty { display: none; }
#header.cc-hdr #tvmobile-megamenu li.item-header:not(:has(> a)):has(> .html-block:empty) { display: none; }

/* ============================================================= RESPONSIVE */
@media (max-width: 991px) {
  .cc-hdr__inner { gap: 14px; padding: 12px 16px; }
  .cc-hdr__burger { display: block; }
  /* logo: showView moves it from #tvcmsdesktop-logo → #tvcmsmobile-header-logo,
     so show the mobile move-target and hide the (now empty) desktop source */
  .cc-hdr__logo:not(.cc-hdr__logo--mobile) { display: none; }
  .cc-hdr__logo--mobile { display: block; margin-right: auto; }
  .cc-hdr__logo--mobile img { height: 40px; width: auto; display: block; }
  .cc-hdr__search { display: none; }          /* desktop inline search → mobile row below */
  .cc-hdr__mobilesearch { display: block; background: var(--cc-surface); padding: 2px 16px 12px; }
  .cc-hdr__navrow { display: none; }           /* menu moved into drawer */
  .cc-hdr__act--mobile { display: block; }     /* device-rendered / showView-populated */
  /* icons only on mobile (hide the account/cart text labels). #header.cc-hdr to
     beat our own #header.cc-hdr .cc-account__lbl{display:flex} rule above. */
  #header.cc-hdr .cc-account__lbl, #header.cc-hdr .cc-cart-text { display: none; }
  /* keep the empty desktop move-source containers from taking layout space */
  .cc-hdr__act:not(.cc-hdr__act--mobile):empty { display: none; }
  #header.cc-hdr .cc-account__btn, #header.cc-hdr .cc-hdr__cart .tvheader-cart-btn-wrapper > a { padding: 6px; }
}
@media (min-width: 992px) {
  .cc-hdr__act--mobile, .cc-hdr__logo--mobile { display: none !important; }
}

/* ============================================================= CART DRAWER
   The mini-cart panel (.ttvcmscart-show-dropdown-right) that slides in from the
   right when the cart button is clicked. It is the theme's markup — ps_shoppingcart
   + tvcms chrome — so this is CSS only; the complementary-products block inside it
   ("Completa tu pedido") is OURS and is styled in cc_relatedproducts.

   Everything is prefixed with #header so it out-ranks the theme's custom.css, which
   styles the same classes and loads after us.
   ============================================================================= */

#header .ttvcmscart-show-dropdown-right {
  width: 400px; max-width: 100vw;
  background: var(--cc-surface);
  box-shadow: -10px 0 40px rgba(15, 36, 64, .18);
  border: 0;
}
/* the signature, as the drawer's lid — the same seven bands as the topbar, the
   section headings and the "producto añadido" modal.
   Built from --cc-accent-1..7, NOT the raw palette: cc_ui repaints those per shop,
   so this is a rainbow on El Informal and one solid brand band on a shop whose
   signature is 'solid'. The rainbow is El Informal's logo — hardcoding the palette
   here would print it on the other brand's storefront. */
#header .ttvcmscart-show-dropdown-right::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; z-index: 2;
  background: linear-gradient(90deg,
    var(--cc-accent-1) 0 14.2857%,
    var(--cc-accent-2) 14.2857% 28.5714%,
    var(--cc-accent-3) 28.5714% 42.8571%,
    var(--cc-accent-4) 42.8571% 57.1428%,
    var(--cc-accent-5) 57.1428% 71.4285%,
    var(--cc-accent-6) 71.4285% 85.7142%,
    var(--cc-accent-7) 85.7142% 100%);
}

/* ---------------------------------------------------------------- drawer head */
#header .ttvcart-close-title-count {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--cc-hairline);
}
#header .ttvcart-top-title { flex: 1 1 auto; order: 2; }
#header .ttvcart-top-title h4 {
  margin: 0;
  font-size: 1.05rem; font-weight: 800; color: var(--cc-ink);
  text-transform: none; letter-spacing: 0;
}
#header .ttvclose-cart {
  order: 1; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--cc-surface-2); color: var(--cc-ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#header .ttvclose-cart:hover { background: var(--cc-ink); color: #fff; }
/* The button ships EMPTY (<button class="ttvclose-cart"></button>) — the theme draws
   its ✕ with a background-image that our background rule painted over, leaving a blank
   circle with nothing to click on. Draw the glyph ourselves. */
#header .ttvclose-cart::before {
  content: "✕";
  font-size: .95rem; font-weight: 700; line-height: 1;
}

/* the names come out Title-Cased ("Vela Bengala Azul Tarta 9,5 CM 2 Uds") — the theme
   capitalizes every word. Product names are data; leave them as typed. */
#header .tvshoping-cart-dropdown-title .product-name,
#header .tvshoping-cart-dropdown-title a { text-transform: none; }

/* The shop's custom CSS pins the complementary block's accent to #044f98 — a second,
   almost-identical blue sitting next to our brand one in the same 400px panel. One
   blue. (cc_relatedproducts already defaults it to the token; this out-ranks the
   custom-CSS override we can't edit.) */
#header .cc-cartcomplementary { --cc-cartcomplementary-accent: var(--cc-brand); }
/* the count: the same brand pill the header button wears.
   The WRAPPER has to be blanked first — custom.css paints it
   `background-color: #f0f0f0 !important; width: auto !important; padding: 0 8px
   !important; border-radius: 12px !important` (and the theme's own rule paints it
   #d90244). That's a grey pill sitting behind our blue badge, wider than it and offset:
   the "colliding background" you spotted. Only the inner span should have a colour. */
#header .ttvcart-counter {
  order: 3; flex: 0 0 auto;
  background: none !important;
  width: auto !important; height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#header .ttvcart-counter .ttvcart-products-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px;
  background: var(--cc-brand) !important;
  /* custom.css sets `color: #333 !important` here — black digits on the blue badge */
  color: #fff !important;
  font-size: .74rem; font-weight: 700;
}

/* --------------------------------------------------------------- cart lines */
#header .ttvcart-product-wrapper.items {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--cc-hairline);
}
#header .tvcart-product-list-img { flex: 0 0 auto; }
#header .tvcart-product-list-img img {
  width: 66px; height: 66px;
  object-fit: contain;
  padding: 4px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-hairline);
  border-radius: 10px;
  mix-blend-mode: multiply;
}
#header .tvcart-product-content {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  padding-right: 26px;              /* room for the remove button */
}
#header .tvshoping-cart-dropdown-title a { text-decoration: none; }
#header .tvshoping-cart-dropdown-title .product-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .87rem; font-weight: 600; line-height: 1.35;
  color: var(--cc-ink);
}
/* "QTY : 1" — an English abbreviation with a floating colon, in a Spanish shop. The
   label is a theme string we can't edit from here, so hide the text and print the
   Spanish one in its place (same trick as the CTA arrow). */
#header .tvcart-product-list-box { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 2px; }
/* .tvcart-product-list-box in the chain: the theme sets a font-size on
   `.tvcart-product-list-box .tvshopping-cart-qty`, which outranked a bare
   `#header .tvshopping-cart-qty` — so "QTY :" kept its size and rendered right next to
   our replacement: "QTY :Cantidad: 1". */
/* !important: the shop's custom CSS sets `font-size: 12px !important` on this label.
   Importance is compared BEFORE specificity, so no chain of ours can beat it without
   matching it — and once both are !important, our ID wins the tie. */
/* letter-spacing:0 matters as much as the font-size. custom.css puts `letter-spacing:
   1px` on the body, and letter-spacing is charged PER CHARACTER even at font-size 0 —
   so the five hidden characters of "QTY :" still occupied ~5px and pushed our label
   out of line with the price below it. */
#header .tvcart-product-list-box .tvshopping-cart-qty {
  font-size: 0 !important;
  letter-spacing: 0 !important; word-spacing: 0 !important;
}
#header .tvcart-product-list-box .tvshopping-cart-qty::after {
  content: "Cantidad:";
  font-size: .78rem; font-weight: 400; color: var(--cc-ink-faint);
}
#header .tvcart-product-list-box .product-qty {
  font-size: .78rem; font-weight: 700; color: var(--cc-ink-soft);
}
#header .tvcart-product-content .product-price {
  display: block;
  font-size: .95rem; font-weight: 800; color: var(--cc-brand);
}
/* The remove button. The theme hides the <i> that carries the trash glyph
   (`.tvcart-product-remove a i { display: none }`) and draws the icon another way,
   sized for its own 40×40 anchor — which is why, once we shrank the anchor, the icon
   sat off-centre. Show the real glyph, centre it in the button, and let nothing else
   paint: one icon, one box, aligned by flexbox rather than by luck. */
#header .tvcart-product-remove { position: absolute; top: -2px; right: 0; }
#header .tvcart-product-remove a {
  display: flex !important;
  align-items: center; justify-content: center;
  width: 28px !important; height: 28px !important;
  padding: 0; margin: 0;
  border-radius: 999px;
  background-image: none !important;
  color: var(--cc-ink-faint);
  line-height: 1 !important;
  transition: background .15s ease, color .15s ease;
}
#header .tvcart-product-remove a:hover { background: #fdecef; color: var(--cc-pink); }
#header .tvcart-product-remove a i {
  display: flex !important;                 /* the theme sets display:none */
  align-items: center; justify-content: center;
  /* A box slightly BIGGER than the glyph. `.material-icons { width: 1em; height: 1em }`
     boxes the icon exactly at its em size, and the trash glyph's ink reaches the top of
     that box — so the lid was being shaved off. 20px around an 18px glyph gives it the
     millimetre it needs; overflow stays visible either way. */
  width: 20px !important; height: 20px !important;
  overflow: visible !important;
  font-size: 18px !important;
  line-height: 20px !important;
  vertical-align: middle;
  color: inherit;
}

/* ------------------------------------------------------------------- totals */
#header .ttvcart-price-shipping-text {
  padding: 16px 20px;
  border-top: 1px solid var(--cc-hairline);
}
#header .ttvcart-product-label-value {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 7px;
  font-size: .87rem; color: var(--cc-ink-soft);
}
/* EVERY totals row draws its own 1px rule as an ::after — so "Sub Total", "Transporte"
   and "Total" were each underlined, and our border above the Total made that a double
   line. One rule, above the Total, where it means something. */
#header .ttvcart-product-label-value::after { content: none !important; }
#header .ttvcart-product-label-value.total {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--cc-hairline);
  font-size: 1rem; font-weight: 800; color: var(--cc-ink);
}
#header .ttvcart-product-label-value.total .ttvcart-product-value { color: var(--cc-brand); }
#header .ttvcart-product-label-value.tax:empty,
#header .ttvcart-product-label-value.tax { display: none; }   /* the theme renders it empty */

/* ------------------------------------------------------------------ buttons */
/* Pills, and stacked: on a 400px drawer two side-by-side buttons leave neither of
   them room to breathe. "Ver carrito" is the quiet one, checkout carries the brand.
   (The labels themselves are relabelled in header.js — the theme ships them in
   English: "View Cart" / "CheckOut".) */
#header .ttvcart-product-list-btn-wrapper {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 20px 20px;
}
/* Same story, louder: custom.css pins these two buttons at
   `width: 50% !important; border: 1px solid #ddd !important; border-radius: 6px
   !important; background-color: #fff !important`. That's why they stayed as half-width
   grey rectangles no matter how specific our rules got. Match the importance. */
#header .ttvcart-product-list-btn-wrapper button {
  width: 100% !important; min-height: 46px; padding: 0;
  border-radius: 999px !important;
  font-size: .92rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#header .ttvcart-product-list-btn-wrapper button a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 46px;
  color: inherit; font: inherit; text-decoration: none;
}
#header .ttvcart-product-list-viewcart {
  background: none !important;
  border: 1.5px solid var(--cc-hairline) !important;
  color: var(--cc-ink-soft);
}
#header .ttvcart-product-list-viewcart:hover { border-color: var(--cc-ink) !important; color: var(--cc-ink); }
#header .ttvcart-product-list-checkout {
  background: var(--cc-brand) !important;
  border: 1.5px solid var(--cc-brand) !important;
  color: #fff;
}
#header .ttvcart-product-list-checkout:hover { background: var(--cc-surface-deep) !important; border-color: var(--cc-surface-deep) !important; }

@media (max-width: 480px) {
  #header .ttvcmscart-show-dropdown-right { width: 100vw; }
}