/* Fit-Root theme styles. Generated by tools/build_theme.py from the approved preview + src/wp.css. */
:root {
  --ivory: #F7F1E8;
  --ivory-2: #EEE4D6;
  --ink: #160F0B;
  --ink-2: #4A3E35;
  --muted: #7D7168;
  --line: rgba(22, 15, 11, .10);
  --cocoa-0: #0E0805;
  --cocoa-1: #170F0A;
  --cocoa-2: #24170F;
  --cream: #F6ECDD;
  --cream-2: #CDBBA8;
  --gold: #E2B455;
  --gold-2: #F6D998;
  --gold-3: #B4822A;
  --forest: #1E5138;
  --forest-2: #143A27;
  --leaf: #8FBF72;
  --sale: #C0412A;
  --blush: #F6BCC8;
  --pistachio: #CDE4B0;
  --butter: #F7DB9C;
  --lilac: #D7CBF3;
  --mint: #BFE3CF;
  --caramel: #EBC9A2;
  --rose: #F2C3B8;
  --t-blush: #F8E1E5;
  --t-caramel: #F1E0CB;
  --t-pistachio: #E1EAD2;
  --t-butter: #F5E8C6;
  --t-mint: #DCEADF;
  --t-rose: #F5DDD7;
  --t-lilac: #E7E1F1;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fr * { box-sizing: border-box; }
.fr [hidden] { display: none !important; }
html { scroll-behavior: smooth; }
.fr img { display: block; max-width: 100%; height: auto; }
.fr a { color: inherit; }
.fr p { margin: 0; }
.fr h1, .fr h2, .fr h3, .fr h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; color: inherit; }
.fr .nb { white-space: nowrap; }
.fr .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.fr button, .fr input, .fr select, .fr textarea { font: inherit; color: inherit; }
.fr button { cursor: pointer; }
.fr :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.fr .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fr [id] { scroll-margin-top: 110px; }
.fr .wrap { position: relative; z-index: 2; max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.fr .band { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 136px); }
.fr .dark { background: var(--cocoa-1); color: var(--cream); }
.fr .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); }
.fr .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.fr .dark .kicker { color: var(--gold); }
.fr .head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.fr .head h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); margin-top: 16px; }
.fr .head p { color: var(--muted); font-size: 1.06rem; max-width: 44ch; justify-self: end; }
.fr .dark .head p { color: var(--cream-2); }
@media (max-width: 820px) {
.fr .head { grid-template-columns: 1fr; }
.fr .head p { justify-self: start; }
}
.fr .gold-text { background: linear-gradient(100deg, #8A5D12 0%, #C38B2A 30%, #E6B95A 45%, #B07A22 60%, #8A5D12 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.fr .glass { background: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px -30px rgba(70, 40, 20, .45); }
.fr .glass-dark { background: linear-gradient(140deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 70px -30px rgba(0, 0, 0, .7); }
.fr .aurora, .fr .blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fr .aurora i, .fr .blobs i { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 24s ease-in-out infinite alternate; will-change: transform; }
.fr .aurora i { opacity: .6; }
.fr .aurora .a1 { width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; background: var(--caramel); top: -18%; left: -12%; }
.fr .aurora .a2 { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; background: var(--butter); top: 10%; right: -14%; animation-duration: 30s; }
.fr .aurora .a3 { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; background: var(--pistachio); bottom: -24%; left: 26%; animation-duration: 27s; }
.fr .aurora .a4 { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; background: var(--blush); top: 40%; left: 40%; opacity: .5; animation-duration: 34s; }
.fr .blobs i { opacity: .62; }
.fr .blobs .b1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: var(--blush); top: -8%; left: -10%; }
.fr .blobs .b2 { width: 42vw; height: 42vw; max-width: 600px; max-height: 600px; background: var(--pistachio); top: 30%; right: -12%; animation-duration: 29s; }
.fr .blobs .b3 { width: 38vw; height: 38vw; max-width: 540px; max-height: 540px; background: var(--butter); bottom: -10%; left: 30%; animation-duration: 26s; }
@keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(7%, 9%, 0) scale(1.14); } 100% { transform: translate3d(-5%, -7%, 0) scale(.94); } }
.fr .grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.fr canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fr .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0; font-weight: 600; font-size: 0.98rem; text-decoration: none; white-space: nowrap; isolation: isolate; overflow: hidden; transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .35s var(--ease), box-shadow .3s ease; }
.fr .btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.fr .btn:hover svg { transform: translateX(4px); }
.fr .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.fr .btn:hover::after { transform: translateX(120%); }
.fr .btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3)); color: var(--cocoa-1); box-shadow: 0 10px 30px -10px rgba(226, 180, 85, .7); }
.fr .btn-dark { background: var(--ink); color: var(--ivory); box-shadow: 0 12px 30px -14px rgba(22, 15, 11, .6); }
.fr .btn-forest { background: linear-gradient(135deg, #2A6B4A, var(--forest)); color: #fff; box-shadow: 0 12px 30px -14px rgba(30, 81, 56, .8); }
.fr .btn-glass { color: var(--cream); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fr .btn-line { color: var(--ink); background: rgba(255, 255, 255, .5); border: 1px solid rgba(22, 15, 11, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fr .btn-block { width: 100%; }
.fr .preview-bar { position: relative; z-index: 50; background: var(--t-butter); color: var(--ink-2); font-size: 0.78rem; }
.fr .preview-bar .wrap { padding-block: 7px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.fr .preview-bar b { color: var(--ink); }
.fr .progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); z-index: 70; }
.fr .nav-shell { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 45; height: 0; display: flow-root; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.fr .nav-pill { position: relative; max-width: 1240px; margin: 12px auto 0; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 999px; transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; background: rgba(255, 255, 255, .62); color: var(--ink); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 50px -24px rgba(40, 22, 10, .45); }
.fr .nav-pill.on-dark { background: rgba(23, 15, 10, .42); color: var(--cream); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 50px -24px rgba(0, 0, 0, .7); }
.fr .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.fr .brand img { width: 34px; }
.fr .brand b { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.045em; line-height: 1; }
.fr .brand small { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: .65; margin-top: 3px; }
.fr .nav { display: flex; gap: 2px; margin-inline: auto; }
.fr .nav a { position: relative; text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 9px 14px; border-radius: 999px; transition: background-color .25s ease; }
.fr .nav a:hover { background: rgba(127, 127, 127, .14); }
.fr .nav a.hot::after { content: ""; position: absolute; top: 8px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--sale); box-shadow: 0 0 0 0 rgba(192, 65, 42, .6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(192, 65, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 65, 42, 0); } }
.fr .actions { display: flex; gap: 6px; align-items: center; }
.fr .icon-btn { position: relative; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: rgba(127, 127, 127, .1); border: 0; }
.fr .icon-btn:hover { background: rgba(127, 127, 127, .2); }
.fr .icon-btn svg { width: 20px; height: 20px; }
.fr .badge-count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--cocoa-1); font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.fr .menu-btn { display: none; }
@media (max-width: 980px) {
.fr .menu-btn { display: grid; }
.fr .actions { margin-left: auto; }
.fr .nav { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 0; padding: 10px; border-radius: 24px; background: rgba(255, 255, 255, .9); color: var(--ink); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.fr .nav.open { display: flex; }
.fr .nav a { padding: 14px 16px; }
}
@media (max-width: 440px) {
.fr .icon-btn.optional { display: none; }
.fr .brand small { display: none; }
}
.fr .hero { position: relative; overflow: hidden; background: radial-gradient(110% 80% at 85% 0%, #FFE6CF 0%, rgba(255, 230, 207, 0) 55%), radial-gradient(90% 70% at 0% 100%, #E6F0D8 0%, rgba(230, 240, 216, 0) 60%), var(--ivory); color: var(--ink); padding-top: clamp(120px, 14vw, 170px); }
.fr .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; padding-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 920px) {
.fr .hero-grid { grid-template-columns: 1fr; }
}
.fr .hero-copy { display: flex; flex-direction: column; gap: 26px; }
.fr .glass-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px; text-decoration: none; font-size: 0.88rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 30px -18px rgba(70, 40, 20, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fr .glass-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sale); box-shadow: 0 0 10px var(--sale); animation: ping-gold 2s infinite; }
@keyframes ping-gold { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.fr .glass-pill b { padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--ivory); font-weight: 600; }
.fr .hero h1 { font-size: clamp(3.3rem, 8.4vw, 7.4rem); font-weight: 800; letter-spacing: -0.055em; line-height: .9; color: var(--ink); }
.fr .hero h1 .line { display: block; }
.fr .hero h1 .it { font-size: 1.08em; letter-spacing: -0.03em; line-height: .95; }
.fr .made-for { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 .35em; }
.fr .rotator { position: relative; display: inline-block; color: var(--forest); font-family: var(--serif); font-style: italic; font-size: 1.15em; line-height: 1; transition: transform .45s var(--ease), filter .45s ease, opacity .45s ease; }
.fr .rotator.out { transform: translateY(-40%); filter: blur(8px); opacity: 0; }
.fr .rotator.in { transform: translateY(40%); filter: blur(8px); opacity: 0; transition: none; }
.fr .lede { font-size: clamp(1.04rem, 1.4vw, 1.18rem); color: var(--ink-2); max-width: 46ch; }
.fr .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.fr .hero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.fr .gstat { padding: 12px 18px; border-radius: 18px; display: flex; flex-direction: column; min-width: 120px; }
.fr .gstat b { font-family: var(--display); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.fr .gstat span { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.fr .stack { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 620px; justify-self: center; --px: 0; --py: 0; }
.fr .stack .glow { position: absolute; inset: 12% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(247, 190, 120, .55), transparent 65%); filter: blur(30px); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .75; } }
.fr .fc { position: absolute; display: block; text-decoration: none; transform: translate3d(calc(var(--px) * var(--d) * 1px), calc(var(--py) * var(--d) * 1px), 0) rotate(var(--rot, 0deg)); transition: transform .6s var(--ease); }
.fr .fc-inner { border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(90, 50, 20, .5), 0 0 0 1px rgba(255, 255, 255, .7); animation: bob 7s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.fr .fc-inner img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); }
.fr .fc:hover .fc-inner img { transform: scale(1.06); }
@keyframes bob { 50% { transform: translateY(-16px); } }
.fr .fc.back-l { left: 0; top: 17%; width: 40%; --d: -14; --rot: -9deg; --delay: -2.4s; z-index: 1; }
.fr .fc.back-r { right: 0; top: 11%; width: 40%; --d: -10; --rot: 8deg; --delay: -4.6s; z-index: 1; }
.fr .fc.front { left: 26%; top: 3%; width: 48%; --d: 22; z-index: 3; }
.fr .fc-tag { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fr .fc-tag i { font-style: normal; color: var(--forest); margin-left: 6px; }
.fr .chip-f { position: absolute; z-index: 4; padding: 12px 16px; border-radius: 18px; display: flex; align-items: center; gap: 10px; font-size: 0.84rem; font-weight: 600; color: var(--ink); transform: translate3d(calc(var(--px) * var(--d) * 1px), calc(var(--py) * var(--d) * 1px), 0); transition: transform .6s var(--ease); }
.fr .chip-f > span { display: flex; align-items: center; gap: 10px; animation: bob 8s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.fr .chip-f b { font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; color: var(--forest); }
.fr .chip-f svg { width: 22px; height: 22px; color: var(--forest); }
.fr .chip-f.c1 { left: -1%; top: 2%; --d: 34; --delay: -1s; }
.fr .chip-f.c2 { right: -2%; top: 56%; --d: 28; --delay: -3s; }
.fr .chip-f.c3 { left: 3%; bottom: 3%; --d: 40; --delay: -5s; }
@media (max-width: 520px) {
.fr .chip-f { padding: 9px 12px; font-size: 0.76rem; }
.fr .chip-f b { font-size: 1.1rem; }
.fr .fc-tag { font-size: 0.72rem; padding: 6px 10px; }
}
.fr .mq { position: relative; z-index: 2; border-top: 1px solid var(--line); padding-block: 22px 26px; display: grid; gap: 10px; overflow: hidden; }
.fr .mq-row { overflow: hidden; white-space: nowrap; }
.fr .mq-track { display: inline-flex; animation: mq 40s linear infinite; }
.fr .mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 46s; }
.fr .mq-track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--ink); }
.fr .mq-track span::after { content: "✦"; color: var(--gold-3); font-size: .6em; }
.fr .mq-row.rev .mq-track span { color: transparent; -webkit-text-stroke: 1px rgba(30, 81, 56, .45); }
@keyframes mq { to { transform: translateX(-50%); } }
.fr .light-stage { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ivory), var(--ivory-2) 70%, var(--ivory)); }
.fr .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(220px, auto)); gap: 16px; }
.fr .age { position: relative; display: block; overflow: hidden; border-radius: var(--r-xl); text-decoration: none; color: var(--ink); min-height: 240px; background: var(--c, var(--t-caramel)); }
.fr .age img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.fr .age:hover img { transform: scale(1.07); }
.fr .age.big { grid-column: span 2; grid-row: span 2; min-height: 500px; }
.fr .age-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; border-radius: 20px; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.fr .age-cap small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.fr .age-cap h3 { font-size: 1.5rem; margin-top: 4px; }
.fr .age.big .age-cap h3 { font-size: 2.2rem; }
.fr .age-cap p { font-size: 0.84rem; color: var(--ink-2); margin-top: 4px; }
.fr .age-cap .go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .4s var(--ease); }
.fr .age:hover .go { transform: rotate(-45deg); }
.fr .go svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
.fr .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr .age.big { grid-column: span 2; grid-row: span 1; min-height: 380px; }
}
@media (max-width: 520px) {
.fr .bento { grid-template-columns: 1fr; }
.fr .age.big { grid-column: auto; }
.fr .age { min-height: 300px; }
}
.fr .tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease); }
.fr .tilt.is-tilting { transition: transform .12s linear; }
.fr .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42), transparent 45%); opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light; }
.fr .spot:hover::after { opacity: 1; }
.fr .seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; margin-bottom: 30px; }
.fr .seg button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); transition: color .3s ease; }
.fr .seg button[aria-pressed="true"] { color: var(--ivory); }
.fr .seg .ind { position: absolute; z-index: 0; top: 5px; height: calc(100% - 10px); border-radius: 999px; background: var(--ink); transition: left .45s var(--ease), width .45s var(--ease), top .45s var(--ease); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.fr .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
@media (max-width: 1080px) {
.fr .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.fr .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}
.fr .pcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 14px; border-radius: 26px; min-width: 0; }
.fr .pc-media { position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 19px; overflow: hidden; background: var(--tint, var(--t-caramel)); }
.fr .pc-media > a { position: absolute; inset: 0; }
.fr .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.fr .pcard:hover .pc-media img { transform: scale(1.07); }
.fr .flag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 6px 11px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ink); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .8); }
.fr .flag.save { background: rgba(30, 81, 56, .82); color: #fff; border-color: rgba(255, 255, 255, .2); }
.fr .flag.dark { background: rgba(22, 15, 11, .78); color: var(--gold-2); border-color: rgba(255, 255, 255, .15); }
.fr .wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s var(--ease); }
.fr .wish:hover { transform: scale(1.1); }
.fr .wish svg { width: 18px; height: 18px; }
.fr .wish[aria-pressed="true"] svg { fill: var(--sale); stroke: var(--sale); animation: pop .4s var(--ease); }
@keyframes pop { 50% { transform: scale(1.4); } }
.fr .pc-body { display: flex; flex-direction: column; gap: 6px; padding-inline: 6px; flex: 1; }
.fr .pc-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fr .pcard h3 { font-size: 1.24rem; letter-spacing: -0.025em; }
.fr .pcard h3 a { text-decoration: none; }
.fr .pc-line { font-size: 0.88rem; color: var(--ink-2); }
.fr .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.fr .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-variant-numeric: tabular-nums; min-width: 0; }
.fr .price-line b { font-family: var(--display); font-size: 1.32rem; font-weight: 800; letter-spacing: -0.03em; }
.fr .price-line del { color: var(--muted); font-size: 0.88rem; }
.fr .price-line .gain { font-size: 0.76rem; font-weight: 700; color: var(--forest); }
.fr .add-pill { flex: none; display: inline-flex; align-items: center; gap: 0; height: 42px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--ink); color: var(--ivory); font-weight: 600; font-size: 0.86rem; overflow: hidden; transition: gap .35s var(--ease), padding .35s var(--ease), background-color .3s ease; }
.fr .add-pill svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.fr .add-pill span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s var(--ease); }
.fr .pcard:hover .add-pill, .fr .add-pill:focus-visible { gap: 6px; padding: 0 16px 0 12px; }
.fr .pcard:hover .add-pill span, .fr .add-pill:focus-visible span { max-width: 80px; }
.fr .add-pill:hover { background: var(--forest); }
.fr .add-pill:hover svg { transform: rotate(90deg); }
@media (hover: none) {
.fr .add-pill { gap: 6px; padding: 0 14px 0 10px; }
.fr .add-pill span { max-width: 80px; }
}
@media (max-width: 420px) {
.fr .add-pill span { display: none; }
.fr .add-pill { padding: 0 12px !important; }
}
.fr .promo { position: relative; overflow: hidden; border-radius: 26px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; background: radial-gradient(120% 100% at 0% 0%, #2C7552, var(--forest-2)); color: #fff; min-height: 100%; }
.fr .promo .big { font-family: var(--serif); font-style: italic; font-size: 5.4rem; line-height: .85; }
.fr .promo h3 { font-size: 2rem; color: #fff; }
.fr .promo p { color: #CFE6D8; margin-top: 8px; }
.fr .promo .ring-svg { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px dashed rgba(246, 217, 152, .4); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fr .ring { position: relative; }
.fr .ring::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angle), transparent 0 55%, var(--gold-2) 70%, var(--gold) 80%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: angle 4.5s linear infinite; }
.fr .ring-hover::before { opacity: 0; transition: opacity .4s ease; }
.fr .ring-hover:hover::before { opacity: 1; }
@keyframes angle { to { --angle: 360deg; } }
.fr .save-stage { position: relative; overflow: hidden; background: var(--ivory); }
.fr .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 860px) {
.fr .tiers { grid-template-columns: 1fr; }
}
.fr .tier { position: relative; border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fr .tier .n { font-family: var(--serif); font-style: italic; font-size: 4.8rem; line-height: .8; color: var(--forest); }
.fr .tier h3 { font-size: 1.6rem; }
.fr .tier .tp { font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.fr .tier .tsub { font-size: 0.9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.fr .tier .tsave { align-self: flex-start; font-size: 0.8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--t-pistachio); color: var(--forest); font-variant-numeric: tabular-nums; }
.fr .tier ul { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 0.92rem; font-weight: 600; }
.fr .tier li::before { content: "✓"; color: var(--forest); margin-right: 8px; }
.fr .tier.best { background: radial-gradient(120% 100% at 100% 0%, #2B6E4D, var(--forest-2)); color: #fff; border: 0; box-shadow: 0 30px 70px -30px rgba(20, 58, 39, .9); }
.fr .tier.best .n { color: var(--gold-2); }
.fr .tier.best .tsub { color: #CFE6D8; }
.fr .tier.best .tsave { background: rgba(246, 217, 152, .18); color: var(--gold-2); }
.fr .tier.best ul { border-color: rgba(255, 255, 255, .16); }
.fr .tier.best li::before { color: var(--gold-2); }
.fr .tier .ribbon { position: absolute; top: 26px; right: 24px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--cocoa-1); }
.fr .gifting { background: linear-gradient(165deg, #FFF4E4 0%, #FDE6DA 48%, #FFF1DC 100%); color: var(--ink); }
.fr .gifting .kicker { color: #B5542A; }
.fr .gifting .aurora .a1 { background: #F6B042; opacity: .38; }
.fr .gifting .aurora .a2 { background: #F3A6B8; opacity: .45; }
.fr .gifting .aurora .a3 { background: #F9D27A; }
.fr .gifting h2 .it { font-size: 1.05em; }
.fr .gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) {
.fr .gift-grid { grid-template-columns: 1fr; max-width: 560px; }
}
.fr .gcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; min-width: 0; }
.fr .gcard-media { position: relative; display: block; aspect-ratio: 4 / 4.3; overflow: hidden; }
.fr .gcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.fr .gcard:hover .gcard-media img { transform: scale(1.06); }
.fr .gcard-media::after { content: ""; position: absolute; inset: auto 0 0; height: 25%; background: linear-gradient(to top, rgba(255, 250, 242, .5), transparent); }
.fr .gcard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; color: var(--ink); }
.fr .gcard h3 { font-size: 1.6rem; color: var(--ink); }
.fr .gcard .inside { font-size: 0.9rem; color: var(--muted); }
.fr .gfacts { display: flex; flex-wrap: wrap; gap: 6px; }
.fr .gfacts span { font-size: 0.74rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .65); border: 1px solid var(--line); }
.fr .gprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 4px; }
.fr .gprice b { font-family: var(--display); font-size: 2.3rem; font-weight: 800; letter-spacing: -0.045em; }
.fr .gprice span, .fr .gprice del { color: var(--muted); font-size: 0.88rem; }
.fr .gcard .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fr .gcard .btn { min-height: 46px; padding: 0 12px; font-size: 0.9rem; }
.fr .partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
@media (max-width: 920px) {
.fr .partner { grid-template-columns: 1fr; }
}
.fr .partner h3 { color: var(--ink); font-size: clamp(2rem, 3.6vw, 2.8rem); }
.fr .points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
@media (max-width: 480px) {
.fr .points { grid-template-columns: 1fr; }
}
.fr .point { padding: 18px; border-radius: 20px; }
.fr .point svg { width: 26px; height: 26px; color: var(--gold-3); }
.fr .point h4 { color: var(--ink); font-size: 1.1rem; letter-spacing: -0.01em; margin-top: 10px; }
.fr .point p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.fr .contact-dark { margin-top: 22px; font-size: 0.95rem; color: var(--ink-2); }
.fr .contact-dark b { color: var(--ink); user-select: all; }
.fr .form-card { border-radius: var(--r-xl); padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; color: var(--ink); }
.fr .form-card h3 { font-size: 1.7rem; color: var(--ink); }
.fr .field { display: grid; gap: 6px; min-width: 0; }
.fr .field label, .fr .field .lbl { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.fr .field input, .fr .field select, .fr .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid rgba(22, 15, 11, .14); background: rgba(255, 255, 255, .72); transition: border-color .2s ease, box-shadow .2s ease; }
.fr .field input:focus, .fr .field select:focus, .fr .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(30, 81, 56, .14); }
.fr .fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
.fr .fields-2 { grid-template-columns: 1fr; }
}
.fr .ok-msg { font-size: 0.9rem; font-weight: 600; color: var(--forest); }
.fr .inside-stage { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ivory), #F3EADC); }
.fr .inside-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 980px) {
.fr .inside-grid { grid-template-columns: 1fr; }
}
.fr .orbit { position: relative; width: min(100%, 600px); aspect-ratio: 1; margin-inline: auto; --r1: 138px; --r2: 248px; }
.fr .orbit::before, .fr .orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(30, 81, 56, .28); transform: translate(-50%, -50%); pointer-events: none; }
.fr .orbit::before { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); }
.fr .orbit::after { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); }
.fr .ring1, .fr .ring2 { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.fr .ring2 { animation-duration: 90s; animation-direction: reverse; }
.fr .ochip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.fr .ochip span { display: block; padding: 8px 14px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; animation: spin 60s linear infinite reverse; }
.fr .ring2 .ochip span { animation-duration: 90s; animation-direction: normal; }
.fr .ochip span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--dot, var(--forest)); vertical-align: 1px; }
.fr .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(circle at 30% 25%, #4A2A18, var(--cocoa-1)); color: var(--cream); box-shadow: 0 30px 60px -20px rgba(36, 23, 15, .7), inset 0 2px 0 rgba(255, 255, 255, .12); }
.fr .core b { display: block; font-family: var(--display); font-size: 3.6rem; font-weight: 800; letter-spacing: -0.05em; line-height: .9; color: var(--gold-2); }
.fr .core span { font-size: 0.84rem; color: var(--cream-2); }
@media (max-width: 680px) {
.fr .orbit { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fr .orbit::before, .fr .orbit::after { display: none; }
.fr .ring1, .fr .ring2 { position: static; animation: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fr .ochip { position: static; transform: none; }
.fr .ochip span { animation: none; }
.fr .core { position: static; transform: none; order: -1; width: 160px; height: 160px; }
}
.fr .label { position: relative; background: #fff; color: #161210; border: 3px solid #161210; padding: 14px 16px 16px; max-width: 460px; width: 100%; justify-self: center; box-shadow: 14px 14px 0 rgba(30, 81, 56, .14); font-family: var(--body); }
.fr .label h4 { font-family: var(--body); font-weight: 800; font-size: 1.65rem; color: #161210; letter-spacing: -0.02em; }
.fr .rule-thick { border-top: 10px solid #161210; margin: 8px 0 4px; }
.fr .rule-mid { border-top: 5px solid #161210; margin: 4px 0; }
.fr .rule-thin { border-top: 1px solid #161210; margin-top: 6px; }
.fr .serving { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 0.86rem; padding-block: 4px; }
.fr .sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fr .sizes button { border: 1.5px solid #161210; background: #fff; color: #161210; border-radius: 999px; padding: 3px 11px; font-size: 0.76rem; font-weight: 600; }
.fr .sizes button[aria-pressed="true"] { background: #161210; color: #fff; }
.fr .label table { width: 100%; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.fr .label th, .fr .label td { padding: 4px 0; border-bottom: 1px solid #161210; text-align: left; }
.fr .label th + th, .fr .label td + td { text-align: right; }
.fr .label thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fr .label td.sub { padding-left: 16px; }
.fr .label tr.key td { font-weight: 800; }
.fr .label .small { font-size: 0.78rem; line-height: 1.45; margin-top: 10px; }
.fr .label .fine { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 0.72rem; color: #4a4440; margin-top: 8px; }
.fr .label .scan { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(to bottom, transparent, rgba(143, 191, 114, .22), transparent); animation: scan 5s ease-in-out infinite; pointer-events: none; }
@keyframes scan { 0% { transform: translateY(0); } 50% { transform: translateY(calc(var(--lh, 600px) - 60px)); } 100% { transform: translateY(0); } }
.fr .kinetic { padding-block: clamp(72px, 10vw, 140px); position: relative; overflow: hidden; background: linear-gradient(180deg, #EAF2DF, var(--ivory)); color: var(--ink); }
.fr .k-row { white-space: nowrap; font-family: var(--display); font-weight: 800; letter-spacing: -0.055em; line-height: .95; font-size: clamp(3.2rem, 11vw, 10rem); will-change: transform; }
.fr .k-row.two { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.03em; }
.fr .k-row.outline { color: transparent; -webkit-text-stroke: 1.5px rgba(30, 81, 56, .3); }
.fr .k-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-top: 40px; }
.fr .k-foot p { color: var(--ink-2); font-size: 1.08rem; max-width: 46ch; }
.fr .reels-scroll { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.fr .reels { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 14px; }
.fr .reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-xl); overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.fr .reel::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from var(--angle), transparent, rgba(255, 255, 255, .35), transparent 40%); animation: angle 8s linear infinite; opacity: .6; }
.fr .reel > * { position: relative; }
.fr .reel .tag { align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.fr .reel .play { align-self: center; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.fr .reel .play svg { width: 24px; height: 24px; margin-left: 3px; }
.fr .reel p { font-size: 0.84rem; padding: 10px 12px; border-radius: 14px; }
.fr .note { margin-top: 18px; font-size: 0.9rem; color: var(--muted); max-width: 70ch; }
.fr .story-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 880px) {
.fr .story-grid { grid-template-columns: 1fr; }
}
.fr .mascot-stage { position: relative; border-radius: var(--r-xl); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, var(--butter), var(--t-butter) 60%, var(--ivory)); }
.fr .mascot-stage::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(180, 130, 42, .5); animation: spin 40s linear infinite; }
.fr .mascot-stage img { position: relative; width: 74%; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(90, 50, 10, .3)); }
.fr .story h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); margin-top: 16px; }
.fr .story p { color: var(--ink-2); font-size: 1.06rem; max-width: 54ch; margin-top: 16px; }
.fr .facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.fr .fact { padding: 14px 18px; border-radius: 20px; min-width: 140px; }
.fr .fact b { display: block; font-family: var(--display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--forest); font-variant-numeric: tabular-nums; }
.fr .fact span { font-size: 0.82rem; color: var(--muted); }
.fr .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 880px) {
.fr .faq-grid { grid-template-columns: 1fr; }
}
.fr .faq h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); margin-top: 16px; }
.fr .help-card { margin-top: 28px; border-radius: var(--r-lg); padding: 22px; display: grid; gap: 6px; }
.fr .help-card b { user-select: all; }
.fr .acc { display: grid; gap: 10px; }
.fr .acc details { border-radius: 20px; padding: 0 22px; transition: background-color .3s ease; }
.fr .acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.fr .acc summary::-webkit-details-marker { display: none; }
.fr .acc summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 1.2rem; transition: transform .35s var(--ease); }
.fr .acc details[open] summary::after { transform: rotate(45deg); }
.fr .acc details p { padding-bottom: 20px; color: var(--ink-2); max-width: 68ch; }
.fr-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ivory), #EFE5D6); color: var(--ink-2); font-size: 0.92rem; }
.fr-footer .wrap { padding-block: 72px 28px; display: grid; gap: 48px; }
.fr .news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); }
@media (max-width: 820px) {
.fr .news { grid-template-columns: 1fr; }
}
.fr .news h2 { color: var(--ink); font-size: clamp(2rem, 4.4vw, 3.4rem); }
.fr .news form { display: flex; gap: 10px; flex-wrap: wrap; }
.fr .news input { flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(22, 15, 11, .14); background: rgba(255, 255, 255, .8); color: var(--ink); }
.fr .news input::placeholder { color: var(--muted); }
.fr .fcols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) auto; gap: 32px; }
@media (max-width: 980px) {
.fr .fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.fr .fcols { grid-template-columns: 1fr; }
}
.fr-footer h4 { font-family: var(--body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest); margin-bottom: 14px; }
.fr-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.fr-footer a { text-decoration: none; }
.fr-footer a:hover { color: var(--forest); }
.fr-footer .brand { color: var(--ink); }
.fr .qr { width: 118px; border-radius: 14px; background: #fff; padding: 6px; }
.fr .fbase { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; font-size: 0.8rem; padding-top: 22px; border-top: 1px solid var(--line); }
.fr .pay { display: flex; flex-wrap: wrap; gap: 6px; }
.fr .pay span { font-size: 0.7rem; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); color: var(--ink-2); }
.fr .mega { font-family: var(--display); font-weight: 800; letter-spacing: -0.06em; line-height: .8; font-size: clamp(4rem, 17vw, 15rem); text-align: center; background: linear-gradient(180deg, rgba(30, 81, 56, .16), rgba(30, 81, 56, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; margin-bottom: -0.12em; }
.fr .pre { transform: translateY(48px) scale(.985); }
.fr .revealing { transition: transform 1.1s var(--ease); }
.fr .pdp-stage { position: relative; overflow: hidden; min-height: 100vh; background: linear-gradient(180deg, var(--ivory), var(--ivory-2)); }
.fr .pdp { position: relative; z-index: 2; padding-block: 120px 96px; }
.fr .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.86rem; color: var(--muted); margin-bottom: 22px; }
.fr .crumbs a { text-decoration: none; }
.fr .crumbs a:hover { color: var(--ink); }
.fr .pdp-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 940px) {
.fr .pdp-grid { grid-template-columns: 1fr; }
}
.fr .gallery { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; align-items: start; }
.fr .thumbs { display: flex; flex-direction: column; gap: 10px; }
.fr .thumbs button { padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(255, 255, 255, .6); transition: border-color .25s ease, transform .25s var(--ease); }
.fr .thumbs button:hover { transform: translateY(-2px); }
.fr .thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.fr .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.fr .stage { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; padding: 10px; }
.fr .stage img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; background: var(--tint, var(--t-caramel)); transition: transform .5s var(--ease); }
.fr .stage:hover img { transform: scale(1.03); }
@media (max-width: 620px) {
.fr .gallery { grid-template-columns: 1fr; }
.fr .thumbs { flex-direction: row; overflow-x: auto; order: 2; padding-bottom: 4px; }
.fr .thumbs button { flex: 0 0 62px; }
}
.fr .buy { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-xl); position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
@media (max-width: 940px) {
.fr .buy { position: static; }
}
.fr .brand-line { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); }
.fr .pdp h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.04em; line-height: 1.02; }
.fr .stars-link { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font-size: 0.9rem; color: var(--ink-2); text-align: left; }
.fr .stars-link:hover { text-decoration: underline; }
.fr .stars { display: inline-flex; gap: 2px; color: var(--gold-3); }
.fr .stars svg { width: 18px; height: 18px; }
.fr .pdp-short { color: var(--ink-2); }
.fr .price-block { display: grid; gap: 4px; padding-block: 14px; border-block: 1px solid var(--line); }
.fr .price-now { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.fr .price-now .off { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--sale); }
.fr .price-now b { font-family: var(--display); font-size: 2.8rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.fr .mrp { font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr .opt-title { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.fr .opt-title span { font-weight: 500; color: var(--muted); }
.fr .pack-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fr .pack-tiles button { position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px 12px; border-radius: 18px; border: 1px solid rgba(22, 15, 11, .12); background: rgba(255, 255, 255, .55); min-width: 0; transition: transform .3s var(--ease), background-color .3s ease, box-shadow .3s ease; }
.fr .pack-tiles button:hover { transform: translateY(-2px); }
.fr .pack-tiles button[aria-checked="true"] { background: linear-gradient(150deg, #FFFFFF, var(--t-pistachio)); border-color: transparent; box-shadow: 0 0 0 2px var(--forest), 0 18px 30px -18px rgba(30, 81, 56, .7); }
.fr .pt-name { font-weight: 700; font-size: 0.88rem; }
.fr .pt-price { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fr .pt-sub { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr .pt-save { font-size: 0.72rem; font-weight: 700; color: var(--forest); }
.fr .pt-ribbon { position: absolute; top: -10px; right: 10px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--cocoa-1); }
@media (max-width: 420px) {
.fr .pack-tiles { grid-template-columns: 1fr; }
}
.fr .buy-row { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; }
@media (max-width: 480px) {
.fr .buy-row { grid-template-columns: auto 1fr; }
.fr .buy-row .btn-dark { grid-column: 1 / -1; }
}
.fr .stepper { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(22, 15, 11, .12); min-height: 54px; }
.fr .stepper button { width: 44px; height: 52px; border: 0; background: none; font-size: 1.2rem; }
.fr .stepper output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.fr .box { border-radius: 18px; padding: 16px; display: grid; gap: 10px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(22, 15, 11, .08); }
.fr .box h4 { font-family: var(--body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; }
.fr .pin-row { display: flex; gap: 8px; }
.fr .pin-row input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(22, 15, 11, .14); background: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.fr .pin-row button { border: 0; background: var(--ink); color: #fff; border-radius: 12px; padding: 0 18px; font-weight: 600; }
.fr .pin-out { font-size: 0.9rem; color: var(--ink-2); }
.fr .pin-out b { color: var(--forest); }
.fr .offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) {
.fr .offers { grid-template-columns: 1fr; }
}
.fr .offer { border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(22, 15, 11, .08); }
.fr .offer b { display: block; font-size: 0.84rem; }
.fr .offer span { font-size: 0.76rem; color: var(--muted); }
.fr .trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) {
.fr .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fr .trust div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.74rem; font-weight: 600; color: var(--ink-2); }
.fr .trust svg { width: 26px; height: 26px; color: var(--forest); padding: 8px; border-radius: 50%; background: rgba(205, 228, 176, .7); box-sizing: content-box; }
.fr .pdp-lower { display: grid; gap: clamp(56px, 7vw, 96px); margin-top: clamp(56px, 7vw, 96px); }
.fr .sec-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 22px; }
.fr .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
@media (max-width: 880px) {
.fr .about-grid { grid-template-columns: 1fr; }
}
.fr .bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fr .bullets li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.fr .bullets li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--leaf), var(--forest)); }
.fr .panel { border-radius: var(--r-xl); padding: clamp(18px, 2.4vw, 26px); }
.fr .tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(22, 15, 11, .06); margin-bottom: 18px; }
.fr .tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); transition: color .3s ease; }
.fr .tabs button[aria-selected="true"] { color: var(--ivory); }
.fr .tabs .ind { position: absolute; z-index: 0; top: 5px; height: calc(100% - 10px); border-radius: 999px; background: var(--ink); transition: left .45s var(--ease), width .45s var(--ease), top .45s var(--ease); }
.fr .spec { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.fr .spec th, .fr .spec td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fr .spec th { width: 36%; padding-right: 16px; color: var(--muted); font-weight: 600; }
.fr .policy-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2); }
.fr .fbt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; border-radius: var(--r-xl); padding: 22px; }
.fr .fbt-item { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 220px; text-decoration: none; }
.fr .fbt-item img { width: 76px; height: 95px; object-fit: cover; border-radius: 14px; flex: none; }
.fr .fbt-item b { display: block; }
.fr .fbt-item span { font-size: 0.86rem; color: var(--muted); }
.fr .fbt-plus { font-family: var(--display); font-size: 1.8rem; color: var(--muted); }
.fr .fbt-total { display: grid; gap: 8px; flex: 1 1 220px; justify-items: start; }
.fr .fbt-total b { font-family: var(--display); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; }
.fr .rev { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px 48px; }
@media (max-width: 880px) {
.fr .rev { grid-template-columns: 1fr; }
}
.fr .rev-sum { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: var(--r-xl); }
.fr .rev-avg { display: flex; align-items: center; gap: 14px; }
.fr .rev-avg b { font-family: var(--display); font-size: 3.2rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.fr .bars { display: grid; gap: 8px; }
.fr .bar { display: grid; grid-template-columns: 44px 1fr 36px; gap: 10px; align-items: center; font-size: 0.84rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fr .bar i { display: block; height: 10px; border-radius: 999px; background: rgba(22, 15, 11, .08); overflow: hidden; }
.fr .bar i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transition: width .8s var(--ease); }
.fr .rev-list { display: grid; gap: 14px; align-content: start; }
.fr .rev-empty { border: 1.5px dashed rgba(22, 15, 11, .18); border-radius: var(--r-lg); padding: 24px; color: var(--ink-2); display: grid; gap: 6px; align-content: start; background: rgba(255, 255, 255, .35); }
.fr .rcard { border-radius: var(--r-lg); padding: 20px; display: grid; gap: 8px; animation: rise .6s var(--ease); }
@keyframes rise { from { transform: translateY(16px); } }
.fr .rcard .who { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 0.86rem; color: var(--muted); }
.fr .rcard .who b { color: var(--ink); }
.fr .preview-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--t-butter); color: var(--ink-2); }
.fr .rcard h4 { font-size: 1.1rem; letter-spacing: -0.01em; }
.fr .rcard .media { display: flex; gap: 8px; flex-wrap: wrap; }
.fr .rcard .media img, .fr .rcard .media video { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.fr .rform { border-radius: var(--r-lg); padding: 22px; display: grid; gap: 14px; }
.fr .star-pick { display: flex; gap: 4px; }
.fr .star-pick button { border: 0; background: none; padding: 2px; color: rgba(22, 15, 11, .18); transition: transform .2s var(--ease), color .2s ease; }
.fr .star-pick button:hover { transform: scale(1.15); }
.fr .star-pick button svg { width: 30px; height: 30px; }
.fr .star-pick button.on { color: var(--gold); }
.fr .inside-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.fr .inside-item { display: flex; gap: 12px; align-items: center; border-radius: 20px; padding: 12px; text-decoration: none; min-width: 0; }
.fr .inside-item img { width: 64px; height: 80px; object-fit: cover; border-radius: 12px; flex: none; }
.fr .inside-item b { display: block; }
.fr .inside-item span { font-size: 0.84rem; color: var(--muted); }
.fr .perfect { display: flex; flex-wrap: wrap; gap: 8px; }
.fr .perfect span { padding: 7px 13px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; background: rgba(255, 255, 255, .6); border: 1px solid rgba(22, 15, 11, .08); }
.fr .moq-calc { font-size: 0.92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fr .moq-calc b { color: var(--ink); }
.fr .sticky-buy { display: none; }
@media (max-width: 940px) {
.fr .sticky-buy:not([hidden]) { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 35; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-radius: 999px; margin-left: env(safe-area-inset-left, 0px); margin-right: env(safe-area-inset-right, 0px); }
.fr .sticky-buy b { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.fr .sticky-buy .btn { min-height: 46px; }
.fr .pdp { padding-bottom: 140px; }
}
.fr .scrim { position: fixed; inset: 0; z-index: 50; background: rgba(14, 8, 5, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s ease; }
@keyframes fade { from { background: rgba(14, 8, 5, 0); } }
.fr .drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px)); z-index: 55; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: rgba(247, 241, 232, .86); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); margin-top: env(safe-area-inset-top, 0px); margin-bottom: env(safe-area-inset-bottom, 0px); margin-right: env(safe-area-inset-right, 0px); animation: slidein .5s var(--ease); }
@keyframes slidein { from { transform: translateX(105%); } }
.fr .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.fr .drawer-head h3 { font-size: 1.45rem; }
.fr .ship-bar { margin: 14px 20px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, var(--t-pistachio), #fff); font-size: 0.88rem; font-weight: 600; color: var(--forest); }
.fr .cart-items { flex: 1; overflow-y: auto; padding: 8px 20px; display: grid; align-content: start; }
.fr .citem { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); align-items: start; animation: rise .45s var(--ease); }
.fr .citem img { width: 72px; height: 90px; object-fit: cover; border-radius: 12px; }
.fr .citem b { display: block; font-size: 0.96rem; }
.fr .citem .pack { font-size: 0.82rem; color: var(--muted); }
.fr .mini-step { display: inline-flex; align-items: center; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); }
.fr .mini-step button { width: 32px; height: 32px; border: 0; background: none; }
.fr .mini-step output { min-width: 18px; text-align: center; font-size: 0.86rem; font-weight: 700; }
.fr .cprice { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.fr .cprice del { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.fr .rm { margin-top: 8px; border: 0; background: none; font-size: 0.8rem; color: var(--muted); text-decoration: underline; padding: 0; }
.fr .upsell { margin: 12px 20px 0; padding: 14px; border-radius: 16px; display: grid; gap: 8px; font-size: 0.88rem; background: linear-gradient(120deg, rgba(246, 217, 152, .45), rgba(255, 255, 255, .6)); border: 1px solid rgba(180, 130, 42, .25); }
.fr .upsell button { justify-self: start; border: 0; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 0.84rem; }
.fr .drawer-foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.fr .drawer-foot .line { display: flex; justify-content: space-between; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.fr .drawer-foot .total { font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.fr .cod-note { font-size: 0.84rem; color: var(--muted); }
.fr .cart-empty { padding: 32px 0; color: var(--muted); display: grid; gap: 14px; justify-items: start; }
.fr .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; max-width: calc(100% - 32px); text-align: center; color: #fff; background: rgba(22, 15, 11, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); animation: toastin .45s var(--ease); }
@keyframes toastin { from { transform: translate(-50%, 20px); } }
.fr .flyer { position: fixed; z-index: 80; object-fit: cover; pointer-events: none; border-radius: 20px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .45); }
.fr .bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }
@media (max-width: 700px) {
.fr .aurora i, .fr .blobs i { filter: blur(50px); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.fr *, .fr *::before, .fr *::after { animation: none !important; transition: none !important; }
.fr .pre { transform: none; }
}

/* ===================== WordPress / Blocksy / WooCommerce layer ===================== */

/* Blocksy palette mapped to the Fit-Root brand. */
:root:root {
	--theme-palette-color-1: #1E5138;
	--theme-palette-color-2: #143A27;
	--theme-palette-color-3: #4A3E35;
	--theme-palette-color-4: #160F0B;
	--theme-palette-color-5: #E7DFD3;
	--theme-palette-color-6: #F1EBE2;
	--theme-palette-color-7: #F7F1E8;
	--theme-palette-color-8: #FFFFFF;
}

.fr-chrome { display: contents; }
body.fr-site { background: var(--ivory); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.fr-site #header.ct-header, body.fr-site #footer.ct-footer { display: none !important; }
body.fr-site h1, body.fr-site h2, body.fr-site h3, body.fr-site h4, body.fr-site h5, body.fr-site h6 { font-family: var(--display); letter-spacing: -0.025em; color: var(--ink); }
body.fr-site:not(.fr-is-home) main#main { padding-top: 92px; position: relative; }
body.fr-site:not(.fr-is-home) main#main::before { content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none; z-index: -1; background: radial-gradient(60% 100% at 15% 0%, rgba(246, 188, 200, .35), transparent 70%), radial-gradient(50% 90% at 90% 0%, rgba(205, 228, 176, .4), transparent 70%); }
body.fr-is-home main#main { padding: 0; }
.fr .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fr .muted { color: var(--muted); }
.fr .err-msg { font-size: 0.9rem; font-weight: 600; color: var(--sale); }
.fr .nb { white-space: nowrap; }
.fr .tint-blush { --tint: var(--t-blush); --c: var(--t-blush); }
.fr .tint-caramel { --tint: var(--t-caramel); --c: var(--t-caramel); }
.fr .tint-pistachio { --tint: var(--t-pistachio); --c: var(--t-pistachio); }
.fr .tint-butter { --tint: var(--t-butter); --c: var(--t-butter); }
.fr .tint-mint { --tint: var(--t-mint); --c: var(--t-mint); }
.fr .tint-rose { --tint: var(--t-rose); --c: var(--t-rose); }
.fr .tint-lilac { --tint: var(--t-lilac); --c: var(--t-lilac); }
.fr .pc-media > a img { width: 100%; height: 100%; object-fit: cover; }
.fr .age > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr .fc-inner img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fr a.added_to_cart { display: none !important; }
.fr .add-pill { text-decoration: none; }
.fr .add-pill.loading { opacity: .6; pointer-events: none; }
.fr .add-pill.added svg { transform: rotate(45deg); }
.fr .contact-line { font-size: 0.88rem; color: var(--muted); }
.fr .contact-line b { color: var(--ink); user-select: all; }
.fr .search-pop { position: absolute; top: calc(100% + 10px); right: 8px; width: min(440px, calc(100vw - 32px)); display: flex; gap: 8px; padding: 10px; border-radius: 22px; z-index: 5; }
.fr .search-pop input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(22, 15, 11, .14); background: #fff; }
.fr .search-pop .btn { min-height: 46px; padding: 0 18px; }
.fr .insta-cta { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 26px; text-decoration: none; max-width: 560px; }
.fr .insta-cta img { width: 96px; height: 96px; border-radius: 14px; background: #fff; padding: 4px; }
.fr .insta-cta b { display: block; font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.02em; }
.fr .insta-cta small { color: var(--muted); }
.fr .insta-cta .go { margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.fr .insta-cta .go svg { width: 18px; height: 18px; }
.fr .reel { padding: 0; }
.fr .reel-media { position: absolute; inset: 0; display: grid; place-items: center; }
.fr .reel-media iframe, .fr .reel-media video { width: 100%; height: 100%; border: 0; object-fit: cover; }
.fr .reel > p { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }
.fr .reel > p a { color: var(--forest); font-weight: 600; }
.fr-footer .fbrand { display: grid; gap: 14px; align-content: start; }
.fr-footer .ok-msg { margin-top: 10px; }
.fr .drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.fr .drawer .cod-note { padding: 12px 20px 18px; margin: 0; border-top: 1px solid var(--line); }

/* Mini cart inside the drawer */
.fr .drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.fr .drawer .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; padding: 14px 28px 14px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.fr .drawer .woocommerce-mini-cart-item a:not(.remove) { display: contents; font-weight: 600; text-decoration: none; color: var(--ink); }
.fr .drawer .woocommerce-mini-cart-item img { grid-row: span 3; width: 64px; height: 80px; object-fit: cover; border-radius: 12px; }
.fr .drawer .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr .drawer .woocommerce-mini-cart-item .variation { grid-column: 2; margin: 0; font-size: 0.8rem; color: var(--muted); display: flex; gap: 4px; }
.fr .drawer .woocommerce-mini-cart-item .variation dd, .fr .drawer .woocommerce-mini-cart-item .variation p { margin: 0; }
.fr .drawer .woocommerce-mini-cart-item a.remove { position: absolute; top: 12px; right: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--muted); background: rgba(22, 15, 11, .06); }
.fr .drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 16px 0 10px; margin: 0; font-family: var(--display); font-size: 1.2rem; }
.fr .drawer .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; padding-bottom: 12px; }
.fr .drawer .woocommerce-mini-cart__buttons a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font-weight: 600; text-decoration: none; background: rgba(255, 255, 255, .7); border: 1px solid rgba(22, 15, 11, .14); color: var(--ink); }
.fr .drawer .woocommerce-mini-cart__buttons a.checkout { background: linear-gradient(135deg, #2A6B4A, var(--forest)); color: #fff; border: 0; }
.fr .drawer .woocommerce-mini-cart__empty-message { padding: 28px 0; color: var(--muted); }

/* Gifting page */
.fr-gifting .gift-hero { padding-top: 40px; }
.fr-gifting .gift-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-top: 16px; }
.fr .gift-detail { padding-block: clamp(40px, 6vw, 80px); }
.fr .gift-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.fr .gift-detail:nth-of-type(odd) .gift-row { direction: rtl; }
.fr .gift-detail:nth-of-type(odd) .gift-row > * { direction: ltr; }
.fr .gift-poster { border-radius: var(--r-xl); padding: 10px; overflow: hidden; }
.fr .gift-poster img { width: 100%; border-radius: 22px; }
.fr .gift-detail .buy { position: static; }
.fr .gift-detail h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.fr .gift-detail h4 { font-family: var(--body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; margin-top: 6px; }
.fr .gift-detail .btn { align-self: flex-start; }
@media (max-width: 880px) { .fr .gift-row { grid-template-columns: 1fr; } .fr .gift-detail:nth-of-type(odd) .gift-row { direction: ltr; } }

/* Product page (Blocksy + WooCommerce markup) */
.fr-brand-line { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin: 0 0 8px; }
.single-product .product_title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.04em; line-height: 1.05; }
.single-product .summary > .price, .single-product .woocommerce-variation-price .price { font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.04em; color: var(--ink); }
.single-product .summary del { color: var(--muted); font-weight: 500; font-size: 0.6em; }
.single-product .summary ins { text-decoration: none; }
.fr-from { font-family: var(--display); font-weight: 800; }
.fr-tri { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: var(--t-pistachio); color: var(--forest); font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; vertical-align: middle; }
.fr-tax-note { font-size: 0.86rem; color: var(--muted); margin: 4px 0 14px; }
.fr-hidden-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.single-product .reset_variations { display: none !important; }
.fr.fr-packs { margin-bottom: 14px; }
.fr.fr-packs .opt-title { margin: 0 0 4px; }
.fr.fr-pdp-extras { display: grid; gap: 12px; margin-top: 18px; }
.single-product .woocommerce-product-gallery img, .single-product .ct-product-gallery-container img { border-radius: 24px; }
.single-product .summary form.cart .quantity input { border-radius: 999px; min-height: 52px; }
.fr-site .single_add_to_cart_button, .fr-site .woocommerce .button.alt, .fr-site .checkout-button, .fr-site #place_order { border-radius: 999px !important; min-height: 52px; padding: 0 30px !important; font-weight: 600; background: linear-gradient(135deg, #2A6B4A, #1E5138) !important; color: #fff !important; border: 0 !important; box-shadow: 0 12px 30px -14px rgba(30, 81, 56, .8); }
.fr-site .woocommerce .button:not(.alt), .fr-site ul.products .button { border-radius: 999px !important; font-weight: 600; }
.fr-site .woocommerce-tabs ul.tabs { border: 0; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(22, 15, 11, .06); display: inline-flex; flex-wrap: wrap; }
.fr-site .woocommerce-tabs ul.tabs li { border: 0 !important; margin: 0 !important; background: none !important; border-radius: 999px !important; }
.fr-site .woocommerce-tabs ul.tabs li::before, .fr-site .woocommerce-tabs ul.tabs li::after { display: none !important; }
.fr-site .woocommerce-tabs ul.tabs li a { padding: 9px 18px !important; border-radius: 999px; font-weight: 600; }
.fr-site .woocommerce-tabs ul.tabs li.active a { background: var(--ink); color: var(--ivory) !important; }
.fr-site .woocommerce-Tabs-panel { padding-top: 18px; }
.fr-site .woocommerce-Tabs-panel h3 { font-size: 1.4rem; margin: 26px 0 10px; }
.fr-site table.fr-details, .fr-site table.fr-nutrition { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 0.94rem; background: rgba(255, 255, 255, .6); border-radius: 18px; overflow: hidden; }
.fr-site table.fr-details th, .fr-site table.fr-details td, .fr-site table.fr-nutrition th, .fr-site table.fr-nutrition td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fr-site table.fr-details th { width: 34%; color: var(--muted); font-weight: 600; }
.fr-site table.fr-nutrition td + td { text-align: right; font-variant-numeric: tabular-nums; }
.fr-site .onsale { border-radius: 999px !important; padding: 6px 12px !important; background: rgba(30, 81, 56, .9) !important; color: #fff !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.02em; min-height: 0 !important; line-height: 1.3 !important; }
.fr-cod-hint { padding: 12px 14px; border-radius: 14px; background: var(--t-butter); font-size: 0.9rem; }

/* Shop and category pages */
.fr-site ul.products li.product { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); border-radius: 26px; padding: 10px 10px 16px; box-shadow: 0 24px 60px -34px rgba(70, 40, 20, .45); transition: transform .5s var(--ease), box-shadow .5s ease; }
.fr-site ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -34px rgba(70, 40, 20, .5); }
.fr-site ul.products li.product img { border-radius: 19px; }
.fr-site ul.products li.product .woocommerce-loop-product__title { font-family: var(--display); font-size: 1.08rem; letter-spacing: -0.02em; }
.fr-site ul.products li.product .price { font-family: var(--display); font-weight: 800; color: var(--ink); }
.fr-site .woocommerce-products-header__title, .fr-site .page-title { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.04em; }

/* Notices and forms on WooCommerce pages */
.fr-site .woocommerce-message, .fr-site .woocommerce-info, .fr-site .woocommerce-error { border-radius: 16px; border: 0; background: var(--t-pistachio); color: var(--ink); }
.fr-site .woocommerce-error { background: #FBE3DD; }
.fr-site .woocommerce form .input-text, .fr-site .woocommerce form select, .fr-site .woocommerce form textarea { border-radius: 12px; border: 1px solid rgba(22, 15, 11, .14); background: #fff; }
.fr-site .woocommerce-cart-form, .fr-site .cart_totals, .fr-site #order_review, .fr-site .woocommerce-checkout-review-order { background: rgba(255, 255, 255, .62); border-radius: 22px; padding: 18px; }

/* Compact pack rows on small phones */
@media (max-width: 420px) {
	.fr .pack-tiles button { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 12px 14px; }
	.fr .pack-tiles .pt-name { grid-column: 1; grid-row: 1; }
	.fr .pack-tiles .pt-price { grid-column: 2; grid-row: 1; text-align: right; font-size: 1.15rem; }
	.fr .pack-tiles .pt-sub { grid-column: 1; grid-row: 2; }
	.fr .pack-tiles .pt-save { grid-column: 2; grid-row: 2; text-align: right; }
	.fr .pack-tiles .pt-ribbon { top: -9px; right: 12px; }
}

/* Even form fields (Blocksy sets its own field heights) */
.fr .field input, .fr .field select { height: 48px; min-height: 48px; padding: 0 14px; line-height: 1.3; font-size: 0.95rem; }
.fr .field select { padding-right: 40px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23160F0B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.fr .field textarea { min-height: 120px; padding: 12px 14px; font-size: 0.95rem; }

/* Keep fixed UI clear of the WordPress admin bar for logged-in staff */
@media (min-width: 601px) {
	body.admin-bar .fr .nav-shell { top: calc(var(--wp-admin--admin-bar--height, 32px) + 12px); }
	body.admin-bar .fr .progress { top: var(--wp-admin--admin-bar--height, 32px); }
	body.admin-bar .fr .drawer { top: calc(var(--wp-admin--admin-bar--height, 32px) + 10px); }
}