/** Shopify CDN: Minification failed
Line 3103:0 Unexpected "}"
**/
/* ============================================================
TRIKKO overrides on top of Prestige
============================================================ */
/* ---------- 0. Heavy display font for hero titles ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@500;600;700;800;900&display=swap');
/* ---------- 1. Announcement bar ---------- */
.shopify-section--announcement-bar .announcement-bar {
padding-block: 0.4rem !important;
}
.shopify-section--announcement-bar .announcement-bar p,
.shopify-section--announcement-bar .announcement-bar a,
.shopify-section--announcement-bar .announcement-bar .prose,
.shopify-section--announcement-bar .announcement-bar strong {
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.6875rem !important;
}
@media screen and (min-width: 700px) {
.shopify-section--announcement-bar .announcement-bar p,
.shopify-section--announcement-bar .announcement-bar a {
font-size: 0.75rem !important;
}
}
/* ---------- 2. Header ---------- */
.shopify-section--header {
--header-padding-block: 0.75rem;
}
@media screen and (min-width: 700px) {
.shopify-section--header {
--header-padding-block: 0.875rem;
}
}
/* Logo sizing — compact (~60px wide on both) */
.header__logo-image svg,
.header__logo-image img {
max-width: 56px !important;
height: auto !important;
}
@media screen and (min-width: 700px) {
.header__logo-image svg,
.header__logo-image img {
max-width: 60px !important;
}
}
/* Mobile hamburger / icons */
.shopify-section--header .header__nav-icon {
width: 20px !important;
height: 20px !important;
}
/* ---------- 2b. Header nav (compact, tight padding) ---------- */
.shopify-section--header .header__primary-nav-item > a,
.shopify-section--header .header__primary-nav-item .h6,
.shopify-section--header .header__primary-nav-item summary {
font-size: 0.6875rem !important; /* 11px */
letter-spacing: 0.06em !important;
font-weight: 600 !important;
padding: 0.5rem 0.625rem !important; /* tighter than Prestige default */
text-transform: uppercase !important;
line-height: 1 !important;
}
@media screen and (min-width: 1000px) {
.shopify-section--header .header__primary-nav-item > a,
.shopify-section--header .header__primary-nav-item .h6,
.shopify-section--header .header__primary-nav-item summary {
font-size: 0.75rem !important; /* 12px */
padding: 0.5rem 0.875rem !important;
}
}
/* Secondary nav (right-side icons + country) gap tighter */
.shopify-section--header .header__secondary-nav,
.shopify-section--header .header__icons {
gap: 0.5rem !important;
}
/* ---------- 2d. Auto white/black logo based on header transparent state ----------
When user uploads ONE logo only (no separate transparent_logo), invert it
while the header is in transparent mode (over the hero), then back to
original once the header becomes solid (scrolled past hero, hovered, etc.).
Prestige sets --header-show-transparent-logo to 1 in transparent mode. */
.header__logo-image:only-of-type {
filter: invert(var(--header-show-transparent-logo, 0));
transition: filter 0.2s;
}
/* ---------- 2c. Hide currency code/text in country selector ---------- */
/* Country selector should show only flag — kill any text/currency labels */
.shopify-section--header localization-selector .country-flag {
display: inline-flex !important;
}
.shopify-section--header localization-selector summary > span:not(.country-flag):not(.sr-only),
.shopify-section--header localization-selector .country-name,
.shopify-section--header localization-selector .currency-code,
.shopify-section--header .header__country-currency,
.shopify-section--header .currency-code {
display: none !important;
}
/* Trim disclosure arrow icon size */
.shopify-section--header localization-selector summary svg {
width: 8px !important;
height: 8px !important;
}
/* ---------- 3. Slideshow ---------- */
.shopify-section--slideshow {
--section-vertical-spacing-override: 0;
}
/* Hero height: near-fullscreen on mobile for max impact, slightly less on desktop */
.shopify-section--slideshow .content-over-media--fill {
--content-over-media-height: 95svh !important;
}
@media screen and (min-width: 700px) {
.shopify-section--slideshow .content-over-media--fill {
--content-over-media-height: 88svh !important;
}
}
/* Kill any black slideshow bg that could show in gaps */
.shopify-section--slideshow .slideshow {
background: transparent !important;
}
/* Hero subheading: small uppercase line above title */
.shopify-section--slideshow .slideshow__slide-content .prose .subheading,
.shopify-section--slideshow .slideshow__slide-content .prose p:first-child {
font-size: 0.8125rem !important; /* 13px */
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin-bottom: 0.5rem !important;
opacity: 0.95;
}
/* Hero title: big uppercase, medium-bold (Inter 700) — softer than Archivo Black */
.shopify-section--slideshow .slideshow__slide-content .prose .h1,
.shopify-section--slideshow .slideshow__slide-content .prose h1,
.shopify-section--slideshow .slideshow__slide-content .prose h2,
.shopify-section--slideshow .slideshow__slide-content .prose .h2 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 2.5rem !important; /* 40px mobile */
font-weight: 700 !important; /* was 900 — less heavy */
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
line-height: 1 !important;
margin: 0 !important;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 700px) {
.shopify-section--slideshow .slideshow__slide-content .prose .h1,
.shopify-section--slideshow .slideshow__slide-content .prose h1,
.shopify-section--slideshow .slideshow__slide-content .prose h2,
.shopify-section--slideshow .slideshow__slide-content .prose .h2 {
font-size: 3.5rem !important; /* 56px desktop */
}
}
/* No buttons in hero — kill any stray button container spacing */
.shopify-section--slideshow .slideshow__slide-content .button-group {
display: none !important;
}
/* Pagination dots visible at bottom */
.shopify-section--slideshow .page-dots,
.shopify-section--slideshow carousel-navigation {
position: absolute;
bottom: 1.25rem;
left: 0;
right: 0;
display: flex !important;
justify-content: center;
gap: 0.5rem;
z-index: 4;
pointer-events: auto;
}
.shopify-section--slideshow .page-dots button,
.shopify-section--slideshow carousel-navigation button {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.7);
background: transparent;
padding: 0;
cursor: pointer;
}
.shopify-section--slideshow .page-dots button[aria-current="true"],
.shopify-section--slideshow carousel-navigation button[aria-current="true"] {
background: #fff;
}
/* Placeholder slides: dark solid bg, no placeholder pattern */
.shopify-section--slideshow .placeholder-svg,
.shopify-section--slideshow .placeholder {
background: #1c1c1c;
fill: rgba(255,255,255,0.04);
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------- 4. Media-grid (category tiles) ---------- */
.shopify-section--media-grid {
--section-vertical-spacing-override: 0 !important;
--section-vertical-spacing: 0 !important;
--section-vertical-spacing-tight: 0 !important;
--section-stack-gap: 0 !important;
--section-stack-gap-tight: 0 !important;
}
.shopify-section--media-grid .section-spacing {
padding-block: 0 !important;
margin-block: 0 !important;
}
.shopify-section--media-grid .container,
.shopify-section--media-grid .container--full {
padding-inline: 0 !important;
max-width: 100% !important;
}
.shopify-section--media-grid .section-stack {
gap: 0 !important;
margin: 0 !important;
}
/* Hide stray section-header (subheading/title/content row) — none above tiles */
.shopify-section--media-grid .section-header,
.shopify-section--media-grid .section-stack > :not(media-grid) {
display: none !important;
}
/* Bordered separator line must not show */
.shopify-section--media-grid .bordered-section,
.shopify-section--media-grid .section-spacing.bordered-section {
border: 0 !important;
box-shadow: none !important;
}
.shopify-section--media-grid {
/* Force the CSS custom property at section level (highest origin), beats the
inline ID-scoped style Prestige injects at 1150px+ */
--media-grid-gap: 0px !important;
--container-gutter: 0px !important;
--content-over-media-gap: 0px !important;
--content-over-media-row-gap: 0px !important;
--content-over-media-column-gap: 0px !important;
}
.shopify-section--media-grid media-grid {
--media-grid-gap: 0px !important;
gap: 0px !important;
column-gap: 0px !important;
row-gap: 0px !important;
}
/* Kill any container gutter on every breakpoint */
.shopify-section--media-grid .container,
.shopify-section--media-grid .container--full {
--container-gutter: 0px !important;
padding-inline: 0px !important;
margin-inline: 0px !important;
max-width: 100% !important;
width: 100% !important;
}
/* Item margins + content-over-media row/column gaps */
.shopify-section--media-grid .media-grid__item,
.shopify-section--media-grid .media-grid__item .content-over-media {
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
}
.shopify-section--media-grid .media-grid__item--padded {
padding: 0 !important;
}
@media (max-width: 699px) {
/* Prestige uses `grid:` shorthand which sets template AND auto-flow. We must
override the column count var AND the grid-area on items to force 1-column. */
.shopify-section--media-grid media-grid {
--media-grid-column-count: 1 !important;
grid-template-columns: 1fr !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.shopify-section--media-grid .media-grid__item {
grid-area: auto / 1 / auto / -1 !important;
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
aspect-ratio: 4 / 5;
}
/* Kill any padding inside the banner that could leave a visible border */
.shopify-section--media-grid .media-grid__item .content-over-media {
width: 100% !important;
margin: 0 !important;
}
}
@media (min-width: 700px) {
/* Force 3 equal columns + reset grid-auto-rows so aspect-ratio 4:5 drives height
instead of Prestige's --media-grid-row-height (400px) constraint. */
.shopify-section--media-grid media-grid {
display: grid !important;
grid: none !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
grid-auto-flow: row !important;
--media-grid-row-height: auto !important;
width: 100% !important;
}
.shopify-section--media-grid .media-grid__item {
grid-area: auto !important;
grid-column: auto !important;
grid-row: auto !important;
aspect-ratio: 4 / 5 !important; /* true portrait 4:5 */
height: auto !important;
width: 100% !important;
}
/* Anchor cover-fitted images to the top so heads stay visible */
.shopify-section--media-grid .media-grid__item img,
.shopify-section--media-grid .content-over-media__media img {
object-fit: cover !important;
object-position: center top !important;
width: 100% !important;
height: 100% !important;
}
}
.shopify-section--media-grid .media-grid__item .content-over-media {
height: 100%;
}
.shopify-section--media-grid .placeholder-svg,
.shopify-section--media-grid .placeholder {
background: #2a2a2a;
fill: rgba(255,255,255,0.05);
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tile title: white, medium-bold (Inter 700 — matches hero slideshow) */
.shopify-section--media-grid .prose p,
.shopify-section--media-grid .prose h2 {
font-family: 'Inter', -apple-system, sans-serif !important;
color: #fff !important;
font-size: 2rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
line-height: 1 !important;
margin: 0 !important;
padding: 1.25rem !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
/* ---------- 5. Newsletter — same gray as PDP background ---------- */
.shopify-section--newsletter,
.shopify-section--newsletter .section-spacing,
.shopify-section--newsletter .newsletter {
background: #f2f2f2 !important;
color: #1c1c1c !important;
}
.shopify-section--newsletter .section-spacing {
padding-block: 1.25rem !important; /* tight on mobile */
border: 0 !important;
box-shadow: none !important;
}
.shopify-section--newsletter .newsletter {
padding-block: 0 !important;
}
.shopify-section--newsletter .content,
.shopify-section--newsletter .section-stack {
gap: 0.75rem !important;
}
.shopify-section--newsletter .container {
max-width: 38rem !important;
padding-inline: 1rem !important;
}
/* Title — heavy weight to match brand spec */
.shopify-section--newsletter h1,
.shopify-section--newsletter h2,
.shopify-section--newsletter .h0,
.shopify-section--newsletter .h1,
.shopify-section--newsletter .h2,
.shopify-section--newsletter .h3,
.shopify-section--newsletter .h4 {
font-family: 'Inter', -apple-system, sans-serif !important;
color: #1c1c1c !important;
font-size: 1rem !important;
font-weight: 800 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
margin: 0 !important;
-webkit-font-smoothing: antialiased;
}
/* DESKTOP: newsletter goes BIG — more breathing room, wider, bigger title */
@media (min-width: 700px) {
.shopify-section--newsletter .section-spacing {
padding-block: 3.5rem !important;
}
.shopify-section--newsletter .content,
.shopify-section--newsletter .section-stack {
gap: 1.25rem !important;
}
.shopify-section--newsletter .container {
max-width: 56rem !important;
padding-inline: 2rem !important;
}
.shopify-section--newsletter h1,
.shopify-section--newsletter h2,
.shopify-section--newsletter .h0,
.shopify-section--newsletter .h1,
.shopify-section--newsletter .h2 {
font-size: 2rem !important;
letter-spacing: 0.02em !important;
}
/* Form fields taller on desktop */
.shopify-section--newsletter .form-row .field,
.shopify-section--newsletter input[type="email"],
.shopify-section--newsletter button[type="submit"] {
height: 3.5rem !important;
font-size: 0.9375rem !important;
}
.shopify-section--newsletter button[type="submit"] {
padding: 0 2.25rem !important;
}
}
@media (min-width: 1000px) {
.shopify-section--newsletter .section-spacing {
padding-block: 4.5rem !important;
}
.shopify-section--newsletter .container {
max-width: 64rem !important;
}
.shopify-section--newsletter h1,
.shopify-section--newsletter h2,
.shopify-section--newsletter .h0,
.shopify-section--newsletter .h1,
.shopify-section--newsletter .h2 {
font-size: 2.5rem !important;
}
}
/* Form: full width, input + button on ONE line (override Prestige flex-wrap) */
.shopify-section--newsletter .form-row,
.shopify-section--newsletter form {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
display: flex !important;
flex-wrap: nowrap !important; /* Prestige sets wrap — override */
gap: 0 !important;
align-items: stretch;
}
/* Prestige's .form-control has flex-basis: 14rem forcing wrap on mobile.
Override so it can shrink and stay on one line with the button. */
.shopify-section--newsletter .form-row > .form-control,
.shopify-section--newsletter .form-row .field {
flex: 1 1 0 !important;
min-width: 0 !important;
margin: 0 !important;
}
.shopify-section--newsletter .form-row > button {
flex: 0 0 auto !important;
}
.shopify-section--newsletter .form-row .field,
.shopify-section--newsletter input[type="email"] {
height: 3rem !important;
border-radius: 0 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
background: #fff !important;
font-size: 0.875rem !important;
letter-spacing: 0.04em;
padding: 0 1rem !important;
text-transform: uppercase;
font-weight: 700 !important;
width: 100% !important;
}
.shopify-section--newsletter input[type="email"]::placeholder {
font-weight: 700;
color: #1c1c1c;
opacity: 1;
text-transform: uppercase;
}
.shopify-section--newsletter button[type="submit"] {
flex: 0 0 auto;
height: 3rem !important;
border-radius: 0 !important;
background: #1c1c1c !important;
color: #fff !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
font-size: 0.875rem !important;
padding: 0 1.75rem !important;
border: 0 !important;
}
/* Privacy disclaimer — below the form, small, centered */
.shopify-section--newsletter .newsletter__disclaimer,
.shopify-section--newsletter .newsletter__disclaimer p {
font-size: 0.75rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.4 !important;
text-align: center;
margin: 0 !important;
color: #1c1c1c !important;
}
.shopify-section--newsletter .newsletter__disclaimer a {
color: #0066cc !important;
text-decoration: underline;
}
/* ---------- 6. Footer — white bg, balanced spacing ---------- */
.shopify-section--footer,
.shopify-section--footer .footer {
background: #ffffff !important;
color: #1c1c1c !important;
}
.shopify-section--footer .footer {
padding-block: 1.75rem !important;
}
/* Spacing between footer columns (SUPPORT, LEGAL, SOCIALS) */
.shopify-section--footer .footer__inner,
.shopify-section--footer .footer__block-list,
.shopify-section--footer .section-stack {
gap: 1.5rem !important;
}
/* Stack footer blocks VERTICALLY on desktop (was horizontal row before).
Result: menu-inferior on its own line, socials below it. */
@media (min-width: 700px) {
.shopify-section--footer {
--footer-content-justify-items: center !important;
}
.shopify-section--footer .footer__block-list {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: nowrap !important;
text-align: center !important;
gap: 0.75rem !important;
}
.shopify-section--footer .footer__block {
flex: 0 0 auto !important;
text-align: center !important;
width: auto !important;
}
}
.shopify-section--footer .footer__block,
.shopify-section--footer .footer__block--links,
.shopify-section--footer .footer__block--text {
margin: 0 !important;
padding: 0 !important;
}
/* Column heading */
.shopify-section--footer .footer__block .h6,
.shopify-section--footer .footer__block strong,
.shopify-section--footer .footer__block .footer__block-heading,
.shopify-section--footer .footer__block h2,
.shopify-section--footer .footer__block h3,
.shopify-section--footer .footer__block h4 {
font-size: 0.875rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
color: #1c1c1c !important;
margin: 0 0 0.75rem !important;
line-height: 1.2 !important;
}
/* Links + paragraph */
.shopify-section--footer .footer__block a,
.shopify-section--footer .footer__block p,
.shopify-section--footer .footer__block li,
.shopify-section--footer .footer__block .link-faded,
.shopify-section--footer .footer__block .link-faded-reverse {
font-size: 0.875rem !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
color: #1c1c1c !important;
text-decoration: none;
line-height: 1.7 !important;
margin: 0 !important;
padding: 0 !important;
}
.shopify-section--footer .footer__block ul {
margin: 0 !important;
padding: 0 !important;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem !important;
white-space: nowrap;
}
.shopify-section--footer .footer__block li {
line-height: 1.7 !important;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
/* Dot separators between link items on desktop too */
.shopify-section--footer .footer__block:not(.footer__block--socials) li + li::before {
content: "·";
margin-right: 0.5rem;
color: #1c1c1c;
opacity: 0.45;
flex: 0 0 auto;
}
/* v-stack inside footer blocks */
.shopify-section--footer .footer .v-stack,
.shopify-section--footer .footer .v-stack.gap-4,
.shopify-section--footer .footer .v-stack.gap-5 {
gap: 0.5rem !important;
}
/* SOCIALS column — heading + horizontal icon row, solid black icons */
.shopify-section--footer .footer__block--socials {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Hide the 'SOCIALS' heading — only icons should show */
.shopify-section--footer .footer__block--socials .footer__socials-heading,
.shopify-section--footer .footer__block--socials .h6 {
display: none !important;
}
.shopify-section--footer .footer__block--socials ul,
.shopify-section--footer .footer__block--socials .social-media,
.shopify-section--footer .footer__block--socials .social-media--list {
display: flex !important;
flex-direction: row !important;
gap: 1rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.shopify-section--footer .footer__block--socials li,
.shopify-section--footer .footer__block--socials .social-media__item {
margin: 0 !important;
opacity: 1 !important; /* kill Prestige's 0.65 opacity */
}
.shopify-section--footer .footer__block--socials a {
color: #1c1c1c !important;
}
.shopify-section--footer .footer__block--socials svg {
width: 22px !important;
height: 22px !important;
fill: #1c1c1c !important;
color: #1c1c1c !important;
}
.shopify-section--footer .footer__block--socials svg path,
.shopify-section--footer .footer__block--socials svg circle,
.shopify-section--footer .footer__block--socials svg rect {
fill: currentColor !important;
}
/* Tight bottom row (socials/payments/copyright) */
.shopify-section--footer .footer__content-bottom,
.shopify-section--footer .footer__bottom {
padding-block: 0.5rem !important;
gap: 0.4rem !important;
border: 0 !important;
margin-top: 0.5rem !important;
}
/* Payment methods — tight inline row */
.shopify-section--footer .payment-methods,
.shopify-section--footer .list-payment-methods {
display: flex !important;
flex-wrap: wrap;
gap: 0.3rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
justify-content: center;
}
.shopify-section--footer .payment-methods li,
.shopify-section--footer .list-payment-methods li {
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center;
}
.shopify-section--footer .payment-methods svg,
.shopify-section--footer .list-payment-methods svg,
.shopify-section--footer .payment-methods img,
.shopify-section--footer .list-payment-methods img {
height: 1.4rem !important;
width: auto;
display: block;
}
/* Social media icons — small + tight */
.shopify-section--footer .list-social,
.shopify-section--footer .footer__social-media {
display: flex !important;
gap: 0.75rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.shopify-section--footer .list-social svg {
width: 18px !important;
height: 18px !important;
}
/* Copyright + country selector row — very small */
.shopify-section--footer .copyright,
.shopify-section--footer .footer__copyright {
font-size: 0.75rem !important;
letter-spacing: 0.04em;
margin: 0.4rem 0 !important;
text-transform: uppercase;
}
/* Country selector in footer: only flag, no EUR € text */
.shopify-section--footer localization-selector summary > span:not(.country-flag):not(.sr-only),
.shopify-section--footer localization-selector .country-name,
.shopify-section--footer localization-selector .currency-code,
.shopify-section--footer .currency-code,
.shopify-section--footer .footer__country-currency {
display: none !important;
}
.shopify-section--footer localization-selector summary {
padding: 0.2rem 0.4rem !important;
font-size: 0 !important;
}
.shopify-section--footer localization-selector summary svg {
width: 8px !important;
height: 8px !important;
}
/* ---------- 6d. Footer logo block ---------- */
.shopify-section--footer .footer__block--image {
margin-bottom: 0.5rem !important;
}
.shopify-section--footer .footer__block--image img {
max-width: 90px !important;
height: auto !important;
}
/* ---------- 6e. WhatsApp block — icon to left, ---------- */
.shopify-section--footer .footer__block--text:has([class*="title"]:first-child) {
/* Default text block layout */
}
/* Target the WhatsApp block specifically by its title text via :has() */
.shopify-section--footer .footer__block--text .h6,
.shopify-section--footer .footer__block--text strong {
font-size: 0.875rem !important;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
margin: 0 0 0.25rem !important;
color: #1c1c1c !important;
}
/* WhatsApp block — marked via footer.liquid (.footer__block--whatsapp) */
.shopify-section--footer .footer__block--whatsapp {
position: relative;
padding-left: 2.5rem !important;
min-height: 2.5rem;
margin-bottom: 0.75rem !important;
}
.shopify-section--footer .footer__block--whatsapp::before {
content: '';
position: absolute;
left: 0;
top: 0.1rem;
width: 1.5rem;
height: 1.5rem;
background: no-repeat center/contain url("data:image/svg+xml;utf8,");
}
.shopify-section--footer .footer__block--whatsapp p {
line-height: 1.5 !important;
margin: 0 !important;
}
.shopify-section--footer .footer__block--whatsapp a {
display: inline-block;
margin-top: 0.25rem;
text-decoration: none; /* Prestige already adds underline via background gradient */
}
/* ---------- 6b. Hide Shopify "Follow on shop" button ---------- */
.shopify-section--footer shop-follow-button,
.shopify-section--footer .shop-follow-button,
shop-follow-button,
.follow-on-shop {
display: none !important;
}
/* ---------- 6c. Force solid black text — kill Prestige's 0.65 opacity ---------- */
.shopify-section--footer .text-subdued,
.shopify-section--footer .link-faded,
.shopify-section--footer .link-faded-reverse,
.shopify-section--footer .footer__block .link-faded,
.shopify-section--footer .footer__block a,
.shopify-section--footer .copyright,
.shopify-section--footer p.heading.text-subdued {
color: #1c1c1c !important;
opacity: 1 !important;
}
/* ---------- 7. Global typography ---------- */
body {
letter-spacing: 0 !important;
}
/* ---------- 8. Mobile-only safe-area padding ---------- */
@media (max-width: 699px) {
.container,
.container--lg,
.container--md {
padding-inline: 1rem !important;
}
}
/* ============================================================
COLLECTION PAGE (PLP)
============================================================ */
/* WHITE EVERYWHERE — body, sections, containers, wrappers */
body.template-collection,
.template-collection,
.template-collection main,
.template-collection #main,
.template-collection .shopify-section,
.template-collection .shopify-section--main-collection,
.template-collection .shopify-section--collection-banner,
.template-collection .section-spacing,
.template-collection .container {
background: #ffffff !important;
}
/* Collection banner: TIGHT padding, big uppercase title left-aligned */
.shopify-section--collection-banner {
background: #ffffff !important;
padding-block: 0.5rem 0 !important;
}
.shopify-section--collection-banner .section-spacing {
padding-block: 0.5rem 0 !important;
}
.shopify-section--collection-banner .container {
background: #ffffff !important;
padding-block: 0 !important;
}
.shopify-section--collection-banner .h1,
.shopify-section--collection-banner h1,
.shopify-section--collection-banner h2 {
font-size: 1.5rem !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
text-align: center !important;
margin: 0 auto !important;
line-height: 1.1 !important;
}
/* MOBILE collections menu — horizontal-scroll cells with vertical dividers */
.collection-banner__mobile-menu {
display: none;
}
@media (max-width: 699px) {
/* Hide title when mobile menu is rendered (menu is now sibling of .prose, so use :has on section) */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .collection-banner__title,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .h1.collection-banner__title {
display: none !important;
}
/* NUCLEAR: zero every descendant's padding/margin/min-height, then restore link cell padding */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu),
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) * {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
min-block-size: 0 !important;
}
/* Hide the collection image + parallax + breadcrumb when mobile menu is shown */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) image-parallax,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) picture,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) > collection-banner > picture,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .content-over-media > picture,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) > collection-banner > nav.breadcrumb,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) > collection-banner > .breadcrumb {
display: none !important;
}
/* content-over-media is grid by default — make sure prose isn't grid-placed with extra space */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .content-over-media {
display: block !important;
grid: none !important;
}
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .prose {
display: block !important;
grid: none !important;
place-self: auto !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* Menu wrapper: viewport-sized with internal horizontal scroll */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .collection-banner__mobile-menu {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
background: #fff !important;
}
/* Make the SECTION itself sticky — its containing block is body (tall), so it works.
Since the section now only contains the menu (image/breadcrumb hidden), it sticks correctly.
border-bottom: separator line between menu and FILTER toolbar (otherwise menu bg overpaints
the toolbar's top box-shadow). */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) {
position: sticky !important;
top: var(--sticky-area-height, 0px) !important;
z-index: 3 !important;
background: #fff !important;
border-bottom: 1px solid #e0e0e0 !important;
}
/* Toolbar: NOT sticky — scrolls away with the page (Prestige default is sticky) */
.template-collection .collection-toolbar,
.shopify-section--main-collection .collection-toolbar {
position: static !important;
inset-block-start: auto !important;
top: auto !important;
}
/* Outer scroll wrapper — NO borders (use header bottom + toolbar top as shared lines) */
.collection-banner__mobile-menu {
display: block !important;
width: 100%;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff;
box-sizing: border-box;
}
.collection-banner__mobile-menu::-webkit-scrollbar { display: none; }
/* Inline cells — full-height vertical dividers, no top/bottom padding so they touch
the header's bottom border above and the toolbar's top border below */
.collection-banner__mobile-menu-list {
display: inline-flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
list-style: none;
width: max-content;
align-items: stretch;
}
.collection-banner__mobile-menu-list li {
flex: 0 0 auto;
border-right: 1px solid #e0e0e0;
display: flex;
align-items: stretch;
margin: 0 !important;
padding: 0 !important;
}
.collection-banner__mobile-menu-list li:last-child { border-right: 0; }
/* Higher specificity than the universal * reset above. Match FILTER toolbar height. */
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .collection-banner__mobile-menu-link,
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) a.collection-banner__mobile-menu-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 0.9rem !important; /* horizontal only; min-height drives vertical */
min-height: 2.25rem !important; /* compact but legible, matches new toolbar height */
font-size: 0.6875rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #9b9b9b !important;
text-decoration: none !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
white-space: nowrap;
line-height: 1 !important;
}
.shopify-section--collection-banner:has(.collection-banner__mobile-menu) .collection-banner__mobile-menu-link.is-active {
color: #1c1c1c !important;
background: transparent !important;
font-weight: 700 !important;
}
/* Reduce gap between menu and the FILTER toolbar that follows */
.shopify-section--collection-banner + .shopify-section--main-collection .section-spacing {
padding-top: 0 !important;
}
.shopify-section--collection-banner + .shopify-section--main-collection .collection-toolbar {
margin-top: 0 !important;
}
}
/* Title row: small uppercase title + layout switcher on the right (slotted via JS) */
.shopify-section--collection-banner .prose,
.shopify-section--collection-banner .container,
.shopify-section--collection-banner [class*="container--align"] {
text-align: left !important;
justify-items: stretch !important;
align-items: stretch !important;
}
.shopify-section--collection-banner .collection-banner__title-row {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin-top: 2rem !important;
margin-bottom: 0.5rem;
padding-inline: 1rem;
box-sizing: border-box;
}
@media (min-width: 1000px) {
.shopify-section--collection-banner .collection-banner__title-row {
margin-top: 3rem !important;
margin-bottom: 1rem;
}
}
/* Hide the breadcrumb (Home / Shop / [collection]) */
.shopify-section--collection-banner .breadcrumb,
.shopify-section--collection-banner nav.breadcrumb,
.shopify-section--collection-banner .breadcrumb--floating {
display: none !important;
}
/* Kill prose's "lobotomized owl" margin-top from any sibling inside title-row */
.shopify-section--collection-banner .collection-banner__title-row > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.shopify-section--collection-banner .collection-banner__title-row .collection-banner__title,
.shopify-section--collection-banner .h1.collection-banner__title {
text-align: left !important;
margin: 0 !important;
flex: 1 1 auto;
font-size: 1.125rem !important;
line-height: 1.1 !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-left: none !important;
align-items: center;
gap: 0.4rem;
background: transparent !important;
}
/* Respect the device-specific visibility classes (sm:hidden for mobile-only
switcher, sm-max:hidden for desktop-only switcher) while still using flex.
Force flex-direction:row so the icons sit side-by-side (overriding any
default block/column layout on the collection-layout-switch element). */
@media (max-width: 699px) {
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list[device="mobile"] {
display: flex !important;
flex-direction: row !important;
}
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list[device="desktop"] {
display: none !important;
}
}
@media (min-width: 700px) {
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list[device="desktop"] {
display: flex !important;
flex-direction: row !important;
}
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list[device="mobile"] {
display: none !important;
}
}
/* View selector buttons: match title size, no border, no padding, no margin */
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list button,
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list .collection-toolbar__button {
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
width: auto !important;
height: auto !important;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1 !important;
}
/* Make SVG icons match the title's visual size */
.shopify-section--collection-banner .collection-banner__title-row .collection-toolbar__layout-switch-list svg {
width: 1.125rem !important;
height: 1.125rem !important;
display: block;
}
/* Hide the entire collection toolbar (FILTER + SORT BY) — only the view switch
remains, which has been moved up next to the title via JS */
.shopify-section--main-collection .collection-toolbar {
display: none !important;
}
@media (min-width: 700px) {
.shopify-section--collection-banner .h1,
.shopify-section--collection-banner h1 {
font-size: 2.25rem !important;
}
}
/* Hide collection description / image / breadcrumbs in banner if present */
.shopify-section--collection-banner .rte,
.shopify-section--collection-banner .collection-banner__description,
.shopify-section--collection-banner picture {
display: none !important;
}
/* Main collection section */
.shopify-section--main-collection {
background: #ffffff !important;
padding-block: 0 !important;
}
.shopify-section--main-collection .section-spacing {
background: #ffffff !important;
padding-block: 0 0 2rem !important;
}
/* Toolbar styling */
.shopify-section--main-collection .collection-toolbar {
background: #ffffff !important;
box-shadow: 0 1px #e0e0e0, 0 -1px #e0e0e0 !important;
--border-color: 224 224 224;
min-height: 2.25rem !important;
}
.shopify-section--main-collection .collection-toolbar__button {
padding-block: 0.25rem !important;
line-height: 1 !important;
min-height: 2.25rem !important;
}
/* Brute-force full-bleed for toolbar — applies on ALL viewports */
.shopify-section--main-collection .collection-toolbar {
margin-left: -100vw !important;
margin-right: -100vw !important;
padding-left: 100vw !important;
padding-right: 100vw !important;
}
/* Kill any parent overflow that would clip the over-extended toolbar */
.shopify-section--main-collection,
.shopify-section--main-collection .section-spacing,
.shopify-section--main-collection .container,
.shopify-section--main-collection .v-stack {
overflow: visible !important;
}
/* On collection pages, the toolbar uses -100vw margins to bleed full-width.
Contain that overflow on the section itself so the page body doesn't get
horizontal scroll. overflow-x: clip is preferred (doesn't create a containing
block for fixed positioning, so the floating header still works). */
.shopify-section--main-collection {
overflow-x: clip !important;
}
/* Also clip the main wrapper as a safety net (body:has() catches the page) */
body:has(.shopify-section--main-collection) main {
overflow-x: clip !important;
}
/* Banner: full width (lines edge-to-edge), title centered via text-align */
.shopify-section--collection-banner .container,
.shopify-section--collection-banner .container--lg,
.shopify-section--collection-banner .container--xl,
.shopify-section--collection-banner .container--md {
--container-max-width: 100% !important;
max-width: 100% !important;
}
.shopify-section--collection-banner .content-over-media {
max-width: 100% !important;
}
/* Main collection: FULL WIDTH grid (edge-to-edge layout) */
.shopify-section--main-collection > div > .container,
.shopify-section--main-collection .container {
--container-max-width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
padding-inline: var(--container-gutter) !important;
}
/* Force equal column distribution — respect layout switchers on both mobile and desktop */
/* DESKTOP layout switch (≥1000px): large=3, medium=4 (default), compact=5 */
@media (min-width: 1000px) {
.shopify-section--main-collection .product-list,
.shopify-section--main-collection .product-list[collection-desktop-layout="medium"] {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.shopify-section--main-collection .product-list[collection-desktop-layout="large"] {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.shopify-section--main-collection .product-list[collection-desktop-layout="compact"] {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
/* TABLET (700-999px): 3 columns */
@media (min-width: 700px) and (max-width: 999px) {
.shopify-section--main-collection .product-list {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
/* MOBILE layout switch (≤699px): medium=2 (default), large=1 */
@media (max-width: 699px) {
.shopify-section--main-collection .product-list,
.shopify-section--main-collection .product-list[collection-mobile-layout="medium"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.shopify-section--main-collection .product-list[collection-mobile-layout="large"] {
grid-template-columns: 1fr !important;
}
}
.shopify-section--main-collection .collection-toolbar__button {
opacity: 1 !important;
color: #9b9b9b !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-size: 0.8125rem !important;
text-align: center !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
}
.shopify-section--main-collection .collection-toolbar__button .text-with-icon,
.shopify-section--main-collection .collection-toolbar__button > span {
justify-content: center !important;
}
.shopify-section--main-collection .collection-toolbar__button:hover,
.shopify-section--main-collection .collection-toolbar__button.is-active,
.shopify-section--main-collection .collection-toolbar__button[aria-expanded="true"] {
opacity: 1 !important;
color: #1c1c1c !important;
}
.shopify-section--main-collection .collection-toolbar__button-container {
display: flex !important;
align-items: center;
justify-content: center;
}
.shopify-section--main-collection .collection-toolbar__button-container + .collection-toolbar__button-container {
border-inline-start-color: #e0e0e0 !important;
}
.shopify-section--main-collection .collection-toolbar__layout-switch-list {
border-inline-start-color: #e0e0e0 !important;
justify-content: center !important;
flex: 1;
}
/* Grid switcher icons */
.shopify-section--main-collection collection-layout-switch button svg {
color: #c8c8c8;
}
.shopify-section--main-collection collection-layout-switch button.is-active svg {
color: #1c1c1c;
}
/* Product grid */
.shopify-section--main-collection .product-list,
.shopify-section--main-collection [data-product-list],
.shopify-section--main-collection .grid {
background: #ffffff !important;
gap: 1rem !important;
}
@media (max-width: 699px) {
.shopify-section--main-collection .product-list,
.shopify-section--main-collection [data-product-list],
.shopify-section--main-collection ul.grid:not(.product-card-actions__grid) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
--grid-mobile-horizontal-spacing: 0.5rem;
column-gap: 0.5rem !important;
row-gap: 1.5rem !important;
}
}
/* Product card: gray bg directly on the ![]()
+ subtle rounded corners. */
.shopify-section--main-collection product-card,
.shopify-section--main-collection .product-card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.shopify-section--main-collection product-card img,
.shopify-section--main-collection .product-card img {
background-color: #f2f2f2 !important;
border-radius: 6px !important;
}
/* ============================================================
Pages (e.g. OUR STORY): hide auto page title H1, center content
============================================================ */
.shopify-section--main-page h1.h1,
.shopify-section--main-page .page__title,
.shopify-section--main-page header h1 {
display: none !important;
}
.shopify-section--main-page .prose,
.shopify-section--main-page article,
.shopify-section--main-page .rte {
text-align: center !important;
}
.shopify-section--main-page .prose > *,
.shopify-section--main-page article > *,
.shopify-section--main-page .rte > * {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.shopify-section--main-page .prose img,
.shopify-section--main-page article img,
.shopify-section--main-page .rte img {
display: block;
margin-left: auto !important;
margin-right: auto !important;
border: 1px solid #1c1c1c;
}
/* ============================================================
PDP layered look: gray page bg + white info card (EME-style)
============================================================ */
/* Cart drawer, modals, and other overlays must appear above the floating header
(which is z-index: 9999). Bump them past it. */
cart-drawer,
x-drawer,
x-modal,
.drawer,
.modal,
dialog-modal {
z-index: 10000 !important;
}
/* ============================================================
CART DRAWER — match Trikko PDP design language (Inter, compact)
============================================================ */
/* Inter everywhere inside the drawer */
.cart-drawer,
.cart-drawer * {
font-family: 'Inter', -apple-system, sans-serif !important;
}
/* Header "CART" — bold, uppercase, compact */
.cart-drawer [slot="header"],
.cart-drawer p.h4[slot="header"] {
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* Drawer padding tighter — reduced header padding */
.cart-drawer {
--drawer-header-padding-block: 0.5rem;
--drawer-header-padding-inline: 1rem;
--drawer-body-padding-block: 0.5rem;
--drawer-body-padding-inline: 1rem;
--drawer-footer-padding-block: 0.75rem;
--drawer-footer-padding-inline: 1rem;
}
/* TRIKKO: drawer flush with right edge, only LEFT corners rounded (top + bottom) */
.cart-drawer::part(content) {
border-radius: 8px 0 0 8px !important;
overflow: hidden !important;
}
/* Remove ALL separator borders inside the drawer (header/body/footer dividers) */
.cart-drawer::part(header),
.cart-drawer::part(body),
.cart-drawer::part(footer) {
border: none !important;
box-shadow: none !important;
}
/* Line item — title compact */
.cart-drawer .line-item a,
.cart-drawer .line-item p:not(.text-subdued):not(.smallcaps) {
font-size: 0.75rem !important; /* 12px (was 13px) */
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #1c1c1c !important;
line-height: 1.25 !important;
}
/* Price (line item) — solid black, smaller */
.cart-drawer .price-list,
.cart-drawer .price-list *,
.cart-drawer .line-item .price {
font-size: 0.75rem !important; /* 12px (was 13px) */
font-weight: 500 !important;
color: #1c1c1c !important;
letter-spacing: -0.01em !important;
}
/* Variant title ("M") — even smaller chip */
.cart-drawer .line-item .smallcaps,
.cart-drawer .line-item .text-subdued.smallcaps {
font-size: 0.625rem !important; /* 10px (was 11px) */
font-weight: 600 !important;
letter-spacing: 0.04em !important;
color: #1c1c1c !important;
text-transform: uppercase !important;
}
/* Quantity selector — minimal + smaller, no border */
.cart-drawer quantity-selector,
.cart-drawer .quantity-selector {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
min-height: 0 !important;
height: 26px !important;
}
.cart-drawer quantity-selector input,
.cart-drawer .quantity-selector input {
font-size: 0.6875rem !important; /* 11px (was 13px) */
font-weight: 500 !important;
color: #1c1c1c !important;
height: 24px !important;
padding: 0 !important;
min-width: 24px !important;
max-width: 32px !important;
}
.cart-drawer quantity-selector button,
.cart-drawer .quantity-selector button {
padding: 0 0.4rem !important;
height: 24px !important;
min-height: 0 !important;
font-size: 0.75rem !important;
}
.cart-drawer quantity-selector svg,
.cart-drawer .quantity-selector svg {
width: 10px !important;
height: 10px !important;
}
/* Remove link — gray, no underline */
.cart-drawer .line-item a.link {
font-size: 0.6875rem !important;
color: #999 !important;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500 !important;
}
.cart-drawer .line-item a.link:hover {
color: #1c1c1c !important;
}
/* Secondary text (taxes...) — smaller and lighter */
.cart-drawer .cart-drawer__footer .text-subdued,
.cart-drawer p.text-subdued {
font-size: 0.6875rem !important;
font-weight: 500 !important;
color: #999 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Hide "Add order note" link + its dialog trigger */
.cart-drawer button.link-faded-reverse[aria-controls*="cart-note"],
.cart-drawer cart-note-dialog {
display: none !important;
}
/* Empty cart state — gif + tight-spaced "Your cart is empty" text */
.cart-drawer .trikko-cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem 1rem;
text-align: center;
}
.cart-drawer .trikko-cart-empty__gif {
width: 260px;
height: auto;
max-width: 80%;
border-radius: 6px;
display: block;
}
.cart-drawer .trikko-cart-empty__text {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
color: #1c1c1c !important;
margin: 0 !important;
text-transform: none !important;
}
/* COMPLETE THE FIT — recommended products in cart drawer.
Compact layout so the whole drawer fits above the fold on most mobile devices. */
.cart-drawer .trikko-complete-fit {
margin: 0.75rem 0 0.5rem;
padding: 0.625rem 0.625rem 0.5rem;
background: #f2f2f2;
border-radius: 6px;
}
.cart-drawer .trikko-complete-fit__heading {
font-family: 'Inter', sans-serif;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1c1c1c;
margin: 0 0 0.4rem;
}
.cart-drawer .trikko-complete-fit__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
}
.cart-drawer .trikko-rec {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.cart-drawer .trikko-rec__media {
display: block !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
background: #ffffff !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.cart-drawer .trikko-rec__media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
}
/* Force grid columns to be equal width regardless of content */
.cart-drawer .trikko-complete-fit__list {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: stretch !important;
}
.cart-drawer .trikko-rec {
min-width: 0 !important;
height: 100% !important;
}
.cart-drawer .trikko-rec__media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cart-drawer .trikko-rec__info {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.1rem 0;
}
.cart-drawer .trikko-rec__title {
font-family: 'Inter', sans-serif !important;
font-size: 0.625rem !important; /* 10px — tighter */
font-weight: 600 !important;
color: #1c1c1c !important;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 1; /* was 2 — single line */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cart-drawer .trikko-rec__price {
font-family: 'Inter', sans-serif;
font-size: 0.6875rem;
font-weight: 500;
color: #1c1c1c;
}
/* Size selector — looks like a tappable button with chevron */
.cart-drawer .trikko-rec__size-wrap {
position: relative;
display: block;
}
.cart-drawer .trikko-rec__size {
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
font-weight: 600;
color: #1c1c1c;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 0.35rem 1.1rem 0.35rem 0.5rem;
background: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
width: 100%;
box-sizing: border-box;
line-height: 1.1;
}
.cart-drawer .trikko-rec__size:focus {
outline: 1px solid #1c1c1c;
outline-offset: 1px;
}
.cart-drawer .trikko-rec__size-chevron {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #1c1c1c;
}
.cart-drawer .trikko-rec__add {
margin-top: 0.15rem;
background: #1c1c1c;
color: #fff;
border: 0;
border-radius: 4px;
padding: 0.35rem 0.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s;
}
.cart-drawer .trikko-rec__add:hover {
background: #000;
}
.cart-drawer .trikko-rec__add:disabled {
opacity: 0.6;
cursor: wait;
}
/* TOTAL row above the checkout button — label left + amount right, no separator */
.cart-drawer .trikko-cart-total {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 0 0.5rem;
border: none !important;
margin: 0;
}
.cart-drawer .trikko-cart-total__label {
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #1c1c1c;
}
.cart-drawer .trikko-cart-total__amount {
font-family: 'Inter', sans-serif;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #1c1c1c;
}
/* Kill default footer top border / spacing to keep things compact */
.cart-drawer .cart-drawer__footer {
border-top: none !important;
gap: 0.5rem !important;
}
.cart-drawer .drawer::part(footer),
.cart-drawer [slot="footer"] {
border-top: none !important;
}
/* SECURE CHECKOUT button — centered text, subtle rounded corners, compact */
.cart-drawer button[name="checkout"] {
border-radius: 6px !important;
padding-inline: 1.25rem !important;
min-height: 46px;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 0.8125rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box;
width: 100%;
}
.cart-drawer button[name="checkout"] .trikko-checkout__label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
text-align: center;
line-height: 1;
}
.cart-drawer button[name="checkout"] .trikko-checkout__lock {
display: inline-block;
flex-shrink: 0;
margin-top: -1px; /* optical center with caps text */
}
/* Trust strip inside cart drawer (modifier) — darker, tighter, compact.
Allow wrap because cart drawer is narrower than PDP info card on mobile. */
.cart-drawer .trikko-trust-strip--cart {
margin: 0.5rem 0 0 !important;
font-size: 0.5625rem !important;
letter-spacing: 0.04em !important;
font-weight: 600 !important;
color: #1c1c1c !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
row-gap: 0.2rem !important;
padding-inline: 0.5rem !important;
}
.cart-drawer .trikko-trust-strip--cart li + li::before {
margin-right: 0.35rem !important;
color: #1c1c1c !important;
opacity: 0.5;
}
/* Very narrow cart drawer: scale text down a notch more */
@media (max-width: 380px) {
.cart-drawer .trikko-trust-strip--cart {
font-size: 0.5rem !important; /* 8px */
letter-spacing: 0.03em !important;
gap: 0.25rem !important;
}
.cart-drawer .trikko-trust-strip--cart li + li::before {
margin-right: 0.25rem !important;
}
}
/* Shipping text — tiny + tight, sits BELOW the trust strip */
.cart-drawer .trikko-cart-shipping-text {
font-family: 'Inter', sans-serif !important;
font-size: 0.5625rem !important;
font-weight: 400 !important;
color: #b0b0b0 !important;
text-align: center;
margin: 0.2rem 0 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.2 !important;
}
/* Payment icons row in cart drawer — single line, compact */
.cart-drawer .trikko-cart-payment-icons {
list-style: none;
padding: 0;
margin: 0.5rem 0 0 !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
flex-wrap: nowrap;
}
.cart-drawer .trikko-cart-payment-icons__item {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
min-width: 0;
}
.cart-drawer .trikko-cart-payment-icons__svg {
display: block;
height: 16px;
width: auto;
max-width: 34px;
}
/* Line items: clean rows — no card wrapper, just the image + info.
Only the image gets the gray bg + rounded corners (matches PDP cards). */
.cart-drawer .cart-drawer__items {
background: transparent !important;
padding: 0 !important;
margin: 0 0 0.5rem !important;
border-radius: 0 !important;
}
.cart-drawer .line-item {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0.3rem 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.cart-drawer .line-item + .line-item {
margin-top: 0 !important;
border-top: none !important;
}
.cart-drawer .line-item__media {
background: #f2f2f2 !important;
border-radius: 6px;
width: 90px !important;
height: 90px !important;
object-fit: contain !important;
flex-shrink: 0;
}
/* Tighten internal gaps on the right column */
.cart-drawer .line-item-info {
gap: 0.2rem !important;
}
/* PDP: gray background extends from the very top of the viewport (under the
floating header) down to the end of the section. We tint body when a PDP
is present so the space above the section's content is also gray. */
body:has(.shopify-section--main-product),
body:has(.shopify-section--main-product) main#main {
background: #f2f2f2 !important;
}
.shopify-section--main-product,
.shopify-section--main-product .section-spacing,
.shopify-section--main-product .container,
.shopify-section--main-product .product,
.shopify-section--main-product product-rerender {
background: #f2f2f2 !important;
}
/* Kill the 60px grid row-gap between gallery and info card on mobile */
.shopify-section--main-product .product {
row-gap: 0 !important;
gap: 0 !important;
}
@media (min-width: 1000px) {
/* On desktop they're side-by-side, restore a horizontal gap */
.shopify-section--main-product .product {
column-gap: 2rem !important;
}
}
/* Product info column → white card on top of the gray, with margin all around
so it doesn't touch the viewport edges on mobile */
.shopify-section--main-product safe-sticky.product-info,
.shopify-section--main-product .product-info {
background: #ffffff !important;
border-radius: 6px !important;
padding-inline: clamp(1rem, 4vw, 2rem) !important;
padding-top: clamp(1rem, 4vw, 2rem) !important; /* matches padding-inline */
padding-bottom: clamp(1.25rem, 3vw, 1.75rem) !important;
margin: 0 0.75rem 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* On desktop, the info card sits on the right side with its own margins */
@media (min-width: 1000px) {
.shopify-section--main-product safe-sticky.product-info,
.shopify-section--main-product .product-info {
margin: 0 1rem 1rem 0;
}
/* TRIKKO: stick the info card while user scrolls through gallery on desktop.
- position:sticky lets the card pin once it hits the offset.
- align-self:start prevents the grid from stretching the card to gallery height (sticky needs the element to be shorter than its scroll container).
- Top offset accounts for the floating header PILL (which is fixed-position, NOT counted in --sticky-area-height):
0.625rem (pill top gap from viewport edge)
+ --announcement-bar-height (top half of pill, ~26px)
+ --header-height (bottom half of pill, ~56px+padding)
+ 0.75rem breathing room between pill and sticky card.
- bottom transform: place card at calc'd offset, not viewport top.
- safe-sticky JS (Prestige built-in scroll-aware top animator) is bypassed via our !important
top value, because the card always fits in viewport and we don't want the scroll lag. */
.shopify-section--main-product safe-sticky.product-info {
position: sticky !important;
top: calc(0.625rem + var(--announcement-bar-height, 0px) + var(--header-height, 0px) + 0.75rem) !important;
align-self: start !important;
max-height: none;
}
}
/* ============================================================
PDP COMPLETE THE FIT — integrated in white info card (no wrapper)
============================================================ */
.shopify-section--main-product .trikko-pdp-recs {
margin: 1.25rem 0 0;
padding: 0;
background: transparent;
border-radius: 0;
}
.shopify-section--main-product .trikko-pdp-recs__heading {
font-family: 'Inter', sans-serif;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1c1c1c;
margin: 0 0 0.625rem !important;
}
.shopify-section--main-product .trikko-pdp-recs__list {
display: flex;
gap: 0.5rem;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.25rem;
/* Subtle scroll affordance: edges fade out */
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.shopify-section--main-product .trikko-pdp-recs__list::-webkit-scrollbar { display: none; }
.shopify-section--main-product .trikko-pdp-rec {
flex: 0 0 110px;
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.shopify-section--main-product .trikko-pdp-rec__media {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background: #f2f2f2;
border-radius: 6px;
overflow: hidden;
}
.shopify-section--main-product .trikko-pdp-rec__media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.shopify-section--main-product .trikko-pdp-rec__info {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.15rem 0 0;
min-width: 0;
}
.shopify-section--main-product .trikko-pdp-rec__title {
font-family: 'Inter', sans-serif !important;
font-size: 0.625rem !important;
font-weight: 600 !important;
color: #1c1c1c !important;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.25;
/* One-line truncation with ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
min-width: 0;
}
.shopify-section--main-product .trikko-pdp-rec__price {
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
font-weight: 500;
color: #1c1c1c;
}
.shopify-section--main-product .trikko-pdp-recs__size-wrap {
position: relative;
display: block;
}
.shopify-section--main-product .trikko-pdp-recs__size {
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
font-weight: 600;
color: #1c1c1c;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 0.4rem 1.1rem 0.4rem 0.5rem;
background: #fff;
appearance: none;
-webkit-appearance: none;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
width: 100%;
box-sizing: border-box;
line-height: 1.1;
}
.shopify-section--main-product .trikko-pdp-recs__size-chevron {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #1c1c1c;
}
.shopify-section--main-product .trikko-pdp-rec__add {
margin-top: 0.15rem;
background: #1c1c1c;
color: #fff;
border: 0;
border-radius: 4px;
padding: 0.5rem 0.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s;
}
.shopify-section--main-product .trikko-pdp-rec__add:hover { background: #000; }
.shopify-section--main-product .trikko-pdp-rec__add:disabled { opacity: 0.6; cursor: not-allowed; }
/* ============================================================
PDP gallery: hide dots, subtle chevrons on the image
============================================================ */
/* Hide the dots pagination below the gallery */
.shopify-section--main-product .page-dots,
.shopify-section--main-product carousel-navigation.page-dots {
display: none !important;
}
/* Anchor chevrons to the .product-gallery__image-list (gallery's outer block).
The wrapper with display:contents has no box, so we use the outer instead. */
.shopify-section--main-product .product-gallery__image-list {
position: relative;
}
/* Clean chevron arrows — no circle, just the icon, subtle */
.shopify-section--main-product .trikko-gallery-arrow {
position: absolute !important;
display: none !important;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0 !important;
z-index: 3;
cursor: pointer;
padding: 0 !important;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.25);
transition: color 0.15s;
}
.shopify-section--main-product .trikko-gallery-arrow:hover {
color: rgba(0, 0, 0, 0.6);
}
.shopify-section--main-product .trikko-gallery-arrow--prev {
left: 0.4rem;
}
.shopify-section--main-product .trikko-gallery-arrow--next {
right: 0.4rem;
}
.shopify-section--main-product .trikko-gallery-arrow svg {
width: 13px;
height: 13px;
display: block;
stroke-width: 1;
}
/* Show on mobile only (collapses sm:hidden which would hide them ≥700px) */
@media (max-width: 699px) {
.shopify-section--main-product .trikko-gallery-arrow.sm\:hidden {
display: inline-flex !important;
}
}
/* Hide the SAVE / discount badge on product cards in collection page */
.shopify-section--main-collection .badge--on-sale,
.shopify-section--main-collection on-sale-badge,
.shopify-section--main-collection product-card .badge--on-sale,
.shopify-section--main-collection product-card on-sale-badge,
.shopify-section--related-products .badge--on-sale,
.shopify-section--related-products on-sale-badge {
display: none !important;
}
/* Kill the 15px top padding inside .product-card__info so the title sits
closer to the gray card image */
.shopify-section--main-collection product-card .product-card__info,
.shopify-section--main-collection .product-card .product-card__info {
padding-top: 0.25rem !important;
}
/* HIDE quick-add (+ icon) overlay on product cards */
.shopify-section--main-collection .product-card__quick-add-button,
.shopify-section--main-collection .product-card__quick-add,
.shopify-section--main-collection product-card form,
.shopify-section--main-collection quick-buy-modal {
display: none !important;
}
/* Title: smaller, tight tracking, tight spacing */
.shopify-section--main-collection .product-title,
.shopify-section--main-collection product-card .v-stack a.product-title,
.shopify-section--main-collection product-card a.product-title {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.625rem !important; /* 10px — minimum legible */
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
text-align: center !important;
margin: 0.15rem 0 0.05rem !important; /* much tighter top — title hugs the gray card */
color: #1c1c1c !important;
line-height: 1.25 !important;
}
/* Size chips row — smaller, tighter */
.product-card__sizes {
display: flex !important;
align-items: center !important;
justify-content: center;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0.1rem 0 0.2rem !important; /* tighter */
color: #6b6b6b;
line-height: 1;
}
.product-card__sizes-icon {
flex-shrink: 0;
width: 14px !important; /* smaller cart icon */
height: 14px !important;
color: #6b6b6b;
display: inline-block;
vertical-align: middle;
margin-right: 0.15rem;
}
.product-card__size-chip {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.6875rem; /* 11px (was 13px) */
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: uppercase;
color: #6b6b6b;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
/* Price: smaller, slightly lighter than title, slight negative tracking */
.shopify-section--main-collection .price-list,
.shopify-section--main-collection .price,
.shopify-section--main-collection product-card .price,
.shopify-section--main-collection .price-list *,
.shopify-section--main-collection .price * {
text-align: center !important;
font-size: 0.6875rem !important; /* 11px — proportional to 10px title */
font-weight: 500 !important; /* one step lighter than title (600) */
color: #1c1c1c !important;
letter-spacing: -0.02em !important; /* tight chars */
margin: 0 !important; /* no gap from title's tight bottom margin */
font-family: 'Inter', -apple-system, sans-serif !important;
}
.shopify-section--main-collection .price-list--with-discount .price--regular,
.shopify-section--main-collection .price--compare {
color: #9b9b9b !important;
text-decoration: line-through;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
/* Vendor/secondary text hidden */
.shopify-section--main-collection .vendor,
.shopify-section--main-collection .product-card__vendor {
display: none !important;
}
/* ============================================================
PRODUCT PAGE (PDP)
============================================================ */
/* Hide vendor + quantity selector */
.shopify-section--main-product [data-block-id="vendor"],
.shopify-section--main-product [data-block-id="quantity_selector"] {
display: none !important;
}
/* Title: SMALLER, tight, uppercase bold */
.shopify-section--main-product .product-title,
.shopify-section--main-product [data-block-id="title"] .h3,
.shopify-section--main-product [data-block-id="title"] h1 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.9375rem !important; /* 15px (down from 18px) */
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
text-align: left !important;
margin: 0 !important;
line-height: 1.2 !important;
color: #1c1c1c !important;
}
@media (min-width: 700px) {
.shopify-section--main-product .product-title,
.shopify-section--main-product [data-block-id="title"] h1 {
font-size: 1.0625rem !important; /* 17px desktop */
}
}
/* Title divider — thin line below title */
.shopify-section--main-product [data-block-id="title"] {
border-bottom: 1px solid #e0e0e0;
padding-bottom: 0.6rem;
margin-bottom: 0.6rem !important;
}
/* Price: smaller, bold, tight tracking */
.shopify-section--main-product [data-block-id="price"] .h4,
.shopify-section--main-product [data-block-id="price"] sale-price,
.shopify-section--main-product [data-block-id="price"] .price-list * {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.8125rem !important; /* 13px */
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: #1c1c1c !important;
opacity: 1 !important;
}
.shopify-section--main-product [data-block-id="price"] .text-subdued {
color: #1c1c1c !important;
opacity: 1 !important;
}
/* No divider between price and variants, but give the variant block top margin
so SIZE: sits closer to its cells than to the price above */
.shopify-section--main-product [data-block-id="separator"] {
display: none !important;
}
.shopify-section--main-product [data-block-id="variant_picker"] {
border-top: 0 !important;
padding-top: 0 !important;
margin-top: 1rem !important;
}
/* Variant picker label: UPPERCASE, close to cells */
.shopify-section--main-product .variant-picker__option-name,
.shopify-section--main-product variant-picker label,
.shopify-section--main-product fieldset legend,
.shopify-section--main-product .variant-picker__option {
font-size: 0.8125rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
margin-bottom: 0.25rem !important; /* close to cells */
}
/* Hide the chosen value text next to "Size:" if Prestige shows it inline */
.shopify-section--main-product .variant-picker__option-name + span,
.shopify-section--main-product .variant-picker__option-name-selected {
text-transform: uppercase !important;
}
/* Size cells: each cell has its OWN top/right/bottom border (no outer wrapper border).
First cell adds left border. Adjacent cells share borders → no gaps. */
.shopify-section--main-product .variant-picker__option-values,
.shopify-section--main-product .block-swatch-list,
.shopify-section--main-product variant-picker [role="radiogroup"],
.shopify-section--main-product fieldset.h-stack {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(0, 1fr) !important;
gap: 0 !important;
border: 0 !important;
border-radius: 0 !important;
flex-wrap: nowrap !important;
}
.shopify-section--main-product .block-swatch,
.shopify-section--main-product .block-swatch__label {
border-top: 1px solid #d0d0d0 !important;
border-right: 1px solid #d0d0d0 !important;
border-bottom: 1px solid #d0d0d0 !important;
border-left: 0 !important;
border-radius: 0 !important;
padding: 0.65rem 0.3rem !important;
text-align: center;
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
background: #fff !important;
min-height: 2.5rem !important;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
/* First cell gets ONE left border via border-left only */
.shopify-section--main-product .variant-picker__option-values > .block-swatch:first-of-type,
.shopify-section--main-product .variant-picker__option-values > label.block-swatch:first-of-type,
.shopify-section--main-product .variant-picker__option-values > *:first-child .block-swatch,
.shopify-section--main-product .block-swatch-list > *:first-child .block-swatch,
.shopify-section--main-product .block-swatch-list > *:first-child .block-swatch__label,
.shopify-section--main-product fieldset.h-stack > *:first-child .block-swatch,
.shopify-section--main-product fieldset.h-stack > *:first-child .block-swatch__label {
border-left: 1px solid #d0d0d0 !important;
}
/* SELECTED: black OUTLINE (border around cell), keep white bg + dark text */
.shopify-section--main-product .block-swatch:has(input:checked),
.shopify-section--main-product input[type="radio"]:checked + .block-swatch,
.shopify-section--main-product input[type="radio"]:checked + .block-swatch__label,
.shopify-section--main-product .block-swatch.is-selected,
.shopify-section--main-product .block-swatch[aria-checked="true"],
.shopify-section--main-product label.block-swatch:has(input:checked) {
background: #fff !important;
color: #1c1c1c !important;
font-weight: 700 !important;
box-shadow: inset 0 0 0 2px #1c1c1c !important;
position: relative;
z-index: 2;
}
.shopify-section--main-product .block-swatch:has(input:disabled),
.shopify-section--main-product .block-swatch--disabled {
opacity: 0.4;
text-decoration: line-through;
cursor: not-allowed;
}
/* Add to Cart button: full-width, bold, */
.shopify-section--main-product [data-block-id="buy_buttons"] button[name="add"],
.shopify-section--main-product product-form button[type="submit"] {
width: 100% !important;
background: #1c1c1c !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 1rem !important;
min-height: 3rem !important;
margin-bottom: 0.5rem;
}
.shopify-section--main-product [data-block-id="buy_buttons"] button[name="add"]:hover {
background: #000 !important;
}
/* Mobile gallery: hide thumbnail strip on mobile when there's a single image */
@media (max-width: 699px) {
.shopify-section--main-product .product-gallery__thumbnail-list {
display: none !important;
}
/* Main image takes full width */
.shopify-section--main-product .product-gallery__media-list {
padding: 0 !important;
}
}
/* Container padding tight on mobile */
@media (max-width: 699px) {
.shopify-section--main-product .container {
padding-inline: 1rem !important;
}
.shopify-section--main-product .product-info {
padding: 1rem 0 !important;
}
}
/* Block list gap: tighter to match brand spec */
.shopify-section--main-product .product-info__block-list {
gap: 0.75rem !important;
}
/* Trikko model fit + "No worries" info banners (grey bg, centered, NO gap) */
.shopify-section--main-product .trikko-info-banner {
background: #ededed;
color: #1c1c1c;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0;
text-align: center;
padding: 0.6rem 1rem;
margin: 0 !important; /* no gap between banners + variant cells */
line-height: 1.3;
}
/* Variant picker gap: tighten to 0 so banners touch the cells */
.shopify-section--main-product variant-picker.variant-picker {
gap: 0 !important;
}
/* Block list gap between variant picker and other blocks */
.shopify-section--main-product .product-info__block-list {
gap: 0.6rem !important;
}
/* The info banners stack flush right after the size cells */
.shopify-section--main-product .trikko-info-banner + .trikko-info-banner {
border-top: 1px solid #fff; /* thin separator between adjacent banners */
}
/* ---------- SOLD OUT: fade the image + centered overlay text ---------- */
.product-card__figure:has(sold-out-badge) {
position: relative;
}
/* Hide the default badge — we replace it with a centered overlay */
.product-card__figure:has(sold-out-badge) .badge-list,
.product-card__figure:has(sold-out-badge) sold-out-badge,
.product-card:has(sold-out-badge) .badge-list,
.product-card:has(sold-out-badge) sold-out-badge {
display: none !important;
}
/* Fade the product images (primary only — hide secondary so it doesn't bleed) */
.product-card__figure:has(sold-out-badge) .product-card__image--primary,
.product-card__figure:has(sold-out-badge) > .product-card__media > img:first-of-type,
.product-card:has(sold-out-badge) .product-card__image--primary {
opacity: 0.45 !important;
transition: opacity 0.2s;
}
/* Hide the secondary (hover) image entirely on sold-out products so it doesn't
show through the faded primary image. Also disable the hover swap. */
.product-card__figure:has(sold-out-badge) .product-card__image--secondary,
.product-card:has(sold-out-badge) .product-card__image--secondary {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.product-card__figure:has(sold-out-badge):hover > .product-card__media .product-card__image--primary {
opacity: 0.45 !important;
}
/* ============================================================
COMPACT EME-STYLE FOOTER
============================================================ */
/* Whole footer background = same gray as PDP page background (#f2f2f2) */
.shopify-section--footer,
.shopify-section--footer .footer,
.shopify-section--footer .footer__inner,
.shopify-section--footer .footer__bottom,
.shopify-section--footer .footer__aside {
background: #f2f2f2 !important;
}
/* Remove any separator (border / box-shadow) between the newsletter and the footer */
.shopify-section--newsletter,
.shopify-section--newsletter .section-spacing,
.shopify-section--newsletter .newsletter,
.shopify-section--footer,
.shopify-section--footer .footer,
.shopify-section--footer .bordered-section {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* Hide the payment icons row entirely */
.shopify-section--footer .payment-methods,
.shopify-section--footer ul.payment-methods {
display: none !important;
}
/* Hide WhatsApp section (compact mode) */
.shopify-section--footer .footer__block--whatsapp {
display: none !important;
}
/* Brand motto at the bottom — fills width, subtle two-line.
The longer line "FOR GAMECHANGERS" anchors the scale; both lines fit width-wise. */
.shopify-section--footer .footer__motto {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1em;
padding: 1rem 0.75rem 1.25rem;
margin: 0;
user-select: none;
}
.shopify-section--footer .footer__motto-line {
font-family: 'Archivo Black', 'Inter', -apple-system, sans-serif;
font-weight: 900;
/* Sized so "FOR GAMECHANGERS" (16 chars) spans most of the viewport width */
font-size: clamp(1.25rem, 7vw, 4rem);
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #dcdcdc;
white-space: nowrap;
}
/* Mobile footer: flatten accordions into inline rows of links with dot separators.
Each block (SUPPORT / LEGAL / SOCIALS) becomes one centered horizontal row. */
@media (max-width: 699px) {
.shopify-section--footer .footer__block-list {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.35rem !important;
padding: 0.5rem 1rem !important;
}
.shopify-section--footer .footer__block {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100%;
}
/* Disable the accordion JS visual — force always-open and hide the title */
.shopify-section--footer .footer__block-acc {
display: block !important;
}
.shopify-section--footer .footer__block-acc-summary {
display: none !important;
}
.shopify-section--footer .footer__block-acc-body {
display: block !important;
padding: 0 !important;
}
/* The native heading (when JS hasn't run yet) — also hidden */
.shopify-section--footer .footer__block h2,
.shopify-section--footer .footer__block .h6,
.shopify-section--footer .footer__block .footer__block-heading {
display: none !important;
}
/* Each block's → horizontal flex centered with middle-dot separators */
.shopify-section--footer .footer__block ul {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 0.5rem !important;
white-space: nowrap !important;
}
.shopify-section--footer .footer__block li {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
.shopify-section--footer .footer__block li + li::before {
content: "·";
margin-right: 0.5rem;
color: #1c1c1c;
opacity: 0.45;
flex: 0 0 auto;
}
.shopify-section--footer .footer__block a,
.shopify-section--footer .footer__block .footer__block-acc-body a,
.shopify-section--footer .footer__block-acc-body p,
.shopify-section--footer .footer__block-acc-body li {
font-family: 'Inter', sans-serif !important;
font-size: 0.625rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
line-height: 1.5 !important;
text-decoration: none !important;
}
/* Socials block: keep icons inline, no dot separators */
.shopify-section--footer .footer__block--socials ul,
.shopify-section--footer .footer__block--socials .footer__social-media {
gap: 0.75rem !important;
}
.shopify-section--footer .footer__block--socials li + li::before {
content: none !important;
}
.shopify-section--footer .footer__block--socials svg {
width: 16px !important;
height: 16px !important;
}
/* Container & footer__inner: force symmetric horizontal padding so nothing
is right-shifted by Prestige's `margin-inline: max()` quirks on mobile. */
.shopify-section--footer .container {
padding-inline: 0 !important;
margin-inline: 0 !important;
max-width: 100% !important;
}
.shopify-section--footer .footer__inner {
text-align: center !important;
justify-items: center !important;
}
/* Accordion title now CENTERED with the +/− icon absolutely placed on the right */
.shopify-section--footer .footer__block-acc-summary {
justify-content: center !important;
text-align: center !important;
position: relative !important;
padding-inline: 2.5rem !important;
}
.shopify-section--footer .footer__block-acc-summary::after {
position: absolute !important;
right: 1.25rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Aside (country selector + copyright) — CENTERED, super compact */
.shopify-section--footer .footer__aside {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
padding: 0.4rem 1rem !important;
gap: 0.5rem !important;
text-align: center !important;
}
.shopify-section--footer .footer__aside .localization-selectors {
flex: 0 0 auto;
margin: 0 !important;
}
.shopify-section--footer .footer__aside p {
flex: 0 0 auto;
margin: 0 !important;
text-align: center !important;
font-size: 0.625rem !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
}
/* Motto: even tighter spacing on mobile */
.shopify-section--footer .footer__motto {
padding: 0.4rem 0 0.5rem !important;
}
}
/* Collection page product cards: hide the size chips row (cart icon + XS S M L XL XXL)
so the card shows only title + price */
.shopify-section--main-collection .product-card__sizes,
.shopify-section--related-products .product-card__sizes,
product-card .product-card__sizes {
display: none !important;
}
/* PDP: sold-out / unavailable variant size cells → gray text */
.shopify-section--main-product .variant-picker .block-swatch.is-disabled,
.shopify-section--main-product .variant-picker .block-swatch.is-disabled span,
.shopify-section--main-product .variant-picker label.is-disabled,
.shopify-section--main-product .variant-picker label.is-disabled span {
color: #b8b8b8 !important;
opacity: 1 !important;
}
/* Centered SOLD OUT overlay: two-line, no background, scales with card size.
Uses container queries so the badge matches the product image width regardless
of layout (2-col mobile, 3/4/5-col desktop). */
.product-card,
.product-card__figure {
container-type: inline-size;
}
.product-card__figure:has(sold-out-badge)::after {
content: 'GONE';
white-space: pre;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
color: #000;
font-family: 'Inter', -apple-system, sans-serif;
/* Scale at ~12% of card width: min 1.25rem (~20px) on tiny cards,
grows on bigger cards, capped at 3.5rem (~56px) on huge ones */
font-size: clamp(1.25rem, 12cqw, 3.5rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
line-height: 1.05;
padding: 0;
pointer-events: none;
z-index: 2;
}
/* Fade title + sizes + price for sold-out products */
.product-card:has(sold-out-badge) .product-title,
.product-card:has(sold-out-badge) .product-card__sizes,
.product-card:has(sold-out-badge) .price-list,
.product-card:has(sold-out-badge) .price {
opacity: 0.55 !important;
}
/* Color swatches hidden by default — sizes shown instead */
.shopify-section--main-collection product-card fieldset.h-stack {
display: none !important;
}
/* Pagination */
.shopify-section--main-collection .pagination {
margin-top: 1.5rem !important;
}
/* Sidebar filter drawer (mobile): clean modal */
.facets-drawer,
facets-sidebar {
background: #ffffff !important;
}
/* Kill any text-subdued opacity in collection */
.shopify-section--main-collection .text-subdued {
color: #1c1c1c !important;
opacity: 1 !important;
}
/* ============================================================
PDP — Buy buttons section (Trikko-style)
============================================================ */
/* Delivery estimator banner: green dot + "Buy now get it [date]" */
.trikko-delivery {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.8125rem;
font-weight: 500;
color: #1c1c1c;
letter-spacing: -0.01em;
margin-top: -0.5rem;
margin-bottom: 1rem;
}
.trikko-delivery__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #1ea463;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(30, 164, 99, 0.2);
}
.trikko-delivery__date {
font-weight: 700;
}
/* Buy buttons container: no gap to make ATC + Apple Pay stack tight */
.trikko-buy-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* ATC button: square corners, flex layout for label + price */
.trikko-buy-buttons .button,
.trikko-buy-buttons button[type="submit"] {
border-radius: 0 !important;
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
min-height: 52px;
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.trikko-buy-buttons .button > span:not(.trikko-atc__label):not(.trikko-atc__price),
.trikko-buy-buttons button[type="submit"] > span:not(.trikko-atc__label):not(.trikko-atc__price) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
}
.trikko-atc__label {
flex: 1 1 auto;
text-align: left;
}
.trikko-atc__price {
flex: 0 0 auto;
text-align: right;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Accelerated checkout (Apple Pay / Shop Pay): no rounded corners */
.trikko-buy-buttons .shopify-payment-button,
.trikko-buy-buttons .shopify-payment-button__button {
border-radius: 0 !important;
}
.trikko-buy-buttons .shopify-payment-button__button {
min-height: 52px !important;
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
/* Apple Pay specific button — kill rounded radius Shopify injects */
.trikko-buy-buttons .shopify-payment-button__button--branded,
.trikko-buy-buttons .shopify-payment-button__button--unbranded {
border-radius: 0 !important;
}
/* Force the Shopify ApplePayButton iframe corner removal (best effort) */
.trikko-buy-buttons apple-pay-button {
--apple-pay-button-border-radius: 0;
border-radius: 0 !important;
}
/* Payment icons row - compact, single line */
.trikko-payment-icons {
list-style: none;
padding: 0;
margin: 0.25rem 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
flex-wrap: nowrap;
}
.trikko-payment-icons__item {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
min-width: 0;
}
.trikko-payment-icons__svg {
display: block;
height: 18px;
width: auto;
max-width: 38px;
}
/* Hide "More payment options" link under the Shop Pay / Apple Pay button */
.shopify-payment-button__more-options,
.shopify-payment-button [aria-haspopup="dialog"][type="button"] {
display: none !important;
}
/* Sticky add-to-cart bar: edge-to-edge on mobile, extends into iPhone safe-area.
- Bar bg = button bg so safe-area extension reads as one continuous black band.
- Button has zero margin and fills the bar 100% width.
- padding-block-end includes env(safe-area-inset-bottom) so the visible text
stays above the iOS home indicator. */
product-sticky-bar {
padding: 0 !important;
margin: 0 !important;
background: #1c1c1c !important;
}
product-sticky-bar .trikko-buy-buttons {
flex: 1 1 100%;
width: 100%;
display: block;
margin: 0 !important;
padding: 0 !important;
}
product-sticky-bar .trikko-buy-buttons .button {
border-radius: 0 !important;
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
min-height: 0 !important;
width: 100% !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-inline: 1.25rem !important;
padding-block-start: 1.1rem !important;
/* Extends visually into the iOS home-indicator safe area */
padding-block-end: calc(1.1rem + env(safe-area-inset-bottom, 0px)) !important;
white-space: nowrap;
}
product-sticky-bar .trikko-atc__label {
flex: 1 1 auto;
text-align: left;
}
product-sticky-bar .trikko-atc__price {
flex: 0 0 auto;
text-align: right;
font-weight: 700;
letter-spacing: 0.02em;
}
/* On desktop, sticky bar still has info on left — give button its own width */
@media (min-width: 700px) {
product-sticky-bar .trikko-buy-buttons {
flex: 0 0 auto;
width: auto;
}
product-sticky-bar .trikko-buy-buttons .button {
min-width: 280px;
}
/* TRIKKO: anchor sticky ATC to the BOTTOM on desktop (Prestige defaults to top).
- Override `inset-block: var(--sticky-area-height) auto` to bottom:0.
- Solid white bg + top hairline + soft shadow so it floats cleanly over content.
- Padding tightened to a slim band; keep grid 2-col (info | button). */
.product-sticky-bar {
inset-block-start: auto !important;
inset-block-end: 0 !important;
background: #ffffff !important;
border-block-end-width: 0 !important;
border-block-start: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.06) !important;
padding-block: 0.75rem !important;
padding-inline: clamp(1rem, 3vw, 2rem) !important;
}
}
/* PDP: full-width edge-to-edge (mobile + desktop) */
.shopify-section--main-product .container {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
max-width: 100% !important;
--container-gutter: 0px;
padding-inline: 0 !important;
}
/* Product info column: keep internal breathing room from viewport edge */
.shopify-section--main-product safe-sticky.product-info,
.shopify-section--main-product .product-info {
padding-inline: clamp(1.25rem, 3vw, 3rem) !important;
box-sizing: border-box;
}
/* Make sure the gallery itself bleeds to the edge on mobile */
.shopify-section--main-product product-gallery,
.shopify-section--main-product .product-gallery,
.shopify-section--main-product .product__media-list,
.shopify-section--main-product .product__media-item {
padding-inline: 0 !important;
margin-inline: 0 !important;
}
/* ============================================================
FLOATING HEADER (pill style)
- Sticky behavior is already enabled in the header section settings.
- We only style the inner .header element to look like a floating card.
============================================================ */
/* Floating header card: announcement bar + header stacked as one glass-style pill.
Both sections are fixed-positioned so the card stays at top while scrolling. */
/* Announcement bar: top half of the floating card */
.shopify-section--announcement-bar.shopify-section-group-header-group {
position: fixed !important;
top: 0.625rem !important;
left: 0.75rem !important;
right: 0.75rem !important;
z-index: 9999 !important;
background: transparent !important;
}
/* Header: bottom half of the floating card, positioned below the announcement bar */
.shopify-section--header {
background: transparent !important;
position: fixed !important;
top: calc(0.625rem + var(--announcement-bar-height, 26px)) !important;
left: 0.75rem !important;
right: 0.75rem !important;
z-index: 9999 !important;
}
/* Compensate for the fixed header: add top padding to main content */
main#main {
padding-top: calc(var(--header-height, 100px) + 2rem);
}
/* Announcement bar: solid black strip at the top of the floating card */
.shopify-section--announcement-bar .announcement-bar {
background: #000000 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 6px 6px 0 0 !important;
border: none !important;
padding-block: 0.3rem !important;
min-height: 0 !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
color: #ffffff !important;
}
/* Announcement text: white, compact, semibold */
.shopify-section--announcement-bar .announcement-bar p,
.shopify-section--announcement-bar .announcement-bar a,
.shopify-section--announcement-bar .announcement-bar .prose,
.shopify-section--announcement-bar .announcement-bar strong,
.shopify-section--announcement-bar .announcement-bar span {
color: #ffffff !important;
font-weight: 600 !important;
font-size: 0.625rem !important;
letter-spacing: 0.02em !important;
line-height: 1.2 !important;
}
/* Inner header → glass-style card, bottom of the floating card.
The wrapping section already supplies the horizontal positioning. */
.shopify-section--header .header {
margin: 0 !important;
background: rgba(255, 255, 255, 0.55) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 0 0 6px 6px !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
border: none !important;
padding-inline: 1rem !important;
padding-block: 0.625rem !important;
min-height: 56px;
align-items: center;
}
/* x-header wraps the .header — make sure it doesn't constrain visually */
x-header.header {
display: grid;
}
/* Two-row floating header on mobile: logo+icons row 1, horizontal nav row 2 */
@media (max-width: 999px) {
.shopify-section--header .header {
grid-template-areas:
". logo secondary-nav"
"menu menu menu" !important;
grid-template-columns: 1fr auto 1fr !important;
grid-template-rows: auto auto !important;
row-gap: 0.5rem;
padding-block: 0.5rem !important;
border-radius: 0 0 6px 6px !important;
}
/* Move the entire primary-nav to the menu row (second row) */
.shopify-section--header .header__primary-nav {
grid-area: menu !important;
grid-column: 1 / -1 !important;
width: 100%;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 0.4rem;
margin-top: 0.1rem;
position: relative;
}
/* Subtle scroll-hint chevrons on edges of the horizontal menu */
.shopify-section--header .header__primary-nav::before,
.shopify-section--header .header__primary-nav::after {
content: '';
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-top: 1.5px solid rgba(0, 0, 0, 0.22);
border-right: 1.5px solid rgba(0, 0, 0, 0.22);
pointer-events: none;
z-index: 2;
}
.shopify-section--header .header__primary-nav::before {
left: 0.15rem;
transform: translateY(-30%) rotate(-135deg); /* left-pointing chevron */
}
.shopify-section--header .header__primary-nav::after {
right: 0.15rem;
transform: translateY(-30%) rotate(45deg); /* right-pointing chevron */
}
/* Hide the hamburger button on mobile — we have inline menu now */
.shopify-section--header .header__primary-nav > button {
display: none !important;
}
/* Show the horizontal menu UL on mobile (Prestige hides it with md-max:hidden) */
.shopify-section--header .header__primary-nav ul.md-max\:hidden,
.shopify-section--header .header__primary-nav ul {
display: flex !important;
gap: 0;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none;
-ms-overflow-style: none;
flex-wrap: nowrap;
white-space: nowrap;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0 1.25rem; /* leave safe zone for the chevrons */
box-sizing: border-box;
/* Fade text items behind the chevron zones at both edges */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.shopify-section--header .header__primary-nav ul::-webkit-scrollbar {
display: none;
}
/* Compact menu items for horizontal layout */
.shopify-section--header .header__primary-nav ul .header__primary-nav-item {
flex: 0 0 auto;
}
.shopify-section--header .header__primary-nav ul .header__primary-nav-item > a,
.shopify-section--header .header__primary-nav ul .header__primary-nav-item summary,
.shopify-section--header .header__primary-nav ul .header__primary-nav-item .h6 {
padding: 0.25rem 0.75rem !important;
font-size: 0.6875rem !important;
letter-spacing: 0.06em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
}
/* Active / selected menu item: bold only (applies on both mobile and desktop).
High specificity to override the 600 weight set elsewhere.
Forces Inter font for guaranteed 900-weight rendering. */
.shopify-section--header .header__primary-nav ul .header__primary-nav-item > a[aria-current="page"],
.shopify-section--header .header__primary-nav ul .header__primary-nav-item a[aria-current="page"],
.shopify-section--header .header__primary-nav ul .header__primary-nav-item summary[aria-current="page"],
.shopify-section--header .header__primary-nav .header__primary-nav-item a[aria-current="page"] {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 900 !important;
color: #000 !important;
text-decoration: none !important;
}
/* Need a bit more breathing room for main content under the taller header */
main#main {
padding-top: calc(var(--header-height, 110px) + 2rem);
}
}
/* Hide the separation border native to Prestige */
.header::after,
.header::before {
display: none !important;
}
/* On desktop, slightly more horizontal margin on the OUTER sections, not the inner */
@media (min-width: 1000px) {
.shopify-section--announcement-bar.shopify-section-group-header-group,
.shopify-section--header {
left: 1.25rem !important;
right: 1.25rem !important;
}
.shopify-section--header .header {
margin: 0 !important;
padding-inline: 1.5rem !important;
}
}
/* =========================================================================
PDP ACCORDIONS — minimal hairline, matches SIZE / COMPLETE THE FIT labels
========================================================================= */
/* Hairline dividers between accordions + below the last one */
.shopify-section--main-product .accordion {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid #ececec !important;
}
.shopify-section--main-product accordion-disclosure:last-of-type .accordion {
border-bottom: 1px solid #ececec !important;
}
/* Summary row: remove default marker, take full row */
.shopify-section--main-product .accordion summary {
list-style: none !important;
cursor: pointer !important;
padding: 0 !important;
}
.shopify-section--main-product .accordion summary::-webkit-details-marker {
display: none !important;
}
/* Title — IDENTICAL spec to .trikko-pdp-recs__heading (COMPLETE THE FIT) */
.shopify-section--main-product .accordion__toggle {
font-family: 'Inter', sans-serif !important;
font-size: 0.6875rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
padding: 0.95rem 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
column-gap: 0.625rem !important;
}
/* +/− icon — use Prestige's native .animated-plus (already a clean +→−).
Only tweak size + color so it stays subtle and on-brand. */
.shopify-section--main-product .accordion .animated-plus {
--animated-plus-size: 8px;
color: #1c1c1c;
flex: 0 0 8px;
}
.shopify-section--main-product .accordion .animated-plus::before,
.shopify-section--main-product .accordion .animated-plus::after {
background-color: #1c1c1c;
}
/* Fallback: if show_arrow=true ever sneaks in, normalize the chevron too */
.shopify-section--main-product .accordion__toggle svg {
width: 8px;
height: 8px;
stroke-width: 1.4;
color: #1c1c1c;
}
/* Content — Inter, comfortable line-height, flush-left with title */
.shopify-section--main-product .accordion__content,
.shopify-section--main-product .accordion .prose {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.8125rem !important;
line-height: 1.6 !important;
color: #2a2a2a !important;
margin: 0 !important;
padding: 0 0 1.1rem !important;
}
.shopify-section--main-product .accordion__content > *:first-child { margin-top: 0 !important; }
.shopify-section--main-product .accordion__content > *:last-child { margin-bottom: 0 !important; }
.shopify-section--main-product .accordion__content br { line-height: 1.6; }
/* Size guide image — full width, square corners (matches variant cells) */
.trikko-size-guide { margin: 0; }
.trikko-size-guide img {
width: 100%;
height: auto;
display: block;
border-radius: 0;
}
/* Shipping & returns list — clean, no bullets, monoline rows */
.trikko-shipping-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 0.65rem !important;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.trikko-shipping-list li {
font-size: 0.8125rem;
color: #2a2a2a;
letter-spacing: 0;
}
.trikko-shipping-list li strong,
.shopify-section--main-product .accordion__content strong {
font-weight: 700;
color: #1c1c1c;
}
.trikko-shipping-list + p {
margin: 0.55rem 0 0 !important;
font-size: 0.8125rem;
color: #2a2a2a;
line-height: 1.55;
}
/* =========================================================================
PDP: HIDE "PAIRS WELL WITH" (native Prestige complementary block)
Already replaced by the integrated COMPLETE THE FIT inside the info card.
========================================================================= */
.shopify-section--main-product .complementary-products,
.shopify-section--main-product product-recommendations[intent="complementary"] {
display: none !important;
}
/* =========================================================================
PDP: EXPLORE MORE — white card matching the product-info card
========================================================================= */
/* Section + Prestige's color-scheme wrapper bg → page gray */
.shopify-section--related-products,
.shopify-section--related-products .section-spacing,
.shopify-section--related-products .color-scheme,
.shopify-section--related-products [class*="color-scheme--bg-"] {
background: #f2f2f2 !important;
background-color: #f2f2f2 !important;
background-image: none !important;
}
/* Strip ALL container chrome — match the PDP container which is full-bleed
so the section-stack margin can mirror .product-info exactly. */
.shopify-section--related-products .section-spacing {
padding-top: 0 !important;
padding-bottom: clamp(1.25rem, 3vw, 1.75rem) !important;
}
.shopify-section--related-products .bordered-section {
border: 0 !important;
}
.shopify-section--related-products .container {
--container-gutter: 0px !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
max-width: 100% !important;
}
/* THE white card — IDENTICAL margin to .product-info → identical visual width */
.shopify-section--related-products .section-stack {
background: #ffffff !important;
border-radius: 6px !important;
padding-inline: clamp(1rem, 4vw, 2rem) !important;
padding-top: clamp(1.25rem, 3vw, 1.5rem) !important;
padding-bottom: clamp(1.25rem, 3vw, 1.75rem) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin: 0 0.75rem 1rem !important; /* matches .product-info mobile margin */
gap: 1rem !important;
}
@media (min-width: 1000px) {
.shopify-section--related-products .section-stack {
margin: 0 1rem 1rem !important; /* matches .product-info desktop margin */
}
}
/* Section header EXPLORE MORE — IDENTICAL to PDP product title */
.shopify-section--related-products .section-header {
text-align: left !important;
margin: 0 0 0.25rem !important;
padding: 0 !important;
display: block !important;
}
.shopify-section--related-products .section-header__heading,
.shopify-section--related-products .section-header h1,
.shopify-section--related-products .section-header h2,
.shopify-section--related-products .section-header h3,
.shopify-section--related-products .section-header p.h1,
.shopify-section--related-products .section-header p.h2,
.shopify-section--related-products .section-header p.h3,
.shopify-section--related-products .section-header .h1,
.shopify-section--related-products .section-header .h2,
.shopify-section--related-products .section-header .h3 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.9375rem !important; /* 15px mobile — same as PDP title */
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
text-align: left !important;
margin: 0 !important;
line-height: 1.2 !important;
}
@media (min-width: 1000px) {
.shopify-section--related-products .section-header__heading,
.shopify-section--related-products .section-header h1,
.shopify-section--related-products .section-header h2,
.shopify-section--related-products .section-header h3,
.shopify-section--related-products .section-header p.h1,
.shopify-section--related-products .section-header p.h2,
.shopify-section--related-products .section-header p.h3,
.shopify-section--related-products .section-header .h1,
.shopify-section--related-products .section-header .h2,
.shopify-section--related-products .section-header .h3 {
font-size: 1.0625rem !important; /* 17px desktop — same as PDP title */
}
}
.shopify-section--related-products .section-header__subheading,
.shopify-section--related-products .section-header__content {
display: none !important;
}
/* Product cards — gray bg on images, no card chrome (same as PLP) */
.shopify-section--related-products product-card,
.shopify-section--related-products .product-card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.shopify-section--related-products product-card img,
.shopify-section--related-products .product-card img,
.shopify-section--related-products .product-card__image,
.shopify-section--related-products .product-card__image img {
background-color: #f2f2f2 !important;
border-radius: 6px !important;
}
/* Grid layout — 2 cols mobile, 4 cols desktop. No horizontal scroll. */
.shopify-section--related-products .product-list,
.shopify-section--related-products product-list {
--product-list-items-per-row: 2 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.75rem !important;
width: 100% !important;
overflow: visible !important;
}
@media (min-width: 700px) {
.shopify-section--related-products .product-list,
.shopify-section--related-products product-list {
--product-list-items-per-row: 4 !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 1rem !important;
}
}
.shopify-section--related-products .product-list > *,
.shopify-section--related-products product-list > * {
width: 100% !important;
flex: none !important;
min-width: 0 !important;
}
/* EXPLORE MORE cards — apply PLP collection card typography */
.shopify-section--related-products .product-card .product-card__info {
padding-top: 0.25rem !important;
}
.shopify-section--related-products .product-card__quick-add-button,
.shopify-section--related-products .product-card__quick-add,
.shopify-section--related-products product-card form,
.shopify-section--related-products quick-buy-modal {
display: none !important;
}
.shopify-section--related-products .product-title,
.shopify-section--related-products product-card .v-stack a.product-title,
.shopify-section--related-products product-card a.product-title {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.625rem !important; /* 10px — same as PLP */
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
text-align: center !important;
margin: 0.15rem 0 0.05rem !important;
color: #1c1c1c !important;
line-height: 1.25 !important;
}
.shopify-section--related-products .price-list,
.shopify-section--related-products .price,
.shopify-section--related-products product-card .price,
.shopify-section--related-products .price-list *,
.shopify-section--related-products .price * {
text-align: center !important;
font-size: 0.6875rem !important; /* 11px — same as PLP */
font-weight: 500 !important;
color: #1c1c1c !important;
letter-spacing: -0.02em !important;
margin: 0 !important;
font-family: 'Inter', -apple-system, sans-serif !important;
}
.shopify-section--related-products .price-list--with-discount .price--regular,
.shopify-section--related-products .price--compare {
color: #9b9b9b !important;
text-decoration: line-through;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
.shopify-section--related-products .vendor,
.shopify-section--related-products .product-card__vendor {
display: none !important;
}
/* =========================================================================
PDP TRUST STRIP — single line, very subtle
========================================================================= */
.trikko-trust-strip {
list-style: none !important;
margin: 0.75rem 0 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0.5rem !important;
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.5625rem !important; /* 9px — discreto */
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #9a9a9a !important;
line-height: 1 !important;
width: 100% !important;
}
.trikko-trust-strip li {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
min-width: 0 !important;
}
.trikko-trust-strip li + li::before {
content: "·" !important;
display: inline-block !important;
margin-right: 0.5rem !important;
color: #c4c4c4 !important;
font-weight: 400 !important;
}
/* Very narrow viewports: scale down further so it never wraps */
@media (max-width: 380px) {
.trikko-trust-strip {
font-size: 0.5rem !important; /* 8px */
letter-spacing: 0.02em !important;
gap: 0.35rem !important;
}
.trikko-trust-strip li + li::before {
margin-right: 0.35rem !important;
}
}
/* =========================================================================
TRIKKO NEWSLETTER POPUP — match brand (kept for future Klaviyo integration)
========================================================================= */
.trikko-newsletter-popup {
background: #000 !important;
color: #fff !important;
border-radius: 8px !important;
padding: 2rem 1.75rem !important;
max-width: 380px !important;
text-align: center !important;
}
.trikko-newsletter-popup .h4 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 1.375rem !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 0 !important;
line-height: 1.1 !important;
}
.trikko-newsletter-popup .prose,
.trikko-newsletter-popup .prose p {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.8125rem !important;
font-weight: 400 !important;
color: #c4c4c4 !important;
line-height: 1.5 !important;
margin: 0.5rem 0 0 !important;
}
.trikko-newsletter-popup .v-stack {
gap: 1.25rem !important;
}
.trikko-newsletter-popup input[type="email"] {
background: #ffffff !important;
color: #000 !important;
border: 0 !important;
border-radius: 4px !important;
padding: 0.85rem 1rem !important;
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.875rem !important;
}
.trikko-newsletter-popup .input__label,
.trikko-newsletter-popup label {
color: #c4c4c4 !important;
}
.trikko-newsletter-popup button[type="submit"],
.trikko-newsletter-popup .button {
background: #ffffff !important;
color: #000 !important;
border-radius: 4px !important;
padding: 0.85rem 1rem !important;
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
width: 100% !important;
border: 0 !important;
}
.trikko-newsletter-popup button[type="submit"]:hover,
.trikko-newsletter-popup .button:hover {
background: #e5e5e5 !important;
}
.trikko-newsletter-popup .pop-in__close-button {
color: #fff !important;
opacity: 0.7;
}
.trikko-newsletter-popup .pop-in__close-button:hover {
opacity: 1;
}
/* =========================================================================
ANNOUNCEMENT BAR MARQUEE — branding loop (Trikko)
========================================================================= */
/* Keep Prestige's native .announcement-bar padding-block: 1em so the bar
height stays identical to the original (don't override padding here). */
.trikko-marquee-bar {
overflow: hidden;
}
.trikko-marquee {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 16px,
#000 calc(100% - 16px),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
#000 16px,
#000 calc(100% - 16px),
transparent 100%
);
}
.trikko-marquee__track {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 2rem; /* tighter gap so phrases sit closer = more density on screen */
animation: trikko-marquee-scroll 90s linear infinite;
will-change: transform;
}
@media (max-width: 699px) {
.trikko-marquee__track {
animation-duration: 35s;
gap: 2.5rem;
}
}
@keyframes trikko-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.trikko-marquee__item {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.6875rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: currentColor !important;
display: inline-block;
line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
.trikko-marquee__track { animation: none; }
}
/* =========================================================================
HOMEPAGE: first slideshow bleeds up behind the floating glass header
========================================================================= */
.trikko-template--index main#main {
padding-top: 0 !important;
}
/* Make the slideshow tall enough that the title isn't hidden behind the header */
.trikko-template--index main#main > .shopify-section--slideshow:first-of-type .slideshow {
/* Add internal top padding equal to header height so content (title) doesn't
sit under the header — only the image bleeds up. */
--header-safe-top: calc(var(--header-height, 100px) + 1rem);
}
/* =========================================================================
FOOTER NEWSLETTER: input + submit on a single horizontal line
========================================================================= */
.footer__block--newsletter form,
.footer__block--newsletter form.form {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
flex-wrap: nowrap !important;
}
/* Hidden input shouldn't take layout space */
.footer__block--newsletter form input[type="hidden"] {
display: none !important;
}
.footer__block--newsletter form .field,
.footer__block--newsletter form > .field,
.footer__block--newsletter form .input-row,
.footer__block--newsletter form > div:not(.align-self-start) {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
}
.footer__block--newsletter form.form input[type="email"] {
width: 100% !important;
height: 2.75rem !important;
border-radius: 0 !important;
border: 1px solid rgba(0,0,0,0.18) !important;
background: #fff !important;
padding: 0 0.875rem !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.footer__block--newsletter form.form input[type="email"]::placeholder {
text-transform: uppercase;
color: #6b6b6b;
opacity: 1;
}
.footer__block--newsletter form.form .align-self-start {
align-self: stretch !important;
flex: 0 0 auto !important;
}
.footer__block--newsletter form.form button[type="submit"],
.footer__block--newsletter form.form .button {
height: 2.75rem !important;
border-radius: 0 !important;
background: #1c1c1c !important;
color: #fff !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-size: 0.8125rem !important;
padding: 0 1.25rem !important;
border: 0 !important;
white-space: nowrap !important;
}
/* =========================================================================
TRIKKO EXPLORE COLLECTIONS — cross-collection cards at bottom of PLPs
========================================================================= */
.trikko-explore-collections {
background: transparent !important;
padding: 0.5rem 0 1.5rem;
}
.trikko-explore-collections .container {
padding-inline: 0 !important;
margin-inline: 0 !important;
max-width: 100% !important;
}
.trikko-explore-collections__card {
background: #ffffff;
border-radius: 6px;
padding-inline: clamp(1rem, 4vw, 2rem);
padding-top: clamp(1.25rem, 3vw, 1.5rem);
padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin: 0 0.75rem 1rem;
}
@media (min-width: 1000px) {
.trikko-explore-collections__card {
margin: 0 1rem 1rem;
}
}
.trikko-explore-collections__heading {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.9375rem; /* matches PDP product title size */
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
color: #1c1c1c;
margin: 0 0 1rem;
line-height: 1.2;
}
@media (min-width: 1000px) {
.trikko-explore-collections__heading {
font-size: 1.0625rem;
}
}
.trikko-explore-collections__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.trikko-explore-collections__grid[data-cols-mobile="1"] {
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.trikko-explore-collections__grid[data-cols-desktop="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trikko-explore-collections__grid[data-cols-desktop="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trikko-explore-collections__grid[data-cols-desktop="4"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trikko-explore-collections__grid { gap: 1rem; }
}
/* Each collection card */
.trikko-explore-col {
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
color: #1c1c1c;
transition: opacity 0.2s ease;
}
.trikko-explore-col:hover { opacity: 0.88; }
.trikko-explore-col__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 5;
background: #f2f2f2;
border-radius: 6px;
overflow: hidden;
}
.trikko-explore-col__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.trikko-explore-col__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%);
pointer-events: none;
}
.trikko-explore-col__title {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1c1c1c;
text-align: center;
padding-top: 0.1rem;
}
/* Gray bg only around the EXPLORE COLLECTIONS section itself — not the whole
collection page (otherwise gaps between white sections show gray slivers). */
.shopify-section--trikko-explore-collections {
background: #f2f2f2;
}
/* =========================================================================
POLICY PAGES — Trikko-style typography for Refund, ToS, Shipping, Privacy
========================================================================= */
.trikko-policy {
font-family: 'Inter', -apple-system, sans-serif;
color: #1c1c1c;
max-width: 720px;
margin: 0 auto;
padding: 0 1rem 3rem;
line-height: 1.55;
}
.trikko-policy h1,
.trikko-policy h2 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
margin: 2.5rem 0 0.75rem !important;
line-height: 1.1 !important;
}
.trikko-policy h1 { font-size: 1.5rem !important; margin-top: 0 !important; }
.trikko-policy h2 { font-size: 1rem !important; }
.trikko-policy h3 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #1c1c1c !important;
margin: 1.5rem 0 0.4rem !important;
line-height: 1.2 !important;
}
.trikko-policy p {
font-size: 0.875rem !important;
margin: 0 0 0.75rem !important;
color: #2a2a2a !important;
}
.trikko-policy ul,
.trikko-policy ol {
font-size: 0.875rem !important;
padding-left: 1.25rem !important;
margin: 0 0 0.75rem !important;
color: #2a2a2a !important;
}
.trikko-policy li {
margin: 0.2rem 0 !important;
}
.trikko-policy strong {
font-weight: 700;
color: #1c1c1c;
}
.trikko-policy a {
color: #1c1c1c;
text-decoration: underline;
text-underline-offset: 2px;
}
.trikko-policy a:hover { opacity: 0.7; }
.trikko-policy hr {
border: 0;
border-top: 1px solid #ececec;
margin: 2rem 0 1rem;
}
.trikko-policy .trikko-policy__footer {
font-size: 0.6875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #999;
margin-top: 1rem;
}