.announce-bar{
background: var(--v-ink);
color: var(--v-cream);
}
.announce-bar p{
margin:0; padding: 10px 0;
font-size: var(--fs-xs);
letter-spacing: 0.04em;
text-align:center;
} .site-header{
position: sticky; top:0; z-index: 500;
background: rgba(246,242,234,0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--v-line);
}
.site-header-inner{
display:grid;
grid-template-columns: 1fr auto 1fr;
align-items:center;
gap: 24px;
padding: 18px var(--gutter);
max-width: var(--container);
}
.site-branding{ text-align:center; }
.site-branding .custom-logo{ max-height: 44px; width:auto; margin:0 auto; }
.site-title-text{ font-family: var(--f-display); font-size: var(--fs-lg); letter-spacing: 0.01em; }
.primary-nav-list{ display:flex; gap: 34px; justify-content:flex-start; }
.primary-nav-list > li > a{
font-size: var(--fs-sm); font-weight:500; letter-spacing:0.02em;
padding: 6px 0; position:relative;
}
.primary-nav-list > li > a::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
background: var(--v-gold); transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease);
}
.primary-nav-list > li > a:hover::after,
.primary-nav-list > li.current-menu-item > a::after{ transform: scaleX(1); }
.header-icons{ display:flex; align-items:center; justify-content:flex-end; gap: 18px; }
.icon-btn{
position:relative; display:inline-flex; align-items:center; justify-content:center;
width: 22px; height:22px; background:none; border:none; padding:0; color: var(--v-ink);
}
.icon-btn svg{ width:100%; height:100%; }
.icon-btn:hover{ color: var(--v-sage-deep); }
.cart-count{
position:absolute; top:-9px; right:-11px;
background: var(--v-gold); color: var(--v-white);
font-size: 10px; line-height:1; font-weight:700;
width:16px; height:16px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.mobile-nav-toggle{
display:none; flex-direction:column; justify-content:center; gap:5px;
width:26px; height:20px; background:none; border:none; padding:0;
}
.mobile-nav-toggle span{ display:block; height:1.5px; width:100%; background: var(--v-ink); transition: all .3s var(--ease); }
.mobile-nav-toggle.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.mobile-nav-toggle.is-open span:nth-child(2){ opacity:0; }
.mobile-nav-toggle.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav{
display:none;
max-height:0; overflow:hidden;
transition: max-height .35s var(--ease);
background: var(--v-cream); border-bottom: 1px solid var(--v-line);
}
.mobile-nav.is-open{ max-height: 480px; }
.mobile-nav-list{ padding: 10px var(--gutter) 20px; }
.mobile-nav-list li{ border-bottom:1px solid var(--v-line); }
.mobile-nav-list a{ display:block; padding: 14px 0; font-size: var(--fs-md); }
.mobile-nav-list .sub-menu{ padding-left: 16px; border-top:1px solid var(--v-line); }
.mobile-nav-list .sub-menu a{ font-size: var(--fs-sm); padding: 12px 0; color: var(--v-ink-soft); }
.mobile-nav-list .mega-menu-column-title{ font-size: var(--fs-sm); font-weight:700; padding-top:14px; display:block; } .primary-nav-list{ position:relative; }
.primary-nav-list > li{ position:relative; }
.primary-nav-list > li > a{ display:flex; align-items:center; }
.dropdown-caret{
display:inline-block; width:6px; height:6px; margin-left:7px; margin-top:-3px;
border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
transform: rotate(45deg); transition: transform .25s var(--ease);
}
.has-dropdown:hover > a .dropdown-caret{ transform: rotate(225deg); margin-top:3px; }
.has-dropdown > .sub-menu{
position:absolute; top:100%; left:0; min-width:220px;
background: var(--v-white); border-radius: var(--radius-sm);
box-shadow: 0 20px 34px rgba(31,46,34,0.14);
padding: 10px 0; margin-top: 14px;
opacity:0; visibility:hidden; transform: translateY(6px);
transition: all .25s var(--ease);
z-index: 450;
}
.has-dropdown:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.has-dropdown .sub-menu li a{ display:block; padding: 10px 22px; font-size: var(--fs-sm); white-space:nowrap; }
.has-dropdown .sub-menu li a:hover{ color: var(--v-sage-deep); background: var(--v-cream); }
.has-dropdown .sub-menu .sub-menu{ top:0; left:100%; margin-top:0; } .has-mega-dropdown > a .dropdown-caret{ transition: transform .25s var(--ease); }
.has-mega-dropdown:hover > a .dropdown-caret{ transform: rotate(225deg); margin-top:3px; }
.mega-menu-panel{
display:none;
position:absolute; left:0; right:0; top:100%;
background: var(--v-white);
border-top: 1px solid var(--v-line);
box-shadow: 0 28px 50px rgba(31,46,34,0.14);
z-index: 450;
}
.has-mega-dropdown:hover > .mega-menu-panel{ display:block; }
.mega-menu-inner{
max-width: var(--container); margin: 0 auto;
padding: 44px var(--gutter);
display:flex; gap: 48px; align-items:flex-start;
}
.mega-menu-columns{
flex: 1 1 auto;
display:grid; grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.mega-menu-column-title{
display:block; font-size: var(--fs-xs); font-weight:700;
text-transform:uppercase; letter-spacing:0.06em;
color: var(--v-ink-soft); margin-bottom: 16px;
}
.mega-menu-column-links{ display:flex; flex-direction:column; gap:12px; }
.mega-menu-column-links a{ font-size: var(--fs-sm); }
.mega-menu-column-links a:hover{ color: var(--v-sage-deep); }
.mega-menu-promos{ flex: 0 0 auto; display:flex; gap: 20px; }
.mega-menu-promo{
width: 200px; border-radius: var(--radius-md);
padding: 26px 22px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:10px;
transition: transform .3s var(--ease);
}
.mega-menu-promo:hover{ transform: translateY(-4px); }
.mega-menu-promo-1{ background: var(--v-blush); }
.mega-menu-promo-2{ background: var(--v-cream-deep); }
.mega-menu-promo-eyebrow{ font-size: 11px; text-transform:uppercase; letter-spacing:0.08em; color: var(--v-ink-soft); }
.mega-menu-promo-heading{ font-family: var(--f-display); font-size: var(--fs-md); line-height:1.25; }
.mega-menu-promo img, .mega-menu-promo-placeholder{ width: 90px; height:90px; object-fit:contain; margin: 4px 0; }
.mega-menu-promo-placeholder{ display:flex; align-items:center; justify-content:center; color: var(--v-sage-deep); }
.mega-menu-promo-placeholder svg{ width:36px; height:36px; }
.mega-menu-promo-link{ font-size: var(--fs-xs); font-weight:700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px){
.mega-menu-inner{ flex-direction:column; }
.mega-menu-promos{ width:100%; }
.mega-menu-promo{ flex:1; width:auto; }
} .search-panel{
position:fixed; inset:0 0 auto 0; z-index:600;
background: var(--v-cream);
transform: translateY(-100%); transition: transform .35s var(--ease);
padding: 28px 0; border-bottom: 1px solid var(--v-line);
}
.search-panel.is-open{ transform: translateY(0); }
.search-panel .container{ display:flex; align-items:center; gap:20px; }
.site-search-form{ flex:1; display:flex; align-items:center; gap:12px; border-bottom: 1px solid var(--v-ink); padding-bottom: 10px; }
.site-search-form .search-field{ flex:1; border:none; background:none; font-size: var(--fs-lg); font-family: var(--f-display); color: var(--v-ink); }
.site-search-form .search-field:focus{ outline:none; }
.site-search-form .search-submit{ background:none; border:none; width:24px; height:24px; }
.search-panel-close{ background:none; border:none; font-size: 28px; line-height:1; color: var(--v-ink); } .v-drawer-overlay{
position:fixed; inset:0; background: rgba(31,46,34,0.35); z-index:650;
opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
}
.v-drawer-overlay.is-visible{ opacity:1; pointer-events:auto; }
.v-cart-drawer{
position:fixed; top:0; right:0; bottom:0; width: min(420px, 92vw); z-index:700;
background: var(--v-cream); box-shadow: -18px 0 40px rgba(0,0,0,0.12);
transform: translateX(100%); transition: transform .35s var(--ease);
display:flex; flex-direction:column;
}
.v-cart-drawer.is-open{ transform: translateX(0); }
.v-cart-drawer-header{
display:flex; align-items:center; justify-content:space-between;
padding: 22px var(--gutter); border-bottom:1px solid var(--v-line);
}
.v-cart-drawer-header button{ background:none; border:none; font-size:26px; line-height:1; }
.v-mini-cart-contents{ padding: 20px var(--gutter); overflow-y:auto; flex:1; } .hero-full{
position: relative;
min-height: clamp(460px, 62vw, 720px);
display: flex;
align-items: center;
overflow: hidden;
background: var(--v-ink);
}
.hero-full-bg{ position:absolute; inset:0; }
.hero-full-img{
width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-full-placeholder{
width:100%; height:100%;
background: linear-gradient(135deg, var(--v-sage-deep), var(--v-ink) 120%);
display:flex; align-items:center; justify-content:center;
color: rgba(246,242,234,0.35);
}
.hero-full-placeholder svg{ width:90px; height:90px; }
.hero-full-overlay{
position:absolute; inset:0;
background: linear-gradient(90deg, rgba(15,20,14,0.62) 0%, rgba(15,20,14,0.32) 45%, rgba(15,20,14,0.08) 70%);
}
.hero-full-inner{ position:relative; z-index:2; }
.hero-full-copy{ max-width: 620px; color: var(--v-cream); }
.hero-full-copy h1{
color: var(--v-white);
font-size: clamp(2.4rem, 5vw, var(--fs-3xl));
margin-bottom: 0.4em;
}
.hero-full-sub{
color: rgba(246,242,234,0.88);
font-size: var(--fs-md);
max-width: 460px;
margin-bottom: 2em;
}
.eyebrow-on-image{ color: rgba(246,242,234,0.85); }
.eyebrow-on-image::before{ background: var(--v-cream); }
.btn-on-image{
background: var(--v-white); color: var(--v-ink);
padding: 17px 40px;
}
.btn-on-image:hover{ background: var(--v-cream-deep); transform: translateY(-1px); }
@media (max-width: 780px){
.hero-full{ min-height: 420px; }
.hero-full-copy{ max-width: 100%; }
.hero-full-overlay{
background: linear-gradient(180deg, rgba(15,20,14,0.35) 0%, rgba(15,20,14,0.72) 85%);
}
} .alt-bg{ background: var(--v-cream-deep); }
.section-head h2{ font-size: clamp(1.7rem, 3vw, var(--fs-xl)); }
.products-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 40px; }
.products-head .eyebrow{ margin-bottom:6px; }
.products-row .products{ display:grid !important; grid-template-columns: repeat(4,1fr); gap: 28px 24px; } .concern-grid{
display:grid; grid-template-columns: repeat(3,1fr); gap: 28px;
max-width: 780px; margin: 0 auto;
}
.concern-tile{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.concern-circle{
width: 168px; height:168px; border-radius:50%; overflow:hidden;
background: radial-gradient(circle at 30% 30%, var(--v-blush), var(--v-cream-deep) 70%);
border: 1px solid var(--v-line);
display:flex; align-items:center; justify-content:center;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
color: var(--v-sage-deep);
}
.concern-circle svg{ width: 44px; height:44px; }
.concern-circle img{ width:100%; height:100%; object-fit:cover; }
.concern-tile:hover .concern-circle{ transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 34px rgba(31,46,34,0.14); }
.concern-label{ font-family: var(--f-display); font-size: var(--fs-md); } .story-inner{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,5vw,80px); align-items:center; }
.story-media-placeholder{
aspect-ratio: 1/1; border-radius: var(--radius-md);
background: linear-gradient(155deg, var(--v-sage), var(--v-ink) 150%);
display:flex; align-items:center; justify-content:center; color: var(--v-cream);
}
.story-media-placeholder svg{ width:64px; height:64px; }
.story-copy p{ color: var(--v-ink-soft); max-width: 480px; } .testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonial-card{
background: var(--v-white); border-radius: var(--radius-md); padding: 34px 28px;
display:flex; flex-direction:column; gap: 14px;
}
.testimonial-card svg{ width:30px; height:22px; color: var(--v-gold); }
.testimonial-card p{ font-family: var(--f-display); font-size: var(--fs-md); margin:0; }
.stars{ color: var(--v-gold); letter-spacing: 3px; font-size: var(--fs-sm); }
.testimonial-name{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color: var(--v-ink-soft); } .newsletter-banner{
background: var(--v-ink); color: var(--v-cream);
padding: clamp(50px, 7vw, 90px) 0;
}
.newsletter-inner{ text-align:center; max-width: 560px; margin:0 auto; }
.newsletter-banner h2{ color: var(--v-cream); }
.newsletter-banner p{ color: rgba(246,242,234,0.72); }
.newsletter-form{ display:flex; gap:10px; margin-top: 24px; }
.newsletter-form input{
flex:1; padding: 14px 20px; border-radius: var(--radius-lg); border:1px solid rgba(246,242,234,0.3);
background: rgba(246,242,234,0.08); color: var(--v-cream);
}
.newsletter-form input::placeholder{ color: rgba(246,242,234,0.55); }
.newsletter-form .btn-primary{ background: var(--v-gold); color: var(--v-ink); }
.newsletter-form .btn-primary:hover{ background: var(--v-blush); } .blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.blog-card-media{ display:block; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; margin-bottom:18px; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card-media img{ transform: scale(1.05); }
.post-meta{ font-size: var(--fs-xs); color: var(--v-sage-deep); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; display:flex; gap:10px; }
.blog-card-title{ font-size: var(--fs-lg); margin-bottom: 8px; }
.blog-card-title a:hover{ color: var(--v-sage-deep); }
.pagination-wrap{ margin-top:50px; display:flex; justify-content:center; gap:14px; }
.pagination-wrap .page-numbers{ padding:8px 14px; border-radius: var(--radius-sm); border:1px solid var(--v-line); }
.pagination-wrap .page-numbers.current{ background: var(--v-ink); color: var(--v-cream); } .container-narrow{ max-width: 780px; }
.page-header{ text-align:center; margin-bottom: 32px; }
.page-thumb{ border-radius: var(--radius-md); overflow:hidden; margin-bottom: 32px; }
.entry-content > * + *{ margin-top: 1.2em; }
.entry-content h2, .entry-content h3{ margin-top: 1.6em; }
.post-tags{ font-size: var(--fs-xs); color: var(--v-ink-soft); } .comment-list{ margin: 30px 0; }
.comment-list, .comment-list ul{ list-style:none; padding:0; }
.comment-body{ padding: 20px 0; border-bottom:1px solid var(--v-line); }
.comment-form input, .comment-form textarea{
width:100%; padding:12px 16px; border:1px solid var(--v-line); border-radius: var(--radius-sm); background: var(--v-white);
}
.comment-form p{ margin-bottom: 16px; } .site-footer{ background: var(--v-cream-deep); margin-top: 40px; }
.footer-grid{
display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
gap: 40px; padding: 70px 0 50px;
}
.footer-logo-text{ font-family: var(--f-display); font-size: var(--fs-lg); }
.footer-tagline{ color: var(--v-ink-soft); font-size: var(--fs-sm); max-width: 240px; }
.social-links{ display:flex; gap:14px; margin-top:18px; }
.social-links svg{ width:20px; height:20px; }
.widget-title{ font-size: var(--fs-base); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a:hover{ color: var(--v-sage-deep); }
.newsletter-form-inline{ display:flex; border-bottom:1px solid var(--v-ink); padding-bottom:8px; margin-top:14px; }
.newsletter-form-inline input{ flex:1; border:none; background:none; padding:6px 0; }
.newsletter-form-inline button{ width:22px; height:22px; }
.newsletter-note{ font-size: 11px; color: var(--v-ink-soft); margin-top:10px; }
.footer-bottom{ border-top:1px solid var(--v-line); }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding: 22px 0; font-size: var(--fs-xs); color: var(--v-ink-soft); }
.footer-nav-list{ display:flex; gap:20px; } .verdiere-breadcrumbs{ padding: 18px var(--gutter) 0; font-size: var(--fs-xs); color: var(--v-ink-soft); }
.verdiere-breadcrumbs a:hover{ color: var(--v-sage-deep); }
.crumb-sep{ margin: 0 8px; } @media (max-width: 1024px){
.story-inner{ grid-template-columns:1fr; }
.products-row .products{ grid-template-columns: repeat(2,1fr) !important; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
.testimonial-grid{ grid-template-columns: 1fr; }
.blog-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px){
.site-header-inner{ grid-template-columns: auto 1fr auto; }
.primary-nav{ display:none; }
.mobile-nav-toggle{ display:flex; }
.mobile-nav{ display:block; }
.concern-grid{ grid-template-columns: repeat(3,1fr); gap: 14px; }
.concern-circle{ width: 90px; height:90px; }
.concern-circle svg{ width:28px; height:28px; }
.concern-label{ font-size: var(--fs-sm); }
.newsletter-form{ flex-direction:column; }
.footer-grid{ grid-template-columns:1fr; }
.blog-grid{ grid-template-columns:1fr; }
.products-row .products{ grid-template-columns: repeat(2,1fr) !important; gap:16px !important; }
}