/* Surferspoint — custom CSS overrides */

/* ==========================================================================
   Typography — Global font families
   ========================================================================== */

:root {
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Manrope', sans-serif;

  /* Design tokens — color palette */
  --color-navy: #0b2a3a;
  --color-navy-light: #1a2e3a;
  --color-teal: #2cc5b8;
  --color-cream: #f8f5f0;
  --color-warm-gray: #eae6df;
  --color-warm-gray-dark: #ddd8cf;
  --color-gray-blue: #6b7a85;
  --color-red: #e53935;

  /* Focus ring — shared across all interactive elements */
  --focus-ring: 0 0 0 .2rem rgba(20, 190, 255, .25);
  --focus-ring-color: rgba(20, 190, 255, .25);

  /* Motion — transition durations */
  --motion-fast: .15s;
  --motion-base: .2s;
  --motion-slow: .35s;
  --motion-slowest: .5s;

  /* Bootstrap theme overrides */
  --bs-primary: #2cc5b8;
  --bs-light: #f8f5f0;
  --bs-dark: #0b2a3a;

  /* Header button tokens — shared by SearchButton, CartButton, Header toggler */
  --header-search-bg: rgba(255, 255, 255, .72);
  --header-search-border: rgba(10, 30, 45, .18);
  --header-search-fg: rgba(7, 28, 38, .92);
  --header-search-muted: rgba(7, 28, 38, .62);
  --header-search-shadow: 0 10px 25px rgba(0, 0, 0, .10);
  --header-search-radius: 10px;
  --header-search-btn-size: 34px;
  --header-search-icon-size: 16px;
  --header-search-open-width: clamp(220px, 28vw, 360px);
  --header-search-open-height: 36px;
  --header-search-gap: 10px;

  /* Footer column tokens — shared by FooterLinkWidget and FooterContactBlock */
  --footer-col-title: rgba(255, 255, 255, .92);
  --footer-col-link: rgba(255, 255, 255, .82);
  --footer-col-link-hover: rgba(255, 255, 255, .98);
}

@media (max-width: 768px) {
  :root {
    --header-search-btn-size: 32px;
    --header-search-icon-size: 15px;
    --header-search-open-width: 100%;
    --header-search-open-height: 36px;
  }
}

html {
  font-size: 18px;
}

/* App-like feel: prevent drag and text selection on links and images */
a {
  -webkit-user-drag: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

body {
  font-family: var(--font-body);
  font-style: normal;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-style: normal;
}

.section-heading {
  color: var(--color-navy);
  line-height: 1.25;
}

/* Shared circular nav button — used by testimonials & latest-products carousels */
.nav-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background-color: var(--color-warm-gray);
  color: var(--color-gray-blue);
  font-size: .85rem;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.nav-btn-circle:hover {
  background-color: var(--color-warm-gray-dark);
  color: var(--color-navy);
}

.nav-btn-circle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--focus-ring-color);
}

@media (max-width: 575.98px) {
  .nav-btn-circle {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
  }
}

/* Utility: hide filtered-out product cards */
.hidden {
  display: none !important;
}

/* ==========================================================================
   AboutContent — about page layout
   ========================================================================== */

.about-content__hero {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}

.about-content__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.about-content__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 42, 58, .25) 0%,
    rgba(11, 42, 58, .65) 100%
  );
  pointer-events: none;
}

.about-content__hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3rem 0 2.5rem;
}

.about-content__hero-title {
  color: #fff;
  font-style: italic;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
  margin: 0;
}

.about-content__title {
  color: var(--color-navy);
  font-style: italic;
  line-height: 1.15;
}

.about-content__heading {
  color: var(--color-navy);
  font-size: 1.4rem;
  line-height: 1.25;
}

.about-content__text {
  color: var(--color-navy-light);
  line-height: 1.7;
}

.about-content__image-wrap {
  border-radius: .875rem;
  overflow: hidden;
  height: 100%;
  min-height: 220px;
}

.about-content__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 575.98px) {
  .about-content__hero {
    min-height: 280px;
  }

  .about-content__hero-content {
    padding: 2rem 0 1.5rem;
  }

  .about-content__image-wrap {
    min-height: 180px;
  }

  .about-content__heading {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   AddToCartButton — primary purchase CTA
   ========================================================================== */

.add-to-cart-btn {
  display: block;
  width: 100%;
  padding: .85rem 2rem;
  border: none;
  border-radius: 50px;
  background: var(--color-navy);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(44, 197, 184, .25);
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.add-to-cart-btn:hover {
  background: var(--color-navy-light);
  box-shadow: 0 10px 30px rgba(44, 197, 184, .35);
  transform: translateY(-1px);
}

.add-to-cart-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(44, 197, 184, .2);
}

.add-to-cart-btn:focus-visible {
  outline: none;
  box-shadow: 0 8px 24px rgba(44, 197, 184, .25), var(--focus-ring);
}

/* ==========================================================================
   ArticleBody — blog article rich text content
   ========================================================================== */

.article-body__content {
  max-width: none;
  color: var(--color-navy-light);
  line-height: 1.8;
  font-size: .95rem;
}

.article-body__content h2,
.article-body__content h3 {
  color: var(--color-navy);
  margin-top: 2rem;
  margin-bottom: .75rem;
}

.article-body__content p {
  margin-bottom: 1.25rem;
}

.article-body__content p:last-child {
  margin-bottom: 0;
}

.article-body__content img {
  float: left;
  max-width: 45%;
  height: auto;
  border-radius: .75rem;
  margin: .25rem 1.5rem 1rem 0;
  box-shadow: 0 .35rem 1rem rgba(7, 28, 38, .08);
}

.article-body__content blockquote {
  border-left: 3px solid var(--color-teal);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: var(--color-gray-blue);
  font-style: italic;
}

/* Clear floats after content */
.article-body__content::after {
  content: '';
  display: table;
  clear: both;
}

@media (max-width: 575.98px) {
  .article-body__content img {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* ==========================================================================
   ArticleHero — blog article page hero with breadcrumbs + title
   ========================================================================== */

.article-hero {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}

.article-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.article-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 42, 58, .2) 0%,
    rgba(11, 42, 58, .7) 100%
  );
  pointer-events: none;
}

.article-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2.5rem 0 2rem;
}

/* Override breadcrumb colors for dark background */
.article-hero .breadcrumbs__link,
.article-hero .breadcrumb-item.active,
.article-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .75);
}

.article-hero .breadcrumbs__link:hover {
  color: #fff;
}

.article-hero__title {
  color: #fff;
  font-style: italic;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

@media (max-width: 575.98px) {
  .article-hero {
    min-height: 280px;
  }

  .article-hero__content {
    padding: 2rem 0 1.5rem;
  }
}

/* ==========================================================================
   BlogGrid — responsive blog article grid
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ==========================================================================
   BlogHero — blog listing page hero with background image
   ========================================================================== */

.blog-hero {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}

.blog-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.blog-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 42, 58, .25) 0%,
    rgba(11, 42, 58, .65) 100%
  );
  pointer-events: none;
}

.blog-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3rem 0 2.5rem;
}

.blog-hero__title {
  color: #fff;
  font-style: italic;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

@media (max-width: 575.98px) {
  .blog-hero {
    min-height: 280px;
  }

  .blog-hero__content {
    padding: 2rem 0 1.5rem;
  }
}

/* ==========================================================================
   BlogPostCard — blog article card
   ========================================================================== */

.blog-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: .875rem;
  overflow: hidden;
  box-shadow: 0 .35rem 1rem rgba(7, 28, 38, .08);
  color: inherit;
  transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.blog-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .7rem 1.5rem rgba(7, 28, 38, .14);
}

.blog-post-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--focus-ring-color), 0 .35rem 1rem rgba(7, 28, 38, .08);
}

/* Media */

.blog-post-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.blog-post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-slow) ease, filter var(--motion-slow) ease;
  filter: saturate(1.04) contrast(1.02);
}

.blog-post-card:hover .blog-post-card__image {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04);
}

/* Category tag */

.blog-post-card__tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .2rem .65rem;
  border-radius: 50px;
  background: var(--color-teal);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Body */

.blog-post-card__body {
  padding: 1rem 1.1rem 1.25rem;
}

.blog-post-card__title {
  color: var(--color-navy);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-post-card__excerpt {
  color: var(--color-gray-blue);
  font-size: .85rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .blog-post-card__body {
    padding: .85rem .9rem 1rem;
  }

  .blog-post-card__title {
    font-size: .9rem;
  }

  .blog-post-card__excerpt {
    font-size: .8rem;
    -webkit-line-clamp: 2;
  }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

:root {
  --breadcrumbs-fg: var(--color-gray-blue);
  --breadcrumbs-active-fg: var(--color-navy);
  --breadcrumbs-divider: "/";
}

.breadcrumbs {
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-item-padding-x: .4rem;
  font-size: .8rem;
}

.breadcrumbs__link {
  color: var(--breadcrumbs-fg);
  text-decoration: none;
  transition: color var(--motion-fast) ease;
}

.breadcrumbs__link:hover {
  color: var(--breadcrumbs-active-fg);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

.breadcrumbs__link:focus-visible {
  outline: none;
  border-radius: .25rem;
  box-shadow: var(--focus-ring);
}

.breadcrumbs__item.active {
  color: var(--breadcrumbs-active-fg);
  font-weight: 600;
}

/* ==========================================================================
   Cart — CartEmpty, CartItemList, CartItemRow, CartSummary
   ========================================================================== */

/* --- CartEmpty --- */

.cart-empty {
  padding: 3rem 1rem;
}

.cart-empty__icon {
  font-size: 3rem;
  color: var(--color-warm-gray-dark);
  display: block;
  margin-bottom: 1rem;
}

.cart-empty__title {
  color: var(--color-navy);
  margin-bottom: .5rem;
}

.cart-empty__text {
  color: var(--color-gray-blue);
  margin-bottom: 1.5rem;
}

.cart-empty__cta {
  display: inline-block;
  padding: .65rem 1.5rem;
  border-radius: 50px;
  background: var(--color-navy);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.cart-empty__cta:hover {
  background: var(--color-navy-light);
  color: #fff;
  transform: translateY(-1px);
}

.cart-empty__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- CartItemList --- */

.cart-item-list__th {
  color: var(--color-gray-blue);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--color-warm-gray);
  padding: .6rem .5rem;
  white-space: nowrap;
}

/* --- CartItemRow --- */

.cart-item-row td {
  padding: .85rem .5rem;
  font-size: .9rem;
  color: var(--color-navy-light);
  vertical-align: middle;
}

.cart-item-row__thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center;
  border-radius: .4rem;
  border: 1px solid rgba(10, 30, 45, .08);
  flex-shrink: 0;
}

.cart-item-row__name {
  color: var(--color-navy);
  font-size: .9rem;
  line-height: 1.3;
}

.cart-item-row__link:hover .cart-item-row__name {
  color: var(--color-teal);
}

.cart-item-row__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  flex-shrink: 0;
}

.cart-item-row__price {
  color: var(--color-navy);
  white-space: nowrap;
}

.cart-item-row__remove-btn {
  border: none;
  background: transparent;
  color: var(--color-gray-blue);
  font-size: .85rem;
  padding: .35rem;
  border-radius: .25rem;
  cursor: pointer;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.cart-item-row__remove-btn:hover {
  color: var(--color-red);
  background: rgba(229, 57, 53, .08);
}

.cart-item-row__remove-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- CartSummary --- */

.cart-summary {
  padding: 1.5rem 0;
  border-top: 2px solid var(--color-warm-gray);
}

.cart-summary__total {
  color: var(--color-navy);
  font-size: 1.35rem;
  margin-bottom: .35rem;
}

.cart-summary__info {
  color: var(--color-gray-blue);
  font-size: .85rem;
  margin-bottom: 0;
}

/* --- Responsive --- */

@media (max-width: 575.98px) {
  .cart-item-row__thumb {
    width: 42px;
    height: 42px;
  }

  .cart-item-row td {
    font-size: .82rem;
    padding: .7rem .35rem;
  }

  .cart-summary__total {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Category Card (3.1.2.x) — background image tile with centered label
   ========================================================================== */

:root {
  --category-card-radius: 1rem;
  --category-card-shadow: 0 .7rem 1.5rem rgba(7, 28, 38, .16);
  --category-card-shadow-hover: 0 1rem 2rem rgba(7, 28, 38, .22);
  --category-card-border: rgba(255, 255, 255, .45);
  --category-card-title-color: rgba(255, 255, 255, .96);
  --category-card-title-shadow:
    0 3px 12px rgba(0, 0, 0, .55),
    0 1px 0 rgba(0, 0, 0, .25);
  --category-card-overlay-main: linear-gradient(
    180deg,
    rgba(255, 255, 255, .06) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(8, 40, 65, .08) 56%,
    rgba(8, 40, 65, .30) 100%
  );
  --category-card-overlay-accent: radial-gradient(
    circle at 84% 14%,
    rgba(248, 218, 160, .42) 0%,
    rgba(248, 218, 160, .18) 18%,
    rgba(248, 218, 160, 0) 42%
  );
  --category-card-bg: rgba(240, 244, 246, 1);
}

.category-card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 20 / 11;
  overflow: hidden;
  border-radius: var(--category-card-radius);
  background: var(--category-card-bg);
  box-shadow: var(--category-card-shadow);
  isolation: isolate;
  transform: translateY(0);
  transition:
    transform var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    var(--category-card-overlay-accent),
    var(--category-card-overlay-main);
  pointer-events: none;
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--category-card-border),
    inset 0 -1.2rem 2rem rgba(8, 40, 65, .06);
  pointer-events: none;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--category-card-shadow-hover);
}

.category-card:active {
  transform: translateY(0);
}

.category-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 .2rem var(--focus-ring-color),
    var(--category-card-shadow-hover);
}

.category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform var(--motion-slow) ease, filter var(--motion-slow) ease;
  filter: saturate(1.04) contrast(1.02);
}

.category-card:hover .category-card__image,
.category-card:focus-visible .category-card__image {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04);
}

.category-card__body {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card__title {
  margin: 0;
  color: var(--category-card-title-color);
  font-weight: 800;
  line-height: .96;
  letter-spacing: .02em;
  text-shadow: var(--category-card-title-shadow);
  transform: translateY(.02em);
  transition: transform var(--motion-base) ease, color var(--motion-base) ease;
  user-select: none;
}

.category-card:hover .category-card__title,
.category-card:focus-visible .category-card__title {
  transform: translateY(.02em) scale(1.015);
  color: rgba(255, 255, 255, .99);
}

@media (max-width: 768px) {
  :root {
    --category-card-radius: .85rem;
    --category-card-shadow: 0 .55rem 1.15rem rgba(7, 28, 38, .15);
    --category-card-shadow-hover: 0 .75rem 1.45rem rgba(7, 28, 38, .20);
  }

}

/* ==========================================================================
   Category Intro — category header block (product category + product list)
   ========================================================================== */

.category-intro {
}

.category-intro__title {
  color: var(--color-navy);
  font-style: italic;
  line-height: 1.15;
}

.category-intro__description {
  color: var(--color-gray-blue);
  line-height: 1.6;
  max-width: 70ch;
}

/* ==========================================================================
   CategoryPills — blog category filter links
   ========================================================================== */

.category-pills__pill {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: 50px;
  border: 1.5px solid var(--color-warm-gray-dark);
  background: transparent;
  color: var(--color-navy-light);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.category-pills__pill:hover {
  border-color: var(--color-teal);
  color: var(--color-navy);
}

.category-pills__pill--active {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #fff;
  font-weight: 600;
}

.category-pills__pill--active:hover {
  color: #fff;
}

.category-pills__pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   ContactDetails — unified contact info for page and footer variants
   ========================================================================== */

/* --- Page variant (light background) --- */

.contact-details--page .contact-details__welcome {
  color: var(--color-gray-blue);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.contact-details--page .contact-details__address {
  font-style: normal;
  display: grid;
  gap: 1.25rem;
}

.contact-details--page .contact-details__row {
  display: flex;
  gap: .75rem;
  color: var(--color-navy-light);
  line-height: 1.5;
}

.contact-details--page .contact-details__icon {
  color: var(--color-teal);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .15rem;
}

.contact-details--page .contact-details__label {
  color: var(--color-navy);
}

.contact-details--page .contact-details__link {
  color: var(--color-teal);
  text-decoration: none;
  transition: color var(--motion-fast) ease;
}

.contact-details--page .contact-details__link:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

.contact-details--page .contact-details__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: .2rem;
}

.contact-details--page .contact-details__hours-list {
  margin-top: .35rem;
  display: grid;
  gap: .2rem;
}

.contact-details--page .contact-details__hours-row {
  display: flex;
  gap: .4em;
}

.contact-details--page .contact-details__day {
  color: var(--color-navy);
}

/* --- Footer variant (dark background) --- */

.contact-details--footer {
  color: var(--footer-col-link);
}

.contact-details--footer .contact-details__address {
  font-style: normal;
  display: grid;
  gap: .35rem;
  margin: 0 0 .75rem 0;
}

.contact-details--footer .contact-details__label {
  color: var(--footer-col-title);
}

.contact-details--footer .contact-details__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .4em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.contact-details--footer .contact-details__link {
  color: var(--footer-col-link);
  text-decoration: none;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0);
  transition: color var(--motion-fast) ease, text-decoration-color var(--motion-fast) ease;
}

.contact-details--footer .contact-details__link:hover {
  color: var(--footer-col-link-hover);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .55);
}

.contact-details--footer .contact-details__link:focus-visible {
  outline: 0;
  border-radius: .35rem;
  box-shadow: var(--focus-ring);
}

.contact-details--footer .contact-details__hours {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.contact-details--footer .contact-details__hours-list {
  display: grid;
  gap: .2rem;
  margin-top: .35rem;
}

.contact-details--footer .contact-details__hours-row {
  display: flex;
  gap: .4em;
}

.contact-details--footer .contact-details__day {
  color: var(--footer-col-title);
}

/* ==========================================================================
   FeaturedArticleCard — wide horizontal featured article
   ========================================================================== */

.featured-article {
  display: block;
  background: #fff;
  border-radius: .875rem;
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(7, 28, 38, .08);
  color: inherit;
  transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.featured-article:hover {
  transform: translateY(-2px);
  box-shadow: 0 .7rem 1.5rem rgba(7, 28, 38, .14);
}

.featured-article:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--focus-ring-color), 0 .5rem 1.5rem rgba(7, 28, 38, .08);
}

/* Image */

.featured-article__media {
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}

.featured-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-slow) ease, filter var(--motion-slow) ease;
  filter: saturate(1.04) contrast(1.02);
}

.featured-article:hover .featured-article__image {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04);
}

/* Body */

.featured-article__body {
  padding: 1.5rem 1.75rem;
}

.featured-article__title {
  color: var(--color-navy);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 .75rem;
}

.featured-article__excerpt {
  color: var(--color-gray-blue);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-article__accent {
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-teal);
  margin-bottom: 1rem;
}

.featured-article__cta {
  color: var(--color-teal);
  font-size: .9rem;
  transition: color var(--motion-fast) ease;
}

.featured-article:hover .featured-article__cta {
  color: var(--color-navy);
}

@media (max-width: 767.98px) {
  .featured-article__media {
    min-height: 200px;
    max-height: 240px;
  }

  .featured-article__body {
    padding: 1.25rem;
  }

  .featured-article__title {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   Featured Categories + Promo — Split section (3)
   ========================================================================== */



.featured-categories {
}

/* 2×2 staggered category grid — stretches to match promo card height on desktop
   Layout: top-left 60%, top-right 40%, bottom-left 40%, bottom-right 60%
   Uses 10 implicit rows so 6:4 ratio works cleanly */
.featured-categories__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(20, 1fr);
  gap: .75rem;
  flex: 1;
}

.featured-categories__grid .category-card {
  height: 100%;
}

.featured-categories__grid .category-card:nth-child(1) { grid-column: 1; grid-row: 1 / 12; }  /* top-left: 55% */
.featured-categories__grid .category-card:nth-child(2) { grid-column: 2; grid-row: 1 / 10; }  /* top-right: 45% */
.featured-categories__grid .category-card:nth-child(3) { grid-column: 1; grid-row: 12 / 21; } /* bottom-left: 45% */
.featured-categories__grid .category-card:nth-child(4) { grid-column: 2; grid-row: 10 / 21; } /* bottom-right: 55% */

/* Make promo card fill the full height of the right column */
.featured-categories .promo-card {
  flex: 1;
}

/* Mobile: single column category cards */
@media (max-width: 575.98px) {
  .featured-categories__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .featured-categories__grid .category-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ==========================================================================
   Filter Widgets — shared label style
   ========================================================================== */

.filter-text,
fieldset.filter-select,
fieldset.filter-range,
fieldset.filter-color {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  min-width: 0;
}

.filter-text:last-child,
fieldset.filter-select:last-child,
fieldset.filter-range:last-child,
fieldset.filter-color:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   FilterSidebar — filter panel container
   ========================================================================== */

.filter-sidebar__title {
  color: var(--color-navy);
  font-size: 1.1rem;
  margin: 0 0 1.25rem;
}

.filter-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-navy);
  font-size: 1.1rem;
  padding: 0 0 .75rem;
  margin: 0;
  border-bottom: 1px solid var(--color-warm-gray);
  cursor: pointer;
}

.filter-sidebar__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: .25rem;
}

.filter-sidebar__chevron {
  font-size: .7rem;
  transition: transform var(--motion-fast) ease;
}

.filter-sidebar__toggle[aria-expanded="true"] .filter-sidebar__chevron {
  transform: rotate(180deg);
}


/* On mobile, add top spacing when body is expanded */
@media (max-width: 991.98px) {
  .filter-sidebar__body.show,
  .filter-sidebar__body.collapsing {
    padding-top: .5rem;
  }
}

/* ==========================================================================
   Filter Widgets — shared label style
   ========================================================================== */

.filter-widget__label {
  display: block;
  color: var(--color-navy);
  margin-bottom: .6rem;
  font-size: .9rem;
}

.filter-widget__count {
  font-weight: 400;
  color: var(--color-gray-blue);
  font-size: .85rem;
}

/* ==========================================================================
   FilterText — free text search input
   ========================================================================== */

.filter-text__field {
  position: relative;
}

.filter-text__icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-blue);
  font-size: .8rem;
  pointer-events: none;
}

.filter-text__input {
  padding-left: 2.1rem;
  border-radius: 8px;
  border: 1px solid rgba(10, 30, 45, .16);
  background: #fff;
  font-size: .85rem;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.filter-text__input:focus {
  border-color: var(--color-teal);
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   FilterSelect — checkbox list
   ========================================================================== */

.filter-select__list {
  display: grid;
  gap: .3rem;
}

.filter-select__item .form-check-label {
  font-size: .85rem;
  color: var(--color-navy-light);
  cursor: pointer;
}

.filter-select__item .form-check-input {
  cursor: pointer;
}

.filter-select__item .form-check-input:checked {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

.filter-select__item .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: var(--color-teal);
}

/* Grayed-out state for filter options that would yield 0 results.
   Inputs remain clickable — user can still toggle them. */
.filter-select__item.filter-unavailable .form-check-label,
.filter-color__swatch.filter-unavailable .filter-color__label {
  color: var(--color-gray-blue);
  opacity: .45;
}

.filter-color__swatch.filter-unavailable .filter-color__circle {
  opacity: .35;
}

/* ==========================================================================
   FilterRange — dual-thumb range slider
   ========================================================================== */

.filter-range__values {
  font-size: .8rem;
  color: var(--color-navy-light);
  margin-bottom: .5rem;
}

.filter-range__sep {
  color: var(--color-gray-blue);
}

.filter-range__slider {
  position: relative;
  height: 2rem;
}

.filter-range__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-warm-gray);
  border-radius: 2px;
}

.filter-range__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-teal);
  border-radius: 2px;
  left: 0;
  right: 0;
}

.filter-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.filter-range__input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.filter-range__input::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}

.filter-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  cursor: pointer;
  margin-top: -7px;
  position: relative;
  z-index: 1;
  transition: box-shadow var(--motion-fast) ease;
}

.filter-range__input::-moz-range-thumb {
  pointer-events: all;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: box-shadow var(--motion-fast) ease;
}

.filter-range__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2), var(--focus-ring);
}

.filter-range__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2), var(--focus-ring);
}

.filter-range__input--max {
  z-index: 2;
}

/* ==========================================================================
   FilterColor — color swatch grid
   ========================================================================== */

.filter-color__grid {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.filter-color__swatch {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.filter-color__label {
  font-size: .9rem;
  color: var(--color-navy-light);
  line-height: 1.2;
}

.filter-color__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-color__circle {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Inset shadow instead of a border — avoids rgba border darkening the
     outermost pixels of gradient backgrounds (creates a 1px artifact ring). */
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12);
  transition: box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.filter-color__input:checked + .filter-color__circle {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 3.5px var(--color-navy);
}

.filter-color__input:checked ~ .filter-color__label {
  color: var(--color-navy);
  font-weight: 600;
}

.filter-color__input:focus-visible + .filter-color__circle {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 3.5px var(--focus-ring-color);
}

/* ==========================================================================
   Footer Brand Strip / Divider Row (1.1)
   ========================================================================== */

:root {
  --footer-strip-fg: rgba(255, 255, 255, .92);
  --footer-strip-fg-soft: rgba(255, 255, 255, .78);
  --footer-strip-bg: transparent;

  /* 5 stripes geometry: 2px line + 3.5px gap => (2*5)+(3.5*4) = 24px total */
  --footer-strip-line: 2px;
  --footer-strip-gap-line: 3.5px;
  --footer-strip-line-height: calc((var(--footer-strip-line) * 5) + (var(--footer-strip-gap-line) * 4)); /* =24px */

  --footer-strip-gap: 16px;
  --footer-strip-logo-width: 300px;

  /* ~20° inner-end slant. tan(20°)~0.36, so slant~0.36*height */
  --footer-strip-slant: clamp(4px, calc(var(--footer-strip-line-height) * 0.36), 14px);
}

.footer-brand-strip {
  background: var(--footer-strip-bg);
  color: var(--footer-strip-fg);
}

.footer-brand-strip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--footer-strip-gap);
  padding: 18px 0;
}

/* Decorative multi-line bars — exactly 5 stripes */
.footer-brand-strip__bar {
  flex: 1 1 auto;
  height: var(--footer-strip-line-height);
  opacity: .98;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--footer-strip-fg-soft) 0,
      var(--footer-strip-fg-soft) var(--footer-strip-line),
      rgba(255, 255, 255, 0) var(--footer-strip-line),
      rgba(255, 255, 255, 0) calc(var(--footer-strip-line) + var(--footer-strip-gap-line))
    );
}

/* Left bar: outer (left) end fades from 0–80%, solid from 80–100% (inner/logo side) */
.footer-brand-strip__bar--left {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--footer-strip-slant)) 100%, 0 100%);
  border-radius: 50px 0 0 50px;
}

/* Right bar: outer (right) end fades from 0–80%, solid from 80–100% (inner/logo side) */
.footer-brand-strip__bar--right {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);
          mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);
  clip-path: polygon(var(--footer-strip-slant) 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 50px 50px 0;
}

/* Center logo mark */
.footer-brand-strip__logo {
  width: var(--footer-strip-logo-width);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}

.footer-brand-strip__logo img,
.footer-brand-strip__logo svg {
  max-width: 100%;
  display: block;
}

/* Optional: subtle dividers for busy photo backgrounds */
.footer-brand-strip--with-dividers {
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(2px);
}

/* Responsive tuning */
@media (max-width: 575.98px) {
  :root {
    --footer-strip-gap: 12px;
    --footer-strip-logo-width: 200px;
  }

  .footer-brand-strip__row {
    padding: 14px 0;
  }
}

/* ==========================================================================
   Footer Copyright (1.3.2)
   ========================================================================== */

:root {
  --footer-copyright-fg: rgba(255, 255, 255, .70);
  --footer-copyright-fg-strong: rgba(255, 255, 255, .82);
}

.footer-copyright {
  color: var(--footer-copyright-fg);
  padding: 18px 0 18px;
}

/* Thin separator above the copyright text, between the footer body and the
   copyright strip. Lives here (not in FooterSocialRow) so it's always present
   regardless of whether social icons are rendered. */
.footer-copyright__divider {
  height: 1px;
  background: rgba(255, 255, 255, .25);
  width: min(920px, 100%);
  margin: 0 auto 14px;
}

.footer-copyright__text {
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.footer-copyright__brand {
  color: var(--footer-copyright-fg-strong);
}

@media (max-width: 575.98px) {
  .footer-copyright {
    padding: 14px 0 16px;
  }

  .footer-copyright__divider {
    margin: 0 auto 12px;
  }

  .footer-copyright__text {
  }
}

/* ==========================================================================
   Footer Link Widget — column with header + link list (1.2.x)
   Shared --footer-col-* vars live in styles.css (also used by footer-contact)
   ========================================================================== */

.footer-link-widget {
  color: var(--footer-col-link);
}

.footer-link-widget__title {
  margin: 0 0 .65rem 0;
  color: var(--footer-col-title);
  letter-spacing: .01em;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .55),
    0 1px 0 rgba(0, 0, 0, .35);
}

.footer-link-widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.footer-link-widget__link {
  color: var(--footer-col-link);
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  transition: color var(--motion-fast) ease, transform var(--motion-fast) ease, text-decoration-color var(--motion-fast) ease;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0);
}

.footer-link-widget__link:hover {
  color: var(--footer-col-link-hover);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .55);
  transform: translateX(1px);
}

.footer-link-widget__link:focus-visible {
  outline: 0;
  border-radius: .35rem;
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   Footer Social Icon Row (1.3.1)
   ========================================================================== */

:root {
  --footer-social-bg: rgba(255, 255, 255, .92);
  --footer-social-fg: rgba(7, 28, 38, .92);
  --footer-social-outline: rgba(255, 255, 255, .30);

  --footer-social-size: 34px;
  --footer-social-icon: 18px;
  --footer-social-gap: 10px;
}

.footer-social {
  color: #fff;
}

.footer-social__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--footer-social-gap);
  padding: 10px 0 6px;
}

.footer-social__link {
  width: var(--footer-social-size);
  height: var(--footer-social-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--footer-social-bg);
  color: var(--footer-social-fg);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
  transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.footer-social__link i {
  font-size: var(--footer-social-icon);
  line-height: 1;
}

.footer-social__link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .98);
  color: rgba(7, 28, 38, 1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .30);
}

.footer-social__link:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .26);
}

.footer-social__link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 0 0 6px rgba(20, 190, 255, .25);
}

@media (max-width: 575.98px) {
  :root {
    --footer-social-size: 32px;
    --footer-social-icon: 17px;
    --footer-social-gap: 8px;
  }
}

/* ==========================================================================
   Footer — Assembled wrapper (background image + overlay + layout)
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.site-footer__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 40, 65, .73), rgba(8, 40, 65, .66) 45%, rgba(8, 40, 65, .78)),
    radial-gradient(1200px 500px at 70% 35%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .35));
  pointer-events: none;
}

.site-footer__content {
  position: relative;
  z-index: 1;
  padding: 0;
}

/* ==========================================================================
   Header Cart Button
   ========================================================================== */

.header-cart {
  position: relative;
  width: var(--header-search-btn-size);
  height: var(--header-search-btn-size);
  border-radius: var(--header-search-radius);
  border: 1px solid var(--header-search-border);
  background: var(--header-search-bg);
  color: var(--header-search-fg);
  box-shadow: var(--header-search-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.header-cart:hover {
  background: rgba(255, 255, 255, .92);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.header-cart:focus-visible {
  outline: none;
  box-shadow: var(--header-search-shadow), var(--focus-ring);
}

.header-cart__icon {
  font-size: var(--header-search-icon-size);
  line-height: 1;
}

.header-cart__badge {
  position: absolute;
  bottom: 4px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-red);
}

/* ==========================================================================
   Header Logo (1.1)
   ========================================================================== */

:root {
  --header-logo-width: 300px;
  --header-logo-hover-filter: brightness(1.02) contrast(1.03);
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 10px;
  padding: .15rem .25rem;
}

.header-logo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.header-logo__img {
  display: block;
  width: var(--header-logo-width);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.header-logo:hover .header-logo__img {
  filter: var(--header-logo-hover-filter);
}

.header-logo:active {
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  :root {
    --header-logo-width: 200px;
  }
}

/* ==========================================================================
   Header Search Button (1.3)
   Shared --header-search-* vars live in styles.css (also used by header-cart, header toggler)
   ========================================================================== */

.header-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--header-search-gap);
  min-width: var(--header-search-btn-size);
}

.header-search__toggle {
  width: var(--header-search-btn-size);
  height: var(--header-search-btn-size);
  border-radius: var(--header-search-radius);
  border: 1px solid var(--header-search-border);
  background: var(--header-search-bg);
  color: var(--header-search-fg);
  box-shadow: var(--header-search-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, opacity var(--motion-base) ease, width var(--motion-base) ease;
}

.header-search__toggle:hover {
  background: rgba(255, 255, 255, .92);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.header-search__toggle:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .10);
}

.header-search__toggle:focus-visible {
  outline: none;
  box-shadow: var(--header-search-shadow), var(--focus-ring);
}

.header-search__toggle-icon {
  font-size: var(--header-search-icon-size);
  line-height: 1;
}

/* Toggle button fade-out when open */
.header-search--open .header-search__toggle {
  width: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  pointer-events: none;
}

/* Form: always in DOM, collapsed to zero width by default */

.header-search__form {
  display: inline-flex;
  align-items: center;
  width: 0;
  max-width: 0;
  height: var(--header-search-open-height);
  border-radius: var(--header-search-radius);
  border: 1px solid transparent;
  background: var(--header-search-bg);
  box-shadow: none;
  overflow: hidden;
  opacity: 0;
  transition: width var(--motion-base) ease, max-width var(--motion-base) ease, opacity var(--motion-base) ease, border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.header-search--open .header-search__form {
  width: var(--header-search-open-width);
  max-width: var(--header-search-open-width);
  opacity: 1;
  border-color: var(--header-search-border);
  box-shadow: var(--header-search-shadow);
}

.header-search__btn {
  width: calc(var(--header-search-open-height) - 2px);
  height: calc(var(--header-search-open-height) - 2px);
  border: 0;
  background: transparent;
  color: var(--header-search-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}

.header-search__btn:hover {
  background: rgba(255, 255, 255, .28);
}

.header-search__btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 .2rem rgba(20, 190, 255, .25);
}

.header-search__input {
  border: 0;
  background: transparent;
  color: var(--header-search-fg);
  width: 100%;
  height: 100%;
  padding: .35rem .55rem .35rem .1rem;
}

.header-search__input::placeholder {
  color: var(--header-search-muted);
}

.header-search__input:focus {
  outline: none;
}

.header-search__form:focus-within {
  box-shadow: var(--header-search-shadow), var(--focus-ring);
}

@media (max-width: 768px) {
  .header-search__toggle {
    display: none;
  }

  .header-search__form {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    border-color: var(--header-search-border);
    box-shadow: var(--header-search-shadow);
  }

  .header-search {
    width: 100%;
  }
}

/* ==========================================================================
   Header — Assembled wrapper (1)
   ========================================================================== */

:root {
  --site-header-bg: rgba(248, 245, 236, .96);
  --site-header-border: rgba(10, 30, 45, .10);
  --site-header-shadow: 0 10px 25px rgba(0, 0, 0, .06);
  --site-header-pad-y: .55rem;
  --site-header-pad-x: 1rem;
  --site-header-radius: 10px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(248, 218, 160, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--site-header-border);
  box-shadow: var(--site-header-shadow);
}

.site-header__navbar {
  padding: var(--site-header-pad-y) var(--site-header-pad-x);
}

.site-header__container {
  gap: 0;
}

@media (min-width: 1200px) {
  /* The navbar container is the positioning context for the centered nav. */
  .site-header__container {
    position: relative;
  }

  /* Center nav on the full header width, independent of logo/button widths. */
  .site-header__collapse .mx-xl-auto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-header__collapse .d-none.d-xl-flex {
    margin-left: auto;
  }
}

/* Toggler (hamburger) */

.site-header__toggler {
  width: var(--header-search-btn-size);
  height: var(--header-search-btn-size);
  padding: 0;
  border-radius: var(--site-header-radius);
  border: 1px solid rgba(10, 30, 45, .18);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .10);
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.site-header__toggler:hover {
  background: rgba(255, 255, 255, .92);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.site-header__toggler:focus-visible {
  outline: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .10), var(--focus-ring);
}

.site-header__toggler .navbar-toggler-icon {
  width: 1.1em;
  height: 1.1em;
}

/* Collapse container */

.site-header__collapse {
  border-radius: 12px;
}

@media (max-width: 1199.98px) {
  :root {
    --site-header-pad-x: .75rem;
    --site-header-pad-y: .5rem;
  }

  .site-header__search-mobile {
    margin-top: 0;
  }
}

/* Mobile search inside collapse */

.site-header__search-mobile {
  padding: .5rem 0 1rem 0;
}

.site-header__search-mobile .form-control {
  border-radius: 12px;
  border-color: rgba(10, 30, 45, .18);
  background: rgba(255, 255, 255, .78);
}

.site-header__search-mobile .form-control:focus {
  border-color: rgba(20, 190, 255, .45);
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   Hero Brand Mark Overlay (2.1)
   ========================================================================== */

:root {
  --hero-brandmark-tilt: -7deg;
  --hero-brandmark-skew: 0deg;

  --hero-brandmark-strip-fg: rgba(8, 40, 65, .40);
  --hero-brandmark-line: 3px;
  --hero-brandmark-gap-line: 5px;
  --hero-brandmark-height: calc((var(--hero-brandmark-line) * 5) + (var(--hero-brandmark-gap-line) * 4));

  --hero-brandmark-gap: 12px;
  --hero-brandmark-logo-w: clamp(300px, 36vw, 420px);
  /* slant matches the 7° tilt: tan(7°) ≈ 0.1228 */
  --hero-brandmark-slant: calc(var(--hero-brandmark-height) * 0.1228);

  --hero-brandmark-shadow: 0 10px 25px rgba(0, 0, 0, .10);
}

.hero-brandmark {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.hero-brandmark__tilt {
  width: min(1400px, 100vw);
  transform: rotate(var(--hero-brandmark-tilt)) skewX(var(--hero-brandmark-skew));
  transform-origin: center;
  filter: drop-shadow(var(--hero-brandmark-shadow));
}

.hero-brandmark__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hero-brandmark-gap);
}

.hero-brandmark__bar {
  flex: 1 1 auto;
  height: var(--hero-brandmark-height);
  background: repeating-linear-gradient(
    to bottom,
    var(--hero-brandmark-strip-fg) 0,
    var(--hero-brandmark-strip-fg) var(--hero-brandmark-line),
    transparent var(--hero-brandmark-line),
    transparent calc(var(--hero-brandmark-line) + var(--hero-brandmark-gap-line))
  );
}

.hero-brandmark__bar--left {
  mask-image: linear-gradient(to right, transparent 0%, #000 78%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--hero-brandmark-slant)) 100%, 0 100%);
}

.hero-brandmark__bar--right {
  mask-image: linear-gradient(to left, transparent 0%, #000 78%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 78%);
  clip-path: polygon(var(--hero-brandmark-slant) 0, 100% 0, 100% 100%, 0 100%);
}

.hero-brandmark__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-brandmark__img {
  display: block;
  width: var(--hero-brandmark-logo-w);
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transform: skewX(14deg);
}

@media (max-width: 768px) {
  :root {
    --hero-brandmark-gap: 6px;
    --hero-brandmark-logo-w: clamp(174px, 59vw, 234px);
    --hero-brandmark-line: 2px;
    --hero-brandmark-gap-line: 3.3px;
    --hero-brandmark-height: calc((var(--hero-brandmark-line) * 5) + (var(--hero-brandmark-gap-line) * 4));
  }
}

/* ==========================================================================
   Hero Headline (2.2)
   ========================================================================== */

:root {
  --hero-headline-tilt: -7deg;
  --hero-headline-fg: rgba(8, 40, 65, .94);
  --hero-headline-line-height: 1.05;
  --hero-headline-sep-fg: rgba(8, 40, 65, .40);
}

.hero-headline {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.hero-headline__tilt {
  transform: rotate(var(--hero-headline-tilt));
  transform-origin: center;
}

.hero-headline__text {
  margin: 0;
  padding: 0;
  color: var(--hero-headline-fg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-style: italic;
  line-height: var(--hero-headline-line-height);
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(255, 255, 255, .45);
}

.hero-headline__line {
  display: block;
}

.hero-headline__sep {
  color: var(--hero-headline-sep-fg);
}

/* ==========================================================================
   Hero Section — Assembled wrapper (2)
   ========================================================================== */

.hero-section {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--color-cream));
  pointer-events: none;
  z-index: 2;
}

.hero-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.hero-section__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(248, 218, 160, .35), rgba(248, 218, 160, .15) 50%, rgba(248, 218, 160, .30) 88%, rgba(248, 245, 240, .95)),
    radial-gradient(1200px 600px at 50% 40%, rgba(255, 255, 255, .15), rgba(0, 0, 0, .10));
  pointer-events: none;
}

.hero-section__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 7rem 0 2.5rem;
}

.hero-section__brandmark {
  margin-bottom: 1.5rem;
}

.hero-section__headline {
  margin-bottom: 1.5rem;
}

.hero-section__subheadline {
  margin-bottom: 2rem;
}

.hero-section__trustbar {
  margin-top: 7rem;
}

@media (max-width: 768px) {
  .hero-section__content {
    padding: 3rem 0 1rem;
  }

  .hero-section__brandmark {
    margin-bottom: 1.5rem;
  }

  .hero-section__headline {
    margin-bottom: 1.25rem;
  }

  .hero-section__subheadline {
    margin-bottom: 1.5rem;
  }

  .hero-section__trustbar {
    margin-top: 3rem;
  }
}

/* ==========================================================================
   Hero Subheadline (2.3)
   ========================================================================== */

:root {
  --hero-subheadline-strip-fg: rgba(8, 40, 65, .40);
  --hero-subheadline-line: 3px;
  --hero-subheadline-gap-line: 5px;
  --hero-subheadline-height: calc((var(--hero-subheadline-line) * 5) + (var(--hero-subheadline-gap-line) * 4));

  --hero-subheadline-gap: 12px;
  --hero-subheadline-slant: calc(var(--hero-subheadline-height) * 0.1228);

  --hero-subheadline-tilt: -7deg;
  --hero-subheadline-shadow: 0 10px 25px rgba(0, 0, 0, .10);

  --hero-subheadline-fg: rgba(8, 40, 65, .92);
}

.hero-subheadline {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.hero-subheadline__tilt {
  width: min(1400px, 100vw);
  transform: rotate(var(--hero-subheadline-tilt));
  transform-origin: center;
  filter: drop-shadow(var(--hero-subheadline-shadow));
}

.hero-subheadline__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hero-subheadline-gap);
}

.hero-subheadline__bar {
  flex: 1 1 auto;
  height: var(--hero-subheadline-height);
  background: repeating-linear-gradient(
    to bottom,
    var(--hero-subheadline-strip-fg) 0,
    var(--hero-subheadline-strip-fg) var(--hero-subheadline-line),
    transparent var(--hero-subheadline-line),
    transparent calc(var(--hero-subheadline-line) + var(--hero-subheadline-gap-line))
  );
}

.hero-subheadline__bar--left {
  mask-image: linear-gradient(to right, transparent 0%, #000 78%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--hero-subheadline-slant)) 100%, 0 100%);
}

.hero-subheadline__bar--right {
  mask-image: linear-gradient(to left, transparent 0%, #000 78%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 78%);
  clip-path: polygon(var(--hero-subheadline-slant) 0, 100% 0, 100% 100%, 0 100%);
}

.hero-subheadline__text {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 .5rem;
  color: var(--hero-subheadline-fg);
  font-family: var(--font-heading);
  font-style: italic;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(255, 255, 255, .55);
}

.hero-subheadline__br { display: none; }

@media (max-width: 480px) {
  .hero-subheadline__text { white-space: normal; text-align: center; }
  .hero-subheadline__br { display: inline; }
}

@media (max-width: 768px) {
  :root {
    --hero-subheadline-gap: 6px;
    --hero-subheadline-line: 2px;
    --hero-subheadline-gap-line: 3.3px;
    --hero-subheadline-height: calc((var(--hero-subheadline-line) * 5) + (var(--hero-subheadline-gap-line) * 4));
  }
}

@media (min-width: 992px) {
  .hero-subheadline__text {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Hero Trust Bar (2.5)
   ========================================================================== */

:root {
  --hero-trustbar-bg: rgba(248, 218, 160, .45);
  --hero-trustbar-border: rgba(0, 0, 0, .10);
  --hero-trustbar-shadow: 0 4px 12px rgba(0, 0, 0, .08);

  --hero-trustbar-radius: 16px;
  --hero-trustbar-pad-y: .85rem;
  --hero-trustbar-pad-x: 1.1rem;

  --hero-trustbar-gap: .9rem;
  --hero-trustbar-item-gap: .75rem;

  --hero-trustbar-icon-size: 40px;
  --hero-trustbar-icon-fg: rgba(0, 0, 0, .86);

  --hero-trustbar-text: rgba(0, 0, 0, .82);
  --hero-trustbar-text-strong: rgba(0, 0, 0, .92);

  --hero-trustbar-font: .98rem;
  --hero-trustbar-line: 1.2;
}

.hero-trustbar {
  width: 100%;
}

.hero-trustbar__panel {
  background: var(--hero-trustbar-bg);
  border: 1px solid var(--hero-trustbar-border);
  border-radius: var(--hero-trustbar-radius);
  box-shadow: var(--hero-trustbar-shadow);
  padding: var(--hero-trustbar-pad-y) var(--hero-trustbar-pad-x);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-trustbar__row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: var(--hero-trustbar-gap);
  align-items: center;
}

.hero-trustbar__item {
  display: flex;
  align-items: center;
  gap: var(--hero-trustbar-item-gap);
  min-height: 44px;
}

.hero-trustbar__icon {
  flex: 0 0 auto;
  font-size: var(--hero-trustbar-icon-size);
  color: var(--hero-trustbar-icon-fg);
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, .67)) drop-shadow(0 0 10px rgba(255, 255, 255, .67)) drop-shadow(0 0 4px rgba(255, 255, 255, .67));
}

.hero-trustbar__text {
  margin: 0;
  color: var(--hero-trustbar-text);
  font-size: var(--hero-trustbar-font);
  line-height: var(--hero-trustbar-line);
  letter-spacing: .01em;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, .67)) drop-shadow(0 0 10px rgba(255, 255, 255, .67)) drop-shadow(0 0 4px rgba(255, 255, 255, .67));
}

.hero-trustbar__text strong {
  color: var(--hero-trustbar-text-strong);
}

@media (min-width: 768px) {
  .hero-trustbar__col + .hero-trustbar__col {
    border-left: 1px solid rgba(0, 0, 0, .08);
  }

  .hero-trustbar__col {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --hero-trustbar-radius: 14px;
    --hero-trustbar-pad-y: .75rem;
    --hero-trustbar-pad-x: .95rem;

    --hero-trustbar-gap: .75rem;
    --hero-trustbar-item-gap: .65rem;

    --hero-trustbar-icon-size: 35px;

    --hero-trustbar-font: .92rem;
  }
}

/* ==========================================================================
   LatestArticle — Featured article teaser card (5.2)
   ========================================================================== */

:root {
  --la-card-radius: 1.1rem;
  --la-card-shadow: 0 .5rem 1.5rem rgba(7, 28, 38, .1);
  --la-border-cyan: rgb(30, 200, 185);
  --la-border-coral: rgb(240, 115, 75);
}


.latest-article__card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--la-card-radius);
  box-shadow: var(--la-card-shadow);
  background: #ffffff;
  color: inherit;
  min-height: 220px;
  transition: box-shadow var(--motion-base) ease, transform var(--motion-base) ease;
}

.latest-article__card:hover {
  box-shadow: 0 .7rem 2rem rgba(7, 28, 38, .15);
  transform: translateY(-2px);
}

.latest-article__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--focus-ring-color), var(--la-card-shadow);
}

/* Background image — full card, white fade from left to 75% opacity on right */
.latest-article__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  filter: saturate(.7);
}

/* White fade overlay — solid white left, 25% white on right */
.latest-article__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, .3) 100%
  );
}

/* Decorative cyan/coral inner border frame — thick with glow */
/* Shared border frame base */
.latest-article__border-frame {
  position: absolute;
  inset: 18px;
  border-radius: calc(var(--la-card-radius) - 6px);
  pointer-events: none;
}

/* Each frame uses ::before for glow (unclipped) and ::after for the sharp line (clipped) */
.latest-article__border-frame::before,
.latest-article__border-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 4px solid;
}

/* Cyan — glow */
.latest-article__border-frame--cyan::before {
  border-color: var(--la-border-cyan);
  clip-path: inset(-10px 31% -10px -10px);
  filter: blur(6px) brightness(1.5);
}

/* Cyan — sharp line, clipped */
.latest-article__border-frame--cyan::after {
  border-color: var(--la-border-cyan);
  clip-path: inset(0 31% 0 0);
}

/* Coral — glow */
.latest-article__border-frame--coral::before {
  border-color: var(--la-border-coral);
  clip-path: inset(-10px -10px -10px 71%);
  filter: blur(6px) brightness(1.5);
}

/* Coral — sharp line, clipped */
.latest-article__border-frame--coral::after {
  border-color: var(--la-border-coral);
  clip-path: inset(0 0 0 71%);
}

/* Content area */
.latest-article__content {
  position: relative;
  z-index: 1;
  padding: 2.5rem 3rem;
  max-width: 50%;
  display: flex;
  align-items: center;
  min-height: inherit;
}

.latest-article__title {
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0;
}

/* --- Responsive --- */

@media (max-width: 991.98px) {
  .latest-article__content {
    max-width: 55%;
    padding: 2rem 2.5rem;
  }
}

@media (max-width: 575.98px) {
  .latest-article__card {
    min-height: 180px;
  }

  .latest-article__content {
    max-width: 80%;
    padding: 1.75rem 2rem;
  }
}

/* ==========================================================================
   Latest Products — Product shelf / carousel section (4)
   ========================================================================== */

:root {
  --lp-card-bg: #ffffff;
  --lp-card-radius: .875rem;
  --lp-card-shadow: 0 .35rem 1rem rgba(7, 28, 38, .08);
  --lp-card-padding: .875rem;
  --lp-card-gap: 1rem;
  --lp-card-name-color: var(--color-navy-light);
  --lp-featured-border: var(--color-teal);
  --lp-featured-glow: rgba(44, 197, 184, .22);
}

.latest-products {
  overflow-x: clip;
}

/* --- Section title --- */

.latest-products__title {
  margin: 0;
}

/* ==========================================================================
   404 — Not Found page
   ========================================================================== */

.not-found {
  min-height: 50vh;
}

.not-found__code {
  font-family: var(--font-heading);
  color: var(--color-teal);
  line-height: 1;
}

.not-found__message {
  color: var(--color-navy);
}

.not-found__btn {
  background-color: var(--color-teal);
  color: #fff;
  transition: background-color var(--motion-fast) ease;
}

.not-found__btn:hover {
  background-color: #24a89d;
  color: #fff;
}

/* ==========================================================================
   Primary Navigation (1.2)
   ========================================================================== */

:root {
  --primary-nav-fg: rgba(7, 28, 38, .88);
  --primary-nav-fg-hover: rgba(7, 28, 38, .98);
  --primary-nav-active: rgba(18, 155, 165, .98);
  --primary-nav-underline: rgba(18, 155, 165, .92);
  --primary-nav-underline-muted: rgba(7, 28, 38, .14);

  --primary-nav-gap: 22px;
  --primary-nav-padding-y: .35rem;

  --primary-nav-underline-h: 2px;
  --primary-nav-underline-radius: 2px;

}

.primary-nav {
  width: 100%;
}

.primary-nav__list {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: var(--primary-nav-padding-y);
  gap: var(--primary-nav-gap);
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.primary-nav__item {
  position: relative;
}

.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--primary-nav-fg);
  letter-spacing: .01em;
  padding-bottom: calc(var(--primary-nav-padding-y) + 2px);
  transition: color var(--motion-fast) ease, transform var(--motion-fast) ease;
  /* Override Bootstrap's nav-link CSS variables so its built-in
     `.nav-link:focus, .nav-link:hover { color: var(--bs-nav-link-hover-color) }`
     rule produces our colors instead of the default link blue. This matters
     when the user click-drags off a nav link — :hover ends but :focus
     remains, and without the override Bootstrap repaints the link in its
     default blue. We set both the base and hover variables to the same
     fg color; our own .primary-nav__link:hover rule (later in cascade)
     overrides to teal on actual hover. */
  --bs-nav-link-color: var(--primary-nav-fg);
  --bs-nav-link-hover-color: var(--primary-nav-fg);
  /* Nav links should behave like buttons — no text selection, no native
     anchor drag. Without -webkit-user-drag the browser starts a native
     drag-and-drop operation when the user click-drags a link, and the
     drag ghost ignores our custom colors. user-select prevents the related
     text-selection highlight on quick click-drag-release gestures. */
  user-select: none;
  -webkit-user-drag: none;
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: var(--primary-nav-underline-h);
  border-radius: var(--primary-nav-underline-radius);
  background: rgba(0, 0, 0, 0);
  transform: scaleX(.55);
  transform-origin: center;
  transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.primary-nav__link:hover {
  color: var(--primary-nav-active);
  transform: translateY(-1px);
}

.primary-nav__link:hover::after {
  background: var(--primary-nav-underline-muted);
  transform: scaleX(.85);
}

.primary-nav__link:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: var(--focus-ring);
}

.primary-nav__link--active {
  color: var(--primary-nav-active);
  /* Same Bootstrap variable override as the base rule, but with the active
     teal — so click-dragging off the active nav link doesn't flip it back
     to the default fg via Bootstrap's :focus rule. */
  --bs-nav-link-hover-color: var(--primary-nav-active);
}

.primary-nav__link--active::after {
  background: var(--primary-nav-underline);
  transform: scaleX(1);
}

@media (max-width: 1199.98px) {
  :root {
    --primary-nav-gap: 4px;
    --primary-nav-padding-y: .55rem;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
  }

  .primary-nav__link {
    padding: var(--primary-nav-padding-y) .5rem;
    border-radius: 8px;
  }

  .primary-nav__link::after {
    display: none;
  }

  .primary-nav__link--active {
    background: rgba(18, 155, 165, .32);
  }
}

/* ==========================================================================
   ProductCard — Shared product card component
   ========================================================================== */

:root {
  --pc-bg: #ffffff;
  --pc-radius: .875rem;
  --pc-shadow: 0 .35rem 1rem rgba(7, 28, 38, .08);
  --pc-padding: .875rem;
  --pc-name-color: var(--color-navy-light);
  --pc-accent: var(--color-teal);
  --pc-accent-glow: rgba(44, 197, 184, .22);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--pc-bg);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: var(--pc-padding);
  color: inherit;
  min-width: 0;
  border: 2px solid transparent;
  transition:
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    transform var(--motion-base) ease;
}

.product-card:hover {
  border-color: var(--pc-accent);
  box-shadow:
    var(--pc-shadow),
    0 0 0 3px var(--pc-accent-glow);
  transform: translateY(-2px);
}

.product-card:focus-visible {
  outline: none;
  border-color: var(--pc-accent);
  box-shadow:
    0 0 0 .2rem var(--focus-ring-color),
    var(--pc-shadow);
}

/* --- Card media area (~65% of card height) --- */

.product-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: .5rem .5rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Year badge on older model carry-overs (introduced year < current season) */
.product-card__year-badge {
  position: absolute;
  top: .4rem;
  left: .4rem;
  padding: .15rem .4rem;
  background: var(--color-warm-gray);
  color: var(--color-gray-blue);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- Card body / product name --- */

.product-card__body {
  padding-top: .625rem;
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.product-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  color: var(--pc-name-color);
}

.product-card__price {
  display: block;
  margin-top: .35rem;
  color: var(--pc-accent);
}

.product-card__variants-hint {
  display: block;
  font-size: .75rem;
  color: var(--color-gray-blue);
  margin-top: .15rem;
}

/* --- Scrollable product track --- */

.latest-products__track {
  display: flex;
  gap: var(--lp-card-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1.25rem 1rem;
  margin: -1.25rem -1rem;
}

.latest-products__track::-webkit-scrollbar {
  display: none;
}

/* Desktop: 5 cards visible */
.latest-products__track > .product-card {
  flex: 0 0 calc((100% - var(--lp-card-gap) * 4) / 5);
  scroll-snap-align: start;
}

/* --- Responsive --- */

/* Tablet: 3 cards visible */
@media (max-width: 991.98px) {
  .latest-products__track > .product-card {
    flex: 0 0 calc((100% - var(--lp-card-gap) * 2) / 3);
  }
}

/* Mobile: 2 cards visible */
@media (max-width: 575.98px) {
  .latest-products__track > .product-card {
    flex: 0 0 calc((100% - var(--lp-card-gap)) / 2);
  }

  .product-card__media {
    min-height: 110px;
  }

}

/* ==========================================================================
   ProductGallery — main image + thumbnail strip
   ========================================================================== */

.product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--pc-radius, .875rem);
  border: 1px solid rgba(10, 30, 45, .08);
  overflow: hidden;
  margin-bottom: .75rem;
}

/* Images are stacked — all rendered in HTML so Googlebot sees every alt
   with its matching src URL (the strongest signal for Image Search) — and
   toggled via .--active. Non-active images sit offscreen via left: -200vw
   so the browser's native loading="lazy" actually defers their download.
   Without the offscreen trick, all stacked images share the same bounding
   box at the top of the viewport, making lazy loading a no-op and causing
   the browser to eagerly fetch every gallery image on first paint.
   The `left` change is instant on activation (delay 0) but delayed by one
   motion-base on deactivation, so the outgoing image finishes its opacity
   fade at its current position before snapping offscreen. */
.product-gallery__image {
  position: absolute;
  left: -200vw;
  top: 0;
  right: auto;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-base) ease, left 0s linear var(--motion-base);
}

.product-gallery__image--active {
  left: 0;
  opacity: 1;
  transition: opacity var(--motion-base) ease, left 0s linear 0s;
}

/* Counter badge */

.product-gallery__counter {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  padding: .15rem .5rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .75rem;
  font-family: var(--font-body);
  pointer-events: none;
  z-index: 2;
}

/* Thumbnail strip */

.product-gallery__thumbs {
  display: flex;
  gap: .5rem;
  height: 175px;
}

/* Spiral containers used by the windowed thumb layout (6+ images).
   Nested flex containers alternate column/row direction, with golden-ratio
   flex values (1.618 / 1) creating a spiral subdivision. flex-direction is
   set inline since it varies per depth and mirror state (left vs right). */
.product-gallery__spiral {
  display: flex;
  min-width: 0;
  min-height: 0;
  gap: .25rem;
}

/* "+N" counter in the smallest spiral cell when a column has 4+ items */
.product-gallery__spiral-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border-radius: .35rem;
  background: var(--color-warm-gray);
  color: var(--color-gray-blue);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  pointer-events: none;
}

/* Thumbs use flex: 1 1 0 for equal sizing in flat ≤5 layouts and fallback
   stacks, or flex: 1.618 1 0 / flex: 1 1 0 inline for spiral golden splits. */
.product-gallery__thumb {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 1.5px solid rgba(10, 30, 45, .10);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.product-gallery__thumb:hover {
  border-color: rgba(10, 30, 45, .25);
}

.product-gallery__thumb--active {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 1.5px var(--color-teal);
}

.product-gallery__thumb:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.product-gallery__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Lightbox */

.product-gallery__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) ease;
}

.product-gallery__lightbox--open {
  opacity: 1;
  pointer-events: all;
}

.product-gallery__lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: .5rem;
  background: #fff;
}

.product-gallery__lightbox-prev,
.product-gallery__lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}

.product-gallery__lightbox-prev { left: 1rem; }
.product-gallery__lightbox-next { right: 1rem; }

.product-gallery__lightbox-prev:hover,
.product-gallery__lightbox-next:hover {
  background: rgba(255, 255, 255, .3);
}

.product-gallery__lightbox-prev:focus-visible,
.product-gallery__lightbox-next:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.product-gallery__lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}

.product-gallery__lightbox-close:hover {
  background: rgba(255, 255, 255, .3);
}

.product-gallery__lightbox-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 575.98px) {
  .product-gallery__thumbs {
    gap: .35rem;
  }

  .product-gallery__spiral {
    gap: .15rem;
  }
}

/* ==========================================================================
   ProductGrid — responsive product card grid (3 → 2 → 1 columns)
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

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

@media (max-width: 575.98px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
}

/* ==========================================================================
   ProductInfo — product detail info panel
   ========================================================================== */

.product-info__title {
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0;
}

.product-info__price {
  color: var(--color-navy);
  font-size: 1.35rem;
  margin: .5rem 0 0;
}

.product-info__description {
  color: var(--color-gray-blue);
  line-height: 1.6;
  margin: 1rem 0 0;
}

.product-info__variant {
  margin-top: 1.5rem;
}

.product-info__variant .filter-widget__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
}

/* Variant selector — render select options as larger, button-style chips */
.product-info__variant .filter-select__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.product-info__variant .filter-select__item {
  padding: 0;
  margin: 0;
  min-height: 0;
}

.product-info__variant .filter-select__item .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  margin: 0;
}

.product-info__variant .filter-select__item .form-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
  background: #fff;
  border: 1.5px solid var(--color-warm-gray);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.product-info__variant .filter-select__item .form-check-label:hover {
  border-color: var(--color-teal);
}

.product-info__variant .filter-select__item .form-check-input:checked + .form-check-label {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #fff;
}

.product-info__variant .filter-select__item .form-check-input:focus-visible + .form-check-label {
  box-shadow: var(--focus-ring);
}

/* Variant selector — enlarge color swatches */
.product-info__variant .filter-color__grid {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .75rem;
}

.product-info__variant .filter-color__swatch {
  padding: .25rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.product-info__variant .filter-color__circle {
  width: 2.25rem;
  height: 2.25rem;
}

.product-info__variant .filter-color__label {
  font-size: 1rem;
}

.product-info__action {
  margin-top: 2rem;
}

/* ==========================================================================
   ProductListToolbar — sort controls + result count
   ========================================================================== */

.product-toolbar {
  padding: .6rem 0;
}

.product-toolbar__label {
  color: var(--color-navy);
  font-size: .9rem;
}

.product-toolbar__sort {
  gap: .25rem;
}

.product-toolbar__option {
  border: none;
  background: transparent;
  color: var(--color-navy-light);
  font-size: .85rem;
  font-weight: 500;
  padding: .3rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.product-toolbar__option:hover {
  background-color: var(--color-warm-gray);
  color: var(--color-navy);
}

.product-toolbar__option--active {
  background-color: var(--color-warm-gray);
  color: var(--color-navy);
  font-weight: 600;
}

.product-toolbar__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.product-toolbar__count {
  color: var(--color-gray-blue);
  font-size: .85rem;
  margin-left: auto;
}

/* ==========================================================================
   ProductTabs — description + specs tabs (Bootstrap tabs)
   ========================================================================== */

.product-tabs__nav {
  border-bottom: 2px solid var(--color-warm-gray);
  gap: .25rem;
}

.product-tabs__tab {
  color: var(--color-gray-blue);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: .65rem 1.25rem;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.product-tabs__tab:hover {
  color: var(--color-navy);
  border-color: transparent;
}

.product-tabs__tab.active {
  color: var(--color-navy);
  border-color: var(--color-teal);
  background: transparent;
}

.product-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: .25rem .25rem 0 0;
}

.product-tabs__content {
  padding: 1.5rem 0;
}

.product-tabs__body {
  color: var(--color-navy-light);
  line-height: 1.7;
}

.product-tabs__body p {
  margin-bottom: 1rem;
}

.product-tabs__body p:last-child {
  margin-bottom: 0;
}

/* Specs table */

.product-tabs__specs-table {
  width: 100%;
  border-collapse: collapse;
}

.product-tabs__specs-table tr:not(:last-child) {
  border-bottom: 1px solid var(--color-warm-gray);
}

.product-tabs__spec-label,
.product-tabs__spec-value {
  padding: .6rem 0;
  font-size: .9rem;
  vertical-align: top;
}

.product-tabs__spec-label {
  color: var(--color-gray-blue);
  font-weight: 600;
  width: 40%;
  padding-right: 1rem;
}

.product-tabs__spec-value {
  color: var(--color-navy-light);
}

@media (max-width: 575.98px) {
  .product-tabs__tab {
    padding: .55rem .85rem;
    font-size: .9rem;
  }

  .product-tabs__spec-label {
    width: 45%;
  }
}

/* ==========================================================================
   Promo Card (3.2.2) — new arrival / promo card with decorative leaves
   ========================================================================== */

:root {
  --promo-card-radius: 1.15rem;
  --promo-card-bg: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(250, 252, 252, .96) 100%);
  --promo-card-border: rgba(230, 159, 129, .82);
  --promo-card-shadow: 0 .85rem 2rem rgba(226, 147, 117, .16);
  --promo-card-shadow-soft: 0 .25rem .7rem rgba(7, 28, 38, .08);
  --promo-card-inner-stroke: rgba(255, 255, 255, .88);
  --promo-card-title-color: rgba(7, 28, 38, .95);
  --promo-card-leaf-opacity: .95;
  --promo-card-button-bg: rgba(255, 255, 255, .82);
  --promo-card-button-border: rgba(18, 155, 165, .38);
  --promo-card-button-text: rgba(7, 28, 38, .88);
  --promo-card-button-hover-bg: rgba(18, 155, 165, .08);
  --promo-card-button-hover-border: rgba(18, 155, 165, .72);
  --promo-card-button-hover-text: rgba(18, 155, 165, .98);
}

.promo-card {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--promo-card-radius);
  background: var(--promo-card-bg);
  box-shadow:
    0 0 0 1.5px var(--promo-card-border),
    var(--promo-card-shadow),
    var(--promo-card-shadow-soft);
  color: inherit;
  transform: translateY(0);
  transition:
    transform var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.promo-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px var(--promo-card-border),
    0 1rem 2.4rem rgba(226, 147, 117, .22),
    0 .4rem 1rem rgba(7, 28, 38, .10);
}

.promo-card:active {
  transform: translateY(0);
}

.promo-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 .2rem var(--focus-ring-color),
    0 0 0 1.5px var(--promo-card-border),
    0 1rem 2.4rem rgba(226, 147, 117, .22),
    0 .4rem 1rem rgba(7, 28, 38, .10);
}

.promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--promo-card-inner-stroke);
  pointer-events: none;
  z-index: 0;
}

.promo-card__leaf {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: var(--promo-card-leaf-opacity);
}

.promo-card__leaf--top-left {
  top: -.1rem;
  left: -.1rem;
  width: min(44%, 9.5rem);
}

.promo-card__leaf--bottom-right {
  right: -.05rem;
  bottom: -.05rem;
  width: min(34%, 7.6rem);
}

.promo-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.promo-card__media {
  position: relative;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: .65rem;
}

.promo-card__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: .65rem;
  transform: scale(1);
  transition: transform var(--motion-slow) ease, filter var(--motion-slow) ease;
  filter: saturate(1.04) contrast(1.02);
}

.promo-card:hover .promo-card__image,
.promo-card:focus-visible .promo-card__image {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04);
}

.promo-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.promo-card__title {
  margin: 0;
  color: var(--promo-card-title-color);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.promo-card__text {
  margin: 0;
}

.promo-card__cta {
  margin-top: .2rem;
}

.promo-card__button {
  --bs-btn-padding-y: .34rem;
  --bs-btn-padding-x: .7rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .7rem;

  color: var(--promo-card-button-text);
  background-color: var(--promo-card-button-bg);
  border-color: var(--promo-card-button-border);
  box-shadow: 0 .2rem .45rem rgba(18, 155, 165, .08);
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.promo-card:hover .promo-card__button,
.promo-card:focus-visible .promo-card__button,
.promo-card__button:hover {
  color: var(--promo-card-button-hover-text);
  background-color: var(--promo-card-button-hover-bg);
  border-color: var(--promo-card-button-hover-border);
  transform: translateY(-1px);
  box-shadow: 0 .4rem .8rem rgba(18, 155, 165, .12);
}

.promo-card__button:active {
  transform: translateY(0);
  box-shadow: 0 .2rem .45rem rgba(18, 155, 165, .08);
}

.promo-card__button:focus-visible {
  box-shadow:
    0 0 0 .2rem var(--focus-ring-color),
    0 .4rem .8rem rgba(18, 155, 165, .12);
  outline: none;
}

.promo-card__button-icon {
  line-height: 1;
}

@media (max-width: 768px) {
  :root {
    --promo-card-radius: 1rem;
  }

  .promo-card__media {
    margin-bottom: 1.25rem;
  }

  .promo-card__leaf--top-left {
    width: min(40%, 8rem);
  }

  .promo-card__leaf--bottom-right {
    width: min(31%, 6.6rem);
  }
}

/* ==========================================================================
   Search Header — search results page header
   ========================================================================== */

.search-header {
}

.search-header__title {
  color: var(--color-navy);
  font-style: italic;
  line-height: 1.15;
}

.search-header__query {
  color: var(--color-teal);
}

.search-header__count {
  color: var(--color-gray-blue);
  line-height: 1.6;
}

/* ==========================================================================
   StaticPageContent — shared styles for static text pages
   (Szállítás, Fizetési módok, ÁSZF, Adatkezelés)
   Mirrors about-content.css tokens for visual consistency.
   ========================================================================== */

.static-page-content__title {
  color: var(--color-navy);
  font-style: italic;
  line-height: 1.15;
}

.static-page-content__heading {
  color: var(--color-navy);
  font-size: 1.4rem;
  line-height: 1.25;
}

.static-page-content__text {
  color: var(--color-navy-light);
  line-height: 1.7;
}

.static-page-content__link {
  color: var(--color-teal);
  text-decoration: none;
  transition: color var(--motion-fast) ease;
}

.static-page-content__link:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

.static-page-content__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 575.98px) {
  .static-page-content__heading {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   TestimonialCard — Individual testimonial card (5.1.2)
   ========================================================================== */

:root {
  --tc-bg: #ffffff;
  --tc-shadow: 0 .5rem 1.5rem rgba(7, 28, 38, .08);
  --tc-text-color: #3a4a55;
  --tc-avatar-border: #b0bec5;
  --tc-avatar-color: #90a4ae;
  --tc-star-color: #f5b731;
}

.testimonial-card {
  background: var(--tc-bg);
  box-shadow: var(--tc-shadow);
  padding: 2rem 2rem 1.75rem;
  max-width: 480px;
  margin: 0 auto;
}

.testimonial-card__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--tc-avatar-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-avatar-color);
  margin-bottom: .75rem;
}

.testimonial-card__avatar:has(.testimonial-card__avatar-img) {
  width: auto;
  height: auto;
  border: none;
}

.testimonial-card__avatar-img {
  width: 3rem;
  height: auto;
  display: block;
}

.testimonial-card__stars {
  display: flex;
  justify-content: center;
  gap: .2rem;
  color: var(--tc-star-color);
  margin-bottom: .75rem;
}

.testimonial-card__quote {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: var(--tc-text-color);
}

.testimonial-card__quote p {
  margin: 0;
}

.testimonial-card__name {
  font-style: normal;
  color: var(--color-navy);
}

/* --- Responsive --- */

@media (max-width: 575.98px) {
  .testimonial-card {
    padding: 1.5rem 1.25rem 1.25rem;
    max-width: 100%;
  }

}

/* ==========================================================================
   TestimonialsAndArticles — Assembled split section (5)
   ========================================================================== */

.testimonials-and-articles {
  padding: 3rem 0 3.5rem;
}

@media (max-width: 575.98px) {
  .testimonials-and-articles {
    padding: 2rem 0 2.5rem;
  }
}

/* ==========================================================================
   Testimonials — Carousel section (5.1)
   ========================================================================== */

:root {
  --tm-dot-color: #ccc;
}


/* Carousel viewport — show partial side cards */
.testimonials__carousel {
  position: relative;
}

.testimonials__carousel .carousel-inner {
  overflow: visible;
  padding: 0 0 1rem;
  display: grid;
}

/* All items stay in flow so tallest sets height (carousel-fade uses opacity) */
.testimonials__carousel .carousel-item {
  grid-area: 1 / 1;
  display: block !important;
}

.testimonials__carousel .carousel-item {
  transition: transform var(--motion-slowest) ease, opacity var(--motion-slowest) ease;
}

/* Navigation arrows — positioning only (base styles via .nav-btn-circle) */
.testimonials__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.testimonials__nav-btn--prev {
  left: 0;
}

.testimonials__nav-btn--next {
  right: 0;
}

/* Pagination dots — override Bootstrap carousel-indicators */
.testimonials__dots.carousel-indicators {
  position: static;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: .75rem 0 0;
}

.testimonials__dots.carousel-indicators .testimonials__dot {
  width: .5rem !important;
  height: .5rem !important;
  border-radius: 50% !important;
  border: none;
  padding: 0;
  text-indent: 0;
  background-color: var(--tm-dot-color) !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color var(--motion-base) ease;
}

.testimonials__dots.carousel-indicators .testimonials__dot.active {
  background-color: var(--color-navy) !important;
}

.testimonials__dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--focus-ring-color);
}