/** Shopify CDN: Minification failed
Line 5930:25 Unexpected ")"
**/
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Libre+Bodoni:wght@400;500;600&family=Noto+Nastaliq+Urdu:wght@400;600&family=Tenor+Sans&display=swap");
:root {
--surface-canvas: #f7f4ee;
--surface-raised: #fbf9f6;
--surface-sunken: #f1ece5;
--surface-ink: #1b1815;
--bg: var(--surface-canvas);
--surface: var(--surface-raised);
--surface-2: var(--surface-sunken);
--text: var(--text-primary);
--border: var(--border-subtle);
--accent: var(--surface-ink);
--accent-inverse: #ffffff;
--gold-muted: #a88454;
--border-subtle: #d9d1c7;
--border-strong: #b8aea2;
--text-primary: #171513;
--text-secondary: #6f685f;
--text-muted: #8b847b;
--brand-primary: #1b1815;
--brand-primary-hover: #2a241f;
--brand-primary-tint: #f1ece5;
--brand-deep: #171513;
--brand-accent: #a88454;
--support-sage: #7a736a;
--support-plum: #3a332d;
--support-sun: #a88454;
--semantic-success: #35604a;
--semantic-warning: #8a5f22;
--semantic-error: #8f2a22;
--sale-badge-bg: #1b1815;
--font-display: "DM Serif Display", "Playfair Display", "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
--font-body: "Inter", "Avenir Next", "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-ui: var(--font-body);
--font-urdu: "Noto Nastaliq Urdu", Inter, sans-serif;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 28px;
--tracking-ui: 0;
--tracking-wide: 0;
--shadow-soft: 0 18px 58px rgba(23, 21, 19, 0.08);
--shadow-tiny: 0 8px 24px rgba(23, 21, 19, 0.05);
--radius-sm: 4px;
--radius-md: min(var(--radius-card, 0px), 8px);
--radius-lg: min(calc(var(--radius-card, 0px) + 2px), 8px);
--page-width: 1440px;
--gutter: 32px;
}
* {
box-sizing: border-box;
}
html {
background: var(--surface-canvas);
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--surface-canvas);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: 1.62;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--surface-ink);
outline-offset: 3px;
}
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
transform: translateY(-160%);
border: 1px solid var(--surface-ink);
border-radius: 999px;
background: var(--surface-raised);
color: var(--surface-ink);
padding: 10px 14px;
}
.skip-link:focus {
transform: translateY(0);
}
.page-width {
width: min(100% - var(--gutter) * 2, var(--page-width));
margin-inline: auto;
}
.section-spacing {
padding-block: var(--section-spacing, 104px);
}
.eyebrow {
margin: 0 0 8px;
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.h1,
.h2,
.h3,
h1,
h2,
h3 {
margin: 0;
color: var(--text-primary);
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0;
line-height: 1.12;
}
.h1,
h1 {
font-size: 3.2rem;
}
.h2,
h2 {
font-size: var(--text-xl);
}
.h3,
h3 {
font-size: 1.28rem;
}
p {
margin: 0;
}
.muted {
color: var(--text-secondary);
}
.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.button,
.shopify-payment-button__button {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--brand-primary);
border-radius: 999px;
background: var(--brand-primary);
color: #ffffff;
padding: 0 20px;
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: var(--tracking-ui);
line-height: 1;
text-align: center;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.button:hover,
.shopify-payment-button__button:hover {
border-color: var(--brand-primary-hover);
background: var(--brand-primary-hover);
transform: translateY(-1px);
}
.button:active {
transform: translateY(0);
}
.button .icon {
width: 16px;
height: 16px;
}
.button--secondary,
.buttons-outline .button:not(.button--ghost):not(.button--quiet),
.buttons-outline .shopify-payment-button__button {
border-color: var(--border-strong);
background: transparent;
color: var(--surface-ink);
}
.button--secondary:hover,
.buttons-outline .button:not(.button--ghost):not(.button--quiet):hover,
.buttons-outline .shopify-payment-button__button:hover {
border-color: var(--surface-ink);
background: rgba(23, 21, 19, 0.04);
color: var(--surface-ink);
transform: translateY(-1px);
}
.button--ghost {
min-height: auto;
border-color: transparent;
background: transparent;
color: var(--surface-ink);
padding: 0;
}
.button--ghost:hover {
background: rgba(23, 21, 19, 0.05);
}
.button--quiet {
min-height: 30px;
border-color: var(--border-subtle);
background: rgba(255, 255, 255, 0.92);
color: var(--surface-ink);
padding: 7px 12px;
font-size: 0.72rem;
}
.button--quiet:hover {
border-color: var(--surface-ink);
background: rgba(23, 21, 19, 0.04);
color: var(--surface-ink);
}
.button--pill {
border-radius: 999px;
}
.button--full {
width: 100%;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 999px;
padding: 0 20px;
font: 500 var(--text-sm) / 1 var(--font-body);
letter-spacing: var(--tracking-ui);
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.btn-primary {
border-color: var(--accent);
background: var(--accent);
color: var(--accent-inverse);
}
.btn-secondary {
border-color: var(--border-strong);
background: transparent;
color: var(--accent);
}
.btn-ghost {
border-color: transparent;
background: transparent;
color: var(--accent);
}
.btn-primary:hover,
.btn-secondary:hover {
transform: translateY(-1px);
}
.btn-primary:hover {
border-color: var(--brand-primary-hover);
background: var(--brand-primary-hover);
}
.btn-secondary:hover,
.btn-ghost:hover {
background: rgba(23, 21, 19, 0.04);
}
.badge {
display: inline-flex;
min-height: 22px;
align-items: center;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: var(--text-secondary);
padding: 4px 8px;
font-size: 0.68rem;
font-weight: 600;
line-height: 1;
}
.badge--sale {
border-color: var(--surface-ink);
background: var(--sale-badge-bg);
color: #ffffff;
}
.badge--sold {
background: var(--surface-sunken);
color: var(--text-muted);
}
.badge--warning {
border-color: rgba(138, 106, 67, 0.35);
background: var(--surface-raised);
color: var(--semantic-warning);
}
.price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
color: var(--text-primary);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
}
.price__compare {
color: var(--text-muted);
font-size: 0.86em;
font-weight: 500;
text-decoration: line-through;
}
.icon {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}
.utility-bar {
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-canvas);
color: var(--text-secondary);
font-size: 0.72rem;
}
.utility-bar__inner {
display: flex;
min-height: 32px;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.utility-bar__items {
display: flex;
flex-wrap: wrap;
gap: 14px;
color: var(--text-muted);
}
.utility-bar__link {
color: var(--surface-ink);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 4px;
white-space: nowrap;
}
.site-header {
position: sticky;
top: 0;
z-index: 70;
border-bottom: 1px solid rgba(23, 21, 19, 0.1);
background: rgba(251, 249, 246, 0.94);
backdrop-filter: blur(14px);
}
/* Transparent overlay header on homepage */
body.template-index .site-header {
position: absolute;
top: 32px;
left: 0;
right: 0;
background: transparent;
border-bottom: none;
backdrop-filter: none;
color: #F7F4EE;
}
body.template-index .site-header a,
body.template-index .site-header button,
body.template-index .site-header span,
body.template-index .site-header svg {
color: #F7F4EE;
fill: #F7F4EE;
}
body.template-index .utility-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 71;
background: transparent;
color: #F7F4EE;
border-bottom: 1px solid rgba(247, 244, 238, 0.18);
}
body.template-index .utility-bar,
body.template-index .utility-bar a,
body.template-index .utility-bar__link {
color: #F7F4EE;
}
/* Pull hero up under the header */
body.template-index main > .shopify-section:first-of-type {
margin-top: -104px;
}
/* Center utility bar text */
.utility-bar__inner {
justify-content: center;
text-align: center;
}
.utility-bar__text {
text-align: center;
flex: 1;
}
.site-header__inner {
position: relative;
display: grid;
min-height: 72px;
align-items: center;
gap: 12px;
grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
padding-block: 6px;
}
.site-header__left,
.site-header__actions {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 10px;
}
.site-header__left {
justify-self: start;
}
.site-header__actions {
justify-self: end;
justify-content: flex-end;
}
.site-header__brand {
display: inline-flex;
max-width: min(360px, 42vw);
min-width: 0;
align-items: center;
justify-content: center;
color: var(--surface-ink);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.1;
overflow: hidden;
text-align: center;
text-transform: none;
white-space: nowrap;
}
.site-header__logo {
width: min(190px, 36vw);
max-height: 40px;
object-fit: contain;
}
.site-header__text-link {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
border: 0;
background: transparent;
color: var(--surface-ink);
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.1;
padding: 0 2px;
white-space: nowrap;
}
.site-header__text-link:hover {
opacity: 0.72;
}
.site-header__text-link .icon {
width: 16px;
height: 16px;
}
.site-nav {
position: absolute;
top: calc(100% + 1px);
left: 50%;
display: flex;
width: min(100vw - var(--gutter) * 2, 760px);
transform: translateX(-50%);
justify-content: center;
gap: 24px;
border-bottom: 1px solid var(--border-subtle);
background: rgba(251, 249, 246, 0.96);
color: var(--text-secondary);
font-size: 0.75rem;
padding-block: 12px;
}
.site-nav a:hover {
opacity: 1;
}
.header-icon {
position: relative;
display: inline-grid;
width: 36px;
height: 36px;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--surface-ink);
}
.header-icon:hover {
opacity: 0.72;
}
.header-icon__count {
position: absolute;
top: 0;
right: 0;
display: grid;
min-width: 15px;
height: 15px;
place-items: center;
border-radius: 999px;
background: var(--surface-ink);
color: #ffffff;
font-size: 0.62rem;
line-height: 1;
}
.header-drawer {
position: relative;
}
.header-drawer summary {
cursor: pointer;
list-style: none;
}
.header-drawer summary::-webkit-details-marker {
display: none;
}
.header-drawer__scrim {
position: fixed;
inset: 0;
z-index: 90;
display: none;
background: rgba(24, 19, 16, 0.68);
}
.header-drawer[open] .header-drawer__scrim {
display: block;
}
.header-drawer__panel {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 91;
display: flex;
height: 100dvh;
width: min(468px, 92vw);
max-width: 100vw;
flex-direction: column;
border-right: 1px solid var(--border-subtle);
background: var(--surface-canvas);
color: var(--surface-ink);
box-shadow: 34px 0 80px rgba(23, 21, 19, 0.1);
transform: translateX(-100%);
transition: transform 240ms ease;
}
.header-drawer[open] .header-drawer__panel {
transform: translateX(0);
}
.header-drawer__top {
display: grid;
min-height: 72px;
align-items: center;
grid-template-columns: 40px 1fr 40px;
border-bottom: 1px solid var(--border-subtle);
padding-inline: 20px;
}
.header-drawer__close,
.luxury-search__close {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: 0;
background: transparent;
color: var(--text-secondary);
}
.header-drawer__close:hover,
.luxury-search__close:hover {
color: var(--surface-ink);
}
.header-drawer__brand,
.luxury-search__brand {
justify-self: center;
color: var(--surface-ink);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
text-transform: none;
}
.header-drawer__primary {
position: relative;
display: grid;
align-content: start;
gap: 3px;
flex: 1 1 auto;
overflow-y: auto;
padding: 46px 34px;
}
.header-drawer__item {
position: static;
}
.header-drawer__row {
display: grid;
align-items: center;
gap: 12px;
grid-template-columns: 1fr 34px;
}
.header-drawer__primary-link {
width: fit-content;
color: var(--surface-ink);
font-family: var(--font-display);
font-size: 1.62rem;
line-height: 1.25;
padding-block: 7px;
}
.header-drawer__item.is-active .header-drawer__primary-link,
.header-drawer__item:hover .header-drawer__primary-link,
.header-drawer__primary-link:focus-visible {
text-decoration: underline;
text-underline-offset: 5px;
}
.header-drawer__advance {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 0;
background: transparent;
color: var(--text-muted);
}
.header-drawer__advance .icon {
width: 15px;
height: 15px;
}
.header-drawer__flyout,
.header-drawer__tertiary {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
display: none;
width: min(360px, max(220px, calc(100vw - 468px)));
align-content: start;
gap: 28px;
overflow-y: auto;
border-left: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 46px 34px;
}
.header-drawer__item.is-active > .header-drawer__flyout,
.header-drawer__item:hover > .header-drawer__flyout,
.header-drawer__item:focus-within > .header-drawer__flyout {
display: grid;
}
.header-drawer__feature {
display: grid;
gap: 8px;
color: var(--text-secondary);
font-size: 0.72rem;
}
.header-drawer__feature img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.header-drawer__secondary {
display: grid;
align-content: start;
gap: 2px;
}
.header-drawer__secondary-group {
position: static;
}
.header-drawer__secondary-link {
display: block;
color: var(--surface-ink);
font-size: 0.94rem;
padding-block: 9px;
}
.header-drawer__secondary-link:hover,
.header-drawer__secondary-group:hover .header-drawer__secondary-link,
.header-drawer__secondary-group.is-active .header-drawer__secondary-link {
text-decoration: underline;
text-underline-offset: 4px;
}
.header-drawer__tertiary {
left: 100%;
width: min(280px, max(180px, calc(100vw - 780px)));
}
.header-drawer__secondary-group:hover .header-drawer__tertiary,
.header-drawer__secondary-group:focus-within .header-drawer__tertiary,
.header-drawer__secondary-group.is-active .header-drawer__tertiary {
display: grid;
}
.header-drawer__tertiary p {
color: var(--text-muted);
font-size: 0.72rem;
text-transform: uppercase;
}
.header-drawer__tertiary a {
color: var(--surface-ink);
font-size: 0.9rem;
padding-block: 6px;
}
.header-drawer__footer {
display: flex;
flex-wrap: wrap;
gap: 14px;
border-top: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 0.74rem;
padding: 20px 34px 30px;
}
.drawer-open,
.search-open {
overflow: hidden;
}
.luxury-search {
position: fixed;
inset: 0;
z-index: 100;
overflow-y: auto;
background: var(--surface-canvas);
color: #1a1a1a;}
.luxury-search__top {
display: grid;
min-height: 72px;
align-items: center;
grid-template-columns: 1fr auto 1fr;
}
.luxury-search__close {
justify-self: end;
}
.luxury-search__body,
.luxury-search-page {
display: grid;
gap: 32px;
padding-block: 42px 86px;
}
.luxury-search-page__header {
display: grid;
justify-items: center;
gap: 8px;
text-align: center;
}
.luxury-search-page__header h1 {
font-size: 2.25rem;
}
.luxury-search__form {
display: grid;
width: min(860px, 100%);
justify-self: center;
grid-template-columns: minmax(0, 1fr) auto;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: var(--surface-canvas);
padding: 6px;
}
.luxury-search__input {
width: 100%;
min-height: 44px;
border: 0;
background: transparent;
color: var(--surface-ink);
padding: 0 18px;
outline: 0;
}
.luxury-search__submit {
min-height: 44px;
border: 1px solid var(--surface-ink);
border-radius: 999px;
background: var(--surface-ink);
color: #ffffff;
padding-inline: 22px;
font-size: 0.76rem;
}
.luxury-search__trends {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 18px;
color: var(--text-secondary);
font-size: 0.78rem;
}
.luxury-search__trends span {
width: 100%;
color: var(--text-muted);
text-align: center;
}
.luxury-search__trends a {
text-decoration: underline;
text-underline-offset: 4px;
}
.luxury-search__recommendations {
display: grid;
gap: 18px;
padding-top: 18px;
}
.luxury-search__recommendations h2,
.search-page__summary {
font-family: var(--font-ui);
font-size: 0.86rem;
font-weight: 500;
text-align: center;
}
.product-grid--search,
.product-grid--search-results {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.search-result-card {
display: grid;
min-height: 220px;
align-content: end;
background: var(--surface-sunken);
padding: 18px;
}
.search-result-card h2 {
font-family: var(--font-ui);
font-size: 0.92rem;
line-height: 1.3;
}
.search-result-card__type {
color: var(--text-muted);
font-size: 0.7rem;
text-transform: uppercase;
}
.hero {
position: relative;
min-height: var(--hero-desktop-height, 78vh);
overflow: clip;
background: var(--brand-deep);
color: #ffffff;
}
.hero__media,
.hero__media img,
.hero__placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero__media img,
.hero__placeholder {
object-fit: cover;
}
.hero__placeholder {
background:
linear-gradient(105deg, rgba(23, 21, 19, 0.86), rgba(168, 132, 84, 0.08) 46%, rgba(23, 21, 19, 0.68)),
linear-gradient(90deg, #171513 0 36%, #a88454 36% 46%, #7a736a 46% 100%);
}
.hero::after {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(180deg, rgba(23, 21, 19, 0.02), rgba(23, 21, 19, 0.42)),
rgba(23, 21, 19, var(--hero-overlay, 0.25));
}
.hero--dark {
color: var(--surface-ink);
}
.hero--dark::after {
background: rgba(255, 255, 255, var(--hero-overlay, 0.2));
}
.hero__content {
position: relative;
z-index: 1;
display: flex;
min-height: var(--hero-desktop-height, 78vh);
align-items: flex-end;
justify-content: center;
padding-block: 82px 46px;
}
.hero--center .hero__content {
align-items: center;
}
.hero--bottom-left .hero__content {
justify-content: flex-start;
}
.hero__copy {
display: grid;
max-width: 780px;
justify-items: center;
gap: 13px;
text-align: center;
}
.hero--bottom-left .hero__copy {
justify-items: start;
text-align: left;
}
.hero__copy h1 {
color: inherit;
font-size: 3.8rem;
}
.hero__copy p {
max-width: 560px;
color: currentColor;
font-size: 1rem;
opacity: 0.86;
}
.hero__actions {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 4px;
}
.hero .button:not(.button--secondary) {
min-height: auto;
border: 0;
border-radius: 0;
background: transparent;
color: currentColor;
padding: 0;
text-decoration: underline;
text-underline-offset: 5px;
}
.hero .button--secondary {
min-height: auto;
border: 0;
border-radius: 0;
background: transparent;
color: currentColor;
padding: 0;
text-decoration: underline;
text-underline-offset: 5px;
}
.hero--dark .button:not(.button--secondary) {
color: currentColor;
}
.hero__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin-top: 12px;
}
.hero__meta span {
border: 1px solid rgba(255, 255, 255, 0.44);
border-radius: 999px;
background: rgba(23, 21, 19, 0.2);
padding: 6px 11px;
font-size: 0.72rem;
opacity: 0.82;
backdrop-filter: blur(12px);
}
.campaign-banner {
position: relative;
min-height: var(--campaign-height, 62vh);
overflow: hidden;
background: var(--brand-deep);
color: #ffffff;
}
.campaign-banner__media,
.campaign-banner__media img,
.campaign-banner__media .fabric-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.campaign-banner__media img,
.campaign-banner__media .fabric-placeholder {
object-fit: cover;
}
.campaign-banner::after {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(23, 21, 19, 0.02), rgba(23, 21, 19, 0.38)),
rgba(23, 21, 19, var(--campaign-overlay, 0.15));
content: "";
}
.campaign-banner--dark {
color: var(--surface-ink);
}
.campaign-banner--dark::after {
background: rgba(255, 255, 255, var(--campaign-overlay, 0.15));
}
.campaign-banner__content {
position: relative;
z-index: 1;
display: flex;
min-height: var(--campaign-height, 62vh);
align-items: flex-end;
justify-content: center;
padding-block: 62px 34px;
text-align: center;
}
.campaign-banner--center .campaign-banner__content {
align-items: center;
}
.campaign-banner--bottom-left .campaign-banner__content {
justify-content: flex-start;
text-align: left;
}
.campaign-banner__copy {
display: grid;
max-width: 640px;
justify-items: center;
gap: 12px;
}
.campaign-banner--bottom-left .campaign-banner__copy {
justify-items: start;
}
.campaign-banner__copy h2 {
color: inherit;
font-size: 2.4rem;
}
.campaign-banner__copy p:not(.eyebrow) {
max-width: 560px;
color: currentColor;
opacity: 0.78;
}
.campaign-banner .button {
min-height: auto;
border: 0;
border-radius: 0;
background: transparent;
color: currentColor;
padding: 0;
text-decoration: underline;
text-underline-offset: 5px;
}
.campaign-banner .button:hover {
background: transparent;
color: currentColor;
}
.intro-strip {
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-canvas);
padding-block: 26px;
text-align: center;
}
.intro-strip p {
max-width: 680px;
margin-inline: auto;
color: var(--surface-ink);
font-size: 1rem;
}
.fabric-placeholder {
position: relative;
display: grid;
width: 100%;
height: 100%;
min-height: 260px;
place-items: center;
overflow: hidden;
background:
linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.26) 12% 14%, transparent 14% 100%),
linear-gradient(135deg, #f7f4ee, #fbf9f6 52%, #d9d1c7);
}
.fabric-placeholder::before,
.fabric-placeholder::after,
.fabric-placeholder__loom {
position: absolute;
inset: 0;
content: "";
}
.fabric-placeholder::before {
opacity: 0.5;
background:
repeating-linear-gradient(90deg, rgba(24, 19, 16, 0.08) 0 1px, transparent 1px 26px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 22px);
}
.fabric-placeholder::after {
background: linear-gradient(180deg, transparent 54%, rgba(24, 19, 16, 0.12));
}
.fabric-placeholder__loom {
transform: skewY(-7deg) scale(1.08);
background:
linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.42) 46% 54%, transparent 54%),
linear-gradient(0deg, transparent 46%, rgba(24, 19, 16, 0.06) 46% 54%, transparent 54%);
background-size: 96px 96px;
}
.fabric-placeholder__label {
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.64);
border-radius: 999px;
background: rgba(255, 255, 255, 0.36);
color: rgba(24, 19, 16, 0.78);
padding: 8px 12px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.fabric-placeholder--formal {
background:
linear-gradient(110deg, rgba(255, 255, 255, 0.18), transparent 42%),
linear-gradient(135deg, #1b1815, #171513 52%, #3a332d);
}
.fabric-placeholder--regular {
background:
linear-gradient(110deg, rgba(255, 255, 255, 0.32), transparent 48%),
linear-gradient(135deg, #f7f4ee, #fbf9f6 50%, #b8aea2);
}
.fabric-placeholder--accessories {
background:
linear-gradient(110deg, rgba(255, 255, 255, 0.3), transparent 50%),
linear-gradient(135deg, #f7f4ee, #a88454 42%, #3a332d);
}
.fabric-placeholder--silk {
background:
linear-gradient(110deg, rgba(255, 255, 255, 0.44), transparent 52%),
linear-gradient(135deg, #f7f4ee, #f1ece5 48%, #a88454);
}
.fabric-placeholder--velvet,
.fabric-placeholder--deep {
background:
linear-gradient(110deg, rgba(255, 255, 255, 0.13), transparent 42%),
linear-gradient(135deg, #171513, #1b1815 52%, #3a332d);
}
.fabric-placeholder--formal .fabric-placeholder__label,
.fabric-placeholder--velvet .fabric-placeholder__label,
.fabric-placeholder--deep .fabric-placeholder__label {
color: #ffffff;
}
.empty-state {
border: 1px dashed var(--border-strong);
background: var(--surface-raised);
color: var(--text-secondary);
padding: 22px;
}
.grid {
display: grid;
gap: 2px;
}
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 34px;
}
.section-header p {
max-width: 560px;
margin-top: 8px;
color: var(--text-secondary);
}
.section-header--center {
display: grid;
justify-items: center;
gap: 8px;
text-align: center;
}
.section-header--center p {
margin-inline: auto;
}
.season-edit__grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(var(--season-columns, 4), minmax(0, 1fr));
}
.category-card {
position: relative;
display: grid;
min-width: 0;
overflow: hidden;
background: var(--surface-sunken);
}
.category-card__media {
display: block;
overflow: hidden;
background: var(--surface-sunken);
aspect-ratio: 3 / 4;
}
.category-card img,
.category-card__media .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 260ms ease;
}
.category-card__media .fabric-placeholder {
min-height: 0;
}
.category-card__content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: grid;
gap: 6px;
padding: 54px 16px 16px;
background: linear-gradient(180deg, rgba(23, 21, 19, 0), rgba(23, 21, 19, 0.58));
color: #ffffff;
text-align: left;
}
.category-card__content h3 {
color: inherit;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 500;
line-height: 1.18;
}
.category-card__content p {
color: rgba(255, 255, 255, 0.78);
font-size: 0.76rem;
}
.category-card:hover img {
transform: scale(1.02);
}
.category-card--editorial {
gap: 14px;
}
.category-card--editorial .category-card__media {
aspect-ratio: 4 / 5;
}
.product-edit .section-header {
margin-bottom: 18px;
}
.product-grid {
display: grid;
gap: 34px 14px;
grid-template-columns: repeat(var(--product-grid-columns, 3), minmax(0, 1fr));
}
.product-grid--collection {
gap: 14px;
grid-template-columns: repeat(var(--product-grid-columns, 3), minmax(0, 1fr));
}
.product-grid--manual,
body.template-index .product-grid--manual {
grid-template-columns: repeat(var(--product-grid-columns, 3), minmax(0, 1fr));
}
.product-card {
position: relative;
display: grid;
align-content: start;
min-width: 0;
background: transparent;
}
.product-card__media-wrap {
position: relative;
min-width: 0;
}
.product-card__media {
position: relative;
display: block;
overflow: hidden;
background: var(--surface-raised);
border-radius: var(--radius-lg);
aspect-ratio: 3 / 4;
}
.product-card__media .fabric-placeholder {
min-height: 0;
}
.product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
padding: 0;
transition: opacity 220ms ease, transform 220ms ease;
}
.product-card__image--secondary {
position: absolute;
inset: 0;
opacity: 0;
}
.product-card:hover .product-card__image--secondary {
opacity: 1;
}
.product-card:hover .product-card__media img {
transform: scale(1.02);
}
.product-card__badges {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.product-card--minimal .product-card__badges {
display: none;
}
.product-grid--collection .product-card--minimal .product-card__badges {
display: flex;
}
.wishlist-button {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: grid;
width: 30px;
min-height: 30px;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--text-muted);
}
.wishlist-button:hover {
color: var(--surface-ink);
}
.wishlist-button .icon {
width: 15px;
height: 15px;
}
.product-card__content {
display: grid;
gap: 5px;
padding: 12px 2px 0;
}
.product-card__line {
display: flex;
min-height: 16px;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.product-card__title {
display: -webkit-box;
overflow: hidden;
margin: 0;
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 500;
line-height: 1.34;
min-height: 2.5em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.product-card__title a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.product-card__meta {
color: var(--text-muted);
font-size: 0.7rem;
line-height: 1.25;
}
.product-card__footer {
display: grid;
min-height: 24px;
align-items: start;
gap: 8px;
}
.product-card--minimal .product-card__footer {
min-height: 24px;
}
.product-card__form {
opacity: 0;
transition: opacity 160ms ease;
}
.product-card:hover .product-card__form,
.product-card:focus-within .product-card__form {
opacity: 1;
}
.product-edit__footer {
display: flex;
justify-content: center;
margin-top: 26px;
}
body.template-index .intro-strip {
padding-block: 24px;
}
body.template-index .section-header {
margin-bottom: 32px;
}
body.template-index .section-header--center {
gap: 10px;
width: fit-content;
max-width: min(100%, 720px);
margin-inline: auto;
text-align: center;
}
body.template-index .section-header--center > div {
display: grid;
justify-items: center;
width: auto;
max-width: 100%;
text-align: center;
}
body.template-index .product-edit .section-header--center {
margin-bottom: 24px;
}
body.template-index .section-header--center .eyebrow,
body.template-index .section-header--center h1,
body.template-index .section-header--center h2,
body.template-index .section-header--center h3,
body.template-index .section-header--center > p {
width: auto;
max-width: 100%;
text-align: center;
}
body.template-index .section-header--center > p {
width: min(100%, 620px);
max-width: 620px;
}
body.template-index .season-edit,
body.template-index .product-edit {
padding-block: 76px;
}
body.template-index .season-edit__grid {
gap: 20px;
}
body.template-index .category-card {
min-height: 100%;
}
body.template-index .category-card__media {
aspect-ratio: 3 / 4;
}
body.template-index .category-card__content {
padding: 56px 16px 16px;
}
body.template-index .category-card__content h3 {
font-size: 1.2rem;
}
body.template-index .product-edit .page-width {
max-width: 1320px;
}
body.template-index .product-grid {
gap: 34px 14px;
grid-template-columns: repeat(var(--product-grid-columns, 3), minmax(0, 1fr));
justify-content: center;
}
body.template-index .product-card__media {
background: var(--surface-raised);
}
body.template-index .product-card__media img {
padding: 0;
}
body.template-index .product-card__content {
gap: 7px;
padding: 12px 2px 0;
}
body.template-index .product-card__line {
min-height: 16px;
}
body.template-index .product-card__title {
min-height: 2.7em;
font-size: 1rem;
}
body.template-index .product-card__footer {
min-height: 28px;
}
body.template-index .product-edit__footer {
margin-top: 28px;
}
body.template-index .campaign-banner,
body.template-index .campaign-banner__content {
min-height: clamp(360px, var(--campaign-height, 52vh), 620px);
}
body.template-index .campaign-banner__content {
padding-block: 58px 34px;
}
body.template-index .campaign-banner__copy {
max-width: 620px;
gap: 10px;
}
body.template-index .campaign-banner__copy p:not(.eyebrow) {
opacity: 0.86;
}
.color-dots {
display: flex;
gap: 5px;
}
.color-dot {
width: 14px;
height: 14px;
border: 1px solid var(--border-strong);
border-radius: 50%;
background: var(--surface-sunken);
}
.band {
background: var(--surface-sunken);
}
.fabric-card,
.reel-card,
.trust-card,
.press-card {
border: 1px solid var(--border-subtle);
background: transparent;
padding: 22px;
}
.fabric-card h3,
.reel-card h3,
.trust-card h3 {
margin-bottom: 8px;
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 600;
}
.fabric-card p,
.reel-card p,
.trust-card p {
color: var(--text-secondary);
}
.founder {
display: grid;
align-items: center;
gap: 48px;
grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
}
.founder__image {
overflow: hidden;
background: var(--surface-sunken);
aspect-ratio: 4 / 5;
}
.founder__image img,
.founder__image .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.newsletter-panel {
display: grid;
align-items: center;
gap: 26px;
grid-template-columns: 1fr minmax(280px, 420px);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 48px;
}
.newsletter-panel p {
color: var(--text-secondary);
margin-top: 10px;
}
.newsletter-form {
display: grid;
gap: 10px;
}
.input,
.select,
.textarea {
width: 100%;
min-height: 48px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: var(--surface-raised);
color: var(--text-primary);
padding: 0 16px;
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
outline: 0;
border-color: var(--surface-ink);
box-shadow: 0 0 0 3px rgba(23, 21, 19, 0.08);
}
.textarea {
min-height: 96px;
border-radius: var(--radius-lg);
padding-block: 12px;
resize: vertical;
}
.collection-page {
background: var(--surface-canvas);
}
.collection-quickbar {
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-canvas);
}
.collection-quickbar__inner {
display: flex;
min-height: 56px;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.collection-switcher {
position: relative;
}
.collection-switcher summary {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-muted);
cursor: pointer;
font-size: 0.72rem;
list-style: none;
}
.collection-switcher summary::-webkit-details-marker {
display: none;
}
.collection-switcher strong {
color: var(--surface-ink);
font-weight: 500;
}
.collection-switcher__panel {
position: absolute;
top: calc(100% + 14px);
left: 0;
z-index: 20;
width: min(420px, calc(100vw - 32px));
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
color: var(--text-secondary);
padding: 18px;
box-shadow: var(--shadow-soft);
}
.collection-quickbar__actions {
display: flex;
align-items: center;
gap: 12px;
}
.collection-hero-media {
position: relative;
overflow: hidden;
height: var(--collection-hero-height, 48vh);
min-height: 360px;
background: var(--surface-sunken);
}
.collection-hero-media img,
.collection-hero-media .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.collection-hero-media__caption {
position: absolute;
right: 0;
bottom: 18px;
left: 0;
display: flex;
justify-content: center;
color: #ffffff;
font-size: 0.78rem;
font-weight: 600;
}
.collection-hero-media__caption span {
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 0;
background: rgba(24, 19, 16, 0.28);
padding: 7px 12px;
backdrop-filter: blur(12px);
}
.collection-sort {
display: flex;
align-items: center;
gap: 8px;
}
.collection-sort label {
color: var(--text-muted);
font-size: 0.72rem;
}
.collection-sort .select {
min-height: 34px;
width: auto;
min-width: 150px;
font-size: 0.76rem;
}
.filter-drawer {
position: relative;
}
.filter-drawer > summary.button--pill {
min-height: 34px;
border-color: var(--surface-ink);
background: transparent;
color: var(--surface-ink);
padding-inline: 16px;
}
.filter-drawer > summary.button--pill:hover {
background: var(--surface-ink);
color: #ffffff;
}
.filter-drawer summary {
cursor: pointer;
list-style: none;
}
.filter-drawer summary::-webkit-details-marker {
display: none;
}
.filter-drawer__panel {
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: 30;
width: min(360px, calc(100vw - 32px));
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 18px;
box-shadow: var(--shadow-soft);
}
.filter-panel {
display: grid;
gap: 16px;
}
.filter-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.filter-panel__close {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 50%;
background: transparent;
color: var(--text-secondary);
}
.filter-panel__close:hover {
border-color: var(--surface-ink);
color: var(--surface-ink);
}
.filter-drawer__count {
display: inline-grid;
min-width: 18px;
height: 18px;
place-items: center;
border-radius: 999px;
background: var(--surface-ink);
color: #ffffff;
font-size: 0.64rem;
line-height: 1;
}
.filter-group {
border-top: 1px solid var(--border-subtle);
padding-top: 14px;
}
.filter-group summary {
cursor: pointer;
font-weight: 600;
}
.filter-option {
display: flex;
min-height: 32px;
align-items: center;
gap: 8px;
color: var(--text-secondary);
font-size: 0.86rem;
}
.filter-price {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 10px;
}
.collection-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--border-subtle);
padding-block: 12px;
}
.collection-active-filters > span {
color: var(--text-muted);
font-size: 0.72rem;
}
.collection-active-filters a {
display: inline-flex;
min-height: 28px;
align-items: center;
gap: 6px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: var(--surface-raised);
color: var(--text-secondary);
padding: 5px 10px;
font-size: 0.72rem;
}
.collection-active-filters a:hover {
border-color: var(--surface-ink);
color: var(--surface-ink);
}
.collection-active-filters .icon {
width: 12px;
height: 12px;
}
.collection-active-filters__clear {
border-color: transparent !important;
text-decoration: underline;
text-underline-offset: 4px;
}
.collection-category-rail {
display: grid;
gap: 14px;
grid-auto-columns: minmax(130px, 1fr);
grid-auto-flow: column;
overflow-x: auto;
padding-block: 18px;
}
.category-tile {
display: grid;
gap: 7px;
min-width: 130px;
text-align: center;
}
.category-tile__media {
display: block;
overflow: hidden;
background: var(--surface-sunken);
aspect-ratio: 1 / 1;
}
.category-tile__media img,
.category-tile__media .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-tile__media .fabric-placeholder {
min-height: 0;
}
.category-tile__label {
color: var(--text-secondary);
font-size: 0.76rem;
}
.collection-heading {
display: grid;
justify-items: center;
gap: 4px;
padding-block: 50px 30px;
text-align: center;
}
.collection-heading h1 {
font-size: 2.8rem;
}
.collection-editorial-tile {
position: relative;
display: grid;
overflow: hidden;
min-height: 100%;
background: var(--surface-sunken);
}
.collection-editorial-tile--large {
grid-column: span 2;
grid-row: span 2;
}
.collection-editorial-tile--wide {
grid-column: span 2;
}
.collection-editorial-tile__media,
.collection-editorial-tile__media img,
.collection-editorial-tile__media .fabric-placeholder {
width: 100%;
height: 100%;
}
.collection-editorial-tile__media img,
.collection-editorial-tile__media .fabric-placeholder {
min-height: 420px;
object-fit: cover;
}
.collection-editorial-tile__caption {
position: absolute;
right: 16px;
bottom: 14px;
left: 16px;
color: #ffffff;
font-size: 0.78rem;
font-weight: 600;
text-align: center;
}
.collection-loading-marker {
display: grid;
min-height: 112px;
place-items: center;
border-top: 1px solid var(--border-subtle);
background: var(--surface-canvas);
}
.collection-loading-marker span {
position: relative;
width: 18px;
height: 18px;
border: 1px solid var(--surface-ink);
transform: rotate(45deg);
}
.collection-loading-marker span::before,
.collection-loading-marker span::after {
position: absolute;
background: var(--surface-raised);
content: "";
}
.collection-loading-marker span::before {
top: 7px;
right: -4px;
left: -4px;
height: 2px;
}
.collection-loading-marker span::after {
top: -4px;
bottom: -4px;
left: 7px;
width: 2px;
}
.page-width--narrow {
width: min(100% - var(--gutter) * 2, 920px);
margin-inline: auto;
}
.rte-page {
display: grid;
gap: 22px;
max-width: 840px;
}
.rte-page h1 {
font-size: 2.35rem;
}
.rte-page .muted {
color: var(--text-secondary);
}
.support-page .section-header {
align-items: start;
}
.support-page__content {
margin-bottom: 34px;
}
.support-page__grid {
display: grid;
gap: 2px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.support-page__card {
display: grid;
align-content: start;
gap: 12px;
min-height: 220px;
padding: 28px;
background: var(--surface-raised);
border: 1px solid var(--border-subtle);
}
.support-page__card--notice {
background: var(--surface-sunken);
}
.support-page__card h2 {
font-size: 1.12rem;
}
.support-page__text {
color: var(--text-secondary);
}
.support-page__link {
align-self: end;
color: var(--text-primary);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}
.support-page__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-block: 38px 64px;
}
.pagination a,
.pagination span {
display: grid;
min-width: 38px;
min-height: 38px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: var(--surface-raised);
font-size: 0.82rem;
}
.pagination .current {
border-color: var(--surface-ink);
color: var(--surface-ink);
}
.product-shell {
padding-block: 0 88px;
}
.product-page {
display: grid;
align-items: start;
gap: 64px;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
}
.product-gallery {
display: grid;
gap: 10px;
}
.product-gallery__item {
overflow: hidden;
background: var(--surface-raised);
}
.product-gallery__item img {
width: 100%;
height: auto;
}
.product-page--square .product-gallery__item img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.product-page--portrait .product-gallery__item img {
aspect-ratio: 4 / 5;
object-fit: cover;
padding: 0;
}
.product-info {
position: sticky;
top: 98px;
display: grid;
gap: 22px;
max-width: 460px;
justify-self: center;
padding: 64px 0 0;
}
.product-info__header {
position: relative;
display: grid;
gap: 12px;
}
.product-info__header .product-card__badges {
position: static;
}
.product-info__topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.product-info__sku,
.product-info__status {
color: var(--text-muted);
font-size: 0.72rem;
}
.product-info__status {
color: var(--text-secondary);
}
.product-info__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
line-height: 1.18;
}
.wishlist-button--product {
position: static;
flex: 0 0 auto;
border: 1px solid var(--border-subtle);
}
.product-description {
color: var(--text-secondary);
font-size: 0.84rem;
}
.product-description summary {
cursor: pointer;
list-style: none;
}
.product-description summary::-webkit-details-marker {
display: none;
}
.product-description__excerpt {
display: block;
max-width: 36rem;
}
.product-description__more {
display: inline-flex;
margin-top: 8px;
color: var(--surface-ink);
font-size: 0.76rem;
text-decoration: underline;
text-underline-offset: 4px;
}
.product-description__less {
display: none;
color: var(--surface-ink);
font-size: 0.76rem;
text-decoration: underline;
text-underline-offset: 4px;
}
.product-description__content {
display: none;
padding-top: 8px;
}
.product-description[open] .product-description__excerpt,
.product-description[open] .product-description__more {
display: none;
}
.product-description[open] .product-description__less {
display: inline-flex;
}
.product-description[open] .product-description__content {
display: block;
}
.product-form {
display: grid;
gap: 14px;
}
.product-form .button[type="submit"] {
border-color: var(--brand-primary);
background: var(--brand-primary);
color: #ffffff;
}
.form-row {
display: grid;
gap: 7px;
}
.form-row label {
color: var(--text-secondary);
font-size: 0.78rem;
}
.trust-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
color: var(--text-secondary);
list-style: none;
}
.trust-list li {
display: flex;
gap: 10px;
}
.trust-list li::before {
flex: 0 0 auto;
width: 5px;
height: 5px;
margin-top: 9px;
border-radius: 50%;
background: var(--brand-accent);
content: "";
}
.accordion {
border-top: 1px solid var(--border-subtle);
}
.accordion .faq-item {
background: transparent;
}
.accordion details {
border-bottom: 1px solid var(--border-subtle);
padding-block: 17px;
}
.accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
font-size: 0.82rem;
font-weight: 500;
list-style: none;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion summary::after {
content: "+";
color: var(--text-muted);
font-size: 1rem;
line-height: 1;
}
.accordion details[open] summary::after {
content: "-";
}
.accordion__content {
color: var(--text-secondary);
padding-top: 10px;
}
.sticky-mobile-atc {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 45;
display: none;
align-items: center;
justify-content: space-between;
gap: 14px;
border-top: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 12px 16px;
box-shadow: 0 -12px 34px rgba(24, 19, 16, 0.1);
}
.sticky-mobile-atc .price {
min-width: 0;
}
.sticky-mobile-atc .button {
flex: 0 0 auto;
white-space: nowrap;
}
.sticky-mobile-atc .button .icon {
width: 15px;
height: 15px;
}
.cart-shell {
padding-block: 42px 72px;
}
.cart-page {
display: grid;
gap: 28px;
}
.cart-page__header h1 {
font-size: 2.35rem;
}
.cart-empty {
display: grid;
justify-items: start;
gap: 18px;
max-width: 520px;
color: var(--text-secondary);
}
.cart-form {
display: grid;
align-items: start;
gap: clamp(28px, 4vw, 64px);
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}
.cart-main {
display: grid;
gap: 26px;
}
.cart-items {
display: grid;
gap: 0;
border-top: 1px solid var(--border-subtle);
}
.cart-item {
display: grid;
gap: 16px;
grid-template-columns: 112px minmax(0, 1fr) auto;
border-bottom: 1px solid var(--border-subtle);
padding-block: 18px;
}
.cart-item img {
width: 112px;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.cart-item h2 {
font-family: var(--font-ui);
font-size: 0.98rem;
font-weight: 600;
}
.cart-item label {
display: block;
margin-top: 12px;
color: var(--text-muted);
font-size: 0.72rem;
}
.cart-item .input {
width: 92px;
margin-top: 6px;
}
.cart-item__total {
min-width: 112px;
text-align: right;
}
.cart-notes {
display: grid;
gap: 10px;
max-width: 620px;
}
.cart-notes > label:not(.filter-option) {
color: var(--text-secondary);
font-size: 0.78rem;
}
.cart-summary {
position: sticky;
top: 96px;
display: grid;
gap: 14px;
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 22px;
}
.cart-summary__subtotal {
justify-content: space-between;
width: 100%;
margin-top: 8px;
}
.cart-summary__whatsapp,
.cart-summary__service {
display: grid;
}
.cart-summary__service {
gap: 10px;
border-top: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 0.84rem;
padding-top: 14px;
}
.accordion__content p + p {
margin-top: 8px;
}
.progress {
overflow: hidden;
height: 7px;
border-radius: 999px;
background: var(--surface-sunken);
}
.progress span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--brand-accent);
}
.editorial-film {
padding-top: 0;
}
.mosaic {
display: grid;
gap: 34px;
}
.mosaic__media {
position: relative;
overflow: hidden;
height: min(66vh, 820px);
min-height: 420px;
background: var(--surface-sunken);
}
.mosaic__media img,
.mosaic__media svg,
.mosaic__media .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.mosaic__panel {
display: grid;
max-width: 760px;
justify-items: center;
gap: 18px;
margin-inline: auto;
text-align: center;
}
.mosaic__mini-grid {
display: grid;
width: min(100%, 520px);
gap: 2px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mosaic__mini {
overflow: hidden;
background: var(--surface-sunken);
aspect-ratio: 4 / 5;
}
.mosaic__mini img,
.mosaic__mini svg,
.mosaic__mini .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.mosaic__mini .fabric-placeholder {
min-height: 0;
}
.mosaic__stat-row {
display: grid;
width: min(100%, 640px);
gap: 2px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mosaic__stat {
border-top: 1px solid var(--border-subtle);
padding-top: 12px;
}
.mosaic__stat strong {
display: block;
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 500;
line-height: 1;
}
.editorial-drop {
padding-top: 0;
}
.spotlight {
display: grid;
gap: 34px;
}
.spotlight__visual {
position: relative;
overflow: hidden;
height: min(68vh, 820px);
min-height: 440px;
background: var(--surface-sunken);
}
.spotlight__visual img,
.spotlight__visual svg,
.spotlight__visual .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.spotlight__note {
position: absolute;
right: 22px;
bottom: 22px;
max-width: 360px;
border: 1px solid rgba(255, 255, 255, 0.32);
background: rgba(24, 19, 16, 0.56);
color: #ffffff;
padding: 16px;
backdrop-filter: blur(12px);
}
.spotlight__note p {
margin-top: 4px;
color: rgba(255, 255, 255, 0.78);
}
.spotlight__content {
display: grid;
max-width: 920px;
justify-items: center;
gap: 12px;
text-align: center;
}
.spotlight__content .button {
margin-top: 4px;
}
.spotlight__products {
display: grid;
width: 100%;
gap: 2px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 22px;
}
.atelier-grid {
display: grid;
align-items: start;
gap: 2px;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.atelier-panel {
display: grid;
min-height: 100%;
align-content: center;
gap: 12px;
background: var(--surface-sunken);
padding: 48px;
}
.atelier-panel p {
color: var(--text-secondary);
}
.atelier-steps {
display: grid;
gap: 2px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.atelier-step {
display: grid;
align-content: start;
gap: 18px;
min-height: 260px;
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 26px;
}
.atelier-step__number {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 50%;
color: var(--text-secondary);
font-family: var(--font-display);
font-size: 1rem;
}
.atelier-step h3 {
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 600;
}
.fit-finder {
display: grid;
gap: 32px;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
}
.fit-finder__questions {
display: grid;
gap: 12px;
margin-top: 24px;
}
.fit-question {
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 18px;
}
.fit-question strong {
display: block;
margin-bottom: 10px;
}
.fit-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fit-options span {
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 8px 12px;
background: var(--surface-canvas);
color: var(--text-secondary);
font-size: 0.84rem;
}
.fit-finder__card {
display: grid;
align-content: space-between;
background: var(--surface-sunken);
min-height: 100%;
padding: 34px;
}
.measure-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--border-subtle);
padding-block: 12px;
}
.press-grid {
display: grid;
gap: 2px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.press-card blockquote {
margin: 0;
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.2;
}
.press-card cite {
color: var(--text-secondary);
font-style: normal;
}
.concierge-strip {
border-block: 1px solid var(--border-subtle);
background: var(--surface-raised);
}
.concierge-strip__inner {
display: grid;
align-items: center;
gap: 18px;
grid-template-columns: auto 1fr auto;
padding-block: 17px;
}
.concierge-strip__icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 50%;
color: var(--brand-accent);
}
.luxury-services__grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.luxury-service-card {
display: grid;
gap: 16px;
}
.luxury-service-card__media {
display: block;
overflow: hidden;
background: var(--surface-sunken);
aspect-ratio: 3 / 4;
}
.luxury-service-card__media img,
.luxury-service-card__media .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.luxury-service-card__copy {
display: grid;
justify-items: center;
gap: 6px;
padding: 0 12px;
text-align: center;
}
.luxury-service-card__copy h3 {
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 550;
}
.luxury-service-card__copy p {
max-width: 280px;
color: var(--text-secondary);
font-size: 0.78rem;
}
.luxury-service-card__copy a {
color: var(--surface-ink);
font-size: 0.76rem;
text-decoration: underline;
text-underline-offset: 4px;
}
.site-footer {
border-top: 1px solid var(--border-subtle);
background: var(--surface-canvas);
color: var(--text-primary);
padding-block: 64px 34px;
}
.site-footer__grid {
display: grid;
gap: 52px;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
}
.site-footer__brand-block {
display: grid;
align-content: start;
gap: 14px;
}
.site-footer__brand {
color: var(--surface-ink);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
text-transform: none;
}
.site-footer__logo {
max-width: 160px;
max-height: 40px;
object-fit: contain;
}
.site-footer__columns {
display: grid;
gap: 28px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-footer a,
.site-footer p {
color: var(--text-secondary);
}
.site-footer h2,
.site-footer h3 {
color: var(--text-primary);
}
body.template-index:not(.has-scrolled) .luxury-search,
body.template-index:not(.has-scrolled) .luxury-search *,
body.template-index:not(.has-scrolled) .luxury-search svg {
color: var(--text-primary);
stroke: currentColor;
text-shadow: none;
}
body.template-index:not(.has-scrolled) .site-header .luxury-search a,
body.template-index:not(.has-scrolled) .site-header .luxury-search button,
body.template-index:not(.has-scrolled) .site-header .luxury-search input,
body.template-index:not(.has-scrolled) .site-header .luxury-search span,
body.template-index:not(.has-scrolled) .site-header .luxury-search svg {
color: var(--text-primary);
stroke: currentColor;
text-shadow: none;
}
body.template-index:not(.has-scrolled) .site-header .luxury-search button.luxury-search__submit {
color: #fffdf9;
}
.site-footer h3 {
margin-bottom: 12px;
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 600;
}
.site-footer__social {
display: flex;
gap: 14px;
}
.footer-links {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
color: var(--text-secondary);
list-style: none;
}
.footer-newsletter {
display: grid;
gap: 10px;
}
.site-footer .input {
border-color: var(--border-subtle);
background: var(--surface-raised);
color: var(--text-primary);
}
.site-footer .input::placeholder {
color: var(--text-muted);
}
.site-footer .button {
border-color: var(--brand-primary);
background: var(--brand-primary);
color: #ffffff;
}
.site-footer .button:hover {
border-color: var(--brand-primary-hover);
background: var(--brand-primary-hover);
color: #ffffff;
}
.site-footer__bottom {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 52px;
color: var(--text-muted);
font-size: 0.72rem;
}
.whatsapp-fab {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 50%;
background: var(--surface-ink);
color: #ffffff;
box-shadow: var(--shadow-soft);
}
@media (max-width: 1099px) {
.header-drawer__panel {
width: min(560px, 92vw);
}
.header-drawer__row {
grid-template-columns: 1fr;
}
.header-drawer__advance {
display: none;
}
.header-drawer__flyout,
.header-drawer__tertiary {
position: static;
display: grid;
width: auto;
border-left: 0;
padding: 4px 0 16px 18px;
}
.header-drawer__feature {
display: none;
}
}
@media (max-width: 989px) {
:root {
--gutter: 20px;
}
.section-spacing {
padding-block: 64px;
}
body.template-index .season-edit,
body.template-index .product-edit {
padding-block: 56px;
}
body.template-index .season-edit__grid,
body.template-index .product-grid {
gap: 14px;
}
body.template-index .product-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 306px));
justify-content: center;
}
h1,
.h1,
.hero__copy h1 {
font-size: 3rem;
}
h2,
.h2,
.collection-heading h1,
.product-info__title {
font-size: 2rem;
}
.site-header__inner {
min-height: 58px;
}
.site-header__text-link span {
display: none;
}
.site-header__call {
display: none;
}
.site-nav {
display: none;
}
.header-drawer__panel {
width: min(560px, 92vw);
}
.header-drawer__primary {
overflow-y: auto;
padding: 28px 24px;
}
.header-drawer__row {
grid-template-columns: 1fr;
}
.header-drawer__advance {
display: none;
}
.header-drawer__flyout,
.header-drawer__tertiary {
position: static;
display: grid;
width: auto;
border-left: 0;
padding: 4px 0 16px 18px;
}
.header-drawer__feature {
display: none;
}
.header-drawer__primary-link {
font-size: 1.34rem;
}
.product-grid--search,
.product-grid--search-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero,
.hero__content,
.campaign-banner,
.campaign-banner__content {
min-height: var(--hero-mobile-height, 72vh);
}
.campaign-banner,
.campaign-banner__content {
min-height: var(--campaign-mobile-height, 58vh);
}
body.template-index .campaign-banner,
body.template-index .campaign-banner__content {
height: auto;
min-height: clamp(320px, var(--campaign-mobile-height, 46vh), 500px);
}
.season-edit__grid,
.grid--3,
.grid--4,
.product-grid,
.product-grid--collection,
.luxury-services__grid,
.support-page__grid,
.press-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.collection-editorial-tile--large,
.collection-editorial-tile--wide {
grid-column: span 2;
grid-row: span 1;
}
.founder,
.newsletter-panel,
.product-page,
.cart-form,
.site-footer__grid,
.atelier-grid,
.fit-finder,
.concierge-strip__inner {
grid-template-columns: 1fr;
}
.atelier-steps,
.site-footer__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-info,
.cart-summary {
position: static;
}
.product-info {
max-width: none;
justify-self: stretch;
padding: 34px 0 0;
}
.product-card__form {
opacity: 1;
}
.sticky-mobile-atc {
display: flex;
}
body.template-product {
padding-bottom: 78px;
}
}
@media (max-width: 640px) {
:root {
--gutter: 16px;
}
body {
font-size: 15px;
}
.section-spacing {
padding-block: 52px;
}
body.template-index .intro-strip {
padding-block: 18px;
}
body.template-index .season-edit,
body.template-index .product-edit {
padding-block: 44px;
}
body.template-index .section-header {
margin-bottom: 22px;
}
h1,
.h1,
.hero__copy h1 {
font-size: 2.25rem;
}
h2,
.h2,
.collection-heading h1,
.product-info__title {
font-size: 1.6rem;
}
.site-header__text-link span,
.site-header__actions .header-icon:not(.header-icon--cart) {
display: none;
}
.site-header__inner {
gap: 8px;
grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
padding-block: 4px;
}
.site-header__brand {
max-width: 38vw;
font-size: 0.78rem;
}
.site-header__logo {
width: min(132px, 38vw);
max-height: 34px;
}
.site-header__left,
.site-header__actions {
gap: 4px;
}
.header-icon {
width: 34px;
height: 34px;
}
.header-drawer__top,
.luxury-search__top {
min-height: 58px;
}
.luxury-search__body,
.luxury-search-page {
gap: 24px;
padding-block: 28px 58px;
}
.luxury-search__form {
grid-template-columns: 1fr;
border-radius: 22px;
}
.luxury-search__submit {
width: 100%;
}
.section-header,
.collection-quickbar__inner,
.collection-quickbar__actions,
.cart-item {
align-items: stretch;
flex-direction: column;
}
.section-header,
.collection-quickbar__inner,
.collection-quickbar__actions {
display: grid;
}
.utility-bar__inner {
justify-content: center;
text-align: center;
}
.utility-bar__items {
justify-content: center;
}
.filter-drawer {
position: static;
}
.filter-drawer__panel {
position: fixed;
inset: auto 0 0;
z-index: 95;
width: 100%;
max-height: 82dvh;
overflow-y: auto;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}
.collection-active-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-inline: 16px;
}
.hero__content {
padding-block: 54px 30px;
}
body.template-index .hero__content {
padding-block: 48px 28px;
}
.hero__actions,
.hero__meta {
width: 100%;
}
.hero__actions .button {
flex: 1 1 150px;
}
.product-card__content {
padding-inline: 6px;
}
body.template-index .product-grid {
gap: 18px 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
}
body.template-index .category-card__media {
aspect-ratio: 1 / 1;
}
body.template-index .category-card__content h3,
body.template-index .product-card__title {
font-size: 0.88rem;
}
body.template-index .category-card__content p,
body.template-index .product-card__meta {
font-size: 0.68rem;
}
body.template-index .product-card__content {
gap: 6px;
padding: 9px 0 0;
}
body.template-index .price {
font-size: 0.88rem;
}
.product-card__footer {
display: grid;
align-items: start;
}
.product-card .wishlist-button {
display: none;
}
.wishlist-button--product {
display: grid;
}
.cart-item {
grid-template-columns: 92px minmax(0, 1fr);
}
.cart-item img {
width: 92px;
}
.cart-item__total {
grid-column: 2;
min-width: 0;
text-align: left;
}
.collection-editorial-tile__media img,
.collection-editorial-tile__media .fabric-placeholder {
min-height: 340px;
}
.collection-hero-media,
.campaign-banner,
.mosaic__media,
.spotlight__visual {
height: 54vh;
min-height: 320px;
}
body.template-index .campaign-banner,
body.template-index .campaign-banner__content {
height: auto;
min-height: clamp(300px, var(--campaign-mobile-height, 42vh), 430px);
}
body.template-index .campaign-banner__content {
padding-block: 42px 28px;
}
body.template-index .campaign-banner__copy h2 {
font-size: 1.55rem;
}
body.template-index .campaign-banner__copy p:not(.eyebrow) {
font-size: 0.86rem;
}
.mosaic__stat-row,
.spotlight__products,
.atelier-steps,
.grid--4,
.luxury-services__grid,
.support-page__grid,
.site-footer__columns {
grid-template-columns: 1fr;
}
.support-page__card {
min-height: auto;
padding: 22px;
}
.luxury-service-card__media {
aspect-ratio: 4 / 3;
}
.atelier-panel {
padding: 30px;
}
.atelier-step {
min-height: auto;
}
.cart-item {
grid-template-columns: 82px 1fr;
}
.cart-item__total {
grid-column: 1 / -1;
}
.site-footer__bottom {
display: grid;
}
}
/* Footer layout & responsiveness */
.site-footer {
padding: 56px 24px 24px;
background: var(--surface-canvas);
color: var(--text-primary);
}
.site-footer__grid {
display: grid;
gap: 48px;
max-width: var(--page-width);
margin: 0 auto;
}
.site-footer__brand-block {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 360px;
}
.site-footer__social {
display: flex;
gap: 16px;
margin-top: 8px;
}
.site-footer__columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
align-items: start;
}
.site-footer__column h3 {
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 0 0 16px;
color: var(--text-primary);
}
.site-footer__column .footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer__column .footer-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: var(--text-base);
transition: color 0.2s ease;
}
.site-footer__column .footer-links a:hover {
color: var(--text-primary);
}
.site-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--border-subtle);
font-size: var(--text-sm);
color: var(--text-secondary);
max-width: var(--page-width);
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
@media (min-width: 900px) {
.site-footer__grid {
grid-template-columns: 1.2fr 2fr;
gap: 80px;
align-items: start;
}
}
@media (max-width: 899px) {
.site-footer__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
}
@media (max-width: 640px) {
.site-footer {
padding: 40px 20px 20px;
}
.site-footer__grid {
gap: 32px;
}
.site-footer__columns {
grid-template-columns: 1fr;
gap: 24px;
}
.site-footer__brand-block {
max-width: none;
}
.site-footer__bottom {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
}
/* Footer whitespace fix - tighter packing since only 2 link columns */
.site-footer__columns {
grid-template-columns: repeat(2, max-content);
justify-content: end;
gap: 80px;
}
@media (min-width: 900px) {
.site-footer__grid {
grid-template-columns: minmax(0, 1fr) auto;
gap: 64px;
}
}
@media (max-width: 899px) {
.site-footer__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
gap: 28px;
}
}
@media (max-width: 640px) {
.site-footer__columns {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media not all {
/* === Typography refresh === */
:root {
--font-display: "DM Serif Display", "Cormorant Garamond", "EB Garamond", Georgia, serif;
--font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
--font-body: "Instrument Sans", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-ui: "Tenor Sans", "Instrument Sans", system-ui, sans-serif;
--font-urdu: "Noto Nastaliq Urdu", serif;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 44px;
--text-display-sm: 56px;
--text-display: 72px;
--text-display-lg: 96px;
--tracking-ui: 0.02em;
--tracking-caps: 0.2em;
--tracking-wide: 0.12em;
--tracking-tight: -0.01em;
}
body {
font-family: var(--font-body);
font-weight: 400;
letter-spacing: 0;
line-height: 1.6;
}
h1, h2, h3, .display, .hero__title, .section-title {
font-family: var(--font-display);
letter-spacing: var(--tracking-tight);
line-height: 1.05;
}
h4, h5, h6, .product-title, .lookbook__caption, blockquote, .price {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: 0;
line-height: 1.25;
}
.eyebrow, .utility-bar, .nav-link, .footer-links, .btn, button,
.site-footer__column h3, .utility-link, .badge, .meta, .cta {
font-family: var(--font-ui);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
font-weight: 400;
}
.footer-links a, .nav-link a, p, li, input, textarea, select {
font-family: var(--font-body);
text-transform: none;
letter-spacing: 0;
}
.hero__title, h1 {
font-size: clamp(40px, 7vw, var(--text-display-lg));
letter-spacing: -0.015em;
line-height: 0.95;
}
h2, .section-title {
font-size: clamp(28px, 4vw, var(--text-display-sm));
}
h3 {
font-size: var(--text-2xl);
}
.eyebrow {
font-size: var(--text-sm);
letter-spacing: 0.22em;
}
/* === Typography refinements pass 2 === */
/* Category / collection tiles - move from bold sans to serif */
.category-card__title,
.collection-card__title,
.collection-tile__title,
.tile__title,
.shop-by-collection__title,
.spotlight__title,
.category-triptych__title,
.lookbook__title,
.lookbook-card__title,
.lookbook__caption-title,
.image-overlay__title {
font-family: var(--font-display);
font-weight: 400;
text-transform: none;
letter-spacing: -0.005em;
line-height: 1.1;
font-size: clamp(22px, 2.2vw, 32px);
}
/* Tile / overlay sub-copy */
.category-card__copy,
.collection-card__copy,
.collection-tile__copy,
.tile__copy,
.lookbook__caption,
.lookbook__caption-copy,
.image-overlay__copy {
font-family: var(--font-body);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-size: var(--text-base);
line-height: 1.5;
}
/* Footer brand wordmark */
.site-footer__brand,
.site-footer__brand-name,
.site-footer__wordmark,
.footer-brand__name {
font-family: var(--font-display);
font-size: var(--text-xl);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
}
/* Footer body description */
.site-footer__brand-block p,
.site-footer__description {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-secondary);
}
/* Footer link items should not be uppercase */
.site-footer .footer-links a,
.site-footer__column .footer-links a {
font-family: var(--font-body);
text-transform: none;
letter-spacing: 0;
font-size: var(--text-base);
font-weight: 400;
}
/* Footer column headings stay tracked caps but slightly smaller */
.site-footer__column h3 {
font-size: var(--text-xs);
letter-spacing: 0.22em;
font-weight: 500;
margin-bottom: 20px;
}
/* Product card titles */
.product-card__title,
.product-tile__title,
.card__title,
.product-item__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--text-lg);
letter-spacing: 0;
text-transform: none;
line-height: 1.25;
}
.product-card__price,
.product-tile__price,
.price,
.money {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-base);
letter-spacing: 0.02em;
}
/* PDP - product detail page */
.product__title,
.product-single__title {
font-family: var(--font-display);
font-size: clamp(28px, 3.5vw, 48px);
letter-spacing: -0.01em;
line-height: 1.1;
text-transform: none;
}
.product__price,
.product-single__price {
font-family: var(--font-serif);
font-size: var(--text-xl);
letter-spacing: 0.02em;
}
.product__description,
.product-single__description,
.rte {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.7;
}
/* Buttons - more refined caps */
.btn,
.button,
button.btn,
.cta,
.product-form__submit {
font-family: var(--font-ui);
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 400;
}
/* Header nav */
.header__menu a,
.nav-link,
.main-nav a {
font-family: var(--font-ui);
font-size: var(--text-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 400;
}
/* Utility bar slightly smaller and refined */
.utility-bar {
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: 0.22em;
font-weight: 400;
}
/* Hero eyebrow + section eyebrows tighter scale */
.hero__eyebrow,
.section-eyebrow,
.eyebrow {
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 400;
}
/* Hero subcopy */
.hero__subtitle,
.hero__lede,
.section-lede {
font-family: var(--font-body);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
letter-spacing: 0;
}
/* Collection / list page heading */
.collection-hero__title,
.page-title,
.collection__title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 64px);
letter-spacing: -0.01em;
line-height: 1.05;
}
/* Cart drawer / cart page */
.cart__title,
.cart-drawer__title,
.drawer__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
letter-spacing: -0.005em;
}
.cart-item__title,
.cart__item-title {
font-family: var(--font-serif);
font-size: var(--text-base);
font-weight: 500;
}
/* Forms / inputs */
label,
.form-label {
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
}
input, textarea, select {
font-family: var(--font-body);
font-size: var(--text-base);
}
/* Mobile typography tightening */
@media (max-width: 640px) {
.hero__title, h1 {
font-size: clamp(34px, 9vw, 56px);
line-height: 1;
}
h2, .section-title {
font-size: clamp(26px, 7vw, 36px);
}
.category-card__title,
.collection-card__title,
.tile__title,
.lookbook__caption-title,
.image-overlay__title {
font-size: 22px;
}
.product__title {
font-size: clamp(26px, 7vw, 34px);
}
.utility-bar {
font-size: 11px;
letter-spacing: 0.18em;
}
}
/* === Typography pass 3 — real DOM selectors === */
/* Category cards (Shop by collection + Lookbook tiles) */
.category-card h3,
.category-card .category-card__heading,
.category-card__content h3,
.season-edit__grid .category-card h3,
.mosaic__panel h2,
.editorial-film h2,
.spotlight h2 {
font-family: var(--font-display);
font-weight: 400;
text-transform: none;
letter-spacing: -0.005em;
line-height: 1.1;
font-size: clamp(24px, 2.4vw, 34px);
}
.category-card p,
.category-card__content p,
.mosaic__panel .muted,
.spotlight .muted {
font-family: var(--font-body);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-size: var(--text-base);
line-height: 1.5;
}
/* Section-header h1/h2 (lookbook, etc.) */
.section-header h1,
.section-header h2 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.05;
font-size: clamp(36px, 5vw, 64px);
}
.section-header p {
font-family: var(--font-body);
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.55;
}
/* Spotlight section sub-note */
.spotlight__note strong {
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
}
.spotlight__note p {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.55;
}
/* Mosaic stat numbers */
.mosaic__stat strong {
font-family: var(--font-display);
font-size: clamp(28px, 3vw, 40px);
letter-spacing: -0.01em;
}
.mosaic__stat .muted {
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* Buttons - ghost & secondary */
.button,
.button--secondary,
.button--ghost,
a.button {
font-family: var(--font-ui);
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 400;
}
/* Eyebrow tightening — universal */
.eyebrow {
font-family: var(--font-ui) !important;
font-size: var(--text-xs) !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
}
/* Generic muted text */
.muted {
font-family: var(--font-body);
color: var(--text-secondary);
line-height: 1.55;
}
/* Mobile sizing for tiles */
@media (max-width: 640px) {
.category-card h3,
.mosaic__panel h2,
.spotlight h2 {
font-size: 22px;
}
.section-header h1,
.section-header h2 {
font-size: clamp(28px, 8vw, 40px);
}
}
/* === Typography pass 4 — force override === */
.category-card h3,
.category-card .category-card__content h3,
h3.category-card__heading,
article.category-card h3 {
font-family: var(--font-display) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
line-height: 1.1 !important;
font-size: clamp(24px, 2.4vw, 34px) !important;
}
.category-card p,
.category-card .category-card__content p {
font-family: var(--font-body) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* === Typography luxury pass: geometric sans, refined caps, generous tracking === */
:root {
--font-display: "Futura", "Futura PT", "ITC Avant Garde Gothic",
"Century Gothic", "Avenir Next", "Avenir",
"Nunito Sans", "Helvetica Neue", Arial, sans-serif;
--font-body: var(--font-display);
}
html, body {
font-family: var(--font-body) !important;
font-weight: 400 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Wordmark / logo */
.site-logo, .header__logo, .logo, .brand, .brand-mark, .wordmark,
.header__logo a, .site-header__logo, [class*="logo"] a, a[class*="logo"] {
font-family: var(--font-display) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.32em !important;
}
/* Headings */
h1, h2, h3, h4, h5, h6,
.section-header h1, .section-header h2, .section-header h3,
.category-card h3, .mosaic__panel h2, .spotlight h2,
.editorial-intro h1, .editorial-intro h2,
.lookbook h2, .lookbook h3,
.hero h1, .hero h2,
[class*="__heading"], [class*="-heading"], [class*="title"] {
font-family: var(--font-display) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
line-height: 1.2 !important;
}
h1, .h1 { letter-spacing: 0.22em !important; font-weight: 500 !important; }
h2, .h2 { letter-spacing: 0.20em !important; }
h3, .h3 { letter-spacing: 0.18em !important; }
h4, .h4, h5, .h5, h6, .h6 { letter-spacing: 0.24em !important; }
/* Eyebrows, kickers, small labels, pills, tags */
.eyebrow, .kicker, .label, .badge, .pill, .tag,
[class*="eyebrow"], [class*="kicker"], [class*="__label"] {
font-family: var(--font-display) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.3em !important;
font-size: 0.72rem !important;
}
/* Navigation links */
.site-nav a, .header__nav a, nav a, .menu a,
[class*="nav"] a, [class*="menu"] a {
font-family: var(--font-display) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.22em !important;
font-size: 0.78rem !important;
}
/* Buttons */
button, .button, .btn, [class*="button"], [class*="btn"],
input[type="submit"], input[type="button"] {
font-family: var(--font-display) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.24em !important;
}
/* Body copy stays calm: sentence case, light, breathable */
p, li, dd, blockquote, .rte, .prose {
font-family: var(--font-body) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
line-height: 1.6 !important;
}
/* Product card titles & prices */
.product-card__title, .card__heading, .grid-product__title,
[class*="product"] [class*="title"], [class*="product"] h3,
.price, [class*="price"] {
font-family: var(--font-display) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
}
/* === Responsive system: hero, header, grids, typography across all viewports === */
/* Hide duplicate in-hero wordmark globally (the site header already shows it) */
.luxury-hero__wordmark, .luxury-hero .wordmark,
[class*="luxury-hero"] [class*="wordmark"] {
display: none !important;
}
/* Fluid hero typography across all sizes */
.luxury-hero__title, [class*="luxury-hero"] h1,
[class*="hero"] h1, [class*="hero__title"], [class*="hero-title"] {
font-size: clamp(1.5rem, 5.5vw, 4rem) !important;
letter-spacing: clamp(0.06em, 0.18vw, 0.16em) !important;
line-height: 1.15 !important;
padding: 0 1rem !important;
}
[class*="hero"] p, [class*="hero__supporting"], [class*="hero__subtitle"] {
font-size: clamp(0.9rem, 1.6vw, 1.1rem) !important;
line-height: 1.55 !important;
padding: 0 1rem !important;
max-width: 36rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
[class*="hero"] .button, [class*="hero"] .btn,
[class*="hero"] a[class*="button"] {
font-size: clamp(0.72rem, 1vw, 0.85rem) !important;
letter-spacing: 0.18em !important;
white-space: nowrap !important;
}
/* ============== Tablet & below (<= 1199px) ============== */
@media (max-width: 1199px) {
/* Force CTAs stacked + visible */
.luxury-hero__actions, [class*="hero__actions"], [class*="hero__ctas"] {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.75rem !important;
margin-top: 1rem !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* ============== Tablet (641px - 1199px) ============== */
@media (min-width: 641px) and (max-width: 1199px) {
/* Allow side-by-side CTAs on tablets */
.luxury-hero__actions, [class*="hero__actions"], [class*="hero__ctas"] {
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 1rem !important;
}
}
/* ============== Phones (<= 640px) ============== */
@media (max-width: 640px) {
/* Headline a touch smaller on phones */
.luxury-hero__title, [class*="hero"] h1, [class*="hero__title"] {
font-size: clamp(1.4rem, 7vw, 2.2rem) !important;
letter-spacing: 0.06em !important;
}
/* Tighter hero padding */
.luxury-hero__inner, [class*="hero__inner"] {
padding-bottom: 24px !important;
}
/* Section padding fluid on phones */
.shopify-section { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Collection / category / product grids stack to 2 cols on phones, 1 on very narrow */
.category-grid, .collection-grid, .product-grid,
[class*="category-grid"], [class*="collection-grid"], [class*="product-grid"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.75rem !important;
}
/* Big section headings smaller */
.section-header h2, [class*="section-header"] h2,
[class*="section__heading"], [class*="section-heading"] {
font-size: clamp(1.4rem, 6vw, 2rem) !important;
letter-spacing: 0.14em !important;
}
}
/* ============== Very narrow phones (<= 380px) ============== */
@media (max-width: 380px) {
.category-grid, .collection-grid, .product-grid,
[class*="category-grid"], [class*="collection-grid"], [class*="product-grid"] {
grid-template-columns: 1fr !important;
}
.luxury-hero__title, [class*="hero"] h1 {
font-size: 1.4rem !important;
}
}
/* ============== Prevent any horizontal overflow across the site ============== */
html, body { overflow-x: hidden !important; }
img, video { max-width: 100% !important; height: auto !important; }
.container, .page-width, [class*="container"], [class*="page-width"] {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ============== Drawer / mobile menu visibility fix ============== */
.drawer, .drawer__inner, [class*="drawer"], [class*="menu-drawer"], [class*="mobile-nav"] {
color: #1a1a1a !important;
background-color: #f4efe9 !important;
}
.drawer a, .drawer__inner a, [class*="drawer"] a, [class*="menu-drawer"] a, [class*="mobile-nav"] a,
.drawer li, [class*="drawer"] li, [class*="menu-drawer"] li {
color: #1a1a1a !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
.drawer ul, [class*="drawer"] ul, [class*="menu-drawer"] ul, [class*="mobile-nav"] ul {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
list-style: none !important;
padding: 1rem !important;
margin: 0 !important;
}
.drawer a:hover, [class*="drawer"] a:hover { color: #8a6a3b !important; }
/* ============== Drawer close button visibility ============== */
.drawer button[aria-label*="close" i], .drawer button[aria-label*="Close"],
[class*="drawer"] button[aria-label*="close" i],
[class*="menu-drawer"] button[aria-label*="close" i],
.drawer .close, .drawer__close, [class*="drawer__close"],
[class*="drawer-close"], [class*="close-button"], [class*="close-btn"] {
color: #1a1a1a !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
border: none !important;
cursor: pointer !important;
}
.drawer button[aria-label*="close" i] svg,
[class*="drawer"] button[aria-label*="close" i] svg,
[class*="menu-drawer"] button[aria-label*="close" i] svg,
.drawer__close svg, [class*="close-button"] svg, [class*="close-btn"] svg {
color: #1a1a1a !important;
fill: #1a1a1a !important;
stroke: #1a1a1a !important;
opacity: 1 !important;
visibility: visible !important;
width: 20px !important;
height: 20px !important;
}
/* ============== Hero overlap + header polish pass 6 ============== */
.luxury-hero__inner, [class*="hero__inner"] {
padding-top: 120px !important;
padding-bottom: 80px !important;
}
@media (max-width: 1199px) {
.luxury-hero__inner, [class*="hero__inner"] {
padding-top: 110px !important;
padding-bottom: 48px !important;
}
}
@media (max-width: 640px) {
.luxury-hero__inner, [class*="hero__inner"] {
padding-top: 96px !important;
padding-bottom: 32px !important;
}
}
.header button[aria-label*="menu" i], .header button[aria-controls*="drawer" i],
[class*="header"] button[aria-label*="menu" i],
[class*="header"] button[aria-controls*="drawer" i],
button.header__menu, [class*="menu-toggle"], [class*="menu-trigger"],
button[class*="hamburger"] {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: #f4efe9 !important;
padding: 8px !important;
letter-spacing: 0.18em !important;
font-size: 0.78rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.header button[aria-label*="menu" i]:hover,
[class*="header"] button[aria-label*="menu" i]:hover {
color: #d4b483 !important;
background: transparent !important;
}
.header button[aria-label*="menu" i] svg,
[class*="header"] button[aria-label*="menu" i] svg,
[class*="menu-toggle"] svg, [class*="hamburger"] svg {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
color: #f4efe9 !important;
stroke: #f4efe9 !important;
fill: none !important;
opacity: 1 !important;
visibility: visible !important;
}
@media (max-width: 640px) {
.header button[aria-label*="menu" i],
[class*="header"] button[aria-label*="menu" i],
[class*="menu-toggle"], [class*="hamburger"] {
font-size: 0 !important;
width: 44px !important;
padding: 10px !important;
}
.header button[aria-label*="menu" i] svg,
[class*="header"] button[aria-label*="menu" i] svg {
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.luxury-hero__title, [class*="hero__title"], [class*="hero"] h1 {
max-width: 18ch !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
.luxury-hero__actions a, [class*="hero__actions"] a, [class*="hero__ctas"] a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 14px 28px !important;
border: 1px solid rgba(244,239,233,0.7) !important;
color: #f4efe9 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
text-decoration: none !important;
font-size: 0.78rem !important;
font-weight: 400 !important;
transition: all 0.3s ease !important;
background: transparent !important;
}
.luxury-hero__actions a:first-child, [class*="hero__actions"] a:first-child {
background: #f4efe9 !important;
color: #1a1a1a !important;
border-color: #f4efe9 !important;
}
.luxury-hero__actions a:hover, [class*="hero__actions"] a:hover {
background: #d4b483 !important;
border-color: #d4b483 !important;
color: #1a1a1a !important;
}
[class*="utility-bar"], [class*="announcement"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 0.7rem !important;
letter-spacing: 0.18em !important;
}
/* ============== Hero overlap fix pass 7 — vertical alignment ============== */
@media (max-width: 1199px) {
.luxury-hero, [class*="hero"][class*="luxury"], section[class*="hero"] {
min-height: auto !important;
}
.luxury-hero__inner, [class*="hero__inner"] {
justify-content: flex-start !important;
align-items: center !important;
min-height: auto !important;
}
}
@media (max-width: 640px) {
.luxury-hero, [class*="hero"][class*="luxury"], section[class*="hero"] {
min-height: 70vh !important;
}
.luxury-hero__inner, [class*="hero__inner"] {
padding-top: 110px !important;
justify-content: flex-start !important;
}
.luxury-hero__actions, [class*="hero__actions"] {
flex-direction: column !important;
gap: 0.75rem !important;
width: 100% !important;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.luxury-hero__actions a, [class*="hero__actions"] a {
width: 100% !important;
}
}
/* ============== Hero overlap fix pass 8 — revert pass 7 + targeted spacing ============== */
@media (max-width: 1199px) {
.luxury-hero, [class*="hero"][class*="luxury"], section[class*="hero"] {
min-height: 80vh !important;
}
.luxury-hero__inner, [class*="hero__inner"] {
justify-content: center !important;
align-items: center !important;
min-height: 80vh !important;
padding-top: 110px !important;
padding-bottom: 60px !important;
}
}
@media (max-width: 640px) {
.luxury-hero, [class*="hero"][class*="luxury"], section[class*="hero"] {
min-height: 85vh !important;
}
.luxury-hero__inner, [class*="hero__inner"] {
justify-content: center !important;
padding-top: 130px !important;
padding-bottom: 40px !important;
}
.luxury-hero__actions, [class*="hero__actions"] {
flex-direction: column !important;
gap: 0.75rem !important;
width: 100% !important;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.luxury-hero__actions a, [class*="hero__actions"] a {
width: 100% !important;
}
}
/* ============== Hero content force-visible pass 9 ============== */
.luxury-hero__inner, [class*="hero__inner"],
.luxury-hero__title, [class*="hero__title"],
.luxury-hero__subtitle, [class*="hero__subtitle"],
.luxury-hero__actions, [class*="hero__actions"],
[class*="hero"] h1, [class*="hero"] p {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
filter: none !important;
}
[class*="hero"] h1, .luxury-hero__title, [class*="hero__title"] {
color: #f4efe9 !important;
display: block !important;
}
[class*="hero"] p, .luxury-hero__subtitle, [class*="hero__subtitle"] {
color: rgba(244,239,233,0.92) !important;
display: block !important;
}
.luxury-hero__inner, [class*="hero__inner"] {
display: flex !important;
flex-direction: column !important;
position: relative !important;
z-index: 2 !important;
}
/* ============== Hero pass 10 — target ai_gen block & tame heights ============== */
[id^="shopify-block-"][id*="ai_gen_block"] {
position: relative !important;
z-index: 2 !important;
padding-top: 120px !important;
padding-bottom: 80px !important;
}
[id^="shopify-block-"][id*="ai_gen_block"] h1 {
color: #f4efe9 !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
margin: 0 auto 1rem !important;
text-align: center !important;
}
[id^="shopify-block-"][id*="ai_gen_block"] p {
color: rgba(244,239,233,0.92) !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
text-align: center !important;
max-width: 60ch !important;
margin: 0 auto 2rem !important;
}
@media (max-width: 1199px) {
.luxury-hero, [class*="hero"][class*="luxury"], section[class*="hero"] {
min-height: auto !important;
}
.luxury-hero__inner, [class*="hero__inner"] {
min-height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (max-width: 640px) {
.luxury-hero, [class*="hero"][class*="luxury"], section[class*="hero"] {
min-height: auto !important;
}
[id^="shopify-block-"][id*="ai_gen_block"] {
padding-top: 96px !important;
padding-bottom: 48px !important;
}
}
/* ============== Hero pass 11 — scope ai_gen styling to hero only ============== */
[id^="shopify-block-"][id*="ai_gen_block"] {
padding-top: initial !important;
padding-bottom: initial !important;
}
main [id^="shopify-block-"][id*="ai_gen_block"]:first-of-type,
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] {
position: relative !important;
z-index: 2 !important;
padding: 100px 1.5rem 60px !important;
text-align: center !important;
}
@media (max-width: 640px) {
main [id^="shopify-block-"][id*="ai_gen_block"]:first-of-type,
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] {
padding: 96px 1rem 48px !important;
}
}
[id^="shopify-block-"][id*="ai_gen_block"] h1,
[id^="shopify-block-"][id*="ai_gen_block"] p {
color: inherit !important;
}
#shopify-section-template--28575683051686__17798083796040fe7b h1 {
color: #f4efe9 !important;
}
#shopify-section-template--28575683051686__17798083796040fe7b p {
color: rgba(244,239,233,0.92) !important;
}
/* ============== Hero pass 12 — hide stray header h1 wordmark ============== */
.header h1, [class*="header"] h1, header h1 {
display: none !important;
}
#shopify-section-template--28575683051686__17798083796040fe7b h1 {
display: block !important;
}
/* ============== Hero pass 13 — hide first h1 in hero (duplicate WARP brand) ============== */
.header h1, [class*="header"] h1, header h1 {
display: revert !important;
}
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] h1:first-of-type {
display: none !important;
}
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] h1:last-of-type {
display: block !important;
color: #f4efe9 !important;
text-align: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ============== Hero pass 14 — force hide first heading via absolute positioning ============== */
#shopify-section-template--28575683051686__17798083796040fe7b h1:first-of-type {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
}
#shopify-section-template--28575683051686__17798083796040fe7b h1:last-of-type,
#shopify-section-template--28575683051686__17798083796040fe7b h1:nth-of-type(2) {
position: static !important;
left: auto !important;
top: auto !important;
visibility: visible !important;
height: auto !important;
width: auto !important;
font-size: clamp(2rem, 6vw, 4rem) !important;
clip: auto !important;
overflow: visible !important;
}
/* ============== Fix pass 15 — restore MENU label + nuke first hero heading ============== */
/* Restore visible MENU label text (pass 6 mobile rule set font-size:0 hiding it) */
.header button[aria-label*="menu" i],
[class*="header"] button[aria-label*="menu" i],
[class*="menu-toggle"], [class*="hamburger"] {
font-size: 0.72rem !important;
color: #1a1a1a !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
font-weight: 400 !important;
background: transparent !important;
border: none !important;
padding: 8px 12px !important;
min-width: auto !important;
width: auto !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
visibility: visible !important;
opacity: 1 !important;
}
.header button[aria-label*="menu" i] svg,
[class*="header"] button[aria-label*="menu" i] svg {
color: #1a1a1a !important;
stroke: #1a1a1a !important;
width: 18px !important;
height: 18px !important;
display: inline-block !important;
}
/* Search icon also must be dark/visible on the light header bar */
.header a[aria-label*="search" i] svg,
[class*="header"] a[aria-label*="search" i] svg,
.header a[href*="/search"] svg,
[class*="header"] a[href*="/search"] svg {
color: #1a1a1a !important;
stroke: #1a1a1a !important;
width: 18px !important;
height: 18px !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Cart and account icons too */
.header a[href*="/cart"] svg,
.header a[aria-label*="account" i] svg,
[class*="header"] a[href*="/cart"] svg,
[class*="header"] a[aria-label*="account" i] svg {
color: #1a1a1a !important;
stroke: #1a1a1a !important;
width: 18px !important;
height: 18px !important;
opacity: 1 !important;
}
/* Aggressively nuke the duplicate WARP 'N WOOF hero heading (first h1) */
#shopify-section-template--28575683051686__17798083796040fe7b h1:first-of-type,
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] > *:first-child h1,
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] h1:not(:nth-of-type(2)) {
display: none !important;
font-size: 0 !important;
line-height: 0 !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: absolute !important;
left: -99999px !important;
top: -99999px !important;
visibility: hidden !important;
opacity: 0 !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
pointer-events: none !important;
}
/* ============== Fix pass 16 — paint hamburger icon via pseudo-element ============== */
.header summary[aria-label*="menu" i],
.header button[aria-label*="menu" i],
[class*="header"] summary[aria-label*="menu" i],
[class*="header"] button[aria-label*="menu" i] {
position: relative !important;
width: 44px !important;
height: 44px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
list-style: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
padding: 0 !important;
}
.header summary[aria-label*="menu" i]::-webkit-details-marker,
[class*="header"] summary[aria-label*="menu" i]::-webkit-details-marker {
display: none !important;
}
.header summary[aria-label*="menu" i]::before,
.header button[aria-label*="menu" i]::before,
[class*="header"] summary[aria-label*="menu" i]::before,
[class*="header"] button[aria-label*="menu" i]::before {
content: "" !important;
display: block !important;
width: 20px !important;
height: 2px !important;
background: #1a1a1a !important;
box-shadow: 0 -6px 0 #1a1a1a, 0 6px 0 #1a1a1a !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
}
/* ============== Fix pass 17 — overflow + full-bleed hero + transparent icons ============== */
/* Kill horizontal overflow everywhere */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force full-width sections (utility bar, header, hero) to be 100vw edge-to-edge */
.shopify-section, section, header, [class*="utility-bar"], [class*="announcement"],
[class*="luxury-hero"], section[class*="hero"],
#shopify-section-template--28575683051686__17798083796040fe7b {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Re-add inner padding only on text/content wrappers, not the outer sections */
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
/* Hero image / background should be full-bleed */
[class*="luxury-hero"] img, [class*="hero"] img,
[class*="luxury-hero"] picture, [class*="hero"] picture,
[class*="luxury-hero"] video, [class*="hero"] video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Remove any white borders/backgrounds around hero section */
[class*="luxury-hero"], section[class*="hero"],
#shopify-section-template--28575683051686__17798083796040fe7b {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Transparent backgrounds for icon containers and the hamburger button + cart link */
.header, [class*="header"],
.header > *, [class*="header"] > *,
.header a, .header button, .header summary, .header details,
[class*="header"] a, [class*="header"] button,
[class*="header"] summary, [class*="header"] details {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Keep the header bar itself with its cream background */
.header, header.header, header[class*="header"] {
background-color: #f4efe9 !important;
}
/* But the icon wrappers stay transparent */
.header a[href*="/cart"], .header a[href*="/search"],
.header a[aria-label*="account" i], .header a[aria-label*="search" i],
.header summary, .header details,
[class*="header"] a[href*="/cart"], [class*="header"] a[href*="/search"],
[class*="header"] a[aria-label*="account" i], [class*="header"] a[aria-label*="search" i],
[class*="header"] summary, [class*="header"] details {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* ============== Fix pass 18 — utility bar inner padding ============== */
[class*="utility-bar"] > *, [class*="announcement"] > * {
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box !important;
}
@media (max-width: 640px) {
[class*="utility-bar"], [class*="announcement"] {
font-size: 0.62rem !important;
letter-spacing: 0.14em !important;
}
}
/* ============== Fix pass 19 — EMERGENCY REVERT pass 17 over-broad rules ============== */
.shopify-section, section, header {
padding-left: revert !important;
padding-right: revert !important;
margin-left: revert !important;
margin-right: revert !important;
}
.header, header.header, header[class*="header"], [class*="header"] {
background-color: revert !important;
padding: revert !important;
margin: revert !important;
}
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* ============== CONSOLIDATED CLEAN OVERRIDE PASS 20 ============== */
/* Undo the broken pass 19 `revert !important` rules by re-setting sensible defaults. */
.shopify-section, section, header {
padding-left: unset !important;
padding-right: unset !important;
margin-left: unset !important;
margin-right: unset !important;
}
.header, header.header {
background-color: unset !important;
padding: unset !important;
margin: unset !important;
}
/* Global responsive guard */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
margin: 0 !important;
}
*, *::before, *::after { box-sizing: border-box; }
/* Utility bar — single line, ellipsis on overflow */
[class*="utility-bar"] {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 8px 16px !important;
}
[class*="utility-bar"] > * { white-space: nowrap !important; }
@media (max-width: 768px) {
[class*="utility-bar"] {
font-size: 0.6rem !important;
letter-spacing: 0.08em !important;
padding: 8px 12px !important;
}
}
@media (max-width: 480px) {
[class*="utility-bar"] {
font-size: 0.55rem !important;
}
}
/* Hero ai_gen block — inner content padding & centering */
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] {
padding: 100px 1.5rem 60px !important;
text-align: center !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 640px) {
#shopify-section-template--28575683051686__17798083796040fe7b [id*="ai_gen_block"] {
padding: 80px 1.25rem 40px !important;
}
}
/* Hero CTAs — side-by-side desktop, stacked mobile, constrained width */
[id*="ai_gen_block"] a[href*="/collections"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 12px 28px !important;
border: 1px solid rgba(244,239,233,0.8) !important;
color: #f4efe9 !important;
text-decoration: none !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
font-size: 0.78rem !important;
font-weight: 400 !important;
transition: all 0.3s ease !important;
background: transparent !important;
margin: 0.5rem !important;
}
@media (max-width: 640px) {
[id*="ai_gen_block"] a[href*="/collections"] {
display: flex !important;
width: 100% !important;
max-width: 320px !important;
margin: 0.5rem auto !important;
}
}
/* SHOP BY COLLECTION heading centered with proper padding */
h2 {
text-align: center !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
/* Collection grid responsive padding */
@media (max-width: 768px) {
[class*="collection-list"], [class*="season-creations"] .grid,
[class*="season-creations"] [class*="grid"] {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
/* Header layout grid — ensure proper distribution of items */
.header, header.header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 1.5rem !important;
gap: 1rem !important;
}
@media (max-width: 640px) {
.header, header.header {
padding: 12px 1rem !important;
}
}
/* ============== Pass 21 — CTA layout fix ============== */
[id*="ai_gen_block"] {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
[id*="ai_gen_block"] a[href*="/collections"] {
flex: 0 0 auto !important;
width: auto !important;
min-width: 240px !important;
}
@media (max-width: 640px) {
[id*="ai_gen_block"] a[href*="/collections"] {
width: 100% !important;
max-width: 320px !important;
min-width: 0 !important;
}
}
/* ============== Pass 22 — center utility bar text + full bleed hero ============== */
/* Center the utility bar text */
[class*="utility-bar"] {
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
[class*="utility-bar"] > * {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Inner wrappers in utility bar centered */
[class*="utility-bar"] [class*="page-width"],
[class*="utility-bar"] [class*="container"],
[class*="utility-bar"] [class*="inner"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
}
/* Make sure hero section is truly full-bleed, no inner page-width inset */
#shopify-section-template--28575683051686__17798083796040fe7b {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 0 !important;
}
/* Hero inner page-width wrapper: full width with internal padding only */
#shopify-section-template--28575683051686__17798083796040fe7b [class*="page-width"],
#shopify-section-template--28575683051686__17798083796040fe7b [class*="container"] {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hero image inside */
#shopify-section-template--28575683051686__17798083796040fe7b img,
#shopify-section-template--28575683051686__17798083796040fe7b picture {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* ============== Pass 23 — force utility bar children centered ============== */
[class*="utility-bar"] {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
text-align: center !important;
}
[class*="utility-bar"] > *,
[class*="utility-bar"] > * > *,
[class*="utility-bar"] div,
[class*="utility-bar"] p,
[class*="utility-bar"] span {
text-align: center !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ============== Pass 24 — utility bar centering NUCLEAR ============== */
[class*="utility-bar"],
[class*="utility-bar"] > *,
[class*="utility-bar"] [class*="page-width"],
[class*="utility-bar"] [class*="container"],
[class*="utility-bar"] [class*="inner"],
[class*="utility-bar"] [class*="wrapper"] {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
[class*="utility-bar"] p,
[class*="utility-bar"] span,
[class*="utility-bar"] a,
[class*="utility-bar"] > * > *,
[class*="utility-bar"] [class*="text"],
[class*="utility-bar"] [class*="marquee"] {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
flex: 0 1 auto !important;
justify-self: center !important;
grid-column: 1 / -1 !important;
}
/* ============== Pass 25 — REVERT utility bar centering + body overflow only ============== */
/* Revert pass 22/23/24 utility bar centering rules */
[class*="utility-bar"],
[class*="utility-bar"] > *,
[class*="utility-bar"] > * > *,
[class*="utility-bar"] [class*="page-width"],
[class*="utility-bar"] [class*="container"],
[class*="utility-bar"] [class*="inner"],
[class*="utility-bar"] [class*="wrapper"],
[class*="utility-bar"] [class*="marquee"],
[class*="utility-bar"] [class*="text"],
[class*="utility-bar"] div,
[class*="utility-bar"] p,
[class*="utility-bar"] span,
[class*="utility-bar"] a {
display: revert !important;
flex-direction: revert !important;
align-items: revert !important;
justify-content: revert !important;
justify-self: revert !important;
text-align: revert !important;
grid-template-columns: revert !important;
grid-template-areas: revert !important;
grid-column: revert !important;
margin-left: revert !important;
margin-right: revert !important;
width: revert !important;
max-width: revert !important;
flex: revert !important;
flex-wrap: revert !important;
white-space: revert !important;
overflow: revert !important;
text-overflow: revert !important;
}
/* Just fix horizontal body overflow */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
margin: 0 !important;
}
/* =========================================================
SPRINT M1 — Mobile critical fixes (Comet, 2026-05-28)
Appended overrides; safe to remove between markers.
========================================================= */
@media (max-width: 749px) {
/* 1. Fix broken mobile drawer — force off-canvas slide-in */
.site-header__inner { position: relative; z-index: 30; }
.header-drawer[open] { position: static; }
.header-drawer__scrim {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 90; opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
.header-drawer[open] .header-drawer__scrim {
opacity: 1; pointer-events: auto;
}
.header-drawer__panel {
position: fixed !important;
top: 0; left: 0; bottom: 0;
width: min(86vw, 360px);
max-width: 100vw;
height: 100dvh;
background: #fffaf3;
z-index: 100;
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
overflow-y: auto;
padding: 24px 20px;
box-shadow: 2px 0 24px rgba(0,0,0,.15);
display: flex; flex-direction: column; gap: 8px;
}
.header-drawer[open] .header-drawer__panel {
transform: translateX(0);
}
.header-drawer__top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.header-drawer__primary { display: flex; flex-direction: column; }
.header-drawer__primary-link {
display: block; padding: 14px 4px;
font-size: 16px; letter-spacing: .04em;
border-bottom: 1px solid rgba(0,0,0,.08);
text-decoration: none; color: inherit;
}
.header-drawer__flyout { display: none; }
body:has(.header-drawer[open]) { overflow: hidden; }
/* 2. Announcement / utility bar — keep clear of hamburger */
[class*="utility-bar"] {
padding-left: 56px !important;
padding-right: 56px !important;
font-size: 11px !important;
text-align: center;
}
/* 3. Product grid — 2 columns on mobile */
.product-grid,
.collection-products,
.collection .grid,
.grid--products,
.featured-products__grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.product-card__media,
.card__media,
.product-card img {
aspect-ratio: 4/5; object-fit: cover; width: 100%; height: auto;
background: #f3eee6;
}
.product-card__title,
.card__title {
font-size: 13px !important; line-height: 1.3 !important;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 4. PDP — kill big whitespace gap */
.product__media-wrapper + .product__info-wrapper,
.product__media + .product__info { margin-top: 16px !important; }
.product__info-wrapper > [data-spacer],
.product__info-wrapper .product__spacer { display: none !important; }
.product-sticky-atc { z-index: 50; }
/* 5. Remove all-caps from PDP body copy */
.product__description,
.product__accordion-content,
.product__availability,
.accordion__content { text-transform: none !important; letter-spacing: .01em !important; }
/* 6. Hero CTAs — single column */
.editorial-hero__buttons,
.hero__buttons,
.banner__buttons {
display: flex !important; flex-direction: column; gap: 10px;
width: 100%; padding: 0 20px;
}
/* 7. Lookbook tiles — CTA below text, no overlap */
.lookbook__tile,
.lookbook-card { position: relative; }
.lookbook__tile .lookbook__cta,
.lookbook-card__cta,
.lookbook__button {
position: static !important;
display: inline-block; margin-top: 12px;
transform: none !important;
}
.lookbook__tile-caption,
.lookbook-card__body { padding: 16px; background: rgba(0,0,0,.55); }
/* 8. Campaign banner — fallback bg color */
.campaign-banner,
.campaign-banner__media { background-color: #1a0f0a; }
.campaign-banner__media img { opacity: 1 !important; display: block; }
/* 9. Shop-by-Collection — 2-up grid */
.category-triptych__grid,
.shop-by-collection__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.category-triptych__title,
.shop-by-collection__title { font-size: 14px !important; letter-spacing: .08em; }
/* 10. PLP toolbar — sticky single row */
.collection-toolbar,
.facets-container {
position: sticky; top: 56px; z-index: 20;
background: #fffaf3;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px; padding: 10px 16px;
}
.collection-toolbar .quick-nav,
.collection-toolbar__quick-nav { display: none !important; }
/* 11. Header sticky + cart badge container */
.site-header { position: sticky; top: 0; z-index: 40; background: #fffaf3; }
.site-header__cart-count {
position: absolute; top: -4px; right: -6px;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 999px; background: #b1392f; color: #fff;
font-size: 10px; line-height: 16px; text-align: center;
}
/* 12. Hero typography tighter */
.editorial-hero__title,
.hero__title { letter-spacing: .02em !important; }
/* 13. Tap targets */
a, button, .btn, [role="button"] { min-height: 44px; }
}
/* =========================================================
END SPRINT M1
========================================================= */
/* =========================================================
SPRINT M2 — Polish & Growth (Comet, 2026-05-28)
Builds on Sprint M1; safe to remove between markers.
========================================================= */
/* --- Cart count badge (uses existing .header-icon__count from header.liquid) --- */
.header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.header-icon__count {
position: absolute; top: -4px; right: -8px;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px;
background: #b1392f; color: #fff;
font-size: 10px; font-weight: 600; line-height: 18px;
text-align: center; letter-spacing: 0;
border: 2px solid #fffaf3;
}
/* --- Sale price + badge --- */
.price--on-sale .price__regular,
s.price__regular,
.price__sale ~ s,
.price s {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
color: rgba(0,0,0,.55);
font-size: .9em;
}
.product-card__badge,
.card__badge,
.price__badge {
display: inline-block;
background: #b1392f; color: #fff;
font-size: 10px; font-weight: 600; letter-spacing: .08em;
padding: 3px 8px; border-radius: 2px;
text-transform: uppercase;
}
/* --- PDP image gallery polish (dots + horizontal scroll-snap on mobile) --- */
@media (max-width: 749px) {
.product__media-list,
.product__gallery {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 4px;
scrollbar-width: none;
}
.product__media-list::-webkit-scrollbar,
.product__gallery::-webkit-scrollbar { display: none; }
.product__media-list > *,
.product__gallery > * {
flex: 0 0 100%;
scroll-snap-align: start;
}
.product__media-list img,
.product__gallery img { width: 100%; height: auto; }
}
/* --- Sticky ATC hides inline duplicate when in view --- */
@media (max-width: 749px) {
.product-sticky-atc {
position: fixed; left: 0; right: 0; bottom: 0;
background: #fffaf3; padding: 10px 16px;
box-shadow: 0 -4px 16px rgba(0,0,0,.08);
z-index: 60; display: flex; align-items: center; gap: 12px;
}
body.has-sticky-atc .product-form__buttons:not(.product-sticky-atc .product-form__buttons) {
/* dim inline ATC when sticky is showing */
opacity: .35; pointer-events: none;
}
/* leave room above footer */
body.has-sticky-atc { padding-bottom: 72px; }
}
/* --- Empty cart state --- */
.cart--empty,
.empty-cart {
text-align: center;
padding: 48px 20px 64px;
max-width: 720px; margin: 0 auto;
}
.cart--empty::before,
.empty-cart::before {
content: "";
display: block; width: 88px; height: 88px; margin: 0 auto 20px;
background: #f3eee6 url("data:image/svg+xml;utf8,") center/48px no-repeat;
border-radius: 999px;
}
.cart--empty .btn,
.empty-cart .btn { margin-top: 16px; }
/* --- PLP polish: collection hero collapses when no image set --- */
.collection-hero:empty,
.collection-banner:empty { display: none; }
.collection-hero[data-no-image] { padding: 24px 16px; min-height: 0; background: transparent; }
/* --- Category chip rail (mobile horizontal scroll w/ edge fade) --- */
@media (max-width: 749px) {
.collection-chips,
.category-chip-rail {
display: flex; overflow-x: auto; gap: 8px;
padding: 12px 16px; scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
scrollbar-width: none;
}
.collection-chips::-webkit-scrollbar,
.category-chip-rail::-webkit-scrollbar { display: none; }
.collection-chips > *,
.category-chip-rail > * {
flex: 0 0 auto; scroll-snap-align: start;
padding: 8px 14px; border: 1px solid rgba(0,0,0,.15);
border-radius: 999px; font-size: 12px; white-space: nowrap;
}
}
/* --- Footer polish --- */
.site-footer .social-icons,
.site-footer__social {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.site-footer .social-icons a,
.site-footer__social a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 999px;
border: 1px solid rgba(0,0,0,.15);
color: inherit; text-decoration: none;
}
.site-footer .payment-icons {
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
opacity: .75;
}
.site-footer .payment-icons img { height: 22px; width: auto; }
.site-footer .newsletter {
display: flex; gap: 8px; max-width: 360px;
}
.site-footer .newsletter input[type="email"] {
flex: 1; padding: 10px 12px; border: 1px solid rgba(0,0,0,.2);
background: transparent; font: inherit;
}
.site-footer .newsletter button {
padding: 10px 16px; background: #1a0f0a; color: #fff;
border: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
/* --- Floating WhatsApp button --- */
.wa-fab {
position: fixed; right: 16px; bottom: 16px;
width: 52px; height: 52px; border-radius: 999px;
background: #25d366; color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 20px rgba(0,0,0,.2);
z-index: 70; text-decoration: none;
}
.wa-fab svg { width: 28px; height: 28px; fill: #fff; }
.wa-fab:hover { transform: scale(1.05); }
@media (max-width: 749px) {
body.has-sticky-atc .wa-fab { bottom: 80px; }
}
/* --- Accessibility: skip link + focus rings --- */
.skip-to-content {
position: absolute; left: -9999px; top: 0;
background: #1a0f0a; color: #fff; padding: 10px 14px;
z-index: 999;
}
.skip-to-content:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid #b1392f; outline-offset: 2px; }
/* --- Product title clamp on cards (all viewports) --- */
.product-card__title, .card__title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* =========================================================
SPRINT M3 — Growth & Conversion polish (Comet, 2026-05-28)
========================================================= */
.free-ship-bar { padding: 12px 16px; background: #f3eee6; border-radius: 6px; margin: 12px 0; }
.free-ship-bar__msg { font-size: 13px; margin-bottom: 8px; letter-spacing: .02em; }
.free-ship-bar__track { height: 6px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.free-ship-bar__fill { height: 100%; background: #b1392f; width: 0; transition: width .4s ease; }
.free-ship-bar.is-complete .free-ship-bar__fill { background: #2e7d32; }
.predictive-search { position: absolute; left: 0; right: 0; top: 100%; background: #fffaf3; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 16px; max-height: 70vh; overflow-y: auto; z-index: 80; }
.predictive-search__group + .predictive-search__group { margin-top: 16px; }
.predictive-search__group-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-bottom: 8px; }
.predictive-search__item { display: flex; gap: 12px; padding: 8px 0; text-decoration: none; color: inherit; }
.predictive-search__item img { width: 48px; height: 60px; object-fit: cover; }
.predictive-search__item-title { font-size: 13px; line-height: 1.3; }
.predictive-search__item-price { font-size: 12px; color: rgba(0,0,0,.6); margin-top: 2px; }
.related-products, .product-recommendations { padding: 32px 16px 48px; }
.related-products__title, .product-recommendations__title { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; text-align: center; margin-bottom: 20px; }
.related-products__grid, .product-recommendations__grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 749px) { .related-products__grid, .product-recommendations__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.cart__item { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.08); align-items: center; }
.cart__item img { width: 88px; height: 110px; object-fit: cover; }
.cart__item-title { font-size: 14px; font-weight: 500; }
.cart__item-meta { font-size: 12px; color: rgba(0,0,0,.6); margin-top: 4px; text-transform: none; }
.cart__qty { display: inline-flex; align-items: center; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; padding: 2px; margin-top: 6px; }
.cart__qty button { width: 28px; height: 28px; background: transparent; border: 0; cursor: pointer; }
.cart__qty input { width: 32px; text-align: center; border: 0; background: transparent; font: inherit; }
.cart__express { display: grid; gap: 8px; margin-top: 12px; }
.cart__express > * { width: 100%; height: 48px; border-radius: 4px; }
.pk-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: #f3eee6; border-radius: 6px; font-size: 11px; text-align: center; letter-spacing: .02em; margin: 12px 0; }
.pk-trust strong { display: block; font-size: 13px; margin-bottom: 2px; }
.collection-empty { text-align: center; padding: 60px 20px; }
.collection-empty__title { font-size: 18px; margin-bottom: 8px; letter-spacing: .04em; }
.collection-empty__hint { color: rgba(0,0,0,.6); margin-bottom: 16px; }
.newsletter-strip { padding: 40px 16px; background: #1a0f0a; color: #fffaf3; text-align: center; }
.newsletter-strip__title { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.newsletter-strip__sub { font-size: 13px; opacity: .8; margin-bottom: 16px; }
.newsletter-strip form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.newsletter-strip input { flex: 1; padding: 12px 14px; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fffaf3; font: inherit; }
.newsletter-strip button { padding: 12px 18px; background: #fffaf3; color: #1a0f0a; border: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
/* END SPRINT M3 */
/* =========================================================
SPRINT M4 — Performance, A11y, Polish (Comet, 2026-05-28)
========================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* =========================================================
HOTFIX (Comet, 2026-05-28 03:00 PKT)
- Hide utility bar globally (user request)
- Make header transparent over hero so hero is full-bleed
- Ensure header text is light on hero for legibility
========================================================= */
/* Hide utility bar everywhere */
.utility-bar,
[class*="utility-bar"],
section[id*="utility-bar"],
.shopify-section[id*="utility-bar"] { display: none !important; }
/* Make header float transparently over hero (first section) */
.shopify-section-group-header-group { background: transparent !important; }
.site-header,
.shopify-section[id*="header"] > header,
.shopify-section[id*="header"] .header {
background: transparent !important;
box-shadow: none !important;
border-bottom: 0 !important;
position: absolute !important;
top: 0; left: 0; right: 0;
z-index: 50;
}
/* Push first content section to the very top (under transparent header) */
main { padding-top: 0 !important; }
#MainContent { padding-top: 0 !important; }
.shopify-section-group-header-group + * .shopify-section:first-child,
main .shopify-section:first-child { margin-top: 0 !important; padding-top: 0 !important; }
/* Light header text/icons over hero */
.site-header a, .site-header button, .site-header svg { color: #fffaf3 !important; }
.site-header svg { fill: currentColor; stroke: currentColor; }
/* When sticky/scrolled, restore solid bg (
/* HOTFIX v2 — stronger header transparency over hero */
.shopify-section-group-header-group,
.shopify-section-group-header-group > *,
.shopify-section.shopify-section--header,
.shopify-section[id*="sections--"][id*="header"],
#shopify-section-header,
#shopify-section-sections--16878492123302__header {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Force the header to overlay the first content section */
.shopify-section-group-header-group {
position: absolute !important;
top: 0; left: 0; right: 0;
z-index: 50;
}
body { padding-top: 0 !important; }
/* The header inner block */
.site-header,
.site-header__inner,
header.site-header {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border-bottom: 0 !important;
}
/* Header icons + text light over hero */
.site-header a, .site-header button, .site-header [class*="icon"] svg,
.site-header__brand, .site-header__call, .header-icon, .header-icon svg {
color: #fffaf3 !important;
}
/* =========================================================
HOTFIX v4 — LV-style transparent header convention
- Kill mix-blend-mode (was making icons invisible)
- Crisp white icons + text-shadow for legibility
- Add a subtle top gradient scrim for guaranteed contrast
- Switch to solid cream + dark icons once scrolled past hero
- Works on desktop and mobile
========================================================= */
/* Disable v3 mix-blend-mode */
.site-header { mix-blend-mode: normal !important; }
.shopify-section-group-header-group { mix-blend-mode: normal !important; }
/* Subtle top gradient scrim (only on pages where header overlays hero) */
.shopify-section-group-header-group::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 180px; pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
z-index: -1;
}
.shopify-section-group-header-group { position: absolute !important; }
/* Header content over hero: solid white, no blend mode */
.site-header,
.site-header * { color: #ffffff !important; }
.site-header a, .site-header button, .site-header span, .site-header summary {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.site-header svg { color: #ffffff !important; stroke: #ffffff !important; fill: none !important; }
.site-header svg [fill]:not([fill="none"]) { fill: #ffffff !important; }
.site-header__brand,
.site-header [class*="brand"],
.site-header [class*="logo"] {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0,0,0,.35);
letter-spacing: .12em;
}
/* Hover affordance — subtle */
.site-header a:hover, .site-header button:hover { opacity: .8; }
/* Cart count badge stays red but with white border for contrast */
.site-header .header-icon__count {
background: #b1392f !important; color: #ffffff !important;
border: 2px solid rgba(255,255,255,.9) !important;
text-shadow: none !important;
}
/* When scrolled past hero, solid cream header with dark icons */
.site-header.is-scrolled,
.site-header[data-scrolled="true"],
body.has-scrolled .site-header {
position: fixed !important;
top: 0; left: 0; right: 0;
background: rgba(255, 250, 243, 0.96) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
animation: hdrSlideIn .25s ease-out;
}
@keyframes hdrSlideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.site-header.is-scrolled *,
.site-header[data-scrolled="true"] *,
body.has-scrolled .site-header * {
color: #1a0f0a !important;
text-shadow: none !important;
}
.site-header.is-scrolled svg,
.site-header[data-scrolled="true"] svg,
body.has-scrolled .site-header svg {
color: #1a0f0a !important; stroke: #1a0f0a !important;
}
/* Header inner spacing tightened to feel airy like LV */
.site-header__inner {
padding: 18px 32px !important;
display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 749px) {
.site-header__inner { padding: 14px 16px !important; }
.shopify-section-group-header-group::before { height: 140px; }
/* On mobile pull hero up to behind header same as desktop */
#MainContent > .shopify-section:first-child,
main > .shopify-section:first-child { margin-top: -64px !important; }
.editorial-hero { min-height: 100vh; min-height: 100dvh; }
}
/* On non-hero pages (collection, product, cart, etc.) we want a solid header */
body:not(.template-index):not(.template-page) .shopify-section-group-header-group { position: sticky !important; top: 0; }
body:not(.template-index):not(.template-page) .shopify-section-group-header-group::before { display: none; }
body:not(.template-index):not(.template-page) .site-header { background: #fffaf3 !important; }
body:not(.template-index):not(.template-page) .site-header,
body:not(.template-index):not(.template-page) .site-header * { color: #1a0f0a !important; text-shadow: none !important; }
body:not(.template-index):not(.template-page) .site-header svg { stroke: #1a0f0a !important; color: #1a0f0a !important; }
/* END HOTFIX v4 */
/* HOTFIX v3 — force hero to top, full-bleed; header overlay */
#MainContent > .shopify-section:first-child,
main > .shopify-section:first-child {
margin-top: -88px !important;
position: relative; z-index: 1;
}
.editorial-hero,
.editorial-hero__container,
.editorial-hero .page-width,
.editorial-hero__inner {
width: 100vw !important; max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important; padding-right: 0 !important;
}
.shopify-section-group-header-group { z-index: 50; position: relative; }
.site-header { mix-blend-mode: difference; }
.site-header * { color: #fffaf3 !important; }
/* END HOTFIX v3 */
.site-header svg * { stroke: currentColor; fill: currentColor; }
/* Editorial hero true full-bleed */
.editorial-hero,
.editorial-hero__media,
.editorial-hero__container,
.shopify-section:has(.editorial-hero),
.shopify-section:has(.editorial-hero) > * {
width: 100% !important; max-width: 100% !important;
margin-left: 0 !important; margin-right: 0 !important;
padding-left: 0 !important; padding-right: 0 !important;
}
.editorial-hero { min-height: 100vh; min-height: 100dvh; }
.editorial-hero__media img,
.editorial-hero__media picture,
.editorial-hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Ensure first section under header starts at viewport top */
main > .shopify-section:first-child { margin-top: 0 !important; }
/* END HOTFIX v2 */
Shopify toggles a data attr or class on scroll;
provide both fallbacks) */
.site-header.is-scrolled,
.site-header[data-scrolled="true"] {
position: fixed !important;
background: #fffaf3 !important;
box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}
.site-header.is-scrolled a,
.site-header.is-scrolled button,
.site-header.is-scrolled svg,
.site-header[data-scrolled="true"] a,
.site-header[data-scrolled="true"] button,
.site-header[data-scrolled="true"] svg { color: #1a0f0a !important; }
/* Editorial hero should be 100vh full-bleed */
.editorial-hero,
.shopify-section[id*="editorial"] .editorial-hero,
.shopify-section:first-child .hero,
.hero--full { min-height: 100vh; min-height: 100dvh; }
/* END HOTFIX */
img[loading="lazy"] { background: #f3eee6; }
img[width][height] { height: auto; }
.product-card img, .card img, .product__media img { background-color: #f3eee6; }
.text-muted, .product__meta, .footer__sub, .footer__copy { color: rgba(0,0,0,.65) !important; }
.btn--ghost, .btn--secondary { border-width: 1.5px !important; }
input, textarea, select { font: inherit; color: inherit; border: 1px solid rgba(0,0,0,.2); background: #fffaf3; padding: 10px 12px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: #b1392f; outline: none; box-shadow: 0 0 0 3px rgba(177,57,47,.15); }
.btn, button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; text-decoration: none; cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: #1a0f0a; color: #fffaf3; border: 1px solid #1a0f0a; }
.btn--primary:hover { opacity: .9; }
.btn--ghost { background: transparent; color: #1a0f0a; border: 1.5px solid #1a0f0a; }
.btn--ghost:hover { background: #1a0f0a; color: #fffaf3; }
section + section { margin-top: clamp(32px, 6vw, 64px); }
iframe, embed, object { max-width: 100%; }
@media print { .whatsapp-fab, .product-sticky-atc, .header-drawer__panel, .wa-fab, .site-header, .site-footer, [class*="utility-bar"] { display: none !important; } }
a { text-underline-offset: 3px; }
::selection { background: #b1392f; color: #fffaf3; }
html { scroll-padding-top: 80px; }
[aria-disabled="true"], :disabled { opacity: .5; cursor: not-allowed; }
/* END SPRINT M4 */
/* Sprint M2 aliases for existing theme class names */
.whatsapp-fab {
position: fixed; right: 16px; bottom: 16px;
width: 52px; height: 52px; border-radius: 999px;
background: #25d366; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 20px rgba(0,0,0,.2);
z-index: 70; text-decoration: none;
}
.whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; }
.whatsapp-fab:hover { transform: scale(1.05); }
@media (max-width: 749px) {
body.has-sticky-atc .whatsapp-fab { bottom: 80px; }
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: #1a0f0a; color: #fff; padding: 10px 14px; z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }
/* --- Trust strip icons replace plain dots --- */
.product__trust-strip,
.trust-strip {
display: flex; flex-wrap: wrap; gap: 12px 20px;
padding: 14px 0; border-top: 1px solid rgba(0,0,0,.08);
border-bottom: 1px solid rgba(0,0,0,.08);
font-size: 12px; letter-spacing: .04em;
}
.product__trust-strip li,
.trust-strip li {
list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.product__trust-strip li::before,
.trust-strip li::before {
content: ""; width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* =========================================================
END SPRINT M2
========================================================= */
/* =============================================================
SEARCH OVERLAY POLISH (v1)
Editorial, full-bleed, premium luxury feel
============================================================= */
.luxury-search {
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
color: #1a0f0a !important;
animation: lsFade 280ms ease-out;
}
@keyframes lsFade { from { opacity: 0; } to { opacity: 1; } }
.luxury-search__top {
min-height: 72px !important;
border-bottom: 1px solid rgba(26, 15, 10, 0.08);
padding-inline: 20px;
}
.luxury-search__brand {
font-family: var(--font-display);
font-size: 1.05rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1a0f0a;
}
.luxury-search__close {
width: 40px; height: 40px;
border-radius: 999px;
border: 1px solid rgba(26, 15, 10, 0.12) !important;
background: transparent !important;
color: #1a0f0a !important;
transition: background 180ms ease, transform 180ms ease;
}
.luxury-search__close:hover {
background: rgba(26, 15, 10, 0.06) !important;
transform: rotate(90deg);
}
.luxury-search__body,
.luxury-search-page {
padding-block: 48px 64px;
padding-inline: 24px;
gap: 40px;
max-width: 760px;
margin: 0 auto;
}
.luxury-search input[type="search"],
.luxury-search__field input,
.luxury-search-page input[type="search"] {
width: 100%;
border: 0 !important;
border-bottom: 1px solid rgba(26, 15, 10, 0.18) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 14px 4px !important;
font-family: var(--font-display);
font-size: clamp(1.4rem, 4vw, 2rem) !important;
letter-spacing: 0.02em;
color: #1a0f0a !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 200ms ease;
}
.luxury-search input[type="search"]::placeholder,
.luxury-search-page input[type="search"]::placeholder {
color: rgba(26, 15, 10, 0.35);
font-style: italic;
letter-spacing: 0.04em;
}
.luxury-search input[type="search"]:focus,
.luxury-search-page input[type="search"]:focus {
border-bottom-color: #1a0f0a !important;
}
.luxury-search__trending,
.search-trending {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
text-align: center;
}
.luxury-search__trending-label,
.search-trending__label {
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(26, 15, 10, 0.55);
font-weight: 500;
}
.luxury-search__trending-list,
.search-trending__list {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.luxury-search__trending-list a,
.search-trending__list a {
display: inline-flex;
align-items: center;
padding: 9px 16px;
border: 1px solid rgba(26, 15, 10, 0.14);
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1a0f0a;
text-decoration: none;
background: #fff;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.luxury-search__trending-list a:hover,
.search-trending__list a:hover {
background: #1a0f0a;
color: #fffaf3;
border-color: #1a0f0a;
}
.luxury-search button[type="submit"],
.luxury-search-page button[type="submit"] {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 12px 22px;
border-radius: 999px;
background: #1a0f0a;
color: #fffaf3;
border: 0;
transition: opacity 180ms ease, transform 180ms ease;
}
.luxury-search button[type="submit"]:hover,
.luxury-search-page button[type="submit"]:hover {
opacity: 0.9;
transform: translateY(-1px);
}
@media (max-width: 749px) {
.luxury-search__body,
.luxury-search-page { padding-block: 32px 48px; gap: 28px; }
.luxury-search__trending-list a,
.search-trending__list a { padding: 8px 14px; font-size: 0.68rem; }
}
/* END SEARCH OVERLAY POLISH */
/* =============================================================
SEARCH OVERLAY HOTFIX (v2) — force text black, logo visible
============================================================= */
.luxury-search,
.luxury-search * {
color: #1a0f0a !important;
text-shadow: none !important;
}
.luxury-search__brand,
.luxury-search .luxury-search__brand,
.luxury-search a.luxury-search__brand {
color: #1a0f0a !important;
opacity: 1 !important;
visibility: visible !important;
font-family: var(--font-display);
font-size: 1.05rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.luxury-search__brand svg,
.luxury-search__top svg {
color: #1a0f0a !important;
fill: #1a0f0a !important;
stroke: #1a0f0a !important;
opacity: 1 !important;
}
/* Trending: red highlight → transparent chips with black text */
.luxury-search__trending-list a,
.search-trending__list a,
.luxury-search__trending a,
.search-trending a {
background: transparent !important;
color: #1a0f0a !important;
border: 1px solid rgba(26, 15, 10, 0.18) !important;
text-decoration: none !important;
}
.luxury-search__trending-list a:hover,
.search-trending__list a:hover,
.luxury-search__trending a:hover,
.search-trending a:hover {
background: #1a0f0a !important;
color: #fffaf3 !important;
border-color: #1a0f0a !important;
}
.luxury-search__trending-label,
.search-trending__label,
.luxury-search__trending > span:first-child {
background: transparent !important;
color: rgba(26, 15, 10, 0.6) !important;
font-weight: 500;
}
/* Search input + placeholder + SEARCH submit text */
.luxury-search input,
.luxury-search input::placeholder,
.luxury-search button,
.luxury-search button span {
color: #1a0f0a !important;
}
.luxury-search input::placeholder { opacity: 0.45 !important; }
.luxury-search button[type="submit"] {
background: #1a0f0a !important;
color: #fffaf3 !important;
}
.luxury-search button[type="submit"] * { color: #fffaf3 !important; }
/* END SEARCH OVERLAY HOTFIX v2 */
/* SEARCH OVERLAY HOTFIX v3 — ultra-high specificity for trending text */
html body .luxury-search .luxury-search__trending,
html body .luxury-search .luxury-search__trending *,
html body .luxury-search .search-trending,
html body .luxury-search .search-trending * {
color: #1a0f0a !important;
opacity: 1 !important;
}
html body .luxury-search a[href*="/search"],
html body .luxury-search a[href*="q="] {
color: #1a0f0a !important;
opacity: 1 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(26,15,10,0.35) !important;
padding-bottom: 2px;
}
html body .luxury-search a[href*="/search"]:hover,
html body .luxury-search a[href*="q="]:hover {
border-bottom-color: #1a0f0a !important;
}
html body .luxury-search .luxury-search__trending > *:first-child,
html body .luxury-search .luxury-search__trending p,
html body .luxury-search .luxury-search__trending span,
html body .luxury-search .luxury-search__trending .h6,
html body .luxury-search .luxury-search__trending-label {
color: rgba(26,15,10,0.7) !important;
opacity: 1 !important;
}
/* END HOTFIX v3 */
}
:root {
--surface-canvas: #faf8f4;
--surface-raised: #fffdfa;
--surface-sunken: #f1eee9;
--surface-ink: #15110e;
--text-primary: #15110e;
--text-secondary: #625d57;
--text-muted: #8a837a;
--border-subtle: #ded8cf;
--border-strong: #bdb3a8;
--brand-primary: #15110e;
--brand-primary-hover: #2a221c;
--brand-deep: #15110e;
--brand-accent: #9a7a4e;
--font-display: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--font-body: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--font-ui: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-lg: 18px;
--text-xl: 26px;
--tracking-ui: 0.04em;
--tracking-wide: 0.14em;
--page-width: 1680px;
--gutter: 32px;
--section-spacing: 88px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 8px;
}
html,
body {
overflow-x: hidden;
background: var(--surface-canvas);
}
body {
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.55;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.page-width {
width: min(100% - var(--gutter) * 2, var(--page-width));
}
.utility-bar {
display: none;
}
.section-spacing {
padding-block: var(--section-spacing);
}
.eyebrow {
margin-bottom: 12px;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.22em;
line-height: 1.2;
text-transform: uppercase;
}
h1,
h2,
h3,
.h1,
.h2,
.h3 {
color: var(--text-primary);
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.16;
text-transform: uppercase;
}
h1,
.h1 {
font-size: clamp(2.35rem, 5.8vw, 5.2rem);
}
h2,
.h2 {
font-size: clamp(1.7rem, 3.2vw, 3.25rem);
}
h3,
.h3 {
font-size: clamp(1rem, 1.4vw, 1.35rem);
}
p,
li,
.rte {
letter-spacing: 0;
}
.button,
.btn,
.shopify-payment-button__button {
min-height: 48px;
border: 1px solid var(--brand-primary);
border-radius: 999px;
background: var(--brand-primary);
color: #fffdf8;
padding: 0 30px;
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.button:hover,
.btn:hover,
.shopify-payment-button__button:hover {
border-color: var(--brand-primary-hover);
background: var(--brand-primary-hover);
transform: none;
}
.button--secondary,
.button--ghost,
.buttons-outline .button:not(.button--ghost):not(.button--quiet) {
border-color: var(--border-strong);
background: transparent;
color: var(--text-primary);
}
.button--secondary:hover,
.button--ghost:hover,
.buttons-outline .button:not(.button--ghost):not(.button--quiet):hover {
border-color: var(--text-primary);
background: rgba(21, 17, 14, 0.04);
color: var(--text-primary);
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(21, 17, 14, 0.09);
background: rgba(250, 248, 244, 0.96);
color: var(--text-primary);
backdrop-filter: blur(16px);
}
body.template-index:not(.has-scrolled) .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
border-bottom-color: transparent;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0));
color: #fffaf3;
backdrop-filter: none;
}
body.template-index:not(.has-scrolled) .site-header a,
body.template-index:not(.has-scrolled) .site-header button,
body.template-index:not(.has-scrolled) .site-header summary,
body.template-index:not(.has-scrolled) .site-header svg {
color: #fffaf3;
stroke: currentColor;
}
.site-header__inner {
display: grid;
min-height: 78px;
align-items: center;
grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
gap: 20px;
padding-block: 0;
}
.site-header__left,
.site-header__actions {
gap: 18px;
}
.site-header__brand {
max-width: min(460px, 46vw);
font-family: var(--font-display);
font-size: clamp(0.9rem, 1.3vw, 1.28rem);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.site-header__logo {
width: min(230px, 42vw);
max-height: 44px;
}
.site-header__text-link,
.header-icon {
color: inherit;
}
.site-header__text-link {
gap: 9px;
min-height: 44px;
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.03em;
text-transform: none;
}
.site-header__text-link .icon,
.header-icon .icon {
width: 20px;
height: 20px;
}
.header-icon {
width: 44px;
height: 44px;
}
.header-icon:hover,
.site-header__text-link:hover {
opacity: 0.68;
}
.header-icon__count {
top: 4px;
right: 4px;
background: var(--brand-primary);
}
.header-drawer__scrim {
position: fixed;
inset: 0;
z-index: 110;
display: block;
visibility: hidden;
background: rgba(0, 0, 0, 0.58);
opacity: 0;
transition: opacity 180ms ease, visibility 180ms ease;
}
.header-drawer[open] .header-drawer__scrim {
visibility: visible;
opacity: 1;
}
.header-drawer__panel {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 111;
width: min(520px, 88vw);
max-width: 100vw;
padding: 34px 42px;
transform: translateX(-100%);
border-right: 1px solid rgba(21, 17, 14, 0.08);
background: #fffdf9;
color: var(--text-primary);
box-shadow: 24px 0 80px rgba(0, 0, 0, 0.14);
transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.template-index:not(.has-scrolled) .header-drawer__panel,
body.template-index:not(.has-scrolled) .header-drawer__panel a,
body.template-index:not(.has-scrolled) .header-drawer__panel button,
body.template-index:not(.has-scrolled) .header-drawer__panel span,
body.template-index:not(.has-scrolled) .header-drawer__panel svg {
color: var(--text-primary);
stroke: currentColor;
}
.header-drawer[open] .header-drawer__panel {
transform: translateX(0);
}
body.drawer-open,
body.search-open {
overflow: hidden;
}
.header-drawer__top {
min-height: 48px;
margin-bottom: 38px;
}
.header-drawer__brand {
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.header-drawer__close {
width: 44px;
height: 44px;
color: var(--text-primary);
}
.header-drawer__primary {
gap: 0;
padding: 0;
}
.header-drawer__row {
grid-template-columns: 1fr auto;
border-bottom: 0;
}
.header-drawer__primary-link {
padding: 13px 0;
color: var(--text-primary);
font-family: var(--font-display);
font-size: clamp(1.42rem, 2.4vw, 2rem);
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1.35;
text-transform: none;
}
.header-drawer__advance {
color: var(--text-primary);
}
.header-drawer__flyout {
background: #fffdf9;
}
.header-drawer__secondary-link,
.header-drawer__tertiary a,
.header-drawer__footer a {
color: var(--text-secondary);
font-size: var(--text-base);
letter-spacing: 0;
text-transform: none;
}
.header-drawer__footer {
margin-top: auto;
border-top: 1px solid var(--border-subtle);
padding-top: 22px;
}
.luxury-search {
position: fixed;
inset: 0;
z-index: 160;
overflow-y: auto;
background: #fffdf9;
color: var(--text-primary);
}
.luxury-search[hidden] {
display: none;
}
.luxury-search__top {
display: grid;
min-height: 92px;
align-items: center;
grid-template-columns: 1fr auto 1fr;
}
.luxury-search__brand {
grid-column: 2;
justify-self: center;
font-size: clamp(1.05rem, 2vw, 1.55rem);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.luxury-search__close {
grid-column: 3;
justify-self: end;
width: 46px;
height: 46px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-primary);
}
.luxury-search__body,
.luxury-search-page {
display: grid;
max-width: 1260px;
gap: 48px;
padding-block: 38px 72px;
}
.luxury-search__form {
display: grid;
width: min(100%, 980px);
margin-inline: auto;
grid-template-columns: 1fr auto;
align-items: center;
border: 1.5px solid var(--text-primary);
border-radius: 999px;
background: transparent;
padding: 7px;
}
.luxury-search__input {
min-height: 58px;
border: 0;
background: transparent;
color: var(--text-primary);
padding: 0 24px;
font-size: clamp(1rem, 2vw, 1.35rem);
outline: 0;
}
.luxury-search__submit {
min-height: 50px;
border: 0;
border-radius: 999px;
background: var(--brand-primary);
color: #fffdf9;
padding: 0 34px;
font-size: var(--text-sm);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.luxury-search__trends {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px 28px;
font-size: var(--text-base);
}
.luxury-search__trends span {
color: var(--text-secondary);
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.luxury-search__trends a {
color: var(--text-primary);
text-decoration: none;
}
.luxury-search__recommendations h2 {
margin-bottom: 28px;
font-size: clamp(1.2rem, 2vw, 1.8rem);
letter-spacing: 0.03em;
text-align: left;
text-transform: none;
}
.hero {
min-height: var(--hero-desktop-height, 88vh);
background: var(--brand-deep);
}
body.template-index .hero {
min-height: 100dvh;
}
.hero::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.24) 42%, rgba(0, 0, 0, 0.42)), rgba(0, 0, 0, var(--hero-overlay, 0.18));
}
.hero__media img {
object-position: center;
}
.hero__content {
min-height: var(--hero-desktop-height, 88vh);
padding-block: 108px 58px;
}
body.template-index .hero__content {
min-height: 100dvh;
}
.hero__copy {
max-width: min(100%, 1120px);
gap: 18px;
}
.hero__copy h1 {
max-width: 14ch;
color: inherit;
font-size: clamp(2.7rem, 7vw, 6.8rem);
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.05;
text-transform: uppercase;
}
.hero__copy p {
max-width: 620px;
color: currentColor;
font-size: clamp(0.96rem, 1.4vw, 1.16rem);
opacity: 0.92;
}
.hero__actions {
gap: 16px;
margin-top: 8px;
}
.hero .button,
.campaign-banner .button {
min-width: min(270px, 82vw);
border-color: rgba(255, 255, 255, 0.76);
border-radius: 0;
background: rgba(0, 0, 0, 0.06);
color: currentColor;
backdrop-filter: blur(4px);
}
.hero .button:first-child,
.campaign-banner .button:first-child {
background: rgba(255, 253, 249, 0.94);
color: var(--text-primary);
}
.section-header {
margin-bottom: 36px;
}
.section-header--center {
max-width: 820px;
margin-inline: auto;
text-align: center;
}
.section-header h1,
.section-header h2 {
letter-spacing: 0.12em;
}
.section-header p {
color: var(--text-secondary);
}
body.template-index .season-edit,
body.template-index .product-edit,
body.template-index .luxury-services {
padding-block: 88px;
}
body.template-index .season-edit__grid {
gap: 22px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.template-index .category-card {
overflow: visible;
background: transparent;
}
body.template-index .category-card__media {
aspect-ratio: 1 / 1.08;
background: #f0ede8;
}
body.template-index .category-card__content {
position: static;
padding: 16px 4px 0;
background: transparent;
color: var(--text-primary);
text-align: center;
}
body.template-index .category-card__content h3 {
color: inherit;
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.35;
text-transform: uppercase;
}
body.template-index .category-card__content p {
color: var(--text-secondary);
}
.campaign-banner {
min-height: var(--campaign-height, 64vh);
}
.campaign-banner__content {
min-height: var(--campaign-height, 64vh);
padding-block: 76px 46px;
}
.campaign-banner__copy h2 {
color: inherit;
font-size: clamp(1.75rem, 4vw, 4.3rem);
letter-spacing: 0.12em;
}
.campaign-banner__copy p:not(.eyebrow) {
color: currentColor;
opacity: 0.9;
}
.product-grid {
gap: 40px 18px;
}
.product-grid--collection {
width: min(100% - 64px, 1780px);
margin-inline: auto;
gap: 42px 18px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-card {
min-width: 0;
}
.product-card__media {
overflow: hidden;
border-radius: 0;
background: #f2f0ec;
aspect-ratio: 1 / 1.22;
}
.product-card__media img {
object-fit: cover;
object-position: center;
}
.product-card__badges {
top: 12px;
left: 12px;
}
.wishlist-button {
top: 12px;
right: 12px;
width: 38px;
min-height: 38px;
border: 0;
border-radius: 999px;
background: rgba(255, 253, 249, 0.76);
color: var(--text-primary);
}
.product-card__content {
gap: 5px;
padding: 14px 0 0;
}
.product-card__line {
min-height: 0;
}
.product-card__meta {
color: var(--text-muted);
font-size: var(--text-sm);
letter-spacing: 0;
text-transform: none;
}
.product-card__title {
min-height: 0;
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
text-transform: none;
}
.price {
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
}
.product-edit__footer {
margin-top: 34px;
}
.collection-quickbar {
position: sticky;
top: 78px;
z-index: 45;
border-bottom: 1px solid var(--border-subtle);
background: rgba(250, 248, 244, 0.96);
backdrop-filter: blur(12px);
}
.collection-quickbar__inner {
min-height: 64px;
}
.collection-switcher summary,
.collection-sort label,
.filter-drawer summary {
font-size: var(--text-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.collection-hero-media {
height: min(56vh, 680px);
min-height: 420px;
}
.collection-hero-media img {
object-position: center;
}
.collection-category-rail {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
padding-block: 28px 18px;
}
.category-tile {
background: transparent;
}
.category-tile__media {
border-radius: 0;
background: #f2f0ec;
aspect-ratio: 1 / 1;
}
.category-tile__label {
padding-top: 12px;
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-align: center;
text-transform: uppercase;
}
.collection-heading {
padding-block: 48px 34px;
text-align: center;
}
.collection-heading h1 {
font-size: clamp(2.1rem, 4.8vw, 5.2rem);
letter-spacing: 0.18em;
}
.collection-editorial-tile {
min-height: 100%;
background: #f2f0ec;
}
.collection-editorial-tile--large {
grid-column: span 2;
grid-row: span 2;
}
.collection-editorial-tile--wide {
grid-column: span 2;
}
.product-shell {
width: min(100%, 1920px);
padding-inline: 0;
}
.product-page {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.78fr);
gap: 0;
align-items: start;
}
.product-gallery {
display: grid;
gap: 2px;
background: #f2f0ec;
}
.product-gallery__item {
display: grid;
min-height: min(86vh, 980px);
place-items: center;
background: #f2f0ec;
scroll-margin-top: 92px;
}
.product-gallery__item img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-gallery__thumbs {
position: sticky;
bottom: 18px;
z-index: 4;
display: flex;
justify-content: center;
gap: 10px;
padding: 12px;
pointer-events: none;
}
.product-gallery__thumb {
display: block;
width: 62px;
height: 78px;
overflow: hidden;
border: 1px solid rgba(21, 17, 14, 0.16);
background: rgba(255, 253, 249, 0.9);
pointer-events: auto;
}
.product-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-info {
position: sticky;
top: 78px;
display: grid;
gap: 26px;
max-width: none;
min-height: calc(100dvh - 78px);
padding: clamp(54px, 7vw, 120px) clamp(38px, 7vw, 132px);
background: var(--surface-canvas);
}
.product-info__topline {
margin-bottom: 14px;
}
.product-info__status,
.product-info__sku {
color: var(--text-secondary);
font-size: var(--text-sm);
letter-spacing: 0.04em;
text-transform: none;
}
.product-info__title {
max-width: 18ch;
margin-bottom: 12px;
font-size: clamp(1.55rem, 2.7vw, 2.75rem);
letter-spacing: 0.08em;
line-height: 1.18;
}
.product-description summary {
gap: 10px;
color: var(--text-secondary);
font-size: var(--text-base);
letter-spacing: 0;
line-height: 1.65;
text-transform: none;
}
.product-description__more,
.product-description__less {
color: var(--text-primary);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 4px;
}
.product-form {
gap: 18px;
}
.form-row label,
.accordion summary {
color: var(--text-primary);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.input,
.select,
input,
select,
textarea {
border-radius: 999px;
background: transparent;
}
.product-form .button {
width: 100%;
min-height: 58px;
font-size: var(--text-sm);
}
.accordion {
border-top: 1px solid var(--border-subtle);
}
.accordion details {
border-bottom: 1px solid var(--border-subtle);
}
.accordion summary {
min-height: 64px;
}
.accordion__content {
color: var(--text-secondary);
font-size: var(--text-base);
letter-spacing: 0;
line-height: 1.65;
text-transform: none;
}
.trust-list {
color: var(--text-secondary);
font-size: var(--text-sm);
}
.sticky-mobile-atc {
transform: translateY(110%);
transition: transform 220ms ease;
}
body.show-sticky-atc .sticky-mobile-atc {
transform: translateY(0);
}
.luxury-services__grid {
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.luxury-service-card {
background: transparent;
}
.luxury-service-card__media {
border-radius: 0;
background: #f2f0ec;
aspect-ratio: 4 / 3;
}
.luxury-service-card__copy {
padding: 18px 0 0;
text-align: center;
}
.luxury-service-card__copy h3 {
font-size: var(--text-base);
letter-spacing: 0.08em;
}
.luxury-service-card__copy p {
max-width: 32ch;
margin-inline: auto;
color: var(--text-secondary);
}
.luxury-service-card__copy a {
display: inline-block;
margin-top: 12px;
border-bottom: 1px solid currentColor;
color: var(--text-primary);
font-size: var(--text-sm);
}
.site-footer {
border-top: 1px solid var(--border-subtle);
background: #fffdf9;
padding-block: 54px 26px;
}
.site-footer__brand,
.site-footer__brand-name,
.site-footer__wordmark,
.site-footer__bottom {
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-footer__column h3 {
font-size: var(--text-xs);
letter-spacing: 0.16em;
}
.site-footer__column .footer-links a {
font-size: var(--text-sm);
}
@media (max-width: 1199px) {
:root {
--gutter: 24px;
}
.site-header__inner {
grid-template-columns: minmax(112px, 1fr) auto minmax(112px, 1fr);
}
body.template-index .season-edit__grid,
.product-grid--collection {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-page {
grid-template-columns: 1fr;
}
.product-info {
position: static;
min-height: auto;
}
}
@media (max-width: 989px) {
.site-header__text-link span,
.site-header__call,
.site-header__actions .header-icon:not(.header-icon--cart) {
display: none;
}
.site-header__inner {
min-height: 72px;
}
.header-drawer__panel {
width: min(420px, 90vw);
padding: 26px 28px;
}
.header-drawer__primary-link {
font-size: 1.45rem;
}
.product-grid--collection {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.luxury-services__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 749px) {
:root {
--gutter: 16px;
--section-spacing: 58px;
}
body {
font-size: 14px;
}
body.template-product {
padding-bottom: 92px;
}
.site-header__inner {
min-height: 64px;
gap: 8px;
grid-template-columns: 72px minmax(0, 1fr) 72px;
}
.site-header__left,
.site-header__actions {
gap: 4px;
}
.site-header__brand {
max-width: 100%;
font-size: 0.78rem;
letter-spacing: 0.14em;
}
.header-icon,
.site-header__text-link {
width: 38px;
min-height: 38px;
}
.hero,
.hero__content,
body.template-index .hero,
body.template-index .hero__content {
min-height: 82dvh;
}
.hero__content {
padding-block: 96px 34px;
}
.hero__copy h1 {
max-width: 11ch;
font-size: clamp(2.05rem, 10vw, 3.15rem);
letter-spacing: 0.12em;
}
.hero__copy p {
max-width: 32ch;
font-size: 0.94rem;
}
.hero__actions {
width: min(100%, 330px);
flex-direction: column;
}
.hero .button,
.campaign-banner .button {
width: 100%;
min-width: 0;
}
body.template-index .season-edit,
body.template-index .product-edit,
body.template-index .luxury-services {
padding-block: 58px;
}
body.template-index .season-edit__grid {
gap: 18px 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.template-index .category-card__content h3 {
font-size: 0.76rem;
letter-spacing: 0.09em;
}
.section-header {
margin-bottom: 26px;
}
.section-header h1,
.section-header h2 {
font-size: clamp(1.45rem, 7vw, 2.05rem);
letter-spacing: 0.11em;
}
.product-grid,
.product-grid--collection {
width: min(100% - 24px, 100%);
gap: 28px 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-card__media {
aspect-ratio: 1 / 1.24;
}
.product-card__title {
font-size: 0.84rem;
}
.product-card__meta,
.price {
font-size: 0.76rem;
}
.collection-quickbar {
top: 64px;
}
.collection-quickbar__inner {
display: grid;
gap: 10px;
padding-block: 12px;
}
.collection-category-rail {
display: flex;
width: 100%;
overflow-x: auto;
gap: 14px;
padding-inline: 16px;
scroll-snap-type: x proximity;
}
.category-tile {
flex: 0 0 118px;
scroll-snap-align: start;
}
.collection-hero-media {
min-height: 340px;
height: 52vh;
}
.collection-heading {
padding-block: 36px 24px;
}
.collection-heading h1 {
font-size: clamp(1.8rem, 9vw, 2.9rem);
letter-spacing: 0.13em;
}
.collection-editorial-tile--large,
.collection-editorial-tile--wide {
grid-column: span 2;
grid-row: span 1;
}
.luxury-search__top {
min-height: 72px;
grid-template-columns: 44px 1fr 44px;
}
.luxury-search__brand {
max-width: 210px;
font-size: 1rem;
letter-spacing: 0.13em;
text-align: center;
}
.luxury-search__body,
.luxury-search-page {
gap: 34px;
padding-block: 24px 52px;
}
.luxury-search__form {
grid-template-columns: minmax(0, 1fr) auto;
border-radius: 999px;
padding: 6px;
}
.luxury-search__input {
min-width: 0;
min-height: 52px;
padding: 0 12px 0 16px;
text-align: left;
}
.luxury-search__submit {
width: auto;
min-width: 104px;
min-height: 48px;
padding-inline: 18px;
}
.luxury-search__trends {
gap: 14px 18px;
text-align: center;
}
.campaign-banner,
.campaign-banner__content {
min-height: var(--campaign-mobile-height, 54vh);
}
.campaign-banner__content {
padding-block: 54px 34px;
}
.campaign-banner__copy h2 {
font-size: clamp(1.45rem, 7vw, 2.3rem);
}
.product-gallery {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.product-gallery::-webkit-scrollbar {
display: none;
}
.product-gallery__item {
flex: 0 0 100%;
min-height: auto;
height: min(74vh, 620px);
scroll-snap-align: start;
}
.product-gallery__thumbs {
display: none;
}
.product-info {
gap: 22px;
padding: 46px 20px 34px;
}
.product-info__title {
max-width: none;
font-size: clamp(1.45rem, 7vw, 2.2rem);
letter-spacing: 0.08em;
}
.sticky-mobile-atc {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 120;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
border-top: 1px solid rgba(21, 17, 14, 0.1);
background: rgba(255, 253, 249, 0.98);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.1);
}
.sticky-mobile-atc .button {
min-width: 150px;
min-height: 48px;
}
.site-footer {
padding-inline: 18px;
}
}
@media (max-width: 380px) {
.product-grid,
.product-grid--collection {
grid-template-columns: 1fr;
}
body.template-index .season-edit__grid {
grid-template-columns: 1fr;
}
}
/* LV reference typography polish */
:root {
--font-display: "Tenor Sans", "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--font-body: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--font-ui: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--tracking-ui: 0.035em;
--tracking-wide: 0.12em;
}
body {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
}
h1,
h2,
h3,
.h1,
.h2,
.h3,
.section-header h1,
.section-header h2,
.collection-heading h1,
.product-info__title,
.luxury-search-page__header h1 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.035em;
line-height: 1.18;
text-transform: none;
}
.site-header__brand,
.luxury-search__brand,
.site-footer__brand,
.site-footer__brand-name,
.site-footer__wordmark,
.site-footer__bottom {
font-family: var(--font-ui);
font-weight: 700;
letter-spacing: 0.18em;
line-height: 1;
text-transform: uppercase;
}
.site-header__brand {
font-size: clamp(0.9rem, 1.05vw, 1.18rem);
}
.site-header__text-link,
.header-drawer__footer a,
.collection-switcher summary,
.collection-sort label,
.filter-drawer summary,
.eyebrow,
.button,
.btn,
.shopify-payment-button__button,
.product-form .button,
.luxury-search__submit,
.form-row label,
.accordion summary,
label,
.site-footer__column h3 {
font-family: var(--font-ui);
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.site-header__text-link,
.header-drawer__footer a {
font-size: 0.84rem;
letter-spacing: 0.02em;
text-transform: none;
}
.header-drawer__primary-link {
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.4vw, 2.12rem);
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1.35;
text-transform: none;
}
.header-drawer__secondary-link,
.header-drawer__tertiary a {
font-family: var(--font-body);
font-size: 0.98rem;
letter-spacing: 0;
text-transform: none;
}
.hero__copy h1 {
max-width: 18ch;
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.1vw, 3.35rem);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.08;
text-transform: none;
}
.hero__actions {
gap: 22px;
}
.hero .hero__actions .button,
.hero .hero__actions .button:first-child,
.hero .hero__actions .button--secondary {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: auto !important;
height: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: currentColor !important;
padding: 0 !important;
font-size: 0.78rem !important;
letter-spacing: 0.12em !important;
line-height: 1.35 !important;
text-decoration: underline !important;
text-underline-offset: 5px;
}
.hero__copy p,
.campaign-banner__copy p:not(.eyebrow),
.section-header p,
.product-description summary,
.accordion__content,
.rte {
font-family: var(--font-body);
font-size: clamp(0.94rem, 1vw, 1.05rem);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
.section-header h1,
.section-header h2 {
font-size: clamp(1.35rem, 2.3vw, 2.35rem);
letter-spacing: 0.025em;
}
body.template-index .section-header h1,
body.template-index .section-header h2 {
font-size: clamp(1rem, 1.45vw, 1.35rem);
letter-spacing: 0.02em;
}
.campaign-banner__copy h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.4vw, 4rem);
font-weight: 400;
letter-spacing: 0.045em;
text-transform: none;
}
body.template-index .category-card__content h3,
.category-tile__label,
.product-card__title {
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
text-transform: none;
}
.product-card__meta,
.price,
.product-card .price {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.35;
}
.collection-heading h1 {
font-size: clamp(1.85rem, 3.8vw, 4.1rem);
letter-spacing: 0.055em;
}
.product-info__title {
max-width: 22ch;
font-size: clamp(1.45rem, 2.1vw, 2.25rem);
letter-spacing: 0.025em;
}
.product-info__status,
.product-info__sku,
.trust-list,
.site-footer__column .footer-links a {
font-family: var(--font-body);
font-size: 0.84rem;
letter-spacing: 0;
text-transform: none;
}
.luxury-search__input {
font-family: var(--font-body);
font-weight: 400;
}
.luxury-search__trends,
.luxury-search__trends a {
font-family: var(--font-body);
font-size: 0.98rem;
letter-spacing: 0;
}
.luxury-search__trends span {
font-family: var(--font-ui);
font-size: 0.72rem;
letter-spacing: 0.17em;
}
.site-footer__brand,
.site-footer__brand-name,
.site-footer__wordmark {
font-size: 0.88rem;
}
.site-footer__mobile-accordions {
display: none;
}
@media (max-width: 749px) {
body.template-index:not(.has-scrolled) .site-header,
body.template-index .site-header {
position: sticky !important;
top: 0;
border-bottom: 1px solid rgba(21, 17, 14, 0.08) !important;
background: #fffdf9 !important;
color: var(--text-primary) !important;
backdrop-filter: blur(14px);
}
body.template-index:not(.has-scrolled) .site-header a,
body.template-index:not(.has-scrolled) .site-header button,
body.template-index:not(.has-scrolled) .site-header span,
body.template-index:not(.has-scrolled) .site-header summary,
body.template-index:not(.has-scrolled) .site-header svg,
body.template-index .site-header a,
body.template-index .site-header button,
body.template-index .site-header span,
body.template-index .site-header summary,
body.template-index .site-header svg {
color: var(--text-primary) !important;
stroke: currentColor !important;
text-shadow: none !important;
}
body {
font-size: 14px;
}
.site-header__brand {
font-size: 0.78rem;
letter-spacing: 0.14em;
}
body.template-index .hero,
body.template-index .hero__content {
height: min(62dvh, 520px) !important;
min-height: 430px !important;
}
body.template-index .hero__content {
align-items: flex-end !important;
padding: 86px 18px 28px !important;
}
body.template-index .hero__copy {
gap: 10px;
}
.hero__copy h1 {
max-width: 12ch;
font-size: clamp(1.75rem, 7.2vw, 2.55rem);
letter-spacing: 0.035em;
}
.hero__actions {
width: auto;
max-width: none;
gap: 18px;
}
.section-header h1,
.section-header h2,
body.template-index .section-header h1,
body.template-index .section-header h2 {
font-size: clamp(1.15rem, 5.6vw, 1.7rem);
letter-spacing: 0.025em;
}
.collection-heading h1 {
font-size: clamp(1.75rem, 8vw, 2.65rem);
letter-spacing: 0.045em;
}
.product-info__title {
font-size: clamp(1.35rem, 6vw, 1.9rem);
letter-spacing: 0.02em;
}
.button,
.btn,
.shopify-payment-button__button,
.product-form .button,
.luxury-search__submit {
font-size: 0.78rem;
letter-spacing: 0.1em;
}
body.template-index .season-edit,
body.template-index .product-edit,
body.template-index .luxury-services {
padding-block: 34px !important;
}
body.template-index .section-header {
margin-bottom: 22px;
}
body.template-index .section-header::after {
content: "";
display: block;
width: 96px;
margin: 14px auto 0;
border-top: 1px solid rgba(21, 17, 14, 0.5);
}
body.template-index .section-header p {
max-width: 28ch;
margin-inline: auto;
font-size: 0.86rem;
line-height: 1.45;
}
body.template-index .season-edit__grid {
gap: 20px 12px !important;
}
body.template-index .category-card__media {
aspect-ratio: 1 / 1.05;
}
body.template-index .category-card__content {
padding-top: 8px;
}
body.template-index .category-card__content p {
display: none;
}
body.template-index .product-grid,
body.template-index .product-grid--collection {
width: min(100% - 24px, 100%) !important;
gap: 24px 10px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.template-index .product-card__media {
aspect-ratio: 1 / 1.18;
}
body.template-index .product-card__content {
padding-top: 8px;
}
body.template-index .product-card__title {
font-size: 0.74rem;
line-height: 1.25;
}
body.template-index .price,
body.template-index .product-card__meta {
font-size: 0.7rem;
}
body.template-index .product-edit__footer {
margin-top: 24px;
}
body.template-index .campaign-banner,
body.template-index .campaign-banner__content {
min-height: min(48dvh, 420px) !important;
}
body.template-index .campaign-banner__content {
padding: 44px 20px 26px !important;
}
body.template-index .campaign-banner__copy h2 {
font-size: clamp(1.45rem, 7vw, 2.2rem);
}
body.template-index .luxury-services__grid {
display: flex;
gap: 12px;
overflow-x: auto;
padding-inline: 16px;
scroll-snap-type: x proximity;
}
body.template-index .luxury-service-card {
flex: 0 0 78vw;
scroll-snap-align: center;
}
body.template-index .luxury-service-card__media {
aspect-ratio: 4 / 4.6;
}
.site-footer {
padding: 34px 0 22px !important;
}
.site-footer__grid {
width: 100%;
display: grid;
gap: 20px;
padding-inline: 0;
}
.site-footer__brand-block {
padding-inline: 22px;
text-align: center;
}
.site-footer__brand-block h2,
.site-footer__brand-block p,
.site-footer__social,
.site-footer__columns {
display: none !important;
}
.site-footer__mobile-accordions {
display: block;
border-top: 1px solid rgba(21, 17, 14, 0.12);
}
.site-footer__mobile-item {
border-bottom: 1px solid rgba(21, 17, 14, 0.12);
}
.site-footer__mobile-item summary {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
padding: 0 22px;
color: var(--text-primary);
cursor: pointer;
font-family: var(--font-ui);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.1em;
list-style: none;
text-transform: uppercase;
}
.site-footer__mobile-item summary::-webkit-details-marker {
display: none;
}
.site-footer__mobile-item summary::after {
content: "+";
font-size: 1rem;
font-weight: 400;
line-height: 1;
}
.site-footer__mobile-item[open] summary::after {
content: "-";
}
.site-footer__mobile-content {
padding: 0 22px 18px;
color: var(--text-secondary);
font-size: 0.86rem;
}
.site-footer__mobile-content .footer-links {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__mobile-content .footer-links a {
color: var(--text-secondary);
font-size: 0.86rem;
letter-spacing: 0;
text-transform: none;
}
.site-footer__bottom {
width: 100%;
padding: 18px 22px 0;
font-size: 0.68rem;
letter-spacing: 0.08em;
}
}
:root {
--surface-canvas: #f7f2ea;
--surface-raised: #fffdf9;
--surface-sunken: #eee7dd;
--surface-ink: #211b16;
--text-primary: #211b16;
--text-secondary: #675f55;
--text-muted: #82786c;
--border-subtle: #ded5c9;
--border-strong: #b8aa99;
--brand-primary: #211b16;
--brand-primary-hover: #352c24;
--brand-accent: #9b7849;
--font-display: "Tenor Sans", "Cormorant Garamond", "Times New Roman", Georgia, serif;
--font-body: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
--font-ui: var(--font-body);
--section-spacing: 104px;
}
body {
background: var(--surface-canvas);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 17px;
}
.h1,
.h2,
.h3,
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0;
}
.eyebrow {
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.button,
.btn,
.shopify-payment-button__button {
border-radius: 0;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
}
.shopify-section-group-header-group {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
background: var(--surface-raised) !important;
}
.shopify-section-group-header-group::before {
display: none !important;
}
.site-header,
body.template-index .site-header,
body.template-index:not(.has-scrolled) .site-header,
body.template-index .site-header[data-scrolled="true"] {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
border-bottom: 1px solid rgba(33, 27, 22, 0.1) !important;
background: rgba(255, 253, 249, 0.96) !important;
color: var(--text-primary) !important;
box-shadow: none !important;
backdrop-filter: blur(14px) !important;
mix-blend-mode: normal !important;
}
.site-header *,
body.template-index .site-header *,
body.template-index:not(.has-scrolled) .site-header *,
body.template-index .site-header[data-scrolled="true"] * {
color: inherit !important;
text-shadow: none !important;
}
.site-header svg,
body.template-index .site-header svg {
color: currentColor !important;
fill: none !important;
stroke: currentColor !important;
}
.site-header__inner {
display: grid !important;
min-height: 78px !important;
grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) !important;
gap: 18px !important;
padding: 0 !important;
}
.site-header__brand {
max-width: min(440px, 44vw);
font-family: var(--font-display) !important;
font-size: clamp(1.05rem, 1.35vw, 1.32rem) !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
}
.site-header__text-link,
.header-icon {
min-height: 42px;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
}
.site-header__text-link:hover,
.header-icon:hover,
.site-nav a:hover {
opacity: 1;
text-decoration: underline;
text-underline-offset: 5px;
}
.site-nav {
position: static !important;
display: flex !important;
width: min(100% - var(--gutter) * 2, 720px) !important;
transform: none !important;
justify-content: center;
gap: clamp(18px, 3vw, 34px);
border-top: 1px solid rgba(33, 27, 22, 0.08);
border-bottom: 0;
background: transparent !important;
color: var(--text-secondary) !important;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
margin-inline: auto;
padding: 12px 0 14px !important;
text-transform: none;
}
body.template-index main > .shopify-section:first-of-type,
main .shopify-section:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.template-index .hero {
display: grid !important;
grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
min-height: clamp(620px, calc(100dvh - 118px), 820px) !important;
background: var(--surface-canvas) !important;
color: var(--text-primary) !important;
}
body.template-index .hero::after {
display: none !important;
}
body.template-index .hero__media {
position: relative !important;
inset: auto !important;
grid-column: 2;
grid-row: 1;
min-height: inherit;
background: var(--surface-sunken);
}
body.template-index .hero__media img,
body.template-index .hero__placeholder {
position: absolute !important;
inset: 0 !important;
width: 100%;
height: 100%;
object-fit: cover;
}
body.template-index .hero__content {
grid-column: 1;
grid-row: 1;
min-height: inherit !important;
align-items: center !important;
justify-content: flex-start !important;
color: var(--text-primary);
padding-block: clamp(72px, 8vw, 116px) !important;
}
body.template-index .hero__copy {
max-width: 34ch !important;
justify-items: start !important;
gap: 16px;
text-align: left !important;
}
body.template-index .hero__copy h1 {
max-width: 11ch;
color: var(--text-primary);
font-size: clamp(3.5rem, 5.2vw, 4.35rem);
letter-spacing: 0;
line-height: 1.04;
text-transform: none;
}
body.template-index .hero__copy p {
max-width: 34ch;
color: var(--text-secondary);
font-size: 18px;
line-height: 1.62;
opacity: 1;
}
body.template-index .hero__actions {
justify-content: flex-start;
gap: 12px;
margin-top: 4px;
}
body.template-index .hero .hero__actions .button,
body.template-index .hero .hero__actions .button:first-child,
body.template-index .hero .hero__actions .button--secondary {
min-height: 44px !important;
border: 1px solid var(--brand-primary) !important;
background: var(--brand-primary) !important;
color: #fffdf9 !important;
padding: 0 18px !important;
text-decoration: none !important;
}
body.template-index .hero .hero__actions .button--secondary {
border-color: var(--border-strong) !important;
background: transparent !important;
color: var(--text-primary) !important;
}
body.template-index .section-spacing {
padding-block: 96px;
}
body.template-index .section-header,
body.template-index .section-header--center {
display: grid;
max-width: 760px;
justify-items: center;
gap: 12px;
margin: 0 auto 34px;
text-align: center;
}
body.template-index .section-header h1,
body.template-index .section-header h2 {
color: var(--text-primary);
font-size: clamp(2rem, 3.6vw, 3.25rem) !important;
letter-spacing: 0 !important;
line-height: 1.12;
}
body.template-index .section-header p {
max-width: 42ch;
color: var(--text-secondary);
font-size: 17px;
line-height: 1.55;
}
body.template-index .season-edit__grid {
gap: 24px 20px !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.template-index .category-card {
overflow: hidden;
border: 1px solid rgba(33, 27, 22, 0.08);
background: var(--surface-raised);
}
body.template-index .category-card__media {
aspect-ratio: 4 / 5 !important;
}
body.template-index .category-card__content {
position: static;
display: grid;
min-height: 156px;
align-content: start;
gap: 8px;
padding: 16px 16px 18px !important;
background: var(--surface-raised);
color: var(--text-primary);
text-align: left;
}
.category-card__badge {
color: var(--brand-accent);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
body.template-index .category-card__content h3 {
color: var(--text-primary);
font-family: var(--font-display);
font-size: 1.32rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.12;
text-transform: none;
}
body.template-index .category-card__content p {
display: block;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.45;
}
.campaign-banner--editorial {
border-block: 1px solid rgba(33, 27, 22, 0.08);
}
.campaign-banner--editorial .campaign-banner__content {
justify-content: flex-start;
text-align: left;
}
.campaign-banner--editorial .campaign-banner__copy {
max-width: 38ch;
justify-items: start;
}
.campaign-banner--split {
display: grid;
grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
min-height: clamp(360px, var(--campaign-height, 48vh), 560px);
background: var(--surface-sunken);
color: var(--text-primary);
}
.campaign-banner--split::after {
display: none;
}
.campaign-banner--split .campaign-banner__media {
position: relative;
inset: auto;
min-height: inherit;
}
.campaign-banner--split .campaign-banner__content {
position: relative;
min-height: inherit;
align-items: center;
justify-content: flex-start;
padding: clamp(34px, 5vw, 68px);
text-align: left;
}
.campaign-banner--split .campaign-banner__copy {
max-width: 36ch;
justify-items: start;
}
.campaign-banner--split .campaign-banner__copy h2,
.campaign-banner--split .campaign-banner__copy p:not(.eyebrow) {
color: var(--text-primary);
}
.campaign-banner--split .campaign-banner__copy p:not(.eyebrow) {
color: var(--text-secondary);
}
.campaign-banner--split .button {
border: 1px solid var(--brand-primary) !important;
background: var(--brand-primary) !important;
color: #fffdf9 !important;
padding: 0 18px !important;
min-height: 42px !important;
text-decoration: none !important;
}
body.template-index .product-link-edit .product-grid--manual {
gap: 26px 18px !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.featured-products .product-grid {
display: grid;
grid-auto-columns: minmax(220px, calc((100% - 80px) / 6));
grid-auto-flow: column;
grid-template-columns: none !important;
gap: 18px;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-bottom: 8px;
scroll-snap-type: x proximity;
}
.featured-products .product-card {
scroll-snap-align: start;
}
.product-card__media {
aspect-ratio: 4 / 5 !important;
border-radius: 0;
}
.product-card__content {
gap: 7px;
padding-top: 12px;
}
.product-card__line {
min-height: 0;
}
.product-card__title {
min-height: 0;
font-size: 16px;
line-height: 1.35;
}
.product-card__meta,
.product-card .price {
color: var(--text-muted);
font-size: 14px;
font-weight: 400;
}
.wishlist-button {
border: 1px solid rgba(33, 27, 22, 0.08);
background: rgba(255, 253, 249, 0.82);
}
body.template-index .grid--3 {
gap: 20px;
}
body.template-index .category-card--editorial .category-card__media {
aspect-ratio: 4 / 5 !important;
}
#client-services .luxury-services__grid {
gap: 18px;
}
#client-services .luxury-service-card {
border-top: 1px solid var(--border-subtle);
padding-top: 22px;
}
#client-services .luxury-service-card__media {
display: none;
}
#client-services .luxury-service-card__copy {
justify-items: start;
padding: 0;
text-align: left;
}
#client-services .luxury-service-card__copy h3 {
font-family: var(--font-display);
font-size: 1.42rem;
font-weight: 400;
letter-spacing: 0;
}
#client-services .luxury-service-card__copy p {
max-width: 34ch;
margin: 0;
font-size: 15px;
line-height: 1.48;
}
.homepage-trust-strip {
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-raised);
}
.homepage-trust-strip__inner {
display: flex;
min-height: 58px;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-family: var(--font-ui);
font-size: 14px;
letter-spacing: 0.02em;
text-align: center;
}
.site-footer {
background: var(--surface-canvas);
}
.site-footer__brand-block p {
max-width: 34ch;
}
@media (max-width: 989px) {
.site-nav {
display: none !important;
}
body.template-index .hero {
display: flex !important;
height: auto !important;
min-height: 0 !important;
flex-direction: column;
}
body.template-index .hero__media {
order: 1;
position: relative !important;
inset: auto !important;
width: 100%;
min-height: 58dvh;
}
body.template-index .hero__content {
order: 0;
width: 100%;
min-height: auto !important;
padding: 54px var(--gutter) 38px !important;
}
body.template-index .hero__copy {
max-width: 38ch !important;
}
body.template-index .hero__copy h1 {
font-size: clamp(2.4rem, 10vw, 3.1rem);
}
.campaign-banner--split {
grid-template-columns: 1fr;
}
.campaign-banner--split .campaign-banner__media {
min-height: 46dvh;
}
.campaign-banner--split .campaign-banner__content {
min-height: auto;
padding: 34px var(--gutter);
}
}
@media (max-width: 749px) {
body {
font-size: 16px;
}
.site-header__inner {
min-height: 66px !important;
grid-template-columns: minmax(74px, 1fr) auto minmax(74px, 1fr) !important;
}
body.template-index .section-spacing {
padding-block: 58px !important;
}
body.template-index .section-header,
body.template-index .section-header--center {
margin-bottom: 24px;
}
body.template-index .section-header::after {
display: none !important;
}
body.template-index .season-edit__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px 12px !important;
}
body.template-index .category-card__content {
min-height: 126px;
padding: 12px !important;
}
body.template-index .category-card__content h3 {
font-size: 1.08rem;
}
body.template-index .category-card__content p {
font-size: 12px;
}
body.template-index .product-link-edit .product-grid--manual {
display: flex !important;
gap: 14px !important;
overflow-x: auto;
padding-inline: var(--gutter);
scroll-snap-type: x proximity;
}
body.template-index .product-link-edit .product-grid--manual > * {
flex: 0 0 72vw;
scroll-snap-align: start;
}
.featured-products .product-grid {
grid-auto-columns: 72vw;
padding-inline: var(--gutter);
}
body.template-index .grid--3 {
grid-template-columns: 1fr !important;
}
#client-services .luxury-services__grid {
display: grid;
grid-template-columns: 1fr;
padding-inline: 0;
}
#client-services .luxury-service-card {
flex: none;
}
.site-footer__brand-block h2,
.site-footer__brand-block p,
.site-footer__social {
display: block !important;
}
}
#shopify-section-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 120 !important;
background: var(--surface-raised) !important;
}
#shopify-section-header .site-header,
body.template-index #shopify-section-header .site-header,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header,
body.template-index #shopify-section-header .site-header[data-scrolled="true"] {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
body {
padding-top: 128px !important;
}
@media (max-width: 989px) {
body {
padding-top: 66px !important;
}
}
/* LV-inspired homepage hero/header overlay */
body.template-index {
padding-top: 0 !important;
}
body.template-index #shopify-section-header {
background: transparent !important;
}
body.template-index:not(.has-scrolled) .shopify-section-group-header-group {
background: transparent !important;
}
body.template-index:not(.has-scrolled) #shopify-section-header .site-header {
border-bottom: 0 !important;
background: linear-gradient(180deg, rgba(19, 15, 12, 0.36), rgba(19, 15, 12, 0.03)) !important;
color: #fffdf9 !important;
backdrop-filter: none !important;
}
body.template-index:not(.has-scrolled) #shopify-section-header .site-header *,
body.template-index:not(.has-scrolled) #shopify-section-header .site-nav,
body.template-index:not(.has-scrolled) #shopify-section-header .site-nav * {
color: #fffdf9 !important;
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.24) !important;
}
body.template-index:not(.has-scrolled) #shopify-section-header svg,
body.template-index:not(.has-scrolled) #shopify-section-header svg * {
stroke: currentColor !important;
}
body.template-index:not(.has-scrolled) #shopify-section-header .site-nav {
border-top-color: rgba(255, 253, 249, 0.24) !important;
background: transparent !important;
}
body.template-index.has-scrolled #shopify-section-header,
body.template-index.has-scrolled .shopify-section-group-header-group {
background: var(--surface-raised) !important;
}
body.template-index.has-scrolled #shopify-section-header .site-header {
border-bottom: 1px solid rgba(33, 27, 22, 0.1) !important;
background: rgba(255, 253, 249, 0.96) !important;
color: var(--text-primary) !important;
backdrop-filter: blur(14px) !important;
}
body.template-index.has-scrolled #shopify-section-header .site-header *,
body.template-index.has-scrolled #shopify-section-header .site-nav,
body.template-index.has-scrolled #shopify-section-header .site-nav * {
color: var(--text-primary) !important;
text-shadow: none !important;
}
body.template-index.has-scrolled #shopify-section-header .site-nav {
color: var(--text-secondary) !important;
}
body.template-index .hero {
display: block !important;
min-height: 100svh !important;
height: 100svh !important;
overflow: hidden;
background: var(--brand-deep) !important;
color: #fffdf9 !important;
}
body.template-index .hero::after {
display: block !important;
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, rgba(12, 10, 8, 0.28), rgba(12, 10, 8, 0.02) 42%, rgba(12, 10, 8, 0.72)),
linear-gradient(90deg, rgba(12, 10, 8, 0.12), rgba(12, 10, 8, 0));
pointer-events: none;
}
body.template-index .hero__media {
position: absolute !important;
inset: 0 !important;
grid-column: auto !important;
grid-row: auto !important;
width: 100%;
min-height: 100% !important;
background: var(--brand-deep);
}
body.template-index .hero__media img,
body.template-index .hero__placeholder {
position: absolute !important;
inset: 0 !important;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.template-index .hero__content {
position: relative;
z-index: 1;
grid-column: auto !important;
grid-row: auto !important;
display: flex;
width: 100%;
min-height: 100svh !important;
align-items: flex-end !important;
justify-content: center !important;
color: #fffdf9 !important;
padding: 150px var(--gutter) clamp(44px, 7vh, 82px) !important;
text-align: center;
}
body.template-index .hero__copy {
display: grid;
max-width: min(92vw, 560px) !important;
justify-items: center !important;
gap: 10px !important;
color: #fffdf9 !important;
text-align: center !important;
}
body.template-index .hero__copy .eyebrow {
color: rgba(255, 253, 249, 0.78) !important;
letter-spacing: 0.12em;
}
body.template-index .hero__copy h1 {
max-width: 13ch !important;
color: inherit !important;
font-size: clamp(2.9rem, 5.2vw, 4.8rem) !important;
line-height: 0.98;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.32);
}
body.template-index .hero__copy p:not(.eyebrow) {
max-width: 42ch !important;
color: rgba(255, 253, 249, 0.88) !important;
font-size: clamp(15px, 1.15vw, 18px) !important;
line-height: 1.5;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.28);
}
body.template-index .hero__actions {
justify-content: center !important;
gap: 18px !important;
margin-top: 4px !important;
}
body.template-index .hero .hero__actions .button,
body.template-index .hero .hero__actions .button:first-child,
body.template-index .hero .hero__actions .button--secondary {
min-height: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #fffdf9 !important;
box-shadow: none !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 0 0 6px !important;
text-decoration: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 7px;
}
body.template-index .hero .hero__actions .button:hover,
body.template-index .hero .hero__actions .button--secondary:hover {
opacity: 0.74;
}
@media (min-width: 990px) {
body.template-index #shopify-section-header .site-header__inner {
min-height: 68px !important;
}
body.template-index #shopify-section-header .site-nav {
padding: 10px 0 12px !important;
}
}
@media (max-width: 989px) {
body.template-index {
padding-top: 66px !important;
}
body.template-index #shopify-section-header,
body.template-index .shopify-section-group-header-group,
body.template-index:not(.has-scrolled) #shopify-section-header,
body.template-index:not(.has-scrolled) .shopify-section-group-header-group {
background: var(--surface-raised) !important;
}
body.template-index #shopify-section-header .site-header,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header {
border-bottom: 1px solid rgba(33, 27, 22, 0.1) !important;
background: rgba(255, 253, 249, 0.98) !important;
color: var(--text-primary) !important;
backdrop-filter: blur(12px) !important;
}
body.template-index #shopify-section-header .site-header *,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header * {
color: var(--text-primary) !important;
text-shadow: none !important;
}
body.template-index .hero {
display: block !important;
min-height: clamp(460px, 58svh, 620px) !important;
height: clamp(460px, 58svh, 620px) !important;
}
body.template-index .hero__media {
order: initial !important;
position: absolute !important;
inset: 0 !important;
min-height: 100% !important;
}
body.template-index .hero__content {
order: initial !important;
min-height: clamp(460px, 58svh, 620px) !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 72px 18px 28px !important;
}
body.template-index .hero__copy {
max-width: 34ch !important;
justify-items: center !important;
text-align: center !important;
}
}
@media (max-width: 749px) {
body.template-index .hero__copy {
gap: 8px !important;
}
body.template-index .hero__copy .eyebrow {
font-size: 11px;
}
body.template-index .hero__copy h1 {
font-size: clamp(2.25rem, 12vw, 3.05rem) !important;
}
body.template-index .hero__copy p:not(.eyebrow) {
font-size: 14px !important;
line-height: 1.45;
}
body.template-index .hero__actions {
gap: 14px !important;
}
}
html,
body {
overflow-x: hidden !important;
}
body,
body.template-index {
padding-top: 0 !important;
}
#shopify-section-header .site-header,
body.template-index #shopify-section-header .site-header,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header,
body.template-index.has-scrolled #shopify-section-header .site-header,
body.template-index #shopify-section-header .site-header[data-scrolled="true"] {
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
z-index: 220 !important;
border-bottom: 1px solid rgba(33, 27, 22, 0.1) !important;
background: rgba(255, 253, 249, 0.98) !important;
color: var(--text-primary) !important;
box-shadow: none !important;
backdrop-filter: blur(14px) !important;
mix-blend-mode: normal !important;
}
#shopify-section-header .site-header *,
body.template-index #shopify-section-header .site-header *,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header *,
body.template-index.has-scrolled #shopify-section-header .site-header * {
color: var(--text-primary) !important;
text-shadow: none !important;
}
#shopify-section-header .site-header svg,
#shopify-section-header .site-header svg * {
fill: none !important;
stroke: currentColor !important;
}
#shopify-section-header .site-nav,
body.template-index:not(.has-scrolled) #shopify-section-header .site-nav,
body.template-index.has-scrolled #shopify-section-header .site-nav {
border-top-color: rgba(33, 27, 22, 0.08) !important;
background: transparent !important;
color: var(--text-secondary) !important;
}
body.template-collection #shopify-section-header {
position: sticky !important;
top: 0 !important;
z-index: 220 !important;
background: var(--surface-raised) !important;
}
body.template-collection #shopify-section-header .site-header {
position: relative !important;
top: auto !important;
}
body.template-collection #MainContent,
body.template-collection .main-content,
body.template-collection .collection-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.template-collection .collection-quickbar {
top: 106px !important;
}
#shopify-section-header .site-header .header-drawer__panel,
body.template-index #shopify-section-header .site-header .header-drawer__panel,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header .header-drawer__panel {
background: var(--surface-raised) !important;
color: var(--text-primary) !important;
text-shadow: none !important;
}
#shopify-section-header .site-header .header-drawer__panel *,
body.template-index #shopify-section-header .site-header .header-drawer__panel *,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header .header-drawer__panel * {
color: var(--text-primary) !important;
text-shadow: none !important;
}
#shopify-section-header .site-header .header-drawer__panel svg,
#shopify-section-header .site-header .header-drawer__panel svg * {
fill: none !important;
stroke: currentColor !important;
}
#shopify-section-header .site-header .header-drawer__secondary-link,
#shopify-section-header .site-header .header-drawer__tertiary a,
#shopify-section-header .site-header .header-drawer__footer a,
body.template-index #shopify-section-header .site-header .header-drawer__secondary-link,
body.template-index #shopify-section-header .site-header .header-drawer__tertiary a,
body.template-index #shopify-section-header .site-header .header-drawer__footer a {
color: var(--text-secondary) !important;
}
.luxury-search,
#shopify-section-header .luxury-search {
position: fixed !important;
inset: 0 !important;
z-index: 420 !important;
display: block;
width: 100vw !important;
min-height: 100svh !important;
overflow-y: auto !important;
background: var(--surface-canvas) !important;
color: var(--text-primary) !important;
}
.luxury-search[hidden],
#shopify-section-header .luxury-search[hidden] {
display: none !important;
}
.luxury-search *,
#shopify-section-header .luxury-search * {
color: var(--text-primary) !important;
text-shadow: none !important;
}
.luxury-search__close,
#shopify-section-header .luxury-search__close {
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 1px solid var(--border-subtle) !important;
background: transparent !important;
color: var(--text-primary) !important;
}
.luxury-search__close .icon,
.luxury-search__submit .icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: currentColor !important;
stroke: currentColor !important;
}
.luxury-search__submit,
#shopify-section-header .luxury-search__submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--brand-primary) !important;
color: var(--surface-raised) !important;
}
.luxury-search__submit *,
#shopify-section-header .luxury-search__submit * {
color: var(--surface-raised) !important;
}
#shopify-section-header .luxury-search .luxury-search__submit,
#shopify-section-header .luxury-search .luxury-search__submit *,
#shopify-section-header .luxury-search .luxury-search__submit svg,
#shopify-section-header .luxury-search .luxury-search__submit svg * {
color: var(--surface-raised) !important;
stroke: currentColor !important;
}
body.template-index #shopify-section-header .site-header .luxury-search .luxury-search__submit,
body.template-index #shopify-section-header .site-header .luxury-search .luxury-search__submit *,
body.template-index #shopify-section-header .site-header .luxury-search .luxury-search__submit svg,
body.template-index #shopify-section-header .site-header .luxury-search .luxury-search__submit svg * {
color: var(--surface-raised) !important;
stroke: currentColor !important;
}
body.template-index .main-content > .shopify-section:first-child,
body.template-index .hero {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.template-index .hero {
display: block !important;
height: auto !important;
min-height: clamp(560px, calc(100svh - 118px), 820px) !important;
overflow: hidden !important;
background: var(--brand-deep) !important;
color: var(--surface-raised) !important;
}
body.template-index .hero::after {
display: block !important;
background:
linear-gradient(180deg, rgba(12, 10, 8, 0.18), rgba(12, 10, 8, 0.12) 36%, rgba(12, 10, 8, 0.62)),
linear-gradient(90deg, rgba(12, 10, 8, 0.22), rgba(12, 10, 8, 0.02)) !important;
}
body.template-index .hero__media,
body.template-index .hero__media img,
body.template-index .hero__placeholder {
width: 100% !important;
height: 100% !important;
}
body.template-index .hero__content {
min-height: clamp(560px, calc(100svh - 118px), 820px) !important;
color: var(--surface-raised) !important;
padding: clamp(72px, 9vw, 128px) var(--gutter) clamp(42px, 7vh, 78px) !important;
}
body.template-index .hero__copy,
body.template-index .hero__copy h1,
body.template-index .hero__copy p {
color: var(--surface-raised) !important;
}
body.template-index .hero__copy h1 {
font-size: clamp(2.8rem, 5vw, 4.65rem) !important;
line-height: 1 !important;
}
[class*="ai-luxury-hero__wordmark"] {
display: none !important;
}
@media (max-width: 989px) {
body,
body.template-index {
padding-top: 0 !important;
}
#shopify-section-header .site-header__inner {
min-height: 66px !important;
}
body.template-collection .collection-quickbar {
top: 66px !important;
}
body.template-index .hero,
body.template-index .hero__content {
height: auto !important;
min-height: clamp(500px, calc(100svh - 66px), 700px) !important;
}
body.template-index .hero__content {
padding: 72px 18px 32px !important;
}
.luxury-search__top {
min-height: 72px !important;
}
.luxury-search__form {
grid-template-columns: 1fr !important;
border-radius: 28px !important;
}
.luxury-search__submit {
width: 100%;
}
}
/* Force readable contrast on luxury search drawer surface */
.luxury-search,
#shopify-section-header .luxury-search,
.luxury-search-page {
--text-secondary: #1a1a1a;
--text-muted: #444;
--surface-ink: #1a1a1a;
background: #f7f2ea !important;
}
.luxury-search__brand,
.luxury-search__brand svg,
.luxury-search__brand svg * {
color: #1a1a1a !important;
fill: #1a1a1a !important;
}
.luxury-search__trends {
color: #1a1a1a !important;
}
.luxury-search__trends span {
color: #444 !important;
}
.luxury-search__trends a {
color: #1a1a1a !important;
}
.luxury-search-page__header,
.luxury-search-page__header * {
color: #1a1a1a !important;
}
/* Premium typography refresh */
:root {
--font-display: "Libre Bodoni", "Bodoni 72", "Didot", "Times New Roman", Georgia, serif;
--font-serif: "Cormorant Garamond", "Libre Bodoni", Georgia, serif;
--font-body: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
--font-ui: var(--font-body);
--font-urdu: "Noto Nastaliq Urdu", serif;
--tracking-ui: 0;
--tracking-wide: 0;
}
html,
body {
font-family: var(--font-body) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-size: 17px !important;
line-height: 1.66 !important;
}
.h1,
.h2,
.h3,
h1,
h2,
h3,
.section-header h1,
.section-header h2,
.collection-heading h1,
.product-info__title,
.luxury-search-page__header h1 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.04 !important;
text-transform: none !important;
}
h1,
.h1,
.collection-heading h1 {
font-size: 5.2rem !important;
}
h2,
.h2,
.section-header h1,
.section-header h2 {
font-size: 3.65rem !important;
}
h3,
.h3 {
font-size: 1.85rem !important;
}
p,
li,
dd,
blockquote,
.rte,
.prose,
.section-header p,
.hero__copy p,
.campaign-banner__copy p:not(.eyebrow),
.accordion__content {
font-family: var(--font-body) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1.68 !important;
}
.site-header__brand,
.luxury-search__brand,
.site-footer__brand,
.site-footer__brand-name,
.site-footer__wordmark {
font-family: var(--font-display) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-transform: uppercase;
}
.site-header__brand {
font-size: 1.42rem !important;
}
.site-nav,
.site-nav a,
.site-header__text-link,
.header-drawer__footer a,
.collection-switcher summary,
.collection-sort label,
.filter-drawer summary,
.eyebrow,
.button,
.btn,
.shopify-payment-button__button,
.product-form .button,
.luxury-search__submit,
.form-row label,
.accordion summary,
label,
.site-footer__column h3 {
font-family: var(--font-ui) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.eyebrow,
[class*="eyebrow"],
.category-card__badge,
.luxury-search__trends span {
font-size: 0.76rem !important;
line-height: 1.35 !important;
text-transform: uppercase;
}
.button,
.btn,
.shopify-payment-button__button,
.product-form .button,
.luxury-search__submit {
font-size: 0.86rem !important;
min-height: 46px;
}
.hero__copy h1,
body.template-index .hero__copy h1 {
max-width: 12ch !important;
font-family: var(--font-display) !important;
font-size: 5.8rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 0.94 !important;
text-transform: none !important;
}
.hero__copy p,
body.template-index .hero__copy p:not(.eyebrow) {
max-width: 39ch !important;
font-size: 1.16rem !important;
line-height: 1.6 !important;
}
body.template-index .hero .hero__actions .button,
body.template-index .hero .hero__actions .button:first-child,
body.template-index .hero .hero__actions .button--secondary {
font-family: var(--font-ui) !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
body.template-index .section-header h1,
body.template-index .section-header h2 {
font-family: var(--font-display) !important;
font-size: 4rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.02 !important;
}
body.template-index .category-card__content h3,
.category-card__content h3,
.category-card h3,
.product-card__title,
.product-tile__title,
.card__title,
.product-item__title,
#client-services .luxury-service-card__copy h3,
.cart-item__title,
.cart__item-title {
font-family: var(--font-serif) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.12 !important;
text-transform: none !important;
}
body.template-index .category-card__content h3,
.category-card__content h3,
.category-card h3,
#client-services .luxury-service-card__copy h3 {
font-size: 2rem !important;
}
.product-card__title,
.product-tile__title,
.card__title,
.product-item__title {
font-size: 1.2rem !important;
}
.product-info__title,
.product__title,
.product-single__title {
max-width: 18ch;
font-family: var(--font-display) !important;
font-size: 4.2rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-transform: none !important;
}
.price,
.money,
.product-card__meta,
.product-card .price,
.product__price,
.product-single__price {
font-family: var(--font-body) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
strong,
b {
font-weight: 600;
}
@media (max-width: 989px) {
h1,
.h1,
.collection-heading h1 {
font-size: 4rem !important;
}
h2,
.h2,
.section-header h1,
.section-header h2 {
font-size: 3rem !important;
}
h3,
.h3 {
font-size: 1.65rem !important;
}
.site-header__brand {
font-size: 1.12rem !important;
}
.hero__copy h1,
body.template-index .hero__copy h1 {
font-size: 4.4rem !important;
}
body.template-index .section-header h1,
body.template-index .section-header h2 {
font-size: 3.15rem !important;
}
.product-info__title,
.product__title,
.product-single__title {
font-size: 3.15rem !important;
}
}
@media (max-width: 749px) {
body {
font-size: 16px !important;
}
.site-header__brand {
font-size: 1rem !important;
}
.hero__copy h1,
body.template-index .hero__copy h1 {
font-size: 3.15rem !important;
line-height: 0.98 !important;
}
body.template-index .section-header h1,
body.template-index .section-header h2,
.section-header h1,
.section-header h2 {
font-size: 2.25rem !important;
}
body.template-index .category-card__content h3,
.category-card__content h3,
.category-card h3 {
font-size: 1.42rem !important;
}
.button,
.btn,
.shopify-payment-button__button,
.product-form .button,
.luxury-search__submit {
font-size: 0.82rem !important;
}
}
/* Mobile viewport cleanup: fixed header overlap, wordmark fit, and product rail artifacts */
@media (max-width: 989px) {
#shopify-section-header {
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
z-index: 220 !important;
background: var(--surface-raised) !important;
}
#shopify-section-header .site-header,
body.template-index #shopify-section-header .site-header,
body.template-index:not(.has-scrolled) #shopify-section-header .site-header,
body.template-index.has-scrolled #shopify-section-header .site-header {
position: relative !important;
top: auto !important;
border-bottom: 1px solid rgba(33, 27, 22, 0.1) !important;
background: rgba(255, 253, 249, 0.98) !important;
}
body,
body.template-index {
padding-top: 0 !important;
}
}
@media (max-width: 749px) {
#shopify-section-header .site-header__inner {
width: 100% !important;
min-height: 64px !important;
grid-template-columns: 80px minmax(0, 1fr) 80px !important;
gap: 8px !important;
padding-inline: 16px !important;
}
#shopify-section-header .site-header__left,
#shopify-section-header .site-header__actions {
gap: 6px !important;
}
#shopify-section-header .site-header__brand {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
overflow: visible !important;
color: var(--text-primary) !important;
font-family: "Tenor Sans", var(--font-ui) !important;
font-size: 0.92rem !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
#shopify-section-header .site-header__logo {
width: 100% !important;
max-width: 188px !important;
max-height: 32px !important;
object-fit: contain !important;
}
#shopify-section-header .site-header__text-link,
#shopify-section-header .header-icon {
width: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
height: 36px !important;
justify-content: center !important;
padding: 0 !important;
}
#shopify-section-header .site-header__text-link span {
display: none !important;
}
body.template-index .product-link-edit .product-grid--manual,
body.template-index .featured-products .product-grid {
display: flex !important;
width: 100% !important;
gap: 0 !important;
grid-template-columns: none !important;
grid-auto-columns: auto !important;
grid-auto-flow: initial !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-inline: contain;
padding-inline: 0 !important;
padding-bottom: 0 !important;
scroll-padding-inline: 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
body.template-index .product-link-edit .product-grid--manual::-webkit-scrollbar,
body.template-index .featured-products .product-grid::-webkit-scrollbar {
display: none;
}
body.template-index .product-link-edit .product-grid--manual > *,
body.template-index .featured-products .product-grid > * {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
scroll-snap-align: start;
scroll-snap-stop: always;
}
body.template-index .product-link-edit .product-card,
body.template-index .featured-products .product-card {
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
body.template-index .product-card__content {
min-width: 0 !important;
padding-top: 10px !important;
}
body.template-index .product-card__title {
min-height: 0 !important;
font-size: 1rem !important;
line-height: 1.28 !important;
overflow-wrap: anywhere;
}
body.template-index .product-card__meta,
body.template-index .product-card .price,
body.template-index .price {
font-size: 0.88rem !important;
line-height: 1.35 !important;
}
}
@media (max-width: 380px) {
#shopify-section-header .site-header__inner {
grid-template-columns: 72px minmax(0, 1fr) 72px !important;
padding-inline: 12px !important;
}
#shopify-section-header .site-header__brand {
font-size: 0.82rem !important;
letter-spacing: 0.06em !important;
}
}
:root {
--font-display: "Cormorant Garamond", "Libre Bodoni", "Times New Roman", Georgia, serif;
--font-serif: "Cormorant Garamond", "Libre Bodoni", "Times New Roman", Georgia, serif;
--font-body: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
--font-ui: var(--font-body);
--tracking-ui: 0;
--tracking-wide: 0;
}
html,
body {
font-family: var(--font-body) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
h1,
.h1,
h2,
.h2,
.section-header h1,
.section-header h2,
.collection-heading h1,
.campaign-banner__copy h2,
.hero__copy h1,
.product-info__title,
.product__title,
.product-single__title,
.luxury-search-page__header h1 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.02 !important;
text-transform: none !important;
}
p,
li,
dd,
blockquote,
.rte,
.prose,
.section-header p,
.hero__copy p,
.campaign-banner__copy p:not(.eyebrow),
.accordion__content {
font-family: var(--font-body) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
#shopify-section-header .site-header__brand,
.luxury-search__brand,
.site-footer__brand,
.site-footer__brand-name,
.site-footer__wordmark {
font-family: "Tenor Sans", var(--font-display) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
.site-nav,
.site-nav a,
.site-header__text-link,
.header-drawer__footer a,
.collection-switcher summary,
.collection-sort label,
.filter-drawer summary,
.button,
.btn,
.shopify-payment-button__button,
.product-form .button,
.luxury-search__submit,
.form-row label,
.accordion summary,
label {
font-family: var(--font-body) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.eyebrow,
[class*="eyebrow"],
.category-card__badge,
.luxury-search__trends span {
font-family: var(--font-body) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.category-card__content h3,
.product-card__title,
.product-tile__title,
.card__title,
.product-item__title,
.luxury-service-card__copy h3 {
font-family: var(--font-serif) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.08 !important;
text-transform: none !important;
}
.lookbook-section {
padding-block: 74px 88px;
}
.lookbook-section .page-width {
max-width: 1500px;
}
.lookbook-section__header {
display: grid !important;
align-items: center !important;
justify-items: center !important;
width: min(100%, 980px);
margin: 0 auto 46px !important;
gap: 10px !important;
text-align: center !important;
}
.lookbook-section__header > div {
display: grid;
justify-items: center;
width: 100%;
text-align: center;
}
.lookbook-section__header .eyebrow {
margin: 0 auto 4px !important;
color: var(--text-secondary) !important;
}
.lookbook-section__header h1,
.lookbook-section__header h2 {
width: 100%;
max-width: 920px;
margin: 0 auto !important;
font-size: 5rem !important;
font-weight: 500 !important;
line-height: 1.02 !important;
text-align: center !important;
}
.lookbook-section__header > p {
max-width: 640px;
margin: 8px auto 0 !important;
text-align: center !important;
}
.lookbook-section .grid--3 {
gap: 30px;
justify-content: center;
}
.lookbook-section .category-card__content h3 {
font-size: 1.45rem !important;
}
@media (max-width: 989px) {
.lookbook-section {
padding-block: 64px 72px;
}
.lookbook-section__header {
margin-bottom: 34px !important;
}
.lookbook-section__header h1,
.lookbook-section__header h2 {
font-size: 3.7rem !important;
}
.lookbook-section .grid--3 {
gap: 18px;
}
}
@media (max-width: 749px) {
.lookbook-section {
padding-block: 52px 60px;
}
.lookbook-section__header {
width: 100%;
margin-bottom: 28px !important;
}
.lookbook-section__header h1,
.lookbook-section__header h2 {
max-width: 11ch;
font-size: 2.65rem !important;
line-height: 1.04 !important;
}
.lookbook-section .grid--3 {
grid-template-columns: 1fr !important;
gap: 14px;
}
}
.not-found-page {
min-height: 68vh;
background:
linear-gradient(180deg, rgba(255, 253, 249, 0.82), rgba(247, 242, 234, 0.96)),
var(--surface-canvas);
}
.not-found-page__inner {
display: grid;
align-items: center;
gap: 56px;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.not-found-page__copy {
display: grid;
gap: 22px;
max-width: 640px;
}
.not-found-page__copy h1 {
max-width: 12ch;
font-size: 3.1rem;
}
.not-found-page__copy > p:not(.eyebrow) {
max-width: 58ch;
color: var(--text-secondary);
}
.not-found-page__search {
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1fr) auto;
max-width: 620px;
}
.not-found-page__search .input {
min-height: 48px;
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
color: var(--text-primary);
padding: 0 16px;
}
.not-found-page__quicklinks {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.not-found-page__quicklinks span {
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
}
.not-found-page__quicklinks a {
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: rgba(255, 253, 249, 0.72);
color: var(--text-secondary);
padding: 7px 12px;
font-size: var(--text-sm);
}
.not-found-page__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.not-found-page__recommendations {
display: grid;
gap: 22px;
min-width: 0;
}
.not-found-page__recommendations-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 14px;
}
.not-found-page__recommendations-header h2 {
font-size: 1.8rem;
}
.product-grid--404 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.not-found-page__fallback-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.not-found-page__fallback-grid a {
display: grid;
gap: 10px;
color: var(--text-primary);
}
.not-found-page__fallback-grid .fabric-placeholder {
min-height: 220px;
}
.not-found-page__fallback-grid span {
font-family: var(--font-display);
font-size: 1.25rem;
}
.site-footer__columns {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
.site-footer__bottom {
flex-wrap: wrap;
}
@media (max-width: 989px) {
.not-found-page__inner {
align-items: start;
grid-template-columns: 1fr;
}
.not-found-page__copy h1 {
max-width: 14ch;
font-size: 2.45rem;
}
}
@media (max-width: 749px) {
.not-found-page {
min-height: 0;
}
.not-found-page__inner {
gap: 38px;
}
.not-found-page__copy {
gap: 18px;
}
.not-found-page__copy h1 {
font-size: 2.1rem;
}
.not-found-page__search {
grid-template-columns: 1fr;
}
.not-found-page__search .button {
width: 100%;
}
.product-grid--404,
.not-found-page__fallback-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.not-found-page__fallback-grid .fabric-placeholder {
min-height: 160px;
}
}
.form-row__label-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.text-button {
border: 0;
background: transparent;
color: var(--surface-ink);
padding: 0;
font-size: var(--text-sm);
text-decoration: underline;
text-underline-offset: 4px;
}
.product-custom-measurements textarea,
.product-form textarea.input {
min-height: 108px;
border-radius: 8px;
padding: 12px 14px;
resize: vertical;
}
.delivery-estimator__result {
color: var(--text-secondary);
font-size: var(--text-sm);
}
.size-guide-link {
width: max-content;
border: 0;
background: transparent;
color: var(--surface-ink);
padding: 0;
}
.size-guide-modal {
width: min(720px, calc(100vw - 32px));
max-width: none;
border: 0;
background: transparent;
padding: 0;
}
.size-guide-modal::backdrop {
background: rgba(23, 21, 19, 0.48);
}
.size-guide-modal[open] {
display: grid;
place-items: center;
}
.size-guide-modal__panel {
display: grid;
gap: 18px;
width: 100%;
max-height: min(82vh, 720px);
overflow: auto;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--surface-raised);
color: var(--text-primary);
padding: 24px;
}
.size-guide-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.size-guide-modal__header h2 {
font-size: 1.65rem;
}
.size-guide-modal__close {
display: grid;
width: 40px;
min-height: 40px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: transparent;
color: var(--text-primary);
}
.size-guide-modal__scroll {
overflow-x: auto;
}
.size-guide-table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: var(--text-sm);
}
.size-guide-table th,
.size-guide-table td {
border-bottom: 1px solid var(--border-subtle);
padding: 10px 8px;
text-align: left;
white-space: nowrap;
}
.size-guide-table th {
color: var(--text-muted);
font-weight: 600;
}
.sticky-mobile-atc__form {
display: grid;
width: 100%;
align-items: center;
gap: 10px;
grid-template-columns: minmax(74px, auto) minmax(0, 1fr) auto;
}
.sticky-mobile-atc__form .select {
width: 100%;
min-height: 42px;
padding-inline: 12px;
}
.sticky-mobile-atc__form .button {
min-height: 42px;
padding-inline: 14px;
}
@media (max-width: 749px) {
.sticky-mobile-atc {
padding: 10px 12px;
}
.sticky-mobile-atc__form {
grid-template-columns: minmax(0, 1fr) auto;
}
.sticky-mobile-atc__form .price {
grid-column: 1 / -1;
}
.sticky-mobile-atc__form .button span {
display: none;
}
}
.photo-reviews__grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.photo-review-card {
display: grid;
gap: 14px;
}
.photo-review-card__media {
overflow: hidden;
background: var(--surface-raised);
border-radius: 8px;
aspect-ratio: 4 / 5;
}
.photo-review-card__media img,
.photo-review-card__media .fabric-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-review-card__copy {
display: grid;
gap: 8px;
}
.photo-review-card__rating {
color: var(--brand-accent);
font-size: var(--text-sm);
font-weight: 700;
}
.photo-review-card blockquote {
margin: 0;
color: var(--text-primary);
font-family: var(--font-display);
font-size: 1.28rem;
line-height: 1.25;
}
.photo-review-card cite {
color: var(--text-secondary);
font-size: var(--text-sm);
font-style: normal;
}
.newsletter-popup[hidden] {
display: none;
}
.newsletter-popup {
position: fixed;
inset: 0;
z-index: 500;
display: grid;
place-items: end center;
padding: 18px;
}
.newsletter-popup__scrim {
position: absolute;
inset: 0;
background: rgba(23, 21, 19, 0.38);
}
.newsletter-popup__panel {
position: relative;
z-index: 1;
display: grid;
gap: 14px;
width: min(100%, 460px);
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--surface-raised);
color: var(--text-primary);
padding: 28px;
box-shadow: var(--shadow-soft);
}
.newsletter-popup__panel h2 {
font-size: 1.9rem;
}
.newsletter-popup__panel p:not(.eyebrow) {
color: var(--text-secondary);
}
.newsletter-popup__form {
display: grid;
gap: 10px;
}
.newsletter-popup__close {
position: absolute;
top: 12px;
right: 12px;
display: grid;
width: 36px;
min-height: 36px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: transparent;
}
.appointment-booking__inner {
display: grid;
align-items: start;
gap: 42px;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.appointment-booking__inner h1 {
max-width: 12ch;
font-size: 3rem;
}
.appointment-booking__inner > div:first-child p:not(.eyebrow) {
max-width: 58ch;
margin-top: 16px;
color: var(--text-secondary);
}
.appointment-booking__panel {
display: grid;
gap: 2px;
}
.appointment-booking__item {
display: grid;
gap: 18px;
grid-template-columns: 42px minmax(0, 1fr);
border: 1px solid var(--border-subtle);
background: var(--surface-raised);
padding: 22px;
}
.appointment-booking__item span {
display: grid;
width: 34px;
min-height: 34px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--text-secondary);
font-size: var(--text-sm);
}
.appointment-booking__item h2 {
font-size: 1.2rem;
}
.appointment-booking__item p {
margin-top: 6px;
color: var(--text-secondary);
}
.appointment-booking__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.header-drawer__collections {
display: grid;
gap: 8px;
border-top: 1px solid var(--border-subtle);
padding: 18px 0;
}
.header-drawer__collections a {
color: var(--text-secondary);
font-size: var(--text-sm);
}
.footer-localization {
min-width: min(100%, 220px);
}
.footer-localization .select {
min-height: 36px;
border-color: var(--border-subtle);
color: var(--text-secondary);
font-size: var(--text-sm);
padding: 0 12px;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding-block: 18px 0;
color: var(--text-muted);
font-size: var(--text-sm);
}
.breadcrumbs a {
color: var(--text-secondary);
text-decoration: underline;
text-underline-offset: 4px;
}
.collection-seo-content {
display: grid;
gap: 18px;
border-top: 1px solid var(--border-subtle);
margin-top: 54px;
padding-block: 42px 70px;
}
.collection-seo-content h2 {
max-width: 18ch;
font-size: 2rem;
}
.collection-seo-content .rte-page {
max-width: 760px;
color: var(--text-secondary);
}
@media (max-width: 989px) {
.photo-reviews__grid,
.appointment-booking__inner {
grid-template-columns: 1fr;
}
.appointment-booking__inner h1 {
max-width: 14ch;
font-size: 2.4rem;
}
}
@media (max-width: 749px) {
.photo-reviews__grid {
gap: 22px;
}
.newsletter-popup {
place-items: end center;
padding: 12px;
}
.newsletter-popup__panel {
padding: 24px 18px;
}
.appointment-booking__item {
grid-template-columns: 1fr;
}
}