/* =========================================================
   Sirvi Organics — Shared stylesheet (reset, base, header, footer, buttons)
   ========================================================= */

/* Suppress browsers' own built-in password-reveal/clear icons everywhere a
   custom eye icon is used (login, register, reset-pin) so only our icon
   shows at the field's right edge. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.sirvi-header-search { position: relative; padding: 16px 24px; border-top: 1px solid #e4e9e2; background: #fff; }
.sirvi-header-search[hidden] { display: none !important; }
.sirvi-header-search .visually-hidden, .sirvi-search .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sirvi-header-search form { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; }
.sirvi-header-search input { flex: 1; width: 100%; min-width: 0; height: 48px; padding: 12px; border: 1px solid #d6dfd4; border-radius: 8px; font: inherit; }
.sirvi-header-search .btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 12px; color: #fff; }
.sirvi-header-search .btn svg { display: block; flex-shrink: 0; width: 22px; height: 22px; }
.sirvi-header-search button { flex-shrink: 0; cursor: pointer; }
.sirvi-header-search [data-techmo-search-close] { padding: 10px; border: 0; background: transparent; color: #151515; }
.sirvi-header-search :focus-visible { outline: 2px solid #006028; outline-offset: 3px; }

.sirvi-search-suggestions {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 48px));
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e4e9e2;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  z-index: 30;
  padding: 6px 0;
}

.sirvi-search-suggestions[hidden] { display: none !important; }

.sirvi-search-suggest-group { padding: 6px 0; }
.sirvi-search-suggest-group + .sirvi-search-suggest-group { border-top: 1px solid #eef1ec; }

.sirvi-search-suggest-label {
  margin: 0;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--grey, #7a857e);
}

.sirvi-search-suggest-list { list-style: none; margin: 0; padding: 0; }

.sirvi-search-suggest-list--categories a {
  display: block;
  padding: 9px 18px;
  font-size: 14px;
  color: #151515;
}
.sirvi-search-suggest-list--categories a:hover { background: #f4f8f3; color: var(--green-deep); }

.sirvi-search-suggest-list--products a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
}
.sirvi-search-suggest-list--products a:hover { background: #f4f8f3; }

.sirvi-search-suggest-list--products img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f4f8f3;
}

.sirvi-search-suggest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.sirvi-search-suggest-name {
  font-size: 14px;
  color: #151515;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sirvi-search-suggest-price { font-size: 13px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.sirvi-search-suggest-price del { color: var(--grey, #7a857e); }
.sirvi-search-suggest-price span { color: var(--green-deep); font-weight: 600; }

.sirvi-search-suggest-loading,
.sirvi-search-suggest-empty {
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--grey, #7a857e);
  text-align: center;
}

.sirvi-search-suggest-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sirvi-search-suggest-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e4e9e2;
  border-top-color: var(--green-deep);
  border-radius: 50%;
  flex-shrink: 0;
  animation: sirvi-search-spin .7s linear infinite;
}

@keyframes sirvi-search-spin { to { transform: rotate(360deg); } }

.sirvi-search-suggest-viewall {
  display: block;
  padding: 12px 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
  border-top: 1px solid #eef1ec;
}
.sirvi-search-suggest-viewall:hover { background: #f4f8f3; }

@media (max-width: 700px) {
  .sirvi-search-suggestions {
    width: 100%;
    left: 0;
    transform: none;
    max-height: 60vh;
    border-radius: 0;
  }
  .sirvi-search-suggest-list--products img { width: 38px; height: 38px; }
  .sirvi-search-suggest-name { font-size: 13px; }
}
@media (max-width: 767px) {
  .sirvi-header-search { padding: 12px 16px; }
  .sirvi-header-search form { gap: 8px; }
  .sirvi-header-search .btn { padding: 12px; }
}

:root {
  --green-deep: #016028;   /* header bar, footer, buttons, eyebrows (design #016028) */
  --green-deep-hover: #014a1f;
  --green-dark: #05341f;
  --green: #0f6b34;
  --green-mid: #17954b;    /* bright green — hero accent / Shop Now */
  --green-light: #4caf7d;
  --sage: #eff0e8;         /* story / quality / FAQ boxes */
  --page-grey: #fafafa;    /* product & FAQ section background */
  --cream: #f3ecdc;
  --cream-2: #faf5ec;
  --ink: #1a1a1a;
  --grey: #7b7b7b;
  --grey-light: #e2e2e2;
  --radius-lg: 25px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --container: 1240px;
  --container-wide: 1920px;
  --font: "Poppins", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* No horizontal scrolling, ever. `clip` (not `hidden`) so html/body never
   become scroll containers — keeping .site-header's position:sticky alive. */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Full-width layout used by product grids, carousels and banners (design: ~60px side margins on 1920) */
.container--wide {
  max-width: var(--container-wide);
  padding: 0 60px;
}

@media (max-width: 900px) {
  .container--wide {
    padding: 0 24px;
  }
}

.section {
  padding: 80px 0;
}

.section--tight {
  padding: 56px 0;
}

.section--cream {
  background: var(--cream-2);
}

.section--sage {
  background: var(--sage);
}

.section--grey {
  background: var(--page-grey);
}

/* Line-art illustrations, placed as in the Figma design. Each artwork is
   pre-rendered at its Figma frame size (1920x1206) and scales with width. */

/* Mission + "Why Families Trust" share one illustration anchored to the
   bottom of the pair; the upper Our Story row stays plain. */
.illus-block--story {
  background: var(--sage) var(--illus-story) center bottom / 100% auto no-repeat;
}

.illus-block--story > .section--sage {
  background: transparent;
}

/* Quality: artwork runs 31px past the section's bottom edge. */
.section--illus-quality {
  background: var(--sage) var(--illus-quality) center bottom -31px / 100% auto no-repeat;
}

/* Healthier Cooking: artwork starts 42px below the section's top edge. */
.section--illus-healthy {
  background: var(--sage) var(--illus-healthy) center top 42px / 100% auto no-repeat;
}

/* Mobile (Figma 412px frame): every artwork is 412x259, bottom-aligned to its
   section; Quality reuses the Our Story artwork, and the footer artwork is
   drawn 1000px wide starting 6px left of the edge. */
@media (max-width: 700px) {
  .section--illus-quality {
    background: var(--sage) var(--illus-story) center bottom / 100% auto no-repeat;
  }

  .section--illus-healthy {
    background: var(--sage) var(--illus-healthy) center bottom / 100% auto no-repeat;
  }
}

.eyebrow {
  display: inline-block;
  background: var(--green-deep);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 30px;
  border-radius: 30px;
  margin-bottom: 18px;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-title--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-lead {
  font-size: 17px;
  color: #333;
  max-width: 640px;
}

.section-lead--center {
  margin: 0 auto;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 30px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn--primary {
  background: var(--green-mid);
  color: #fff;
}

.btn--primary:hover {
  background: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 107, 52, 0.3);
}

.btn--outline {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green-mid);
}

.btn--dark {
  background: var(--green-deep);
  color: #fff;
}

.btn--dark:hover {
  background: var(--green-deep-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 96, 40, 0.3);
}

.btn--lg {
  font-size: 22px;
  padding: 18px 44px;
}

/* At 22px + 44px side padding, "Explore our collection" doesn't fit the
   narrow phone content column (story-text) and used to force a wrap. */
@media (max-width: 700px) {
  .btn--lg {
    font-size: 15px;
    padding: 13px 22px;
  }
}

.btn--block {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

/* Tall dark-green band across the top (design: ~56px, #016028) */
.header-bar {
  height: 56px;
  background: var(--green-deep);
}

.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding-left: 180px; /* clears the overlapping round logo badge */
}

/* Round white logo badge overlapping the green bar and the white nav row */
.site-header .logo {
    position: absolute;
    left: 24px;
    top: -57px;
    width: 111px;
    height: 126px;
    border-radius: 0% 0% 47% 47%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 13px 10px rgba(0, 0, 0, 0.12);
    z-index: 8;
}


.site-header .logo img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}

.icon-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.main-nav {
  margin: 0 auto;
}

.main-nav ul {
  display: flex;
  gap: 40px;
}

.main-nav a {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}

.main-nav a.active,
.main-nav a:hover {
  color: var(--green-mid);
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--ink);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Count bubble pinned to the icon's top-right corner (.icon-btn is the
   positioning context). Runtime updates it via data-techmo-bind. */
.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .header-bar {
    height: 30px;
  }

  /* Badge sits top-LEFT on mobile; icons row hugs the right edge, left
     padding clears the badge. */
  .header-top {
    min-height: 64px;
    padding-left: 110px;
    padding-right: 16px;
  }

  /* The fixed-position nav and absolute logo leave .header-icons as the
     only in-flow child, so space-between parks it at the LEFT edge;
     this pushes it to the right edge on any screen width. */
  .header-icons {
    margin-left: auto;
  }

  /* Pinned to the top-left corner: -30px cancels the green bar, left
     matches the 16px mobile content edge. */
  .site-header .logo {
    width: 82px;
    height: 82px;
    top: -30px;
    left: 16px;
    right: auto;
  }

  .site-header .logo img {
    width: 58px;
    height: 58px;
  }

  .main-nav {
    position: fixed;
    top: 94px;
    left: 0;
    right: 0;
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  }

  .main-nav.is-open {
    max-height: 400px;
  }

  .main-nav ul {
    flex-direction: column;
    padding: 16px 24px;
    gap: 18px;
  }

  .nav-toggle {
    display: flex;
  }
}

/* =========================================================
   Full-bleed hero banner (shared by home and collection) —
   the design's hero artwork includes headline, copy, Shop Now
   button and bottles inside the image itself.
   ========================================================= */

.hero-banner {
  position: relative;
  background: var(--cream);
}

.hero-banner img {
  width: 100%;
  display: block;
}

.hero-banner .hero-shop-link {
  /* Invisible hotspot over the baked-in "Shop Now" button */
  position: absolute;
  left: 7.5%;
  top: 65%;
  width: 17%;
  height: 10%;
  border-radius: 40px;
}

.hero-dots {
  position: absolute;
  bottom: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.hero-dots span.is-active {
  width: 36px;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .hero-dots span {
    width: 8px;
    height: 8px;
  }

  .hero-dots span.is-active {
    width: 24px;
  }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: var(--green-deep) var(--illus-footer) center bottom / 100% auto no-repeat;
  color: #fff;
  padding: 0 0 28px;
}

/* Mobile footer artwork (Figma): 1000px wide, starting 6px left of the edge.
   Must stay after the base rule above or the desktop sizing wins. */
@media (max-width: 700px) {
  .site-footer {
    background-position: -6px bottom;
    background-size: auto 320px;
  }
}

.site-footer .container {
  width: 100%;
  max-width: var(--container);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) max-content max-content max-content;
  justify-content: space-between;
  column-gap: clamp(24px, 4vw, 90px);
  row-gap: 40px;
  padding-bottom: 30px;
}

/* Round white logo badge that overlaps the footer's top edge (design) */
.footer-brand {
    grid-column: 1;
    text-align: center;
    max-width: 393px;
    margin: 0;
}

/* Address + newsletter form: sits under the logo/description on desktop
   (grid-column: 1 places it in the next free row of the same column, per
   CSS Grid's sparse auto-placement), but stays where it is in DOM order
   on mobile — after "Need Help?" — once the grid collapses to one column. */
.footer-newsletter {
    grid-column: 1;
    text-align: center;
    max-width: 393px;
    margin: 0 auto;
}

.footer-address {
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    margin: 0 auto 16px;
    max-width: 330px;
}

.footer-brand .logo {
    width: 146px;
    height: 164px;
    border-radius: 0% 0% 47% 47%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -1px auto 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.footer-brand .logo img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.footer-brand p {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  margin: 0 auto 24px;
  max-width: 330px;
}

.footer-newsletter h4 {
  font-size: 14px;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}

.footer-col {
  padding-top: 64px;
}

.newsletter-form {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 330px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.newsletter-form input {
  flex: 1;
  margin: 0;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 15px;
  color: #1f1f1f;
  min-width: 0;
  box-sizing: border-box;
}

.newsletter-form .newsletter-submit {
  background: #5b2711;
  margin: 2px;
  border: none;
  border-radius: 6px;
  color: #fff;
  min-width: 96px;
  height: 40px;
  padding: 0 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease;
  box-sizing: border-box;
}

.newsletter-form .newsletter-submit:hover {
  background: #461e0d;
}

.newsletter-msg {
  font-size: 13px;
  color: var(--green-light);
  margin-top: 10px;
  min-height: 16px;
}

.footer-col h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 14px;
}

.footer-col a {
  font-size: 15px;
  color: #fff;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-bottom {
  padding-top: 80px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.footer-help-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.footer-help-heading h5 {
  margin: 0;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 6px;
  padding: 5px 37px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}

.footer-contact-btn:hover {
  background: #1a1a1a;
  text-decoration: none;
  color: #fff;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.footer-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: background-color .18s ease;
}

.footer-social-icons a:hover {
  background: #eff6ee;
}

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

  .footer-brand {
    grid-column: 1 / -1;
    margin: 0 auto;
  }

  .footer-newsletter {
    grid-column: 1 / -1;
    margin: 0 auto;
  }

  .footer-col {
    padding-top: 0;
  }
}

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

/* =========================================================
   Shared components: FAQ, product cards, category badges
   ========================================================= */

.faq {
  max-width: 1160px;
  margin: 0 auto;
}

.faq-item {
  background: var(--sage);
  border-radius: 20px;
  margin-bottom: 18px;
  overflow: hidden;
}

.faq-heading { margin: 0; font: inherit; }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

.faq-question .chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.is-open .chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  padding: 0 34px 26px;
  font-size: 18px;
  color: #333;
}

/* Same card layout everywhere: fluid columns fill the container (5/4/3/2);
   proportions stay identical via square image + fixed title height. */
:root {
  --product-card-w: 240px; /* max size of the compare thumbnail */
}

.product-grid,
.product-grid--5col {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
}

.compare-thumb {
  display: block;
  width: 100%;
  max-width: var(--product-card-w);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .product-grid,
  .product-grid--5col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .product-grid,
  .product-grid--5col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 639px) {
  .product-grid,
  .product-grid--5col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.product-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto 18px;
  cursor: pointer;
}

.product-card h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  min-height: 2.7em;
  text-align: center;
}

.product-card h3 .product-card__name,
.product-card h3 .product-card__variant {
  display: block;
  overflow-wrap: anywhere;
  text-align: center;
}

.product-card h3 .product-card__variant {
  font-size: 0.9em;
  color: var(--grey);
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 16px;
}

.price {
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.price--old {
  font-size: 17px;
  color: var(--grey);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Compact dark-green button, centered in the card (design #016028, ~8px radius) */
.add-to-cart {
  margin-top: auto;
  align-self: center;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--green-deep);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  transition: background 0.2s ease;
}

/* The hidden attribute must beat the display rules (runtime + Liquid
   toggle [hidden] to swap the button and the quantity stepper). */
.add-to-cart[hidden],
.qty-inline[hidden] {
  display: none !important;
}

/* In-card quantity stepper — occupies the add-to-cart button's slot
   (same height, radius and colors) so the card doesn't shift when the
   runtime swaps them. */
.qty-inline {
  margin-top: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--green-deep);
  border-radius: 8px;
  overflow: hidden;
}

.qty-btn {
  border: none;
  background: var(--green-deep);
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.qty-btn:hover {
  background: var(--green-deep-hover);
}

.qty-value {
  min-width: 36px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.add-to-cart:hover {
  background: var(--green-deep-hover);
}

.add-to-cart.is-added {
  background: var(--green-dark);
}

.add-to-cart svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.add-to-cart-label-short {
  display: none;
}

/* "Choose Options" swaps to plain "Loading…" text (main.js) for as long as
   its request is in flight, then restores its original label + icon. */
.add-to-cart[data-techmo-loading="true"] {
  opacity: .6;
  pointer-events: none;
}

/* Blur while a cart request is in flight: the add-to-cart cart icon and the
   +/- stepper (the runtime sets data-techmo-loading on the clicked element). */
.add-to-cart svg,
.qty-btn,
.qty-value {
  transition: filter .15s ease, opacity .15s ease;
}

.add-to-cart[data-techmo-loading="true"] svg,
.qty-btn[data-techmo-loading="true"],
.qty-inline:has([data-techmo-loading="true"]) .qty-value {
  filter: blur(2px);
  opacity: .6;
}

.qty-btn[data-techmo-loading="true"] {
  pointer-events: none;
}

/* =========================================================
   Missing-asset placeholder (visible dashed box, flagged in report)
   ========================================================= */
.asset-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--grey);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.03),
    rgba(0, 0, 0, 0.03) 10px,
    transparent 10px,
    transparent 20px
  );
  color: var(--grey);
  font-size: 13px;
  font-weight: 500;
  padding: 20px;
  min-height: 120px;
}

/* =========================================================
   Back-to-top button (uses Icons/upload.png — up-chevron)
   ========================================================= */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-mid);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  z-index: 998;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--green);
}

.back-to-top img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Toast for add-to-cart feedback */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green-dark);
  color: #fff;
  padding: 14px 26px;
  border-radius: 30px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  /* Above the cart drawer (1055) and quick-view (1060) so quantity errors
     raised from inside them are visible. */
  z-index: 1200;
  width: max-content;
  max-width: min(92vw, 480px);
  text-align: center;
}

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

.toast.is-error {
  background: #b3261e;
}

.header-account { position: relative; }
.header-account-menu { position: absolute; top: calc(100% + 13px); right: 0; z-index: 120; width: 205px; padding: 9px; border: 1px solid #dfe7dc; border-radius: 12px; background: #fff; box-shadow: 0 15px 35px rgba(5, 52, 31, .16); }
.header-account-menu[hidden] { display: none; }
.header-account-menu p { margin: 4px 8px 8px; padding-bottom: 9px; border-bottom: 1px solid #e8ede6; color: #526052; font-size: 12px; overflow-wrap: anywhere; }
.header-account-menu a, .header-account-menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 8px; border: 0; border-radius: 7px; background: transparent; color: #344334; font: inherit; font-size: 13px; text-align: left; }
.header-account-menu a:hover, .header-account-menu button:hover { background: #eff6ee; color: var(--green-deep); }
.header-account-menu i { color: var(--green-deep); font-size: 15px; }
.sirvi-logout-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; }
.sirvi-logout-modal[hidden] { display: none; }
.sirvi-logout-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 35, 19, .48); }
.sirvi-logout-modal__dialog { position: relative; width: min(100%, 390px); padding: 30px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.sirvi-logout-modal__dialog > i { display: grid; width: 46px; height: 46px; margin: 0 auto 14px; place-items: center; border-radius: 50%; background: #eff6ee; color: var(--green-deep); font-size: 22px; }
.sirvi-logout-modal__dialog h2 { margin: 0 0 7px; color: var(--green-dark); font-size: 23px; }
.sirvi-logout-modal__dialog p { margin: 0 0 21px; color: var(--grey); font-size: 14px; }
.sirvi-logout-modal__dialog > div:last-child { display: flex; gap: 10px; justify-content: center; }
.sirvi-logout-modal__dialog .btn { min-height: 42px; padding: 9px 14px; }
.sirvi-logout-modal__close { position: absolute; top: 9px; right: 12px; border: 0; background: none; color: #687168; font-size: 25px; line-height: 1; }

/* =========================================================
   Mobile polish — tightens the desktop-scale paddings the
   design uses; layout breakpoints live next to each component.
   ========================================================= */
@media (max-width: 700px) {
  .container,
  .container--wide,
  .site-footer .container {
    width: auto;
    padding: 0 16px;
  }

  /* The generic .container padding above would otherwise win over the
     900px block's clearance (same specificity, later in file) and slide
     the nav/icons row under the round logo badge (top-left on mobile). */
  .header-top {
    padding-left: 106px;
    padding-right: 12px;
  }

  .header-icons {
    gap: 12px;
  }

  .footer-brand .logo {
    width: 116px;
    height: 130px;
  }

  .footer-brand .logo img {
    width: 92px;
    height: 92px;
  }

  .footer-bottom {
    padding-top: 40px;
  }

  .footer-grid {
    row-gap: 28px;
  }

  .section {
    padding: 48px 0;
  }

  .section--tight {
    padding: 36px 0;
  }

  .category-section {
    margin-top: 56px;
  }

  .category-strip {
    gap: 16px;
  }

  .category-pill img {
    width: 64px;
    height: 64px;
  }

  .category-pill span {
    font-size: 12px;
    max-width: 76px;
  }

  .faq-question {
    padding: 18px 20px;
    font-size: 17px;
    gap: 12px;
  }

  .faq-answer p {
    padding: 0 20px 18px;
    font-size: 15px;
  }

  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }

  .toast {
    bottom: 16px;
    width: calc(100% - 32px);
    text-align: center;
  }

  .product-card {
    padding: 14px;
  }

  .product-card h3 {
    font-size: 15px;
  }

  .price {
    font-size: 16px;
  }

  .price--old {
    font-size: 14px;
  }

  /* product-grid--5col is still 2 narrow columns all the way from here
     down to 420px — shrink the button to that card width instead of
     letting it keep its full desktop size and spill past the card edge. */
  .add-to-cart {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    gap: 6px;
  }

  /* "Choose options" -> just "Choose" + the icon on mobile — the full
     label doesn't need to fit in these narrow cards. */
  .add-to-cart-label-full {
    display: none;
  }

  .add-to-cart-label-short {
    display: inline;
  }
}

/* Touch targets on the card stepper stay >= 40px; just trim further. */
@media (max-width: 420px) {
  .add-to-cart {
    padding: 10px 12px;
    font-size: 13px;
    gap: 6px;
  }

  /* Smallest phones: shrink the round badge (top-left) and its
     clearance so the icons + hamburger never collide with it. */
  .site-header .logo {
    left: 12px;
    right: auto;
    top: -30px;
    width: 68px;
    height: 76px;
  }

  .site-header .logo img {
    width: 48px;
    height: 48px;
  }

  .header-top {
    padding-left: 90px;
    padding-right: 12px;
    min-height: 56px;
  }
}

/* =========================================================
   Cart page (templates/cart.liquid + sections/cart-lines,
   sections/coupon). Desktop: 4-column grid rows; mobile:
   stacked cards with data-label prefixes.
   ========================================================= */
.cart-page .section-title {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 20px;
}

.cart-alert {
  background: #fdf6e3;
  border: 1px solid #e8d9a8;
  color: #7a5c00;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 15px;
}

.cart-sync-notice ul { margin: 6px 0 0; padding-left: 18px; }

.cart-panel {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  padding: 20px;
}

.cart-row {
  display: grid;
  grid-template-columns: 2.6fr 1fr 1.1fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--grey-light);
}

.cart-row--head {
  padding: 0 0 10px;
  font-weight: 600;
  color: var(--grey);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cart-col--qty,
.cart-col--total {
  text-align: center;
}

.cart-col--product {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cart-item-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--grey-light);
  border-radius: 10px;
  background: #fff;
  flex-shrink: 0;
}

.cart-item-info {
  min-width: 0;
}

.cart-item-name {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-name:hover {
  color: var(--green-mid);
}

.cart-item-variant {
  display: block;
  font-size: 13px;
  color: var(--grey);
  margin-top: 2px;
}

.cart-stock {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.cart-stock--in { color: var(--green-mid); }
.cart-stock--out { color: #c0392b; }

.cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 0;
  margin-top: 4px;
}

.cart-remove svg {
  width: 15px;
  height: 15px;
}

.cart-remove:hover {
  text-decoration: underline;
}

.cart-price {
  font-weight: 600;
}

.cart-discount {
  display: block;
  font-size: 13px;
  color: var(--green-mid);
}

.cart-tax {
  display: block;
  font-size: 13px;
  color: var(--grey);
}

.cart-col--qty .qty-inline {
  margin-top: 0;
  align-self: center;
}

.cart-line-total {
  font-weight: 700;
  color: var(--green-deep);
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sage);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 18px;
  font-size: 17px;
}

.cart-subtotal-value {
  font-weight: 700;
}

/* Coupon */
.coupon-box {
  margin: 16px 0;
}

.coupon-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
}

.coupon-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  outline: none;
}

.coupon-form input:focus {
  border-color: var(--green-mid);
}

.btn.coupon-apply {
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 15px;
}

.coupon-applied {
  background: var(--sage);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
}

.coupon-remove {
  background: none;
  border: none;
  color: #c0392b;
  font-weight: 600;
  font-size: 14px;
  margin-left: 8px;
}

.coupon-msg {
  min-height: 18px;
  font-size: 13.5px;
  color: #c0392b;
  margin-top: 6px;
}

.coupon-msg:empty {
  margin-top: 0;
}

/* Footer actions */
.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.cart-return {
  font-weight: 600;
  color: var(--green-deep);
}

.cart-return:hover {
  text-decoration: underline;
}

/* Empty state */
.cart-empty {
  text-align: center;
  padding: 40px 16px;
}

.cart-empty svg {
  width: 64px;
  height: 64px;
  color: var(--grey);
  margin: 0 auto 16px;
}

.cart-empty h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Mobile: each row becomes a card; price/qty/total keep their
   data-label prefixes so nothing needs a header row. */
@media (max-width: 700px) {
  .cart-panel {
    padding: 14px;
  }

  .cart-row--head {
    display: none;
  }

  .cart-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cart-col--qty,
  .cart-col--total {
    text-align: left;
  }

  .cart-col--price,
  .cart-col--qty,
  .cart-col--total {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cart-col--price::before,
  .cart-col--qty::before,
  .cart-col--total::before {
    content: attr(data-label);
    font-size: 13px;
    font-weight: 600;
    color: var(--grey);
    min-width: 72px;
  }

  .cart-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }

  .cart-actions .btn {
    justify-content: center;
  }

  .coupon-form {
    max-width: none;
  }
}

/* =========================================================
   Cart: delivery-address + payment-method panels (page-level,
   outside the re-rendered cart-lines section).
   ========================================================= */
.cart-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.cart-select-panel {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  padding: 20px;
}

.cart-select-panel h2 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}

.address-list,
.payment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.address-card,
.payment-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--grey-light);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.address-card:hover,
.payment-option:hover {
  border-color: var(--green-mid);
}

.address-card.is-selected {
  border-color: var(--green-deep);
  background: var(--sage);
}

/* Shared radio dot; the payment options drive it from a real
   (visually hidden) radio input, the address cards from .is-selected */
.select-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--grey-light);
  border-radius: 50%;
  position: relative;
}

.address-card.is-selected .select-radio,
.payment-option input:checked ~ .select-radio {
  border-color: var(--green-deep);
}

.address-card.is-selected .select-radio::after,
.payment-option input:checked ~ .select-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--green-deep);
}

.payment-option {
  align-items: center;
}

.payment-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-option span:last-child {
  font-size: 15px;
  font-weight: 500;
}

.address-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.4;
  min-width: 0;
}

.address-body strong {
  font-size: 15px;
}

.address-phone {
  color: var(--grey);
  font-size: 13px;
}

.cart-select-note {
  font-size: 13.5px;
  color: var(--grey);
  margin-top: 12px;
}

.cart-manage-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-deep);
}

.cart-manage-link:hover {
  text-decoration: underline;
}

.cart-login-btn {
  margin-top: 12px;
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 8px;
}

@media (max-width: 700px) {
  .cart-select-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }

  .cart-select-panel {
    padding: 14px;
  }
}

/* =========================================================
   Auth pages (login.liquid / register.liquid) — these templates keep
   the platform port's markup (their JS toggles d-none and relies on
   specific classes), so this layer styles those classes instead of
   rewriting the templates. Utilities first (global on purpose: the
   layout's drawer/quick-view slots use them too), then the auth card
   scoped under .gry-bg.
   ========================================================= */
.d-none { display: none !important; }
.d-flex { display: flex; }
.position-relative { position: relative; }
.justify-content-between { justify-content: space-between; }
.align-items-baseline { align-items: baseline; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: #c0392b; }
.text-muted { color: var(--grey); }
.text-reset { color: inherit; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.mb-0 { margin-bottom: 0; }

.gry-bg {
  background: var(--page-grey);
  padding: 56px 16px;
}

.gry-bg .row {
  display: flex;
  justify-content: center;
}

.gry-bg [class*="col-"] {
  width: 100%;
  max-width: 460px;
}

.gry-bg .card {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 28px 26px;
}

.gry-bg h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.gry-bg .form-group {
  margin-bottom: 14px;
}

.gry-bg .formLabel {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.gry-bg .form-control {
  width: 100%;
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.gry-bg .form-control:focus {
  border-color: var(--green-mid);
}

.gry-bg .form-control[readonly] {
  background: var(--page-grey);
}

/* intl-tel-input wraps #reg_phone after page load. Without an explicit
   wrapper width and a reserved flag area its absolutely-positioned country
   picker floats over the input, which prevents typing on some layouts. */
.gry-bg .iti {
  display: block !important;
  position: relative;
  width: 100% !important;
}

.gry-bg .iti input#reg_phone {
  box-sizing: border-box;
  padding-left: 92px !important;
  width: 100% !important;
}

.gry-bg .iti--separate-dial-code .iti__flag-container {
  align-items: center;
  bottom: 0;
  display: flex;
  left: 0 !important;
  position: absolute;
  right: auto !important;
  top: 0;
  width: 86px;
  z-index: 5;
}

.gry-bg .iti__selected-flag {
  align-items: center;
  display: flex;
  height: 100%;
  overflow: hidden;
  padding: 0 8px;
  white-space: nowrap;
  width: 86px;
}

.gry-bg .iti__selected-dial-code { margin-left: 6px; }
.gry-bg .iti__arrow { display: block !important; flex: 0 0 auto; }
.iti__container, .iti--container { z-index: 2000 !important; }
.gry-bg .iti__hide { display: none !important; }
.iti__country-list {
  background: #fff;
  border: 1px solid var(--grey-light);
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  position: absolute;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
  max-height: 280px;
  overflow-y: auto;
  text-align: left;
  white-space: nowrap;
  width: min(360px, calc(100vw - 32px));
}

.gry-bg .iti__country { cursor: pointer; outline: 0; padding: 7px 10px; }
.gry-bg .iti__country:hover,
.gry-bg .iti__country.iti__highlight { background: rgba(0, 96, 40, .08); }
.gry-bg .iti__flag-box { display: inline-block; margin-right: 6px; vertical-align: middle; width: 20px; }
.gry-bg .iti__country-name { margin-right: 7px; vertical-align: middle; }
.gry-bg .iti__dial-code { color: #747474; vertical-align: middle; }

.gry-bg .input-group {
  display: flex;
  gap: 8px;
}

.gry-bg .input-group .form-control {
  flex: 1;
  min-width: 0;
}

/* Registration validation icons belong inside the input edge. The original
   Theme 1 partial is inline markup, so it needs a positioned parent in this
   theme instead of taking space below/next to the field. */
.gry-bg #registration_form .inputFieldContainer {
  position: relative;
}

.gry-bg #registration_form .errorIcon {
  line-height: 0;
  pointer-events: none;
  position: absolute;
  right: 13px;
  top: 13px;
  z-index: 6;
}

.gry-bg #registration_form .input-group + .errorIcon {
  right: 126px;
}

.gry-bg #registration_form .position-relative .form-control {
  padding-right: 44px;
}

.gry-bg #registration_form .position-relative .errorIcon {
  right: 44px;
}

.gry-bg .error,
.gry-bg [id$="_error"] {
  display: block;
  font-size: 12.5px;
  color: #c0392b;
  min-height: 16px;
  margin-top: 3px;
}

.gry-bg .sirvi-registration-api-message {
  clear: both;
  font-weight: 500;
  margin-top: 5px;
}

.gry-bg .btn {
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
}

.gry-bg .btn-primary {
  background: var(--green-deep);
  color: #fff;
  border: none;
  font-weight: 600;
}

.gry-bg .btn-primary:hover {
  background: var(--green-deep-hover);
}

.gry-bg .btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.gry-bg .btn-outline-primary {
  background: transparent;
  border: 1px solid var(--green-deep);
  color: var(--green-deep);
  font-weight: 600;
  white-space: nowrap;
}

.gry-bg .btn-outline-primary:hover {
  background: var(--green-deep);
  color: #fff;
}

.gry-bg .btn-block {
  display: block;
  width: 100%;
}

.gry-bg .btn-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: underline;
}

.gry-bg .btn-sm {
  font-size: 13px;
}

/* PIN recovery shares the same native auth card as login and registration.
   These selectors are deliberately scoped so account and checkout forms are
   unaffected. */
.sirvi-auth-page .card {
  padding: 34px 30px;
}

.sirvi-auth-heading {
  text-align: center;
  margin: 0 auto 26px;
}

.sirvi-auth-heading h1 {
  color: #161616;
  margin: 0 0 9px;
}

.sirvi-auth-heading p:not(.sirvi-auth-kicker) {
  color: #6d6d6d;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.sirvi-auth-kicker {
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.sirvi-auth-footer {
  margin: 22px 0 0;
  text-align: center;
}

.sirvi-auth-footer a,
.sirvi-auth-message + .btn {
  color: var(--green-deep);
  font-size: 14px;
  font-weight: 600;
}

.sirvi-auth-message {
  color: #6d6d6d;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
  text-align: center;
}

.sirvi-auth-server-messages {
  margin: 0 0 16px;
}

.sirvi-auth-server-message {
  align-items: flex-start;
  background: #fff0ef;
  border: 1px solid #dc3d32;
  border-left: 5px solid #c92a20;
  border-radius: 8px;
  color: #8f2019;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  margin: 16px 0 8px;
  padding: 10px 12px;
}

.sirvi-auth-server-message::before {
  background: #c92a20;
  border-radius: 50%;
  color: #fff;
  content: '!';
  flex: 0 0 18px;
  font-size: 12px;
  font-weight: 800;
  height: 18px;
  line-height: 18px;
  margin: 1px 9px 0 0;
  text-align: center;
}

.sirvi-auth-server-message[hidden] { display: none; }

.sirvi-auth-server-message--success {
  background: #eff8f1;
  border-color: #a9d7b4;
  color: #006028;
}

.sirvi-auth-server-message--success::before {
  background: #006028;
  content: '✓';
}

.sirvi-auth-password {
  position: relative;
}

.sirvi-auth-password .form-control {
  padding-right: 58px;
}

.sirvi-auth-password button {
  background: transparent;
  border: 0;
  color: var(--green-deep);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.sirvi-auth-password button:focus-visible,
.sirvi-auth-page a:focus-visible,
.sirvi-auth-page button:focus-visible,
.sirvi-auth-page input:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .gry-bg.sirvi-auth-page { padding: 34px 16px; }
  .sirvi-auth-page .card { border-radius: 12px; padding: 26px 18px; }
  .sirvi-auth-heading { margin-bottom: 22px; }
  .sirvi-auth-heading h1 { font-size: 22px; }
  .gry-bg .iti input#reg_phone { font-size: 14px; padding-left: 86px !important; }
  .gry-bg .iti--separate-dial-code .iti__flag-container,
  .gry-bg .iti__selected-flag { width: 80px; }
  .gry-bg .iti__selected-dial-code { margin-left: 4px; }
  .gry-bg #registration_form .input-group { align-items: stretch; gap: 5px; }
  .gry-bg #registration_form .input-group .btn { font-size: 12px; padding-left: 10px; padding-right: 10px; }
  .gry-bg #registration_form .input-group + .errorIcon { right: 102px; }
}


/* Social login: icon fonts absent — lettered circles instead */
.gry-bg .separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0 14px;
  font-size: 14px;
}

.gry-bg .separator::before,
.gry-bg .separator::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--grey-light);
}

.gry-bg .social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.gry-bg .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}

.gry-bg .social .facebook { background: #3b5998; }
.gry-bg .social .google { background: #dd4b39; }
.gry-bg .social .twitter { background: #1da1f2; }
.gry-bg .social .facebook i::before { content: "f"; font-style: normal; }
.gry-bg .social .google i::before { content: "G"; font-style: normal; }
.gry-bg .social .twitter i::before { content: "t"; font-style: normal; }

/* Terms checkbox: aiz custom-square markup without aiz CSS — use the
   native checkbox, hide the empty decorative square */
.gry-bg .aiz-checkbox .aiz-square-check {
  display: none;
}

.gry-bg .aiz-checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--green-deep);
  margin-right: 6px;
  vertical-align: -2px;
}

.gry-bg a {
  color: var(--green-deep);
}

.gry-bg a:hover {
  text-decoration: underline;
}

.gry-bg p {
  font-size: 14px;
}

@media (max-width: 560px) {
  .gry-bg {
    padding: 32px 12px;
  }

  .gry-bg .card {
    padding: 22px 16px;
  }
}

/* =========================================================
   Runtime UI slots (quick-view modal, cart drawer, login prompt) —
   the server-rendered snippet/section markup inside them uses the
   platform port's utility classes, styled here scoped to the slots.
   The quickview overlay/backdrop rules live in layout/theme.liquid.
   ========================================================= */
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.align-items-center { align-items: center; }
.flex-grow-1 { flex-grow: 1; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 8px; }
.mx-1 { margin-left: 4px; margin-right: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.pt-2 { padding-top: 8px; }
.py-4 { padding-top: 24px; padding-bottom: 24px; }
.p-3 { padding: 16px; }
.px-0 { padding-left: 0; padding-right: 0; }
.small { font-size: 13px; }
.border-top { border-top: 1px solid var(--grey-light); }
.text-white { color: #fff; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-unstyled { list-style: none; margin: 0; padding: 0; }

/* Buttons/inputs inside the runtime slots */
[data-techmo-slot="quickview"] .btn,
.cart-drawer .btn,
.login-prompt-modal .btn {
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-techmo-slot="quickview"] .btn-primary,
.cart-drawer .btn-primary {
  background: var(--green-deep);
  color: #fff;
  font-weight: 600;
}

[data-techmo-slot="quickview"] .btn-primary:hover,
.cart-drawer .btn-primary:hover {
  background: var(--green-deep-hover);
}

[data-techmo-slot="quickview"] .btn-outline-primary,
.cart-drawer .btn-outline-primary {
  background: transparent;
  border: 1px solid var(--green-deep);
  color: var(--green-deep);
  font-weight: 600;
}

[data-techmo-slot="quickview"] .btn-outline-primary:hover,
.cart-drawer .btn-outline-primary:hover {
  background: var(--green-deep);
  color: #fff;
}

[data-techmo-slot="quickview"] .btn-sm,
.cart-drawer .btn-sm {
  padding: 5px 10px;
  font-size: 14px;
}

[data-techmo-slot="quickview"] .btn-link,
.cart-drawer .btn-link {
  background: none;
  border: none;
  padding: 4px;
  color: var(--green-deep);
  text-decoration: underline;
  font-size: 14px;
}

.cart-drawer .btn-link.text-danger {
  color: #c0392b;
}

[data-techmo-slot="quickview"] .btn-block,
.cart-drawer .btn-block {
  display: flex;
  width: 100%;
}

[data-techmo-slot="quickview"] .btn-disabled {
  background: var(--grey-light);
  color: var(--grey);
  cursor: default;
}

[data-techmo-slot="quickview"] .btn-round {
  background: var(--page-grey);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

[data-techmo-slot="quickview"] .btn-round:hover {
  background: var(--green-deep);
  color: #fff;
  transform: rotate(90deg);
}

/* .position-absolute is not a real utility class anywhere in this theme
   (only scoped under an unrelated account page), so this button used to
   render inline at the top of the dialog's normal flow instead of
   floating over its top-right corner. */
[data-techmo-slot="quickview"] .quickview-close {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  padding: 0 0 4px;
}

[data-techmo-slot="quickview"] .form-control {
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 15px;
  outline: none;
}

[data-techmo-slot="quickview"] .form-control:focus {
  border-color: var(--green-mid);
}

[data-techmo-slot="quickview"] img {
  max-width: 100%;
}

/* Cart drawer panel + backdrop */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  z-index: 1055;
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  transition: transform 0.25s ease;
}

.cart-drawer[hidden] {
  display: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}

.drawer-backdrop[hidden] {
  display: none;
}

.mini-cart-items li {
  border-bottom: 1px solid var(--grey-light);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.mini-cart-items img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--grey-light);
  border-radius: 8px;
}

/* Login prompt modal */
.login-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-prompt-modal[hidden] {
  display: none;
}

.login-prompt-dialog {
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.login-prompt-dialog p {
  margin-bottom: 16px;
  font-size: 15px;
}

/* =========================================================
   Product page + quick-view modal interior. The quick-view snippet
   mirrors templates/product.liquid markup exactly (.product-page
   wrapper), so everything scoped to .product-page styles BOTH.
   ========================================================= */
.fs-20 { font-size: 20px; }
.flex-wrap { flex-wrap: wrap; }
.mr-3 { margin-right: 14px; }
.mb-1 { margin-bottom: 4px; }
.opacity-70 { opacity: 0.7; }
.text-primary { color: var(--green-deep); }

.product-page .row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.product-page .col-md-5 {
  flex: 1 1 300px;
  min-width: 0;
}

.product-page .col-md-7 {
  flex: 1.4 1 340px;
  min-width: 0;
}

.product-page hr {
  border: none;
  border-top: 1px solid var(--grey-light);
  margin: 14px 0;
}

.product-page del {
  color: var(--grey);
  font-size: 15px;
}

/* Gallery */
.product-page .gallery-main {
  border: 1px solid var(--grey-light);
  border-radius: 12px;
  padding: 10px;
}

.product-page .gallery-main img {
  max-height: 320px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

/* Thumbnail row now scrolls horizontally instead of wrapping to a second
   line once there are more thumbnails than fit the gallery's width.
   margin-top here (not the "mt-2" class on the element, which isn't a
   real utility class anywhere in this theme) is what actually separates
   it from the main image above. */
.product-page .gallery-thumbs-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.product-page .gallery-thumbs {
  flex: 1 1 auto;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
}

.product-page .gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.product-page .gallery-thumbs .btn {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--grey-light) !important;
  border-radius: 8px;
  padding: 4px;
}

.product-page .gallery-thumbs .btn:hover {
  border-color: var(--green-mid) !important;
}

.product-page .gallery-thumb-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--grey-light);
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.product-page .gallery-thumb-arrow svg {
  width: 14px;
  height: 14px;
}

.product-page .gallery-thumb-arrow:hover {
  background: var(--green-deep);
  color: #fff;
}

.product-page .gallery-thumb-arrow[hidden] {
  display: none;
}

.product-page .h-50px {
  height: 50px;
  width: auto;
}

/* Rating stars: la-star icon font absent — draw ★ instead */
.product-page .rating {
  display: inline-flex;
  gap: 2px;
  margin: 4px 0;
}

.product-page .rating .la-star::before {
  content: "\2605";
  font-style: normal;
  font-size: 15px;
  color: var(--grey-light);
}

.product-page .rating .la-star.active::before {
  color: #f5a623;
}

/* Variant option pills (aiz-megabox radios) */
.product-page .option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 12px;
}

.product-page .option .col-sm-2,
.product-page .option .col-sm-10 {
  min-width: 0;
}

.product-page .aiz-radio-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-page .aiz-megabox {
  margin: 0;
  cursor: pointer;
}

.product-page .aiz-megabox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-page .aiz-megabox-elem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey-light);
  border-radius: 8px !important;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.product-page .aiz-megabox:hover .aiz-megabox-elem {
  border-color: var(--green-mid);
}

.product-page .aiz-megabox input:checked + .aiz-megabox-elem {
  border-color: var(--green-deep);
  background: var(--green-deep);
  color: #fff;
}

/* Purchase row + wishlist heart */
.product-page .purchase-row {
  gap: 4px;
}

.product-page .qty input {
  text-align: center;
}

.product-page .btn-link[data-techmo-action] {
  font-size: 22px;
  text-decoration: none;
}

.product-page .btn-link.is-active {
  color: #c0392b;
}

.product-page .variant-status {
  min-height: 18px;
  font-size: 13.5px;
  margin-top: 4px;
}

/* Quick-view close button: la-close icon font absent — draw the × */
[data-techmo-slot="quickview"] .btn-round .la-close::before {
  content: "\00d7";
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}

[data-techmo-slot="quickview"] .techmo-quickview-dialog {
  padding: 22px;
}

@media (max-width: 700px) {
  [data-techmo-slot="quickview"] .techmo-quickview-dialog {
    padding: 16px;
    max-height: 92vh;
  }

  .product-page .gallery-main img {
    max-height: 220px;
  }

  .product-page .option {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* =========================================================
   Product detail page (templates/product.liquid + product-reviews).
   Generic panel/spacing utilities first — the detail page, reviews
   and related-products blocks are platform-port markup built on them.
   ========================================================= */
.bg-white { background: #fff; }
.bg-light { background: var(--page-grey); }
.bg-primary { background: var(--green-deep); }
.shadow-sm { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); }
.rounded { border-radius: 14px; }
.border-bottom { border-bottom: 1px solid var(--grey-light); }
.pb-1 { padding-bottom: 4px; }
.pb-3 { padding-bottom: 14px; }
.py-3 { padding-top: 14px; padding-bottom: 14px; }
.p-1 { padding: 6px; }
.mt-1 { margin-top: 4px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 22px; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.mb-4 { margin-bottom: 22px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-24 { font-size: 24px; }
.fw-700 { font-weight: 700; }
.h-100 { height: 100%; }
.w-100px { width: 100px; }
.h5 { font-size: 18px; }
.pt-3 { padding-top: 14px; }

/* Detail page grid: the template uses col-lg-* (the modal uses col-md-*) */
.product-page .col-lg-5 {
  flex: 1 1 320px;
  min-width: 0;
}

.product-page .col-lg-7 {
  flex: 1.4 1 360px;
  min-width: 0;
}

.product-page .bg-white.shadow-sm.rounded {
  padding: 20px;
}

.product-page h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.product-page h6 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Buttons on the page itself (earlier rules only covered the modal slot) */
.product-page .btn {
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-page .btn-primary {
  background: var(--green-deep);
  color: #fff;
  font-weight: 600;
}

.product-page .btn-primary:hover {
  background: var(--green-deep-hover);
}

.product-page .btn-outline-primary {
  background: transparent;
  border: 1px solid var(--green-deep);
  color: var(--green-deep);
  font-weight: 600;
}

.product-page .btn-outline-primary:hover {
  background: var(--green-deep);
  color: #fff;
}

.product-page .btn-sm {
  padding: 5px 12px;
  font-size: 14px;
}

.product-page .btn-disabled {
  background: var(--grey-light);
  color: var(--grey);
  cursor: default;
}

.product-page .btn-link {
  background: none;
  border: none;
  padding: 4px;
  color: var(--green-deep);
}

.product-page .form-control {
  border: 1px solid var(--grey-light);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 15px;
  outline: none;
}

.product-page .form-control:focus {
  border-color: var(--green-mid);
}

.product-page .form-group {
  margin-bottom: 12px;
}

/* Merchant description/specification HTML */
.product-page .col-lg-7 [style*="word-break"] {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.product-page .col-lg-7 [style*="word-break"] img {
  max-width: 100%;
  height: auto;
}

/* Reviews: rating distribution bars + review list */
.product-page .bar .flex-grow-1 {
  height: 8px;
  overflow: hidden;
}

.product-page .review:last-child {
  border-bottom: none;
}

.product-page textarea.form-control {
  width: 100%;
  min-height: 90px;
  font-family: inherit;
}

/* Related products: row-cols-* grid without Bootstrap */
.product-page .row[class*="row-cols"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.product-page .row[class*="row-cols"] > .col {
  min-width: 0;
}

@media (max-width: 560px) {
  .product-page .row[class*="row-cols"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-page .bg-white.shadow-sm.rounded {
    padding: 14px;
  }

  .product-page .purchase-row {
    flex-wrap: wrap;
  }

  .product-page .purchase-row .btn-primary,
  .product-page .purchase-row .btn-outline-primary {
    flex: 1 1 auto;
  }
}

/* Purchase row swap (product page + quick-view): [hidden] must beat the
   d-flex utility, same rule as the card's add-to-cart/qty swap. */
.purchase-buy[hidden] {
  display: none !important;
}

.purchase-buy {
  gap: 8px;
}

/* Mobile footer accordions: keep link groups hidden until their heading is
   tapped. Desktop retains the existing always-visible link columns. */
.footer-accordion-toggle {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.footer-accordion-toggle span {
  display: none;
}

@media (max-width: 700px) {
  .footer-col {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
  }

  .footer-col h5 {
    margin: 0;
  }

  .footer-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    font-size: 16px;
    cursor: pointer;
  }

  .footer-accordion-toggle span {
    display: block;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform 180ms ease;
  }

  .footer-col.is-open .footer-accordion-toggle span {
    transform: rotate(225deg) translate(-2px, -1px);
  }

  .footer-col ul {
    display: none;
    padding: 2px 0 6px;
  }

  .footer-col.is-open ul {
    display: block;
  }

  .footer-col ul li {
    margin: 0 0 10px;
  }

  .footer-help-col {
    padding-bottom: 16px;
    border-bottom: none;
  }

  .footer-help-heading {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .footer-social-icons {
    justify-content: center;
    width: 100%;
    margin-top: 14px;
  }
}

/* Figma mobile header: a compact two-row bar with the brand centred over
   both rows, the menu on the left and just search/cart on the right. */
@media (max-width: 700px) {
  .header-bar { height: 28px; }
  .header-top { min-height: 48px; padding: 0 24px; }
  .site-header .logo { width: 68px; height: 70px; top: -28px; left: 50%; right: auto; transform: translateX(-50%); box-shadow: none; }
  .site-header .logo img { width: 50px; height: 52px; }
  .header-icons { gap: 18px; margin-left: auto; }
  .header-icons .icon-btn[aria-label="Account"] { display: none; }
  .nav-toggle { position: absolute; top: 12px; left: 23px; padding: 3px 6px; }
  .nav-toggle span { width: 22px; height: 2px; }
  .main-nav { top: 76px; }
}

/* Floating WhatsApp button (Theme 1 style: fixed, bottom right). It is the
   bottom-most icon; when it exists, the back-to-top button sits above it,
   centred on the same axis, so the two never overlap. Stores without
   WhatsApp keep back-to-top in its normal corner position. */
.whatsapp_icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.whatsapp_icon a {
  display: block;
  line-height: 0;
}

.whatsapp_icon img {
  display: block;
  width: 60px;
  height: 60px;
  transition: transform 0.15s ease;
}

.whatsapp_icon a:hover img {
  transform: scale(1.08);
}

/* WhatsApp spans 20-80px up; back-to-top (48px, right 26 = same centre line)
   goes 14px above that. */
body:has(.whatsapp_icon) .back-to-top {
  bottom: 94px;
}

/* Phones (same 700px edge as the back-to-top rules): WhatsApp 52px at 14/9
   (centre 35px in) and back-to-top 42px at right 14 (same centre), 12px
   above it. */
@media (max-width: 700px) {
  .whatsapp_icon {
    bottom: 14px;
    right: 9px;
  }

  .whatsapp_icon img {
    width: 52px;
    height: 52px;
  }

  body:has(.whatsapp_icon) .back-to-top {
    bottom: 78px;
  }
}