/* ==========================================================================
   E-COMMERCE LANDING PAGE
   --------------------------------------------------------------------------
   The sections below appear in the same order as they do in index.html,
   so you can scroll through both files side by side.

   CONTENTS
     1.  Theme tokens — Light Mode      ← every colour is named here
     1b. Theme tokens — Dark Mode       ← the same names, different values
     1c. Switching between themes
     2.  Reset & base
     3.  Reusable pieces (container, buttons, headings, stars, tags)
     4.  Announcement bar
     5.  Navbar (including the Light/Dark toggle)
     6.  Hero
     7.  Why choose us
     8.  Categories
     9.  Products
     10. Promo banner
     11. About
     12. Reviews slider
     13. Newsletter
     14. Footer
     15. Cart drawer
     16. Toast, back-to-top, scroll reveal
     17. Responsive (mobile & tablet)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES  (theme tokens)
   --------------------------------------------------------------------------
   Every colour on the site comes from a name in this section. Light Mode is
   defined on :root below; Dark Mode re-declares the SAME names further down
   under [data-theme="dark"].

   Because nothing in the stylesheet uses a raw colour, switching theme is
   just a matter of swapping which set of values is in force — no rule has to
   be written twice.

   The names describe a JOB, not a colour. "--surface" is whatever a card sits
   on, which is white in Light Mode and dark grey in Dark Mode.
   ========================================================================== */
:root {

  /* ---- Brand. Deliberately close in both themes, so the shop still looks
          like the same shop whichever mode you are in. ------------------- */
  --accent:       #cc4929;   /* filled buttons, the logo square           */
  --accent-dark:  #b13d21;   /* hover on a filled button                  */
  --accent-text:  #c04424;   /* the brand colour used AS TEXT             */
  --accent-soft:  #fdf1ec;   /* faint tint behind icons and the -% pill   */

  /* ---- Text ---- */
  --ink:          #16171c;   /* main text                                 */
  --ink-soft:     #5b6070;   /* secondary text                            */

  /* ---- Surfaces ---- */
  --bg:           #ffffff;   /* page background                           */
  --bg-soft:      #faf8f5;   /* the alternating warm section              */
  --surface:      #ffffff;   /* cards, the cart drawer, inputs            */
  --surface-2:    #f2efe9;   /* hover on a round icon button              */
  --header-bg:    rgba(255, 255, 255, .88);   /* frosted sticky navbar    */
  --line:         #e7e3dc;   /* borders                                   */

  /* ---- The solid high-contrast button (Add to Cart, active filter tab).
          In Light Mode it is near-black on white; in Dark Mode it flips to
          near-white on dark, which keeps the same visual punch. --------- */
  --solid:        #16171c;
  --solid-text:   #ffffff;

  /* ---- The dark bands: announcement strip, sale banner, footer.
          These are already dark in Light Mode. In Dark Mode they go a shade
          deeper than the page so they still read as separate blocks. ---- */
  --band:         #16171c;
  --band-text:    #ffffff;
  --band-soft:    rgba(255, 255, 255, .68);
  --band-line:    rgba(255, 255, 255, .10);
  --band-surface: rgba(255, 255, 255, .07);

  /* ---- Odds and ends ---- */
  --star:         #f0a92c;
  --star-empty:   #dcd8d1;
  --ok:           #2f7d54;
  --error:        #d13b3b;
  --overlay:      rgba(15, 15, 18, .45);   /* behind the cart drawer      */
  --shadow:       0 2px 6px rgba(22, 23, 28, .05);
  --shadow-md:    0 14px 34px rgba(22, 23, 28, .10);
  --img-fallback: linear-gradient(135deg, #efece6, #e2ddd4);
  --surface-veil: rgba(255, 255, 255, .92); /* the wishlist heart, over a photo */
  --skeleton:     linear-gradient(100deg, #efece6 30%, #f8f6f2 50%, #efece6 70%);
  --img-filter:   none;      /* photos are shown exactly as they are         */

  /* ---- Fonts, shapes, layout. Identical in both themes. ---- */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius:    14px;
  --radius-lg: 22px;
  --maxw:      1200px;
}


/* ==========================================================================
   1b. DARK MODE
   --------------------------------------------------------------------------
   Only the colours are re-declared. Spacing, fonts and layout are untouched,
   so the two themes are the same design wearing different clothes.

   Notes on the choices:
     - The page is a soft blue-black (#0f1115) rather than pure black, which
       is easier on the eye and stops photos looking like cut-outs.
     - Cards sit LIGHTER than the page (#191d23). Lifting a surface towards
       the light is how depth reads in the dark; drop shadows barely show.
     - Filled buttons keep exactly the same orange, because white on #cc4929
       clears the 4.5:1 contrast minimum in either theme. That is the single
       biggest reason the two themes still feel like one brand.
     - The orange used as TEXT is lifted to #ff8a6b. The button orange only
       reaches about 4:1 against a dark page, which is too low to read
       comfortably at small sizes.
     - Hover keeps the darker orange rather than going lighter. Lightening it
       on a dark page looks tempting but drops white text below 4.5:1, so the
       feedback comes from a soft glow instead — see .btn--primary:hover below.
   ========================================================================== */
[data-theme="dark"] {

  --accent:       #cc4929;
  --accent-dark:  #b13d21;
  --accent-text:  #ff8a6b;
  --accent-soft:  #2c1a15;

  --ink:          #e9ecf1;
  --ink-soft:     #98a1b0;

  --bg:           #0f1115;
  --bg-soft:      #14171c;
  --surface:      #191d23;
  --surface-2:    #232830;
  --header-bg:    rgba(15, 17, 21, .86);
  --line:         #282e37;

  --solid:        #e9ecf1;
  --solid-text:   #14171c;

  --band:         #0a0c0f;
  --band-text:    #e9ecf1;
  --band-soft:    #98a1b0;
  --band-line:    rgba(255, 255, 255, .08);
  --band-surface: rgba(255, 255, 255, .05);

  --star:         #f5b544;
  --star-empty:   #3a4049;
  --ok:           #4cae7a;
  --error:        #f0645f;
  --overlay:      rgba(0, 0, 0, .62);
  --shadow:       0 2px 6px rgba(0, 0, 0, .35);
  --shadow-md:    0 16px 40px rgba(0, 0, 0, .5);
  --img-fallback: linear-gradient(135deg, #23272f, #1a1e24);
  --surface-veil: rgba(20, 23, 28, .86);
  --skeleton:     linear-gradient(100deg, #1a1e24 30%, #242932 50%, #1a1e24 70%);

  /* Many product shots are photographed on pure white. Left alone they glare
     against a dark card, so the brightness is eased off by a few percent —
     far too little to look dulled, enough to stop the block of white
     punching a hole in the page. Set this to "none" to turn it off. */
  --img-filter:   brightness(.94) saturate(1.03);
}


/* ---- A couple of touches that only make sense in the dark ---------------- */

/* The faint quote mark needs a little more presence on a dark card */
[data-theme="dark"] .review::before { opacity: .22; }

/* Photos sit inside cards, so they get the easing described above */
[data-theme="dark"] .product__media img,
[data-theme="dark"] .cat-card img,
[data-theme="dark"] .review__person img {
  filter: var(--img-filter);
}

/* A hairline lift on the cart drawer, since a black shadow cannot be seen
   against a dark page */
[data-theme="dark"] .cart { border-left: 1px solid var(--line); }

/* Hover feedback for filled buttons. In Light Mode the orange simply darkens;
   on a dark page that reads as "nothing happened", so a soft ring is added
   instead of lightening the fill, which would hurt the text contrast. */
[data-theme="dark"] .btn--primary:hover {
  box-shadow: 0 0 0 3px rgba(204, 73, 41, .3);
}


/* ==========================================================================
   1c. SWITCHING BETWEEN THEMES
   main.js puts .theme-switching on <html> for a third of a second while the
   change happens, so the colours cross-fade instead of snapping. It is taken
   off again straight after, which keeps hover effects instant the rest of
   the time.
   ========================================================================== */
.theme-switching,
.theme-switching *:not(svg):not(path) {
  transition: background-color .32s ease,
              border-color .32s ease,
              color .32s ease,
              fill .32s ease !important;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stops the sticky navbar from covering a section you jump to */
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Images never overflow their container */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* A clear focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Shown if an image fails to load, instead of a broken-image icon */
.img-failed {
  background: var(--img-fallback);
}


/* ==========================================================================
   3. REUSABLE PIECES
   ========================================================================== */

/* Centres content and adds side padding. Used by nearly every section. */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Section wrapper & headings ---- */
.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }

/* Two plain sections in a row share one gap rather than stacking two,
   which otherwise leaves a stripe of empty white between them. */
.section:not(.section--soft) + .section:not(.section--soft) { padding-top: 0; }

.section__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 52px;
}

.section__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.section__sub { color: var(--ink-soft); }

/* Small uppercase label above a heading */
.eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}

.eyebrow--light { color: var(--band-soft); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-dark); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--light {
  background: var(--solid);
  color: var(--solid-text);
}
.btn--light:hover { opacity: .88; }

/* Add-to-cart button inside a product card */
.btn--cart {
  padding: 10px 18px;
  font-size: .85rem;
  background: var(--solid);
  color: var(--solid-text);
}
.btn--cart:hover { background: var(--accent); color: #fff; }

/* Green "Added" state, switched on briefly by script.js */
.btn--cart.is-added {
  background: var(--ok);
  color: #fff;
}

.btn--block { width: 100%; }

/* Bigger call-to-action, used in the hero and the sale banner */
.btn--lg {
  padding: 16px 32px;
  font-size: 1rem;
}

/* Arrow that nudges to the right when you hover the button */
.btn__arrow {
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}

.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---- Star ratings ---- */
.stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.stars svg {
  width: 15px;
  height: 15px;
  fill: var(--star);
  flex-shrink: 0;
}

.stars svg.is-empty { fill: var(--star-empty); }

.stars--sm svg { width: 14px; height: 14px; }

.stars__count {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-left: 6px;
}

/* ---- "Sale" / "New" tags on product images ---- */
.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.tag--sale       { background: var(--accent); }
.tag--new        { background: var(--solid); color: var(--solid-text); }
.tag--bestseller { background: #a8761b; }


/* ==========================================================================
   4. ANNOUNCEMENT BAR
   ========================================================================== */
.announcement {
  background: var(--band);
  color: var(--band-text);
  text-align: center;
  padding: 9px 16px;
  font-size: .8rem;
  letter-spacing: .02em;
}


/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* script.js adds this class once you scroll down a little */
.header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

/* ---- Logo ---- */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* The logo image, sitting to the left of the site name.

   It replaces the old orange letter square. 42px rather than that square's
   36px because this mark carries real detail — a bag, a trolley and a plug —
   and below about 40px the plug prongs turn to mush. If you would rather it
   sat smaller, this is the only number to change.

   The artwork is cream and red on a transparent background, which reads
   properly on the white navbar and the dark one alike, so no second file and
   no colour filter are needed. */
.logo__img {
  width: 42px;
  height: auto;          /* the file is 1295x1214, so very slightly wider than tall */
  flex-shrink: 0;
}

.logo__text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.logo--light .logo__text { color: var(--band-text); }

/* ---- Nav links ---- */
.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  padding: 6px 0;
  color: var(--ink-soft);
  transition: color .18s ease;
}

.nav__link:hover { color: var(--ink); }

/* Underline that grows on hover, and stays for the active section */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width .22s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__link.is-active { color: var(--ink); font-weight: 600; }

/* ---- Icon buttons on the right ---- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: background .18s ease;
}

.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 21px; height: 21px; }

/* ---- Light / Dark toggle ----
   Both icons live in the same button, stacked on top of each other. Only one
   is visible at a time; the other is faded out and rotated a quarter turn, so
   swapping theme spins one out as the other spins in.

   The icon shows what you will GET if you press it: a moon while you are in
   Light Mode, a sun while you are in Dark Mode. */
.theme-btn__sun,
.theme-btn__moon {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: opacity .3s ease, transform .45s cubic-bezier(.3, .7, .3, 1);
}

.theme-btn__sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-btn__moon { opacity: 1; transform: rotate(0deg) scale(1); }

[data-theme="dark"] .theme-btn__sun  { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="dark"] .theme-btn__moon { opacity: 0; transform: rotate(90deg) scale(.4); }

/* Number bubble on the cart icon */
.cart-badge {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  transform: scale(0);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

/* Only show the badge once something is in the cart */
.cart-badge.is-visible { transform: scale(1); }

/* ---- Hamburger button (hidden on desktop) ---- */
.menu-btn { display: none; }

/* The middle bar is the span itself; the other two are its ::before/::after */
.menu-btn__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: background .2s ease;
}

.menu-btn__bars::before,
.menu-btn__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: top .25s ease, transform .25s ease;
}

.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after  { top: 6px; }

/* Turns the hamburger into an X while the menu is open */
.menu-btn.is-open .menu-btn__bars { background: transparent; }
.menu-btn.is-open .menu-btn__bars::before { top: 0; transform: rotate(45deg); }
.menu-btn.is-open .menu-btn__bars::after  { top: 0; transform: rotate(-45deg); }


/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  background: var(--bg-soft);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding-top: 72px;
  padding-bottom: 72px;
}

/* ---- Small promotional badge above the headline ---- */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px 8px 13px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, transform .2s ease;
}

.hero__pill:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.hero__pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(207, 75, 44, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(207, 75, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(207, 75, 44, 0); }
}

/* ---- Entrance animation ----
   The hero is on screen immediately, so it animates on load rather than
   waiting for a scroll. "backwards" keeps each piece hidden until its turn. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__content > *,
.hero__media {
  animation: heroIn .7s cubic-bezier(.2, .7, .3, 1) backwards;
}

.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .13s; }
.hero__content > *:nth-child(3) { animation-delay: .21s; }
.hero__content > *:nth-child(4) { animation-delay: .29s; }
.hero__content > *:nth-child(5) { animation-delay: .37s; }
.hero__media                    { animation-delay: .18s; }

.hero__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.hero__title em {
  font-style: italic;
  color: var(--accent-text);
}

.hero__text {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 34px;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 38px;
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ---- Hero image ---- */
.hero__media { position: relative; }

.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 9 / 11;
  object-fit: cover;
}

/* Floating white card over the bottom-left of the image */
.hero__badge {
  position: absolute;
  left: -22px;
  bottom: 36px;
  background: var(--surface);
  padding: 18px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.hero__badge-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent-text);
  line-height: 1.1;
}

.hero__badge-label {
  font-size: .78rem;
  color: var(--ink-soft);
}


/* ==========================================================================
   7. WHY CHOOSE US
   Four benefit cards. The icon sits in a soft tinted square that fills in
   with the brand colour on hover.
   ========================================================================== */
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.why__card {
  padding: 32px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.why__card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.why__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent-text);
  transition: background .3s ease, color .3s ease;
}

.why__card:hover .why__icon {
  background: var(--accent);
  color: #fff;
}

.why__icon svg { width: 24px; height: 24px; }

.why__card h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.why__card p {
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.6;
}


/* ==========================================================================
   8. CATEGORIES
   ========================================================================== */
/* Six columns of scaffolding: the top row is three cards two columns wide,
   the bottom row is two cards three columns wide. That asymmetry is what
   stops five equal boxes looking like a template. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.cat-card--wide { grid-column: span 2; }
.cat-card--tall { grid-column: span 3; }

.cat-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.cat-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .3, 1);
}

/* The two bottom cards are wider than they are tall */
.cat-card--tall img { aspect-ratio: 16 / 11; }

.cat-card:hover img { transform: scale(1.06); }

/* Round arrow that slides in from the right on hover */
.cat-card__go {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .3s ease, transform .3s ease;
}

.cat-card__go svg { width: 17px; height: 17px; }

.cat-card:hover .cat-card__go,
.cat-card:focus-visible .cat-card__go {
  opacity: 1;
  transform: translateX(0);
}

/* Dark gradient so the white text stays readable over any photo,
   including the very light ones */
.cat-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 22px 22px;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(10, 10, 12, .90) 0%,
    rgba(10, 10, 12, .62) 45%,
    rgba(10, 10, 12, 0) 100%
  );
}

.cat-card__body h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.28rem;
  margin-bottom: 2px;
}

.cat-card__body span {
  font-size: .82rem;
  opacity: .85;
}


/* ==========================================================================
   9. PRODUCTS
   ========================================================================== */

/* ---- Filter tabs ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 44px;
}

.filter {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .18s ease;
}

.filter:hover { border-color: var(--ink); color: var(--ink); }

.filter.is-active {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--solid-text);
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.product:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* Products hidden by the category filter */
.product.is-hidden { display: none; }

.product__media {
  position: relative;
  background: var(--bg-soft);
  overflow: hidden;
}

.product__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}

.product:hover .product__media img { transform: scale(1.05); }

/* ---- Wishlist heart ----
   Sits in the top-right of the photo. Always visible on a touch screen,
   because there is no hover there to reveal it with. */
.wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-veil);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, color .2s ease, background .2s ease;
}

.wish svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: fill .2s ease, transform .2s ease;
}

.product:hover .wish,
.wish:focus-visible,
.wish.is-on {
  opacity: 1;
  transform: translateY(0);
}

.wish:hover { color: var(--accent-text); }

/* Saved: the heart fills in */
.wish.is-on {
  color: var(--accent-text);
  background: var(--surface);
}

.wish.is-on svg {
  fill: var(--accent-text);
  transform: scale(1.1);
}

@media (hover: none) {
  .wish { opacity: 1; transform: translateY(0); }
}

.product__body {
  display: flex;
  flex-direction: column;
  flex: 1;               /* makes all cards the same height */
  padding: 18px 18px 20px;
}

.product__cat {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.product__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
}

/* Price above a full-width button, pushed to the bottom of the card.
   Stacking them keeps every card lined up, whether or not it has a
   sale price taking up extra room. */
.product__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.btn--cart { width: 100%; }

/* Wraps so that a narrow card can put the discount pill on its own line
   instead of pushing it out past the card edge. */
.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
}

.price__now {
  font-size: 1.1rem;
  font-weight: 700;
}

.price__was {
  font-size: .85rem;
  color: var(--ink-soft);
}

/* How much is off, e.g. "-19%". Only appears on genuinely reduced items. */
.price__off {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.empty-msg {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 0;
}

/* ---- Loading placeholders ----
   Grey blocks shown in the grid while the products are on their way from
   the database. products.js replaces them with the real cards. */
.skeleton {
  aspect-ratio: 1 / 1.42;
  border-radius: var(--radius-lg);
  background: var(--skeleton);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* ---- Developer note ----
   Only ever appears on localhost, to tell you the page fell back to its
   demo products instead of reading from Supabase. */
.dev-note {
  max-width: 640px;
  margin: 26px auto 0;
  padding: 12px 18px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .84rem;
  line-height: 1.5;
  text-align: center;
}


/* ==========================================================================
   10. PROMO BANNER
   ========================================================================== */
.promo { background: var(--band); color: var(--band-text); }

.promo__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 60px;
  padding-top: 76px;
  padding-bottom: 76px;
}

.promo__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.promo__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.promo__text {
  color: var(--band-soft);
  max-width: 460px;
  margin-bottom: 28px;
}

/* ---- Countdown ---- */
.countdown {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.countdown__unit {
  min-width: 68px;
  padding: 12px 8px;
  border-radius: var(--radius);
  background: var(--band-surface);
  text-align: center;
}

.countdown__unit strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.countdown__unit span {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--band-soft);
}


/* ==========================================================================
   11. ABOUT
   ========================================================================== */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.about__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 4.5;
  object-fit: cover;
}

.about__content .section__title { margin-bottom: 18px; }

.about__content p {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.about__stats {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.about__stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-text);
  line-height: 1.1;
}

.about__stats span {
  font-size: .82rem;
  color: var(--ink-soft);
}


/* ==========================================================================
   12. REVIEWS
   ========================================================================== */
/* ---- Slider shell ----
   The viewport clips; the track slides. main.js sets the track's transform.
   Without JavaScript the track simply scrolls sideways instead. */
.slider { position: relative; }

.slider__viewport {
  overflow: hidden;
  /* Breathing room so a card's hover lift is not clipped off */
  margin: -10px;
  padding: 10px;
}

.slider__track {
  position: relative;      /* main.js measures offsetLeft against this */
  display: flex;
  gap: 24px;
  transition: transform .55s cubic-bezier(.3, .7, .3, 1);
}

/* Three cards across, with two 24px gaps between them */
.slider__track > .review { flex: 0 0 calc((100% - 48px) / 3); }

/* ---- Arrows and dots ---- */
.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}

.slider__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.slider__btn:hover:not(:disabled) {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--solid-text);
}

.slider__btn:disabled { opacity: .3; cursor: default; }
.slider__btn svg { width: 18px; height: 18px; }

.slider__dots { display: flex; align-items: center; gap: 8px; }

.slider__dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width .3s ease, background .3s ease;
}

/* The dot for the page you are on stretches into a short bar */
.slider__dots button.is-on {
  width: 26px;
  background: var(--accent);
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform .28s ease, box-shadow .28s ease;
}

/* Oversized quote mark in the corner, kept faint so it reads as texture */
.review::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 22px;
  font-family: var(--font-head);
  font-size: 5rem;
  line-height: 1;
  color: var(--accent-text);
  opacity: .13;
  pointer-events: none;
}

.review:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.review__text {
  flex: 1;                /* keeps the author row aligned across cards */
  margin: 16px 0 22px;
  color: var(--ink-soft);
}

.review__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.review__person img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.review__person strong {
  display: block;
  font-size: .92rem;
}

.review__person span {
  font-size: .78rem;
  color: var(--ink-soft);
}


/* ==========================================================================
   13. NEWSLETTER
   ========================================================================== */
/* The newsletter now sits at the top of the footer, so it is dark. */
.footer__news {
  padding: 60px 0;
  border-bottom: 1px solid var(--band-line);
}

.newsletter__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

.newsletter__text h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

.newsletter__text h2 { color: var(--band-text); }
.newsletter__text p  { color: var(--band-soft); }

.newsletter__form {
  position: relative;
  display: flex;
  gap: 10px;
}

.newsletter__form input {
  flex: 1;
  min-width: 0;                  /* lets the input shrink on mobile */
  padding: 14px 20px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: .95rem;
  transition: border-color .18s ease;
}

.newsletter__form input:focus {
  outline: none;
  border-color: var(--accent);
}

.newsletter__form input.has-error { border-color: var(--error); }

/* Message that appears under the form after you submit */
.form-msg {
  position: absolute;
  top: 100%;
  left: 20px;
  margin-top: 8px;
  font-size: .84rem;
  font-weight: 500;
}

.form-msg.is-error   { color: var(--error); }
.form-msg.is-success { color: var(--ok); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer {
  background: var(--band);
  color: var(--band-soft);
  padding: 0 0 28px;    /* the newsletter band supplies the top spacing */
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1.15fr 1fr 1.25fr;
  gap: 40px;
  padding-top: 60px;
  padding-bottom: 48px;
}

.footer__brand p {
  margin: 16px 0 20px;
  font-size: .9rem;
  max-width: 320px;
}

.socials { display: flex; gap: 10px; }

.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--band-surface);
  color: var(--band-text);
  transition: background .2s ease, transform .2s ease;
}

.socials a:hover {
  background: var(--accent);
  transform: translateY(-3px);
}

.socials svg { width: 17px; height: 17px; }

.footer__col { display: flex; flex-direction: column; }

.footer__col h3 {
  color: var(--band-text);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer__col a {
  font-size: .89rem;
  padding: 5px 0;
  transition: color .18s ease;
}

.footer__col a:hover { color: var(--accent-text); }

.footer__addr {
  font-size: .89rem;
  margin-top: 10px;
  line-height: 1.6;
}

/* ---- Accepted payment methods ---- */
.footer__pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--band-line);
}

.footer__pay-label {
  font-size: .8rem;
  color: var(--band-soft);
}

.pay-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.pay {
  padding: 6px 12px;
  border: 1px solid var(--band-line);
  border-radius: 7px;
  background: var(--band-surface);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--band-soft);
  white-space: nowrap;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--band-line);
  font-size: .84rem;
}

.footer__legal { display: flex; gap: 22px; }
.footer__legal a:hover { color: var(--accent-text); }


/* ==========================================================================
   15. CART DRAWER
   ========================================================================== */

/* Dark layer behind the drawer */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.overlay.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  height: 100%;
  background: var(--surface);
  box-shadow: -10px 0 40px rgba(0, 0, 0, .12);
  transform: translateX(100%);       /* parked off-screen */
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

.cart.is-open { transform: translateX(0); }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.cart__head h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
}

.cart__items {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.cart__empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 56px 12px;
  font-size: .92rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item:last-child { border-bottom: none; }

.cart-item__info { flex: 1; min-width: 0; }

.cart-item__name {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 3px;
}

.cart-item__meta {
  font-size: .82rem;
  color: var(--ink-soft);
}

/* − 2 + quantity control */
.qty {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.qty button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: .95rem;
  line-height: 1;
  transition: background .15s ease;
}

.qty button:hover { background: var(--bg-soft); }

.qty span {
  min-width: 22px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
}

.cart-item__price {
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
}

.cart__foot {
  padding: 20px 22px;
  border-top: 1px solid var(--line);
}

.cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.cart__total strong {
  font-size: 1.2rem;
}

.cart__note {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
}


/* ==========================================================================
   16. TOAST, BACK-TO-TOP, SCROLL REVEAL
   ========================================================================== */

/* Small black message that slides up from the bottom */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 300;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--solid);
  color: var(--solid-text);
  font-size: .89rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, 130%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.3, .64, 1), opacity .35s ease;
  pointer-events: none;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Back-to-top button, bottom-right */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--solid);
  color: var(--solid-text);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .28s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover { background: var(--accent); }
.to-top svg { width: 19px; height: 19px; }

/* ---- Fade-up on scroll ----
   The hidden state only applies once script.js adds .js-on to <body>,
   so the page still looks correct if JavaScript is turned off. */
.js-on .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}

.js-on .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
  .js-on .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   17. RESPONSIVE
   Rules get applied as the screen gets narrower.
   ========================================================================== */

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px) {
  .section { padding: 72px 0; }

  .hero__inner,
  .promo__inner,
  .about__inner {
    gap: 40px;
  }

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

  /* Categories drop to two equal cards per row */
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card--wide,
  .cat-card--tall { grid-column: span 1; }
  .cat-card--wide img,
  .cat-card--tall img { aspect-ratio: 4 / 3; }

  /* Two reviews at a time. Must match reviewsPerPage() in main.js. */
  .slider__track > .review { flex: 0 0 calc((100% - 24px) / 2); }

  /* Brand block goes full width above the link columns */
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand p { max-width: 460px; }
}

/* ---- Tablet portrait & below: the layout stacks ---- */
@media (max-width: 860px) {

  /* Nav links collapse into a drop-down panel */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);

    /* Hidden until the hamburger is tapped */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    padding: 13px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }

  .nav__link:last-child { border-bottom: none; }
  .nav__link::after { display: none; }

  .menu-btn { display: grid; }

  /* Sections become one column */
  .hero__inner,
  .promo__inner,
  .about__inner,
  .newsletter__inner {
    grid-template-columns: 1fr;
  }

  .hero__inner { padding-top: 48px; padding-bottom: 48px; }

  /* Image above the text on the promo banner */
  .promo__media { order: -1; }
  .promo__media img { aspect-ratio: 16 / 10; }

  .about__media img { aspect-ratio: 16 / 10; }

  .hero__media img { aspect-ratio: 4 / 3.4; }
  .hero__badge { left: 16px; bottom: 16px; padding: 14px 18px; }

  .product-grid  { grid-template-columns: repeat(2, 1fr); }
  .section__head { margin-bottom: 36px; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- One review at a time. Must match reviewsPerPage() in main.js. ---- */
@media (max-width: 700px) {
  .slider__track > .review { flex: 0 0 100%; }
}

/* ---- Phones ---- */
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .section   { padding: 58px 0; }

  .announcement { font-size: .74rem; }

  .why__grid    { grid-template-columns: 1fr; gap: 14px; }
  .why__card    { padding: 26px 22px; }
  .cat-grid     { gap: 14px; }
  .product-grid { gap: 14px; }

  .product__body { padding: 14px 14px 16px; }

  .footer__news { padding: 44px 0; }
  .slider__controls { margin-top: 26px; gap: 14px; }

  .footer__pay { justify-content: center; }

  .hero__buttons .btn { flex: 1; }

  .countdown__unit { min-width: 0; flex: 1; }

  /* Email field stacks above the Subscribe button */
  .newsletter__form { flex-direction: column; }
  .newsletter__form .btn { width: 100%; }
  .form-msg { position: static; margin-top: 10px; left: 0; }

  .about__stats { gap: 24px; }
  .about__stats strong { font-size: 1.6rem; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { justify-content: center; text-align: center; }

  .to-top { right: 16px; bottom: 16px; }
  .toast {
    left: 18px;
    right: 18px;
    bottom: 18px;
    text-align: center;
    transform: translateY(130%);
  }
  .toast.is-visible { transform: translateY(0); }
}

/* ---- Very small phones: one product per row ---- */
@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr; }
  .cat-grid     { grid-template-columns: 1fr; }
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; }
}