/* Counter Guard — Design tokens (STONE & EMBER — warm, premium home-goods)
   A single-product silicone counter-protector brand. Warm stone surfaces,
   espresso ink, one ember accent that carries the heat story. Soft, rounded,
   buoyant. Component class names are inherited from the shared Float On build
   (cc- and cc2- prefixes); their VALUES are redefined here for Counter Guard. */
:root {
  /* Surfaces — warm stone paper, cool stone mist */
  --cc-paper: #F5F0E8;   /* warm stone off-white */
  --cc-cream: #EBE3D6;   /* card / alt section */
  --cc-tan:   #E1D8C8;   /* placeholder / muted fill */
  --cc-line:  #E1D8C8;   /* hairlines */
  --cc-mist:  #F1F3F2;   /* cool stone wash */

  /* Ink + accents — espresso + ember */
  --cc-ink:        #221D18;  /* espresso — near-black, dark bands + footer */
  --cc-leather:    #8A5A3C;  /* mid warm brown */
  --cc-leather-2:  #3A2A1E;  /* darkest espresso */
  --cc-mute:       #6B6255;  /* warm grey body text */
  --cc-sage:       #8A8175;

  --cc-rust:  #D9531E;   /* EMBER — primary accent / CTAs / links */
  --cc-gold:  #E4924B;   /* WARM AMBER — secondary accent / marquee / highlights */
  --cc-cactus:#8A5A3C;

  --cc-sunset: linear-gradient(100deg, #F2A64E 0%, #E4702A 52%, #C64A1E 100%);
  --cc-lake:   linear-gradient(180deg, #F1E7D8 0%, #E6D8C4 100%);

  /* Legacy compliance tokens (unused on this site; kept so shared CSS resolves). */
  --cc-warning-yellow: #F2A64E;
  --cc-warning-ink: #221D18;
  --font-compliance: Arial, Helvetica, "Helvetica Neue", sans-serif;

  /* Type — soft optical serif display + friendly grotesque body + mono labels */
  --font-slab: "Fraunces", "Hoefler Text", Georgia, serif;       /* headline display */
  --font-display: "Fraunces", Georgia, serif;                    /* editorial serif */
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;
  --font-eyebrow: "Space Mono", monospace;

  --display-tracking: -0.015em;
  --body-tracking: 0;

  --fo-radius: 18px;
  --fo-radius-lg: 26px;
  --fo-shadow: 0 18px 44px -22px rgba(16,58,60,0.42);
  --fo-shadow-soft: 0 10px 30px -18px rgba(16,58,60,0.35);
}

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--cc-ink);
  background-color: var(--cc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typography */
.cc-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
}
.cc-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-mute);
  font-weight: 400;
}
.cc-mono { font-family: var(--font-mono); }
::selection { background: var(--cc-rust); color: #fff; }

/* Buttons — soft pills */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 700;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  border-radius: 999px;
}
.cc-btn:hover { transform: translateY(-2px); }
.cc-btn-primary { background: var(--cc-ink); color: var(--cc-paper); border-color: var(--cc-ink); }
.cc-btn-primary:hover { background: var(--cc-leather-2); border-color: var(--cc-leather-2); box-shadow: var(--fo-shadow-soft); }
.cc-btn-rust { background: var(--cc-rust); color: #fff; border-color: var(--cc-rust); }
.cc-btn-rust:hover { background: #cf583c; border-color: #cf583c; box-shadow: 0 12px 26px -14px rgba(226,103,74,0.7); }
.cc-btn-gold { background: var(--cc-gold); color: var(--cc-leather-2); border-color: var(--cc-gold); }
.cc-btn-gold:hover { background: #cf7f37; border-color: #cf7f37; box-shadow: var(--fo-shadow-soft); }
.cc-btn-outline { background: transparent; color: var(--cc-ink); border-color: var(--cc-ink); }
.cc-btn-outline:hover { background: var(--cc-ink); color: var(--cc-paper); }
.cc-btn-ghost { background: transparent; color: var(--cc-ink); border-color: transparent; padding: 10px 0; border-radius: 0; }
.cc-btn-ghost:hover { color: var(--cc-rust); }

/* Placeholder image */
.cc-placeholder {
  background: var(--cc-lake);
  display: flex; align-items: center; justify-content: center;
  color: var(--cc-leather-2);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-align: center; padding: 16px;
  border-radius: var(--fo-radius);
}

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

/* ============================================================
   RESPONSIVE LAYOUT (inline styles win → !important overrides)
   ============================================================ */
@media (max-width: 768px) {
  .cc-section { padding-left: 20px !important; padding-right: 20px !important; }
  .cc-section-tall { padding-top: 72px !important; padding-bottom: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 480px) { .cc-section-tall { padding-top: 56px !important; padding-bottom: 48px !important; } }
@media (max-width: 900px) {
  .cc-grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cc-grid-2-narrow { grid-template-columns: 1fr !important; gap: 28px !important; }
}
@media (max-width: 1100px) { .cc-grid-4 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .cc-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }
@media (max-width: 420px)  { .cc-grid-4 { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) { .cc-grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }
@media (max-width: 540px) { .cc-grid-3 { grid-template-columns: 1fr !important; } }
@media (max-width: 768px) {
  .cc-header-row { flex-direction: column !important; align-items: stretch !important; gap: 22px !important; }
  .cc-header-row > * { width: 100% !important; }
}
@media (max-width: 900px) { .cc-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
@media (max-width: 540px) { .cc-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; } }
@media (max-width: 768px) {
  .cc-footer-bottom { grid-template-columns: 1fr !important; gap: 22px !important; }
  .cc-footer-bottom > :last-child { justify-content: flex-start !important; }
}
@media (max-width: 640px) {
  .cc-h1-xl { font-size: clamp(40px, 10vw, 60px) !important; line-height: 1.02 !important; }
  .cc-h1-lg { font-size: clamp(34px, 8.5vw, 48px) !important; line-height: 1.04 !important; }
  .cc-h2-lg { font-size: clamp(26px, 6.5vw, 38px) !important; line-height: 1.1 !important; }
  .cc-h2-md { font-size: clamp(24px, 6vw, 34px) !important; }
}
@media (max-width: 540px) {
  .cc-compliance-ticker { padding: 8px 16px !important; font-size: 11px !important; line-height: 1.4 !important; }
  .cc-compliance-warning > div { padding: 14px 20px !important; font-size: 12.5px !important; }
}
@media (max-width: 540px) {
  .cc-gate-card { padding: 32px 22px 24px !important; }
  .cc-gate-card h1 { font-size: 26px !important; }
}
@media (max-width: 900px) { .cc-hero-img { aspect-ratio: 1.5 !important; } }
@media (max-width: 900px) { .cc-map-tile { aspect-ratio: 1.2 !important; } }

/* ============================================================
   NAV — hamburger drawer below 900px
   ============================================================ */
.cc-nav-hamburger {
  display: none; background: transparent; border: 1.5px solid var(--cc-line);
  padding: 8px 10px; cursor: pointer; align-items: center; justify-content: center;
  margin-left: auto; border-radius: 12px;
}
.cc-nav-hamburger-icon { display: block; width: 20px; height: 2px; background: var(--cc-ink); position: relative; border-radius: 2px; }
.cc-nav-hamburger-icon::before, .cc-nav-hamburger-icon::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--cc-ink); border-radius: 2px;
}
.cc-nav-hamburger-icon::before { top: -6px; }
.cc-nav-hamburger-icon::after { top: 6px; }
@media (max-width: 900px) {
  .cc-nav-row { padding: 14px 20px !important; gap: 12px !important; }
  .cc-nav-tagline { display: none !important; }
  .cc-nav-brand-name { font-size: 19px !important; }
  .cc-nav-logo { width: 34px !important; height: 34px !important; }
  .cc-nav-links-desktop { display: none !important; }
  .cc-nav-order-desktop { display: none !important; }
  .cc-nav-hamburger { display: inline-flex !important; }
}
.cc-nav-mobile-drawer {
  display: none; background: var(--cc-paper); border-top: 1px solid var(--cc-line);
  padding: 8px 20px 16px; flex-direction: column;
}
.cc-nav-mobile-drawer.open { display: flex; }
.cc-nav-mobile-drawer a {
  padding: 14px 0; border-bottom: 1px solid var(--cc-line); text-decoration: none;
  color: var(--cc-ink); font-size: 16px; font-family: var(--font-body); font-weight: 600;
}
.cc-nav-mobile-drawer a.active { color: var(--cc-rust); }
.cc-nav-mobile-drawer .cc-mobile-order { margin-top: 14px; padding: 14px 18px; text-align: center; }
@media (min-width: 901px) { .cc-nav-mobile-drawer { display: none !important; } }

/* Real horizontal logo in the nav/footer */
.fo-nav-logo { height: 44px; width: auto; display: block; }
@media (max-width: 900px) { .fo-nav-logo { height: 36px; } }
@media (max-width: 360px) { .fo-nav-logo { height: 32px; } }
@media (max-width: 540px) { .cc-btn { padding: 13px 20px !important; } }

/* ============================================================
   FLOAT ON design system — soft, buoyant. (cc2-* names kept,
   restyled; fo-* are new lakeside primitives.)
   ============================================================ */

/* Big-button + section heading kit */
.cc2-btn-big { padding: 17px 30px !important; font-size: 13px !important; letter-spacing: 0.04em !important; font-weight: 700 !important; }
/* Narrow phones: trim big-button padding so wide labels never cause horizontal scroll (≤320px) */
@media (max-width: 400px) {
  .cc2-btn-big { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 340px) {
  .cc2-rise .cc2-btn-big { width: 100%; }
}
.cc2-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cc-leather);
}
.cc2-kicker::before { content: "≈"; color: var(--cc-rust); font-size: 16px; }

/* Display headline — soft optical serif (Fraunces), mixed case */
.cc2-slab {
  font-family: var(--font-slab);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.cc2-h-giant { font-size: clamp(44px, 6.6vw, 96px); }
.cc2-h-big { font-size: clamp(30px, 4vw, 56px); }
.cc2-h-mid { font-size: clamp(24px, 3vw, 38px); }

.cc2-sunset-text {
  background: var(--cc-sunset);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cc2-seafoam-text { color: var(--cc-gold); }

/* Subtle grain for dark sections (much lighter than the poster source) */
.cc2-grain { position: relative; }
.cc2-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: overlay;
}
.cc2-grain > * { position: relative; z-index: 2; }

/* Entrance — gentle rise */
@keyframes cc2-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.cc2-rise { opacity: 0; animation: cc2-rise 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }

/* Float bob — the signature motion */
@keyframes fo-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fo-bob { animation: fo-bob 5.5s ease-in-out infinite; }
@keyframes fo-bob-slow { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
.fo-bob-slow { animation: fo-bob-slow 8s ease-in-out infinite; }

/* Open/closed status dot */
@keyframes cc2-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,174,107,0.6); } 60% { box-shadow: 0 0 0 7px rgba(47,174,107,0); } }
.cc2-open-dot { width: 9px; height: 9px; border-radius: 50%; background: #2FAE6B; animation: cc2-pulse 2.2s ease infinite; display: inline-block; }
.cc2-closed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-rust); display: inline-block; }

/* Marquee — soft seafoam band */
.cc2-marquee { overflow: hidden; white-space: nowrap; }
.cc2-marquee-track { display: inline-flex; width: max-content; animation: cc2-scroll 38s linear infinite; }
.cc2-marquee:hover .cc2-marquee-track { animation-play-state: paused; }
@keyframes cc2-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cc2-marquee-track, .fo-bob, .fo-bob-slow { animation: none !important; }
  .cc2-rise { animation-duration: 0.01s; }
  html { scroll-behavior: auto; }
}

/* Category cards — soft, rounded, lift on hover (NOT brutalist) */
.cc2-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .cc2-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 540px) { .cc2-cat-grid { grid-template-columns: 1fr; gap: 12px; } }
.cc2-cat-card {
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--cc-line); background: #FFFFFF; border-radius: var(--fo-radius);
  padding: 24px 22px 20px; min-height: 168px;
  text-decoration: none; color: var(--cc-ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  position: relative; overflow: hidden;
}
.cc2-cat-card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--cc-sunset); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.cc2-cat-card:hover { transform: translateY(-6px); box-shadow: var(--fo-shadow); border-color: transparent; }
.cc2-cat-card:hover::before { transform: scaleX(1); }
.cc2-cat-card:hover .cc2-cat-go { color: var(--cc-rust); }
@media (max-width: 540px) { .cc2-cat-card { min-height: 0; padding: 20px 18px 16px; } }

/* Featured cards (deals/brands) */
.cc2-deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 720px) { .cc2-deal-grid { grid-template-columns: 1fr; gap: 18px; } }
.cc2-deal-card {
  display: flex; flex-direction: column; border: 1px solid var(--cc-line); background: #FFFFFF;
  border-radius: var(--fo-radius-lg); text-decoration: none; color: var(--cc-ink); overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc2-deal-card:hover { transform: translateY(-6px); box-shadow: var(--fo-shadow); }
.cc2-deal-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.cc2-deal-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.cc2-deal-card:hover .cc2-deal-card-media img { transform: scale(1.05); }
.cc2-deal-card-body { padding: 22px 22px 20px; }
@media (max-width: 540px) { .cc2-deal-card-body { padding: 18px 18px 16px; } }

/* Steps */
.cc2-step-num {
  font-family: var(--font-slab); font-weight: 600; font-size: 60px; line-height: 1;
  color: var(--cc-gold);
}
@media (max-width: 640px) { .cc2-step-num { font-size: 48px; } }

/* Photo frame — soft rounded card with a gentle tilt (no harsh shadow) */
.cc2-photo-frame {
  background: #FFFFFF; padding: 12px; border: 1px solid var(--cc-line); border-radius: var(--fo-radius-lg);
  box-shadow: var(--fo-shadow); transform: rotate(-1.4deg); position: relative;
}
.cc2-photo-frame img { border-radius: 16px; }

/* Chips */
.cc2-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--cc-line); padding: 9px 15px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  background: #FFFFFF; color: var(--cc-ink); text-decoration: none;
}
.cc2-bullet { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 11px; color: #fff; }

/* FAQ accordion — soft */
.cc2-faq { border-top: 1px solid var(--cc-line); }
.cc2-faq details { border-bottom: 1px solid var(--cc-line); }
.cc2-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 22px 4px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--cc-ink);
}
.cc2-faq summary::-webkit-details-marker { display: none; }
.cc2-faq summary .cc2-faq-x { font-family: var(--font-body); font-weight: 400; font-size: 26px; color: var(--cc-rust); transition: transform 0.25s; flex-shrink: 0; line-height: 1; }
.cc2-faq details[open] summary .cc2-faq-x { transform: rotate(45deg); }
.cc2-faq .cc2-faq-body { padding: 0 4px 24px; font-size: 15.5px; line-height: 1.7; color: var(--cc-mute); max-width: 720px; }

/* Scroll reveal — progressive enhancement: visible by default (no-JS / crawlers /
   prerendered HTML), hidden-then-revealed only when JS is present (html.cc2-js). */
.cc2-reveal { opacity: 1; transform: none; }
html.cc2-js .cc2-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1); }
html.cc2-js .cc2-reveal.cc2-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.cc2-js .cc2-reveal { opacity: 1; transform: none; transition: none; } }

/* Sticky mobile order bar — deepwater w/ seafoam edge */
.cc2-sticky-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--cc-ink); border-top: 2px solid var(--cc-gold);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns: 1.35fr minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
@media (max-width: 768px) { .cc2-sticky-bar { display: grid; } body { padding-bottom: 64px; } }
.cc2-sticky-bar a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  text-decoration: none; padding: 12px 4px; border: 1px solid rgba(247,243,234,0.22); color: var(--cc-paper);
  white-space: nowrap; min-width: 0; border-radius: 999px;
}
.cc2-sticky-bar a.cc2-sticky-primary { background: var(--cc-gold); color: var(--cc-leather-2); border-color: var(--cc-gold); }
@media (max-width: 374px) {
  .cc2-sticky-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .cc2-sticky-bar a { font-size: 9.5px; letter-spacing: 0.02em; padding: 11px 2px; }
}

/* Two/three-col generic */
.cc2-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .cc2-2col { grid-template-columns: 1fr; gap: 32px; } }
.cc2-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 768px) { .cc2-3col { grid-template-columns: 1fr; gap: 24px; } }

/* ---- fo-* lakeside primitives ---- */

/* Ripple divider — a gentle wave between sections */
.fo-wave { display: block; width: 100%; height: 48px; }
.fo-wave-flip { transform: scaleY(-1); }

/* Buoy stamp / circular badge */
.fo-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--cc-rust); color: #fff;
}

/* Soft pill tag */
.fo-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  background: var(--cc-mist); color: var(--cc-leather); border: 1px solid rgba(43,170,226,0.35);
  padding: 7px 13px; border-radius: 999px;
}

/* Hero sky gradient (light) */
.fo-hero-sky {
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(244,182,86,0.35) 0%, rgba(244,182,86,0) 55%),
    radial-gradient(120% 90% at 15% 10%, rgba(95,182,174,0.30) 0%, rgba(95,182,174,0) 55%),
    linear-gradient(180deg, #FBF8F0 0%, var(--cc-mist) 100%);
}

/* Marquee link */
.fo-marquee-link { display: inline-flex; align-items: center; gap: 16px; padding: 0 18px; text-decoration: none; }

/* Single-page anchor targets clear the sticky header. */
section[id] { scroll-margin-top: 84px; }

/* Visually hidden, screen-reader-only text (comparison + specs tables). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Price tag — anchored a little below the upper-left corner of the page, under
   the header (per Sudhir, 2026-10-05). Absolute, not fixed: it lives in the hero
   and scrolls with the page so it never covers section headings further down.
   Carries the same action as the "Buy now" buttons (rendered via BuyButton). */
.cg-price-float {
  position: absolute; left: 22px; top: 104px;
  z-index: 40; display: block; width: 168px; line-height: 0; text-decoration: none;
  filter: drop-shadow(0 10px 20px rgba(34,29,24,0.28));
  transition: transform 0.16s ease;
}
.cg-price-float:hover, .cg-price-float:focus-visible { transform: scale(1.05); }
.cg-price-float img { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .cg-price-float { width: 122px; left: 14px; top: 92px; } }
@media (max-width: 560px) { .cg-price-float { width: 92px; left: 10px; top: 86px; } }
@media (prefers-reduced-motion: reduce) { .cg-price-float { transition: none; } }