/* =========================================================================
Ardori design system
Palette, type scale and geometry read off ardorilabel.com.
========================================================================= */
:root {
--ard-cream: #f7f5f2;
--ard-cream-2: #faf8f5;
--ard-cream-3: #f5f2ed;
--ard-cream-4: #f9f7f4;
--ard-navy: #1a2332;
--ard-navy-deep: #18243e;
--ard-ink: #2c2824;
--ard-ink-soft: #7a7570;
--ard-line: #e4dfd7;
--ard-light: #e8e4df;
--ard-light-2: #f5f3f0;
--ard-gold: #c7a46b;
--ard-copper: #b5734d;
--ard-serif: "Cormorant Garamond", "Times New Roman", serif;
--ard-sans: "Montserrat", -apple-system, "Segoe UI", sans-serif;
--ard-wrap: 1400px;
--ard-gut: 64px;
--ard-sec: 112px;
--ard-header: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: #fff;
color: var(--ard-ink);
font-family: var(--ard-sans);
font-size: 15px;
font-weight: 300;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
font-family: var(--ard-serif);
font-weight: 400;
color: var(--ard-ink);
margin: 0;
line-height: 1.18;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.skip-link:focus {
position: fixed; top: 10px; left: 10px;
width: auto; height: auto; clip: auto;
background: #fff; padding: 10px 18px; z-index: 999;
}
/* ---------- shared building blocks ---------------------------------- */
/* One gutter for every wrapper. The variants change max-width only — seven
different left edges (24/34/50/68/84/100/184px) had the shop grid sitting
16px outboard of the footer directly beneath it. */
.ard-wrap,
.ard-wrap--collection,
.ard-wrap--narrow,
.ard-wrap--md,
.ard-wrap--full,
.ard-wrap--shop { width: 100%; margin: 0 auto; padding: 0 var(--ard-gut); }
.ard-wrap { max-width: var(--ard-wrap); }
/* Section shells measured off the reference, which varies them deliberately. */
.ard-wrap--collection { max-width: 1400px; }
.ard-wrap--narrow { max-width: 800px; }
.ard-wrap--md { max-width: 1200px; }
.ard-wrap--full { max-width: none; }
.ard-sec { padding: var(--ard-sec) 0; position: relative; }
.ard-sec--cream { background: var(--ard-cream); }
.ard-sec--cream-2 { background: var(--ard-cream-2); }
.ard-sec--cream-3 { background: var(--ard-cream-3); }
.ard-sec--cream-4 { background: var(--ard-cream-4); }
.ard-sec--navy { background: var(--ard-navy); color: var(--ard-light); }
.ard-sec--navy h1, .ard-sec--navy h2, .ard-sec--navy h3 { color: var(--ard-light-2); }
/* The reference paints these patterns as real artwork, not a faint tint. */
.ard-pattern::before {
content: "";
position: absolute; inset: 0;
background: url(../img/philosophy-pattern.jpg) 0 0 / auto repeat;
opacity: .5;
pointer-events: none;
}
.ard-pattern > * { position: relative; z-index: 1; }
/* Promise and testimonials sit on the navy artwork at full strength. */
.ard-pattern--cover::before {
background: url(../img/navy-pattern-bg.jpg) center / cover no-repeat;
opacity: 1;
}
.ard-eyebrow {
font-family: var(--ard-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: 3.6px;
text-transform: uppercase;
color: var(--ard-gold);
margin: 0 0 18px;
}
.ard-eyebrow--ink { color: var(--ard-ink-soft); }
.ard-eyebrow--slate { color: #8a9aae; letter-spacing: 4.2px; }
.ard-eyebrow--wide { letter-spacing: 4.2px; color: #c9a86c; }
.ard-star { color: var(--ard-gold); }
.ard-h2 { font-size: 36px; font-style: italic; letter-spacing: normal; line-height: 1.5; }
.ard-h2--upright { font-style: normal; letter-spacing: 1px; }
.ard-h2--30 { font-size: 30px; line-height: 1.25; color: #3d3530; }
.ard-h2--44 { font-size: 44px; line-height: 1.2; }
.ard-h2--48 { font-size: 48px; }
.ard-lede {
font-family: var(--ard-serif);
font-size: 16px;
color: var(--ard-ink-soft);
max-width: 60ch;
margin: 14px 0 0;
}
.ard-sec--navy .ard-lede { color: rgba(232, 228, 223, .74); }
.ard-center { text-align: center; }
.ard-center .ard-lede { margin-left: auto; margin-right: auto; }
/* buttons */
.ard-btn {
display: inline-block;
font-family: var(--ard-sans);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 2.4px;
text-transform: uppercase;
text-align: center;
padding: 16px 40px;
border: 1px solid transparent;
background: var(--ard-light);
color: #1a1a1a;
cursor: pointer;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.ard-btn:hover { opacity: .9; }
.ard-btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, .3);
color: #fff;
}
.ard-btn--ghost:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
/* Craft panel CTA: slate border, wider tracking, brightness hover. */
.ard-btn--slate {
background: transparent;
border-color: #4a5568;
color: #fff;
letter-spacing: 3px;
}
.ard-btn--slate:hover { opacity: 1; filter: brightness(1.1); }
/* Philosophy CTA: solid cream border, py-3 px-8 geometry. */
.ard-btn--story {
background: transparent;
border-color: #f5f3f0;
color: #f5f3f0;
padding: 12px 32px;
}
.ard-btn--story:hover { opacity: 1; filter: brightness(1.25) contrast(1.1); }
/* Testimonials CTA: gold border. */
.ard-btn--gold {
background: transparent;
border-color: #c9a86c;
color: var(--ard-light);
}
.ard-btn--gold:hover { opacity: 1; background: rgba(201, 168, 108, .12); }
.ard-btn--ink {
background: var(--ard-navy);
color: var(--ard-light-2);
}
.ard-btn--ink:hover { background: #101724; }
.ard-btn--outline-ink {
background: transparent;
border-color: var(--ard-ink);
color: var(--ard-ink);
}
.ard-btn--outline-ink:hover { background: var(--ard-ink); color: var(--ard-cream); }
.ard-link {
display: inline-block;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 1.8px;
text-transform: uppercase;
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
transition: opacity .25s ease;
}
.ard-link:hover { opacity: .7; }
.ard-link--lg { font-size: 13px; letter-spacing: 2.6px; }
/* =========================================================================
Header
========================================================================= */
.ard-header {
position: sticky; top: 0; z-index: 60;
background: var(--ard-navy);
color: var(--ard-light);
transition: background .3s ease;
}
.ard-header.is-overlay {
position: fixed; left: 0; right: 0;
background: transparent;
}
.ard-header.is-overlay.is-stuck { background: rgba(26, 35, 50, .93); backdrop-filter: blur(6px); }
.ard-header__inner {
/* same max-width as .ard-wrap so the header's content edge lines up with
everything beneath it — it was 64px against the page's 84px */
max-width: var(--ard-wrap); margin: 0 auto;
padding: 0 var(--ard-gut);
height: var(--ard-header);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.ard-nav { display: flex; align-items: center; gap: 30px; }
.ard-nav--right { justify-content: flex-end; gap: 22px; }
.ard-nav a {
font-size: 11px;
font-weight: 400;
letter-spacing: 1.98px;
text-transform: uppercase;
color: var(--ard-light);
opacity: .88;
transition: opacity .22s ease;
}
.ard-nav a:hover { opacity: 1; }
.ard-brand img { width: 30px; height: auto; }
.ard-icon-btn {
background: none; border: 0; padding: 0;
color: var(--ard-light);
cursor: pointer;
display: inline-flex; align-items: center;
position: relative;
opacity: .88;
}
.ard-icon-btn:hover { opacity: 1; }
.ard-cart-count {
position: absolute; top: -6px; right: -9px;
min-width: 16px; height: 16px;
border-radius: 999px;
background: var(--ard-gold);
color: #16202f;
font-size: 10px; font-weight: 600;
line-height: 16px; text-align: center;
display: none;
}
.ard-cart-count.is-on { display: block; }
.ard-burger { display: none; flex-direction: column; gap: 5px; }
.ard-burger span { display: block; width: 20px; height: 1px; background: currentColor; }
/* Search — a band that drops from the top of the page, the way storefront
search behaves everywhere else. The outer element is the click-away scrim
(the z-index still clears the tab bar's 90); the band is its child. */
.ard-search {
position: fixed; inset: 0; z-index: 120;
background: rgba(12, 17, 26, .38);
}
.ard-search__bar {
background: var(--ard-navy, #1a2332);
border-bottom: 1px solid rgba(232, 228, 223, .12);
box-shadow: 0 24px 48px -12px rgba(10, 14, 22, .5);
animation: ard-search-drop .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ard-search-drop {
from { transform: translateY(-16px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.ard-search__inner { width: min(720px, 92vw); margin: 0 auto; position: relative; padding: 30px 0 32px; }
.ard-search form {
display: flex; align-items: center; gap: 14px;
border-bottom: 1px solid rgba(232, 228, 223, .35);
padding-right: 44px; /* keeps the field clear of the close */
}
.ard-search__glass { flex: 0 0 auto; color: rgba(232, 228, 223, .55); }
.ard-search input {
flex: 1; background: none; border: 0; outline: none;
color: #fff; font-family: var(--ard-serif); font-size: 21px; padding: 13px 0;
}
.ard-search input::placeholder { color: rgba(232, 228, 223, .45); }
.ard-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ard-search button {
background: none; border: 0; color: var(--ard-light);
font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; cursor: pointer;
}
.ard-search button[type="submit"]:hover { color: #fff; }
/* live results under the field */
.ard-search__results { padding-top: 10px; }
.ard-search__results[hidden] { display: none; }
.ard-search__item {
display: flex; align-items: center; gap: 16px;
padding: 9px 8px; margin: 0 -8px;
}
.ard-search__item:hover, .ard-search__item:focus-visible { background: rgba(232, 228, 223, .08); }
.ard-search__item img { width: 46px; height: 46px; object-fit: cover; flex: 0 0 auto; }
.ard-search__item-name { font-family: var(--ard-serif); font-size: 16px; color: var(--ard-light); }
.ard-search__item-price { margin-left: auto; font-size: 13px; color: rgba(232, 228, 223, .6); }
.ard-search__all {
display: block; width: fit-content; margin: 6px auto 0; padding: 12px 8px 0;
font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: #c9a86c;
}
.ard-search__all:hover { color: #dcc08c; }
.ard-search__empty {
padding: 16px 0 2px; margin: 0;
font-family: var(--ard-serif); font-style: italic;
font-size: 15px; color: rgba(232, 228, 223, .55);
}
/* mobile drawer */
.ard-drawer { position: fixed; inset: 0; z-index: 95; background: rgba(12, 17, 26, .55); }
.ard-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(340px, 86vw);
background: var(--ard-navy);
color: var(--ard-light);
padding: 84px 34px 40px;
display: flex; flex-direction: column; gap: 30px;
}
.ard-drawer nav { display: flex; flex-direction: column; gap: 20px; }
.ard-drawer nav a { font-family: var(--ard-serif); font-size: 24px; }
.ard-drawer__close {
position: absolute; top: 24px; right: 28px;
background: none; border: 0; color: var(--ard-light);
font-size: 32px; line-height: 1; cursor: pointer;
}
.ard-drawer__meta {
margin-top: auto; display: flex; flex-direction: column; gap: 8px;
font-size: 12px; letter-spacing: 1px; opacity: .7;
}
/* =========================================================================
Hero
========================================================================= */
.ard-hero {
position: relative;
height: 100vh;
min-height: 520px;
overflow: hidden;
color: #fff;
padding: 0;
}
.ard-hero__bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 64% 58%;
}
.ard-hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(
rgba(10, 14, 20, .45) 0%,
rgba(10, 14, 20, .3) 35%,
rgba(10, 14, 20, .45) 65%,
rgba(10, 14, 20, .55) 100%);
}
.ard-hero__stage {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column;
align-items: flex-start; justify-content: center;
padding: 0 32px 0 115.2px;
}
.ard-hero__inner { width: 100%; max-width: 560px; }
.ard-hero h1 {
font-size: clamp(40px, 5.4vw, 64px);
letter-spacing: 1.6px;
line-height: 1.1;
color: var(--ard-light);
margin: 0 0 24px;
}
.ard-hero p {
font-family: var(--ard-serif);
font-size: 20px;
font-weight: 300;
line-height: 32px;
color: var(--ard-light);
margin-bottom: 40px;
}
.ard-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }
/* =========================================================================
Collection index (home)
========================================================================= */
.ard-collection__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.ard-collection__list { margin: 34px 0 0; padding: 0; list-style: none; }
.ard-collection__list li { border-bottom: 1px solid rgba(44, 40, 36, .1); }
.ard-collection__list li:last-child { border-bottom: 0; }
.ard-collection__list a {
display: block; padding: 16px 0;
transition: padding-left .3s ease;
}
.ard-collection__list a:hover { padding-left: 10px; }
.ard-collection__name {
display: block;
font-size: 20px; font-weight: 300;
letter-spacing: .96px; text-transform: uppercase;
color: var(--ard-ink-soft);
transition: color .25s ease;
}
.ard-collection__list a:hover .ard-collection__name,
.ard-collection__list a.is-active .ard-collection__name { color: var(--ard-ink); font-weight: 500; }
.ard-collection__sub {
display: block;
font-family: var(--ard-serif); font-style: italic;
font-size: 13px; color: var(--ard-ink-soft);
}
.ard-collection__media { position: relative; aspect-ratio: 580 / 596; overflow: hidden; }
.ard-collection__media img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity .5s ease;
}
.ard-collection__media img.is-on { opacity: 1; }
/* =========================================================================
Philosophy band
========================================================================= */
.ard-philosophy { text-align: center; }
.ard-philosophy .ard-h2 {
font-size: 42px;
font-style: normal;
letter-spacing: 3.36px;
line-height: 1.3;
color: #f5f3f0;
margin: 6px 0 22px;
}
.ard-philosophy p {
max-width: 66ch; margin: 0 auto 30px;
color: rgba(232, 228, 223, .78);
line-height: 1.9;
}
/* =========================================================================
Product cards / grids
========================================================================= */
.ard-head-row {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 44px;
}
.ard-grid { display: grid; gap: 34px; }
.ard-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ard-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ard-grid--6 { grid-template-columns: repeat(6, 1fr); }
.ard-card { position: relative; }
.ard-card__media {
position: relative;
/* matches the 2:3 the bags were photographed at, so no frame is cropped */
aspect-ratio: 2 / 3;
overflow: hidden;
background: var(--ard-cream-3);
}
.ard-card__media img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: opacity .5s ease, transform .8s ease;
}
.ard-card__media img.ard-card__alt { opacity: 0; }
.ard-card:hover .ard-card__media img.ard-card__alt { opacity: 1; }
.ard-card:hover .ard-card__media img { transform: scale(1.03); }
.ard-card__cover { position: absolute; inset: 0; z-index: 3; }
.ard-card__body { padding-top: 18px; }
.ard-card__eyebrow {
font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft); margin: 0 0 6px;
}
.ard-card__name {
font-family: var(--ard-serif); font-size: 20px;
color: var(--ard-ink); margin: 0 0 4px;
}
.ard-card__price { font-size: 15px; color: var(--ard-copper); }
.ard-card__price del { color: var(--ard-ink-soft); margin-right: 8px; }
.ard-card__add {
position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4;
background: var(--ard-ink);
color: #fff;
border: 0;
font-family: var(--ard-sans);
font-size: 11px; font-weight: 400; letter-spacing: 1.65px; text-transform: uppercase;
padding: 12px 0;
cursor: pointer;
opacity: 0; transform: translateY(8px);
transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.ard-card:hover .ard-card__add,
.ard-card__add:focus-visible { opacity: 1; transform: none; }
.ard-card__add:hover { background: #1a1713; }
/* Touch screens have no hover: the bar stays visible. Width is part of the test
because plenty of touch devices still report `hover: hover`. */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
.ard-card__add { opacity: 1; transform: none; }
}
.ard-card__add.is-busy { opacity: 1; transform: none; pointer-events: none; }
/* =========================================================================
Curated collage
========================================================================= */
.ard-curated { position: relative; overflow: hidden; }
.ard-curated::before {
content: "";
position: absolute; inset: 0;
background: url(../img/curated-navy-pattern.jpg) center / 700px repeat;
opacity: .09;
}
.ard-curated > * { position: relative; z-index: 1; }
.ard-collage {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 24px;
margin-top: 56px;
}
.ard-collage__col { display: flex; flex-direction: column; gap: 24px; }
.ard-collage__col--left { padding-top: 32px; }
.ard-collage img { object-fit: cover; border-radius: 2px; }
.ard-collage__l1 { width: 180px; height: 120px; }
.ard-collage__l2 { width: 180px; height: 270px; }
.ard-collage__hero img { width: 320px; height: 480px; }
.ard-collage__detail { width: 130px; height: 195px; }
.ard-collage__tote { width: 180px; height: 120px; }
/* =========================================================================
Values
========================================================================= */
.ard-values__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 48px;
align-items: center;
}
.ard-values__media { aspect-ratio: 392 / 564; overflow: hidden; position: relative; }
.ard-values__media img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity .6s ease;
}
.ard-values__media img.is-on { opacity: 1; }
.ard-values__list { text-align: center; }
.ard-value { padding: 16px 0; }
.ard-value__icon {
width: 44px; height: 44px; margin: 0 auto 12px;
border: 1px solid rgba(44, 40, 36, .22);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--ard-ink-soft);
transition: border-color .3s ease, color .3s ease;
}
.ard-value__label {
font-family: var(--ard-serif);
font-size: 17px;
color: var(--ard-ink-soft);
transition: color .3s ease;
}
.ard-value.is-active .ard-value__icon { border-color: var(--ard-ink); color: var(--ard-ink); }
.ard-value.is-active .ard-value__label { color: var(--ard-ink); }
/* =========================================================================
Craft (video band)
========================================================================= */
.ard-craft { position: relative; min-height: 900px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 80px 0; }
.ard-craft__media { position: absolute; inset: 0; }
.ard-craft__media video, .ard-craft__media img {
width: 100%; height: 100%; object-fit: cover;
}
.ard-craft__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.ard-craft__panel {
position: relative; z-index: 2;
width: min(600px, 92vw);
background: rgb(30, 42, 58);
color: var(--ard-light);
padding: 80px 64px;
text-align: center;
}
.ard-craft__panel .ard-h2 { font-size: 44px; line-height: 1.2; margin-bottom: 22px; color: #fff; }
.ard-craft__panel p { color: rgba(232, 228, 223, .78); font-size: 14px; line-height: 1.85; }
.ard-craft__points { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 10px; }
.ard-craft__points li {
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: 13px; color: rgba(232, 228, 223, .9);
}
.ard-craft__points svg { color: var(--ard-gold); flex: none; }
/* =========================================================================
Styled marquee
========================================================================= */
.ard-marquee { overflow: hidden; margin-top: 52px; }
.ard-marquee__track {
display: flex; gap: 20px;
width: max-content;
animation: ard-scroll 46s linear infinite;
}
.ard-marquee:hover .ard-marquee__track { animation-play-state: paused; }
.ard-marquee__item { width: 260px; aspect-ratio: 2 / 3; flex: none; overflow: hidden; }
.ard-marquee__item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes ard-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ard-marquee__track { animation: none; }
}
/* =========================================================================
Promise strip
========================================================================= */
.ard-promise__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 40px; margin-top: 54px; }
.ard-promise__item { text-align: center; }
.ard-promise__icon {
width: 54px; height: 54px; margin: 0 auto 16px;
border-radius: 50%;
background: rgba(232, 228, 223, .09);
border: 1px solid rgba(232, 228, 223, .18);
display: flex; align-items: center; justify-content: center;
color: var(--ard-light);
}
.ard-promise__title { font-family: var(--ard-serif); font-size: 17px; color: var(--ard-light-2); margin: 0 0 4px; }
.ard-promise__note { font-size: 12px; color: rgba(232, 228, 223, .6); line-height: 1.6; }
/* =========================================================================
Pull quote
========================================================================= */
.ard-quote { background: var(--ard-cream-3); padding: 128px 0; }
.ard-quote p {
font-family: var(--ard-serif); font-style: italic;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.6;
color: var(--ard-ink);
max-width: 24ch;
margin: 0 auto;
text-align: center;
max-width: 34ch;
}
/* =========================================================================
Testimonials
========================================================================= */
.ard-testi__viewport { overflow: hidden; margin-top: 50px; }
.ard-testi__track { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.ard-testi__slide { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ard-testi__card {
background: rgba(232, 228, 223, .06);
border: 1px solid rgba(232, 228, 223, .12);
padding: 32px;
text-align: center;
}
.ard-testi__thumb { width: 92px; height: 92px; margin: 0 auto 14px; overflow: hidden; }
.ard-testi__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ard-testi__view {
display: inline-block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: rgba(232, 228, 223, .6); margin-bottom: 16px;
}
.ard-testi__stars { color: var(--ard-gold); letter-spacing: 3px; font-size: 12px; margin-bottom: 14px; }
.ard-testi__quote {
font-family: var(--ard-serif); font-style: italic;
font-size: 16px; line-height: 1.7;
color: rgba(245, 243, 240, .92);
margin-bottom: 18px;
}
.ard-testi__name { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ard-light); }
.ard-testi__city { font-size: 12px; color: rgba(232, 228, 223, .55); }
.ard-testi__dots { display: flex; justify-content: center; gap: 9px; margin: 34px 0 30px; }
.ard-testi__dots button {
width: 7px; height: 7px; border-radius: 50%; padding: 0;
border: 0; background: rgba(232, 228, 223, .3); cursor: pointer;
}
.ard-testi__dots button.is-active { background: var(--ard-light); }
/* =========================================================================
Instagram
========================================================================= */
.ard-insta__grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 44px 0 40px; }
.ard-insta__grid a { display: block; width: 225px; height: 400px; flex: none; overflow: hidden; }
.ard-insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ard-insta__grid a:hover img { transform: scale(1.05); }
.ard-insta__btn {
display: inline-flex; align-items: center; gap: 12px;
border: 1px solid #9a958f;
padding: 16px 40px;
color: #5a5550;
font-size: 12px; font-weight: 400; line-height: 1.5;
letter-spacing: 2.4px; text-transform: uppercase;
transition: all .3s ease;
}
.ard-insta__btn:hover { border-color: #3a3530; color: #2c2824; }
/* =========================================================================
Footer
========================================================================= */
.ard-footer { background: var(--ard-navy-deep); color: rgba(232, 228, 223, .8); padding: 76px 0 0; font-size: 13px; }
.ard-footer__inner {
max-width: var(--ard-wrap); margin: 0 auto; padding: 0 var(--ard-gut);
display: grid;
grid-template-columns: 1.25fr .8fr 1.5fr 1.2fr;
gap: 48px;
}
.ard-footer__brand img { width: 40px; margin-bottom: 22px; }
.ard-footer__brand p { line-height: 1.85; color: rgba(232, 228, 223, .62); }
.ard-footer h3 {
font-family: var(--ard-sans);
font-size: 11px; font-weight: 500; letter-spacing: 2.6px; text-transform: uppercase;
color: var(--ard-light); margin: 0 0 20px;
}
.ard-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ard-footer__split { grid-template-columns: 1fr 1fr; column-gap: 26px; }
.ard-footer a { color: rgba(232, 228, 223, .72); transition: color .22s ease; }
.ard-footer a:hover { color: #fff; }
.ard-footer__signup p { color: rgba(232, 228, 223, .62); margin-bottom: 16px; }
.ard-signup { display: flex; border-bottom: 1px solid rgba(232, 228, 223, .3); }
.ard-signup input {
flex: 1; background: none; border: 0; outline: none;
color: #fff; font-family: var(--ard-sans); font-size: 13px; padding: 10px 0;
}
.ard-signup input::placeholder { color: rgba(232, 228, 223, .4); }
.ard-signup button {
background: none; border: 0; cursor: pointer;
color: var(--ard-gold);
font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
}
.ard-footer__social { display: flex; gap: 14px; margin-top: 26px; }
.ard-footer__social a {
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid rgba(232, 228, 223, .2);
display: flex; align-items: center; justify-content: center;
}
.ard-footer__social a:hover { background: rgba(232, 228, 223, .1); }
.ard-footer__base {
max-width: var(--ard-wrap); margin: 62px auto 0; padding: 22px var(--ard-gut) 30px;
border-top: 1px solid rgba(232, 228, 223, .12);
display: flex; justify-content: space-between; gap: 20px;
font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
color: rgba(232, 228, 223, .5);
}
.ard-footer__base-links { display: flex; gap: 20px; }
/* =========================================================================
Inner page furniture
========================================================================= */
/* Support pages: 405px band on #121B2D with a 6% pattern, per the reference. */
.ard-pagehero {
background: #121b2d;
color: var(--ard-light);
min-height: 405px;
padding: 0 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
position: relative; overflow: hidden;
}
.ard-pagehero::before {
content: ""; position: absolute; inset: 0;
background: url(../img/philosophy-pattern.jpg) center / cover no-repeat;
opacity: .06;
}
.ard-pagehero > * { position: relative; z-index: 1; }
.ard-pagehero h1 { font-size: 56px; line-height: 61.6px; color: #fff; margin-bottom: 16px; }
.ard-pagehero p { color: rgba(232, 228, 223, .72); max-width: 56ch; margin: 0 auto; }
/* Handbag Care and Contact ride the navy artwork at full strength. */
.ard-pagehero--art {
background: transparent;
min-height: 0;
padding: 144px 0;
}
.ard-pagehero--art::before {
background: url(../img/navy-pattern-bg.jpg) center / cover no-repeat;
opacity: 1;
}
.ard-pagehero--art h1 { font-size: 60px; line-height: 90px; margin-bottom: 24px; }
.ard-pagehero--contact { padding: 160px 0; }
.ard-pagehero--contact h1 { font-size: 60px; line-height: 60px; margin-bottom: 24px; }
.ard-prose { max-width: 820px; }
.ard-prose h2 {
font-size: 26px; margin: 46px 0 14px;
padding-bottom: 12px; border-bottom: 1px solid var(--ard-line);
}
.ard-prose h2:first-child { margin-top: 0; }
.ard-prose h3 { font-size: 20px; margin: 30px 0 10px; }
.ard-prose ul { margin: 0 0 18px; padding-left: 20px; }
.ard-prose li { margin-bottom: 8px; }
.ard-prose p, .ard-prose li { color: #4a4540; }
.ard-support {
display: grid; grid-template-columns: 250px 1fr; gap: 60px;
align-items: start;
}
.ard-support__aside {
position: sticky; top: 110px;
border: 1px solid var(--ard-line);
background: #fff;
padding: 26px 24px;
}
.ard-support__aside h2 { font-family: var(--ard-serif); font-size: 20px; margin: 0 0 18px; }
.ard-support__aside h4 {
font-family: var(--ard-sans); font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft); margin: 18px 0 7px;
}
.ard-support__aside a { display: block; font-size: 13px; padding: 3px 0; color: #4a4540; }
.ard-support__aside a:hover { color: var(--ard-copper); }
/* accordion */
.ard-acc { border-top: 1px solid var(--ard-line); }
.ard-acc__item { border-bottom: 1px solid var(--ard-line); }
.ard-acc__q {
width: 100%; background: none; border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 22px 0; text-align: left;
font-family: var(--ard-serif); font-size: 19px; color: var(--ard-ink);
}
.ard-acc__q span { flex: none; color: var(--ard-copper); font-size: 20px; line-height: 1; transition: transform .3s ease; }
.ard-acc__item.is-open .ard-acc__q span { transform: rotate(45deg); }
.ard-acc__a { display: none; padding: 0 0 24px; color: #4a4540; max-width: 72ch; }
.ard-acc__item.is-open .ard-acc__a { display: block; }
/* forms */
.ard-form { display: grid; gap: 20px; }
.ard-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ard-field label {
display: block;
font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft); margin-bottom: 8px;
}
.ard-field input, .ard-field select, .ard-field textarea {
width: 100%;
background: #fff;
border: 1px solid var(--ard-line);
padding: 13px 15px;
font-family: var(--ard-sans); font-size: 14px; color: var(--ard-ink);
outline: none;
transition: border-color .2s ease;
}
.ard-field input:focus, .ard-field select:focus, .ard-field textarea:focus { border-color: var(--ard-ink); }
.ard-field textarea { min-height: 150px; resize: vertical; }
/* =========================================================================
Responsive
========================================================================= */
@media (max-width: 1080px) {
:root { --ard-sec: 84px; --ard-gut: 26px; }
.ard-grid--4 { grid-template-columns: repeat(2, 1fr); }
.ard-grid--6, .ard-promise__grid { grid-template-columns: repeat(3, 1fr); }
.ard-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.ard-support { grid-template-columns: 1fr; gap: 34px; }
.ard-support__aside { position: static; }
}
@media (max-width: 860px) {
/* Keep the left nav in the grid — hiding it collapsed the column and threw
the logo to the left edge with the icons stranded mid-bar. Only its text
links go; the burger stays and holds column one. */
.ard-nav--left > a, .ard-nav--left .menu-item, .ard-nav__contact { display: none; }
.ard-burger { display: inline-flex; }
.ard-collection__grid, .ard-values__grid { grid-template-columns: 1fr; gap: 36px; }
.ard-values__media:last-of-type { display: none; }
.ard-collage { grid-template-columns: 1fr 1fr; }
.ard-collage__col--right { grid-column: span 2; grid-template-columns: 1fr 1fr; }
.ard-grid--3 { grid-template-columns: repeat(2, 1fr); }
.ard-testi__slide { grid-template-columns: 1fr; }
.ard-insta__grid { grid-template-columns: repeat(2, 1fr); }
.ard-craft__panel { padding: 40px 26px; }
.ard-form__row { grid-template-columns: 1fr; }
.ard-footer__base { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
.ard-grid--3, .ard-grid--6, .ard-promise__grid { grid-template-columns: 1fr 1fr; }
.ard-head-row { flex-direction: column; align-items: flex-start; gap: 14px; }
.ard-footer__inner { grid-template-columns: 1fr; }
.ard-footer__split { grid-template-columns: 1fr; }
.ard-hero { min-height: 78vh; }
}
/* =========================================================================
Our Story
========================================================================= */
.ard-storyhero {
position: relative;
background-size: cover; background-position: center;
color: #fff;
min-height: 630px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 64px 0;
text-align: center;
}
.ard-storyhero::before { content: ""; position: absolute; inset: 0; background: rgba(24, 18, 14, .5); }
.ard-storyhero > * { position: relative; z-index: 1; }
.ard-storyhero h1 { font-size: 72px; line-height: 108px; color: #fff; margin: 0 0 24px; }
.ard-storyhero__sub { color: rgba(255, 255, 255, .82); max-width: 48ch; margin: 0 auto; }
.ard-story-copy { max-width: 62ch; margin: 30px auto 0; }
.ard-story-copy p { color: var(--ard-ink-soft); line-height: 1.9; margin-bottom: 18px; }
.ard-story-copy--light p { color: rgba(232, 228, 223, .78); }
.ard-founder { width: 200px; margin: 26px auto 0; }
.ard-founder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ard-rule { display: block; width: 56px; height: 1px; background: rgba(232, 228, 223, .4); margin: 30px auto; }
.ard-rule--left { margin: 30px 0; background: var(--ard-line); }
.ard-slow { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.ard-slow__col { display: grid; gap: 0; }
.ard-slow img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.ard-slow__card { background: var(--ard-navy); color: var(--ard-light); padding: 26px 28px; }
.ard-slow__card h3 { font-size: 22px; color: var(--ard-light-2); margin-bottom: 6px; }
.ard-slow__card p { font-size: 13px; color: rgba(232, 228, 223, .72); }
.ard-slow__bar {
background: var(--ard-navy); color: var(--ard-gold);
font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase;
padding: 15px 20px; text-align: center;
}
.ard-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; text-align: center; }
.ard-pillar h3 { font-size: 21px; color: var(--ard-light-2); margin: 14px 0 8px; }
.ard-pillar p { font-size: 13px; color: rgba(232, 228, 223, .68); line-height: 1.8; }
.ard-pillar .ard-value__icon { margin: 0 auto; }
/* =========================================================================
Handbag care
========================================================================= */
.ard-care-intro {
max-width: 68ch; margin: 0 auto 76px;
text-align: center; color: var(--ard-ink-soft); line-height: 1.9;
}
.ard-care-row {
display: grid; grid-template-columns: 1fr 1.05fr;
gap: 60px; align-items: center;
margin-bottom: 88px;
}
.ard-care-row.is-flipped .ard-care-row__text { order: 2; }
.ard-care-row.is-flipped .ard-care-row__media { order: 1; }
.ard-care-row__media img { width: 100%; height: auto; display: block; }
.ard-care-row__title {
display: flex; align-items: center; gap: 14px;
font-size: 28px; margin-bottom: 12px;
}
.ard-care-row__lede { color: var(--ard-ink-soft); font-size: 14px; margin-bottom: 20px; }
.ard-care-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ard-care-list li { position: relative; padding-left: 20px; font-size: 14px; color: #4a4540; }
.ard-care-list li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 5px; height: 5px; border-radius: 50%; background: var(--ard-copper);
}
.ard-resources { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; }
.ard-resources__intro img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.ard-resources__cols { display: grid; gap: 34px; }
.ard-resources__group h3 {
font-family: var(--ard-sans);
font-size: 11px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase;
color: var(--ard-ink-soft); margin-bottom: 14px;
}
.ard-resources__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ard-resources__group a { font-size: 14px; color: #4a4540; border-bottom: 1px solid transparent; }
.ard-resources__group a:hover { color: var(--ard-copper); border-color: currentColor; }
.ard-resources__note {
margin-top: 46px; font-size: 12px; color: var(--ard-ink-soft);
text-align: center; font-style: italic;
}
/* =========================================================================
Contact
========================================================================= */
.ard-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: start; }
.ard-contact__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 20px; }
.ard-contact__list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ard-ink-soft); }
.ard-contact__list span {
display: block; font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft); margin-bottom: 3px;
}
.ard-contact__list a, .ard-contact__list p { color: var(--ard-ink); font-size: 14px; margin: 0; }
.ard-contact__list a:hover { color: var(--ard-copper); }
.ard-hours { margin: 22px 0 0; }
.ard-hours div {
display: flex; justify-content: space-between; gap: 18px;
padding: 11px 0; border-bottom: 1px solid var(--ard-line);
font-size: 13px;
}
.ard-hours dt { margin: 0; }
.ard-hours dd { margin: 0; color: var(--ard-ink-soft); }
.ard-hours__note { margin-top: 14px; font-size: 12px; font-style: italic; color: var(--ard-ink-soft); }
.ard-contact__sub {
font-family: var(--ard-serif); font-size: 19px;
margin: 34px 0 14px;
}
.ard-contact__social { display: flex; gap: 26px; }
.ard-contact__social a {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ard-ink-soft);
}
.ard-contact__social a:hover { color: var(--ard-copper); }
.ard-contact__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.ard-contact__reels img { aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }
.ard-contact__form { background: #fff; border: 1px solid var(--ard-line); padding: 40px 38px; }
.ard-contact__form .ard-form { margin-top: 26px; }
.ard-contact__form em { color: var(--ard-copper); font-style: italic; text-transform: none; letter-spacing: 0; }
.ard-notice { padding: 14px 16px; font-size: 13px; margin-top: 18px; }
.ard-notice--ok { background: #eef3ec; color: #35583a; }
.ard-notice--bad { background: #f8ece8; color: #8a3a26; }
.ard-quicklinks { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.ard-quicklinks a {
border: 1px solid var(--ard-line); background: #fff;
padding: 13px 24px;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ard-quicklinks a:hover { background: var(--ard-navy); color: var(--ard-light); border-color: var(--ard-navy); }
/* =========================================================================
FAQs / journal
========================================================================= */
.ard-faqs { max-width: 860px; margin: 0 auto; }
.ard-faqs__group {
font-family: var(--ard-serif); font-size: 26px;
margin: 52px 0 10px;
}
.ard-faqs__group:first-child { margin-top: 0; }
.ard-acc__a a { color: var(--ard-copper); border-bottom: 1px solid currentColor; }
.ard-journal-empty { max-width: 60ch; margin: 0 auto; }
.ard-journal-empty .ard-h2 { margin-bottom: 16px; }
/* =========================================================================
Shop archive
========================================================================= */
.ard-shopbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 18px;
padding-bottom: 22px; margin-bottom: 44px;
border-bottom: 1px solid var(--ard-line);
}
.ard-shopbar__cats { display: flex; flex-wrap: wrap; gap: 22px; }
.ard-shopbar__cats a {
font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft); padding-bottom: 4px;
border-bottom: 1px solid transparent;
}
.ard-shopbar__cats a:hover, .ard-shopbar__cats a.is-active { color: var(--ard-ink); border-color: var(--ard-ink); }
.ard-shopbar__meta {
display: flex; align-items: center; gap: 22px;
font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ard-ink-soft);
}
.ard-shopbar__meta select {
border: 1px solid var(--ard-line); background: #fff;
padding: 8px 12px; font-family: var(--ard-sans); font-size: 11px;
letter-spacing: 1.6px; text-transform: uppercase; color: var(--ard-ink);
}
.woocommerce-ordering { margin: 0; }
.woocommerce-pagination { margin-top: 56px; text-align: center; }
.woocommerce-pagination ul { list-style: none; display: inline-flex; gap: 8px; margin: 0; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
border: 1px solid var(--ard-line); font-size: 13px;
}
.woocommerce-pagination .current { background: var(--ard-navy); color: var(--ard-light); border-color: var(--ard-navy); }
/* =========================================================================
Product detail
========================================================================= */
.ard-crumbs { background: var(--ard-cream-2); padding: 22px 0; font-size: 12px; color: var(--ard-ink-soft); }
.ard-crumbs span { margin: 0 8px; opacity: .5; }
.ard-crumbs em { font-style: normal; color: var(--ard-ink); }
.ard-crumbs a:hover { color: var(--ard-copper); }
.ard-pdp { background: var(--ard-cream-2); padding: 10px 0 var(--ard-sec); }
.ard-pdp__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }
.ard-pdp__stage { background: var(--ard-cream-3); aspect-ratio: 2 / 3; overflow: hidden; }
.ard-pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.ard-pdp__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.ard-pdp__thumb {
width: 78px; padding: 0; cursor: pointer;
border: 1px solid transparent; background: none;
}
.ard-pdp__thumb.is-active { border-color: var(--ard-ink); }
.ard-pdp__thumb img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.ard-pdp__title { font-size: clamp(30px, 3.4vw, 42px); margin: 4px 0 14px; }
.ard-pdp__price { font-size: 19px; color: var(--ard-copper); margin-bottom: 24px; }
.ard-pdp__price del { color: var(--ard-ink-soft); margin-right: 10px; }
.ard-pdp__excerpt { color: var(--ard-ink-soft); line-height: 1.9; margin-bottom: 28px; max-width: 52ch; }
.ard-pdp__ship { font-size: 12px; color: var(--ard-ink-soft); margin: 18px 0 34px; }
.ard-pdp form.cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin: 0; }
.ard-pdp .quantity { display: flex; align-items: center; border: 1px solid var(--ard-line); background: #fff; }
.ard-pdp .quantity input {
width: 64px; border: 0; outline: none; text-align: center;
font-family: var(--ard-sans); font-size: 14px; padding: 14px 0; background: none;
}
.ard-pdp button.single_add_to_cart_button {
flex: 1; min-width: 220px;
background: var(--ard-navy); color: var(--ard-light-2);
border: 0; cursor: pointer;
font-family: var(--ard-sans); font-size: 12px; font-weight: 500;
letter-spacing: 2.4px; text-transform: uppercase;
padding: 17px 30px;
transition: background .25s ease;
}
.ard-pdp button.single_add_to_cart_button:hover { background: #101724; }
.ard-pdp .woocommerce-variation-add-to-cart { display: flex; gap: 14px; width: 100%; }
.ard-pdp__acc { margin-top: 40px; }
.ard-trust { background: var(--ard-navy); color: var(--ard-light); padding: 34px 0; position: relative; overflow: hidden; }
.ard-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ard-trust__item { display: flex; align-items: center; gap: 16px; justify-content: center; }
.ard-trust__item strong {
display: block; font-size: 11px; font-weight: 500;
letter-spacing: 2.2px; text-transform: uppercase; color: var(--ard-light-2);
}
.ard-trust__item span { font-size: 12px; color: rgba(232, 228, 223, .6); }
.ard-reviews { max-width: 860px; margin: 0 auto; }
.ard-reviews .comment-reply-title { font-family: var(--ard-serif); font-size: 22px; }
.ard-reviews .commentlist { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 22px; }
.ard-reviews .comment_container { background: #fff; border: 1px solid var(--ard-line); padding: 22px 24px; }
.ard-reviews .comment-form { display: grid; gap: 16px; }
.ard-reviews .comment-form input[type="text"],
.ard-reviews .comment-form input[type="email"],
.ard-reviews .comment-form textarea {
width: 100%; border: 1px solid var(--ard-line); background: #fff;
padding: 12px 14px; font-family: var(--ard-sans); font-size: 14px;
}
.ard-reviews .comment-form .submit {
justify-self: start;
background: var(--ard-navy); color: var(--ard-light-2);
border: 0; cursor: pointer;
font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; padding: 15px 34px;
}
@media (max-width: 1080px) {
.ard-resources, .ard-contact, .ard-pdp__grid { grid-template-columns: 1fr; gap: 40px; }
.ard-pillars { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 860px) {
.ard-care-row { grid-template-columns: 1fr; gap: 26px; margin-bottom: 56px; }
.ard-care-row.is-flipped .ard-care-row__text { order: 0; }
.ard-care-row.is-flipped .ard-care-row__media { order: 0; }
.ard-slow { grid-template-columns: 1fr; }
.ard-trust__grid { grid-template-columns: 1fr; gap: 18px; }
.ard-trust__item { justify-content: flex-start; }
.ard-contact__form { padding: 28px 22px; }
}
/* [hidden] must win over the layout display values above. */
.ard-search[hidden], .ard-drawer[hidden] { display: none !important; }
/* Story pillars sit on a dark ground: give the icon ring room to read. */
.ard-pillar .ard-value__icon { width: 52px; height: 52px; }
.ard-pillar .ard-value__icon svg { width: 22px; height: 22px; }
.ard-care-row__title .ard-value__icon svg { width: 17px; height: 17px; }
/* Footer menus come through wp_nav_menu, so reset its list defaults. */
.ard-footer ul li { list-style: none; margin: 0; }
.ard-footer .menu-item a { display: inline-block; }
/* Quantity label on the product page follows the eyebrow scale. */
.ard-pdp form.cart label,
.ard-pdp .quantity .screen-reader-text + label,
.ard-pdp .quantity label {
display: block;
font-family: var(--ard-sans);
font-size: 10px; font-weight: 500;
letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft);
margin-bottom: 8px;
}
/* The craft band shows a still by default; the film fades in on desktop. */
.ard-craft__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ard-craft__video { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.ard-craft__video.is-on { opacity: 1; }
/* =========================================================================
Track order
========================================================================= */
.ard-track {
max-width: 620px; margin: 0 auto;
background: #fff; border: 1px solid var(--ard-line);
padding: 44px 44px 38px;
}
.ard-track p { color: var(--ard-ink-soft); font-size: 14px; }
.ard-track form { display: grid; gap: 18px; margin-top: 24px; }
.ard-track .form-row { display: grid; gap: 7px; margin: 0; }
.ard-track label {
font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ard-ink-soft);
}
.ard-track input[type="text"], .ard-track input[type="email"] {
width: 100%; border: 1px solid var(--ard-line); background: #fff;
padding: 13px 15px; font-family: var(--ard-sans); font-size: 14px; outline: none;
}
.ard-track input:focus { border-color: var(--ard-ink); }
.ard-track button {
justify-self: start;
background: var(--ard-navy); color: var(--ard-light-2); border: 0; cursor: pointer;
font-family: var(--ard-sans); font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
padding: 15px 38px;
}
.ard-track button:hover { background: #101724; }
.ard-track__help {
margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ard-line);
font-size: 13px;
}
.ard-track__help a { color: var(--ard-copper); }
@media (max-width: 540px) {
.ard-track { padding: 28px 22px; }
}
/* =========================================================================
Custom cursor — the Ardori mark follows the pointer, as on the reference.
Native cursor hidden only on fine pointers; touch devices are untouched.
========================================================================= */
@media (pointer: fine) and (hover: hover) {
html.ard-has-cursor,
html.ard-has-cursor body,
html.ard-has-cursor a,
html.ard-has-cursor button,
html.ard-has-cursor input,
html.ard-has-cursor select,
html.ard-has-cursor textarea,
html.ard-has-cursor label,
html.ard-has-cursor [role="button"] {
cursor: none !important;
}
}
.ard-cursor {
position: fixed;
top: 0; left: 0;
z-index: 9999;
pointer-events: none;
opacity: 0;
will-change: transform;
}
.ard-cursor__inner {
position: relative;
display: flex; flex-direction: column; align-items: center;
margin-left: -9px; margin-top: -9px;
transition: transform .2s ease;
}
.ard-cursor img {
width: 18px; height: auto;
transition: width .2s ease;
filter: drop-shadow(rgba(0, 0, 0, .6) 0 1px 3px) drop-shadow(rgba(255, 255, 255, .8) 0 0 1px);
}
.ard-cursor.is-active .ard-cursor__inner {
margin-left: -13px; margin-top: -13px;
transform: scale(1.1);
}
.ard-cursor.is-active img { width: 26px; }
/* =========================================================================
Reference-exact section details
========================================================================= */
/* New Arrivals: its own cream, tighter padding, square cards, 32px gutter. */
.ard-sec--arrivals { background: var(--ard-cream-4); padding: 96px 0; }
.ard-grid--arrivals { gap: 32px; }
/* The square arrivals card cropped a third off every photograph.
Same 2:3 frame as the rest now. */
.ard-card--square .ard-card__media { aspect-ratio: 2 / 3; }
/* See it Styled sits on the lighter cream, Instagram shares it. */
.ard-sec--styled { background: var(--ard-cream-2); }
/* Curated band: the navy artwork is the background itself. */
.ard-curated {
background: url(../img/curated-navy-pattern.jpg) center / cover no-repeat;
color: var(--ard-light);
}
.ard-curated::before { content: none; }
.ard-curated h2, .ard-curated h3 { color: var(--ard-light-2); }
.ard-curated .ard-lede { color: rgba(232, 228, 223, .74); }
/* The Ardori mark crowns the philosophy band. */
/* Reference order: eyebrow, heading, mark, hairline, copy, button. */
.ard-philosophy .ard-eyebrow { margin-bottom: 24px; }
.ard-philosophy .ard-h2 { margin-bottom: 40px; }
.ard-philosophy__mark { margin: 0 0 24px; }
.ard-philosophy__mark img { width: 120px; height: auto; margin: 0 auto; }
.ard-philosophy__rule {
display: block; width: 100%; height: 1px;
background: rgba(232, 228, 223, .18);
margin: 0 0 32px;
}
.ard-philosophy p { margin-bottom: 40px; }
@media (max-width: 1080px) {
.ard-hero__stage { padding: 0 32px; }
}
@media (max-width: 860px) {
.ard-hero { height: 78vh; }
.ard-hero__stage { align-items: center; text-align: center; }
.ard-hero__cta { justify-content: center; }
.ard-values__grid { grid-template-columns: 1fr; }
}
/* Sections whose navy comes from the artwork itself, not a fill. */
.ard-on-dark { color: var(--ard-light); }
.ard-on-dark h1, .ard-on-dark h2, .ard-on-dark h3 { color: var(--ard-light-2); }
.ard-on-dark .ard-lede { color: rgba(232, 228, 223, .74); }
/* =========================================================================
Reference-exact spacing pass 2
========================================================================= */
/* figure carries a UA margin that shrank the testimonial cards. */
.ard-testi__card { margin: 0; }
/* Collection index: 52px rows on a 28px rhythm, as measured. */
.ard-collection__list { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 28px; }
.ard-collection__list li { border-bottom: 0; }
.ard-collection__list a {
display: flex; flex-direction: column; justify-content: center;
min-height: 52px;
padding: 0;
border-bottom: 1px solid rgba(44, 40, 36, .1);
padding-bottom: 0;
}
.ard-collection__list li:last-child a { border-bottom: 0; }
.ard-collection__list a:hover { padding-left: 10px; }
/* Craft panel copy is Cormorant, not Montserrat. */
.ard-craft__panel p {
font-family: var(--ard-serif);
font-size: 16px;
line-height: 27.2px;
color: rgba(232, 228, 223, .8);
}
.ard-craft__panel .ard-eyebrow { font-size: 12px; line-height: 18px; margin-bottom: 24px; }
.ard-craft__panel .ard-h2 { margin-bottom: 24px; }
.ard-craft__panel > p { margin-bottom: 40px; }
.ard-craft__points {
list-style: none; margin: 0 0 40px; padding: 0;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ard-craft__points li { font-size: 16px; line-height: 24px; color: rgba(232, 228, 223, .9); }
/* Instagram band rhythm. */
.ard-insta__grid { margin: 64px 0; }
/* =========================================================================
Reference-exact spacing pass 3 — the centred navy bands share one rhythm:
heading, 16px, lede, 80px, content.
========================================================================= */
.ard-lede { margin-top: 16px; }
.ard-promise__grid { margin-top: 80px; }
.ard-testi__viewport { margin-top: 80px; }
/* Promise icons are 72px on the reference, not 54. */
.ard-promise__icon { width: 72px; height: 72px; margin: 0 auto 24px; }
.ard-promise__icon svg { width: 26px; height: 26px; }
.ard-promise__title { margin-bottom: 6px; }
/* Testimonial portrait is 96px square. */
.ard-testi__thumb { width: 96px; height: 96px; }
/* Craft body copy is a single block with blank-line breaks. */
.ard-craft__copy { margin-bottom: 40px; }
.ard-craft__points li { line-height: 21px; }
/* Centred ledes sit on a 600px measure, as on the reference. */
.ard-center .ard-lede, .ard-philosophy p { max-width: 600px; margin-left: auto; margin-right: auto; }
/* See it Styled rhythm: heading, 64px, marquee, 58px, link. */
.ard-marquee { margin-top: 64px; }
/* Testimonial card interior. */
.ard-testi__thumb { margin: 0 auto 12px; }
.ard-testi__stars { font-size: 12px; line-height: 14px; margin-bottom: 19px; }
.ard-testi__dots { margin: 60px 0 59px; }
/* =========================================================================
Reference-exact typography pass
========================================================================= */
/* Philosophy body copy: Cormorant 17/30.6 on a 650px measure. */
.ard-philosophy p {
font-family: var(--ard-serif);
font-size: 17px;
line-height: 30.6px;
max-width: 650px;
color: rgba(232, 228, 223, .78);
}
/* Curated band rhythm: lede, 64px, collage, 66px, link. */
.ard-collage { margin-top: 64px; }
/* The pull quote runs the full container at 32/52. */
.ard-quote p {
font-size: 32px;
line-height: 52px;
max-width: none;
}
/* The quote block is a 200px flex band with the line centred inside it. */
.ard-quote .ard-wrap {
min-height: 200px;
display: flex; align-items: center; justify-content: center;
}
/* =========================================================================
Shop archive — measured off ardorilabel.com/shop
========================================================================= */
.ard-pagehero--shop {
height: 540px;
padding: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: url(../img/navy-pattern-bg.jpg) center / cover no-repeat;
}
.ard-pagehero--shop::before { content: none; }
.ard-pagehero--shop h1 {
font-size: 72px;
line-height: 79.2px;
color: #fff;
margin-bottom: 18px;
}
.ard-shopsec { background: #fdfcfa; padding: 64px 0; }
.ard-wrap--shop { max-width: 1400px; }
.ard-grid--shop { gap: 24px; }
.ard-shopbar__sortlabel {
font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ard-ink-soft);
margin-right: -14px;
}
/* Shop toolbar: category pills on the left, count and sort on the right. */
.ard-shopbar {
justify-content: space-between;
border-bottom: 1px solid var(--ard-line);
padding-bottom: 20px;
margin-bottom: 32px;
}
.ard-shopbar__cats { gap: 10px; }
.ard-shopbar__cats a {
padding: 9px 18px;
border: 1px solid var(--ard-line);
border-bottom: 1px solid var(--ard-line);
background: #fff;
color: var(--ard-ink-soft);
font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.ard-shopbar__cats a:hover {
background: var(--ard-cream-3);
color: var(--ard-ink);
border-color: var(--ard-line);
}
.ard-shopbar__cats a.is-active {
background: var(--ard-navy);
border-color: var(--ard-navy);
color: var(--ard-light-2);
}
/* =========================================================================
Card storefront actions — wishlist, compare, quick view, badges
========================================================================= */
.ard-card__badges {
position: absolute; top: 16px; left: 16px; z-index: 5;
display: flex; flex-direction: column; gap: 6px;
pointer-events: none;
}
.ard-badge {
display: inline-block;
padding: 6px 12px;
font-family: var(--ard-sans);
font-size: 9px; font-weight: 500;
letter-spacing: 1.8px; text-transform: uppercase;
background: var(--ard-ink); color: #fff;
}
.ard-badge--sale { background: var(--ard-copper); }
.ard-badge--sold { background: rgba(44, 40, 36, .82); }
.ard-card__actions {
position: absolute; top: 16px; right: 16px; z-index: 6;
display: flex; flex-direction: column; gap: 8px;
opacity: 0; transform: translateX(10px);
transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.ard-card:hover .ard-card__actions,
.ard-card:focus-within .ard-card__actions { opacity: 1; transform: none; }
.ard-card__actions > .product-action {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
margin: 0; padding: 0;
border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: var(--ard-ink);
box-shadow: 0 2px 10px rgba(28, 24, 20, .12);
transition: background .22s ease, color .22s ease;
}
.ard-card__actions > .product-action:hover { background: var(--ard-ink); color: #fff; }
/* Each wrapper holds one anchor: make it the full hit area and centre the glyph. */
.ard-card__actions > .product-action > a {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
color: inherit;
font-size: 15px; line-height: 1;
text-indent: 0;
}
.ard-card__actions > .product-action svg { width: 16px; height: 16px; }
/* The plugins print a text label next to the glyph; the card wants the glyph only. */
.ard-card__actions .woosw-btn-text,
.ard-card__actions .woosc-btn-text { display: none !important; }
.ard-card__actions .quick-view-icon { font-size: 0; }
.ard-card__actions .quick-view-icon::before {
content: "";
width: 16px; height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Added states read in the brand copper. */
.ard-card__actions > .product-action:has(.woosw-added),
.ard-card__actions > .product-action:has(.woosc-added) { background: var(--ard-copper); color: #fff; }
/* Tooltips inherit Minimog's hint styles; keep them off the card edge. */
.ard-card__actions .hint--left::after { white-space: nowrap; }
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
.ard-card__actions { opacity: 1; transform: none; }
}
.ard-card__add--out {
display: block; text-align: center;
background: rgba(44, 40, 36, .82);
text-decoration: none;
}
/* -------------------------------------------------------------------------
The wishlist and compare plugins draw their glyphs from a Font Awesome Pro
face this build does not ship, so they render blank. Draw all three icons
from inline SVG masks instead — no font dependency, one consistent weight.
---------------------------------------------------------------------- */
.ard-card__actions > .product-action > a { font-size: 0 !important; }
.ard-card__actions > .product-action > a::before,
.ard-card__actions > .product-action > a::after {
content: "" !important;
display: block;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.ard-card__actions > .product-action > a::after { display: none; }
.ard-card__actions > .product-action > a::before { width: 17px; height: 17px; }
.ard-card__actions .woosw-btn::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ard-card__actions .woosw-btn.woosw-added::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ard-card__actions .woosc-btn::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ard-card__actions .quick-view-icon::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* =========================================================================
Product page storefront actions and meta
========================================================================= */
.ard-pdp__actions { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.ard-pdp__actions .product-action { display: inline-flex; }
.ard-pdp__actions a {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--ard-sans);
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--ard-ink-soft);
transition: color .22s ease;
}
.ard-pdp__actions a:hover { color: var(--ard-copper); }
.ard-pdp__actions a::before {
content: "";
width: 16px; height: 16px; flex: none;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.ard-pdp__actions .woosw-btn::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ard-pdp__actions .woosw-btn.woosw-added { color: var(--ard-copper); }
.ard-pdp__actions .woosc-btn::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ard-pdp__meta {
list-style: none; margin: 26px 0 0; padding: 22px 0 0;
border-top: 1px solid var(--ard-line);
display: grid; gap: 10px;
}
.ard-pdp__meta li { font-size: 13px; color: #4a4540; display: flex; gap: 14px; }
.ard-pdp__meta span {
flex: none; min-width: 96px;
font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--ard-ink-soft); line-height: 20px;
}
.ard-pdp__meta a { color: var(--ard-copper); }
/* =========================================================================
Quick view
========================================================================= */
.ard-qv-btn {
border: 0; padding: 0; cursor: pointer;
background: rgba(255, 255, 255, .94);
color: var(--ard-ink);
}
.ard-card__actions > .ard-qv-btn::before {
content: "";
display: block; width: 17px; height: 17px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.ard-qv-modal {
position: fixed; inset: 0; z-index: 200;
background: rgba(16, 20, 28, .62);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.ard-qv-modal[hidden] { display: none !important; }
.ard-qv-modal__panel {
position: relative;
width: min(1000px, 100%);
max-height: 90vh; overflow-y: auto;
background: var(--ard-cream-2);
box-shadow: 0 30px 80px rgba(16, 20, 28, .35);
}
.ard-qv-modal__close {
position: absolute; top: 14px; right: 18px; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255, 255, 255, .9); border: 0;
color: var(--ard-ink); font-size: 26px; line-height: 1; cursor: pointer;
}
.ard-qv-modal__close:hover { background: #fff; }
.ard-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; }
.ard-qv__stage { background: var(--ard-cream-3); aspect-ratio: 2 / 3; overflow: hidden; }
.ard-qv__stage img { width: 100%; height: 100%; object-fit: cover; }
.ard-qv__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.ard-qv__thumbs .ard-pdp__thumb { width: 64px; }
.ard-qv__title { font-size: 34px; margin: 4px 0 12px; }
.ard-qv__excerpt { color: var(--ard-ink-soft); line-height: 1.9; margin-bottom: 26px; }
.ard-qv__add { width: 100%; }
.ard-qv__links { margin-top: 20px; }
.ard-qv__loading {
padding: 80px 20px; text-align: center;
font-family: var(--ard-serif); font-size: 20px; color: var(--ard-ink-soft);
}
@media (max-width: 860px) {
.ard-qv { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
.ard-qv__stage { aspect-ratio: 2 / 3; }
}
/* =========================================================================
MOBILE — every value below is measured off ardorilabel.com at 390px.
The reference drops its type and spacing hard on small screens; the
desktop scale was carrying straight through here before this block.
========================================================================= */
@media (max-width: 1023px) {
:root { --ard-sec: 80px; --ard-gut: 24px; --ard-header: 56px; }
.ard-wrap--collection { max-width: none; }
.ard-wrap--md, .ard-wrap--shop { max-width: none; }
.ard-wrap--narrow { max-width: none; padding: 0 24px; }
/* ---- hero ---- */
.ard-hero { height: 78vh; min-height: 520px; }
.ard-hero__stage { padding: 0 16px; align-items: center; text-align: center; }
.ard-hero__inner { max-width: 560px; }
.ard-hero h1 { font-size: 32px; line-height: 35.2px; letter-spacing: .8px; margin-bottom: 20px; }
.ard-hero p { font-size: 14px; line-height: 22.4px; margin-bottom: 32px; }
.ard-hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
.ard-hero__cta .ard-btn { width: 100%; padding: 14px 24px; font-size: 11px; letter-spacing: 2.2px; }
/* ---- shared type ---- */
.ard-eyebrow { font-size: 11px; letter-spacing: 3.85px; }
.ard-lede { font-size: 14px; line-height: 21px; }
.ard-h2 { font-size: 32px; line-height: 1.5; }
.ard-h2--30 { font-size: 26px; line-height: 32.5px; }
.ard-h2--44, .ard-h2--48 { font-size: 36px; line-height: 54px; }
.ard-philosophy .ard-h2 { font-size: 32px; line-height: 41.6px; letter-spacing: 2.56px; }
.ard-craft__panel .ard-h2 { font-size: 32px; line-height: 38.4px; }
[data-ard-testi] .ard-h2 { font-size: 32px; line-height: 48px; }
.ard-insta__grid ~ * , .ard-sec--cream-2 .ard-h2 { line-height: 1.5; }
/* ---- collection index ---- */
.ard-collection__grid { grid-template-columns: 1fr; gap: 48px; }
.ard-collection__media { aspect-ratio: 326 / 380; }
/* ---- philosophy ---- */
.ard-philosophy p { font-size: 15px; line-height: 27px; }
.ard-philosophy__mark img { width: 96px; }
/* ---- new arrivals ---- */
.ard-sec--arrivals { padding: 64px 0; }
.ard-grid--arrivals { grid-template-columns: 1fr; gap: 24px; }
.ard-sec--arrivals .ard-h2 { font-size: 28px; line-height: 42px; }
.ard-head-row { flex-direction: row; align-items: flex-end; gap: 16px; }
/* ---- curated collage ---- */
.ard-collage { gap: 16px; margin-top: 40px; }
.ard-collage__col { gap: 16px; }
.ard-collage__col--left { padding-top: 20px; }
.ard-collage__l1 { width: 83px; height: 56px; }
.ard-collage__l2 { width: 83px; height: 125px; }
.ard-collage__hero img { width: 143px; height: 215px; }
.ard-collage__detail { width: 83px; height: 125px; }
.ard-collage__tote { width: 83px; height: 56px; }
/* ---- values ---- */
.ard-values__grid { grid-template-columns: 1fr; gap: 32px; }
.ard-values__media { aspect-ratio: 342 / 456; display: block; }
.ard-values__media:last-of-type { display: block; }
/* ---- craft ---- */
.ard-craft { min-height: 0; padding: 0; }
.ard-craft__panel { width: 100%; max-width: 342px; padding: 56px 36px; }
.ard-craft__panel p { font-size: 15px; line-height: 25.5px; }
.ard-craft__points li { font-size: 15px; }
/* ---- see it styled ---- */
.ard-marquee { margin-top: 40px; }
.ard-marquee__item { width: 200px; aspect-ratio: 2 / 3; }
.ard-marquee__track { gap: 16px; }
/* ---- promise ---- */
.ard-promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; margin-top: 48px; }
/* ---- pull quote ---- */
.ard-quote { padding: 96px 0; }
.ard-quote .ard-wrap { min-height: 0; }
.ard-quote p { font-size: 22px; line-height: 35.75px; }
/* ---- testimonials: one card per slide, dots below ---- */
.ard-testi__viewport { margin-top: 48px; overflow: hidden; }
.ard-testi__slide { display: block; flex: 0 0 100%; }
.ard-testi__card { max-width: 308px; margin: 0 auto; }
.ard-testi__dots { display: flex; margin: 48px 0 48px; gap: 10px; }
.ard-testi__dots button { width: 8px; height: 8px; }
/* ---- instagram: horizontal rail ---- */
.ard-insta__grid {
margin: 40px -24px;
padding: 0 24px;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ard-insta__grid::-webkit-scrollbar { display: none; }
.ard-insta__grid a { width: 180px; height: 320px; scroll-snap-align: center; }
.ard-insta__btn { padding: 14px 28px; font-size: 11px; }
/* ---- footer ---- */
.ard-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 639px) {
.ard-footer__inner { grid-template-columns: 1fr; }
.ard-footer__split { grid-template-columns: 1fr; }
}
/* -------------------------------------------------------------------------
Mobile fine detail — second measurement pass at 390px
---------------------------------------------------------------------- */
@media (max-width: 1023px) {
/* Collection rows: 46px tall on a 20px rhythm, 17px labels. */
.ard-collection__list { gap: 20px; margin-top: 28px; }
.ard-collection__list a { min-height: 46px; }
.ard-collection__name { font-size: 17px; }
.ard-collection__sub { font-size: 12px; }
/* Product card body tightens up. */
.ard-card__name { font-size: 18px; line-height: 27px; }
.ard-card__eyebrow { font-size: 9px; margin-bottom: 4px; }
.ard-card__price { font-size: 14px; }
/* Craft band keeps a full-height stage with an 80px gutter. */
.ard-craft { min-height: 100vh; padding: 80px 0; }
.ard-craft__panel .ard-eyebrow { font-size: 11px; line-height: 16.5px; }
.ard-craft__copy, .ard-craft__panel p { font-size: 14px; line-height: 23.8px; }
.ard-craft__points li { font-size: 16px; line-height: 24px; }
.ard-craft__panel .ard-btn { padding: 16px 32px; }
/* The quote band keeps its 200px stage. */
.ard-quote .ard-wrap { min-height: 200px; }
/* Testimonial card at 308px: 24px padding, 80px portrait. */
.ard-testi__card { padding: 24px; }
.ard-testi__thumb { width: 80px; height: 80px; margin-bottom: 12px; }
.ard-testi__view { font-size: 10px; margin-bottom: 14px; }
.ard-testi__stars { font-size: 11px; line-height: 14px; margin-bottom: 16px; }
.ard-testi__quote { font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.ard-testi__name { font-size: 10px; }
.ard-testi__city { font-size: 11px; }
}
/* -------------------------------------------------------------------------
Tap targets — the icons keep their drawn size, the hit area grows to 44px
so header controls and card actions are comfortable on a phone.
---------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 1023px) {
.ard-header .ard-icon-btn {
min-width: 44px; min-height: 44px;
justify-content: center;
}
.ard-nav--right { gap: 4px; }
.ard-burger { min-width: 44px; min-height: 44px; align-items: center; }
.ard-card__add { padding: 14px 0; }
.ard-link, .ard-link--lg { padding-top: 10px; padding-bottom: 10px; }
.ard-testi__view { padding: 6px 0; }
.ard-shopbar__cats a { padding: 12px 18px; }
.ard-quicklinks a { padding: 15px 22px; }
.ard-footer a { display: inline-block; padding: 3px 0; }
}
@media (max-width: 1023px) {
/* Craft bullet list: 21px rows on a 16px rhythm, and the tick must sit
on the same line as its label at 262px of panel width. */
.ard-craft__points { gap: 16px; }
.ard-craft__points li {
font-size: 14px; line-height: 21px;
gap: 7px; align-items: center; text-align: left;
white-space: nowrap;
}
.ard-craft__points svg { width: 13px; height: 13px; }
/* Testimonial quote on the reference reads 16/30.4 at this width. */
.ard-testi__quote { font-size: 16px; line-height: 30.4px; margin-bottom: 14px; }
.ard-testi__view { padding: 0; margin-bottom: 14px; }
/* Card caption block tightens so the arrivals card lands at 412px. */
.ard-card__body { padding-top: 12px; }
.ard-card__name { margin-bottom: 2px; }
.ard-head-row { margin-bottom: 32px; }
}
/* -------------------------------------------------------------------------
Mobile page heroes — every height and heading measured at 390px
---------------------------------------------------------------------- */
@media (max-width: 1023px) {
/* Support pages: 338px band, 32/35.2 heading. */
.ard-pagehero { min-height: 338px; }
.ard-pagehero h1 { font-size: 32px; line-height: 35.2px; margin-bottom: 16px; }
.ard-pagehero p { font-size: 14px; line-height: 21px; }
/* Shop: 422px, 40/44 heading. */
.ard-pagehero--shop { height: 422px; }
.ard-pagehero--shop h1 { font-size: 40px; line-height: 44px; margin-bottom: 24px; }
/* Handbag Care: 64px padding, 36/54 heading. */
.ard-pagehero--art { min-height: 0; padding: 64px 0; }
.ard-pagehero--art h1 { font-size: 36px; line-height: 54px; margin-bottom: 24px; }
/* Contact: 96px padding, 36/40 heading. */
.ard-pagehero--contact { padding: 96px 0; }
.ard-pagehero--contact h1 { font-size: 36px; line-height: 40px; margin-bottom: 24px; }
/* Our Story editorial hero. */
.ard-storyhero { min-height: 523px; padding: 48px 0; }
.ard-storyhero h1 { font-size: 42px; line-height: 63px; margin-bottom: 24px; }
.ard-storyhero__sub { font-size: 14px; line-height: 21px; }
/* Product page. */
.ard-pdp__title { font-size: 32px; line-height: 48px; margin-bottom: 12px; }
.ard-pdp { padding-bottom: 64px; }
.ard-pdp__grid { grid-template-columns: 1fr; gap: 28px; }
.ard-pdp__thumb { width: 62px; }
.ard-pdp form.cart { flex-direction: column; align-items: stretch; }
.ard-pdp form.cart .quantity { align-self: flex-start; }
.ard-pdp form.cart button.single_add_to_cart_button { width: 100%; min-width: 0; }
.ard-pdp__meta span { min-width: 84px; }
/* Shop toolbar wraps on a phone. */
.ard-shopbar { flex-direction: column; align-items: flex-start; gap: 16px; }
.ard-shopbar__meta { width: 100%; justify-content: space-between; }
.ard-grid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ard-shopsec { padding: 48px 0; }
/* Support sidebar stacks above the copy. */
.ard-support { grid-template-columns: 1fr; gap: 28px; }
.ard-support__aside { position: static; }
/* Care rows and contact columns stack. */
.ard-care-row, .ard-care-row.is-flipped { grid-template-columns: 1fr; gap: 22px; margin-bottom: 48px; }
.ard-care-row.is-flipped .ard-care-row__text,
.ard-care-row.is-flipped .ard-care-row__media { order: 0; }
.ard-care-row__title { font-size: 24px; }
.ard-resources { grid-template-columns: 1fr; gap: 32px; }
.ard-contact { grid-template-columns: 1fr; gap: 32px; }
.ard-contact__form { padding: 26px 20px; }
.ard-slow { grid-template-columns: 1fr; }
.ard-pillars { grid-template-columns: 1fr; gap: 32px; }
.ard-trust__grid { grid-template-columns: 1fr; gap: 18px; }
.ard-trust__item { justify-content: flex-start; }
.ard-quicklinks a { width: 100%; text-align: center; }
.ard-faqs__group { font-size: 22px; }
.ard-acc__q { font-size: 17px; }
.ard-prose h2 { font-size: 22px; }
}
/* -------------------------------------------------------------------------
Touch comfort — hit areas only; drawn sizes are unchanged
---------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 1023px) {
.ard-footer a { padding: 8px 0; }
.ard-footer ul { gap: 4px; }
.ard-crumbs a, .ard-crumbs em { display: inline-block; padding: 8px 0; }
.ard-pdp__actions { gap: 20px; }
.ard-pdp .ard-pdp__actions .product-action a { padding: 10px 0; }
.ard-resources__group a,
.ard-contact__list a,
.ard-contact__social a,
.ard-support__aside a { display: inline-block; padding: 9px 0; }
.ard-contact__list li { align-items: center; }
.ard-acc__q { padding: 20px 0; }
.ard-hours div { padding: 14px 0; }
}
/* The compare plugin's popup close sits outside the viewport on a phone. */
.woosc-popup-close { right: 0 !important; }
.woosc-popup, .woosc-area { max-width: 100vw; }
@media (pointer: coarse), (max-width: 1023px) {
.ard-care-row__text a,
.ard-prose a { display: inline-block; padding: 6px 0; }
.ard-footer__base-links a { padding: 10px 0; }
}
@media (pointer: coarse), (max-width: 1023px) {
.ard-pdp__meta a { display: inline-block; padding: 7px 0; }
}
@media (pointer: coarse), (max-width: 1023px) {
.ard-testi__view { padding: 10px 0; }
.ard-track__help a,
.ard-support .ard-prose p a,
.ard-prose p a { display: inline-block; padding: 8px 0; }
}
/* Carousel dots stay 8px as drawn; the hit area quietly grows to 36px. */
.ard-testi__dots button { position: relative; }
.ard-testi__dots button::after {
content: "";
position: absolute; inset: -14px;
}
/* =========================================================================
404 and search
========================================================================= */
.ard-404-search {
display: flex; gap: 12px; flex-wrap: wrap;
max-width: 560px; margin: 0 auto;
}
.ard-404-search input[type="search"] {
flex: 1; min-width: 200px;
border: 1px solid var(--ard-line); background: #fff;
padding: 15px 18px;
font-family: var(--ard-sans); font-size: 14px; outline: none;
}
.ard-404-search input[type="search"]:focus { border-color: var(--ard-ink); }
.ard-search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 820px; }
.ard-search-list li { padding-bottom: 22px; border-bottom: 1px solid var(--ard-line); }
.ard-search-list a { font-family: var(--ard-serif); font-size: 22px; color: var(--ard-ink); }
.ard-search-list a:hover { color: var(--ard-copper); }
.ard-search-list p { margin: 6px 0 0; font-size: 14px; color: var(--ard-ink-soft); }
.ard-lowstock { color: var(--ard-copper); font-weight: 500; }
@media (max-width: 639px) {
.ard-404-search { flex-direction: column; }
.ard-404-search .ard-btn { width: 100%; }
}
/* =========================================================================
Mobile hardening — round six
========================================================================= */
/* iOS Safari zooms the whole page when a focused field is under 16px. Every
form on the site sat at 13-15px, so tapping any of them threw the layout
out. 16px is the smallest size that leaves the viewport alone. */
@media (max-width: 1023px) {
/* Flagged deliberately: WooCommerce, its blocks, the wishlist plugin and
Minimog all set field sizes through deeper class selectors, and this is
a device-behaviour fix rather than a style preference. */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], select, textarea {
font-size: 16px !important;
}
/* Display type in the search band, kept above the 16px that makes iOS
zoom the page on focus and narrow enough for the placeholder to fit. */
.ard-search input { font-size: 18px !important; }
}
/* The pointer mark is desktop-only; the JS already checks `pointer: fine`,
this keeps the node out of the layout on phones as well. */
@media (pointer: coarse), (max-width: 1023px) {
.ard-cursor { display: none !important; }
}
/* Woo's "Remember me" ships an unpadded 14px box. Give the whole label a
thumb-sized row. */
@media (pointer: coarse), (max-width: 1023px) {
.woocommerce-form-login__rememberme,
label.woocommerce-form__label-for-checkbox {
display: flex; align-items: center; gap: 10px;
min-height: 44px; margin: 4px 0;
}
.woocommerce-form__input-checkbox,
input.woocommerce-form__input-checkbox {
width: 20px !important; height: 20px !important;
margin: 0; flex: 0 0 20px;
}
}
/* Respect a reduced-motion preference: reveal everything at once rather than
sliding each section up. */
@media (prefers-reduced-motion: reduce) {
[data-ard-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.ard-marquee__track { animation: none !important; }
}
/* Card controls on touch screens.
With no hover the Add to Bag slab sits over the photo permanently, which
buries the product. Flush against the bottom edge it reads as a deliberate
bar instead of a floating box. */
@media (max-width: 1023px) {
.ard-card__add {
left: 0; right: 0; bottom: 0;
background: rgba(26, 35, 50, .93);
font-size: 10px; letter-spacing: 1.4px;
padding: 13px 0;
backdrop-filter: blur(2px);
}
.ard-card__actions { top: 10px; right: 10px; gap: 8px; }
.ard-card__actions > .product-action {
width: 38px; height: 38px;
/* solid, not translucent: the photo behind these varies from near-black
to near-white and .92 alpha made the two circles look mismatched */
background: #fff;
}
.ard-card__actions > .product-action svg { width: 15px; height: 15px; }
}
/* Footer payment row. The markup went in during the storefront round but the
styling never followed, so it rendered as a stacked bullet list. */
.ard-footer__trust {
max-width: var(--ard-wrap);
margin: 46px auto 0;
padding: 0 var(--ard-gut);
display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
}
.ard-footer__trust > span {
font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
color: rgba(232, 228, 223, .5);
}
.ard-footer__trust ul {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0; padding: 0; list-style: none;
}
.ard-footer__trust li {
border: 1px solid rgba(232, 228, 223, .18);
padding: 7px 13px;
font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(232, 228, 223, .68);
white-space: nowrap;
}
@media (max-width: 1023px) {
.ard-footer__trust {
margin-top: 34px; padding: 0 24px;
flex-direction: column; align-items: flex-start; gap: 12px;
}
.ard-footer__trust li { padding: 6px 11px; font-size: 9px; letter-spacing: 1.2px; }
}
/* =========================================================================
Button labels, centred properly
========================================================================= */
/* Minimog pins every button to `line-height: 43px`. Stack our own padding on
top of that and the 43px line box overflows the content area, dropping the
label toward the bottom — "Add to Bag" was sitting 26px from the top of a
45px button and 5px from the bottom. Centre with flexbox instead of trying
to out-specify the line-height everywhere. */
.ard-btn,
.ard-card__add,
.ard-card__add--out,
.ard-404-search button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce-page button.button {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.3;
height: auto;
min-height: 45px;
}
/* These two are absolutely positioned across the card, so they need to fill
the width rather than shrink-wrap. */
.ard-card__add,
.ard-card__add--out { display: flex; }
/* Inputs cannot take flex children, so they get the line-height fix instead. */
.woocommerce input.button,
.woocommerce-page input.button,
input[type="submit"].button {
line-height: 1.3;
height: auto;
min-height: 45px;
}
/* =========================================================================
The pointer mark
========================================================================= */
/* The mark is a white PNG, which vanished on the cream and white sections —
a drop shadow alone was not enough to hold it. Difference blending inverts
it against whatever sits behind: it reads dark on cream, light on navy, and
never disappears. The shadow goes, since blending ignores it. */
/* The blend has to sit on the fixed wrapper, not the image: the wrapper's
`position: fixed` + `z-index` already open a stacking context, so a blend on
the image inside it would have nothing to mix with. */
.ard-cursor {
mix-blend-mode: difference;
isolation: auto;
}
.ard-cursor img { filter: none; }
/* =========================================================================
Mobile footer density
========================================================================= */
/* Stacked one link per row, the footer ran 1,438px on a 852px screen — nearly
two screens of scrolling past eleven links. Both lists go two-up on phones,
which halves the rows without touching the 38px tap targets, and the block
spacing comes in to match. */
@media (max-width: 639px) {
.ard-footer { padding-top: 52px; }
.ard-footer__col ul,
.ard-footer__split {
grid-template-columns: 1fr 1fr;
column-gap: 18px;
}
.ard-footer__col a { padding: 7px 0; }
.ard-footer__brand img { width: 34px; margin-bottom: 16px; }
.ard-footer__brand p { line-height: 1.7; }
.ard-footer h3 { margin-bottom: 14px; }
.ard-footer__inner { gap: 30px; }
.ard-footer__social { margin-top: 20px; }
.ard-footer__trust { margin-top: 26px; }
.ard-footer__base { margin-top: 32px; padding-top: 18px; }
}
/* The header slides out of the way on a downward scroll and returns on any
upward one. Only on phones — desktop keeps it pinned. */
@media (max-width: 1023px) {
.ard-header { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.ard-header.is-hidden { transform: translateY(-100%); }
.ard-header.is-hidden .ard-search,
.ard-header.is-hidden .ard-drawer { transform: none; }
}
/* =========================================================================
Mobile header — burger, mark, bag
========================================================================= */
/* Four icons in the bar and five in the tab bar meant search, wishlist and bag
all appeared twice. The bar keeps the one control people reach for mid-scroll
— the bag — and leaves search and wishlist to the tab bar below. */
@media (max-width: 860px) {
.ard-header__inner {
padding: 0 14px;
grid-template-columns: 44px 1fr 44px;
}
.ard-nav--left { justify-content: flex-start; }
.ard-nav--right { justify-content: flex-end; gap: 0; }
/* search and wishlist live in the tab bar */
.ard-nav--right [data-ard-search],
.ard-nav--right .ard-wish-link { display: none; }
.ard-brand { justify-self: center; }
.ard-brand img { width: 27px; }
.ard-burger span { width: 18px; }
}
/* =========================================================================
Round twelve — mobile audit fixes
========================================================================= */
/* Minimog sets `height: 45px; line-height: 43px` on every button on the site.
The add-to-cart button was rescued from this once; the accordion and the
gallery thumbnails never were. With border-box that height wins over any
padding written for them, so the accordion's 20px padding did nothing and the
thumbnails' 80px images spilled 36px out of their 45px buttons and printed
over the eyebrow beneath. */
.ard-acc__q,
.ard-pdp__thumb {
height: auto;
min-height: 0;
}
.ard-acc__q { line-height: 1.35; }
.ard-pdp__thumb { line-height: 0; padding: 0; }
/* The marker was a 6.7px text glyph that shrank 25% and slid 1.5px left when it
rotated, so the column of markers stopped lining up. Drawn as two bars it
keeps its size and its centre through the turn. */
.ard-acc__q span {
position: relative;
flex: none;
width: 14px; height: 14px;
font-size: 0;
}
.ard-acc__q span::before,
.ard-acc__q span::after {
content: "";
position: absolute; top: 50%; left: 50%;
background: var(--ard-copper);
}
.ard-acc__q span::before { width: 13px; height: 1.5px; transform: translate(-50%, -50%); }
.ard-acc__q span::after { width: 1.5px; height: 13px; transform: translate(-50%, -50%); }
/* Open state is a minus: drop the upright bar and leave the horizontal one.
Rotating as well turned the remaining bar upright again, which read as a
stray pipe rather than a minus. */
.ard-acc__item.is-open .ard-acc__q span::after { opacity: 0; }
/* The panel jumped its full height in one frame while the marker spent 300ms
rotating. Animating the height keeps the two in step. The content is short
here — the tallest measured panel is 255px — so a generous max-height eases
cleanly without needing an extra wrapper in every template that uses this. */
.ard-acc__a {
/* the base rule uses display:none, which cannot transition */
display: block;
max-height: 0;
overflow: hidden;
padding-bottom: 0;
transition: max-height .32s ease, padding-bottom .32s ease;
}
.ard-acc__item.is-open .ard-acc__a {
max-height: 720px;
padding-bottom: 22px;
}
/* Panel spacing was whatever the content's own HTML happened to give it — the
Specifications paragraph started flush against its question while the lists
got 15px. */
.ard-acc__a > *:first-child { margin-top: 0; }
.ard-acc__a > *:last-child { margin-bottom: 0; }
/* Montserrat loads at 300-600 only, so a (700) in the product
description got a browser-synthesised bold that looked like another font. */
.ard-acc__a strong, .ard-acc__a b { font-weight: 600; }
/* The social icons sat 9px left of their circles' centres. `.ard-footer__social a`
centres them with flexbox, but the later touch-target rule `.ard-footer a
{ display: inline-block; padding: 8px 0 }` has identical specificity, so it
won on order alone and the anchor stopped being a flex container. */
.ard-footer .ard-footer__social a {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 44px; height: 44px;
}
/* The copyright and legal bar was 127px tall for two lines that measure 277px
against 345px available. */
@media (max-width: 860px) {
.ard-footer__base {
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
padding-bottom: 16px;
}
}
/* The chips wrapped 4 + 1, stranding "Net Banking" with 243px of space beside
it. A three-column grid fits the widest chip and lands a clean 3 + 2. */
@media (max-width: 1023px) {
.ard-footer__trust ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.ard-footer__trust li { text-align: center; font-size: 10px; }
}
/* "GET CODE" sat 6.5px above the email line and stopped 35px short of the
underline — Minimog's default button padding and height leaking in. */
.ard-signup { align-items: center; }
.ard-signup button {
height: auto;
min-height: 44px;
line-height: 1.2;
padding: 10px 0 10px 16px;
}
/* Three near-identical gaps climbing in 6px steps, where the four blocks above
them step evenly at 30px. */
@media (max-width: 639px) {
.ard-footer__social { margin-top: 30px; }
.ard-footer__trust { margin-top: 30px; }
.ard-footer__base { margin-top: 30px; padding-top: 18px; }
}
/* The footer used its own navy while the tab bar below it used the brand token.
The 2px band between them was the body showing through a reserve that was 2px
taller than the bar — so match the reserve rather than painting the whole
body navy, which would leave dark text on dark ground anywhere a section does
not paint its own background (a blog post, for one). */
.ard-footer { background: var(--ard-navy); }
body { background: var(--ard-cream); }
/* 4.19:1 against cream, under the 4.5:1 minimum, on every muted label. */
:root { --ard-ink-soft: #6e6963; }
.ard-search input { flex: 1 1 auto; min-width: 0; }
.ard-search button[type="submit"] {
padding: 0 0 0 14px;
height: auto; min-height: 44px; line-height: 1.2;
}
/* The close sits inside the band, centred on the field row. */
.ard-search__close {
position: absolute;
top: 30px; right: -10px;
width: 44px; height: 48px;
background: none; border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 0;
}
.ard-search__close::before,
.ard-search__close::after {
content: "";
position: absolute;
width: 16px; height: 1.5px;
background: rgba(232, 228, 223, .7);
transition: background .2s;
}
.ard-search__close:hover::before,
.ard-search__close:hover::after { background: #fff; }
.ard-search__close::before { transform: rotate(45deg); }
.ard-search__close::after { transform: rotate(-45deg); }
/* Account, order tracking and wishlist sat nowhere in mobile navigation. The
drawer had roughly 305px of empty panel below the nav, which is where a
secondary utility group belongs. */
.ard-drawer__utility {
display: flex; flex-direction: column;
margin-top: 28px; padding-top: 22px;
border-top: 1px solid rgba(232, 228, 223, .14);
}
.ard-drawer__utility a {
font-family: var(--ard-sans);
font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
color: rgba(232, 228, 223, .68);
padding: 12px 0;
}
.ard-drawer__utility a:hover { color: #fff; }
/* The drawer went from display:none straight to visible, so its transition
never ran — it hard-cut rather than sliding. */
.ard-drawer__panel { transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.ard-drawer.is-open .ard-drawer__panel { transform: translateX(0); }
.ard-drawer { background: rgba(12, 17, 26, .8); }
/* The inquiry dropdown had `appearance: none` with no replacement arrow, so it
looked like a plain text box with "Select an inquiry type" typed into it. */
.ard-field select,
.ard-form select,
.ard-contact__form select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6963' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
padding-right: 42px;
}
/* The message box showed the native resize grabber on a phone. */
@media (max-width: 1023px) {
.ard-field textarea, .ard-form textarea { resize: none; }
}
@media (max-width: 1023px) {
/* Seven category pills wrapped onto three rows and stranded "Tote" alone on
the last one, taking 156px. A single row that scrolls sideways is the
phone convention and costs 45px. */
.ard-shopbar__cats {
flex-wrap: nowrap;
/* width has to be pinned: a nowrap flex container with no constraint
grows to fit its children and takes the page with it */
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
scroll-snap-type: x proximity;
}
.ard-shopbar__cats::-webkit-scrollbar { display: none; }
.ard-shopbar__cats a { flex: 0 0 auto; scroll-snap-align: start; }
/* The shop hero took 422px — half a phone screen — to show two words, so a
visitor scrolled roughly 700px before meeting a bag. */
.ard-pagehero--shop { height: auto; min-height: 0; padding: 52px 0 48px; }
.ard-pagehero--shop h1 { font-size: 34px; line-height: 1.15; margin-bottom: 14px; }
.ard-pagehero--shop p { font-size: 13px; }
}
/* =========================================================================
Round fourteen — cross-check fixes
========================================================================= */
/* `.ard-btn` never declared a radius, so Minimog's default reached whichever
element it was not overriding: the same class came out square on an and
5px rounded on a