/* =========================================================
   JF9 FOOTBALL — PREMIUM SPORT
   CLEAN MASTER STYLESHEET
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --black: #080a09;
  --black-2: #0d110f;
  --black-3: #111612;

  --green: #16ea57;
  --green-bright: #23f365;
  --green-dark: #0db43d;
  --green-soft: rgba(22, 234, 87, .11);

  --white: #f5f6f3;
  --pure-white: #ffffff;

  --text: #101311;
  --muted: #737d76;
  --muted-2: #929a95;

  --line: #dde2de;

  --radius: 20px;
  --radius-big: 28px;

  --max: 1740px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: "Inter", Arial, sans-serif;

  background: var(--white);
  color: var(--text);

  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

/* Chrome moderno: bloqueamos la página cuando el modal está abierto */
body:has(#modal:not([hidden])) {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   HEADER
========================================================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  min-height: 82px;

  padding: 0 5vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  background:
    linear-gradient(
      90deg,
      rgba(17, 19, 17, .97),
      rgba(7, 9, 8, .97)
    );

  border-bottom:
    1px solid rgba(255, 255, 255, .07);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;

  gap: 15px;

  min-width: 0;
}

.brand-logo {
  position: relative;

  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 17px;

  background: var(--green);

  box-shadow:
    0 0 32px rgba(22, 234, 87, .12);
}

/* fallback */
.brand-logo-fallback {
  position: absolute;
  inset: 0;

  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #000;

  font-size: 18px;
  font-weight: 900;

  letter-spacing: -1px;
}

/* imagen real */
.brand-logo img {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: transparent;

  color: transparent;

  font-size: 0;

  padding: 7px;

  mix-blend-mode: screen;

  transform: scale(1.08);
}

.brand-logo.logo-error .brand-logo-fallback {
  display: flex;
}

.brand-info {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.brand-kicker {
  color: var(--green);

  font-size: 10px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: 4px;

  white-space: nowrap;
}

.brand-info strong {
  color: #fff;

  margin-top: 4px;

  font-size: 22px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -1px;

  white-space: nowrap;
}

.brand-info > span:last-child {
  margin-top: 6px;

  color: #747d77;

  font-size: 11px;

  white-space: nowrap;
}

.navbar nav {
  display: flex;
  align-items: center;

  gap: 34px;
}

.navbar nav > a:not(.nav-whatsapp) {
  color: #9ca49f;

  font-size: 13px;
  font-weight: 700;

  transition: color .2s ease;
}

.navbar nav > a:not(.nav-whatsapp):hover {
  color: white;
}

.nav-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 14px 20px;

  border-radius: 14px;

  background: var(--green);

  color: #000;

  font-size: 13px;
  font-weight: 900;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.nav-whatsapp span {
  font-size: 15px;
}

.nav-whatsapp:hover {
  transform: translateY(-2px);

  box-shadow:
    0 13px 32px rgba(22, 234, 87, .20);
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 730px;

  display: grid;

  grid-template-columns: 1.02fr .98fr;

  align-items: center;

  padding:
    90px 6.5vw 80px;

  overflow: hidden;

  color: white;

  background:
    radial-gradient(
      circle at 70% 55%,
      rgba(22, 234, 87, .18),
      transparent 31%
    ),
    linear-gradient(
      115deg,
      #050605 0%,
      #090d0a 57%,
      #040504 100%
    );
}

.hero-grid {
  position: absolute;
  inset: 0;

  opacity: .23;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  mask-image:
    linear-gradient(
      to right,
      black 0%,
      transparent 90%
    );
}

.hero-glow {
  position: absolute;

  width: 720px;
  height: 720px;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(22, 234, 87, .19),
      transparent 68%
    );

  filter: blur(35px);

  pointer-events: none;
}

.hero-content {
  position: relative;

  z-index: 5;

  max-width: 770px;
}

.eyebrow {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 28px;

  color: var(--green);

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 5px;
}

.eyebrow span {
  width: 40px;
  height: 3px;

  background: var(--green);

  box-shadow:
    0 0 16px rgba(22, 234, 87, .45);
}

.hero h1 {
  font-size:
    clamp(64px, 7vw, 125px);

  line-height: .86;

  letter-spacing: -7px;

  font-weight: 900;
}

.hero h1 em {
  color: var(--green);
  font-style: normal;
}

.hero-description {
  max-width: 615px;

  margin-top: 36px;

  color: #a0aaa3;

  font-size: 17px;

  line-height: 1.68;
}

.hero-actions {
  display: flex;
  align-items: center;

  gap: 32px;

  margin-top: 35px;
}

.hero-primary {
  min-width: 255px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    18px 20px 18px 25px;

  border-radius: 15px;

  background: var(--green);

  color: #000;

  font-size: 15px;
  font-weight: 900;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.hero-primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 42px rgba(22, 234, 87, .19);
}

.hero-primary strong {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #050605;

  color: white;

  font-size: 18px;
}

.hero-link {
  padding-bottom: 7px;

  border-bottom:
    1px solid rgba(255,255,255,.30);

  color: white;

  font-size: 14px;
  font-weight: 800;

  transition:
    color .2s ease,
    border-color .2s ease;
}

.hero-link span {
  color: var(--green);
}

.hero-link:hover {
  color: var(--green);

  border-color: var(--green);
}

.hero-stats {
  display: flex;

  gap: 50px;

  margin-top: 58px;
}

.hero-stats div {
  display: flex;
  flex-direction: column;

  gap: 5px;
}

.hero-stats strong {
  color: white;

  font-size: 21px;
  font-weight: 900;
}

.hero-stats span {
  color: #626b65;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 2px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
  position: relative;

  min-height: 560px;

  display: grid;
  place-items: center;

  z-index: 4;
}

.hero-circle {
  position: absolute;

  border:
    1px solid rgba(22, 234, 87, .18);

  border-radius: 50%;
}

.circle-one {
  width: 580px;
  height: 580px;
}

.circle-two {
  width: 430px;
  height: 430px;
}

.circle-three {
  width: 290px;
  height: 290px;
}

.hero-shirt {
  position: relative;

  z-index: 10;

  width:
    min(420px, 75%);

  filter:
    drop-shadow(
      0 40px 45px rgba(0,0,0,.58)
    );

  animation:
    heroFloat 5s ease-in-out infinite;
}

.hero-shirt img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

.hero-label-top,
.hero-label-bottom {
  position: absolute;

  z-index: 12;

  width: 72%;

  display: flex;
  justify-content: space-between;

  color: #68716a;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 3px;
}

.hero-label-top {
  top: 45px;
}

.hero-label-top span:first-child {
  color: var(--green);
}

.hero-label-bottom {
  bottom: 55px;
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

}


/* =========================================================
   COLLECTIONS
========================================================= */

.collections {
  position: relative;

  padding:
    115px
    4.5vw
    125px;

  background:
    #f2f3f0;

  overflow: hidden;
}

.section-top {
  max-width: var(--max);

  margin:
    0 auto 52px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 25px;
}

.section-kicker {
  display: block;

  margin-bottom: 16px;

  color: #767f79;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 4px;
}

.section-top h2 {
  font-size:
    clamp(52px, 6vw, 88px);

  line-height: .90;

  letter-spacing: -6px;

  font-weight: 900;
}

.section-top h2 span {
  color: var(--green);
}

.section-top p {
  margin-top: 17px;

  color: #6c7670;

  font-size: 15px;
}

.collection-counter {
  display: flex;
  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}

.collection-counter strong {
  color: var(--green-dark);

  font-size: 25px;
  font-weight: 900;
}

.collection-counter span {
  color: #89928b;

  font-size: 8px;
  line-height: 1.4;

  font-weight: 900;

  letter-spacing: 2px;
}

.collection-grid {
  max-width: var(--max);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 20px;
}


/* =========================================================
   COLLECTION CARDS
========================================================= */

.collection-card {
  position: relative;

  height: 420px;

  overflow: hidden;

  isolation: isolate;

  border-radius: var(--radius);

  background:
    linear-gradient(
      145deg,
      #07110b,
      #050705
    );

  color: white;

  box-shadow:
    0 15px 45px rgba(0,0,0,.09);

  transition:
    transform .38s ease,
    box-shadow .38s ease;
}

.collection-card:hover {
  transform:
    translateY(-8px);

  box-shadow:
    0 30px 65px rgba(0,0,0,.17);
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.collection-background {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #07110b,
      #050705
    );
}

.collection-shirt {
  position: absolute;

  width: 58%;
  height: 70%;

  left: 50%;
  top: 45%;

  transform:
    translate(-50%, -50%)
    scale(1.03);

  object-fit: cover;
  object-position: center;

  opacity: .18;

  filter:
    blur(2px)
    saturate(.72)
    contrast(.92)
    brightness(.70);

  transition:
    opacity .45s ease,
    transform .65s ease,
    filter .45s ease;
}

.collection-card.has-image .collection-shirt {
  opacity: .19;
}

.collection-card:hover .collection-shirt {
  opacity: .27;

  transform:
    translate(-50%, -50%)
    scale(1.07);

  filter:
    blur(1px)
    saturate(.90)
    contrast(1)
    brightness(.78);
}


/* =========================================================
   OVERLAY
========================================================= */

.collection-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(2,5,3,.84) 0%,
      rgba(3,8,5,.46) 42%,
      rgba(3,18,9,.95) 100%
    );

  pointer-events: none;
}

.collection-glow {
  position: absolute;

  width: 300px;
  height: 300px;

  right: -100px;
  bottom: -130px;

  z-index: 1;

  border-radius: 50%;

  background:
    rgba(22,234,87,.10);

  filter: blur(50px);

  pointer-events: none;
}


/* =========================================================
   DECORATIVE RING
========================================================= */

.collection-card::before {
  content: "";

  position: absolute;

  width: 370px;
  height: 370px;

  right: -135px;
  bottom: -200px;

  z-index: 1;

  border:
    48px solid rgba(22,234,87,.065);

  border-radius: 50%;

  pointer-events: none;

  transition:
    transform .6s ease;
}

.collection-card:hover::before {
  transform: scale(1.08);
}


/* =========================================================
   COLLECTION TEXT
========================================================= */

.collection-number,
.collection-country,
.collection-name,
.collection-arrow {
  position: absolute;

  z-index: 3;
}

.collection-number {
  top: 30px;
  left: 32px;

  color: var(--green);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 4px;
}

.collection-country {
  left: 32px;
  bottom: 78px;

  color: #858e87;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 3px;
}

.collection-name {
  left: 32px;
  bottom: 30px;

  max-width:
    calc(100% - 70px);

  color: white;

  font-size:
    clamp(28px, 2.3vw, 39px);

  line-height: .94;

  font-weight: 900;

  letter-spacing: -2px;
}


/* =========================================================
   COLLECTION ARROW
========================================================= */

.collection-arrow {
  top: 28px;
  right: 28px;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(5,7,6,.78);

  border:
    1px solid rgba(255,255,255,.20);

  color: white;

  font-size: 20px;

  box-shadow:
    0 10px 25px rgba(0,0,0,.28);

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.collection-card:hover .collection-arrow {
  background:
    var(--green);

  color:
    #000;

  border-color:
    var(--green);

  transform:
    rotate(45deg);
}


/* =========================================================
   WIDE COLLECTION
========================================================= */

.collection-wide {
  grid-column:
    1 / -1;

  height: 300px;

  background:
    linear-gradient(
      100deg,
      #050705,
      #09150c
    );
}

.collection-wide .collection-shirt {
  width: 32%;
  height: 90%;

  left: 66%;
  top: 48%;

  opacity: .18;
}

.collection-wide:hover .collection-shirt {
  opacity: .28;

  transform:
    translate(-50%, -50%)
    scale(1.07);
}

.collection-wide .collection-country {
  bottom: 93px;
}

.collection-wide .collection-name {
  bottom: 38px;

  font-size:
    clamp(38px, 4vw, 58px);
}


/* =========================================================
   CATALOG
========================================================= */

.catalog {
  position: relative;

  max-width: var(--max);

  margin: 0 auto;

  padding:
    125px
    4.5vw
    145px;

  background:
    #f7f8f5;

  overflow: hidden;
}

.catalog::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: -190px;
  top: 120px;

  border:
    56px solid rgba(22,234,87,.035);

  border-radius: 50%;

  pointer-events: none;
}

.catalog-heading {
  position: relative;
  z-index: 2;

  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 20px;

  margin-bottom: 50px;
}

.catalog-heading h2 {
  font-size:
    clamp(60px, 7vw, 100px);

  line-height: .84;

  letter-spacing: -7px;

  font-weight: 900;
}

.catalog-heading h2 span {
  color: var(--green);
}

.catalog-heading p {
  margin-top: 17px;

  color: #707a74;

  font-size: 15px;
}

.catalog-count {
  color: #6e7771;

  font-size: 14px;

  font-weight: 800;

  white-space: nowrap;
}


/* =========================================================
   SEARCH PANEL
========================================================= */

.search-panel {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    1.55fr
    .75fr
    .75fr;

  gap: 14px;

  margin-bottom: 30px;
}

.search-main,
.filter-field {
  min-height: 105px;

  background:
    rgba(255,255,255,.96);

  border:
    1px solid #e0e4e0;

  border-radius: 20px;

  box-shadow:
    0 12px 35px rgba(0,0,0,.035);
}

.search-main {
  display: flex;
  align-items: center;

  padding: 18px 22px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.search-main:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(22,234,87,.25);
}

.search-main:focus-within {
  border-color:
    rgba(22,234,87,.42);

  box-shadow:
    0 16px 40px rgba(0,0,0,.05),
    0 0 0 4px rgba(22,234,87,.08);
}

.search-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 18px;

  border-radius: 15px;

  background:
    var(--green-soft);

  color:
    #00b842;

  font-size: 27px;
}

.search-content {
  flex: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;
}

.search-content label {
  margin-bottom: 5px;

  color: #00a83e;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 3px;
}

.search-content input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: #111;

  font-size: 16px;
}

.search-content input::placeholder {
  color:
    #a0a8a3;
}

.search-shortcut {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    #f0f2ef;

  color:
    #929a95;

  font-size: 12px;

  font-weight: 800;
}

.filter-field {
  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    18px 22px;

  transition:
    border-color .25s ease,
    transform .25s ease;
}

.filter-field:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(22,234,87,.20);
}

.filter-field > span {
  margin-bottom: 7px;

  color: #8b938e;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 3px;
}

.filter-field select {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: #111;

  font-size: 14px;

  font-weight: 800;

  cursor: pointer;
}


/* =========================================================
   CATALOG META
========================================================= */

.catalog-meta {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 25px;

  color:
    #7d8580;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 2px;
}

.catalog-meta strong {
  color: #111;
}

.catalog-line {
  width: 90px;
  height: 1px;

  background:
    #d7dad7;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  align-items: start;

  gap: 18px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.card {
  position: relative;

  align-self: start;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfcfa
    );

  border:
    1px solid rgba(8,10,9,.08);

  border-radius:
    22px;

  box-shadow:
    0 12px 35px rgba(0,0,0,.045);

  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s ease,
    border-color .25s ease;
}

.card:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(22,234,87,.25);

  box-shadow:
    0 26px 65px rgba(0,0,0,.12);
}


/* ghost JF9 */

.card::after {
  content: "JF9";

  position: absolute;

  right: -12px;
  bottom: 65px;

  z-index: 1;

  color:
    rgba(22,234,87,.045);

  font-size: 72px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -5px;

  pointer-events: none;

  transform:
    rotate(-8deg);

  transition:
    color .35s ease,
    transform .45s ease;
}

.card:hover::after {
  color:
    rgba(22,234,87,.08);

  transform:
    rotate(-4deg)
    translateY(-3px);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.card-image {
  position: relative;

  width: 100%;
  height: 315px;

  overflow: hidden;

  isolation: isolate;

  background:
    #111512;
}

.card-image::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 32%,
      rgba(0,0,0,.08) 58%,
      rgba(0,0,0,.34) 100%
    );

  pointer-events: none;
}

.card-image::before {
  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  right: -72px;
  top: -72px;

  z-index: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(22,234,87,.27),
      transparent 70%
    );

  opacity: .60;

  pointer-events: none;

  transition:
    transform .55s ease,
    opacity .35s ease;
}

.card-image img {
  position: relative;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .45s ease,
    opacity .20s ease;
}

.card:hover .card-image img {
  transform:
    scale(1.055);

  filter:
    saturate(1.05)
    contrast(1.03);
}

.card:hover .card-image::before {
  transform:
    scale(1.30);

  opacity:
    .85;
}


/* top green bar */

.card-image > .jf9-card-mark {
  display: none;
}


/* =========================================================
   CARD IMAGE CAROUSEL
========================================================= */

.card-gallery-arrow {
  position: absolute;

  top: 50%;

  width: 40px;
  height: 40px;

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  transform:
    translateY(-50%);

  border:
    1px solid rgba(255,255,255,.22);

  border-radius:
    50%;

  background:
    rgba(5,7,6,.82);

  color: white;

  font-size: 15px;
  font-weight: 900;

  cursor: pointer;

  opacity: 0;

  backdrop-filter:
    blur(8px);

  transition:
    opacity .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.card:hover .card-gallery-arrow {
  opacity: 1;
}

.card-gallery-arrow:hover {
  background:
    var(--green);

  border-color:
    var(--green);

  color:
    #000;

  transform:
    translateY(-50%) scale(1.08);
}

.card-gallery-prev {
  left: 12px;
}

.card-gallery-next {
  right: 12px;
}

.card-gallery-counter {
  position: absolute;

  right: 12px;
  bottom: 12px;

  z-index: 5;

  padding:
    7px 10px;

  border-radius:
    999px;

  background:
    rgba(5,7,6,.87);

  border:
    1px solid rgba(255,255,255,.10);

  color: white;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1px;

  backdrop-filter:
    blur(8px);
}

.card-gallery-label {
  position: absolute;

  left: 12px;
  top: 12px;

  z-index: 5;

  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius:
    10px;

  background:
    rgba(22,234,87,.94);

  color:
    #000;

  font-size: 9px;

  font-weight: 900;

  box-shadow:
    0 8px 18px rgba(0,0,0,.20);
}


/* =========================================================
   CARD BODY
========================================================= */

.card .body {
  position: relative;

  z-index: 2;

  padding:
    19px 19px 18px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fafbf9
    );
}

.card .body::before {
  content: "";

  position: absolute;

  left: 19px;
  top: 0;

  width: 38px;
  height: 3px;

  background:
    var(--green);

  border-radius:
    999px;

  transition:
    width .35s ease;
}

.card:hover .body::before {
  width:
    66px;
}

.card .body > small {
  display: block;

  padding-top: 4px;

  color:
    #828b85;

  font-size: 9px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: 2.6px;

  text-transform: uppercase;
}

.card .body > small::before {
  content: "";

  display: inline-block;

  width: 4px;
  height: 4px;

  margin-right: 7px;

  border-radius: 50%;

  background:
    var(--green);

  vertical-align: middle;
}

.card h3 {
  min-height: 52px;

  margin-top: 11px;

  color:
    #101311;

  font-size: 14px;

  line-height: 1.36;

  font-weight: 800;

  letter-spacing: -.2px;

  overflow: hidden;
}

.card .price {
  display: flex;
  align-items: baseline;

  margin-top: 19px;

  color:
    #0a0d0b;

  font-size: 27px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: -1.2px;

  transition:
    color .2s ease;
}

.card:hover .price {
  color:
    #00b842;
}


/* =========================================================
   CARD ACTIONS
========================================================= */

.card .actions {
  display: grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 8px;

  margin-top: 14px;
}

.card .actions button {
  width: 100%;

  min-height: 44px;

  padding:
    0 14px;

  border-radius: 12px;

  font-size: 10px;

  font-weight: 900;

  cursor: pointer;

  transition:
    transform .20s ease,
    box-shadow .20s ease,
    background .20s ease,
    border-color .20s ease;
}

.card .actions .view {
  background:
    #eef0ed;

  border:
    1px solid #e0e3df;

  color:
    #111;
}

.card .actions .view:hover {
  background:
    #111512;

  border-color:
    #111512;

  color:
    white;

  transform:
    translateY(-2px);
}

.card .actions .order {
  background:
    var(--green);

  border:
    1px solid var(--green);

  color:
    #000;

  box-shadow:
    0 8px 20px rgba(22,234,87,.13);
}

.card .actions .order:hover {
  background:
    var(--green-bright);

  box-shadow:
    0 13px 30px rgba(22,234,87,.24);

  transform:
    translateY(-3px);
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 55px;
  padding-top: 28px;

  border-top:
    1px solid #e1e4e1;
}

.page-button {
  min-width: 43px;
  height: 43px;

  padding: 0 13px;

  border:
    1px solid #dce0dc;

  border-radius: 12px;

  background: white;

  color: #616a64;

  font-size: 10px;

  font-weight: 900;

  cursor: pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.page-button:hover {
  border-color:
    var(--green);

  color:
    #111;

  transform:
    translateY(-2px);
}

.page-button.active {
  background:
    var(--green);

  border-color:
    var(--green);

  color:
    #000;

  box-shadow:
    0 9px 21px rgba(22,234,87,.14);
}

.page-dots {
  padding:
    0 4px;

  color:
    #909891;

  font-size: 14px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
  position: relative;

  min-height: 300px;

  margin-top: 30px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    1px dashed #d9ddd9;

  border-radius:
    24px;

  background:
    rgba(255,255,255,.55);

  text-align: center;
}

.empty-state strong {
  color:
    #101311;

  font-size:
    24px;

  font-weight:
    900;
}

.empty-state span {
  color:
    #7c857f;

  font-size:
    13px;
}
.empty-state[hidden] {
  display: none !important;
}

/* =========================================================
   MODAL — DESKTOP
========================================================= */

#modal.modal-wrapper {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 24px;

  overflow: hidden;

  background:
    rgba(0,0,0,.78);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

#modal.modal-wrapper[hidden] {
  display: none;
}

#modal .modal-backdrop {
  position: absolute;

  inset: 0;

  z-index: 0;

  background: transparent;
}

#modal .modal {
  position: relative;

  z-index: 2;

  width:
    min(1120px, 95vw);

  height:
    min(760px, 90vh);

  max-height:
    90vh;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    28px;

  background:
    #090c0a;

  color:
    white;

  box-shadow:
    0 40px 120px rgba(0,0,0,.65);

  scrollbar-width:
    thin;
}

#modal .modal-close {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 20;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius: 50%;

  background:
    rgba(4,6,5,.92);

  color:
    white;

  font-size: 24px;
  font-weight: 500;

  cursor: pointer;

  backdrop-filter:
    blur(10px);

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

#modal .modal-close:hover {
  background:
    var(--green);

  color:
    #000;

  transform:
    rotate(90deg);
}


/* =========================================================
   MODAL PRODUCT
========================================================= */

#modal .detail-product {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  min-height:
    100%;
}

#modal .detail-gallery {
  position: relative;

  padding: 24px;

  background:
    radial-gradient(
      circle at center,
      rgba(22,234,87,.10),
      transparent 45%
    ),
    #050706;
}

#modal .detail-main-wrap {
  position: relative;

  width: 100%;

  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius:
    20px;

  background:
    #080a09;
}

#modal .detail-main-image {
  display: block;

  width: 100%;
  height: 520px;

  object-fit: contain;

  border-radius:
    20px;

  transition:
    opacity .18s ease,
    transform .35s ease;
}

#modal .detail-main-wrap:hover .detail-main-image {
  transform:
    scale(1.02);
}


/* =========================================================
   MODAL ARROWS
========================================================= */

#modal .modal-gallery-arrow {
  position: absolute;

  top: 50%;

  z-index: 10;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform:
    translateY(-50%);

  border:
    1px solid rgba(255,255,255,.20);

  border-radius: 50%;

  background:
    rgba(0,0,0,.76);

  color:
    white;

  font-size:
    18px;

  font-weight:
    900;

  cursor:
    pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

#modal .modal-gallery-arrow:hover {
  background:
    var(--green);

  border-color:
    var(--green);

  color:
    #000;
}

#modal .modal-gallery-prev {
  left: 18px;
}

#modal .modal-gallery-next {
  right: 18px;
}

#modal .modal-image-counter {
  position: absolute;

  right: 18px;
  bottom: 18px;

  z-index: 10;

  padding:
    7px 10px;

  border-radius:
    999px;

  background:
    rgba(0,0,0,.78);

  color:
    white;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


/* =========================================================
   MODAL THUMBNAILS
========================================================= */

#modal .detail-thumbnails {
  display: flex;

  gap:
    8px;

  margin-top:
    12px;

  overflow-x:
    auto;

  padding-bottom:
    2px;
}

#modal .detail-thumbnails img {
  width: 62px;
  height: 62px;

  flex:
    0 0 62px;

  object-fit:
    cover;

  border:
    2px solid transparent;

  border-radius:
    10px;

  opacity:
    .45;

  cursor:
    pointer;

  transition:
    opacity .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

#modal .detail-thumbnails img:hover,
#modal .detail-thumbnails img.active {
  opacity:
    1;

  border-color:
    var(--green);

  transform:
    translateY(-2px);
}


/* =========================================================
   MODAL INFO
========================================================= */

#modal .detail-info {
  min-height:
    100%;

  padding:
    55px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  background:
    linear-gradient(
      145deg,
      #111512,
      #090c0a
    );

  border-left:
    1px solid rgba(255,255,255,.07);
}

#modal .detail-kicker {
  margin-bottom:
    11px;

  color:
    var(--green);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    3px;

  text-transform:
    uppercase;
}

#modal .detail-info > small {
  color:
    #8d968f;

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    3px;
}

#modal .detail-info h2 {
  margin-top:
    12px;

  color:
    white;

  font-size:
    clamp(32px, 4vw, 54px);

  line-height:
    .98;

  letter-spacing:
    -2.8px;

  font-weight:
    900;

  overflow-wrap:
    break-word;
}

#modal .detail-line {
  width:
    48px;

  height:
    4px;

  margin:
    24px 0;

  border-radius:
    999px;

  background:
    var(--green);
}

#modal .detail-info > p {
  max-width:
    430px;

  margin:
    0;

  color:
    #8d9690;

  font-size:
    13px;

  line-height:
    1.6;
}


/* =========================================================
   SIZE SELECTOR
========================================================= */

.size-section {
  margin-top:
    4px;
}

.size-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    8px;
}

.size-heading span {
  color:
    #a0aaa3;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    2.5px;
}

.size-heading small {
  color:
    #5f6862;

  font-size:
    9px;
}

.size-select {
  width:
    100%;

  height:
    50px;

  padding:
    0 15px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    12px;

  outline:
    none;

  background:
    #111512;

  color:
    white;

  font-size:
    13px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.size-select:focus {
  border-color:
    rgba(22,234,87,.75);

  box-shadow:
    0 0 0 3px rgba(22,234,87,.08);
}

.size-select option {
  background:
    #111512;

  color:
    white;
}

.size-note {
  margin:
    6px 0 0 !important;

  color:
    #5f6862 !important;

  font-size:
    10px !important;

  line-height:
    1.35 !important;
}


/* =========================================================
   MODAL PRICE
========================================================= */

#modal .detail-price {
  margin:
    20px 0 0;

  color:
    white;

  font-size:
    39px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -1.5px;
}


/* =========================================================
   MODAL BUTTONS
========================================================= */

#modal .detail-whatsapp {
  width:
    100%;

  min-height:
    56px;

  margin-top:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border:
    0;

  border-radius:
    13px;

  background:
    var(--green);

  color:
    #000;

  font-size:
    14px;

  font-weight:
    900;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#modal .detail-whatsapp:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 15px 34px rgba(22,234,87,.22);
}

#modal .detail-continue {
  width:
    100%;

  min-height:
    48px;

  margin-top:
    10px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    13px;

  background:
    transparent;

  color:
    #9aa19c;

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

#modal .detail-continue:hover {
  background:
    rgba(22,234,87,.05);

  border-color:
    rgba(22,234,87,.30);

  color:
    white;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
  min-height:
    160px;

  padding:
    45px 5vw;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  background:
    #080a09;

  color:
    white;

  border-top:
    1px solid rgba(255,255,255,.06);
}

footer > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}

footer strong {
  font-size:
    22px;

  font-weight:
    900;

  letter-spacing:
    -1px;
}

footer span {
  color:
    #727b75;

  font-size:
    11px;
}

footer a {
  padding:
    13px 17px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    12px;

  color:
    white;

  font-size:
    11px;

  font-weight:
    800;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

footer a:hover {
  background:
    var(--green);

  border-color:
    var(--green);

  color:
    #000;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .hero {
    padding-left:
      5vw;

    padding-right:
      5vw;
  }

  .hero h1 {
    font-size:
      clamp(58px, 8vw, 95px);
  }

  .product-grid {
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }

  .card-image {
    height:
      290px;
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

  html {
    scroll-padding-top:
      76px;
  }

  .navbar {
    min-height:
      74px;

    padding:
      0 20px;
  }

  .navbar nav {
    gap:
      0;
  }

  .navbar nav > a:not(.nav-whatsapp) {
    display:
      none;
  }

  .nav-whatsapp {
    padding:
      11px 14px;

    border-radius:
      12px;

    font-size:
      10px;
  }

  .hero {
    min-height:
      auto;

    display:
      block;

    padding:
      70px 24px 55px;
  }

  .hero-content {
    max-width:
      none;
  }

  .hero h1 {
    font-size:
      clamp(55px, 11vw, 80px);

    line-height:
      .88;

    letter-spacing:
      -5px;
  }

  .hero-description {
    max-width:
      560px;

    margin-top:
      27px;

    font-size:
      14px;
  }

  .hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      15px;
  }

  .hero-primary {
    width:
      100%;

    min-width:
      0;
  }

  .hero-link {
    align-self:
      flex-start;
  }

  .hero-stats {
    gap:
      24px;

    margin-top:
      44px;
  }

  .hero-visual {
    min-height:
      350px;

    margin-top:
      25px;
  }

  .circle-one {
    width:
      350px;

    height:
      350px;
  }

  .circle-two {
    width:
      270px;

    height:
      270px;
  }

  .circle-three {
    width:
      200px;

    height:
      200px;
  }

  .hero-shirt {
    width:
      72%;
  }

  .collections,
  .catalog {
    padding:
      75px 22px 90px;
  }

  .section-top,
  .catalog-heading {
    display:
      block;
  }

  .section-top h2,
  .catalog-heading h2 {
    font-size:
      54px;

    line-height:
      .90;

    letter-spacing:
      -4px;
  }

  .collection-counter,
  .catalog-count {
    margin-top:
      23px;
  }

  .collection-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap:
      13px;
  }

  .collection-wide {
    grid-column:
      1 / -1;
  }

  .search-panel {
    grid-template-columns:
      1fr;
  }

  .product-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap:
      12px;
  }


  /* modal tablet */

  #modal.modal-wrapper {
    padding:
      10px;
  }

  #modal .modal {
    width:
      100%;

    max-width:
      760px;

    height:
      95vh;

    max-height:
      95vh;

    border-radius:
      21px;
  }

  #modal .detail-product {
    grid-template-columns:
      1fr;
  }

  #modal .detail-gallery {
    padding:
      12px;
  }

  #modal .detail-info {
    min-height:
      auto;

    padding:
      30px 24px 28px;

    border-left:
      0;

    border-top:
      1px solid rgba(255,255,255,.07);
  }

  #modal .detail-info h2 {
    font-size:
      34px;
  }

}


/* =========================================================
   REAL MOBILE
========================================================= */

@media (max-width: 600px) {

  body {
    min-width:
      0;
  }

  .navbar {
    min-height:
      72px;

    padding:
      0 14px;

    gap:
      10px;
  }

  .brand {
    gap:
      10px;

    min-width:
      0;
  }

  .brand-logo {
    width:
      46px;

    height:
      46px;

    flex:
      0 0 46px;

    border-radius:
      14px;
  }

  .brand-info {
    min-width:
      0;
  }

  .brand-kicker {
    font-size:
      7px;

    letter-spacing:
      2.2px;
  }

  .brand-info strong {
    font-size:
      17px;

    letter-spacing:
      -.7px;
  }

  .brand-info > span:last-child {
    display:
      none;
  }

  .nav-whatsapp {
    padding:
      11px 12px;

    border-radius:
      12px;

    font-size:
      9px;
  }


  /* hero */

  .hero {
    padding:
      60px 20px 50px;

    background:
      radial-gradient(
        circle at 65% 44%,
        rgba(22,234,87,.16),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        #050605,
        #090d0a
      );
  }

  .hero-grid {
    opacity:
      .17;

    background-size:
      44px 44px;
  }

  .hero-glow {
    width:
      420px;

    height:
      420px;

    right:
      -210px;

    top:
      45%;
  }

  .eyebrow {
    margin-bottom:
      22px;

    font-size:
      9px;

    letter-spacing:
      3.2px;
  }

  .eyebrow span {
    width:
      28px;
  }

  .hero h1 {
    font-size:
      clamp(50px, 14vw, 68px);

    line-height:
      .88;

    letter-spacing:
      -4px;
  }

  .hero-description {
    margin-top:
      25px;

    max-width:
      360px;

    font-size:
      13px;

    line-height:
      1.65;
  }

  .hero-actions {
    margin-top:
      27px;

    gap:
      14px;
  }

  .hero-primary {
    min-height:
      56px;

    padding:
      12px 15px 12px 18px;

    border-radius:
      14px;

    font-size:
      13px;
  }

  .hero-link {
    font-size:
      11px;
  }

  .hero-stats {
    display:
      grid;

    grid-template-columns:
      repeat(3, 1fr);

    gap:
      10px;

    margin-top:
      40px;
  }

  .hero-stats div {
    padding-top:
      11px;

    border-top:
      1px solid rgba(255,255,255,.09);
  }

  .hero-stats strong {
    font-size:
      16px;
  }

  .hero-stats span {
    font-size:
      6.5px;

    letter-spacing:
      1.2px;
  }

  .hero-visual {
    min-height:
      290px;

    margin-top:
      25px;
  }

  .circle-one {
    width:
      290px;

    height:
      290px;
  }

  .circle-two {
    width:
      225px;

    height:
      225px;
  }

  .circle-three {
    width:
      170px;

    height:
      170px;
  }

  .hero-shirt {
    width:
      72%;
  }

  .hero-label-top,
  .hero-label-bottom {
    width:
      76%;

    font-size:
      6.5px;

    letter-spacing:
      2px;
  }

  .hero-label-top {
    top:
      23px;
  }

  .hero-label-bottom {
    bottom:
      23px;
  }


  /* collections */

  .collections {
    padding:
      70px 17px 80px;
  }

  .section-kicker {
    margin-bottom:
      12px;

    font-size:
      8px;

    letter-spacing:
      3px;
  }

  .section-top {
    margin-bottom:
      32px;
  }

  .section-top h2,
  .catalog-heading h2 {
    font-size:
      50px;

    line-height:
      .90;

    letter-spacing:
      -4px;
  }

  .section-top p,
  .catalog-heading p {
    margin-top:
      12px;

    font-size:
      13px;

    line-height:
      1.55;
  }

  .collection-counter {
    margin-top:
      20px;
  }

  .collection-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .collection-card,
  .collection-wide {
    grid-column:
      auto;

    height:
      310px;

    border-radius:
      19px;
  }

  .collection-wide {
    height:
      260px;
  }

  .collection-shirt {
    width:
      50%;

    height:
      63%;

    opacity:
      .17;

    filter:
      blur(2px)
      saturate(.72)
      contrast(.92)
      brightness(.70);
  }

  .collection-card:hover .collection-shirt {
    opacity:
      .22;
  }

  .collection-wide .collection-shirt {
    width:
      37%;

    height:
      75%;

    opacity:
      .17;
  }

  .collection-number {
    top:
      22px;

    left:
      23px;

    font-size:
      10px;

    letter-spacing:
      3px;
  }

  .collection-country {
    left:
      23px;

    bottom:
      58px;

    font-size:
      7.5px;

    letter-spacing:
      2.2px;
  }

  .collection-name {
    left:
      23px;

    bottom:
      22px;

    font-size:
      28px;

    letter-spacing:
      -1.4px;
  }

  .collection-wide .collection-country {
    bottom:
      66px;
  }

  .collection-wide .collection-name {
    bottom:
      24px;

    font-size:
      34px;
  }

  .collection-arrow {
    top:
      18px;

    right:
      18px;

    width:
      47px;

    height:
      47px;

    font-size:
      16px;
  }


  /* catalog */

  .catalog {
    padding:
      72px 17px 80px;
  }

  .catalog-heading {
    margin-bottom:
      28px;
  }

  .catalog-count {
    margin-top:
      15px;

    font-size:
      11px;
  }

  .catalog::before {
    width:
      240px;

    height:
      240px;

    right:
      -170px;

    top:
      130px;

    border-width:
      42px;
  }


  /* search */

  .search-panel {
    gap:
      10px;

    margin-bottom:
      21px;
  }

  .search-main {
    min-height:
      90px;

    padding:
      13px;

    border-radius:
      18px;
  }

  .search-icon {
    width:
      45px;

    height:
      45px;

    flex:
      0 0 45px;

    margin-right:
      12px;

    border-radius:
      13px;

    font-size:
      22px;
  }

  .search-content label {
    font-size:
      7px;

    letter-spacing:
      2.3px;
  }

  .search-content input {
    font-size:
      13px;
  }

  .search-shortcut {
    width:
      29px;

    height:
      29px;
  }

  .filter-field {
    min-height:
      80px;

    padding:
      14px 17px;

    border-radius:
      18px;
  }

  .filter-field > span {
    font-size:
      7px;

    letter-spacing:
      2.3px;
  }

  .filter-field select {
    font-size:
      12px;
  }


  /* meta */

  .catalog-meta {
    gap:
      9px;

    margin-bottom:
      17px;

    font-size:
      7.5px;

    letter-spacing:
      1.3px;
  }

  .catalog-line {
    width:
      35px;
  }


  /* product grid */

  .product-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap:
      10px;
  }


  /* card */

  .card {
    border-radius:
      17px;
  }

  .card-image {
    height:
      220px;
  }

  .card-image::after {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.01),
        rgba(0,0,0,.25)
      );
  }

  .card-gallery-arrow {
    opacity:
      1;

    width:
      34px;

    height:
      34px;

    font-size:
      12px;
  }

  .card-gallery-prev {
    left:
      7px;
  }

  .card-gallery-next {
    right:
      7px;
  }

  .card-gallery-counter {
    right:
      7px;

    bottom:
      7px;

    padding:
      5px 7px;

    font-size:
      7px;
  }

  .card-gallery-label {
    top:
      7px;

    left:
      7px;

    width:
      29px;

    height:
      29px;

    border-radius:
      8px;

    font-size:
      8px;
  }

  .card .body {
    padding:
      14px 12px 13px;
  }

  .card .body::before {
    left:
      12px;

    width:
      25px;
  }

  .card .body > small {
    padding-top:
      2px;

    font-size:
      7px;

    letter-spacing:
      1.6px;
  }

  .card h3 {
    min-height:
      58px;

    margin-top:
      9px;

    font-size:
      10.5px;

    line-height:
      1.34;
  }

  .card .price {
    margin-top:
      14px;

    font-size:
      20px;

    letter-spacing:
      -.8px;
  }

  .card .actions {
    grid-template-columns:
      .90fr 1.10fr;

    gap:
      5px;

    margin-top:
      10px;
  }

  .card .actions button {
    min-height:
      42px;

    padding:
      0 7px;

    border-radius:
      10px;

    font-size:
      8px;
  }

  .card::after {
    right:
      -8px;

    bottom:
      60px;

    font-size:
      48px;
  }


  /* pagination */

  .pagination {
    flex-wrap:
      wrap;

    gap:
      5px;

    margin-top:
      38px;

    padding-top:
      23px;
  }

  .page-button {
    min-width:
      38px;

    height:
      38px;

    padding:
      0 8px;

    border-radius:
      10px;

    font-size:
      9px;
  }


  /* =======================================================
     MOBILE MODAL
  ======================================================= */

  #modal.modal-wrapper {
    padding:
      8px;

    align-items:
      center;

    justify-content:
      center;

    overflow:
      hidden;

    touch-action:
      none;
  }

  #modal .modal {
    width:
      100%;

    max-width:
      520px;

    height:
      calc(100dvh - 16px);

    max-height:
      calc(100dvh - 16px);

    margin:
      0;

    overflow-x:
      hidden;

    overflow-y:
      auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;

    border-radius:
      20px;

    touch-action:
      pan-y;
  }

  #modal .modal-backdrop {
    touch-action:
      none;
  }


  /* X siempre visible */

  #modal .modal-close {
    position:
      fixed;

    top:
      17px;

    right:
      17px;

    width:
      43px;

    height:
      43px;

    z-index:
      100001;

    background:
      rgba(4,6,5,.95);

    border-color:
      rgba(255,255,255,.20);

    font-size:
      23px;

    box-shadow:
      0 9px 25px rgba(0,0,0,.42);
  }


  /* product */

  #modal .detail-product {
    display:
      flex;

    flex-direction:
      column;

    width:
      100%;

    min-width:
      0;

    overflow:
      visible;
  }


  /* gallery */

  #modal .detail-gallery {
    width:
      100%;

    padding:
      10px;

    background:
      radial-gradient(
        circle at 50% 40%,
        rgba(22,234,87,.08),
        transparent 47%
      ),
      #050706;
  }

  #modal .detail-main-wrap {
    width:
      100%;

    height:
      245px;

    min-height:
      245px;

    max-height:
      245px;

    border-radius:
      15px;
  }

  #modal .detail-main-image {
    width:
      100%;

    height:
      245px;

    max-width:
      100%;

    max-height:
      245px;

    object-fit:
      contain;
  }


  /* modal arrows */

  #modal .modal-gallery-arrow {
    width:
      39px;

    height:
      39px;

    font-size:
      13px;
  }

  #modal .modal-gallery-prev {
    left:
      8px;
  }

  #modal .modal-gallery-next {
    right:
      8px;
  }

  #modal .modal-image-counter {
    right:
      8px;

    bottom:
      8px;

    padding:
      5px 8px;

    font-size:
      7px;
  }


  /* thumbnails */

  #modal .detail-thumbnails {
    gap:
      6px;

    margin-top:
      7px;

    overflow-x:
      auto;
  }

  #modal .detail-thumbnails img {
    width:
      46px;

    height:
      46px;

    min-width:
      46px;

    flex:
      0 0 46px;

    border-radius:
      8px;
  }


  /* info */

  #modal .detail-info {
    width:
      100%;

    min-width:
      0;

    min-height:
      auto;

    padding:
      22px 17px 26px;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      flex-start;

    border:
      0;

    border-top:
      1px solid rgba(255,255,255,.07);

    background:
      linear-gradient(
        145deg,
        #101411,
        #080b09
      );
  }

  #modal .detail-kicker {
    margin-bottom:
      7px;

    font-size:
      8px;

    letter-spacing:
      2.4px;
  }

  #modal .detail-info > small {
    font-size:
      8px;

    letter-spacing:
      2px;
  }

  #modal .detail-info h2 {
    width:
      100%;

    max-width:
      100%;

    margin:
      9px 0 0;

    font-size:
      24px;

    line-height:
      1.04;

    letter-spacing:
      -1.2px;

    overflow-wrap:
      anywhere;
  }

  #modal .detail-line {
    width:
      42px;

    height:
      3px;

    margin:
      15px 0 16px;
  }


  /* size */

  .size-section {
    margin-top:
      0;
  }

  .size-heading {
    margin-bottom:
      6px;
  }

  .size-heading span {
    font-size:
      8px;

    letter-spacing:
      2px;
  }

  .size-heading small {
    font-size:
      8px;
  }

  .size-select {
    height:
      48px;

    min-height:
      48px;

    padding:
      0 13px;

    border-radius:
      11px;

    font-size:
      13px;
  }

  .size-note {
    margin-top:
      5px !important;

    font-size:
      9px !important;

    line-height:
      1.35 !important;
  }


  /* price */

  #modal .detail-price {
    margin:
      17px 0 0;

    font-size:
      30px;

    letter-spacing:
      -1px;
  }

  #modal .detail-info > p {
    margin-top:
      7px;

    font-size:
      10px;

    line-height:
      1.45;
  }


  /* buttons */

  #modal .detail-whatsapp {
    min-height:
      52px;

    margin-top:
      17px;

    border-radius:
      12px;

    font-size:
      12px;
  }

  #modal .detail-continue {
    min-height:
      44px;

    margin-top:
      7px;

    border-radius:
      11px;

    font-size:
      10px;
  }


  /* footer */

  footer {
    min-height:
      170px;

    padding:
      35px 20px;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      20px;
  }

  footer strong {
    font-size:
      21px;
  }

  footer a {
    font-size:
      10px;

    padding:
      12px 15px;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

  .hero h1 {
    font-size:
      48px;

    letter-spacing:
      -3.4px;
  }

  .hero-stats {
    gap:
      7px;
  }

  .hero-stats strong {
    font-size:
      14px;
  }

  .hero-visual {
    min-height:
      260px;
  }

  .collection-card,
  .collection-wide {
    height:
      285px;
  }

  .collection-wide {
    height:
      245px;
  }

  .card-image {
    height:
      205px;
  }

  .card h3 {
    min-height:
      60px;

    font-size:
      10px;
  }

  .card .price {
    font-size:
      18px;
  }

  .card .actions button {
    min-height:
      40px;

    padding:
      0 5px;

    font-size:
      7.5px;
  }


  /* modal pequeño */

  #modal .detail-main-wrap,
  #modal .detail-main-image {
    height:
      215px;

    min-height:
      215px;

    max-height:
      215px;
  }

  #modal .detail-info {
    padding:
      20px 15px 22px;
  }

  #modal .detail-info h2 {
    font-size:
      22px;
  }

  #modal .detail-price {
    font-size:
      28px;
  }

  #modal .detail-thumbnails img {
    width:
      43px;

    height:
      43px;

    min-width:
      43px;
  }

}