/** Shopify CDN: Minification failed

Line 2515:0 Expected "*/" to terminate multi-line comment

**/
/* ============================= Trust Banners (global) ============================= */
.cc-trust-banners{
  margin: 48px auto 0; /* extra top margin to avoid overlap with previous sections */
  margin-bottom: 40px;
  padding: 0 20px;
  padding-bottom: 28px;
}
/* Homepage (desktop): add extra air above trust banners */
@media (min-width: 992px){
  .template-index .cc-trust-banners{ margin-top: 72px; }
}
.cc-trust-banners .trusted-inner{
  max-width: var(--trust-max, 1200px);
  margin: 0 auto;
  position: relative;
}
.cc-trust-banners .trusted-list{
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 640px){
  .cc-trust-banners .trusted-list{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }
  .cc-trust-banners .cc-trust-icon svg{ width: 20px; height: 20px; }
  .cc-trust-banners .cc-trust-title{ font-size: .92rem; }
  .cc-trust-banners .cc-trust-subtitle{ font-size: .82rem; }
}
.cc-trust-banners .trusted-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}
.cc-trust-banners .cc-trust-icon svg{
  display: block;
  width: 22px;
  height: 22px;
  fill: #0f0f0f;
  stroke: #0f0f0f;
  stroke-width: 1.2;
}
.cc-trust-banners .cc-trust-title{
  margin: 0;
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: -0.01em;
  color: #0f0f0f;
  text-decoration: none;
  text-align: center;
}
.cc-trust-banners .cc-trust-subtitle{
  margin: 2px 0 0;
  font-size: .88rem;
  color: #4b5563;
  text-align: center;
}
/* Lime accent line below the banner */
.cc-trust-banners .cc-trust-accent{
  height: 1px;
  margin-top: 12px;
  margin-bottom: 16px;
  background: linear-gradient(to right, rgba(0,0,0,.95), rgba(204,255,0,.8), rgba(0,0,0,.95));
  opacity: .95;
  border-radius: 1px;
}
/* Responsive */
/* @media (max-width: 900px){
  .cc-trust-banners .trusted-list{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .cc-trust-banners .cc-trust-title{ font-size: .96rem; }
  .cc-trust-banners .cc-trust-subtitle{ font-size: .86rem; }
} */
@media (max-width: 480px){
  .cc-trust-banners{ padding: 0 16px; margin-top: 36px; }
  .cc-trust-banners .trusted-item{ gap: 8px; }
  .cc-trust-banners .cc-trust-icon svg{ width: 20px; height: 20px; }
  .cc-trust-banners .cc-trust-title{ font-size: .94rem; }
  .cc-trust-banners .cc-trust-subtitle{ font-size: .84rem; }
}
/* ===========================================================================
   CLIMBERS CODE — GLOBAL STYLESHEET (style.css)
   Structure map (bloques):
     1) Core variables & tokens
     2) Hero (homepage)
     3) Collection Banner (global)
     4) Cart Drawer (base & transitions)
     5) Pagination (collections)
     ... (resto secciones a añadir en pasos siguientes)
   --------------------------------------------------------------------------- */

/* === [00] Local webfonts: Inter (self‑hosted) ============================ */
/* Regular 400 */
@font-face{
  font-family: 'Inter';
  src: url("{{ 'Inter_18pt-Regular.woff2' | asset_url }}") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* SemiBold 600 */
@font-face{
  font-family: 'Inter';
  src: url("{{ 'Inter_18pt-SemiBold.woff2' | asset_url }}") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Bold 700 */
@font-face{
  font-family: 'Inter';
  src: url("{{ 'Inter_24pt-Bold.woff2' | asset_url }}") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ExtraBold 800 */
@font-face{
  font-family: 'Inter';
  src: url("{{ 'Inter_24pt-ExtraBold.woff2' | asset_url }}") format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* === [00] Global base: font family (uses self‑hosted Inter) === */
:root{ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
html, body { font-family: var(--font-sans); font-size-adjust: .5; font-synthesis: none; }
button, input, select, textarea { font: inherit; }

/* ========================= 1) Core variables & tokens ====================== */
:root{
  --lime:#ccff00;
  /* Banner tokens (centralize heights) */
  --collection-banner-desktop-h: 960px;  /* legacy fallback (no longer used when fullscreen) */
  /* Mobile background zoom factor to balance framing vs sharpness */
  --mobile-zoom: 1.06;
}

/* ============================== 2) Hero (homepage) ======================== */
/* === CC — Hero (moved from section to global CSS) === */
.cc-hero{
  min-height: calc(100svh - var(--header-height));
  display:flex; align-items:flex-end; justify-content:center;
  text-align:center; color:#fff; position:relative;
  padding-bottom: clamp(5svh, 6svh, 7svh);
  overflow:hidden;  /* contain scaled bg on mobile */
}


.cc-hero .hero-bg{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  /* Fallback base: asegura imagen visible incluso si los @media tardan */
  background-image: var(--hero-desktop, var(--hero-mobile));
}

/* Hero: render-time discoverable image that behaves like CSS background */
.cc-hero .hero-img{ position:absolute; inset:0; z-index:0; }
.cc-hero .hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Desktop background uses --hero-desktop set by the section */
@media (min-width:992px){
  .cc-hero .hero-bg{
    /* Fallback: si no hay desktop, usa móvil para evitar gris en desktop */
    background-image: var(--hero-desktop, var(--hero-mobile)); /* fallback */
    background-image: image-set(
      var(--hero-desktop-avif, var(--hero-desktop, var(--hero-mobile))) type("image/avif") 1x,
      var(--hero-desktop, var(--hero-mobile)) type("image/webp") 1x,
      var(--hero-desktop-2x-avif, var(--hero-desktop-2x, var(--hero-desktop, var(--hero-mobile)))) type("image/avif") 2x,
      var(--hero-desktop-2x, var(--hero-desktop, var(--hero-mobile))) type("image/webp") 2x
    );
  }
}

/* Mobile background (falls back to desktop if mobile image not provided) */
@media (max-width:991.98px){
  .cc-hero .hero-bg{
    background-image: var(--hero-mobile, var(--hero-desktop)); /* fallback */
    background-image: image-set(
      var(--hero-mobile-avif, var(--hero-mobile, var(--hero-desktop))) type("image/avif") 1x,
      var(--hero-mobile, var(--hero-desktop)) type("image/webp") 1x,
      var(--hero-mobile-2x-avif, var(--hero-mobile-2x, var(--hero-desktop))) type("image/avif") 2x,
      var(--hero-mobile-2x, var(--hero-desktop)) type("image/webp") 2x,
      var(--hero-mobile-3x-avif, var(--hero-mobile-3x, var(--hero-mobile-2x))) type("image/avif") 3x,
      var(--hero-mobile-3x, var(--hero-mobile-2x)) type("image/webp") 3x
    );
  }
  .cc-hero{ min-height: calc(100svh - var(--header-height-mobile)); }
  .cc-hero .hero-bg{
    background-size: cover;           /* always fill container */
    transform: scale(var(--mobile-zoom, 1.10));
    transform-origin: center top;
    will-change: transform;
  }
}

.cc-hero-overlay{
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 1.25svh; /* gently lift text above bottom */
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;   /* desktop center by default */
  text-align: center;
}
.cc-hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0, .10); /* uniform 10% overlay desktop & mobile */
  z-index:0;
}
.cc-hero > :not(.hero-bg){ position:relative; z-index:1; }

/* Tipografía contenida dentro del hero */
.cc-hero h1{
  font-size: clamp(1.65rem, 4.3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: -20px 0 8px;
}
.cc-hero p{
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  margin: -12px 0 14px;
  opacity: .95;
}

/* En móvil subimos un poco el overlay para asegurar legibilidad */
@media (max-width: 991.98px){
  
  
  .cc-hero h1 { font-size: clamp(1.55rem, 4vw, 2.35rem); }
  .cc-hero p  { font-size: clamp(.9rem, 1.5vw, 1rem); }
  /* Mobile: show more of the model, keep text on the left */
  .cc-hero .hero-img img{ object-position: 53% center; }
  .cc-hero .hero-bg{ background-position: 53% center; }
  .cc-hero-overlay{ align-items: flex-start; text-align: left; padding-left: 16px; padding-right: 16px; margin-bottom: calc(2.5svh + env(safe-area-inset-bottom, 0px)); }
}

/* ====================== 3) Collection Banner (global, unified) ===================== */
/* Generic banner used across site (home/collections/etc.) via CSS vars */
.cc-banner{
  position: relative;
  background-image: var(--banner-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--banner-position, center);
  padding-top: var(--banner-pt-desktop, 35%); /* aspect via percent */
}
@media (max-width: 768px){
  .cc-banner{
    padding-top: var(--banner-pt-mobile, 85%);
    background-position: var(--banner-position-mobile, center top);
  }
}

/* Unified overlay tint for any .cc-banner (same as rgba(0,0,0,.10)) */
.cc-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.10);
  z-index: 0;
}
.cc-banner > *{ position: relative; z-index: 1; }

/* Banner BG element (mirrors .cc-hero .hero-bg) */
.cc-banner__bg{
  position:absolute; inset:0; z-index:0;
  background-position: var(--banner-position, center);
  background-size: cover; background-repeat: no-repeat;
}
@media (min-width:992px){
  .cc-banner__bg{
    background-image: var(--hero-desktop, var(--banner-image)); /* fallback */
    background-image: image-set(
      var(--hero-desktop-avif, var(--hero-desktop)) type("image/avif") 1x,
      var(--hero-desktop, var(--banner-image)) type("image/webp") 1x,
      var(--hero-desktop-2x-avif, var(--hero-desktop-2x, var(--hero-desktop))) type("image/avif") 2x,
      var(--hero-desktop-2x, var(--hero-desktop)) type("image/webp") 2x
    );
  }
}

@media (min-width: 992px){
  /* Collections banner: match hero behavior on desktop */
  .cc-banner.collection-banner .cc-banner__bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 60% center;  /* default focus for collections desktop */
  }
}
@media (max-width:991.98px){
  .cc-banner__bg{
    background-image: var(--hero-mobile, var(--hero-desktop, var(--banner-image))); /* fallback */
    background-image: image-set(
      var(--hero-mobile-avif, var(--hero-mobile, var(--hero-desktop))) type("image/avif") 1x,
      var(--hero-mobile, var(--hero-desktop)) type("image/webp") 1x,
      var(--hero-mobile-2x-avif, var(--hero-mobile-2x, var(--hero-desktop))) type("image/avif") 2x,
      var(--hero-mobile-2x, var(--hero-desktop)) type("image/webp") 2x,
      var(--hero-mobile-3x-avif, var(--hero-mobile-3x, var(--hero-mobile-2x))) type("image/avif") 3x,
      var(--hero-mobile-3x, var(--hero-mobile-2x)) type("image/webp") 3x
    );
    background-position: var(--banner-position-mobile, 60% center);
    transform: scale(var(--mobile-zoom, 1.10));
    transform-origin:center top;
    will-change: transform;
  }
}

@media (max-width:991.98px){
  /* Collections mobile: match hero focus and zoom without !important */
  .cc-banner.collection-banner .cc-banner__bg{
    background-position: 53% center;   /* like hero mobile */
    transform: scale(var(--mobile-zoom, 1.10));
    transform-origin: center top;
  }
}

/* Collections: fullscreen like hero; override aspect/height and remove bg duplication on container */
.cc-banner.collection-banner{
  min-height: calc(100svh - var(--header-height)); /* desktop fullscreen, like .cc-hero */
  height: auto;
  padding-top: 0;                                   /* no ratio padding */
  background-image: none;                           /* image handled by .cc-banner__bg only */
  overflow: hidden;
  margin-bottom: 16px;
  width: 100%;            /* ensure full width */
  display: block;         /* avoid inline effects */
  flex: 0 0 auto;         /* prevent flex parents from shrinking it */
}

@media (max-width: 991.98px){
  .cc-banner.collection-banner{
    min-height: calc(100svh - var(--header-height-mobile)); /* mobile fullscreen, like .cc-hero */
    height: auto;
    padding-top: 0;                /* remove header gap hack; already accounted by min-height */
    margin-bottom: 18px;            /* consistent spacing under banner */
    box-sizing: border-box;         /* include padding in total height */
    width: 100%;
    display: block;
    flex: 0 0 auto;                 /* prevent flex parents from shrinking it */
  }
}

@media (max-width: 991.98px){
  .cc-banner.collection-banner .cc-banner__overlay{
    align-items: flex-start;                         /* left edge */
    justify-content: flex-end;                       /* bottom (like hero) */
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(2.5svh + env(safe-area-inset-bottom, 0px)); /* safe bottom margin */
  }
  /* Ensure align-right variant also anchors bottom-left on mobile */
  .cc-banner.collection-banner.cc-banner--align-right .cc-banner__overlay{
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(2.5svh + env(safe-area-inset-bottom, 0px));
  }
}

/* Ensure right alignment wins and is vertically centered */
.cc-banner.collection-banner.cc-banner--align-right .cc-banner__overlay{ 
  align-items: flex-end;            /* right edge */
  justify-content: center;          /* default */
  text-align: right; 
  padding-right: clamp(24px, 6vw, 84px);
}
@media (min-width: 992px){
  .cc-banner.collection-banner.cc-banner--align-right .cc-banner__overlay{
    justify-content: flex-end;       /* bottom-right on desktop */
    align-items: flex-end;
    padding-bottom: 6svh;            /* viewport-based separation (like hero), replaces 6% */
    max-width: 480px;
    margin-left: auto;
    margin-right: 0;
  }
}


/* Backward compatibility: id mapping no longer needed for collection banner */

/* Overlay container */
.cc-banner__overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;           /* stack title over subtitle */
  gap: 8px;                         /* small breathing space */
  align-items:center;               /* default center */
  justify-content:center;           /* vertical center */
  padding: clamp(12px, 3.5vw, 24px) clamp(16px, 6vw, 84px);
  text-align:center;
  z-index:1;
}

/* Alignment modifiers */
.cc-banner.cc-banner--align-left   .cc-banner__overlay{ justify-content:flex-start; text-align:left; }
.cc-banner.cc-banner--align-center .cc-banner__overlay{ justify-content:center;     text-align:center; }
.cc-banner.cc-banner--align-right  .cc-banner__overlay{ align-items:flex-end; text-align:right; }


/* Copy max width */
.cc-banner__overlay h1, .cc-banner__overlay p{ max-width: 620px; margin-left:auto; margin-right:auto; }

@media (min-width: 992px){
  .cc-banner.collection-banner .cc-banner__overlay h1,
  .cc-banner.collection-banner .cc-banner__overlay p{
    max-width: 460px;                 /* narrower column on desktop */
  }
}

/* Colecciones: cuando va a la derecha, no centres el bloque */
.cc-banner.collection-banner.cc-banner--align-right .cc-banner__overlay h1,
.cc-banner.collection-banner.cc-banner--align-right .cc-banner__overlay p{
  margin-left: auto;  /* empuja a la derecha */
  margin-right: 0;
}

/* Typography: mirror hero */
.cc-banner__overlay h1{
  margin: 0 0 8px;
  font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(1.65rem, 4.3vw, 2.5rem); /* unify with hero */
  line-height: 1.05; color: #fff;
}
.cc-banner__overlay p{
  margin: 0; color:#fff; opacity:.92;
  font-size: clamp(1rem, 1.7vw, 1.1rem); line-height:1.35; /* unify with hero */
}
@media (max-width: 991.98px){
  /* Mirror hero's mobile font clamps for better balance */
  .cc-banner.collection-banner .cc-banner__overlay h1 { font-size: clamp(1.55rem, 4vw, 2.35rem); }
  .cc-banner.collection-banner .cc-banner__overlay p  { font-size: clamp(.9rem, 1.5vw, 1rem); }
}

/* Mobile tweaks: keep alignment but protect edges */
@media (max-width: 768px){
  .cc-banner__overlay{ padding: 16px; }
}
/* =================== 4) Cart Drawer — base & transitions ================== */
#cartDrawer.active{ transform:translateX(0); }

/* === Drawer hardening: ensure active state wins across templates === */
html body #cartDrawer{ display:flex !important; will-change: transform, opacity; backface-visibility: hidden; }
html body #cartDrawer.active{ transform: translate3d(0,0,0) !important; opacity: 1 !important; visibility: visible !important; }
html body #cartDrawer:not(.active){ transform: translate3d(100%,0,0) !important; visibility: visible !important; }
/* Cart drawer: fixed right panel geometry */
#cartDrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(92vw, 420px);
  max-width: 420px;
  transform: translate3d(100%,0,0); /* hidden by default (GPU) */
  transition: transform .64s cubic-bezier(.18,.8,.2,1), opacity .46s ease, visibility .46s ease;
  z-index: 14050; /* above overlay (13990) and header (14000) */
  display: flex;            /* ensure inner content stretches vertically */
  flex-direction: column;   /* header + list + footer stack */
  visibility: visible;      /* controlled via active state below */
  opacity: 1;
}

/* Overlay hardening */
html body #cartDrawerOverlay.active{ opacity:1 !important; pointer-events:auto !important; }
/* PDP: group primary actions and wallet buttons */
.cc-product__primary-actions{ display:flex; flex-direction:column; gap:12px; }
.cc-product__primary-actions .btn-primary,
.cc-product__primary-actions .btn-outline{ width:100%; }
.cc-product-checkout-form{ width:100%; }
.cc-product-checkout-form .btn-primary{ width:100%; }
.cc-product__wallet-actions{ margin-top: 12px; }
.cc-product__wallet-actions .shopify-payment-button{ width:100%; }
/* ====================== 5) Pagination (collections) ======================= */
/* === Collection pagination (top & bottom) — aligned left, comfy padding === */
.cc-collection-pagination{
  max-width:1240px;
  margin: 12px auto 18px;
  padding: 0 1.25rem; /* keep it off the very edge */
  text-align:left;    /* ensure left alignment */
}
.cc-collection-pagination--top{ order:2; margin-left:0; } /* was pushing right; keep left */
.cc-collection-pagination-list{
  list-style:none; margin:0; padding:0; display:flex; gap:6px; align-items:center; justify-content:flex-start;
}
.cc-collection-pagination-link{
  display:inline-flex; min-width:30px; height:30px; align-items:center; justify-content:center; padding:0 8px;
  border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#111; text-decoration:none; font-weight:600; line-height:1;
}
.cc-collection-pagination-link:hover{ background: var(--lime); color:#000; border-color: transparent; }
.cc-collection-pagination-link.is-active{ background: var(--lime); color:#000; border-color: transparent; cursor:default; pointer-events:none; }
.cc-collection-pagination-prev, .cc-collection-pagination-next{ width:30px; padding:0; }

@media (max-width:640px){
  .cc-collection-pagination{ margin: 8px 0 12px; padding: 0 1.25rem; }
  .cc-collection-pagination-list{ gap:5px; }
  .cc-collection-pagination-link{ min-width:28px; height:28px; padding:0 6px; font-size:.85rem; }
}

/* ========== 6) Layout constants & global typography (root & base html/body) ========= */
:root{
  --header-height: 90px;
  --header-height-mobile: 72px;
}

/* === Global font scaling (site-wide) ===
   Requested: -1px desktop, -2px mobile across the site.
   We implement via root font-size so all rem/clamp-based text scales consistently. */
html{
  font-size: 14px; /* antes 15px: -1px en escritorio */
}
@media (max-width: 991.98px){
  html{
    font-size: 14px;
  }
}

/* Reserva global para el header fijo */
body { padding-top: var(--header-height); }
@media (max-width: 991.98px){
  body { padding-top: var(--header-height-mobile); }
}
/* Home: allow hero image to sit under the header (no white band) */
.template-index{ padding-top: 0; }
@media (max-width: 991.98px){ .template-index{ padding-top: 0; } }

/* === Safe-area bottom (iOS Safari) & end-of-page spacing =================== */
:root{ --safe-bottom: env(safe-area-inset-bottom, 0px); }
/* Reserve real space for iOS bottom bar so last content isn't covered */
body{ padding-bottom: var(--safe-bottom); }
@supports (padding: max(0px)){
  body{ padding-bottom: max(var(--safe-bottom), 16px); } /* at least 16px breathing room */
}
/* Ensure the main content always leaves a tiny spacer at the very end */
/* Trust banners & footer get extra breathing room above the bottom UI */
.cc-trust-banners{ margin-bottom: calc(24px + var(--safe-bottom)); }
footer, .site-footer{ padding-bottom: calc(18px + var(--safe-bottom)); }

html{ margin:0; padding:0; }
body{ margin:0; }

/* ============================== 7) Utilities (a11y) ======================= */
/* A11y utility: hide element visually but keep it for screen readers */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ====================== 8) Header (fixed) & nav containers ================= */
/* Header fixed */
.cc-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 11000;
  background: transparent; /* totalmente transparente al aterrizar */
  border-bottom: 1px solid rgba(204,255,0,.22); /* línea lime muy sutil */
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  isolation: isolate;
  /* Color de contenido del header (texto/iconos) — negro al aterrizar */
  --header-fg: #000;
}

.cc-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(204,255,0,0) 0%,
    rgba(204,255,0,.35) 15%,
    rgba(204,255,0,.45) 50%,
    rgba(204,255,0,.35) 85%,
    rgba(204,255,0,0) 100%);
  pointer-events: none;
  box-shadow: 0 0 10px rgba(204,255,0,.16);
  z-index: 100; /* ensure above header content */
  opacity: 0; /* mantenemos oculto: usaremos el border-bottom como línea */
}
@media (min-resolution: 2dppx){
  .cc-header::after{ transform: scaleY(.75); transform-origin: bottom; opacity: .85; }
}
/* Prevent underlying sections from drawing a white 1px seam under the header */
.cc-header + *,
.cc-header + #MainContent,
.cc-header + main,
.header-spacer + *,
.cc-collection-header{ border-top: 0 !important; }

/* Glow lime y opacidad al hacer scroll */
.scrolled .cc-header,
.cc-header.scrolled{
  background: rgba(17,17,17,.98); /* fondo oscuro al hacer scroll */
  border-bottom-color: rgba(204,255,0,.48); /* línea lime un poco más presente */
  box-shadow: 0 0 2px rgba(204,255,0,.28);
  --header-fg: #fff; /* contenido en blanco al hacer scroll */
}
/* mantenemos el ::after oculto para no duplicar la línea */
.scrolled .cc-header::after,
.cc-header.scrolled::after{ opacity: 0; }

/* Desktop header row */
@media (min-width:992px){
  /* Header más alto y contenido centrado verticalmente */
  .cc-header{ min-height: 88px; }
  .header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1200px; margin:0 auto; padding:16px 16px; }
  .logo-desktop{ display:flex; align-items:center; }
  .logo-desktop img{ height:52px; width:auto; display:block; }
  .logo-header{ display:none; }
  #mobile-menu-button{ display:none; }
  .header-right{ display:flex; align-items:center; gap:12px; min-width:84px; }
  /* Desktop: center nav vertically within header to align with logo/icons */
  .desktop-nav-container{
    display:flex; justify-content:center;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width:auto; padding:0 16px; margin:0; /* shrink to nav width to avoid overlapping icons */
  }
  .header-nav{ display:flex; }
  .nav-header{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
  .nav-header a{ color: var(--header-fg, #fff); text-decoration:none; position:relative; transition: color .18s ease; }
  .nav-header a:hover{ color:var(--lime); }
}

/* ==================== 8b) Mobile Header & Navigation Drawer =============== */
/* Mobile header row: 1fr auto 1fr */
@media (max-width:991.98px){
  .header-top-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; padding:12px 16px; }
  .logo-desktop{ display:none; }
  #mobile-menu-button{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:32px;   /* más compacto para un look elegante */
    height:22px;  /* reduce altura del botón */
    background:transparent;
    border:0;
    padding:0;
    color: var(--header-fg, #fff);        /* sincroniza con estado del header */
    z-index:12010;     /* por encima de logo/otros */
  }
  #mobile-menu-button span{
    display:block;
    width:100%;        /* <- CLAVE en Safari iOS */
    height:2px;        /* barras más finas (más elegante) */
    background:currentColor; /* usa el color del botón */
    border-radius:2px;
  }
  .logo-header{ display:flex; justify-content:center; }
  .logo-header img{ height:36px; width:auto; display:block; }
  .header-right{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding-right: calc(env(safe-area-inset-right, 0px) + 16px); }
  .desktop-nav-container{ display:none; }
  /* Larger tap targets for header icons on mobile */
  .cc-header .icon-link{ width: 40px; height: 40px; }
}

.icon-link{
  display:inline-flex;
  width:28px; height:28px;
  align-items:center; justify-content:center;
  color:#fff;
  text-decoration:none;
  background:transparent; border:0;
  position:relative;
  line-height:0;           /* evita offset vertical del SVG */
  flex-shrink:0;           /* no se aplasta en flex/grid */
}
.icon-link svg{
  width:22px; height:22px;
  display:block;           /* elimina espacio inline */
  fill: currentColor;
  stroke: currentColor;    /* para SVG con trazo */
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* Header-scoped icon canon to avoid template-specific overrides */
.cc-header .icon-link{
  display:inline-flex;
  width:36px; height:36px; /* larger tap target on desktop */
  align-items:center; justify-content:center;
  color: var(--header-fg, #fff);
  text-decoration:none;
  background:transparent; border:0;
  position:relative;
  line-height:0;
  flex-shrink:0;
}
.cc-header .icon-link svg{
  width:22px; height:22px;
  display:block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.cc-header .cc-logo-img{
  filter: brightness(0); /* logo negro al aterrizar */
  transition: filter .3s ease;
}
.scrolled .cc-header .cc-logo-img,
.cc-header.scrolled .cc-logo-img{
  filter: brightness(1); /* logo blanco al hacer scroll (restaura color) */
}
.cart-count-badge{ position:absolute; top:-8px; right:-4px; background:var(--lime); color:#000; min-width:18px; height:18px; border-radius:9px; font-size:10px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; }

/* Mobile menu (drawer) */
#mobile-menu{ position:fixed; top:0; left:0; width:60vw; max-width:280px; height:100vh; transform: translate3d(-100%,0,0); transition: transform .64s cubic-bezier(.18,.8,.2,1), opacity .46s ease, visibility .46s ease; will-change: transform, opacity; backface-visibility: hidden; background: rgba(10,10,10,.78); backdrop-filter: blur(6px); color:#fff; z-index:12000; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 16px; overflow:auto; }
#mobile-menu::after{
  content: "";
  position: absolute;
  top: 0; right: 0; height: 100%; width: 1px;
  background: linear-gradient(to bottom,
    rgba(204,255,0,0) 0%,
    rgba(204,255,0,.28) 15%,
    rgba(204,255,0,.38) 50%,
    rgba(204,255,0,.28) 85%,
    rgba(204,255,0,0) 100%);
  box-shadow: 0 0 10px rgba(204,255,0,.16);
  pointer-events: none;
}
@media (min-resolution: 2dppx){
  #mobile-menu::after{ transform: scaleX(.75); transform-origin: right; opacity: .85; }
}
#mobile-menu.active{ transform: translate3d(0,0,0); }
#mobile-menu{ opacity: 1; visibility: visible; }
html body #mobile-menu.active{ transform: translate3d(0,0,0) !important; opacity: 1 !important; visibility: visible !important; }
html body #mobile-menu:not(.active){ transform: translate3d(-100%,0,0) !important; visibility: visible !important; }
#mobile-menu .close-button{ align-self:flex-end; font-size:22px; line-height:1; color:#fff; background:transparent; border:0; cursor:pointer; margin-bottom: 10px; }
#mobile-menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.60); opacity:0; pointer-events:none; transition:opacity .42s ease; z-index:11990; }
#mobile-menu-overlay.active{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  #mobile-menu-overlay{
    transition: none !important;
    animation: none !important;
  }
}
.mobile-menu-links{ list-style:none; margin:0; padding:0; }
.mobile-menu-links a{ display:block; padding:10px 0; color:#fff; text-decoration:none; }
.mobile-menu-links a:hover{ color:var(--lime); }

/* Mobile menu a11y focus-visible lime outline */
.mobile-menu-links a:focus-visible,
#mobile-menu .close-button:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

/* ==================== 8c) Header — Mega Menu (desktop only) ================ */
.has-mega { position: relative; }
/* Hover bridge: evita el “hueco” entre el enlace y el panel */
.has-mega::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;           /* justo debajo del enlace */
  height:46px;        /* puente ligeramente mayor para cubrir el nuevo offset */
  pointer-events: none;
  /* transparente: solo mantiene el hover activo */
}
.cc-mega{
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(12px);  width: min(980px, 92vw);
  background: transparent; color:#fff; /* contenedor totalmente transparente */
  border: 0; border-radius: 14px;
  box-shadow: none; /* sin sombra del contenedor */
  padding: 0; /* sin panel alrededor: aire lo da el inner */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease .05s, visibility .18s linear .05s;
  z-index: 12020;
}
/* Al hacer scroll, aumentamos opacidad como el header */
.cc-header.scrolled .cc-mega,
.scrolled .cc-mega{
  background: transparent; /* permanece transparente también con scroll */
  border-color: transparent;
  box-shadow: none;
}
.has-mega:hover > .cc-mega,
.has-mega:focus-within > .cc-mega{ opacity: 1; visibility: visible; pointer-events: auto; }

/* Keep mega open when JS adds .is-open (hover intent, Esc/click-out closes) */
.has-mega.is-open > .cc-mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(12px);
}

.cc-mega:hover{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s; /* sin retardo mientras está abierto */
}
.cc-mega__inner{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.cc-mega__inner--2col{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  /* same card width as 3-col menu: (2 * card) + 1 gap */
  max-width: calc(((100% - 24px) / 3) * 2 + 12px);
  margin: 0 auto; /* center the two cards */
}
.cc-mega__card{ display: grid; grid-template-rows: auto 1fr; gap: 8px; text-decoration: none; color: #fff; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: #111; }
.cc-mega__img{ aspect-ratio: 4/3; overflow: hidden; background: #0e0e0e; }
.cc-mega__img img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .25s ease; }
.cc-mega__card:hover .cc-mega__img img{ transform: scale(1.03); }
.cc-mega__copy{ padding: 10px 12px 12px; text-align:center; }
.cc-mega__copy h3{ margin:0 0 4px; font-size: 1rem; font-weight: 800; letter-spacing:-0.01em; color: var(--lime); }
.cc-mega__copy p{ margin:0; font-size:.92rem; color:#d6d6d6; }
@media (max-width: 991.98px){ .cc-mega{ display:none !important; } }

/* Mega — micro‑motion & tablet typography */
.cc-mega__card{ transition: transform .18s ease, box-shadow .18s ease; }
.cc-mega__card:hover{ transform: translateY(-1px); }

@media (max-width: 1200px){
  .cc-mega__copy h3{ font-size: .95rem; }
  .cc-mega__copy p{ font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce){
  .cc-mega,
  .cc-mega__img img,
  .cc-mega__card{ transition: none !important; }
}

@media (hover: none){
  .has-mega > .cc-mega{ display:none !important; }
}

/* Cart drawer basic */

/* =================== 9) Cart Drawer — overlay & visual polish ============= */
/* Cart drawer overlay & translucent panel */
#cartDrawerOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
  z-index: 13990; /* debajo del drawer (14000) */
}
#cartDrawerOverlay.active{
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  /* Keep overlay instant for accessibility, but preserve drawer slide unless site opts out */
  #cartDrawerOverlay{
    transition: none !important;
    animation: none !important;
  }
}
/* Panel más elegante: negro translúcido */
#cartDrawer{
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(6px);
  border-left: 1px solid rgba(255,255,255,0.05);
  box-shadow: -4px 0 12px rgba(0,0,0,0.4);
}

/* Cart Drawer — lime outline and spacing refinements */
#cartDrawer{
  box-shadow: -6px 0 16px rgba(0,0,0,.45);
  position: fixed; /* ensure positioning context for pseudo-element (already set above, but safe) */
}
#cartDrawer::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(204,255,0,0) 0%,
    rgba(204,255,0,.35) 15%,
    rgba(204,255,0,.45) 50%,
    rgba(204,255,0,.35) 85%,
    rgba(204,255,0,0) 100%);
  pointer-events: none;
  box-shadow: 0 0 10px rgba(204,255,0,.18);
}
@media (min-resolution: 2dppx){
  #cartDrawer::before{ transform: scaleX(.7); transform-origin: left; opacity: .75; }
}
/* Subtotal spacing inside drawer */
#cartDrawer .cart-subtotal{
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 12px;
  padding-top: 12px;
}
/* Cart drawer item layout & image sizing */
#cartDrawer .cart-items .cart-item{ display:grid; grid-template-columns: 100px 1fr; gap:12px; align-items:center; }
#cartDrawer .cart-item-image{ width:100px; height:100px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#111; }
#cartDrawer .cart-item-image img{ max-width:100%; max-height:100%; width:100px; height:auto; object-fit:cover; display:block; }
#cartDrawer .cart-item-title{ margin:0; font-weight:700; }
#cartDrawer .cart-item-variant{ color:#aaa; font-size:.90rem; }
#cartDrawer .cart-item-price{ margin: 2px 0 8px; font-weight:600; }
#cartDrawer .remove-item{ background:transparent; border:1px solid #fff; color:#fff; padding:.4rem .7rem; border-radius:8px; }
#cartDrawer .remove-item:hover{ background: var(--lime); color:#000; border-color: transparent; }

@media (max-width: 420px){
  #cartDrawer .cart-items .cart-item{ grid-template-columns: 84px 1fr; gap:10px; }
  #cartDrawer .cart-item-image{ width:84px; height:84px; }
  #cartDrawer .cart-item-image img{ width:84px; }
}
.cart-drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.cart-drawer-content{ overflow:auto; flex:1; }
/* === Global Button Canon (site-wide) === */
body.cc-theme :where(button,
  input[type="submit"],
  input[type="button"],
  a.btn, .btn, .btn-primary, .btn-outline, .button,
  .shopify-payment-button__button, .shopify-payment-button__button--unbranded){
  -webkit-appearance: none; appearance: none;
  background: rgba(0,0,0,.9);
  color: #fff;
  border: var(--btn-border, 1px solid #fff);
  border-radius: 8px;
  padding: var(--btn-py, .6rem) var(--btn-px, .9rem);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body.cc-theme :where(button,
  input[type="submit"],
  input[type="button"],
  a.btn, .btn, .btn-primary, .btn-outline, .button,
  .shopify-payment-button__button, .shopify-payment-button__button--unbranded):hover,
body.cc-theme :where(button,
  input[type="submit"],
  input[type="button"],
  a.btn, .btn, .btn-primary, .btn-outline, .button,
  .shopify-payment-button__button, .shopify-payment-button__button--unbranded):focus-visible{
  background: var(--lime);
  color: #000;
  border-color: transparent;
  outline: none;
}

body.cc-theme :where(button,
  input[type="submit"],
  input[type="button"],
  a.btn, .btn, .btn-primary, .btn-outline, .button,
  .shopify-payment-button__button, .shopify-payment-button__button--unbranded):disabled,
body.cc-theme :where(button,
  input[type="submit"],
  input[type="button"],
  a.btn, .btn, .btn-primary, .btn-outline, .button,
  .shopify-payment-button__button, .shopify-payment-button__button--unbranded)[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
}

/* Avoid global frame around content */
#MainContent{ padding-top:0; margin:0; border:0; box-shadow:none; }

/* ================================ 16) About page =========================== */
/* About Us Banner (scoped to About page) */
.page-about .about-us-banner {
  position: relative;
  width: 100%;
  min-height: 720px;
  background-image: var(--about-banner, url('{{ "about-banner.webp" | asset_url }}'));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.page-about .about-us-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
  z-index: 1;
}
@media (max-width: 768px){
  .page-about .about-us-banner__overlay{
    background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
  }
}

.page-about .about-us-banner__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 40px 20px;
}

 .page-about .about-us-banner__content h1 {
   font-size: 42px;
   font-weight: 700;
   margin-bottom: 20px;
 }

/* About — small kicker above title */
.page-about .about-kicker{
  display:inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000;
  background: var(--lime);
  border-radius: 999px;
}

/* Values header (title + subtitle) */
.page-about .about-values-header{ text-align:center; margin: 34px auto 16px; padding: 0 20px; }
.page-about .about-values__title{
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color:#0f0f0f;
  position: relative;
}
.page-about .about-values__title::after{
  content: "";
  display:block;
  width: 120px; height: 2px; margin: 10px auto 0;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--lime), rgba(0,0,0,0));
  border-radius: 2px; opacity:.95;
}
.page-about .about-values__subtitle{
  max-width: 820px; margin: 6px auto 0; color:#2b2b2b; line-height:1.6;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

 .page-about .about-us-banner__content .intro-text {
   font-size: 18px;
   line-height: 1.6;
 }

/* About — Fancy title with lime accent lines */
.page-about .about-title{
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1.2;
  color: #ffffff;
  position: relative;
}
.page-about .about-title::after{
  content: "";
  display: block;
  width: 140px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--lime), rgba(0,0,0,0));
  border-radius: 2px;
  opacity: .95;
}
/* Banner subtitle (page.content) refined for readability */
.page-about .about-subtitle{
  max-width: 820px;
  margin: 8px auto 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255,255,255,.92);
}

/* Intro quote — add subtle lime divider below */
.page-about .about-quote{
  position: relative;
}
.page-about .about-quote::after{
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(to right, rgba(0,0,0,.95), var(--lime), rgba(0,0,0,.95));
  border-radius: 2px;
  opacity: .95;
}

@media (max-width: 640px){
  .page-about .about-title{ font-size: clamp(1.5rem, 6vw, 2rem); }
  .page-about .about-subtitle{ font-size: .98rem; line-height: 1.65; }
}

/* Responsive */
@media (max-width: 768px) {
  .page-about .about-us-banner {
    min-height: 560px;
    background-position: center top;
  }
  .page-about .about-us-banner__content h1 {
    font-size: 28px;
  }
  .page-about .about-us-banner__content .intro-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .page-about .about-us-banner {
    min-height: 460px;
  }
  .page-about .about-us-banner__content {
    padding: 20px 15px;
  }
  .page-about .about-us-banner__content h1 {
    font-size: 24px;
  }
  .page-about .about-us-banner__content .intro-text {
    font-size: 14px;
  }
}
.page-about .about-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
  text-align: center;
}
.page-about .value-block {
  padding: 20px;
}
.page-about .value-block img {
  object-fit: contain;
  margin-bottom: 15px;
}
.page-about .value-block h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.page-about .value-block p {
  font-size: 0.90rem;
  color: #555;
  line-height: 1.5;
}
.page-about .about-cta {
  text-align: center;
  padding: 40px 20px;
}
 .page-about .about-cta a {
   display: inline-block;
   padding: 14px 36px;
   background: rgba(0,0,0,.9);
   color: #fff;
   text-decoration: none;
   font-weight: 700;
   border: 1px solid #fff;
   border-radius: 999px; /* pill shape */
   transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
 }

 .page-about .about-cta a:hover,
 .page-about .about-cta a:focus-visible {
   background: var(--lime);
   color: #000;
   border-color: transparent;
   box-shadow: 0 0 0 2px rgba(204,255,0,.35), 0 0 12px rgba(204,255,0,.25);
   outline: none;
 }

/* About Intro (scoped to About page) */
.page-about .about-intro{
  padding: 48px 20px 28px;
}
.page-about .about-intro__inner{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.page-about .about-intro__title{
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.page-about .about-intro__text{
  font-size: clamp(1rem, 1.3vw, 1.05rem);
  line-height: 1.75;
  color: #2b2b2b;
  opacity: .95;
}
.page-about .about-intro__text p{ margin: 0 0 1em; }
.page-about .about-intro__text p:last-child{ margin-bottom: 0; }

@media (max-width: 640px){
  .page-about .about-intro{ padding: 32px 16px 18px; }
  .page-about .about-intro__inner{ max-width: 92vw; text-align: left; }
  .page-about .about-intro__text{ font-size: .98rem; line-height: 1.75; }
  .page-about .about-intro__text p{ margin: 0 0 .95em; }
  .page-about .about-quote{ text-align: center; font-size: clamp(1.1rem, 4.6vw, 1.5rem); margin: 28px auto 14px; padding: 0 16px; }
}

/* About Us — Quote + longform text (scoped) */
.page-about .about-quote{
  max-width: 980px;
  margin: 36px auto 22px;
  padding: 0 20px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: #0f0f0f;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.35;
}
.page-about .about-intro__inner{ max-width: 980px; }
.page-about .about-intro__text{ color:#1f1f1f; line-height:1.75; }
.page-about .about-intro__text p{ margin: 0 0 1.1em; }
.page-about .about-intro__text p:last-child{ margin-bottom: 0; }
.page-about .about-signoff{ text-align:center; font-weight:700; margin-top:32px; }

/* =============================== 17) Blog (Journal) ======================== */
.cc-blog-hero{
  position: relative;
  background: #0b0b0b; /* or hero image via --blog-hero-bg */
  color:#fff;
  /* Match featured container width and side padding */
  max-width:1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
  /* Card look */
  border-radius:14px;
  overflow:hidden;
  border:1px solid #1f1f1f;
}
.cc-blog-hero--with-image{
  background-image: var(--blog-hero-bg);
  background-size: cover;
  background-position: center;
}
.cc-blog-hero__overlay{
  position: relative;
  padding: 36px 20px; /* reduced height for a slimmer hero */
  text-align: center;
}
.cc-blog-hero--with-image .cc-blog-hero__overlay::before{
  content: "";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55));
  z-index:0;
}
.cc-blog-hero__overlay > *{ position:relative; z-index:1; }

.cc-blog-section { max-width:1200px; margin:0 auto 60px; padding:0 20px; }

/* === Blog Tags: elegant text links (no buttons) === */
.cc-blog-tags{ max-width:1200px; margin: 6px auto 20px; padding: 0 20px; }
.cc-blog-tags__list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.cc-blog-tags__item{ margin:0; padding:0; }
.cc-blog-tags__link{
  display:inline-block; text-decoration:none; color:#111; font-weight:400; letter-spacing:.01em;
  padding:2px 0; position:relative; transition: color .2s ease;
}
/* underline-on-hover (animated) */
.cc-blog-tags__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--lime), rgba(0,0,0,0));
  transform: scaleX(0); transform-origin: center; transition: transform .2s ease; opacity:.8;
}
.cc-blog-tags__link:hover{ color:#000; }
.cc-blog-tags__link:hover::after{ transform: scaleX(1); }

/* active state */
.cc-blog-tags__link.is-active{ color:#000; font-weight:600; }
.cc-blog-tags__link.is-active::after{ transform: scaleX(1); }

@media (max-width: 640px){
  .cc-blog-tags{ padding: 0 16px; }
  .cc-blog-tags__list{ gap:12px; }
  .cc-blog-tags__link{ font-size:.95rem; }
}

.cc-blog-title{ font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight:800; margin:0 0 12px; }
.cc-blog-subtitle{
  max-width: 900px; margin:0 auto; opacity:.9; font-size:clamp(.95rem, 1.2vw, 1.05rem);
  display:-webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}

/* Grid */
.cc-blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }

/* Leaner cards: minimal effects for performance */
.cc-blog-card{ background:#111; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; color:#fff; border:1px solid #1f1f1f; }
.cc-blog-card__image-link{ display:block; overflow:hidden; flex-shrink:0; }
.cc-blog-card__image{ width:100%; aspect-ratio: 16/9; height:auto; object-fit:cover; display:block; }
/* === Featured article (first) === */
.cc-blog-featured{ max-width:1200px; margin: 0 auto 28px; padding: 0 20px; }
.cc-blog-featured-card{ display:grid; grid-template-columns: 1.2fr 1fr; gap:22px; align-items:stretch; background:#111; color:#fff; border-radius:14px; overflow:hidden; border:1px solid #1f1f1f; }
.cc-blog-featured__image-link{ display:block; }
.cc-blog-featured__image{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/9; }
.cc-blog-featured__content{ padding:18px; display:flex; flex-direction:column; gap:10px; }
.cc-blog-featured__title{ font-size: clamp(1.4rem, 2.2vw, 2rem); margin:0; font-weight:800; }
.cc-blog-featured__title a{ color: var(--lime); text-decoration:none; }
.cc-blog-featured__title a:hover{ text-decoration: underline; }
.cc-blog-featured__excerpt{ color:#d6d6d6; line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient: vertical; overflow:hidden; }
.cc-blog-featured__readmore{ color:#000; background: var(--lime); width:max-content; padding:8px 12px; border-radius:6px; text-decoration:none; font-weight:800; }
.cc-blog-featured__readmore:hover{ filter: brightness(1.05); }
.cc-blog-featured__meta{ font-size:.85rem; color:#aaa; margin-top:auto; display:flex; justify-content:space-between; align-items:center; }

@media (max-width: 860px){
  .cc-blog-featured-card{ grid-template-columns: 1fr; }
  .cc-blog-featured__image{ aspect-ratio: 16/9; }
}

.cc-blog-card__content{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cc-blog-card__title{ font-size:1.2rem; font-weight:700; margin:0; }
.cc-blog-card__title a:link, .cc-blog-card__title a:visited{ color: var(--lime); text-decoration:none; }
.cc-blog-card__title a:hover{ text-decoration: underline; }

/* Show ~4 lines on desktop, 3 on mobile */
.cc-blog-card__excerpt{ color:#cfcfcf; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient: vertical; overflow:hidden; }

.cc-blog-card__readmore{ color:#fff; background:#222; width:max-content; padding:8px 12px; border-radius:6px; text-decoration:none; font-weight:700; transition: background .2s ease, color .2s ease; }
.cc-blog-card__readmore:hover{ background: var(--lime); color:#000; }

/* === Blog: primary tag link (minimal, elegant) === */
.cc-article-tag{ margin: 4px 0 6px; font-size:.88rem; letter-spacing:.01em; }
.cc-article-tag--featured{ margin-top: 2px; }
.cc-article-tag a{
  color:#111; text-decoration:none; position:relative; padding-bottom:2px; transition: color .2s ease;
}
.cc-article-tag a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--lime), rgba(0,0,0,0));
  transform: scaleX(0); transform-origin: center; transition: transform .2s ease; opacity:.85;
}
.cc-article-tag a:hover{ color:#000; }
.cc-article-tag a:hover::after{ transform: scaleX(1); }

@media (max-width: 640px){
  .cc-article-tag{ font-size:.92rem; }
}

.cc-blog-card__meta{ font-size:.8rem; color:#999; display:flex; justify-content:space-between; align-items:center; font-style: italic; margin-top:auto; }

@media (max-width: 640px){
  .cc-blog-hero__overlay{ padding: 28px 16px; }
  .cc-blog-card__excerpt{ -webkit-line-clamp:3; line-clamp:3; }
}

/* Cart Page Styles */
.cart-page {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.cart-title {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: #000;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.5px;
}

.cart-empty {
  text-align: center;
  font-size: 1.2rem;
  color: #ccc;
  margin: 60px 0;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 768px) {
  .cart-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: grid;
  grid-template-columns: 180px 1fr 110px 120px;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.cart-item-media {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
  background: transparent; /* remove black frame on desktop */
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px; /* match container to avoid visible edge */
}
/* Ensure cart media image always fills its media box */
.cart-item-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  margin:0 !important;
  padding:0 !important;
  border-radius:6px; /* match container */
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #111;
}

.cart-item-title a{
  font-weight: 600;
  font-size: 0.90rem;
  color: #000; /* texto negro en la zona superior */
  text-decoration: none;
  transition: color 0.3s ease;
}
.cart-item-title a:hover{ color:#000; }

.cart-item-variant{ font-size:.85rem; color:#666; }

.cart-item-info .variant {
  font-size: 0.80rem;
  color: #aaa;
}

.cart-item-remove{
  font-size: 0.85rem;
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 6px;
  align-self: start;
  transition: color 0.3s ease;
}
.cart-item-remove:hover{ color: var(--lime); }

.cart-item-qty {
  width: 80px;
  max-width: 80px;
}

.cart-item-qty input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  color: #000;
  text-align: center;
  font-size: 0.90rem;
}

.cart-item-prices {
  font-weight: 600;
  font-size: 1.1rem;
  color: #000;
  text-align: right;
  white-space: nowrap;
}

/* Cart Summary */
.cart-summary {
  background: #111;
  padding: 24px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.05);
}

@media (min-width: 768px) {
  .cart-summary {
    position: sticky;
    top: 80px;
  }
}

.cart-summary h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--lime);
}

.cart-subtotal{
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cart-subtotal > :first-child{ color:#fff; }
.cart-subtotal .amount{ color: var(--lime); }


.cart-note {
  font-size: 1.0rem;
  color: #ccc;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 12px;
}

.cart-utilities {
  margin-top: 16px;
  font-size: 0.9rem;
  text-align: center;
}

.cart-utilities a {
  color: var(--lime);
  text-decoration: none;
  font-weight: 600;
  margin: 0 8px;
  display: inline-block;
  transition: color 0.3s ease, background 0.3s ease;
  border-radius: 4px;
  padding: 4px 8px;
}
.cart-utilities a:hover {
  background: var(--lime);
  color: #000;
}

/* Cart Drawer — Polished layout */
.cart-drawer-content{ padding: 12px 16px; }
.cart-lines{ display:flex; flex-direction:column; gap:12px; padding: 8px 0; }
.cart-line{
  display:grid;
  grid-template-columns: 72px 1fr auto auto;
  gap:12px;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cart-line:last-child{ border-bottom:0; }
.cart-line-media{ width:72px; height:72px; border-radius:6px; background:#111; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cart-line-image{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-line-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-line-title{ color:#fff; text-decoration:none; font-weight:600; line-height:1.2; display:inline-block; }
.cart-line-title:hover{ color:var(--lime); }
.cart-line-variant{ color:#aaa; font-size:.90rem; }
.cart-line-remove{ color:#ccc; font-size:.80rem; text-decoration:none; width:max-content; }
.cart-line-remove:hover{ color:var(--lime); }
.cart-line-qty{ text-align:center; }
.qty-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px; border-radius:14px;
  background:rgba(255,255,255,0.08); color:#fff; font-weight:600; font-size:.95rem;
}
.cart-line-price{ color:#fff; font-weight:600; text-align:right; white-space:nowrap; }
.cart-total{
  margin-top:8px; padding-top:12px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:1.0rem;
}
.cart-total strong{ color:var(--lime); }
/* Consolidated Cart Actions styles */
.cart-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.cart-actions .btn-primary,
.cart-actions .btn-outline{
  width:100%;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
}
@media (min-width: 420px){
  .cart-actions{ flex-direction:row; }
  .cart-actions .btn-primary, .cart-actions .btn-outline{ width:auto; flex:1; }
}
/* Ensure checkout form flexes same as the View cart link */
.cart-actions .cart-drawer-checkout-form { flex: 1; }

/* Make the primary button fill the form width on desktop */
@media (min-width: 420px){
  .cart-actions .cart-drawer-checkout-form .btn-primary { width: 100%; }
}
/* ============================= 10) Product Page (PDP) ===================== */
/* === Product Page (cc-product) === */

.cc-product__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px; /* lateral breathing room on desktop too */
}

@media (min-width: 992px){
  .cc-product__media{ align-items: center; }
  .cc-product__image--featured{ max-width: 560px; margin-left:auto; margin-right:auto; }
  .cc-product__thumbs{ justify-content: center; }
}

.cc-product__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-product__image--featured {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.cc-product__image--featured img {
  width: 100%;
  height: auto;
  display: block;
}

.cc-product__media .cc-product__image--featured img{ margin:0 auto; display:block; }

.cc-product__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-product__thumbs img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent; /* no black frame */
  background:transparent;
  box-shadow:none;
  transition:border-color .2s ease, transform .15s ease;
}
.cc-product__thumbs img:hover{ border-color: var(--lime); transform: translateY(-1px); }
.cc-product__thumbs img.active{ border-color: var(--lime); }
.cc-product__thumbs a{ background:transparent !important; box-shadow:none !important; }

.cc-product__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-product__title {
  font-size: 1.3rem;
  margin:16px 0 18px;
  text-align:center;
  font-weight: 700;
}

.cc-product__price {
  font-size: 1.4rem;
  font-weight: 600;
}

.cc-product__price .compare-at {
  text-decoration: line-through;
  font-size: 1.0rem;
  color: #999;
  margin-left: 8px;
}

.cc-product__options select,
.cc-product__qty input {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.0rem;
  width: 100%;
}

.cc-product__actions .btn-primary {
  padding: 14px 18px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

.cc-product__actions .btn-outline {
  padding: 14px 18px;
  border-radius: 8px;
  width: 100%;
}
.cc-product__image--featured, .cc-product__image--featured img{ background:transparent; box-shadow:none; }

.cc-product__desc {
  line-height: 1.6;
  color: #555;
  margin-top: 20px;
  /* font-size controlled via responsive rules below */
}

/* === PDP — Size note: normalize type to match body === */
.cc-size-note{
  margin-top: 10px;
  font-size: 1rem;         /* match desktop body */
  line-height: 1.6;
  color: #555;
}
@media (max-width: 768px){
  .cc-size-note{ font-size: .90rem; } /* match mobile body */
}

/* === PDP — Features list: normalize type to match body === */
.cc-features{ list-style: none; margin: 0; padding: 0; }
.cc-feature{ display: flex; align-items: flex-start; gap: 8px; font-size: 1rem; line-height: 1.6; color: #555; }
.cc-feature__dot{ width: 6px; height: 6px; border-radius: 50%; background: #999; margin-top: .55em; flex: 0 0 auto; }

@media (max-width: 768px){
  .cc-feature{ font-size: .90rem; }
}

/* === PDP — Canonical body type across details (desktop & mobile) === */
.cc-product__desc,
.cc-size-note,
.cc-feature,
.cc-block__body{
  font-size: .95rem;   /* desktop canon */
  line-height: 1.6;
  color: #555;
}
@media (max-width: 768px){
  .cc-product__desc,
  .cc-size-note,
  .cc-feature,
  .cc-block__body{
    font-size: .90rem; /* mobile canon */
  }
}

/* PDP thumbs: override global button styles so thumbs are clean */
.cc-product__thumb{
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  box-shadow: none !important;
  line-height: 0;
  border-radius: 8px; /* keep focus ring shape */
}
.cc-product__thumb:focus, .cc-product__thumb:focus-visible{
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Ensure PDP action buttons are perfectly aligned and consistent */
.cc-product__actions .btn-primary,
.cc-product__actions .btn-outline{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-transform: uppercase; /* match both buttons */
}

/* === PDP — Mobile overflow hardening & readable metafields (Safari safe) === */
/* Prevent any injected HTML from widening the viewport */
.cc-pdp-details{ max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.cc-block__body, .cc-size-wrap{ max-width:100%; min-width:0; }
.cc-block__body img{ max-width:100%; height:auto; display:block; }
.cc-block__body table{ width:100%; max-width:100%; table-layout:auto; border-collapse:collapse; }
.cc-block__body th, .cc-block__body td{ white-space:normal; word-break:break-word; }

/* Subtle vertical rhythm so no zoom is needed to parse content */
.cc-block{ margin-top: 14px; }
.cc-block__title{ margin: 0 0 8px; }
.cc-block__body p{ margin: 0 0 .9em; }

/* Ensure main PDP grid and children can shrink on small screens */
.cc-product__container, .cc-product__media, .cc-product__info{ min-width:0; }
.cc-product__container{ overflow-x:hidden; }

/* Thumbs: keep wrapping on one or multiple lines as needed */
.cc-product__thumbs{ flex-wrap: wrap; }

/* === PDP — Mobile typography + safe widths (no right overflow) === */
.cc-pdp-details, .cc-block__body, .cc-size-wrap{ box-sizing: border-box; }

@media (max-width: 768px){
  /* Slightly tighter readable body in mobile */
  #cc-pdp-details{ padding-left: 10px; padding-right: 10px; max-width: 100%; }
  #cc-pdp-details .cc-block__body{ font-size: .88rem; }
  #cc-pdp-details .cc-block__body p{ margin: 0 0 .85em; }

  /* Ensure headings don’t push layout */
  #cc-pdp-details .cc-block__title{ margin-left: 0; margin-right: 0; }

  /* Tables: fixed layout, wrap headers/cells, tighter padding to avoid overflow */
  .cc-size-table-wrap table{ table-layout: fixed; width: 100% !important; }
  .cc-size-table-wrap th, .cc-size-table-wrap td{
    padding: 8px 6px;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
  }
  .cc-size-table-wrap th{ font-weight: 700; }

  /* Guard against any residual horizontal scroll on small devices */
  .cc-product__container{ overflow-x: hidden; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cc-product__container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px;
  }
  .cc-product__media{ align-items:center; }
  .cc-product__image--featured{ margin:0 auto; max-width:520px; }
  .cc-product__image--featured img{ display:block; margin:0 auto; }
  .cc-product__thumbs{ justify-content:center; gap:12px; }
  .cc-product__thumbs img {
    width: 60px;
    height: 60px;
  }
  .cc-product__info{ padding: 0 16px 24px; }
  .cc-product__title{
    margin: 4px 0 8px;
    line-height:1.2;
    font-size: 1.3rem;
  }
  .cc-product__price{
    font-size: 1.1rem;
    margin-bottom: 8px;
  }
  .cc-product__actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:8px;
  }
  .cc-product__actions .btn-primary,
  .cc-product__actions .btn-outline{
    width:100%;
    border-radius:8px;
  }
  .cc-product__options .cc-product__label{
    display:block;
    margin:8px 0 6px;
    font-weight:600;
  }
  .cc-product__options select,
  .cc-product__qty input{
    width:100%;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.15);
    background:#1a1a1a;
    color:#fff;
    padding:10px 14px;
    font-size: 1.0rem;
  }
  .cc-product__desc{
    font-size: .90rem;
  }
}

@media (max-width: 480px){
  /* PDP mobile-small compact type and thumbs */
  .cc-product__title{ font-size: 1.2rem; }
  .cc-product__price{ font-size: 1.05rem; }
  .cc-product__thumbs{ gap: 10px; }
  .cc-product__thumbs img{ width: 56px; height: 56px; }
}

/* --- Estilo unificado para selects y quantity en producto --- */
.cc-product__form {
  display: flex;
  flex-direction: column;
  gap: 12px; /* separación entre campos */
}

.cc-product__form select,
.cc-product__form input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc; /* borde gris */
  background-color: #f5f5f5; /* gris claro */
  color: #000;
  font-size: 1.0rem;
  appearance: none; /* quita estilos nativos */
}

.cc-product__qty input{ padding-right: 18px; }

@media (max-width: 768px) {
  .cc-product__form select,
  .cc-product__form input[type="number"] {
    font-size: 0.90rem; /* ajusta tipografía en móvil */
    padding: 9px 12px;
  }
}

/* PDP — Center form column and unify width */
.cc-product .cc-product__form{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* left align on PDP */
}

/* Unified product actions container (selector + button) */
.product-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* left */
  gap:12px;
  max-width:340px;       /* wider on desktop */
  margin:0;              /* remove auto centering */
}
.product-actions select,
.product-actions .product-form__input{
  width:100%;
  max-width:340px;       /* match button width */
  text-align:left;
  text-align-last:left;  /* selected option left */
}
.product-actions .product-form__submit{
  width:100%;
  max-width:340px;       /* match Size width */
}

/* Keep PDP Size label same width and left-aligned */
.cc-product .cc-product__label{
  width:100%;
  max-width:340px;
  text-align:left;
  margin-bottom:6px;
}

/* Mobile override: full width controls, left-aligned */
@media (max-width: 480px){
  .product-actions{ max-width: 100%; }
  .product-actions select,
  .product-actions .product-form__input,
  .product-actions .product-form__submit{
    max-width:100%;
    width:100%;
  }
}
/* === Collection cards: subtle overlay on hover/tap === */

/* Overlay hidden by default, centered content */

/* ======================= 11A) Product Cards — DRY base ==================== */
/* Unify card visuals across Collections and Featured without changing markup */
.cc-card,
.collection-grid .cc-collection-grid-item,
.featured-products .cc-collection-grid-item,
.cc-related__grid .cc-collection-grid-item{
  background:#f7f7f8;
  border-radius:12px;
  padding:8px;
}

.cc-card .cc-card-media,
.collection-grid .cc-collection-grid-item .cc-card-media,
.featured-products .cc-collection-grid-item .cc-card-media,
.cc-related__grid .cc-collection-grid-item .cc-card-media{
  position:relative;
  display:block; /* ensure anchors act as blocks */
  overflow:hidden;
  border-radius:10px;
  aspect-ratio: var(--card-aspect, 4/5);
}
/* Generic overlay for sizes at the bottom of the media (used in collections + featured) */
.cc-card .cc-card-media .cc-card-sizes,
.collection-grid .cc-collection-grid-item .cc-card-media .cc-card-sizes,
.cc-related__grid .cc-collection-grid-item .cc-card-media .cc-card-sizes{
  position:absolute; left:8px; right:8px; bottom:8px;
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  padding:4px 6px; background:rgba(255,255,255,.85);
  border-radius:8px; font-size:.78rem; font-weight:600; color:#111; z-index:2;
}

.cc-card .cc-card-media img,
.collection-grid .cc-collection-grid-item .cc-card-media img,
.featured-products .cc-collection-grid-item .cc-card-media img,
.cc-related__grid .cc-collection-grid-item .cc-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .25s ease, transform .25s ease;
}

.cc-card .cc-card-media img:nth-child(2),
.collection-grid .cc-collection-grid-item .cc-card-media img:nth-child(2),
.featured-products .cc-collection-grid-item .cc-card-media img:nth-child(2),
.cc-related__grid .cc-collection-grid-item .cc-card-media img:nth-child(2){
  position:absolute; inset:0; opacity:0;
}

@media (hover: hover) and (min-width: 769px){
  .cc-card:hover .cc-card-media img:nth-child(2),
  .collection-grid .cc-collection-grid-item:hover .cc-card-media img:nth-child(2),
  .featured-products .cc-collection-grid-item:hover .cc-card-media img:nth-child(2),
  .cc-related__grid .cc-collection-grid-item:hover .cc-card-media img:nth-child(2){ opacity:1; }
  .cc-card:hover .cc-card-media img:nth-child(1),
  .collection-grid .cc-collection-grid-item:hover .cc-card-media img:nth-child(1),
  .featured-products .cc-collection-grid-item:hover .cc-card-media img:nth-child(1),
  .cc-related__grid .cc-collection-grid-item:hover .cc-card-media img:nth-child(1){ opacity:0; }
}

.cc-card .cc-card-footer,
.collection-grid .cc-collection-grid-item .cc-card-footer,
.featured-products .cc-collection-grid-item .cc-card-footer,
.cc-related__grid .cc-collection-grid-item .cc-card-footer{
  display:flex; align-items:baseline; gap:6px; padding:10px 4px 4px;
}
@media (min-width: 769px){
  .cc-card .cc-card-footer,
  .collection-grid .cc-collection-grid-item .cc-card-footer,
  .featured-products .cc-collection-grid-item .cc-card-footer,
  .cc-related__grid .cc-collection-grid-item .cc-card-footer{ min-height:40px; }
}

.cc-card .cc-card-title,
.collection-grid .cc-collection-grid-item .cc-card-title,
.featured-products .cc-collection-grid-item .cc-card-title,
.cc-related__grid .cc-collection-grid-item .cc-card-title{ font-size:.90rem; line-height:1.25; font-weight:500; color:#111; margin:0; flex:1; }

.cc-card .cc-card-title a:link,
.cc-card .cc-card-title a:visited,
.collection-grid .cc-collection-grid-item .cc-card-title a:link,
.collection-grid .cc-collection-grid-item .cc-card-title a:visited,
.featured-products .cc-collection-grid-item .cc-card-title a:link,
.featured-products .cc-collection-grid-item .cc-card-title a:visited,
.cc-related__grid .cc-collection-grid-item .cc-card-title a:link,
.cc-related__grid .cc-collection-grid-item .cc-card-title a:visited{ color:#111; text-decoration:none; font-weight:600; }
/* Strengthen in collections to avoid theme defaults */
.cc-collection-section .cc-card-title a{ color:#111; text-decoration:none; }

.cc-card .cc-card-title a:hover,
.collection-grid .cc-collection-grid-item .cc-card-title a:hover,
.featured-products .cc-collection-grid-item .cc-card-title a:hover,
.cc-related__grid .cc-collection-grid-item .cc-card-title a:hover{ color:#000; text-decoration:none; }

.cc-card .cc-card-title a:focus-visible,
.collection-grid .cc-collection-grid-item .cc-card-title a:focus-visible,
.featured-products .cc-collection-grid-item .cc-card-title a:focus-visible,
.cc-related__grid .cc-collection-grid-item .cc-card-title a:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

.cc-card .cc-card-price,
.collection-grid .cc-collection-grid-item .cc-card-price,
.featured-products .cc-collection-grid-item .cc-card-price,
.cc-related__grid .cc-collection-grid-item .cc-card-price{ font-size:.90rem; font-weight:700; color:#000; white-space:nowrap; }

/* ======================= 11) Collection Grid Cards (visuals) ============== */
/* === Collection cards — new hover behavior (no overlay), subtle card bg, title+price footer === */
/* 1) Turn off previous overlay hover */
.collection-grid .cc-collection-grid-item .cc-prod-overlay,
#cc-grid .cc-collection-grid-item .cc-prod-overlay{ display:none !important; }

/* 2) Card container: subtle gray background and small padding (keeps 4 per row) */
.collection-grid .cc-collection-grid-item,
#cc-grid .cc-collection-grid-item{
  background: #f7f7f8; /* very light gray */
  border-radius: 12px;
  padding: 8px;
}

/* ======================= 11B) PDP Related — Grid ========================== */
.cc-related{ max-width: 1240px; margin: 28px auto; padding: 0 20px; }
.cc-related__title{ margin: 0 0 12px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.cc-related__grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1200px){ .cc-related__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 768px){ .cc-related__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
@media (max-width: 420px){ .cc-related__grid{ grid-template-columns: 1fr; gap: 10px; } }

/* Mobile: horizontal scroll for related cards (carousel-like) */
@media (max-width: 768px){
  .cc-related__grid{
    --related-card-width: 85vw;
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
    /* center first card with edge padding */
    padding-left: calc((100vw - var(--related-card-width))/2);
    padding-right: calc((100vw - var(--related-card-width))/2);
  }
  .cc-related__grid .cc-collection-grid-item{ flex:0 0 var(--related-card-width); scroll-snap-align:center; }
}

/* remove legacy block matching selector: .collection-grid/.cc-card-media (+ hover) — covered by DRY .cc-card* */

/* 4) Sizes badge — overlay (opt-in only)
   Use modifier cc-card--sizes-overlay in Collection pages to superpose sizes on the image. */
.cc-collection-section .cc-card.cc-card--sizes-overlay .cc-card-sizes{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  padding:4px 6px;
  background:rgba(255,255,255,.85); /* match featured overlay */
  border-radius:8px;
  font-size:.78rem;
  font-weight:600;
  color:#111;
  opacity:1;
  transform:translateY(0);
}


/* 5) Footer with small title + price */
/* remove legacy block matching selector: .collection-grid .cc-card-footer — covered by DRY */

/* remove legacy block matching selectors: .cc-card-title / .cc-card-price — covered by DRY */


/* Desktop: fix footer height so all cards align */
/* remove legacy block matching selector: min-height footer in @media — covered by DRY */

/* Optional: slightly tighter footer on small screens */
/* remove legacy mobile-specific font-size/padding adjustments — keep consistent .90rem as per DRY */

/* ===== Canon: título de tarjeta (enlace) en todas las secciones ===== */
.collection-grid .cc-collection-grid-item .cc-card-title a:link,
.collection-grid .cc-collection-grid-item .cc-card-title a:visited,
#cc-grid .cc-collection-grid-item .cc-card-title a:link,
#cc-grid .cc-collection-grid-item .cc-card-title a:visited,
.featured-products .cc-card-title a:link,
.featured-products .cc-card-title a:visited,
.new-products-launch .cc-card-title a:link,
.new-products-launch .cc-card-title a:visited{
  color:#111; text-decoration:none; font-weight:600;
}
.collection-grid .cc-collection-grid-item .cc-card-title a:hover,
#cc-grid .cc-collection-grid-item .cc-card-title a:hover,
.featured-products .cc-card-title a:hover,
.new-products-launch .cc-card-title a:hover{ color:#000; text-decoration:none; }

/* ===== Featured & New Launch — Card visuals extendidos ===== */
/* remove legacy block matching selectors under .featured-products — covered by DRY and featured-specific overrides */

/* ===================== 12) Collection Page (layout & toolbar) ============= */
/* ================= 13) New Products Launch (cc-launch) ==================== */
.cc-launch{ position:relative; max-width:96vw; margin: 24px auto 32px; padding: 0; }
.cc-launch__wrap{ position:relative; }
.cc-launch__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }

.cc-launch__tile{ position:relative; overflow:hidden; border-radius:12px; background:#0e0e0e; }
@media (min-width: 992px){
  /* Slightly smaller desktop height */
  .cc-launch__tile{ min-height: var(--sec-h-desktop, 38vh); }
}
@media (max-width: 991.98px){
  /* Ensure full-width tiles on mobile without deformation */
  .cc-launch__tile{ min-height: var(--sec-h-mobile, 48vh); }
}
.cc-launch__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.cc-launch__video{ display:block; width:100%; height:100%; object-fit:cover; }
.cc-launch__gif{ display:block; width:100%; height:auto; }

/* Overlay hashtag + copy + CTA */
.cc-launch__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; text-align:center;
  padding: 16px 24px;
}
.cc-hashtag-overlay{ margin:0; font-weight:800; letter-spacing:-0.01em; line-height:1.05; color:#fff; font-size: clamp(1.6rem, 6vw, 3rem); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.cc-launch__desc{ color:#fff; opacity:.95; max-width: 640px; }
.cc-launch__button{ margin-top:6px; }

/* Mobile: horizontal scroll (carousel-like) for launch tiles */
@media (max-width: 991.98px){
  .cc-launch{ padding: 0; max-width: 100vw; margin-left: 0; margin-right: 0; --launch-card-width: 85vw; }
  .cc-launch__wrap{ overflow: hidden; }
  .cc-launch__grid{
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
    /* Center the first tile in viewport by adding symmetric gutters based on card width */
    padding-left: calc((100vw - var(--launch-card-width)) / 2);
    padding-right: calc((100vw - var(--launch-card-width)) / 2);
  }
  .cc-launch__grid::-webkit-scrollbar{ height: 6px; }
  .cc-launch__grid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 3px; }
  .cc-launch__tile{ flex: 0 0 var(--launch-card-width); scroll-snap-align: center; scroll-snap-stop: always; }
  .cc-launch__overlay{ inset:0; padding: 20px; align-items:center; justify-content:center; text-align:center; }
  .cc-hashtag-overlay{ font-size: clamp(1.4rem, 7vw, 2.2rem); }
}
/* === Collection page (moved from cc-collection.liquid) === */
.cc-collection-section {
  background: #ffffff;
  color: #111827;
  min-height: 100vh;
  font-family: inherit;
}

@media (max-width: 991.98px){
  .cc-collection-section{ position: relative; z-index: 0; }
}

/* Header: use 100% width to avoid viewport overflow that can misalign header icons */
.cc-collection-header {
  background: #ffffff;
  color: #111827;
  padding: 2rem 0 1rem 0;
  width: 100%;
  border-bottom: 0 !important;
}
.cc-collection-header-inner { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }

/* === Collection Toolbar (breadcrumbs + filters + sort) ===================== */
.cc-collection-layout{ max-width:1240px; margin: 0 auto; padding: 0 1.25rem; }

.cc-collection-toolbar{
  display:grid; grid-template-columns: 1fr auto; gap: 16px; align-items:end;
  margin: 12px 0 14px;
}
@media (max-width:991.98px){
  .cc-collection-toolbar{ grid-template-columns: 1fr; gap: 10px; }
}

/* Breadcrumbs */
.cc-breadcrumbs{ font-size:.92rem; color:#6b7280; }
.cc-breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cc-breadcrumbs a{ color:#6b7280; text-decoration:none; }
.cc-breadcrumbs a:hover{ color:#000; }
.cc-breadcrumbs li{ display:flex; align-items:center; gap:8px; }
.cc-breadcrumbs li+li::before{ content:"/"; color:#9ca3af; }

/* Filter bar */
.cc-filterbar{ display:block; }
.cc-filter-form{ margin:0; }
.cc-filterbar-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cc-filterbar-spacer{ flex:1 1 auto; }

/* Filter trigger buttons */
.cc-filter-trigger{
  -webkit-appearance:none; appearance:none;
  background:transparent !important; color:#111 !important; border:0 !important; border-radius:0 !important;
  padding:.25rem .25rem .15rem 0; font-weight:600; cursor:pointer; line-height:1; display:inline-flex; gap:4px; align-items:center;
  border-bottom:1px solid rgba(204,255,0,.35); /* fino borde lime */
  box-shadow:none !important;
  -webkit-tap-highlight-color: rgba(204,255,0,.35);
}
.cc-filter-trigger:hover,
.cc-filter-trigger:focus-visible,
.cc-filter-trigger:active,
.cc-filter-trigger[aria-expanded="true"]{
  color: var(--lime) !important; text-decoration:none; outline:0; border-bottom-color: var(--lime);
  background:transparent !important; box-shadow:none !important;
}

/* Filter panel popovers */
.cc-filter-panel{ display:none; position:absolute; z-index:12030; background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); margin-top:8px; }
.cc-filter{ position:relative; }
.cc-filter[aria-expanded="true"] .cc-filter-panel,
.cc-filter .cc-filter-trigger[aria-expanded="true"] + .cc-filter-panel{ display:block; }
.cc-filter-panel-inner{ padding:12px; min-width: 280px; display:grid; gap:8px; }
.cc-panel-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-panel-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Chips & checkboxes */
.cc-filter-checkbox{ display:flex; gap:8px; align-items:center; font-size:.92rem; }
.cc-filter-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-size:.88rem; cursor:pointer; line-height:1; }
.cc-filter-chip input{
  -webkit-appearance:none; appearance:none;
  display:inline-block; flex:0 0 auto;
  width:14px; height:14px; box-sizing:border-box;
  border:2px solid #9ca3af; border-radius:50%;
  background:#fff; margin:0;
}
.cc-filter-chip input:checked{ background:var(--lime); border-color:transparent; }
@media (min-width: 992px){
  .cc-filter-panel-inner{ min-width: 320px; }
}

/* Mobile: center panels and constrain size */
@media (max-width: 768px){
  .cc-filter{ position: static; }
  .cc-filter-panel{
    position: fixed; left: 50%; top: 14vh; transform: translateX(-50%);
    width: min(92vw, 480px); max-height: 68vh; overflow: auto; margin-top:0;
  }
  .cc-filter-panel-inner{ min-width: auto; }
}

/* Price inputs */
.cc-price-controls{ display:flex; align-items:center; gap:8px; }
.cc-price-input{ display:flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; }
.cc-price-input input{ width:90px; border:0; outline:0; background:transparent; font:inherit; color:#111; }
/* Prevent iOS zoom on focus: ensure 16px font on mobile inputs */
@media (max-width: 768px){
  .cc-price-input input{ font-size:16px; }
}
.cc-price-sep{ color:#9ca3af; }
.cc-price-summary{ margin-top:8px; font-size:.9rem; color:#374151; }

/* Sort dropdown */
.cc-sort{ display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.cc-sort-label{ font-size:.92rem; color:#6b7280; }
.cc-sort-select{ -webkit-appearance:none; appearance:none; background:transparent !important; color:#111 !important; border:0 !important; padding:.25rem 0; font-weight:600; border-bottom:1px solid rgba(204,255,0,.35); box-shadow:none !important; -webkit-tap-highlight-color: rgba(204,255,0,.35); }
.cc-sort-select:hover,
.cc-sort-select:focus-visible,
.cc-sort-select:active{ background:transparent; color: var(--lime) !important; border-bottom-color: var(--lime); }
.cc-sort:hover .cc-sort-label,
.cc-sort:focus-within .cc-sort-label{ color: #6b7280 !important; }
/* Clear filters as link */
.cc-filter-clear{ background:transparent !important; border:0 !important; color:#111 !important; padding:.25rem 0; font-weight:600; cursor:pointer; border-bottom:1px solid rgba(204,255,0,.35); box-shadow:none !important; -webkit-tap-highlight-color: rgba(204,255,0,.35); }
.cc-filter-clear:hover,
.cc-filter-clear:focus-visible,
.cc-filter-clear:active{ color: var(--lime) !important; border-bottom-color: var(--lime); }

@media (max-width:991.98px){
  .cc-sort{ justify-content:center; }
}

/* Toolbar layout improvements */
.cc-collection-toolbar{ display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:end; }
@media (max-width:768px){
  .cc-collection-toolbar{ grid-template-columns: 1fr; }
}

/* Collection grid wrapper spacing */
.collection-grid{ margin: 10px 0 18px; }

/* Explicit columns for collection product grid (no impact on Featured) */
.cc-collection-section .collection-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1024px){
  .cc-collection-section .collection-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .cc-collection-section .collection-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Desktop large: make collection cards a bit bigger (3 cols on very wide screens) */
@media (min-width: 1440px){
  .cc-collection-section .collection-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Mobile: ensure product image fits entirely inside the card (no overflow) */
@media (max-width: 640px){
  .cc-collection-section .cc-card .cc-card-media{ background:#fff; }
  /* Make the media taller on mobile so the product appears larger (no overflow) */
  .cc-collection-section .cc-card .cc-card-media{ aspect-ratio: 2/3; }
  .cc-collection-section .cc-card .cc-card-media img{ object-fit: contain; max-width:100%; max-height:100%; }
}

/* Empty state */
.cc-collection-empty{ padding: 24px; text-align:center; color:#6b7280; }

/* Guard panels on small screens */
@media (max-width:640px){
  .cc-filter-panel-inner{ min-width: 240px; }
}
.cc-collection-title { font-size: 2.6rem; font-weight: 800; margin: 0 0 1rem 0; letter-spacing: -0.02em; }
.cc-collection-description {
  font-size: 1.0rem;
  max-width: 1040px;
  margin-left: auto; /* center the block */
  margin-right: auto; /* center the block */
  text-align: center; /* center text */
  line-height: 1.55;
  color: #4b5563; /* darker for readability on white */
}

/* ======================= Featured Products (grid + mobile carousel) ======= */
/* Desktop/tablet: stable grid (4→3→2 cols) scoped to Featured only */
.cc-featured-products .collection-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  padding: 0 32px; /* slightly less side margin for larger cards */
}
/* Keep 4 columns on large screens for bigger cards */
@media (min-width: 1280px){
  .cc-featured-products .collection-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .cc-featured-products .collection-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); padding: 0 20px; }
}
@media (max-width: 640px){
  .cc-featured-products .collection-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 24px; /* extra side padding so first card isn't flush */
    scroll-padding-left:24px; /* snap starts with the same left inset */
  }
  .cc-featured-products .collection-grid .cc-collection-grid-item{
    flex:0 0 74vw; /* slightly smaller cards on mobile */
    scroll-snap-align:start;
  }
}
/* Constrain featured container width moderately on large screens */
.cc-featured-products .cfp-container{ max-width: 1400px; margin: 0 auto; }
/* Featured: ensure no underline and accessible focus on titles */
.cc-featured-products .cc-card-title a{ text-decoration:none; }
.cc-featured-products .cc-card-title a:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
/* Featured: sizes over the image (bottom overlay, subtle) */
.cc-featured-products .cc-card .cc-card-media{ position:relative; }
.cc-featured-products .cc-card .cc-card-media .cc-card-sizes{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  padding:4px 6px;
  background: rgba(255,255,255,.85);
  border-radius:8px;
  font-size:.78rem; font-weight:600;
  color:#111;
}

@media (min-width: 1400px) {
  .cc-collection-description {
    max-width: 1160px;
  }
}
@media (max-width: 600px){
  .cc-collection-header-inner{ padding: 0 1rem; }
  .cc-collection-title{ font-size: 1.7rem; }
  .cc-collection-description{
    font-size: clamp(.80rem, 3vw, .90rem);
    line-height: 1.40;
    max-width: 92vw;
  }
}

/* Widen collection page title independently of ba<truncated__content/>