/* =========================================================
   AFTERTOUGE — Smallest screens overrides (≤ 480px)
   File: /styles/responsive-480.css
   ========================================================= */

/* ---------- Global tweaks ---------- */
:root{
  --topbar-h: 32px;       /* shorter announcement bar */
  --container: 100%;      /* full width sections on phones */
}
.container{ padding: 16px; }

/* ---------- Topbar ---------- */
.topbar__inner{
  height: var(--topbar-h);
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

/* ---------- Header / Nav ---------- */
.nav > .container{
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}
.nav__row{
  display: grid !important;
  grid-template-columns: 1fr auto;  /* brand | icons */
  align-items: center;
  gap: 12px;
}
.nav{
  backdrop-filter: none;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid #eee;
}
.chrome{ will-change: transform; }
.nav__left{ justify-self: start; padding-left: 0; }
.brand{ gap: 8px; }
.brand__text{ font-size: 18px; font-weight: 800; }
.brand__mark{ height: 24px; width: auto; } /* if a logo image exists */
.nav__center{ display: none !important; }   /* hide middle links on tiny screens */
.nav__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__icon{ width: 36px; height: 36px; }
.nav__icon svg{ width: 22px; height: 22px; }
@supports (text-wrap: balance){
  .brand__text{ text-wrap: balance; }
}

/* ---------- Account modal (compact) ---------- */
.account-modal__dialog{ width: 92vw; border-radius: 14px; }
.account-modal__head{ padding: 14px 14px 0; }
.account-modal__title{ font-size: 16px; }
.account-tabs{ padding: 10px 14px 0; }
.account-modal__body{ padding: 14px; }
.input{ height: 42px; border-radius: 10px; }
.btn{ height: 42px; border-radius: 10px; }

/* =========================================================
   HERO — Smallest screens (≤ 480px)
   ========================================================= */
.hero{
  min-height: 47vh;                                    /* tighter */
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.6)),
    
    #000 !important;
  background-position: center 26%;
}
.hero__content{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.hero h1{
  font-size: clamp(26px, 9vw, 36px);
  line-height: 1.08;
  letter-spacing: .2px;
  margin: 4px 0 6px !important;
}
.hero__sub{
  max-width: 92vw;
  margin: 4px auto 10px !important;
  font-size: 14.5px;
  line-height: 1.5;
  color: #f3f4f6;
}
.hero__cta{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 2px;
  margin-top: 4px;
}
.hero__cta .btn{ width: 100%; height: 42px; border-radius: 12px; font-size: 14px; }
.hero__cta .btn--primary{ display: none !important; }  /* hide Shop Latest on phones */

/* Search: full-width input, hide icon button */
.hero-search{ width: 100%; display: block; }
.hero-search input[type="search"]{
  width: 100%;
  height: 42px;
  border-radius: 12px;
}
.hero-search__btn{ display: none !important; }

/* Badges smaller */
.hero__badges{
  margin-top: 8px !important;
  gap: 8px;
  padding: 0 4px;
}
.hero__badges .chip{
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 999px;
}

/* Hide scroll chevron + polygon grid on phones */
.hero__scroll{ display: none !important; }
.hero__grid{ display: none !important; }

/* Reduce gap before the next section */
#drops{ padding-top: 8px !important; }

/* =========================================================
   LATEST DROPS GRID
   ========================================================= */
#drops .grid{
  --cols: 2 !important;   /* two items per row on phones */
  gap: 12px;
}

/* =========================================================
   PRODUCT CARD — Quick Add (+) on phones
   ========================================================= */

/* Remove any old pseudo "Add to cart" pill */
.product__image::after{
  display: none !important;
  content: none !important;
}

/* Make the overlay button always visible on phones (override desktop hover anims) */
.add-to-cart{
  transform: none !important;
  opacity: 1 !important;
}

/* Mobile quick-add: white circle with centered black plus */
.add-to-cart{
  position: absolute;      /* relies on desktop positioning: right/bottom already set */
  right: 12px;
  bottom: 12px;

  width: 32px;
  height: 32px;
  border-radius: 999px;              /* perfect circle */
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff !important;
  color: #111 !important;            /* SVG uses currentColor → black + */
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);

  /* hide any text nodes */
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Hide label text on phones; show only the icon */
.add-to-cart .add-label{ display: none !important; }
.add-to-cart .add-plus{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
}
.add-to-cart .add-plus svg{
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor !important;
}

/* Tactile press feedback */
.add-to-cart:active{ transform: scale(.97) !important; }




@media (max-width: 480px){
  /* Category product grid: 2 per row on small phones */
  #category-grid{
    --cols: 2 !important;
    gap: 12px;
  }
}




/* Phones (≤480px): animated sticky filter */
@media (max-width: 480px){
  /* be sure no ancestor blocks sticky */
  #category-view, #category-view .cat-layout{ overflow: visible; }

  /* the filter panel */
  #category-view .cat-aside{
    position: sticky !important;
    top: var(--chrome-h, 0px);      /* sits under your fixed header */
    margin-top: 0 !important;       /* remove any early offset */
    z-index: 3;

    background: #fff;
    border-radius: 12px;

    /* animation */
    transform: translateY(10px);    /* start slightly lower */
    transition: transform .24s cubic-bezier(.22,.61,.36,1),
                box-shadow .24s ease;
    will-change: transform;
  }

  /* when stuck at the top */
  #category-view .cat-aside.is-stuck{
    transform: translateY(0);
    box-shadow: 0 12px 28px rgba(2,6,23,.10);
  }

  /* keep the small header inside visible if panel is tall */
  #category-view .cat-aside__head{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 4;
  }
}







/* Phones (≤480px): animated full-bleed sticky filter */
@media (max-width: 480px){

  /* baseline (inside container) */
  #category-view .cat-aside{
    position: sticky;
    top: 0;                 /* sits at the very top */
    z-index: 6;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-left: 0;
    margin-right: 0;

    /* smooth morphing */
    transition:
      margin .28s cubic-bezier(.22,.61,.36,1),
      padding .28s cubic-bezier(.22,.61,.36,1),
      border-radius .28s cubic-bezier(.22,.61,.36,1),
      box-shadow .28s ease,
      transform .28s cubic-bezier(.22,.61,.36,1);
    will-change: margin, padding, border-radius, transform;
  }

  /* when it hits the top: go edge-to-edge + slightly shorter */
  #category-view .cat-aside.is-stuck{
    /* full-bleed trick without causing horizontal scroll */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    border-radius: 0;
    padding: 8px 12px;                 /* smaller vertically */
    box-shadow: 0 10px 24px rgba(2,6,23,.12);
    transform: translateZ(0) scaleY(.97); /* subtle compression feel */
  }

  /* keep the small head visible if the panel is tall */
  #category-view .cat-aside__head{
    position: sticky;
    top: 0;                            /* inside the panel */
    background: #fff;
    z-index: 7;
    padding: 10px 12px;
    transition: padding .28s cubic-bezier(.22,.61,.36,1);
  }
  #category-view .cat-aside.is-stuck .cat-aside__head{
    padding: 8px 12px;                 /* tighter while stuck */
  }

  /* if your list can grow, keep it scrollable while stuck */
  #category-view .cat-aside__panel{
    max-height: 55vh;                  /* adjust if you want */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* respect reduced-motion users */
  @media (prefers-reduced-motion: reduce){
    #category-view .cat-aside,
    #category-view .cat-aside__head{
      transition: none;
      transform: none;
    }
  }
}



