/* ── 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;
}



.offers-section {
  margin-bottom: 50px;
  padding: 0 60px;
}

/* Breadcrumb — same treatment as the shipping page: side padding lined up
   with .offers-section, breathing room above, and a hairline rule below */
.offers-breadcrumb-wrap {
  padding: 0 60px;
}
.offers-breadcrumb-wrap .product-breadcrumb {
  padding: 18px 0 14px;
  border-bottom: 1px solid #e3e3e3;
}

.product-slider__track--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.promo-banner {
  position: relative;
  /* 1379px wide in the 1440 frame, i.e. 30px clear of the edge — it reaches
     30px past the 60px padding of .offers-section on each side */
  width: calc(100% + 60px);
  height: 348px;
  margin: 40px -30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.promo-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The 20% black scrim the Figma section carries over its image fill — it keeps
   the white text legible whatever the photo does */
.promo-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}

/* Per Figma: the blocks stack against the left edge, vertically centred inside
   60px padding. Title, subtitle, buttons and chips are all 24px apart, which is
   exactly the 228px the 348px banner leaves once the padding is taken off. */
.promo-banner__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 60px;
  gap: 24px;
  color: #fff;
}

.promo-banner__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.promo-banner h1 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
}

.promo-banner p {
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.promo-banner__buttons {
  display: flex;
  gap: 12px;
}

.btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  width: 200px;
  height: 48px;
  border-radius: 8px;
  /* Label metrics are shared by both variants; without a size here the buttons
     fall back to the UA default of ~13.3px */
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.btn-outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.btn-primary {
  border: none;
  background: #304d2c;
  color: #fff;
}

.promo-banner__categories {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.promo-banner__categories button {
  padding: 8px 16px;
  background: rgba(217, 217, 217, 0.5);
  border-radius: 6px;
}

/* Two lines: one of name, one of price. Both children stretch to the card so
   they have a width to truncate against - hugging their text would let them
   run past the card edge instead of ellipsing. */
.product-card__info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.product-card__name {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  padding: 15px 15px 0;
  /* One line, then an ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One line of text, not split into spans */
.product-card__price {
  padding: 0 15px 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-offer {
  margin: 60px 0;
}

/* 550px left column — the width the title, description and the 200px button
   pair are all specced against; 360px made the buttons shrink to fit */
.hero-offer__top {
  display: grid;
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}

.hero-offer__left {
  display: flex;
  flex-direction: column;
  gap: 50px;
  height: 100%;
}

.hero-offer__cards {
  display: flex;
  gap: 40px;
}

/* Poppins/FontSize_1/Bold — 40/48, the same token the promo banner title uses */
.hero-offer__content h2 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #000000;
  margin-bottom: 24px;
}

/* Roboto 16/24 — the token is named Inter but resolves to Roboto, as elsewhere */
.hero-offer__content p {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 24px;
}

.hero-offer__buttons {
  display: flex;
  gap: 14px;
}

/* No size override here — the 200x48 of the base .btn is what the mockup uses */

.btn-light {
  border: 1px solid #000000;
  background: white;
}

.btn-dark {
  background: #000000;
  color: white;
  border: none;
}

.btn-green {
  background: #304d2c;
  color: white;
  border: none;
}

.mini-card {
  position: relative;
  /* two across the 550px column with the 40px gap of .hero-offer__cards.
     min-width:0 lets them hold that half — as flex items they would otherwise
     floor at the width of their own nowrap label instead of truncating. */
  width: calc(50% - 20px);
  min-width: 0;
  height: 310px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  background: #304d2c;
}

.mini-card img {
  width: 100%;
  /* leaves 84px for the info block below: 32 padding + 24 label + 28 title */
  height: 226px;
  object-fit: cover;
}

.mini-card__badge {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 24px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 11px;
  /* tucks into the card's own 6px corner, with the inner corner rounded */
  border-radius: 6px 0;
}

.mini-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}
.mini-card__info small {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.mini-card__info h4 {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  /* One 28px line, truncated — "Perfect for pasta & salad" is wider than the
     card, and wrapping it to two lines would overflow the 84px info block */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The photo takes its height from the left column beside it (528px on desktop:
   168 of title/description/buttons + 50 gap + 310 cards). Absolute positioning
   keeps the photo's own height out of the row calculation, so the column drives
   it at every width instead of a hardcoded number per breakpoint. */
.hero-offer__image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.hero-offer__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-offer__bottom {
  display: grid;
  /* same 550px as the top row — the deal card carries the same button pair */
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 60px;
  margin-top: 60px;
}

.deal-card h2 {
  margin-bottom: 24px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #000000;
}

.deal-card p {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 24px;
}

.limited-offer {
  background: #304d2c;
  color: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.limited-offer img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}

.limited-offer h4 {
  margin-bottom: 8px;
}

.limited-offer p {
  margin-bottom: 8px;
}

.limited-offer__tags {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.limited-offer__tags span {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.more-deals {
  margin-top: 60px;
  text-align: center;
}

.more-deals h2 {
  font-size: 44px;
  font-weight: 700;
  color: #304d2c;
  margin-bottom: 14px;
}

.more-deals p {
  color: #666;
  margin-bottom: 28px;
}

.more-deals__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Green outline and label here, unlike the black one in the hero and deal card */
.more-deals__buttons .btn-light {
  border-color: #304d2c;
  color: #304d2c;
}

@media (max-width: 1200px) {
  .product-slider__track--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .product-slider__track--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Two per row down to 360, not one: at 390 the 20px page padding and 20px gap
   put each card at 165px, which is the 163px of the mockup. */
@media (max-width: 480px) {
  .product-slider__track--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 165 photo + ~52 of name and price = the 217px card */
  .product-card__img-wrap {
    height: 165px;
  }

  /* The shared mobile rule pins this to 32px, which clips the two lines the
     offers card puts inside it */
  .product-card__info {
    height: auto;
  }

  .product-card__name {
    font-size: 10px;
    line-height: 13px;
    padding: 8px 10px 0;
  }

  .product-card__price {
    padding: 0 10px 8px;
    font-size: 12px;
    line-height: 20px;
  }
}

/* ===== TABLET =====
   The 550px left column no longer leaves the photo enough room, so both rows
   move to even halves. Everything else steps down from the desktop sizes. */
@media (max-width: 1024px) {
  .offers-section,
  .offers-breadcrumb-wrap {
    padding: 0 40px;
  }

  /* No breakout below desktop — the banner lines up with the section */
  .promo-banner {
    width: 100%;
    height: 280px;
    margin: 30px 0;
  }

  .promo-banner__content {
    padding: 40px;
  }

  .promo-banner h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .hero-offer {
    margin: 40px 0;
  }

  /* minmax(0,...) rather than a bare 1fr: grid items floor at min-content, and
     the nowrap card labels would otherwise push the left column past half */
  .hero-offer__top,
  .hero-offer__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .hero-offer__bottom {
    margin-top: 40px;
  }

  .hero-offer__left {
    gap: 30px;
  }

  .hero-offer__cards {
    gap: 20px;
  }

  /* Height follows the photo now, so the cards keep their proportions as the
     column narrows instead of staying 310px tall */
  .mini-card {
    width: calc(50% - 10px);
    height: auto;
  }

  .mini-card img {
    height: auto;
    aspect-ratio: 250 / 226;
  }

  .hero-offer__content h2,
  .deal-card h2,
  .more-deals h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ===== LARGE PHONES =====
   Both rows stay two-up as in the mockup - text and cards on the left, photo
   and green panel on the right - at sizes between the tablet tier and the
   390px frame below. */
@media (max-width: 600px) {
  .offers-section,
  .offers-breadcrumb-wrap {
    padding: 0 24px;
  }

  .promo-banner {
    height: 200px;
    margin: 24px 0;
  }

  /* The block hugs its widest child (the button row) and the title and text
     centre on that, which is how the mockup sits it left of centre */
  .promo-banner__content {
    width: fit-content;
    align-items: center;
    text-align: center;
    padding: 36px 33px;
    gap: 8px;
  }

  .promo-banner h1 {
    font-size: 24px;
    line-height: 28px;
  }

  .promo-banner__buttons .btn {
    width: 135px;
  }

  /* The category chips are not in the mobile mockup */
  .promo-banner__categories {
    display: none;
  }

  .hero-offer__top,
  .hero-offer__bottom {
    gap: 14px;
  }

  .hero-offer__bottom {
    margin-top: 32px;
  }

  .hero-offer__left {
    gap: 12px;
  }

  .hero-offer__content h2,
  .deal-card h2,
  .more-deals h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
  }

  .hero-offer__content p,
  .deal-card p {
    margin-bottom: 12px;
  }

  /* Buttons share the column rather than holding the 200px desktop width */
  .btn {
    width: auto;
    height: 36px;
    padding: 6px 12px;
  }

  .hero-offer__buttons {
    gap: 10px;
  }

  .hero-offer__buttons .btn {
    flex: 1;
    min-width: 0;
  }

  .hero-offer__cards {
    gap: 10px;
  }

  .mini-card {
    width: calc(50% - 5px);
  }

  .mini-card img {
    aspect-ratio: 122 / 133;
  }

  .mini-card__badge {
    height: 20px;
    font-size: 10px;
  }

  /* One line of label only — the subtitle is not in the mobile mockup */
  .mini-card__info {
    padding: 4px 8px;
  }

  .mini-card__info small {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mini-card__info h4 {
    display: none;
  }

  .limited-offer {
    padding: 12px;
    gap: 12px;
  }

  .limited-offer img {
    width: 70px;
    height: 70px;
  }

  /* Tags are not in the mobile mockup either */
  .limited-offer__tags {
    display: none;
  }

  /* That hidden block was the only thing separating these two inline elements */
  .limited-offer span,
  .limited-offer small {
    display: block;
  }

  .more-deals {
    margin-top: 40px;
  }

  .more-deals p {
    margin-bottom: 20px;
  }

  .more-deals__buttons {
    gap: 20px;
  }

  .more-deals__buttons .btn {
    padding: 6px 16px;
  }
}

/* ===== THE 390px MOCKUP =====
   Still two columns. Anchored on the mini card photo, which is 79x87 there:
   that puts the columns at ~171px and the button pair at ~82px each, so the
   type and controls step down to suit. */
@media (max-width: 480px) {
  .offers-section,
  .offers-breadcrumb-wrap {
    padding: 0 20px;
  }

  .promo-banner {
    height: 130px;
    margin: 16px 0;
  }

  /* 40 padding + 20 title + 6 + 32 (two lines) + 6 + 24 buttons = the 130px */
  .promo-banner__content {
    padding: 20px;
    gap: 6px;
  }

  .promo-banner h1 {
    font-size: 16px;
    line-height: 20px;
  }

  .promo-banner p {
    font-size: 12px;
    line-height: 16px;
  }

  .promo-banner__buttons {
    gap: 8px;
  }

  .promo-banner__buttons .btn {
    width: 88px;
  }

  .hero-offer {
    margin: 20px 0;
  }

  .hero-offer__top,
  .hero-offer__bottom {
    gap: 10px;
  }

  .hero-offer__bottom {
    margin-top: 20px;
  }

  .hero-offer__left {
    gap: 8px;
  }

  .hero-offer__content h2,
  .deal-card h2,
  .more-deals h2 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 6px;
  }

  .hero-offer__content p,
  .deal-card p,
  .more-deals p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
  }

  .btn {
    height: 24px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 16px;
    border-radius: 4px;
  }

  .hero-offer__buttons {
    gap: 6px;
  }

  .hero-offer__cards {
    gap: 8px;
  }

  .mini-card {
    width: calc(50% - 4px);
    border-radius: 4px;
  }

  .mini-card img {
    aspect-ratio: 79 / 87;
  }

  .mini-card__badge {
    height: 14px;
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 4px 0;
  }

  .mini-card__info {
    padding: 2px 6px;
  }

  .mini-card__info small {
    font-size: 11px;
    line-height: 14px;
  }

  .limited-offer {
    padding: 8px;
    gap: 8px;
  }

  .limited-offer img {
    width: 46px;
    height: 46px;
    border-radius: 4px;
  }

  /* Poppins here, Inter on the lines under it. The 8px line box is tighter than
     the 12px type it holds, which is how the card packs into its height. */
  .limited-offer h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 8px;
    margin-bottom: 6px;
  }

  .limited-offer p,
  .limited-offer span {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
  }

  .limited-offer p {
    margin-bottom: 0;
  }

  .limited-offer small {
    font-size: 10px;
    line-height: 8px;
  }

  .more-deals {
    margin-top: 24px;
  }

  .more-deals__buttons {
    gap: 12px;
  }

  .more-deals__buttons .btn {
    padding: 4px 10px;
  }
}



/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Poppins:wght@700&display=swap");

.terms {
  width: 100%;
  padding: 40px 0;
}

.terms__container {
  width: 100%;
  max-width: 859px;
  margin-left: 30px;
  padding: 15px 14px;
  box-sizing: border-box;
}

.terms__title {
  margin: 0 0 12px;

  font-family: "Poppins", sans-serif;
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;

  color: #000;
}

.terms__text {
  margin: 0;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  display: flex;
  align-items: center;
  color: #000000;
}

.terms__definitions {
  margin-bottom: 20px;
}

.terms__section {
  margin-top: 20px;
}

.terms__subtitle {
  margin: 0 0 10px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #304d2c;
}

.terms__section .terms__text + .terms__text {
  margin-top: 0;
}

/* Tablet */
@media (max-width: 768px) {
  .terms {
    padding: 40px 16px;
  }

  .terms__title {
    font-size: 26px;
    line-height: 38px;
  }

  .terms__subtitle {
    font-size: 18px;
    line-height: 26px;
  }

  .terms__text {
    font-size: 12px;
    line-height: 18px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .terms__title {
    font-size: 22px;
    line-height: 32px;
  }

  .terms__subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .terms__text {
    font-size: 11px;
    line-height: 17px;
  }
}


/* ===========================================================
   PURCHASE HISTORY PAGE
   =========================================================== */
.hist-page {
  padding: 40px 0 64px;
}
.hist-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.hist-breadcrumb {
  margin: 0 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d8d8d8;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: #6e7e77;
}
.hist-breadcrumb a {
  color: #6e7e77;
  transition: color var(--transition-base);
}
.hist-title {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #000000;
  margin: 26px 0 18px;
}

/* Panel + table */
.hist-panel {
  background-color: #f4f4f4;
  border-radius: 16px;
  padding: 28px 32px 40px;
}
.hist-row {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  align-items: center;
  gap: 24px;
}
.hist-row--head {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #506059;
  padding-bottom: 24px;
}
.hist-row + .hist-row {
  padding-top: 26px;
}
.hist-product {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hist-product__img {
  width: 72px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.hist-product__name {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #1a1a1a;
  max-width: 180px;
}
.hist-status {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #304d2c;
}
.hist-status--pending {
  color: #00b365;
}
.hist-status--delivered {
  color: #304d2c;
}
.hist-qty {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #304d2c;
}
.hist-price {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  display: flex;
  align-items: center;
}
.hist-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 22px;
  background: #304d2c;
  color: #fff;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.hist-more:hover {
  background: #25401f;
}
.hist-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}
.hist-back i {
  font-size: 15px;
}

@media (max-width: 768px) {
  .hist-panel {
    background: transparent;
    padding: 0;
  }

  .hist-row--head {
    display: none !important;
  }

  .hist-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    background: #fff;
    border: 1px solid #f5f5f5;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
  }
.hist-status--pending {
  color: #00b365 !important;
}
  .hist-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hist-product__img {
    width: 100%;
    height: 190px;
    border-radius: 12px;
    object-fit: cover;
  }

  .hist-product__name {
    font-size: 18px;
    line-height: 1.4;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    max-width: none;
  }

  .hist-status,
  .hist-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #304d2c;
  }

  .hist-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
  }

  .hist-status::before {
    content: "Status";
    font-weight: 400;
    color: #6e7e77;
  }

  .hist-qty::before {
    content: "Quantity";
    font-weight: 400;
    color: #6e7e77;
  }

  .hist-price::before {
    content: "Price";
    font-weight: 400;
    color: #6e7e77;
  }

  .hist-more {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    border-radius: 10px;
  }

  .hist-back {
    margin-top: 28px;
  }

  .hist-title {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;

    color: #000000;
  }

  .hist-status .hist-qty .hist-price {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #304d2c;
  }
}


/* ===========================================================
   FAVOURITE PAGE
   =========================================================== */
.fav-page {
  padding: 40px 0 64px;
}
.fav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.fav-breadcrumb {
  margin: 0 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d8d8d8;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #6e7e77;
}
.fav-breadcrumb a {
  color: #6e7e77;
}
.fav-title {
  font-family: "Inter", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #111;
  margin: 24px 0 22px;
}
.fav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
/* favourited hearts are filled green */
.fav-heart {
  font-size: 18px;
  color: #304d2c;
  pointer-events: none;
  transition: color var(--transition-base);
}
.fav-grid .product-card__wishlist:hover .fav-heart {
  color: #304d2c;
}
.fav-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

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

@media (max-width: 1000px) {
  .fav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .fav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-card__info {
    height: 40px;
  }
}
@media (max-width: 380px) {
  .fav-grid {
    grid-template-columns: 1fr;
  }
  .product-card__info {
    height: 35px;
  }
}



/* Background */

.overlay {
  width: 100%;
  height: 100vh;
  background: rgba(110, 126, 119, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px; 
}

/* Modal */

.modal {
  position: relative;
  max-width: 630px;
  background: #e7eae8;
  border-radius: 10px;
  padding: 30px 28px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  width: 100%;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  text-decoration: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #6f6f6f;
  cursor: pointer;
}

.modal__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

.modal h2 {  
margin-bottom: 20px;
font-weight: 700;
font-size: 24px;
line-height: 29px;
align-items: center;
text-align: center;
color: #000000;

}

.modal p {
  margin-bottom: 24px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  align-items: center;
  text-align: center;
  color: #000000;
}

.modal__buttons {
  display: flex;
  gap: 14px;
}

.btn {
  flex: 1;
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  background: #304d2c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}
.btn {
  flex: 1;
  min-width: 0;
}


.contact {
  margin-bottom: 60px;
}

.contact__container {
  /* max-width: 1322px; */
  margin: 0 60px;
}

.contact__title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 40px;
}

.contact__content {
  display: flex;
  gap: 110px;
}

.contact__info {
  flex-shrink: 0;
}

.contact__item {
  display: flex;
  align-items: center; 
  gap: 10px;
  margin-bottom: 40px;
}

.contact__item h3 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 1px;
}

.contact__item p {
  font-size: 16px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.8);
}

.footer__map {
  width: 356px !important;
  height: 225px;
}

.contact__form {
  flex: 1;
}

.contact__row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.contact__row input {
  width: 50%;
}

.contact__form input,
.contact__form textarea {
  width: 100%;
  border: 1px solid #9aa596;
  border-radius: 4px;
  padding: 16px;
  font-size: 16px;
}

.contact__subject {
  margin-bottom: 20px;
}

.contact__message {
  height: 220px;
  resize: none;
  margin-bottom: 24px;
}
.contact__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.contact__btn {
  max-width: 413px;
  height: 63px;
  border: none;
  border-radius: 8px;
  background: #31572c;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
@media (max-width: 767px) {
  .contact__container {
    margin: 0 20px;
  }


  .contact__title {
    font-size: 28px;
    text-align: left;
    margin-bottom: 24px;
  }
  .contact__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .contact__info,
  .contact__form {
    width: 100%;
  }

  .footer__map {
    width: 100% !important;
    height: 250px;
  }

  .contact__row {
    flex-direction: column;
    gap: 20px;
  }

  .contact__row input {
    width: 100%;
  }

  .contact__btn {
    max-width: 100%;
  }
}

.categories-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 64px;
}

.categories-banner {
  position: relative;
  margin: 20px 0;
  border-radius: 20px;
  overflow: hidden;
}

.categories-banner__image {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.categories-banner__content {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  color: #fff;
  max-width: 320px;
}

.categories-banner__title {
  margin: 0 0 32px;
  font-size: 40px;
  line-height: 1.15;
  font-family: "Poppins";
  font-style: normal;
  line-height: 60px;
  text-align: center;
  color: #ffffff;
}

.categories-banner__buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

.categories-banner__btn {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
}

.categories-banner__btn--outline {
  border: 1px solid #ffffff;
  color: #fff;
  background: transparent;
}

.categories-banner__btn--filled {
  background: #304d2c;
  color: #fff;
}

.categories-banner__btn:hover {
  opacity: 0.9;
}
.products-section__title {
  margin-top: 20px;
}

@media (max-width: 992px) {
  .categories-banner__image {
    height: 360px;
  }

  .categories-banner__title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .categories-banner__content {
    left: 32px;
  }

  .categories-banner__title {
    font-size: 28px;
    margin-bottom: 24px;
  }
    .categories-banner__image {
    height: 280px;
  }
}

@media (max-width: 576px) {
  .categories-banner__content {
    left: 20px;
    max-width: unset;
  }

  .categories-banner__title {
    font-size: 24px;
    /* white-space: nowrap; */
    font-size: 20px;
    line-height: 1.2;
  }
    .categories-banner__image {
    height: 150px;
  }

  .categories-banner__buttons {
    flex-direction: row;
    gap: 8px;
  }

  .categories-banner__btn {
    flex: 1;
    min-width: 0;
    padding: 8px;
    font-size: 12px;
  }
}


/* ===========================
   ABOUT
=========================== */

.about {
  padding: 40px 0 80px;
}

.about__container {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
}

/* ===========================
   BREADCRUMB
=========================== */

.cart-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 14px;
}

.cart-breadcrumb a,
.cart-breadcrumb span {
  color: #8a8a8a;
}

.cart-breadcrumb a {
  text-decoration: none;
}

/* ===========================
   TITLE
=========================== */

.about__title {
  margin: 0 0 48px;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}

/* ===========================
   SECTIONS
=========================== */

.about__section {
  display: flex;
  justify-content: space-between;
  gap: 70px;
  margin-bottom: 70px;
}

.about__section--first {
  align-items: center;
}

.about__section--second {
  align-items: flex-start;
}

.about__content {
  flex: 1;
}

.about__image {
  flex: 0 0 738px;
  width: 738px;
  height: 389px;
  overflow: hidden;
  border-radius: 10px;
}

.about__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__item:not(:last-child) {
  margin-bottom: 40px;
}

.about__item h2 {
  margin: 0 0 20px;
  color: #304d2c;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.about__item p {
  margin: 0;
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

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

@media (max-width: 992px) {
  .about {
    padding: 30px 0 60px;
  }

  .about__section {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .about__section--first .about__image,
  .about__section--second .about__image {
    order: -1;
  }

  .about__image {
    flex: none;
    width: 100%;
    height: auto;
  }

  .about__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 738 / 389;
    object-fit: cover;
  }

  .about__item h2 {
    font-size: 26px;
  }
}

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

@media (max-width: 390px) {
  .about__container {
    width: calc(100% - 24px);
  }

  .cart-breadcrumb {
    margin-bottom: 24px;
    font-size: 12px;
  }

  .about__title {
    margin-bottom: 24px;
  }

  .about__section {
    gap: 24px;
    margin-bottom: 40px;
  }

  .about__item:not(:last-child) {
    margin-bottom: 24px;
  }

  .about__item h2 {
    margin-bottom: 12px;
    font-size: 22px;
  }

  .about__item p {
    line-height: 1.7;
  }

  .about__image {
    border-radius: 8px;
  }
}