/** Shopify CDN: Minification failed
Line 1124:41 Unexpected "{"
Line 1124:50 Expected ":"
Line 1124:57 Unexpected "{"
**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */
/* CSS from section stylesheet tags */
/* START_SECTION:article-template (INDEX:4) */
/* ---------- 16:9 banner (mockup .post-hero) ---------- */
.vw-post-hero {
background-color: var(--vw-color-white, #fff);
}
.vw-post-hero-inner,
.vw-post-article-inner {
margin-left: auto;
margin-right: auto;
padding-left: var(--vw-gutter, 60px);
padding-right: var(--vw-gutter, 60px);
width: 100%;
}
.vw-post-hero-figure {
margin: 0;
}
.vw-post-hero-figure image-element {
display: block;
}
.vw-post-hero-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
background-color: var(--vw-color-light-gray, #f4f4f4);
}
.vw-post-hero-figure image-element img {
object-fit: contain;
background: #ffffff;
}
/* ---------- Article body (mockup .post-article) ---------- */
.vw-post-article {
background-color: var(--vw-color-white, #fff);
}
.vw-post-article .article {
margin: 0;
}
.vw-post-article-title {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-tight, 1.1);
letter-spacing: -0.03em;
color: var(--vw-color-charcoal, #1a2535);
margin: 0 0 var(--vw-sp-32, 32px);
}
/* ---------- Byline (mockup .post-byline) ---------- */
.vw-post-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--vw-sp-12, 12px);
font-family: var(--vw-font-body);
font-weight: var(--vw-fw-semibold, 600);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-muted, #6e7480);
margin: 0 0 var(--vw-sp-32, 32px);
}
.vw-post-byline a {
color: inherit;
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-post-byline a:hover {
color: var(--vw-color-charcoal, #1a2535);
}
.vw-post-byline strong {
color: var(--vw-color-charcoal, #1a2535);
font-weight: var(--vw-fw-bold, 700);
}
.vw-post-byline-dot {
width: 4px;
height: 4px;
background-color: var(--vw-color-coyote, #8b7355);
border-radius: 50%;
}
/* ---------- Body content (mockup .post-body) ---------- */
.vw-post-body > * + * {
margin-top: var(--vw-sp-24, 24px);
}
.vw-post-body h2 {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-snug, 1.25);
color: var(--vw-color-charcoal, #1a2535);
margin-top: 0;
}
.vw-post-body h3,
.vw-post-body h4 {
font-family: var(--vw-font-heading);
font-size: 24px;
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-snug, 1.25);
color: var(--vw-color-charcoal, #1a2535);
margin-top: var(--vw-sp-32, 32px);
}
.vw-post-body,
.vw-post-body p,
.vw-post-body li {
line-height: var(--vw-lh-relaxed, 1.65);
color: #353b45;
}
.vw-post-body a {
color: var(--vw-color-olive, #4a5e3a);
text-decoration: underline;
text-underline-offset: 3px;
}
.vw-post-body a:hover {
color: var(--vw-color-olive-dark, #3a4b2d);
}
.vw-post-body ul,
.vw-post-body ol {
padding-left: var(--vw-sp-24, 24px);
display: flex;
flex-direction: column;
gap: var(--vw-sp-10, 10px);
}
.vw-post-body blockquote {
margin: var(--vw-sp-40, 40px) 0;
padding: var(--vw-sp-8, 8px) 0 var(--vw-sp-8, 8px) var(--vw-sp-32, 32px);
border-left: 3px solid var(--vw-color-olive, #4a5e3a);
font-family: var(--vw-font-heading);
font-size: 24px;
font-weight: var(--vw-fw-semibold, 600);
line-height: var(--vw-lh-snug, 1.25);
color: var(--vw-color-charcoal, #1a2535);
}
.vw-post-body figure {
margin: var(--vw-sp-40, 40px) 0;
}
.vw-post-body img,
.vw-post-body figure img {
width: 100%;
height: auto;
display: block;
background-color: var(--vw-color-light-gray, #f4f4f4);
}
@media (max-width: 768px) {
.vw-post-hero-inner,
.vw-post-article-inner {
padding-left: var(--vw-container-pl, 16px);
padding-right: var(--vw-container-pr, 16px);
}
.vw-post-hero-img {
aspect-ratio: 16 / 16;
}
}
.blog-videos-section {
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 0;
padding-bottom: 40px;
padding-top: 60px;
}
/* END_SECTION:article-template */
/* START_SECTION:blog-posts (INDEX:7) */
.vw-blog-posts {
background-color: var(--vw-color-light-gray, #f4f4f4);
}
.vw-blog-posts .section-head-link .valor-icon {
width: 1em;
height: 1em;
}
/* ---------- Post grid ---------- */
.vw-blog-grid {
display: grid;
grid-template-columns: repeat(var(--vw-blog-cols, 3), minmax(0, 1fr));
gap: var(--vw-sp-40, 40px) var(--vw-sp-32, 32px);
}
.vw-blog-card {
display: flex;
flex-direction: column;
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #e2e2e2);
transition: transform var(--vw-tr-base, 0.28s ease), box-shadow var(--vw-tr-base, 0.28s ease), border-color var(--vw-tr-base, 0.28s ease);
}
.vw-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--vw-shadow-lg, 0 18px 42px rgba(17, 17, 17, 0.14));
border-color: transparent;
}
.vw-blog-card-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--vw-blog-card-aspect, 16 / 10);
background-color: var(--vw-color-light-gray, #f4f4f4);
}
.vw-blog-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--vw-tr-slow, 0.45s ease);
}
.vw-blog-card:hover .vw-blog-card-img {
transform: scale(1.05);
}
.vw-blog-card-tag {
position: absolute;
top: var(--vw-sp-12, 12px);
left: var(--vw-sp-12, 12px);
display: inline-flex;
align-items: center;
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-11, 11px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-white, #fff);
background-color: var(--vw-color-olive, #4a5e3a);
padding: var(--vw-sp-6, 6px) var(--vw-sp-10, 10px);
}
.vw-blog-card-body {
display: flex;
flex-direction: column;
gap: var(--vw-sp-10, 10px);
padding: var(--vw-sp-24, 24px);
flex: 1;
}
.vw-blog-card-title {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-snug, 1.25);
color: var(--vw-color-charcoal, #1a2535);
margin: 0;
}
.vw-blog-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog-card-title a:hover {
color: var(--vw-color-olive, #4a5e3a);
}
.vw-blog-card-author {
font-size: var(--vw-fs-12, 12px);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-short {
font-size: var(--vw-fs-15, 15px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-excerpt {
font-size: var(--vw-fs-15, 15px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-excerpt > *:first-child { margin-top: 0; }
.vw-blog-card-excerpt > *:last-child { margin-bottom: 0; }
.vw-blog-card-meta {
margin-top: auto;
padding-top: var(--vw-sp-8, 8px);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--vw-sp-12, 12px);
font-family: var(--vw-font-body);
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-meta a {
color: inherit;
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog-card-meta a:hover { color: var(--vw-color-olive, #4a5e3a); }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.vw-blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.vw-blog-grid {
grid-template-columns: 1fr;
}
}
/* END_SECTION:blog-posts */
/* START_SECTION:blog-template (INDEX:8) */
.vw-blog .vw-container {
gap: var(--vw-sp-40, 40px);
}
/* ---------- Blog title (H1) ---------- */
.vw-blog-head-title {
display: inline-flex;
align-items: center;
gap: var(--vw-sp-12, 12px);
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-tight, 1.1);
color: var(--vw-color-charcoal, #1a2535);
margin: 0;
}
.vw-blog-rss {
display: inline-flex;
align-items: center;
color: var(--vw-color-muted, #6e7480);
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog-rss:hover {
color: var(--vw-color-olive, #4a5e3a);
}
/* ---------- All posts ---------- */
.vw-blog-posts {
background-color: var(--vw-color-light-gray, #f4f4f4);
}
/* ---------- Category filter chips ---------- */
.vw-blog-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--vw-sp-10, 10px);
}
.vw-blog-filter-chip {
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-charcoal, #1a2535);
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #e2e2e2);
padding: var(--vw-sp-10, 10px) var(--vw-sp-16, 16px);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
line-height: 1.2;
transition: color var(--vw-tr-fast, 0.18s ease), background-color var(--vw-tr-fast, 0.18s ease),
border-color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog-filter-chip:hover {
border-color: var(--vw-color-olive, #4a5e3a);
color: var(--vw-color-olive, #4a5e3a);
}
.vw-blog-filter-chip.is-active {
background-color: var(--vw-color-olive, #4a5e3a);
border-color: var(--vw-color-olive, #4a5e3a);
color: var(--vw-color-white, #fff);
}
/* ---------- Post grid ---------- */
.vw-blog-grid {
display: grid;
grid-template-columns: repeat(var(--vw-blog-cols, 3), minmax(0, 1fr));
gap: var(--vw-sp-40, 40px) var(--vw-sp-32, 32px);
}
.vw-blog-card {
display: flex;
flex-direction: column;
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #e2e2e2);
transition: transform var(--vw-tr-base, 0.28s ease), box-shadow var(--vw-tr-base, 0.28s ease),
border-color var(--vw-tr-base, 0.28s ease);
}
.vw-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--vw-shadow-lg, 0 18px 42px rgba(17, 17, 17, 0.14));
border-color: transparent;
}
.vw-blog-card-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--vw-blog-card-aspect, 16 / 10);
background-color: var(--vw-color-light-gray, #f4f4f4);
}
.vw-blog-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--vw-tr-slow, 0.45s ease);
}
.vw-blog-card:hover .vw-blog-card-img {
transform: scale(1.05);
}
.vw-blog-card-tag {
position: absolute;
top: var(--vw-sp-12, 12px);
left: var(--vw-sp-12, 12px);
display: inline-flex;
align-items: center;
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-11, 11px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-white, #fff);
background-color: var(--vw-color-olive, #4a5e3a);
padding: var(--vw-sp-6, 6px) var(--vw-sp-10, 10px);
line-height: 1.5;
}
.vw-blog-card-body {
display: flex;
flex-direction: column;
gap: var(--vw-sp-10, 10px);
padding: var(--vw-sp-24, 24px);
flex: 1;
}
.vw-blog-card-title {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-snug, 1.25);
color: var(--vw-color-charcoal, #1a2535);
margin: 0;
}
.vw-blog-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog-card-title a:hover {
color: var(--vw-color-olive, #4a5e3a);
}
.vw-blog-card-author {
font-size: var(--vw-fs-12, 12px);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-short {
font-size: var(--vw-fs-15, 15px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-excerpt {
font-size: var(--vw-fs-15, 15px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-excerpt > *:first-child {
margin-top: 0;
}
.vw-blog-card-excerpt > *:last-child {
margin-bottom: 0;
}
.vw-blog-card-meta {
margin-top: auto;
padding-top: var(--vw-sp-8, 8px);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--vw-sp-12, 12px);
font-family: var(--vw-font-body);
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-muted, #6e7480);
}
.vw-blog-card-meta a {
color: inherit;
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog-card-meta a:hover {
color: var(--vw-color-olive, #4a5e3a);
}
/* ---------- Pagination (restyle of the shared snippet, scoped) ---------- */
.vw-blog .pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--vw-sp-8, 8px);
margin: 0;
}
.vw-blog .pagination .page a,
.vw-blog .pagination .page.current,
.vw-blog .pagination .prev a,
.vw-blog .pagination .next a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--vw-sp-12, 12px);
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-14, 14px);
font-weight: var(--vw-fw-semibold, 600);
color: var(--vw-color-charcoal, #1a2535);
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #e2e2e2);
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease), background-color var(--vw-tr-fast, 0.18s ease),
border-color var(--vw-tr-fast, 0.18s ease);
}
.vw-blog .pagination .page a:hover,
.vw-blog .pagination .prev a:hover,
.vw-blog .pagination .next a:hover {
border-color: var(--vw-color-olive, #4a5e3a);
color: var(--vw-color-olive, #4a5e3a);
}
.vw-blog .pagination .page.current {
background-color: var(--vw-color-olive, #4a5e3a);
border-color: var(--vw-color-olive, #4a5e3a);
color: var(--vw-color-white, #fff);
}
.vw-blog .pagination .icon {
width: 12px;
height: 12px;
}
.vw-blog-posts .pagination {
padding: 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.vw-blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.vw-blog-grid {
grid-template-columns: 1fr;
}
}
/* END_SECTION:blog-template */
/* START_SECTION:gallery-head (INDEX:20) */
.gallery-head {
background-color: var(--vw-color-light-gray, #f4f4f4);
border-bottom: 1px solid var(--vw-color-border, #e2e2e2);
}
.gallery-head__desc p.sg-sub {
margin: 0;
}
.gallery-head__inner {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.gallery-head__sub {
color: var(--vw-color-olive, #4a5e3a);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.18em;
}
.gallery-head__title {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-tight, 1.1);
color: var(--vw-color-charcoal, #1a2535);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.gallery-head__desc {
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
max-width: 720px;
margin: 0;
}
.gallery-head__desc p:empty,
.gallery-head__desc p {
margin: 0;
}
.gallery-filters {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--vw-sp-8, 8px);
justify-content: center;
padding-top: var(--vw-sp-16, 16px);
}
body[template='policies'] .gallery-filters {
justify-content: flex-start;
}
.gallery-head[style*='text-align:left'] .gallery-filters,
.gallery-head[data-align='left'] .gallery-filters {
justify-content: flex-start;
}
.gallery-head[style*='text-align:right'] .gallery-filters,
.gallery-head[data-align='right'] .gallery-filters {
justify-content: flex-end;
}
.gallery-filter {
padding: var(--vw-sp-8, 8px) var(--vw-sp-16, 16px);
background-color: var(--vw-color-white, #ffffff);
color: var(--vw-color-charcoal, #1a2535);
border: 1px solid var(--vw-color-border, #e2e2e2);
border-radius: var(--vw-br-xs, 0);
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wide, 0.05em);
cursor: pointer;
transition: background-color var(--vw-tr-fast, 0.18s ease), color var(--vw-tr-fast, 0.18s ease),
border-color var(--vw-tr-fast, 0.18s ease);
}
.gallery-filter:hover,
.gallery-filter.is-active {
background-color: var(--vw-color-charcoal, #1a2535);
color: var(--vw-color-white, #ffffff);
border-color: var(--vw-color-charcoal, #1a2535);
}
/* END_SECTION:gallery-head */
/* START_SECTION:gallery-section (INDEX:21) */
.gallery-section {
background-color: var(--vw-color-white, #FFFFFF);
}
.gallery-item {
position: relative;
overflow: hidden;
background-color: var(--vw-color-light-gray, #F4F4F4);
cursor: pointer;
display: block;
text-decoration: none;
/* Until JS assigns a row span, span 1 row so the layout doesn't jump. */
grid-row-end: span 1;
}
.gallery-item img,
.gallery-item svg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.gallery-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%);
opacity: 0;
transition: opacity 0.18s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item-caption {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 2;
color: var(--vw-color-white, #FFFFFF);
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wide, 0.05em);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.gallery-item:hover .gallery-item-caption {
opacity: 1;
transform: translateY(0);
}
/* Lightbox ------------------------------------------------------ */
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(8, 10, 14, 0.94);
display: flex;
align-items: center;
justify-content: center;
padding: 32px 88px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.28s ease, visibility 0s linear 0s;
}
.gallery-lightbox-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
width: 100%;
max-width: 1100px;
max-height: 100%;
}
.gallery-lightbox-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 220px);
object-fit: contain;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
transform: scale(0.97);
opacity: 0;
transition: transform 0.28s ease, opacity 0.2s ease;
}
.gallery-lightbox.is-open .gallery-lightbox-img {
transform: scale(1);
opacity: 1;
}
.gallery-lightbox-caption {
color: var(--vw-color-white, #FFFFFF);
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px;
font-weight: var(--vw-fw-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.22em;
text-align: center;
max-width: 80vw;
}
.gallery-lightbox-caption:empty { display: none; }
/* Buttons (close / prev / next) */
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
position: absolute;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.08);
color: var(--vw-color-white, #FFFFFF);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
cursor: pointer;
padding: 0;
z-index: 9;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.gallery-lightbox-close .valor-icon,
.gallery-lightbox-prev .valor-icon,
.gallery-lightbox-next .valor-icon {
width: 18px;
height: 18px;
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
background-color: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
}
.gallery-lightbox-close { top: 24px; right: 24px; }
.gallery-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { transform: translateY(-50%) scale(1.04); }
/* Prev/next arrows — caret-down rotated for left/right glyph */
.gallery-lightbox-prev .gl-arrow { transform: rotate(90deg); }
.gallery-lightbox-next .gl-arrow { transform: rotate(-90deg); }
body.lightbox-open { overflow: hidden; }
/* Responsive --------------------------------------------------- */
@media (max-width: 768px) {
.gallery-lightbox { padding: 64px 16px 80px; }
.gallery-lightbox-stage { gap: 18px; }
.gallery-lightbox-img { max-height: calc(100vh - 200px); }
.gallery-lightbox-caption { font-size: 12px; letter-spacing: 0.18em; }
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next { width: 40px; height: 40px; }
.gallery-lightbox-close { top: 14px; right: 14px; }
.gallery-lightbox-prev { left: 10px; }
.gallery-lightbox-next { right: 10px; }
}
/* END_SECTION:gallery-section */
/* START_SECTION:main-product (INDEX:36) */
/* ============================================================
Valor Wear — Product Detail restyle
Targets Impulse's product-template output (.product-single__*,
.product-block, .product__price, etc.) and reshapes it to match
the reference product-detail design. No markup changes — purely
visual overrides scoped under .template-product so other pages
are unaffected.
============================================================ */
/* ---------- Title ---------- */
body.template-product .product-single__title {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: clamp(22px, 2.6vw, 30px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 8px;
}
body.template-product .product-single__vendor {
font-size: var(--vw-fs-12, 12px);
color: var(--vw-color-coyote, #8B7355);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: var(--vw-fw-bold, 700);
margin-bottom: 6px;
}
/* ---------- Price ---------- */
body.template-product .product-block--price { padding: 0; }
body.template-product .product__price {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: clamp(24px, 2.4vw, 28px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
}
body.template-product .product__price--compare {
color: var(--vw-color-muted, #6E7480);
text-decoration: line-through;
font-size: var(--vw-fs-15, 15px);
margin-right: 8px;
}
/* ---------- Description / tabs ---------- */
body.template-product .product-block--tab {
background: var(--vw-color-light-gray, #F4F4F4);
border-left: 3px solid var(--vw-color-olive, #4A5E3A);
padding: 14px 18px;
border-radius: 2px;
margin-bottom: 8px;
}
body.template-product .product-block--tab .collapsible-trigger {
padding: 0;
background: none;
color: var(--vw-color-charcoal, #1A2535);
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
}
body.template-product .product-block--tab .collapsible-content__inner {
padding-top: 10px;
font-size: var(--vw-fs-14, 14px);
line-height: 1.6;
color: var(--vw-color-muted, #6E7480);
}
body.template-product .product-block--tab .collapsible-content__inner strong { color: var(--vw-color-charcoal, #1A2535); }
/* ---------- Description block (non-tab) ---------- */
body.template-product .product-single__description,
body.template-product .product-single__description-full,
body.template-product .product-block .rte {
font-size: var(--vw-fs-14, 14px);
line-height: 1.6;
color: var(--vw-color-muted, #6E7480);
}
body.template-product .product-block .rte strong { color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
/* ---------- Variant pickers (color swatches + selects) ---------- */
body.template-product .selector-wrapper > label,
body.template-product .variant-input-wrap .header { /* Impulse uses either based on style */
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vw-color-charcoal, #1A2535);
margin-bottom: 8px;
display: inline-block;
}
body.template-product .single-option-selector,
body.template-product .product-form__input select {
width: 100%;
padding: 12px 36px 12px 14px;
border: 1px solid var(--vw-color-border, #E2E2E2);
background: var(--vw-color-white, #FFFFFF);
font-size: var(--vw-fs-14, 14px);
color: var(--vw-color-charcoal, #1A2535);
border-radius: 2px;
}
/* Square swatches → 1" Valor look (no full circles, slight pill) */
body.template-product .variant-input label.color-swatch {
border-radius: 50px;
}
body.template-product .variant-input label {
border-radius: 0px;
border: 1px solid var(--vw-color-border, #E2E2E2);
padding: 10px 14px;
font-weight: var(--vw-fw-semibold, 600);
background: var(--vw-color-white, #FFFFFF);
color: var(--vw-color-charcoal, #1A2535);
font-size: 14px;
transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
body.template-product .variant-input input:checked + label,
body.template-product .variant-input.variant-input--color input:checked + label {
border-color: #4A5E3A;
background-color: #4A5E3A;
color: var(--vw-color-white, #FFFFFF);
}
body.template-product .variant-input.variant-input--color label {
width: 36px;
height: 36px;
min-width: 0;
padding: 0;
border-radius: 50%;
}
body.template-product .variant-input.variant-input--color input:checked + label {
box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--vw-color-charcoal, #1A2535);
}
/* ---------- Quantity selector ---------- */
body.template-product .product__quantity {
border: 1px solid var(--vw-color-border, #E2E2E2);
border-radius: 2px;
background: var(--vw-color-white, #FFFFFF);
}
body.template-product .js-qty__num {
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
}
body.template-product .js-qty__adjust {
color: var(--vw-color-charcoal, #1A2535);
background: transparent;
}
body.template-product .js-qty__adjust:hover { background: var(--vw-color-light-gray, #F4F4F4); }
/* ---------- Add-to-cart + buy-now buttons ---------- */
body.template-product .product-form__cart-submit,
body.template-product .btn.product-form__cart-submit {
background: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #FFFFFF);
border: 1px solid var(--vw-color-charcoal, #1A2535);
border-radius: 2px;
padding: 18px 24px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
body.template-product .product-form__cart-submit:hover:not(:disabled) {
background: var(--vw-color-olive, #4A5E3A);
border-color: var(--vw-color-olive, #4A5E3A);
}
body.template-product .shopify-payment-button__button {
background: transparent !important;
border: 1px solid var(--vw-color-charcoal, #1A2535) !important;
color: var(--vw-color-charcoal, #1A2535) !important;
font-size: var(--vw-fs-13, 13px) !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
border-radius: 2px !important;
}
/* ---------- Thumbnails ---------- */
body.template-product .product-single__thumbnail {
border: 2px solid transparent;
transition: border-color 0.18s ease;
}
body.template-product .product-single__thumbnail:hover,
body.template-product .product-single__thumbnail.active-thumb {
border-color: var(--vw-color-charcoal, #1A2535);
}
/* ---------- Sales point ---------- */
body.template-product .product-block--sales-point {
background: rgba(74, 94, 58, 0.06);
border-left: 3px solid var(--vw-color-olive, #4A5E3A);
padding: 10px 14px;
border-radius: 2px;
font-size: var(--vw-fs-13, 13px);
}
/* ---------- Trust strip (if merchant added a `text` block at the bottom) ---------- */
body.template-product .product-block hr {
border: 0;
border-top: 1px solid var(--vw-color-border, #E2E2E2);
margin: 16px 0;
}
/* ---------- Lead time notice ---------- */
body.template-product .product-block--valor-lead-time { padding: 8px 0; }
body.template-product .valor-lead-time {
display: inline-flex; align-items: center; gap: 8px;
margin: 0; padding: 10px 14px;
background: rgba(74, 94, 58, 0.06);
border-left: 3px solid var(--vw-color-olive, #4A5E3A);
font-size: var(--vw-fs-13, 13px);
line-height: 1.5;
color: var(--vw-color-charcoal, #1A2535);
}
body.template-product .valor-lead-time .valor-icon {
width: 18px; height: 18px;
color: var(--vw-color-olive, #4A5E3A);
flex: 0 0 auto;
}
body.template-product .valor-lead-time strong { color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
/* ---------- Trust badges ---------- */
body.template-product .product-block--valor-trust { padding-top: 12px; border-top: 1px solid var(--vw-color-border, #E2E2E2); margin-top: 8px; }
body.template-product .valor-trust-badges {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
body.template-product .valor-trust-badges li {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--vw-fs-11, 11px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vw-color-charcoal, #1A2535);
}
body.template-product .valor-trust-badges .valor-icon {
width: 16px; height: 16px;
color: var(--vw-color-olive, #4A5E3A);
flex: 0 0 auto;
}
/* ---------- Zoom icon on stage ---------- */
body.template-product .product-single__photo-wrapper { position: relative; }
body.template-product .product-single__photo-wrapper .product-single__photo-zoom,
body.template-product .product__photo-zoom-icon {
/* If theme doesn't render one natively, this rule has no effect — purely cosmetic enhancement */
}
/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
body.template-product .product-single__title { font-size: 22px; }
body.template-product .product__price { font-size: 22px; }
}
/* ============================================================
Valor Wear — Custom Product Detail (.vp-*)
Hide the legacy Impulse rendering since main-product.liquid
now outputs custom markup. Then style the new .vp-* output.
============================================================ */
/* Hide any legacy Impulse template if it bleeds through */
body.template-product .product-single__container,
body.template-product #ProductSection-{{ section.id }} { display: none !important; }
/* ---------- Section + container ---------- */
.vp-detail { background: var(--vw-color-white, #FFFFFF); }
.vp-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: flex-start;
}
.vp-detail--media-right .vp-row { direction: rtl; }
.vp-detail--media-right .vp-row > * { direction: ltr; }
/* ---------- Gallery ---------- */
.vp-gallery {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 16px;
position: sticky;
top: 96px;
align-self: start;
}
.vp-thumbs {
display: flex; flex-direction: column; gap: 8px;
max-height: 600px; overflow-y: auto; scrollbar-width: none;
}
.vp-thumbs::-webkit-scrollbar { display: none; }
.vp-thumb {
position: relative; width: 85px; height: 85px;
padding: 0; background: #fff;
border: 2px solid transparent; cursor: pointer; overflow: hidden;
flex: 0 0 auto;
transition: border-color 0.18s ease;
}
.vp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vp-thumb.is-active { border-color: var(--vw-color-charcoal, #1A2535); }
.vp-thumb-play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.3); color: #fff;
}
.vp-thumb-play .valor-icon { width: 22px; height: 22px; }
.vp-stage { position: relative; background: #fff; aspect-ratio: 1 / 1; overflow: hidden; }
.vp-stage-item { display: none; width: 100%; height: 100%; }
.vp-stage-item.is-active { display: block; }
.vp-stage-item img,
.vp-stage-item svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-stage-item video,
.vp-stage-item iframe { width: 100%; height: 100%; display: block; border: 0; }
/* Zoom button */
.vp-zoom {
position: absolute; top: 12px; right: 24px; z-index: 2;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.95); color: var(--vw-color-charcoal, #1A2535);
border: 0; cursor: pointer;
box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
transition: background-color 0.18s ease, transform 0.18s ease;
}
.vp-zoom .valor-icon { width: 18px; height: 18px; }
.vp-zoom:hover { background: #fff; transform: scale(1.05); }
/* ---------- Info column ---------- */
.vp-info { display: flex; flex-direction: column; gap: 14px; }
.vp-title {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: clamp(26px, 3vw, 38px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
}
.vp-form { display: flex; flex-direction: column; gap: 20px; }
/* ---------- Text + description blocks ---------- */
.vp-block-text, .vp-block-text p,
.vp-description, .vp-description p {
font-size: var(--vw-fs-14, 14px);
line-height: 1.6;
color: var(--vw-color-muted, #6E7480);
margin: 0;
}
.vp-block-text strong, .vp-description strong { color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
.vp-separator { border: 0; border-top: 1px solid var(--vw-color-border, #E2E2E2); margin: 4px 0; }
/* ---------- Price ---------- */
.vp-price-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0;}
.vp-price { font-family: var(--vw-font-heading, var(--typeHeaderPrimary)); font-size: clamp(30px, 2.4vw, 36px); font-weight: var(--vw-fw-bold, 700); color: var(--vw-color-charcoal, #1A2535); }
.vp-compare { font-size: var(--vw-fs-15, 15px); color: var(--vw-color-muted, #6E7480); text-decoration: line-through; }
/* ---------- Variant picker ---------- */
.vp-variants { display: flex; flex-direction: column; gap: 14px; }
.vp-field { display: flex; flex-direction: column; gap: 15px; }
.vp-field-label {
display: flex; align-items: center; justify-content: flex-start; gap: 4px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 12px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vw-color-charcoal, #1A2535);
margin-bottom: 0;
}
.vp-field-value, .vp-field-optional {
color: #6E7480;
font-weight: var(--vw-fw-regular, 400);
text-transform: none;
letter-spacing: 0;
}
.vp-field-hint { font-size: 12px; color: var(--vw-color-muted, #6E7480); }
.vp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-swatch { width: 32px; height: 32px; padding: 0; border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; cursor: pointer; transition: box-shadow 0.18s ease; }
.vp-swatch.is-active { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--vw-color-charcoal, #1A2535); }
/* Pill grid (size, buckle, etc.) */
.vp-pill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.vp-pill {
padding: 14px 16px;
background: var(--vw-color-white, #FFFFFF);
color: var(--vw-color-charcoal, #1A2535);
border: 1px solid var(--vw-color-border, #E2E2E2);
border-radius: 2px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 13px;
font-weight: var(--vw-fw-semibold, 600);
text-align: center;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.vp-pill:hover { border-color: var(--vw-color-charcoal, #1A2535); }
.vp-pill.is-active {
background: #4A5E3A;
border-color: #4A5E3A;
color: var(--vw-color-white, #FFFFFF);
}
/* ---------- Quantity + Wishlist ---------- */
.vp-qty-block {
display: flex;
flex-direction: column;
gap: 6px;
background: #FAF9F6;
border: 1px solid #E2E2E2;
padding: 10px;
}
.vp-qty-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.vp-qty { display: inline-flex; align-items: center; border: 1px solid var(--vw-color-border, #E2E2E2); width: fit-content; }
.vp-qty-btn { width: 40px; height: 44px; background: var(--vw-color-white, #FFFFFF); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--vw-color-charcoal, #1A2535); }
.vp-qty-btn .valor-icon { width: 12px; height: 12px; }
.vp-qty-input {
width: 44px;
height: 42px;
padding: 0;
text-align: center;
border: 0;
font-weight: var(--vw-fw-bold, 700);
background: #fff;
font-size: 15px;
}
.vp-qty-input:focus { outline: none; }
.vp-wishlist {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 0;
cursor: pointer;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 13px;
font-weight: var(--vw-fw-semibold, 600);
color: #1a2535;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: color 0.18s ease;
}
.vp-wishlist .valor-icon { width: 18px; height: 18px; }
.vp-wishlist:hover { color: var(--vw-color-charcoal, #1A2535); }
.vp-wishlist.is-active { color: #b53a2c; }
.vp-wishlist.is-active .valor-icon { color: #b53a2c; }
/* ---------- Variant cards (Choose Your FI3) ---------- */
.vp-variant-cards { display: flex; flex-direction: column; gap: 12px; }
.vp-variant-eyebrow {
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--vw-color-muted, #6E7480);
}
.vp-variant-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vp-variant {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 12px;
padding: 18px;
border: 2px solid var(--vw-color-border, #E2E2E2);
background: var(--vw-color-white, #FFFFFF);
color: var(--vw-color-charcoal, #1A2535);
text-decoration: none;
border-radius: 8px;
transition: border-color 0.18s ease, background-color 0.18s ease;
}
.vp-variant:hover { border-color: var(--vw-color-charcoal, #1A2535); }
.vp-variant.is-active { border-color: var(--vw-color-olive, #4A5E3A); background: #F7F9F4; }
.vp-variant-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--vw-color-olive, #4A5E3A); background: rgba(74, 94, 58, 0.12); border-radius: 50px; }
.vp-variant-icon .valor-icon { width: 18px; height: 18px; }
.vp-variant-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-variant-label { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.vp-variant-note { font-size: 12px; color: var(--vw-color-muted, #6E7480); }
.vp-variant-check { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--vw-color-olive, #4A5E3A); border-radius: 50%; }
.vp-variant-check .valor-icon { width: 12px; height: 12px; }
.vp-variant-icon svg {
width: 20px;
height: 20px;
fill: #6e7480;
}
.vp-variant.is-active span.vp-variant-icon {
background: #4A5E3A;
color: #fff;
}
.vp-variant.is-active span.vp-variant-icon svg {
color: #fff;
fill: #fff;
}
/* ---------- Required questions ---------- */
.vp-questions {
display: flex; flex-direction: column; gap: 14px;
padding: 20px;
background: #FAF9F6;
border-left: 3px solid var(--vw-color-olive, #4A5E3A);
}
.vp-questions-head {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--vw-color-olive, #4A5E3A);
}
.vp-questions-head .valor-icon { width: 14px; height: 14px; }
.vp-toggle { display: inline-flex; border: 1px solid var(--vw-color-border, #E2E2E2); width: fit-content; }
.vp-toggle-btn { padding: 10px 22px; background: var(--vw-color-white, #FFFFFF); border: 0; cursor: pointer; font-size: 13px; font-weight: var(--vw-fw-semibold, 600); color: var(--vw-color-charcoal, #1A2535); }
.vp-toggle-btn + .vp-toggle-btn { border-left: 1px solid var(--vw-color-border, #E2E2E2); }
.vp-toggle-btn.is-active { background: var(--vw-color-charcoal, #1A2535); color: var(--vw-color-white, #FFFFFF); }
.vp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vp-field-half { display: flex; flex-direction: column; gap: 5px; }
.vp-input-group { position: relative; }
.vp-input {
width: 100%; padding: 12px 60px 12px 14px;
border: 1px solid var(--vw-color-border, #E2E2E2);
background: var(--vw-color-white, #FFFFFF);
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px; color: var(--vw-color-charcoal, #1A2535);
box-sizing: border-box; border-radius: 2px;
}
.vp-input:focus { outline: none; border-color: var(--vw-color-olive, #4A5E3A); }
.vp-input-full { padding-right: 14px; }
.vp-input-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--vw-color-muted, #6E7480); font-size: 12px; pointer-events: none; }
/* Metafield free-text (textarea + counter) */
.vp-mf-ta-field { display: flex; flex-direction: column; }
.vp-mf-textarea {
min-height: 92px;
padding: 12px 14px;
line-height: 1.5;
resize: vertical;
}
.vp-mf-textarea--single {
min-height: 0;
resize: none;
}
.vp-mf-ta-counter {
align-self: flex-end;
margin-top: 0;
font-size: 12px;
color: var(--vw-color-muted, #6E7480);
}
/* ---------- Upsell ---------- */
.vp-upsell {
display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start;
cursor: pointer;
transition: border-color 0.18s ease;
margin: 0;
}
.vp-upsell:hover { border-color: var(--vw-color-charcoal, #1A2535); }
.vp-upsell input[type="checkbox"] { display: none; }
.vp-upsell-box { width: 22px; height: 22px; border: 1px solid var(--vw-color-border, #E2E2E2); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; margin-top: 2px; }
.vp-upsell-box .valor-icon { width: 14px; height: 14px; }
.vp-upsell input:checked ~ .vp-upsell-box { background: var(--vw-color-olive, #4A5E3A); border-color: var(--vw-color-olive, #4A5E3A); color: #fff; }
.vp-upsell-content { display: flex; flex-direction: column; gap: 4px; }
.vp-upsell-price { color: var(--vw-color-olive, #4A5E3A); font-weight: var(--vw-fw-bold, 700); }
/* Add-on option selectors (title/price/options come from the add-on product) */
.vp-upsell-wrap { display: flex; flex-direction: column; gap: 15px; padding: 14px; border: 1px solid var(--vw-color-border, #E2E2E2); }
.vp-upsell-options { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 0; }
.vp-upsell-option { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.vp-upsell-option-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vp-upsell-option-label { font-size: 11px; font-weight: var(--vw-fw-bold, 700); text-transform: uppercase; letter-spacing: 0.08em; color: var(--vw-color-muted, #6E7480); }
.vp-upsell-option-value { font-size: 12px; font-weight: var(--vw-fw-semibold, 600); color: var(--vw-color-charcoal, #1A2535); }
.vp-upsell-select {
appearance: none;
-webkit-appearance: none;
padding: 9px 30px 9px 12px;
border: 1px solid var(--vw-color-border, #E2E2E2);
background-color: #fff;
color: var(--vw-color-charcoal, #1A2535);
font-size: 13px;
border-radius: 2px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.vp-upsell-select:hover, .vp-upsell-select:focus { border-color: var(--vw-color-charcoal, #1A2535); outline: none; }
.vp-upsell-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-upsell-swatch {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 50%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: box-shadow 0.18s ease;
}
.vp-upsell-swatch.is-active { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--vw-color-charcoal, #1A2535); }
.vp-upsell-text { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.vp-upsell-text .vp-upsell-option-label { margin-bottom: 2px; }
.vp-upsell-text-input {
padding: 9px 12px;
border: 1px solid var(--vw-color-border, #E2E2E2);
border-radius: 2px;
font-size: 13px;
width: 100%;
}
.vp-upsell-text-input:focus { border-color: var(--vw-color-charcoal, #1A2535); outline: none; }
.vp-upsell-text-counter { font-size: 11px; color: var(--vw-color-muted, #6E7480); align-self: flex-end; }
.vp-upsell-note { font-size: 12px; color: var(--vw-color-muted, #6E7480); line-height: 1.5; text-transform: capitalize; letter-spacing: 0; }
.vp-upsell-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: 15px;
}
/* ---------- Measure confirm ---------- */
.vp-checkbox {
display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start;
cursor: pointer; padding: 12px 14px;
background: rgba(26, 37, 53, 0.04);
border-left: 3px solid #8b7355;
}
.vp-checkbox input { display: none; }
.vp-checkbox-box { width: 22px; height: 22px; border: 1px solid var(--vw-color-border, #E2E2E2); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; margin-top: 2px; }
.vp-checkbox-box .valor-icon { width: 14px; height: 14px; }
.vp-checkbox input:checked ~ .vp-checkbox-box { background: var(--vw-color-olive, #4A5E3A); border-color: var(--vw-color-olive, #4A5E3A); color: #fff; }
.vp-checkbox-text {
font-size: 13px;
line-height: 1.5;
color: var(--vw-color-charcoal, #1A2535);
text-transform: capitalize;
letter-spacing: 0;
}
/* Invalid-field cue (manual validation) */
.vp-invalid {
outline: 2px solid #B53A2C;
outline-offset: 3px;
border-radius: 2px;
}
.vp-invalid .vp-checkbox-box { border-color: #B53A2C; }
.vp-invalid .vp-input { border-color: #B53A2C; }
/* ---------- CTAs (side-by-side, sticky to viewport bottom) ----------
Add to Cart + Buy It Now stick to the bottom of the viewport while the
product form is in view (pure CSS position:sticky — no JS pinning). The
full-width .vp-sticky-bar takes over once the whole product section has
scrolled past. */
.vp-cta-sticky {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 10px;
position: sticky;
bottom: 0;
z-index: 5;
padding: 12px;
background: var(--vw-color-white, #FFFFFF);
border: 1px solid #E2E2E2;
}
/* No "Buy with Shop" button (dynamic checkout off, or variant sold out) →
the Add to Cart / Sold out button spans the full width. */
.vp-cta-sticky--single,
.vp-cta-sticky.is-sold-out {
grid-template-columns: 1fr;
}
.vp-cta-sticky.is-sold-out .vp-payment-btn,
.vp-payment-btn[hidden] {
display: none;
}
/* Match the "Buy with Shop" dynamic checkout button to Add to Cart.
The --shopify-accelerated-checkout-* custom properties are exposed by
Shopify and inherit through the Shop Pay button's shadow DOM (we can't
edit the shadow root's own rules — e.g. --gravity-button-padding — but
these inherited vars drive the button's height + radius). */
.vp-payment-btn {
width: 100%;
--shopify-accelerated-checkout-button-block-size: 52px;
--shopify-accelerated-checkout-button-border-radius: 2px;
}
.vp-payment-btn .shopify-payment-button,
.vp-payment-btn shopify-accelerated-checkout { width: 100%; }
.vp-add {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; height: 52px; padding: 0 24px;
background: #4A5E3A;
color: var(--vw-color-white, #FFFFFF);
border: 1px solid #4A5E3A;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px; font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase; letter-spacing: 0.14em;
cursor: pointer; border-radius: 2px;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.vp-add:hover:not(:disabled),
.vp-add:focus:not(:disabled) {
background: #3A4B2D;
border-color: #3A4B2D;
}
.vp-add:disabled { opacity: 0.55; cursor: not-allowed; }
.vp-add .valor-icon { width: 16px; height: 16px; }
/* ---------- Sticky add-to-cart bar (viewport bottom) ---------- */
.vp-sticky-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background: var(--vw-color-white, #FFFFFF);
border-top: 1px solid var(--vw-color-border, #E2E2E2);
box-shadow: 0 -6px 18px rgba(17, 17, 17, 0.08);
transform: translateY(100%);
transition: transform 0.28s ease;
padding: 10px 0;
}
.vp-sticky-bar[hidden] { display: block; }
.vp-sticky-bar.is-visible { transform: translateY(0); }
.vp-sticky-row {
display: flex;
align-items: center;
gap: 20px;
justify-content: space-between;
}
.vp-sticky-product {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 0 1 auto;
}
.vp-sticky-image {
width: 56px;
height: 56px;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--vw-color-border, #E2E2E2);
}
.vp-sticky-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.vp-sticky-name {
font-family: var(--vw-font-heading);
font-size: 14px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--vw-color-charcoal, #1A2535);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.vp-sticky-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--vw-color-muted, #6E7480);
}
.vp-sticky-swatch {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 1px var(--vw-color-border, #E2E2E2);
background: #8B7355;
}
.vp-sticky-color { white-space: nowrap; }
.vp-sticky-price {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
margin-left: 2px;
}
.vp-sticky-controls {
display: flex;
align-items: flex-end;
gap: 14px;
margin-left: auto;
flex: 1 1 auto;
min-width: 0;
/* Scroll horizontally when there are many options rather than squishing them. */
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
padding-bottom: 2px;
scrollbar-width: thin;
}
.vp-sticky-controls::-webkit-scrollbar { height: 4px; }
.vp-sticky-controls::-webkit-scrollbar-thumb { background: var(--vw-color-border, #E2E2E2); border-radius: 4px; }
.vp-sticky-control {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
/* Give each option enough room so the label + select aren't congested. */
flex: 0 0 auto;
min-width: 148px;
max-width: 220px;
}
.vp-sticky-control-label {
font-size: 10px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--vw-color-muted, #6E7480);
line-height: 1.3;
/* Clamp long question-style names to two tidy lines. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vp-sticky-control .vp-sticky-select,
.vp-sticky-control .vp-sticky-swatches { width: 100%; }
.vp-sticky-select {
appearance: none;
-webkit-appearance: none;
padding: 9px 30px 9px 12px;
background-color: var(--vw-color-white, #FFFFFF);
border: 1px solid var(--vw-color-border, #E2E2E2);
color: var(--vw-color-charcoal, #1A2535);
font-size: 13px;
font-weight: var(--vw-fw-semibold, 600);
cursor: pointer;
border-radius: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 13px;
}
.vp-sticky-select:hover,
.vp-sticky-select:focus { border-color: var(--vw-color-charcoal, #1A2535); outline: none; }
/* Colour options in the sticky bar render as compact swatches (matching the main picker). */
.vp-sticky-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vp-sticky-swatch-btn {
width: 26px; height: 26px; padding: 0;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 50%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: box-shadow 0.18s ease;
}
.vp-sticky-swatch-btn.is-active {
box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--vw-color-charcoal, #1A2535);
}
.vp-sticky-add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-shrink: 0;
padding: 15px 28px;
background: #4A5E3A;
color: var(--vw-color-white, #FFFFFF);
border: 1px solid #4A5E3A;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
border-radius: 2px;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.vp-sticky-add:hover:not(:disabled),
.vp-sticky-add:focus:not(:disabled) { background: #3A4B2D; border-color: #3A4B2D; }
.vp-sticky-add:disabled { opacity: 0.55; cursor: not-allowed; }
.vp-sticky-add .valor-icon { width: 16px; height: 16px; }
/* Narrow laptop — tighten gaps + selects so the row doesn't overflow */
@media (max-width: 1280px) {
.vp-sticky-row { gap: 14px; }
.vp-sticky-controls { gap: 10px; }
.vp-sticky-select { padding: 8px 26px 8px 10px; font-size: 12px; }
.vp-sticky-name { max-width: 160px; }
}
/* Tablet & mobile — instead of hiding the options, move them to their own
full-width, horizontally scrollable row so ALL options stay usable. */
@media (max-width: 1100px) {
.vp-sticky-row { flex-wrap: wrap; row-gap: 14px; column-gap: 14px; }
.vp-sticky-product { flex: 1 1 auto; min-width: 0; }
.vp-sticky-name { max-width: none; }
.vp-sticky-add { flex: 0 0 auto; margin-left: auto; }
.vp-sticky-controls {
order: 3;
flex: 1 1 100%;
width: 100%;
margin-left: 0;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 600px) {
.vp-sticky-bar { padding: 8px 0; }
.vp-sticky-image { width: 46px; height: 46px; }
.vp-sticky-name { font-size: 12px; }
.vp-sticky-meta { font-size: 12px; }
.vp-sticky-add { padding: 13px 18px; font-size: 12px; letter-spacing: 0.1em; }
.vp-sticky-control { min-width: 132px; }
/* Stack: product info → options → Add to Cart (left-aligned) at the bottom. */
.vp-sticky-product { order: 1; flex: 1 1 100%; }
.vp-sticky-controls { order: 2; flex: 1 1 100%; }
.vp-sticky-add { order: 3; margin-left: 0; margin-right: auto; align-self: flex-start; }
}
.shopify-payment-button { margin: 0; }
.shopify-payment-button__button {
width: 100% !important;
height: 100% !important;
min-height: 52px !important;
background: transparent !important;
border: 1px solid #4A5E3A !important;
color: #4A5E3A !important;
padding: 14px 24px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
border-radius: 2px !important;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
.shopify-payment-button__button:hover {
background: #3A4B2D !important;
border-color: #3A4B2D !important;
color: #FFFFFF !important;
}
/* ---------- Lightbox ---------- */
.vp-lightbox {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 32px 80px;
background: rgba(8, 10, 14, 0.94);
/* backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); */
}
.vp-lightbox[hidden] { display: none; }
.vp-lightbox-stage {
display: flex; align-items: center; justify-content: center;
width: 100%; max-width: 1200px;
max-height: calc(100vh - 80px);
}
.vp-lightbox-img {
display: block;
max-width: 100%;
max-height: calc(100vh - 80px);
object-fit: contain;
/* box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); */
}
.vp-lightbox-close,
.vp-lightbox-nav {
position: absolute;
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: var(--vw-color-white, #FFFFFF);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
cursor: pointer; padding: 0;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.vp-lightbox-close:hover,
.vp-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
}
.vp-lightbox-close { top: 24px; right: 24px; }
.vp-lightbox-close .valor-icon { width: 18px; height: 18px; }
.vp-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.vp-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.vp-lightbox-prev:hover { transform: translateY(-50%) scale(1.04); }
.vp-lightbox-next:hover { transform: translateY(-50%) scale(1.04); }
.vp-lb-caret { width: 18px; height: 18px; }
.vp-lb-caret--left { transform: rotate(90deg); }
.vp-lb-caret--right { transform: rotate(-90deg); }
/* ---------- Lead time ---------- */
.vp-lead-time {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: #fff8ec;
border-left: 3px solid #d49a2e;
font-size: 13px; line-height: 1.5;
color: var(--vw-color-charcoal, #1A2535);
}
.vp-lead-time .valor-icon { width: 18px; height: 18px; color: #d49a2e; flex: 0 0 auto; }
.vp-lead-time strong { font-weight: var(--vw-fw-bold, 700); }
.vp-lead-time p { margin: 0; }
/* ---------- Trust badges ---------- */
.vp-trust-badges {
list-style: none;
padding: 16px;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
background: #faf9f6;
border-radius: 0;
border: 1px solid #E2E2E2;
justify-content: space-between;
}
.vp-trust-badges li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
margin: 0;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.1em;
color: inherit;
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
}
.vp-trust-badges .valor-icon {
width: 16px; height: 16px;
color: var(--vp-trust-icon, var(--vw-color-olive, #4A5E3A));
flex: 0 0 auto;
}
ul.vp-trust-badges svg {
color: #4A5E3A;
width: 16px;
}
/* ---------- Responsive ---------- */
/* Tablet — single column, gallery no longer sticky, slightly tighter gap */
@media (max-width: 991px) {
.vp-detail { padding: 16px 0 56px; }
.vp-row {
grid-template-columns: 1fr;
gap: 28px;
}
.vp-gallery { position: static; top: auto; }
/* Keep the media column from getting unnecessarily tall on tablet */
.vp-stage { max-height: 620px; }
}
/* Mobile — stack the gallery: main image on top (full width), thumbnails
become a horizontal scroll strip below it. Matches the reference's
mobile PDP rather than a cramped thumbs-left column. */
@media (max-width: 749px) {
.vp-gallery {
grid-template-columns: 1fr;
gap: 10px;
}
.vp-stage { order: 1; aspect-ratio: 1 / 1; }
.vp-thumbs {
order: 2;
flex-direction: row;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.vp-thumb { width: 64px; height: 64px; }
/* Stack the option fields cleanly */
.vp-variant-selector { grid-template-columns: 1fr; }
.vp-field-row { grid-template-columns: 1fr; }
.vp-trust-badges { grid-template-columns: 1fr; }
/* Buy buttons stack on phones, full width each */
.vp-cta-sticky { grid-template-columns: 1fr; }
.vp-cta-sticky.is-stuck { padding: 10px 0; }
/* Pills: keep at least 2 per row so size grid reads as a grid */
.vp-pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Small phones — single-column pills, tighter title */
@media (max-width: 420px) {
.vp-pill-grid { grid-template-columns: 1fr; }
.vp-qty-row { gap: 10px; }
}
/* END_SECTION:main-product */
/* START_SECTION:post-head (INDEX:42) */
.vw-post-head {
background-color: var(--vw-color-light-gray, #f4f4f4);
}
.vw-post-head .vw-container {
gap: 0;
}
.vw-post-head-inner {
display: flex;
flex-direction: column;
width: 100%;
}
.vw-post-head-inner.text-center {
margin-left: auto;
margin-right: auto;
align-items: center;
text-align: center;
}
.vw-post-head-inner.text-right {
margin-left: auto;
align-items: flex-end;
text-align: right;
}
/* ---------- Category badge (mirrors .blog-tag--solid) ---------- */
.vw-post-head-tag {
display: inline-flex;
align-items: center;
align-self: flex-start;
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-11, 11px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
line-height: 1.5;
color: var(--vw-color-white, #fff);
background-color: var(--vw-color-olive, #4a5e3a);
padding: var(--vw-sp-6, 6px) var(--vw-sp-10, 10px);
text-decoration: none;
transition: background-color var(--vw-tr-fast, 0.18s ease), color var(--vw-tr-fast, 0.18s ease);
}
.vw-post-head-inner.text-center .vw-post-head-tag {
align-self: center;
}
.vw-post-head-inner.text-right .vw-post-head-tag {
align-self: flex-end;
}
/* ---------- Title ---------- */
.vw-post-head-title {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-tight, 1.1);
letter-spacing: -0.03em;
color: var(--vw-color-charcoal, #1a2535);
margin: 0;
}
/* ---------- Standfirst ---------- */
.vw-post-head-standfirst {
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
max-width: 88ch;
margin: 0;
}
/* ---------- Byline ---------- */
.vw-post-head-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--vw-sp-12, 12px);
font-family: var(--vw-font-body);
font-weight: var(--vw-fw-semibold, 600);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-muted, #6e7480);
}
.vw-post-head-byline strong {
color: var(--vw-color-charcoal, #1a2535);
font-weight: var(--vw-fw-bold, 700);
}
.vw-post-head-dot {
width: 4px;
height: 4px;
background-color: var(--vw-color-coyote, #8b7355);
border-radius: 50%;
}
/* END_SECTION:post-head */
/* START_SECTION:shoppable-hero (INDEX:51) */
.kit-shoppable-hero__hotspots {
position: relative;
pointer-events: none;
z-index: 3;
}
.kit-shoppable-hero__hotspot {
position: absolute;
top: var(--hotspot-top-mobile, var(--hotspot-top));
left: var(--hotspot-left-mobile, var(--hotspot-left));
transform: translate(-50%, -50%);
pointer-events: auto;
}
.kit-shoppable-hero__product-card {
color: inherit;
text-decoration: inherit;
display: block;
min-width: calc(2rem * 4.2360679775); /* 4.2360679775 = φ^3 */
}
@media (min-width: 700px) {
.kit-shoppable-hero__hotspot {
top: var(--hotspot-top);
left: var(--hotspot-left);
}
.kit-content-over-media__content {
max-width: calc(61.803% + (var(--kit-section-gutter) * 2)); /* 61.803% = 100% - 1/φ, compensate for padding */
}
.kit-shoppable-hero__content .kit-text {
color: var(--colorHeroText);
pointer-events: none;
}
}
@media (min-width: 1024px) {
.kit-content-over-media__content {
max-width: calc(50% + (var(--kit-section-gutter) * 2));
}
}
/* END_SECTION:shoppable-hero */
/* START_SECTION:story-quote (INDEX:54) */
.story-quote {
background-color: var(--vw-color-light-gray, #F4F4F4);
text-align: center;
}
.story-quote__inner {
align-items: center;
text-align: center;
gap: var(--vw-sp-12, 12px);
max-width: 880px;
margin: 0 auto;
}
.story-quote-text {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: clamp(26px, 3.2vw, 40px);
font-weight: var(--vw-fw-bold, 700);
line-height: 1.25;
color: var(--vw-color-olive, #4A5E3A);
font-style: italic;
margin: 0;
letter-spacing: -0.02em;
padding: 0;
}
.story-quote-attr {
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-muted, #6E7480);
text-transform: uppercase;
letter-spacing: 0.18em;
margin: 0;
}
/* END_SECTION:story-quote */
/* START_SECTION:story-row (INDEX:55) */
.story-row {
background-color: var(--vw-color-white, #FFFFFF);
}
.story-row__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.story-row--reverse .story-row__grid { direction: rtl; }
.story-row--reverse .story-row__grid > * { direction: ltr; }
.story-row__content {
display: flex;
flex-direction: column;
gap: var(--vw-sp-16, 16px);
}
.story-row__eyebrow {
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-olive, #4A5E3A);
text-transform: uppercase;
letter-spacing: 0.18em;
}
.story-row__title {
/* font-size: clamp(24px, 2.6vw, 34px); */
font-weight: var(--vw-fw-bold, 700);
line-height: 1.2;
color: var(--vw-color-charcoal, #1A2535);
letter-spacing: -0.02em;
margin: 0;
}
svg.story-row__video-play-icon {
width: 32px;
height: 32px;
}
.story-row__text,
.story-row__text p {
font-size: 16px;
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-charcoal, #1A2535);
margin: 0;
}
.story-row__text p + p { margin-top: 12px; }
.story-row__quote,
.story-row__text em,
.story-row__text i,
.story-row__text em strong,
.story-row__text strong em {
font-style: oblique 50deg;
font-synthesis: style weight;
}
.story-row__quote {
margin: 4px 0 0;
padding: 14px 0 16px;
border-top: 1px solid var(--vw-color-border, #E2E2E2);
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: clamp(16px,2vw,20px);
line-height: var(--vw-lh-relaxed, 1.55);
color: var(--vw-color-olive, #4A5E3A);
font-weight: 800;
}
/* CTA row */
.story-row__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 12px;
}
.story-row__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background-color: var(--vw-color-olive, #4A5E3A);
color: var(--vw-color-white, #FFFFFF);
border: 2px solid var(--vw-color-olive, #4A5E3A);
border-radius: var(--vw-br-xs, 0);
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px;
font-weight: var(--vw-fw-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.12em;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s ease,
color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;
}
.story-row__btn:hover {
background-color: var(--vw-color-charcoal, #1A2535);
border-color: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #FFFFFF);
}
.story-row__btn .valor-icon {
width: 16px;
height: 16px;
transition: transform 0.18s ease;
}
.story-row__btn:hover .valor-icon { transform: translateX(3px); }
.story-row__btn--style-outline {
background-color: transparent;
color: var(--vw-color-charcoal, #1A2535);
border-color: var(--vw-color-charcoal, #1A2535);
}
.story-row__btn--style-outline:hover {
background-color: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #FFFFFF);
}
.story-row__btn--style-link {
background-color: transparent;
color: var(--vw-color-olive, #4A5E3A);
border-color: transparent;
padding: 8px 0;
text-transform: none;
letter-spacing: 0;
font-size: var(--vw-fs-15, 15px);
}
.story-row__btn--style-link:hover {
background-color: transparent;
color: var(--vw-color-charcoal, #1A2535);
}
/* Figure (image or video) */
.story-row__figure {
margin: 0;
overflow: hidden;
/* aspect-ratio: 4 / 3; */
background-color: var(--vw-color-light-gray, #F4F4F4);
/* border-radius: 6px; */
position: relative;
}
.story-row__figure--image { aspect-ratio: 1 / 1; }
.story-row__figure img,
.story-row__figure svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s ease;
}
.story-row__figure--image:hover img { transform: scale(1.03); }
/* Video thumb */
.story-row__video-thumb {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: none;
border: 0;
cursor: pointer;
font: inherit;
text-align: left;
}
.story-row__video-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
transition: opacity 0.2s ease;
}
.story-row__video-poster { transition: transform 0.45s ease; }
.story-row__video-thumb:hover .story-row__video-poster { transform: scale(1.02); }
.story-row__video-play {
position: absolute;
top: 50%;
left: 50%;
width: 88px;
height: 88px;
transform: translate(-50%, -50%);
background-color: var(--vw-color-white, #FFFFFF);
color: var(--vw-color-olive, #4A5E3A);
border: 1px solid var(--vw-color-white, #FFFFFF);
border-radius: 0px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.story-row__figure svg {
width: 32px;
height: 32px;
}
.story-row__video-thumb:hover .story-row__video-play {
background-color: var(--vw-color-olive, #4A5E3A);
border-color: var(--vw-color-olive, #4A5E3A);;
color: var(--vw-color-white, #FFFFFF);
transform: translate(-50%, -50%) scale(1.04);
}
.story-row__video-play-icon {
width: 28px;
height: 28px;
display: block;
}
.story-row__video-caption {
position: absolute;
left: 18px;
bottom: 18px;
z-index: 2;
padding: 8px 14px;
background-color: rgba(0, 0, 0, 0.55);
color: var(--vw-color-white, #FFFFFF);
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.18em;
}
.story-row__figure.is-playing .story-row__video-thumb { display: none; }
.story-row__figure iframe,
.story-row__figure video {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Icon + heading + text values list */
.story-row__values {
list-style: none;
padding: 0;
margin: var(--vw-sp-12, 12px) 0 0;
display: flex;
flex-direction: column;
gap: var(--vw-sp-20, 20px);
}
.story-row__value {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--vw-sp-16, 16px);
margin: 0;
padding: 0;
}
.story-row__value-icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vw-color-olive, #4A5E3A);
background-color: rgba(74, 94, 58, 0.08);
border-radius: 50%;
}
.story-row__value-icon .valor-icon { width: 22px; height: 22px; }
.story-row__value-body {
display: flex;
flex-direction: column;
gap: var(--vw-sp-4, 4px);
}
.story-row__value-heading {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: 16px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wide, 0.05em);
line-height: 1.25;
margin: 0;
}
.story-row__value-text {
font-size: var(--vw-fs-15, 15px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6E7480);
margin: 0;
}
/* Mobile */
@media (max-width: 768px) {
.story-row__grid {
grid-template-columns: 1fr;
align-items: stretch;
}
.story-row--reverse .story-row__grid { direction: ltr; }
.story-row__figure { order: 2; aspect-ratio: 4 / 3; }
.story-row__content { order: 1; }
.story-row--m-image-top .story-row__figure { order: 1; }
.story-row--m-image-top .story-row__content { order: 2; }
.story-row__title { font-size: 24px; }
.story-row__text,
.story-row__text p { font-size: 15px; }
.story-row__quote { font-size: 15px; }
.story-row__values { gap: 16px; }
.story-row__value-icon { width: 38px; height: 38px; }
.story-row__value-icon .valor-icon { width: 18px; height: 18px; }
.story-row__video-play { width: 60px; height: 60px; }
.story-row__video-play-icon { width: 22px; height: 22px; }
.story-row__video-caption { left: 12px; bottom: 12px; font-size: 10px; padding: 6px 10px; }
}
/* END_SECTION:story-row */
/* START_SECTION:valor-announcement (INDEX:60) */
.announcement-bar {
position: relative;
width: 100%;
padding: var(--vw-sp-10, 10px) 0;
z-index: 1;
transition: background-color var(--vw-tr-base, 0.28s ease), opacity var(--vw-tr-base, 0.28s ease);
}
.announcement-bar--overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.announcement-bar--blur {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.announcement-bar .vw-container {
gap: 0;
}
.announcement-slider {
position: relative;
/* height is set inline via {% style %} for editor responsiveness */
overflow: hidden;
}
.announcement-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--vw-sp-8, 8px);
font-family: var(--vw-font-body);
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-medium, 500);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
line-height: 1;
}
.announcement-slide.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.announcement-slide i {
font-size: var(--vw-fs-14, 14px);
}
.announcement-slide__link {
display: inline-flex;
align-items: center;
gap: var(--vw-sp-8, 8px);
color: inherit;
text-decoration: none;
}
.announcement-slide__link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* When overlay is enabled, the hero section already reserves top space
for the bar via its own padding-top calc(announcement-h + 96).
When overlay is OFF, the bar takes real space — normalize hero padding
so we don't double-up the offset. Modern browsers ≥ 2023 (:has()). */
body:has(.announcement-bar):not(:has(.announcement-bar--overlay)) .hero-section {
padding-top: var(--vw-sp-96, 96px);
}
@media (max-width: 600px) {
.announcement-bar {
padding: var(--vw-sp-8, 8px) 0;
}
.announcement-slide {
font-size: var(--vw-fs-11, 11px);
padding: 0 var(--vw-sp-8, 8px);
text-align: center;
}
}
/* END_SECTION:valor-announcement */
/* START_SECTION:valor-breadcrumb (INDEX:61) */
.vp-crumb {
background-color: var(--vw-color-white, #FFFFFF);
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
}
.vp-crumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vw-color-muted, #6E7480);
}
.vp-crumb__item { display: inline-flex; align-items: center; gap: 0px; margin-bottom: 0; }
.vp-crumb__item:not(:last-child)::after {
content: '/';
margin-left: 6px;
color: var(--vw-color-border, #C9CCD2);
font-weight: var(--vw-fw-regular, 400);
}
.vp-crumb__item a {
color: var(--vw-color-muted, #6E7480);
text-decoration: none;
transition: color 0.18s ease;
}
.vp-crumb__item a:hover { color: var(--vw-color-charcoal, #1A2535); }
.vp-crumb__item[aria-current="page"] span { color: var(--vw-color-charcoal, #1A2535); }
/* @media (max-width: 600px) {
.vp-crumb__list { font-size: 11px; letter-spacing: 0.06em; }
} */
/* END_SECTION:valor-breadcrumb */
/* START_SECTION:valor-collection-banner (INDEX:62) */
.page-head {
background-color: var(--vw-color-light-gray, #f4f4f4);
padding: 64px 0 56px;
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
}
.page-head .vw-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.page-head-title {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: 52px;
color: var(--vw-color-charcoal, #1A2535);
line-height: var(--vw-lh-tight, 1.1);
margin: 0;
}
.page-head-text {
font-size: 17px;
color: var(--vw-color-muted, #6E7480);
line-height: var(--vw-lh-relaxed, 1.7);
max-width: 720px;
margin: 0;
}
/* Background-image variant — dynamic values arrive as inline custom properties. */
.page-head--banner {
position: relative;
min-height: var(--ph-min-h, 320px);
display: flex;
align-items: center;
background-color: var(--vw-color-charcoal, #1A2535);
background-image: var(--ph-banner-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 0;
overflow: hidden;
}
.page-head--banner::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(17, 17, 17, var(--ph-overlay, 0.35));
z-index: 0;
}
.page-head--banner .vw-container { position: relative; z-index: 1; }
.page-head--banner .page-head-title,
.page-head--banner .eyebrow { color: inherit; }
.page-head--banner .eyebrow { opacity: 0.9; }
.page-head--banner .page-head-text { color: inherit; opacity: 0.88; }
@media (max-width: 768px) {
.page-head { padding: 40px 0 32px; }
.page-head--banner { min-height: var(--ph-min-h-m, 220px); }
.page-head-title { font-size: 30px; }
}
/* END_SECTION:valor-collection-banner */
/* START_SECTION:valor-collection (INDEX:63) */
/* ========================================================================
Valor Collection — ported from reference style.css.
Reference vars mapped to theme --vw-* tokens with literal fallbacks.
======================================================================== */
/* ---------- Page Head ---------- */
.page-head {
background-color: var(--vw-color-light-gray, #f4f4f4);
padding: 64px 0 56px;
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
}
.page-head .vw-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.page-head-title {
font-size: 52px;
color: var(--vw-color-charcoal, #1A2535);
line-height: var(--vw-lh-tight, 1.1);
margin: 0;
}
.page-head-text {
font-size: 17px;
color: var(--vw-color-muted, #6E7480);
line-height: var(--vw-lh-relaxed, 1.7);
max-width: 720px;
margin: 0;
}
/* ---------- Collection banner (background image variant) ----------
Dynamic values (image URL, overlay, heights, text color) arrive as inline
CSS custom properties on the section, so these rules stay static/cacheable. */
.page-head--banner {
position: relative;
min-height: var(--ph-min-h, 320px);
display: flex;
align-items: center;
background-color: var(--vw-color-charcoal, #1A2535);
background-image: var(--ph-banner-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 0;
overflow: hidden;
}
.page-head--banner::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(17, 17, 17, var(--ph-overlay, 0.35));
z-index: 0;
}
.page-head--banner .vw-container {
position: relative;
z-index: 1;
}
/* Inherit the configured banner text color (set inline on the section). */
.page-head--banner .page-head-title,
.page-head--banner .eyebrow { color: inherit; }
.page-head--banner .eyebrow { opacity: 0.9; }
.page-head--banner .page-head-text { color: inherit; opacity: 0.88; }
/* ---------- Product card base (mirrors sections/valor-products.liquid;
those styles are section-scoped to the homepage, so we redefine the base
here for the collection grid). ---------- */
.cb-grid .product-card {
display: flex;
flex-direction: column;
background-color: var(--vw-color-white, #fff);
border-radius: var(--vw-br-md, 0);
/* No overflow:hidden here — it would clip the Wishlist by Square heart at the
top of .grid__item-image-wrapper. Image zoom is clipped by .grid-product__image-mask. */
transition: transform var(--vw-tr-base, 0.28s ease), box-shadow var(--vw-tr-base, 0.28s ease);
}
.cb-grid .product-card .grid-product__image-mask {
border-radius: var(--vw-br-md, 0);
overflow: hidden;
}
.cb-grid .product-card:hover {
transform: translateY(-4px);
box-shadow: var(--vw-shadow-md, 0 6px 18px rgba(17, 17, 17, 0.08));
}
.cb-grid .product-image-wrap {
position: relative;
display: block;
width: 100%;
overflow: hidden;
background-color: #fff;
text-decoration: none;
}
.cb-grid .product-card:hover .product-image { transform: scale(1.04); }
/* QUICK ADD — bottom of image, slides up on hover */
.cb-grid .product-quick-add {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 18px;
background-color: var(--vw-color-charcoal, #1A2535);
color: #fff;
font-family: var(--vw-font-body);
font-size: 12px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wider, 0.14em);
text-decoration: none;
border: 0;
cursor: pointer;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s ease;
pointer-events: none;
z-index: 3;
}
.cb-grid .product-quick-add:hover {
background-color: var(--vw-color-olive, #4A5E3A);
color: #fff;
}
.cb-grid .product-card:hover .product-quick-add,
.cb-grid .product-card:focus-within .product-quick-add {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cb-grid .product-quick-add[disabled],
.cb-grid .product-quick-add.is-loading {
opacity: 0.7;
cursor: wait;
}
.cb-grid .product-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
font-size: 10px;
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.12em);
z-index: 2;
}
.cb-grid .product-badge-new { background-color: var(--vw-color-olive, #4A5E3A); color: #fff; }
.cb-grid .product-badge-best { background-color: var(--vw-color-coyote, #8B7355); color: #fff; }
.cb-grid .product-badge-fi { background-color: var(--vw-color-charcoal, #1A2535); color: #fff; }
/* Wishlist app block (e.g. Wishlist by Square) — top-right of the card image. */
.cb-grid .product-wishlist {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.cb-grid .product-info {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
}
.cb-grid .product-name {
color: var(--vw-color-charcoal, #1A2535);
line-height: var(--vw-lh-snug, 1.25);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin: 0;
font-family: var(--vw-font-heading);
font-size: 16px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wide, 0.03em);
}
.cb-grid .product-name a { text-decoration: none; }
.cb-grid .product-meta-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 4px;
}
.cb-grid .product-price {
font-family: var(--vw-font-heading);
font-size: 20px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
letter-spacing: var(--vw-ls-wide, 0.05em);
}
.cb-grid .product-rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: var(--vw-fw-semibold, 600);
color: var(--vw-color-charcoal, #1A2535);
}
.cb-grid .product-rating .valor-icon {
color: var(--vw-color-coyote, #8B7355);
width: 14px;
height: 14px;
}
.cb-grid .product-swatches {
display: flex;
flex-direction: row;
gap: 6px;
padding-top: 6px;
}
.cb-grid .swatch {
width: 12px;
height: 12px;
cursor: pointer;
padding: 0;
border: 0;
box-shadow: 0 0 0 1px #e0dfdf;
transition: transform var(--vw-tr-fast, 0.18s ease), box-shadow var(--vw-tr-fast, 0.18s ease);
}
.cb-grid .swatch:hover { transform: scale(1.15); }
.cb-grid .swatch.is-active {
box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #4A5E3A;
}
/* ---------- Toolbar (sticky) ---------- */
.collection-toolbar {
width: 100%;
display: flex;
justify-content: center;
background-color: var(--vw-color-white, #fff);
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
padding: 16px 0;
position: sticky;
top: 61px;
z-index: 3;
}
.ctb-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.ctb-filter-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--vw-color-border, #E2E2E2);
background-color: var(--vw-color-white, #fff);
color: var(--vw-color-charcoal, #1A2535);
font-size: 13px;
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.14em);
cursor: pointer;
transition: border-color var(--vw-tr-fast, 0.18s ease);
}
.ctb-filter-toggle:hover { border-color: var(--vw-color-charcoal, #1A2535); }
.ctb-filter-toggle .valor-icon { width: 16px; height: 16px; }
.ctb-count {
font-size: 13px;
color: var(--vw-color-muted, #6E7480);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.14em);
}
.ctb-count strong { color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
.ctb-cluster {
margin-left: auto;
display: flex;
align-items: center;
gap: 16px;
}
.ctb-sort {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--vw-color-muted, #6E7480);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.14em);
}
.ctb-sort-select {
appearance: none;
-webkit-appearance: none;
padding: 10px 32px 10px 12px;
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #E2E2E2);
color: var(--vw-color-charcoal, #1A2535);
font-size: 13px;
font-weight: var(--vw-fw-bold, 700);
text-transform: none;
letter-spacing: 0;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
}
.ctb-sort-select:hover,
.ctb-sort-select:focus { border-color: var(--vw-color-charcoal, #1A2535); }
/* ---------- Body Layout ---------- */
.collection-body {
width: 100%;
display: flex;
justify-content: center;
background-color: var(--vw-color-white, #fff);
padding: 40px 0 80px;
}
.cb-row {
display: block;
width: 100%;
}
/* ---------- Filter Drawer (slide-in from left) ----------
Mobile viewport-height fix:
- 100vh on mobile counts the browser URL bar/toolbar in the height,
so drawer content near the bottom gets hidden behind them.
100dvh ("dynamic viewport height") tracks the *actually visible*
area and resolves the cut-off. 100vh is kept as a fallback for
browsers that don't support dvh.
- padding-bottom adds breathing room so the last filter (Price)
can scroll fully into view above the safe-area / OS gesture bar.
- -webkit-overflow-scrolling: touch keeps iOS momentum scrolling. */
.cb-filters {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 420px;
height: 100vh;
height: 100dvh;
z-index: 600;
background-color: var(--vw-color-white, #fff);
display: flex;
flex-direction: column;
gap: 0;
padding: 24px 24px calc(48px + env(safe-area-inset-bottom, 0px));
transform: translateX(-100%);
transition: transform var(--vw-tr-base, 0.28s ease);
box-shadow: var(--vw-shadow-lg, 0 18px 42px rgba(17,17,17,0.14));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.cb-filters.is-open { transform: translateX(0); }
.cb-filters-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
}
.cb-filters-title {
font-family: var(--vw-font-heading);
font-size: 20px;
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
color: var(--vw-color-charcoal, #1A2535);
}
.cb-filters-close {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vw-color-charcoal, #1A2535);
background: none;
border: 0;
cursor: pointer;
font-size: 20px;
}
.cb-filters-close .valor-icon { width: 18px; height: 18px; }
.cb-active-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 0 16px;
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
margin-bottom: 8px;
}
.cb-active-label {
font-size: 12px;
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.14em);
color: var(--vw-color-muted, #6E7480);
}
.cb-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background-color: var(--vw-color-light-gray, #f4f4f4);
color: var(--vw-color-charcoal, #1A2535);
font-size: 12px;
font-weight: var(--vw-fw-semibold, 600);
text-decoration: none;
cursor: pointer;
transition: background-color var(--vw-tr-fast, 0.18s ease), color var(--vw-tr-fast, 0.18s ease);
}
.cb-chip:hover { background-color: var(--vw-color-charcoal, #1A2535); color: var(--vw-color-white, #fff); }
.cb-chip .valor-icon { width: 12px; height: 12px; }
.cb-clear {
margin-left: auto;
font-size: 12px;
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.14em);
color: var(--vw-color-coyote, #8B7355);
font-weight: var(--vw-fw-bold, 700);
text-decoration: underline;
text-underline-offset: 3px;
}
.cb-clear:hover { color: var(--vw-color-charcoal, #1A2535); }
.cb-group {
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
padding: 16px 0;
}
.cb-group-head {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
cursor: pointer;
font-family: var(--vw-font-heading);
font-size: 14px;
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.14em);
color: var(--vw-color-charcoal, #1A2535);
}
.cb-group-head::-webkit-details-marker { display: none; }
.cb-group-head .valor-icon {
transition: transform var(--vw-tr-fast, 0.18s ease);
width: 14px;
height: 14px;
color: var(--vw-color-muted, #6E7480);
}
.cb-group[open] .cb-group-head .valor-icon { transform: rotate(180deg); }
.cb-group-body {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 16px;
}
/* Checkbox */
.cb-check {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
color: var(--vw-color-charcoal, #1A2535);
margin:0;
}
.cb-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cb-check-box {
flex-shrink: 0;
width: 18px;
height: 18px;
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #E2E2E2);
display: flex;
align-items: center;
justify-content: center;
color: transparent;
transition: background-color var(--vw-tr-fast, 0.18s ease), border-color var(--vw-tr-fast, 0.18s ease), color var(--vw-tr-fast, 0.18s ease);
}
.cb-check-box .valor-icon { width: 12px; height: 12px; }
.cb-check input:checked ~ .cb-check-box {
background-color: var(--vw-color-olive, #4A5E3A);
border-color: var(--vw-color-olive, #4A5E3A);
color: var(--vw-color-white, #fff);
}
.cb-check em {
color: var(--vw-color-muted, #6E7480);
font-style: normal;
margin-left: 4px;
font-size: 12px;
}
/* Min/max price row */
.cb-size-row {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.cb-price-input:focus {
outline: none;
border-color: var(--vw-color-charcoal, #1A2535);
}
/* Color row */
.cb-color {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
margin: 0;
}
.cb-color input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cb-color-dot {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--vw-color-border, #E2E2E2);
flex-shrink: 0;
transition: border-color var(--vw-tr-fast, 0.18s ease), box-shadow var(--vw-tr-fast, 0.18s ease);
}
.cb-color input:checked ~ .cb-color-dot {
border-color: var(--vw-color-charcoal, #1A2535);
box-shadow: 0 0 0 2px var(--vw-color-white, #fff) inset, 0 0 0 1px var(--vw-color-olive, #4A5E3A);
}
.cb-color-name {
font-size: 13px;
color: var(--vw-color-charcoal, #1A2535);
}
/* Category links — navigate to other collections */
.cb-cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 14px;
color: var(--vw-color-charcoal, #1A2535);
text-decoration: none;
text-transform: capitalize;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.cb-cat:hover { color: var(--vw-color-olive, #4A5E3A); }
.cb-cat em {
flex-shrink: 0;
color: var(--vw-color-muted, #6E7480);
font-style: normal;
font-size: 12px;
}
.cb-cat.is-active {
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-olive, #4A5E3A);
}
.cb-cat.is-active em { color: var(--vw-color-olive, #4A5E3A); }
/* ---------- Results Grid ---------- */
.cb-results {
display: flex;
flex-direction: column;
gap: 32px;
}
.cb-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.cb-grid .product-card {
flex: none;
min-width: 0;
border: 1px solid var(--vw-color-border, #E2E2E2);
}
.cb-grid .product-card:hover { border-color: transparent; }
.cb-grid .product-name a { color: var(--vw-color-charcoal, #1A2535); }
.cb-grid .product-name a:hover { color: var(--vw-color-olive, #4A5E3A); }
.cb-grid .product-image-link {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.cb-grid .product-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ---------- Pagination ---------- */
.cb-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cb-page {
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
background-color: var(--vw-color-white, #fff);
border: 1px solid var(--vw-color-border, #E2E2E2);
color: var(--vw-color-charcoal, #1A2535);
font-family: var(--vw-font-heading);
font-size: 14px;
font-weight: var(--vw-fw-bold, 700);
text-decoration: none;
transition: background-color var(--vw-tr-fast, 0.18s ease), color var(--vw-tr-fast, 0.18s ease), border-color var(--vw-tr-fast, 0.18s ease);
}
.cb-page:hover:not([disabled]):not(.is-active) { border-color: var(--vw-color-charcoal, #1A2535); }
.cb-page.is-active {
background-color: var(--vw-color-charcoal, #1A2535);
border-color: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #fff);
}
.cb-page[disabled] {
color: var(--vw-color-muted, #6E7480);
cursor: not-allowed;
opacity: 0.5;
}
.cb-page-dots {
color: var(--vw-color-muted, #6E7480);
padding: 0 6px;
}
/* ---------- Filter Drawer Backdrop ---------- */
.cb-filter-backdrop {
position: fixed;
inset: 0;
background-color: var(--vw-color-overlay, rgba(17,17,17,0.55));
opacity: 0;
pointer-events: none;
transition: opacity var(--vw-tr-base, 0.28s ease);
z-index: 599;
}
.cb-filter-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
label.ctb-sort {
margin: 0;
}
.cb-check span, span.cb-color-name {
text-transform: capitalize;
letter-spacing: 0.1px;
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.cb-grid { grid-template-columns: repeat(3, 1fr); }
.page-head-title { font-size: 36px; }
}
@media (max-width: 900px) {
.cb-filters { max-width: min(360px, 92vw); }
}
@media (max-width: 768px) {
.cb-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.page-head { padding: 40px 0 32px; }
.page-head--banner { min-height: var(--ph-min-h-m, 220px); }
.page-head-title { font-size: 30px; }
.ctb-cluster {
width: 100%;
margin-left: 0;
justify-content: space-between;
}
.ctb-sort { flex: 1; }
.ctb-sort-select { flex: 1; }
.cb-page {
min-width: 36px;
height: 36px;
font-size: 13px;
}
.page-head-text {
font-size: 14px;
}
.cb-grid .product-info {
padding: 12px;
gap: 6px;
}
.cb-grid .product-name {
font-size: 14px;
}
.cb-grid .product-price {
font-size: 16px;
}
}
@media (max-width: 768px) {
.collection-toolbar {
top: 53px;
}
}
/* END_SECTION:valor-collection */
/* START_SECTION:valor-connection (INDEX:64) */
.connection-section {
background-color: var(--vw-color-light-gray, #f4f4f4);
padding: var(--vw-sp-80, 80px) 0;
}
.connection-row {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--vw-sp-72, 72px);
}
.connection-media {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--vw-sp-12, 12px);
}
.connection-media-stack {
position: relative;
display: flex;
flex-direction: column;
width: 60%;
flex-shrink: 0;
}
.connection-image {
display: block;
border-radius: 0;
width: 100%;
height: auto;
object-fit: contain;
}
.connection-media-stack .connection-image { width: 100%; height: auto; }
.connection-media > .connection-image { width: 40%; height: auto; }
.connection-content {
flex: 0 0 360px;
max-width: 360px;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--vw-sp-20, 20px);
}
/* connection-text: .p17 utility class supplies font-size */
.connection-text {
color: var(--vw-color-muted, #6E7480);
line-height: var(--vw-lh-relaxed, 1.65);
margin: 0;
}
.connection-text strong {
color: var(--vw-color-charcoal, #1A2535);
font-weight: var(--vw-fw-bold, 700);
}
.connection-cta-row {
display: flex;
flex-direction: row;
gap: var(--vw-sp-12, 12px);
flex-wrap: wrap;
padding-top: var(--vw-sp-12, 12px);
}
@media (max-width: 991px) {
.connection-row {
flex-direction: column;
gap: var(--vw-sp-40, 40px);
}
.connection-content { flex: none; max-width: 100%; }
}
@media (max-width: 600px) {
.connection-section { padding: var(--vw-sp-56, 56px) 0; }
/* Keep both images side-by-side on mobile (don't stack) */
.connection-media {
flex-direction: row;
align-items: center;
gap: var(--vw-sp-12, 12px);
}
.connection-media-stack { width: 60%; }
.connection-media > .connection-image { width: 40%; }
}
/* END_SECTION:valor-connection */
/* START_SECTION:valor-contact-form (INDEX:65) */
.contact-section {
background-color: var(--vw-color-white, #FFFFFF);
}
.contact-row {
display: grid;
grid-template-columns: minmax(0,0.9fr) minmax(0,1.2fr);
gap: clamp(24px, 4vw, 48px);
align-items: flex-start;
}
/* ---------- Info column (dark card) ---------- */
.contact-info {
display: flex;
flex-direction: column;
gap: 32px;
background-color: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #FFFFFF);
padding: clamp(24px, 3.4vw, 48px);
}
.contact-info .eyebrow,
.contact-info-head .eyebrow {
color: var(--vw-color-coyote, #8B7355);
}
.contact-info-head {
display: flex;
flex-direction: column;
gap: var(--vw-sp-12, 12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: 24px;
}
.contact-info .section-title {
color: var(--vw-color-white, #FFFFFF);
}
.contact-info-text {
font-size: 15px;
line-height: var(--vw-lh-relaxed, 1.65);
color: #ffffffc7;
margin: 0;
}
.contact-info-text strong { color: var(--vw-color-white, #FFFFFF); font-weight: var(--vw-fw-bold, 700); }
.contact-info-list {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--vw-sp-20, 20px) var(--vw-sp-20, 20px);
list-style: none;
padding: 0;
margin: 0;
}
.contact-info-item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--vw-sp-12, 12px);
margin: 0;
}
/* Olive SQUARE icon block (not circle), white icon */
.contact-info-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vw-color-white, #FFFFFF);
background-color: var(--vw-color-olive, #4A5E3A);
border-radius: 2px;
}
.contact-info-icon .valor-icon { width: 20px; height: 20px; }
.contact-info-body { display: flex; flex-direction: column; gap: 2px; }
.contact-info-label {
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 12px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--vw-color-coyote, #8B7355);
margin: 0;
}
.contact-info-value {
font-size: 15px;
line-height: 1.45;
color: #ffffffeb;
margin: 0;
}
.contact-info-value a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.18s ease, color 0.18s ease;
}
.contact-info-value a:hover {
color: var(--vw-color-white, #FFFFFF);
border-bottom-color: currentColor;
}
.contact-info-credentials {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--vw-sp-16, 16px);
padding-top: var(--vw-sp-16, 16px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: var(--vw-fs-12, 12px);
color: rgba(255, 255, 255, 0.72);
letter-spacing: 0.06em;
}
.contact-info-credentials strong {
color: #fff;
font-weight: var(--vw-fw-bold, 700);
margin-right: 4px;
letter-spacing: 0.12em;
}
.contact-info-credentials-divider {
width: 1px;
height: 12px;
background-color: rgba(255, 255, 255, 0.18);
display: inline-block;
}
.contact-info-social {
display: flex;
flex-direction: row;
gap: var(--vw-sp-8, 8px);
}
.contact-info-social a {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vw-color-white, #FFFFFF);
border: 1px solid #ffffff33;
background-color: transparent;
border-radius: 0px;
transition: background-color .18s ease, color .18s ease;
}
.contact-info-social a:hover {
background-color: var(--vw-color-coyote, #8B7355);
color: var(--vw-color-white, #FFFFFF);
}
.contact-info-social .valor-icon { width: 18px; height: 18px; }
/* ---------- Form column ---------- */
.contact-form-wrap {
background-color: var(--vw-color-light-gray, #F4F4F4);
padding: clamp(24px, 3.4vw, 48px);
border: 1px solid #e2e2e2;
}
.contact-form-head {
display: flex;
flex-direction: column;
gap: var(--vw-sp-8, 8px);
padding-bottom: var(--vw-sp-20, 20px);
margin-bottom: var(--vw-sp-24, 24px);
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
}
.contact-form-title {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: clamp(20px, 2.3vw, 30px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.contact-form-success {
background-color: rgba(74, 94, 58, 0.12);
color: var(--vw-color-olive, #4A5E3A);
border: 1px solid rgba(74, 94, 58, 0.3);
padding: 12px 16px;
margin: 0 0 var(--vw-sp-16, 16px);
font-size: var(--vw-fs-14, 14px);
}
.contact-form-error {
background-color: rgba(181, 58, 44, 0.08);
color: #b53a2c;
border: 1px solid rgba(181, 58, 44, 0.3);
padding: 12px 16px;
margin: 0 0 var(--vw-sp-16, 16px);
font-size: var(--vw-fs-14, 14px);
}
.contact-form-error__list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-form-error__list li {
line-height: 1.4;
}
.contact-form-error__list li + li {
margin-top: 4px;
}
.contact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--vw-sp-16, 16px);
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field-full { grid-column: 1 / -1; }
.contact-section .form-field label {
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0;
color: var(--vw-color-charcoal, #1A2535);
}
.form-optional {
font-weight: var(--vw-fw-regular, 400);
color: var(--vw-color-muted, #6E7480);
margin-left: 6px;
text-transform: none;
letter-spacing: 0;
}
.form-required {
color: #b53a2c;
margin-left: 4px;
font-weight: var(--vw-fw-bold, 700);
}
/* Per-field inline error message + invalid-state border */
.form-field-error {
display: none;
margin-top: 6px;
font-size: var(--vw-fs-12, 12px);
color: #b53a2c;
line-height: 1.4;
}
.form-field.has-error .form-field-error {
display: block;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
border-color: #b53a2c;
box-shadow: 0 0 0 3px rgba(181, 58, 44, 0.08);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
width: 100%;
padding: 12px 14px;
background-color: var(--vw-color-white, #FFFFFF);
border: 1px solid var(--vw-color-border, #E2E2E2);
border-radius: 2px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-14, 14px);
color: var(--vw-color-charcoal, #1A2535);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--vw-color-olive, #4A5E3A);
box-shadow: 0 0 0 3px rgba(74, 94, 58, 0.12);
}
.form-consent {
margin-top: 4px;
}
.form-consent-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-regular, 400);
text-transform: none;
letter-spacing: 0;
line-height: 1.45;
color: var(--vw-color-muted, #6E7480);
cursor: pointer;
}
.form-consent-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--vw-color-olive, #4A5E3A);
flex: 0 0 auto;
margin: 0px;
}
.contact-form-footer {
display: flex;
gap: 20px;
padding-top: var(--vw-sp-20, 20px);
margin-top: 12px;
border-top: 1px solid var(--vw-color-border, #E2E2E2);
align-items: center;
}
.contact-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
align-self: flex-start;
padding: 14px 28px;
background-color: #4a5e3a;
color: var(--vw-color-white, #FFFFFF);
border: 1px solid #4a5e3a;
border-radius: 2px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
transition: background-color 0.18s ease, transform 0.18s ease;
}
.contact-form-submit:hover {
background-color: #3a4b2d;
border-color: #3a4b2d;
}
.contact-form-submit:hover .valor-icon { transform: translateX(3px); }
.contact-form-submit .valor-icon { transition: transform 0.18s ease; width: 16px; height: 16px; }
.contact-form-note {
font-size: 12px;
line-height: 1.55;
color: var(--vw-color-muted, #6E7480);
margin: 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 991px) {
/* Single-column stack on tablet + mobile. minmax(0, 1fr) lets each
child shrink to fit, and the inline width/box-sizing on the cards
prevents form inputs (which size from `width: 100%`) from forcing
horizontal overflow past the .vw-container's right padding. */
.contact-row {
grid-template-columns: minmax(0, 1fr);
}
.contact-info,
.contact-form-wrap {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.contact-form-footer {
flex-direction: column;
}
.contact-form-submit {
width: 100%;
}
}
@media (max-width: 600px) {
.contact-info-list { grid-template-columns: 1fr; }
.contact-form-grid { grid-template-columns: 1fr; }
.contact-info {
gap: 24px;
}
}
/* END_SECTION:valor-contact-form */
/* START_SECTION:valor-featured (INDEX:66) */
.vw-featured-section {
background-color: var(--vw-color-white, #fff);
}
.vw-featured-list {
display: flex;
flex-direction: column;
gap: var(--vw-sp-48, 48px);
}
.vw-featured-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--vw-sp-48, 48px);
align-items: center;
}
/* Image on the right: swap visual order of the two columns. */
.vw-featured-card--media-right .vw-featured-media {
order: 2;
}
.vw-featured-card--media-right .vw-featured-body {
order: 1;
}
.vw-featured-media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 7 / 4.14;
overflow: hidden;
background-color: var(--vw-color-light-gray, #f4f4f4);
}
.vw-featured-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--vw-tr-slow, 0.45s ease);
}
.vw-featured-card:hover .vw-featured-img {
transform: scale(1.03);
}
.vw-featured-badge {
position: absolute;
top: var(--vw-sp-16, 16px);
left: var(--vw-sp-16, 16px);
display: inline-flex;
align-items: center;
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-11, 11px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-white, #fff);
background-color: var(--vw-color-olive, #4a5e3a);
padding: var(--vw-sp-6, 6px) var(--vw-sp-10, 10px);
line-height: 1.5;
}
.vw-featured-body {
display: flex;
flex-direction: column;
gap: var(--vw-sp-16, 16px);
}
.vw-featured-meta {
display: flex;
align-items: center;
gap: var(--vw-sp-12, 12px);
font-family: var(--vw-font-body);
font-size: var(--vw-fs-12, 12px);
font-weight: var(--vw-fw-semibold, 600);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-muted, #6e7480);
line-height: 1.5;
}
.vw-featured-meta time {
white-space: nowrap;
}
.vw-featured-meta-dot {
flex: none;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--vw-color-coyote, #8b7355);
}
.vw-featured-title {
font-family: var(--vw-font-heading);
font-weight: var(--vw-fw-bold, 700);
line-height: var(--vw-lh-tight, 1.1);
color: var(--vw-color-charcoal, #1a2535);
margin: 0;
}
.vw-featured-title a {
color: inherit;
text-decoration: none;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.vw-featured-title a:hover {
color: var(--vw-color-olive, #4a5e3a);
}
.vw-featured-excerpt {
font-size: var(--vw-fs-17, 17px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
max-width: 56ch;
margin: 0;
}
.vw-featured-excerpt p {
margin-bottom: 0;
max-width: 600px;
letter-spacing: -0.3px;
}
/* Description is rich text — collapse outer margins on its block children. */
.vw-featured-excerpt > * {
margin-top: 0;
}
.vw-featured-excerpt > *:last-child {
margin-bottom: 0;
}
.vw-featured-readmore {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--vw-sp-8, 8px);
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
color: var(--vw-color-olive, #4a5e3a);
text-decoration: none;
transition: gap var(--vw-tr-fast, 0.18s ease), color var(--vw-tr-fast, 0.18s ease);
line-height: 1.5;
}
.vw-featured-readmore:hover {
gap: var(--vw-sp-12, 12px);
color: var(--vw-color-olive-dark, #3a4b2d);
}
.vw-featured-readmore .valor-icon {
width: 1em;
height: 1em;
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.vw-featured-card {
grid-template-columns: 1fr;
gap: var(--vw-sp-24, 24px);
}
/* When stacked, the image always sits on top regardless of side setting. */
.vw-featured-card--media-right .vw-featured-media,
.vw-featured-card--media-right .vw-featured-body {
order: 0;
}
.vw-featured-media {
aspect-ratio: 16 / 10;
}
}
@media (max-width: 480px) {
.vw-featured-media {
aspect-ratio: 4 / 3;
}
}
/* END_SECTION:valor-featured */
/* START_SECTION:valor-fi (INDEX:67) */
.fi-section {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
padding: var(--vw-sp-120, 120px) 0;
/* padding: 100px 0 var(--vw-sp-120, 120px) 0; */
background-color: var(--vw-color-charcoal, #1a2535);
color: var(--vw-color-white, #fff);
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
}
/* Fixed (parallax) background — image stays put while content scrolls over it.
The image URL is set per-section in the scoped style block above; here we
handle sizing + the fixed attachment. */
.fi-bg {
position: absolute;
inset: 0;
z-index: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Default to scroll — iOS/iPadOS Safari renders background-attachment: fixed
broken (wrong size/position), which is why it failed on iPad. */
background-attachment: scroll;
}
/* Enable the parallax fixed background ONLY on real desktops (fine pointer +
hover), so touch devices — iPad included — never hit the broken fixed path. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
.fi-bg {
background-attachment: fixed;
}
}
.fi-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(17, 17, 17, 0.55) 0%,
rgba(17, 17, 17, 0.35) 40%,
rgba(17, 17, 17, 0.1) 80%,
rgba(17, 17, 17, 0) 100%
);
z-index: 2;
}
.fi-top-texture {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
object-position: top center;
pointer-events: none;
z-index: 2;
}
.fi-mountain {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
object-position: bottom center;
pointer-events: none;
z-index: 2;
}
.fi-section .vw-container {
position: relative;
z-index: 3;
align-items: flex-start;
}
.fi-content {
display: flex;
flex-direction: column;
gap: var(--vw-sp-20, 20px);
max-width: 620px;
/* padding-top: 50px; */
}
/* Eyebrow with translucent pill background. Color = white-ish. */
.fi-eyebrow {
display: inline-flex;
align-self: flex-start;
padding: var(--vw-sp-6, 6px) var(--vw-sp-12, 12px);
background-color: rgba(0, 0, 0, 0.65);
color: var(--vw-color-white, #fff);
border-left: 2px solid var(--vw-color-olive, #4a5e3a);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* fi-text: .p17 utility class supplies font-size */
.fi-text {
line-height: var(--vw-lh-relaxed, 1.65);
color: rgba(255, 255, 255, 0.95);
margin: 0;
}
/* Module callout */
.fi-module-callout {
display: inline-flex;
align-self: flex-start;
align-items: stretch;
background-color: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(74, 94, 58, 0.6);
border-radius: var(--vw-br-xs, 0);
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
transition: transform var(--vw-tr-fast, 0.18s ease), box-shadow var(--vw-tr-fast, 0.18s ease);
}
.fi-module-callout:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.fi-module-price {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: var(--vw-sp-12, 12px) var(--vw-sp-20, 20px);
background-color: var(--vw-color-olive, #4a5e3a);
color: var(--vw-color-white, #fff);
line-height: 1;
}
/* Big price number — keep static-large since it's a unique element */
.fi-module-price-amt {
font-family: var(--vw-font-heading);
font-size: 30px;
font-weight: var(--vw-fw-bold, 700);
line-height: 1;
}
.fi-module-price-label {
font-size: var(--vw-fs-10, 10px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-widest, 0.18em);
opacity: 0.9;
}
.fi-module-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: var(--vw-sp-12, 12px) var(--vw-sp-20, 20px);
}
.fi-module-info-title {
font-family: var(--vw-font-heading);
font-size: 16px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-white, #fff);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wide, 0.05em);
}
.fi-module-info-sub {
font-size: var(--vw-fs-12, 12px);
color: rgba(255, 255, 255, 0.7);
}
.fi-cta-row {
display: flex;
flex-direction: row;
gap: var(--vw-sp-12, 12px);
flex-wrap: wrap;
padding-top: var(--vw-sp-12, 12px);
}
@media (max-width: 991px) {
.fi-section {
padding: var(--vw-sp-96, 96px) 0;
background-attachment: scroll;
}
}
@media (max-width: 768px) {
/* Mobile: stacked layout — image banner on top (in normal flow), content
below on solid charcoal. */
.fi-section {
display: block;
min-height: 0;
padding: 0;
background-color: var(--vw-color-charcoal, #1a2535);
}
.fi-bg {
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 4 / 3;
background-attachment: scroll;
background-position: bottom;
}
.fi-overlay,
.fi-top-texture,
.fi-mountain {
display: none;
}
.fi-section .vw-container {
padding-top: var(--vw-sp-40, 40px);
padding-bottom: var(--vw-sp-56, 56px);
}
.fi-content {
max-width: 100%;
}
.fi-cta-row {
width: 100%;
flex-direction: column;
}
.fi-cta-row .vw-btn {
width: 100%;
}
body .fi-module-info-title {
font-size: 14px;
}
body .fi-module-price-amt {
font-size: 20px;
}
}
/* END_SECTION:valor-fi */
/* START_SECTION:valor-hero (INDEX:68) */
@media only screen and (max-width: 1299px) {
body .hero-section {
height: 100%;
}
}
.hero-section {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 600px;
padding: calc(var(--vw-announcement-h, 42px) + var(--vw-sp-96, 96px)) 0 var(--vw-sp-80, 80px);
background-color: var(--vw-color-charcoal, #1A2535);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(17, 17, 17, calc(var(--vw-hero-overlay-start, 0.75))) 0%,
rgba(17, 17, 17, calc(var(--vw-hero-overlay-start, 0.75) * 0.73)) 30%,
rgba(17, 17, 17, 0) 60%
);
z-index: 2;
}
.hero-section .vw-container {
position: relative;
z-index: 3;
align-items: flex-start;
}
.hero-content {
display: flex;
flex-direction: column;
gap: var(--vw-sp-24, 24px);
max-width: 760px;
}
/* Hero title: sizing + font-family come from global theme typography
(--font-h1-d / --font-h1-m for size, --typeHeaderPrimary for family).
We only override the color (white on dark bg) + tighten line-height. */
.hero-title {
color: #fff;
line-height: var(--vw-lh-tight, 1.1);
letter-spacing: var(--vw-ls-wide, -0.02em);
margin: 0;
}
/* Hero body: .p18 utility class supplies responsive font-size from the
global Paragraph 18 setting. We only override color + line-height + max-width. */
.hero-text {
color: rgba(255, 255, 255, 0.82);
line-height: var(--vw-lh-relaxed, 1.65);
max-width: 620px;
margin: 0;
}
.hero-cta-row {
display: flex;
flex-direction: row;
gap: var(--vw-sp-12, 12px);
flex-wrap: wrap;
padding-top: var(--vw-sp-8, 8px);
}
@media (max-width: 991px) {
.hero-content {
max-width: 600px;
}
/* Tablet (incl. iPad portrait): full 100dvh crops the image to a tall sliver.
Cap to a banner height so the background image composition is preserved. */
.hero-section {
height: auto;
min-height: 72vh;
}
/* Center the background image on tablet/iPad so it isn't cropped to one side. */
.hero-bg-img {
object-position: center center;
}
}
@media (max-width: 768px) {
.hero-section {
height: auto;
min-height: 0;
padding: 0;
flex-direction: column;
align-items: stretch;
}
.hero-bg-img {
position: relative;
inset: auto;
width: 100%;
height: 520px;
}
.hero-overlay {
display: none;
}
.hero-section .vw-container {
padding-top: var(--vw-sp-32, 32px);
padding-bottom: var(--vw-sp-32, 32px);
}
.hero-content {
gap: var(--vw-sp-16, 16px);
max-width: 100%;
}
.hero-cta-row {
width: 100%;
}
.hero-cta-row .vw-btn {
flex: 1;
padding: var(--vw-sp-12, 12px) var(--vw-sp-16, 16px);
font-size: var(--vw-fs-12, 12px);
}
}
@media (max-width: 480px) {
.hero-cta-row {
flex-direction: column;
}
.hero-cta-row .vw-btn {
width: 100%;
}
}
/* END_SECTION:valor-hero */
/* START_SECTION:valor-icon-text (INDEX:69) */
.vw-it {
background-color: var(--vw-color-light-gray, #F4F4F4);
}
.vw-it__head {
text-align: center;
max-width: 46rem;
margin: 0 auto var(--vw-sp-40, 40px);
}
.vw-it__eyebrow {
display: block;
font-family: var(--vw-font-body, sans-serif);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--vw-color-coyote, #8B7355);
margin-bottom: var(--vw-sp-12, 12px);
}
.vw-it__heading {
font-family: var(--vw-font-heading, sans-serif);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.1;
color: var(--vw-color-charcoal, #1A2535);
margin: 0;
}
.vw-it__subheading {
font-family: var(--vw-font-body, sans-serif);
font-size: 1rem;
line-height: 1.55;
color: #6E7480;
margin: var(--vw-sp-12, 12px) 0 0;
}
/* Grid: cells sit on a 1px border-colored background so the gaps read as
clean separating lines (a table look). */
.vw-it__grid {
display: grid;
gap: 1px;
background-color: var(--vw-color-border, #E2E2E2);
border: 1px solid var(--vw-color-border, #E2E2E2);
}
.vw-it__cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--vw-sp-16, 16px);
padding: clamp(1.25rem, 3vw, 2rem);
background-color: #F7F5F0;
text-decoration: none;
min-width: 0;
transition: background-color 0.2s ease;
}
a.vw-it__cell {
cursor: pointer;
}
a.vw-it__cell:hover {
background-color: var(--vw-color-light-gray, #FBFAF7);
}
a.vw-it__cell:hover .vw-it__icon {
color: var(--vw-color-olive, #4A5E3A);
}
a.vw-it__cell:focus-visible {
outline: 2px solid var(--vw-color-coyote, #8B7355);
outline-offset: -2px;
}
.vw-it__icon {
display: inline-flex;
color: var(--vw-color-coyote, #8B7355);
line-height: 0;
transition: color 0.2s ease;
}
.vw-it__icon svg {
width: 30px;
height: 30px;
display: block;
}
.vw-it__icon-img {
width: 30px;
height: 30px;
object-fit: contain;
display: block;
}
.vw-it__title {
font-family: var(--vw-font-heading, sans-serif);
font-size: 0.9375rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.3;
color: var(--vw-color-charcoal, #1A2535);
margin: 0;
}
.vw-it__text {
font-family: var(--vw-font-body, sans-serif);
font-size: 0.875rem;
line-height: 1.55;
color: #6E7480;
margin: 0;
}
.vw-it__text > *:first-child { margin-top: 0; }
.vw-it__text > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.vw-it__title { font-size: 0.875rem; }
}
/* END_SECTION:valor-icon-text */
/* START_SECTION:valor-instagram (INDEX:70) */
.instagram-section {
background-color: var(--vw-color-white, #fff);
padding: var(--vw-sp-80, 80px) 0;
}
.instagram-section .eyebrow i {
font-size: var(--vw-fs-16, 16px);
}
.instagram-grid {
display: flex;
flex-direction: row;
gap: var(--vw-sp-12, 12px);
flex-wrap: wrap;
}
.instagram-post {
flex: 1 1 calc((100% - var(--vw-sp-12, 12px) * 5) / 6);
min-width: auto;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
border-radius: var(--vw-br-sm, 0);
background-color: var(--vw-color-light-gray, #f4f4f4);
display: flex;
text-decoration: none;
}
.instagram-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--vw-tr-slow, 0.45s ease);
}
.instagram-post:hover .instagram-image { transform: scale(1.08); }
.instagram-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--vw-sp-12, 12px);
background-color: rgba(17, 17, 17, 0.6);
color: var(--vw-color-white, #fff);
opacity: 0;
transition: opacity var(--vw-tr-base, 0.28s ease);
padding: var(--vw-sp-12, 12px);
}
.instagram-post:hover .instagram-overlay,
.instagram-post:focus-within .instagram-overlay {
opacity: 1;
}
.instagram-overlay > i {
font-size: 32px;
color: var(--vw-color-white, #fff);
}
.instagram-stats {
display: flex;
flex-direction: row;
gap: var(--vw-sp-16, 16px);
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-semibold, 600);
}
.instagram-stats span {
display: inline-flex;
align-items: center;
gap: var(--vw-sp-6, 6px);
}
.instagram-stats i {
color: var(--vw-color-white, #fff);
font-size: var(--vw-fs-15, 15px);
}
@media (max-width: 991px) {
.instagram-post { flex: 1 1 calc((100% - var(--vw-sp-12, 12px) * 2) / 3); }
}
@media (max-width: 768px) {
.instagram-section { padding: var(--vw-sp-56, 56px) 0; }
/* Horizontal-scroll slider on mobile/tablet (matches reference behavior) */
.instagram-grid {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: var(--vw-sp-12, 12px);
padding-bottom: var(--vw-sp-8, 8px);
}
.instagram-grid::-webkit-scrollbar { display: none; }
.instagram-post {
flex: 0 0 45%;
min-width: 0;
scroll-snap-align: start;
}
/* Always show the overlay on touch (hover doesn't fire) */
.instagram-post .instagram-overlay {
opacity: 1;
background-color: rgba(17, 17, 17, 0.35);
}
.instagram-post .instagram-overlay > .valor-icon {
display: none;
}
}
@media (max-width: 499px) {
.instagram-post { flex: 0 0 80%; }
}
/* END_SECTION:valor-instagram */
/* START_SECTION:valor-policy-card (INDEX:71) */
.policy-section { background-color: var(--vw-color-white, #FFFFFF); position: relative; }
.policy-anchor {
position: absolute;
top: -80px;
visibility: hidden;
}
.policy-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(20px, 2.4vw, 32px);
align-items: flex-start;
/* max-width: 920px; */
margin: 0 auto;
width: 100%;
}
.policy-icon {
flex: 0 0 auto;
width: 96px;
height: 96px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #FFFFFF);
border-radius: 2px;
}
.policy-icon .valor-icon { width: 44px; height: 44px; }
.policy-body {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.policy-heading {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
/* font-size: clamp(22px, 2.6vw, 32px); */
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.policy-text,
.policy-text p {
font-size: clamp(14px,2vw,16px);
line-height: var(--vw-lh-relaxed, 1.65);
color: #1A2535;
margin: 0;
}
.policy-text strong {
color: var(--vw-color-charcoal, #1A2535);
font-weight: var(--vw-fw-bold, 700);
}
.policy-text p + p { margin-top: 10px; }
/* Bullet list with check icons */
.policy-list {
list-style: none;
padding: 0;
margin: 4px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.policy-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: flex-start;
font-size: var(--vw-fs-15, 15px);
color: var(--vw-color-charcoal, #1A2535);
margin: 0;
}
.policy-list__check {
width: fit-content;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vw-color-olive, #4A5E3A);
flex: 0 0 auto;
margin-top: 2px;
}
span.policy-list__text p {
margin: 0;
}
.policy-list__check .valor-icon { width: 16px; height: 16px; }
.policy-list__text strong { color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
/* Note panel — info / warn variants */
.policy-note {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: flex-start;
padding: 14px 18px;
border-left: 3px solid;
border-radius: 2px;
margin: 4px 0 0;
font-size: var(--vw-fs-14, 14px);
line-height: 1.55;
}
.policy-note__icon { display: inline-flex; align-items: center; justify-content: center; padding-top: 4px; }
.policy-note__icon .valor-icon { width: 18px; height: 18px; }
.policy-note__body strong { font-weight: var(--vw-fw-bold, 700); }
.policy-note--info {
background-color: #4a5e3a14;
border-color: #4A5E3A;
color: var(--vw-color-charcoal, #1A2535);
}
.policy-note--info p, .policy-note--warn p {
margin: 0;
}
.policy-note--info .policy-note__icon { color: var(--vw-color-charcoal, #1A2535); }
.policy-note--warn {
background-color: #8b73551a;
border-color: #8b7355;
color: var(--vw-color-charcoal, #1A2535);
}
/*.policy-note--warn .policy-note__icon { color: #b53a2c; }
.policy-note--warn .policy-note__body strong { color: #8a2c20; } */
/* CTA row */
.policy-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 8px;
}
.policy-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background-color: var(--vw-color-olive, #4A5E3A);
color: var(--vw-color-white, #FFFFFF);
border: 1px solid var(--vw-color-olive, #4A5E3A);
/* border-radius: 2px; */
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 14px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.14em;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.policy-btn:hover {
background-color: var(--vw-color-charcoal, #1A2535);
border-color: var(--vw-color-charcoal, #1A2535);
}
.policy-btn .valor-icon { width: 16px; height: 16px; transition: transform 0.18s ease; }
.policy-btn:hover .valor-icon { transform: translateX(3px); }
.policy-btn--style-outline {
background-color: transparent;
color: var(--vw-color-charcoal, #1A2535);
border-color: var(--vw-color-charcoal, #1A2535);
}
.policy-btn--style-outline:hover {
background-color: var(--vw-color-charcoal, #1A2535);
color: var(--vw-color-white, #FFFFFF);
}
.policy-btn--style-link {
background-color: transparent;
border-color: transparent;
color: var(--vw-color-olive, #4A5E3A);
padding: 8px 0;
text-transform: none;
letter-spacing: 0;
font-size: var(--vw-fs-15, 15px);
}
.policy-btn--style-link:hover {
background-color: transparent;
color: var(--vw-color-charcoal, #1A2535);
}
/* Responsive */
@media (max-width: 600px) {
.policy-card { grid-template-columns: 1fr; gap: var(--vw-sp-16, 16px); }
.policy-icon { width: 64px; height: 64px; }
.policy-icon .valor-icon { width: 30px; height: 30px; }
body .policy-btn {
padding: 14px 20px;
}
}
/* END_SECTION:valor-policy-card */
/* START_SECTION:valor-product-tabs (INDEX:72) */
.pdt { background-color: var(--vw-color-white, #FFFFFF); }
.pdt-head {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 8px; margin-bottom: 0;
}
.pdt-tabs { max-width: 100%; width: 100%; margin: 0 auto; }
/* ---------- Section-level content alignment ----------
Controls head + tab row + panel text. Default "left" leaves the tabs and
body left-aligned; the head is centered by its own base rule but follows
the section alignment when set to center/right. */
.pdt--align-left .pdt-head { align-items: flex-start; text-align: left; }
.pdt--align-right .pdt-head { align-items: flex-end; text-align: right; }
.pdt--align-left .pdt-tablist { justify-content: flex-start; }
.pdt--align-center .pdt-tablist { justify-content: center; }
.pdt--align-right .pdt-tablist { justify-content: flex-end; }
.pdt--align-center .pdt-rte,
.pdt--align-center .pdt-faq-list,
.pdt--align-center .pdt-features { text-align: center; }
.pdt--align-center .pdt-features li { padding-left: 0; }
.pdt--align-center .pdt-features li::before { display: none; }
.pdt--align-right .pdt-rte,
.pdt--align-right .pdt-faq-list { text-align: right; }
.pdt-tablist {
display: flex; flex-wrap: wrap; gap: 4px;
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
margin-bottom: 28px;
}
.pdt-tab {
appearance: none; background: none; border: 0;
padding: 12px 18px;
margin-bottom: -1px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vw-color-muted, #6E7480);
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color 0.18s ease, border-color 0.18s ease;
}
.pdt-tab:hover { color: var(--vw-color-charcoal, #1A2535); }
.pdt-tab.is-active {
color: var(--vw-color-charcoal, #1A2535);
border-bottom-color: var(--vw-color-olive, #4A5E3A);
}
/* "Next tab" arrow — hidden by default; only shown on mobile when there are
more tabs than fit (handled in the mobile media query below). */
.pdt-tablist-wrap { position: relative; }
.pdt-tab-next {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 1px;
width: 38px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-bottom: 2px solid var(--vw-color-olive, #4A5E3A);
background: var(--vw-color-white, #FFFFFF);
box-shadow: -12px 0 12px -6px rgba(17, 17, 17, 0.12);
color: var(--vw-color-charcoal, #1A2535);
cursor: pointer;
}
.pdt-tab-next svg { width: 16px; height: 16px; display: block; }
.pdt-panel { display: none; }
.pdt-panel.is-active { display: block; animation: pdt-fade 0.25s ease; }
@keyframes pdt-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pdt-rte, .pdt-rte p {
font-size: var(--vw-fs-15, 15px);
line-height: var(--vw-lh-relaxed, 1.7);
color: var(--vw-color-muted, #6E7480);
}
.pdt-rte p { margin: 0 0 14px; }
.pdt-rte strong { color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
.pdt-rte a { color: var(--vw-color-olive, #4A5E3A); text-decoration: underline; text-underline-offset: 3px; }
.pdt-subhead {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: var(--vw-fs-16, 16px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--vw-color-charcoal, #1A2535);
margin: 24px 0 12px;
}
.pdt-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pdt-features li {
display: flex; flex-direction: column; gap: 2px;
padding-left: 16px; position: relative;
}
.pdt-features li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--vw-color-olive, #4A5E3A);
}
.pdt-features strong { font-size: var(--vw-fs-15, 15px); color: var(--vw-color-charcoal, #1A2535); font-weight: var(--vw-fw-bold, 700); }
.pdt-features span { font-size: var(--vw-fs-14, 14px); color: var(--vw-color-muted, #6E7480); line-height: 1.55; }
.pdt-note {
margin-top: 20px; padding: 12px 16px;
background: var(--vw-color-light-gray, #F4F4F4);
border-left: 3px solid var(--vw-color-olive, #4A5E3A);
font-size: var(--vw-fs-14, 14px); color: var(--vw-color-charcoal, #1A2535);
}
.pdt-note a { color: var(--vw-color-olive, #4A5E3A); font-weight: var(--vw-fw-bold, 700); }
/* Table */
.pdt-table {
width: 100%; border-collapse: collapse; margin: 4px 0 25px;
font-size: var(--vw-fs-14, 14px);
}
.pdt-table th, .pdt-table td {
text-align: left; padding: 14px 16px;
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
vertical-align: middle;
}
.pdt-table thead th {
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--vw-fs-12, 12px);
color: var(--vw-color-charcoal, #1A2535);
background: var(--vw-color-light-gray, #F4F4F4);
}
.pdt-table tbody th[scope="row"] {
font-weight: var(--vw-fw-semibold, 600);
color: var(--vw-color-charcoal, #1A2535);
width: fit-content;
/* background: #f4f4f4; */
}
.pdt-rte.rte.pdt-table-footer h4 {
font-size: 18px;
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
color: #1a2535;
padding-bottom: 8px;
border-bottom: 1px solid #E2E2E2;
}
.pdt-table tbody td { color: var(--vw-color-muted, #6E7480); }
/* Zebra striping like the reference size-guide table */
.pdt-table tbody tr:nth-child(odd) { background: #fff; }
.pdt-table tbody tr:nth-child(odd) th[scope="row"],
/* .pdt-table tbody tr:nth-child(odd) td { background: transparent; } */
.pdt-table-footer { margin-top: 16px; }
/* 3-column table: even thirds (e.g. Size / Neck Range / Velcro Panel) */
.pdt-table--3col tbody th[scope="row"] { width: 33.333%; }
.pdt-table--3col th, .pdt-table--3col td { width: 33.333%; }
/* Content alignment of the value cells (label column stays left) */
.pdt-table--center thead th + th,
.pdt-table--center tbody td { text-align: center; }
.pdt-table--right thead th + th,
.pdt-table--right tbody td { text-align: right; }
/* FAQ */
.pdt-faq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pdt-faq-item { padding: 16px 0; border-bottom: 1px solid var(--vw-color-border, #E2E2E2); }
.pdt-faq-item:first-child { padding-top: 0; }
.pdt-faq-q {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: var(--vw-fs-15, 15px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
margin: 0 0 6px;
}
.pdt-faq-a { font-size: var(--vw-fs-14, 14px); line-height: 1.6; color: var(--vw-color-muted, #6E7480); margin: 0; }
@media (max-width: 600px) {
.pdt-tablist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pdt-tablist::-webkit-scrollbar { display: none; }
/* Reveal the next-tab arrow and reserve room for it so tabs aren't hidden behind it. */
.pdt-has-more .pdt-tab-next { display: flex; }
.pdt-has-more .pdt-tablist { padding-right: 42px; }
.pdt-table th, .pdt-table td { padding: 11px 12px; }
.pdt-table tbody th[scope="row"] { width: 40%; }
/* 3-col tables can crowd on phones — let the value cells share the rest evenly */
.pdt-table--3col tbody th[scope="row"] { width: 34%; }
.pdt-table--3col th, .pdt-table--3col td { width: auto; }
}
/* END_SECTION:valor-product-tabs */
/* START_SECTION:valor-production (INDEX:73) */
.production-callout {
padding: var(--vw-sp-56, 56px) 0;
background-color: var(--vw-color-light-gray, #f4f4f4);
border-top: 1px solid var(--vw-color-border, #E2E2E2);
border-bottom: 1px solid var(--vw-color-border, #E2E2E2);
}
.production-callout-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--vw-sp-40, 40px);
}
.production-callout-icon {
width: 72px;
height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--vw-color-olive, #4A5E3A);
color: var(--vw-color-white, #fff);
font-size: 32px;
flex-shrink: 0;
}
.production-callout-text {
min-width: 0;
}
/* production-callout-title: keep a static H3-style size (it's a unique element name,
not a section ). Wrapping in tag would also work — using static size here
because the reference uses --fs-h3 (30px) which is between h2 and h3. */
.production-callout-title {
font-family: var(--vw-font-heading);
font-size: 30px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
margin: var(--vw-sp-8, 8px) 0 var(--vw-sp-12, 12px);
line-height: 1.15;
}
/* production-callout-body: .p15 utility class supplies font-size */
.production-callout-body {
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6E7480);
margin: 0;
max-width: 60ch;
}
.production-callout-stats {
display: grid;
gap: var(--vw-sp-32, 32px);
align-items: center;
flex-shrink: 0;
}
@media only screen and (min-width:1199px){
.production-callout-stats {
grid-template-columns: repeat(3, auto);
}
}
.production-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vw-sp-4, 4px);
text-align: center;
min-width: 80px;
}
.production-stat-num {
font-family: var(--vw-font-heading);
font-size: 30px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-olive, #4A5E3A);
line-height: 1;
}
.production-stat-label {
font-size: var(--vw-fs-11, 11px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wider, 0.12em);
color: var(--vw-color-muted, #6E7480);
}
@media (max-width: 960px) {
.production-callout-row {
grid-template-columns: 1fr;
gap: var(--vw-sp-24, 24px);
text-align: center;
}
.production-callout-icon { margin: 0 auto; }
.production-callout-body { margin-left: auto; margin-right: auto; }
.production-callout-stats { display: flex; justify-content: center; gap: var(--vw-sp-24, 24px); }
}
/* Horizontal-scroll stats slider on small screens (matches reference) */
@media (max-width: 560px) {
.production-callout-stats {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: var(--vw-sp-24, 24px);
padding-bottom: var(--vw-sp-8, 8px);
justify-content: flex-start;
width: 100%;
}
.production-callout-stats::-webkit-scrollbar { display: none; }
.production-stat {
flex: 0 0 auto;
min-width: 120px;
scroll-snap-align: start;
}
}
/* END_SECTION:valor-production */
/* START_SECTION:valor-products (INDEX:74) */
.products-section {
background-color: var(--vw-color-light-gray, #f4f4f4);
padding: var(--vw-sp-80, 80px) 0;
}
.products-row {
display: flex;
flex-direction: row;
gap: var(--vw-sp-24, 24px);
flex-wrap: wrap;
}
.product-card {
flex: 1 1 calc(25% - var(--vw-sp-24, 24px));
min-width: 240px;
display: flex;
flex-direction: column;
background-color: var(--vw-color-white, #fff);
border-radius: var(--vw-br-md, 0);
/* No overflow:hidden here — it would clip the Wishlist by Square heart that
sits at the top of .grid__item-image-wrapper. Image zoom is clipped by the
inner .grid-product__image-mask instead (see below). */
transition: transform var(--vw-tr-base, 0.28s ease), box-shadow var(--vw-tr-base, 0.28s ease);
}
/* Clip the image (and hover zoom) to the card's radius WITHOUT clipping the heart. */
.product-card .grid-product__image-mask {
border-radius: var(--vw-br-md, 0);
overflow: hidden;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: var(--vw-shadow-md, 0 6px 18px rgba(17, 17, 17, 0.08));
}
.product-image-wrap {
position: relative;
display: block;
width: 100%;
overflow: hidden;
background-color: #fff;
text-decoration: none;
}
.product-image-link {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
text-decoration: none;
}
.product-image,
.product-image-link .placeholder-svg {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--vw-tr-slow, 0.45s ease);
}
.product-card:hover .product-image { transform: scale(1.04); }
/* QUICK ADD — sits at the bottom of the image, slides up on hover. */
.product-quick-add {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 18px;
background-color: var(--vw-color-charcoal, #1A2535);
color: #fff;
font-family: var(--vw-font-body);
font-size: 12px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wider, 0.14em);
text-decoration: none;
border: 0;
cursor: pointer;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s ease;
pointer-events: none;
z-index: 3;
}
.product-quick-add:hover {
background-color: var(--vw-color-olive, #4A5E3A);
color: #fff;
}
.product-card:hover .product-quick-add,
.product-card:focus-within .product-quick-add {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.product-quick-add[disabled],
.product-quick-add.is-loading {
opacity: 0.7;
cursor: wait;
}
.product-badge {
position: absolute;
top: var(--vw-sp-12, 12px);
left: var(--vw-sp-12, 12px);
padding: var(--vw-sp-4, 4px) var(--vw-sp-10, 10px);
font-size: var(--vw-fs-10, 10px);
font-weight: var(--vw-fw-bold, 700);
text-transform: var(--vw-tt-upper, uppercase);
letter-spacing: var(--vw-ls-wider, 0.12em);
border-radius: var(--vw-br-xs, 0);
}
.product-badge-new { background-color: var(--vw-color-olive, #4A5E3A); color: #fff; }
.product-badge-best { background-color: var(--vw-color-coyote, #8B7355); color: #fff; }
.product-badge-fi { background-color: var(--vw-color-charcoal, #1A2535); color: #fff; }
/* Wishlist app block (e.g. Wishlist by Square) — top-right of the card image. */
.product-wishlist {
position: absolute;
top: var(--vw-sp-8, 8px);
right: var(--vw-sp-8, 8px);
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.product-info {
display: flex;
flex-direction: column;
gap: var(--vw-sp-8, 8px);
padding: var(--vw-sp-20, 20px);
}
.product-name {
color: var(--vw-color-charcoal, #1A2535);
line-height: var(--vw-lh-snug, 1.25);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin: 0;
font-family: var(--vw-font-heading);
font-size: var(--vw-fs-15, 15px);
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: var(--vw-ls-wide, 0.03em);
}
.product-name a { color: inherit; text-decoration: none; }
.product-meta-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--vw-sp-12, 12px);
padding-top: var(--vw-sp-4, 4px);
}
.product-price {
font-family: var(--vw-font-heading);
font-size: 20px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
letter-spacing: var(--vw-ls-wide, 0.05em);
}
.product-rating {
display: inline-flex;
align-items: center;
gap: var(--vw-sp-4, 4px);
font-size: var(--vw-fs-13, 13px);
font-weight: var(--vw-fw-semibold, 600);
color: var(--vw-color-charcoal, #1A2535);
}
.product-rating i {
color: var(--vw-color-coyote, #8B7355);
font-size: var(--vw-fs-14, 14px);
}
.product-swatches {
display: flex;
flex-direction: row;
gap: var(--vw-sp-6, 6px);
padding-top: var(--vw-sp-6, 6px);
}
/* Small square swatches — matches reference's `.swatch` look */
.swatch {
width: 12px;
height: 12px;
cursor: pointer;
padding: 0;
border: 1px solid;
transition: transform var(--vw-tr-fast, 0.18s ease), box-shadow var(--vw-tr-fast, 0.18s ease), border-color var(--vw-tr-fast, 0.18s ease);
}
.swatch:hover { transform: scale(1.15); }
.swatch.is-active {
box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #4A5E3A;
}
/* Slider dots — hidden on desktop, visible on mobile */
.products-slider-dots {
display: none;
justify-content: center;
gap: var(--vw-sp-8, 8px);
padding-top: var(--vw-sp-20, 20px);
}
.products-slider-dot {
width: 8px;
height: 8px;
border-radius: var(--vw-br-circle, 50%);
background-color: rgba(26, 37, 53, 0.25);
border: none;
padding: 0;
cursor: pointer;
transition: background-color var(--vw-tr-fast, 0.18s ease), transform var(--vw-tr-fast, 0.18s ease);
}
.products-slider-dot:hover { background-color: rgba(26, 37, 53, 0.5); }
.products-slider-dot.is-active {
background-color: var(--vw-color-charcoal, #1A2535);
transform: scale(1.25);
}
/* Quick Add modal CSS lives in assets/valor-quick-add.css (shared with valor-collection). */
/* ---------- Responsive ----------
Card width by viewport:
≥1152px → 4 cards / row (flex-basis 25%)
992–1151 → 3 cards / row (flex-basis 33.33%)
601–991 → 2 cards / row (flex-basis 50%)
≤600 → mobile slider or 1 card / row
Without the 992–1151 rule, the row fits only 3 cards (240px min-width
wins over the 25% flex-basis) and `flex-grow: 1` stretches the lonely
4th card to 100% width on the next row. Forcing the 3-up basis there
keeps a balanced 3+1 wrap with the 4th card at the same width as its
siblings, not full-width. */
@media (max-width: 1152px) {
.shopify-section--valor-products .product-card { flex: 1 1 calc(33.333% - var(--vw-sp-24, 24px)); max-width: calc(33.333% - var(--vw-sp-24, 24px)); }
}
@media (max-width: 991px) {
.shopify-section--valor-products .product-card { flex: 1 1 calc(50% - var(--vw-sp-24, 24px)); max-width: calc(50% - var(--vw-sp-24, 24px)); }
}
/* ---------- Slider mode (≤1152px when enabled) ----------
Horizontal scroll-snap slider replaces the grid wrap on every viewport
from desktop-medium down. Card width scales per breakpoint so the user
sees roughly:
992–1152 → 3 cards + small peek
769–991 → 2 cards + small peek
601–768 → 1.5 cards
≤600 → 1 card + side peek
Dots also become visible at slider-active widths. The fallback (slider
disabled) keeps the grid wrap behaviour from the rules above. */
@media (max-width: 1152px) {
.products-section[data-mobile-slider="true"] .products-row {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0;
padding: 0 0 var(--vw-sp-8, 8px);
gap: var(--vw-sp-16, 16px);
}
.products-section[data-mobile-slider="true"] .products-row::-webkit-scrollbar { display: none; }
.products-section[data-mobile-slider="true"] .product-card {
flex: 0 0 calc(33.333% - var(--vw-sp-12, 12px));
max-width: calc(33.333% - var(--vw-sp-12, 12px));
min-width: 0;
scroll-snap-align: start;
max-width: 78%;
}
.products-section[data-mobile-slider="true"] .products-slider-dots { display: flex; }
}
@media (max-width: 991px) {
.products-section[data-mobile-slider="true"] .product-card {
flex: 0 0 calc(45% - var(--vw-sp-12, 12px));
max-width: calc(45% - var(--vw-sp-12, 12px));
}
}
@media (max-width: 449px) {
.products-section[data-mobile-slider="true"] .product-card {
flex: 0 0 66%;
max-width: 66%;
}
}
@media (max-width: 600px) {
.products-section { padding: var(--vw-sp-56, 56px) 0; }
.products-section[data-mobile-slider="true"] .product-card {
flex: 0 0 78%;
max-width: 78%;
}
.products-section[data-mobile-slider="true"] .product-image { height: 280px; }
/* Fallback (slider disabled): stacked cards */
.products-section[data-mobile-slider="false"] .product-card { flex: 1 1 100%; }
.products-section[data-mobile-slider="false"] .product-image { height: 280px; }
/* On touch devices the hover state never triggers — always show Quick Add */
.product-quick-add {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
padding: 12px 14px;
font-size: 11px;
}
}
/* END_SECTION:valor-products */
/* START_SECTION:valor-prop65 (INDEX:75) */
.vp-prop65 { width: 100%; }
.vp-prop65__row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.vp-prop65__icon {
flex-shrink: 0;
display: inline-flex;
line-height: 0;
margin-top: 1px;
}
.vp-prop65__icon svg { width: 26px; height: 26px; display: block; }
.vp-prop65__body { display: flex; flex-direction: column; gap: 6px; }
.vp-prop65__title {
margin: 0;
font-family: var(--vw-font-heading);
font-size: 13px;
font-weight: var(--vw-fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.3;
}
.vp-prop65__text,
.vp-prop65__link {
margin: 0;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 12px;
line-height: 1.6;
}
.vp-prop65__link a {
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.18s ease;
}
.vp-prop65__link a:hover { opacity: 0.7; }
aside.vp-prop65[hidden] {
display: none;
}
@media (max-width: 768px) {
.vp-prop65__row { gap: 12px; }
.vp-prop65__icon svg { width: 22px; height: 22px; }
.vp-prop65__text,
.vp-prop65__link { font-size: 13px; }
}
/* END_SECTION:valor-prop65 */
/* START_SECTION:valor-quick-help (INDEX:76) */
.quick-help-section {
background-color: var(--vw-color-light-gray, #F4F4F4);
}
.quick-help-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--vw-sp-8, 8px);
margin-bottom: 0;
}
.quick-help-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.quick-help-card {
display: flex;
flex-direction: column;
gap: var(--vw-sp-12, 12px);
background-color: var(--vw-color-white, #FFFFFF);
border: 1px solid var(--vw-color-border, #E2E2E2);
border-radius: 2px;
padding: clamp(24px, 2.4vw, 32px);
text-decoration: none;
color: inherit;
transition: transform var(--vw-tr-base, 0.28s ease),
box-shadow var(--vw-tr-base, 0.28s ease),
border-color var(--vw-tr-base, 0.28s ease);
}
.quick-help-card:hover {
transform: translateY(-4px);
box-shadow: var(--vw-shadow-md, 0 6px 18px rgba(17, 17, 17, 0.08));
border-color: var(--vw-color-olive, #4A5E3A);
}
.quick-help-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vw-color-white, #FFFFFF);
background-color: var(--vw-color-olive, #4A5E3A);
border-radius: 2px;
transition: background-color var(--vw-tr-fast, 0.18s ease);
}
.quick-help-icon .valor-icon { width: 24px; height: 24px; }
/* .quick-help-card:hover .quick-help-icon {
background-color: var(--vw-color-charcoal, #1A2535);
} */
.quick-help-title {
font-family: var(--vw-font-heading, var(--typeHeaderPrimary));
font-size: clamp(15px,2vw, 20px);
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-charcoal, #1A2535);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.25;
margin: 0;
}
.quick-help-text {
font-size: 14px;
line-height: var(--vw-lh-relaxed, 1.55);
color: var(--vw-color-muted, #6E7480);
margin: 0;
flex: 1;
letter-spacing: 0;
}
.quick-help-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-family: var(--vw-font-body, var(--typeBasePrimary));
font-size: 12px;
font-weight: var(--vw-fw-bold, 700);
color: var(--vw-color-olive, #4A5E3A);
text-transform: uppercase;
letter-spacing: 0.16em;
transition: color var(--vw-tr-fast, 0.18s ease);
}
.quick-help-link .valor-icon {
width: 14px;
height: 14px;
transition: transform var(--vw-tr-fast, 0.18s ease);
}
.quick-help-card:hover .quick-help-link { color: var(--vw-color-charcoal, #1A2535); }
.quick-help-card:hover .quick-help-link .valor-icon { transform: translateX(3px); }
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.quick-help-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.quick-help-row { grid-template-columns: 1fr; }
.quick-help-head {
gap: 16px;
}
.quick-help-icon .valor-icon {
width: 18px;
height: 18px;
}
}
/* END_SECTION:valor-quick-help */
/* START_SECTION:valor-quick-tips (INDEX:77) */
.vw-quick-tips {
background-color: var(--vw-color-light-gray, #f4f4f4);
}
/* Optional intro paragraph below the heading. */
.vw-quick-tips-intro {
max-width: 64ch;
font-size: var(--vw-fs-17, 17px);
line-height: var(--vw-lh-relaxed, 1.65);
color: var(--vw-color-muted, #6e7480);
}
.vw-quick-tips-intro > *:first-child {
margin-top: 0;
}
.vw-quick-tips-intro > *:last-child {
margin-bottom: 0;
}
/* ---------- Horizontal Shorts scroller ---------- */
.vw-shorts-scroller {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 1fr);
gap: var(--vw-sp-24, 24px);
overflow-x: auto;
padding-bottom: var(--vw-sp-12, 12px);
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--vw-color-coyote, #8b7355) transparent;
}
.vw-shorts-scroller::-webkit-scrollbar {
height: 6px;
}
.vw-shorts-scroller::-webkit-scrollbar-thumb {
background-color: var(--vw-color-coyote, #8b7355);
}
.vw-short-card {
position: relative;
display: block;
width: 100%;
aspect-ratio: 9 / 16;
overflow: hidden;
background-color: var(--vw-color-charcoal, #1a2535);
scroll-snap-align: start;
border: 1px solid var(--vw-color-border, #e2e2e2);
text-decoration: none;
/* Button reset (cards are now