/* ==========================================================================
   Direct Shopping Deals — style.css (all pages)
   ========================================================================== */
:root {
  --green: #A64F3C;
  --green-dark: #713629;
  --mint: #F5E5DC;
  --ink: #34252B;
  --muted: #87777A;
  --line: #EADBD5;
  --cream: #FAF3ED;

  --bs-primary: #A64F3C;
  --bs-body-font-family: 'DM Sans', sans-serif;
  --bs-body-color: #34252B;
  --bs-border-color: #EADBD5;
  --bs-link-color: #A64F3C;
  --bs-link-hover-color: #713629;
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scroll-padding-top: 105px
}
body {
margin: 0;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
background: #fff;
-webkit-font-smoothing: antialiased
}
::selection {
background: #d6e8cd;
color: var(--green-dark)
}
a {
color: inherit;
text-decoration: none
}
button,
input,
textarea,
select {
font: inherit
}
button,
a,
input,
select,
textarea {
-webkit-tap-highlight-color: transparent
}
button {
cursor: pointer
}
button:disabled {
cursor: not-allowed
}
img {
max-width: 100%;
display: block
}
:focus-visible {
outline: 3px solid #8caf76;
outline-offset: 4px
}
[hidden] {
display: none !important
}
/* Bootstrap controls collapse with display, rather than Tailwind's visibility utility. */
.collapse {
visibility: visible
}
.container {
width: 100%;
max-width: 1280px;
padding-right: 40px;
padding-left: 40px
}
.section-space {
padding: 88px 0
}
.eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--green);
margin: 0 0 13px;
display: block
}
.section-heading {
font-size: clamp(30px, 3vw, 40px);
font-weight: 550;
letter-spacing: -1.6px;
line-height: 1.18;
margin: 0 0 14px
}
.section-copy {
font-size: 14px;
line-height: 1.85;
color: var(--muted);
margin: 0
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 32px
}
.section-header .section-heading {
margin-bottom: 9px
}
.text-link {
display: inline-flex;
gap: 10px;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--green);
padding: 7px 0;
border: 0;
background: none;
white-space: nowrap
}
.text-link .bi {
transition: transform .25s
}
.text-link:hover .bi {
transform: translateX(4px)
}
.btn {
font-weight: 600;
font-size: 12px;
border-radius: 6px;
min-height: 46px;
padding: 12px 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
transition: background .2s, transform .2s, box-shadow .2s
}
.btn-emerald {
--bs-btn-color: #fff;
--bs-btn-bg: var(--green);
--bs-btn-border-color: var(--green);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--green-dark);
--bs-btn-hover-border-color: var(--green-dark);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0c3324;
--bs-btn-active-border-color: #0c3324;
--bs-btn-disabled-bg: #8b9e8f;
--bs-btn-disabled-border-color: #8b9e8f;
--bs-btn-disabled-color: #fff
}
.btn-outline-emerald {
--bs-btn-color: var(--green);
--bs-btn-border-color: #b5c4b5;
--bs-btn-hover-color: var(--green-dark);
--bs-btn-hover-bg: #edf3e9;
--bs-btn-hover-border-color: var(--green);
--bs-btn-active-color: var(--green-dark);
--bs-btn-active-bg: #e3eddf;
--bs-btn-active-border-color: var(--green);
--bs-btn-disabled-color: #8b9e8f;
--bs-btn-disabled-border-color: #d1dbcd
}
.btn:hover:not(:disabled) {
transform: translateY(-2px)
}
.icon-button {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
font-size: 18px;
color: var(--ink);
transition: background .2s, color .2s
}
.icon-button:hover {
background: var(--mint);
color: var(--green)
}
.skip-link {
position: fixed;
top: -70px;
left: 20px;
padding: 12px 22px;
background: var(--green);
color: #fff;
z-index: 2000;
border-radius: 0 0 6px 6px
}
.skip-link:focus {
top: 0
}
/* ===== Design tokens: light + dark ===== */
:root {
  --bg: #F5F8FA;
  --surface: #FFFFFF;
  --surface-2: #EAF1F5;
  --surface-3: #DCE9EF;

  --ink: #172D3B;
  --muted: #718590;
  --line: #D8E3E9;

  --mint: #E1F0F0;
  --cream: #F9F3EC;

  --accent-text: #176B82;
  --hx-accent: #E56D55;
  --hx-bg: #E5F0F3;
  --hx-bg-dark: #142630;

  --bs-body-bg: #F5F8FA;
  --bs-body-color: #172D3B;
  --bs-border-color: #D8E3E9;
  --bs-secondary-bg: #EAF1F5;
  --bs-tertiary-bg: #FFFFFF;
  --bs-emphasis-color: #10232F;
  --bs-secondary-color: #718590;
  --bs-link-color: #176B82;
  --bs-link-hover-color: #104B60;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #101C25;
  --surface: #182833;
  --surface-2: #203440;
  --surface-3: #29404C;

  --ink: #E8F0F3;
  --muted: #A0B2BB;
  --line: #304550;

  --mint: #1D353A;
  --cream: #252D32;

  --accent-text: #79C7D6;
  --hx-accent: #FF947B;
  --hx-bg: #1B343D;
  --hx-bg-dark: #0C171E;

  --bs-body-bg: #101C25;
  --bs-body-color: #E8F0F3;
  --bs-border-color: #304550;
  --bs-secondary-bg: #203440;
  --bs-tertiary-bg: #182833;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: #A0B2BB;
  --bs-link-color: #79C7D6;
  --bs-link-hover-color: #A5E2EB;
}
body {
background: var(--bg);
color: var(--ink);
transition: background-color .45s ease, color .45s ease
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal
}
::view-transition-new(root) {
z-index: 9999
}
/* ===== Header ===== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
border-bottom: 1px solid transparent;
transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease
}
.site-header.solid {
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom-color: var(--line);
box-shadow: 0 10px 30px rgba(10, 40, 25, .07)
}
.navbar {
padding: 0;
min-height: 86px
}
.navbar .container {
min-height: 86px;
gap: 16px
}
.navbar-brand {
padding: 0;
margin: 0
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 27px;
font-weight: 750;
letter-spacing: -1.5px;
line-height: 1;
color: var(--ink)
}
.brand:hover {
color: var(--ink)
}
.brand-logo {
width: 46px;
height: 46px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
background: var(--hx-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-accent) 18%, transparent), 0 10px 22px color-mix(in srgb, var(--hx-accent) 35%, transparent);
transition: background-color .8s ease, box-shadow .8s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1)
}
.brand:hover .brand-logo {
transform: rotate(-14deg) scale(1.05)
}
.brand-mark {
width: 22px;
height: 25px;
color: #fff
}
.brand-dot {
color: var(--hx-accent);
transition: color .8s ease
}
.navbar-collapse {
justify-content: center;
flex: 1
}
.nav-pill {
display: flex;
align-items: center;
padding: 6px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 12px 30px rgba(20, 50, 30, .08)
}
.navbar-nav {
gap: 2px;
align-items: center
}
.navbar .nav-link {
padding: 9px 16px !important;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
white-space: nowrap;
transition: background-color .25s, color .25s
}
.navbar .nav-link:after {
display: none
}
.navbar .nav-link:hover {
color: var(--ink);
background: var(--surface-3)
}
.navbar .nav-link.active {
background: var(--hx-accent);
color: #fff !important;
box-shadow: 0 8px 18px color-mix(in srgb, var(--hx-accent) 32%, transparent)
}
.nav-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto
}
.nav-btn {
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
display: grid;
place-items: center;
font-size: 18px;
padding: 0;
transition: background-color .25s, color .25s, border-color .25s, transform .25s
}
.nav-btn:hover {
background: var(--surface);
border-color: var(--line);
color: var(--hx-accent);
transform: translateY(-2px)
}
.nav-btn>.bi {
grid-area: 1/1
}
.nav-badge {
position: absolute;
top: 1px;
right: -1px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 99px;
background: #e0413f;
color: #fff;
font-size: 9px;
font-weight: 750;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
border: 2px solid var(--bg)
}
.nav-badge.wish {
background: #d23f63
}
.theme-toggle .bi {
transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), opacity .3s
}
.theme-toggle .bi-sun {
opacity: 0;
transform: rotate(-120deg) scale(.3)
}
[data-theme="dark"] .theme-toggle .bi-sun {
opacity: 1;
transform: none;
color: #f5c451
}
[data-theme="dark"] .theme-toggle .bi-moon-stars {
opacity: 0;
transform: rotate(120deg) scale(.3)
}
.navbar-toggler {
width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface);
color: var(--ink);
font-size: 21px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none !important
}
/* ===== Hero ===== */
.hx {
position: relative;
min-height: 100vh;
min-height: 100svh;
padding-top: 86px;
overflow: hidden;
isolation: isolate;
background-color: var(--hx-bg);
transition: background-color .9s cubic-bezier(.4, 0, .2, 1)
}
[data-theme="dark"] .hx {
background-color: var(--hx-bg-dark)
}
.hx:before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--hx-accent) 11%, transparent), transparent 40%)
}
.hx-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
grid-template-areas: "copy visual" "thumbs visual";
align-content: center;
column-gap: 34px;
min-height: calc(100vh - 86px);
min-height: calc(100svh - 86px);
padding-top: 18px;
padding-bottom: 38px
}
.hx-copy {
grid-area: copy;
position: relative;
z-index: 3;
max-width: 600px;
align-self: end
}
.hx-copy>* {
animation: reveal-up .8s cubic-bezier(.2, .8, .2, 1) backwards
}
.hx-copy>*:nth-child(2) {
animation-delay: .08s
}
.hx-copy>*:nth-child(3) {
animation-delay: .16s
}
.hx-copy>*:nth-child(4) {
animation-delay: .24s
}
.hx-copy>*:nth-child(5) {
animation-delay: .32s
}
.hx-copy>*:nth-child(6) {
animation-delay: .4s
}
.hx-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 15px 6px 6px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
font-size: 10px;
font-weight: 650;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted);
box-shadow: 0 8px 22px rgba(20, 50, 30, .06);
margin-bottom: 20px
}
.hx-eyebrow .dot {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--hx-accent);
color: #fff;
display: grid;
place-items: center;
font-size: 12px;
transition: background-color .8s
}
.hx-eyebrow b {
color: var(--ink);
font-weight: 750
}
.hx-eyebrow .sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: .5
}
.hx-title {
font-size: clamp(36px, 4.1vw, 60px);
line-height: 1.07;
letter-spacing: -2.2px;
font-weight: 400;
color: var(--ink);
margin: 0 0 16px
}
.hx-title strong {
font-weight: 750;
color: var(--hx-accent);
transition: color .9s
}
.hx-title em {
font-family: 'DM Serif Display', serif;
font-weight: 400;
letter-spacing: -1px
}
.hx-sub {
font-size: 13px;
line-height: 1.85;
color: var(--muted);
max-width: 510px;
margin: 0 0 20px
}
.hx-offer {
display: flex;
align-items: center;
gap: 18px;
margin: 0 0 22px;
min-height: 58px
}
.hx-price {
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 750;
letter-spacing: -1.8px;
line-height: 1;
color: var(--hx-accent);
font-variant-numeric: tabular-nums;
transition: color .9s
}
.hx-offer-meta {
padding-left: 18px;
border-left: 2px solid color-mix(in srgb, var(--hx-accent) 35%, transparent);
transition: border-color .9s
}
.hx-name {
display: block;
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: 19px;
line-height: 1.2;
color: var(--ink)
}
.hx-tagline {
display: block;
font-size: 11.5px;
line-height: 1.6;
color: var(--muted);
margin-top: 4px;
max-width: 320px
}
.hx-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px
}
.hx-stepper {
display: inline-flex;
align-items: center;
gap: 4px;
height: 48px;
padding: 0 6px;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--hx-accent) 45%, var(--line));
background: var(--surface);
transition: border-color .9s
}
.hx-stepper button {
width: 34px;
height: 34px;
border-radius: 50%;
border: 0;
background: transparent;
color: var(--ink);
font-size: 14px;
display: grid;
place-items: center;
transition: background-color .2s, color .2s
}
.hx-stepper button:hover:not(:disabled) {
background: var(--surface-3);
color: var(--hx-accent)
}
.hx-stepper button:disabled {
opacity: .35
}
.hx-stepper output {
min-width: 28px;
text-align: center;
font-weight: 750;
font-size: 13px;
color: var(--ink);
font-variant-numeric: tabular-nums
}
.hx-order {
height: 48px;
padding: 0 26px;
border-radius: 999px;
border: 0;
background: var(--hx-accent);
color: #fff;
font-weight: 650;
font-size: 12.5px;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 14px 28px color-mix(in srgb, var(--hx-accent) 40%, transparent);
transition: transform .25s, box-shadow .25s, background-color .9s
}
.hx-order:hover {
transform: translateY(-3px);
box-shadow: 0 18px 34px color-mix(in srgb, var(--hx-accent) 50%, transparent)
}
.hx-links {
display: flex;
gap: 10px;
flex-wrap: wrap
}
.hx-link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 17px;
border-radius: 999px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface) 70%, transparent);
font-size: 11.5px;
font-weight: 650;
color: var(--ink);
transition: border-color .25s, color .25s, transform .25s, background-color .25s
}
.hx-link:hover {
border-color: var(--hx-accent);
color: var(--hx-accent);
transform: translateY(-2px)
}
.hx-link.primary {
background: var(--ink);
border-color: var(--ink);
color: var(--bg)
}
.hx-link.primary:hover {
background: var(--hx-accent);
border-color: var(--hx-accent);
color: #fff
}
.hx-swap {
animation: hxText .6s cubic-bezier(.2, .8, .2, 1) both
}
.hx-thumbs {
grid-area: thumbs;
align-self: start;
position: relative;
z-index: 3;
display: flex;
gap: 14px;
max-width: 600px;
padding: 46px 6px 12px;
margin: 0 -6px;
overflow-x: auto;
scrollbar-width: none
}
.hx-thumbs::-webkit-scrollbar {
display: none
}
.hx-thumb {
--c: #2d7248;
position: relative;
flex: 0 0 100px;
height: 124px;
border: 0;
border-radius: 20px;
padding: 0 8px 11px;
background: linear-gradient(170deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 5px;
text-align: center;
opacity: .88;
box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--c) 60%, transparent);
transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .3s, box-shadow .3s;
animation: thumbIn .7s cubic-bezier(.2, .8, .2, 1) backwards
}
.hx-thumb img {
position: absolute;
top: -30px;
left: 50%;
width: 74px;
height: 74px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
background: #fff;
transform: translateX(-50%);
box-shadow: 0 12px 20px -6px rgba(0, 0, 0, .35);
transition: transform .5s cubic-bezier(.3, 1.5, .5, 1)
}
.hx-thumb:hover {
opacity: 1;
transform: translateY(-5px)
}
.hx-thumb:hover img {
transform: translateX(-50%) translateY(-4px) rotate(-8deg) scale(1.06)
}
.hx-thumb[aria-pressed="true"] {
opacity: 1;
transform: translateY(-8px);
box-shadow: 0 20px 30px -10px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 3px var(--hx-bg), 0 0 0 5px var(--c)
}
[data-theme="dark"] .hx-thumb[aria-pressed="true"] {
box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .6), 0 0 0 3px var(--hx-bg-dark), 0 0 0 5px var(--c)
}
.hx-thumb[aria-pressed="true"] img {
transform: translateX(-50%) scale(1.1)
}
.hx-thumb-name {
font-size: 10px;
font-weight: 650;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.hx-thumb-price {
font-size: 10.5px;
font-weight: 750;
padding: 3px 10px;
border-radius: 99px;
background: rgba(255, 255, 255, .22)
}
.hx-visual {
grid-area: visual;
position: relative;
align-self: stretch;
min-height: 540px;
display: grid;
place-items: center;
perspective: 1400px;
--px: 0;
--py: 0
}
.hx-circle {
position: absolute;
z-index: 0;
width: min(44vw, 640px);
aspect-ratio: 1;
border-radius: 50%;
right: -22%;
bottom: -24%;
background: var(--hx-accent);
transition: background-color .9s cubic-bezier(.4, 0, .2, 1);
animation: circleIn 1.2s cubic-bezier(.2, .8, .2, 1) backwards
}
.hx-circle.pulse {
animation: circlePulse 1s cubic-bezier(.2, .8, .2, 1)
}
.hx-ring {
position: absolute;
z-index: 0;
width: min(34vw, 470px);
aspect-ratio: 1;
border-radius: 50%;
border: 1.5px dashed color-mix(in srgb, var(--hx-accent) 40%, transparent);
top: 4%;
right: 6%;
animation: spin 50s linear infinite;
transition: border-color .9s
}
.hx-beans {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
transform: translate3d(calc(var(--px) * -28px), calc(var(--py) * -22px), 0);
transition: transform .45s ease-out
}
.hx-bean {
position: absolute;
font-size: 24px;
color: var(--hx-accent);
opacity: .8;
animation: floaty 6s ease-in-out infinite;
transition: color .9s
}
.hx-bean.b1 {
top: 12%;
left: 12%;
font-size: 28px
}
.hx-bean.b2 {
top: 20%;
right: 12%;
font-size: 20px;
opacity: .55;
animation-delay: -1.5s
}
.hx-bean.b3 {
bottom: 32%;
left: 5%;
font-size: 14px;
opacity: .5;
filter: blur(1px);
animation-delay: -3s
}
.hx-bean.b4 {
bottom: 12%;
left: 44%;
font-size: 30px;
color: #fff;
opacity: .85;
animation-delay: -2s
}
.hx-bean.b5 {
top: 50%;
right: 3%;
font-size: 20px;
color: #fff;
opacity: .75;
animation-delay: -4s
}
.hx-stage {
position: relative;
z-index: 2;
width: min(28vw, 400px);
aspect-ratio: .8;
transform-style: preserve-3d;
transform: rotateY(calc(var(--px) * 9deg)) rotateX(calc(var(--py) * -7deg));
transition: transform .5s ease-out;
touch-action: pan-y
}
.hx-shot {
position: absolute;
inset: 0;
border-radius: 220px 220px 36px 36px;
overflow: hidden;
background: #fff;
cursor: zoom-in;
box-shadow: 0 50px 80px -24px rgba(8, 30, 18, .5), 0 0 0 10px color-mix(in srgb, var(--surface) 80%, transparent);
backface-visibility: hidden;
transform-origin: 50% 60%
}
.hx-shot img {
width: 100%;
height: 100%;
object-fit: cover
}
.hx-shot img.cutout {
object-fit: contain;
padding: 40px
}
.hx-shot.enter {
animation: hxEmerge 1.05s cubic-bezier(.16, .84, .26, 1) both
}
.hx-shot.leave {
animation: hxSink .7s cubic-bezier(.55, 0, .75, .3) both;
pointer-events: none
}
.hx-shot-ui {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
transform: translateZ(40px)
}
.hx-shot-ui>* {
pointer-events: auto
}
.hx-shot-ui .hx-wish {
top: 15%;
right: 3%;
width: 46px;
height: 46px;
font-size: 18px
}
.hx-quick {
position: absolute;
left: 50%;
bottom: -20px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 18px;
border-radius: 999px;
border: 0;
background: var(--surface);
color: var(--ink);
font-size: 11.5px;
font-weight: 650;
white-space: nowrap;
box-shadow: 0 14px 30px rgba(8, 30, 18, .22);
transition: transform .25s, background-color .25s, color .25s
}
.hx-quick:hover {
transform: translateX(-50%) translateY(-3px);
background: var(--hx-accent);
color: #fff
}
.hx-sticker {
position: absolute;
top: -3%;
left: -13%;
width: 92px;
height: 92px;
border-radius: 50%;
background: var(--surface);
color: var(--ink);
display: grid;
place-items: center;
box-shadow: 0 18px 34px rgba(8, 30, 18, .2);
pointer-events: none !important
}
.hx-sticker svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: spin 16s linear infinite
}
.hx-sticker text {
font-size: 8.2px;
font-weight: 700;
letter-spacing: 1.4px;
fill: currentColor
}
.hx-sticker>.bi {
font-size: 22px;
color: var(--hx-accent);
transition: color .9s
}
.hx-float {
position: absolute;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 15px 8px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 86%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
box-shadow: 0 18px 36px rgba(8, 30, 18, .13);
font-size: 11px;
font-weight: 700;
color: var(--ink);
line-height: 1.2;
animation: floaty 6s ease-in-out infinite
}
.hx-float>.bi {
width: 32px;
height: 32px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
font-size: 14px;
background: color-mix(in srgb, var(--hx-accent) 14%, transparent);
color: var(--hx-accent);
transition: background-color .9s, color .9s
}
.hx-float small {
display: block;
font-size: 9px;
font-weight: 500;
color: var(--muted);
margin-top: 2px
}
.hx-float.f1 {
top: 8%;
left: 0
}
.hx-float.f2 {
top: 34%;
right: -2%;
animation-delay: -1.5s
}
.hx-float.f3 {
bottom: 24%;
left: -3%;
animation-delay: -3s
}
.hx-float.f4 {
bottom: 5%;
right: 14%;
animation-delay: -4.5s
}
[data-theme="dark"] .hx-title strong,
[data-theme="dark"] .hx-price,
[data-theme="dark"] .brand-dot {
color: color-mix(in srgb, var(--hx-accent) 45%, #fff)
}
[data-theme="dark"] .hx-float>.bi,
[data-theme="dark"] .hx-sticker>.bi {
color: color-mix(in srgb, var(--hx-accent) 40%, #fff)
}
/* ===== Wishlist hearts + fly-to-cart ===== */
.wish-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
padding: 0;
display: grid;
place-items: center;
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(8px);
color: #d23f63;
font-size: 15px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background-color .25s
}
.wish-btn>.bi {
grid-area: 1/1;
transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1)
}
.wish-btn:hover {
transform: scale(1.12)
}
.wish-btn .bi-heart-fill {
opacity: 0;
transform: scale(.3)
}
.wish-btn[aria-pressed="true"] .bi-heart {
opacity: 0
}
.wish-btn[aria-pressed="true"] .bi-heart-fill {
opacity: 1;
transform: none
}
.wish-btn:after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #d23f63;
opacity: 0;
pointer-events: none
}
.wish-btn.burst {
animation: heartPop .5s cubic-bezier(.3, 1.6, .5, 1)
}
.wish-btn.burst:after {
animation: ringBurst .6s ease-out
}
.quick-wish {
position: relative;
top: auto;
right: auto;
flex: none;
width: 46px;
height: 46px;
font-size: 17px;
background: var(--surface-3);
box-shadow: none
}
.fly-ghost {
position: fixed;
z-index: 2000;
width: 66px;
height: 66px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
pointer-events: none;
will-change: transform
}
.category-section {
padding: 65px 0 73px
}
.category-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 12px
}
.category-card {
border: 1px solid transparent;
padding: 23px 8px 17px;
border-radius: 8px;
display: flex;
align-items: center;
flex-direction: column;
min-width: 0;
background: var(--tile, #f2f5ee);
transition: transform .25s, border-color .25s, box-shadow .25s;
color: var(--ink)
}
.category-card:hover,
.category-card:focus-visible {
transform: translateY(-5px);
border-color: #adc3a2;
box-shadow: 0 7px 20px #254e3010
}
.category-card>.bi {
font-size: 27px;
color: var(--green);
line-height: 1;
margin-bottom: 17px
}
.category-name {
font-weight: 600;
font-size: 11.5px;
line-height: 1.4;
min-height: 32px;
display: flex;
align-items: center;
text-align: center;
max-width: 125px
}
.category-count {
color: #6d7764;
font-size: 10px;
margin: 4px 0 12px
}
.category-cta {
font-size: 9px;
font-weight: 600;
color: var(--green);
display: flex;
align-items: center;
gap: 7px
}
.category-cta .bi {
transition: transform .25s
}
.category-card:hover .category-cta .bi {
transform: translateX(3px)
}
.featured-section {
background: #f8faf7;
padding: 72px 0 70px
}
.carousel-controls {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px
}
.carousel-controls .icon-button {
border: 1px solid #dce4d7;
width: 39px;
height: 39px;
font-size: 16px;
background: #fff
}
.carousel-controls .icon-button:disabled {
opacity: .35
}
.featured-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 5px 2px 18px;
margin: 0 -2px;
overscroll-behavior-x: contain
}
.featured-track::-webkit-scrollbar {
display: none
}
.featured-track .product-card {
flex: 0 0 calc((100% - 60px)/4);
scroll-snap-align: start
}
.product-card {
background: #fff;
border: 1px solid #e6eae3;
border-radius: 9px;
overflow: hidden;
min-width: 0;
transition: transform .28s, box-shadow .28s, border-color .28s;
display: flex;
flex-direction: column;
height: 100%
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 25px #1d4f3010;
border-color: #cbd9c5
}
.product-media {
position: relative;
aspect-ratio: 1.12;
background: #eeeee7;
overflow: hidden
}
.product-media>img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .65s cubic-bezier(.2, .6, .3, 1)
}
.product-media>img.cutout {
object-fit: contain;
padding: 22px;
mix-blend-mode: multiply
}
.product-card:hover .product-media>img {
transform: scale(1.055)
}
.product-tag {
position: absolute;
top: 12px;
left: 12px;
font-size: 8px;
font-weight: 650;
letter-spacing: .7px;
text-transform: uppercase;
background: rgba(255, 255, 255, .94);
border-radius: 3px;
padding: 5px 8px;
color: var(--green);
backdrop-filter: blur(5px)
}
.quick-view {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, .92);
width: 32px;
height: 32px;
border: 1px solid #ffffffb0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-size: 15px;
transition: background .2s, color .2s;
backdrop-filter: blur(8px)
}
.quick-view:hover {
background: var(--green);
color: #fff
}
.product-info {
padding: 16px;
display: flex;
flex-direction: column;
flex-grow: 1
}
.category-badge {
display: inline-block;
align-self: flex-start;
padding: 3px 6px;
background: #f0f4ed;
color: #5e7155;
font-size: 9px;
font-weight: 600;
letter-spacing: .65px;
line-height: 1.4;
text-transform: uppercase;
border-radius: 3px;
margin-bottom: 8px
}
.product-name {
font-size: 14px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -.15px;
margin: 0 0 11px;
min-height: 42px
}
.product-price {
font-size: 19px;
font-weight: 650;
letter-spacing: -.6px;
color: var(--green);
line-height: 1.2
}
.price-line {
display: flex;
align-items: center;
gap: 7px;
margin-top: auto;
margin-bottom: 15px
}
.price-currency {
font-size: 9px;
color: #6f7c65;
letter-spacing: .2px
}
.add-cart {
width: 100%;
min-height: 37px;
padding: 9px 12px;
border-radius: 5px;
border: 1px solid #d8e2d2;
background: #f2f6ef;
color: var(--green);
font-weight: 600;
font-size: 10px;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
transition: background .2s, color .2s
}
.add-cart:hover {
background: var(--green);
border-color: var(--green);
color: #fff
}
.add-cart .bi {
font-size: 13px
}
.featured-footer {
display: flex;
justify-content: center;
padding-top: 14px
}
.about-section {
border-bottom: 1px solid var(--line)
}
.about-intro {
max-width: 385px
}
.about-intro .section-heading {
font-size: 43px;
line-height: 1.14;
margin-bottom: 21px
}
.about-intro .section-copy {
font-size: 13px
}
.about-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 37px
}
.about-value {
padding-top: 22px;
border-top: 1px solid var(--line)
}
.about-value>.bi {
font-size: 25px;
color: var(--green);
display: block;
margin-bottom: 13px
}
.about-value h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px
}
.about-value p {
font-size: 12px;
line-height: 1.8;
color: var(--muted);
margin: 0;
max-width: 240px
}
.collection-section {
padding-bottom: 92px
}
.collection-section .section-header {
margin-bottom: 30px
}
.collection-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 23px
}
.search-field {
position: relative;
flex: 1;
max-width: 360px
}
.search-field>.bi {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
color: #788272;
pointer-events: none
}
.search-field input {
padding-left: 42px;
padding-right: 37px;
min-height: 44px;
font-size: 12px;
background: #fafbf8
}
#productSearch::-webkit-search-cancel-button {
-webkit-appearance: none
}
.search-clear {
position: absolute;
right: 7px;
top: 7px;
width: 30px;
height: 30px;
font-size: 12px
}
.sort-control {
display: flex;
align-items: center;
gap: 12px
}
.sort-control label {
font-size: 11px;
color: var(--muted);
white-space: nowrap
}
.sort-control select {
width: 158px;
font-size: 11px;
min-height: 42px;
padding-left: 13px;
background-color: #fff
}
.category-filters {
display: flex;
align-items: center;
gap: 26px;
overflow-x: auto;
border-bottom: 1px solid var(--line);
scrollbar-width: thin;
scrollbar-color: #cbd7c5 transparent;
margin-bottom: 20px
}
.filter-button {
padding: 0 0 14px;
white-space: nowrap;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: #7a8275;
font-size: 11px;
font-weight: 500;
transition: color .2s, border-color .2s
}
.filter-button:hover {
color: var(--green)
}
.filter-button.active {
color: var(--green);
border-bottom-color: var(--green);
font-weight: 650
}
.results-line {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 25px;
margin-bottom: 18px;
font-size: 11px;
color: var(--muted)
}
.results-line strong {
color: var(--ink);
font-weight: 600
}
.results-line .text-link {
font-size: 10px;
padding: 0
}
.product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px 20px
}
.load-more-wrap {
text-align: center;
margin-top: 37px
}
.load-more-wrap p {
font-size: 10px;
color: var(--muted);
margin-bottom: 12px
}
.empty-results {
text-align: center;
padding: 65px 20px 70px;
grid-column: 1/-1;
background: #f8faf5;
border-radius: 9px
}
.empty-results>.bi {
font-size: 36px;
color: #8eab80;
display: block;
margin-bottom: 16px
}
.empty-results h3 {
font-size: 21px;
letter-spacing: -.5px
}
.empty-results p {
font-size: 13px;
color: var(--muted);
margin-bottom: 22px
}
.why-section {
background: linear-gradient(115deg, #174a37, #205c42);
color: #fff;
padding: 78px 0 74px
}
.why-section .eyebrow {
color: #c1d6ad
}
.why-section .section-heading {
margin-bottom: 12px
}
.why-section .section-copy {
color: #b9cfbd;
font-size: 13px
}
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 37px 54px;
margin-top: 43px
}
.why-feature {
padding-top: 25px;
border-top: 1px solid #d0e0c930;
transition: border-color .25s
}
.why-feature:hover {
border-color: #b5d795
}
.why-feature>.bi {
font-size: 26px;
display: block;
color: #c1d6ad;
margin-bottom: 14px;
transition: transform .25s
}
.why-feature:hover>.bi {
transform: translateY(-4px)
}
.why-feature h3 {
font-size: 15px;
font-weight: 500;
margin-bottom: 9px
}
.why-feature p {
font-size: 12px;
line-height: 1.85;
color: #b9cfbd;
max-width: 285px;
margin: 0
}
.faq-intro {
max-width: 310px
}
.faq-intro .section-heading {
font-size: 39px;
margin-bottom: 18px
}
.faq-intro .section-copy {
font-size: 13px;
margin-bottom: 20px
}
.faq-accordion {
--bs-accordion-border-color: var(--line);
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-active-color: var(--green);
--bs-accordion-active-bg: transparent;
--bs-accordion-bg: transparent;
--bs-accordion-border-radius: 0;
--bs-accordion-inner-border-radius: 0
}
.faq-accordion .accordion-item {
border-width: 0 0 1px
}
.faq-accordion .accordion-item:first-child {
border-top: 1px solid var(--line)
}
.faq-accordion .accordion-button {
font-size: 13px;
font-weight: 550;
padding: 20px 0;
line-height: 1.5;
gap: 15px;
box-shadow: none
}
.faq-accordion .accordion-button:after {
background-size: 13px;
width: 13px;
height: 13px
}
.faq-accordion .accordion-body {
padding: 0 30px 22px 0;
font-size: 12px;
line-height: 1.9;
color: var(--muted)
}
.faq-accordion .accordion-body .text-link {
font-size: 12px;
white-space: normal;
padding: 0
}
.newsletter-section {
padding: 0 0 24px
}
.newsletter-panel {
background: #edf2e8;
border: 1px solid #e4eadd;
border-radius: 12px;
padding: 47px 49px
}
.newsletter-intro {
max-width: 337px
}
.newsletter-intro .section-heading {
font-size: 38px;
margin-bottom: 19px
}
.newsletter-intro .section-copy {
font-size: 12px;
margin-bottom: 17px
}
.newsletter-intro .eyebrow {
margin-bottom: 19px
}
.newsletter-leaf {
font-size: 16px;
display: inline-block;
margin-left: 4px;
vertical-align: 2px
}
.form-label {
font-size: 11px;
font-weight: 600;
margin-bottom: 7px;
color: #4d5b4b
}
.form-control,
.form-select {
font-size: 12px;
border-color: #dfe5d9;
border-radius: 5px;
min-height: 43px;
padding: 10px 13px;
background-color: #fff;
color: var(--ink)
}
.form-control::placeholder {
color: #a0a69a;
font-size: 11px
}
.form-control:focus,
.form-select:focus {
border-color: #88a879;
box-shadow: 0 0 0 3px #88a87920;
background-color: #fff
}
.form-check-input {
border-color: #b5c4ab;
flex: none
}
.form-check-input:checked {
background-color: var(--green);
border-color: var(--green)
}
.form-check-input:focus {
border-color: #88a879;
box-shadow: 0 0 0 3px #88a87920
}
.form-check-label {
font-size: 10px;
color: #6c7766;
line-height: 1.8
}
.form-note {
font-size: 10px;
color: #65735d;
line-height: 1.7;
margin-top: 13px;
margin-bottom: 0
}
.invalid-feedback {
font-size: 10px
}
.form-status {
font-size: 11px;
color: var(--green);
line-height: 1.7;
margin: 13px 0 0
}
.newsletter-actions {
display: flex;
gap: 19px;
align-items: center;
flex-wrap: wrap
}
.newsletter-actions .text-link {
color: #74816b;
font-size: 10px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px
}
.contact-section {
padding-top: 75px;
padding-bottom: 86px
}
.contact-intro {
max-width: 405px
}
.contact-intro>.section-copy {
font-size: 13px;
margin-bottom: 28px
}
.contact-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 23px 19px;
margin-bottom: 26px
}
.contact-detail .detail-label {
font-size: 9px;
font-weight: 650;
letter-spacing: .8px;
text-transform: uppercase;
color: #84907c;
display: block;
margin-bottom: 6px
}
.contact-detail a,
.contact-detail p {
font-size: 11px;
color: #4b5a45;
line-height: 1.8;
margin: 0
}
.contact-detail a:hover {
text-decoration: underline;
text-underline-offset: 3px
}
.contact-card {
padding: 29px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
box-shadow: 0 7px 30px #31432904
}
.contact-card h3 {
font-size: 19px;
letter-spacing: -.5px;
font-weight: 550;
margin-bottom: 23px
}
.contact-card textarea {
min-height: 116px;
resize: vertical
}
.map-placeholder {
height: 156px;
position: relative;
overflow: hidden;
border-radius: 7px;
border: 1px solid #e0e6d9;
background: #edf0e7;
display: block
}
.map-placeholder svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%
}
.map-pin {
position: absolute;
left: 48%;
top: 39%;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--green);
color: #fff;
box-shadow: 0 0 0 7px #19583f16;
font-size: 17px;
transition: transform .25s
}
.map-placeholder:hover .map-pin {
transform: translateY(-4px)
}
.map-caption {
position: absolute;
bottom: 10px;
left: 12px;
font-size: 9px;
color: #5c6d51;
display: flex;
align-items: center;
gap: 7px;
background: rgba(255, 255, 255, .9);
padding: 5px 8px;
border-radius: 3px
}
.map-open {
position: absolute;
top: 10px;
right: 10px;
font-size: 9px;
display: flex;
gap: 6px;
align-items: center;
background: #fff;
padding: 5px 9px;
border-radius: 3px;
color: var(--green)
}
.site-footer {
background: #143e2e;
color: #d5e0cf;
padding: 53px 0 0
}
.footer-top {
display: grid;
grid-template-columns: 1.55fr .8fr .95fr 1.1fr 1.4fr;
gap: 33px;
padding-bottom: 41px
}
.footer-brand .brand {
color: #f1f5e9;
font-size: 35px
}
.footer-brand p {
font-size: 11px;
line-height: 1.9;
color: #abc0a7;
margin: 17px 0 19px;
max-width: 170px
}
.social-links {
display: flex;
align-items: center;
gap: 16px
}
.social-links a {
font-size: 15px;
color: #bbceb5;
transition: color .2s, transform .2s
}
.social-links a:hover {
color: #fff;
transform: translateY(-2px)
}
.footer-column h3 {
font-size: 11px;
font-weight: 600;
color: #f0f5ea;
margin: 8px 0 19px
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px
}
.footer-column li a,
.footer-link {
font-size: 10px;
color: #adc3a8;
background: transparent;
padding: 0;
border: 0;
text-align: left;
line-height: 1.7;
transition: color .2s
}
.footer-column li a:hover,
.footer-link:hover {
color: #fff
}
.footer-column p {
font-size: 10px;
line-height: 1.9;
color: #adc3a8;
margin-bottom: 14px
}
.footer-signup {
position: relative
}
.footer-signup input {
background: #ffffff08;
border: 1px solid #b5ceb12d;
border-radius: 5px;
color: #fff;
font-size: 10px;
min-height: 39px;
width: 100%;
padding: 9px 41px 9px 12px
}
.footer-signup input::placeholder {
color: #9eb499;
font-size: 10px
}
.footer-signup button {
position: absolute;
top: 4px;
right: 4px;
width: 31px;
height: 31px;
border: 0;
background: #dce8d2;
border-radius: 3px;
color: var(--green);
display: flex;
align-items: center;
justify-content: center
}
.footer-bottom {
border-top: 1px solid #d2e3c719;
display: flex;
justify-content: space-between;
gap: 20px;
padding: 21px 0;
color: #8fac88;
font-size: 9px;
line-height: 1.8
}
.footer-bottom p {
margin: 0
}
.back-to-top {
position: fixed;
bottom: 22px;
right: 23px;
z-index: 1020;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d2dfc9;
background: #fff;
color: var(--green);
border-radius: 50%;
box-shadow: 0 3px 14px #25492613;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity .25s, transform .25s
}
.back-to-top.visible {
opacity: 1;
transform: none;
pointer-events: auto
}
.offcanvas {
--bs-offcanvas-width: 450px;
--bs-offcanvas-border-width: 0
}
.offcanvas-header {
padding: 27px 27px 19px;
border-bottom: 1px solid var(--line)
}
.offcanvas-title {
font-size: 23px;
letter-spacing: -.8px;
font-weight: 550
}
.cart-heading-count {
font-size: 11px;
color: var(--muted);
margin: 3px 0 0
}
.offcanvas-body {
padding: 0;
display: flex;
flex-direction: column;
min-height: 0
}
.cart-delivery {
padding: 16px 27px;
background: #f3f6ef;
color: var(--green);
font-size: 11px;
display: flex;
align-items: center;
gap: 10px
}
.cart-items {
overflow-y: auto;
flex: 1;
min-height: 100px;
padding: 0 26px
}
.cart-item {
display: grid;
grid-template-columns: 71px 1fr;
gap: 14px;
padding: 21px 0;
border-bottom: 1px solid var(--line)
}
.cart-item>img {
width: 71px;
height: 85px;
object-fit: cover;
border-radius: 5px;
background: #f3f3ed
}
.cart-item h3 {
font-size: 12px;
font-weight: 600;
line-height: 1.6;
margin: 0 23px 3px 0
}
.cart-item-meta {
font-size: 9px;
color: var(--muted);
margin-bottom: 10px
}
.cart-item-top {
position: relative
}
.remove-item {
position: absolute;
right: -6px;
top: -5px;
font-size: 13px;
width: 27px;
height: 27px
}
.cart-item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px
}
.quantity-control {
display: inline-flex;
align-items: center;
height: 30px;
border: 1px solid #dfe5d8;
border-radius: 4px;
background: #fff
}
.quantity-control button {
border: 0;
background: none;
width: 29px;
height: 28px;
color: var(--green);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px
}
.quantity-control button:hover:not(:disabled) {
background: #eff4ea
}
.quantity-control button:disabled {
opacity: .3
}
.quantity-control output {
width: 26px;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--ink)
}
.cart-item-price {
font-size: 12px;
font-weight: 650;
color: var(--green)
}
.cart-empty {
height: 100%;
min-height: 265px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 35px 10px
}
.cart-empty>.bi {
font-size: 45px;
color: #a8bd99;
margin-bottom: 16px
}
.cart-empty h3 {
font-size: 20px;
letter-spacing: -.5px;
margin-bottom: 10px
}
.cart-empty p {
font-size: 12px;
color: var(--muted);
margin-bottom: 22px
}
.cart-summary {
padding: 22px 27px 25px;
flex: none;
background: #fff;
border-top: 1px solid var(--line)
}
.summary-row {
display: flex;
justify-content: space-between;
gap: 15px;
font-size: 12px;
color: var(--muted);
margin-bottom: 10px
}
.summary-row span:last-child {
color: var(--ink);
font-weight: 550
}
.summary-total {
padding-top: 15px;
border-top: 1px solid var(--line);
font-size: 17px;
font-weight: 600;
color: var(--ink);
margin: 16px 0
}
.summary-total span:last-child {
color: var(--green);
font-weight: 650
}
.cod-note {
display: flex;
justify-content: center;
gap: 7px;
align-items: center;
font-size: 10px;
color: #78876e;
margin-top: 12px
}
.cart-summary .btn {
width: 100%
}
.modal {
--bs-modal-border-width: 0;
--bs-modal-border-radius: 12px;
--bs-modal-header-border-color: var(--line);
--bs-modal-footer-border-color: var(--line)
}
.modal-backdrop {
--bs-backdrop-bg: #172b1b;
--bs-backdrop-opacity: .45;
backdrop-filter: blur(3px)
}
.modal-header {
padding: 23px 26px
}
.modal-title {
font-size: 21px;
font-weight: 550;
letter-spacing: -.6px
}
.modal-body {
padding: 26px
}
.modal-footer {
padding: 17px 26px;
gap: 8px
}
.modal-footer>* {
margin: 0
}
.btn-close {
font-size: 11px;
opacity: .5;
padding: 10px
}
.btn-close:focus {
box-shadow: 0 0 0 3px #8daf7830
}
.quick-image {
width: 100%;
height: 390px;
object-fit: cover;
background: #f2f2eb;
border-radius: 7px
}
.quick-image.cutout {
object-fit: contain;
padding: 30px
}
.quick-details {
padding: 17px 9px 10px 16px
}
.quick-details h2 {
font-size: 29px;
letter-spacing: -1px;
line-height: 1.22;
font-weight: 550;
margin: 8px 0 15px
}
.quick-description {
font-size: 12px;
line-height: 1.9;
color: var(--muted);
margin: 15px 0 21px;
height: 140px;
overflow: auto;
}
.quick-price {
font-size: 27px;
color: var(--green);
font-weight: 600;
letter-spacing: -.8px;
margin-bottom: 13px
}
.quick-availability {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
color: #759462;
margin-bottom: 21px
}
.quick-actions {
display: flex;
gap: 13px;
align-items: center
}
.quick-actions .quantity-control {
height: 45px
}
.quick-actions .quantity-control button {
height: 43px;
width: 29px
}
.quick-actions .btn {
flex: 1;
padding-left: 14px;
padding-right: 14px
}
.quick-shipping {
border-top: 1px solid var(--line);
padding-top: 17px;
margin-top: 23px;
font-size: 10px;
color: #7e8a75;
line-height: 1.9
}
.search-modal-input {
font-size: 16px !important;
min-height: 52px !important
}
.search-results {
margin-top: 18px;
max-height: 410px;
overflow-y: auto
}
.search-result {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid var(--line);
background: none;
padding: 12px 5px;
border-radius: 4px;
color: var(--ink)
}
.search-result:hover {
background: #f5f8f1
}
.search-result img {
height: 48px;
width: 48px;
object-fit: cover;
border-radius: 4px;
background: #f2f3eb;
flex: none
}
.search-result-name {
font-size: 12px;
font-weight: 550;
display: block
}
.search-result-category {
font-size: 9px;
color: var(--muted);
display: block;
margin-top: 2px
}
.search-result-price {
font-size: 12px;
font-weight: 600;
color: var(--green);
margin-left: auto;
white-space: nowrap
}
.search-summary {
font-size: 10px;
color: var(--muted);
margin: 14px 0 0
}
.policy-content h3 {
font-size: 14px;
font-weight: 600;
color: var(--green);
margin: 21px 0 8px
}
.policy-content h3:first-child {
margin-top: 0
}
.policy-content p {
font-size: 12px;
line-height: 1.9;
color: var(--muted);
margin-bottom: 14px
}
.policy-content a {
text-decoration: underline;
text-underline-offset: 3px
}
.checkout-order {
padding: 17px 18px;
background: #f5f8f1;
border-radius: 6px;
margin-top: 21px
}
.checkout-order h3 {
font-size: 13px;
font-weight: 600;
margin: 0 0 14px
}
.checkout-order .summary-total {
font-size: 15px;
margin-bottom: 0
}
.checkout-line {
display: flex;
justify-content: space-between;
gap: 18px;
font-size: 10px;
color: #73826a;
margin-bottom: 9px
}
.checkout-line span:last-child {
white-space: nowrap;
font-weight: 550;
color: var(--ink)
}
.checkout-payment {
padding: 16px 0 0;
display: flex;
align-items: flex-start;
gap: 10px
}
.checkout-payment label {
font-size: 12px;
font-weight: 600;
line-height: 1.7;
color: var(--green)
}
.checkout-payment label small {
font-size: 10px;
font-weight: 400;
color: var(--muted);
display: block
}
.checkout-note {
margin: 15px 0 0;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 10px;
line-height: 1.8;
color: var(--muted)
}
.confirmation-mark {
width: 62px;
height: 62px;
border-radius: 50%;
background: #edf5e6;
color: var(--green);
display: flex;
align-items: center;
justify-content: center;
font-size: 29px;
margin: 2px auto 17px
}
.confirmation-title {
text-align: center;
font-size: 25px;
font-weight: 550;
letter-spacing: -.8px;
line-height: 1.3;
margin: 0 0 12px
}
.confirmation-copy {
font-size: 12px;
line-height: 1.9;
color: var(--muted);
text-align: center;
max-width: 350px;
margin: 0 auto 22px
}
.order-reference {
text-align: center;
font-size: 11px;
letter-spacing: 1px;
color: var(--green);
font-weight: 600;
margin: 0 0 22px
}
.toast-container {
position: fixed;
top: 98px;
right: 23px;
z-index: 1090;
max-width: calc(100vw - 32px);
pointer-events: none
}
.toast {
background: #fff;
border: 1px solid #dbe5d3;
border-radius: 8px;
box-shadow: 0 8px 28px #23452c18;
pointer-events: auto;
width: 355px;
max-width: 100%
}
.toast-body {
display: flex;
gap: 11px;
align-items: flex-start;
padding: 16px;
font-size: 12px;
line-height: 1.6;
color: var(--ink)
}
.toast-body>.bi {
color: var(--green);
font-size: 19px;
line-height: 1.2;
flex: none
}
.toast-body .btn-close {
margin-left: auto;
flex: none;
padding: 5px;
margin-top: 2px;
font-size: 8px
}
.is-bumping {
animation: cart-bump .38s ease
}
.image-fallback {
object-fit: contain !important;
padding: 28px !important;
background: #eef2e9
}
@keyframes reveal-up {
from {
opacity: 0;
transform: translateY(18px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes hero-settle {
from {
transform: scale(1.035);
opacity: .65
}
to {
transform: scale(1);
opacity: 1
}
}
@keyframes cart-bump {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.25)
}
}
@media(min-width:1500px) {
.container {
max-width: 1360px
}
.hero {
min-height: 714px
}
.hero .container {
min-height: 714px
}
.hero-content {
max-width: 610px
}
.hero h1 {
font-size: 53px
}
.hero h1 .hero-serif {
font-size: 55px
}
.hero-brand {
font-size: 76px
}
.hero-description {
font-size: 14px;
max-width: 485px
}
.category-name {
font-size: 12.5px
}
.product-name {
font-size: 14px
}
}
@media(max-width:1199.98px) {
.container {
padding-left: 32px;
padding-right: 32px
}
.navbar-brand {
margin-right: 0
}
.navbar .container {
gap: 15px;
flex-wrap: wrap
}
.navbar-toggler {
order: 3
}
.nav-actions {
order: 2;
margin-left: auto
}
.navbar-collapse {
order: 4;
flex-basis: 100%
}
.navbar-nav {
gap: 0;
align-items: stretch;
padding: 5px 0 19px
}
.navbar .nav-link {
padding: 11px 0 !important
}
.navbar .nav-link:after {
bottom: 6px;
right: auto;
width: 23px
}
.hero-content {
max-width: 520px
}
.hero:before {
background: linear-gradient(90deg, #f4f2ed 0%, #f4f2ed 22%, rgba(244, 242, 237, .96) 34%, rgba(244, 242, 237, .73) 48%, rgba(244, 242, 237, 0) 77%)
}
.category-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px
}
.category-card {
padding: 22px 12px 17px
}
.category-name {
font-size: 13px;
min-height: 19px;
max-width: none
}
.category-count {
margin: 5px 0 10px
}
.category-cta {
font-size: 10px
}
.category-filters {
gap: 22px
}
.filter-button {
font-size: 10px
}
.footer-top {
grid-template-columns: 1.3fr 1fr 1.1fr 1.2fr;
gap: 24px
}
.footer-column:last-child {
grid-column: 2/5;
max-width: 420px
}
.footer-column:last-child h3 {
margin-bottom: 11px
}
.footer-column:last-child p {
display: none
}
.featured-track .product-card {
flex-basis: calc((100% - 40px)/3)
}
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.newsletter-panel {
padding: 37px
}
.newsletter-intro .section-heading {
font-size: 34px
}
}
@media(max-width:991.98px) {
.section-space {
padding: 65px 0
}
.hero {
min-height: 646px
}
.hero .container {
min-height: 646px
}
.hero-content {
max-width: 465px
}
.hero-brand {
font-size: 63px;
margin-bottom: 22px
}
.hero h1 {
font-size: 44px
}
.hero h1 .hero-serif {
font-size: 47px;
max-width: 455px
}
.hero-description {
max-width: 390px;
font-size: 12px
}
.hero-image {
object-position: 59% center
}
.hero:before {
background: linear-gradient(90deg, #f4f2ed 0%, rgba(244, 242, 237, .98) 24%, rgba(244, 242, 237, .91) 43%, rgba(244, 242, 237, .3) 72%, rgba(244, 242, 237, .05) 100%)
}
.about-intro {
max-width: 500px;
margin-bottom: 31px
}
.about-intro .section-heading {
font-size: 36px
}
.about-values {
gap: 25px 35px
}
.about-value p {
max-width: 330px
}
.why-grid {
gap: 29px 31px
}
.why-feature p {
font-size: 11px
}
.why-feature h3 {
font-size: 13px
}
.faq-intro {
max-width: 550px;
margin-bottom: 30px
}
.faq-intro .section-heading {
font-size: 35px
}
.faq-intro .section-heading br {
display: none
}
.newsletter-intro {
max-width: 500px;
margin-bottom: 29px
}
.newsletter-intro .section-heading br {
display: none
}
.newsletter-intro .section-copy {
margin-bottom: 0
}
.newsletter-panel {
padding: 33px
}
.newsletter-section {
padding-top: 0
}
.contact-intro {
max-width: none;
margin-bottom: 29px
}
.contact-intro .section-heading br {
display: none
}
.contact-details {
grid-template-columns: repeat(4, 1fr);
gap: 17px
}
.map-placeholder {
height: 145px
}
.footer-top {
grid-template-columns: 1.25fr 1fr 1fr;
gap: 30px
}
.footer-column:nth-child(4) {
grid-column: 2
}
.footer-column:last-child {
grid-column: 3;
max-width: none
}
.footer-column:last-child p {
display: block
}
.footer-bottom {
flex-direction: column;
gap: 5px
}
.quick-details {
padding-left: 0;
padding-right: 0
}
.quick-image {
height: 355px
}
.quick-details h2 {
font-size: 26px
}
}
@media(max-width:767.98px) {
.container {
padding-left: 23px;
padding-right: 23px
}
.navbar,
.navbar .container {
min-height: 72px
}
.brand {
font-size: 31px
}
.brand-mark {
width: 27px;
height: 30px
}
.nav-actions {
gap: 9px
}
.cart-toggle {
padding-left: 13px
}
.cart-label {
display: none
}
.hero {
min-height: 805px
}
.hero .container {
min-height: 805px;
align-items: flex-start;
padding-top: 44px;
padding-bottom: 35px
}
.hero-content {
max-width: 100%
}
.hero-brand {
font-size: 59px;
margin-bottom: 22px
}
.hero h1 {
font-size: 40px;
letter-spacing: -1.7px;
max-width: 440px;
margin-bottom: 18px
}
.hero h1 .hero-serif {
font-size: 44px;
max-width: 445px;
line-height: 1.03
}
.hero-description {
max-width: 450px;
font-size: 12px;
line-height: 1.9;
margin-bottom: 22px
}
.hero-image {
object-position: 71% 100%;
height: 53%;
top: auto;
bottom: 0;
width: 100%;
object-fit: cover
}
.hero:before {
background: linear-gradient(180deg, #f4f2ed 0%, #f4f2ed 43%, rgba(244, 242, 237, .97) 49%, rgba(244, 242, 237, .78) 57%, rgba(244, 242, 237, .12) 73%, rgba(244, 242, 237, 0) 88%)
}
.hero-actions .btn {
min-height: 45px;
font-size: 11px;
padding: 11px 20px
}
.category-section {
padding: 48px 0 52px
}
.section-header {
gap: 15px;
margin-bottom: 24px
}
.section-heading {
font-size: 31px;
letter-spacing: -1.1px
}
.section-copy {
font-size: 12px
}
.eyebrow {
font-size: 9px;
letter-spacing: 1.8px;
margin-bottom: 10px
}
.section-header>.text-link {
font-size: 10px
}
.category-grid {
gap: 11px
}
.category-card {
padding: 19px 7px 16px
}
.category-card>.bi {
font-size: 25px;
margin-bottom: 14px
}
.category-name {
font-size: 10px;
min-height: 28px;
max-width: 100px
}
.category-count {
font-size: 9px
}
.category-cta {
font-size: 8px;
gap: 4px
}
.featured-section {
padding: 48px 0 45px
}
.featured-track {
gap: 15px
}
.featured-track .product-card {
flex-basis: calc((100% - 15px)/2)
}
.product-info {
padding: 13px
}
.product-name {
font-size: 12px;
min-height: 36px
}
.product-price {
font-size: 18px
}
.category-badge {
font-size: 7px
}
.product-tag {
font-size: 7px;
top: 10px;
left: 10px;
padding: 4px 6px
}
.quick-view {
width: 29px;
height: 29px;
font-size: 13px;
top: 8px;
right: 8px
}
.about-value h3 {
font-size: 13px
}
.about-value p {
font-size: 11px
}
.collection-toolbar {
gap: 13px
}
.sort-control {
gap: 7px
}
.sort-control label {
display: none
}
.sort-control select {
width: 145px;
font-size: 10px
}
.search-field input {
font-size: 11px
}
.category-filters {
gap: 22px
}
.filter-button {
font-size: 11px
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 15px
}
.why-section {
padding: 57px 0
}
.why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 27px 31px;
margin-top: 30px
}
.why-feature {
padding-top: 21px
}
.why-feature>.bi {
font-size: 25px;
margin-bottom: 13px
}
.why-feature h3 {
font-size: 13px;
line-height: 1.5
}
.why-feature p {
font-size: 11px
}
.newsletter-panel {
padding: 27px
}
.newsletter-intro .section-heading {
font-size: 32px
}
.contact-details {
grid-template-columns: 1fr 1fr;
gap: 21px
}
.contact-card {
padding: 23px
}
.site-footer {
padding-top: 41px
}
.footer-top {
grid-template-columns: repeat(3, 1fr);
gap: 28px 23px
}
.footer-brand {
grid-column: 1/-1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap
}
.footer-brand p {
margin: 0;
max-width: 160px
}
.footer-brand .social-links {
gap: 14px
}
.footer-column:nth-child(4) {
grid-column: 3
}
.footer-column:last-child {
grid-column: 1/-1;
max-width: 380px
}
.footer-column:last-child h3 {
margin-bottom: 8px
}
.footer-column:last-child p {
margin-bottom: 12px
}
.footer-column h3 {
font-size: 11px
}
.footer-column li a,
.footer-link {
font-size: 10px
}
.footer-bottom {
padding: 20px 0
}
.quick-image {
height: 280px
}
.quick-details {
padding: 0
}
.quick-details h2 {
font-size: 26px
}
.modal-body {
padding: 22px
}
.modal-header {
padding: 20px 22px
}
.modal-footer {
padding: 16px 22px
}
.toast-container {
top: 85px;
right: 16px
}
.carousel-controls {
gap: 7px
}
.carousel-controls .icon-button {
width: 32px;
height: 32px;
font-size: 14px
}
.section-header .section-heading {
font-size: 30px
}
.contact-section {
padding-top: 58px;
padding-bottom: 58px
}
}
@media(max-width:479.98px) {
.container {
padding-left: 19px;
padding-right: 19px
}
.hero {
min-height: 818px
}
.hero .container {
min-height: 818px;
padding-top: 36px
}
.hero-brand {
font-size: 56px
}
.hero h1 {
font-size: 38px;
max-width: 365px
}
.hero h1 .hero-serif {
font-size: 42px;
max-width: 350px
}
.hero-description {
font-size: 11px;
max-width: 355px
}
.hero-image {
height: 45%;
object-position: 69% center
}
.hero:before {
background: linear-gradient(180deg, #f4f2ed 0%, #f4f2ed 51%, rgba(244, 242, 237, .92) 57%, rgba(244, 242, 237, .1) 74%, transparent 90%)
}
.hero-actions {
gap: 9px
}
.hero-actions .btn {
padding-left: 17px;
padding-right: 17px;
font-size: 10px
}
.category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.category-card {
padding: 20px 10px 17px
}
.category-name {
font-size: 12px;
min-height: 18px;
max-width: 130px
}
.category-card>.bi {
font-size: 27px;
margin-bottom: 14px
}
.category-count {
font-size: 10px
}
.category-cta {
font-size: 9px
}
.category-section .section-header {
align-items: flex-start;
flex-direction: column;
gap: 8px
}
.category-section .section-header .text-link {
padding: 0
}
.section-header .section-heading {
font-size: 27px
}
.section-heading {
font-size: 30px
}
.featured-track .product-card {
flex-basis: 75%
}
.product-grid {
gap: 15px 11px
}
.product-info {
padding: 11px
}
.product-name {
font-size: 11px;
line-height: 1.6;
min-height: 35px;
margin-bottom: 9px
}
.product-price {
font-size: 17px
}
.price-line {
gap: 5px;
margin-bottom: 12px
}
.price-currency {
font-size: 8px
}
.add-cart {
font-size: 9px;
padding: 8px 5px;
gap: 5px;
min-height: 35px
}
.add-cart .bi {
font-size: 12px
}
.product-media {
aspect-ratio: 1
}
.product-tag {
font-size: 6px;
left: 7px;
top: 8px;
padding: 4px 5px
}
.quick-view {
height: 25px;
width: 25px;
right: 6px;
top: 6px;
font-size: 12px
}
.category-badge {
font-size: 6px;
padding: 3px 4px;
letter-spacing: .3px
}
.collection-toolbar {
flex-wrap: wrap;
gap: 11px
}
.collection-toolbar .search-field {
max-width: none;
flex-basis: 100%
}
.sort-control {
margin-left: auto
}
.sort-control label {
display: block;
font-size: 10px
}
.sort-control select {
min-height: 36px;
width: 145px;
font-size: 10px
}
.about-intro .section-heading {
font-size: 34px
}
.about-values {
gap: 23px
}
.why-grid {
gap: 23px
}
.why-feature h3 {
font-size: 12px
}
.why-feature p {
font-size: 10px
}
.newsletter-panel {
padding: 23px 19px
}
.newsletter-intro .section-heading {
font-size: 29px
}
.contact-card {
padding: 21px 18px
}
.footer-top {
gap: 25px 16px
}
.footer-brand {
gap: 19px
}
.footer-brand p {
max-width: 144px;
font-size: 10px
}
.footer-brand .social-links {
flex-basis: 100%
}
.footer-column h3 {
font-size: 10px
}
.footer-column li a,
.footer-link {
font-size: 9px
}
.modal-title {
font-size: 19px
}
.modal-footer .btn {
font-size: 10px;
padding: 10px 14px;
min-height: 42px
}
.quick-image {
height: 255px
}
.offcanvas-header {
padding: 22px
}
.cart-items {
padding: 0 22px
}
.cart-summary {
padding: 20px 22px
}
.cart-delivery {
padding: 13px 22px;
font-size: 10px
}
}
@media(max-width:767.98px) {
.category-badge {
font-size: 8px
}
.product-name {
font-size: 12px;
min-height: 38px
}
.add-cart {
font-size: 11px
}
.price-currency {
font-size: 9px
}
}
@media(pointer:coarse) {
.quick-view {
width: 38px;
height: 38px;
font-size: 16px
}
.add-cart {
min-height: 44px
}
.quantity-control {
height: 38px
}
.quantity-control button {
width: 34px;
height: 36px
}
.form-control,
.form-select,
.search-field input,
.sort-control select,
.footer-signup input {
font-size: 16px
}
.form-control::placeholder {
font-size: 12px
}
}
/* --- Keyframes ------------------------------------------------------- */
.hero {
min-height: 100vh;
min-height: 100svh
}
.hero .container {
min-height: calc(100vh - 92px);
min-height: calc(100svh - 92px)
}
.hero .hero-title {
font-size: clamp(40px, 4.4vw, 64px);
letter-spacing: -2.8px;
line-height: .98;
margin: 0 0 22px;
max-width: none
}
@keyframes htSwap {
0% {
opacity: 0;
transform: translateY(110%) skewY(4deg)
}
60% {
opacity: 1
}
100% {
opacity: 1;
transform: translateY(0) skewY(0)
}
}
@keyframes infoSwap {
0% {
opacity: 0;
transform: translateX(-26px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes mouseWheel {
0% {
transform: translate(-50%, 0);
opacity: 1
}
70% {
transform: translate(-50%, 9px);
opacity: 0
}
100% {
transform: translate(-50%, 0);
opacity: 0
}
}
@keyframes mousePulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, .35)
}
50% {
box-shadow: 0 0 0 9px rgba(255, 255, 255, 0)
}
}
@keyframes marqueeRun {
to {
transform: translateX(-50%)
}
}
@keyframes cardReveal {
0% {
opacity: 0;
transform: translateY(52px) rotateX(15deg) scale(.95);
clip-path: inset(0 0 100% 0)
}
55% {
opacity: 1;
clip-path: inset(0 0 0 0)
}
100% {
opacity: 1;
transform: none;
clip-path: inset(0 0 0 0)
}
}
@keyframes tileIn {
0% {
opacity: 0;
transform: translateY(34px) rotate(-2deg)
}
100% {
opacity: 1;
transform: none
}
}
@keyframes toastInCustom {
0% {
opacity: 0;
transform: translateX(120%) scale(.9) rotate(4deg)
}
60% {
opacity: 1;
transform: translateX(-8px) scale(1.02) rotate(-1deg)
}
100% {
opacity: 1;
transform: translateX(0) scale(1) rotate(0)
}
}
@keyframes toastOutCustom {
to {
opacity: 0;
transform: translateX(125%) scale(.86);
filter: blur(4px)
}
}
@keyframes toastBar {
from {
transform: scaleX(1)
}
to {
transform: scaleX(0)
}
}
@keyframes toastIcon {
0% {
transform: scale(.2) rotate(-140deg);
opacity: 0
}
60% {
transform: scale(1.18) rotate(8deg);
opacity: 1
}
100% {
transform: scale(1) rotate(0);
opacity: 1
}
}
@keyframes shineSweep {
0% {
transform: translateX(-120%) skewX(-18deg)
}
100% {
transform: translateX(240%) skewX(-18deg)
}
}
@keyframes floaty {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-9px)
}
}
/* --- Ticket-style product cards -------------------------------------- */
.collection-ghost {
position: absolute;
top: 56px;
left: 50%;
transform: translateX(-50%);
font-size: clamp(84px, 15vw, 220px);
font-weight: 750;
letter-spacing: -9px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.2px rgba(31, 88, 60, .14);
pointer-events: none;
white-space: nowrap;
z-index: 0;
user-select: none
}
.collection-section {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fbfaf5 0%, #f3f2ea 100%)
}
.collection-section .container {
position: relative;
z-index: 1
}
.marquee {
position: relative;
overflow: hidden;
border-top: 1px solid rgba(31, 88, 60, .1);
border-bottom: 1px solid rgba(31, 88, 60, .1);
background: rgba(255, 255, 255, .5);
padding: 11px 0;
margin-bottom: 26px
}
.marquee-track {
display: flex;
gap: 38px;
width: max-content;
animation: marqueeRun 34s linear infinite
}
.marquee:hover .marquee-track {
animation-play-state: paused
}
.marquee-track span {
display: inline-flex;
align-items: center;
gap: 38px;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #5d7155;
white-space: nowrap
}
.marquee-track span i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--green);
display: inline-block
}
/* ===== Catalogue "pop" cards ===== */
.product-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 44px 22px;
padding-top: 18px
}
.product-card.pop-card {
--tint: #e6ecdd;
--deep: #2f6b47;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 26px;
padding: 10px;
overflow: visible;
transform-style: preserve-3d;
transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, border-color .5s
}
.product-card.pop-card:hover {
transform: translateY(-6px);
box-shadow: 0 36px 60px -22px color-mix(in srgb, var(--deep) 55%, transparent);
border-color: color-mix(in srgb, var(--deep) 32%, var(--line))
}
.pop-top {
position: relative;
border-radius: 19px;
background: var(--tint);
aspect-ratio: 1/.9;
isolation: isolate;
transition: background-color .4s
}
.pop-clip {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
z-index: 0
}
.pop-orb {
position: absolute;
width: 74%;
aspect-ratio: 1;
border-radius: 50%;
right: -22%;
bottom: -30%;
background: var(--deep);
opacity: .16;
transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s
}
.pop-orb.o2 {
width: 26%;
right: auto;
left: 7%;
top: 9%;
bottom: auto;
opacity: .1
}
.pop-card:hover .pop-orb {
transform: scale(2.4);
opacity: .24
}
.pop-card:hover .pop-orb.o2 {
transform: translate(20px, 10px) scale(1.4);
opacity: .14
}
.pop-frame {
position: absolute;
left: 13%;
right: 13%;
top: 13%;
bottom: 12%;
z-index: 1;
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 22px 34px -14px rgba(12, 36, 22, .45);
transform: rotate(-3deg);
transition: transform .6s cubic-bezier(.3, 1.45, .5, 1), box-shadow .5s
}
.pop-card:nth-child(even) .pop-frame {
transform: rotate(3deg)
}
.pop-card:hover .pop-frame {
transform: translateY(-30px) rotate(0) scale(1.07);
box-shadow: 0 38px 46px -16px rgba(12, 36, 22, .5)
}
.pop-frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(.2, .8, .2, 1)
}
.pop-frame img.cutout {
object-fit: contain;
padding: 12px
}
.pop-card:hover .pop-frame img {
transform: scale(1.1)
}
.pop-frame:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: translateX(-160%) skewX(-18deg);
pointer-events: none
}
.pop-card:hover .pop-frame:after {
animation: shineSweep 1s ease .15s
}
.pop-cat {
position: absolute;
left: 12px;
bottom: 10px;
z-index: 2;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--deep);
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(6px);
padding: 5px 10px;
border-radius: 99px
}
.pop-card .product-tag {
top: 12px;
left: 12px;
z-index: 2;
border-radius: 99px;
font-size: 8px;
padding: 5px 10px;
color: var(--deep);
background: rgba(255, 255, 255, .9)
}
.pop-body {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
padding: 16px 8px 6px
}
.pop-body .product-name {
font-size: 14.5px;
font-weight: 650;
line-height: 1.4;
letter-spacing: -.2px;
margin: 0 0 6px;
min-height: 0;
color: var(--ink)
}
.pop-body .p-tagline {
font-size: 11px;
line-height: 1.65;
color: var(--muted);
margin: 0 0 16px
}
.pop-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto
}
.pop-price {
display: flex;
flex-direction: column;
line-height: 1
}
.pop-price .product-price {
font-size: 19px;
font-weight: 750;
letter-spacing: -.6px;
color: var(--deep)
}
.pop-price small {
font-size: 8.5px;
font-weight: 650;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted);
margin-top: 5px
}
.pop-actions {
display: flex;
align-items: center;
gap: 6px
}
.pop-quick {
width: 38px;
height: 38px;
flex: none;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
display: grid;
place-items: center;
font-size: 15px;
padding: 0;
transition: background-color .25s, color .25s, transform .25s
}
.pop-quick:hover {
background: var(--ink);
color: var(--surface);
transform: rotate(-12deg)
}
.pop-add {
height: 38px;
padding: 0 12px;
border-radius: 99px;
border: 0;
background: var(--deep);
color: #fff;
font-size: 11px;
font-weight: 650;
display: inline-flex;
align-items: center;
gap: 0;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 10px 18px -8px color-mix(in srgb, var(--deep) 70%, transparent);
transition: gap .35s, padding .35s, transform .25s, background-color .3s
}
.pop-add span {
max-width: 0;
opacity: 0;
transition: max-width .4s cubic-bezier(.2, .8, .2, 1), opacity .3s
}
.pop-card:hover .pop-add,
.pop-add:focus-visible,
.pop-add.is-added,
.feat-card:hover .pop-add {
gap: 7px;
padding: 0 15px
}
.pop-card:hover .pop-add span,
.pop-add:focus-visible span,
.pop-add.is-added span,
.feat-card:hover .pop-add span {
max-width: 90px;
opacity: 1
}
.pop-add:hover {
transform: translateY(-2px)
}
.pop-add.is-added {
background: #1f8a4c;
color: #fff
}
.pop-card.spotlight {
grid-column: span 2;
flex-direction: row;
gap: 6px
}
.pop-card.spotlight .pop-top {
flex: 0 0 52%;
aspect-ratio: auto;
min-height: 330px
}
.pop-card.spotlight .pop-body {
padding: 22px 16px 10px
}
.pop-card.spotlight .product-name {
font-size: 22px;
letter-spacing: -.6px;
line-height: 1.25
}
.pop-card.spotlight .pop-add span {
max-width: 90px;
opacity: 1
}
.pop-card.spotlight .pop-add {
gap: 7px;
padding: 0 16px
}
.spot-flag {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--deep);
background: color-mix(in srgb, var(--deep) 12%, transparent);
padding: 6px 11px;
border-radius: 99px;
margin-bottom: 12px
}
.spot-desc {
font-size: 12px;
line-height: 1.8;
color: var(--muted);
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden
}
.spot-perks {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-wrap: wrap;
gap: 6px
}
.spot-perks li {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 600;
padding: 5px 10px;
border-radius: 99px;
background: var(--surface-3);
color: var(--muted)
}
.product-card.reveal-card {
opacity: 0
}
.product-card.reveal-card.in {
animation: popUnfold .9s cubic-bezier(.2, .8, .2, 1) both;
animation-delay: var(--d, 0ms)
}
.pop-card.reveal-card.in .pop-frame {
animation: framePop .9s cubic-bezier(.3, 1.5, .5, 1) both;
animation-delay: calc(var(--d, 0ms) + 220ms)
}
.product-grid.swap-out .product-card {
animation: gridSwapOut .22s ease both
}
/* ===== Featured carousel: coin cards ===== */
.featured-track {
padding-top: 62px
}
.product-card.feat-card {
--tint: #e6ecdd;
--deep: #2f6b47;
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: auto;
padding: 86px 18px 18px;
border: 0;
border-radius: 28px;
background: linear-gradient(165deg, color-mix(in srgb, var(--deep) 82%, #fff) 0%, var(--deep) 72%);
color: #fff;
box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--deep) 75%, transparent);
transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s
}
.product-card.feat-card:hover {
transform: translateY(-8px);
box-shadow: 0 32px 50px -18px color-mix(in srgb, var(--deep) 80%, transparent);
border-color: transparent
}
.feat-img {
position: absolute;
top: -50px;
left: 50%;
width: 126px;
height: 126px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #fff;
background: #fff;
transform: translateX(-50%);
box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .4);
transition: transform .6s cubic-bezier(.3, 1.5, .5, 1)
}
.feat-card:hover .feat-img {
transform: translateX(-50%) translateY(-10px) rotate(-8deg) scale(1.06)
}
.feat-img img {
width: 100%;
height: 100%;
object-fit: cover
}
.feat-img img.cutout {
object-fit: contain;
padding: 12px
}
.feat-card .wish-btn {
top: 14px;
right: 14px
}
.feat-cat {
font-size: 8.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
color: rgba(255, 255, 255, .75);
margin-bottom: 7px
}
.feat-card .product-name {
color: #fff;
font-size: 14.5px;
font-weight: 650;
line-height: 1.4;
min-height: 42px;
margin: 0 0 14px
}
.feat-foot {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
padding-top: 14px;
border-top: 1px dashed rgba(255, 255, 255, .3);
margin-top: auto
}
.feat-card .product-price {
color: #fff;
font-size: 18px;
font-weight: 750
}
.feat-card .pop-quick {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .3);
color: #fff
}
.feat-card .pop-quick:hover {
background: #fff;
color: var(--deep)
}
.feat-card .pop-add {
background: #fff;
color: var(--deep);
box-shadow: none
}
.empty-results {
animation: tileIn .6s both
}
/* ===== New keyframes ===== */
@keyframes popUnfold {
0% {
opacity: 0;
transform: perspective(1100px) rotateX(-58deg) translateY(60px) scale(.94);
transform-origin: 50% 0
}
100% {
opacity: 1;
transform: none;
transform-origin: 50% 0
}
}
@keyframes framePop {
0% {
opacity: 0;
transform: translateY(40px) scale(.6) rotate(-10deg)
}
100% {
opacity: 1
}
}
@keyframes gridSwapOut {
to {
opacity: 0;
transform: translateY(16px) scale(.96)
}
}
@keyframes heartPop {
0% {
transform: scale(1)
}
40% {
transform: scale(1.35)
}
100% {
transform: scale(1)
}
}
@keyframes ringBurst {
0% {
opacity: .9;
transform: scale(.7)
}
100% {
opacity: 0;
transform: scale(1.9)
}
}
@keyframes hxEmerge {
0% {
opacity: 0;
transform: translate3d(0, 50px, -950px) rotateY(-80deg) rotateX(20deg) scale(.3);
filter: blur(12px)
}
45% {
opacity: 1;
filter: blur(0)
}
75% {
transform: translate3d(0, -10px, 60px) rotateY(8deg) rotateX(-3deg) scale(1.04)
}
100% {
opacity: 1;
transform: none;
filter: none
}
}
@keyframes hxSink {
0% {
opacity: 1;
transform: none
}
100% {
opacity: 0;
transform: translate3d(-80px, 40px, -900px) rotateY(75deg) rotateX(-12deg) scale(.35);
filter: blur(10px)
}
}
@keyframes hxText {
0% {
opacity: 0;
transform: translateY(14px);
filter: blur(6px)
}
100% {
opacity: 1;
transform: none;
filter: blur(0)
}
}
@keyframes circlePulse {
0% {
transform: scale(1)
}
35% {
transform: scale(.88)
}
70% {
transform: scale(1.05)
}
100% {
transform: scale(1)
}
}
@keyframes circleIn {
from {
transform: scale(.4);
opacity: 0
}
}
@keyframes thumbIn {
from {
opacity: 0;
transform: translateY(28px) scale(.9)
}
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
/* --- Category tiles --------------------------------------------------- */
.category-card {
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, color .35s
}
.category-card:before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, var(--green), #0f3a29);
transform: translateY(101%);
transition: transform .5s cubic-bezier(.2, .8, .2, 1);
z-index: -1
}
.category-card:hover:before,
.category-card:focus-visible:before {
transform: translateY(0)
}
.category-card:hover,
.category-card:focus-visible {
color: #fff;
box-shadow: 0 24px 44px rgba(19, 70, 45, .28);
border-color: transparent
}
.category-card:hover>.bi,
.category-card:focus-visible>.bi {
color: #c7e79c
}
.category-card:hover .category-count {
color: #bcd0b2
}
.category-card:hover .category-cta {
color: #c7e79c
}
.tile-num {
position: absolute;
top: 9px;
right: 13px;
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: 15px;
color: rgba(31, 88, 60, .3);
transition: color .35s;
z-index: -1
}
.category-card:hover .tile-num {
color: rgba(255, 255, 255, .4)
}
.category-card .cat-orb {
position: absolute;
right: -26px;
bottom: -30px;
width: 74px;
height: 74px;
border-radius: 50%;
background: rgba(31, 88, 60, .09);
transition: .5s;
z-index: -1
}
.category-card:hover .cat-orb {
background: rgba(255, 255, 255, .12);
transform: scale(2.4)
}
/* --- About: editorial numbers, stats, principles ---------------------- */
.about-section {
position: relative;
background: #fff
}
.about-quote {
position: relative;
margin: 26px 0 0;
padding: 20px 22px 20px 54px;
background: linear-gradient(135deg, #f2f6ec, #eef3ea);
border-radius: 0 18px 18px 0;
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: 17px;
line-height: 1.5;
color: #2c4a37
}
.about-quote:before {
content: '\201C';
position: absolute;
left: 18px;
top: 6px;
font-size: 56px;
line-height: 1;
color: #a9c394
}
.about-quote span {
display: block;
font-family: 'DM Sans', sans-serif;
font-style: normal;
font-size: 9.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #7c8b74;
margin-top: 11px
}
.about-values {
position: relative;
counter-reset: aboutval
}
.about-value {
counter-increment: aboutval;
position: relative;
padding-top: 24px;
transition: transform .35s
}
.about-value:hover {
transform: translateX(7px)
}
.about-value .about-num {
position: absolute;
right: 0;
top: 18px;
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: 34px;
line-height: 1;
color: #dfe7d6
}
.about-value .about-num:before {
content: '0' counter(aboutval)
}
.about-value>.bi {
transition: transform .35s
}
.about-value:hover>.bi {
transform: rotate(-12deg) scale(1.18)
}
.stats-band {
position: relative;
margin-top: 58px;
padding: 34px 36px;
border-radius: 26px;
background: linear-gradient(120deg, #174a37, #216046);
color: #fff;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
overflow: hidden;
isolation: isolate
}
.stats-band:after {
content: '';
position: absolute;
right: -70px;
top: -90px;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(199, 231, 156, .16);
z-index: -1
}
.stat {
position: relative;
padding-left: 20px;
border-left: 1px solid rgba(255, 255, 255, .22)
}
.stat:first-child {
border-left: 0;
padding-left: 0
}
.stat b {
display: block;
font-size: 40px;
font-weight: 750;
letter-spacing: -2px;
line-height: 1;
color: #c7e79c;
font-variant-numeric: tabular-nums
}
.stat b small {
font-size: 20px
}
.stat span {
display: block;
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #b6cdb4;
margin-top: 9px
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
margin-top: 34px
}
.principle {
position: relative;
padding: 26px 24px 24px;
border: 1px solid var(--line);
border-radius: 20px;
background: #fbfcf9;
transition: transform .4s, box-shadow .4s, border-color .4s;
overflow: hidden
}
.principle:hover {
transform: translateY(-7px) rotate(-.5deg);
box-shadow: 0 26px 50px rgba(31, 70, 45, .13);
border-color: #c9d7bd
}
.principle .p-step {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: 44px;
line-height: 1;
color: #dbe5d1;
display: block;
margin-bottom: 13px;
transition: color .4s
}
.principle:hover .p-step {
color: var(--green)
}
.principle h3 {
font-size: 15px;
font-weight: 650;
margin-bottom: 9px;
letter-spacing: -.3px
}
.principle p {
font-size: 11.5px;
line-height: 1.85;
color: var(--muted);
margin: 0
}
.principle:after {
content: '';
position: absolute;
right: -34px;
bottom: -34px;
width: 92px;
height: 92px;
border-radius: 50%;
background: rgba(31, 88, 60, .07);
transition: .5s
}
.principle:hover:after {
transform: scale(2.1)
}
/* --- Why: numbered diagonal rows -------------------------------------- */
.why-grid {
gap: 0 54px
}
.why-feature {
position: relative;
padding: 26px 0 26px 56px;
border-top: 1px solid #d0e0c930;
transition: transform .35s, border-color .35s
}
.why-feature:hover {
transform: translateX(6px)
}
.why-feature>.wi {
position: absolute;
left: 0;
top: 26px;
width: 40px;
height: 40px;
border-radius: 13px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
display: grid;
place-items: center;
font-size: 18px;
color: #c7e79c;
transition: .35s
}
.why-feature:hover>.wi {
transform: rotate(-10deg) translateY(-3px);
background: #c7e79c;
color: #17402c;
border-color: #c7e79c
}
.why-feature>p {
padding-left: 0
}
/* --- FAQ numbered rows ------------------------------------------------ */
.faq-accordion .accordion-item {
position: relative
}
.faq-accordion .accordion-button {
padding-left: 52px
}
.faq-accordion .accordion-item:before {
position: absolute;
left: 0;
top: 19px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #eff4ea;
color: var(--green);
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: 14px;
display: grid;
place-items: center;
z-index: 1;
counter-increment: faqnum;
content: counter(faqnum, decimal-leading-zero)
}
.faq-accordion {
counter-reset: faqnum
}
.toast-container {
top: 104px;
right: 24px
}
.hero-card.is-active {
cursor: pointer
}
@media(min-width:992px) and (max-height:840px) {
.hero-title {
font-size: clamp(40px, 4.4vw, 60px);
margin-bottom: 16px
}
.hero-kicker {
margin-bottom: 16px
}
.hero-copy {
margin-bottom: 16px;
line-height: 1.75
}
.hero-productline {
margin-bottom: 18px;
padding: 10px 14px
}
.hero-assurances {
margin-top: 18px
}
.hero-hint {
margin-top: 18px
}
.hero-stage {
height: min(64vh, 520px)
}
}
.toast.fancy {
--bs-toast-opacity: 1;
position: relative;
width: 352px;
max-width: calc(100vw - 32px);
background: rgba(255, 255, 255, .97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(9, 42, 24, .26), 0 4px 14px rgba(9, 42, 24, .14);
opacity: 1;
animation: toastInCustom .7s cubic-bezier(.2, 1.15, .3, 1) both
}
.toast.fancy.toast-out {
animation: toastOutCustom .45s cubic-bezier(.5, 0, .75, 0) both
}
.toast.fancy:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green), #8ec36a, #c7e79c, #8ec36a, var(--green));
background-size: 300% 100%;
animation: alertGlow 3.6s linear infinite
}
@keyframes alertGlow {
from {
background-position: 0 0
}
to {
background-position: 300% 0
}
}
.toast.fancy .toast-body {
padding: 17px 17px 15px;
gap: 13px;
align-items: flex-start
}
.toast-glyph {
flex: none;
width: 38px;
height: 38px;
border-radius: 13px;
display: grid;
place-items: center;
font-size: 19px;
background: linear-gradient(140deg, #1f5c41, #2f8a5f);
color: #e9f7d7;
box-shadow: 0 8px 18px rgba(31, 92, 65, .35);
animation: toastIcon .6s .18s cubic-bezier(.2, 1.4, .4, 1) both
}
.toast.fancy.info .toast-glyph {
background: linear-gradient(140deg, #7a5a2c, #c08a3c);
box-shadow: 0 8px 18px rgba(160, 110, 45, .35)
}
.toast-title {
font-size: 13px;
font-weight: 700;
letter-spacing: -.2px;
display: block;
margin-bottom: 3px
}
.toast-msg {
font-size: 11px;
line-height: 1.65;
color: #6d7a6a;
display: block
}
.toast.fancy .btn-close {
position: relative;
top: 2px;
right: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: #eef2ea;
opacity: 1;
padding: 0;
font-size: 9px;
background-image: none
}
.toast.fancy .btn-close:hover {
background: #dfe8da
}
.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transform-origin: left center;
background: linear-gradient(90deg, #8ec36a, #c7e79c);
animation: toastBar 5s linear forwards
}
/* ===== Alerts: 3D flip-in cards with product thumb, action + progress ===== */
.toast-container {
display: flex;
flex-direction: column;
gap: 12px;
top: 100px;
right: 22px;
perspective: 900px
}
.toast.fancy {
--tone: #2d8a57;
--tone-2: #8fd3a8;
position: relative;
width: 370px;
max-width: calc(100vw - 28px);
margin: 0;
background: color-mix(in srgb, var(--surface) 94%, transparent);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
opacity: 1;
box-shadow: 0 30px 60px -12px rgba(8, 34, 20, .32), 0 4px 14px rgba(8, 34, 20, .1);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transform-origin: 100% 50%;
animation: alertIn .75s cubic-bezier(.2, 1.2, .3, 1) both
}
.toast.fancy.tone-info {
--tone: #b67d22;
--tone-2: #f3cf82
}
.toast.fancy.tone-wish {
--tone: #d23f63;
--tone-2: #ff9db4
}
.toast.fancy.tone-remove {
--tone: #9a4b3c;
--tone-2: #e8a594
}
.toast.fancy.toast-out {
animation: alertOut .45s cubic-bezier(.6, 0, .8, .3) both
}
.toast.fancy:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: auto;
width: 4px;
height: auto;
background: linear-gradient(180deg, var(--tone), var(--tone-2));
animation: none
}
.toast.fancy .toast-body {
position: relative;
display: flex;
align-items: flex-start;
gap: 13px;
padding: 16px 16px 17px 20px
}
.toast.fancy .toast-glyph {
position: relative;
flex: none;
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 18px;
color: #fff;
background: linear-gradient(140deg, var(--tone), color-mix(in srgb, var(--tone) 55%, var(--tone-2)));
box-shadow: 0 10px 20px -6px var(--tone);
animation: toastIcon .65s .15s cubic-bezier(.2, 1.5, .4, 1) both
}
.toast.fancy .toast-glyph:after {
content: '';
position: absolute;
inset: -4px;
border-radius: 17px;
border: 2px solid var(--tone);
opacity: 0;
animation: ringBurst .9s .35s ease-out
}
.toast-thumb {
position: relative;
flex: none;
width: 50px;
height: 50px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35);
animation: toastIcon .6s .1s cubic-bezier(.2, 1.4, .4, 1) both
}
.toast-thumb img {
width: 100%;
height: 100%;
object-fit: cover
}
.toast.fancy .toast-thumb+.toast-glyph {
position: absolute;
left: 54px;
top: 48px;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 11px;
border: 2px solid var(--surface);
box-shadow: none
}
.toast.fancy .toast-thumb+.toast-glyph:after {
border-radius: 50%
}
.toast-copy {
flex: 1;
min-width: 0
}
.toast.fancy .toast-title {
font-size: 13px;
font-weight: 750;
letter-spacing: -.2px;
color: var(--ink);
display: block;
margin-bottom: 2px
}
.toast.fancy .toast-msg {
font-size: 11px;
line-height: 1.6;
color: var(--muted);
display: block
}
.toast-action {
margin-top: 9px;
height: 28px;
padding: 0 12px;
border-radius: 99px;
border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
background: color-mix(in srgb, var(--tone) 10%, transparent);
color: var(--tone);
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background-color .2s, color .2s
}
.toast-action:hover {
background: var(--tone);
color: #fff;
border-color: var(--tone)
}
[data-theme="dark"] .toast-action {
color: var(--tone-2)
}
[data-theme="dark"] .toast-action:hover {
color: #fff
}
.toast-x {
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--surface-3);
color: var(--muted);
display: grid;
place-items: center;
font-size: 10px;
transition: background-color .2s, color .2s, transform .3s
}
.toast-x:hover {
background: var(--tone);
color: #fff;
transform: rotate(90deg)
}
.toast.fancy .toast-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
transform-origin: left center;
background: linear-gradient(90deg, var(--tone), var(--tone-2));
animation: toastBar 5.2s linear forwards
}
@keyframes alertIn {
0% {
opacity: 0;
transform: translateX(70px) rotateY(-50deg) scale(.85)
}
60% {
opacity: 1;
transform: translateX(-6px) rotateY(6deg) scale(1.02)
}
100% {
opacity: 1;
transform: none
}
}
@keyframes alertOut {
to {
opacity: 0;
transform: translateX(90px) rotateY(40deg) scale(.85);
filter: blur(3px)
}
}
/* ===== Wishlist drawer ===== */
.wish-note {
background: color-mix(in srgb, #d23f63 8%, var(--surface));
color: #b3385a
}
.wish-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px
}
.wish-add {
height: 32px;
padding: 0 13px;
border-radius: 99px;
border: 0;
background: var(--green);
color: #fff;
font-size: 10.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
gap: 6px;
transition: transform .2s, background-color .2s
}
.wish-add:hover {
transform: translateY(-2px);
background: var(--green-dark)
}
.wish-empty>.bi {
color: #e28aa0
}
/* ===== Dark mode surfaces ===== */
[data-theme="dark"] .featured-section {
background: var(--surface-2)
}
[data-theme="dark"] .about-section {
background: var(--bg)
}
[data-theme="dark"] .collection-section {
background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%)
}
[data-theme="dark"] .collection-ghost {
-webkit-text-stroke-color: rgba(143, 211, 168, .12)
}
[data-theme="dark"] .marquee {
background: rgba(255, 255, 255, .03);
border-color: var(--line)
}
[data-theme="dark"] .marquee-track span {
color: #9fbfa6
}
[data-theme="dark"] .category-card {
background: color-mix(in srgb, var(--tile) 7%, var(--surface-2));
color: var(--ink)
}
[data-theme="dark"] .category-count {
color: var(--muted)
}
[data-theme="dark"] .tile-num {
color: rgba(143, 211, 168, .3)
}
[data-theme="dark"] .text-link,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .category-card>.bi,
[data-theme="dark"] .category-cta,
[data-theme="dark"] .about-value>.bi,
[data-theme="dark"] .filter-button.active,
[data-theme="dark"] .policy-content h3,
[data-theme="dark"] .product-price,
[data-theme="dark"] .quick-price,
[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .summary-total span:last-child,
[data-theme="dark"] .search-result-price,
[data-theme="dark"] .order-reference,
[data-theme="dark"] .form-status,
[data-theme="dark"] .checkout-payment label,
[data-theme="dark"] .cart-delivery,
[data-theme="dark"] .quick-availability,
[data-theme="dark"] .contact-detail a,
[data-theme="dark"] .principle:hover .p-step {
color: var(--accent-text)
}
[data-theme="dark"] .filter-button {
color: var(--muted)
}
[data-theme="dark"] .filter-button.active {
border-bottom-color: var(--accent-text)
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .search-field input,
[data-theme="dark"] .sort-control select {
background-color: var(--surface-2);
border-color: var(--line);
color: var(--ink)
}
[data-theme="dark"] .form-control::placeholder {
color: #7d8a82
}
[data-theme="dark"] .form-label {
color: #c6d2c9
}
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .form-note,
[data-theme="dark"] .cod-note {
color: var(--muted)
}
[data-theme="dark"] .category-badge {
background: var(--surface-3);
color: #b7c8bb
}
[data-theme="dark"] .empty-results {
background: var(--surface-2)
}
[data-theme="dark"] .icon-button {
color: var(--ink)
}
[data-theme="dark"] .icon-button:hover {
background: var(--surface-3);
color: var(--accent-text)
}
[data-theme="dark"] .carousel-controls .icon-button {
background: var(--surface);
border-color: var(--line)
}
[data-theme="dark"] .about-quote {
background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
color: #dbe8dd
}
[data-theme="dark"] .about-value {
border-top-color: var(--line)
}
[data-theme="dark"] .about-value .about-num {
color: #2b3a32
}
[data-theme="dark"] .principle {
background: var(--surface-2);
border-color: var(--line)
}
[data-theme="dark"] .principle .p-step {
color: #2e3e35
}
[data-theme="dark"] .stats-band {
background: linear-gradient(120deg, #11301f, #1a4430)
}
[data-theme="dark"] .why-section {
background: linear-gradient(115deg, #0f2a1f, #153828)
}
[data-theme="dark"] .faq-accordion {
--bs-accordion-color: var(--ink);
--bs-accordion-btn-color: var(--ink);
--bs-accordion-active-color: var(--accent-text);
--bs-accordion-border-color: var(--line)
}
[data-theme="dark"] .faq-accordion .accordion-item:before {
background: var(--surface-3);
color: var(--accent-text)
}
[data-theme="dark"] .newsletter-panel {
background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
border-color: var(--line)
}
[data-theme="dark"] .contact-card {
background: var(--surface);
border-color: var(--line)
}
[data-theme="dark"] .contact-detail p {
color: #c3cfc6
}
[data-theme="dark"] .contact-detail .detail-label {
color: #8d9b92
}
[data-theme="dark"] .map-placeholder {
border-color: var(--line);
background: var(--surface-2)
}
[data-theme="dark"] .map-placeholder svg {
filter: invert(.9) hue-rotate(180deg) brightness(.75) saturate(.6)
}
[data-theme="dark"] .map-caption,
[data-theme="dark"] .map-open {
background: var(--surface);
color: var(--ink)
}
[data-theme="dark"] .site-footer {
background: #09100c
}
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .modal-content {
background: var(--surface);
color: var(--ink)
}
[data-theme="dark"] .modal-backdrop {
--bs-backdrop-opacity: .65
}
[data-theme="dark"] .cart-summary {
background: var(--surface);
border-color: var(--line)
}
[data-theme="dark"] .cart-delivery {
background: var(--surface-3)
}
[data-theme="dark"] .wish-note {
background: color-mix(in srgb, #d23f63 12%, var(--surface));
color: #ff9db4
}
[data-theme="dark"] .cart-item {
border-color: var(--line)
}
[data-theme="dark"] .quantity-control {
background: var(--surface-2);
border-color: var(--line)
}
[data-theme="dark"] .quantity-control button {
color: var(--accent-text)
}
[data-theme="dark"] .quantity-control output {
color: var(--ink)
}
[data-theme="dark"] .checkout-order {
background: var(--surface-2)
}
[data-theme="dark"] .checkout-line {
color: #a9b6ad
}
[data-theme="dark"] .search-result {
color: var(--ink);
border-color: var(--line)
}
[data-theme="dark"] .search-result:hover {
background: var(--surface-2)
}
[data-theme="dark"] .confirmation-mark {
background: var(--surface-3);
color: var(--accent-text)
}
[data-theme="dark"] .quick-image {
background: var(--surface-2)
}
[data-theme="dark"] .back-to-top {
background: var(--surface);
border-color: var(--line);
color: var(--accent-text)
}
[data-theme="dark"] .btn-outline-emerald {
--bs-btn-color: #9fdcb4;
--bs-btn-border-color: #2f5a44;
--bs-btn-hover-color: #c4f0d3;
--bs-btn-hover-bg: #173226;
--bs-btn-hover-border-color: #4c8a67;
--bs-btn-active-color: #c4f0d3;
--bs-btn-active-bg: #173226;
--bs-btn-active-border-color: #4c8a67
}
[data-theme="dark"] .pop-top {
background: color-mix(in srgb, var(--tint) 13%, var(--surface-2))
}
[data-theme="dark"] .pop-cat,
[data-theme="dark"] .pop-card .product-tag {
background: rgba(10, 16, 13, .72);
color: color-mix(in srgb, var(--deep) 40%, #fff)
}
[data-theme="dark"] .pop-price .product-price,
[data-theme="dark"] .spot-flag {
color: color-mix(in srgb, var(--deep) 42%, #fff)
}
[data-theme="dark"] .pop-quick {
background: var(--surface-2);
border-color: var(--line);
color: var(--ink)
}
[data-theme="dark"] .feat-card .product-price {
color: #fff
}
[data-theme="dark"] .wish-btn {
background: rgba(20, 28, 24, .86);
color: #ff7c98
}
[data-theme="dark"] .quick-wish {
background: var(--surface-3)
}
[data-theme="dark"] .hx-shot {
box-shadow: 0 50px 80px -24px rgba(0, 0, 0, .7), 0 0 0 10px color-mix(in srgb, var(--surface) 70%, transparent)
}
[data-theme="dark"] .hx-thumb img {
border-color: var(--surface)
}
/* ===== Responsive (new layout) ===== */
@media(max-width:1199.98px) {
.navbar-collapse .nav-pill {
margin: 4px 0 16px
}
.hx-grid {
column-gap: 18px
}
.hx-stage {
width: min(32vw, 360px)
}
.hx-float {
font-size: 10px;
padding: 6px 12px 6px 6px
}
.hx-float>.bi {
width: 28px;
height: 28px;
font-size: 13px
}
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
@media(max-width:991.98px) {
.hx-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "copy" "visual" "thumbs";
min-height: 0;
padding-top: 30px;
padding-bottom: 36px;
row-gap: 6px
}
.hx-copy {
max-width: 660px;
align-self: auto
}
.hx-visual {
min-height: 480px
}
.hx-stage {
width: min(52vw, 340px)
}
.hx-circle {
width: min(92vw, 560px);
right: -20%;
bottom: -18%
}
.hx-ring {
width: min(72vw, 440px);
right: 8%
}
.hx-thumbs {
max-width: none
}
}
@media(max-width:767.98px) {
.navbar,
.navbar .container {
min-height: 72px
}
.brand {
font-size: 24px
}
.brand-logo {
width: 40px;
height: 40px
}
.brand-mark {
width: 19px;
height: 22px
}
.nav-btn {
width: 38px;
height: 38px;
font-size: 16px
}
.hx {
padding-top: 72px;
min-height: 0
}
.hx-title {
font-size: clamp(31px, 8.2vw, 44px);
letter-spacing: -1.5px
}
.hx-sub {
font-size: 12px
}
.hx-price {
font-size: 34px
}
.hx-name {
font-size: 17px
}
.hx-visual {
min-height: 420px
}
.hx-stage {
width: min(60vw, 290px)
}
.hx-float small {
display: none
}
.hx-float.f1 {
top: 4%;
left: -1%
}
.hx-float.f2 {
top: 28%;
right: -3%
}
.hx-float.f3 {
bottom: 20%;
left: -3%
}
.hx-float.f4 {
bottom: 3%;
right: 6%
}
.hx-sticker {
width: 72px;
height: 72px;
left: -9%
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px 12px
}
.product-card.pop-card {
padding: 7px;
border-radius: 20px
}
.pop-card.spotlight {
grid-column: auto;
flex-direction: column;
gap: 0
}
.pop-card.spotlight .pop-top {
flex: none;
aspect-ratio: 1/.9;
min-height: 0
}
.pop-card.spotlight .pop-body {
padding: 13px 5px 4px
}
.pop-card.spotlight .product-name {
font-size: 13px;
letter-spacing: -.2px
}
.spot-desc,
.spot-perks,
.pop-body .p-tagline {
display: none
}
.pop-body {
padding: 13px 5px 4px
}
.pop-body .product-name {
font-size: 12.5px
}
.pop-foot {
flex-direction: column;
align-items: stretch;
gap: 10px
}
.pop-actions {
width: 100%
}
.pop-add,
.pop-card.spotlight .pop-add {
flex: 1;
justify-content: center;
gap: 6px;
padding: 0 10px
}
.pop-add span {
max-width: 90px;
opacity: 1
}
.pop-card:hover .pop-frame {
transform: translateY(-16px) scale(1.05)
}
.featured-track {
padding-top: 58px
}
.toast-container {
top: 84px;
right: 14px;
left: 14px;
align-items: flex-end
}
}
@media(max-width:479.98px) {
.brand-word {
display: none
}
.hx-actions {
gap: 8px
}
.hx-order {
flex: 1;
justify-content: center;
padding: 0 16px
}
.hx-links .hx-link {
flex: 1;
justify-content: center
}
.hx-visual {
min-height: 360px
}
.hx-stage {
width: min(62vw, 236px)
}
.hx-float {
font-size: 9px;
padding: 5px 10px 5px 5px;
gap: 6px
}
.hx-float>.bi {
width: 24px;
height: 24px;
font-size: 11px
}
.hx-thumb {
flex-basis: 92px
}
}
@media(hover:none) {
.pop-add span {
max-width: 90px;
opacity: 1
}
.pop-add {
gap: 7px;
padding: 0 14px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto !important
}
*,
*:before,
*:after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important
}
[data-aos] {
opacity: 1 !important;
transform: none !important
}
}

/* ==========================================================================
   MULTI-PAGE ADDITIONS (internal pages)
   ========================================================================== */
/* --- Page hero (inner pages) --- */
.page-head {
position: relative;
padding: 152px 0 46px;
background: linear-gradient(180deg, var(--hx-bg) 0%, var(--bg) 100%);
overflow: hidden;
isolation: isolate
}
[data-theme="dark"] .page-head {
background: linear-gradient(180deg, var(--hx-bg-dark) 0%, var(--bg) 100%)
}
.page-head:before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--green) 10%, transparent), transparent 42%)
}
.page-title {
font-size: clamp(34px, 4.2vw, 54px);
font-weight: 550;
letter-spacing: -2px;
line-height: 1.1;
margin: 0 0 14px
}
.page-title em {
font-family: 'DM Serif Display', serif;
font-weight: 400;
letter-spacing: -1px
}
.page-title strong {
font-weight: 750;
color: var(--green)
}
[data-theme="dark"] .page-title strong {
color: var(--accent-text)
}
.page-copy {
max-width: 640px;
font-size: 13px;
line-height: 1.85;
color: var(--muted);
margin: 0
}
.page-crumb {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 650;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px
}
.page-crumb a:hover {
color: var(--green);
text-decoration: underline;
text-underline-offset: 3px
}
.page-crumb .bi {
font-size: 8px;
opacity: .6
}
/* --- Checkout page --- */
.checkout-section {
padding: 30px 0 92px
}
.checkout-panel {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
padding: 28px;
box-shadow: 0 7px 30px rgba(49, 67, 41, .04)
}
.checkout-panel>h3 {
font-size: 19px;
letter-spacing: -.5px;
font-weight: 550;
margin-bottom: 23px
}
.checkout-side {
position: sticky;
top: 112px
}
.checkout-side .checkout-order {
margin-top: 0
}
.checkout-actions {
display: flex;
gap: 12px;
margin: 18px 0 8px
}
.checkout-actions .btn {
flex: 1
}
.checkout-empty-standalone {
max-width: 640px;
margin: 0 auto
}
/* --- Policy pages --- */
.policy-section {
padding: 28px 0 92px
}
.policy-card {
max-width: 880px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 44px 48px;
box-shadow: 0 10px 34px rgba(37, 78, 48, .06)
}
.policy-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 650;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--muted);
background: var(--surface-3);
border-radius: 99px;
padding: 7px 14px;
margin-bottom: 22px
}
.policy-meta .bi {
color: var(--green)
}
[data-theme="dark"] .policy-meta .bi {
color: var(--accent-text)
}
.policy-related {
max-width: 880px;
margin: 24px auto 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center
}
/* --- Unsubscribe page --- */
.unsubscribe-card {
max-width: 620px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 38px 40px;
box-shadow: 0 10px 34px rgba(37, 78, 48, .06)
}
.unsubscribe-card h3 {
font-size: 19px;
letter-spacing: -.5px;
font-weight: 550;
margin-bottom: 22px
}
.unsubscribe-links {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: 11px;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap
}
/* --- Contact page tweak --- */
.contact-page {
padding-top: 24px
}
/* --- About page CTA --- */
.about-cta-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end
}
/* --- Footer newsletter quick links --- */
.footer-sub-links {
margin: 12px 0 0;
font-size: 10px;
color: #adc3a8;
display: flex;
align-items: center;
gap: 8px
}
.footer-sub-links a {
color: #cfe0c6;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s
}
.footer-sub-links a:hover {
color: #fff
}
/* --- Responsive additions --- */
@media(max-width:991.98px) {
.page-head {
padding: 132px 0 38px
}
.about-cta-actions {
justify-content: flex-start;
margin-top: 20px
}
}
@media(max-width:767.98px) {
.page-head {
padding: 116px 0 32px
}
.checkout-section {
padding: 22px 0 64px
}
.checkout-panel {
padding: 22px 18px
}
.checkout-side {
position: static;
margin-top: 26px
}
.checkout-actions {
flex-direction: column
}
.policy-card {
padding: 28px 22px
}
.unsubscribe-card {
padding: 26px 20px
}
}