/* ==========================================================================
   LAPKA PET MARKET — MASTER STYLESHEET (100% FIGMA FIDELITY & LIVING STORE)
   ========================================================================== */

:root {
  --c-dark-green: #0c2117;
  --c-dark-green-hover: #163627;
  --c-coral: #b84224;
  --c-coral-hover: #9c3319;
  --c-sky: #162d47;
  --c-sky-hover: #0e1e30;
  --c-cream-bg: #f8f6f0;
  --c-cream-card: #f0ede4;
  --c-text-main: #141715;
  --c-text-muted: #575e59;
  --c-text-light: #88908a;
  --c-border: #ded8cb;
  --c-border-subtle: #eae5da;
  
  --font-main: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Manrope', 'Onest', sans-serif;
  --font-display: 'Manrope', 'Onest', sans-serif;
  
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
   /* NO AI SLOP PILLS — Crisp architectural 6px radius */
  
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
  --shadow-float: 0 12px 32px rgba(12, 33, 23, 0.12);
  --shadow-btn: 0 1px 3px rgba(12, 33, 23, 0.12);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--c-cream-bg);
  color: var(--c-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

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

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==================== TOP ANNOUNCEMENT BAR ==================== */
.top-announcement-bar {
  background: #0d1e15;
  color: #ffffff;
  font-size: 0.82rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.top-store-picker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #2ecc71;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.store-lbl {
  color: rgba(255, 255, 255, 0.75);
}

.store-select-field {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.store-select-field option {
  background: #112d22;
  color: #ffffff;
}

.badge-express {
  background: rgba(226, 91, 56, 0.25);
  color: #ff8a65;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
}

.top-bar-right-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}

.phone-link {
  color: #ffffff;
}

/* ==================== 1. MASTER HEADER ==================== */
.ref-header {
  background: #ffffff;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.ref-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 1.5rem;
}

.ref-logo-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.ref-logo-paw {
  font-size: 1.6rem;
  color: #5b4570;
}

.ref-logo-text {
  display: flex;
  flex-direction: column;
}

.ref-logo-title {
  font-family: var(--font-main);
  font-size: 1.35rem;
  font-weight: 800;
  color: #111111;
  line-height: 1.1;
}

.ref-logo-subtitle {
  font-size: 0.68rem;
  color: var(--c-text-muted);
}

.ref-nav-tabs {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.ref-nav-tab {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-text-main);
  padding: 0.4rem 0.2rem;
  position: relative;
  transition: color 0.2s;
  text-decoration: none;
}

.ref-nav-tab:hover,
.ref-nav-tab.active {
  color: var(--c-coral);
}

.ref-nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-coral);
  border-radius: 3px 3px 0 0;
}

.nav-calc-highlight {
  color: #1b5e20 !important;
  background: #edf7ed;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
}

.nav-calc-highlight:hover {
  background: #c8e6c9;
}

.ref-header-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.header-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-input {
  background: #f4f3ef;
  border: 1px solid var(--c-border);
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: inherit;
  width: 180px;
  transition: width 0.3s, border-color 0.2s;
}

.header-search-input:focus {
  width: 240px;
  background: #ffffff;
  border-color: var(--c-coral);
  outline: none;
}

.header-search-icon {
  position: absolute;
  right: 0.7rem;
  font-size: 0.85rem;
  pointer-events: none;
  color: #888;
}

.ref-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f8f6f1;
  position: relative;
  transition: background 0.2s;
}

.ref-icon-btn:hover {
  background: #eee;
}

.ref-fav-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e25b38;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-cart-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8f6f1;
  border: 1px solid var(--c-border);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-text-main);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ref-cart-btn:hover {
  background: #ffffff;
  border-color: var(--c-coral);
}

.ref-cart-count {
  background: var(--c-coral);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-cart-sum {
  font-weight: 800;
  color: #111111;
}

.ref-happy-pill {
  background: var(--c-dark-green);
  color: #ffffff !important;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  white-space: nowrap;
}

.ref-happy-pill:hover {
  background: #1a4233;
}

.ref-burger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}

.ref-burger-btn span {
  width: 22px;
  height: 2px;
  background: #111111;
  border-radius: 2px;
}

/* ==================== MOBILE DRAWER ==================== */
.ref-mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  
  z-index: 200;
  display: none;
}

.ref-mobile-nav.active {
  display: block;
}

.ref-mobile-nav-inner {
  width: 82%;
  max-width: 320px;
  height: 100%;
  background: #ffffff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.ref-mobile-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.ref-close-btn {
  font-size: 2rem;
  line-height: 1;
}

.ref-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.m-link {
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text-main);
  padding: 0.5rem 0;
}

.m-link:hover, .m-link.active {
  color: var(--c-coral);
}

.m-highlight {
  color: #1b5e20 !important;
}

.ref-mobile-footer {
  border-top: 1px solid var(--c-border);
  padding-top: 1rem;
  font-size: 0.85rem;
}

.ref-btn-tg {
  display: block;
  text-align: center;
  background: var(--c-sky);
  color: #ffffff !important;
  font-weight: 700;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  margin-top: 0.8rem;
}

/* ==================== BUTTON SYSTEM ==================== */
.ref-btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--c-coral);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.ref-btn-coral:hover {
  background: var(--c-coral-hover);
  transform: translateY(-1px);
}

.ref-btn-sky {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--c-sky);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(22, 45, 71, 0.12);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.ref-btn-sky:hover {
  background: var(--c-sky-hover);
  transform: translateY(-1px);
}

.ref-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #111111 !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--c-border);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.ref-btn-white:hover {
  background: #fafafa;
  transform: translateY(-1px);
}

.ref-btn-dark-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--c-dark-green);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.ref-btn-dark-green:hover {
  background: #1a4233;
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 0.95rem 1.8rem;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
}

/* ==================== SCREEN 1: HERO (REFERENCE 0) ==================== */
.hero-canvas-wrap {
  position: relative;
  min-height: 680px;
  background-image: url('assets/hero-golden-editorial.webp');
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: center;
  padding: 4.5rem 0;
}

.hero-canvas-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f8f6f1 0%, rgba(248, 246, 241, 0.95) 36%, rgba(248, 246, 241, 0.6) 60%, rgba(248, 246, 241, 0.1) 100%);
}

.hero-layout-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.hero-main-title {
  font-family: var(--font-editorial);
  font-size: 4.6rem;
  font-weight: 700;
  color: var(--c-dark-green);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}

.hero-main-subtitle {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-text-main);
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.hero-trust-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-dark-green);
}

.trust-emoji {
  font-size: 1.15rem;
}

/* Category Cards 2x2 */
.hero-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 440px;
}

.quad-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.quad-img-box {
  width: 100%;
  height: 135px;
  overflow: hidden;
  background: #eee;
}

.quad-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.quad-card:hover .quad-img-box img {
  transform: scale(1.06);
}

.quad-label-row {
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  color: #111111;
}

.quad-arr {
  color: #111111;
  transition: transform 0.2s;
}

.quad-card:hover .quad-arr {
  transform: translateX(4px);
}

/* ==================== QUICK CATEGORY STRIP ==================== */
.quick-category-strip {
  padding: 1.8rem 1.5rem 0.5rem;
}

.cat-pill-scroll {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.cat-pill-btn {
  background: #ffffff;
  border: 1px solid var(--c-border);
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-text-main);
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cat-pill-btn:hover {
  border-color: var(--c-coral);
  color: var(--c-coral);
}

.cat-pill-btn.active {
  background: var(--c-coral);
  color: #ffffff;
  border-color: var(--c-coral);
}

/* ==================== SECTION 2: CATALOG (REFERENCE 3) ==================== */
.catalog-page-wrap {
  padding: 1.5rem 1.5rem 4.5rem;
}

.ref-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-bottom: 1.2rem;
}

.ref-breadcrumbs a:hover {
  color: var(--c-coral);
}

.ref-breadcrumbs .current {
  color: #111111;
  font-weight: 700;
}

.catalog-top-banner {
  background: #ffffff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
}

.banner-text-box {
  padding: 2.5rem 3rem;
}

.cat-headline {
  font-family: var(--font-main);
  font-size: 2.6rem;
  font-weight: 800;
  color: #111111;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.cat-subheadline {
  font-size: 1.05rem;
  color: var(--c-text-muted);
  margin-bottom: 1.4rem;
}

.cat-pill-tags {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cat-tag {
  background: #edf7ed;
  color: #1b5e20;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
}

.banner-visual-box {
  height: 100%;
  min-height: 220px;
}

.banner-dog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3-Column Layout */
.catalog-main-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Sidebar */
.catalog-filters-sidebar {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 1.5rem;
}

.filter-block {
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--c-border);
}

.filter-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.filter-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.reset-link-btn {
  font-size: 0.75rem;
  color: var(--c-coral);
  font-weight: 700;
}

.filter-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.8rem;
}

.filter-search-wrap {
  position: relative;
}

.ref-input-search {
  width: 100%;
  padding: 0.6rem 2rem 0.6rem 0.8rem;
  background: #fafafa;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  outline: none;
}

.f-search-ico {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #888;
}

.filter-checks-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ref-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--c-text-main);
  cursor: pointer;
}

.ref-check input {
  accent-color: var(--c-dark-green);
  width: 16px;
  height: 16px;
}

.f-count {
  margin-left: auto;
  color: var(--c-text-light);
  font-size: 0.78rem;
}

.highlight-check {
  font-weight: 700;
  color: #27ae60;
}

/* Center Stream */
.catalog-sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  background: #ffffff;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
}

.sort-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.ref-select {
  border: 1px solid var(--c-border);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  outline: none;
}

.catalog-results-info {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

/* Cards Grid */
#catalogCardsGrid,
.cards-four-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.ref-product-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
}

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

.badge-hit {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--c-coral);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.badge-disc {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: #e74c3c;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.badge-orig {
  background: #edf7ed;
  color: #27ae60;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.card-fav-btn {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font-size: 1.1rem;
  color: var(--c-text-light);
  z-index: 2;
  transition: color 0.2s, transform 0.2s;
}

.card-fav-btn.active {
  color: #e25b38;
  transform: scale(1.15);
}

.card-img-wrap {
  width: 100%;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 0.8rem;
}

.card-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.ref-product-card:hover .card-img-wrap img {
  transform: scale(1.05);
}

.card-weight-tag {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-text-muted);
}

.card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111111;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.card-desc {
  font-size: 0.76rem;
  color: var(--c-text-muted);
  line-height: 1.35;
  margin-bottom: 0.6rem;
  flex: 1;
}

.card-rating-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #ffb300;
  margin-bottom: 0.8rem;
}

.rating-count {
  color: var(--c-text-light);
}

.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.old-price {
  font-size: 0.82rem;
  color: var(--c-text-light);
  text-decoration: line-through;
}

.current-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: #111111;
}

.stock-status {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.stock-status.in-stock {
  color: #27ae60;
}

.stock-status.low-stock {
  color: #e67e22;
}

/* Right Promo Widgets */
.catalog-promo-column {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.promo-box-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.promo-box-img {
  width: 100%;
  height: 160px;
}

.promo-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-box-content {
  padding: 1.2rem;
}

.promo-box-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111111;
}

.promo-sub {
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.promo-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.82rem;
  margin-bottom: 1.2rem;
}

.chk-icon {
  color: #27ae60;
  font-weight: 800;
  margin-right: 0.4rem;
}

.promo-bowl-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.bowl-text h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.2rem;
}

.bowl-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-coral);
}

.bowl-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.bowl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.return-guarantee-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.82rem;
}

.ret-ico {
  font-size: 1.5rem;
}

/* Trust Strip */
.catalog-trust-strip {
  margin-top: 3rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.c-trust-col {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.c-ico {
  font-size: 1.8rem;
}

.c-trust-col strong {
  display: block;
  font-size: 0.92rem;
  color: #111111;
}

.c-trust-col p {
  font-size: 0.78rem;
  color: var(--c-text-muted);
}

/* ==================== SECTION 3: CALCULATOR ==================== */
.calculator-section {
  background: #ffffff;
  padding: 5rem 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.section-title-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.eyebrow-pill {
  background: #edf7ed;
  color: #1b5e20;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 0.8rem;
}

.calc-main-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.6rem;
}

.calc-main-subtitle {
  font-size: 1rem;
  color: var(--c-text-muted);
}

.calc-card-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
}

.calc-controls-card {
  background: var(--c-cream-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.calc-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 0.6rem;
}

.calc-pet-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.pet-toggle-btn {
  background: #ffffff;
  border: 1px solid var(--c-border);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pet-toggle-btn.active {
  background: var(--c-dark-green);
  color: #ffffff;
  border-color: var(--c-dark-green);
}

.calc-chips-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.calc-chip {
  background: #ffffff;
  border: 1px solid var(--c-border);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calc-chip.active {
  background: var(--c-coral);
  color: #ffffff;
  border-color: var(--c-coral);
}

.slider-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-weight-badge {
  background: var(--c-dark-green);
  color: #ffffff;
  font-size: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
}

.ref-range-slider {
  width: 100%;
  accent-color: var(--c-coral);
  margin: 0.8rem 0 0.4rem;
  cursor: pointer;
}

.weight-quick-presets {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

.weight-quick-presets span {
  cursor: pointer;
  text-decoration: underline;
}

/* Results Box */
.calc-result-card {
  background: var(--c-cream-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.result-badge-top {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--c-dark-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
}

.res-portion-block {
  margin-bottom: 1.4rem;
}

.res-portion-label {
  font-size: 0.9rem;
  color: var(--c-text-muted);
}

.res-portion-val {
  font-size: 3rem;
  font-weight: 800;
  color: var(--c-dark-green);
  line-height: 1;
  margin: 0.3rem 0;
}

.res-portion-val small {
  font-size: 1.2rem;
  font-weight: 600;
}

.res-portion-sub {
  font-size: 0.82rem;
  color: var(--c-text-muted);
}

.res-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: #ffffff;
  padding: 1.2rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  border: 1px solid var(--c-border);
}

.metric-num {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #111111;
}

.metric-lbl {
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

.res-recommend-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  margin-bottom: 1.5rem;
}

.res-prod-img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.res-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #27ae60;
}

.res-prod-details h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #111111;
}

.res-prod-price {
  font-size: 0.95rem;
}

/* ==================== SECTION 4: STORES ==================== */
.stores-section {
  padding: 5rem 1.5rem;
}

.section-heading {
  font-size: 2.2rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.6rem;
}

.section-subheading {
  font-size: 1rem;
  color: var(--c-text-muted);
}

.stores-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.store-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s;
}

.store-card:hover {
  transform: translateY(-3px);
}

.store-card.active {
  border-color: var(--c-coral);
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.06);
}

.store-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.status-open {
  font-size: 0.75rem;
  font-weight: 700;
  color: #27ae60;
  display: block;
}

.store-top-row h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111111;
}

.store-time-tag {
  background: #f4f3ef;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

.store-geo {
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
  flex: 1;
}

.store-pills-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #444;
  margin-bottom: 1.2rem;
}

.store-actions-row {
  display: flex;
  gap: 0.5rem;
}

/* ==================== SECTION 5: LOYALTY ==================== */
.loyalty-section {
  padding: 5rem 1.5rem;
}

.loyalty-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.loyalty-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #111111;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.loyalty-desc {
  font-size: 1rem;
  color: var(--c-text-muted);
  margin-bottom: 1.8rem;
}

.loyalty-perks-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.l-perk {
  display: flex;
  gap: 1rem;
}

.l-perk-ico {
  font-size: 1.8rem;
}

.l-perk strong {
  display: block;
  font-size: 0.95rem;
  color: #111111;
}

.l-perk p {
  font-size: 0.82rem;
  color: var(--c-text-muted);
}

.digital-wallet-card {
  background: linear-gradient(135deg, #112d22 0%, #1a4233 100%);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(17, 45, 34, 0.25);
  margin-bottom: 1.2rem;
}

.wallet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8rem;
}

.w-brand {
  font-size: 1.15rem;
  font-weight: 800;
}

.w-tier {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
}

.wallet-mid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}

.w-owner-info small, .w-balance-info small {
  font-size: 0.75rem;
  opacity: 0.7;
}

.w-owner-info strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
}

.w-balance-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2ecc71;
}

.wallet-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
}

.barcode-lines {
  height: 24px;
  width: 140px;
  background: repeating-linear-gradient(90deg, #fff, #fff 2px, transparent 2px, transparent 4px);
}

.barcode-digits {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.barcode-tag {
  font-size: 0.72rem;
  opacity: 0.7;
}

.card-customize-box {
  background: #ffffff;
  border: 1px solid var(--c-border);
  padding: 1.2rem;
  border-radius: var(--radius-md);
}

.card-customize-box label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.input-action-inline {
  display: flex;
  gap: 0.5rem;
}

.input-action-inline input {
  flex: 1;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* ==================== PRODUCT DETAIL MODAL ==================== */
.ref-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.ref-modal-backdrop.active {
  display: flex;
}

.ref-modal-window {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-float);
}

.modal-close-cross {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-size: 2rem;
  color: #111111;
  z-index: 10;
  line-height: 1;
}

.modal-product-inner {
  padding: 2.5rem 2rem;
}

.product-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.8fr;
  gap: 2.2rem;
  align-items: start;
  margin-bottom: 3rem;
}

/* Gallery */
.p-gallery-column {
  display: flex;
  gap: 1rem;
}

.p-thumb-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 68px;
}

.thumb-item {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-item.active {
  border-color: var(--c-dark-green);
  box-shadow: 0 0 0 2px var(--c-dark-green);
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumb {
  position: relative;
}

.v-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 0.9rem;
}

.p-main-stage {
  flex: 1;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  overflow: hidden;
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-stage-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zoom-indicator {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
}

/* Buy box */
.p-center-details {
  display: flex;
  flex-direction: column;
}

.p-badge-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.p-title-text {
  font-size: 1.9rem;
  font-weight: 800;
  color: #111111;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.p-subtitle-text {
  font-size: 0.95rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.p-rating-sku-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--c-text-muted);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 1.2rem;
}

.p-stars-val {
  color: #ffb300;
}

.p-stars-val strong {
  color: #111111;
}

.rev-count {
  color: var(--c-text-muted);
}

.p-fav-btn {
  font-size: 1.2rem;
  color: var(--c-text-light);
  margin-left: auto;
}

.p-price-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.p-price-val {
  font-size: 2.2rem;
  font-weight: 800;
  color: #111111;
}

.p-instock-pill {
  font-size: 0.82rem;
  font-weight: 700;
  color: #27ae60;
}

.p-weight-selector-row {
  margin-bottom: 1.2rem;
}

.p-weight-selector-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

.weight-buttons {
  display: flex;
  gap: 0.5rem;
}

.weight-btn {
  background: #ffffff;
  border: 1px solid var(--c-border);
  color: var(--c-text-main);
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.weight-btn.active {
  border-color: var(--c-dark-green);
  background: var(--c-dark-green);
  color: #ffffff;
}

.p-quantity-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.p-quantity-row label {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.p-qty-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.qty-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}

.qty-val {
  padding: 0 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.p-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.telegram-fast-banner {
  background: #e8f4fd;
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.82rem;
}

.tg-fast-ico {
  font-size: 1.2rem;
  color: var(--c-sky);
}

.telegram-fast-banner strong {
  display: block;
  color: #0288d1;
}

.telegram-fast-banner p {
  color: #555;
}

/* Right Trust Column */
.p-right-trust-column {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.info-trust-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.t-card-ico {
  font-size: 1.5rem;
}

.t-card-info {
  flex: 1;
}

.t-card-info strong {
  display: block;
  font-size: 0.9rem;
  color: #111111;
}

.t-card-info p {
  font-size: 0.76rem;
  color: var(--c-text-muted);
  line-height: 1.35;
}

.t-card-arr {
  color: var(--c-text-light);
  font-size: 1.2rem;
}

.p-advice-banner {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 0.8rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.advice-dog-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.advice-text {
  flex: 1;
}

.advice-text strong {
  font-size: 0.9rem;
  color: #111111;
  display: block;
}

.advice-text p {
  font-size: 0.76rem;
  color: var(--c-text-muted);
}

.advice-tg-btn {
  width: 36px;
  height: 36px;
  background: #27ae60;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Lower Tabs */
.product-bottom-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 2.5rem;
}

.p-tabs-wrap {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  overflow: hidden;
}

.p-tab-headers {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  background: #fafafa;
}

.p-tab-head {
  padding: 0.9rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-text-muted);
  position: relative;
}

.p-tab-head.active {
  color: var(--c-dark-green);
  background: #ffffff;
}

.p-tab-head.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-dark-green);
}

.p-tab-body {
  padding: 1.8rem;
}

.p-tab-body h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.5rem;
}

.composition-text {
  font-size: 0.86rem;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.nutrition-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.table-box h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.6rem;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.spec-table th, .spec-table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}

.spec-table th {
  background: #fdfbf7;
  color: var(--c-text-muted);
}

/* Similar Products */
.p-similar-column {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 1.5rem;
}

.similar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}

.similar-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111111;
}

.similar-all-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-coral);
}

.similar-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.similar-item-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: background 0.2s;
}

.similar-item-card:hover {
  background: #fdfbf7;
}

.sim-img {
  width: 46px;
  height: 54px;
  object-fit: contain;
}

.sim-info {
  flex: 1;
}

.sim-info h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
}

.sim-meta {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  display: block;
}

.sim-price {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--c-dark-green);
}

.sim-cart-btn {
  width: 32px;
  height: 32px;
  background: #27ae60;
  color: #ffffff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* ==================== CART DRAWER ==================== */
.ref-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  
  z-index: 1000;
  display: none;
}

.ref-cart-overlay.active {
  display: block;
}

.ref-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  z-index: 1001;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.ref-cart-drawer.active {
  transform: translateX(0);
}

.ref-cart-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.ref-cart-top h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

.ref-cart-meter {
  background: #fdfbf7;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.82rem;
}

.meter-track {
  height: 5px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 0.4rem;
}

.meter-fill {
  height: 100%;
  background: #27ae60;
  transition: width 0.3s;
}

.ref-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item-row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.c-item-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fafafa;
}

.c-item-info {
  flex: 1;
}

.c-item-info h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.25;
}

.c-item-meta {
  font-size: 0.78rem;
  color: var(--c-text-muted);
}

.c-item-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.c-step-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
}

.c-step-val {
  font-size: 0.85rem;
  font-weight: 700;
}

.c-item-price-col {
  text-align: right;
}

.c-item-price {
  font-size: 1rem;
  font-weight: 800;
  color: #111111;
}

.c-item-del {
  font-size: 0.75rem;
  color: #e74c3c;
  display: block;
  margin-top: 0.4rem;
}

/* Cart Footer */
.ref-cart-footer {
  padding: 1.2rem 1.5rem;
  border-top: 1px solid var(--c-border);
  background: #fafafa;
}

.cart-deliv-options {
  margin-bottom: 0.8rem;
}

.deliv-lbl {
  display: block;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-bottom: 0.3rem;
}

.deliv-pills-row {
  display: flex;
  gap: 0.4rem;
}

.deliv-pill {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.4rem 0.2rem;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.deliv-pill.active {
  background: var(--c-dark-green);
  color: #ffffff;
  border-color: var(--c-dark-green);
}

.cart-promo-field {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.promo-inp {
  flex: 1;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.promo-note {
  font-size: 0.75rem;
  margin-bottom: 0.6rem;
}

.ref-cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.ref-cart-total-row.grand-total {
  font-size: 1.15rem;
  font-weight: 800;
  border-top: 1px solid var(--c-border);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  margin-bottom: 1rem;
}

.text-success {
  color: #27ae60 !important;
}

.cart-actions-column {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quick-checkout-form {
  margin-top: 1rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.quick-checkout-form h4 {
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.ref-input-field {
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}

/* ==================== FLOATING BADGE ==================== */
.ref-floating-tg-badge {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #112d22;
  color: #ffffff;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 90;
  transition: transform 0.25s;
}

.ref-floating-tg-badge:hover {
  transform: translateY(-3px) scale(1.02);
}

.fl-tg-ico {
  font-size: 1.4rem;
}

.fl-tg-text strong {
  display: block;
  font-size: 0.88rem;
}

.fl-tg-text small {
  font-size: 0.72rem;
  color: #2ecc71;
}

/* ==================== SUCCESS MODAL ==================== */
.success-window {
  max-width: 520px;
  padding: 2.5rem;
  text-align: center;
}

.success-paw-anim {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.success-content-box h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--c-dark-green);
  margin-bottom: 0.5rem;
}

.success-lead {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.success-desc {
  font-size: 0.88rem;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.success-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ==================== TOASTS ==================== */
.ref-toast-box {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ref-toast {
  background: #112d22;
  color: #ffffff;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: slideInToast 0.3s ease;
}

@keyframes slideInToast {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==================== FOOTER ==================== */
.ref-footer {
  background: #0d1e15;
  color: #ffffff;
  padding: 4.5rem 0 2rem;
}

.ref-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.text-white {
  color: #ffffff !important;
}

.f-brand-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-top: 1rem;
}

.f-col h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: #ffffff;
}

.f-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

.f-col ul a:hover {
  color: var(--c-coral);
}

.f-col p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.ref-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
  .cards-four-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-main-layout {
    grid-template-columns: 220px 1fr;
  }
  .catalog-promo-column {
    display: none;
  }
  .stores-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .calc-card-grid {
    grid-template-columns: 1fr;
  }
  .product-main-grid {
    grid-template-columns: 1fr 1fr;
  }
  .p-right-trust-column {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .top-announcement-bar {
    display: none;
  }
  .ref-nav-tabs {
    display: none;
  }
  .ref-happy-pill {
    display: none;
  }
  .ref-burger-btn {
    display: flex;
  }
  .hero-canvas-wrap {
    background-position: center;
    min-height: auto;
    padding: 3.5rem 0;
  }
  .hero-layout-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-main-title {
    font-size: 3.2rem;
  }
  .catalog-top-banner {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .banner-text-box {
    padding: 1.8rem 1.4rem;
  }
  .banner-visual-box {
    height: 180px;
    width: 100%;
  }
  .banner-dog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .catalog-main-layout {
    grid-template-columns: 1fr;
  }
  .catalog-filters-sidebar {
    display: none;
  }
  .cards-four-grid {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-trust-strip {
    grid-template-columns: 1fr 1fr;
  }
  .loyalty-grid {
    grid-template-columns: 1fr;
  }
  .product-main-grid {
    grid-template-columns: 1fr;
  }
  .p-gallery-column {
    flex-direction: column-reverse;
  }
  .p-thumb-list {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  }
  .product-bottom-layout {
    grid-template-columns: 1fr;
  }
  .nutrition-tables-grid {
    grid-template-columns: 1fr;
  }
  .ref-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .hero-main-title {
    font-size: 2.5rem;
  }
  .cards-four-grid {
    grid-template-columns: 1fr;
  }
  .stores-grid-cards {
    grid-template-columns: 1fr;
  }
  .catalog-trust-strip {
    grid-template-columns: 1fr;
  }
  .ref-footer-grid {
    grid-template-columns: 1fr;
  }
  .header-search-wrap {
    display: none;
  }
}


/* ==========================================================================
   PAWS & GOODS · ULTRA STORE ENHANCEMENT STYLES
   ========================================================================== */

/* Header Search Autocomplete Dropdown */
.header-search-wrap {
  position: relative;
}
.header-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 320px;
  background: rgba(255, 255, 255, 0.98);
  
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}
.search-sugg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border-bottom: 1px solid #f3f0e8;
}
.search-sugg-row:last-child {
  border-bottom: none;
}
.search-sugg-row:hover {
  background: #f8f6f1;
  transform: translateX(4px);
}
.search-sugg-row img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
  border: 1px solid #eae6dc;
}
.search-sugg-row strong {
  display: block;
  font-size: 14px;
  color: var(--c-dark-green);
  line-height: 1.25;
}
.search-sugg-row span {
  font-size: 12px;
  color: #78716c;
}

/* Card Variant Chips */
.p-variants-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px 0;
}
.variant-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #dcd7cb;
  background: #ffffff;
  color: #44403c;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.variant-chip:hover {
  border-color: var(--c-dark-green);
  color: var(--c-dark-green);
}
.variant-chip.active {
  background: var(--c-dark-green);
  color: #ffffff;
  border-color: var(--c-dark-green);
  box-shadow: 0 2px 8px rgba(17, 45, 34, 0.2);
}
.p-single-weight {
  font-size: 12px;
  color: #78716c;
  margin: 6px 0 10px 0;
  font-weight: 500;
}

/* Modal Variants List */
.modal-variants-wrap {
  margin: 1rem 0;
}
.m-var-lbl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #44403c;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.m-variants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-var-pill {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid #dcd7cb;
  background: #fff;
  color: #292524;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.modal-var-pill:hover {
  border-color: var(--c-dark-green);
}
.modal-var-pill.active {
  background: var(--c-dark-green);
  color: #fff;
  border-color: var(--c-dark-green);
  box-shadow: 0 4px 12px rgba(17, 45, 34, 0.25);
}

/* Free Shipping Progress in Cart */
.cart-free-shipping-box {
  background: #f1f8f3;
  border: 1px solid #d1ebd8;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 18px 6px 18px;
}
.free-ship-bar-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.free-ship-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width 0.3s ease;
  border-radius: 999px;
}
.free-ship-note {
  font-size: 12px;
  color: #15803d;
  margin: 0;
  line-height: 1.35;
}

/* Delivery pills in cart */
.cart-delivery-selector {
  padding: 12px 18px;
  border-top: 1px solid #eae6dc;
}
.deliv-sec-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #57534e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.deliv-pills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.deliv-pill {
  flex: 1;
  min-width: 100px;
  padding: 8px 10px;
  font-size: 11px;
  border: 1px solid #dcd7cb;
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1.25;
}
.deliv-pill strong {
  display: block;
  font-size: 12px;
  color: #1c1917;
}
.deliv-pill.active {
  border-color: var(--c-dark-green);
  background: #f3f9f5;
  box-shadow: 0 0 0 1px var(--c-dark-green);
}

/* Cart Checkout Form */
.cart-checkout-form {
  padding: 12px 18px;
  background: #faf8f5;
  border-top: 1px solid #eae6dc;
}
.c-form-input {
  margin-bottom: 8px;
}
.c-form-input label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #44403c;
  margin-bottom: 4px;
}
.c-form-input input {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid #dcd7cb;
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  font-family: inherit;
}
.c-form-input input:focus {
  border-color: var(--c-dark-green);
  box-shadow: 0 0 0 2px rgba(17, 45, 34, 0.15);
}

/* Telegram CTA */
.cart-tg-cta {
  padding: 12px 18px 24px 18px;
  text-align: center;
}
.cart-tg-cta small {
  display: block;
  font-size: 11px;
  color: #78716c;
  margin-top: 6px;
}

/* Interactive Quiz Styles */
.quiz-section-wrap {
  margin: 3.5rem auto;
}
.quiz-card-banner {
  background: linear-gradient(135deg, #112d22 0%, #173d2f 60%, #1e4a3b 100%);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  color: #ffffff;
  box-shadow: 0 20px 48px rgba(17, 45, 34, 0.25);
  position: relative;
  overflow: hidden;
}
.quiz-card-banner::before {
  content: '🐾';
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 160px;
  opacity: 0.05;
  pointer-events: none;
}
.quiz-badge {
  display: inline-block;
  background: rgba(226, 91, 56, 0.25);
  color: #ff9d85;
  border: 1px solid rgba(226, 91, 56, 0.4);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.quiz-title {
  font-family: var(--font-editorial);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
}
.quiz-desc {
  font-size: 15px;
  color: #c9d8d1;
  max-width: 600px;
  margin-bottom: 2rem;
}
.quiz-flow-container {
  background: rgba(255, 255, 255, 0.07);
  
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}
.quiz-step {
  display: none;
}
.quiz-step.active {
  display: block;
  animation: fadeIn 0.3s ease;
}
.quiz-step-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: #ffffff;
}
.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.quiz-opt-btn {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 16px 14px;
  text-align: center;
  color: #1c1917;
  cursor: pointer;
  transition: all 0.22s ease;
}
.quiz-opt-btn:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: #e25b38;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.q-opt-icon {
  display: block;
  font-size: 32px;
  margin-bottom: 6px;
}
.quiz-opt-btn strong {
  display: block;
  font-size: 15px;
  color: var(--c-dark-green);
  margin-bottom: 4px;
}
.quiz-opt-btn small {
  font-size: 12px;
  color: #78716c;
  line-height: 1.3;
}
.quiz-result-header h4 {
  font-size: 20px;
  color: #ff9d85;
  margin-bottom: 6px;
}
.quiz-result-header p {
  color: #d1fae5;
  font-size: 14px;
  margin-bottom: 1.5rem;
}
.quiz-bundle-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.bundle-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  color: #1c1917;
  width: 200px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}
.bundle-pill {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #112d22;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.bundle-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 10px auto;
}
.bundle-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  margin-bottom: 4px;
}
.bundle-card span {
  font-size: 14px;
  font-weight: 700;
  color: #e25b38;
}
.bundle-plus {
  font-size: 28px;
  font-weight: 800;
  color: #ff9d85;
}
.bundle-cta-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.bundle-price-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bundle-old-price {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 15px;
}
.bundle-new-price {
  font-size: 24px;
  color: #ffffff;
}
.bundle-save-tag {
  background: #10b981;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.quiz-restart-btn {
  margin-top: 1rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #cbd5e1;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.quiz-restart-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Modal Tabs */
.modal-tabs-section {
  margin-top: 1.5rem;
  border-top: 1px solid #eae6dc;
  padding-top: 1rem;
}
.m-detail-tab {
  border-bottom: 1px solid #eae6dc;
  padding: 8px 0;
}
.m-detail-tab summary {
  font-size: 14px;
  font-weight: 700;
  color: #292524;
  cursor: pointer;
  outline: none;
  padding: 6px 0;
}
.m-detail-tab summary:hover {
  color: #e25b38;
}
.m-detail-tab p {
  font-size: 13px;
  color: #57534e;
  line-height: 1.6;
  margin-top: 6px;
  padding-left: 8px;
}

/* Floating Mobile Bottom Navigation Bar */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  border-top: 1px solid #ded8cb;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
  z-index: 998;
  padding: 0 8px;
}
@media (max-width: 900px) {
  .mobile-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  body {
    padding-bottom: 74px;
  }
}
.mob-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #78716c;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
}
.mob-bar-item .m-ico {
  font-size: 20px;
  line-height: 1;
}
.mob-bar-item.active, .mob-bar-item:hover {
  color: var(--c-dark-green);
}
.mob-cart-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  background: #e25b38;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toast Notification */
.store-toast {
  position: fixed;
  bottom: 84px;
  right: 24px;
  background: #112d22;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.store-toast.active {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 600px) {
  .store-toast {
    left: 20px;
    right: 20px;
    bottom: 80px;
    text-align: center;
  }
}

/* Catalog Empty State */
.catalog-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px dashed #dcd7cb;
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.catalog-empty-state h3 {
  font-size: 20px;
  color: var(--c-dark-green);
  margin-bottom: 6px;
}
.catalog-empty-state p {
  color: #78716c;
  margin-bottom: 1.5rem;
  font-size: 14px;
}


/* ==========================================================================
   PERFORMANCE & CORE WEB VITALS (LCP, CLS, INP) BOOST
   ========================================================================== */

/* Aspect ratios & containment to prevent CLS */
.p-card-img-wrap, .quad-img-box, .bundle-card img {
  aspect-ratio: 1 / 1;
  contain: layout paint;
}
.banner-visual-box img {
  aspect-ratio: 16 / 9;
}

/* Off-screen heavy sections (content-visibility removed for 60fps smooth scroll) */

/* GPU acceleration for drawers and modals */
.cart-drawer-panel, .product-detail-modal, .store-toast {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Smooth micro-interactions without main thread jank */
@media (prefers-reduced-motion: no-preference) {
  .p-card-unit, .quiz-opt-btn, .ref-btn-coral, .ref-btn-sky {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  }
}


/* ==========================================================================
   ARCHITECTURAL RETAIL UI & BOUTIQUE DESIGN SYSTEM (NO AI SLOP)
   ========================================================================== */

/* Buttons: Tactile, Physical, High-Contrast */
.ref-btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--c-dark-green) !important;
  color: #ffffff !important;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
}
.ref-btn-coral:hover {
  background: var(--c-dark-green-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 33, 23, 0.16);
}
.ref-btn-coral:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 1px 1px rgba(12, 33, 23, 0.1);
}

.ref-btn-sky {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #ffffff !important;
  color: var(--c-dark-green) !important;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  border: 1.5px solid var(--c-dark-green);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.ref-btn-sky:hover {
  background: var(--c-dark-green) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 33, 23, 0.16);
}
.ref-btn-sky:active {
  transform: translateY(1px) scale(0.985);
}

.ref-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #ffffff !important;
  color: var(--c-text-main) !important;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  border: 1.5px solid var(--c-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.ref-btn-white:hover {
  border-color: var(--c-dark-green);
  background: #faf8f4 !important;
  transform: translateY(-1px);
}
.ref-btn-white:active {
  transform: translateY(1px) scale(0.985);
}

.ref-btn-tg {
  display: block;
  text-align: center;
  background: var(--c-sky) !important;
  color: #ffffff !important;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.2rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ref-btn-tg:hover {
  background: var(--c-sky-hover) !important;
  transform: translateY(-1px);
}

/* Category Filter Tabs (Geometric, Minimal) */
.cat-pill-btn {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  padding: 0.55rem 1.15rem;
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--c-text-main);
  white-space: nowrap;
  transition: all 0.15s ease;
  cursor: pointer;
}
.cat-pill-btn:hover {
  border-color: var(--c-dark-green);
  color: var(--c-dark-green);
  background: #faf8f4;
}
.cat-pill-btn.active {
  background: var(--c-dark-green) !important;
  color: #ffffff !important;
  border-color: var(--c-dark-green) !important;
}

/* Header & Inputs */
.header-search-input {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  padding: 0.55rem 2rem 0.55rem 0.95rem;
  border-radius: 6px;
  font-size: 0.84rem;
  font-family: var(--font-main);
  width: 200px;
  transition: width 0.25s, border-color 0.2s, box-shadow 0.2s;
}
.header-search-input:focus {
  width: 260px;
  border-color: var(--c-dark-green);
  box-shadow: 0 0 0 3px rgba(12, 33, 23, 0.08);
  outline: none;
}

.ref-cart-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  padding: 0.5rem 0.95rem;
  border-radius: 6px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-text-main);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.ref-cart-btn:hover {
  border-color: var(--c-dark-green);
  background: #faf8f4;
}
.ref-cart-count {
  background: var(--c-dark-green);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quiz Option Buttons */
.quiz-opt-btn {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--c-text-main);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.quiz-opt-btn:hover {
  border-color: var(--c-dark-green);
  background: #faf8f4;
}
.quiz-opt-btn.active {
  border-color: var(--c-dark-green) !important;
  background: #f2f6f3 !important;
  box-shadow: 0 0 0 1px var(--c-dark-green);
}

/* Delivery Pills */
.deliv-pill {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: 6px;
  background: #ffffff;
  font-family: var(--font-main);
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: left;
}
.deliv-pill:hover {
  border-color: var(--c-dark-green);
}
.deliv-pill.active {
  border-color: var(--c-dark-green) !important;
  background: #f2f6f3 !important;
  box-shadow: 0 0 0 1px var(--c-dark-green);
}

/* ==================== PRODUCT CARDS MASTER ARCHITECTURE ==================== */
.cards-four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1200px) {
  .cards-four-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .cards-four-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
}
@media (max-width: 520px) {
  .cards-four-grid { grid-template-columns: 1fr; }
}

.p-card-unit {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.p-card-unit:hover {
  border-color: #beb6a3;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(12, 33, 23, 0.08);
}

.p-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 26px;
  margin-bottom: 0.4rem;
}

.p-badge-slot {
  display: flex;
  gap: 4px;
}
.p-badge {
  font-family: var(--font-main);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  line-height: 1.2;
}
.p-badge-hit {
  background: var(--c-dark-green);
  color: #ffffff;
}
.p-badge-disc {
  background: var(--c-coral);
  color: #ffffff;
}

.p-fav-toggle {
  background: #f7f5f0;
  border: 1px solid var(--c-border);
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--c-text-muted);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.p-fav-toggle:hover {
  border-color: var(--c-coral);
  color: var(--c-coral);
  background: #ffffff;
}
.p-fav-toggle.active {
  background: #fff0eb;
  border-color: var(--c-coral);
  color: var(--c-coral);
}

.p-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fcfbfa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 0.85rem;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #f2eee6;
}
.p-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-card-unit:hover .p-card-img {
  transform: scale(1.06);
}

.p-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p-rating-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  margin-bottom: 0.35rem;
}
.p-stars {
  font-weight: 700;
  color: #d97706;
}
.p-reviews {
  color: var(--c-text-light);
}
.p-brand-tag {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--c-dark-green);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  background: #eef4f0;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: auto;
}

.p-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-text-main);
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: color 0.16s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
}
.p-card-title:hover {
  color: var(--c-coral);
}

.p-card-sub {
  font-family: var(--font-main);
  font-size: 0.78rem;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin-bottom: 0.65rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8em;
}

.p-variants-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0.25rem 0 0.8rem 0;
}
.variant-chip {
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-text-main);
  cursor: pointer;
  transition: all 0.14s ease;
}
.variant-chip:hover {
  border-color: var(--c-dark-green);
  color: var(--c-dark-green);
  background: #faf8f4;
}
.variant-chip.active {
  background: var(--c-dark-green) !important;
  color: #ffffff !important;
  border-color: var(--c-dark-green) !important;
}

.p-single-weight {
  font-family: var(--font-main);
  font-size: 0.75rem;
  color: var(--c-text-muted);
  font-weight: 600;
  margin: 0.25rem 0 0.8rem 0;
}

.p-card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-border-subtle);
}

.p-price-block {
  display: flex;
  flex-direction: column;
}
.p-current-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--c-text-main);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.p-old-price {
  font-size: 0.76rem;
  color: var(--c-text-light);
  text-decoration: line-through;
}

/* Authentic Retail CTA Button */
.p-add-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: var(--c-dark-green);
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.65rem 1.15rem;
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.p-add-cart-btn:hover {
  background: var(--c-coral);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184, 66, 36, 0.25);
}
.p-add-cart-btn:active {
  transform: translateY(1px) scale(0.97);
}
.p-add-cart-btn .btn-icon {
  font-size: 0.95rem;
}


/* ==========================================================================
   PERSONA-DRIVEN CATALOG & ULTRA PRODUCT CARDS (HIGH-CONVERSION RETAIL)
   ========================================================================== */

/* Tier 1: Persona Scenarios Selector */
.persona-scenarios-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.persona-row-badge {
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--c-dark-green);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.persona-scenarios-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}
.persona-scenarios-scroll::-webkit-scrollbar {
  display: none;
}
.persona-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #faf8f4;
  border: 1.5px solid var(--c-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text-main);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.persona-tab-btn:hover {
  border-color: var(--c-dark-green);
  background: #ffffff;
  transform: translateY(-1px);
}
.persona-tab-btn.active {
  background: var(--c-dark-green) !important;
  color: #ffffff !important;
  border-color: var(--c-dark-green) !important;
  box-shadow: 0 2px 8px rgba(12, 33, 23, 0.2);
}
.persona-tab-btn.active .p-tab-icon {
  transform: scale(1.1);
}

/* Persona Interactive Buyer Guide Cards (4 Cards Grid) */
.persona-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 1.25rem 0 2rem 0;
}
@media (max-width: 1100px) {
  .persona-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .persona-guide-grid { grid-template-columns: 1fr; gap: 10px; }
}

.persona-guide-card {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  border-radius: 8px;
  padding: 1.15rem;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.persona-guide-card:hover {
  border-color: var(--c-dark-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12, 33, 23, 0.08);
  background: #fcfbf9;
}
.guide-card-icon {
  font-size: 1.8rem;
  line-height: 1;
  background: #f5f2ea;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide-card-content h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--c-text-main);
  line-height: 1.25;
  margin-bottom: 4px;
}
.guide-card-content p {
  font-family: var(--font-main);
  font-size: 0.76rem;
  color: var(--c-text-muted);
  line-height: 1.35;
  margin-bottom: 8px;
}
.guide-card-link {
  font-family: var(--font-main);
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--c-dark-green);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease;
}
.persona-guide-card:hover .guide-card-link {
  transform: translateX(3px);
  color: var(--c-coral);
}

/* ==================== PRODUCT CARD ENHANCEMENTS ==================== */
.p-persona-tag {
  background: #f2f7f4;
  color: var(--c-dark-green);
  border: 1px solid #d0e3d8;
  font-family: var(--font-main);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1.2;
}

.p-stock-indicator {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #ffffff;
  padding: 3px 8px;
  font-family: var(--font-main);
  font-size: 0.68rem;
  font-weight: 700;
  color: #14532d;
  border-radius: 4px;
  border: 1px solid #d4cebe;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.p-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.p-rating-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

/* Target Audience Snippet on Card */
.p-target-for {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  background: #faf8f4;
  border: 1px solid #ede8dc;
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 8px;
  font-family: var(--font-main);
  font-size: 0.72rem;
  line-height: 1.3;
  color: #44403c;
}
.target-icon {
  font-size: 0.75rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.target-text {
  font-weight: 600;
}

/* Key Benefits Pills */
.p-benefits-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.p-benefit-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-main);
  font-size: 0.72rem;
  color: var(--c-text-muted);
  line-height: 1.25;
}
.b-check {
  color: #15803d;
  font-weight: 800;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.b-txt {
  font-weight: 500;
}

/* Variants with Per-Kg Subtext */
.variant-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px;
  line-height: 1.2;
}
.v-weight {
  font-weight: 700;
}
.v-perkg {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.75;
}
.variant-chip.active .v-perkg {
  opacity: 0.9;
  color: #d1fae5;
}

/* Two Action Buttons on Card */
.p-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.p-quickview-btn {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  color: var(--c-text-main);
  padding: 0.65rem 0.8rem;
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.p-quickview-btn:hover {
  border-color: var(--c-dark-green);
  background: #faf8f4;
  color: var(--c-dark-green);
}
.p-quickview-btn:active {
  background: #ede8dc;
}


/* 60fps Native Hardware Scrolling & GPU Layering */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
body {
  text-rendering: optimizeSpeed;
  contain: paint;
}
@media (hover: hover) and (pointer: fine) {
  .p-card-unit:hover {
    border-color: #beb6a3;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(12, 33, 23, 0.08);
  }
}
@media (hover: none) {
  .p-card-unit {
    transform: none !important;
  }
}


/* ==========================================================================
   FLAGSHIP WARM EDITORIAL COMMERCE TRANSFORMATION (Paws & Goods)
   ========================================================================== */

/* Product Cards: Anti-Squeeze, Premium Geometry, Single-Line Prices */
.p-card-unit {
  min-width: 0;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
}
.p-card-unit:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(12, 33, 23, 0.09);
  border-color: #c84d2b;
}

.p-card-img-wrap {
  width: 100%;
  height: 200px;
  background: radial-gradient(circle at center, #ffffff 40%, #f7f5ed 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border: 1px solid #f2eee6;
}
.p-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-card-unit:hover .p-card-img {
  transform: scale(1.06);
}

.p-stock-indicator {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1e703f;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.p-price-block {
  display: flex !important;
  flex-direction: column !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 90px;
}
.p-current-price {
  white-space: nowrap !important;
  display: inline-block !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: #0c2117 !important;
  line-height: 1.1;
}
.p-old-price {
  white-space: nowrap !important;
  display: inline-block !important;
  font-size: 0.82rem;
  color: #8a948c;
  text-decoration: line-through;
  margin-top: 2px;
}
.p-card-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid #f0ecdf;
}
.p-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}

/* EDITORIAL BENEFIT STRIP (FULL WIDTH BELOW GRID) */
.catalog-editorial-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--c-border);
}
.benefit-box-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
}
.benefit-box-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(12, 33, 23, 0.08);
  border-color: #c84d2b;
}
.benefit-box-img {
  width: 100%;
  height: 160px;
  background: #f7f5ed;
  overflow: hidden;
}
.benefit-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.benefit-box-card:hover .benefit-box-img img {
  transform: scale(1.05);
}
.benefit-box-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #faede8;
  color: #c84d2b;
  align-self: flex-start;
  margin-bottom: 0.75rem;
}
.promo-badge.green {
  background: #eef5f0;
  color: #1e703f;
}
.promo-badge.gold {
  background: #fef3c7;
  color: #92400e;
}
.promo-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0c2117;
  margin-bottom: 0.45rem;
  line-height: 1.3;
}
.promo-desc {
  font-size: 0.88rem;
  color: #5e665f;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  flex: 1;
}
.promo-link-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c84d2b;
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.promo-link-btn:hover {
  color: #0c2117;
}

/* ==================== FOOD CALCULATOR ==================== */
.calc-section-wrap {
  padding: 4.5rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.calc-panel-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  background: #ffffff;
  border-radius: 24px;
  padding: 3rem;
  border: 1px solid var(--c-border);
  box-shadow: 0 10px 30px rgba(12, 33, 23, 0.05);
  align-items: center;
}
.calc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eef5f0;
  color: #1e703f;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.85rem;
}
.calc-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #0c2117;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.calc-desc {
  font-size: 0.95rem;
  color: #5e665f;
  margin-bottom: 1.8rem;
  line-height: 1.5;
}
.calc-pet-toggle {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.calc-pet-btn {
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid #dcd6c8;
  background: #faf9f5;
  font-size: 0.92rem;
  font-weight: 700;
  color: #3d463f;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.calc-pet-btn:hover {
  border-color: #0c2117;
}
.calc-pet-btn.active {
  background: #0c2117;
  color: #ffffff;
  border-color: #0c2117;
  box-shadow: 0 4px 14px rgba(12, 33, 23, 0.18);
}
.calc-weight-control {
  margin-bottom: 1.5rem;
  background: #faf8f2;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  border: 1px solid #eee8db;
}
.calc-lbl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  color: #3d463f;
  margin-bottom: 0.75rem;
}
.calc-lbl-row strong {
  font-size: 1.4rem;
  color: #c84d2b;
  font-weight: 800;
}
.calc-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e0d9ca;
  outline: none;
  margin: 0.6rem 0;
  cursor: pointer;
  accent-color: #c84d2b;
}
.calc-range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #8a948c;
  font-weight: 600;
}
.calc-activity-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.act-lbl {
  font-size: 0.88rem;
  font-weight: 700;
  color: #3d463f;
}
.act-buttons {
  display: flex;
  gap: 0.6rem;
}
.calc-act-btn {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1.5px solid #e0d9ca;
  background: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a544c;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.calc-act-btn:hover {
  border-color: #c84d2b;
}
.calc-act-btn.active {
  background: #c84d2b;
  color: #ffffff;
  border-color: #c84d2b;
  box-shadow: 0 4px 12px rgba(200, 77, 43, 0.25);
}
.calc-result-box {
  background: linear-gradient(145deg, #0c2117 0%, #173d2b 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.25);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.res-lbl {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a4c4b0;
  margin-bottom: 0.6rem;
  font-weight: 700;
}
.res-number {
  font-size: clamp(2.8rem, 4.5vw, 3.8rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 1.4rem;
  letter-spacing: -0.03em;
}
.res-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.2rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.res-d-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: #d0ded4;
}
.res-d-item strong {
  color: #ffffff;
  font-weight: 700;
}

/* ==================== OFFLINE SHOWROOMS ==================== */
.stores-section-wrap {
  padding: 4.5rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.section-title-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eef3ed;
  color: #1e703f;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.section-title-center h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #0c2117;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.section-title-center p {
  font-size: 1rem;
  color: #5e665f;
  line-height: 1.5;
}
.stores-grid-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.store-item-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.8rem;
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.04);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.store-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(12, 33, 23, 0.08);
  border-color: #c84d2b;
}
.store-status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #edf7ee;
  color: #1e703f;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 1rem;
}
.store-item-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0c2117;
  margin-bottom: 0.4rem;
}
.store-address {
  font-size: 0.9rem;
  color: #5e665f;
  margin-bottom: 1.2rem;
  flex: 1;
  line-height: 1.4;
}
.store-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d463f;
  padding-top: 1rem;
  border-top: 1px solid #f0ecdf;
}

/* ==================== LOYALTY CLUB ==================== */
.loyalty-section-wrap {
  padding: 2rem 1.5rem 5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.loyalty-banner-card {
  background: linear-gradient(135deg, #102d20 0%, #07150e 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: 3.5rem 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 33, 23, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.loyalty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(200, 77, 43, 0.2);
  color: #f99072;
  border: 1px solid rgba(200, 77, 43, 0.35);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.loyalty-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.8rem;
  max-width: 650px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.loyalty-text p {
  font-size: 1.05rem;
  color: #c4d4c9;
  margin-bottom: 2rem;
  max-width: 600px;
  line-height: 1.5;
}
.loyalty-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.loyalty-subnote {
  font-size: 0.88rem;
  color: #f0deb8;
  font-weight: 600;
}

/* ==================== SITE FOOTER ==================== */
.site-footer {
  background: #07150e;
  color: #d0ded4;
  padding: 4.5rem 1.5rem 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  max-width: 1240px;
  margin: 0 auto;
}
.footer-logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}
.footer-desc {
  font-size: 0.9rem;
  color: #9bb0a2;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 320px;
}
.footer-copy {
  font-size: 0.8rem;
  color: #627768;
}
.footer-col-nav h4,
.footer-col-contacts h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-col-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col-nav a {
  color: #9bb0a2;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.footer-col-nav a:hover {
  color: #e25b38;
}
.footer-col-contacts p {
  font-size: 0.9rem;
  color: #9bb0a2;
  margin-bottom: 0.6rem;
}
.footer-tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #133324;
  color: #ffffff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 0.6rem;
  transition: background 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-tg-pill:hover {
  background: #c84d2b;
}

/* ==================== MASTER RESPONSIVE MEDIA QUERIES ==================== */
@media (max-width: 1024px) {
  .catalog-main-layout {
    grid-template-columns: 240px 1fr !important;
    gap: 1.5rem !important;
  }
  .stores-grid-four {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .catalog-editorial-benefits {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-inner-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
  }
}

@media (max-width: 768px) {
  .catalog-main-layout {
    grid-template-columns: 1fr !important;
  }
  .catalog-filters-sidebar {
    margin-bottom: 1.5rem;
  }
  #catalogCardsGrid,
  .cards-four-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 1rem !important;
  }
  .catalog-editorial-benefits {
    grid-template-columns: 1fr !important;
  }
  .calc-panel-card {
    grid-template-columns: 1fr !important;
    padding: 1.8rem !important;
    gap: 2rem !important;
  }
  .stores-grid-four {
    grid-template-columns: 1fr !important;
  }
  .loyalty-banner-card {
    padding: 2.2rem 1.5rem !important;
  }
  .footer-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 480px) {
  #catalogCardsGrid,
  .cards-four-grid {
    grid-template-columns: 1fr !important;
  }
  .p-card-unit {
    padding: 1rem !important;
  }
}


/* ==========================================================================
   FLAGSHIP AGENCY DIGITAL EXPERIENCE SYSTEM (WOW Studio Standard)
   ========================================================================== */

/* 1. HERO SECTION */
.hero-canvas-wrap {
  position: relative;
  min-height: auto;
  background: #fbf9f4;
  padding: 3.5rem 0 4.5rem;
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}
.hero-canvas-wrap::before {
  display: none !important;
}

.hero-layout-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-left-editorial {
  display: flex;
  flex-direction: column;
}

.hero-brand-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.eyebrow-pill {
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e703f;
  background: #eef5f0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(30, 112, 63, 0.15);
}

.eyebrow-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #3d463f;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #27ae60;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.25);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(39, 174, 96, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

.hero-editorial-heading {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: clamp(2.6rem, 4.4vw, 3.8rem);
  font-weight: 900;
  color: #0c2117;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 1.2rem;
}

.hero-italic-highlight {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-style: italic;
  font-weight: 600;
  color: #c84d2b;
}

.hero-editorial-lead {
  font-family: var(--font-main, 'Manrope', sans-serif);
  font-size: 1.12rem;
  color: #4a544c;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 580px;
}

.hero-quick-shortcuts {
  margin: 1.5rem 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.shortcuts-lbl {
  font-size: 0.82rem;
  font-weight: 700;
  color: #737d75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shortcuts-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quick-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2c3830;
  cursor: pointer;
  transition: all 0.2s;
}
.quick-chip:hover {
  background: #0c2117;
  color: #ffffff;
  border-color: #0c2117;
  transform: translateY(-1px);
}

.hero-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
  margin-top: auto;
}

.hero-trust-col {
  display: flex;
  flex-direction: column;
}

.t-val {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.2;
}

.t-lbl {
  font-size: 0.78rem;
  color: #6a746c;
  font-weight: 600;
}

/* Hero Right Visual Masterpiece */
.hero-right-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-media-portal {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 28px;
  overflow: visible;
}

.hero-portrait-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.6;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(12, 33, 23, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: block;
}

.floating-meta-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 0.75rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 12px 30px rgba(12, 33, 23, 0.12);
  z-index: 3;
}

.f-top-left {
  top: -16px;
  left: -20px;
}

.f-bottom-left {
  bottom: -18px;
  left: -15px;
}

.pulse-indicator {
  width: 10px;
  height: 10px;
  background: #27ae60;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.25);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

.f-text strong {
  display: block;
  font-size: 0.88rem;
  color: #0c2117;
  font-weight: 800;
  line-height: 1.2;
}

.f-text small {
  font-size: 0.74rem;
  color: #6a746c;
}

.f-ico {
  font-size: 1.3rem;
}

.floating-product-card {
  position: absolute;
  bottom: 24px;
  right: -24px;
  background: #ffffff;
  border-radius: 18px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.14);
  border: 1px solid var(--c-border);
  z-index: 4;
  max-width: 250px;
}

.f-prod-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #faf8f4;
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}

.f-prod-info {
  display: flex;
  flex-direction: column;
}

.f-prod-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: #c84d2b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.f-prod-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.2;
  margin: 2px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f-prod-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.f-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0c2117;
}

.f-add-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #0c2117;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.f-add-btn:hover {
  background: #c84d2b;
  transform: scale(1.1);
}

/* 2. PERSONA HUB (ДЛЯ КОГО ШУКАЄМО?) */
.persona-hub-section {
  padding: 4rem 1.5rem 3rem;
  max-width: 1240px;
  margin: 0 auto;
}

.section-title-editorial {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.8rem;
}
.section-title-editorial h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #0c2117;
  margin-bottom: 0.6rem;
  letter-spacing: -0.025em;
}
.section-title-editorial p {
  font-size: 1.02rem;
  color: #5e665f;
  line-height: 1.5;
}

.persona-grid-five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.persona-card-item {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  border-radius: 18px;
  padding: 1.6rem 1.25rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
  box-shadow: 0 4px 14px rgba(12, 33, 23, 0.03);
}
.persona-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(12, 33, 23, 0.08);
  border-color: #c84d2b;
}
.persona-card-item.active {
  border-color: #0c2117;
  background: #fdfcf9;
  box-shadow: 0 8px 24px rgba(12, 33, 23, 0.07);
}

.persona-card-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.persona-card-item h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.persona-card-item p {
  font-size: 0.82rem;
  color: #5e665f;
  line-height: 1.45;
  margin-bottom: 1.25rem;
  flex: 1;
}

.persona-pill-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #c84d2b;
  display: inline-flex;
  align-items: center;
  transition: gap 0.2s;
}
.persona-card-item:hover .persona-pill-link {
  color: #0c2117;
}

.cat-pill-scroll-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-pill-scroll-bar::-webkit-scrollbar { display: none; }

.filter-quick-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #737d75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 3. BESTSELLERS SPOTLIGHT */
.bestsellers-spotlight-section {
  padding: 3rem 1.5rem 4rem;
  max-width: 1240px;
  margin: 0 auto;
}

.bestsellers-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.2rem;
}
.bestsellers-header-flex h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 900;
  color: #0c2117;
  margin-bottom: 0.4rem;
  letter-spacing: -0.025em;
}
.bestsellers-header-flex p {
  font-size: 0.95rem;
  color: #5e665f;
}
.view-all-catalog-link {
  font-size: 0.92rem;
  font-weight: 800;
  color: #c84d2b;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.view-all-catalog-link:hover {
  color: #0c2117;
}

.bestsellers-four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.bestseller-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
}
.bestseller-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(12, 33, 23, 0.09);
  border-color: #c84d2b;
}

.bs-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #0c2117;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
}
.bs-badge.green { background: #1e703f; }
.bs-badge.coral { background: #c84d2b; }
.bs-badge.gold { background: #d97706; }

.bs-img-box {
  width: 100%;
  height: 180px;
  background: radial-gradient(circle at center, #ffffff 40%, #f7f5ed 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  border: 1px solid #f2eee6;
}
.bs-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.bestseller-card:hover .bs-img-box img {
  transform: scale(1.06);
}

.bs-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bs-brand {
  font-size: 0.72rem;
  font-weight: 800;
  color: #737d75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.bs-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.bs-title:hover { color: #c84d2b; }

.bs-sub {
  font-size: 0.78rem;
  color: #5e665f;
  line-height: 1.4;
  margin-bottom: 1rem;
  flex: 1;
}

.bs-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid #f0ecdf;
  margin-top: auto;
}

.bs-price {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0c2117;
  white-space: nowrap;
}

.bs-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  border: none;
  background: #c84d2b;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(200, 77, 43, 0.2);
}
.bs-cart-btn:hover {
  background: #b23f20;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(200, 77, 43, 0.3);
}

/* 4. EDITORIAL PHILOSOPHY DEEP DIVE */
.editorial-philosophy-wrap {
  padding: 4.5rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}

.philosophy-card-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  background: #ffffff;
  border-radius: 28px;
  padding: 3.5rem;
  border: 1px solid var(--c-border);
  box-shadow: 0 12px 36px rgba(12, 33, 23, 0.05);
  align-items: center;
}

.philosophy-text-col h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #0c2117;
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.phil-lead {
  font-size: 1.05rem;
  color: #5e665f;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.phil-checks-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.2rem;
}

.phil-check-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.p-check-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef5f0;
  color: #1e703f;
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.phil-check-item strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0c2117;
  margin-bottom: 0.2rem;
}

.phil-check-item p {
  font-size: 0.85rem;
  color: #5e665f;
  line-height: 1.45;
  margin: 0;
}

.phil-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.phil-subnote {
  font-size: 0.85rem;
  color: #737d75;
  font-weight: 600;
}

.philosophy-visual-col {
  position: relative;
}

.phil-img-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 33, 23, 0.12);
}

.phil-img-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  display: block;
}

.phil-quote-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(12, 33, 23, 0) 0%, rgba(12, 33, 23, 0.92) 50%, #0c2117 100%);
  color: #ffffff;
  padding: 2.5rem 1.8rem 1.6rem;
}

.q-stars {
  color: #ffb300;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 0.4rem;
}

.phil-quote-badge p {
  font-size: 0.88rem;
  font-style: italic;
  color: #e5ede8;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.phil-quote-badge small {
  font-size: 0.75rem;
  color: #a4c4b0;
  font-weight: 700;
}

/* 5. VETERINARY GUIDES */
.vet-guides-section-wrap {
  padding: 4.5rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}

.guides-three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.guide-item-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
}
.guide-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.09);
  border-color: #c84d2b;
}

.guide-img-box {
  width: 100%;
  height: 180px;
  background: #f7f5ed;
  position: relative;
  overflow: hidden;
}
.guide-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.guide-item-card:hover .guide-img-box img {
  transform: scale(1.05);
}

.guide-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: rgba(12, 33, 23, 0.88);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guide-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.guide-read-time {
  font-size: 0.75rem;
  font-weight: 700;
  color: #737d75;
  margin-bottom: 0.5rem;
}

.guide-item-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.35;
  margin-bottom: 0.65rem;
}

.guide-item-card p {
  font-size: 0.86rem;
  color: #5e665f;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  flex: 1;
}

.guide-steps-mini {
  background: #faf8f4;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2c3830;
  margin-bottom: 1.25rem;
  border: 1px solid #eee8db;
}

.guide-link-btn {
  font-size: 0.88rem;
  font-weight: 800;
  color: #c84d2b;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: color 0.2s;
}
.guide-link-btn:hover {
  color: #0c2117;
}

/* RESPONSIVE ADDITIONS FOR NEW BLOCKS */
@media (max-width: 1024px) {
  .hero-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .hero-right-visual {
    max-width: 580px;
    margin: 0 auto;
  }
  .persona-grid-five {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .bestsellers-four-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .philosophy-card-inner {
    grid-template-columns: 1fr !important;
    padding: 2.5rem !important;
  }
  .guides-three-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .hero-canvas-wrap {
    padding: 2.5rem 0 3.5rem !important;
  }
  .hero-editorial-heading {
    font-size: 2.2rem !important;
  }
  .hero-trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  .persona-grid-five {
    grid-template-columns: 1fr !important;
  }
  .bestsellers-four-grid {
    grid-template-columns: 1fr !important;
  }
  .guides-three-grid {
    grid-template-columns: 1fr !important;
  }
  .floating-meta-card {
    padding: 0.5rem 0.85rem !important;
  }
  .f-top-left {
    left: 8px !important;
    top: 8px !important;
  }
  .floating-product-card {
    right: 8px !important;
    bottom: 8px !important;
  }
}


/* ==========================================================================
   SALE-READY FINESSE & COMMERCIAL TRUST COMPONENTS
   ========================================================================== */

/* FEDIAF Disclaimer */
.calc-vet-disclaimer {
  font-size: 0.74rem;
  color: #a4c4b0;
  line-height: 1.4;
  margin: 1.2rem 0 1.2rem;
  font-style: italic;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.8rem;
  text-align: left;
}

/* Dynamic Checkout Destination */
.checkout-secure-note {
  display: block;
  font-size: 0.74rem;
  color: #737d75;
  text-align: center;
  margin-top: 0.65rem;
  line-height: 1.35;
}

/* Order Success Modal Demo Badges */
.success-demo-badge {
  display: inline-block;
  background: #fbf0ea;
  color: #c84d2b;
  border: 1px solid rgba(200, 77, 43, 0.25);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.success-actions-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

#successOrderDetails {
  text-align: left;
  font-size: 0.85rem;
  color: #3d463f;
  background: #faf8f4;
  padding: 1.1rem;
  border-radius: 12px;
  border: 1px solid #ede8dc;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#successOrderDetails p {
  margin: 0;
  line-height: 1.4;
}

/* 320px Overflow Prevention */
.ref-search-suggestions {
  min-width: min(320px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Focus Visible for WCAG AA Keyboard Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #0c2117 !important;
  outline-offset: 2px !important;
}

/* Reduced Motion Respect */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   AVANT-GARDE EDITORIAL ATELIER SYSTEM (ANTI-TEMPLATE / AWWWARDS TIER)
   ========================================================================== */

/* 1. ATELIER STATUS TICKER (TOP) */
.atelier-status-bar {
  background: #07150e;
  color: #c9d8ce;
  font-family: var(--font-main, 'Manrope', sans-serif);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.status-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.status-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.status-tag {
  background: #143525;
  color: #7ee0a4;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.status-coords {
  color: #8fa697;
  font-size: 0.72rem;
  font-family: monospace;
}
.status-dot {
  width: 6px;
  height: 6px;
  background: #27ae60;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3);
  animation: pulse-dot 2s infinite;
}
.status-time {
  font-weight: 700;
  color: #ffffff;
}
.status-center {
  font-weight: 600;
  color: #b5c7bc;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}
.status-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.status-tg-link {
  color: #f7a086;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.72rem;
  transition: color 0.2s;
}
.status-tg-link:hover { color: #ffffff; }

/* 2. REVOLUTIONARY MAGAZINE COVER HERO */
.hero-canvas-wrap {
  position: relative;
  background: #fbf9f4 !important;
  padding: 2.5rem 0 4.5rem !important;
  border-bottom: 1px solid #e5dfd2 !important;
  overflow: hidden;
}

.hero-broadside-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid #0c2117;
  padding-bottom: 0.85rem;
  margin-bottom: 1.8rem;
  font-family: var(--font-main, 'Manrope', sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0c2117;
}

.hero-haute-headline {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: clamp(2.8rem, 5.8vw, 5.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #0c2117;
  text-transform: uppercase;
  margin-bottom: 2.2rem;
}
.hero-haute-headline .title-primary {
  display: inline-block;
  margin-right: 0.4rem;
}
.hero-haute-headline .title-accent-italic {
  display: inline-block;
  font-family: var(--font-display, 'Onest', sans-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: lowercase;
  color: #c84d2b;
  margin: 0 0.4rem;
  letter-spacing: -0.02em;
}

.hero-layout-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-editorial-lead {
  font-family: var(--font-main, 'Manrope', sans-serif);
  font-size: 1.15rem;
  color: #38423b;
  line-height: 1.65;
  margin-bottom: 2.2rem;
  border-left: 2.5px solid #c84d2b;
  padding-left: 1.4rem;
}

/* Master Visual Cutout with Architectural Crosshairs */
.hero-media-portal {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: #0c2117;
  border: 1px solid #0c2117;
  padding: 10px;
  border-radius: 4px; /* Crisp high-fashion cut, not bubbly generic rounds */
  box-shadow: 0 28px 70px rgba(12, 33, 23, 0.18);
}

.hero-media-portal::before,
.hero-media-portal::after {
  content: '+';
  position: absolute;
  color: #c84d2b;
  font-family: monospace;
  font-size: 18px;
  font-weight: bold;
}
.hero-media-portal::before { top: -9px; left: -9px; }
.hero-media-portal::after { bottom: -9px; right: -9px; }

.hero-portrait-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.batch-stamp-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(12, 33, 23, 0.92);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.85rem;
  font-family: monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}

/* Floating Specimen Showcase on Hero */
.floating-specimen-card {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: #ffffff;
  border: 1.5px solid #0c2117;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 20px 45px rgba(12, 33, 23, 0.18);
  z-index: 3;
  max-width: 290px;
}
.floating-specimen-card .specimen-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #faf8f4;
  padding: 4px;
  border: 1px solid #ede8dc;
  flex-shrink: 0;
}
.specimen-info {
  display: flex;
  flex-direction: column;
}
.specimen-idx {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  color: #c84d2b;
  letter-spacing: 0.06em;
}
.specimen-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.2;
  margin: 2px 0 6px;
}
.specimen-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.specimen-price {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0c2117;
}
.specimen-btn {
  background: #0c2117;
  color: #ffffff;
  border: none;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.specimen-btn:hover {
  background: #c84d2b;
}

/* 3. ASYMMETRIC NUTRITIONAL ATLAS (PERSONA HUB) */
.persona-hub-section {
  padding: 5rem 1.5rem 3.5rem !important;
  max-width: 1280px !important;
  margin: 0 auto;
}

.persona-grid-five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.persona-card-item {
  position: relative;
  border: 1.5px solid #ded8cb !important;
  border-radius: 0 !important; /* Sharp brutalist architectural cut */
  padding: 2rem 1.4rem 1.6rem !important;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
  background: #ffffff;
}
.persona-card-item:hover {
  transform: translateY(-6px);
  border-color: #0c2117 !important;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.1);
}
.persona-card-item.active {
  border-color: #0c2117 !important;
  background: #faf8f2 !important;
}

.p-arch-idx {
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: #c84d2b;
  letter-spacing: 0.08em;
  margin-bottom: 0.85rem;
  display: block;
}

.persona-card-item h3 {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.15rem;
  font-weight: 900;
  color: #0c2117;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.p-bio-metric {
  display: inline-block;
  background: #0c2117;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  align-self: flex-start;
}

.persona-card-item p {
  font-size: 0.84rem;
  color: #4a544c;
  line-height: 1.5;
  margin-bottom: 1.4rem;
  flex: 1;
}

/* 4. BESTSELLERS EXHIBITION SPREAD (ASYMMETRIC LOOKBOOK) */
.bestsellers-spotlight-section {
  padding: 4rem 1.5rem 5rem !important;
  max-width: 1280px !important;
  margin: 0 auto;
}

.bestsellers-four-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.bestseller-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #ded8cb !important;
  border-radius: 0 !important; /* Sharp architectural look */
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.bestseller-card:hover {
  transform: translateY(-5px);
  border-color: #0c2117 !important;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.1);
}

/* Lead Bestseller (takes prominent lead) */
.bestseller-card.lead-spotlight {
  background: #fdfcf9;
  border: 2px solid #0c2117 !important;
}
.lead-spotlight .bs-img-box {
  height: 230px !important;
}

.bs-arch-idx {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #c84d2b;
  margin-bottom: 0.5rem;
}

/* 5. ARCHIVAL SPECIMEN CARDS IN CATALOG */
.p-card-unit {
  border-radius: 0 !important; /* Sharp architectural gallery card */
  border: 1.5px solid #ded8cb !important;
  padding: 1.4rem !important;
  background: #ffffff;
}
.p-card-unit:hover {
  border-color: #0c2117 !important;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.09) !important;
}

.p-card-img-wrap {
  border-radius: 0 !important;
  background: #fdfcf9 !important;
  border: 1px solid #ede8dc !important;
}

/* Grid Interrupter Strip inside Catalog */
.catalog-grid-break-banner {
  grid-column: 1 / -1;
  background: #0c2117;
  color: #ffffff;
  padding: 2.2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.catalog-grid-break-banner h4 {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem 0;
  text-transform: uppercase;
}
.catalog-grid-break-banner p {
  color: #c9d8ce;
  font-size: 0.92rem;
  margin: 0;
  max-width: 620px;
}
.break-action-btn {
  background: #c84d2b;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.75rem 1.4rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  letter-spacing: 0.04em;
}
.break-action-btn:hover {
  background: #ffffff;
  color: #0c2117;
}

/* 6. EDITORIAL PHILOSOPHY COMPARISON TABLE */
.editorial-philosophy-wrap {
  padding: 5rem 1.5rem !important;
  max-width: 1280px !important;
  margin: 0 auto;
}
.philosophy-card-inner {
  border-radius: 0 !important;
  border: 2px solid #0c2117 !important;
  background: #ffffff !important;
  box-shadow: 0 24px 60px rgba(12, 33, 23, 0.08) !important;
}

.phil-table-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: 0.86rem;
}
.phil-table-compare th,
.phil-table-compare td {
  padding: 0.75rem 1rem;
  border: 1px solid #ded8cb;
  text-align: left;
}
.phil-table-compare th {
  background: #0c2117;
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}
.phil-table-compare tr:nth-child(even) {
  background: #faf8f4;
}
.phil-table-compare .col-paws {
  font-weight: 800;
  color: #1e703f;
}
.phil-table-compare .col-mass {
  color: #8c968f;
}

/* 7. SWISS VETERINARY INSTRUMENT (CALCULATOR) */
.calc-panel-card {
  border-radius: 0 !important;
  border: 2px solid #0c2117 !important;
  background: #ffffff !important;
}
.calc-result-box {
  border-radius: 0 !important;
  background: #0c2117 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 8. ARCHITECTURAL SHOWROOMS DIRECTORY */
.stores-grid-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.store-item-card {
  border-radius: 0 !important;
  border: 1.5px solid #ded8cb !important;
  background: #ffffff;
}
.store-item-card:hover {
  border-color: #0c2117 !important;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.08);
}

/* RESPONSIVE MASTER OVERRIDES FOR AVANT-GARDE ATELIER */
@media (max-width: 1100px) {
  .hero-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .bestsellers-four-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .persona-grid-five {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .status-center {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-haute-headline {
    font-size: 2.5rem !important;
  }
  .hero-broadside-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .bestsellers-four-grid {
    grid-template-columns: 1fr !important;
  }
  .persona-grid-five {
    grid-template-columns: 1fr !important;
  }
  .catalog-grid-break-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .floating-specimen-card {
    right: 0 !important;
    bottom: -15px !important;
  }
}

/* ===================================================
   MASTER ARCHIVAL SPECIMEN CARDS (FLAGSHIP ATELIER)
   =================================================== */

.p-card-unit {
  background: #ffffff !important;
  border-radius: 4px !important;
  border: 1.5px solid #ded8cb !important;
  padding: 1.35rem !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.p-card-unit:hover {
  border-color: #0c2117 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -10px rgba(12, 33, 23, 0.14) !important;
}

/* 1. Architectural Header */
.p-card-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  gap: 0.5rem;
}

.p-card-lot-stamp {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.p-lot-no {
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #737c77;
  letter-spacing: 0.08em;
}

.specimen-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1.2;
}
.specimen-badge.disc {
  background: #c84d2b;
  color: #ffffff;
}
.specimen-badge.hit {
  background: #0c2117;
  color: #f5f4ef;
}
.specimen-badge.holistic {
  background: #1e3d2f;
  color: #d8eedb;
}

.p-fav-toggle {
  background: #faf8f4;
  border: 1px solid #ded8cb;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #7a827d;
  font-size: 0.95rem;
  transition: all 0.16s ease;
  flex-shrink: 0;
}
.p-fav-toggle:hover {
  border-color: #c84d2b;
  color: #c84d2b;
  background: #ffffff;
  transform: scale(1.08);
}
.p-fav-toggle.active {
  background: #fff0ec;
  border-color: #c84d2b;
  color: #c84d2b;
}

/* 2. Studio Lighting Specimen Stage */
.p-card-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fbfaf7;
  border: 1px solid #ede8dc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 0.85rem;
}

.stage-corner {
  position: absolute;
  font-family: monospace;
  font-size: 11px;
  color: #beb6a3;
  pointer-events: none;
  line-height: 1;
}
.stage-corner.tl { top: 6px; left: 8px; }
.stage-corner.br { bottom: 6px; right: 8px; }

.p-stage-img-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.p-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-card-unit:hover .p-card-img {
  transform: scale(1.08);
}

.p-stage-warehouse-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(12, 33, 23, 0.88);
  backdrop-filter: blur(4px);
  color: #e1ede5;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.p-stage-hover-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  background: rgba(12, 33, 23, 0.92);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 4px;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
  white-space: nowrap;
}
.p-card-unit:hover .p-stage-hover-lens {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* 3. Clinical Biomarkers Strip */
.p-biomarkers-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0.85rem;
}
.biomarker-pill {
  background: #f4f1eb;
  border: 1px solid #e5e0d5;
  color: #2d3832;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 3px;
  line-height: 1.25;
}

/* 4. Content & Meta */
.p-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p-meta-brand-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
  gap: 0.5rem;
}
.p-brand-verified {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #1e3d2f;
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-brand-verified strong {
  font-weight: 800;
}
.v-tick {
  color: #15803d;
  font-size: 0.65rem;
  font-weight: 900;
}

.p-rating-capsule {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  background: #fff8eb;
  border: 1px solid #fde68a;
  padding: 2px 6px;
  border-radius: 3px;
}
.p-star-ico {
  color: #d97706;
  font-size: 0.8rem;
}
.p-rating-num {
  font-weight: 800;
  color: #92400e;
}
.p-reviews-num {
  color: #b45309;
  font-size: 0.7rem;
}

.p-card-title {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #0c2117 !important;
  margin-bottom: 0.4rem !important;
  cursor: pointer;
  transition: color 0.16s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.7em;
}
.p-card-title:hover {
  color: #c84d2b !important;
}

.p-card-subtitle {
  font-size: 0.78rem;
  color: #667069;
  line-height: 1.45;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.9em;
}

/* Target Persona Box (Для кого) */
.p-card-target-box {
  background: #f5f8f6;
  border-left: 2.5px solid #1e3d2f;
  padding: 6px 10px;
  margin-bottom: 0.85rem;
  border-radius: 0 4px 4px 0;
}
.target-badge {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  color: #1e3d2f;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.target-desc {
  font-size: 0.75rem;
  color: #37433c;
  line-height: 1.35;
  margin: 0;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tactical Variants Switcher */
.p-variant-segment {
  margin-bottom: 1rem;
}
.variant-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  color: #7a827d;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.variant-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.variant-chip {
  background: #ffffff;
  border: 1px solid #ded8cb;
  padding: 5px 9px;
  border-radius: 3px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.variant-chip:hover {
  border-color: #0c2117;
  background: #faf9f6;
}
.variant-chip.active {
  background: #0c2117 !important;
  border-color: #0c2117 !important;
  color: #ffffff !important;
}
.variant-chip.active .v-econ {
  color: #fed7aa;
}
.v-w {
  font-weight: 800;
}
.v-econ {
  font-size: 0.65rem;
  color: #84532b;
  font-weight: 600;
}

.p-single-pack-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  margin-bottom: 0.9rem;
  color: #5a635d;
}
.pack-val {
  color: #0c2117;
  font-weight: 800;
}
.pack-tag {
  background: #eef4f0;
  color: #1e3d2f;
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: auto;
}

/* 5. Master Commerce Zone */
.p-commerce-zone {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid #ede8dc;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.p-pricing-cluster {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.p-price-main-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.p-price-val {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.45rem;
  font-weight: 900;
  color: #0c2117;
  letter-spacing: -0.03em;
  line-height: 1;
}
.p-old-price-val {
  font-size: 0.82rem;
  color: #9aa29c;
  text-decoration: line-through;
  font-weight: 600;
}
.p-discount-pill {
  background: #fff0ec;
  color: #c84d2b;
  border: 1px solid #ffd4c7;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.p-actions-cluster {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
}

.p-quick-dossier-btn {
  background: #fbfaf7;
  border: 1.5px solid #ded8cb;
  color: #0c2117;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 0.65rem 0.95rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.16s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.p-quick-dossier-btn:hover {
  border-color: #0c2117;
  background: #ffffff;
}

.p-master-cart-btn {
  background: #0c2117;
  border: 1.5px solid #0c2117;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.65rem 1.15rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.p-master-cart-btn:hover {
  background: #c84d2b;
  border-color: #c84d2b;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(200, 77, 43, 0.3);
}
.p-master-cart-btn.added-success {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.p-dispatch-assurance {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: #727c76;
  font-weight: 600;
  padding-top: 0.2rem;
}

@media (max-width: 380px) {
  .p-actions-cluster {
    grid-template-columns: 1fr !important;
  }
  .p-quick-dossier-btn {
    text-align: center !important;
  }
}


/* =========================================================================
   2026 DIGITAL PRODUCT ATELIER ENGINE (3D, SPECULAR, X-RAY, DOCK)
   ========================================================================= */

/* 1. Atelier Status Bar 2026 Additions */
.status-sound-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status-sound-btn:hover {
  background: #ffffff;
  color: #0c2117;
}

.dispatch-countdown {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: #d1fae5;
}
.dispatch-countdown strong {
  color: #fef08a;
  font-family: 'Space Mono', monospace, sans-serif;
}

/* 2. 3D Spatial Card & Holographic Specular Sheen */
.p-card-unit {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Dynamic Radial Specular Sheen */
.p-card-unit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 260px at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(255, 255, 255, 0.38), transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 10;
}
.p-card-unit:hover::before {
  opacity: 1;
}

.p-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.p-compare-toggle {
  background: #faf8f4;
  border: 1px solid #ded8cb;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  color: #555e58;
  transition: all 0.16s ease;
}
.p-compare-toggle:hover {
  border-color: #0c2117;
  background: #ffffff;
  transform: scale(1.08);
}
.p-compare-toggle.active {
  background: #0c2117;
  border-color: #0c2117;
  color: #ffffff;
}

/* 3. X-Ray Formula Mode */
.xray-toggle-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(12, 33, 23, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.05em;
  transition: all 0.18s ease;
}
.xray-toggle-pill:hover {
  background: #c84d2b;
  border-color: #c84d2b;
}

.stage-view-xray {
  width: 100%;
  height: 100%;
  background: #0c2117;
  color: #ffffff;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  border-radius: 3px;
  animation: xrayFadeIn 0.25s ease-out;
}
@keyframes xrayFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.xray-title {
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #86efac;
  margin-bottom: 0.2rem;
}
.xray-metric-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.xray-m-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 700;
  color: #cbd5e1;
}
.xray-m-head strong {
  color: #ffffff;
}
.xray-m-head .clean {
  color: #4ade80;
}
.xray-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.xray-bar-fill.protein { background: #22c55e; height: 100%; border-radius: 2px; }
.xray-bar-fill.fat { background: #38bdf8; height: 100%; border-radius: 2px; }
.xray-bar-fill.zero { background: #a855f7; height: 100%; border-radius: 2px; }
.xray-fediaf-tag {
  font-size: 0.64rem;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 0.3rem;
}

/* 4. 2026 Daily Cost Micro-Calculator */
.daily-cost-calc-box {
  background: #f4f6f3;
  border: 1px dashed #cad5ce;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 0.85rem;
}
.calc-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.calc-lbl {
  font-size: 0.62rem;
  font-weight: 800;
  color: #485c50;
  letter-spacing: 0.06em;
}
.pet-weight-chips {
  display: flex;
  gap: 3px;
}
.p-wt-chip {
  background: #ffffff;
  border: 1px solid #cad5ce;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #1e3d2f;
  cursor: pointer;
  transition: all 0.14s ease;
}
.p-wt-chip:hover {
  border-color: #0c2117;
}
.p-wt-chip.active {
  background: #1e3d2f;
  color: #ffffff;
  border-color: #1e3d2f;
}

.calc-result-bar {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.74rem;
  color: #1f2937;
  flex-wrap: wrap;
}
.day-cost-val strong {
  color: #c84d2b;
  font-weight: 900;
  font-size: 0.88rem;
}
.day-coffee-tag {
  font-size: 0.65rem;
  color: #6b7280;
  font-style: italic;
  margin-left: auto;
}

/* 5. 2026 Floating Compare Dock */
.compare-floating-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #0c2117;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 9999;
  width: auto;
  max-width: 90vw;
  animation: slideDockUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideDockUp {
  from { transform: translate(-50%, 40px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.compare-dock-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.compare-dock-info {
  display: flex;
  flex-direction: column;
}
.dock-badge {
  font-size: 0.62rem;
  font-weight: 800;
  color: #86efac;
  letter-spacing: 0.08em;
}
.dock-title {
  font-size: 0.8rem;
  font-weight: 800;
}

.compare-dock-thumbs {
  display: flex;
  gap: 6px;
}
.dock-thumb {
  width: 38px;
  height: 38px;
  background: #ffffff;
  border-radius: 4px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dock-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compare-dock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dock-view-btn {
  background: #c84d2b;
  color: #ffffff;
  border: none;
  padding: 0.55rem 1.1rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.16s ease;
}
.dock-view-btn:hover {
  background: #ffffff;
  color: #0c2117;
}
.dock-clear-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #cbd5e1;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.dock-clear-btn:hover {
  border-color: #ffffff;
  color: #ffffff;
}

/* 6. Compare Modal */
.compare-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 33, 23, 0.75);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.compare-modal-window {
  background: #ffffff;
  width: 100%;
  max-width: 900px;
  border-radius: 6px;
  padding: 2rem;
  border: 2px solid #0c2117;
  max-height: 90vh;
  overflow-y: auto;
}
.compare-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.compare-modal-header h3 {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0.2rem 0 0 0;
}
.compare-close-btn {
  background: #f4f1eb;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-matrix-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-matrix-table th,
.compare-matrix-table td {
  border: 1px solid #ded8cb;
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.84rem;
}
.compare-matrix-table th {
  background: #fbf9f4;
}
.c-head-prod {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.c-head-prod img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.c-head-price {
  font-weight: 900;
  color: #c84d2b;
}


.bestseller-card, .persona-arch-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.bestseller-card::before, .persona-arch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 260px at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(255, 255, 255, 0.35), transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 10;
}
.bestseller-card:hover::before, .persona-arch-card:hover::before {
  opacity: 1;
}


/* =========================================================================
   TASK A+D REFINEMENTS: VIEW TRANSITIONS + SPRING PHYSICS + CART STICKY
   ========================================================================= */

/* View Transition CSS for catalog grid morph */
@view-transition { navigation: auto; }

::view-transition-old(catalog-grid),
::view-transition-new(catalog-grid) {
  animation-duration: 0.26s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
::view-transition-old(catalog-grid) {
  animation-name: vtOldFade;
}
::view-transition-new(catalog-grid) {
  animation-name: vtNewSlide;
}
@keyframes vtOldFade {
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes vtNewSlide {
  from { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Spring Physics Buttons - all CTAs */
.p-master-cart-btn,
.ref-btn-coral,
.ref-btn-sky,
.ref-btn-white,
.dock-view-btn,
.p-quick-dossier-btn,
.cart-checkout-submit-btn,
.p-add-cart-btn,
.bs-cart-btn {
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
              background 0.18s ease,
              box-shadow 0.3s ease,
              border-color 0.18s ease !important;
}

.p-master-cart-btn:active,
.ref-btn-coral:active,
.dock-view-btn:active {
  transform: scale(0.955) !important;
}

/* Cart Drawer Sticky Checkout Footer */
.cart-drawer-panel {
  display: flex;
  flex-direction: column;
}
.cart-items-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.cart-sticky-footer {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 2px solid #0c2117;
  padding: 1rem 1.2rem;
  z-index: 10;
  box-shadow: 0 -8px 24px rgba(12, 33, 23, 0.12);
}
.cart-sticky-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
.cart-sticky-total-label {
  font-size: 0.78rem;
  color: #5a635d;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cart-sticky-total-amount {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.45rem;
  font-weight: 900;
  color: #0c2117;
  letter-spacing: -0.03em;
}
.cart-checkout-submit-btn {
  width: 100%;
  background: #0c2117;
  color: #ffffff;
  border: none;
  padding: 1rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.cart-checkout-submit-btn:hover {
  background: #c84d2b;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(200, 77, 43, 0.35);
}

/* Free delivery progress bar enhancement */
.free-ship-bar-track {
  background: #f0ede5;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.free-ship-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3d2f, #22c55e);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  width: 0%;
}
.free-ship-note {
  font-size: 0.76rem;
  color: #5a635d;
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* Price Range Filter Slider */
.price-range-wrap {
  padding: 1rem 0 0.5rem;
}
.price-range-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.price-range-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0c2117;
  letter-spacing: 0.05em;
}
.price-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #ded8cb;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.price-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #0c2117;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.price-range-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #5a635d;
  margin-top: 6px;
}

/* Active Filters Summary Bar */
.catalog-active-filters-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  min-height: 28px;
}
.active-filter-chip {
  background: #0c2117;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.04em;
}
.active-filter-chip .chip-remove {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.75rem;
}
.active-filter-chip .chip-remove:hover {
  opacity: 1;
}


/* ==========================================================================
   2026 ELEVATED DESIGN & COMMERCE ACCELERATORS
   ========================================================================== */

/* 1. Floating Real-Time Atelier Activity Ticker */
.live-activity-ticker {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 850;
  max-width: 380px;
  background: rgba(12, 33, 23, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #ffffff;
  padding: 0.75rem 1rem 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-main, 'Manrope', sans-serif);
  animation: slideTickerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes slideTickerIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.live-activity-ticker.dismissed {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
}
.ticker-indicator {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  margin-top: 4px;
}
.ticker-pulse-core {
  position: absolute;
  inset: 0;
  background: #22c55e;
  border-radius: 50%;
}
.ticker-pulse-ring {
  position: absolute;
  inset: -3px;
  border: 2px solid #22c55e;
  border-radius: 50%;
  animation: pulseTickerRing 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes pulseTickerRing {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.ticker-body {
  flex: 1;
  min-width: 0;
}
.ticker-lead {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ticker-text {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #fbf9f4;
  margin: 0;
  font-weight: 600;
  transition: opacity 0.25s ease;
}
.ticker-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.ticker-close-btn:hover {
  color: #ffffff;
}

@media (max-width: 640px) {
  .live-activity-ticker {
    bottom: 5.2rem;
    left: 0.8rem;
    right: 0.8rem;
    max-width: none;
  }
}

/* 2. 1-Click Fast Order Modal Backdrop & Sheet */
.fast-order-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 33, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.fast-order-sheet {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  border: 1px solid rgba(12, 33, 23, 0.12);
  box-shadow: 0 24px 64px rgba(12, 33, 23, 0.25);
  padding: 1.5rem;
  position: relative;
  animation: slideSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideSheetUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.fast-order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ebe6dd;
}
.fast-order-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #0c2117;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
}
.fast-order-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #5a635d;
  cursor: pointer;
  padding: 0 4px;
}
.fast-order-product-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: #fbf9f4;
  padding: 0.85rem;
  border-radius: 8px;
  border: 1px solid #e3dec3;
  margin-bottom: 1.2rem;
}
.fast-prod-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px;
}
.fast-prod-details {
  flex: 1;
  min-width: 0;
}
.fast-prod-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0c2117;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fast-prod-meta {
  font-size: 0.76rem;
  color: #5a635d;
  display: flex;
  gap: 8px;
  align-items: center;
}
.fast-prod-price {
  font-weight: 800;
  color: #0c2117;
  font-size: 0.95rem;
}
.fast-input-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0c2117;
  margin-bottom: 6px;
}
.fast-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1.5px solid #0c2117;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.fast-input:focus {
  border-color: #d46852;
  box-shadow: 0 0 0 3px rgba(212, 104, 82, 0.15);
}
.fast-order-perks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0.9rem 0 1.2rem;
  font-size: 0.74rem;
  color: #3b4540;
}
.fast-submit-btn {
  width: 100%;
  padding: 0.85rem !important;
  font-size: 0.9rem !important;
}
.fast-order-success {
  text-align: center;
  padding: 1.5rem 0;
}
.fast-success-paw {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

/* 3. Express 1-Click Button on Product Cards */
.p-express-oneclick-btn {
  background: transparent;
  border: 1px solid #0c2117;
  color: #0c2117;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.62rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.p-express-oneclick-btn:hover {
  background: #0c2117;
  color: #ffffff;
}
.p-express-oneclick-btn:active {
  transform: scale(0.95);
}

/* 4. In-Cart Upsell Micro-Carousel ("Часто замовляють разом") */
.cart-upsell-section {
  padding: 0.85rem 1.2rem;
  background: #f7f5ed;
  border-top: 1px dashed #ded8cb;
  border-bottom: 1px dashed #ded8cb;
}
.cart-upsell-header {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0c2117;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-upsell-list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.cart-upsell-item {
  flex: 0 0 160px;
  background: #ffffff;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #e3dec3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-upsell-thumb {
  width: 100%;
  height: 70px;
  object-fit: contain;
  margin-bottom: 4px;
}
.cart-upsell-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0c2117;
  line-height: 1.2;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-upsell-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.cart-upsell-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0c2117;
}
.cart-upsell-add-btn {
  background: #0c2117;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.cart-upsell-add-btn:hover {
  background: #d46852;
}

/* 5. Free Shipping Milestone Celebratory Shimmer */
.cart-progress-fill.free-shipping-unlocked {
  background: linear-gradient(90deg, #16a34a, #22c55e, #16a34a);
  background-size: 200% 100%;
  animation: celebrateShimmer 2s linear infinite;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}
@keyframes celebrateShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 6. Keyboard Shortcut Badge in Search [ ⌘K ] */
.search-kbd-shortcut {
  position: absolute;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: #ece8dd;
  color: #5a635d;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #d4cebe;
  pointer-events: none;
  display: inline-block;
}
@media (max-width: 768px) {
  .search-kbd-shortcut {
    display: none;
  }
}


/* Modal 1-Click Fast Order Button */
.ref-btn-modal-oneclick {
  background: transparent;
  border: 1.5px solid #0c2117;
  color: #0c2117;
  font-family: var(--font-main, 'Manrope', sans-serif);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.ref-btn-modal-oneclick:hover {
  background: #0c2117;
  color: #ffffff;
}
.ref-btn-modal-oneclick:active {
  transform: scale(0.97);
}


/* ==========================================================================
   KINETIC LUXURY ATELIER MARQUEE
   ========================================================================== */
.atelier-kinetic-marquee {
  background: #0c2117;
  color: #fbf9f4;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  user-select: none;
}
.atelier-kinetic-marquee::before,
.atelier-kinetic-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.atelier-kinetic-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #0c2117, transparent);
}
.atelier-kinetic-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #0c2117, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 2.5rem;
  animation: scrollMarquee 35s linear infinite;
  will-change: transform;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@keyframes scrollMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.m-item {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbf9f4;
  opacity: 0.92;
}

/* ==========================================================================
   CLINICAL LONGEVITY PILLARS
   ========================================================================== */
.longevity-pillars-section {
  padding: 4.5rem 1.5rem;
  border-top: 1px solid #e3dec3;
}
.longevity-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.longevity-header h2 {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 2.1rem;
  font-weight: 800;
  color: #0c2117;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0.8rem;
}
.longevity-header p {
  font-size: 1rem;
  color: #5a635d;
  line-height: 1.5;
}
.longevity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
@media (max-width: 960px) {
  .longevity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .longevity-grid {
    grid-template-columns: 1fr;
  }
}
.longevity-card {
  background: #ffffff;
  border: 1px solid #e3dec3;
  border-radius: 10px;
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.longevity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.08);
  border-color: #0c2117;
}
.long-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d46852;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.long-badge.clean { color: #16a34a; }
.long-badge.joints { color: #0284c7; }
.long-badge.omega { color: #d97706; }

.long-gauge-wrap {
  width: 100%;
  height: 4px;
  background: #f1ede3;
  border-radius: 2px;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.long-gauge-fill {
  height: 100%;
  background: #d46852;
  border-radius: 2px;
}
.long-gauge-fill.clean { background: #16a34a; }
.long-gauge-fill.joints { background: #0284c7; }
.long-gauge-fill.omega { background: #d97706; }

.longevity-card h3 {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0c2117;
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.longevity-card p {
  font-size: 0.82rem;
  color: #5a635d;
  line-height: 1.45;
  margin: 0 0 1.2rem;
  flex: 1;
}
.long-action-link {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0c2117;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.longevity-card:hover .long-action-link {
  color: #d46852;
}

/* ==========================================================================
   ORDER STATUS TRACKING MODAL
   ========================================================================== */
.order-tracker-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 33, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.order-tracker-sheet {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  border: 1px solid rgba(12, 33, 23, 0.12);
  box-shadow: 0 24px 64px rgba(12, 33, 23, 0.25);
  padding: 1.6rem;
  position: relative;
  animation: slideSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.tracker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #ebe6dd;
}
.tracker-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: #0c2117;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}
.tracker-head h3 {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0c2117;
  margin: 0;
}
.tracker-close-btn {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #5a635d;
  cursor: pointer;
  padding: 0 4px;
}
.tracker-search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.tracker-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1.5px solid #0c2117;
  font-size: 0.85rem;
  font-weight: 600;
  outline: none;
}
.tracker-search-btn {
  padding: 0.75rem 1.4rem !important;
  font-size: 0.85rem !important;
}
.order-summary-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fbf9f4;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  border: 1px solid #e3dec3;
  margin-bottom: 1.2rem;
  font-size: 0.8rem;
}
.track-status-pill.live {
  background: #22c55e;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.pipeline-stepper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding-left: 1rem;
}
.pipeline-stepper::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 10px;
  bottom: 25px;
  width: 2px;
  background: #e3dec3;
}
.step-node {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}
.step-marker {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ded8cb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #5a635d;
  flex-shrink: 0;
}
.step-node.active .step-marker {
  background: #0c2117;
  border-color: #0c2117;
  color: #ffffff;
}
.step-node.current .step-marker {
  background: #d46852;
  border-color: #d46852;
  color: #ffffff;
  animation: pulseMarker 1.5s infinite;
}
@keyframes pulseMarker {
  0% { box-shadow: 0 0 0 0 rgba(212, 104, 82, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(212, 104, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 104, 82, 0); }
}
.step-info {
  flex: 1;
  min-width: 0;
}
.step-info strong {
  display: block;
  font-size: 0.85rem;
  color: #0c2117;
  line-height: 1.25;
}
.step-info small {
  display: block;
  font-size: 0.72rem;
  color: #5a635d;
  margin-top: 2px;
}
.step-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a635d;
  white-space: nowrap;
}
.tracker-footer-actions {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid #ebe6dd;
  text-align: center;
}
.tracker-tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0c2117;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.tracker-tg-btn:hover {
  color: #d46852;
}


/* ==========================================================================
   MOBILE SCREEN CLEARANCE & HARMONY (NO OVERLAY WARS)
   ========================================================================== */
@media (max-width: 640px) {
  /* 1. Hide floating live activity ticker on small mobile screens to prevent obscuring content */
  .live-activity-ticker {
    display: none !important;
  }

  /* 2. Floating compare dock on mobile: neat capsule above mobile bar */
  .compare-floating-dock {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(12, 33, 23, 0.25) !important;
  }

  /* 3. Mobile bottom bar with safe area padding */
  .mobile-bottom-bar {
    z-index: 990;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    height: auto;
  }

  /* 4. Streamlined catalog cards on mobile */
  .p-card-unit {
    padding: 1rem 0.9rem !important;
  }
  .p-card-stage {
    min-height: 160px !important;
  }
}

/* Benefit pill styling in streamlined cards */
.p-card-benefit-row {
  margin-bottom: 0.65rem;
}
.p-benefit-pill {
  font-size: 0.7rem;
  font-weight: 700;
  color: #0c2117;
  background: #f1ede3;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   QUIET LUXURY OVERHAUL: NO AI SLOP, NO NOISE, PURE REFINED COMMERCE
   ========================================================================== */

/* 1. Body & Foundation: Warm natural cream & charcoal */
body {
  background-color: #fbf9f5 !important;
  color: #1a1c19 !important;
}

/* 2. Top Status Bar: Quiet, respectful, zero sci-fi */
.atelier-status-bar {
  background: #0c2117 !important;
  color: #fbf9f4 !important;
  padding: 0.55rem 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.status-tag, .status-coords {
  display: none !important;
}
.status-time {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #fbf9f4 !important;
  letter-spacing: 0.02em !important;
}
.status-hours {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-left: 6px;
}
.dispatch-countdown {
  font-size: 0.76rem !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.status-sound-btn {
  display: none !important;
}

/* 3. Hero Section: Confident editorial balance */
.hero-haute-headline {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
}
.hero-broadside-meta {
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  color: #5a635d !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2rem !important;
}
.stage-corner {
  display: none !important;
}
.p-lot-no {
  display: none !important;
}

/* 4. Product Cards: Generous breathing room, authentic boutique feel */
.p-card-unit {
  background: #ffffff !important;
  border: 1px solid #ebe6dc !important;
  border-radius: 8px !important;
  padding: 1.3rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s !important;
}
.p-card-unit:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(12, 33, 23, 0.06) !important;
  border-color: #0c2117 !important;
}
.p-card-stage {
  background: #faf8f3 !important;
  border-radius: 6px !important;
  border: 1px solid #f1ece1 !important;
  min-height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.2rem !important;
}
.p-card-img {
  max-height: 180px !important;
  object-fit: contain !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.p-card-unit:hover .p-card-img {
  transform: scale(1.05) !important;
}
.p-card-title {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0c2117 !important;
  line-height: 1.3 !important;
  margin: 0.4rem 0 0.5rem !important;
}
.p-benefit-pill {
  background: #f4efe4 !important;
  color: #3f4742 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.p-main-price {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0c2117 !important;
}

/* 5. Hide fake liveActivityTicker completely */
.live-activity-ticker {
  display: none !important;
}


/* ==========================================================================
   100% PRODUCT COMPLETION: STORES, FAQ, ARTICLE READER, LOYALTY SIMULATOR
   ========================================================================== */

/* Stores Section Polish */
.store-item-card {
  background: #ffffff;
  border: 1px solid #ebe6dc;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s;
}
.store-item-card:hover {
  transform: translateY(-4px);
  border-color: #0c2117;
  box-shadow: 0 12px 30px rgba(12, 33, 23, 0.06);
}
.store-address {
  font-weight: 700;
  color: #1a1c19;
  font-size: 0.95rem;
  margin: 0.3rem 0;
}
.store-metro {
  font-size: 0.78rem;
  color: #5a635d;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.9rem;
}
.metro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.metro-dot.blue { background: #2563eb; }
.metro-dot.green { background: #16a34a; }
.store-phone {
  color: #0c2117;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
}
.store-phone:hover {
  color: #b84224;
}
.store-map-link {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed #ded8cb;
  color: #0c2117;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.store-map-link:hover {
  color: #b84224;
}

/* Loyalty Simulator */
.loyalty-simulator-box {
  background: #ffffff;
  border: 1px solid #e3dec3;
  border-radius: 8px;
  padding: 1.4rem;
  margin: 1.4rem 0;
  max-width: 540px;
}
.loyalty-sim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.loyalty-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #ded8cb;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin-bottom: 1.2rem;
}
.loyalty-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: #0c2117;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.loyalty-rewards-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: #fbf9f5;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border: 1px solid #ebe6dc;
}
.l-reward-col {
  display: flex;
  flex-direction: column;
}
.l-lbl {
  font-size: 0.72rem;
  color: #5a635d;
  font-weight: 600;
}
.l-val {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.2rem;
  color: #0c2117;
}

/* FAQ Accordion */
.faq-section-wrap {
  padding: 4.5rem 1.5rem;
  border-top: 1px solid #ebe6dc;
}
.faq-accordion-container {
  max-width: 780px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-accordion-item {
  background: #ffffff;
  border: 1px solid #ebe6dc;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-accordion-item[open] {
  border-color: #0c2117;
  box-shadow: 0 8px 24px rgba(12, 33, 23, 0.05);
}
.faq-question {
  padding: 1.2rem 1.4rem;
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: #0c2117;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.faq-accordion-item[open] .faq-arrow {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 1.4rem 1.3rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #4a544e;
  border-top: 1px solid #f4efe4;
  padding-top: 0.9rem;
}

/* Article Reader Modal */
.article-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 33, 23, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn 0.2s ease;
}
.article-sheet {
  background: #ffffff;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(12, 33, 23, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.article-sheet-head {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid #ebe6dc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.art-meta-tags {
  display: flex;
  gap: 8px;
}
.art-tag-pill {
  font-size: 0.72rem;
  font-weight: 800;
  background: #0c2117;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
}
.art-read-pill {
  font-size: 0.72rem;
  color: #5a635d;
  font-weight: 600;
  padding: 3px 6px;
}
.art-close-btn {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #5a635d;
  cursor: pointer;
}
.article-scroll-body {
  padding: 1.8rem;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.art-headline {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 1.65rem;
  font-weight: 800;
  color: #0c2117;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.art-author-row {
  font-size: 0.78rem;
  color: #5a635d;
  font-weight: 600;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #ebe6dc;
}
.art-lead-para {
  font-size: 1rem;
  line-height: 1.55;
  color: #1a1c19;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.art-content-blocks h4 {
  font-size: 1.05rem;
  color: #0c2117;
  margin: 1.2rem 0 0.5rem;
}
.art-content-blocks p, .art-content-blocks li {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #3b4540;
  margin-bottom: 0.8rem;
}
.art-content-blocks ul {
  padding-left: 1.2rem;
}
.article-steps-table {
  background: #fbf9f5;
  border: 1px solid #e3dec3;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.a-step-row {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.82rem;
}
.a-step-row .step-num {
  font-weight: 800;
  color: #0c2117;
  min-width: 70px;
}
.a-step-row.highlight {
  background: #eef8f1;
  padding: 4px 8px;
  border-radius: 4px;
}
.art-recommendation-card {
  margin-top: 1.8rem;
  background: #f4efe4;
  border-radius: 8px;
  padding: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.art-rec-info strong {
  display: block;
  font-size: 0.88rem;
  color: #0c2117;
}
.art-rec-info p {
  font-size: 0.78rem;
  color: #5a635d;
  margin: 2px 0 0;
}


/* ==========================================================================
   TARGETED LUXURY FINISHING TOUCHES (v23.0 - BESPOKE BOUTIQUE ELEVATION)
   ========================================================================== */

/* 1. PERSONA HUB REFINEMENTS */
.persona-card-item {
  background: #ffffff !important;
  border: 1.5px solid #ebe5d8 !important;
  border-radius: 12px !important;
  padding: 1.35rem 1.15rem !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(12, 33, 23, 0.03) !important;
}
.persona-card-item:hover {
  transform: translateY(-4px) !important;
  border-color: #0c2117 !important;
  box-shadow: 0 14px 28px rgba(12, 33, 23, 0.07) !important;
}
.persona-card-item.active {
  background: #faf8f3 !important;
  border-color: #0c2117 !important;
  box-shadow: 0 4px 16px rgba(12, 33, 23, 0.06) !important;
}
.p-card-header-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.6rem;
}
.p-badge-num {
  font-family: var(--font-display, 'Onest', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: #b84224;
  letter-spacing: -0.02em;
}
.p-bio-metric {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #69736c !important;
  background: #f2eee6 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}
.persona-card-item h3 {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0c2117 !important;
  margin: 0.2rem 0 0.4rem !important;
  line-height: 1.25 !important;
}
.persona-card-item p {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: #5a635d !important;
  margin-bottom: 0.9rem !important;
  flex-grow: 1 !important;
}
.persona-pill-link {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #0c2117 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.18s, transform 0.18s !important;
}
.persona-card-item:hover .persona-pill-link {
  color: #b84224 !important;
  transform: translateX(3px) !important;
}

/* 2. BESTSELLERS SPOTLIGHT CARDS */
.bestseller-card {
  background: #ffffff !important;
  border: 1.5px solid #ebe5d8 !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s !important;
  box-shadow: 0 3px 12px rgba(12, 33, 23, 0.03) !important;
}
.bestseller-card:hover {
  transform: translateY(-5px) !important;
  border-color: #0c2117 !important;
  box-shadow: 0 16px 36px rgba(12, 33, 23, 0.08) !important;
}
.bs-badge {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 2 !important;
  background: #0c2117 !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.bs-badge.green { background: #1e5e3a !important; color: #ffffff !important; }
.bs-badge.coral { background: #b84224 !important; color: #ffffff !important; }
.bs-badge.gold { background: #8b6d2e !important; color: #ffffff !important; }
.bs-img-box {
  background: #fbf9f4 !important;
  border-radius: 10px !important;
  border: 1px solid #f0ebe0 !important;
  padding: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 190px !important;
  margin-bottom: 1rem !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.bs-img-box img {
  max-height: 155px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bestseller-card:hover .bs-img-box img {
  transform: scale(1.06) !important;
}
.bs-brand {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #707872 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 2px !important;
}
.bs-title {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0c2117 !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  margin: 2px 0 6px !important;
  transition: color 0.18s !important;
}
.bs-title:hover {
  color: #b84224 !important;
}
.bs-sub {
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  color: #5a635d !important;
  margin-bottom: 1.1rem !important;
  flex-grow: 1 !important;
}
.bs-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  padding-top: 0.8rem !important;
  border-top: 1px solid #f2eee6 !important;
  margin-top: auto !important;
}
.bs-price {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #0c2117 !important;
  letter-spacing: -0.02em !important;
}
.bs-cart-btn {
  background: #0c2117 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.65rem 1.15rem !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s !important;
  flex-shrink: 0 !important;
}
.bs-cart-btn:hover {
  background: #1b4230 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(12, 33, 23, 0.18) !important;
}
.bs-cart-btn:active {
  transform: scale(0.97) !important;
}

/* 3. CATALOG PRODUCT CARDS & VARIANT BUTTONS */
.variant-chip {
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border: 1px solid #ded8cb !important;
  background: #ffffff !important;
  color: #1a1c19 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
}
.variant-chip:hover {
  border-color: #0c2117 !important;
  background: #fbf9f5 !important;
}
.variant-chip.active {
  background: #0c2117 !important;
  color: #ffffff !important;
  border-color: #0c2117 !important;
}
.p-master-cart-btn {
  background: #0c2117 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.03em !important;
  padding: 0.65rem 1rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s !important;
}
.p-master-cart-btn:hover {
  background: #1b4230 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(12, 33, 23, 0.15) !important;
}
.p-express-oneclick-btn {
  background: #f4efe4 !important;
  color: #1a1c19 !important;
  border: 1px solid #e5dfd3 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  padding: 0.65rem 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
}
.p-express-oneclick-btn:hover {
  background: #ebe4d5 !important;
  border-color: #d1c7b1 !important;
}

/* 4. CALCULATOR SLIDER & RESULT ELEVATION */
.calc-panel-card {
  background: #ffffff !important;
  border: 1.5px solid #ebe5d8 !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
  box-shadow: 0 8px 30px rgba(12, 33, 23, 0.04) !important;
}
.calc-range-slider {
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: #ded8cb !important;
  border-radius: 3px !important;
  outline: none !important;
  cursor: pointer !important;
  margin: 0.8rem 0 !important;
}
.calc-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  background: #0c2117 !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
  cursor: pointer !important;
  transition: transform 0.15s !important;
}
.calc-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}
.calc-result-box {
  background: #fbf9f4 !important;
  border: 1.5px solid #e8e2d4 !important;
  border-radius: 12px !important;
  padding: 1.6rem !important;
}
.res-number {
  font-family: var(--font-display, 'Onest', sans-serif) !important;
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: #0c2117 !important;
  letter-spacing: -0.02em !important;
  margin: 0.4rem 0 1rem !important;
}

/* 5. SMOOTH FOCUS & SELECTION STYLES */
::selection {
  background: #ded8cb;
  color: #0c2117;
}
:focus-visible {
  outline: 2px solid #0c2117 !important;
  outline-offset: 2px !important;
}