/* Aquatic Plant Shop — storefront theme
   Deep-water teals, coral + lime accents, serif display type. */

:root {
  --abyss: #0b2e1c;
  --deep: #11442a;
  --teal: #0b2e1c;
  --teal-dark: #0b2e1c;
  --lagoon: #2e5a40;
  --mint: #ececec;
  --foam: #f5f5f5;
  --sand: #f5f5f5;
  --lime: #ffffff;
  --coral: #ff6b4a;
  --coral-dark: #e5502f;
  --ink: #0b2e1c;
  --muted: #6b7280;
  --border: #e4e4e7;
  --danger: #b91c1c;
  --bg: #fafafa;
  --page-w: 1140px;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 36px rgba(0, 0, 0, 0.14);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: clamp(14px, 0.3vw + 9px, 22px); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; }
strong, b { font-weight: 600; }

a { color: var(--teal); text-decoration: none; transition: color 0.15s; }
a:hover { color: #477059; }

.container { max-width: var(--page-w); margin: 0 auto; padding: 0 20px; }

::selection { background: var(--g-900); color: #fff; }

/* ---------- Announcement + header ---------- */

.announce {
  background: var(--abyss);
  color: var(--mint);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 8px 16px;
}

header.site-header {
  background: linear-gradient(180deg, var(--deep), var(--abyss));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
header.site-header .bar {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 14px 20px;
}
header.site-header .brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
header.site-header .brand:hover { color: var(--lime); }

.nav-toggle { display: none; }
.nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px -12px; border-radius: 10px; cursor: pointer; line-height: 1; flex: none; }
.nav-burger:hover { background: rgba(255, 255, 255, 0.1); }
.nav-burger::before { content: '\2630'; font-size: 1.5rem; }
.nav-toggle:checked ~ .bar .nav-burger::before { content: '\2715'; font-size: 1.3rem; }
.nav-backdrop { display: none; }
body:has(#nav-toggle:checked) { overflow: hidden; }

.search {
  flex: 1;
  display: flex;
  max-width: 460px;
  margin-left: auto;
  background: #fff;
  border-radius: 999px;
  padding: 3px;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.2s;
}
.search:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
.search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  color: var(--ink);
}
.search button {
  border: none;
  background: var(--abyss);
  color: #fff;
  padding: 0 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.88rem;
  font-family: inherit;
  transition: background 0.15s;
}
.search button:hover { background: var(--g-800); }

.actions { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.actions a { color: var(--mint); font-weight: 500; font-size: 0.93rem; }
.actions a:hover { color: #fff; }
.icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--lime);
  color: var(--abyss);
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.cart-badge[hidden] { display: none; }

.main-nav { border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.main-nav > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 14px;
  max-width: var(--page-w);
  display: flex;
  flex-wrap: wrap;
}
.main-nav li { position: relative; }
.main-nav a {
  display: block;
  position: relative;
  padding: 12px 16px;
  color: var(--mint);
  font-weight: 500;
  font-size: 0.93rem;
}
.main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav > ul > li:hover > a { color: #fff; }
.main-nav > ul > li:hover > a::after { transform: scaleX(1); }

.main-nav .dropdown {
  display: none;
  position: absolute;
  left: 8px;
  top: 100%;
  z-index: 20;
  min-width: 220px;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  animation: dropIn 0.18s ease;
}
.main-nav .dropdown a { color: var(--ink); padding: 9px 14px; border-radius: 9px; }
.main-nav .dropdown a:hover { background: var(--mint); color: var(--teal-dark); }
.main-nav .has-dropdown:hover > .dropdown,
.main-nav .has-dropdown:focus-within > .dropdown { display: block; }

@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: 84px 20px 120px;
  background:
    radial-gradient(900px 340px at 78% -10%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(700px 300px at 8% 110%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, var(--g-900) 0%, var(--g-800) 55%, var(--g-800) 100%);
}
.hero h1 {
  position: relative;
  font-size: clamp(1.6rem, 3.8vw, 2.3rem);
  font-weight: 600;
  margin: 0 auto 14px;
  max-width: 820px;
}
.hero p { position: relative; color: var(--mint); font-size: 1rem; max-width: 620px; margin: 0 auto; }
.hero .btn {
  position: relative;
  margin-top: 26px;
  background: var(--lime);
  color: var(--abyss);
  padding: 14px 32px;
  font-size: 1rem;
  box-shadow: 0 10px 26px rgba(255, 255, 255, 0.35);
}
.hero .btn:hover { background: #e5e5e5; color: var(--abyss); }

.hero .wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; display: block; }

.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles span {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 60%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  animation: rise linear infinite;
}
.bubbles span:nth-child(1) { left: 6%;  width: 18px; height: 18px; animation-duration: 11s; }
.bubbles span:nth-child(2) { left: 16%; width: 34px; height: 34px; animation-duration: 16s; animation-delay: 2s; }
.bubbles span:nth-child(3) { left: 29%; width: 12px; height: 12px; animation-duration: 9s;  animation-delay: 1s; }
.bubbles span:nth-child(4) { left: 44%; width: 26px; height: 26px; animation-duration: 14s; animation-delay: 4s; }
.bubbles span:nth-child(5) { left: 58%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: 3s; }
.bubbles span:nth-child(6) { left: 71%; width: 40px; height: 40px; animation-duration: 18s; animation-delay: 1s; }
.bubbles span:nth-child(7) { left: 84%; width: 22px; height: 22px; animation-duration: 12s; animation-delay: 5s; }
.bubbles span:nth-child(8) { left: 93%; width: 14px; height: 14px; animation-duration: 8s;  animation-delay: 2s; }

@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-260px) translateX(14px); }
  100% { transform: translateY(-560px) translateX(-10px); opacity: 0; }
}

/* ---------- Shop-by-type tiles ---------- */

.kind-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: -56px;
  position: relative;
  z-index: 2;
}
.kind-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  padding: 20px 22px;
  border-radius: 20px;
  color: #fff;
  box-shadow: var(--shadow-lift);
  transition: transform 0.25s ease;
  overflow: hidden;
  position: relative;
}
.kind-tile:hover { transform: translateY(-5px); color: #fff; }
.kind-tile .emoji { position: absolute; right: 16px; top: 8px; font-size: 3.6rem; opacity: 0.9; transition: transform 0.3s; }
.kind-tile:hover .emoji { transform: scale(1.12) rotate(-6deg); }
.kind-tile strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.kind-tile span { font-size: 0.88rem; opacity: 0.9; }
.kind-plant { background: linear-gradient(135deg, var(--g-900), #2e5a40); }
.kind-fish  { background: linear-gradient(135deg, var(--g-800), #477059); }
.kind-tool  { background: linear-gradient(135deg, var(--g-800), #737373); }

/* ---------- Sections ---------- */

section.section { padding: 44px 20px; }
section.section h2 {
  position: relative;
  font-size: 1.3rem;
  margin: 0 0 20px;
  padding-bottom: 12px;
}
section.section h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 4px;
  background: var(--g-900);
}

.section-flash {
  background: linear-gradient(135deg, var(--g-900), var(--g-800));
  border-radius: 24px;
  padding: 30px 26px !important;
  border: 1px solid var(--g-700);
}
.section-flash h2 { color: var(--lime); }
.section-flash h2::after { background: #ffffff; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }

/* ---------- Product cards ---------- */

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.card .card-img { position: relative; display: block; overflow: hidden; background: var(--foam); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--foam); transition: transform 0.5s ease; }
.card:hover img { transform: scale(1.06); }
.card .card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 500; margin: 0 0 8px; letter-spacing: 0; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--teal); }
.card .price { font-weight: 600; font-size: 1rem; color: var(--teal-dark); margin-top: auto; }

.ribbon {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--coral);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.45);
}
.was { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.deal-timer { color: var(--coral-dark); font-size: 0.8rem; font-weight: 500; margin-top: 6px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--g-900);
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); color: #fff; filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-secondary { background: #fff; color: var(--teal); border: 1.5px solid var(--teal); box-shadow: none; }
.btn-secondary:hover { background: var(--mint); color: var(--teal-dark); box-shadow: none; }
.btn-danger { background: linear-gradient(135deg, #d13b2e, var(--coral)); box-shadow: 0 6px 16px rgba(209, 59, 46, 0.25); }

/* ---------- Filters, tables, forms ---------- */

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.filters a, .filters button {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.9rem;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.filters a:hover { border-color: var(--lagoon); color: var(--teal); }
.filters a.active, .filters .active { background: var(--teal); color: #fff; border-color: var(--teal); }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
table th, table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); }
table th { background: var(--foam); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
table tr:last-child td { border-bottom: none; }

form.stacked label { display: block; margin: 14px 0 5px; font-weight: 500; font-size: 0.88rem; color: var(--teal-dark); }
form.stacked input, form.stacked select, form.stacked textarea, .filters input, .filters select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filters input { width: auto; }
form.stacked input:focus, form.stacked select:focus, form.stacked textarea:focus, .filters input:focus {
  outline: none;
  border-color: var(--lagoon);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.18);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 500; }
.alert-error { background: #fee2e2; color: var(--danger); border: 1px solid #fecaca; }
.alert-success { background: #dcfce7; color: var(--g-800); border: 1px solid #bbf7d0; }

/* ---------- Product detail, misc ---------- */

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.product-detail img { width: 100%; border-radius: 22px; background: var(--foam); box-shadow: var(--shadow-lift); }

/* ---------- Checkout: form beside a clear, sticky order summary ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.checkout-summary { position: sticky; top: 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; }
.checkout-summary-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; list-style: none; font-size: 1.05rem; font-weight: 600; }
.checkout-summary-toggle::-webkit-details-marker { display: none; }
.checkout-summary-glance { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.checkout-summary-count { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
.checkout-summary-chevron { display: none; color: var(--muted); }
.checkout-summary-body { margin-top: 16px; }
.checkout-items { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.checkout-item { display: flex; align-items: center; gap: 12px; }
.checkout-item-thumb { position: relative; flex: none; width: 48px; height: 48px; }
.checkout-item-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--foam); }
.checkout-item-qty { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--g-900); color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.checkout-item-name { flex: 1; font-size: 0.92rem; }
.checkout-item-price { font-size: 0.92rem; font-weight: 500; white-space: nowrap; }
.checkout-totals { display: flex; flex-direction: column; gap: 9px; }
.checkout-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.checkout-line[hidden] { display: none; }
.checkout-line-discount { color: var(--g-800); }
.checkout-line-total { font-size: 1.05rem; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--border); }
@media (max-width: 700px) {
  .checkout-layout { grid-template-columns: 1fr; gap: 18px; }
  .checkout-layout form { order: 2; }
  .checkout-summary { order: 1; position: static; padding: 14px 16px; }
  .checkout-summary-toggle { cursor: pointer; }
  .checkout-summary-chevron { display: block; transition: transform 0.15s ease; }
  .checkout-summary[open] .checkout-summary-chevron { transform: rotate(180deg); }
}
.badge {
  display: inline-block;
  background: var(--mint);
  color: var(--teal-dark);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: capitalize;
  margin: 2px 6px 2px 0;
}

.pagination { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.pagination a, .pagination span { border: 1.5px solid var(--border); padding: 7px 14px; border-radius: 999px; background: #fff; font-size: 0.9rem; }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.prewrap { white-space: pre-line; line-height: 1.7; }

/* ---------- Newsletter ---------- */

.newsletter {
  margin-top: 56px;
  padding: 38px 0 30px;
  color: #fff;
  background:
    radial-gradient(500px 200px at 90% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(135deg, var(--g-900), var(--g-800));
}
.news-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.news-inner h3 { margin: 0 0 4px; font-size: 1.3rem; }
.news-inner p { margin: 0; color: var(--mint); }
.news-form { display: flex; gap: 8px; flex: 1; max-width: 480px; min-width: 260px; background: #fff; border-radius: 999px; padding: 4px; }
.news-form input { flex: 1; min-width: 0; padding: 10px 16px; border: none; background: transparent; font-size: 0.95rem; font-family: inherit; outline: none; color: var(--ink); }
.news-form .btn { background: var(--abyss); color: #fff; box-shadow: none; padding: 10px 24px; }
.news-form .btn:hover { background: var(--g-900); }
.news-msg { text-align: center; margin: 16px 0 0; font-weight: 500; }
.news-ok { color: var(--lime); }
.news-err { color: #ffd0c4; }

/* ---------- Footer ---------- */

footer.site-footer { background: linear-gradient(180deg, var(--deep), var(--abyss)); color: #b4b4b8; padding: 48px 0 0; font-size: 0.92rem; }
footer.site-footer a { color: #b4b4b8; }
footer.site-footer a:hover { color: var(--lime); }
footer.site-footer h4 { color: #fff; margin: 0 0 14px; font-size: 1.05rem; }
footer.site-footer p { margin: 0 0 8px; line-height: 1.6; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; padding-bottom: 36px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.socials a { margin-right: 16px; font-weight: 500; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { margin: 0; color: #8b8b91; }
.pay-icons { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.pay-icons svg { width: 46px; height: 29px; display: block; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }

/* ---------- Motion + responsive ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

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

@media (max-width: 700px) {
  header.site-header { position: relative; z-index: 60; }
  header.site-header .bar { flex-wrap: wrap; gap: 10px; }
  .nav-burger { display: flex; }
  .search { order: 5; flex-basis: 100%; max-width: none; margin-left: 0; }
  .actions { margin-left: auto; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 100%); overflow-y: auto; background: var(--abyss); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25); z-index: 61; }
  header.site-header.light .main-nav { background: #fafafa; }
  .nav-toggle:checked ~ .main-nav { display: block; }
  .nav-toggle:checked ~ .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 59; border: 0; padding: 0; margin: 0; cursor: default;
  }
  .main-nav > ul { flex-direction: column; padding: 0; }
  .main-nav > ul > li > a::after { display: none; }
  .main-nav .dropdown { display: block; position: static; box-shadow: none; border-radius: 0; background: rgba(0, 0, 0, 0.18); padding: 0; animation: none; }
  .main-nav .dropdown a { color: var(--mint); padding-left: 34px; border-radius: 0; }
  .main-nav .dropdown a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .hero { padding: 56px 20px 100px; }
  .kind-tiles { grid-template-columns: 1fr; margin-top: -44px; }
  .kind-tile { min-height: 110px; }
  .product-detail { grid-template-columns: 1fr; gap: 22px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  section.section { padding: 32px 14px; }
}

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

/* ---------- On-brand placeholder when a product has no photo ---------- */
.ph { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 3.6rem; position: relative; overflow: hidden; transition: transform 0.5s ease; }
.ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.35), transparent 55%); }
.ph span { position: relative; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.ph-plant { background: linear-gradient(135deg, var(--g-900), #2e5a40); }
.ph-fish  { background: linear-gradient(135deg, var(--g-800), #477059); }
.ph-tool  { background: linear-gradient(135deg, var(--g-800), #737373); }
.ph-lg { font-size: 7rem; border-radius: 22px; box-shadow: var(--shadow-lift); }
.card:hover .ph { transform: scale(1.06); }

/* Keep the footer at the bottom on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; }

/* ---------- Contact + tickets ---------- */
.lead { font-size: 1rem; color: var(--muted); max-width: 680px; }
.contact-grid { display: grid; grid-template-columns: 300px 1fr; gap: 32px; margin-top: 26px; align-items: start; }
.info-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.info-card strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 4px; }
.contact-form { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 8px 26px 26px; box-shadow: var(--shadow); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 18px; }
.hint { color: var(--muted); font-size: 0.85rem; }
.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.msg { border-radius: 14px; padding: 12px 16px; max-width: 88%; border: 1px solid var(--border); background: #fff; }
.msg-customer { align-self: flex-end; background: var(--mint); border-color: #d4d4d8; }
.msg-staff { align-self: flex-start; background: var(--g-800); color: #e8f5ec; border-color: var(--g-800); }
.msg-meta { font-size: 0.75rem; opacity: 0.7; margin-bottom: 4px; }
.status-open { background: #fef3c7; color: #92400e; }
.status-pending { background: var(--g-100); color: var(--g-800); }
.status-resolved { background: #dcfce7; color: var(--g-800); }
.status-closed { background: #e5e7eb; color: #374151; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } .msg { max-width: 100%; } }

/* ---------- Product page: rating, share, tabs, specification, reviews ---------- */
.stars { --pct: calc(var(--rating, 0) / 5 * 100%); display: inline-block; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; vertical-align: middle; }
.stars::before { content: '\2605\2605\2605\2605\2605'; background: linear-gradient(90deg, #f5a623 var(--pct), #d4d4d8 var(--pct)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-rating { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); margin: -2px 0 8px; }
.card-rating .stars { font-size: 0.9rem; }

.rating-line { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; margin: 2px 0 4px; }
.price-big { font-size: 1.4rem; font-weight: 600; margin: 10px 0 4px; color: var(--ink); }
.stock-line { color: var(--muted); margin: 6px 0 14px; }
.buy-form { max-width: 240px; }

.share { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); max-width: 380px; }
.share-label { display: block; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 10px; }
.share-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border);
  background: #fff; color: var(--ink); cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.share-btn svg { width: 19px; height: 19px; display: block; }
.share-btn:hover { background: var(--abyss); color: #fff; border-color: var(--abyss); transform: translateY(-2px); }
.share-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
  background: var(--abyss); color: #fff; font-size: 0.72rem; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}

.product-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 44px 0 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.product-tabs a { padding: 12px 18px; font-weight: 500; font-size: 0.95rem; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.product-tabs a:hover { color: var(--ink); border-bottom-color: var(--abyss); }
.info-block { padding: 34px 0 6px; scroll-margin-top: 70px; }
.info-block h2 { font-size: 1.3rem; margin: 0 0 16px; }
.info-block h3 { font-size: 1.15rem; }

.spec-table { max-width: 720px; }
.spec-table th { width: 38%; background: var(--foam); text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--ink); font-weight: 500; }
.spec-table td { font-size: 0.95rem; }

.review-summary { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px 26px; margin-bottom: 26px; box-shadow: var(--shadow); }
.score-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; line-height: 1; }
.review-bars { display: flex; flex-direction: column; gap: 7px; }
.rate-row { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.rate-bar { height: 8px; background: #e4e4e7; border-radius: 99px; overflow: hidden; }
.rate-bar-fill { height: 100%; background: #f5a623; border-radius: 99px; }
.rate-count { text-align: right; }

.review-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.review { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review p { margin: 0 0 10px; }
.review-meta { font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge.verified { background: #dcfce7; color: var(--g-800); margin: 0; }

.review-form { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 8px 26px 26px; max-width: 720px; box-shadow: var(--shadow); }
.star-input { position: relative; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
form.stacked .star-input label { margin: 0; font-size: 2rem; line-height: 1; color: #d4d4d8; cursor: pointer; padding: 0 2px; transition: color 0.12s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #f5a623; }
.star-input input:focus-visible + label { outline: 2px solid var(--abyss); outline-offset: 2px; }

/* ---------- Footer social icons ---------- */
.social-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25); color: #fff; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.social-links a svg { width: 18px; height: 18px; display: block; }
.social-links a:hover { background: #fff; color: var(--g-900); transform: translateY(-2px); }

@media (max-width: 700px) {
  .review-summary { grid-template-columns: 1fr; gap: 18px; }
  .product-tabs { position: static; }
  .product-tabs a { padding: 10px 12px; }
}

/* ---------- Shop: filters, sort, chips ---------- */
.type-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; }
.type-chips a { border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 16px; font-size: 0.9rem; background: #fff; color: var(--ink); transition: all 0.15s; }
.type-chips a:hover { border-color: var(--abyss); }
.type-chips a.active { background: var(--abyss); color: #fff; border-color: var(--abyss); }

.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.filter-panel { position: sticky; top: 130px; }
.filter-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 4px 18px 18px; box-shadow: var(--shadow); }
.filter-box summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: 14px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.filter-box summary::-webkit-details-marker { display: none; }
.filter-box summary::after { content: '\25BE'; color: var(--muted); }
.filter-box[open] summary::after { content: '\25B4'; }
.filter-box summary .count { background: var(--abyss); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 0.75rem; margin-left: 8px; }
.filter-group { border-top: 1px solid var(--border); padding: 12px 0; }
.filter-group > label:first-child { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 8px; }
.filter-group input[type="search"], .filter-group input[type="number"] { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.92rem; font-family: inherit; }
.filter-group input:focus { outline: none; border-color: var(--abyss); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); }
.price-inputs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
.filter-group .check { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 500; margin: 6px 0; cursor: pointer; color: var(--ink); text-transform: none; letter-spacing: 0; }
.filter-group .check input { accent-color: var(--g-900); width: 16px; height: 16px; }
.star-txt { color: #f5a623; }
.clear-link { display: block; text-align: center; margin-top: 12px; font-size: 0.88rem; }

.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.results-count { color: var(--muted); font-size: 0.92rem; }
.sort-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--muted); }
.sort-label select { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 0.9rem; background: #fff; color: var(--ink); }
.active-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #ececec; color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: 0.85rem; }
.chip:hover { background: var(--abyss); color: #fff; }
.shop-results .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---------- Cards: quick add, stock badges ---------- */
.card-actions { margin-top: 12px; }
.btn-quick { width: 100%; padding: 9px 14px; font-size: 0.88rem; box-shadow: none; }
.btn-quick[disabled] { background: #d4d4d8; color: #52525b; cursor: not-allowed; transform: none; filter: none; }
.price .from { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.sold-badge, .low-badge { position: absolute; bottom: 10px; left: 10px; z-index: 2; font-size: 0.74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.sold-badge { background: var(--g-900); color: #fff; }
.low-badge { background: #fff; color: #b45309; border: 1px solid #fcd34d; }

/* ---------- Options (variants) ---------- */
.opt-group { border: none; padding: 0; margin: 4px 0 6px; }
.opt-group legend { font-size: 0.88rem; font-weight: 500; color: var(--muted); padding: 0; margin-bottom: 8px; }
.opt-group legend strong { color: var(--ink); }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
form.stacked .opt { margin: 0; font-weight: 500; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: inline-block; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 14px; font-size: 0.9rem; background: #fff; transition: all 0.12s; }
.opt:hover span { border-color: var(--abyss); }
.opt input:checked + span { background: var(--abyss); color: #fff; border-color: var(--abyss); }
.opt input:focus-visible + span { outline: 2px solid var(--abyss); outline-offset: 2px; }
.opt-out span { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.opt small { font-size: 0.72rem; }

/* ---------- Quick add dialog + toast ---------- */
.quick-dialog { border: none; border-radius: 20px; padding: 24px 26px 26px; width: min(420px, 92vw); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.quick-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.quick-dialog h3 { margin: 0 32px 10px 0; font-size: 1.25rem; }
.quick-x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--muted); }
.quick-x:hover { color: var(--ink); }
.quick-dialog .opt-list { flex-direction: column; }
.quick-dialog .opt span { display: block; width: 100%; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--g-900); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 0.92rem; font-weight: 500; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 200; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: #b91c1c; }

@media (max-width: 800px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .shop-results .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) { .shop-results .grid { grid-template-columns: 1fr; } }

/* ---------- Checkout form ---------- */
[hidden] { display: none !important; }
.form-block { border: 1px solid var(--border); border-radius: 16px; padding: 4px 20px 18px; margin: 18px 0; background: #fff; }
.form-block legend { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; padding: 0 8px; }
.form-block .hint { margin: 0 0 4px; }
.phone-field { display: flex; align-items: stretch; }
.phone-field .dial { display: inline-flex; align-items: center; padding: 0 12px; border: 1.5px solid var(--border); border-right: none; border-radius: 12px 0 0 12px; background: var(--foam); color: var(--muted); font-size: 0.95rem; white-space: nowrap; }
form.stacked .phone-field input { border-radius: 0 12px 12px 0; }
form.stacked select + input[type="text"], form.stacked select + input + input { margin-top: 8px; }
.has-error input, .has-error select { border-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12); }

/* ---------- Collections + blog ---------- */
.collection-grid, .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 22px; }
.collection-card, .article-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--ink); transition: transform 0.25s, box-shadow 0.25s; }
.collection-card:hover, .article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); color: var(--ink); }
.collection-card img, .article-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.collection-ph, .article-ph { aspect-ratio: 16 / 10; }
.collection-ph-0, .article-ph-0 { background: linear-gradient(135deg, var(--g-900), #2e5a40); }
.collection-ph-1, .article-ph-1 { background: linear-gradient(135deg, var(--g-800), #477059); }
.collection-ph-2, .article-ph-2 { background: linear-gradient(135deg, var(--g-800), #737373); }
.collection-info, .article-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.collection-info strong, .article-info strong { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.collection-info span, .article-meta { color: var(--muted); font-size: 0.85rem; }
.article-info p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.read-more { font-weight: 500; font-size: 0.88rem; color: var(--ink); margin-top: 4px; }
.article-page { max-width: 780px; }
.article-cover { width: 100%; border-radius: 18px; margin: 18px 0 8px; box-shadow: var(--shadow); }
.article-body { font-size: 1rem; line-height: 1.75; margin-top: 18px; }
.article-body h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.article-tags { margin-top: 26px; }

/* ---------- Cart: discount code + totals ---------- */
.cart-undo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--g-900); color: #fff; border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; font-size: 0.9rem; }
.cart-undo-bar[hidden] { display: none; }
.cart-undo-bar button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.cart-items { display: flex; flex-direction: column; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto auto auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); }
.cart-item-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--foam); }
.cart-item-thumb-empty { display: block; }
.cart-item-info a { font-weight: 500; color: var(--ink); }
.cart-item-unit { margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 6px; }
.cart-item-qty .qty-btn { width: 30px; height: 30px; border: 1.5px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; color: var(--ink); }
.cart-item-qty .qty-btn:hover { border-color: var(--teal); color: var(--teal); }
.cart-item-qty .qty-input { width: 46px; text-align: center; padding: 6px 4px; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.92rem; }
.cart-item-subtotal { font-weight: 600; white-space: nowrap; min-width: 76px; text-align: right; }
.cart-item-remove { border: 0; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.cart-item-remove:hover { color: var(--danger); background: #fee2e2; }
@media (max-width: 700px) {
  .cart-item { grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb info remove" "qty qty subtotal"; row-gap: 10px; }
  .cart-item-thumb { grid-area: thumb; width: 48px; height: 48px; }
  .cart-item-info { grid-area: info; }
  .cart-item-remove { grid-area: remove; }
  .cart-item-qty { grid-area: qty; }
  .cart-item-subtotal { grid-area: subtotal; }
}
.cart-footer { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; margin-top: 26px; }
.discount-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 4px 20px 20px; max-width: 420px; }
.discount-box label { display: block; margin: 14px 0 6px; font-weight: 500; font-size: 0.88rem; }
.discount-row { display: flex; gap: 8px; }
.discount-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-family: inherit; font-size: 0.95rem; }
.discount-row input:focus { outline: none; border-color: var(--abyss); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); }
.discount-applied { margin: 16px 0 10px; }
.cart-totals { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow); }
.cart-totals > div { display: flex; justify-content: space-between; padding: 6px 0; color: var(--muted); }
.cart-totals .grand { color: var(--ink); font-weight: 600; font-size: 1.2rem; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.discount-line { color: var(--g-800) !important; font-weight: 500; }
@media (max-width: 800px) { .cart-footer { grid-template-columns: 1fr; } .discount-box { max-width: none; } }

/* Product gallery + compare price */
.product-detail .thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.product-detail .thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; line-height: 0; overflow: hidden; }
.product-detail .thumb img { width: 68px; height: 68px; object-fit: cover; border-radius: 0; box-shadow: none; }
.product-detail .thumb.on { border-color: var(--g-900); }
.save-pill { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--g-900); color: #fff; font-size: .8rem; font-weight: 500; vertical-align: middle; }
.save-pill[hidden] { display: none; }

/* ---------- Logo, light header, announcement link ---------- */
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
header.site-header .brand-logo { display: flex; align-items: center; line-height: 0; }
header.site-header .brand-logo img { width: auto; max-width: 60vw; object-fit: contain; }

header.site-header.light { background: #fff; color: var(--g-900); box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(0, 0, 0, 0.06); }
header.site-header.light .brand { color: var(--g-900); }
header.site-header.light .brand:hover { color: #2e5a40; }
header.site-header.light .search { background: #f4f4f5; box-shadow: inset 0 0 0 1px var(--border); }
header.site-header.light .search:focus-within { box-shadow: inset 0 0 0 1px var(--g-900); }
header.site-header.light .actions a { color: #2e5a40; }
header.site-header.light .actions a:hover { color: var(--g-900); }
header.site-header.light .cart-badge { background: var(--g-900); color: #fff; }
header.site-header.light .nav-burger { color: var(--g-900); }
header.site-header.light .main-nav { border-top: 1px solid var(--border); background: #fafafa; }
header.site-header.light .main-nav > ul > li > a { color: #2e5a40; }
header.site-header.light .main-nav > ul > li:hover > a { color: var(--g-900); }
header.site-header.light .main-nav > ul > li > a::after { background: var(--g-900); }
@media (max-width: 700px) {
  header.site-header.light .main-nav .dropdown { background: #f0f0f0; }
}
@media (max-width: 700px) {
  header.site-header.light .main-nav .dropdown a { color: #2e5a40; }
  header.site-header.light .main-nav .dropdown a:hover { background: #e4e4e7; color: var(--g-900); }
}

/* Checkout: delivery and payment choices */
form.stacked .pay-opt { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; font-size: 0.95rem; color: var(--ink); }
form.stacked .pay-opt:has(input:checked) { border-color: var(--g-900); }
form.stacked .pay-opt input { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
form.stacked .pay-opt strong { display: block; font-weight: 500; }
form.stacked .pay-opt small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; white-space: pre-line; font-weight: 400; }
form.stacked .check-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.92rem; color: var(--ink); cursor: pointer; }
form.stacked .check-row input { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
form.stacked .check-row.has-error { color: var(--danger); }

/* Store closed page */
.maintenance { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; }
.maintenance h2 { margin: 18px 0 0; font-size: 1.5rem; }
.maintenance p { max-width: 460px; color: var(--muted); margin: 0; }

/* Language picker */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; font-size: 0.93rem; font-weight: 500; color: var(--mint); padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: ' \25BE'; font-size: 0.7em; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; margin: 0; padding: 6px; list-style: none; min-width: 150px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lift); }
.lang-switch li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 0.92rem; }
.lang-switch li a:hover { background: var(--mint); }
.lang-switch li a.on { font-weight: 600; }
header.site-header.light .lang-switch summary { color: #2e5a40; border-color: var(--border); }
html[dir="rtl"] .lang-switch ul { right: auto; left: 0; }

/* Home page partners */
.partners { padding: 44px 0 52px; margin-top: 28px; background: #fff; border-top: 1px solid var(--border); text-align: center; }
.partners h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 24px; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
.partner-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 44px; }
.partner-logos img { display: block; height: 46px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s, opacity 0.2s, transform 0.2s; }
.partner-logos a:hover img, .partner-logos img:hover { filter: none; opacity: 1; transform: translateY(-2px); }
@media (max-width: 600px) { .partner-logos { gap: 18px 28px; } .partner-logos img { height: 36px; max-width: 120px; } }

/* Chat window */
.aqc { position: fixed; bottom: 18px; z-index: 90; font-family: var(--font-body); font-size: 14px; }
.aqc-right { right: 18px; }
.aqc-left { left: 18px; }
.aqc-launcher { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--aqc); color: #fff; font: inherit; font-weight: 500; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); transition: transform 0.15s; }
.aqc-launcher:hover { transform: translateY(-2px); }
.aqc.aqc-is-open .aqc-launcher { display: none; }
.aqc-panel { position: absolute; bottom: 0; width: 360px; max-width: calc(100vw - 24px); height: min(560px, calc(100vh - 36px)); display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3); border: 1px solid var(--border); }
.aqc-right .aqc-panel { right: 0; }
.aqc-left .aqc-panel { left: 0; }
.aqc-panel[hidden] { display: none; }
.aqc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--aqc); color: #fff; }
.aqc-head strong { font-weight: 600; font-size: 15px; }
.aqc-close { border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.aqc-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f7f8; }
.aqc-row { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.aqc-row.aqc-user { align-self: flex-end; align-items: flex-end; }
.aqc-row.aqc-bot { align-self: flex-start; align-items: flex-start; }
.aqc-bubble { padding: 9px 13px; border-radius: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.aqc-bot .aqc-bubble { background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.aqc-user .aqc-bubble { background: var(--aqc); color: #fff; border-bottom-right-radius: 4px; }
.aqc-typing { color: var(--muted); letter-spacing: 2px; }
.aqc-link { display: block; margin-top: 8px; font-weight: 500; text-decoration: underline; color: var(--ink); }
.aqc-product { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
.aqc-product:hover { border-color: #a1a1aa; color: var(--ink); }
.aqc-product img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.aqc-product-info { display: flex; flex-direction: column; min-width: 0; }
.aqc-product-info strong { font-weight: 500; font-size: 13px; }
.aqc-product-info span { font-size: 12px; color: var(--muted); }
.aqc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; background: #f7f7f8; }
.aqc-chips:empty { display: none; }
.aqc-chip { border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.aqc-chip:hover { border-color: var(--aqc); }
.aqc-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: #fff; }
.aqc-input input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; font: inherit; outline: none; }
.aqc-input input:focus { border-color: var(--aqc); }
.aqc-input button, .aqc-handoff button { border: 0; border-radius: 10px; background: var(--aqc); color: #fff; padding: 0 16px; font: inherit; font-weight: 500; cursor: pointer; }
.aqc-handoff { padding: 12px 14px; background: #fff; border-top: 1px solid var(--border); max-height: 55%; overflow-y: auto; }
.aqc-handoff[hidden] { display: none; }
.aqc-handoff form { display: flex; flex-direction: column; gap: 8px; }
.aqc-handoff-intro { margin: 0; color: var(--muted); font-size: 13px; }
.aqc-handoff input, .aqc-handoff textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; resize: vertical; }
.aqc-handoff-buttons { display: flex; gap: 8px; }
.aqc-handoff-buttons button { padding: 9px 16px; }
.aqc-handoff button.aqc-secondary { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.aqc-trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.aqc-error { margin: 0; color: var(--danger); font-size: 13px; }
@media (max-width: 600px) {
  .aqc { bottom: 12px; }
  .aqc-right { right: 12px; }
  .aqc-left { left: 12px; }
  .aqc-launcher-text { display: none; }
  .aqc-launcher { width: 48px; padding: 0; justify-content: center; }
  .aqc-panel { position: fixed; inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; }
}

.footer-legal p { margin: 0; }
.footer-legal .footer-legal-detail { margin-top: 4px; font-size: 0.85em; opacity: 0.8; }
.footer-legal-detail span + span::before { content: ' \00B7 '; }

/* ---------- Large monitors: the page grows with the screen instead of sitting in a narrow strip ---------- */
@media (min-width: 1700px) { :root { --page-w: 1360px; } }
@media (min-width: 2200px) { :root { --page-w: 1700px; } }
@media (min-width: 3000px) { :root { --page-w: 2200px; } }

/* ---------- Phones: logo, account and cart share one row; search sits below ---------- */
@media (max-width: 700px) {
  header.site-header .bar { gap: 8px 12px; }
  header.site-header .brand-logo img { max-width: 40vw; max-height: 36px; }
  header.site-header .actions { gap: 12px; }
  header.site-header .actions a { font-size: 0.88rem; }
}

/* ---------- Checkout: tip, marketing boxes, summary photos ---------- */
.tip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tip-btn { border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 7px 16px; font: inherit; cursor: pointer; }
.tip-btn.on { background: var(--g-900); color: #fff; border-color: var(--g-900); }
.tip-row input[type=number] { width: 130px; margin: 0; padding: 8px 12px; }
.mkt-boxes { margin-top: 8px; }
.sum-img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); vertical-align: middle; margin-right: 8px; }
.checkout-policies { margin-top: 22px; text-align: center; }

/* ---------- Header stays on screen on every page (cart + account always reachable) ---------- */
.product-tabs { top: var(--header-h, 0px); }
.info-block { scroll-margin-top: calc(var(--header-h, 0px) + 60px); }
@media (max-width: 700px) {
  header.site-header { position: sticky; top: 0; }
  /* Once the visitor scrolls, fold the search row away so the pinned header stays slim */
  header.site-header.is-scrolled .search { display: none; }
  header.site-header .actions a { display: inline-flex; align-items: center; min-width: 32px; min-height: 32px; justify-content: center; }
}

/* ---------- Checkout: "Save this information for next time" ---------- */
.save-info { margin-top: 16px; align-items: flex-start; }
.save-info span { display: flex; flex-direction: column; }
.save-info small { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.saved-info-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.link-btn { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Smart order summary ---------- */
.checkout-items.is-long { max-height: 300px; overflow-y: auto; padding-right: 6px; padding-top: 8px; }
.checkout-item-name { display: flex; flex-direction: column; line-height: 1.35; }
.checkout-item-name small { color: var(--muted); font-size: 0.8rem; }
.muted-sm { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.free-tag { color: var(--g-800); font-weight: 600; }
.summary-discount { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.summary-discount-form { display: flex; gap: 8px; }
.summary-discount-form[hidden], .summary-discount-applied[hidden] { display: none; }
.summary-discount-form input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.92rem; text-transform: uppercase; background: #fff; }
.summary-discount-form input:focus { outline: none; border-color: var(--g-900); }
.summary-discount-form input::placeholder { text-transform: none; }
.summary-discount-form .btn { border-radius: 10px; margin: 0; }
.summary-discount-applied { display: flex; flex-direction: column; gap: 4px; }
.discount-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: #f0fdf4; color: var(--g-800); border: 1px solid #bbf7d0; border-radius: 8px; padding: 5px 6px 5px 10px; font-size: 0.85rem; }
.discount-tag button { border: none; background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; }
.discount-tag button:hover { background: #dcfce7; }
.summary-discount-applied small { color: var(--muted); font-size: 0.8rem; }
.summary-discount-msg { margin: 8px 0 0; font-size: 0.83rem; font-weight: 500; }
.summary-discount-msg.bad { color: var(--danger); }
.summary-discount-msg.good { color: var(--g-800); }
.summary-savings { margin: 4px 0 0; background: #f0fdf4; color: var(--g-800); border-radius: 10px; padding: 8px 12px; font-size: 0.85rem; font-weight: 600; }
.summary-savings[hidden] { display: none; }
.summary-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; }
.summary-secure a { color: var(--muted); text-decoration: underline; }

/* ---------- Product page: quantity stepper + Add to Cart side by side ---------- */
form.buy-form { max-width: 440px; }
@media (max-width: 700px) { form.buy-form { max-width: none; } }
.buy-row { display: flex; gap: 10px; align-items: stretch; margin-top: 6px; }
.qty-stepper { display: flex; align-items: center; flex: none; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; overflow: hidden; }
.qty-stepper input { width: 46px !important; min-width: 0; border: none !important; box-shadow: none !important; text-align: center; padding: 0 !important; margin: 0 !important; font: inherit; font-weight: 600; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 42px; height: 48px; border: none; background: transparent; font-size: 1.25rem; cursor: pointer; color: var(--ink); }
.qty-btn:hover { background: var(--foam); }
.btn-add { flex: 1; min-height: 50px; margin: 0 !important; font-size: 1rem; font-weight: 600; white-space: nowrap; }

/* ---------- Smart announcement bar: rotating messages, arrows, close ---------- */
.announce { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 40px; overflow: hidden; transition: max-height 0.25s, opacity 0.25s, padding 0.25s; max-height: 80px; }
.announce.is-closing { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.announce-track { flex: 1; max-width: 720px; text-align: center; }
.announce-msg { margin: 0; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.announce-msg.is-on { opacity: 1; transform: none; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.announce-nav, .announce-close { border: none; background: transparent; color: inherit; cursor: pointer; opacity: 0.75; font-size: 1.2rem; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.announce-nav:hover, .announce-close:hover { opacity: 1; background: rgba(127, 127, 127, 0.18); }
.announce-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* Fieldsets and grid children default to "as wide as their content", which pushed the
   checkout past the edge of a phone screen. Let them shrink to the screen instead. */
.checkout-layout > *, fieldset.form-block, .form-row > * { min-width: 0; }
.phone-field { min-width: 0; }
.phone-field input { min-width: 0; }

/* ---------- Mobile friendly: product page + checkout ---------- */
@media (max-width: 700px) {
  /* Inputs at 16px stop iPhones from zooming in when a field is tapped */
  form.stacked input, form.stacked select, form.stacked textarea, .summary-discount-form input, .search input { font-size: 16px; }
  form.stacked input, form.stacked select { min-height: 46px; }
  .checkout-layout { gap: 14px; }
  .form-block { padding-left: 14px !important; padding-right: 14px !important; }
  .pay-opt { padding: 12px 14px; }
  #place-order { position: sticky; bottom: 10px; z-index: 20; min-height: 52px; font-size: 1rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
  .checkout-item-thumb, .checkout-item-thumb img { width: 44px; height: 44px; }
  .tip-row { flex-wrap: wrap; }
  .announce { font-size: 0.78rem; padding: 6px 34px; }
  .announce-nav { display: none; }
  .btn-add { min-height: 48px; }
}

/* ---------- Square-cornered buttons everywhere (no pill / round buttons) ---------- */
.btn, .search, .search button, .filters a, .filters button, .type-chips a, .pagination a, .pagination span,
.news-form, .news-form .btn, .news-form input, .qty-stepper, .share-btn, .social-links a, .chip,
.aqc-chip, .aqc-input input, .lang-switch summary, .tip-btn, .opt span { border-radius: 8px !important; }

/* ---------- Compact product cards (home, shop, category, related) ---------- */
.grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }
.card .card-body { padding: 10px 12px 12px; }
.card h3 { font-size: 0.9rem; line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card .price { font-size: 0.95rem; }
.card .was { font-size: 0.78rem; }
.card-rating { font-size: 0.78rem; margin-bottom: 2px; }
.card .ph { font-size: 2.6rem; }
.ribbon { top: 8px; left: 8px; font-size: 0.7rem; padding: 3px 8px; }
.deal-timer { font-size: 0.74rem; margin-top: 3px; }
.card-actions { margin-top: 8px; }
.btn-quick { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 0.84rem; min-height: 36px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Options (e.g. 50g / 100g) right on the card */
.card-variants { display: flex; flex-wrap: wrap; gap: 5px; border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.cv { position: relative; cursor: pointer; }
.cv input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cv span { display: inline-block; padding: 4px 9px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 0.76rem; font-weight: 500; background: #fff; transition: all 0.12s; }
.cv:hover span { border-color: #737373; }
.cv input:checked + span { background: var(--g-900); border-color: var(--g-900); color: #fff; }
.cv input:focus-visible + span { outline: 2px solid var(--g-900); outline-offset: 2px; }
.cv-out { cursor: not-allowed; }
.cv-out span { color: #a1a1aa; text-decoration: line-through; background: #fafafa; }
.card-variant-select { width: 100%; margin: 0 0 8px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; font: inherit; font-size: 0.82rem; background: #fff; }

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card .card-body { padding: 8px 10px 10px; }
  .card h3 { font-size: 0.85rem; }
  .btn-quick { font-size: 0.8rem; padding: 7px 8px; }
  .btn-quick { gap: 5px; }
  .btn-quick .cart-ico { width: 14px; height: 14px; }
}

/* =====================================================================
   Professional look: brand green accent, light surfaces, line icons
   ===================================================================== */
:root {
  --accent: #155c36;
  --accent-dark: #11442a;
  --accent-soft: #ebf5ee;
  --accent-line: #cfe4d6;
  --bg: #ffffff;
  --surface: #f7f8f7;
  --shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 4px 14px rgba(11, 46, 28, 0.05);
  --shadow-lift: 0 2px 6px rgba(11, 46, 28, 0.06), 0 12px 28px rgba(11, 46, 28, 0.09);
}
body { background: var(--bg); color: var(--g-900); }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: #fff; }

/* Buttons: calm, flat, clear */
.btn { box-shadow: none; font-weight: 600; letter-spacing: 0.005em; }
.btn:hover { transform: none; box-shadow: none; filter: none; background: var(--g-800); }
.btn-lg { padding: 13px 26px; font-size: 0.98rem; }
.btn-outline { background: #fff; color: var(--g-900); border: 1.5px solid #d4d4d8; }
.btn-outline:hover { background: #fff; color: var(--g-900); border-color: var(--g-900); }

/* Header: crisp white bar with a hairline */
header.site-header.light { box-shadow: 0 1px 0 #e5e7eb; }
header.site-header.light .main-nav { background: #fff; border-top: 1px solid #f0f0f0; }
header.site-header.light .main-nav > ul > li > a::after { background: var(--accent); height: 2px; }
header.site-header.light .cart-badge { background: var(--accent); }

/* Hero */
.hero.hero-pro { background: linear-gradient(180deg, var(--accent-soft), #fff); color: var(--g-900); text-align: left; padding: 56px 0 44px; overflow: visible; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero-eyebrow { display: inline-block; margin: 0 0 14px; padding: 5px 10px; border: 1px solid var(--accent-line); border-radius: 6px; background: #fff; color: var(--accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-pro h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 14px; max-width: 620px; color: var(--g-900); }
.hero-lead { font-size: 1.08rem; color: #4b5563; max-width: 540px; margin: 0 0 26px; }
.hero-pro .hero-lead { color: #4b5563; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-pro .btn { margin-top: 0; box-shadow: none; }
.hero-pro .btn:not(.btn-outline) { background: var(--accent); color: #fff; }
.hero-pro .btn:not(.btn-outline):hover { background: var(--accent-dark); color: #fff; }
.hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(21, 92, 54, 0.12)); }

/* Trust bar */
.trust-bar { border-top: 1px solid #eef0ee; border-bottom: 1px solid #eef0ee; background: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 18px 16px; }
.trust-item + .trust-item { border-left: 1px solid #eef0ee; }
.trust-item svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-item strong { display: block; font-size: 0.9rem; color: var(--g-900); }
.trust-item span { display: block; font-size: 0.8rem; color: #6b7280; }

/* Section titles: text left, "View all" right, no emoji */
section.section { padding: 40px 0; }
section.section h2::after { display: none; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid #eef0ee; padding-bottom: 12px; }
.section-title h2 { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; font-size: 1.35rem !important; letter-spacing: -0.02em; }
.section-title a { font-size: 0.88rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.section-title a:hover { color: var(--accent-dark); text-decoration: underline; }
.title-ico { width: 20px; height: 20px; fill: #f59e0b; stroke: none; }

/* Category tiles: white cards with line icons */
.section-cats { padding-top: 36px !important; }
.kind-tiles { margin-top: 0; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kind-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 0; padding: 20px; border-radius: 12px; background: #fff !important; color: var(--g-900); border: 1px solid #e5e7eb; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; }
.kind-tile:hover { transform: none; color: var(--g-900); border-color: var(--accent); box-shadow: var(--shadow); }
.kind-badge { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.kind-badge .kind-ico { width: 28px; height: 28px; }
.kind-text { display: flex; flex-direction: column; min-width: 0; }
.kind-text strong { font-size: 1rem; }
.kind-text span { font-size: 0.84rem; color: #6b7280; opacity: 1; }
.kind-arrow { margin-left: auto; color: #9ca3af; transition: transform 0.15s, color 0.15s; }
.kind-tile:hover .kind-arrow { color: var(--accent); transform: translateX(3px); }

/* Flash deals: light panel instead of a black box */
.section-flash { background: #fff8f1; border: 1px solid #fde3c8; border-radius: 14px; padding: 24px !important; margin-top: 8px; }
.section-flash h2 { color: var(--g-900) !important; }
.section-flash .section-title { border-bottom-color: #fde3c8; }

/* Product cards: quiet, consistent */
.card { border-radius: 12px; border-color: #e8eae8; box-shadow: none; }
.card:hover { transform: none; box-shadow: var(--shadow-lift); border-color: #d9dcd9; }
.card:hover img { transform: scale(1.03); }
.card .price { color: var(--g-900); }
.ph, .ph-plant, .ph-fish, .ph-tool { background: var(--surface) !important; color: #9aa59d; }
.ph::before { display: none; }
.ph .kind-ico { width: 30%; height: auto; max-width: 64px; }
.ph-lg .kind-ico { max-width: 120px; }
.ph-lg { box-shadow: none; border: 1px solid #e8eae8; }
.ribbon { background: #dc2626; box-shadow: none; border-radius: 6px; }

/* Footer newsletter: brand green band */
.newsletter { background: var(--accent-dark); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid #eef0ee; }
}
@media (max-width: 700px) {
  .hero.hero-pro { padding: 32px 0 24px; }
  .hero-art { display: none; }
  .hero-actions .btn { flex: 1; text-align: center; }
  .trust-item { padding: 12px 8px; gap: 8px; }
  .trust-item span { display: none; }
  .kind-tiles { grid-template-columns: 1fr; gap: 10px; }
  .kind-tile { padding: 14px; }
  section.section { padding: 28px 0; }
  .section-flash { padding: 16px !important; }
}
.hero-pro p.hero-eyebrow { color: var(--accent); max-width: none; margin: 0 0 14px; }
.hero-pro p { margin-left: 0; margin-right: 0; }
.product-detail { padding-top: 24px; }
@media (max-width: 700px) { .product-detail { padding-top: 12px; } }
@media (max-width: 700px) { .hero-actions .btn { white-space: nowrap; padding: 12px 10px; font-size: 0.92rem; } }

/* =====================================================================
   Theme: green and white only
   Brand green var(--g-700) for actions, deep green var(--g-900) for text and dark
   surfaces, soft green tints for panels, white everywhere else.
   ===================================================================== */
:root {
  --g-900: #0b2e1c; --g-800: #11442a; --g-700: #155c36; --g-600: #1e7a47;
  --g-100: #e1f0e6; --g-50: #f1f8f3;
  --accent: var(--g-700); --accent-dark: var(--g-800); --accent-soft: var(--g-50); --accent-line: #cfe4d6;
  --ink: var(--g-900); --muted: #5b7264; --border: #dbe8df;
  --abyss: var(--g-900); --deep: var(--g-800); --teal: var(--g-700); --teal-dark: var(--g-900);
  --mint: var(--g-100); --foam: var(--g-50); --lagoon: var(--g-600); --surface: var(--g-50);
}
body { color: var(--g-900); background: #fff; }
.hint, .muted { color: var(--muted); }

/* Primary actions: brand green, white text */
.btn, .search button, .news-form .btn, .hero-pro .btn:not(.btn-outline) { background: var(--g-700); color: #fff; border-color: var(--g-700); }
.btn:hover, .search button:hover, .news-form .btn:hover, .hero-pro .btn:not(.btn-outline):hover { background: var(--g-800); color: #fff; }
.btn-secondary, .btn-outline { background: #fff; color: var(--g-800); border: 1.5px solid var(--g-700); }
.btn-secondary:hover, .btn-outline:hover { background: var(--g-50); color: var(--g-900); border-color: var(--g-800); }
.btn-quick[disabled] { background: #e3ece6; color: #778a7e; border-color: #e3ece6; }

/* Header, search, badges */
header.site-header.light .search { background: var(--g-50); box-shadow: inset 0 0 0 1px var(--accent-line); }
header.site-header.light .search:focus-within { box-shadow: inset 0 0 0 1.5px var(--g-700); }
header.site-header.light .actions a, header.site-header.light .main-nav > ul > li > a { color: var(--g-900); }
header.site-header.light .actions a:hover, header.site-header.light .main-nav > ul > li:hover > a { color: var(--g-700); }
.cart-badge, header.site-header.light .cart-badge { background: var(--g-700); color: #fff; }

/* Sale and deal markers in green (no orange / red on product cards) */
.ribbon, .save-pill { background: var(--g-800); color: #fff; }
.deal-timer { color: var(--g-700); }
.was { color: #889a8e; }
.low-badge { background: var(--g-100); color: var(--g-900); }
.sold-badge { background: #fff; color: var(--g-900); border: 1px solid var(--accent-line); }

/* Flash deals: soft green panel */
.section-flash { background: var(--g-50); border-color: var(--accent-line); }
.section-flash .section-title { border-bottom-color: var(--accent-line); }
.title-ico { fill: var(--g-700); }

/* Option chips, filters, pagination */
.cv input:checked + span, .opt input:checked + span, .filters a.active, .filters .active, .type-chips a.active, .tip-btn.on { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.cv:hover span, .filters a:hover, .type-chips a:hover { border-color: var(--g-700); color: var(--g-800); }

/* Footer and newsletter: deep green with white text */
footer.site-footer { background: var(--g-900); color: #d4e9dc; }
footer.site-footer a { color: #d4e9dc; }
footer.site-footer a:hover { color: #fff; }
footer.site-footer h4 { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); }
.footer-bottom p { color: #b4d4bf; }
.newsletter { background: var(--g-800); }
.news-form .btn { background: var(--g-900); }

/* Toasts and focus */
.toast { background: var(--g-900); }
:focus-visible { outline-color: var(--g-700); }

/* =====================================================================
   Deep teal + ocean blue theme: designed layer for home, shop and product pages
   ===================================================================== */
:root {
  --g-900: #0b2e1c; --g-800: #11442a; --g-700: #155c36; --g-600: #1e7a47;
  --b-700: #1a6b3f; --b-600: #2a8a52; --b-100: #e6f2ea;
  --g-100: #e1f0e6; --g-50: #f1f8f3; --accent-line: #cfe4d6;
  --brand-grad: linear-gradient(120deg, var(--g-900) 0%, var(--g-800) 38%, var(--g-800) 72%, var(--b-700) 100%);
}
a { color: var(--b-700); }
a:hover { color: var(--g-700); }

/* ---------- Home hero: gradient band ---------- */
.hero.hero-deep { position: relative; overflow: hidden; background: var(--brand-grad); color: #fff; padding: 64px 0 56px; }
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 260px at 82% 18%, rgba(111, 207, 143, 0.28), transparent 70%),
              radial-gradient(460px 240px at 8% 110%, rgba(42, 138, 82, 0.35), transparent 70%); }
.hero-deep .hero-grid { position: relative; }
.hero-deep h1 { color: #fff; }
.hero-deep .hero-lead, .hero-pro.hero-deep .hero-lead { color: #cfe8d7; }
.hero-deep p.hero-eyebrow { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #c6f0d4; }
.btn.btn-light, .hero-pro .btn.btn-light { background: #fff; color: var(--g-900); border: 1px solid #fff; }
.btn.btn-light:hover, .hero-pro .btn.btn-light:hover { background: #e8f6ec; color: var(--g-900); }
.btn.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; }
.hero-deep .hero-art svg { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.25)); }

/* Trust bar sits on white right under the band */
.trust-item svg { stroke: var(--g-700); }

/* Section titles: small accent bar before the heading */
.section-title h2::before { content: ''; display: inline-block; width: 4px; height: 1.1em; border-radius: 2px; background: linear-gradient(180deg, var(--g-600), var(--b-600)); margin-right: 4px; }
.section-title a { color: var(--b-700); }
.section-title a:hover { color: var(--g-700); }

/* Category tiles: icon badge in a teal-to-blue tint */
.kind-badge { background: linear-gradient(135deg, var(--g-100), var(--b-100)); color: var(--g-700); }
.kind-tile:hover { border-color: var(--g-600); }

/* ---------- Product cards ---------- */
.card { border-color: #e1eae4; }
.card:hover { border-color: #c9dccf; box-shadow: 0 10px 28px rgba(11, 46, 28, 0.1); }
.card .card-img { background: var(--g-50); }
.card h3 a { color: var(--g-900); }
.card h3 a:hover { color: var(--b-700); }
.card .price { color: var(--g-900); font-weight: 700; }

/* ---------- Page header band (shop, categories, collections) ---------- */
.page-band { background: linear-gradient(180deg, var(--g-50), #fff); border-bottom: 1px solid #e6eee9; padding: 22px 0 18px; }
.page-band h1 { margin: 6px 0 2px; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: var(--g-900); }
.page-band-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.page-band + .container.section { padding-top: 22px; }
.page-band + .container.section > h1 { display: none; }

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--b-700); }
.crumbs span[aria-current] { color: var(--g-900); font-weight: 500; }
.crumbs > span[aria-hidden] { color: #b8c8bd; }

/* Shop filters and result bar */
.filter-panel .filter-box { background: #fff; border: 1px solid #e1eae4; border-radius: 12px; box-shadow: none; }
.filter-box summary { color: var(--g-900); }
.filter-group label { color: var(--g-900); }
.filter-group input[type="search"], .filter-group input[type="number"] { border-color: #d6e3da; border-radius: 8px; }
.filter-group input:focus { border-color: var(--g-700); box-shadow: 0 0 0 3px rgba(21, 92, 54, 0.14); outline: none; }
.results-bar { padding-bottom: 12px; border-bottom: 1px solid #e6eee9; margin-bottom: 16px; }
.results-bar select { border: 1px solid #d6e3da; border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--g-900); }
.type-chips a { border-color: #d6e3da; color: var(--g-900); }
.type-chips a.active { background: var(--g-900); border-color: var(--g-900); color: #fff; }
.clear-link { color: var(--b-700); }

/* ---------- Product page ---------- */
.container.section > .crumbs { margin-bottom: 14px; }
.product-detail { padding-top: 6px; gap: 44px; }
.product-detail > div:first-child > img#main-img, .product-detail .ph-lg { border: 1px solid #e1eae4; border-radius: 14px; box-shadow: none; background: var(--g-50); }
.thumbs .thumb { border-radius: 8px; border-color: #d6e3da; }
.thumbs .thumb.on { border-color: var(--g-700); }
.pd-kind { margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-600); }
.pd-title { margin: 0 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--g-900); }
.rating-line { color: var(--muted); }
.price-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; padding: 14px 0; border-top: 1px solid #e6eee9; border-bottom: 1px solid #e6eee9; }
.price-big #price-now { font-size: 1.7rem; font-weight: 700; color: var(--g-900); letter-spacing: -0.01em; }
.save-pill { background: var(--b-100); color: var(--b-700); border-radius: 6px; font-weight: 700; }
.stock-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9rem; }
.stock-line::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9aa9ab; }
.stock-line.is-in { color: var(--g-700); }
.stock-line.is-in::before { background: var(--g-600); box-shadow: 0 0 0 3px rgba(30, 122, 71, 0.18); }
.stock-line.is-out { color: #8a3b3b; }
.stock-line.is-out::before { background: #c05252; }
.opt-group legend { color: var(--g-900); }
.opt span { border-color: #d6e3da; color: var(--g-900); }
.btn-add { background: var(--g-700); border-color: var(--g-700); }
.btn-add:hover { background: var(--g-800); }
.qty-stepper { border-color: #d6e3da; }

.pd-assure { list-style: none; margin: 20px 0 0; padding: 4px 16px; border: 1px solid #e1eae4; border-radius: 12px; background: var(--g-50); }
.pd-assure li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pd-assure li + li { border-top: 1px solid #e3ece6; }
.pd-assure svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--g-700); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pd-assure span { display: flex; flex-direction: column; font-size: 0.84rem; color: var(--muted); line-height: 1.35; }
.pd-assure strong { color: var(--g-900); font-size: 0.9rem; }
.pd-assure a { color: var(--b-700); }

.share-btn { border-color: #d6e3da; color: var(--g-900); }
.share-btn:hover { border-color: var(--g-700); color: var(--g-700); }
.product-tabs a { color: var(--muted); }
.product-tabs a:hover, .product-tabs a.active { color: var(--g-900); border-bottom-color: var(--g-700); }

/* ---------- Footer: same teal-to-blue gradient as the hero ---------- */
footer.site-footer { background: var(--brand-grad); }
.newsletter { background: var(--g-800); }

@media (max-width: 700px) {
  .hero.hero-deep { padding: 36px 0 30px; }
  .hero-actions .btn { flex: 1; }
  .product-detail { gap: 20px; }
  .pd-assure { padding: 2px 12px; }
}

/* =====================================================================
   Deep teal + ocean blue theme: designed layer for home, shop and product pages
   ===================================================================== */
:root {
  --g-900: #0b2e1c; --g-800: #11442a; --g-700: #155c36; --g-600: #1e7a47;
  --b-700: #1a6b3f; --b-600: #2a8a52; --b-100: #e6f2ea;
  --g-100: #e1f0e6; --g-50: #f1f8f3; --accent-line: #cfe4d6;
  --brand-grad: linear-gradient(120deg, var(--g-900) 0%, var(--g-800) 38%, var(--g-800) 72%, var(--b-700) 100%);
}
a { color: var(--b-700); }
a:hover { color: var(--g-700); }

/* ---------- Home hero: gradient band ---------- */
.hero.hero-deep { position: relative; overflow: hidden; background: var(--brand-grad); color: #fff; padding: 64px 0 56px; }
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 260px at 82% 18%, rgba(111, 207, 143, 0.28), transparent 70%),
              radial-gradient(460px 240px at 8% 110%, rgba(42, 138, 82, 0.35), transparent 70%); }
.hero-deep .hero-grid { position: relative; }
.hero-deep h1 { color: #fff; }
.hero-deep .hero-lead, .hero-pro.hero-deep .hero-lead { color: #cfe8d7; }
.hero-deep p.hero-eyebrow { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #c6f0d4; }
.btn.btn-light, .hero-pro .btn.btn-light { background: #fff; color: var(--g-900); border: 1px solid #fff; }
.btn.btn-light:hover, .hero-pro .btn.btn-light:hover { background: #e8f6ec; color: var(--g-900); }
.btn.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; }
.hero-deep .hero-art svg { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.25)); }

.trust-item svg { stroke: var(--g-700); }

/* Section titles: small teal-to-blue bar before the heading */
.section-title h2::before { content: ''; display: inline-block; width: 4px; height: 1.1em; border-radius: 2px; background: linear-gradient(180deg, var(--g-600), var(--b-600)); margin-right: 4px; }
.section-title a { color: var(--b-700); }
.section-title a:hover { color: var(--g-700); }

.kind-badge { background: linear-gradient(135deg, var(--g-100), var(--b-100)); color: var(--g-700); }
.kind-tile:hover { border-color: var(--g-600); }

/* ---------- Product cards ---------- */
.card { border-color: #e1eae4; }
.card:hover { border-color: #c9dccf; box-shadow: 0 10px 28px rgba(11, 46, 28, 0.1); }
.card .card-img { background: var(--g-50); }
.card h3 a { color: var(--g-900); }
.card h3 a:hover { color: var(--b-700); }
.card .price { color: var(--g-900); font-weight: 700; }

/* ---------- Page header band (shop, categories, collections) ---------- */
.page-band { background: linear-gradient(180deg, var(--g-50), #fff); border-bottom: 1px solid #e6eee9; padding: 22px 0 18px; }
.page-band h1 { margin: 6px 0 2px; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: var(--g-900); }
.page-band-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.page-band + .container.section { padding-top: 22px; }

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--b-700); }
.crumbs span[aria-current] { color: var(--g-900); font-weight: 500; }
.crumbs > span[aria-hidden] { color: #b8c8bd; }

/* Shop filters and result bar */
.filter-panel .filter-box { background: #fff; border: 1px solid #e1eae4; border-radius: 12px; box-shadow: none; }
.filter-box summary { color: var(--g-900); }
.filter-group label { color: var(--g-900); }
.filter-group input[type="search"], .filter-group input[type="number"] { border-color: #d6e3da; border-radius: 8px; }
.filter-group input:focus { border-color: var(--g-700); box-shadow: 0 0 0 3px rgba(21, 92, 54, 0.14); outline: none; }
.results-bar { padding-bottom: 12px; border-bottom: 1px solid #e6eee9; margin-bottom: 16px; }
.results-bar select { border: 1px solid #d6e3da; border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--g-900); }
.type-chips a { border-color: #d6e3da; color: var(--g-900); }
.type-chips a.active { background: var(--g-900); border-color: var(--g-900); color: #fff; }
.clear-link { color: var(--b-700); }

/* ---------- Product page ---------- */
.container.section > .crumbs { margin-bottom: 14px; }
.product-detail { padding-top: 6px; gap: 44px; }
.product-detail > div:first-child > img#main-img, .product-detail .ph-lg { border: 1px solid #e1eae4; border-radius: 14px; box-shadow: none; background: var(--g-50); }
.thumbs .thumb { border-radius: 8px; border-color: #d6e3da; }
.thumbs .thumb.on { border-color: var(--g-700); }
.pd-kind { margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-600); }
.pd-title { margin: 0 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--g-900); }
.rating-line { color: var(--muted); }
.price-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; padding: 14px 0; border-top: 1px solid #e6eee9; border-bottom: 1px solid #e6eee9; }
.price-big #price-now { font-size: 1.7rem; font-weight: 700; color: var(--g-900); letter-spacing: -0.01em; }
.save-pill { background: var(--b-100); color: var(--b-700); border-radius: 6px; font-weight: 700; }
.stock-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9rem; }
.stock-line::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9aa9ab; }
.stock-line.is-in { color: var(--g-700); }
.stock-line.is-in::before { background: var(--g-600); box-shadow: 0 0 0 3px rgba(30, 122, 71, 0.18); }
.stock-line.is-out { color: #8a3b3b; }
.stock-line.is-out::before { background: #c05252; }
.opt-group legend { color: var(--g-900); }
.opt span { border-color: #d6e3da; color: var(--g-900); }
.btn-add { background: var(--g-700); border-color: var(--g-700); }
.btn-add:hover { background: var(--g-800); }
.qty-stepper { border-color: #d6e3da; }

.pd-assure { list-style: none; margin: 20px 0 0; padding: 4px 16px; border: 1px solid #e1eae4; border-radius: 12px; background: var(--g-50); }
.pd-assure li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pd-assure li + li { border-top: 1px solid #e3ece6; }
.pd-assure svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--g-700); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pd-assure span { display: flex; flex-direction: column; font-size: 0.84rem; color: var(--muted); line-height: 1.35; }
.pd-assure strong { color: var(--g-900); font-size: 0.9rem; }
.pd-assure a { color: var(--b-700); }

.share-btn { border-color: #d6e3da; color: var(--g-900); }
.share-btn:hover { border-color: var(--g-700); color: var(--g-700); }
.product-tabs a { color: var(--muted); }
.product-tabs a:hover, .product-tabs a.active { color: var(--g-900); border-bottom-color: var(--g-700); }

/* ---------- Footer: same teal-to-blue gradient as the hero ---------- */
footer.site-footer { background: var(--brand-grad); }
.newsletter { background: var(--g-800); }

@media (max-width: 700px) {
  .hero.hero-deep { padding: 36px 0 30px; }
  .product-detail { gap: 20px; }
  .pd-assure { padding: 2px 12px; }
}
.container.section > .crumbs:first-child { padding-top: 18px; }
@media (max-width: 700px) { .container.section > .crumbs:first-child { padding-top: 12px; } }

/* ---------- Newsletter signup popup ---------- */
body.sp-lock { overflow: hidden; }
.sp-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(7, 34, 20, 0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s ease; }
.sp-overlay[hidden] { display: none; }
.sp-overlay.is-open { opacity: 1; }
.sp-dialog { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(7, 34, 20, 0.35); transform: translateY(12px) scale(0.98); transition: transform 0.22s ease; }
.sp-overlay.is-open .sp-dialog { transform: none; }
.sp-art { display: flex; align-items: flex-end; justify-content: center; background: var(--brand-grad, linear-gradient(135deg, var(--g-900), var(--b-700))); position: relative; overflow: hidden; min-height: 320px; }
.sp-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(240px 160px at 70% 20%, rgba(111, 207, 143, 0.3), transparent 70%); }
.sp-art svg { position: relative; width: 82%; height: auto; }
.sp-body { padding: 36px 34px 28px; }
.sp-eyebrow { margin: 0 0 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g-600, var(--g-600)); }
.sp-body h2 { margin: 0 0 10px; font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--g-900, var(--g-900)); }
.sp-text { margin: 0 0 20px; color: #4f6a58; font-size: 0.95rem; line-height: 1.55; }
.sp-form { display: flex; flex-direction: column; gap: 10px; }
.sp-form input { width: 100%; padding: 13px 14px; border: 1px solid #cfdfd4; border-radius: 8px; font: inherit; font-size: 16px; color: var(--g-900, var(--g-900)); background: #fff; }
.sp-form input:focus { outline: none; border-color: var(--g-700, var(--g-700)); box-shadow: 0 0 0 3px rgba(21, 92, 54, 0.15); }
.sp-form .btn { width: 100%; padding: 13px 16px; font-size: 1rem; }
.sp-error { margin: 8px 0 0; color: #a13636; font-size: 0.85rem; font-weight: 500; }
.sp-later { display: block; margin: 12px auto 0; border: 0; background: none; padding: 4px 8px; font: inherit; font-size: 0.88rem; color: #6c8474; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sp-later:hover { color: var(--g-900, var(--g-900)); }
.sp-fine { margin: 16px 0 0; font-size: 0.74rem; line-height: 1.45; color: #8a9f91; text-align: center; }
.sp-fine a { color: inherit; text-decoration: underline; }
.sp-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: #3a5745; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sp-close:hover { background: #eef5f0; color: var(--g-900, var(--g-900)); }
.sp-step[data-step="done"] { text-align: center; padding-top: 10px; }
.sp-check { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--g-100, var(--g-100)); }
.sp-check svg { width: 28px; height: 28px; fill: none; stroke: var(--g-700, var(--g-700)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-code { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 18px; padding: 14px; border: 1.5px dashed var(--g-600, var(--g-600)); border-radius: 10px; background: var(--g-50, var(--g-50)); }
.sp-code[hidden] { display: none; }
.sp-code span { font-size: 0.78rem; color: #5b7264; text-transform: uppercase; letter-spacing: 0.06em; }
.sp-code strong { font-size: 1.4rem; letter-spacing: 0.08em; color: var(--g-900, var(--g-900)); }

@media (max-width: 640px) {
  .sp-overlay { place-items: end center; padding: 0; }
  .sp-dialog { grid-template-columns: 1fr; border-radius: 16px 16px 0 0; max-height: 92vh; transform: translateY(40px); }
  .sp-art { min-height: 110px; max-height: 110px; align-items: center; }
  .sp-art svg { width: 36%; }
  .sp-body { padding: 22px 20px 20px; }
  .sp-body h2 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .sp-overlay, .sp-dialog { transition: none; } }

/* =====================================================================
   Background theme: soft green page, faint leaf pattern, light top wash.
   White cards and panels sit on top of it.
   ===================================================================== */
:root { --page-bg: #f3f8f4; --leaf-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23155c36%27%20stroke-opacity%3D%270.07%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M24%2058c0-14%209-24%2022-26%200%2014-9%2024-22%2026z%27%2F%3E%3Cpath%20d%3D%27M24%2058%2046%2032%27%2F%3E%3Cpath%20d%3D%27M112%2030c10%204%2015%2014%2012%2025-10-4-15-14-12-25z%27%2F%3E%3Cpath%20d%3D%27M124%2055%20112%2030%27%2F%3E%3Cpath%20d%3D%27M96%20128c3-12%2013-19%2025-17-3%2012-13%2019-25%2017z%27%2F%3E%3Cpath%20d%3D%27M96%20128l25-17%27%2F%3E%3Cpath%20d%3D%27M30%20132c-6-9-5-20%203-27%206%209%205%2020-3%2027z%27%2F%3E%3Cpath%20d%3D%27M30%20132l3-27%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%27142%27%20cy%3D%2796%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%2718%27%20r%3D%271.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(1200px 520px at 50% -180px, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    var(--leaf-pattern);
  background-repeat: no-repeat, repeat;
  background-attachment: scroll, fixed;
}

/* Store: keep content surfaces white and crisp on the patterned page */
.trust-bar { background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.1); }
.kind-tile, .card, .filter-panel .filter-box, .pd-assure, .empty-state, .results-bar select { background-color: #fff; }
.page-band { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); }
.section-flash { background: rgba(255, 255, 255, 0.78); }
.product-detail { background: #fff; border: 1px solid #e1eae4; border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.04), 0 8px 24px rgba(11, 46, 28, 0.05); }
.product-tabs { background: var(--page-bg); }
.checkout-layout > form, .cart-page .container, .checkout-summary { background-color: #fff; }
/* Leaf pattern inside the dark-green hero and footer, as light lines */
.hero.hero-deep::after, footer.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.07%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M24%2058c0-14%209-24%2022-26%200%2014-9%2024-22%2026z%27%2F%3E%3Cpath%20d%3D%27M24%2058%2046%2032%27%2F%3E%3Cpath%20d%3D%27M112%2030c10%204%2015%2014%2012%2025-10-4-15-14-12-25z%27%2F%3E%3Cpath%20d%3D%27M124%2055%20112%2030%27%2F%3E%3Cpath%20d%3D%27M96%20128c3-12%2013-19%2025-17-3%2012-13%2019-25%2017z%27%2F%3E%3Cpath%20d%3D%27M96%20128l25-17%27%2F%3E%3Cpath%20d%3D%27M30%20132c-6-9-5-20%203-27%206%209%205%2020-3%2027z%27%2F%3E%3Cpath%20d%3D%27M30%20132l3-27%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%27142%27%20cy%3D%2796%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%2718%27%20r%3D%271.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.hero.hero-deep::after, footer.site-footer::before { z-index: 0; }
.hero-deep .hero-grid { z-index: 1; }
footer.site-footer { position: relative; }
footer.site-footer > * { position: relative; z-index: 1; }
@media (max-width: 700px) { .product-detail { padding: 14px; border-radius: 12px; } }

/* ---------- Smart picks (recommendations) ---------- */
.reco-box[hidden] { display: none; }
.reco-box.reco-in { animation: recoIn 0.35s ease; }
@keyframes recoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reco-title { align-items: flex-end; }
.reco-title h2 { display: flex; align-items: center; gap: 8px; }
.reco-ico { width: 20px; height: 20px; fill: var(--g-600, var(--g-600)); stroke: none; }
.reco-sub { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); }
.hero-hello { background: rgba(255, 255, 255, 0.14) !important; }

/* ---------- Chat invitation bubble (pops out by itself) ---------- */
.aqc-nudge { position: absolute; bottom: 62px; width: min(320px, calc(100vw - 32px)); padding: 14px 14px 12px; background: #fff; border: 1px solid #dbe7de; border-radius: 14px; box-shadow: 0 16px 40px rgba(11, 46, 28, 0.18); opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 2; }
.aqc-right .aqc-nudge { right: 0; }
.aqc-left .aqc-nudge { left: 0; }
.aqc-nudge.in { opacity: 1; transform: none; }
.aqc-nudge::after { content: ''; position: absolute; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid #dbe7de; border-bottom: 1px solid #dbe7de; transform: rotate(45deg); }
.aqc-right .aqc-nudge::after { right: 26px; }
.aqc-left .aqc-nudge::after { left: 26px; }
.aqc-nudge-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #7b8b81; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.aqc-nudge-x:hover { background: #f1f6f2; color: var(--g-900); }
.aqc-nudge-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 26px; }
.aqc-nudge-av { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--aqc, var(--g-700)); color: #fff; }
.aqc-nudge-name strong { display: block; font-size: 0.95rem; color: var(--g-900); }
.aqc-nudge-name small { display: block; font-size: 0.76rem; color: #6b7f72; }
.aqc-nudge-text { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.45; color: #2e4a38; }
.aqc-nudge-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.aqc-nudge-btn { border: 1px solid #cfe0d4; background: var(--page-bg); color: var(--g-800); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.aqc-nudge-btn:hover { background: var(--g-100); border-color: var(--aqc, var(--g-700)); }
@media (max-width: 520px) { .aqc-nudge { bottom: 58px; } }
@media (prefers-reduced-motion: reduce) { .aqc-nudge, .reco-box.reco-in { transition: none; animation: none; } }

/* ---------- Theme editor sections ---------- */
.hero.hero-light { background: linear-gradient(180deg, var(--g-50), #fff); color: var(--g-900); padding: 56px 0 44px; }
.hero-light h1 { color: var(--g-900); }
.hero-light .hero-lead { color: var(--muted); }
.hero-light p.hero-eyebrow { background: #fff; border-color: var(--accent-line); color: var(--g-700); }
.hero-img { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
.img-text { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.img-text.img-right .img-text-media { order: 2; }
.img-text-media img, .img-text-ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--g-50); }
.img-text-ph { display: grid; place-items: center; color: var(--accent-line); border: 1px dashed var(--accent-line); }
.img-text-ph .kind-ico { width: 64px; height: 64px; }
.img-text-body h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--g-900); }
.img-text-body p { margin: 0 0 18px; color: var(--muted); line-height: 1.65; white-space: pre-line; }
.rich-text { max-width: 760px; margin: 0 auto; text-align: center; }
.rich-text.rt-left { text-align: left; margin-left: 0; }
.rich-text h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--g-900); }
.rich-text p { margin: 0 0 18px; color: var(--muted); line-height: 1.7; white-space: pre-line; }
.theme-empty { margin: 16px 0; padding: 14px 16px; border: 1px dashed #c9d6cd; border-radius: 10px; color: #7b8b81; font-size: 0.88rem; }
/* The section being edited, outlined in the preview only */
.theme-selected { outline: 2px solid #1570ef; outline-offset: 4px; border-radius: 6px; transition: outline-color 0.2s; }
@media (max-width: 800px) { .img-text { grid-template-columns: 1fr; gap: 18px; } .img-text.img-right .img-text-media { order: 0; } }

/* ---------- Mobile buy bar: quantity + Add to Cart fixed to the bottom of the screen ---------- */
@media (max-width: 700px) {
  .buy-form .qty-label { display: none; }
  .buy-row {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; margin: 0;
    display: flex; align-items: stretch; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--accent-line, #d6e3da);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  }
  .buy-row .qty-stepper { height: 48px; }
  .buy-row .qty-btn { width: 38px; height: 100%; }
  .buy-row .qty-stepper input { width: 36px !important; font-size: 16px; min-height: 0 !important; height: 100%; }
  .buy-row .btn-add { flex: 1; min-width: 0; min-height: 48px; font-size: 0.98rem; }
  /* Keep the end of the page, the chat button and messages clear of the bar. */
  body.has-buy-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.has-buy-bar .aqc { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  body.has-buy-bar .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Add to Cart buttons: cart icon + label, centred ---------- */
.btn-add, .btn-quick, .btn-add-full { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-add .cart-ico, .btn-quick .cart-ico, .btn-add-full .cart-ico { flex: none; }
.btn-add span, .btn-quick span, .btn-add-full span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- "ADD TO CART" in capitals on every Add to Cart button (both store styles) ---------- */
.btn-add, .btn-quick, .btn-add-full { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

/* ---------- Bigger product cards on every product list (home rows, shop, categories, collections) ----------
   About 4 cards per row on a normal computer screen instead of 5-6, 3 on tablets, 2 on phones. */
.grid, .shop-results .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.card .card-body { padding: 14px 14px 16px; }
.card .card-body h3, .card .card-body h3 a { font-size: 1.02rem; line-height: 1.35; }
.card .price { font-size: 1.05rem; }
.card .btn-quick { min-height: 42px; font-size: 0.86rem; }
@media (max-width: 1100px) { .grid, .shop-results .grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 760px) { .grid, .shop-results .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .card .card-body h3, .card .card-body h3 a { font-size: 0.92rem; } }

/* ---------- Product photos blend into the website ----------
   White photo backgrounds take on the site's photo colour (the theme's light tint, or the Nature style's grey),
   so pictures shot on white do not show as white boxes. Photos with a see-through background work too. */
.card .card-img { background: var(--photo-bg, var(--g-50)) !important; }
.card .card-img img { mix-blend-mode: multiply; background: transparent !important; }
.product-detail .pd-photo { background: var(--photo-bg, var(--g-50)); border-radius: 14px; overflow: hidden; line-height: 0; }
.product-detail .pd-photo img#main-img { width: 100%; mix-blend-mode: multiply; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.product-detail .thumb { background: var(--photo-bg, var(--g-50)); }
.product-detail .thumb img { mix-blend-mode: multiply; }
/* A logo saved with a white background blends into the header colour too. */
header.site-header .brand-logo img { mix-blend-mode: multiply; }

/* ---------- Footer: the site's fonts, and a "Follow us" row of social icons ---------- */
.site-footer { font-family: var(--font-body); }
.site-footer .footer-about > h4:first-child { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
.site-footer h4 { font-family: var(--font-body); }
.footer-follow { margin: 16px 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.footer-follow + .social-links { margin-top: 8px; }

/* ---------- Product page: Description and Specification as two sections side by side ---------- */
.pd-info-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.pd-info-grid .pd-info-card { margin: 0 !important; background: #fff; border-radius: 12px; padding: 24px 26px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.06); scroll-margin-top: 90px; }
.pd-info-grid .pd-info-card h2 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 1.3rem; }
.pd-info-grid .pd-info-card p { line-height: 1.7; }
.pd-info-grid .spec-table { width: 100%; border-collapse: collapse; margin: 0; }
.pd-info-grid .spec-table th, .pd-info-grid .spec-table td { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.07); vertical-align: top; text-align: left; font-size: 0.92rem; }
.pd-info-grid .spec-table tr:last-child th, .pd-info-grid .spec-table tr:last-child td { border-bottom: 0; }
.pd-info-grid .spec-table th { width: 42%; font-weight: 600; color: #4a4f4c; padding-right: 14px; }
@media (max-width: 860px) { .pd-info-grid { grid-template-columns: 1fr; } }
.pd-info-grid .spec-table { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible; }
.pd-info-grid .spec-table th, .pd-info-grid .spec-table td { background: transparent !important; }

/* ---------- Review photos and shop replies ---------- */
.rv-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.rv-photos .hint { flex-basis: 100%; margin: 0; }
.rv-photo-list { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-photo { position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: #eee; }
.rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-photo.is-loading img { opacity: .45; }
.rv-photo-spin { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 2px solid rgba(0,0,0,.2); border-top-color: var(--g-700); border-radius: 50%; animation: rv-spin .8s linear infinite; }
.rv-photo:not(.is-loading) .rv-photo-spin { display: none; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-photo-rm { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.rv-photo-add { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 76px; height: 76px; border: 1.5px dashed rgba(0,0,0,.25); border-radius: 8px; background: #fff; color: #4a4f4c; font: inherit; font-size: .72rem; cursor: pointer; }
.rv-photo-add:hover { border-color: var(--g-700); color: var(--g-700); }
.rv-photo-add[hidden] { display: none; }
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.review-photo { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; display: block; background: #eee; }
.review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.review-photo:hover img { transform: scale(1.06); }
.review-reply { margin: 10px 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--g-700); background: var(--g-50, #f4f6f5); border-radius: 0 8px 8px 0; font-size: .92rem; }
.review-reply strong { display: block; font-size: .82rem; margin-bottom: 2px; }
.review-reply p { margin: 0; }
.review { scroll-margin-top: 140px; }
.review:target { box-shadow: 0 0 0 2px var(--g-700); }

/* ---------- Search icon (theme editor: Search > Icon) ---------- */
header.site-header .search-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; padding: 0; }
header.site-header .search-toggle:hover { background: rgba(0, 0, 0, 0.06); }
header.site-header .search-toggle .st-close { display: none; }
header.site-header.search-open .search-toggle .st-open { display: none; }
header.site-header.search-open .search-toggle .st-close { display: block; }
header.site-header.search-open .bar .search { animation: search-drop 0.18s ease-out; }
@keyframes search-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Quick bar: account, offers and cart floating on the side of the page ---------- */
.qbar { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-left: 0; border-radius: 0 14px 14px 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); font-family: var(--font-body); }
.qbar-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--g-900, #1f2421); cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s; }
.qbar-btn:hover, .qbar-btn:focus-visible, .qbar-open .qbar-offers { background: var(--g-700); color: #fff; }
.qbar-label { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-8px, -50%); opacity: 0; pointer-events: none; white-space: nowrap; background: var(--g-900, #1f2421); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 12px; border-radius: 6px; transition: opacity 0.15s, transform 0.15s; }
.qbar-label::before { content: ''; position: absolute; right: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-right-color: var(--g-900, #1f2421); }
.qbar-btn:hover .qbar-label, .qbar-btn:focus-visible .qbar-label { opacity: 1; transform: translate(0, -50%); }
.qbar-open .qbar-offers .qbar-label { opacity: 0; }
.qbar-count { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.qbar-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #d93025; box-shadow: 0 0 0 2px #fff; animation: qbar-pulse 2s infinite; }
@keyframes qbar-pulse { 50% { transform: scale(1.35); } }
.qbar-panel { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 320px; max-height: min(520px, 80vh); display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2); overflow: hidden; animation: qbar-pop 0.18s ease-out; }
.qbar-panel[hidden] { display: none; }
@keyframes qbar-pop { from { opacity: 0; transform: translate(-10px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.qbar-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; font-family: var(--font-display); font-size: 1.05rem; }
.qbar-close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #555; }
.qbar-list { overflow-y: auto; padding: 6px; }
.qbar-item { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.qbar-item:hover { background: var(--g-50, #f4f6f5); }
.qbar-img { position: relative; flex: none; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--photo-bg, #eee); }
.qbar-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.qbar-img em { position: absolute; left: 0; top: 0; background: #d93025; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 0 0 6px 0; }
.qbar-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qbar-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qbar-price b { color: #d93025; }
.qbar-price s { color: #888; font-size: 0.85em; }
.qbar-empty { padding: 18px; margin: 0; color: #666; text-align: center; }
.qbar-all { margin: 8px 12px 12px; text-align: center; justify-content: center; }
/* Right-hand side (theme editor) */
.qbar.qbar-right { left: auto; right: 0; border-left: 1px solid rgba(0, 0, 0, 0.08); border-right: 0; border-radius: 14px 0 0 14px; }
/* Phones: a slim bar low on the side, labels hidden, panel as a sheet */
@media (max-width: 700px) {
  .qbar { top: auto; bottom: 90px; transform: none; padding: 4px; }
  .qbar-btn { width: 40px; height: 40px; }
  .qbar-label { display: none; }
  .qbar-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 16px; width: auto; transform: none; animation: none; }
}

/* ---------- Quick bar: automatic animation (slides in, then each icon takes a turn to pop with its label) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .qbar { animation: qbar-in 0.6s cubic-bezier(.2, .8, .3, 1.2) 0.4s both; }
  .qbar-btn { animation: qbar-turn 9s ease-in-out infinite; }
  .qbar-btn .qbar-label { animation: qbar-say 9s ease-in-out infinite; }
  .qbar > .qbar-btn:first-child, .qbar > .qbar-btn:first-child .qbar-label { animation-delay: 1.5s; }
  .qbar > .qbar-offers, .qbar > .qbar-offers .qbar-label { animation-delay: 4.5s; }
  .qbar > .qbar-offers ~ .qbar-btn, .qbar > .qbar-offers ~ .qbar-btn .qbar-label { animation-delay: 7.5s; }
  .qbar-btn svg { animation: qbar-wiggle 9s ease-in-out infinite; animation-delay: inherit; }
  /* The shopper is using the bar: stand still. */
  .qbar:hover .qbar-btn, .qbar:hover .qbar-label, .qbar:hover svg, .qbar:focus-within .qbar-btn, .qbar:focus-within .qbar-label, .qbar:focus-within svg,
  .qbar-open .qbar-btn, .qbar-open .qbar-label, .qbar-open svg { animation: none; }
}
@keyframes qbar-in { from { translate: -110% 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes qbar-turn {
  0%, 30%, 100% { background: transparent; color: var(--g-900, #1f2421); scale: 1; }
  4%, 24% { background: var(--g-700); color: #fff; scale: 1.12; }
}
@keyframes qbar-say { 0%, 28%, 100% { opacity: 0; } 5%, 23% { opacity: 1; } }
@keyframes qbar-wiggle { 0%, 12%, 100% { rotate: 0deg; } 3% { rotate: -14deg; } 6% { rotate: 12deg; } 9% { rotate: -6deg; } }

/* ---------- Add to Cart animation: flying photo, cart bump, tick on the button ---------- */
.cart-fly { position: fixed; z-index: 999; border-radius: 50%; object-fit: cover; background: var(--g-700); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); border: 2px solid #fff; pointer-events: none; }
.cart-bump { animation: cart-bump 0.5s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 65% { transform: scale(0.92) rotate(5deg); } 100% { transform: scale(1); } }
.qbar-btn.cart-bump { animation: cart-bump 0.5s ease !important; background: var(--g-700); color: #fff; }
.btn-add.is-added, .btn-quick.is-added, .btn-add-full.is-added, button.is-added { position: relative; overflow: hidden; }
button.is-added::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #1a7f4b; color: #fff; font-size: 1.25em; font-weight: 700; border-radius: inherit; animation: added-tick 1.5s ease both; }
@keyframes added-tick { 0% { opacity: 0; transform: translateY(100%); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-100%); } }
/* Buttons give a little press feedback */
.btn-add:active, .btn-quick:active, .btn-add-full:active { transform: scale(0.97); }

/* ---------- Trust ticks: a ring that goes all the way round, then a tick (animation comes from the theme) ---------- */
svg.tick-ring, .pd-assure svg.tick-ring, .trust-item svg.tick-ring { width: 26px; height: 26px; flex: none; margin-left: auto; fill: none; stroke: #1a9d5a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tick-ring .tr-bg { stroke: rgba(26, 157, 90, 0.18); }
.tick-ring .tr-arc { transform: rotate(-90deg); transform-origin: 12px 12px; stroke-dasharray: 100; stroke-dashoffset: 0; }
.tick-ring .tr-check { stroke-width: 2.4; stroke-dasharray: 100; stroke-dashoffset: 0; }
.trust-item svg.tick-ring { width: 24px; height: 24px; margin-left: 10px; }

/* "100%" shown inside the ring when it completes, just before the tick (theme editor: Trust ticks) */
svg.tick-ring, .pd-assure svg.tick-ring { width: 32px; height: 32px; }
.trust-item svg.tick-ring { width: 30px; height: 30px; }
.tick-ring .tr-pct { opacity: 0; stroke: none; fill: #14804a; font: 800 6.4px/1 var(--font-body), Arial, sans-serif; letter-spacing: -0.02em; }
/* Trust ticks use the theme colour (Buttons and links); on the home trust bar they follow that bar's text colour. */
svg.tick-ring, .pd-assure svg.tick-ring { stroke: var(--g-700); }
.tick-ring .tr-bg { stroke: var(--g-700); opacity: 0.18; }
.tick-ring .tr-pct { fill: var(--g-700); }
.trust-item svg.tick-ring, .trust-item .tick-ring .tr-bg { stroke: currentColor; }
.trust-item .tick-ring .tr-pct { fill: currentColor; }

/* Shop by category: copies used only by the moving list */
.kind-tile.kind-clone { display: none; }

/* ---------- Review request: a polite banner above the reviews (animation comes from the theme) ---------- */
.review-ask { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; padding: 16px 18px; border: 1px solid var(--accent-line, #dfe5e1); border-radius: 12px; background: var(--g-50, #f4f6f5); color: inherit; text-decoration: none; position: relative; overflow: hidden; }
.review-ask:hover { border-color: var(--g-700); }
.ra-stars { display: inline-flex; gap: 2px; font-size: 22px; line-height: 1; color: #f5a623; flex: none; }
.ra-stars i { font-style: normal; display: inline-block; }
.ra-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; font-size: 0.9rem; color: var(--muted, #5b6660); line-height: 1.45; }
.ra-text strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--g-900); }
.ra-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--g-700); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 6px; }
.ra-hand { display: inline-block; }
#write-review { scroll-margin-top: 150px; }

/* ---------- Store reviews: "What our customers say" above the footer (animation comes from the theme) ---------- */
.store-reviews { padding: 48px 0 52px; background: var(--g-50, #f4f6f5); border-top: 1px solid rgba(0, 0, 0, 0.06); overflow: hidden; }
.sr-head { text-align: center; max-width: var(--page-w); margin: 0 auto 26px; padding: 0 20px; }
.sr-head h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); color: var(--g-900); }
.sr-score { margin: 0; color: var(--muted, #5b6660); font-size: 0.95rem; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sr-score b { color: var(--g-900); font-size: 1.1rem; }
.sr-stars { display: inline-flex; gap: 1px; color: #d8d8d2; font-size: 15px; line-height: 1; }
.sr-stars i { font-style: normal; display: inline-block; }
.sr-stars i.on { color: #f5a623; }
.sr-stars-big { font-size: 20px; }
.sr-viewport { max-width: var(--page-w); margin: 0 auto; padding: 4px 20px 8px; overflow-x: auto; scrollbar-width: thin; }
.sr-track { display: flex; gap: 18px; }
.sr-card { flex: none; width: min(340px, 82vw); display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 12px; color: inherit; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.sr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1); border-color: var(--g-700); }
.sr-card.sr-clone { display: none; }
.sr-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--g-900); }
.sr-body { flex: 1; font-size: 0.93rem; line-height: 1.55; color: #3e4c59; }
.sr-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid #eef0ee; }
.sr-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--g-700); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.35; }
.sr-who b { color: var(--g-900); }
.sr-who em { font-style: normal; font-size: 0.72rem; color: #1a7f4b; font-weight: 600; }
.sr-who small { color: var(--muted, #5b6660); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-photo { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }

/* Quick bar buttons by device: computers show account, offers, cart; phones show what the theme chooses. */
.qbar .qb-shop, .qbar .qb-logout { display: none; }
.qbar form.qb-logout { margin: 0; }

/* Quick bar search (phones): a box that slides out beside the bar */
.qbar .qb-search { display: none; }
.qbar-search { position: absolute; left: calc(100% + 8px); top: 0; display: flex; width: min(300px, calc(100vw - 72px)); background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); overflow: hidden; animation: qbar-search-in 0.18s ease-out; }
.qbar-search[hidden] { display: none; }
.qbar-search input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font: inherit; font-size: 16px; background: transparent; outline: none; }
.qbar-search button { flex: none; width: 46px; border: 0; background: var(--g-700); color: #fff; cursor: pointer; display: grid; place-items: center; }
.qbar-searching .qb-search { background: var(--g-700); color: #fff; animation: none; }
@keyframes qbar-search-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Sign in / My account inside the phone menu */
.main-nav .nav-account-mobile { display: none; }
@media (max-width: 700px) { .main-nav .nav-account-mobile { display: block; border-top: 1px solid rgba(127, 127, 127, 0.25); } }
/* Computers: Profile and Log out in the side bar are only for signed-in customers */
@media (min-width: 701px) {
  .qbar.qbar-guest .qb-account { display: none; }
  .qbar.qbar-member .qb-logout { display: block; }
  .qbar.qbar-member form.qb-logout .qbar-btn { display: flex; }
  .qbar .qb-logout .qbar-btn, .qbar .qb-logout .qbar-label, .qbar .qb-logout svg { animation: none; }
}

/* ---- Phones: the menu is a side panel (not the full width), and each sub-menu opens with its arrow ---- */
.main-nav .sub-toggle { display: none; }
@media (max-width: 700px) {
  .main-nav { right: auto !important; width: min(300px, 82vw); max-height: calc(100vh - 100% - 12px); border-radius: 0 0 14px 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); }
  .main-nav > ul { padding-left: 0 !important; padding-right: 0 !important; }
  .main-nav > ul > li { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid rgba(127, 127, 127, 0.16); }
  .main-nav > ul > li:last-child { border-bottom: 0; }
  .main-nav > ul > li > a { flex: 1; min-width: 0; padding: 14px 20px; }
  .main-nav .dd-caret { display: none; }
  .main-nav .sub-toggle { display: grid; place-items: center; flex: none; width: 52px; border: 0; border-left: 1px solid rgba(127, 127, 127, 0.16); background: transparent; color: inherit; cursor: pointer; }
  .main-nav .sub-toggle svg { transition: transform 0.18s; }
  .main-nav li.open > .sub-toggle svg { transform: rotate(180deg); }
  .main-nav .has-dropdown > .dropdown, .main-nav .has-dropdown:hover > .dropdown, .main-nav .has-dropdown:focus-within > .dropdown { display: none; flex-basis: 100%; margin: 0; padding: 4px 0 8px; list-style: none; background: rgba(127, 127, 127, 0.08) !important; border-radius: 0; box-shadow: none; }
  .main-nav .has-dropdown.open > .dropdown { display: block; }
  .main-nav .dropdown a { display: block; padding: 10px 20px 10px 34px; }
  /* The floating side icons would sit on top of the open menu. */
  body:has(#nav-toggle:checked) .qbar { display: none !important; }
}

/* ---- Product page: Description / Specification as tabs (one shown at a time), in the shop's own fonts ---- */
.pd-info-grid.pd-info-tabs { grid-template-columns: minmax(0, 1fr) !important; }
.pd-info-grid .pd-info-card[hidden] { display: none; }
.pd-info-grid.pd-info-tabs .pd-info-card h2 { display: none; }
.product-tabs a { font-family: var(--font-body); }
.product-tabs.pd-tabs a.active { color: var(--g-900); border-bottom-color: var(--g-700); font-weight: 600; }
.pd-info-grid .pd-info-card h2 { font-family: var(--font-display); }
.pd-info-grid .pd-info-card, .pd-info-grid .pd-info-card p, .pd-info-grid .spec-table th, .pd-info-grid .spec-table td { font-family: var(--font-body); }
.pd-info-grid .pd-info-card p { font-size: 0.98rem; color: var(--ink); }

/* ---- Footer: divider lines between its parts (columns on computers, blocks on phones) ---- */
.site-footer { --ft-line: color-mix(in srgb, currentColor 16%, transparent); }
.site-footer .footer-grid { column-gap: 0 !important; }
.site-footer .footer-grid > div { padding: 4px 28px; border-left: 1px solid var(--ft-line); }
.site-footer .footer-grid > div:first-child { padding-left: 0; border-left: 0; }
.site-footer .footer-grid > div:last-child { padding-right: 0; }
.site-footer .footer-bottom { border-top: 1px solid var(--ft-line) !important; margin-top: 28px; padding-top: 20px; }
@media (max-width: 860px) {
  .site-footer .footer-grid { row-gap: 0 !important; }
  .site-footer .footer-grid > div { padding: 22px 0; border-left: 0; border-top: 1px solid var(--ft-line); }
  .site-footer .footer-grid > div:first-child { padding-top: 0; border-top: 0; }
  .site-footer .footer-bottom { margin-top: 0; }
}
.site-footer .footer-follow { margin-top: 22px !important; }
.site-footer .footer-follow + .social-links { margin-top: 10px; }

/* ---- Track your order and Help centre: cards in the shop's own colours and fonts ---- */
.trk-page, .kb-page { max-width: 980px; }
.trk-page h1, .kb-page h1 { font-family: var(--font-display); }
.trk-card, .kb-card { background: #fff; border: 1px solid var(--line, var(--border)); border-radius: 16px; padding: 22px 24px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 4px 14px rgba(11, 46, 28, 0.05); }
.trk-card h2, .kb-card h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; margin: 0 0 10px; color: var(--g-900); }
.trk-card p { color: var(--muted); line-height: 1.6; }
.trk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 18px; }
.trk-side .trk-card p { margin: 0; font-size: 0.93rem; }
.trk-side a { color: var(--g-700); font-weight: 600; }
.trk-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.trk-head > div { display: flex; flex-direction: column; gap: 2px; }
.trk-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.trk-number { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--g-900); }
.trk-badge { padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: color-mix(in srgb, var(--g-700) 12%, #fff); color: var(--g-900); }
.trk-badge.bad { background: #fdecec; color: #a12626; }
.trk-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 6px 0 0; padding: 0; }
.trk-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 6px; color: var(--muted); }
.trk-steps li::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; background: var(--line, #e5e5e5); }
.trk-steps li:first-child::before { display: none; }
.trk-steps li.done::before { background: var(--g-700); }
.trk-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--line, #e5e5e5); color: #fff; }
.trk-steps li.done .trk-dot { background: var(--g-700); border-color: var(--g-700); }
.trk-steps li.current .trk-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--g-700) 18%, transparent); }
.trk-step-text { display: flex; flex-direction: column; gap: 2px; }
.trk-step-text strong { font-size: 0.9rem; font-weight: 600; }
.trk-steps li.done .trk-step-text strong { color: var(--g-900); }
.trk-step-text small { font-size: 0.78rem; }
.trk-eta { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line, #e5e5e5); text-align: center; }
.trk-eta strong { color: var(--g-900); }
.trk-dl { margin: 0 0 16px; }
.trk-dl > div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line, #eee); }
.trk-dl > div:last-child { border-bottom: 0; }
.trk-dl dt { width: 150px; flex: none; color: var(--muted); font-size: 0.9rem; }
.trk-dl dd { margin: 0; font-weight: 600; color: var(--g-900); overflow-wrap: anywhere; }
.trk-dl code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.04em; }
.trk-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: color-mix(in srgb, var(--g-700) 10%, #fff); color: var(--g-900); }
.trk-copy { margin-left: 8px; padding: 3px 10px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: #fff; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--g-700); cursor: pointer; }
.trk-items { list-style: none; margin: 0; padding: 0; }
.trk-items li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #eee); }
.trk-items li:last-child { border-bottom: 0; }
.trk-items li > span:nth-child(2) { flex: 1; min-width: 0; }
.trk-items img, .trk-noimg { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: #f1f1ee; flex: none; }
.trk-foot { text-align: center; color: var(--muted); }
.trk-foot a { color: var(--g-700); font-weight: 600; }
@media (max-width: 760px) {
  .trk-grid { grid-template-columns: 1fr; }
  .trk-card, .kb-card { padding: 18px 16px; }
  .trk-steps { grid-template-columns: 1fr; gap: 0; }
  .trk-steps li { flex-direction: row; text-align: left; align-items: center; padding: 0 0 22px; gap: 12px; }
  .trk-steps li:last-child { padding-bottom: 0; }
  .trk-steps li::before { top: auto; bottom: 100%; right: auto; left: 13px; width: 3px; height: 22px; margin-bottom: -22px; transform: translateY(22px); }
  .trk-steps li:first-child::before { display: none; }
  .trk-steps li::before { top: -22px; bottom: auto; transform: none; margin: 0; }
  .trk-dl > div { flex-direction: column; gap: 2px; }
  .trk-dl dt { width: auto; }
}

.kb-hero { text-align: center; margin-bottom: 22px; }
.kb-hero .lead { margin: 6px auto 18px; }
.kb-search { display: flex; gap: 8px; max-width: 620px; margin: 0 auto; }
.kb-search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--line, var(--border)); border-radius: 12px; font: inherit; font-size: 16px; background: #fff; }
.kb-search input:focus { outline: none; border-color: var(--g-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-700) 14%, transparent); }
.kb-result { color: var(--muted); }
.kb-result a { color: var(--g-700); font-weight: 600; }
.kb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kb-grid .kb-card { margin: 0; }
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li { border-bottom: 1px solid var(--line, #eee); }
.kb-list li:last-child { border-bottom: 0; }
.kb-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 22px 10px 0; position: relative; color: var(--g-900); font-weight: 600; }
.kb-list a::after { content: ''; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
.kb-list a:hover span { color: var(--g-700); text-decoration: underline; }
.kb-list small { font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.kb-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.kb-quick-item { display: flex; flex-direction: column; gap: 3px; margin: 0; color: var(--g-900); }
.kb-quick-item:hover { border-color: var(--g-700); }
.kb-quick-item small { color: var(--muted); }
.kb-empty { text-align: center; }
.kb-article-page { max-width: 780px; }
.kb-article h1 { font-size: 1.7rem; margin: 0 0 8px; }
.kb-article h2 { margin: 20px 0 8px; font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; }
.kb-summary { color: var(--muted); font-size: 1.02rem; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #eee); }
.kb-article p, .kb-article li { line-height: 1.7; color: var(--ink); }
.kb-article ol, .kb-article ul { padding-left: 22px; margin: 0 0 14px; }
.kb-article li { margin-bottom: 6px; }
.kb-action { margin: 22px 0 0; }
.kb-still { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kb-still > div { display: flex; flex-direction: column; }
.kb-still small { color: var(--muted); }
@media (max-width: 760px) {
  .kb-grid, .kb-quick { grid-template-columns: 1fr; }
  .kb-search { flex-direction: column; }
}
.kb-article-page .breadcrumb { margin: 0 0 14px; }
.trk-card .btn { white-space: normal; text-align: center; }

/* ---- WhatsApp: floating chat button, product page button, channel link ---- */
.wa-fab { position: fixed; bottom: 12px; z-index: 89; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 13px; border-radius: 999px; background: #25d366; color: #fff !important; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transition: transform 0.15s, box-shadow 0.15s; }
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26); }
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab.wa-left { left: 12px; }
.wa-fab.wa-right { right: 12px; }
.wa-fab.wa-right.wa-with-chat { bottom: 70px; }
.wa-fab::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); animation: wa-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } }
@media (max-width: 700px) { .wa-fab { width: 48px; padding: 0; justify-content: center; } .wa-fab span { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; } }
body:has(.co-page) .wa-fab, body:has(#nav-toggle:checked) .wa-fab { display: none; }
.wa-ask { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0 0; padding: 12px 16px; border: 1px solid #25d366; border-radius: 10px; background: color-mix(in srgb, #25d366 8%, #fff); color: #128c4a !important; font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.wa-ask:hover { background: #25d366; color: #fff !important; }
.wa-ask svg { width: 20px; height: 20px; flex: none; }
.wa-channel { margin: 14px 0 0; }
.wa-channel a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wa-channel svg { width: 18px; height: 18px; color: #25d366; }

/* ---- Home page: Frequently asked questions (theme colours and fonts, animated) ---- */
.home-faq .faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.home-faq .faq-item { background: #fff; border: 1px solid var(--line, var(--border)); border-radius: 14px; overflow: hidden; opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s, box-shadow 0.2s; transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }
.home-faq .faq-item.in { opacity: 1; transform: none; }
.home-faq .faq-item[open] { border-color: var(--g-700); box-shadow: 0 6px 20px color-mix(in srgb, var(--g-700) 12%, transparent); }
.home-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.05rem; color: var(--g-900); }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq .faq-plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--g-700) 10%, #fff); transition: transform 0.3s ease, background 0.2s; }
.home-faq .faq-plus::before, .home-faq .faq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--g-700); transition: transform 0.3s ease, background 0.2s; }
.home-faq .faq-plus::after { transform: rotate(90deg); }
.home-faq .faq-item.opened .faq-plus { background: var(--g-700); transform: rotate(180deg); }
.home-faq .faq-item.opened .faq-plus::before, .home-faq .faq-item.opened .faq-plus::after { background: #fff; }
.home-faq .faq-item.opened .faq-plus::after { transform: rotate(0deg); }
.home-faq .faq-body { overflow: hidden; transition: height 0.3s ease; }
.home-faq .faq-inner { padding: 0 18px 18px; font-family: var(--font-body); color: var(--ink); line-height: 1.65; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; }
.home-faq .faq-item.opened .faq-inner { opacity: 1; transform: none; }
.home-faq .faq-inner p { margin: 0 0 10px; }
.home-faq .faq-inner ol, .home-faq .faq-inner ul { margin: 0 0 10px; padding-left: 22px; }
.home-faq .faq-inner li { margin-bottom: 4px; }
.home-faq .faq-more { font-weight: 700; color: var(--g-700); }
@media (prefers-reduced-motion: reduce) {
  .home-faq .faq-item, .home-faq .faq-inner, .home-faq .faq-body, .home-faq .faq-plus { transition: none; }
  .home-faq .faq-item { opacity: 1; transform: none; }
}

/* WhatsApp in the side icon bar */
.wa-fab[hidden] { display: none !important; }
.qbar .qb-wa { display: flex !important; color: #25d366 !important; }
.qbar .qb-wa svg { width: 22px; height: 22px; }
.qbar .qb-wa:hover { background: #25d366 !important; color: #fff !important; }
.qbar .qb-wa { order: 9; }

/* ---- Home page FAQ, second pass: a tinted band in the theme colour, numbered questions, livelier motion ---- */
.home-faq { position: relative; padding-top: 56px; padding-bottom: 56px; background: linear-gradient(180deg, color-mix(in srgb, var(--g-700) 7%, var(--page-bg, #f5f5f5)), var(--page-bg, #f5f5f5)); overflow: hidden; }
.home-faq::before, .home-faq::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: color-mix(in srgb, var(--g-700) 9%, transparent); filter: blur(50px); pointer-events: none; animation: faq-float 14s ease-in-out infinite alternate; }
.home-faq::before { top: -120px; left: -90px; }
.home-faq::after { bottom: -140px; right: -90px; animation-delay: -7s; }
@keyframes faq-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.15); } }
.home-faq > .container { position: relative; z-index: 1; }
.home-faq .faq-head { text-align: center; max-width: 620px; margin: 0 auto 26px; opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.home-faq .faq-head.in { opacity: 1; transform: none; }
.home-faq .faq-eyebrow { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-700); margin-bottom: 8px; }
.home-faq .faq-head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 400; letter-spacing: -0.01em; color: var(--g-900); margin: 0; }
.home-faq .faq-rule { display: block; width: 0; height: 3px; margin: 12px auto 12px; border-radius: 3px; background: var(--g-700); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.home-faq .faq-head.in .faq-rule { width: 64px; }
.home-faq .faq-head p { margin: 0; color: var(--muted); font-family: var(--font-body); }
.home-faq .faq-item { border-radius: 12px; border-color: color-mix(in srgb, var(--g-700) 14%, transparent); transform: translateX(-28px); }
.home-faq .faq-item:nth-child(even) { transform: translateX(28px); }
.home-faq .faq-item.in { transform: none; }
.home-faq .faq-item:not([open]):hover { border-color: var(--g-700); transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--g-700) 12%, transparent); transition-delay: 0s; }
.home-faq .faq-item[open] { border-color: var(--g-700); box-shadow: inset 4px 0 0 var(--g-700), 0 10px 26px color-mix(in srgb, var(--g-700) 14%, transparent); }
.home-faq summary { justify-content: flex-start; font-size: 1.08rem; }
.home-faq summary > span { flex: 1; min-width: 0; }
.home-faq .faq-num { flex: none; font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; color: color-mix(in srgb, var(--g-700) 55%, transparent); transition: color 0.2s; }
.home-faq .faq-item[open] .faq-num, .home-faq .faq-item:hover .faq-num { color: var(--g-700); }
.home-faq .faq-item:hover .faq-plus { transform: rotate(90deg); }
.home-faq .faq-item.opened .faq-plus, .home-faq .faq-item.opened:hover .faq-plus { transform: rotate(180deg); }
.home-faq .faq-inner { padding-left: 52px; }
.home-faq .faq-inner li { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.home-faq .faq-item.opened .faq-inner li { opacity: 1; transform: none; }
.home-faq .faq-item.opened .faq-inner li:nth-child(1) { transition-delay: 0.10s; }
.home-faq .faq-item.opened .faq-inner li:nth-child(2) { transition-delay: 0.16s; }
.home-faq .faq-item.opened .faq-inner li:nth-child(3) { transition-delay: 0.22s; }
.home-faq .faq-item.opened .faq-inner li:nth-child(4) { transition-delay: 0.28s; }
.home-faq .faq-item.opened .faq-inner li:nth-child(n+5) { transition-delay: 0.34s; }
.home-faq .faq-more { display: inline-block; transition: transform 0.2s; }
.home-faq .faq-more:hover { transform: translateX(4px); }
.home-faq .faq-foot { text-align: center; margin: 26px 0 0; opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s; }
.home-faq .faq-foot.in { opacity: 1; transform: none; }
@media (max-width: 700px) { .home-faq .faq-inner { padding-left: 18px; } .home-faq { padding-top: 40px; padding-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .home-faq::before, .home-faq::after { animation: none; }
  .home-faq .faq-head, .home-faq .faq-foot, .home-faq .faq-item, .home-faq .faq-inner li { opacity: 1; transform: none; transition: none; }
  .home-faq .faq-head .faq-rule { width: 64px; transition: none; }
}

/* ---- Help centre and Track your order: a heading band in the theme colour, theme fonts, gentle motion ---- */
.pg-hero { position: relative; overflow: hidden; padding: 44px 0 34px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--g-700) 9%, var(--page-bg, #f5f5f5)), var(--page-bg, #f5f5f5)); }
.pg-hero::before, .pg-hero::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: color-mix(in srgb, var(--g-700) 10%, transparent); filter: blur(46px); pointer-events: none; animation: faq-float 14s ease-in-out infinite alternate; }
.pg-hero::before { top: -130px; left: -80px; }
.pg-hero::after { bottom: -150px; right: -80px; animation-delay: -7s; }
.pg-hero > .container { position: relative; z-index: 1; animation: pg-rise 0.6s ease both; }
.pg-eyebrow { display: inline-block; margin-bottom: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-700); }
.pg-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 400; letter-spacing: -0.01em; color: var(--g-900); }
.pg-rule { display: block; width: 64px; height: 3px; margin: 12px auto; border-radius: 3px; background: var(--g-700); transform-origin: center; animation: pg-rule 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; }
.pg-hero .lead { margin: 0 auto 18px; max-width: 600px; font-family: var(--font-body); color: var(--muted); }
.pg-hero .lead:last-child { margin-bottom: 0; }
.pg-body { padding-top: 10px !important; }
@keyframes pg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pg-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kb-search input { color: var(--ink); font-family: var(--font-body); }
.kb-card h2, .trk-card h2 { font-family: var(--font-display); color: var(--g-900); }
.kb-card h2 { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, var(--g-700) 16%, transparent); }
.kb-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--g-700); color: #fff; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; }
.kb-card, .trk-card { border-color: color-mix(in srgb, var(--g-700) 14%, transparent); font-family: var(--font-body); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.kb-grid .kb-card:hover, .kb-quick-item:hover { border-color: var(--g-700); box-shadow: 0 8px 22px color-mix(in srgb, var(--g-700) 12%, transparent); }
.kb-quick-item:hover { transform: translateY(-2px); }
.kb-quick-item strong { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--g-900); }
.kb-list a { transition: padding-left 0.18s; font-family: var(--font-body); }
.kb-list a:hover { padding-left: 6px; }
.kb-list a:hover::after { border-color: var(--g-700); }
.pg-body .pg-in, .pg-body .trk-card, .pg-body .kb-quick-item { animation: pg-rise 0.5s ease both; }
.pg-body .kb-grid > :nth-child(2), .pg-body .trk-side > :nth-child(1) { animation-delay: 0.07s; }
.pg-body .kb-grid > :nth-child(3), .pg-body .trk-side > :nth-child(2) { animation-delay: 0.14s; }
.pg-body .kb-grid > :nth-child(4), .pg-body .trk-side > :nth-child(3) { animation-delay: 0.21s; }
.pg-body .kb-grid > :nth-child(n+5) { animation-delay: 0.28s; }
.trk-side .trk-card { border-left: 4px solid var(--g-700); }
.trk-steps li.current .trk-dot { animation: trk-pulse 1.8s ease-out infinite; }
@keyframes trk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-700) 40%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.kb-article h1 { font-family: var(--font-display); font-weight: 400; color: var(--g-900); }
.kb-article ol li::marker { color: var(--g-700); font-weight: 700; }
.kb-article ul li::marker { color: var(--g-700); }
.kb-article-page .breadcrumb a, .trk-foot a { color: var(--g-700); }
@media (prefers-reduced-motion: reduce) {
  .pg-hero::before, .pg-hero::after, .pg-hero > .container, .pg-rule, .pg-body .pg-in, .pg-body .trk-card, .pg-body .kb-quick-item, .trk-steps li.current .trk-dot { animation: none; }
}

/* ---- Divider lines between the parts of the home page and of the product page (theme colour) ---- */
main > .container + .container > .section:not([hidden]),
main > .container.section > #reviews,
main > .container.section > .section.reco-box:not([hidden]) { position: relative; border-top: 1px solid color-mix(in srgb, var(--g-700) 18%, transparent); margin-top: 34px; padding-top: 38px; }
main > .container + .container > .section:not([hidden])::before,
main > .container.section > #reviews::before,
main > .container.section > .section.reco-box:not([hidden])::before { content: ''; position: absolute; top: -2px; left: 50%; width: 56px; height: 3px; margin-left: -28px; border-radius: 3px; background: var(--g-700); }
main > .section.home-faq { border-top: 1px solid color-mix(in srgb, var(--g-700) 18%, transparent); margin-top: 34px; }
main > .container.section > .product-tabs { margin-top: 34px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--g-700) 18%, transparent); }

/* ---- Blog: the theme colours and fonts of the shop ---- */
.blog-page .type-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 6px; }
.blog-page .type-chips a { padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--g-700) 22%, transparent); border-radius: 999px; background: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-900); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.blog-page .type-chips a:hover { border-color: var(--g-700); }
.blog-page .type-chips a.active { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.article-card { border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; font-family: var(--font-body); animation: pg-rise 0.5s ease both; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.article-grid > .article-card:nth-child(2) { animation-delay: 0.07s; }
.article-grid > .article-card:nth-child(3) { animation-delay: 0.14s; }
.article-grid > .article-card:nth-child(n+4) { animation-delay: 0.21s; }
.article-card:hover { border-color: var(--g-700); box-shadow: 0 12px 28px color-mix(in srgb, var(--g-700) 16%, transparent); }
.article-card img, .article-card .article-ph { transition: transform 0.5s ease; }
.article-card:hover img { transform: scale(1.04); }
.article-ph-0 { background: linear-gradient(135deg, var(--g-900), var(--g-700)); }
.article-ph-1 { background: linear-gradient(135deg, var(--g-700), color-mix(in srgb, var(--g-700) 55%, #fff)); }
.article-ph-2 { background: linear-gradient(135deg, color-mix(in srgb, var(--g-700) 70%, #000), var(--g-700)); }
.article-info strong { font-family: var(--font-display); font-weight: 500; color: var(--g-900); }
.article-meta { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-700); }
.article-meta a { color: var(--g-700); }
.article-info p { font-family: var(--font-body); color: var(--muted); line-height: 1.6; }
.article-card .read-more { margin-top: 4px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-900); transition: transform 0.2s, color 0.2s; }
.article-card:hover .read-more { color: var(--g-700); transform: translateX(4px); }
.blog-page .pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; font-family: var(--font-body); color: var(--muted); }
.blog-page .pagination a { padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--g-700) 22%, transparent); border-radius: 999px; background: #fff; font-weight: 700; color: var(--g-900); }
.blog-page .pagination a:hover { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.blog-empty { max-width: 520px; margin: 10px auto 0; padding: 34px 26px; text-align: center; background: #fff; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 4px 14px rgba(11, 46, 28, 0.05); animation: pg-rise 0.5s ease both; }
.blog-empty-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: color-mix(in srgb, var(--g-700) 10%, #fff); color: var(--g-700); }
.blog-empty strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--g-900); }
.blog-empty p { margin: 8px 0 18px; font-family: var(--font-body); color: var(--muted); line-height: 1.6; }
.blog-article { animation: pg-rise 0.5s ease both; }
.blog-article h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--g-900); margin: 8px 0 10px; }
.blog-article h1::after { content: ''; display: block; width: 64px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--g-700); }
.blog-article .lead { font-family: var(--font-body); font-size: 1.08rem; color: var(--muted); max-width: none; }
.blog-article .article-cover { border-radius: 16px; }
.blog-article .article-body { font-family: var(--font-body); color: var(--ink); font-size: 1.03rem; }
.blog-article .article-body h2, .blog-article .article-body h3 { font-family: var(--font-display); font-weight: 500; color: var(--g-900); }
.blog-article .article-body a { color: var(--g-700); text-decoration: underline; text-underline-offset: 3px; }
.blog-article .article-body blockquote { margin: 20px 0; padding: 12px 18px; border-left: 4px solid var(--g-700); background: color-mix(in srgb, var(--g-700) 6%, #fff); border-radius: 0 10px 10px 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--g-900); }
.blog-article .article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-article .article-body li::marker { color: var(--g-700); }
.blog-article .article-tags .badge { margin-right: 6px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--g-700) 10%, #fff); color: var(--g-900); font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.blog-more { position: relative; margin-top: 44px; padding-top: 30px; border-top: 1px solid color-mix(in srgb, var(--g-700) 18%, transparent); font-family: var(--font-display); font-weight: 400; color: var(--g-900); }
@media (prefers-reduced-motion: reduce) { .article-card, .blog-empty, .blog-article { animation: none; } }

/* ---- Home page partners: theme colours and fonts, logos in full colour, animated ---- */
.partners { position: relative; overflow: hidden; padding: 52px 0 56px; margin-top: 34px; text-align: center; border-top: 1px solid color-mix(in srgb, var(--g-700) 18%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--g-700) 6%, var(--page-bg, #f5f5f5)), var(--page-bg, #f5f5f5)); }
.partners-head { margin-bottom: 26px; opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.partners.in .partners-head { opacity: 1; transform: none; }
.partners h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: var(--g-900); }
.partners-rule { display: block; width: 0; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--g-700); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.partners.in .partners-rule { width: 64px; }
.partner-logos { gap: 18px 22px; }
.partner-logos li { opacity: 0; transform: translateY(22px) scale(0.94); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.partners.in .partner-logos li { opacity: 1; transform: none; }
.partner-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 170px; padding: 20px 24px 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 4px 14px rgba(11, 46, 28, 0.05); color: var(--g-900); text-decoration: none; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; animation: partner-bob 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
.partner-card:hover { transform: translateY(-5px); border-color: var(--g-700); box-shadow: 0 12px 28px color-mix(in srgb, var(--g-700) 16%, transparent); animation-play-state: paused; }
.partner-logos .partner-card img { height: 54px; width: auto; max-width: 170px; object-fit: contain; filter: none; opacity: 1; transition: transform 0.25s; }
.partner-card:hover img { transform: scale(1.06); }
.partner-card > span { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@keyframes partner-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* Five or more logos: one row that keeps moving, paused while the pointer is on it */
.partners-move .partner-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners-move .partner-logos { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; padding: 8px 0 10px; animation: partner-move 28s linear infinite; }
.partners-move .partner-logos li { padding-right: 22px; }
.partners-move .partner-logos:hover { animation-play-state: paused; }
.partners-move .partner-card { animation: none; }
@keyframes partner-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) { .partner-card { min-width: 140px; padding: 16px 18px 14px; } .partner-logos .partner-card img { height: 44px; max-width: 130px; } }
@media (prefers-reduced-motion: reduce) {
  .partner-card, .partners-move .partner-logos { animation: none; }
  .partners-head, .partner-logos li { opacity: 1; transform: none; transition: none; }
  .partners-rule { width: 64px; transition: none; }
  .partners-move .partner-logos { flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---- "What our customers say": a cleaner, more professional look in the theme colours and fonts ---- */
.store-reviews { padding: 56px 0 50px; background: linear-gradient(180deg, color-mix(in srgb, var(--g-700) 6%, var(--page-bg, #f5f5f5)), var(--page-bg, #f5f5f5)); border-top: 1px solid color-mix(in srgb, var(--g-700) 18%, transparent); }
.sr-head { margin-bottom: 30px; }
.sr-head h2 { margin: 0; font-weight: 400; letter-spacing: -0.01em; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.sr-rule { display: block; width: 64px; height: 3px; margin: 12px auto 18px; border-radius: 3px; background: var(--g-700); }
.sr-score { display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 10px 20px 10px 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 999px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 4px 14px rgba(11, 46, 28, 0.05); }
.sr-score .sr-num { font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1; color: var(--g-900); }
.sr-score-side { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sr-score-side small { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.sr-card { width: min(360px, 84vw); gap: 12px; padding: 24px 24px 20px; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 6px 18px rgba(11, 46, 28, 0.06); font-family: var(--font-body); }
.sr-card:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--g-700) 18%, transparent); }
.sr-top { display: flex; align-items: center; justify-content: space-between; }
.sr-quote { color: color-mix(in srgb, var(--g-700) 22%, transparent); }
.sr-card .sr-stars { font-size: 17px; gap: 2px; }
.sr-title { font-weight: 500; font-size: 1.12rem; }
.sr-body { font-size: 1rem; line-height: 1.65; color: var(--ink); }
.sr-foot { gap: 12px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--g-700) 12%, transparent); }
.sr-avatar { width: 42px; height: 42px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-700) 14%, transparent); }
.sr-who { gap: 2px; }
.sr-who b { font-size: 0.95rem; font-weight: 700; }
.sr-who em { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #1a7f4b; }
.sr-who small { font-size: 12px; }
.sr-photo { width: 48px; height: 48px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--g-700) 12%, transparent); }
.sr-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 26px 20px 0; font-family: var(--font-body); font-size: 12px; color: var(--muted); text-align: center; }
.sr-note svg { flex: none; color: var(--g-700); }
/* One to three reviews: cards stand in the middle (no moving row, no repeated cards) */
.store-reviews.sr-few .sr-viewport { max-width: var(--page-w) !important; padding: 4px 20px 8px !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
.store-reviews.sr-few .sr-track { width: auto !important; flex-wrap: wrap; justify-content: center; gap: 18px !important; animation: none !important; transform: none !important; }
.store-reviews.sr-few .sr-card { margin-right: 0 !important; width: min(460px, 100%); animation: pg-rise 0.6s ease both; }
.store-reviews.sr-few .sr-card:nth-child(2) { animation-delay: 0.1s; }
.store-reviews.sr-few .sr-card:nth-child(3) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) { .store-reviews.sr-few .sr-card { animation: none; } }
/* The Nature look made these cards flat grey squares; the review section keeps its own cleaner card. */
.store-reviews .sr-card { background: #fff !important; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent) !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 6px 18px rgba(11, 46, 28, 0.06) !important; padding: 24px 24px 20px !important; }
.store-reviews .sr-card:hover { background: #fff !important; transform: translateY(-4px) !important; border-color: var(--g-700) !important; box-shadow: 0 14px 32px color-mix(in srgb, var(--g-700) 18%, transparent) !important; }
.store-reviews .sr-avatar { border-radius: 50% !important; }
.store-reviews .sr-score { text-transform: none; letter-spacing: 0; }
.store-reviews .sr-score .sr-num { font-size: 2rem !important; }
.store-reviews .sr-score-side small { text-transform: none; letter-spacing: 0; font-size: 12px !important; }
.store-reviews .sr-who em { text-transform: none; letter-spacing: 0.02em; font-size: 11px !important; }
.store-reviews .sr-photo { border-radius: 10px !important; }

/* ---- Product page: customer reviews, friendlier and cleaner (theme colours and fonts) ---- */
#reviews .rvw-head { margin-bottom: 18px; }
#reviews .rvw-head h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--g-900); }
#reviews .rvw-head p { margin: 0; font-family: var(--font-body); color: var(--muted); }
#reviews .review-summary { grid-template-columns: 170px minmax(0, 1fr) 240px; gap: 28px; padding: 24px 26px; margin-bottom: 22px; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 6px 18px rgba(11, 46, 28, 0.06); font-family: var(--font-body); }
#reviews .review-score { text-align: center; }
#reviews .score-number { font-size: 3.2rem; font-weight: 500; color: var(--g-900); margin-bottom: 6px; }
#reviews .rate-row { grid-template-columns: 34px 1fr 40px; }
#reviews .rate-bar { height: 9px; background: color-mix(in srgb, var(--g-700) 10%, #fff); }
#reviews .rate-bar-fill { background: #f5a623; transform-origin: left; animation: rvw-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rvw-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#reviews .review-cta { display: flex; flex-direction: column; gap: 6px; padding-left: 26px; border-left: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); }
#reviews .review-cta strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--g-900); }
#reviews .review-cta span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
#reviews .review-cta .btn { margin-top: 8px; text-align: center; }
#reviews .review-list { gap: 14px; }
#reviews .review { background: #fff; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.04); font-family: var(--font-body); scroll-margin-top: 110px; transition: border-color 0.2s, box-shadow 0.2s; }
#reviews .review:target { border-color: var(--g-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-700) 16%, transparent); }
#reviews .review-who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#reviews .review-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--g-700); color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
#reviews .review-who-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
#reviews .review-who-text strong { color: var(--g-900); }
#reviews .review-who-text small { color: var(--muted); font-size: 12px; }
#reviews .review-verified { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e7f6ee; color: #1a7f4b; font-size: 11px; font-weight: 700; white-space: nowrap; }
#reviews .review-head { margin-bottom: 6px; }
#reviews .review-head strong { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--g-900); }
#reviews .review-text { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }
#reviews .review-photos { margin: 12px 0 0; }
#reviews .review-photo { border-radius: 10px; }
#reviews .review-reply { margin: 14px 0 0; border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--g-700) 6%, #fff); }
#reviews .review-empty { text-align: center; padding: 34px 24px; margin-bottom: 22px; background: #fff; border: 1px dashed color-mix(in srgb, var(--g-700) 30%, transparent); border-radius: 16px; font-family: var(--font-body); }
#reviews .review-empty-stars { display: block; font-size: 26px; letter-spacing: 4px; color: #e3e3dd; margin-bottom: 8px; }
#reviews .review-empty strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--g-900); }
#reviews .review-empty p { margin: 6px 0 16px; color: var(--muted); }
#reviews .review-form { max-width: none; padding: 24px 26px 26px; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 6px 18px rgba(11, 46, 28, 0.06); font-family: var(--font-body); scroll-margin-top: 110px; }
#reviews .review-form.rv-fold:not(.rv-open) { display: none; }
#reviews .review-form.rv-open { animation: pg-rise 0.4s ease both; }
#reviews .review-form h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--g-900); }
#reviews .review-form-lead { margin: 0 0 14px; color: var(--muted); }
#reviews .star-input label { font-size: 2.3rem !important; transition: color 0.12s, transform 0.12s; }
#reviews .star-input label:hover { transform: scale(1.15); }
#reviews .star-word { display: inline-block; margin-left: 12px; vertical-align: 10px; font-size: 0.9rem; color: var(--muted); }
#reviews .star-word.on { color: var(--g-900); font-weight: 700; }
#reviews .review-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#reviews .review-form-note { margin: 12px 0 0; }
@media (max-width: 860px) {
  #reviews .review-summary { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  #reviews .review-cta { padding: 18px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); text-align: center; }
  #reviews .review-who { flex-wrap: wrap; }
  #reviews .review-form { padding: 20px 18px; }
  #reviews .star-word { display: block; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { #reviews .rate-bar-fill, #reviews .review-form.rv-open { animation: none; } }

/* ---- Contact page: friendly tiles, a clear form and quick answers (theme colours and fonts) ---- */
.ct-page { max-width: 1040px; }
.ct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ct-tile { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 4px 14px rgba(11, 46, 28, 0.05); color: var(--g-900); text-decoration: none; font-family: var(--font-body); animation: pg-rise 0.5s ease both; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.ct-tiles > :nth-child(2) { animation-delay: 0.06s; } .ct-tiles > :nth-child(3) { animation-delay: 0.12s; } .ct-tiles > :nth-child(4) { animation-delay: 0.18s; } .ct-tiles > :nth-child(5) { animation-delay: 0.24s; }
a.ct-tile:hover { transform: translateY(-3px); border-color: var(--g-700); box-shadow: 0 10px 24px color-mix(in srgb, var(--g-700) 14%, transparent); }
.ct-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--g-700) 10%, #fff); color: var(--g-700); }
.ct-ico svg { width: 22px; height: 22px; }
.ct-wa .ct-ico { background: #e7f9ee; color: #25d366; }
.ct-tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ct-tile-text strong { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; }
.ct-tile-text small { color: var(--muted); font-size: 0.86rem; overflow-wrap: anywhere; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.ct-form, .ct-side { background: #fff; border: 1px solid color-mix(in srgb, var(--g-700) 14%, transparent); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 46, 28, 0.05), 0 6px 18px rgba(11, 46, 28, 0.06); font-family: var(--font-body); animation: pg-rise 0.5s ease 0.15s both; }
.ct-form { padding: 26px 28px 28px; }
.ct-side { padding: 22px 20px; }
.ct-form h2, .ct-side h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; color: var(--g-900); }
.ct-form h2 { font-size: 1.5rem; }
.ct-side h2 { font-size: 1.15rem; margin-bottom: 10px; }
.ct-form-lead { margin: 0 0 8px; color: var(--muted); line-height: 1.6; }
.ct-form form.stacked input:not([type=checkbox]), .ct-form form.stacked select, .ct-form form.stacked textarea { border: 1px solid var(--line, var(--border)); border-radius: 12px; padding: 11px 14px; font-family: var(--font-body); font-size: 16px; background: #fff; }
.ct-form form.stacked input:focus, .ct-form form.stacked select:focus, .ct-form form.stacked textarea:focus { outline: none; border-color: var(--g-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-700) 14%, transparent); }
.ct-opt { font-weight: 400; color: var(--muted); }
.ct-hint { margin: 6px 0 0 !important; font-size: 12.5px; }
.ct-count { margin: 4px 0 0 !important; text-align: right; font-size: 12px; }
.ct-send { margin-top: 16px; }
.ct-after { margin: 12px 0 0 !important; text-align: center; }
.ct-link { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--g-700) 12%, transparent); color: var(--g-900); text-decoration: none; transition: padding-left 0.18s; }
.ct-link:hover { padding-left: 5px; }
.ct-link:hover strong { color: var(--g-700); }
.ct-link .ct-ico { width: 38px; height: 38px; border-radius: 10px; }
.ct-link > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.ct-link small { color: var(--muted); font-size: 0.84rem; }
@media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; } .ct-form { padding: 22px 18px 22px; } .ct-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .ct-tile { padding: 14px 12px; } }
@media (max-width: 480px) { .ct-tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ct-tile, .ct-form, .ct-side { animation: none; } }

/* Search icon with the account and cart icons (computers) */
header.site-header .bar .actions .search-toggle { order: 0 !important; margin: 0 !important; grid-column: auto !important; justify-self: auto !important; }

/* Footer payment icons: an uploaded official logo sits on a white card of the same size as the drawings */
.pay-icons { align-items: center; }
.pay-icons .pay-own { display: grid; place-items: center; width: 46px; height: 29px; padding: 3px 4px; background: #fff; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.pay-icons .pay-own img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* Footer: one picture with all the payment methods (for example the PayHere banner), above or without the icons */
.pay-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pay-banner { display: block; height: auto; max-height: 84px; max-width: min(100%, 360px); border-radius: 8px; }
@media (max-width: 700px) { .pay-wrap { align-items: flex-start; } }