/* ── 0. FONT IMPORTS ── */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* ── 1. CSS VARIABLES ── */
:root {
  /* Colors */
  --color-primary: #304d2c;

  --color-white: #ffffff;
  --color-off-white: #f8f9fa;
  --color-bg-card: #ffffff;
  --color-bg-header: #d9d9d9;

  --color-text-dark: #000000;
  --color-text-medium: #4a4a4a;
  --color-text-light: #767676;
  --color-text-muted: #9a9a9a;

  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;

  /* Typography */
  --font-body: "Poppins", sans-serif;
  --font-display: "Playfair Display", serif;
  --font-roboto: "Roboto", sans-serif;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-2xl: 2rem; /* 32px */

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 12px rgba(45, 106, 79, 0.08);

  /* Transitions */
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --container-max: 1400px;
  --container-pad: 1.5rem;
  --header-height: 78px;
  --topbar-height: 53px;
}

/* ── 2. RESET & BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  /* max-width: 100%; */
  height: auto;
  display: block;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-base);
}

ul,
ol {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--transition-base);
}

input {
  font-family: var(--font-body);
}

/* ── 3. UTILITY CLASSES ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── 4. BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn--outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-text-dark);
}

/* ── 5. TOP BAR ── */
.top-bar {
  background-color: var(--color-primary);
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 300;
}

.top-bar__container {
  padding: 0 30px 0 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-bar__social {
  display: flex;
  align-items: center;
  gap: 5px;
}

.top-bar__social-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.top-bar__info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-bar__info-item {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-roboto);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
.top-bar__info-item i {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ── 6. HEADER ── */
.header {
  position: sticky;
  top: var(--topbar-height);
  z-index: 200;
  background-color: var(--color-bg-header);
}

.header__container {
  padding: 0 82px 0 92px;
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header__logo-icon {
  width: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Nav */
.header__nav {
  flex: 1;
  display: flex;
}

.header__nav-list {
  display: flex;
  align-items: center;
}

.header__nav-item {
  position: relative;
  height: var(--header-height);
}

.header__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 100%;
  padding: 0 10px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: var(--color-text-dark);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  position: relative;
  white-space: nowrap;
}

.header__nav-link::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 0;
  width: 0;
  height: 3px;
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

/* Current page: the item fills the 78px nav row as a grey block with a green
   rule along the bottom. Square, so the rule runs the full width of the item. */
.header__nav-link--active {
  background: #d9d9d9;
  border-bottom: 3px solid #304d2c;
  border-radius: 0;
}

.header__nav-dropdown-icon {
  font-size: 0.7rem;
  transition: transform var(--transition-base);
}

.header__nav-item--dropdown {
  position: relative;
}

.header__nav-item--dropdown:hover .header__nav-dropdown-icon,
.header__nav-item--dropdown.is-open .header__nav-dropdown-icon {
  transform: rotate(180deg);
}

/* Dropdown */
.header__dropdown {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 20px;
  width: 431px;
  max-width: calc(100vw - 32px);
  background-color: #d9d9d9;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height var(--transition-slow),
    opacity var(--transition-slow),
    visibility var(--transition-slow);
  z-index: 300;
}

/* Hover is the mouse path; .is-open is set on click, so keyboard and touch
   users can open it too (see initCategoriesHoverDropdown). */
.header__nav-item--dropdown:hover .header__dropdown,
.header__nav-item--dropdown.is-open .header__dropdown {
  max-height: 420px;
  opacity: 1;
  visibility: visible;
}

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

/* Left: category list — items 251×37, 10px gap */
.header__dropdown-column--left {
  width: 251px;
  flex: none;
  gap: 10px;
  background-color: transparent;
}

/* Right: sub-categories panel — 140px wide, full height green block */
.header__dropdown-column--right {
  width: 140px;
  flex: none;
  background-color: #6e7e77;
  justify-content: start;
  padding: 0;
}

.header__dropdown-link {
  display: flex;
  align-items: center;
  height: 37px;
  padding: 10px;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  color: #111111;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

/* Active / hovered category — green block, bold white text */
.header__dropdown-column--left .header__dropdown-link.is-active {
  background-color: #6e7e77;
  color: var(--color-white);
  font-weight: 700;
}

/* Sub-categories — Inter 400, white, 37px rows inside the green panel */
.header__dropdown-column--right .header__dropdown-link {
  height: 37px;
  padding: 10px;
  font-weight: 400;
  color: var(--color-white);
}
.header__dropdown-column--right .header__dropdown-link:hover {
  color: rgba(255, 255, 255, 0.72);
}

/* Header Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
  height: 38px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.header__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0 33px 0 20px;
  height: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.header__search-input::-webkit-search-decoration,
.header__search-input::-webkit-search-cancel-button,
.header__search-input::-webkit-search-results-button,
.header__search-input::-webkit-search-results-decoration {
  display: none;
}
.header__search-input::-ms-clear,
.header__search-input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.header__search-input::placeholder {
  color: var(--color-text-dark);
}

.header__search-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__search-icon-inner {
  position: absolute;
  /* left: 12.5%;
  right: 12.5%;
  top: 12.5%;
  bottom: 12.5%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__search-btn {
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3);
  /* color: var(--color-text-light); */
  cursor: pointer;
  transition: color var(--transition-base);
}

.header__icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* justify-content: center; */
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  color: var(--color-text-dark);
  background: transparent;
}

.header__icon-btn img {
  /* width: 24px;
  height: 24px; */
  display: block;
}

.header__icon-btn--language {
  width: auto;
  min-width: 24px;
  padding-right: 4px;
  gap: 4px;
}

.header__language-arrow {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header__language-arrow[src] {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* Language hover dropdown */
.header__language {
  position: relative;
}
.header__language:hover .header__language-arrow {
  transform: rotate(180deg);
}
.header__language-arrow {
  transition: transform var(--transition-base);
}

.header__language-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: #d9d9d9;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
  z-index: 300;
}
.header__language:hover .header__language-dropdown {
  opacity: 1;
  visibility: visible;
}

.header__language-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px;
  width: 90px;
  height: 27px;
  background-color: #d9d9d9;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: #000000;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}
.header__language-option:hover,
.header__language-option.is-active {
  background-color: #6e7e77;
  color: #ffffff;
}
.header__language-flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.header__signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 127px;
  height: 44px;
  padding: 20px 50px 20px 49px;
  gap: 10px;
  background: var(--color-primary);
  border-radius: 10px;
  font-size: var(--text-sm);
  color: var(--color-white);
  margin-left: 57px;
}

/* Mobile Toggle */
.header__mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  transition: background var(--transition-base);
}
.header__mobile-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.header__mobile-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-dark);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  transform-origin: center;
}
.header__mobile-toggle.is-open .header__mobile-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__mobile-toggle.is-open .header__mobile-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__mobile-toggle.is-open .header__mobile-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav — a grey list panel that drops out of the header, with the
   category sub-panel opening to the right of it. Shown from 1024px down;
   .header__mobile-nav stays display:none above that. */
.header__mobile-nav {
  display: none;
  /* Pinned to the viewport, not to the header, so top+bottom give an exact
     height with no percentage or vh guesswork. --mobile-nav-top is written by
     initMobileNav from the header's real bottom edge. */
  position: fixed;
  top: var(--mobile-nav-top, 118px);
  bottom: 0;
  left: 0;
  /* no `right`: the box shrinks to its panels, so it neither spans the row
     nor swallows clicks on the page beside it */
  width: max-content;
  max-width: 100%;
  z-index: 150;
  align-items: stretch;
  /* Only the panels themselves are interactive. The sub-panel is as tall as
     its own content, so the empty area under it is still inside this box -
     without this it would swallow taps meant for the page. */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}
.header__mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
}
.header__mobile-nav-list,
.header__mobile-dropdown {
  pointer-events: auto;
}
/* the page must not scroll behind the open panel; body alone is not enough
   on mobile browsers, the root element needs it too */
html.mobile-nav-open,
body.mobile-nav-open {
  overflow: hidden;
}

.header__mobile-nav-list {
  flex: 0 0 108px;
  padding: 0 0 24px 10px;
  background-color: var(--color-bg-header);
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* the page behind is scroll-locked, so long lists scroll in place */
  overflow-y: auto;
}

.header__mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--color-text-dark);
  text-align: left;
  cursor: pointer;
}
.header__mobile-nav-link--active {
  font-weight: var(--fw-bold);
}
/* The caret direction is driven by aria-expanded, which the script already
   keeps in sync - closed points right, open points left as in the mockup. */
.header__mobile-dropdown-toggle i {
  font-size: 10px;
  transition: transform var(--transition-base);
  transform: rotate(180deg);
}
.header__mobile-dropdown-toggle[aria-expanded="true"] i {
  transform: rotate(0deg);
}

/* Category sub-panel: white list on the left, green sub-list on the right */
.header__mobile-dropdown {
  display: none;
  /* Sized by its columns in both directions: the width comes from their fixed
     widths, the height from the taller column. Only the grey list beside it
     runs the full height of the panel. */
  flex: 0 1 auto;
  min-width: 0;
  align-self: flex-start;
  max-height: 100%;
}
.header__mobile-dropdown.is-open {
  display: flex;
}

.header__mobile-dropdown-column {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.header__mobile-dropdown-column--left {
  flex: 0 1 160px;
  min-width: 0;
  padding: 0 0 16px;
  background-color: var(--color-white);
}
.header__mobile-dropdown-column--right {
  flex: 0 1 98px;
  padding: 8px 0 16px;
  background-color: #6e7e77;
}

.header__mobile-dropdown-link {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #111111;
}
/* Active category — green block, bold white text, as on desktop */
.header__mobile-dropdown-column--left .header__mobile-dropdown-link.is-active {
  background-color: #6e7e77;
  color: var(--color-white);
  font-weight: var(--fw-bold);
}
.header__mobile-dropdown-column--right .header__mobile-dropdown-link {
  color: var(--color-white);
}

/* ── 7. HERO SLIDER ── */
.hero {
  position: relative;
  width: min(
    calc(var(--container-max) - 2 * var(--container-pad)),
    calc(100% - 2 * var(--container-pad))
  );
  box-sizing: border-box;
  overflow: visible;
  background-color: transparent;
  margin: 30px auto;
}

.hero__slider {
  position: relative;
  width: 100%;
  height: 505px;
  aspect-ratio: 1281 / 505;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: #111;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--transition-slow);
  display: flex;
  align-items: center;
}
.hero__slide--active {
  opacity: 1;
  z-index: 1;
}

.hero__slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 30, 20, 0.75) 0%,
    rgba(10, 30, 20, 0.45) 50%,
    rgba(10, 30, 20, 0.05) 100%
  );
}

.hero__content {
  position: absolute;
  top: 90px;
  left: 60px;
  width: 520px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  z-index: 2;
  color: var(--color-white);
}

.hero__title {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  width: 100%;
  margin: 0;
}

.hero__subtitle {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
  margin: 0;
  color: #ffffff;
}

.hero__buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__buttons .btn {
  width: 200px;
  height: 48px;
  padding: 12px;
  border-radius: 8px;
  justify-content: center;
}

.hero__buttons .btn--outline-white {
  border: 1px solid #ffffff;
}

.hero__buttons .btn--primary {
  background: #304d2c;
}

/* Slider arrows */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  color: #6e7e77;
  /* font-size: var(--text-base); */
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: all var(--transition-base);
}

/* inlined so the glyph can take the button's colour */
.hero__arrow-icon {
  display: block;
}
.hero__arrow-icon path {
  fill: currentColor;
}
/* Outside the banner on desktop - .hero keeps overflow: visible for this.
   They sit inside below 1024px, where there is no room beside it. */
.hero__arrow--prev {
  left: -56px;

  @media (max-width: 1024px) {
    left: 2px;
  }
}
.hero__arrow--next {
  right: -56px;

  @media (max-width: 1024px) {
    right: 2px;
  }
}

/* Slider dots */
.hero__dots {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--space-2);
}

.hero__dot {
  box-sizing: border-box;
  width: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #304d2c;
  transform: matrix(-1, 0, 0, 1, 0, 0);
  transition: all var(--transition-base);
}
.hero__dot--active::before {
  background: #304d2c;
  border-color: #304d2c;
}

/* ── 8. HANDPICKED FOR YOU ── */
.handpicked {
  padding: 45px 45px 50px;
}

.handpicked__container {
  width: min(
    calc(var(--container-max) - 2 * var(--container-pad)),
    calc(100% - 2 * var(--container-pad))
  );
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 420px);
  align-items: center;
  gap: 24px;
}

.handpicked__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
}

.handpicked__title {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #000000;
  margin: 0;
}

.handpicked__subtitle {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin: 0;
}

.handpicked__button {
  width: 205px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

.handpicked__cards {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
}

.handpicked__card {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.handpicked__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* ── 9. CATEGORIES GRID ── */
.categories {
  padding: var(--space-6) 0 var(--space-16);
}

.categories__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: start;
}

/* Category Card */
.category-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 296px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
/* hover effects removed per request */

.category-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.category-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
/* image hover transform removed */

/* Responsive: 2 columns on medium, 1 on small screens */
@media (max-width: 1024px) {
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

.category-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-primary);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(0);
  transition: all var(--transition-base);
  border-radius: 0 0 10px 10px;
}

/* ===== Feature slide (no dots, no arrows) ===== */
.feature-slide {
  padding: var(--space-6) 0;
}
.feature-slide__frame {
  height: 296px;
  width: min(
    calc(var(--container-max) - 2 * var(--container-pad)),
    calc(100% - 2 * var(--container-pad))
  );
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.feature-slide__track {
  display: flex;
  gap: 20px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar (Firefox / IE) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* hide scrollbar (Chrome / Safari) */
.feature-slide__track::-webkit-scrollbar {
  display: none;
}

/* initDragScroll adds this for the duration of a pointer drag. Without it,
   mandatory snap pulls every imperative scrollLeft back to the current slide
   and smooth scrolling animates each one, so dragging does nothing. */
.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.feature-slide__slide {
  flex: 0 0 calc(100% - 30px);
  height: 100%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  position: relative;
  scroll-snap-align: start;
}
.feature-slide__content {
  position: absolute;
  left: 52px;
  top: 26px;
  max-width: 620px;
  color: #ffffff;
}
.feature-slide__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  margin: 0 0 12px 0;
}
.feature-slide__subtitle {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 34px;
  margin: 0;
  max-width: 460px;
}

@media (max-width: 1400px) {
  .feature-slide__content {
    max-width: 520px;
  }
}

@media (max-width: 1024px) {
  .feature-slide__content {
    left: 24px;
    right: 24px;
    top: 20px;
    max-width: none;
  }
  .feature-slide__title {
    font-size: 28px;
    line-height: 36px;
  }
  .feature-slide__subtitle {
    font-size: 16px;
    line-height: 24px;
    max-width: none;
  }
}

.category-card__title {
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.category-card__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-base);
}
.category-card__arrow img {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── 11. PRODUCT SECTIONS ── */
.products-section {
  padding: 0 0 var(--space-16);
}

.products-section__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.products-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.products-section__title {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
}

/* Product Slider */
.product-slider {
  position: relative;
  margin-bottom: 30px;
}

.product-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-slider__track::-webkit-scrollbar {
  display: none;
}

/* Product Card */
.product-card {
  flex: 0 0 calc(25% - 24px);
  min-width: 0;
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  position: relative;
  scroll-snap-align: start;
}

.product-card__img-wrap {
  position: relative;
  height: 320px;
  overflow: hidden;
  background-color: var(--color-off-white);
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  -webkit-user-drag: none;
  user-select: none;
}

.product-card__badge {
  position: absolute;
  z-index: 2;
  color: var(--color-white);
  font-size: var(--text-xs);
  padding: 2px 10px;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid #ffffff;
  border-radius: 6px 0px;
}

.product-card__wishlist {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform var(--transition-base);
}
.product-card__wishlist:hover {
  transform: scale(1.1);
}
.product-card__heart {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}
.product-card__heart path {
  fill: #6e7e77;
  transition: fill var(--transition-base);
}
/* hover / active -> fully white heart */
.product-card__wishlist:hover .product-card__heart path,
.product-card__wishlist.is-active .product-card__heart path {
  fill: #ffffff;
}

.product-card__info {
  padding: var(--space-3) var(--space-5);
  min-height: 84px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.product-card__name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin: 0;
}

.product-card__cart {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: transform var(--transition-base);
}
.product-card__cart:hover {
  transform: scale(1.12);
}
.product-card__cart-icon {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}
/* The icon is display:flex, which would win over the UA rule for [hidden] */
.product-card__cart[hidden] {
  display: none;
}

/* Quantity stepper — takes the icon's place once the card is in the cart */
.product-card__qty {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}
.product-card__qty-btn {
  width: 26px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.product-card__qty-value {
  position: relative;
  min-width: 32px;
  padding: 0 6px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: var(--fw-medium);
  text-align: center;
}
/* Short dividers rather than full-height borders, as in the mockup */
.product-card__qty-value::before,
.product-card__qty-value::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 60%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
}
.product-card__qty-value::before {
  left: 0;
}
.product-card__qty-value::after {
  right: 0;
}

/* ── 12. WHY CHOOSE US ── */
.why-us {
  padding: var(--space-16) 0;
  background-color: var(--color-white);
}

.why-us__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.why-us__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--space-10);
}

.why-us__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: stretch;
}

.why-us__image-col {
  height: 100%;
}

.why-us__image {
  width: 100%;
  height: 100%;
  min-height: 486px;
  object-fit: cover;
  border-radius: 10px;
}

.why-us__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.why-us__block-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  color: #304d2c;
  margin-bottom: 11px;
}

.why-us__block-desc {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  margin: 0;
}

.why-us__block-desc--tagline {
  margin-top: var(--space-4);
}

/* ── 13. TESTIMONIALS ── */
.testimonials {
  padding: var(--space-16) 0;
  background-color: var(--color-white);
}

.testimonials__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.testimonials__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.testimonials__title {
  font-family: var(--font-body), serif;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--space-2);
}

.testimonials__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.testimonials__slider {
  position: relative;
}

.testimonials__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-2) var(--space-4);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials__track::-webkit-scrollbar {
  display: none;
}

/* Testimonial Card */
.testimonial-card {
  flex: 0 0 calc(25% - 12px);
  min-width: 0;
  background-color: #f4f4f4;
  border: none;
  border-radius: 12px;
  padding: var(--space-6);
  transition: all var(--transition-base);
  scroll-snap-align: start;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-dark);
}

.testimonial-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.testimonial-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-medium);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-card__stars {
  display: flex;
  align-items: center;
  gap: 3px;
}
.testimonial-card__stars .tc-star {
  width: 18px;
  height: 17px;
  display: block;
}

/* Testimonial Arrows */
.testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: transparent;
  color: #9a9a9a;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}
.testimonials__arrow:hover {
  color: var(--color-primary);
  background-color: rgba(48, 77, 44, 0.08);
}
.testimonials__arrow--prev {
  left: -44px;
}
.testimonials__arrow--next {
  right: -44px;
}

/* Testimonial Dots */
.testimonials__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.testimonials__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: transparent;
  border: 1.5px solid #bdbdbd;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-base);
}
.testimonials__dot--active {
  width: 12px;
  background-color: #828282;
  border-color: #828282;
}

/* ── 14. FOOTER ── */
.footer {
  background-color: #e9e9e9;
  color: #1a1a1a;
}

.footer__container {
  padding: 30px var(--container-pad);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

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

/* Shared green headings */
.footer__heading {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #304d2c;
  margin: 0 0 18px;
}
.footer__heading--sm {
  font-size: 18px;
  margin-bottom: 16px;
}

/* About */
.footer__about-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.footer__logo-img {
  width: 110px;
  height: auto;
  flex-shrink: 0;
}
.footer__about-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.footer__about-text {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
}

/* Green pill buttons */
.footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #304d2c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 30px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}
.footer__btn:hover {
  background-color: #25401f;
}

/* Newsletter */
.footer__newsletter-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.footer__newsletter-icon {
  width: 34px;
  height: auto;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer__newsletter-text {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
}
.footer__form {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__input {
  flex: 1;
  min-width: 0;
  max-width: 330px;
  padding: 12px 18px;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
  /* transition: border-color var(--transition-base); */
}
.footer__input::placeholder {
  color: #9a9a9a;
}
.footer__input:focus {
  border-color: #304d2c;
}
.footer__btn--subscribe {
  flex-shrink: 0;
}

/* Link columns */
.footer__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 740px;
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__link {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #000000;
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer__link:hover {
  color: #304d2c;
}
.footer__list--contacts li {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #000000;
}

/* Right column: map + payments/socials */
.footer__right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-end;
}
.footer__map {
  width: 100%;
  max-width: 354px;
  height: 264px;
  border-radius: 10px;
  overflow: hidden;
  background: #d9d9d9;
}
.footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.footer__pay-social {
  width: 100%;
  max-width: 354px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer__payments {
  display: flex;
  align-items: center;
}
.footer__payments-img {
  height: 30px;
  width: auto;
  display: block;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}
.footer__social-link img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.footer__social-link:hover {
  transform: translateY(-2px);
}

/* ── 15. RESPONSIVE ── */

/* Laptop: 1024px */
@media (max-width: 1280px) {
  .hero__slider {
    height: 440px;
  }
  /* Keep the block vertically centred — a fixed top offset overflowed the
     shorter slider once the title wrapped to two lines. */
  .hero__content {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: 48px;
    padding: 0;
    width: auto;
    max-width: 460px;
    right: 48px;
  }

  .header__search-input {
    flex: 1;
  }

  .product-card {
    flex: 0 0 calc(33.333% - 11px);
  }
  .testimonial-card {
    flex: 0 0 calc(33.333% - 11px);
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
  }
}

/* Tablet: 768px */
@media (max-width: 1024px) {
  :root {
    --text-2xl: 1.75rem;
    --container-pad: 1.25rem;
    /* 53px on desktop. Set here rather than on .top-bar so the sticky header
       offset and the section scroll-margin follow it. */
    --topbar-height: 40px;
  }

  /* Top bar — all icons 15×15, phone number 12/28 Inter Medium */
  .top-bar__social-link,
  .top-bar__social-link img,
  .top-bar__info-item img {
    width: 15px;
    height: 15px;
    object-fit: contain;
  }
  .top-bar__info-item {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 28px;
    color: #ffffff;
    /* 15px icon + 8px = text starts at 23px, per the mockup */
    gap: 8px;
  }

  /* Header — hamburger (left) + logo + actions (right) */
  .header__container {
    padding: 0 20px;
    gap: 12px;
  }
  .header__nav {
    display: none;
  }
  .header__mobile-toggle {
    display: flex;
    order: -2;
    margin: 0;
  }
  .header__logo {
    order: -1;
  }
  .header__logo-icon {
    width: 64px;
  }
  .header__logo-icon img {
    width: 100%;
    height: auto;
  }
  .header__mobile-nav {
    display: flex;
  }
  .header__actions {
    margin-left: auto;
    gap: 5px;
  }
  /* Search keeps its full input down to 768px — it only collapses to an
     icon below that (see the max-width: 768px block). */
  .header__search {
    width: 200px;
  }
  /* Smaller placeholder — the full-size one is clipped in the narrower field */
  .header__search-input {
    padding: 0 30px 0 14px;
    font-size: 12px;
  }
  /* Action icons — 14×15, keep aspect (no crop), gap 5 */
  .header__icons {
    gap: 5px;
  }
  /* Buttons hug their icon (no forced 24×24 box) and center it */
  .header__icon-btn {
    width: auto;
    height: auto;
    justify-content: center;
  }
  /* All action icons the same size — 15×15 (all fill their viewBox now) */
  .header__icon-btn img,
  .header__icon-btn--language > img:first-child {
    width: 15px;
    height: 15px;
    object-fit: contain;
  }
  .header__signin-btn {
    display: inline-flex;
    width: auto;
    height: 38px;
    padding: 0 18px;
    margin-left: 4px;
    border-radius: 8px;
    font-size: 14px;
  }
  /* Hero */
  .hero {
    margin: var(--space-4) auto;
    border-radius: var(--radius-lg);
  }
  /* White over the banner: 18x19 button around a 6x10 glyph */
  .hero__arrow {
    width: 18px;
    height: 19px;
    color: #ffffff;
  }
  .hero__arrow-icon {
    width: 6px;
    height: 10px;
  }
  /* The visible dot is the pseudo-element; the 24px button around it stays
     as the touch target. */
  .hero__dot::before {
    width: 7px;
    height: 7px;
  }
  /* Slider gets a slightly taller ratio than desktop so the centred content
     block still breathes. `height: auto` is required — a definite height
     makes the browser ignore aspect-ratio. */
  .hero__slider {
    height: auto;
    aspect-ratio: 1024 / 420;
    min-height: 300px;
  }
  .hero__content {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    /* clears the prev arrow, which sits inside the slider from here down */
    left: 64px;
    right: 40px;
    padding: 0;
    width: auto;
    max-width: 60%;
    gap: 16px;
  }
  .hero__title {
    font-size: 28px;
    line-height: 36px;
  }
  .hero__subtitle {
    font-size: 14px;
    line-height: 20px;
  }
  .hero__buttons {
    gap: 10px;
  }
  .hero__buttons .btn {
    width: auto;
    min-width: 150px;
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* Handpicked */
  .handpicked {
    padding: 32px 20px;
  }
  .handpicked__title {
    font-size: 16px;
    line-height: 25px;
  }
  .handpicked__container {
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
  }
  .handpicked__cards {
    justify-content: flex-end;
  }
  .handpicked__card {
    width: 120px;
    height: 120px;
  }

  /* Categories */
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Products */
  .product-card {
    flex: 0 0 calc(50% - 8px);
  }
  .product-slider__arrow--prev {
    left: -10px;
  }
  .product-slider__arrow--next {
    right: -10px;
  }

  /* Why Us */
  .why-us__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .why-us__image {
    height: 320px;
  }

  /* Testimonials */
  .testimonial-card {
    flex: 0 0 calc(50% - 8px);
  }
  .testimonials__arrow--prev {
    left: -10px;
  }
  .testimonials__arrow--next {
    right: -10px;
  }

  /* Footer */
  /* Both headings are 14/17 here, so --sm no longer differs from the base */
  .footer__heading,
  .footer__heading--sm {
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
  }
  .footer__about-text,
  .footer__newsletter-text {
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    color: #000000;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer__right {
    flex-direction: column;
    align-items: stretch;
  }
  .footer__map {
    max-width: none;
    height: 280px;
  }
  .footer__pay-social {
    max-width: none;
  }
  /* Social icons — mobile/tablet spec 15×12 */
  .footer__social-link img {
    width: 15px;
    height: 12px;
  }
  /* Footer buttons (Read more + Subscribe) — mobile/tablet spec 90×25 */
  .footer__btn {
    width: 90px;
    height: 25px;
    padding: 12px 8px 12px 5px;
    border-radius: 5px;
    font-size: 11px;
  }
  /* Email input — mobile/tablet spec: up to 260×35, fills remaining
     space next to the button so it always fits (even at 360px) */
  .footer__input {
    flex: 1 1 auto;
    width: auto;
    max-width: 260px;
    min-width: 0;
    height: 35px;
    padding: 0 14px;
    border: 1px solid #c7c7c7;
    border-radius: 8px;
    font-size: 14px;
    background: #e9e9e9;
  }

  /* Section headings ("Newest", "Soon", "Similar products", ...) — one rule
     for every block that uses this class */
  .products-section__title {
    font-size: 20px;
    line-height: 48px;
    color: #000000;
  }
}

/* Below 768px the header runs out of room, so the search field collapses
   to a transparent icon (same 15×15 as the other action icons). Tapping the
   icon expands it into a pill in place — see initHeaderSearchToggle in
   script.js, which adds/removes .is-open. */
@media (max-width: 768px) {
  .header__search {
    display: flex;
    width: 15px;
    height: 15px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
  }
  .header__search-input {
    display: none;
  }
  .header__search-icon {
    right: 50%;
    transform: translate(50%, -50%);
  }
  .header__search-icon,
  .header__search-icon img {
    width: 15px;
    height: 15px;
    object-fit: contain;
  }
  /* 15×15 is far below a comfortable touch target, so extend the hit area
     without changing what is drawn */
  .header__search:not(.is-open) {
    overflow: visible;
  }
  .header__search:not(.is-open)::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
  }

  /* Opened state — the icon grows into a 93×18 white pill in place, inside
     .header__container. Magnifier first, then the short "Search" placeholder
     (swapped in from script.js). */
  .header__search.is-open {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 3px;
    gap: 2px;
    width: 93px;
    /* lets the pill give way instead of pushing Sign in off a 360px screen */
    flex: 0 1 93px;
    min-width: 60px;
    height: 18px;
    background: #ffffff;
    border-radius: 5px;
    cursor: auto;
  }
  /* icon sits left of the input, which comes first in the DOM */
  .header__search.is-open .header__search-icon {
    position: relative;
    order: -1;
    flex: none;
    top: auto;
    right: auto;
    transform: none;
    width: 12px;
    height: 12px;
  }
  /* the inner span is absolutely placed for the desktop field; in the pill it
     just needs to centre inside the 12×12 icon box */
  .header__search.is-open .header__search-icon-inner {
    position: static;
  }
  .header__search.is-open .header__search-icon img {
    width: 12px;
    height: 12px;
    object-fit: contain;
  }
  .header__search.is-open .header__search-input {
    display: block;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    font-size: 10px;
    background: transparent;
  }
  .header__search.is-open .header__search-input::placeholder {
    color: var(--color-text-muted);
  }

  /* No testimonial arrows on mobile — the track is swipeable.
     !important because initTestimonialArrows writes display inline. */
  .testimonials__arrow {
    display: none !important;
  }
  /* On the product page the dots go too; the review track is swiped instead.
     Scoped to --product so the home page keeps its dots. */
  .testimonials--product .testimonials__dots {
    display: none;
  }

  /* Two full cards plus a sliver of the third, so the row reads as
     swipeable. With the track's 20px gap, "50% - 34px" leaves the third
     card 28px of the viewport at any width. */
  .product-slider--peek .product-card {
    flex: 0 0 calc(50% - 34px);
  }
}

/* Small tablet / large phone: the banner is too narrow for the full-size
   hero content column, so scale the type and let it use the whole width */
@media (min-width: 481px) and (max-width: 700px) {
  .hero__slider {
    aspect-ratio: 3 / 2;
  }
  .hero__content {
    left: 56px;
    right: 24px;
    max-width: none;
    gap: 12px;
  }
  .hero__title {
    font-size: 22px;
    line-height: 30px;
  }
  .hero__subtitle {
    font-size: 13px;
    line-height: 18px;
  }
  .hero__buttons .btn {
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }
}

/* Mobile: 480px */
@media (max-width: 480px) {
  :root {
    --text-2xl: 1.5rem;
    --container-pad: 1rem;
  }

  /* Top bar */
  .top-bar__container {
    padding: 0 16px;
  }
  .top-bar__social {
    gap: 10px;
  }
  .top-bar__info {
    gap: 12px;
  }
  /* Hide working hours — mockup keeps only the phone number */
  .top-bar__info-item:last-child {
    display: none;
  }

  /* Header */
  .header__container {
    padding: 0 14px;
    gap: 10px;
  }
  .header__logo-icon {
    width: 52px;
  }
  .header__actions {
    gap: 5px;
  }
  .header__signin-btn {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    margin-left: 2px;
  }
  /* Hero */
  .hero {
    margin: 14px auto;
  }
  .hero__slider {
    aspect-ratio: auto;
    height: 230px;
    min-height: 0;
  }
  .hero__content {
    top: 50%;
    left: 20px;
    right: 20px;
    bottom: auto;
    width: auto;
    max-width: none;
    padding: 0;
    gap: 14px;
    transform: translateY(-50%);
  }
  .hero__title {
    font-size: 20px;
    line-height: 26px;
  }
  .hero__subtitle {
    font-size: 13px;
    line-height: 18px;
  }
  .hero__buttons {
    flex-direction: row;
    gap: 10px;
  }
  .hero__buttons .btn {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }
  .hero__dots {
    bottom: -22px;
  }

  /* Handpicked */
  .handpicked {
    padding: 24px 16px;
  }
  .handpicked__container {
    gap: 12px;
  }
  .handpicked__text {
    gap: 12px;
  }
  .handpicked__subtitle {
    font-size: 13px;
    line-height: 18px;
  }
  .handpicked__button {
    width: 140px;
    height: 40px;
    font-size: 13px;
  }
  .handpicked__cards {
    gap: 8px;
  }
  .handpicked__card,
  .handpicked__card:first-child {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }

  /* Categories — keep 2 columns, last card full width */
  .categories {
    padding: 8px 0 32px;
  }
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .category-card {
    height: 130px;
  }
  .category-card__overlay {
    height: 32px;
    padding: 0 10px;
  }
  .category-card__title {
    font-size: 13px;
  }
  .category-card__arrow {
    width: 24px;
    height: 24px;
  }

  /* Feature slide */
  .feature-slide__frame {
    height: 150px;
  }
  .feature-slide__content {
    left: 18px;
    right: 18px;
    top: 16px;
  }
  .feature-slide__title {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 6px;
  }
  .feature-slide__subtitle {
    font-size: 13px;
    line-height: 18px;
  }

  /* Products */
  .products-section {
    padding: 0 0 32px;
  }
  .product-card {
    flex: 0 0 46%;
  }
  .product-card__img-wrap {
    height: 170px;
  }
  .product-card__info {
    height: 32px;
    min-height: 0;
    padding: 0 12px;
  }
  .product-card__name {
    font-size: 13px;
  }
  .product-card__cart-icon {
    width: 20px;
    height: 20px;
  }
  .product-card__qty {
    height: 26px;
    border-radius: 6px;
  }
  .product-card__qty-btn {
    width: 20px;
    font-size: 14px;
  }
  .product-card__qty-value {
    min-width: 24px;
    padding: 0 4px;
    font-size: 12px;
  }

  /* Why Us */
  .why-us {
    padding: 32px 0;
  }
  .why-us__title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .why-us__image {
    min-height: 220px;
    height: 220px;
  }
  .why-us__block-title {
    font-size: 18px;
  }

  /* Testimonials */
  .testimonials {
    padding: 32px 0;
  }
  .testimonial-card {
    flex: 0 0 88%;
  }

  /* Footer */
  .footer__container {
    padding: 10px 16px;
  }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer__links {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  /* Let columns shrink below their content and wrap long strings
     (email/address) instead of blowing out the page width */
  .footer__col {
    min-width: 0;
  }
  .footer__link,
  .footer__list--contacts li,
  .footer__about-text,
  .footer__newsletter-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .footer__list {
    gap: 7px;
  }
  .footer__list--contacts {
    gap: 11px;
  }
  .footer__col:nth-child(4) {
    grid-column: 1 / -1;
  }
  .footer__about-body {
    flex-direction: row;
  }
  .footer__logo-img {
    width: 84px;
  }
  .footer__form {
    gap: 10px;
  }
}

/* Mobile XS: 320px */
@media (max-width: 360px) {
  /* --space-2 is not defined, so these gaps collapsed to 0 here */
  .top-bar__social {
    gap: 8px;
  }
  .top-bar__info {
    gap: 8px;
  }
  .header__container {
    padding: 0 10px;
    gap: 8px;
  }
  .header__logo-icon {
    width: 46px;
  }
  .header__actions {
    gap: 5px;
  }
  .header__signin-btn {
    padding: 0 10px;
    font-size: 12px;
  }
  .hero__slider {
    height: 210px;
  }
  .hero__buttons .btn {
    padding: 0 12px;
    font-size: 12px;
  }
  .handpicked__card,
  .handpicked__card:first-child {
    width: 56px;
    height: 56px;
  }
  .footer__links {
    gap: 12px;
  }
  .footer__pay-social {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ── 16. FOCUS STYLES ── */
/* No focus ring anywhere — per design. */
:focus,
:focus-visible {
  outline: none;
}

/* ── 17. SCROLL OFFSET FOR STICKY HEADER ── */
section[id] {
  scroll-margin-top: calc(var(--topbar-height) + var(--header-height) + 1rem);
}

/* ── 18. PRODUCT PAGE ── */
.product-page {
  padding: 40px 0 64px;
}
.product-page__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Breadcrumb */
.product-breadcrumb {
  padding-bottom: 10px;
  border-bottom: 2px solid #d8d8d8;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #6e7e77;
}
.product-breadcrumb a {
  color: #6e7e77;
  transition: color var(--transition-base);
}
.product-breadcrumb span {
  color: #6e7e77;
}

/* Title */
.product-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #000000;
  margin: 28px 0 24px;
}

/* Layout: media + info card */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 522px;
  gap: 20px;
  align-items: stretch;
}

/* Media (thumbnails + main image) */
.product-media {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  height: 613px;
}
.product-thumbs {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  min-height: 0;
}
.product-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.product-thumb img,
.product-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-thumb__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid #fff;
  border-radius: 6px 0;
}
.product-main-img {
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}

/* Info card */
.product-info {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
  border-radius: 16px;
  padding: 32px 36px;
}
.product-info__wishlist {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  transition: transform var(--transition-base);
}
.product-info__wishlist:hover {
  transform: scale(1.1);
}
.product-info__heart path {
  fill: #6e7e77;
  transition: fill var(--transition-base);
}
.product-info__wishlist:hover .product-info__heart path,
.product-info__wishlist.is-active .product-info__heart path {
  fill: #6e7e77;
}
.product-info__wishlist.is-active .product-info__heart path {
  fill: #304d2c;
}

.product-info__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  color: #506059;
  margin: 36px 0 16px 0;
}
.product-info__vendor {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: #000000;
  margin: 0 0 14px;
}
.product-info__stars {
  display: flex;
  gap: 4px;
  color: #ffbd13;
  font-size: 20px;
  margin-bottom: 22px;
}
/* Wrapper so the heading and the stars can share a row. column-reverse keeps
   the desktop order the markup used to have: stars above, heading below. */
.product-info__about-row {
  display: flex;
  flex-direction: column-reverse;
}
.product-info__about {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  margin: 0 0 12px;
}
.product-info__desc p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #1a1a1a;
}
/* Wrapper so the label and the amount can share a row; desktop keeps them
   stacked exactly as before. */
.product-info__price-row {
  display: flex;
  flex-direction: column;
}
.product-info__price-label {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #1a1a1a;
  margin: 20px 0 6px;
}
.product-info__price {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #111;
  margin: 0 0 26px;
}

/* Actions */
.product-info__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}
.product-qty {
  display: flex;
  align-items: center;
  border: 1px solid #304d2c;
  border-radius: 10px;
  overflow: hidden;
}
.product-qty__btn {
  width: 44px;
  height: 38px;
  font-size: 20px;
  color: #304d2c;
  background: transparent;
  cursor: pointer;
}
.product-qty__value {
  position: relative;
  min-width: 41px;
  text-align: center;
  font-size: 16px;
  color: #111;
  line-height: 38px;
}
/* Centred with margin rather than top:50% + translateY(-50%): the transform
   put the line on a half-pixel, which rasterises it blurry. Height is chosen
   so (box - line) / 2 is a whole number. */
.product-qty__value::before,
.product-qty__value::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 0.5px;
  height: 20px;
  background: #304d2c;
}
.product-qty__value::before {
  left: 0;
}
.product-qty__value::after {
  right: 0;
}
.product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-base);
}
.product-btn--buy {
  width: 131px;
  background-color: #304d2c;
  color: #fff;
  border: 1px solid #304d2c;
}
.product-btn--buy:hover {
  background-color: #25401f;
}
.product-btn--cart {
  background-color: transparent;
  color: #6e7e77;
  border: 1px solid #000000;
}
.product-btn--cart:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Reviews heading */
.product-reviews {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.product-reviews__title {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.04em;
  margin: 0;
}
.product-reviews__star {
  color: #ffbd13;
  font-size: 20px;
}
.product-reviews__score {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  color: #111;
}

/* Testimonials slider on the product page (sits right under REVIEWS heading) */
.testimonials--product {
  padding: var(--space-6) 0 var(--space-12);
  background-color: transparent;
}

/* Add to comment button (separate section) */
.add-comment {
  padding: 0 0 30px;
}
.add-comment__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.add-comment__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 230px;
  height: 44px;
  padding: 10px 20px;
  background-color: #304d2c;
  color: #fff;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.add-comment__btn:hover {
  background-color: #25401f;
}
.add-comment__icon {
  font-size: 14px;
  transition: transform var(--transition-base);
}
.add-comment__btn[aria-expanded="true"] .add-comment__icon {
  transform: rotate(180deg);
}

/* Expanded state — the comment form. Hidden until the button reports
   aria-expanded="true"; the form is its next sibling. */
.add-comment__form {
  display: none;
  margin-top: 16px;
  padding: 24px;
  background: #e7eae8;
  border-radius: 10px;
  /* the mockup leaves 47.56% of the row free on desktop */
  max-width: 52.44%;
}
.add-comment__btn[aria-expanded="true"] + .add-comment__form {
  display: block;
}
.add-comment__form-title {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0 0 16px;
}
.add-comment__row {
  display: flex;
  gap: 16px;
}
.add-comment__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid #304d2c;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #1a1a1a;
}
.add-comment__input::placeholder {
  color: #6e7e77;
}
.add-comment__row .add-comment__input {
  flex: 1 1 0;
  min-width: 0;
}
.add-comment__textarea {
  display: block;
  margin-top: 16px;
  min-height: 140px;
  resize: vertical;
}
.add-comment__submit {
  margin-top: 16px;
  height: 44px;
  padding: 0 28px;
  background: #304d2c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.add-comment__submit:hover {
  background: #25401f;
}

@media (max-width: 1100px) {
  .product-layout {
    grid-template-columns: 1fr;
  }
  .product-info {
    max-width: 600px;
  }
}
/* Tablet and mobile cap the media block; the 613px/460px heights below stay
   as the upper bound the grid works from. */
@media (max-width: 1024px) {
  .product-media {
    max-height: 293px;
  }
  /* Breadcrumb per the mockup: Inter 700, 12/15. Colour is already #6e7e77. */
  .product-breadcrumb {
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
  }
  /* Title per the mockup: Poppins 700, 14/21. Weight and colour already match. */
  .product-title {
    font-size: 14px;
    line-height: 21px;
    margin: 10px 0;
  }

  /* Info card — the desktop scale is roughly twice what fits here. Sizes are
     stepped down from the 14px page title so the card reads with it. */
  .product-info {
    padding: 16px 14px;
    border-radius: 10px;
  }
  .product-info__wishlist {
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
  }
  .product-info__name {
    font-size: 14px;
    line-height: 18px;
    margin: 0 28px 8px 0;
  }
  .product-info__vendor {
    font-size: 11px;
    line-height: 14px;
    margin: 0 0 8px;
  }
  /* Heading left, stars right on one line */
  .product-info__about-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .product-info__stars {
    font-size: 12px;
    gap: 2px;
    margin-bottom: 0;
  }
  .product-info__about {
    font-size: 11px;
    line-height: 14px;
    margin: 0;
  }
  .product-info__desc p {
    font-size: 11px;
  }
  /* Label and amount on one line, sharing a baseline. The 20px gap is the
     distance between the two boxes in the mockup (13+38 -> 71). */
  .product-info__price-row {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
    margin: 12px 0 14px;
  }
  .product-info__price-label {
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    color: #000000;
    margin: 0;
  }
  .product-info__price {
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    color: #000000;
    margin: 0;
  }
  .product-info__actions {
    gap: 10px;
  }
  .product-qty {
    box-sizing: border-box;
    width: 55.37px;
    height: 16.91px;
    /* fixed width, so it would sit at the start of its 80px grid column */
    justify-self: center;
    border: 0.685824px solid #304d2c;
    border-radius: 6.85824px;
  }
  /* buttons take a fixed share, the value fills what is left of the 55px */
  .product-qty__btn {
    width: 17px;
    height: 100%;
    font-size: 10px;
  }
  .product-qty__value {
    flex: 1;
    min-width: 0;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 6.3405px;
    line-height: 8px;
    color: #6e7e77;
  }
  .product-qty__value::before,
  .product-qty__value::after {
    height: 9px;
  }
  /* Both action buttons are 90x27 in the mockup */
  .product-btn {
    width: 90px;
    height: 27px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
  }
  .product-btn--buy {
    width: 90px;
  }

  /* REVIEWS heading */
  .product-reviews {
    gap: 10px;
    margin-top: 20px;
  }
  .product-reviews__title {
    font-size: 13px;
  }
  .product-reviews__star {
    font-size: 10px;
  }
  .product-reviews__score {
    font-size: 13px;
  }

  /* Review cards. Scoped to --product so the home page testimonials, which
     share .testimonial-card, are left alone. */
  .testimonials--product {
    padding: 12px 0 20px;
  }
  .testimonials--product .testimonial-card {
    padding: 12px;
    border-radius: 8px;
  }
  .testimonials--product .testimonial-card__header {
    gap: 8px;
    margin-bottom: 10px;
  }
  .testimonials--product .testimonial-card__avatar {
    width: 28px;
    height: 28px;
  }
  .testimonials--product .testimonial-card__name {
    font-size: 12px;
  }
  .testimonials--product .testimonial-card__date {
    font-size: 10px;
  }
  .testimonials--product .testimonial-card__text {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .testimonials--product .testimonial-card__stars .tc-star {
    width: 14px;
    height: 13px;
  }

  /* ADD TO COMMENT */
  .add-comment__btn {
    min-width: 164px;
    height: 29px;
    padding: 0 12px;
    gap: 20px;
    border-radius: 6px;
    font-size: 11px;
  }
  .add-comment__icon {
    font-size: 11px;
  }

  /* Comment form — full width here (left 0 / right -0.14% in the mockup),
     fields stacked instead of the desktop two-column row */
  .add-comment__form {
    max-width: none;
    margin-top: 10px;
    padding: 14px;
  }
  .add-comment__form-title {
    font-size: 13px;
    margin: 0 0 10px;
  }
  .add-comment__row {
    flex-direction: column;
    gap: 10px;
  }
  .add-comment__input {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
  }
  .add-comment__textarea {
    margin-top: 10px;
    min-height: 90px;
  }
  .add-comment__submit {
    width: 100%;
    margin-top: 10px;
    height: 29px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .product-media {
    grid-template-columns: 90px minmax(0, 1fr);
    height: 460px;
  }
}

/* ===========================================================
   SHOPPING CART PAGE
   =========================================================== */
.cart-page {
  padding: 40px 0 64px;
}
.cart-page__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Breadcrumb */
.cart-breadcrumb {
  margin: 0 6px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #d8d8d8;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: #6e7e77;
}
.cart-breadcrumb a {
  color: #6e7e77;
  transition: color var(--transition-base);
}

/* Header row: title (left) + summary heading (right) */
.cart-headrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: baseline;
  margin: 26px 0 18px;
}
.cart-title {
  font-family: "Inter", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #111;
}
.cart-summary-heading {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  color: #111;
}
.cart-summary-heading strong {
  font-weight: 700;
  margin-right: 14px;
}

/* Two columns: items panel + summary card */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

/* Items panel */
.cart-panel {
  background-color: #f4f4f4;
  border-radius: 16px;
  padding: 28px 32px 40px;
}
.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 90px 90px 34px;
  align-items: center;
  gap: 14px;
}
.cart-row--head {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #506059;
  padding-bottom: 22px;
}
.cart-row + .cart-row {
  padding-top: 26px;
}
.cart-product {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cart-product__img {
  width: 72px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.cart-product__name {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #1a1a1a;
}
.cart-price,
.cart-total {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: #000000;
}
.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* colour of the inlined icon, which fills with currentColor */
  color: #837f7f;
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-base);
}
.cart-remove__icon {
  display: block;
  width: 14px;
  height: 18px;
}
.cart-remove__icon path {
  fill: currentColor;
  transition: fill var(--transition-base);
}
.cart-remove:hover {
  color: #c0392b;
}

/* Order summary card */
.cart-summary {
  background-color: #f4f4f4;
  border-radius: 16px;
  padding: 24px 26px 26px;
}
.cart-summary__items {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 22px;
}
.cart-summary__label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.cart-field {
  width: 100%;
  height: 35px;
  padding: 0 14px;
  margin-bottom: 18px;
  /* background-color, not the shorthand: the arrow below is a background-image */
  background-color: transparent;
  border: 1px solid #304d2c;
  border-radius: 3px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #506059;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23506059' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cart-field::placeholder {
  color: #9a9a9a;
}
.cart-field--input {
  background-image: none;
}

/* Pay-method buttons */
.cart-pay {
  display: flex;
  gap: 12px;
  margin: 4px 0 6px;
}
.cart-pay__btn {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: #6e7e77;
  border: 1px solid #c9c9c9;
  cursor: pointer;
  transition: all var(--transition-base);
}
.cart-pay__btn.is-active,
.cart-pay__btn:hover {
  background: #304d2c;
  color: #fff;
  border-color: #304d2c;
}

/* Total + checkout */
.cart-summary__divider {
  height: 1px;
  background: #d8d8d8;
  margin: 22px 0 16px;
}
.cart-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.cart-summary__total-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
}
.cart-summary__total-value {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.cart-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #304d2c;
  color: #fff;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.cart-checkout:hover {
  background: #25401f;
}

/* Continue shopping */
.cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  color: #6e7e77;
}
.cart-continue__icon {
  display: block;
  width: 16px;
  height: 15px;
  flex-shrink: 0;
}
.cart-continue__icon path {
  fill: currentColor;
}

@media (max-width: 1100px) {
  .cart-headrow,
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-headrow {
    gap: 6px;
  }
}
/* The quantity stepper is ~81px wide from 1024px down, so the column it sits
   in shrinks with it instead of leaving a gap. */
@media (max-width: 1024px) {
  .cart-row {
    grid-template-columns: minmax(0, 1fr) 80px 90px 90px 34px;
    gap: 5px;
  }
  /* The name column is narrow here, so a long name is cut after two lines
     with an ellipsis instead of pushing the row taller. */
  .cart-product__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Breadcrumb per the mockup: Inter 700, 12/15. Colour already matches. */
  .cart-breadcrumb {
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
  }
  /* Poppins here, not the Inter the desktop rule sets */
  .cart-title {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
  }
  /* Column headings — PRODUCT DETAILS, QUANTITY, PRICE, TOTAL */
  .cart-row--head {
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    color: #6e7e77;
  }
  .cart-product__img {
    width: 56px;
    height: 56px;
    border-radius: 4px;
  }
  .cart-panel {
    padding: 8px;
    border-radius: 8.45px;
  }
  /* 14x18 is the desktop size; the icon column is only 16px wide here */
  .cart-remove__icon {
    width: 10px;
    height: 12px;
  }
  /* Pay buttons: 37px tall, 10px radius. Width stays flexible - three fixed
     106px buttons plus gaps overflow the panel below ~400px. */
  .cart-pay__btn {
    height: 37px;
    padding: 10px 20px;
    border-radius: 10px;
  }
  .cart-summary {
    padding: 16px;
  }
  /* Price and total: 12/15 right-aligned, so "4900 AMD" sits on two lines
     inside a ~37px column, matching the mockup. */
  .cart-price,
  .cart-total {
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    text-align: center;
  }
  /* Width stays 100% rather than the mockup's 333px: that is just the frame
     width there, and a fixed value would overflow a 360px screen. */
  .cart-checkout {
    height: 55px;
    padding: 8.66828px 17.3366px 8.66828px 0;
    gap: 8.67px;
    border-radius: 5px;
  }
}
@media (max-width: 640px) {
  .cart-row {
    grid-template-columns: minmax(0, 1fr) 80px 48px 34px 16px;
  }
}

/* ===========================================================
   SHIPPING & DELIVERY PAGE
   =========================================================== */
.ship-page {
  padding: 0 0 40px;
}
/* Everything between the breadcrumb and the footer sits in these, so the cap
   here bounds the whole page body. 1400px elsewhere on the site. */
.ship-container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
/* The breadcrumb is outside that cap and keeps the site-wide width */
.ship-container--wide {
  max-width: var(--container-max);
}
.ship-breadcrumb {
  padding: 18px 0 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #6e7e77;
  border-bottom: 1px solid #e3e3e3;
}
.ship-breadcrumb a {
  color: #6e7e77;
}

/* Section shells */
.ship-section {
  padding: 56px 0;
  @media (max-width: 1040px) {
    padding: 15px 0;
  }
}
.ship-section--divider {
  border-top: 1px solid #e3e3e3;
  @media (max-width: 1024px) {
    border-top: none;
  }
}
.ship-section__title {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}
.ship-section__subtitle {
  max-width: 620px;
  margin: 10px auto 0;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #6e7e77;
}

/* Buttons */
.ship-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}
.ship-btn--primary {
  background: #304d2c;
  color: #fff;
  border: 1px solid #304d2c;
}
.ship-btn--primary:hover {
  background: #25401f;
}
.ship-btn--outline {
  background: transparent;
  color: #304d2c;
  border: 1px solid #304d2c;
}
.ship-btn--outline:hover {
  background: rgba(48, 77, 44, 0.08);
}

/* ---- Hero ---- */
.ship-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0;
}
.ship-hero__title {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 14px;
}
/* Roboto here, not Inter */
.ship-hero__text {
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 22px;
}
.ship-hero__search {
  position: relative;
  max-width: 360px;
  margin-bottom: 18px;
}
/* Centred with margin rather than a transform, which would put a 20px icon
   on a half pixel in some field heights. */
.ship-hero__search-icon {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 20px;
  height: 20px;
  /* clicks fall through to the field underneath */
  pointer-events: none;
}
.ship-hero__search-icon svg {
  display: block;
}
.ship-hero__search-icon path {
  fill: rgba(0, 0, 0, 0.5);
}
.ship-hero__search input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  /* left padding clears the icon: 12 + 20 + 12 */
  padding: 0 12px 0 44px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  background: #ffffff;
}
.ship-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* 520x400 on desktop. width:100% with the cap rather than a flat 520px, so
   it can still shrink inside the hero grid. */
.ship-hero__img {
  width: 100%;
  max-width: 520px;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
}
.ship-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Delivery Methods ---- */
.ship-methods__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 44px;
  text-align: center;
}
.ship-method__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef1ee;
  color: #304d2c;
  font-size: 22px;
}
.ship-method__name {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.ship-method__desc {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #6e7e77;
  margin-bottom: 14px;
}
.ship-method__price {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

/* ---- Two-card grid (packaging / status) ---- */
.ship-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;

  @media (max-width: 900px) {
    margin-top: 10px;
  }
}
.ship-card {
  display: flex;
  gap: 18px;
  align-items: center;
  background: #f4f4f4;
  border-radius: 14px;
  padding: 18px;
}
.ship-card__img {
  width: 132px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.ship-card__title {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.ship-card__text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #6e7e77;
}

/* ---- Costs / chart ---- */
.ship-costs__calc {
  display: flex;
  justify-content: center;
  margin: 26px 0 30px;
}
.ship-chart {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 20px;
}
.ship-chart__head {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.ship-chart__sub {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #9a9a9a;
  margin-bottom: 20px;
}
/* No padding-bottom: it left a 2px gap, so the bars floated above the axis
   instead of standing on it. The four dashed rules plus that axis make the
   five lines from the mockup; they are backgrounds, so the bars cover them
   and no extra elements are needed in the markup. */
.ship-chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  height: 200px;
  padding: 0 10px;
  border-bottom: 1px solid #d3d3d3;
  background-image: repeating-linear-gradient(
      to right,
      #e3e3e3 0 6px,
      transparent 6px 12px
    ),
    repeating-linear-gradient(to right, #e3e3e3 0 6px, transparent 6px 12px),
    repeating-linear-gradient(to right, #e3e3e3 0 6px, transparent 6px 12px),
    repeating-linear-gradient(to right, #e3e3e3 0 6px, transparent 6px 12px);
  background-size: 100% 1px;
  background-position: 0 0, 0 25%, 0 50%, 0 75%;
  background-repeat: no-repeat;
}
/* Square corners: the mockup's bars are plain rectangles */
.ship-chart__bar {
  flex: 1;
  background: #304d2c;
}
.ship-chart__axis {
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 8px;
}
.ship-costs__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
/* These three were bare divs with no rules at all - no background, border
   or padding - so they read as loose text rather than cards. */
.ship-costs__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.ship-costs__cell-label {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #9a9a9a;
  margin-bottom: 6px;
}
.ship-costs__cell-value {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

/* ---- Order Tracking ---- */
.ship-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ship-track__map {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ship-track__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.ship-track__title {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.ship-track__text {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #6e7e77;
  margin-bottom: 22px;
}
.ship-track__label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.ship-track__input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  margin-bottom: 18px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  background: #fff;
}
.ship-track__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- FAQ ---- */
.ship-faq {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.ship-faq__heading {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.ship-faq__intro {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #6e7e77;
}
/* The answer is a sibling of the icon+question row, not nested with the
   question, so it can span the full width. Desktop keeps its old look by
   indenting it under the question instead. */
.ship-faq__item {
  padding: 22px 0;
  border-bottom: 1px solid #e3e3e3;
}
.ship-faq__item:first-child {
  padding-top: 0;
}
.ship-faq__item-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ship-faq__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ship-faq__icon {
  color: #304d2c;
  font-size: 18px;
}
/* the inlined icons size from their own width/height, and fill from color */
svg.ship-faq__icon {
  display: block;
}
svg.ship-faq__icon path {
  fill: currentColor;
}
.ship-faq__q {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
/* keeps the desktop indent the answer had when it sat beside the icon */
.ship-faq__a {
  margin-top: 6px;
  padding-left: 34px;
}
.ship-faq__a {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6e7e77;
}

@media (max-width: 1024px) {
  /* "Shipping Costs & Delivery Times" and the other section headings */
  .ship-section__title {
    font-size: 14px;
    line-height: 40px;
    color: #000000;
    text-align: left;
  }
  .ship-hero__title {
    font-size: 14px;
    line-height: 21px;
    color: #000000;
  }
  .ship-hero__text {
    font-size: 14px;
  }
  /* The field is 48px tall here against 36px on desktop; width fills the
     column, the mockup's 350px being the mobile frame */
  .ship-hero__search {
    max-width: none;
  }
  .ship-hero__search input {
    height: 48px;
  }
  /* 240px tall with an 8px radius; width fills the column, since the
     mockup's 350px is just the mobile frame */
  .ship-hero__img {
    max-width: none;
    height: 240px;
    border-radius: 8px;
  }
  /* Packaging cards: image stays on the left with the text beside it, the
     same white card treatment as the cost cells. A rule at 560px used to
     stack them into a column with a full-width image - that is gone. */
  .ship-card {
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  .ship-card__img {
    width: 104px;
    height: 104px;
    border-radius: 8px;
  }
  /* Roboto here, not the Inter the desktop rule sets. The auto side margins
     and 620px cap go too, or the block would stay centred and only its text
     would sit left. */
  .ship-section__subtitle {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #000000;
    text-align: left;
    max-width: none;
    margin: 10px 0 0;
  }
  /* flex:1 rather than the mockup's fixed widths - those are frame widths,
     and both hero buttons carry flex-grow:1 there anyway, so they share the
     row. Same 44px height and 5px radius throughout. */
  .ship-costs__calc .ship-btn,
  .ship-hero__actions .ship-btn {
    flex: 1;
    height: 44px;
    padding: 0;
    border-radius: 5px;
  }
  /* 84px is the natural height of a one-line cell (16 + 20 + 4 + 28 + 16),
     used as a floor so all three match but can still grow on longer text. */
  .ship-costs__cell {
    min-height: 84px;
  }
  /* All three cells: Roboto, label over value. Spacing comes from the cell's
     4px gap, so the label's own margin goes. */
  .ship-costs__cell-label {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
  }
  .ship-costs__cell-value {
    font-family: var(--font-roboto);
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #000000;
  }
}
@media (max-width: 900px) {
  .ship-hero,
  .ship-track {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ship-methods__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ship-cards,
  .ship-costs__info {
    grid-template-columns: 1fr;
  }
  .ship-faq {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* FAQ items become separate cards here: bordered box, icon in a grey circle,
   answer starting at the card's left edge rather than under the question. */
@media (max-width: 1024px) {
  .ship-faq__heading {
    font-size: 14px;
    line-height: 40px;
    color: #000000;
  }
  /* Inter here, unlike the Roboto section subtitles */
  .ship-faq__intro {
    font-size: 12px;
    line-height: 24px;
    color: #000000;
  }
  .ship-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ship-faq__item,
  .ship-faq__item:first-child {
    padding: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  .ship-faq__item-head {
    gap: 12px;
  }
  .ship-faq__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f4;
  }
  .ship-faq__q {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
  }
  .ship-faq__a {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 12px;
    padding-left: 0;
  }
}
/* ===========================================================
   MY PROFILE PAGE
   =========================================================== */
.profile-page {
  padding: 40px 0 64px;
}
.profile-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.profile-breadcrumb {
  margin: 0 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d8d8d8;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #6e7e77;
}
.profile-breadcrumb a {
  color: #6e7e77;
}

.profile-layout {
  display: grid;
  grid-template-columns: 305px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}
.profile-card {
  background: #f6f6f4;
  border: 1px solid #ececec;
  border-radius: 16px;
}

/* Avatars */
/* The image carries its own circle, so the wrapper no longer needs a
   background or a radius of its own. */
.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-avatar--lg {
  width: 60px;
  height: 60px;
}
.profile-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Left side card */
/* Page heading above the cards */
.profile-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin: 16px 0 0;
}
/* Desktop: summary and menu read as one card, so the shell lives here and
   the two children go flat. The 1024px block splits them again. */
.profile-side-col {
  display: flex;
  flex-direction: column;
  /* min-height, not the mockup's flat 564px: the menu must be able to grow */
  min-height: 564px;
  background: rgba(231, 234, 232, 0.5);
  border-radius: 20px;
  padding: 24px;
}
.profile-side-col > .profile-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.profile-side__title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  line-height: 36px;
  font-weight: 400;
  color: #000000;
  text-align: center;
  margin-bottom: 12px;
}
.profile-side__user {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
/* right-aligned beside the avatar, as in the desktop mockup */
.profile-side__info {
  flex: 1;
  min-width: 0;
  text-align: right;
}
.profile-side__name {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #304d2c;
}
.profile-side__email {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #6e7e77;
  margin: 2px 0 8px;
}
/* Desktop: sized to its label and pushed to the right edge of the card.
   Full width below 1024px. */
.profile-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-left: auto;
  height: 40px;
  padding: 0 20px;
  margin-top: 12px;
  background: #304d2c;
  color: #fff;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.profile-edit-btn:hover {
  background: #25401f;
}
.profile-menu {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}
/* only the mobile mockup labels the menu */
.profile-menu__label {
  display: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.profile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  transition: color var(--transition-base);
}
.profile-menu__item:hover {
  color: #304d2c;
}
.profile-menu__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-menu__left i {
  width: 18px;
  text-align: center;
  color: #506059;
}
/* inlined icons: sized by their own attributes, filled from the same colour
   as the Font Awesome glyphs beside them */
.profile-menu__icon {
  display: block;
  flex-shrink: 0;
  color: #506059;
}
.profile-menu__icon path {
  fill: currentColor;
}
.profile-menu__item .fa-chevron-right {
  font-size: 12px;
  color: #9a9a9a;
}

/* Right edit card */
.profile-edit {
  padding: 32px 40px 40px;
}
/* Title over a centred avatar. The mobile mockup drops the avatar and puts
   the title at the left - see the 1024px block. */
.profile-edit__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
/* Figma left the family unresolved; the mockup is the serif already loaded
   for display type. */
.profile-edit__title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 16px;
}
.profile-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.profile-field {
  display: flex;
  flex-direction: column;
}
.profile-field__label {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 8px;
}
.profile-field__control {
  position: relative;
}
.profile-field__input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #1a1a1a;
}
.profile-field__input::placeholder {
  color: #9a9a9a;
}
.profile-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #6e7e77;
  font-size: 15px;
  background: transparent;
  cursor: pointer;
}
.profile-update {
  grid-column: 1 / 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 28px;
  margin-top: 6px;
  background: #304d2c;
  color: #fff;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.profile-update:hover {
  background: #25401f;
}
.profile-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  color: #6e7e77;
}

/* The mobile mockup has the title at the left with no avatar above it */
@media (max-width: 1024px) {
  /* two separate cards again, with the menu labelled */
  .profile-side-col {
    gap: 24px;
    min-height: 0;
    background: none;
    border-radius: 0;
    padding: 0;
  }
  .profile-side-col > .profile-card {
    background: #f6f6f4;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 20px;
  }
  .profile-side__title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #304d2c;
    text-align: left;
    margin-bottom: 8px;
  }
  .profile-side__info {
    text-align: left;
  }
  .profile-side__name {
    font-size: 15px;
    color: #1a1a1a;
  }
  .profile-side__email {
    font-size: 12px;
  }
  .profile-edit-btn {
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
  }
  .profile-menu {
    margin-top: 0;
  }
  .profile-menu__label {
    display: block;
  }
  .profile-edit__head {
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .profile-edit__head .profile-avatar {
    display: none;
  }
  .profile-edit__title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0;
  }
}
@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .profile-form {
    grid-template-columns: 1fr;
  }
  .profile-update {
    grid-column: 1 / -1;
  }
  .profile-edit {
    padding: 28px 22px 32px;
  }
}


/* ===========================================================
   AUTH (SIGN IN) MODAL
   =========================================================== */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.auth-modal.is-open {
  display: flex;
}
.auth-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #e7e7e7;
  border-radius: 14px;
  padding: 44px clamp(24px, 16%, 110px) 48px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  animation: authPop 0.22s ease;
}
@keyframes authPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.auth-modal__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #6e7e77;
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-base);
}
.auth-modal__close:hover {
  color: #1a1a1a;
}
.auth-modal__title {
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
  margin-bottom: 6px;
}
.auth-modal__subtitle {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #304d2c;
  margin-bottom: 24px;
}
.auth-form {
  display: flex;
  flex-direction: column;
}
/* display:flex above outranks the browser's [hidden], so restate it - only
   one of the two views is ever shown */
.auth-form[hidden] {
  display: none;
}
/* the sign-up view has no "forgot password" link above its button */
.auth-btn--signup-submit {
  margin-top: 8px;
}
/* the subtitle belongs to the two entry views only */
.auth-modal__subtitle[hidden] {
  display: none;
}

/* Four-digit code */
.auth-code {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.auth-code__box {
  flex: 1;
  min-width: 0;
  height: 84px;
  padding: 0;
  background: transparent;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 26px;
  color: #1a1a1a;
}
.auth-code__box::placeholder {
  color: #1a1a1a;
}
.auth-code__box:focus {
  outline: none;
  border-color: #304d2c;
}

/* Verified confirmation — title and circle both centred */
.auth-modal__dialog--centered .auth-modal__title {
  text-align: center;
}
.auth-verified {
  align-items: center;
  padding: 12px 0 32px;
}
.auth-verified__mark {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #304d2c;
}
.auth-field {
  position: relative;
  margin-bottom: 18px;
}
.auth-input {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #1a1a1a;
}
.auth-input::placeholder {
  color: #6e7e77;
}
.auth-input:focus {
  outline: none;
  border-color: #304d2c;
}
.auth-field--password .auth-input {
  border-color: #304d2c;
  padding-right: 48px;
}
.auth-eye {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: #304d2c;
  font-size: 16px;
  background: transparent;
  cursor: pointer;
}
.auth-forgot {
  align-self: flex-end;
  margin: 2px 0 4px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #304d2c;
}
.auth-forgot:hover {
  text-decoration: underline;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #6e7e77;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #b9bcb9;
}
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition-base);
}
/* no bottom margin: the divider now sits under it and brings its own */
.auth-btn--primary {
  background: #304d2c;
  color: #fff;
  border: 1px solid #304d2c;
}
.auth-btn--primary:hover {
  background: #25401f;
}
.auth-btn--google,
.auth-btn--signup {
  background: transparent;
  color: #304d2c;
  border: 1px solid #304d2c;
}
.auth-btn--google:hover,
.auth-btn--signup:hover {
  background: rgba(48, 77, 44, 0.08);
}
.auth-btn--signup {
  margin-top: 16px;
}
body.auth-open {
  overflow: hidden;
}

/* ===========================================================
   PROFILE PICTURE MODAL
   =========================================================== */
.pic-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.pic-modal.is-open {
  display: flex;
}
.pic-modal__dialog {
  position: relative;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 36px 40px 32px;
  background: #f2f2ee;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  animation: authPop 0.22s ease;
}
.pic-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 18px;
  color: #6e7e77;
  background: none;
  border: none;
  cursor: pointer;
}
.pic-modal__title {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 28px;
}
/* Dashed drop area with the green bracket the mockup draws across two of
   its corners. */
/* The frame stays put; its contents swap between the default view and the
   live camera. */
.pic-drop {
  position: relative;
  padding: 56px 24px;
  border: 1px dashed #9a9a9a;
  border-radius: 4px;
}
.pic-drop__default {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* The display rules above and below outrank the browser's [hidden], so the
   attribute needs restating here - only one of the two is ever shown. */
.pic-drop__default[hidden],
.pic-camera[hidden] {
  display: none;
}
.pic-drop::before,
.pic-drop::after {
  content: "";
  position: absolute;
  width: 36%;
  height: 38%;
  border: 2px solid #304d2c;
  pointer-events: none;
}
.pic-drop::before {
  top: -14px;
  right: -14px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 14px 0 0;
}
.pic-drop::after {
  bottom: -14px;
  left: -14px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 14px;
}
.pic-drop__icon {
  display: block;
  color: #304d2c;
  margin-bottom: 4px;
}
.pic-drop__icon path {
  fill: currentColor;
}
.pic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 212px;
  height: 44px;
  background: #304d2c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.pic-btn:hover {
  background: #25401f;
}
/* The upload icon is drawn with strokes, the camera one with a fill; both
   follow the button's text colour. */
.pic-btn__icon {
  display: block;
  flex-shrink: 0;
}
.pic-btn__icon path {
  stroke: currentColor;
}
.pic-btn__icon--fill path {
  stroke: none;
  fill: currentColor;
}
/* Live camera view */
.pic-camera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pic-camera__video {
  width: 100%;
  max-height: 320px;
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}
.pic-camera__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.pic-btn--ghost {
  background: transparent;
  color: #304d2c;
  border: 1px solid #304d2c;
}
.pic-btn--ghost:hover {
  background: rgba(48, 77, 44, 0.08);
}
.pic-camera__error {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: #c0392b;
  text-align: center;
  margin-top: 16px;
}

.pic-drop__hint,
.pic-modal__note {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #304d2c;
  text-align: center;
}
.pic-drop__hint {
  margin-top: 4px;
}
.pic-modal__note {
  margin-top: 24px;
}
@media (max-width: 560px) {
  .pic-modal__dialog {
    padding: 28px 20px 24px;
  }
  .pic-modal__title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .pic-drop {
    padding: 36px 16px;
  }
  .pic-btn {
    width: 100%;
    max-width: 212px;
  }
}

/* Titles across every view of the modal - sign in, sign up and the
   recovery steps all share this header. */
@media (max-width: 1024px) {
  .auth-modal__title {
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
    letter-spacing: 0;
    color: #000000;
  }
}
@media (max-width: 480px) {
  .auth-modal__dialog {
    padding: 40px 22px 36px;
  }
  .auth-input,
  .auth-btn {
    height: 48px;
  }
}

/* ===========================================================
   HEADER USER MENU (after sign in)
   =========================================================== */
.user-menu {
  position: relative;
  display: none;
}
.user-menu.is-active {
  display: inline-flex;
}
/* Replaces .header__signin-btn in the same slot, so it carries the same
   metrics: 127x44 with a 10px radius. The 67x20 that used to be here is the
   mobile size and now lives in the 1024px query. */
.user-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
  width: 127px;
  height: 44px;
  padding: 0 16px;
  background: #304d2c;
  color: #fff;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.user-menu__btn:hover {
  background: #25401f;
}
.user-menu__avatar {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.user-menu__name {
  white-space: nowrap;
}
.user-menu__chevron {
  font-size: 10px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.user-menu.is-open .user-menu__chevron {
  transform: rotate(180deg);
}
.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 100%;
  width: 160px;
  background: #e7eae8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: none;
  z-index: 250;
}
.user-menu.is-open .user-menu__dropdown {
  display: block;
}
.user-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  transition: background-color var(--transition-base);
}
.user-menu__item i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  color: #1a1a1a;
}
.user-menu__item:hover {
  background: rgba(48, 77, 44, 0.1);
}

/* Mobile and tablet keep the smaller button this section used to define for
   every width. It has to sit after the base rule, not up in the main 1024px
   query: same specificity, so source order decides. */
@media (max-width: 1024px) {
  .user-menu__btn {
    gap: 2.66px;
    width: 67px;
    height: 20px;
    padding: 5.32px 13.31px 5.32px 13.04px;
    border-radius: 2.66px;
    font-size: 8px;
  }
  .user-menu__avatar {
    font-size: 10px;
  }
  .user-menu__chevron {
    font-size: 6px;
  }
}

/* ===========================================================
   CART CHECKOUT MODALS (card + confirm)
   =========================================================== */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.app-modal.is-open {
  display: flex;
}
.app-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #e7e7e7;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  animation: authPop 0.22s ease;
}
.app-modal__dialog--confirm {
  width: min(460px, 94vw);
  padding: 38px 40px;
  text-align: center;
}

/* Card modal */
.pay-title {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 24px;
}
.pay-brands {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.pay-mc {
  display: block;
}
.pay-visa {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: #1a1f71;
}
.pay-field {
  margin-bottom: 16px;
}
.pay-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid #b9bcb9;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #1a1a1a;
}
.pay-input::placeholder {
  color: #6e7e77;
}
.pay-input:focus {
  outline: none;
  border-color: #304d2c;
}
.pay-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.pay-row .pay-input {
  height: 46px;
}
.pay-actions {
  display: flex;
  gap: 14px;
}
.pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 26px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition-base);
}
.pay-btn--primary {
  background: #304d2c;
  color: #fff;
  border: 1px solid #304d2c;
}
.pay-btn--primary:hover {
  background: #25401f;
}
.pay-btn--cancel {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #9a9a9a;
}
.pay-btn--cancel:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Confirm modal */
.confirm-check {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #1a1a1a;
}
.confirm-hi {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.confirm-title {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
}
.confirm-text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4a4a4a;
  margin-bottom: 26px;
}
.confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: #304d2c;
  color: #fff;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.confirm-btn:hover {
  background: #25401f;
}