/*
Theme Name: Feel Peptides
Theme URI: https://example.com/
Description: Child theme of Twenty Twenty-One for the Feel Peptides site.
Author: Feel Peptides
Template: twentytwentyone
Version: 1.0.0
Text Domain: feel-peptides
*/
/* Add any custom styles below. */
/* global css */
/* Common: formula comparison */
.fp-formula__card {
position: relative;
width: 100%;
border-radius: 24px;
overflow: hidden;
min-height: 340px;
}
.fp-formula__bg {
position: absolute;
inset: 0;
background:
linear-gradient(
105deg,
rgba(140, 130, 175, 0.82) 0%,
rgba(160, 150, 190, 0.6) 38%,
rgba(180, 170, 200, 0.3) 65%,
rgba(200, 195, 215, 0.15) 100%
);
background-position: center;
background-size: cover;
z-index: 0;
}
.fp-formula__bg::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity: 0.4;
pointer-events: none;
}
.fp-formula__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: 52px 56px;
gap: 48px;
min-height: 340px;
}
.fp-formula__heading {
flex: 0 0 200px;
color: #fff;
}
.fp-formula__title {
font-family: var(--font-abc-arizona-flare);
font-weight: 300;
font-size: 32px;
line-height: 100%;
letter-spacing: -5%;
color: #FFFFFF;
}
.fp-formula__comparison {
flex: 1;
display: flex;
flex-direction: column;
}
.fp-formula__colHeaders {
display: grid;
grid-template-columns: 1fr 110px 80px;
padding: 0 0 12px 0;
}
.fp-formula__colHeaders span {
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: -2%;
color: #fff;
text-align: center;
}
.fp-formula__brandName {
font-weight: 500;
color: #fff;
font-size: 20px !important;
}
.fp-formula__tableWrap {
position: relative;
}
.fp-formula__glassCol {
position: absolute;
top: 0;
bottom: 0;
right: 80px;
width: 110px;
background: rgba(255, 255, 255, 0.13);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.22);
pointer-events: none;
z-index: 0;
}
.fp-formula__row {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 110px 80px;
align-items: center;
padding: 13px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fp-formula__row:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fp-formula__feature {
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: -2%;
color: #FFFFFF;
padding-right: 50px;
display: flex;
justify-content: end;
}
.fp-formula__checkCell {
display: flex;
align-items: center;
justify-content: center;
}
.fp-formula__check,
.fp-formula__cross {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
.fp-formula__check {
color: rgba(255, 255, 255, 0.9);
}
.fp-formula__check svg {
width: 16px;
height: 16px;
}
.fp-formula__cross {
color: rgba(255, 255, 255, 0.35);
}
.fp-formula__cross svg {
width: 13px;
height: 13px;
}
@media (max-width: 640px) {
.feel-science-banner__product-layout--2 .feel-science-banner__product-callout {
top: -58px;
}
.fp-formula__inner {
flex-direction: column;
padding: 36px 28px;
gap: 28px;
}
.fp-formula__heading {
flex: none;
}
.fp-formula__colHeaders,
.fp-formula__row {
grid-template-columns: 1fr 90px 70px;
}
.fp-formula__glassCol {
right: 70px;
width: 90px;
}
}
:root {
--color-primary: #744BEC;
--color-secondary: #F294E2;
--color-tertiary: #6ef1b2;
--color-body: #5c6185;
--color-white: #fff;
--color-black: #000000;
--color-off-white: #f6f9fb;
--color-green: #2B5048;
--color-primary-7: rgba(38, 103, 255, 0.07);
--color-primary-10: rgba(38, 103, 255, 0.1);
--color-secondary-10: rgba(11, 20, 96, 0.1);
--color-white-10: rgba(255, 255, 255, 0.1);
--color-white-60: rgba(255, 255, 255, 0.6);
--color-white-70: rgba(255, 255, 255, 0.7);
--color-dark: #151516;
--color-deep-dark: #0b0b0b;
--font-nunito: 'Nunito', sans-serif;
--font-nunito-sans: 'Nunito Sans', sans-serif;
--font-quicksand: 'Quicksand', sans-serif;
--font-abc-arizona-flare: "ABC Arizona Flare", serif;
--font-abc-arizona-sans: "ABC Arizona Sans", serif;
--font-abc-diatype-mono: "ABC Diatype Mono Variable", serif;
--font-medium: 16px;
--font-small: 12px;
--heading-gradient: linear-gradient(92.41deg, #777269 -1.76%, #F3F0EB 101.19%);
}
/* Custom font faces – expects font files in /fonts inside this theme */
@font-face {
font-family: "ABC Arizona Flare";
src: url("fonts/ArizonaFlare/ABCArizonaFlareVariable-Trial.woff2") format("woff2");
font-weight: 200 300 400 500 600 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ABC Arizona Sans";
src: url("fonts/ABCArizonaSansVariable/ABCArizonaSansVariable-Trial.woff2") format("woff2");
font-weight: 200 300 400 500 600 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ABC Diatype Mono Variable";
src: url("fonts/ABCDiatype/ABCDiatypeMonoVariable/ABCDiatypeMonoVariable-Trial.woff2") format("woff2");
font-weight: 200 300 400 500 600 700;
font-style: normal;
font-display: swap;
}
body {
color: var(--color-body);
/* Default site font: ABC Arizona Flare, fallback to Sans + system */
font-family: var(--font-abc-arizona-flare) !important;
font-weight: normal;
font-size: 16px;
line-height: 2;
overflow-x: hidden !important;
background-color: #ffffff !important;
max-width: 1920px !important;
margin: 0 auto !important;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: calc(100% - 200px);
margin: 0 auto;
padding: 0;
}
button:focus {
outline: 0 !important;
}
@media (min-width: 2000px) {
.container {
width: 100%;
max-width: 1920px;
}
}
@media (max-width: 1536px) {
.container {
max-width: 1368px;
}
}
@media (max-width: 1440px) {
.container {
max-width: 1280px;
}
}
@media(max-width:1300px){
.container{
max-width: 1200px;
}
}
@media (max-width: 1280px) {
.container {
max-width: 1120px;
}
}
@media (max-width: 1100px) {
.container {
max-width: 1020px;
}
}
@media (max-width: 1024px) {
.container {
max-width: 920px;
padding: 0 24px;
}
}
@media (max-width: 768px) {
.container {
max-width: 100%;
padding: 0 16px;
}
}
.mobile-view-only {
display: none !important;
}
.desktop-view-only {
display: block !important;
}
@media (max-width: 768px) {
.mobile-view-only {
display: block !important;
}
.desktop-view-only {
display: none !important;
}
}
img {
max-width: 100%;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
ul,
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
p {
margin: 0px;
}
a {
display: inline-block;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a:hover {
text-decoration: none;
}
a,
span {
display: inline-block;
}
.woocommerce-account-heading .entry-title {
font-size: 36px !important;
font-weight: 500 !important;
}
.light-btn {
border-radius: 8px;
height: 29px;
background: #f2f2f2 !important;
padding: 0 12px;
font-size: 13px;
color: #1A1A1A !important;
letter-spacing: -0.26px;
font-family: var(--font-abc-diatype-mono);
}
.light-btn:hover,
.light-btn:focus-visible {
background: #e2e2e2 !important;
}
.flex{
display: flex;
gap: 10px;
}
.no-wrap{
flex-wrap: nowrap;
}
/* h2 heading – shared typography */
.second-heading {
font-family: var(--font-abc-arizona-flare) !important;
font-weight: 300 !important;
font-style: normal;
font-size: 56px !important;
leading-trim: cap;
line-height: 100% !important;
letter-spacing: -6% !important;
text-align: center;
background: var(--heading-gradient);
-webkit-background-clip: text;
background-clip: text;
color: #777269;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
margin: 0;
}
@media (max-width: 768px) {
h2 {
letter-spacing: -0.06em;
font-size: 32px !important;
}
}
/*======= Common Classes =======*/
.bg-color-primary {
background-color: var(--color-primary) !important;
}
.bg-color-primary-7 {
background-color: var(--color-primary-7) !important;
}
.bg-color-secondary {
background-color: var(--color-secondary) !important;
}
.bg-color-off-white {
background-color: var(--color-off-white) !important;
}
.color-primary {
color: var(--color-primary) !important;
}
.color-secondary {
color: var(--color-secondary) !important;
}
.color-tertiary {
color: var(--color-tertiary) !important;
}
.color-off-white {
color: var(--color-off-white) !important;
}
.color-white-70 {
color: var(--color-white-70) !important;
}
form.woocommerce-checkout {
background-color: #f8f9fa !important;
padding: 20px !important;
}
.woocommerce-input-wrapper {
width: 100% !important;
}
label {
font-size: 13px !important;
line-height: 1 !important;
margin-bottom: 10px !important;
}
/* global button styles */
.feel-button--outline {
background: transparent !important;
color: #1a1a1a !important;
border: 1px solid #CBD7CB !important;
backdrop-filter: blur(80px);
}
.feel-button--outline:hover,
.feel-button--outline:focus-visible {
background: #cbd7cb !important;
color: #1a1a1a;
}
.feel-button--outline-secondary {
border: 1px solid #FFFFFF4D;
color: #ffffff;
background: transparent;
backdrop-filter: blur(80px);
}
.feel-button--outline-secondary:hover,
.feel-button--outline-secondary:focus-visible {
background: #C5BDAE33;
color: #ffffff;
}
.fe-btn {
margin-top: 14px;
padding: 10px 24px;
/* border: 1px solid #C5BDAE80; */
background: transparent !important;
backdrop-filter: blur(80px);
border-radius: 10px;
cursor: pointer;
font-family: var(--font-abc-diatype-mono);
font-weight: 512;
font-size: 13px;
line-height: 130%;
letter-spacing: -2%;
/* color: #1A1A1A !important; */
}
.feel-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
border-radius: 10px;
text-transform: none;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
min-width: 109px;
font-family: ABC Diatype Mono Variable;
font-weight: 512;
font-size: 13px;
line-height: 130%;
letter-spacing: -2%;
margin-bottom: 5px;
}
.feel-button--primary {
background: #e3ec7a;
border-color: #e3ec7a;
color: #1a1a1a;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.feel-button--ghost {
background: rgba(243, 240, 235, 0.05);
color: #ffffff;
border-color: rgba(243, 240, 235, 0.6);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
}
/* gobal button styles end */
/* Subscribe "I want to feel..." pills: active state */
.fp-subscribeLeftCard__pillButton.is-active {
background-color: #1a1a1a;
color: #ffffff;
border: none;
}
/* Category hero: 2 random product images overlay */
.fp-cat-bg {
position: relative;
}
.fp-cat-bg .category-featured-products {
display: flex;
gap: 12px;
z-index: 5;
}
.fp-cat-bg .category-featured-products__item {
display: block;
width: 104px;
height: 104px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.fp-cat-bg .category-featured-products__img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
}
/* Category hero: Active ingredients (term ACF) overlay, above thumbnails */
/* Right-bottom stack container to prevent overlaps */
.fp-cat-bg .fp-cat-hero-rightStack {
position: absolute;
right: 24px;
top: 70px;
z-index: 6;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
max-width: min(360px, calc(100% - 48px));
}
.fp-cat-bg .category-active-ingredients {
width: 100%;
padding: 16px;
border-radius: 14px;
color: #fff;
border: 0.5px solid #FFFFFF66;
background: #FFFFFF1A;
backdrop-filter: blur(43.800987243652344px);
text-align: left;
}
.fp-cat-bg .category-active-ingredients ul {
margin: 0;
padding: 0;
list-style: none;
}
.fp-cat-bg .category-active-ingredients li {
margin: 0;
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
font-size: 9.59px;
line-height: 110.00000000000001%;
letter-spacing: 0%;
padding-bottom: 8px;
}
.fp-cat-bg .category-active-ingredients li:last-child {
padding-bottom: 0;
}
/* Category hero: Graph image under active ingredients */
.fp-cat-bg .category-active-ingredients-graph {
width: 218px;
height: 154px;
max-width: 100%;
}
.fp-cat-bg .category-active-ingredients-graph__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
@media (max-width: 1024px) {
.fp-cat-bg .fp-cat-hero-rightStack {
right: 14px;
bottom: 14px;
max-width: min(320px, calc(100% - 28px));
}
}
@media (max-width: 768px) {
.fp-cat-bg .category-featured-products__item {
width: 78px;
height: 78px;
}
.fp-cat-bg .fp-cat-hero-rightStack{
position: unset !important;
flex-direction: row;
width: 100%;
max-width: 100%;
}
.fp-cat-bg .category-featured-products{
flex-direction: column;
}
.fp-cat-bg .category-active-ingredients {
padding: 10px 12px;
height: 100%;
}
.fp-cat-bg .category-active-ingredients-graph {
width: 100%;
height: 100%;
}
.fp-cat-bg .category-featured-products{
height: 100%;
width: 100%;
}
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
width: 100% !important;
max-width: 100% !important;
border-radius: 10px !important;
border: 1px solid #d7d0c3 !important;
background-color: #ffffff !important;
padding: 10px 16px !important;
font-family: var(--font-abc-arizona-sans) !important;
font-size: 14px !important;
line-height: 1.4 !important;
color: #403b32 !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
textarea {
border-radius: 20px !important;
min-height: 110px !important;
resize: vertical !important;
}
input::placeholder,
textarea::placeholder {
color: #b0aa9f;
}
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23403b32' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 10px 6px !important;
padding-right: 34px !important;
}
span.selection{
width: 100% !important;
}
/* Select2 (country/state dropdowns) – match theme input style */
.select2-container--default .select2-selection--single {
min-height: 42px !important;
border: 1px solid #d7d0c3 !important;
border-radius: 10px !important;
background-color: #fff !important;
padding: 0 36px 0 16px !important;
}
:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__arrow b {
border: none;
display: block;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
background-size: 16px;
width: 16px;
height: 16px;
position: absolute;
top: 33% !important;
left: 0;
margin: -8px 0 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 26px !important;
padding-left: 0 !important;
color: #403b32 !important;
font-family: var(--font-abc-arizona-sans) !important;
font-size: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 40px !important;
right: 12px !important;
background: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #403b32 transparent transparent transparent !important;
border-width: 5px 4px 0 4px !important;
left: 50% !important;
margin-left: -4px !important;
margin-top: -2px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: #403b32 !important;
box-shadow: 0 0 0 1px rgba(64, 59, 50, 0.18) !important;
background-color: #fdfbf8 !important;
}
/* Select2 dropdown list */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: rgba(116, 75, 236, 0.12) !important;
color: #1a1a1a !important;
}
.select2-dropdown {
border: 1px solid #d7d0c3 !important;
border-radius: 10px !important;
font-family: var(--font-abc-arizona-sans) !important;
font-size: 14px !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #f8f6f3 !important;
}
input[type="checkbox"],
input[type="radio"] {
width: auto !important;
max-width: none !important;
border-radius: 4px !important;
border: 1px solid #bfb7a9 !important;
background-color: #fff !important;
box-shadow: none !important;
}
.bg-cover-center {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.breadcrumb-toggle {
background-color: #ffffff1f !important;
border-radius: 10px !important;
height: 37px !important;
width: 37px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.secondary-header .header-pill {
background-color: #f3f3f3 !important;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease, opacity 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease !important;
}
.woocommerce-checkout .woocommerce {
max-width: 100% !important;
padding: 50px 0;
}
.woocommerce-checkout h3 {
font-size: 26px !important;
margin: 0 0 20px !important;
}
@media(max-width: 768px){
.woocommerce-checkout .woocommerce {
padding: 0 !important;
}
}
/* ========== Checkout page – theme design ========== */
.woocommerce-checkout .woocommerce-account-content {
padding-bottom: 60px;
}
.woocommerce-checkout .woocommerce-account-heading {
margin-bottom: 32px;
}
.woocommerce-checkout .woocommerce-account-heading .entry-title {
font-family: var(--font-abc-arizona-flare) !important;
font-weight: 400 !important;
font-size: 36px !important;
letter-spacing: -0.02em;
color: #1a1a1a;
}
form.woocommerce-checkout {
background-color: transparent !important;
padding: 0 !important;
}
/* Coupon toggle & form */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
background: rgba(243, 240, 235, 0.6);
border: 1px solid #d7d0c3;
border-radius: 12px;
padding: 14px 20px;
margin-bottom: 20px;
font-family: var(--font-abc-arizona-sans);
font-size: 14px;
color: #403b32;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
color: var(--color-primary);
text-decoration: underline;
}
.woocommerce-checkout form.checkout_coupon {
background: #f8f6f3;
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
border: 1px solid #e8e4de;
}
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
float: none;
width: 100%;
margin-bottom: 12px;
}
.woocommerce-checkout form.checkout_coupon .button {
margin-top: 4px;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
width: 100%;
float: none;
}
.woocommerce-checkout #customer_details h3 {
font-family: var(--font-abc-arizona-sans) !important;
font-weight: 600;
font-size: 18px;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e8e4de;
}
.woocommerce-checkout #customer_details .form-row {
margin-bottom: 20px;
}
.woocommerce-checkout #customer_details .form-row label {
font-family: var(--font-abc-arizona-sans) !important;
font-size: 13px !important;
font-weight: 500;
color: #403b32;
margin-bottom: 6px !important;
display: block;
}
.woocommerce-checkout #customer_details .form-row-first { float: left; width: 48%; }
.woocommerce-checkout #customer_details .form-row-last { float: right; width: 48%; }
.woocommerce-checkout #customer_details .form-row-wide { clear: both; width: 100%; }
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea {
border-radius: 10px;
border: 1px solid #d7d0c3;
font-family: var(--font-abc-arizona-sans) !important;
}
/* Order review section */
.woocommerce-checkout #order_review_heading {
font-family: var(--font-abc-arizona-sans) !important;
font-weight: 600;
font-size: 18px;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e8e4de;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
width: 100%;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e8e4de;
background: #fff;
margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
background: #f8f6f3;
font-family: var(--font-abc-diatype-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #403b32;
padding: 14px 20px;
text-align: left;
border-bottom: 1px solid #e8e4de;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
padding: 16px 20px;
border-bottom: 1px solid #f0ede8;
font-family: var(--font-abc-arizona-sans);
font-size: 14px;
color: #1a1a1a;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child td {
border-bottom: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
font-family: var(--font-abc-arizona-sans);
font-weight: 500;
font-size: 14px;
color: #403b32;
padding: 12px 20px;
text-align: left;
border-top: 1px solid #e8e4de;
background: #faf9f7;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
padding: 12px 20px;
text-align: right;
font-family: var(--font-abc-diatype-mono);
font-size: 14px;
color: #1a1a1a;
border-top: 1px solid #e8e4de;
background: #faf9f7;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
font-weight: 600;
font-size: 16px;
padding-top: 16px;
padding-bottom: 16px;
border-top-width: 2px;
}
/* Payment area */
.woocommerce-checkout #payment {
background: #f8f6f3;
border: 1px solid #e8e4de;
border-radius: 12px;
padding: 24px;
margin-top: 0;
}
.woocommerce-checkout #payment .wc_payment_methods {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.woocommerce-checkout #payment .woocommerce-info {
background: rgba(243, 240, 235, 0.8);
border: 1px solid #d7d0c3;
border-radius: 10px;
padding: 14px 18px;
font-family: var(--font-abc-arizona-sans);
font-size: 14px;
color: #403b32;
}
.woocommerce-checkout #payment .form-row.place-order {
margin-top: 20px;
margin-bottom: 0;
}
.woocommerce-checkout #place_order {
width: 100%;
padding: 16px 28px !important;
font-size: 14px !important;
font-weight: 600 !important;
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
}
.woocommerce-checkout #place_order:hover {
background: #333 !important;
color: #fff !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
margin-bottom: 16px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p {
font-family: var(--font-abc-arizona-sans);
font-size: 13px;
color: #5c6185;
line-height: 1.5;
}
/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
.woocommerce-checkout #customer_details {
grid-template-columns: 1fr;
gap: 32px;
}
.woocommerce-checkout #customer_details .form-row-first,
.woocommerce-checkout #customer_details .form-row-last {
float: none;
width: 100%;
}
.woocommerce-checkout .woocommerce-account-heading .entry-title {
font-size: 28px !important;
}
}
/* ========== Thank you / order received ========== */
body.woocommerce-order-received .woocommerce-order {
max-width: 100%;
}
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 18px !important;
font-family: var(--font-abc-arizona-sans) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
color: #1a1a1a !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview {
list-style: none;
margin: 0 0 48px;
padding: 0;
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid #e8e8e8;
background: #fff;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
flex: 1 1 0;
min-width: 0;
margin: 0 !important;
padding: 18px 16px 20px;
border-left: 1px dotted #cfcfcf;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-family: var(--font-abc-arizona-sans);
}
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child {
border-left: none;
}
body.woocommerce-order-received .fp-order-overview__label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5c5c5c;
line-height: 1.3;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
font-size: 15px;
font-weight: 600;
color: #101010;
line-height: 1.35;
word-break: break-word;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong .amount {
font-weight: 600;
}
body.woocommerce-order-received .woocommerce-order-details {
margin-bottom: 48px;
}
body.woocommerce-order-received .woocommerce-order-details__title, section.woocommerce-order-details h2 {
margin: 0 0 16px;
font-family: var(--font-abc-arizona-sans) !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #101010;
letter-spacing: -0.02em;
margin-top: 15px !important;
}
.woocommerce table.shop_table.subscription_details + h2,
.woocommerce-page table.shop_table.subscription_details + h2 {
margin-top: 16px;
}
.woocommerce table.shop_table.subscription_details tbody td:first-child,
.woocommerce-page table.shop_table.subscription_details tbody td:first-child {
text-align: left;
}
.woocommerce table.shop_table.subscription_details tbody td:nth-child(2),
.woocommerce-page table.shop_table.subscription_details tbody td:nth-child(2) {
text-align: right;
}
.woocommerce table.shop_table.order_details thead th:first-child,
.woocommerce-page table.shop_table.order_details thead th:first-child,
.woocommerce table.shop_table.order_details tbody td:first-child,
.woocommerce-page table.shop_table.order_details tbody td:first-child,
.woocommerce table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot th {
text-align: left;
}
.woocommerce table.shop_table.order_details thead th:last-child,
.woocommerce-page table.shop_table.order_details thead th:last-child,
.woocommerce table.shop_table.order_details tbody td:last-child,
.woocommerce-page table.shop_table.order_details tbody td:last-child,
.woocommerce table.shop_table.order_details tfoot td,
.woocommerce-page table.shop_table.order_details tfoot td {
text-align: right !important;
}
.woocommerce form .form-row .input-checkbox{
display: inline-block !important;
}
p.comment-form-email {
margin-left: 0 !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details {
border: 1px solid #e8e8e8 !important;
border-collapse: collapse !important;
border-radius: 0 !important;
margin: 0 0 0 !important;
width: 100% !important;
background: #fff;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th {
font-family: var(--font-abc-arizona-sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #101010 !important;
padding: 14px 18px !important;
border-bottom: 1px solid #e8e8e8 !important;
border-top: none !important;
background: #fff !important;
text-align: left;
}
/* Thank you page: "Related subscriptions" table header alignment only */
body.woocommerce-order-received .woocommerce-order .woocommerce-order-details
table.woocommerce-MyAccount-subscriptions.woocommerce-orders-table--subscriptions thead th {
text-align: left !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th.product-total,
body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-total,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
text-align: right !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tbody td {
font-family: var(--font-abc-arizona-sans) !important;
font-size: 14px !important;
padding: 14px 18px !important;
border-top: 1px solid #e8e8e8 !important;
border-bottom: none !important;
color: #1a1a1a;
vertical-align: top;
}
body.woocommerce-order-received table.woocommerce-table--order-details tbody td a {
color: #1a1a1a;
text-decoration: none;
}
body.woocommerce-order-received table.woocommerce-table--order-details tbody td a:hover {
text-decoration: underline;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
font-family: var(--font-abc-arizona-sans) !important;
font-size: 14px !important;
padding: 12px 18px !important;
border-top: 1px solid #e8e8e8 !important;
border-bottom: none !important;
background: #fff !important;
vertical-align: middle;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
font-weight: 600 !important;
text-align: left !important;
color: #101010 !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
font-weight: 400;
color: #1a1a1a;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr.fp-order-totals-row--total th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr.fp-order-totals-row--total td {
font-weight: 700 !important;
font-size: 15px !important;
}
body.woocommerce-order-received .woocommerce-customer-details {
margin-top: 8px;
}
body.woocommerce-order-received .woocommerce-columns--addresses {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
margin-top: 0;
}
body.woocommerce-order-received .woocommerce-column__title {
font-family: var(--font-abc-arizona-sans) !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #101010;
margin: 0 0 12px !important;
padding: 0 !important;
border: none !important;
}
body.woocommerce-order-received .woocommerce-column address {
font-style: normal;
font-family: var(--font-abc-arizona-sans);
font-size: 14px;
line-height: 1.55;
color: #1a1a1a;
border: 1px solid #e8e8e8;
padding: 20px 20px 18px;
margin: 0;
background: #fff;
}
body.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-customer-details--email {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 14px 0 0 !important;
padding: 0 !important;
font-size: 14px;
color: #1a1a1a;
}
body.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-customer-details--phone::before,
body.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-customer-details--email::before {
content: '';
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-top: 2px;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
}
body.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-customer-details--phone::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
body.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-customer-details--email::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
body.woocommerce-order-received ul.woocommerce-order-overview {
flex-direction: column;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
flex: 1 1 auto;
width: 100%;
border-left: none;
border-top: 1px dotted #cfcfcf;
}
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child {
border-top: none;
}
body.woocommerce-order-received .woocommerce-columns--addresses {
grid-template-columns: 1fr;
}
}
/* WooCommerce col2-set: hide clearfix pseudo-elements, full-width columns */
.woocommerce .col2-set::after,
.woocommerce .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce-page .col2-set::before {
display: none;
}
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
float: left;
width: 100%;
}
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
float: right;
width: 100%;
}
/* ===== PDP sticky summary bar ===== */
.single-product .fp-pdp-stickyBar {
position: fixed;
left: 0;
right: 0;
bottom: 16px;
z-index: 50;
transform: translateY(120%);
opacity: 0;
pointer-events: none;
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.single-product .fp-pdp-stickyBar--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.single-product .fp-pdp-stickyBar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 18px;
background: linear-gradient(90deg, rgba(234, 221, 203, 0.98), rgba(247, 245, 242, 0.98));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.fp-pdp-stickyBar__text {
display: flex;
align-items: center;
gap: 10px;
}
.single-product .fp-pdp-stickyBar__left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.single-product .fp-pdp-stickyBar__thumb {
width: 40px;
height: 40px;
border-radius: 12px;
overflow: hidden;
background: #f5f1eb;
display: flex;
align-items: center;
justify-content: center;
}
.single-product .fp-pdp-stickyBar__thumbImg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.single-product .fp-pdp-stickyBar__text {
min-width: 0;
}
@media (max-width: 768px) {
.fp-pdp-stickyBar__text{
flex-wrap: wrap;
gap: 0;
}
.single-product .fp-pdp-stickyBar__thumb {
width: 60px;
height: 32px;
}
}
.single-product .fp-pdp-stickyBar__title {
font-family: var(--font-abc-arizona-sans);
font-size: 18px;
font-weight: 500;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.single-product .fp-pdp-stickyBar__tag {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
padding: 2px 8px;
font-family: var(--font-abc-diatype-mono);
font-size: 11px;
border: 1px solid #1a1a1a;
color: #1a1a1a;
background: transparent;
}
.single-product .fp-pdp-stickyBar__right {
display: flex;
align-items: center;
gap: 12px;
}
.single-product .fp-pdp-stickyBar__price {
font-family: var(--font-abc-arizona-flare);
font-size: 16px;
color: #1a1a1a;
white-space: nowrap;
}
.single-product .fp-pdp-stickyBar__price del {
opacity: 0.6;
margin-left: 4px;
}
.single-product .fp-pdp-accordion__content ul {
padding-left: 16px;
margin: 0;
list-style-position: outside;
list-style-type: disc;
}
.single-product .fp-pdp-stickyBar__cta {
border: none;
border-radius: 999px;
background: #1a1a1a;
color: #fff;
padding: 10px 20px;
font-family: var(--font-abc-diatype-mono);
font-size: 13px;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
}
.single-product .fp-pdp-stickyBar__cta:hover {
background: #000;
}
@media (max-width: 768px) {
.single-product .fp-pdp-stickyBar {
bottom: 12px;
}
.single-product .fp-pdp-stickyBar__inner {
padding: 10px 14px;
gap: 10px;
}
.single-product .fp-pdp-stickyBar__title {
font-size: 13px;
}
.single-product .fp-pdp-stickyBar__right {
gap: 8px;
}
.single-product .fp-pdp-stickyBar__price {
font-size: 13px;
display: flex;
flex-direction: column;
}
.single-product .fp-pdp-stickyBar__cta {
padding: 8px 16px;
font-size: 12px;
}
}
/* WooCommerce cart & checkout buttons – theme-aligned, light UI */
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input[type="submit"],
body.woocommerce-cart .woocommerce .button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce input[type="submit"],
body.woocommerce-checkout .woocommerce .button,
body.woocommerce-checkout #place_order {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 26px !important;
border-radius: 10px !important;
border: 1px solid #cbd7cb !important;
font-family: var(--font-abc-diatype-mono) !important;
background-color: #ffffff !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #1A1A1A !important;
letter-spacing: -0.26px !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, border-color 0.2s ease !important;
text-transform: capitalize !important;
}
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce input[type="submit"]:hover,
body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce input[type="submit"]:hover,
body.woocommerce-checkout .woocommerce .button:hover,
body.woocommerce-checkout #place_order:hover {
background-color: #cbd7cb !important;
border-color: #cbd7cb !important;
color: #1a1a1a !important;
}
.woocommerce form .form-row label {
line-height: 1 !important;
margin-top: 2px;
}
input#wc-authorize-net-cim-credit-card-tokenize-payment-method {
margin-bottom: 10px !important;
margin-right: 10px;
margin-top: -3px;
}
.announcement-bar {
background: #77726933;
backdrop-filter: blur(60px);
color: #ffffff;
text-align: center;
padding: 9px 0;
font-weight: 400;
font-size: 12px;
line-height: 130%;
vertical-align: middle;
z-index: 1;
position: relative;
}
.secondary-header .announcement-bar {
background: #CDCDCD33;
}
.announcement-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-abc-diatype-mono);
font-size: 13px;
font-weight: 400;
color: #ffffff;
letter-spacing: -1.05px;
}
.secondary-header .announcement-inner {
color: var(--color-green);
}
.custom-site-header {
position: sticky;
top: 0;
z-index: 100;
}
.sub-menu-toggle {
background-color: unset !important;
padding: 0 18px 0 0px !important;
}
.sub-menu-toggle::after {
content: "";
display: block;
width: 9.5px;
height: 5.55px;
margin-left: 6px;
background-size: contain;
background-repeat: no-repeat;
}
.primary-header .sub-menu-toggle::after {
background-image: url("data:image/svg+xml,") !important;
}
.secondary-header .sub-menu-toggle::after {
background-image: url("data:image/svg+xml,") !important;
}
.secondary-header .header-center svg path {
fill: #1A1A1A !important;
}
.secondary-header .header-center svg rect {
stroke: #1A1A1A !important;
}
.sub-menu-toggle:active, .sub-menu-toggle:hover {
outline: 0 !important;
border-color: transparent !important;
}
.icon-box {
width: 50px;
height: 50px;
}
.sub-menu-toggle .icon-plus, .sub-menu-toggle .icon-minus {
display: none;
}
/* Chevron for top-level mega menu trigger links. */
.primary-menu > .menu-item-has-mega-menu > a {
display: inline-flex;
align-items: center;
}
.primary-menu > .menu-item-has-mega-menu > a::after {
content: "";
display: block;
width: 21.5px;
height: 5.55px;
margin-left: 6px;
background-size: contain;
background-repeat: no-repeat;
}
.primary-header .primary-menu > .menu-item-has-mega-menu > a::after {
background-image: url("data:image/svg+xml,");
transition: opacity 0.28s ease;
}
.primary-header .primary-menu > .menu-item-has-mega-menu:hover > a::after,
.primary-header .primary-menu > .menu-item-has-mega-menu:focus-within > a::after {
background-image: url("data:image/svg+xml,");
}
.secondary-header .primary-menu > .menu-item-has-mega-menu > a::after {
background-image: url("data:image/svg+xml,");
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 20px;
max-width: 100%;
}
.header-container .header-scrolled-container {
display: none;
}
.header-container--scrolled {
background: rgb(43 80 72 / 52%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
width: 304px;
margin: 0 auto;
border-radius: 10px;
top: 10px;
/* min-height: 60px; */
}
.header-container--scrolled .header-container {
max-width: 100%;
margin: 0;
padding: 9px 18px;
}
.header-container--scrolled .header-scrolled-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.header-container--scrolled .header-scrolled-container a{
text-decoration: none;
font-size: 13px;
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
color: #1A1A1A;
letter-spacing: -0.2px;
}
.header-container--scrolled .header-left, .header-container--scrolled .header-center, .header-container--scrolled .header-right {
display: none;
}
.main-navigation.mobile {
display: none;
}
.header-cart-pill .mobile {
display: none !important;
}
.secondary-header .header-cart-pill .mobile svg path {
fill: #1A1A1A !important;
}
.primary-menu .mobile .close-button {
display: none;
}
.scrolled-menu {
visibility: hidden;
opacity: 0;
transition: all 0.5s ease-in-out;
top: 0;
left: 0;
z-index: 1111;
width: 100%;
height: 100vh;
position: fixed;
padding: 24px 8px;
backdrop-filter: blur(80px);
background: #1a1a1a8a;
}
.scrolled-menu.active {
visibility: visible;
transform: translateY(0);
opacity: 1;
}
.scrolled-menu .scrolled-menu-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: calc(100vh - 50px);
}
.scrolled-menu .scrolled-menu-inner .scrolled-menu-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.scrolled-menu .scrolled-menu-inner .scrolled-menu-grid .scrolled-menu-card__label {
font-size: 23px;
color: #ffffff;
text-align: center;
margin-top: 11px;
font-family: var(--font-abc-arizona-flare);
transition: color 0.28s ease, opacity 0.28s ease;
}
.scrolled-menu .scrolled-menu-inner .scrolled-menu-grid .scrolled-menu-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.scrolled-menu .scrolled-menu-header {
height: 52px;
display: flex;
justify-content: center;
align-items: center;
}
.scrolled-menu .scrolled-menu-content {
margin-top: 20px;
}
.scrolled-menu .scrolled-menu-footer {
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.scrolled-menu .scrolled-menu-footer a {
text-decoration: none;
color: #ffffff;
font-family: var(--font-abc-diatype-mono);
font-size: 15px;
line-height: 1;
transition: color 0.28s ease, opacity 0.28s ease, background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-left,
.header-center,
.header-right {
display: flex;
align-items: center;
}
.header-left {
flex: 1;
justify-content: flex-start;
}
.header-center {
flex: 0 0 auto;
justify-content: center;
}
.header-right {
flex: 1;
justify-content: flex-end;
gap: 4px;
}
.site-title-link {
color: #ffffff;
text-decoration: none;
font-size: 20px;
font-weight: 500;
display: flex;
}
.site-title-link img {
width: auto;
height: auto;
max-width: 164px;
max-height: 29px;
display: block;
}
.header-scrolled-center img {
width: auto;
height: auto;
max-height: 20px;
display: block;
}
.primary-menu {
list-style: none;
display: flex;
gap: 3px;
margin: 0;
padding: 0;
font-family: var(--font-abc-diatype-mono);
}
.primary-menu > li, .header-right > a, .header-left > button {
display: inline-flex;
align-items: center;
border-radius: 10px;
background: #f3f3f3;
height: 37px;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.primary-header .primary-menu .menu-item-has-mega-menu,
.primary-header .primary-menu > li,
.primary-header .header-right > a,
.primary-header .header-left > button
{
background: #ffffff1f;
}
.primary-header .primary-menu > li > a,
.primary-header .header-right > a,
.primary-header .header-left > button {
color: #ffffff;
transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.primary-header .primary-menu > li:hover,
.primary-header .primary-menu > li:focus-within,
.primary-header .primary-menu > li:focus-visible,
.primary-header .primary-menu .menu-item-has-mega-menu:hover,
.primary-header .primary-menu .menu-item-has-mega-menu:focus-within {
background: #fff;
}
.primary-header .primary-menu > li:hover > a,
.primary-header .primary-menu > li:focus-within > a,
.primary-header .primary-menu > li:focus-visible > a,
.primary-header .primary-menu .menu-item-has-mega-menu:hover > a,
.primary-header .primary-menu .menu-item-has-mega-menu:focus-within > a {
color: #1a1a1a;
}
/* Primary header: right cluster (Research Guide, search, account, cart) — same pill hover as nav */
.primary-header .header-right > a:hover,
.primary-header .header-right > a:focus-visible {
background: #fff;
color: #1a1a1a;
}
.primary-header .header-right > a:hover svg path,
.primary-header .header-right > a:focus-visible svg path {
fill: #1a1a1a !important;
}
.header-icon-pill svg path {
fill: #1A1A1A;
transition: fill 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.primary-header .header-icon-pill svg path, .scrolled-menu-footer svg path {
fill: #ffffff !important;
}
.header-right > a {
height: 37px;
font-family: var(--font-abc-diatype-mono);
font-size: 13px;
font-weight: 400;
color: #ffffff;
letter-spacing: -0.2px;
}
.header-icon-pill {
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.primary-menu > li > a, .header-right > a, .header-left > button {
text-decoration: none;
color: #1A1A1A;
font-size: 15px;
padding: 10px 18px;
transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1;
}
.menu-item-has-children > a {
padding: 10px 0px 10px 18px !important;
}
.primary-menu > li:hover, .header-right > a:hover, .header-left > button:hover,
.primary-menu > li:focus-visible, .header-right > a:focus-visible, .header-left > button:focus-visible {
outline: none;
background: #808080;
}
.secondary-header .primary-menu > li:hover, .secondary-header .header-right > a:hover, .secondary-header .header-left > button:hover,
.secondary-header .primary-menu > li:focus-visible, .secondary-header .header-right > a:focus-visible, .secondary-header .header-left > button:focus-visible,
.secondary-header .header-pill:focus-visible, .secondary-header .header-pill:hover {
opacity: 1;
outline: none;
border: unset;
background-color: #808080 !important;
}
/* Dropdown (sub-menu) styles */
.primary-menu li {
position: relative;
}
.primary-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin: 6px 0 0;
padding: 6px;
list-style: none;
background: rgba(11, 32, 27, 0.95);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
z-index: 200;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.primary-menu .sub-menu li {
margin: 0;
}
.primary-menu .sub-menu a {
display: flex;
padding: 12px 18px;
gap: 20px;
border-radius: 10px;
color: #ffffff;
text-decoration: none;
font-size: 13px;
background: transparent;
align-items: center;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease, opacity 0.28s ease;
}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
background: rgba(255, 255, 255, 0.12);
outline: none;
}
.primary-menu .sub-menu a:hover .hover-dot {
width: 6px;
}
.primary-menu .sub-menu a .mega-menu-left-card__title {
font-size: 18px;
font-family: var(--font-abc-arizona-flare);
margin-bottom: 9px;
}
.primary-menu .sub-menu a .mega-menu-left-card__description {
font-family: var(--font-abc-diatype-mono);
font-size: 12px;
color: #a19d9d;
}
.primary-menu .sub-menu a .hover-dot {
width: 0px;
height: 6px;
border-radius: 6px;
background-color: #ECB346;
transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.primary-menu .menu-item-has-mega-menu {
position: relative;
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper {
position: absolute;
top: -1000px;
left: 0;
width: 735px;
z-index: 250;
opacity: 0;
visibility: hidden;
padding-top: 10px;
transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s ease;
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper > .mega-menu {
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
margin-top: 0;
padding: 8px;
background: rgba(65, 65, 65, 0.8);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
display: flex;
gap: 8px;
transform: translateY(0px);
}
.primary-menu .menu-item-has-mega-menu:hover > .mega-menu-wrapper,
.primary-menu .menu-item-has-mega-menu:focus-within > .mega-menu-wrapper {
opacity: 1;
visibility: visible;
transform: translateY(0);
top: 100%;
}
.mega-menu-left-footer .mega-menu-left-footer__link{
border: 1px solid #a19d9d;
border-radius: 10px;
padding: 12px 18px;
font-size: 13px;
font-family: var(--font-abc-diatype-mono);
font-weight: 500;
color: #ffffff;
text-decoration: none;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease, border-color 0.28s ease, opacity 0.28s ease;
width: 100%;
text-align: center;
margin-top: 4px;
}
.mega-menu-left-footer .mega-menu-left-footer__link:hover,
.mega-menu-left-footer .mega-menu-left-footer__link:focus-visible {
background: #ffffff;
color: #1a1a1a;
}
.mega-menu-left {
flex: 1;
}
.mega-menu-left .sub-menu {
position: static;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.mega-menu-left .sub-menu li + li {
margin-top: 6px;
}
.mega-menu-product-item > a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
background: transparent;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}
.mega-menu-product-item > a:hover,
.mega-menu-product-item > a:focus-visible {
background: rgba(255, 255, 255, 0.08);
}
.mega-menu-product-thumb {
width: 40px;
height: 40px;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
.mega-menu-product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mega-menu-product-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.mega-menu-product-title {
font-size: 13px;
color: #ffffff;
}
.mega-menu-product-tags {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}
.mega-menu-right {
position: relative;
max-width: 323px;
}
.mega-menu-image-wrap {
position: relative;
border-radius: 18px;
overflow: hidden;
min-height: 160px;
background: radial-gradient(circle at top left, #4fd1c5, #22543d);
height: 100%;
}
.mega-menu-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mega-menu-right-footer {
display: none;
}
@media (max-width: 1200px) {
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper > .mega-menu {
transition: opacity 2s ease-out, transform 1s ease-out, visibility .5s ease-out;
}
.main-navigation {
display: none;
}
.main-navigation.mobile {
display: block;
}
.menu-item-type-custom {
display: none !important;
}
.header-cart-pill {
display: flex !important;
}
.header-cart-pill .mobile {
display: flex !important;
}
.header-cart-pill .desktop {
display: none !important;
}
.primary-menu.active .main-navigation.mobile .close-button{
display: block !important;
}
.primary-menu.active .main-navigation.mobile .open-button{
display: none !important;
}
.primary-menu.active {
position: fixed;
background: #222222;
width: 100vw;
height: 100vh;
padding: 9px 16px;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: flex-start;
left: 0;
top: 0;
z-index: 999;
}
.primary-menu.active .menu-item-type-custom {
display: flex !important;
}
.primary-menu.active .main-navigation {
display: inline-flex !important;
}
.primary-menu.active .primary-menu>li:first-child {
width: 0;
height: 0;
padding: 0;
}
.primary-menu.active .primary-menu>li:first-child>a, .primary-menu.active .primary-menu>li:first-child button {
display: none !important;
}
.primary-menu .primary-menu .mega-menu-wrapper.active {
visibility: visible;
opacity: 1;
transform: translateY(0);
top: 52px;
left: 16px;
position: fixed;
margin: 0;
padding: 0;
/* Fit below header: 90vh ignored top offset and clipped the last items on real devices */
max-height: calc(100vh - 52px - env(safe-area-inset-bottom, 0px) - 16px);
max-height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px) - 16px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.primary-menu .primary-menu .mega-menu-wrapper.active .mega-menu {
display: flex;
flex-direction: column;
max-width: calc(100vw - 32px);
padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper .mega-menu {
background: unset;
box-shadow: none;
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper .mega-menu .mega-menu-left {
padding: 14px 12px;
}
.primary-menu .primary-menu .mega-menu-wrapper.active .mega-menu-right {
max-width: 100%;
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper .mega-menu > div:first-child {
background: #ffffff4a;
border-radius: 20px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper .mega-menu > div:nth-child(2) {
min-width: 100%;
height: 184px;
}
.primary-menu .menu-item-has-mega-menu > .mega-menu-wrapper > .mega-menu .mega-menu-image-wrap {
width: 100%;
height: 184px;
}
.mega-menu-right-footer {
display: flex;
gap: 6px;
}
.mega-menu-right-footer__link {
flex: 1;
display: flex;
height: 37px;
align-items: center;
justify-content: center;
gap: 6px;
background: #ffffff4a;
border-radius: 10px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.scrolled-menu .scrolled-menu-inner .scrolled-menu-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* ===============================
Home page (FINAL COPY – HOME)
=============================== */
/* ===== Home shell / hero start ===== */
.feel-home {
background-color: #ffffff;
color: #1a1a1a;
padding: 0 !important;
margin-top: -106px;
}
.feel-home .wrap {
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
max-width: 1600px;
}
/* Hero */
.feel-hero {
position: relative;
min-height: 927px;
display: flex;
align-items: stretch;
background-color: #000;
color: #ffffff;
}
.page-science .feel-hero {
min-height: 645px;
}
.page-science .feel-hero__inner {
padding: 0;
}
.page-science .feel-hero__title {
margin-bottom: -105px;
}
.feel-hero__media {
position: relative;
flex: 1;
display: flex;
align-items: stretch;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.feel-hero__video,
.feel-hero__image--bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* .feel-hero__overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 10%, rgba(227, 236, 122, 0.2), transparent 55%),
linear-gradient(180deg, rgba(0, 0, 0, 0.45) 10%, rgba(0, 0, 0, 0.85) 90%);
pointer-events: none;
} */
.feel-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
min-height: 100%;
padding: 120px 0 59px;
}
.feel-hero__center {
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.feel-hero__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
width: 100%;
padding: 0 20px;
}
.feel-hero__bottom--product-only .feel-hero__product {
margin-left: auto;
}
.feel-hero__product {
position: relative;
top: -6px;
display: flex;
align-items: center;
padding: 0 10px;
background: rgba(243, 240, 235, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 21.9px;
border: 1px solid rgba(243, 240, 235, 0.15);
text-decoration: none;
color: inherit;
transition: background 0.2s ease, border-color 0.2s ease;
max-width: 214px;
min-width: 214px;
margin-right: 10px;
height: 80px;
}
a.feel-hero__product:hover {
background: rgba(243, 240, 235, 0.18);
border-color: rgba(243, 240, 235, 0.25);
}
.feel-hero__product-inner {
display: flex;
gap: 12px;
align-items: start;
}
.feel-hero__product-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(243, 240, 235, 0.9);
}
.feel-hero__product-icon svg {
width: 25px;
height: 25px;
}
.feel-hero__product-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.feel-hero__product-name {
font-weight: 600;
font-size: 19.71px;
letter-spacing: -0.02em;
color: #ffffff;
line-height: normal;
}
.feel-hero__product-desc {
font-size: 12px;
line-height: 1.3;
color: rgba(243, 240, 235, 0.85);
font-family: var(--font-abc-diatype-mono);
}
.feel-hero__kicker {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(243, 240, 235, 0.8);
margin-bottom: 12px;
}
.feel-hero__title {
font-family: var(--font-abc-arizona-flare);
font-weight: 300;
font-size: 48px;
line-height: 0.95;
letter-spacing: -0.05em;
margin-bottom: -40px;
color: #ffffff;
}
.feel-hero__subtitle {
max-width: 22rem;
margin: 0;
max-width: 333px;
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
font-size: 24px;
line-height: 130%;
letter-spacing: -2%;
color: #FFFFFF;
}
/* ===== Home shell / hero end ===== */
.feel-section {
padding: 80px 0;
background-color: #ffffff;
}
@media (max-width: 767px) {
.site-main > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.feel-section{
padding: 80px 0 0 0 ;
}
.fe-section{
padding: 0 16px!important;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
font-size: 16px !important;
line-height: 22px !important;
/* margin-bottom: 0 !important; */
}
}
.wpcf7-spinner{
display: none !important;
}
.woocommerce-shop .feel-section {
padding: 14px 0 !important;
}
.feel-section__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 32px;
}
.feel-section__title {
margin: 0;
}
.feel-section__intro {
max-width: 420px;
font-size: 0.95rem;
line-height: 1.6;
color: #777269;
margin: 0 0 6px;
}
/* ===== Home products row start (“Keep your body in sync”) ===== */
.feel-products {
padding-bottom: 48px;
}
.feel-products__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 66px;
}
.feel-products__title {
margin: 0;
flex: 1;
max-width: 40%;
text-align: left;
font-family: var(--font-abc-arizona-flare) !important;
}
.feel-products__header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
max-width: 418px;
text-align: right;
}
.feel-products__intro {
font-family: var(--font-abc-arizona-sans);
font-size: 0.95rem;
line-height: 1.6;
color: #777269;
margin: 0;
}
.feel-products__button {
white-space: nowrap;
}
/* ===== Home products row end ===== */
.feel-products__scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 8px;
width: 100%;
}
.feel-products__scroll::-webkit-scrollbar {
display: none;
}
.feel-products__grid {
display: flex;
gap: 7px;
width: max-content;
padding-left: 72px;
padding-right: 72px;
max-width: 1600px;
margin: 0 auto;
}
@media(max-width:768px){
.feel-products__grid {
padding-left: 16px;
padding-right: 16px;
}
}
.feel-product-card {
position: relative;
border-radius: 30px;
overflow: hidden;
flex: 0 0 343px;
width: 343px;
min-height: 543px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
color: #1a1a1a;
background: #c0c0c0aa;
cursor: pointer;
}
.feel-product-card .bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(10px);
-webkit-filter: blur(10px);
background-position: center;
background-repeat: no-repeat;
background-size: 500%;
opacity: 0;
transition: all 0.3s ease-in-out;
visibility: hidden;
}
.feel-product-card:hover .bg-image {
filter: blur(10px);
-webkit-filter: blur(10px);
opacity: .5;
visibility: visible;
}
.feel-product-card:hover .feel-product-card__content {
opacity: 1;
/* Move content up a little so it stays above the button when button slides in */
transform: translateY(-56px);
}
.feel-product-card__media {
position: relative;
flex: 1;
min-height: 543px;
min-width: 343px;
display: flex;
align-items: center;
justify-content: center;
}
.feel-product-card__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 15px;
background: #F3F0EB;
color: #1a1a1a;
border-radius: 6px;
font-family: var(--font-abc-diatype-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.feel-product-card__badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.feel-product-card__badges .feel-product-card__badge {
position: static;
}
.feel-product-card__badge--bestseller {
background: #F3F0EB;
color: #1a1a1a;
}
.feel-product-card__badge--new {
background: #F3F0EB;
color: #1a1a1a;
}
.feel-product-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feel-product-card__media .woocommerce-LoopProduct-link {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.feel-product-card__image--hover {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.feel-product-card:hover .feel-product-card__image--hover {
opacity: 1;
}
.feel-product-card__content {
padding: 16px 20px 24px;
position: absolute;
bottom: -55px;
left: 0;
right: 0;
transition: transform 0.35s ease;
}
.feel-product-card__title-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 6px;
}
.feel-product-card__title {
margin: 0;
font-family: var(--font-abc-arizona-flare);
font-weight: 500;
color: #FFFFFF;
letter-spacing: -0.02em;
font-weight: 300;
font-style: Light;
font-size: 24px;
line-height: 100%;
letter-spacing: -2%;
}
a.feel-footer__socialIcon:hover svg{
filter: invert(1);
}
.mega-menu-left-card__media img {
width: 40px;
height: auto;
}
.feel-product-card__tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
border-radius: 4px;
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
font-family: var(--font-abc-diatype-mono);
font-size: 11px;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 130%;
letter-spacing: -2%;
}
.feel-product-card__description {
text-align: center;
margin: 0;
font-family: var(--font-abc-diatype-mono);
line-height: 1.4;
color: #ffffff;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 130%;
letter-spacing: -4%;
}
/* Category label on image (large, faint) – visible on hover */
.feel-product-card__category {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
font-family: var(--font-abc-arizona-sans);
font-size: clamp(48px, 12vw, 96px);
font-weight: 300;
line-height: 1;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
opacity: 0;
transition: opacity 0.35s ease;
}
.feel-product-card:hover .feel-product-card__category {
opacity: 1;
display: none;
}
/* Shop button – wrapped with content; sits below card (translateY 100%), on hover content goes up and btn slides into card */
.feel-product-card__shop-btn {
display: block;
margin-top: 12px;
padding: 5px 20px;
border-radius: 12px;
background: #ffffff;
color: #000;
font-family: var(--font-abc-arizona-sans);
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
transform: translateY(100%);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.feel-product-card:hover .feel-product-card__shop-btn {
transform: translateY(0);
opacity: 1;
}
/* ===== Daily essentials feature banner start ===== */
.feel-banner {
background-color: #ffffff;
}
.feel-banner--daily .feel-banner__inner {
display: flex;
align-items: center;
gap: 48px;
min-height: 400px;
justify-content: space-between;
}
.feel-banner--daily .feel-banner__content {
flex: 1;
min-width: 0;
max-width: 390px;
}
.feel-banner--daily .feel-banner__media {
flex: 1;
}
.feel-banner__media {
border-radius: 32px;
overflow: hidden;
position: relative;
width: 100%;
max-width: 680px;
/* Explicit height: min/max height alone do not give a percentage base, so
img/video height:100% was resolving to intrinsic image height (~900px). */
height: 704px;
max-height: 704px;
}
.feel-banner__media--breakout {
border-radius: 50px;
}
.feel-banner__video,
.feel-banner__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Science banner (protocol feature) */
.feel-science-banner__inner {
border-radius: 40px;
overflow: hidden;
position: relative;
min-height: 420px;
/* padding: 27px 0 !important; */
}
.feel-science-banner__background {
position: absolute;
inset: 0;
}
.feel-science-banner__background-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feel-science-banner__overlay-content {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
gap: 40px;
align-items: center;
padding: 48px 56px;
color: #ffffff;
width: 100%;
}
img.feel-science-banner__media-item.feel-science-banner__media-item--top {
max-height: 212px;
object-fit: cover;
}
.feel-science-banner__products {
display: flex;
align-items: flex-end;
gap: 5px;
}
.feel-science-banner__product {
display: block;
color: #ffffff;
}
.feel-science-banner__product-layout {
display: flex;
align-items: center;
gap: 16px;
}
.feel-science-banner__product-layout--1 {
align-items: flex-end;
}
.feel-science-banner__product-layout--2 {
flex-direction: row-reverse;
}
.feel-science-banner__product-callout {
position: relative;
max-width: 244px;
padding-right: 70px;
top: -73px;
}
.feel-science-banner__product-callout p{
max-width: 162px;
margin-left: 16px;
}
.feel-science-banner__product-callout::after {
content: "";
position: absolute;
top: 39%;
right: 0;
width: 56px;
height: 1px;
background: rgba(243, 240, 235, 0.85);
}
.feel-science-banner__product-callout::before {
content: "";
position: absolute;
top: 40%;
right: 0;
width: 6px;
height: 6px;
border-radius: 999px;
transform: translateY(-50%);
background: rgba(243, 240, 235, 0.95);
}
.feel-science-banner__product-layout--2 .feel-science-banner__product-callout {
padding-right: 0;
padding-left: 55px;
text-align: left;
top: -86px;
}
.feel-science-banner__product-layout--2 .feel-science-banner__product-callout::after {
left: 0;
right: auto;
}
.feel-science-banner__product-layout--2 .feel-science-banner__product-callout::before {
left: 0;
right: auto;
}
.feel-science-banner__product-media {
display: flex;
align-items: flex-end;
justify-content: center;
max-width: 100px;
}
.feel-science-banner__product-label {
font-family: var(--font-abc-diatype-mono);
text-transform: capitalize;
margin: 0 0 4px;
font-weight: 400;
font-size: 24px;
line-height: 130%;
letter-spacing: -4%;
vertical-align: middle;
}
@media (max-width: 768px) {
.feel-science-banner__product-label {
font-size: 18px;
}
}
.feel-science-banner__product-description {
margin: 0;
font-family: var(--font-abc-diatype-mono);
font-size: 12px;
line-height: 1.5;
opacity: 0.85;
}
.feel-science-banner__title {
margin: 0 0 40px;
color: #f3f0eb;
font-family: var(--font-abc-arizona-flare);
font-weight: 300;
font-size: 32px;
line-height: 110.00000000000001%;
letter-spacing: -6%;
}
.feel-science-banner__subtitle {
margin: 18px 0 40px;
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
font-size: 12px;
line-height: 130%;
letter-spacing: -4%;
color: #FFFFFF;
}
.feel-science-banner__metric {
display: flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(40px);
background: #FFFFFF33;
padding: 6px 18px 6px 24px;
border-radius: 30px;
justify-content: space-between;
}
.feel-science-banner__metric-pill {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 3px;
padding: 10px 18px;
}
.feel-science-banner__metric-label {
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
font-size: 32px;
line-height: 130%;
letter-spacing: -2%;
}
.feel-science-banner__metric-note {
opacity: 0.85;
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: -2%;
vertical-align: middle;
}
.feel-science-banner__metric-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
top: -10px;
}
.feel-science-banner__metric-icon svg {
display: block;
width: 17px;
height: 17px;
}
.feel-science-banner__text {
max-width: 400px !important;
}
@media (max-width: 1024px) {
.feel-science-banner__overlay-content {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 28px;
flex-direction: column;
}
.feel-science-banner__text {
margin-left: 0;
max-width: 100%;
}
.feel-science-banner__products {
justify-content: center;
}
.feel-science-banner__product-layout {
gap: 20px;
}
}
@media (max-width: 768px) {
.feel-science-banner {
padding-top: 32px;
padding-bottom: 32px;
}
.feel-science-banner__inner {
min-height: 380px;
}
.feel-science-banner__overlay-content {
padding: 24px 16px;
flex-direction: column;
}
.feel-science-banner__product-layout{
gap: 0;
}
.feel-science-banner__product-description{
font-size: 10px;
}
.feel-science-banner__product-layout {
justify-content: center;
}
.feel-science-banner__product-callout {
text-align: left;
padding: 0 !important;
}
.feel-science-banner__product-callout::after {
top: -17%;
}
.feel-science-banner__product-callout::before {
top: -17%;
}
.feel-science-banner__product-layout.feel-science-banner__product-layout--1 .feel-science-banner__product-callout::after{
bottom: -4%;
top: auto
}
.feel-science-banner__product-layout.feel-science-banner__product-layout--1 .feel-science-banner__product-callout::before{
bottom: -24%;
top: auto;
}
}
.feel-steps {
padding-top: 64px;
padding-bottom: 72px !important;
}
.feel-steps__header {
max-width: 470px;
margin: 0 0 75px;
text-align: left;
}
.feel-steps__title {
margin: 0 0 8px;
text-align: left;
font-size: 32px;
font-family: var(--font-abc-arizona-flare);
font-weight: 300;
font-style: Light;
line-height: 110.00000000000001%;
letter-spacing: -6%;
background: var(--heading-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 5px;
}
.feel-steps__intro {
margin: 0;
font-family: var(--font-abc-arizona-sans);
font-size: 0.95rem;
line-height: 1.6;
color: #777269;
}
.feel-steps__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.feel-steps__item {
display: flex;
flex-direction: column;
gap: 14px;
}
.feel-steps__step-header {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-abc-diatype-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #777269;
}
.feel-steps__step-label {
margin: 0;
white-space: nowrap;
color: #1A1A1A;
}
.feel-steps__step-divider {
flex: 1;
border-bottom: 1px dashed rgba(119, 114, 105, 0.5);
position: relative;
top: 31px;
}
@media (max-width: 767px) {
.feel-steps__step-divider {
display: none;
}
.fp-shop-categories {
display: grid;
gap: 0px;
}
.woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr{
margin: 0 !important;
}
}
.feel-steps__media {
min-height: 120px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 20px;
}
.feel-steps__image {
max-width: 100%;
height: 140px !important;
width: 90px !important;
object-fit: contain !important;
display: block;
}
.feel-steps__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.feel-steps__badge {
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-family: var(--font-abc-diatype-mono);
background: #f3f0eb;
color: #4a463f;
}
.feel-steps__item-title {
margin: 4px 0 6px;
font-size: 18px;
font-weight: 500;
font-family: var(--font-abc-arizona-flare);
}
.feel-steps__item-description {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
opacity: 60%;
color: #777269;
font-family: var(--font-abc-arizona-sans);
}
@media (max-width: 1200px) {
.feel-steps__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.feel-steps__grid {
grid-template-columns: 1fr;
}
.feel-steps {
padding-top: 48px;
padding-bottom: 56px;
}
/* Mobile: dashed border on left side with bullet point */
.feel-steps__item {
position: relative;
padding-left: 24px;
border-left: 1px dashed rgba(119, 114, 105, 0.5);
}
.feel-steps__item::before {
content: '';
position: absolute;
left: -5px;
top: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(119, 114, 105, 0.5);
}
}
.feel-banner__label {
font-family: var(--font-abc-arizona-sans);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #777269;
margin-bottom: 10px;
}
.feel-banner__title {
margin: 0 0 27px;
text-align: left;
}
.feel-banner__subtitle {
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
margin-bottom: 28px;;
font-size: 16px;
line-height: 140%;
letter-spacing: -2%;
width: 87%;
color: #777269;
}
/* ===== Daily essentials feature banner end ===== */
/* ===============================
Footer (Figma: FINAL COPY)
=============================== */
.feel-footer {
position: relative;
}
.feel-footer__inner {
position: relative;
background-color: #ffffff;
color: #777269;
padding: 20px 0 25px 0;
font-size: 0.9rem;
border-end-end-radius: 30px;
border-end-start-radius: 30px;
width: 100%;
z-index: 1;
}
.feel-footer .wrap {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.feel-footer__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 57px;
margin-bottom: 56px;
}
.feel-footer__newsletter {
width: 378px;
}
@media (max-width: 540px) {
.feel-footer__newsletter {
width: 100%;
}
}
.feel-footer__eyebrow {
font-size: var(--font-medium);
letter-spacing: -.4px;
margin: 0 0 12px;
color: #777269;
font-family: var(--font-abc-arizona-sans);
}
.feel-footer__form {
display: flex;
flex-direction: column;
gap: 7px;
}
.feel__inputWrap p {
display: flex;
align-items: center;
border-radius: 24px;
width: 100%;
border: 1px solid rgba(118, 114, 105, 0.2);
padding-inline: 16px;
height: 35px;
background-color: #ffffff;
}
.feel__inputWrap .feel__input {
border: 0 !important;
outline: 0 !important;
flex: 1;
font-size: 12px !important;
font-family: var(--font-abc-diatype-mono) !important;
color: #1a1a1a;
border: unset !important;
padding: unset !important;
display: block !important;
height: 100% !important;
}
.feel__inputWrap .wpcf7-form-control-wrap {
position: relative;
height: 100%;
display: block;
}
.feel-footer__input::placeholder {
color: #777269;
opacity: 0.9;
}
.feel-footer__submit {
border: 0 !important;
background: none !important;
color: #777269 !important;
font-family: var(--font-abc-diatype-mono) !important;
font-size: 12px !important;
cursor: pointer !important;
padding: 3px !important;
background-color: unset !important;
}
.feel-footer__submit:hover,
.feel-footer__submit:focus-visible {
text-decoration: underline;
}
.feel-footer__disclaimer {
margin: 0;
font-family: var(--font-abc-diatype-mono);
font-size: var(--font-small);
color: #777269;
padding: 0 13.5px;
letter-spacing: -.2px;
opacity: 40%;
}
@media (max-width: 540px) {
.feel-footer__disclaimer {
padding: 0;
font-size: 12px !important;
letter-spacing: -1px !important;
}
}
/* ===============================
* Home subscribe / feel picker
* ============================ */
.fp-subscribe {
padding: 72px 0 !important;
margin: 0 !important;
background-color: #ffffff;
}
.fp-subscribe__inner {
display: flex;
justify-content: space-between;
gap: 6px;
}
.fp-subscribe__left,
.fp-subscribe__right {
min-width: 0;
border-radius: 70px;
}
.fp-subscribe__left {
min-width: 65.3%;
}
.fp-subscribeLeftCard {
position: relative;
border-radius: 70px;
overflow: hidden;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 40px;
color: #ffffff;
gap: 40px;
}
.fp-subscribeLeftCard::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 10%, rgba(225, 237, 181, 0.45), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(255, 187, 150, 0.5), transparent 55%);
mix-blend-mode: soft-light;
pointer-events: none;
}
.fp-subscribeLeftCard__eyebrow {
font-family: var(--font-abc-arizona-flare);
font-size: 32px;
font-weight: 300;
letter-spacing: -1.95px;
color: #ffffff;
}
.fp-subscribeLeftCard__pills {
display: flex;
gap: 6px;
justify-items: center;
flex-direction: column;
padding: 0;
list-style: none;
align-items: center;
}
.fp-subscribeLeftCard__pill {
display: inline-flex;
}
.fp-subscribeLeftCard__pillButton {
border-radius: 8px;
padding: 0 12px;
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
font-size: 13px;
font-family: var(--font-abc-diatype-mono);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 28px;
cursor: pointer;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fp-subscribeLeftCard__pillButton:hover:not(.is-active),
.fp-subscribeLeftCard__pillButton:focus-visible:not(.is-active) {
background-color: #ffffff !important;
color: #1a1a1a !important;
border: none !important;
outline: none;
}
.fp-subscribeLeftCard__pillLabel {
white-space: nowrap;
}
.fp-white-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 35px !important;
padding: 0 24px !important;
border-radius: 12px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
color: #1a1a1a !important;
font-size: 13px !important;
font-family: var(--font-abc-diatype-mono) !important;
font-weight: 400;
letter-spacing: -0.2px;
width: fit-content;
text-decoration: none;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner.fp-white-button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: max-content;
margin-top: 15px;
}
.fp-subscribeCard .fp-subscribeCard__form form p{
text-align: center;
}
.fp-white-button:hover,
.fp-white-button:focus-visible,
.fp-white-button:active {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
background-color: #1a1a1a !important;
color: #ffffff !important;
outline: unset !important;
outline-offset: unset !important;
border-color: transparent !important;
}
.fp-subscribe__right {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.fp-subscribe__right.no-left {
flex-direction: row;
justify-content: center;
align-items: center;
}
.fp-subscribe__right.no-left > div {
flex: 1;
max-width: 466px;
min-height: 413px;
width: 100%;
}
.fp-subscribeCard {
border-radius: 70px;
background-color: #f3f0eb;
padding: 48px 42px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 25.8px;
align-items: center;
}
.fp-subscribeCard__title, .fp-chatCard__title {
font-family: var(--font-abc-arizona-flare);
font-size: 24px;
font-weight: 300;
line-height: 24px;
letter-spacing: -0.45px;
color: #1a1a1a;
text-align: center;
}
.fp-subscribeCard__form {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.fp-subscribeCard__validation {
display: block;
width: 100%;
max-width: 320px;
margin: 6px 0 0;
padding: 0 2px;
font-family: var(--font-abc-arizona-sans);
font-size: 12px;
line-height: 1.35;
color: #b42318;
text-align: left;
box-sizing: border-box;
}
.fp-subscribeCard__validation[hidden] {
display: none !important;
}
/* Hide CF7's default inline error (we render our own under the input). */
.fp-subscribeCard .wpcf7-not-valid-tip {
display: none !important;
}
/* Footer subscribe: same single-message pattern as .fp-subscribeCard */
.feel-footer .wpcf7-not-valid-tip {
display: none !important;
}
.feel-footer__form .fp-subscribeCard__validation {
max-width: 100%;
}
.fp-subscribeCard__image {
margin: 0 auto;
max-width: 90px !important;
max-height: 90px !important;
}
ul.woocommerce-PaymentMethods.payment_methods.methods {
padding: 0 !important;
}
input#wp-comment-cookies-consent {
margin-bottom: 10px !important;
}
.comment-form > p.comment-form-cookies-consent {
display: flex;
align-items: center !important;
}
.fp-subscribeCard__image img {
display: block;
border-radius: 20.9px;
width: 90px;
height: 90px;
object-fit: cover;
}
.fp-subscribeCard__label {
font-size: 12px;
color: #1a1a1a;
font-family: var(--font-abc-diatype-mono);
}
.fp-subscribeCard__inputWrap {
display: flex;
align-items: center;
border-radius: 24px;
border: 1px solid rgba(118, 114, 105, 0.2);
padding-inline: 16px;
height: 35px;
background-color: #ffffff;
}
.fp-subscribeCard__input {
border: 0;
outline: 0;
flex: 1;
font-size: 14px;
color: #1a1a1a;
font-family: var(--font-abc-arizona-sans);
}
.fp-subscribeCard__input::placeholder {
color: #777269;
opacity: 0.9;
}
.fp-subscribeCard__disclaimer {
margin: 0;
font-family: var(--font-abc-diatype-mono);
font-size: 12px;
color: #1A1A1A;
text-align: center;
opacity: 40%;
}
.fp-subscribeCard__disclaimer a {
color: inherit;
text-decoration: underline;
}
.fp-subscribeCard__submit {
align-self: center;
margin-top: 4px;
border-radius: 10px;
border: 1px solid rgba(118, 114, 105, 0.5);
background-color: #ffffff;
color: #1a1a1a;
padding: 8px 24px;
font-size: 13px;
font-family: var(--font-abc-arizona-sans);
cursor: pointer;
}
.fp-subscribeCard__submit:hover,
.fp-subscribeCard__submit:focus-visible {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.fp-subscribeChat {
border-radius: 70px;
background: #F3F0EB;
padding: 48px 0;
display: flex;
align-items: stretch;
height: 413.5px;
position: relative;
}
.fp-chatCard__media {
position: absolute;
bottom: 0;
}
.fp-chatCard__media img {
width: 273px;
}
.fp-subscribeChat .fp-chatCard {
width: 100%;
}
@media (max-width: 1024px) {
.fp-subscribe__inner {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
}
@media (max-width: 768px) {
.fp-subscribe {
padding: 56px 0 72px;
}
.fp-subscribe__inner {
flex-direction: column;
}
.fp-subscribe__right.no-left {
flex-direction: column;
}
.fp-subscribe__left {
min-width: 100%;
}
.fp-subscribeLeftCard {
min-height: 473px;
padding: 40px 24px;
}
.fp-subscribeCard__title {
font-size: 22px;
}
}
.feel-footer__menus {
display: flex;
gap: 22px;
padding: 3px 0;
width: 240px;
padding: 3px 4px;
}
@media (max-width: 540px) {
.feel-footer__menus {
padding: 0;
}
}
.feel-footer__menuTitle {
margin: 0 0 4px;
font-size: var(--font-small);
color: #777269;
opacity: 40%;
font-weight: 400;
font-family: var(--font-abc-diatype-mono);
}
.feel-footer__menuList {
list-style: none;
margin: 0;
padding: 0;
display: grid;
row-gap: 10px;
}
.feel-footer__menuList a {
text-decoration: none;
color: #777269;
font-size: 14px;
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
letter-spacing: -.2px;
text-transform: capitalize;
}
.feel-footer__menuList li {
max-height: 18px;
}
.feel-footer__menuList a:hover,
.feel-footer__menuList a:focus-visible {
text-decoration: underline;
/* color: var(--color-green); */
}
.feel-footer__bottom {
display: flex;
flex-direction: column;
gap: 10px;
}
.feel-footer__brandRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.feel-footer__marks {
display: inline-flex;
align-items: center;
gap: 17px;
}
.feel-footer__markDot {
width: 14px;
height: 14px;
border-radius: 999px;
background-color: var(--color-green);
}
.feel-footer__socialIcon img {
display: block;
width: 15px;
height: 15px;
}
.feel-footer__linksRow {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: var(--font-small);
padding-top: 10px;
}
.feel-footer__textLink {
position: relative;
text-decoration: none;
color: #777269;
font-family: var(--font-abc-diatype-mono);
letter-spacing: -.2px;
font-size: var(--font-small);
opacity: 40%;
transition: color 0.2s ease, opacity 0.2s ease;
}
a.feel-footer__textLink:hover,
a.feel-footer__textLink:focus-visible {
color: #1a1a1a;
opacity: 1;
}
/* .feel-footer__textLink::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background-color: var(--color-green);
opacity: 0.25;
transition: opacity 0.18s ease-out;
} */
.feel-footer__textLink:hover::after,
.feel-footer__textLink:focus-visible::after {
opacity: 1;
}
.feel-footer__metaRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
border-top: 1px solid #eaeded;
}
.feel-footer__localeWrap {
position: relative;
}
.feel-footer__locale {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
border: 0;
background: none;
color: #777269 !important;
font-size: var(--font-small);
cursor: pointer;
padding: 4px 0;
font-family: var(--font-abc-diatype-mono);
background: unset !important;
letter-spacing: -.2px;
}
.feel-footer__localeIcon {
display: block;
}
.feel-footer__localeList {
position: absolute;
right: 0;
margin-top: 6px;
padding: 8px 10px;
background: #ffffff;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
list-style: none;
min-width: 190px;
display: none;
z-index: 10;
}
.feel-footer__localeList li {
padding: 6px 6px;
font-size: 0.86rem;
cursor: pointer;
white-space: nowrap;
}
.feel-footer__localeList li[aria-selected="true"] {
font-weight: 600;
}
.feel-footer__localeList li:hover,
.feel-footer__localeList li:focus-visible {
background: rgba(43, 80, 72, 0.06);
}
.feel-footer__localeWrap.is-open .feel-footer__localeList {
display: block;
}
.feel-footer__payments {
min-width: 210px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
padding-top: 15px;
}
.feel-footer__paymentIcon {
display: block;
height: 28px !important;
width: auto;
max-width: 48px !important;
object-fit: contain !important;
}
.feel-footer__paymentPlaceholder {
width: 210px;
height: 28px;
border-radius: 6px;
background: linear-gradient(90deg, #f3f0eb, #e3ec7a);
opacity: 0.8;
}
/* Footer closing video band */
.feel-footer-video {
position: relative;
height: 468px;
overflow: hidden;
color: #ffffff;
margin-top: -30px;
}
.feel-footer-video__media {
position: absolute;
inset: 0;
}
.feel-footer-video__video,
.feel-footer-video__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feel-footer-video__overlay {
/*position: absolute;
inset: 0;
background: radial-gradient(circle at 15% 0%, rgba(227, 236, 122, 0.35), transparent 60%),
linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.9));
pointer-events: none;*/
}
.feel-footer-video__inner {
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.feel-footer-video__inner-wrap {
position: relative;
z-index: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.feel-footer-video__brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-abc-arizona-flare);
font-size: 57.49px;
letter-spacing: -2.8px;
}
.feel-footer-video__registered {
font-size: 0.8rem;
position: relative;
top: -6px;
}
.feel-footer-video__monogramSvg {
display: block;
width: 77px;
height: 60px;
}
@media (max-width: 900px) {
.feel-footer-video {
height: 260px;
}
.feel-footer-video__inner {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 18px;
}
.feel-footer__paymentIcon {
display: block;
max-width: 28px !important;
}
}
@media (max-width: 900px) {
.feel-footer__inner {
padding: 20px 0 19px 0;
}
.feel-footer__top {
gap: 59px;
margin-bottom: 33px;
}
.feel-footer__menus {
gap: 81px;
width: auto;
}
.feel-footer-video__name {
font-size: 45px;
}
.feel-footer-video__inner-wrap {
margin-top: 20px;
}
.feel-footer-video__monogramSvg {
width: 55px;
height: 45px;
}
.feel-footer__linksRow {
padding-top: 2px;
row-gap: 8px;
}
.feel-footer__metaRow {
flex-direction: column;
}
.feel-footer__payments {
padding-top: 0;
}
}
/* Responsiveness */
@media (max-width: 1024px) {
.feel-hero__inner {
padding-top: 90px;
padding-bottom: 70px;
}
.feel-hero__bottom {
flex-direction: column;
align-items: center;
gap: 20px;
}
.feel-section__header {
flex-direction: column;
align-items: flex-start;
}
.feel-products__header {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.feel-products__title {
max-width: 100%;
}
.feel-products__header-right {
align-items: flex-start;
text-align: left;
max-width: 100%;
}
.feel-banner--daily .feel-banner__inner {
flex-direction: row;
}
}
@media (max-width: 720px) {
.feel-hero {
min-height: 75vh;
}
.feel-hero__inner {
padding-top: 60px;
padding-bottom: 50px;
}
.feel-hero__product {
display: none;
}
.feel-product-card {
flex: 0 0 242px;
width: 243px;
min-height: 387px;
}
.feel-product-card__media {
min-height: 387px;
min-width: 242px;
display: flex;
align-items: center;
justify-content: center;
}
.feel-banner--daily .feel-banner__inner {
flex-direction: column;
}
.feel-banner--daily .feel-banner__media--breakout {
border-radius: 50px;
min-height: 380px;
min-width: 350px;
}
.feel-banner__media {
height: auto;
aspect-ratio: 680 / 704;
min-height: 380px;
max-height: none;
}
}
.mega-menu-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 18px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 55%);
}
.mega-menu-title {
margin: 0 0 4px;
width: 183px;
font-family: var(--font-abc-arizona-flare);
margin-bottom: 24px;
color: #ffffff;
font-weight: 400;
font-size: 24px;
line-height: 120%;
letter-spacing: -2%;
text-align: center;
vertical-align: middle;
}
.mega-menu-text {
margin: 0 0 10px;
font-size: 13px;
text-align: center;
color: rgba(255, 255, 255, 0.85);
}
.mega-menu-button {
padding: 0 24px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
color: #0b201b;
text-decoration: none;
height: 35px;
display: flex;
align-items: center;
font-size: 13px;
font-family: var(--font-abc-diatype-mono);
font-weight: 500;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease, opacity 0.28s ease;
}
.mega-menu-button:hover,
.mega-menu-button:focus-visible {
background: #1a1a1a;
color: #fff;
}
.header-icon {
display: inline-block;
font-size: 1.25rem;
line-height: 1;
}
.header-cart-pill span {
white-space: nowrap;
}
@media (max-width: 768px) {
.header-cart-pill {
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Shop page: category title overlay on category image */
.fp-shop-category__mediaLink {
position: relative;
display: block;
line-height: 0;
text-decoration: none;
}
.fp-shop-category__mediaLink::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
}
.fp-shop-category__mediaLink .fp-shop-category__image {
display: block;
width: 100%;
min-height: 543px;
object-fit: cover;
}
.fp-shop-category__mediaTitle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: #fff;
font-weight: 600;
font-size: 32px;
font-family: var(--font-abc-arizona-flare);
line-height: 1.1;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
pointer-events: none;
text-align: center;
white-space: nowrap;
}
.fp-shop-hero {
position: relative;
margin: 46px 0;
overflow: hidden;
max-height: 477px;
}
.fp-shop-hero {
position: relative;
height: 477px;
overflow: hidden;
}
.fp-shop-hero__video {
width: 100%;
height: 100% !important;
object-fit: cover; /* THIS fixes stretching */
display: block;
}
.fp-shop-hero__video {
width: 100%;
height: 100% !important;
object-fit: cover; /* VERY IMPORTANT */
}
.fp-shop-hero__image {
display: block;
width: 100%;
height: auto;
border-radius: 50px;
}
@media (max-width: 768px) {
.fp-shop-hero {
margin: 10px 0;
min-height: 700px;
}
.fp-shop-hero__image {
min-height: 700px !important;
max-height: 700px !important;
object-fit: cover;
}
}
.fp-shop-hero__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 13px 32px 24px;
border-radius: 50px;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(circle at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.10) 45%, rgba(0, 0, 0, 0) 70%);
}
.fp-shop-hero__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 6px 10px;
/* overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none; */
width: 100%;
}
@media (max-width: 768px) {
.fp-shop-hero__nav {
flex-wrap: wrap;
justify-content: center;
}
}
.fp-shop-hero__pill {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
word-break: keep-all;
overflow-wrap: normal;
padding: 6px 14px;
border-radius: 8px;
font-family: var(--font-abc-diatype-mono);
color: #fff;
background: #0000001A;
backdrop-filter: blur(20px);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
pointer-events: auto;
font-weight: 400;
font-size: 13px;
line-height: 130%;
letter-spacing: -2%;
}
.fp-shop-hero__pill.is-active {
background: #ffffff;
color: #1a1a1a;
}
.fp-shop-hero__pill:hover,
.fp-shop-hero__pill:focus-visible {
background: #FFFFFF0D;
color: #ffffff;
}
.fp-shop-hero__title {
margin: 0;
font-family: var(--font-abc-arizona-flare);
font-weight: 500;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.04em;
color: #ffffff;
text-align: center;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.fp-shop-hero__chat {
align-self: flex-end;
display: flex;
align-items: center;
width: 100%;
height: 76px;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
pointer-events: auto;
transition: transform 0.2s ease, box-shadow 0.2s ease;
color: #777269;
max-width: 247px;
border: 0.5px solid #FFFFFF66;
backdrop-filter: blur(43.800987243652344px);
background: #FEFEFE;
margin-bottom: 15px;
border: 0.5px solid #777269;
}
.fp-shop-hero__chat:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(40, 30, 60, 0.22);
background-color: #CBD7CB;
}
.fp-shop-hero__chat-doctor {
flex-shrink: 0;
width: 64px;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
.fp-shop-hero__chat-doctor img {
height: auto;
width: auto;
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.fp-shop-hero__chat-text {
flex: 1;
display: flex;
align-items: center;
padding-left: 8px;
}
.fp-shop-hero__chat-label {
color: #777269;
font-family: var(--font-abc-arizona-flare);
font-weight: 400;
font-size: 18px;
line-height: 120%;
letter-spacing: -3%;
vertical-align: revert;
}
.fp-shop-hero__chat-arrow {
flex-shrink: 0;
width: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.fp-shop-hero__chat-arrow svg {
width: 18px;
height: 18px;
stroke: #777269;
transition: transform 0.18s ease, stroke 0.18s ease;
}
@media (max-width: 768px) {
.fp-shop-hero__chat {
max-width: 100%;
}
}
/* ===== Shop hero + categories start ===== */
/* Shop page: static benefits row */
.fp-shop-benefits {
padding: 90px 0;
}
.fp-shop-benefits__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.fp-shop-benefits__item {
display: inline-flex;
align-items: center;
gap: 12px;
opacity: 0.85;
font-family: var(--font-abc-arizona-sans);
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: -2%;
padding: 12px 32px;
}
@media (max-width: 768px) {
.fp-shop-benefits {
padding: 45px 0;
}
.fp-shop-benefits__list {
justify-content: flex-start;
}
.fp-shop-benefits__list::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.fp-shop-benefits__item {
flex: 0 0 auto;
white-space: nowrap;
pad: 12px 16px;
}
.feel-footer__payments {
max-width: auto !important;
}
.feel-footer__paymentIcon{
max-width: 40px !important;
}
}
.fp-shop-benefits__icon {
width: 23px;
height: 23px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.7;
background: transparent;
border-radius: 5px;
border: 1px solid #C5BDAE80;
}
.fp-shop-benefits__icon svg {
width: 10px;
height: 7px;
}
/* Category picker (I want to feel...) */
.fp-catpicker__form {
display: grid;
gap: 14px;
}
.fp-shop-pickerChatRow {
display: grid;
grid-template-columns: 1fr minmax(260px, 420px);
gap: 24px;
align-items: start;
margin-top: 24px;
}
@media (max-width: 900px) {
.fp-shop-pickerChatRow {
grid-template-columns: 1fr;
}
}
.fp-catpicker__title {
margin: 0;
text-align: center;
}
.fp-catpicker__options {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.fp-catpicker__checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.fp-catpicker__pill {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.18);
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 12px;
line-height: 1;
}
.fp-catpicker__checkbox:checked + .fp-catpicker__pill {
background: rgba(0, 0, 0, 0.75);
border-color: rgba(0, 0, 0, 0.75);
color: #fff;
}
.fp-catpicker__submit {
justify-self: center;
padding: 10px 18px;
border-radius: 999px;
border: 0;
background: #111;
color: #fff;
cursor: pointer;
}
/* Chat card (Talk with an expert) */
.fp-chatCard {
display: flex;
justify-content: center;
}
.fp-chatCard__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.fp-chatCard__image--placeholder {
background: rgba(255, 255, 255, 0.6);
}
/* Shop page: category section layout (match Figma) */
.fp-shop-categories {
display: grid;
gap: 70px;
}
.fp-shop-category__header {
margin-bottom: 16px;
}
.fp-shop-category__text {
margin-bottom: 42px;
}
.fp-shop-category__kicker {
font-family: var(--font-abc-arizona-flare);
font-weight: 400;
font-size: 24px;
line-height: 120%;
letter-spacing: -2%;
color: #777269;
margin-bottom: 8px;
}
.fp-shop-category__description p {
color: #777269;
font-family: var(--font-abc-arizona-flare);
font-weight: 300;
font-size: 24px;
line-height: 100%;
letter-spacing: -2%;}
.fp-shop-category__grid {
display: grid;
grid-template-columns: minmax(240px, 348px) 1fr;
align-items: start;
padding-left: 72px;
}
.fp-shop-category__mediaLink {
border-radius: 30px;
overflow: hidden;
}
.fp-shop-category__products .products {
display: flex;
flex-wrap: nowrap;
margin: 0 auto;
width: max-content;
}
.fp-shop-category__products .products > li {
flex: 0 0 343px;
width: auto;
}
.fp-shop-category__products .products.columns-1,
.fp-shop-category__products .products.columns-2,
.fp-shop-category__products .products.columns-3,
.fp-shop-category__products .products.columns-4,
.fp-shop-category__products .products.columns-5,
.fp-shop-category__products .products.columns-6 {
float: none;
}
.fp-shop-category__products .products > li {
width: auto;
margin: 0;
}
@media (max-width: 768px) {
.fp-shop-category__products .products > li {
flex: 0 0 248px;
width: auto;
}
}
@media(min-width:2000px){
.fp-shop-category__grid{
max-width:1920px;
margin: 0 auto;
padding-left: 0;
}
}
@media (max-width: 900px) {
.fp-shop-category__grid {
grid-template-columns: 1fr;
padding: 0 16px !important;
gap: 20px;
}
.fp-shop-category__media{
margin-right: 0px;
}
.fp-shop-category__mediaLink .fp-shop-category__image {
display: block;
width: 100%;
max-height: 400px;
width: 100% !important;
max-width: unset !important;
min-height: auto !important;
}
.fp-shop-category__text {
margin-bottom: 20px;
}
}
.fp-shop-category__products {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
width: 100%;
}
.fp-shop-category__products {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.fp-shop-category__products::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.fp-shop-category__products .products::-webkit-scrollbar {
display: none;
}
/* ===== Shop hero + categories end ===== */
/* Product cards: Bestseller badge for Featured products */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
position: relative;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
}
/* Override parent theme columns-4 fixed widths */
.woocommerce ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-4 li.product {
width: auto !important;
}
/* Category page: product grid layout */
.fp-product-category-page ul.products::before{
display: none !important;
}
.fp-product-category-page ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.fp-product-category-page ul.products li.product {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.fp-product-category-page .feel-product-card {
position: relative;
border-radius: 30px;
overflow: hidden;
flex: 0 0 315px;
width: 315px;
min-height: 543px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
color: #1a1a1a;
background: #c0c0c0aa;
}
.fp-product-category-page section.feel-faq {
padding-top: 110px;
padding-bottom: 72px;
}
@media (max-width: 1024px) {
.fp-product-category-page ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.feel-product-card__media {
min-height: auto;
min-width: auto;
}
.fp-product-category-page .feel-product-card {
flex: 1 1 auto;
width: 100%;
min-height: auto;
}
}
@media (max-width: 768px) {
.fp-product-category-page ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.feel-product-card__title {
font-size: 18px;
}
}
@media (max-width: 600px) {
.fp-product-category-page ul.products {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
@media (max-width: 500px) {
.fp-product-category-page .feel-product-card {
width: 100%;
max-width: 500px;
min-height: 300px;
margin: 0 auto;
min-height: auto;
}
}
.fp-badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.fp-badge {
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
}
.fp-product__small-desc {
margin-top: 6px;
font-size: 13px;
line-height: 1.25;
opacity: 0.75;
}
.fp-product__small-textWrap {
margin-top: 6px;
}
.fp-product__small-text {
display: inline-block;
padding: 5px 10px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 10px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
}
/* Category archive: top filter bar */
.fp-archive-filterbar {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
}
.fp-archive-filterbar__label {
font-size: 13px;
font-family: var(--font-abc-diatype-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.75;
margin-top: 5px;
}
.fp-archive-filterbar__form {
margin: 0;
}
.fp-archive-filterbar__select {
display: inline-flex;
align-items: center;
padding: 4px 32px 4px 12px !important;
min-height: 29px;
border-radius: 999px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' fill='none'%3E%3Cpath d='M8.14052 0.640521L4.39052 4.39052C4.35569 4.42539 4.31434 4.45305 4.26881 4.47192C4.22329 4.49079 4.17449 4.5005 4.12521 4.5005C4.07593 4.5005 4.02713 4.49079 3.98161 4.47192C3.93608 4.45305 3.89472 4.42539 3.8599 4.39052L0.109896 0.640521C0.0395308 0.570156 0 0.47472 0 0.375208C0 0.275697 0.0395308 0.180261 0.109896 0.109896C0.180261 0.0395306 0.275697 0 0.375208 0C0.47472 0 0.570156 0.0395306 0.640521 0.109896L4.12521 3.59505L7.6099 0.109896C7.64474 0.0750545 7.6861 0.0474169 7.73162 0.0285609C7.77714 0.00970488 7.82594 0 7.87521 0C7.92448 0 7.97327 0.00970488 8.0188 0.0285609C8.06432 0.0474169 8.10568 0.0750545 8.14052 0.109896C8.17536 0.144737 8.203 0.1861 8.22186 0.231622C8.24071 0.277145 8.25042 0.325935 8.25042 0.375208C8.25042 0.424482 8.24071 0.473272 8.22186 0.518795C8.203 0.564317 8.17536 0.60568 8.14052 0.640521Z' fill='black'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
font-family: var(--font-abc-diatype-mono) !important;
font-size: 13px !important;
letter-spacing: -0.26px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
/* WooCommerce ordering: match custom dropdown feel */
.woocommerce-ordering {
margin: 0;
}
.woocommerce-ordering .orderby {
display: inline-flex;
align-items: center;
padding: 4px 0px 4px 12px !important;
padding-right: 34px !important;
min-height: 29px;
border-radius: 999px;
border: 1px solid #e5e5e5 !important;
background-color: #ffffff;
background-image: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M3.64052 6.10998C3.67539 6.14481 3.70305 6.18617 3.72192 6.23169C3.74079 6.27722 3.7505 6.32601 3.7505 6.37529C3.7505 6.42458 3.74079 6.47337 3.72192 6.5189C3.70305 6.56442 3.67539 6.60578 3.64052 6.64061L2.14052 8.14061C2.10569 8.17547 2.06434 8.20313 2.01881 8.222C1.97329 8.24088 1.92449 8.25059 1.87521 8.25059C1.82593 8.25059 1.77713 8.24088 1.73161 8.222C1.68608 8.20313 1.64472 8.17547 1.6099 8.14061L0.109896 6.64061C0.0750547 6.60577 0.047417 6.5644 0.0285611 6.51888C0.00970506 6.47336 0 6.42457 0 6.37529C0 6.32602 0.00970506 6.27723 0.0285611 6.23171C0.047417 6.18619 0.0750547 6.14482 0.109896 6.10998C0.180261 6.03962 0.275697 6.00009 0.375208 6.00009C0.424482 6.00009 0.473272 6.00979 0.518795 6.02865C0.564317 6.0475 0.60568 6.07514 0.640521 6.10998L1.50021 6.97014V0.375295C1.50021 0.275839 1.53972 0.180456 1.61004 0.11013C1.68037 0.0398039 1.77575 0.000295043 1.87521 0.000295043C1.97466 0.000295043 2.07005 0.0398039 2.14037 0.11013C2.2107 0.180456 2.25021 0.275839 2.25021 0.375295V6.97014L3.1099 6.10998C3.14472 6.07512 3.18608 6.04746 3.23161 6.02858C3.27713 6.00971 3.32593 6 3.37521 6C3.42449 6 3.47329 6.00971 3.51881 6.02858C3.56434 6.04746 3.60569 6.07512 3.64052 6.10998ZM8.14052 1.60998L6.64052 0.109983C6.60569 0.0751164 6.56433 0.0474568 6.51881 0.0285852C6.47329 0.00971359 6.42449 0 6.37521 0C6.32593 0 6.27713 0.00971359 6.23161 0.0285852C6.18608 0.0474568 6.14472 0.0751164 6.1099 0.109983L4.6099 1.60998C4.53953 1.68035 4.5 1.77578 4.5 1.8753C4.5 1.97481 4.53953 2.07024 4.6099 2.14061C4.68026 2.21097 4.7757 2.2505 4.87521 2.2505C4.97472 2.2505 5.07016 2.21097 5.14052 2.14061L6.00021 1.28045V7.87529C6.00021 7.97475 6.03972 8.07013 6.11004 8.14046C6.18037 8.21079 6.27575 8.25029 6.37521 8.25029C6.47467 8.25029 6.57005 8.21079 6.64037 8.14046C6.7107 8.07013 6.75021 7.97475 6.75021 7.87529V1.28045L7.6099 2.14061C7.68026 2.21097 7.7757 2.2505 7.87521 2.2505C7.97472 2.2505 8.07016 2.21097 8.14052 2.14061C8.21089 2.07024 8.25042 1.97481 8.25042 1.8753C8.25042 1.77578 8.21089 1.68035 8.14052 1.60998Z' fill='black'/%3E%3C/svg%3E");
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 12px 12px !important;
font-family: var(--font-abc-diatype-mono) !important;
font-size: 13px !important;
letter-spacing: -0.26px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
max-width: 160px;
}
/* Wrapper for filter + ordering on category archives */
.fp-archive-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 14px 0 22px;
flex-wrap: wrap;
}
.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering{
margin: 0 !important;
}
@media (max-width: 600px) {
.fp-archive-controls {
align-items: center;
gap: 0;
}
}
.fp-cat-bg {
width: 100%;
margin: 45px 0 65px;
border-radius: 24px;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
aspect-ratio: 16 / 6;
display: grid;
place-items: center;
max-height: 477px;
}
.fp-cat-bg__overlay {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 22px;
text-align: center;
background: radial-gradient(
circle at center,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.10) 45%,
rgba(0, 0, 0, 0) 70%
);
overflow: hidden;
position: relative;
z-index: 1;
}
.fp-cat-bg__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.fp-cat-bg__title {
margin: auto 0 16px;
color: #fff;
font-family: var(--font-abc-arizona-flare);
font-size: 24px;
line-height: 1.05;
letter-spacing: -0.01em;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
display: flex;
justify-self: center;
align-items: center;
height: 100%;
}
.fp-cat-bg__overlay .fp-shop-hero__nav {
margin-bottom: auto;
}
@media (max-width: 900px) {
.fp-shop-category__media{
margin: 0 !important;
}
.scrolled-menu .scrolled-menu-inner .scrolled-menu-grid .scrolled-menu-card__label {
font-size: 15px;
}
.fp-cat-bg {
aspect-ratio: 16 / 8;
}
.fp-cat-bg{
min-height: 700px;
}
}
/* PDP: rating row under title */
span.onsale{
display: none;
}
.single-product .fp-pdp-ratingRow {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
justify-content: center;
margin-bottom: 16px;
}
.single-product .fp-pdp-ratingRow__avg {
font-weight: 600;
}
.single-product .fp-pdp-ratingRow__stars .star-rating {
margin: 0;
float: none;
display: inline-block;
vertical-align: middle;
}
.single-product .fp-pdp-ratingRow__count {
display: inline-block;
vertical-align: middle;
color: #1f1f1f;
}
.single-product .fp-pdp-ratingRow__count:hover {
opacity: 0.95;
}
/* PDP page design */
.summary.entry-summary{
text-align: center;
}
/* PDP: gallery – desktop = hero + grid; mobile = slider with dots */
.product-name-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
.single-product .pdp-wrap {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
align-items: flex-start;
gap: 40px;
margin-bottom: 100px;
padding-top: 42px;
}
@media (min-width: 769px) {
.single-product .pdp-wrap .summary.entry-summary {
position: sticky;
top: 20px;
align-self: start;
/* Avoid scroll jumps when accordion height animates inside sticky summary (scroll anchoring). */
overflow-anchor: none;
}
}
.woocommerce-product-gallery{
max-width: 820px;
}
@media (max-width: 768px) {
.single-product .pdp-wrap {
display: block !important;
}
}
/* Gallery container: white rounded card, soft gradient */
.single-product .woocommerce-product-gallery {
position: relative;
background: #fff;
border-radius: 24px;
overflow: hidden;
}
.single-product .woocommerce-product-gallery::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(249, 239, 229, 0.9) 0%, rgba(246, 243, 238, 0.5) 40%, transparent 70%);
border-radius: 24px;
}
.single-product .woocommerce-product-gallery__wrapper {
position: relative;
}
.single-product .woocommerce-product-gallery__image {
position: relative;
overflow: hidden;
border-radius: 24px;
}
.single-product .woocommerce-product-gallery__image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 24px;
}
@media(max-width: 1100px){
.single-product .pdp-wrap {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: flex-start;
gap: 40px;
margin-bottom: 40px;
}
}
.woocommerce-product-gallery__trigger{
display: none !important;
}
/* BESTSELLER badge (hero + mobile first slide; needs positioning outside desktop-only MQ) */
.single-product .fp-pdp-gallery__badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
background: #f3f0eb;
color: #1a1a1a;
font-family: var(--font-abc-diatype-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 6px 12px;
border-radius: 6px;
opacity: 0.6;
}
/* Desktop: ALL images visible in grid – hero on top, then 2-column grid (no main + thumbnails) */
@media (min-width: 769px) {
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2){
width: auto !important;
}
.single-product .woocommerce-product-gallery {
border-radius: 30px;
}
.single-product .woocommerce-product-gallery::before {
border-radius: 30px;
}
/* Desktop: Figma layout – hero full width, then 2-column grid of all other images */
.single-product .pdp-gallery-desktop {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.single-product .pdp-gallery__hero {
position: relative;
aspect-ratio: 4 / 4;
border-radius: 26px;
overflow: hidden;
margin-bottom: 20px;
}
.woocommerce-page div.product div.summary{
width: auto !important;
padding: 40px;
}
.single-product .pdp-gallery__hero img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 26px;
}
.single-product .fp-pdp-main-video {
width: 100%;
height: 100%;
display: block;
width: 100%;
object-fit: cover;
border-radius: 26px;
}
/* 2-column grid below hero (Figma: second row, third row, etc.) */
.single-product .pdp-gallery__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.single-product .pdp-gallery__grid-item {
position: relative;
border-radius: 26px;
overflow: hidden;
aspect-ratio: 1;
}
.single-product .pdp-gallery__grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 26px;
}
}
/* Mobile: slider – one image visible, dots at bottom */
@media (max-width: 768px) {
.single-product .woocommerce-product-gallery {
border-radius: 24px;
padding: 0;
margin-bottom: 24px !important;
}
/* Desktop grid wrapper hidden; show mobile slider */
.single-product .pdp-gallery-desktop {
display: none;
}
.single-product .pdp-gallery-mobile {
display: flex;
flex-direction: column;
width: 100%;
}
.single-product .pdp-gallery-mobile .pdp-gallery-mobile__slides {
margin: 0;
padding: 0;
list-style: none;
}
.single-product .pdp-gallery-mobile .pdp-gallery-mobile__slides li {
margin: 0;
padding: 0;
}
/* Same height for every slide: fixed aspect-ratio box */
.single-product .pdp-gallery-mobile .pdp-gallery-mobile__slides li,
.single-product .pdp-gallery-mobile .slick-slide {
height: auto;
aspect-ratio: 3 / 4;
}
.single-product .pdp-gallery-mobile .slick-slide > div {
height: 100%;
}
.single-product .pdp-gallery-mobile .pdp-gallery-mobile__slides li img,
.single-product .pdp-gallery-mobile .slick-slide img,
.single-product .pdp-gallery-mobile .pdp-gallery-mobile__slides li video,
.single-product .pdp-gallery-mobile .slick-slide video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Slick: one full slide visible, no peek */
.single-product .pdp-gallery-mobile .slick-list {
overflow: hidden;
margin: 0;
position: relative;
}
.single-product .pdp-gallery-mobile .slick-slide {
padding: 0;
}
.single-product .pdp-gallery-mobile .slick-slide > div {
width: 100%;
}
/* Slick dots below image (override Slick’s default absolute positioning) */
.single-product .pdp-gallery-mobile .slick-dots {
position: absolute !important;
display: flex !important;
justify-content: center;
gap: 8px;
margin: 16px 0 0;
padding: 0;
list-style: none;
bottom: 10px !important;
left: 50%;
right: 50%;
}
.single-product .pdp-gallery-mobile .slick-dots li {
margin: 0;
}
.single-product .pdp-gallery-mobile .slick-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(26, 26, 26, 0.25);
font-size: 0;
line-height: 0;
padding: 0;
border: none;
cursor: pointer;
}
.single-product .pdp-gallery-mobile .slick-dots li.slick-active button {
background: rgba(26, 26, 26, 0.6);
}
}
/* .fp-pdp-shortText{
border: 1px solid #1A1A1A;
padding: 0 5px;
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
font-size: 16px;
line-height: 130%;
letter-spacing: -2%;
display: inline-block;
border-radius: 2.82px;
color: #1A1A1A;
max-height: 22px;
} */
h1.product_title.entry-title{
font-family: var(--font-abc-arizona-flare);
font-weight: 400;
font-size: 24px;
line-height: 120%;
letter-spacing: -2%;
display: inline-block;
color: #1A1A1A;
}
a.fp-pdp-ratingRow__link.woocommerce-review-link,
button.fp-pdp-ratingRow__link.woocommerce-review-link {
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
font-size: 12px;
line-height: 91%;
letter-spacing: -2%;
vertical-align: middle;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 0%;
text-decoration-skip-ink: auto;
color: #1a1a1a;
justify-content: center;
}
button.fp-pdp-ratingRow__link.woocommerce-review-link {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
}
.single-product .fp-pdp-ratingRow__count--readonly {
font-family: var(--font-abc-diatype-mono);
font-weight: 400;
font-size: 12px;
line-height: 91%;
letter-spacing: -2%;
color: #1a1a1a;
opacity: 0.75;
}
/* PDP: review form dialog */
.fp-pdp-review-dialog {
border: none;
padding: 0;
max-width: min(92vw, 520px);
width: 100%;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.fp-pdp-review-dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.fp-pdp-review-dialog__inner {
background: #fff;
border-radius: 20px;
padding: 24px 24px 28px;
max-height: 85vh;
overflow: auto;
}
.fp-pdp-review-dialog__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.fp-pdp-review-dialog__title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
.fp-pdp-review-dialog__close {
flex-shrink: 0;
width: 36px;
height: 36px;
border: none;
background: transparent;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: #1a1a1a;
border-radius: 8px;
}
.fp-pdp-review-dialog__close:hover {
background: rgba(0, 0, 0, 0.06);
}
.fp-pdp-review-dialog__body {
min-height: 80px;
}
.fp-pdp-review-dialog__body .comment-respond,
.fp-pdp-review-dialog__body #review_form_wrapper {
margin: 0;
}
/* PDP: reviews list + form — hidden until user clicks the rating-row review link (or opens #reviews / #comment-*). */
body.single-product #reviews.woocommerce-Reviews.fp-pdp-reviewsPanel--collapsed {
display: none;
}
/* PDP review form: inline validation under fields */
#reviews.woocommerce-Reviews .fp-pdp-review-field-error {
display: none;
margin: 6px 0 0;
padding: 0;
font-size: 13px;
line-height: 1.35;
font-weight: 500;
color: #c62828;
min-height: 0;
}
#reviews.woocommerce-Reviews .fp-pdp-review-field-error.fp-pdp-review-field-error--visible {
display: block;
}
#reviews.woocommerce-Reviews .comment-form input[aria-invalid='true'],
#reviews.woocommerce-Reviews .comment-form textarea[aria-invalid='true'],
#reviews.woocommerce-Reviews .comment-form select[aria-invalid='true'] {
border-color: #c62828;
}
/*
* PDP reviews: use native rating