/* ============================================================
   SKIN "STREET / GRAFFITI"  —  para hctheme
   Re-estiliza los componentes con estetica urbana sticker:
   bordes negros gruesos + sombras duras (sin blur) + mayusculas + neon.
   El skin trae su PROPIA paleta (morado/neon), sus fuentes y su estructura.
   Carga DESPUES de custom.css + hc-dynamic.css, asi que su paleta gana:
   seleccionar el skin da el look completo de un clic (sin tocar el panel).
   ============================================================ */
/* Las fuentes (Anton/Outfit/Permanent Marker) se cargan NO bloqueantes vía skin.json → <link>
   en header.twig (antes iban con @import aquí, que bloqueaba el render y encadenaba peticiones). */

:root{
  /* --- Paleta CBD / street (morado + lima neon + negro) --- */
  --hc-primary: #7B2CBF;
  --hc-primary-dark: #50128C;
  --hc-accent: #FFDE00;
  --hc-dark: #16141F;
  --hc-price: #7B2CBF;
  --hc-buy-bg: #39FF14;        /* CTA lima neon */
  --hc-buy-text: #09090B;
  --hc-bg: #FAF7EE;            /* paper cream */
  --hc-surface: #FFFFFF;
  --hc-surface-2: #F4F1EA;
  --hc-muted: #16141F;         /* caja de imagen de producto oscura */
  --hc-border: #09090B;        /* NEGRO — clave del look street/sticker */
  --hc-footer-bg: #16141F;
  --hc-text: #09090B;
  --hc-text-soft: #334155;
  --hc-text-faint: #64748B;
  --hc-btn-light: #FFDE00;
  /* Botón "light" de banners (colección/promos/mega): amarillo con texto negro.
     OJO: el theme usa --hc-btn-light-COLOR y --hc-btn-light-TEXT (no --hc-btn-light);
     si no se fijan, la tienda puede tener blanco+blanco = texto invisible. */
  --hc-btn-light-color: #FFDE00;
  --hc-btn-light-text: #09090B;
  /* --- Fuentes --- */
  --hc-font: 'Outfit', system-ui, sans-serif;
  --hc-font-head: 'Anton', 'Outfit', sans-serif;
  /* --- Formas --- */
  --hc-radius-card: 20px;
  --hc-radius-btn: 16px;
  --hc-radius-img: 12px;
  /* --- Sticker (bordes/sombras duras) --- */
  --st-b: 3px;                                   /* grosor de borde */
  --st-sh: 5px 5px 0 var(--hc-border);           /* sombra dura */
  --st-sh-sm: 3px 3px 0 var(--hc-border);
  --st-sh-lg: 8px 8px 0 var(--hc-border);
}

/* ---------- Tipografia + mayusculas ---------- */
body{ font-family:var(--hc-font); }
h1,h2,h3,h4,
.hc-hero-title,.hc-mb-head h2,.hc-prow-head h2,.hc-mb-title,.hc-cat-title,
.hc-promo2-title,.hc-pcard-name,.hc-pp-title,.hc-collection-banner .hc-cb-title{
  font-family:var(--hc-font-head)!important;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:400;
}
.hc-pcard-name{ font-weight:400; }

/* ---------- Botones = pegatinas ---------- */
.hc-btn,.hc-btn-primary,.hc-buy,.hc-btn-cart,.hc-cart-pay,.hc-cart-view,
.hc-more-btn,.hc-filter-fab,.hc-filter-clear,.hc-btn-light,.hc-toast-view,.hc-toast-pay,
.btn-primary,.btn-inverse{
  border:var(--st-b) solid var(--hc-border)!important;
  box-shadow:var(--st-sh-sm);
  text-transform:uppercase;
  font-family:var(--hc-font-head)!important;
  letter-spacing:.03em;
  font-weight:400;
  transition:transform .12s ease, box-shadow .12s ease;
}
.hc-btn:hover,.hc-btn-primary:hover,.hc-buy:hover,.hc-btn-cart:hover,.hc-cart-pay:hover,
.hc-more-btn:hover,.hc-btn-light:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--st-sh);
}
/* CTA principal (Comprar/añadir): lima neon con texto negro ya viene de --hc-buy-* */
.hc-buy,.hc-btn-cart{ border-radius:14px; }

/* ---------- Tarjetas de producto = trading cards ---------- */
.hc-pcard{
  border:var(--st-b) solid var(--hc-border)!important;
  box-shadow:var(--st-sh);
  border-radius:18px;
  transition:transform .14s ease, box-shadow .14s ease;
}
.hc-pcard:hover{ transform:translate(-3px,-3px); box-shadow:var(--st-sh-lg); }
.hc-pcard-img{ border:2px solid var(--hc-border); border-radius:14px; overflow:hidden; padding:14px; margin:14px 14px 0!important; }
.hc-pcard-img img{ object-fit:contain!important; }
.hc-pcard-price{ font-family:var(--hc-font-head)!important; color:var(--hc-primary); }
.hc-pcard-brand{ font-family:'Permanent Marker',cursive; text-transform:none; }

/* ---------- Badges / cintas / ahorro = stickers rotados ---------- */
.hc-pcard-badge,.hc-ribbon,.hc-save,.hc-mb-title,.hc-promo2-btn{
  border:2px solid var(--hc-border)!important;
  box-shadow:var(--st-sh-sm);
  text-transform:uppercase;
  font-family:var(--hc-font-head)!important;
  font-weight:400;
}
.hc-ribbon{ transform:rotate(-3deg); border-radius:6px; }
.hc-pcard-badge{ transform:rotate(-2deg); }

/* ---------- Mini banners (categorias) = posters ---------- */
.hc-mb-card,.hc-minibanner,.hc-mb-item{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh); border-radius:18px; }
/* La etiqueta del minibanner SIN marco negro (solo texto, sin borde ni sombra) */
.hc-mb-title{ border:0!important; box-shadow:none!important; }

/* ---------- Banners promo ---------- */
.hc-promo,.hc-promo2{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh); border-radius:18px; }

/* ---------- Colección ---------- */
.hc-collection-banner{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh); }

/* ---------- Buscador / inputs ---------- */
#search input.form-control,.hc-search input,
.hc-newsletter input,.hc-co input{
  border:2px solid var(--hc-border)!important;
  border-radius:12px;
  box-shadow:var(--st-sh-sm);
}
/* Selector de cantidad = UNA pastilla bordeada (los +/- e input sin borde propio) */
.hc-qty{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh-sm); border-radius:12px; overflow:hidden; }
.hc-qty input,.hc-qty-plus,.hc-qty-minus{ border:0!important; box-shadow:none!important; border-radius:0!important; background:transparent; }
.hc-qty-minus{ border-right:2px solid var(--hc-border)!important; }
.hc-qty-plus{ border-left:2px solid var(--hc-border)!important; }
.hc-qty-plus,.hc-qty-minus{ font-family:var(--hc-font-head)!important; }
#search .btn,.hc-search .btn{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh-sm); }

/* ---------- Cabecera / menu ---------- */
.hc-header,.hc-header2{ border-bottom:4px solid var(--hc-border); }
.hc-menu-bar{ border-bottom:3px solid var(--hc-border); }
.hc-h2-cat,.hc-menu-bar #menu .nav > li > a{ text-transform:uppercase; font-family:var(--hc-font-head)!important; letter-spacing:.03em; }

/* ---------- Chips / paginación (los grupos de filtro NO llevan borde) ---------- */
.hc-subcat,.hc-cat-foot .pagination > li > a,.hc-cat-foot .pagination > li > span{
  border:2px solid var(--hc-border)!important;
}
.hc-cat-foot .pagination > li > a{ box-shadow:var(--st-sh-sm); border-radius:8px; font-family:var(--hc-font-head)!important; }
/* Checkboxes del filtro estilo sticker (el contenedor del filtro, limpio) */
.hc-filter input[type="checkbox"]{ border:2px solid var(--hc-border); }

/* ---------- Acordeones ficha / FAQ = fanzine ---------- */
.hc-acc,.hc-faq-item,.hc-review{ border:2px solid var(--hc-border)!important; box-shadow:var(--st-sh-sm); border-radius:14px; }

/* ---------- Popup carrito ---------- */
.hc-cart #cart .dropdown-menu{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh); }

/* ---------- Footer ---------- */
.hc-footer{ border-top:4px solid var(--hc-border); }

/* ---------- Iconos header un pelin mas gruesos pegan con el estilo ---------- */
.hc-ico{ stroke-width:2; }

/* ======================================================
   HEADER STREET  (sobre Header 2)
   Cabecera cream + borde negro grueso, categorias como pills
   de colores, buscador bordeado, carrito pastilla lima.
   ====================================================== */
.hc-header2{ background:var(--hc-bg); border-bottom:4px solid var(--hc-border); }
.hc-h2-inner{ gap:14px; }
.hc-h2-logo .hc-logo-text{ font-family:var(--hc-font-head)!important; text-transform:uppercase; }

/* Categorias = tag strip de pills */
.hc-h2-nav{ gap:8px; flex-wrap:wrap; }
.hc-h2-item{ border:none; }
.hc-h2-cat{
  border:2px solid var(--hc-border)!important;
  box-shadow:var(--st-sh-sm);
  border-radius:8px;
  padding:5px 12px!important;
  background:var(--hc-surface);
  color:var(--hc-text);
  text-transform:uppercase;
  font-family:var(--hc-font-head)!important;
  letter-spacing:.03em;
  font-size:13px;
  line-height:1.2;
  transition:transform .1s ease, box-shadow .1s ease;
}
.hc-h2-item:hover > .hc-h2-cat{ transform:translate(-1px,-1px); box-shadow:var(--st-sh); }
/* colores alternos tipo drops */
.hc-h2-item:nth-child(5n+1) > .hc-h2-cat{ background:var(--hc-primary); color:#fff; }
.hc-h2-item:nth-child(5n+2) > .hc-h2-cat{ background:var(--hc-surface); color:var(--hc-text); }
.hc-h2-item:nth-child(5n+3) > .hc-h2-cat{ background:var(--hc-buy-bg); color:var(--hc-buy-text); }
.hc-h2-item:nth-child(5n+4) > .hc-h2-cat{ background:var(--hc-accent); color:var(--hc-text); }
.hc-h2-item:nth-child(5n+5) > .hc-h2-cat{ background:var(--hc-surface); color:var(--hc-text); }
.hc-h2-caret{ display:none; }

/* Buscador (boton) bordeado */
.hc-h2-searchbtn{ border:2px solid var(--hc-border)!important; box-shadow:var(--st-sh-sm); border-radius:10px; padding:6px 8px; background:var(--hc-surface); }
.hc-h2-searchbar #search input{ border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh-sm); }

/* Iconos usuario/wishlist como botones cuadrados sticker */
.hc-h2-actions .hc-user-trigger,
.hc-h2-actions #wishlist-total{
  border:2px solid var(--hc-border); box-shadow:var(--st-sh-sm); border-radius:10px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--hc-surface);
}

/* Carrito = pastilla lima con etiqueta CESTA */
.hc-h2-actions .hc-cart #cart > .btn{
  background:var(--hc-buy-bg)!important; color:var(--hc-buy-text)!important;
  border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh-sm)!important;
  border-radius:12px!important; padding:7px 14px!important;
  flex-direction:row!important; gap:8px!important; align-items:center!important;
}
.hc-h2-actions #cart-total{
  display:inline-flex!important; align-items:center;
  font-family:var(--hc-font-head)!important; text-transform:uppercase; color:var(--hc-buy-text)!important; font-size:14px;
}
.hc-h2-actions #cart-total::before{ content:"Cesta"; margin-right:6px; }

/* ======================================================
   HEADER 3 STREET — dos filas (estructura propia en la plantilla)
   Fila 1 (crema): logo · buscador grande · acciones
   Fila 2 (oscura): barra de categorías "DROPS" a ancho completo.
   ====================================================== */
.hc-header3{ background:var(--hc-bg); border-bottom:4px solid var(--hc-border); }
/* Fila 1 y fila 2 CENTRADAS al ancho fijo (--hc-maxw) — lo hereda de la base;
   aquí solo damos aire y evitamos que el buscador se solape con las acciones. */
.hc-header3 .hc-h3-top{ gap:28px; }
/* Buscador SIN ancho fijo: columna flexible que encoge → nunca pisa los iconos.
   Forzamos que el input-group de OpenCart (display:table por defecto) sea flex y
   pueda encoger (min-width:0); si no, no reduce y desborda sobre los iconos. */
.hc-header3 .hc-h3-search{ flex:1 1 auto; min-width:0; }
.hc-header3 .hc-h3-search #search{ display:flex!important; width:100%!important; min-width:0!important; align-items:stretch; }
.hc-header3 .hc-h3-search #search .form-control,
.hc-header3 .hc-h3-search #search input{ flex:1 1 auto; min-width:0!important; }
/* El span del botón (Bootstrap le pone width:1% y el botón se sale): que tome su
   ancho natural para que la lupa NO desborde sobre los iconos de la derecha. */
.hc-header3 .hc-h3-search #search .input-group-btn{ display:flex!important; flex:0 0 auto!important; width:auto!important; }
.hc-h3-logo{ flex:0 0 auto; }
.hc-header3 .hc-h3-actions{ flex:0 0 auto; }
.hc-h3-logo .hc-logo-text{ font-family:var(--hc-font-head)!important; text-transform:uppercase; }

/* Buscador grande sticker */
.hc-h3-search #search{ display:flex!important; width:100%; }
.hc-h3-search #search .form-control,
.hc-h3-search #search input{
  border:var(--st-b) solid var(--hc-border)!important; border-right:0!important;
  box-shadow:var(--st-sh-sm)!important; border-radius:14px 0 0 14px!important;
  height:54px!important; font-weight:600; background:var(--hc-surface)!important;
}
.hc-h3-search #search .input-group-btn{ display:flex; }
.hc-h3-search #search .btn,
.hc-h3-search #search button{
  border:var(--st-b) solid var(--hc-border)!important;
  background:var(--hc-surface)!important; color:var(--hc-text)!important;
  border-radius:0 14px 14px 0!important; box-shadow:var(--st-sh-sm)!important;
  height:54px!important; padding:0 18px!important;
}

/* Iconos usuario/wishlist = botones cuadrados sticker */
.hc-h3-actions .hc-user-trigger,
.hc-h3-actions #wishlist-total{
  border:2px solid var(--hc-border); box-shadow:var(--st-sh-sm); border-radius:10px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--hc-surface);
}
/* Carrito = pastilla lima con "Cesta" */
.hc-h3-actions .hc-cart #cart > .btn{
  background:var(--hc-buy-bg)!important; color:var(--hc-buy-text)!important;
  border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh-sm)!important;
  border-radius:12px!important; padding:7px 14px!important;
  flex-direction:row!important; gap:8px!important; align-items:center!important;
}
.hc-h3-actions #cart-total{
  display:inline-flex!important; align-items:center;
  font-family:var(--hc-font-head)!important; text-transform:uppercase; color:var(--hc-buy-text)!important; font-size:14px;
}
.hc-h3-actions #cart-total::before{ content:"Cesta"; margin-right:6px; }

/* Fila 2: barra de categorías. El CONTENIDO va centrado al ancho fijo (--hc-maxw,
   lo hereda de la base: max-width + margin auto). El FONDO oscuro se pinta a ANCHO
   TOTAL con un ::after de 100vw por detrás → fondo full-bleed, bloque centrado.
   (Sin border-radius: así no aparece la curva rara en las esquinas inferiores.) */
.hc-header3 .hc-h3-nav{
  position:relative; z-index:0;
  background:transparent!important; border:0!important; border-radius:0!important;
  padding:11px 20px!important; flex-wrap:wrap; gap:8px;
}
.hc-header3 .hc-h3-nav::after{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%;
  width:100vw; transform:translateX(-50%);
  background:var(--hc-dark,#16141F); border-top:3px solid var(--hc-border);
}
/* Texto de las categorías un poco más grande en Header 3 */
.hc-header3 .hc-h3-nav .hc-h2-cat{ font-size:15px; padding:7px 15px!important; }

/* ======================================================
   VENTAJAS (module) — tarjetas sticker con icono de color
   ====================================================== */
.hc-features{ gap:22px; }
.hc-feature{
  flex-direction:column!important; align-items:flex-start!important; gap:14px!important;
  background:var(--hc-surface)!important; border:var(--st-b) solid var(--hc-border);
  border-radius:16px; box-shadow:var(--st-sh); padding:26px 24px!important;
}
.hc-feature i{
  width:54px; height:54px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--hc-border); border-radius:14px; box-shadow:var(--st-sh-sm);
  font-size:22px!important; color:var(--hc-border)!important;
}
.hc-feature:nth-child(4n+1) i{ background:var(--hc-accent); color:var(--hc-border)!important; }
.hc-feature:nth-child(4n+2) i{ background:var(--hc-buy-bg); color:var(--hc-buy-text)!important; }
.hc-feature:nth-child(4n+3) i{ background:var(--hc-primary); color:#fff!important; }
.hc-feature:nth-child(4n+4) i{ background:var(--hc-accent); color:var(--hc-border)!important; }
.hc-feature b{ font-family:var(--hc-font-head)!important; text-transform:uppercase; font-size:18px!important; letter-spacing:.02em; }
.hc-feature span{ color:var(--hc-text-soft)!important; font-size:14px!important; line-height:1.5; }

/* ======================================================
   Títulos de módulo a DOS COLORES: última palabra en morado
   con subrayado lima (la envuelve el JS en .hc-title-hl).
   ====================================================== */
.hc-title-hl{
  color:var(--hc-primary)!important;
  background:linear-gradient(var(--hc-buy-bg,#39FF14),var(--hc-buy-bg,#39FF14)) 0 92%/100% .14em no-repeat;
  padding-bottom:.02em;
}
.hc-header3 .hc-h3-nav::-webkit-scrollbar{ display:none; }
.hc-header3 .hc-h3-nav::before{
  content:"\2726 DROPS:"; flex:0 0 auto; color:var(--hc-buy-bg,#39FF14);
  font-family:var(--hc-font-head)!important; text-transform:uppercase; letter-spacing:.06em;
  font-size:13px; margin-right:6px; white-space:nowrap; align-self:center;
}

@media (max-width:900px){
  /* En móvil: buscador a su línea y categorías via hamburguesa/cajón */
  .hc-header3 .hc-h3-top{ padding:10px 14px; }
  .hc-h3-actions .hc-user-trigger,
  .hc-h3-actions #wishlist-total,
  .hc-h3-actions .hc-cart #cart > .btn{
    width:44px!important; height:44px!important; min-width:44px!important; padding:0!important;
    border:2px solid var(--hc-border)!important; box-shadow:var(--st-sh-sm)!important;
    border-radius:11px!important; display:flex!important; align-items:center!important; justify-content:center!important;
    gap:0!important; background:var(--hc-surface)!important;
  }
  .hc-h3-actions .hc-cart #cart > .btn{ background:var(--hc-buy-bg)!important; }
  .hc-h3-actions #cart-total{ display:none!important; }
}

/* ======================================================
   HERO STREET  —  full-width, sin bordes redondos, fondo
   oscuro con blobs de color degradados (como la plantilla CBD)
   ====================================================== */
.hc-hero-slider{ max-width:none!important; margin-left:0!important; margin-right:0!important; border-radius:0!important; }
/* Color de respaldo SOLO cuando el slide no tiene imagen (si tiene, se ve la foto) */
.hc-hero-slide{ background-color:var(--hc-dark,#16141F); }
/* Overlay SEMITRANSPARENTE: tiñe con los blobs de color + oscurece el lado del
   texto (izquierda) para legibilidad, PERO deja ver la imagen de fondo del slide. */
.hc-hero-slide::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 90% at 6% -12%, color-mix(in srgb, var(--hc-primary,#7B2CBF) 42%, transparent), transparent 55%),
    radial-gradient(50% 80% at 97% 42%, color-mix(in srgb, var(--hc-buy-bg,#39FF14) 16%, transparent), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.38) 42%, rgba(0,0,0,.05) 70%);
}
/* Contenido por encima del overlay + texto claro sobre el fondo oscuro */
.hc-hero-slide-inner{ position:relative; z-index:2; }
.hc-hero-slide .hc-hero-title{ color:#fff!important; }
.hc-hero-slide-inner p,
.hc-hero-slide .hc-hero-sub,
.hc-hero-slide .hc-hero-subtitle{ color:rgba(255,255,255,.88)!important; }
/* flechas/dots del slider por encima del overlay */
.hc-hero-slider .swiper-button-prev,
.hc-hero-slider .swiper-button-next,
.hc-hero-slider .swiper-pagination{ z-index:3; }

/* HERO PLACEHOLDER (cuando aún NO has configurado slides en el panel):
   mismo look street — fondo oscuro degradado a ancho total + texto claro —
   para que se vea coherente aunque no haya imagen todavía. */
.hc-hero{ background:var(--hc-dark,#16141F)!important; position:relative; overflow:hidden; margin-bottom:0!important; border-bottom:4px solid var(--hc-border); }
.hc-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:var(--hc-dark,#16141F);
  background-image:
    radial-gradient(60% 95% at 6% -12%, color-mix(in srgb, var(--hc-primary,#7B2CBF) 55%, transparent), transparent 60%),
    radial-gradient(52% 85% at 97% 42%, color-mix(in srgb, var(--hc-buy-bg,#39FF14) 26%, transparent), transparent 60%),
    radial-gradient(48% 75% at 42% 120%, color-mix(in srgb, var(--hc-accent,#FFDE00) 18%, transparent), transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,34px 18px,34px 18px;
}
.hc-hero .hc-hero-inner{ position:relative; z-index:1; }
.hc-hero .hc-hero-title{ color:#fff!important; }
.hc-hero .hc-hero-sub{ color:rgba(255,255,255,.88)!important; }
.hc-hero .hc-hero-sub strong{ color:#fff!important; }
.hc-hero .hc-hero-eyebrow{ color:var(--hc-buy-bg,#39FF14)!important; border-color:var(--hc-buy-bg,#39FF14)!important; }
.hc-hero .hc-hero-img{ background:rgba(255,255,255,.05)!important; border:2px dashed rgba(255,255,255,.28)!important; color:rgba(255,255,255,.55)!important; border-radius:14px; }
/* Botón secundario (Saber más / outline) sobre el hero OSCURO: texto y borde
   blancos, fondo transparente → legible (cubre el caso de que la base lo pinte
   blanco con texto blanco). El primario ya es morado con texto blanco. */
.hc-hero .hc-btn-outline,
.hc-hero-slide .hc-btn-outline,
.hc-hero .hc-btn-light,
.hc-hero-slide .hc-btn-light{ background:transparent!important; color:#fff!important; border-color:#fff!important; }
.hc-hero .hc-btn-outline:hover,
.hc-hero-slide .hc-btn-outline:hover,
.hc-hero .hc-btn-light:hover,
.hc-hero-slide .hc-btn-light:hover{ background:rgba(255,255,255,.14)!important; color:#fff!important; }

/* ======================================================
   RESPONSIVE (móvil): iconos del header uniformes + ajustes
   ====================================================== */
@media (max-width:900px){
  .hc-h2-actions{ gap:9px; }
  .hc-h2-searchbtn,
  .hc-h2-actions .hc-user-trigger,
  .hc-h2-actions .hc-cart #cart > .btn{
    width:44px!important; height:44px!important; min-width:44px!important; padding:0!important;
    border:2px solid var(--hc-border)!important; box-shadow:var(--st-sh-sm)!important;
    border-radius:11px!important; display:flex!important; align-items:center!important; justify-content:center!important;
    gap:0!important; background:var(--hc-surface)!important;
  }
  .hc-h2-actions .hc-cart #cart > .btn{ background:var(--hc-buy-bg)!important; }  /* carrito lima */
  .hc-h2-actions #cart-total{ display:none!important; }                            /* solo el icono */
  .hc-h2-actions .hc-user-menu{ z-index:1300; }
}

/* ======================================================
   Acordeones de la ficha (ENVÍO / REVIEWS / características)
   padding correcto y separación entre cajas
   ====================================================== */
.hc-acc{ margin-bottom:14px; overflow:hidden; }
.hc-acc-head,.hc-acc > button,.hc-acc-title{ padding:16px 18px!important; }
.hc-acc-body,.hc-acc-content{ padding:0 18px 16px!important; }

/* ======================================================
   Ajustes finos categoría: filtro sin borde negro de grupo,
   más aire entre cantidad y Comprar
   ====================================================== */
.hc-fgroup,.hc-filter{ border:0!important; }
.hc-fgroup{ border-bottom:1px solid rgba(0,0,0,.10)!important; }
.hc-filter{ border-bottom:0!important; }
.hc-pcard-foot2{ gap:16px!important; }

/* Alineación vertical del carrito con el resto de iconos del header */
.hc-h2-actions{ align-items:center!important; }
.hc-h2-actions .hc-cart{ display:flex!important; align-items:center!important; height:44px!important; }
.hc-h2-actions .hc-cart #cart{ position:static!important; top:0!important; margin:0!important; display:flex!important; align-items:center!important; height:44px!important; }

/* Hero sin esquinas redondeadas (full bleed total) */
.hc-hero-slide,.hc-hero-slide::before{ border-radius:0!important; }

/* La card recorta (nada se sale). El pie hace wrap si no cabe, así el botón
   Comprar nunca desborda y su sombra queda dentro del padding del cuerpo. */
.hc-pcard{ overflow:hidden!important; }
.hc-pcard-img{ overflow:hidden; }
.hc-pcard-body{ padding-bottom:18px; }
.hc-pcard-foot2{ flex-wrap:wrap!important; row-gap:12px!important; }
.hc-pcard-foot2 .hc-buy{ min-width:0; flex:1 1 130px; }
.hc-pcard-foot2 .hc-qty{ flex:0 0 auto; }

/* Paginación: aire por debajo + separación entre pills */
.hc-cat-foot{ padding-bottom:6px; margin-bottom:34px; }
.hc-cat-foot .pagination{ gap:8px; }
.hc-cat-foot .pagination > li{ margin:0 2px; }

/* Tabs de "Más vendidos" — estilo sticker */
.hc-bs-tab{
  font-family:var(--hc-font-head)!important; text-transform:uppercase; letter-spacing:.5px;
  border:var(--st-b) solid var(--hc-border)!important; border-radius:10px!important;
  background:var(--hc-surface)!important; color:var(--hc-border)!important;
  box-shadow:var(--st-sh-sm); padding:8px 16px!important; transition:transform .08s ease,box-shadow .08s ease;
}
.hc-bs-tab:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--hc-border); }
.hc-bs-tab.is-active{ background:var(--hc-primary)!important; color:#fff!important; box-shadow:var(--st-sh-sm); }

/* ======================================================
   HERO SPLIT (imagen al lado + texto) — estética street
   ====================================================== */
/* Imagen con "marco pegatina": borde amarillo grueso, esquinas
   redondas, sombra dura negra y ligera inclinación (como el pack). */
.hc-hero-slide--split .hc-hero-split-media{
  border:6px solid var(--hc-accent,#FFDE00);
  border-radius:24px;
  box-shadow:var(--st-sh-lg), 0 0 0 3px var(--hc-border);
  overflow:hidden;
  background:var(--hc-dark,#16141F);
  transform:rotate(-1.4deg);
}
.hc-hero-slide--split .hc-hero-split-media img,
.hc-hero-slide--split .hc-hero-split-media video{ border-radius:0; }
/* Badge superior tipo pegatina amarilla */
.hc-hero-slide--split .hc-hero-eyebrow{
  background:var(--hc-accent,#FFDE00)!important; color:var(--hc-border,#09090B)!important;
  border:var(--st-b) solid var(--hc-border)!important; box-shadow:var(--st-sh-sm);
  border-radius:10px!important; font-family:var(--hc-font-head)!important;
  text-transform:uppercase; letter-spacing:.03em; padding:8px 14px!important;
}

/* Botones del hero (ambos formatos): mismo estilo pegatina que TODO el skin.
   Botón 1 = lima neon (como "Comprar"); Botón 2 = morado. */
.hc-hero-btns .hc-btn,
.hc-hero-btns .hc-btn-primary,
.hc-hero-btns .hc-btn-outline{
  border:var(--st-b) solid var(--hc-border)!important;
  box-shadow:var(--st-sh-sm)!important;
  text-transform:uppercase; font-family:var(--hc-font-head)!important;
  letter-spacing:.03em; font-weight:400; border-radius:var(--hc-radius-btn,16px);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hc-hero-btns .hc-btn-primary{ background:var(--hc-buy-bg,#39FF14)!important; color:var(--hc-buy-text,#09090B)!important; }
.hc-hero-btns .hc-btn-outline{ background:var(--hc-primary,#7B2CBF)!important; color:#fff!important; }
.hc-hero-btns .hc-btn:hover,
.hc-hero-btns .hc-btn-primary:hover,
.hc-hero-btns .hc-btn-outline:hover{ transform:translate(-2px,-2px); box-shadow:var(--st-sh)!important; }