/**
* TRZ — design system.
*
* Direction: quiet luxury. One typeface at light and regular weights, tiny
* widely-tracked capitals for every label, hairline rules, underline-only
* inputs, a warm near-black ground and a single desaturated green used as
* a signal, never as decoration. Established fashion houses are recognised
* by how little they do; so is this.
*
* 1. Tokens 8. Header, drawer, search
* 2. Fonts 9. Hero
* 3. Base 10. Sections and collection tiles
* 4. Type 11. Product card
* 5. Layout 12. Lookbook, values, editorial
* 6. Buttons, links 13. Product page
* 7. Forms, badges 14. Order form
* 15. Shop archive
* 16. WooCommerce: cart, checkout, account, notices
* 17. Footer
* 18. Motion
*
* Every rule uses logical properties (inline-start/end, not left/right), so
* the layout mirrors correctly if the site language is ever set to Arabic.
*
* @package TRZ
*/
/* ============================================================
* 1. Tokens
* ============================================================ */
:root {
/*
* Warm near-black, never #000. A few degrees of warmth in the darks is
* the difference between "expensive" and "dark mode".
*/
--trz-ink: #080807; /* Page — 30% darker than it started (#0C0B0A) */
--trz-ink-2: #131211; /* Raised: header on scroll, drawer, panels */
--trz-ink-3: #1B1A18; /* Image wells, fields */
--trz-text: #EDE8DF; /* 16.4:1 on ink */
--trz-text-2: #A8A196; /* Secondary copy — 7.8:1 */
--trz-text-3: #8C867C; /* Labels, meta — 5.5:1, AA at any size */
--trz-line: rgba(237, 232, 223, 0.09);
--trz-line-2: rgba(237, 232, 223, 0.16);
--trz-line-3: rgba(237, 232, 223, 0.30);
/*
* Jade. Same hue as the old signal green (144° vs 145°) at a quarter of
* the saturation: still unmistakably TRZ, no longer neon. 8.4:1 on ink,
* so it can carry small text; ink on it is 8.4:1, so it can be a fill.
* Used for state and signal only — never a background, never body copy.
*/
--trz-jade: #7FB595;
--trz-jade-soft: rgba(127, 181, 149, 0.14);
--trz-error: #E08A74; /* 7.4:1 on ink */
--trz-font: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--trz-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', sans-serif;
/* 4px spacing scale */
--trz-1: 4px; --trz-2: 8px; --trz-3: 12px; --trz-4: 16px;
--trz-5: 24px; --trz-6: 32px; --trz-7: 48px; --trz-8: 64px;
--trz-9: 96px; --trz-10: 144px;
--trz-maxw: 1440px;
--trz-gutter: clamp(16px, 3.4vw, 48px);
--trz-header: 64px;
--trz-radius: 0;
--trz-round: 14px; /* Boxed fields and the cards around them */
--trz-ease: cubic-bezier(0.22, 1, 0.36, 1);
--trz-fast: 240ms var(--trz-ease);
--trz-slow: 700ms var(--trz-ease);
}
@media (max-width: 899px) {
:root { --trz-header: 56px; }
}
/* ============================================================
* 2. Fonts — self-hosted, subset, swap
* ============================================================ */
@font-face {
font-family: 'Host Grotesk';
src: url('../fonts/host-grotesk-latin-var.woff2') format('woff2-variations');
font-weight: 300 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Host Grotesk';
src: url('../fonts/host-grotesk-latin-ext-var.woff2') format('woff2-variations');
font-weight: 300 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arabic is only ever requested where Arabic glyphs render: the order form
and the checkout. Nothing on a browsing page downloads it. */
@font-face {
font-family: 'IBM Plex Sans Arabic';
src: url('../fonts/plex-arabic-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
src: url('../fonts/plex-arabic-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
/* ============================================================
* 3. Base
* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* The browser's own controls — checkboxes, the password eye, select
pop-ups, scrollbars — in their dark forms, not white on black. */
color-scheme: dark;
background: var(--trz-ink);
scrollbar-color: var(--trz-line-3) var(--trz-ink);
/* Reserve the scrollbar's width permanently, so locking scroll under a
drawer does not shove the whole page sideways. */
scrollbar-gutter: stable;
}
/* A drawer is open: the page behind it stays put. */
html.has-layer { overflow: hidden; }
/* No grey flash on tap, and no double-tap-zoom wait before a tap
registers: taps land the moment the finger lifts. */
a, button, input, select, label, summary {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
body {
margin: 0;
background: var(--trz-ink);
color: var(--trz-text);
font-family: var(--trz-font);
font-size: 15px;
font-weight: 400;
line-height: 1.65;
font-synthesis: none;
font-variant-numeric: lining-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--trz-4); }
button { font: inherit; color: inherit; }
::selection { background: var(--trz-jade-soft); color: var(--trz-text); }
:focus-visible {
outline: 1px solid var(--trz-jade);
outline-offset: 3px;
}
[lang="ar"] { font-family: var(--trz-arabic); letter-spacing: 0; text-transform: none; }
.trz-sr, .screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.trz-skip {
position: absolute; top: -100px; inset-inline-start: var(--trz-4); z-index: 300;
background: var(--trz-text); color: var(--trz-ink);
padding: var(--trz-3) var(--trz-4);
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.trz-skip:focus { top: var(--trz-4); }
/* ============================================================
* 4. Type
*
* Light weights at display sizes, regular for reading, and capitals only
* at 10–11px with wide tracking. Nothing is bold and nothing shouts: the
* hierarchy comes from size and space.
* ============================================================ */
h1, h2, h3, h4 {
font-family: var(--trz-font);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 var(--trz-4);
text-wrap: balance;
}
.trz-display {
font-size: clamp(2.6rem, 6.2vw, 5.6rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.035em;
}
.trz-title {
font-size: clamp(1.75rem, 3.2vw, 2.75rem);
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.025em;
}
.trz-subtitle {
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.01em;
}
/* The workhorse: every eyebrow, nav item, button and field label. */
.trz-label {
display: block;
margin: 0;
font-size: 10.5px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--trz-text-3);
}
.trz-label--text { color: var(--trz-text); }
.trz-label--jade { color: var(--trz-jade); }
.trz-lede {
font-size: 15px;
line-height: 1.75;
color: var(--trz-text-2);
max-width: 46ch;
}
.trz-num { font-variant-numeric: lining-nums tabular-nums; }
/* ============================================================
* 5. Layout
* ============================================================ */
.trz-wrap {
max-width: var(--trz-maxw);
margin-inline: auto;
padding-inline: var(--trz-gutter);
}
.trz-section { padding-block: clamp(var(--trz-8), 8vw, 120px); }
.trz-section--tight { padding-block: clamp(var(--trz-7), 5vw, var(--trz-8)); }
.trz-section--raised { background: var(--trz-ink-2); }
.trz-section--rule { border-top: 1px solid var(--trz-line); }
/* Section header: title on the left, a quiet link on the right. */
.trz-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--trz-5);
margin-bottom: clamp(var(--trz-6), 4vw, var(--trz-7));
}
.trz-head .trz-title { margin: var(--trz-3) 0 0; }
.trz-head--center {
flex-direction: column;
align-items: center;
text-align: center;
}
/* Product grid: the photographs sit close, a hairline apart, the way the
big houses lay out a collection; each row keeps room for its text. */
.trz-grid {
display: grid;
gap: var(--trz-6) var(--trz-2);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .trz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--trz-7) var(--trz-2); } }
@media (min-width: 1200px) { .trz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ============================================================
* 6. Buttons and links
* ============================================================ */
.trz-btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--trz-3);
min-height: 52px;
padding: 0 34px;
border: 1px solid var(--trz-text);
border-radius: var(--trz-radius);
background: var(--trz-text);
color: var(--trz-ink);
font-family: var(--trz-font);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: opacity var(--trz-fast), background var(--trz-fast), color var(--trz-fast), border-color var(--trz-fast);
}
.trz-btn:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { opacity: 0.86; background: var(--trz-text); color: var(--trz-ink); }
.trz-btn--ghost {
background: transparent;
color: var(--trz-text);
border-color: var(--trz-line-3);
}
.trz-btn--ghost:hover { opacity: 1; background: transparent; color: var(--trz-text); border-color: var(--trz-text); }
.trz-btn--block { width: 100%; }
/* A press is felt: controls give way a fraction under the finger. */
.trz-btn:active,
.trz-size:active,
.trz-swatch:active,
.trz-qty__btn:active,
.trz-icon-btn:active { transform: scale(0.97); }
.trz-btn, .trz-size, .trz-swatch, .trz-qty__btn, .trz-icon-btn { transition-property: opacity, background, color, border-color, box-shadow, transform; }
.trz-btn[disabled],
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: 0.4; cursor: not-allowed; }
.trz-btn.is-sending { opacity: 0.6; }
.trz-btn.is-sending .trz-btn__label::after { content: '…'; }
/* Text link with a hairline underline that draws in on hover. */
.trz-link {
display: inline-flex;
align-items: center;
gap: var(--trz-2);
padding-bottom: 5px;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--trz-text);
background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
transition: background-size var(--trz-slow), color var(--trz-fast);
white-space: nowrap;
}
.trz-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.trz-link--muted { color: var(--trz-text-2); }
.trz-arrow { width: 14px; height: 14px; flex: none; transition: transform var(--trz-fast); }
[dir="rtl"] .trz-arrow { transform: scaleX(-1); }
a:hover > .trz-arrow { transform: translateX(3px); }
[dir="rtl"] a:hover > .trz-arrow { transform: scaleX(-1) translateX(3px); }
/* ============================================================
* 7. Forms and badges
*
* Underline-only fields. A box around every input is the loudest thing on
* a form; a single hairline is enough to say "type here".
* ============================================================ */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], textarea, select,
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
width: 100%;
min-height: 48px;
padding: 12px 0;
border: 0;
border-bottom: 1px solid var(--trz-line-3);
border-radius: 0;
background: transparent;
color: var(--trz-text);
font-family: var(--trz-font);
font-size: 16px; /* 16px floor, or iOS Safari zooms the page on focus */
line-height: 1.4;
transition: border-color var(--trz-fast);
appearance: none;
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--trz-text-3); opacity: 1; }
input:focus, select:focus, textarea:focus,
.woocommerce form .form-row .input-text:focus { outline: none; border-bottom-color: var(--trz-text); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
select {
padding-inline-end: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23A8A196' stroke-width='1.2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2px center;
cursor: pointer;
}
[dir="rtl"] select { background-position: left 2px center; }
select:disabled { color: var(--trz-text-3); cursor: not-allowed; }
select option { background: var(--trz-ink-2); color: var(--trz-text); }
.trz-field { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.trz-field--wide { grid-column: 1 / -1; }
.trz-field label,
.woocommerce form .form-row label {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--trz-2);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--trz-text-3);
line-height: 1.5;
}
.trz-field label [lang="ar"] { font-size: 13px; color: var(--trz-text-3); }
.trz-field__optional { font-style: normal; letter-spacing: 0.06em; text-transform: lowercase; opacity: 0.8; }
.trz-field__error,
.woocommerce form .form-row.woocommerce-invalid label { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--trz-error); margin-top: var(--trz-1); }
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-bottom-color: var(--trz-error); }
.trz-badge {
display: inline-block;
padding: 5px 9px;
font-size: 9.5px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--trz-text);
/* Solid, not frosted: a grid holds dozens of badges, and every blurred
one is re-computed on every scroll frame — the first thing a low-end
phone drops frames on. At this size the difference is invisible. */
background: rgba(8, 8, 7, 0.74);
}
.trz-badge--sale { color: var(--trz-jade); }
/* ============================================================
* 8. Header, drawer, search
* ============================================================ */
.trz-announce {
position: relative;
padding: 10px var(--trz-7);
background: var(--trz-ink-2);
border-bottom: 1px solid var(--trz-line);
text-align: center;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--trz-jade);
}
.trz-announce a:hover { color: var(--trz-text); }
/* One line on a phone, always: a two-line bar pushes the product down. */
@media (max-width: 599px) {
.trz-announce {
padding-inline: var(--trz-4) var(--trz-7);
font-size: 9.5px;
letter-spacing: 0.16em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.trz-announce__close {
position: absolute;
inset-inline-end: var(--trz-3);
top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
display: grid; place-items: center;
padding: 0; border: 0; background: none;
color: var(--trz-text-3);
cursor: pointer;
}
.trz-announce__close:hover { color: var(--trz-text); }
.trz-announce__close svg { width: 14px; height: 14px; }
.trz-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(8, 8, 7, 0.96);
border-bottom: 1px solid transparent;
transition: background var(--trz-fast), border-color var(--trz-fast);
}
/* Once the page moves, the bar frosts and gains its rule. */
.trz-header[data-scrolled="true"] {
background: rgba(8, 8, 7, 0.82);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
border-bottom-color: var(--trz-line);
}
body.admin-bar .trz-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .trz-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .trz-header { top: 0; } }
/* Three columns so the wordmark is centred on the page, not between the
nav and the icons. */
.trz-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
min-height: var(--trz-header);
}
.trz-header__start { display: flex; align-items: center; gap: var(--trz-2); }
.trz-header__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--trz-1); }
.trz-logo {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.42em;
/* Tracking adds space after the last letter too; this pulls the word
back to optical centre. */
margin-inline-end: -0.42em;
text-transform: uppercase;
white-space: nowrap;
}
.trz-logo img,
.trz-logo .custom-logo { max-height: 30px; width: auto; }
/* An image logo: set to the height of the type around it, and without the
letter-spacing correction a text wordmark needs. Like every logo on the
site, it is drawn white whatever colour the uploaded file is: everywhere
it sits is dark. */
.trz-logo--image { margin-inline-end: 0; letter-spacing: 0; }
.trz-logo--image img { height: 22px; max-height: none; filter: brightness(0) invert(1); }
@media (max-width: 899px) { .trz-logo--image img { height: 18px; } }
.trz-nav { display: none; }
.trz-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 1.6vw, 28px); }
.trz-nav a {
position: relative;
display: block;
padding-block: var(--trz-2);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
color: var(--trz-text-2);
transition: color var(--trz-fast);
}
/* A laptop or a tablet held sideways: the links sit a little closer. */
@media (min-width: 900px) and (max-width: 1279px) {
.trz-nav ul { gap: var(--trz-4); }
.trz-nav a { letter-spacing: 0.16em; }
}
.trz-nav a::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: 2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--trz-fast);
}
.trz-nav a:hover,
.trz-nav .current-menu-item > a,
.trz-nav a[aria-current] { color: var(--trz-text); }
.trz-nav .current-menu-item > a::after,
.trz-nav a[aria-current]::after { transform: scaleX(1); }
@media (min-width: 900px) {
.trz-nav { display: block; }
.trz-burger { display: none !important; }
/* More links than fit beside the logo (site.js measures): the menu
button instead, rather than links running into the logo. */
.trz-header.is-crowded .trz-nav { display: none; }
.trz-header.is-crowded .trz-burger { display: grid !important; }
}
.trz-icon-btn,
.trz-burger {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--trz-text-2);
cursor: pointer;
transition: color var(--trz-fast);
}
.trz-icon-btn:hover, .trz-burger:hover { color: var(--trz-text); }
.trz-icon-btn svg, .trz-burger svg { width: 19px; height: 19px; }
@media (max-width: 899px) {
.trz-hide-mobile { display: none !important; }
}
.trz-cart-count {
position: absolute;
top: 7px;
inset-inline-end: 5px;
min-width: 15px;
height: 15px;
padding: 0 4px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--trz-jade);
color: var(--trz-ink);
font-size: 9px;
font-weight: 600;
line-height: 1;
}
.trz-cart-count[hidden] { display: none; }
.trz-cart-count.is-bumped { animation: trz-bump 600ms var(--trz-ease); }
@keyframes trz-bump {
30% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* Search row — drops out of the header, one underline field. */
.trz-search {
border-top: 1px solid var(--trz-line);
background: var(--trz-ink-2);
}
.trz-search[hidden] { display: none; }
.trz-search form {
display: flex;
align-items: center;
gap: var(--trz-4);
padding-block: var(--trz-4);
}
.trz-search input[type="search"] { font-size: 18px; font-weight: 300; }
.trz-search button { flex: none; }
/* Drawer — enters from the side the burger is on. */
.trz-drawer {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: 100001;
width: min(88vw, 420px);
display: flex;
flex-direction: column;
padding: var(--trz-5) var(--trz-5) var(--trz-6);
background: var(--trz-ink-2);
border-inline-end: 1px solid var(--trz-line);
transform: translateX(-100%);
/* visibility flips only after the slide out has finished: a drawer that
is merely moved off screen still takes keyboard focus. */
visibility: hidden;
transition: transform 560ms var(--trz-ease), visibility 0s linear 560ms;
overflow-y: auto;
overscroll-behavior: contain;
outline: none;
will-change: transform;
}
[dir="rtl"] .trz-drawer { transform: translateX(100%); }
.trz-drawer[data-open="true"],
[dir="rtl"] .trz-drawer[data-open="true"] {
transform: translateX(0);
visibility: visible;
transition: transform 560ms var(--trz-ease), visibility 0s;
}
.trz-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--trz-7); }
.trz-drawer__list { list-style: none; margin: 0; padding: 0; }
.trz-drawer__list a {
display: block;
padding-block: var(--trz-3);
font-size: 26px;
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--trz-text);
transition: color var(--trz-fast), padding var(--trz-fast);
}
.trz-drawer__list a:hover { color: var(--trz-text-2); padding-inline-start: var(--trz-2); }
.trz-drawer__foot { margin-top: auto; padding-top: var(--trz-7); display: grid; gap: var(--trz-3); }
.trz-scrim {
position: fixed;
inset: 0;
/* Above WordPress's admin bar (99999): while a drawer is open, the whole
page — toolbar included — sits behind the scrim. */
z-index: 100000;
background: rgba(8, 8, 7, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity var(--trz-slow);
}
.trz-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
/* ---- Bag drawer --------------------------------------------------------
* Enters from the end side. Its list scrolls on its own while the total
* and the actions stay pinned; overscroll-behavior stops a flick at the end
* of the list from scrolling the page behind it.
* --------------------------------------------------------------------- */
.trz-bag {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 100001;
width: min(92vw, 440px);
display: flex;
flex-direction: column;
background: var(--trz-ink-2);
border-inline-start: 1px solid var(--trz-line);
transform: translateX(100%);
visibility: hidden;
transition: transform 560ms var(--trz-ease), visibility 0s linear 560ms;
outline: none;
will-change: transform;
}
[dir="rtl"] .trz-bag { transform: translateX(-100%); }
.trz-bag[data-open="true"],
[dir="rtl"] .trz-bag[data-open="true"] {
transform: none;
visibility: visible;
transition: transform 560ms var(--trz-ease), visibility 0s;
}
.trz-bag__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--trz-4);
min-height: var(--trz-header);
padding-inline: var(--trz-5) var(--trz-3);
border-bottom: 1px solid var(--trz-line);
flex: none;
}
.trz-bag__count { color: var(--trz-text-3); letter-spacing: 0.1em; }
.trz-bag__body,
.trz-bag__body > .widget_shopping_cart_content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.trz-bag__items {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
margin: 0;
padding: 0;
}
.trz-bag__item {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto;
gap: var(--trz-4);
align-items: start;
padding: var(--trz-4) var(--trz-5);
border-bottom: 1px solid var(--trz-line);
transition: opacity 300ms var(--trz-ease);
}
.trz-bag__item.is-removing { opacity: 0.3; pointer-events: none; }
.trz-bag__thumb {
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--trz-ink-3);
}
.trz-bag__thumb img { width: 100%; height: 100%; object-fit: cover; }
.trz-bag__meta p { margin: 0; max-width: none; }
.trz-bag__name { font-size: 14px; line-height: 1.35; }
.trz-bag__name a:hover { color: var(--trz-text-2); }
.trz-bag__options { margin-top: 2px !important; font-size: 12.5px; color: var(--trz-text-3); }
.trz-bag__line { margin-top: var(--trz-2) !important; font-size: 13px; color: var(--trz-text-2); font-variant-numeric: tabular-nums; }
.trz-bag__remove {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--trz-text-3);
padding-block: 2px;
border-bottom: 1px solid transparent;
transition: color var(--trz-fast), border-color var(--trz-fast);
}
.trz-bag__remove:hover { color: var(--trz-text); border-bottom-color: var(--trz-text); }
.trz-bag__foot {
flex: none;
display: grid;
gap: var(--trz-3);
padding: var(--trz-5);
border-top: 1px solid var(--trz-line-2);
padding-bottom: calc(var(--trz-5) + env(safe-area-inset-bottom));
}
.trz-bag__total {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0;
font-variant-numeric: tabular-nums;
}
.trz-bag__total span { font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.trz-bag__total strong { font-size: 17px; font-weight: 400; }
.trz-bag__note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--trz-text-3); max-width: none; }
.trz-bag__actions { display: grid; gap: var(--trz-2); margin-top: var(--trz-1); }
.trz-bag__empty,
.trz-bag__error {
flex: 1;
display: grid;
place-content: center;
justify-items: center;
gap: var(--trz-4);
padding: var(--trz-7) var(--trz-5);
text-align: center;
color: var(--trz-text-2);
}
.trz-bag__empty .trz-subtitle { margin: 0; color: var(--trz-text); }
/* While the bag loads: two quiet rows, not a spinner. */
.trz-bag__skeleton { display: grid; gap: var(--trz-3); padding: var(--trz-4) var(--trz-5); }
.trz-bag__skeleton span {
display: block;
height: 90px;
background: linear-gradient(90deg, var(--trz-ink-3) 0%, #232220 50%, var(--trz-ink-3) 100%);
background-size: 200% 100%;
animation: trz-shimmer 1.3s linear infinite;
}
@keyframes trz-shimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
/* ============================================================
* 9. Hero
* ============================================================ */
.trz-hero {
position: relative;
display: grid;
min-height: min(88svh, 920px);
overflow: hidden;
background: var(--trz-ink-2);
isolation: isolate;
}
@media (max-width: 899px) { .trz-hero { min-height: 78svh; } }
.trz-hero__media,
.trz-hero__body { grid-area: 1 / 1; }
.trz-hero__media { position: relative; z-index: -1; }
.trz-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
/* The point every screen keeps in view: Customizer → Hero, "Photo focus". */
object-position: var(--trz-hero-x, 50%) var(--trz-hero-y, 30%);
}
/* A long, soft fall to ink so the type always has somewhere to sit,
whatever the photograph does. It reaches as high as the eyebrow: with
the subject centred, the type lands on the model, not on a dark floor. */
.trz-hero__media::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(8, 8, 7, 0.35) 0%, rgba(8, 8, 7, 0) 28%),
linear-gradient(0deg, rgba(8, 8, 7, 0.88) 0%, rgba(8, 8, 7, 0.5) 32%, rgba(8, 8, 7, 0.16) 56%, rgba(8, 8, 7, 0) 74%);
}
/* A halo too soft to see as a shadow, for type that crosses skin or sky. */
.trz-hero:not(.trz-hero--plain) :is(.trz-hero__title, .trz-hero__text) {
text-shadow: 0 1px 18px rgba(8, 8, 7, 0.55);
}
/* Small type needs the halo drawn in close to read over skin. */
.trz-hero:not(.trz-hero--plain) .trz-hero__eyebrow {
text-shadow: 0 0 6px rgba(8, 8, 7, 0.9), 0 0 18px rgba(8, 8, 7, 0.6);
}
/* No photograph yet: a lit ground instead of an empty box. */
.trz-hero--plain .trz-hero__media {
background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(127, 181, 149, 0.10), transparent 70%), var(--trz-ink-2);
}
.trz-hero__body {
align-self: end;
justify-self: center;
width: 100%;
max-width: 880px;
padding: 0 var(--trz-gutter) clamp(var(--trz-8), 9vh, var(--trz-9));
text-align: center;
}
.trz-hero--plain .trz-hero__body { align-self: center; padding-block: var(--trz-9); }
.trz-hero__title { margin: var(--trz-4) 0 0; }
.trz-hero__text {
margin: var(--trz-4) auto 0;
max-width: 44ch;
font-size: 15px;
line-height: 1.7;
color: var(--trz-text-2);
}
.trz-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--trz-3);
margin-top: var(--trz-6);
}
/* Stacked on a phone, the two actions share one width rather than each
hugging its own label. */
@media (max-width: 599px) {
.trz-hero__actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
}
/*
* The home hero: the photograph blurred and dimmed, the logo large in the
* middle, and a soft circle of the sharp photograph (.trz-hero__lens) that
* follows the cursor — on a phone it drifts on its own. hero.js moves the
* circle one way and the photograph inside it the other, both by
* transform, so the photograph never moves and nothing repaints.
*
* The blurred copy is not scaled: it must line up exactly with the sharp
* one, or the circle would show a second, shifted picture. The price is a
* blur that softens into the dark ground at the edges — a vignette.
*/
.trz-hero--reveal { min-height: min(92svh, 980px); background: var(--trz-ink); }
@media (max-width: 899px) { .trz-hero--reveal { min-height: 86svh; } }
.trz-hero--reveal .trz-hero__media { overflow: hidden; }
.trz-hero--reveal .trz-hero__media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* On a phone or tablet the photograph is shown sharp, a little darkened so
the logo stays clear on it; the blur and the cursor's patch are a
desktop thing (a mouse, and room), as in hero.js. */
.trz-hero__blur { filter: brightness(0.74) saturate(0.95); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
.trz-hero__blur { filter: blur(clamp(12px, 1.8vw, 26px)) brightness(0.62) saturate(0.85); }
}
/* A vignette under the circle, so the logo always has a dark centre to sit on. */
.trz-hero--reveal .trz-hero__media::after {
z-index: 0;
background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(8, 8, 7, 0.1), rgba(8, 8, 7, 0.55));
}
/* Not a circle: a soft, uneven blob. hero.js turns it slowly, lets it
breathe, and stretches it along the direction the cursor moves — all by
transform, with the photograph inside given the exact inverse, so the
picture itself never moves or warps. */
.trz-hero__lens {
--lens: clamp(240px, 32vw, 470px);
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: var(--lens);
height: var(--lens);
overflow: hidden;
opacity: 0;
transform: translate3d(-200%, -200%, 0);
transform-origin: 0 0;
transition: opacity 900ms var(--trz-ease);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M113.1 34.3C131.1 35 158.3 58.9 174 69.4C189.7 79.9 206.6 81.8 207.1 97.3C207.6 112.9 185.5 146.1 176.8 162.6C168.1 179.1 171.3 189.8 154.9 196.4C138.5 203 93.8 208.2 78.4 202.1C63 196 69.5 177.7 62.4 159.7C55.3 141.8 35.2 110.2 35.8 94.5C36.4 78.7 53.1 75.2 65.9 65.2C78.8 55.1 95.1 33.6 113.1 34.3Z' fill='%23000' filter='url%28%23s%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M113.1 34.3C131.1 35 158.3 58.9 174 69.4C189.7 79.9 206.6 81.8 207.1 97.3C207.6 112.9 185.5 146.1 176.8 162.6C168.1 179.1 171.3 189.8 154.9 196.4C138.5 203 93.8 208.2 78.4 202.1C63 196 69.5 177.7 62.4 159.7C55.3 141.8 35.2 110.2 35.8 94.5C36.4 78.7 53.1 75.2 65.9 65.2C78.8 55.1 95.1 33.6 113.1 34.3Z' fill='%23000' filter='url%28%23s%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
will-change: transform;
pointer-events: none;
}
.trz-hero__lens.is-on { opacity: 1; }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
.trz-hero__lens { display: none; }
}
/* Sized to the whole hero by hero.js, so it lines up with the blur. */
.trz-hero--reveal .trz-hero__lens .trz-hero__sharp { max-width: none; transform-origin: 0 0; will-change: transform; }
.trz-hero--reveal .trz-hero__body {
align-self: center;
justify-self: center;
max-width: none;
padding: var(--trz-8) var(--trz-gutter);
pointer-events: none;
}
.trz-hero__logo { margin: 0; line-height: 0; }
.trz-hero__logo img {
width: min(78vw, 880px);
height: auto;
margin-inline: auto;
filter: blur(0) brightness(0) invert(1); /* White, whatever the file's colour. */
animation: trz-hero-logo-img 1600ms var(--trz-ease) 120ms both;
}
.trz-hero__wordmark {
display: inline-block;
font-size: clamp(4.5rem, 16vw, 13rem);
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1;
color: var(--trz-text);
animation: trz-hero-logo 1600ms var(--trz-ease) 120ms both;
}
.trz-hero__tagline {
margin: clamp(var(--trz-4), 3vw, var(--trz-6)) 0 0;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(237, 232, 223, 0.82);
text-shadow: 0 0 14px rgba(8, 8, 7, 0.6);
text-wrap: balance;
animation: trz-hero-line 1100ms var(--trz-ease) 700ms both;
}
@media (max-width: 599px) { .trz-hero__tagline { font-size: 10px; letter-spacing: 0.24em; } }
@keyframes trz-hero-logo {
from { opacity: 0; filter: blur(14px); transform: scale(1.035); }
}
/* The same arrival for the logo image, keeping it white all the way. */
@keyframes trz-hero-logo-img {
from { opacity: 0; filter: blur(14px) brightness(0) invert(1); transform: scale(1.035); }
}
@keyframes trz-hero-line {
from { opacity: 0; transform: translateY(10px); }
}
/* No buttons: a quiet cue that there is more below. */
.trz-hero__scroll {
position: absolute;
left: 50%;
bottom: clamp(var(--trz-4), 4vh, var(--trz-6));
display: grid;
justify-items: center;
gap: var(--trz-3);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--trz-text-2);
transform: translateX(-50%);
animation: trz-hero-line 1100ms var(--trz-ease) 1100ms both;
}
.trz-hero__scroll:hover { color: var(--trz-text); }
.trz-hero__scroll-line {
position: relative;
width: 1px;
height: 44px;
overflow: hidden;
background: rgba(237, 232, 223, 0.18);
}
.trz-hero__scroll-line::after {
content: '';
position: absolute;
inset: 0;
background: var(--trz-text);
transform: translateY(-100%);
animation: trz-scroll-cue 2400ms var(--trz-ease) 1600ms infinite;
}
@keyframes trz-scroll-cue {
0% { transform: translateY(-100%); }
60%, 100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
.trz-hero__logo img,
.trz-hero__wordmark,
.trz-hero__tagline,
.trz-hero__scroll,
.trz-hero__scroll-line::after { animation: none; }
.trz-hero__lens { display: none; }
}
/* ============================================================
* 10. Collection tiles
* ============================================================ */
.trz-tiles {
display: grid;
gap: var(--trz-3);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .trz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .trz-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trz-tile {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--trz-ink-3);
isolation: isolate;
}
.trz-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: transform 1.2s var(--trz-ease);
}
.trz-tile::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(8, 8, 7, 0.8) 0%, rgba(8, 8, 7, 0.45) 26%, rgba(8, 8, 7, 0) 56%);
}
.trz-tile:hover img { transform: scale(1.035); }
/* The muted label tone is set for ink; on a pale photograph it vanishes. */
.trz-tile__body .trz-label { color: rgba(237, 232, 223, 0.8); }
.trz-tile__body {
position: absolute;
inset-inline: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--trz-4);
padding: clamp(var(--trz-4), 2.4vw, var(--trz-6));
}
.trz-tile__name {
margin: var(--trz-2) 0 0;
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.05;
}
/* ============================================================
* 11. Product card
*
* The photograph on its own panel with a + in the corner; under it, name
* and price on one line, the colour, then the other colours as swatches.
* Which parts show is set in TRZ Design (inc/design.php) as classes on
* . The markup always carries every part, so the cached page and the
* admin preview are the same card.
* ============================================================ */
.trz-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.trz-card__media {
position: relative;
aspect-ratio: 4 / 5; /* Enforced: a mixed catalogue only looks deliberate cropped the same way */
overflow: hidden;
background: var(--trz-card-panel, var(--trz-ink-3));
}
.trz-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--trz-slow), transform 1.2s var(--trz-ease);
}
/* Cut-out packshots: the whole garment, centred on the panel colour. */
.trz-cards--contain .trz-card__media img { object-fit: contain; padding: 9% 11%; }
/* Second photograph fades in on hover; single-image products breathe
instead. Both are slow on purpose. A card showing another colour drops
its second photograph, which belongs to the first colour. */
.trz-card__alt { opacity: 0; }
.trz-card.has-alt:hover .trz-card__alt { opacity: 1; }
.trz-card:not(.has-alt) .trz-card__alt,
.trz-cards--no-alt .trz-card__alt { display: none; }
.trz-card:not(.has-alt):hover .trz-card__img,
.trz-cards--no-alt .trz-card:hover .trz-card__img { transform: scale(1.03); }
.trz-card__badges {
position: absolute;
top: var(--trz-3);
inset-inline-start: var(--trz-3);
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--trz-1);
}
.trz-cards--no-badges .trz-card__badges { display: none; }
/*
* Quick add. The + reads on anything: on a pale panel its disc disappears
* and only the cross shows, on a photograph the disc carries it. Above the
* card's link (z-index 3), like the swatches, so it is its own target.
*/
.trz-card__plus {
position: absolute;
inset-inline-end: var(--trz-2);
bottom: var(--trz-2);
z-index: 5;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(243, 242, 239, 0.9);
color: #080807;
cursor: pointer;
transition: background var(--trz-fast);
}
.trz-card__plus:hover { background: #FFFFFF; }
.trz-card__plus:focus-visible { outline: 1px solid var(--trz-text); outline-offset: 2px; }
.trz-card__plus svg {
grid-area: 1 / 1;
width: 18px;
height: 18px;
transition: transform var(--trz-fast), opacity var(--trz-fast);
}
.trz-card__plus svg + svg { opacity: 0; transform: scale(0.6); }
.trz-card__plus[aria-expanded="true"] svg:first-child { transform: rotate(45deg); }
.trz-card__plus.is-busy svg:first-child { animation: trz-busy 900ms ease-in-out infinite alternate; }
.trz-card__plus.is-added svg:first-child { opacity: 0; transform: scale(0.6); }
.trz-card__plus.is-added svg + svg { opacity: 1; transform: none; }
@keyframes trz-busy { from { opacity: 1; } to { opacity: 0.25; } }
/* The sizes of the colour on show, over the foot of the photograph. */
.trz-card__quick {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 4;
padding: var(--trz-3);
padding-inline-end: calc(40px + var(--trz-4)); /* Clear of the + */
background: rgba(243, 242, 239, 0.97);
color: #080807;
animation: trz-quick-in 280ms var(--trz-ease);
}
@keyframes trz-quick-in { from { opacity: 0; transform: translateY(10px); } }
.trz-card__quick-label {
margin: 0 0 var(--trz-2);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6E6962;
}
.trz-card__quick-sizes { display: flex; flex-wrap: wrap; gap: var(--trz-1); }
.trz-card__quick-sizes button {
min-width: 38px;
min-height: 34px;
padding: 0 var(--trz-2);
border: 1px solid rgba(8, 8, 7, 0.16);
background: transparent;
color: #080807;
font: inherit;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition: border-color var(--trz-fast), background var(--trz-fast), color var(--trz-fast);
}
.trz-card__quick-sizes button:hover:not(:disabled) { border-color: #080807; }
.trz-card__quick-sizes button:focus-visible { outline: 1px solid #080807; outline-offset: 1px; }
.trz-card__quick-sizes button:disabled { color: rgba(8, 8, 7, 0.34); text-decoration: line-through; cursor: default; }
.trz-card__quick-sizes button.is-busy { background: #080807; border-color: #080807; color: #F3F2EF; animation: trz-busy 900ms ease-in-out infinite alternate; }
.trz-card__quick-error { margin: var(--trz-2) 0 0; font-size: 12px; line-height: 1.4; }
.trz-card__quick-error a { text-decoration: underline; text-underline-offset: 2px; }
.trz-cards--no-quick .trz-card__plus,
.trz-cards--no-quick .trz-card__quick { display: none; }
/*
* Quick add on a phone. Half a phone's width is too narrow for a row of
* sizes over the photograph, so the + opens a sheet from the bottom edge
* instead (site.js), filled from the card: the photograph, name, price,
* colour, and the sizes as full thumb-sized buttons.
*/
.trz-sheet {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 100001;
max-height: 86svh;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--trz-4) var(--trz-gutter) calc(var(--trz-5) + env(safe-area-inset-bottom, 0px));
background: var(--trz-ink-2);
border-top: 1px solid var(--trz-line-2);
transform: translateY(100%);
visibility: hidden;
transition: transform 480ms var(--trz-ease), visibility 0s linear 480ms;
outline: none;
will-change: transform;
}
.trz-sheet[data-open="true"] { transform: none; visibility: visible; transition: transform 480ms var(--trz-ease), visibility 0s; }
@media (min-width: 600px) { .trz-sheet { display: none; } }
.trz-sheet__head {
display: flex;
align-items: flex-start;
gap: var(--trz-3);
margin-bottom: var(--trz-5);
}
.trz-sheet__thumb {
flex: none;
width: 64px;
aspect-ratio: 4 / 5;
object-fit: cover;
background: var(--trz-card-panel, var(--trz-ink-3));
}
.trz-sheet__meta { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 2px; }
.trz-sheet__title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
.trz-sheet__price { font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
.trz-sheet__price del { color: var(--trz-text-3); margin-inline-start: var(--trz-2); }
.trz-sheet__price ins { text-decoration: none; }
.trz-sheet__price > span { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--trz-2); }
.trz-sheet__colour { margin: 0; font-size: 13.5px; color: var(--trz-text-3); }
.trz-sheet__colour:empty { display: none; }
.trz-sheet .trz-icon-btn { flex: none; margin-block-start: -8px; margin-inline-end: -8px; }
.trz-sheet__sizes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: var(--trz-2);
margin-top: var(--trz-3);
}
.trz-sheet__sizes button {
min-height: 48px;
padding: 0 var(--trz-2);
border: 1px solid var(--trz-line-2);
background: transparent;
color: var(--trz-text);
font: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
}
.trz-sheet__sizes button:disabled { color: var(--trz-text-3); text-decoration: line-through; opacity: 0.6; cursor: default; }
.trz-sheet__sizes button.is-busy { background: var(--trz-text); border-color: var(--trz-text); color: var(--trz-ink); animation: trz-busy 900ms ease-in-out infinite alternate; }
.trz-sheet__error { margin: var(--trz-4) 0 0; font-size: 13px; color: var(--trz-text-2); }
.trz-sheet__error a { color: var(--trz-text); text-decoration: underline; text-underline-offset: 2px; }
/* ---- Under the photograph ---------------------------------------------- */
.trz-card__info {
display: grid;
gap: 2px;
padding: var(--trz-3) clamp(6px, 5%, var(--trz-4)) 0;
}
.trz-card__cat { display: none; margin: 0 0 2px; }
.trz-cards--category .trz-card__cat { display: block; }
.trz-card__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 2px var(--trz-3);
}
.trz-card__title {
flex: 1 1 10ch;
min-width: 0;
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--trz-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.trz-card__price {
flex: none;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--trz-text);
white-space: nowrap;
font-variant-numeric: lining-nums tabular-nums;
}
.trz-card__price del { font-weight: 400; }
.trz-card__colour { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--trz-text-3); }
.trz-cards--no-colour .trz-card__colour { display: none; }
/* Swatches: a 16px dot in a 26px target, so a thumb can hit it. The first
dot's edge lines up with the text above. */
.trz-card__swatches {
position: relative;
z-index: 4;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 6px 0 0;
margin-inline-start: -5px;
}
.trz-cards--no-swatches .trz-card__swatches { display: none; }
.trz-card__swatch {
display: grid;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
cursor: pointer;
}
.trz-card__swatch::before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--swatch, var(--trz-text-3));
box-shadow: inset 0 0 0 1px rgba(237, 232, 223, 0.2);
transition: box-shadow var(--trz-fast);
}
.trz-card__swatch[aria-pressed="true"]::before {
box-shadow: inset 0 0 0 1px rgba(237, 232, 223, 0.2), 0 0 0 2px var(--trz-card-bg, var(--trz-ink)), 0 0 0 3px var(--trz-text-2);
}
.trz-card__swatch:focus-visible { outline: 1px solid var(--trz-text); outline-offset: -2px; }
.trz-card__count { margin-inline-start: var(--trz-2); font-size: 13px; color: var(--trz-text-3); }
/* Narrow cards: a smaller +, and swatches that leave room for their count.
After the rules they adjust, so they win. */
@media (max-width: 599px) {
.trz-card__plus { width: 34px; height: 34px; inset-inline-end: 6px; bottom: 6px; }
.trz-card__plus svg { width: 16px; height: 16px; }
.trz-card__swatch { width: 22px; height: 22px; }
.trz-card__swatch::before { width: 13px; height: 13px; }
.trz-card__swatches { margin-inline-start: -4.5px; }
.trz-card__count { margin-inline-start: 6px; font-size: 12px; }
}
/* ---- Light cards: the text on a pale card of its own --------------------- */
.trz-cards--light .trz-grid { gap: var(--trz-2); }
.trz-cards--light .trz-card {
--trz-card-bg: #F7F6F3;
background: var(--trz-card-bg);
}
.trz-cards--light .trz-card__info { padding: var(--trz-3) clamp(var(--trz-2), 6%, var(--trz-4)) var(--trz-4); }
.trz-cards--light .trz-card__title,
.trz-cards--light .trz-card__price,
.trz-cards--light .trz-card__price ins { color: #080807; }
.trz-cards--light .trz-card__colour,
.trz-cards--light .trz-card__count,
.trz-cards--light .trz-card__cat,
.trz-cards--light .trz-card__price del { color: #6E6962; }
.trz-cards--light .trz-card__swatch::before { box-shadow: inset 0 0 0 1px rgba(8, 8, 7, 0.16); }
.trz-cards--light .trz-card__swatch[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(8, 8, 7, 0.16), 0 0 0 2px var(--trz-card-bg), 0 0 0 3px #080807; }
.trz-cards--light .trz-card__swatch:focus-visible { outline-color: #080807; }
/* ---- Prices, shared with the product page --------------------------------- */
.trz-card__price del,
.trz-product__price del { color: var(--trz-text-3); margin-inline-start: var(--trz-2); }
.trz-card__price ins,
.trz-product__price ins { text-decoration: none; color: var(--trz-text); }
/* Woo prints sale as oldnew; lead with the price that
applies, the struck one follows. */
.trz-card__price > span,
.trz-product__price > span { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--trz-2); }
.trz-card__link { position: absolute; inset: 0; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
.trz-card__quick { animation: none; }
.trz-sheet { transition: none; }
.trz-card__plus.is-busy svg:first-child,
.trz-card__quick-sizes button.is-busy,
.trz-sheet__sizes button.is-busy { animation: none; opacity: 0.6; }
}
/* ============================================================
* 12. Lookbook, values, editorial
* ============================================================ */
.trz-lookbook {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(82vw, 560px);
gap: var(--trz-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-inline: var(--trz-gutter);
scroll-padding-inline: var(--trz-gutter);
}
.trz-lookbook::-webkit-scrollbar { display: none; }
.trz-look { scroll-snap-align: start; }
.trz-look__media {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--trz-ink-3);
margin-bottom: var(--trz-3);
}
.trz-look__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--trz-ease); }
.trz-look:hover .trz-look__media img { transform: scale(1.03); }
.trz-look__foot { display: flex; align-items: baseline; gap: var(--trz-3); }
.trz-look__index { font-size: 10.5px; letter-spacing: 0.2em; color: var(--trz-jade); font-variant-numeric: tabular-nums; }
/* Values: four facts, hairline-separated, nothing more. */
.trz-values {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--trz-line);
}
@media (min-width: 1000px) { .trz-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trz-value {
padding: var(--trz-6) var(--trz-5) var(--trz-6) 0;
border-bottom: 1px solid var(--trz-line);
}
@media (min-width: 1000px) {
.trz-value { border-bottom: 0; padding-inline: var(--trz-5); border-inline-start: 1px solid var(--trz-line); }
.trz-value:first-child { border-inline-start: 0; padding-inline-start: 0; }
}
.trz-value svg { width: 20px; height: 20px; color: var(--trz-jade); margin-bottom: var(--trz-4); }
.trz-value p { margin: var(--trz-2) 0 0; font-size: 14px; line-height: 1.65; color: var(--trz-text-2); max-width: 30ch; }
/* Split editorial: photograph and a short text, never 50/50. */
.trz-split {
display: grid;
gap: var(--trz-6);
align-items: center;
}
@media (min-width: 900px) {
.trz-split { grid-template-columns: 1.3fr 1fr; gap: clamp(var(--trz-7), 7vw, 120px); }
.trz-split--flip { grid-template-columns: 1fr 1.3fr; }
.trz-split--flip > :first-child { order: 2; }
}
.trz-split__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--trz-ink-3); }
.trz-split__media img { width: 100%; height: 100%; object-fit: cover; }
/* ============================================================
* 13. Product page
* ============================================================ */
/* On a phone the gallery is full-bleed and starts under the header. */
.trz-single { padding-block: 0; }
@media (min-width: 1000px) { .trz-single { padding-block-start: var(--trz-6); } }
.trz-product {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--trz-6);
}
@media (min-width: 1000px) {
.trz-product {
grid-template-columns: minmax(0, 1fr) clamp(360px, 31vw, 460px);
gap: clamp(var(--trz-7), 5vw, var(--trz-9));
align-items: start;
}
/*
* Sticky, but pinned by whichever edge fits. A short column sticks by
* its top under the header. A column taller than the screen — which the
* order form usually makes it — would otherwise keep its bottom, and the
* Confirm button, below the fold for the whole length of the gallery.
* With the column's height known (--trz-info-h, set by site.js), the top
* offset goes negative just enough to pin it by its bottom instead.
*/
.trz-product__info {
position: sticky;
top: min(
calc(var(--trz-header) + var(--trz-6)),
calc(100svh - var(--trz-info-h, 0px) - var(--trz-6))
);
padding-bottom: var(--trz-6);
}
}
.trz-product__gallery,
.trz-product__info { min-width: 0; }
/*
* Gallery. Mobile: a full-bleed swipe track with a counter. Desktop: the
* lead photograph at full width and the rest in pairs — the layout every
* serious fashion house uses, and pure CSS, so the first image paints
* before any script has run.
*/
.trz-gallery { position: relative; }
.trz-gallery__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-inline: calc(var(--trz-gutter) * -1);
}
.trz-gallery__track::-webkit-scrollbar { display: none; }
.trz-gallery__item {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--trz-ink-3);
scroll-snap-align: center;
}
.trz-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.trz-gallery__count {
position: absolute;
inset-inline-end: var(--trz-3);
bottom: var(--trz-3);
margin: 0;
padding: 6px 10px;
background: rgba(8, 8, 7, 0.72);
font-size: 10.5px;
letter-spacing: 0.18em;
font-variant-numeric: tabular-nums;
}
.trz-gallery__badge { position: absolute; top: var(--trz-3); inset-inline-start: var(--trz-3); z-index: 2; }
@media (min-width: 1000px) {
.trz-gallery__track {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--trz-2);
overflow: visible;
margin-inline: 0;
}
.trz-gallery__item:first-child { grid-column: 1 / -1; }
/* An odd image out at the end spans the row rather than leaving a hole. */
.trz-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; }
.trz-gallery__count { display: none; }
}
/* Info column */
.trz-product__masthead { display: grid; gap: var(--trz-3); }
.trz-product__collection { margin: 0; }
.trz-product__collection a:hover { color: var(--trz-text); }
.trz-product__title {
margin: 0;
font-size: clamp(1.6rem, 2.3vw, 2.1rem);
font-weight: 300;
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: none;
}
.trz-product__price {
font-size: 16px;
color: var(--trz-text);
font-variant-numeric: lining-nums tabular-nums;
}
.trz-product__desc {
margin-top: var(--trz-5);
font-size: 14px;
line-height: 1.75;
color: var(--trz-text-2);
max-width: 44ch;
}
.trz-product__desc p:last-child { margin-bottom: 0; }
/* Variants */
.trz-variants {
display: grid;
gap: var(--trz-5);
margin-top: var(--trz-6);
padding-top: var(--trz-6);
border-top: 1px solid var(--trz-line);
}
.trz-variant-group { display: grid; gap: var(--trz-3); }
.trz-variant-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--trz-3); }
.trz-variant-group__value { font-size: 13px; color: var(--trz-text); letter-spacing: 0; text-transform: none; }
.trz-swatches { display: flex; flex-wrap: wrap; gap: var(--trz-3); }
.trz-swatch {
position: relative;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--trz-line-3);
border-radius: 50%;
cursor: pointer;
transition: box-shadow var(--trz-fast);
/* Fill comes from the colour term: real fabric colour, product data —
never a palette token. A green garment is green. */
}
.trz-swatch:hover { box-shadow: 0 0 0 3px var(--trz-ink), 0 0 0 4px var(--trz-line-3); }
.trz-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--trz-ink), 0 0 0 4px var(--trz-text); }
.trz-sizes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: var(--trz-2);
}
.trz-size {
min-height: 46px;
padding: 0 var(--trz-2);
border: 1px solid var(--trz-line-2);
background: transparent;
color: var(--trz-text);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
cursor: pointer;
transition: border-color var(--trz-fast), background var(--trz-fast), color var(--trz-fast);
}
.trz-size:hover:not([disabled]) { border-color: var(--trz-text); }
.trz-size[aria-pressed="true"] { background: var(--trz-text); border-color: var(--trz-text); color: var(--trz-ink); }
.trz-size[disabled],
.trz-size.is-unavailable { color: var(--trz-text-3); border-color: var(--trz-line); text-decoration: line-through; }
.trz-size.is-unavailable[aria-pressed="true"] { background: transparent; border-color: var(--trz-text-3); color: var(--trz-text-3); }
/* A colour with nothing left in stock: a hairline strike across the swatch. */
.trz-swatch.is-unavailable::after {
content: '';
position: absolute;
inset: 50% -2px auto;
height: 1px;
background: var(--trz-text);
transform: rotate(-45deg);
}
/* WooCommerce's own add-to-cart form appears only for product types the
purchase block does not cover (grouped, external). */
.trz-product__info form.cart { display: grid; gap: var(--trz-3); margin-top: var(--trz-5); }
.trz-product__info form.cart .single_add_to_cart_button { width: 100%; }
/* Trust lines under the order button: what actually happens next. */
.trz-assure {
list-style: none;
margin: var(--trz-5) 0 0;
padding: 0;
display: grid;
gap: var(--trz-3);
}
.trz-assure li {
display: flex;
align-items: center;
gap: var(--trz-3);
font-size: 13px;
color: var(--trz-text-2);
}
.trz-assure svg { width: 16px; height: 16px; flex: none; color: var(--trz-text-2); }
/* Details: long copy below the purchase decision, in its own calm field. */
.trz-product-details {
display: grid;
gap: var(--trz-5);
margin-top: clamp(var(--trz-8), 8vw, var(--trz-9));
padding-top: var(--trz-6);
border-top: 1px solid var(--trz-line);
}
@media (min-width: 900px) {
.trz-product-details { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: var(--trz-7); }
}
.trz-product-details__copy { color: var(--trz-text-2); font-size: 15px; line-height: 1.8; max-width: 62ch; }
.trz-product-details__copy > * + * { margin-top: var(--trz-4); }
.trz-product-details__copy h2,
.trz-product-details__copy h3 { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--trz-text); margin-bottom: 0; }
.trz-product-details__copy ul { padding-inline-start: 1.1em; margin-block: 0; }
.trz-product-details__copy li + li { margin-top: var(--trz-2); }
.trz-product-details__copy li::marker { color: var(--trz-text-3); }
/* Related */
.related.products,
.upsells.products {
margin-top: clamp(var(--trz-8), 9vw, 120px);
padding-top: var(--trz-6);
border-top: 1px solid var(--trz-line);
}
.related.products > h2,
.upsells.products > h2 {
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
font-weight: 300;
margin-bottom: var(--trz-7);
}
ul.products {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--trz-7) var(--trz-3);
}
@media (min-width: 900px) { ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--trz-8) var(--trz-5); } }
ul.products::before, ul.products::after { display: none !important; }
ul.products > li { width: auto !important; margin: 0 !important; float: none !important; }
/*
* The order bar, pinned to the bottom of a phone's screen (order-form.js).
* It follows the order as it comes together: the chosen colour's picture,
* the total — which ticks when it changes — the colour and size, and a
* button that does the next thing: choose a size, fill in the details,
* confirm. A hairline across its top fills as the order is completed, and
* the button catches the light once when the order is ready to confirm.
* Transforms and opacity only.
*/
.trz-sticky-bar {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 90;
display: flex;
align-items: center;
gap: var(--trz-3);
padding: 10px var(--trz-gutter);
padding-bottom: calc(10px + env(safe-area-inset-bottom));
background: rgba(19, 18, 17, 0.92);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
border-top: 1px solid var(--trz-line);
transform: translateY(calc(100% + 2px));
/* A little past, then back: it arrives, it does not just appear. */
transition: transform 640ms cubic-bezier(0.2, 1.15, 0.32, 1);
will-change: transform;
}
.trz-sticky-bar[data-visible="true"] { transform: none; }
.trz-sticky-bar__progress {
position: absolute;
inset-inline: 0;
top: -1px;
height: 2px;
overflow: hidden;
pointer-events: none;
}
.trz-sticky-bar__progress span {
display: block;
height: 100%;
background: var(--trz-text);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 700ms var(--trz-ease);
}
[dir="rtl"] .trz-sticky-bar__progress span { transform-origin: 100% 50%; }
.trz-sticky-bar__thumb {
flex: none;
width: 44px;
height: 55px;
object-fit: cover;
border-radius: 8px;
background: var(--trz-ink-3);
transition: opacity 280ms var(--trz-ease);
}
.trz-sticky-bar__thumb.is-swapping { opacity: 0; }
.trz-sticky-bar__meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
/* On a phone the product is right there on the page; its name earns the
room on a wider screen. */
.trz-sticky-bar__title { display: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 480px) { .trz-sticky-bar__title { display: block; } }
.trz-sticky-bar__price {
justify-self: start;
font-size: 15px;
line-height: 1.3;
white-space: nowrap;
font-variant-numeric: lining-nums tabular-nums;
}
.trz-sticky-bar__options {
font-size: 12px;
line-height: 1.35;
color: var(--trz-text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trz-sticky-bar__options:empty { display: none; }
.trz-sticky-bar__cta {
position: relative;
flex: none;
min-height: 48px;
padding: 0 20px;
border-radius: 14px;
overflow: hidden;
}
.trz-sticky-bar__label { display: inline-block; }
/* A new figure or a new step slides in from below. */
.trz-sticky-bar__price.is-ticking,
.trz-sticky-bar__label.is-changing { animation: trz-tick 420ms var(--trz-ease); }
@keyframes trz-tick {
from { opacity: 0.15; transform: translateY(7px); }
}
/* Ready to confirm: a band of light crosses the button, once. */
.trz-sticky-bar__cta::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
transform: translateX(-110%);
pointer-events: none;
}
.trz-sticky-bar__cta.is-ready::after { animation: trz-sheen 1100ms var(--trz-ease) 150ms; }
@keyframes trz-sheen {
to { transform: translateX(110%); }
}
@media (min-width: 1000px) { .trz-sticky-bar { display: none; } }
@media (prefers-reduced-motion: reduce) {
.trz-sticky-bar,
.trz-sticky-bar__progress span,
.trz-sticky-bar__thumb { transition: none; }
.trz-sticky-bar__price.is-ticking,
.trz-sticky-bar__label.is-changing,
.trz-sticky-bar__cta.is-ready::after,
.trz-variant-group.is-calling .trz-size,
.trz-variant-group.is-calling .trz-swatch { animation: none; }
}
/* ============================================================
* 14. Purchase block and order form
*
* One card holds the whole purchase, kept as short as it can be — most
* customers here order on a phone, one-handed: the piece (its picture
* following the colour, price, what is chosen, stock, a quantity pill) and
* how far it is from free delivery; colour and size, with the size guide
* beside the sizes; then "Your details" and "Delivery", one field to a
* line; the delivery methods, side by side, once a wilaya is chosen; the total;
* and Confirm, with the bag beside it. A piece made in one colour is not
* asked for its colour. Every control is at least 44px tall. Neutral
* throughout: no accent colour in the form.
* ============================================================ */
.trz-order { margin-top: var(--trz-5); }
.trz-order__card {
position: relative;
padding: 14px;
border: 1px solid var(--trz-line-2);
border-radius: 20px;
background: linear-gradient(180deg, #1A1917 0%, var(--trz-ink-2) 60%);
box-shadow:
inset 0 1px 0 rgba(237, 232, 223, 0.05),
0 30px 60px -32px rgba(0, 0, 0, 0.9);
container-type: inline-size;
}
@media (min-width: 560px) { .trz-order__card { padding: 20px; } }
.trz-order__card > * + * { margin-top: var(--trz-4); }
.trz-order__card > .trz-free,
.trz-order__card > .trz-order__step + .trz-order__grid,
.trz-order__card > .trz-delivery,
.trz-order__card > .trz-order__error,
.trz-order__card > .trz-buy__status { margin-top: 8px; }
/* ---- The piece -------------------------------------------------------- */
.trz-order__item { display: flex; align-items: center; gap: var(--trz-3); }
.trz-order__thumb {
flex: none;
width: 48px;
height: 60px;
object-fit: cover;
border-radius: 9px;
background: var(--trz-ink-3);
transition: opacity 280ms var(--trz-ease);
}
.trz-order__thumb.is-swapping { opacity: 0; }
.trz-order__meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.trz-order__name { font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trz-order__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.trz-order__unit { font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
.trz-order__options { font-size: 12px; color: var(--trz-text-3); }
.trz-order__options:empty { display: none; }
/* In stock: a dot that breathes. */
.trz-order__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--trz-text-2); }
.trz-order__stock::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--trz-text);
animation: trz-breathe 2.4s ease-out infinite;
}
.trz-order__stock.is-out { color: var(--trz-text-3); }
.trz-order__stock.is-out::before { background: var(--trz-text-3); animation: none; }
@keyframes trz-breathe {
0% { box-shadow: 0 0 0 0 rgba(237, 232, 223, 0.45); }
70%, 100% { box-shadow: 0 0 0 6px rgba(237, 232, 223, 0); }
}
/* Quantity: a pill. */
.trz-qty { flex: none; }
.trz-qty__control {
display: inline-flex;
align-items: center;
border: 1px solid var(--trz-line-2);
border-radius: 999px;
background: rgba(237, 232, 223, 0.035);
}
.trz-qty__btn {
width: 38px;
min-height: 44px;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
color: var(--trz-text-2);
font-size: 17px;
cursor: pointer;
transition: color var(--trz-fast), transform var(--trz-fast);
}
.trz-qty__btn:hover { color: var(--trz-text); }
.trz-qty__control input,
.trz-qty__control input:focus {
width: 24px;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
text-align: center;
font-size: 15px;
font-variant-numeric: tabular-nums;
appearance: textfield;
-moz-appearance: textfield;
}
.trz-qty__control input::-webkit-outer-spin-button,
.trz-qty__control input::-webkit-inner-spin-button { appearance: none; margin: 0; }
/* How far from free delivery: one line and a hairline, the store's own threshold. */
.trz-free__text { margin: 0 0 7px; font-size: 12px; line-height: 1.4; color: var(--trz-text-2); }
.trz-free__text strong { font-weight: 500; color: var(--trz-text); }
.trz-free.is-done .trz-free__text { color: var(--trz-text); }
.trz-free__bar { display: block; height: 2px; border-radius: 2px; background: var(--trz-line-2); overflow: hidden; }
.trz-free__bar span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--trz-text);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 700ms var(--trz-ease);
}
[dir="rtl"] .trz-free__bar span { transform-origin: 100% 50%; }
/* ---- Colour and size -------------------------------------------------- */
.trz-order .trz-variants {
margin: var(--trz-4) 0 0;
padding: 0;
border: 0;
gap: var(--trz-4);
}
.trz-order .trz-variant-group { gap: 10px; }
/* One colour, one size: chosen, not asked. */
.trz-order .trz-variant-group--single { display: none; }
/* The group's name, then what is chosen, then — for the sizes — the guide. */
.trz-order .trz-variant-group__head { justify-content: flex-start; align-items: center; min-height: 20px; }
.trz-order .trz-size { min-height: 46px; border-radius: 12px; }
.trz-guide-btn {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 34px;
margin-block: -8px;
margin-inline-start: auto;
padding: 0 12px;
border: 1px solid var(--trz-line-2);
border-radius: 999px;
background: transparent;
color: var(--trz-text);
font: inherit;
font-size: 12px;
letter-spacing: 0.02em;
cursor: pointer;
transition: border-color var(--trz-fast), background var(--trz-fast);
}
.trz-guide-btn svg { width: 17px; height: 17px; flex: none; color: var(--trz-text-2); }
.trz-guide-btn:hover { border-color: var(--trz-text); }
.trz-guide-btn:active { transform: scale(0.97); }
/* How it fits, in one line, where the size is chosen. */
.trz-fit-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--trz-text-2); }
/* A product without sizes to pick, but with a chart: the guide on its own row. */
.trz-order__guide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trz-3); }
.trz-order__guide .trz-guide-btn { margin: 0; order: 2; }
/* Asked for by the order bar: the choices rise one after another, once. */
.trz-variant-group.is-calling .trz-size,
.trz-variant-group.is-calling .trz-swatch { animation: trz-call 640ms var(--trz-ease) both; }
.trz-variant-group.is-calling :nth-child(2) { animation-delay: 50ms; }
.trz-variant-group.is-calling :nth-child(3) { animation-delay: 100ms; }
.trz-variant-group.is-calling :nth-child(4) { animation-delay: 150ms; }
.trz-variant-group.is-calling :nth-child(5) { animation-delay: 200ms; }
.trz-variant-group.is-calling :nth-child(6) { animation-delay: 250ms; }
.trz-variant-group.is-calling :nth-child(n+7) { animation-delay: 300ms; }
@keyframes trz-call {
40% { transform: translateY(-5px); }
}
/* ---- Details: one field to a line ------------------------------------- */
/* Each step named, with its icon, close above its fields — no rules or
gaps between the steps beyond the card's own rhythm. */
.trz-order__step {
display: flex;
align-items: center;
gap: var(--trz-2);
margin-bottom: 0;
font-size: 13px;
font-weight: 500;
color: var(--trz-text);
}
.trz-order__step svg { width: 17px; height: 17px; flex: none; color: var(--trz-text-2); }
.trz-order__step-ar { margin-inline-start: auto; font-family: var(--trz-arabic); font-size: 13px; font-weight: 400; color: var(--trz-text-3); }
.trz-order__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* Two by two only where the card itself is wide (a tablet). */
@container (min-width: 520px) {
.trz-order__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trz-fl--wide { grid-column: 1 / -1; }
/* The address is optional; on a phone it is one more field between the
customer and the button, so it is dropped. An empty value is valid
server-side, exactly as when a desktop customer leaves it blank. */
@media (max-width: 767px) {
.trz-order .trz-field--address { display: none; }
}
/* ---- Delivery methods, side by side ----------------------------------- */
.trz-delivery { border: 0; padding: 0; min-width: 0; }
.trz-delivery[hidden] { display: none; }
.trz-delivery__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
/* Each method is one tappable card: its name, its Arabic name, its price.
The radio fills the card, invisibly, so the whole card is the control;
the chosen card is lit. */
.trz-delivery__option {
position: relative;
display: grid;
align-content: center;
gap: 1px;
min-height: 58px;
padding: 8px 13px;
border: 1px solid var(--trz-line-2);
border-radius: var(--trz-round);
background: rgba(237, 232, 223, 0.035);
cursor: pointer;
transition: border-color var(--trz-fast), background var(--trz-fast), box-shadow var(--trz-fast);
}
.trz-delivery__option:hover { border-color: var(--trz-line-3); }
.trz-delivery__option:has(input:checked) {
border-color: var(--trz-text);
background: rgba(237, 232, 223, 0.08);
box-shadow: inset 0 0 0 1px var(--trz-text);
}
.trz-delivery__option:has(input:focus-visible) { outline: 1px solid var(--trz-text); outline-offset: 3px; }
.trz-delivery__option input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.trz-delivery__name { font-size: 13px; line-height: 1.25; }
.trz-delivery__ar { font-family: var(--trz-arabic); font-size: 11px; line-height: 1.35; color: var(--trz-text-3); }
.trz-delivery__cost { margin-top: 2px; font-size: 14px; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
/* ---- Total and buttons ------------------------------------------------ */
.trz-summary { display: grid; gap: 4px; font-variant-numeric: lining-nums tabular-nums; }
.trz-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--trz-4); }
.trz-summary__row[hidden] { display: none; }
.trz-summary__row dt { font-size: 12.5px; color: var(--trz-text-2); }
.trz-summary__row dd { font-size: 12.5px; color: var(--trz-text); }
.trz-summary__row--total { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--trz-line); }
.trz-summary__row--total dt { font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--trz-text); }
.trz-summary__row--total dd { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
/* A new total rolls in. */
.trz-summary [data-summary="total"].is-ticking { animation: trz-tick 420ms var(--trz-ease); }
/* Confirm, and the bag beside it: one row. */
.trz-order__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.trz-btn--order {
width: 100%;
min-height: 56px;
padding-inline: var(--trz-4);
border-radius: var(--trz-round);
gap: var(--trz-3);
font-size: 11px;
box-shadow: 0 16px 34px -18px rgba(237, 232, 223, 0.45);
}
.trz-btn__ar { font-size: 14px; font-weight: 600; opacity: 0.7; }
.trz-btn__ar::before { content: '·'; margin-inline-end: var(--trz-3); opacity: 0.5; }
/* Add to bag: the bag alone, its words for screen readers — and on a
card wide enough, in full. */
.trz-order__bag {
position: relative;
width: 56px;
min-height: 56px;
padding: 0;
border-radius: var(--trz-round);
}
.trz-order__bag .trz-btn__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@container (min-width: 520px) {
.trz-order__bag { width: auto; padding-inline: var(--trz-5); }
.trz-order__bag .trz-btn__label { position: static; width: auto; height: auto; clip: auto; }
}
.trz-order__bag svg { width: 19px; height: 19px; flex: none; margin-top: -2px; }
.trz-order__bag.is-sending { opacity: 0.6; }
.trz-buy__status {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--trz-2) var(--trz-3);
margin-bottom: 0;
font-size: 13px;
color: var(--trz-text);
}
.trz-buy__status[hidden] { display: none; }
.trz-buy__check { color: var(--trz-text); }
.trz-buy__status.is-error { color: var(--trz-error); }
.trz-order__error {
margin-bottom: 0;
padding: 10px 14px;
border: 1px solid rgba(224, 138, 116, 0.4);
border-radius: var(--trz-round);
background: rgba(224, 138, 116, 0.08);
font-size: 13px;
color: var(--trz-text);
}
/* ============================================================
* Boxed fields with floating labels — the order form's and the contact
* form's (trz_fl_field). A field's name sits inside it like a placeholder
* and moves up to its top edge once it is focused or filled, so a filled
* field still says what it is; on the order form, its Arabic twin sits at
* the far end. A tick appears once what is typed is good enough to send;
* a field that is not turns its frame and shakes once. Text is 16px, or
* iOS zooms the page on focus.
* ============================================================ */
.trz-fl { display: grid; gap: 5px; min-width: 0; }
.trz-fl__box { position: relative; }
.trz-fl__box > input,
.trz-fl__box > select,
.trz-fl__box > textarea {
display: block;
width: 100%;
height: 54px;
min-height: 0;
margin: 0;
padding: 21px 14px 5px;
border: 1px solid var(--trz-line-2);
border-radius: var(--trz-round);
background-color: rgba(237, 232, 223, 0.035);
color: var(--trz-text);
font-size: 16px;
line-height: 1.3;
transition: border-color var(--trz-fast), background-color var(--trz-fast), box-shadow var(--trz-fast);
}
.trz-fl__box > input::placeholder,
.trz-fl__box > textarea::placeholder { color: transparent; }
.trz-fl__box > textarea { height: auto; min-height: 148px; padding-top: 26px; resize: vertical; line-height: 1.55; }
.trz-fl__box > select {
padding-inline-end: 34px;
background-position: right 14px center;
background-size: 10px auto;
text-overflow: ellipsis;
}
[dir="rtl"] .trz-fl__box > select { background-position: left 14px center; }
/* Until something is chosen the select shows only its label; the prompt
("Choose your wilaya") is what the picker lists first. */
.trz-fl__box > select:invalid,
.trz-fl__box > select:disabled { color: transparent; }
.trz-fl__box > select:disabled { opacity: 0.5; }
.trz-fl__box > :hover:not(:disabled):not(:focus) { border-color: var(--trz-line-3); }
.trz-fl__box > :focus {
border-color: rgba(237, 232, 223, 0.62);
background-color: rgba(237, 232, 223, 0.06);
box-shadow: 0 0 0 4px rgba(237, 232, 223, 0.07);
}
.trz-fl.has-error .trz-fl__box > *,
.trz-fl__box > [aria-invalid="true"] {
border-color: var(--trz-error);
box-shadow: 0 0 0 4px rgba(224, 138, 116, 0.12);
}
.trz-fl__label {
position: absolute;
inset-block: 0;
inset-inline: 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--trz-2);
color: var(--trz-text-3);
font-size: 15px;
line-height: 1;
pointer-events: none;
}
.trz-fl--area .trz-fl__label { inset-block-end: auto; height: 54px; }
.trz-fl--select .trz-fl__label { inset-inline-end: 32px; }
.trz-fl__label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 240ms var(--trz-ease), color var(--trz-fast); }
.trz-fl__en { min-width: 0; transform-origin: 0 50%; }
.trz-fl__ar { flex: none; font-family: var(--trz-arabic); font-size: 13px; transform-origin: 100% 50%; }
[dir="rtl"] .trz-fl__en { transform-origin: 100% 50%; }
[dir="rtl"] .trz-fl__ar { transform-origin: 0 50%; }
/* Focused or filled: the label moves up to the top edge, smaller. */
.trz-fl__box > :focus + .trz-fl__label span,
.trz-fl__box > :not(select):not(:placeholder-shown) + .trz-fl__label span,
.trz-fl__box > select:valid + .trz-fl__label span,
.trz-fl__box.is-loading .trz-fl__label span { transform: translateY(-10px) scale(0.74); }
.trz-fl__box > :focus + .trz-fl__label { color: var(--trz-text-2); }
/* Good to send: a tick. */
.trz-fl__ok {
position: absolute;
inset-inline-end: 12px;
bottom: 11px;
display: grid;
place-items: center;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--trz-text);
color: var(--trz-ink);
opacity: 0;
transform: scale(0.5);
transition: opacity 220ms var(--trz-ease), transform 320ms cubic-bezier(0.2, 1.4, 0.4, 1);
pointer-events: none;
}
.trz-fl__ok svg { width: 11px; height: 11px; stroke-width: 2.4; }
.trz-fl.is-valid .trz-fl__ok { opacity: 1; transform: none; }
/* Communes on their way. */
.trz-fl__box.is-loading::after {
content: '';
position: absolute;
inset-inline-end: 34px;
bottom: 12px;
width: 13px;
height: 13px;
border: 1.5px solid var(--trz-line-3);
border-top-color: var(--trz-text);
border-radius: 50%;
animation: trz-spin 700ms linear infinite;
}
@keyframes trz-spin { to { transform: rotate(360deg); } }
.trz-fl .trz-field__error { margin: 0; padding-inline: 4px; font-size: 11.5px; }
.trz-fl.is-shaking .trz-fl__box { animation: trz-shake 420ms var(--trz-ease); }
@keyframes trz-shake {
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
.trz-order__stock::before,
.trz-fl.is-shaking .trz-fl__box,
.trz-fl__box.is-loading::after,
.trz-summary [data-summary="total"].is-ticking { animation: none; }
.trz-fl__label span,
.trz-fl__ok,
.trz-free__bar span { transition: none; }
}
/* Sold out: said plainly where the purchase block would be. */
.trz-soldout {
margin-top: var(--trz-5);
padding-block: var(--trz-5);
border-block: 1px solid var(--trz-line);
}
.trz-soldout p:last-child { margin: var(--trz-2) 0 0; font-size: 14px; color: var(--trz-text-2); }
/*
* The order is placed: one solid ivory block, the same ivory as the button
* that got the customer here. Neutral, like the rest of the form.
*/
.trz-confirm {
margin-top: var(--trz-6);
padding: clamp(var(--trz-7), 6vw, var(--trz-8)) var(--trz-5);
background: var(--trz-text);
color: var(--trz-ink);
text-align: center;
}
.trz-confirm__mark {
width: 44px; height: 44px;
margin: 0 auto var(--trz-5);
display: grid; place-items: center;
border: 1px solid rgba(8, 8, 7, 0.4);
border-radius: 50%;
font-size: 18px;
line-height: 1;
}
.trz-confirm__title { margin: 0 auto var(--trz-3); max-width: 22ch; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 300; letter-spacing: -0.02em; }
.trz-confirm__ar { margin: 0 auto var(--trz-6); font-size: 16px; }
.trz-confirm__meta { margin: 0 auto var(--trz-1); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; }
.trz-confirm__meta strong { font-weight: 600; letter-spacing: 0.08em; }
/* ============================================================
* 15. Shop archive
* ============================================================ */
.trz-archive-head {
padding-block: clamp(var(--trz-7), 6vw, var(--trz-9)) clamp(var(--trz-6), 4vw, var(--trz-7));
text-align: center;
}
.trz-archive-head .trz-title { margin: var(--trz-3) 0 var(--trz-3); }
.trz-archive-head .trz-lede { margin-inline: auto; }
.trz-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--trz-5);
padding-block: var(--trz-4);
margin-bottom: var(--trz-7);
border-block: 1px solid var(--trz-line);
}
.trz-pills {
display: flex;
gap: var(--trz-5);
overflow-x: auto;
scrollbar-width: none;
margin: 0;
padding: 0;
list-style: none;
}
.trz-pills::-webkit-scrollbar { display: none; }
.trz-pills a {
display: block;
padding-block: var(--trz-1);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--trz-text-3);
white-space: nowrap;
border-bottom: 1px solid transparent;
transition: color var(--trz-fast), border-color var(--trz-fast);
}
.trz-pills a:hover { color: var(--trz-text); }
.trz-pills a[aria-current="page"] { color: var(--trz-text); border-bottom-color: var(--trz-text); }
/* On a phone the category row takes its own line and runs to the screen
edges, so a long list reads as something to swipe, not something cut off. */
@media (max-width: 599px) {
.trz-toolbar { flex-wrap: wrap; row-gap: var(--trz-3); }
.trz-pills { flex: 1 0 100%; margin-inline: calc(-1 * var(--trz-gutter)); padding-inline: var(--trz-gutter); }
}
.trz-toolbar .woocommerce-ordering { margin: 0; flex: none; }
.trz-toolbar .woocommerce-ordering select { min-height: 32px; padding-block: 4px; font-size: 13px; width: auto; border-bottom-color: transparent; color: var(--trz-text-2); }
.trz-toolbar .woocommerce-ordering select:hover { color: var(--trz-text); }
.woocommerce-pagination { margin-top: var(--trz-9); }
.woocommerce-pagination ul.page-numbers {
display: flex;
justify-content: center;
gap: var(--trz-2);
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.woocommerce-pagination .page-numbers li { border: 0; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
display: grid;
place-items: center;
min-width: 40px;
height: 40px;
font-size: 13px;
color: var(--trz-text-2);
border-bottom: 1px solid transparent;
}
.woocommerce-pagination .page-numbers .current { color: var(--trz-text); border-bottom-color: var(--trz-text); }
/* ============================================================
* 16. WooCommerce — cart, checkout, account, notices
*
* WooCommerce's own general stylesheet is not loaded (see inc/setup.php):
* this is the whole of what the store pages look like.
* ============================================================ */
.trz-page-head { padding-block: clamp(var(--trz-7), 6vw, var(--trz-9)) var(--trz-6); }
.trz-page-head .trz-title { margin: var(--trz-3) 0 0; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
list-style: none;
margin: 0 0 var(--trz-6);
padding: var(--trz-4) var(--trz-5);
border: 1px solid var(--trz-line-2);
border-inline-start: 1px solid var(--trz-jade);
background: var(--trz-ink-2);
font-size: 14px;
color: var(--trz-text);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--trz-4);
}
.woocommerce-error { border-inline-start-color: var(--trz-error); }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; min-height: 40px; padding-inline: 20px; }
.shop_table {
width: 100%;
border-collapse: collapse;
margin: 0 0 var(--trz-6);
font-size: 14px;
}
.shop_table th {
padding: 0 0 var(--trz-3);
text-align: start;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--trz-text-3);
border-bottom: 1px solid var(--trz-line-2);
}
.shop_table td {
padding: var(--trz-5) var(--trz-3) var(--trz-5) 0;
border-bottom: 1px solid var(--trz-line);
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
.shop_table tfoot th,
.shop_table tfoot td { padding-block: var(--trz-3); border-bottom: 1px solid var(--trz-line); }
.shop_table .order-total th, .shop_table .order-total td { font-size: 16px; color: var(--trz-text); border-bottom: 0; }
.shop_table .product-thumbnail img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--trz-ink-3); }
.shop_table .product-name a:hover { color: var(--trz-text-2); }
.shop_table .product-remove a { font-size: 20px; color: var(--trz-text-3); }
.shop_table .product-remove a:hover { color: var(--trz-error); }
.shop_table .quantity .qty { width: 64px; text-align: center; border: 1px solid var(--trz-line-2); min-height: 40px; }
.woocommerce-cart .actions { padding-top: var(--trz-5); }
.woocommerce-cart .actions .coupon { display: inline-flex; gap: var(--trz-3); align-items: center; margin-inline-end: var(--trz-5); }
.woocommerce-cart .actions .coupon .input-text { width: 200px; }
.cart-collaterals { display: grid; justify-content: end; margin-top: var(--trz-7); }
.cart_totals { width: min(100%, 440px); }
.cart_totals h2 { font-size: 22px; font-weight: 300; margin-bottom: var(--trz-5); }
.wc-proceed-to-checkout .checkout-button { width: 100%; }
@media (max-width: 767px) {
.shop_table_responsive thead { display: none; }
.shop_table_responsive tr { display: grid; grid-template-columns: 72px 1fr; gap: 0 var(--trz-4); padding-block: var(--trz-4); border-bottom: 1px solid var(--trz-line); }
.shop_table_responsive td { border: 0; padding: var(--trz-1) 0; display: flex; justify-content: space-between; grid-column: 2; }
.shop_table_responsive td::before { content: attr(data-title); color: var(--trz-text-3); font-size: 12px; }
.shop_table_responsive td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
.shop_table_responsive td.product-thumbnail::before,
.shop_table_responsive td.product-remove::before,
.shop_table_responsive td.actions::before { display: none; }
.shop_table_responsive td.actions { grid-column: 1 / -1; display: grid; gap: var(--trz-3); }
}
/* Checkout: one column of details, the order summary beside it. */
.woocommerce-checkout form.checkout {
display: grid;
gap: var(--trz-7);
}
@media (min-width: 1000px) {
.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: clamp(var(--trz-7), 6vw, var(--trz-9)); align-items: start; }
.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout .trz-checkout-summary { position: sticky; top: calc(var(--trz-header) + var(--trz-6)); }
}
.woocommerce-checkout .col2-set .col-2 { display: none; }
.woocommerce-checkout h3 { font-size: 22px; font-weight: 300; margin-bottom: var(--trz-5); }
.woocommerce form .form-row { margin: 0 0 var(--trz-5); padding: 0; }
.woocommerce form .form-row .required { color: var(--trz-text-3); text-decoration: none; }
.woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--trz-5); }
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-billing-fields__field-wrapper #billing_address_1_field,
.woocommerce-billing-fields__field-wrapper #billing_phone_field,
.woocommerce-billing-fields__field-wrapper #billing_country_field { grid-column: 1 / -1; }
@media (max-width: 559px) { .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } }
.woocommerce-checkout-review-order { padding: var(--trz-6); background: var(--trz-ink-2); border: 1px solid var(--trz-line); }
.woocommerce-checkout-review-order .shop_table { margin-bottom: var(--trz-5); }
#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--trz-2); text-align: start; }
#shipping_method li { display: flex; align-items: center; gap: var(--trz-2); font-size: 13px; }
.wc_payment_methods { list-style: none; margin: 0 0 var(--trz-5); padding: 0; }
.wc_payment_method label { font-size: 14px; }
.payment_box { margin-top: var(--trz-2); font-size: 13px; color: var(--trz-text-2); }
#place_order { width: 100%; min-height: 58px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 12px; color: var(--trz-text-3); margin-bottom: var(--trz-4); }
/* The terms checkbox reads as a sentence beside its box, not as a field
label in capitals. The box is required either way; its asterisk goes. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: var(--trz-3);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
text-transform: none;
color: var(--trz-text-2);
cursor: pointer;
}
.woocommerce-form__label-for-checkbox input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; }
.woocommerce-form__label-for-checkbox a { color: var(--trz-text); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-form__label-for-checkbox .required { display: none; }
/* Order received: the order's facts in one quiet row, label over value. */
.woocommerce-order-overview {
display: flex;
flex-wrap: wrap;
gap: var(--trz-4) var(--trz-7);
margin: var(--trz-5) 0 var(--trz-6);
padding: var(--trz-5) 0;
list-style: none;
border-block: 1px solid var(--trz-line);
}
.woocommerce-order-overview li {
display: grid;
gap: var(--trz-1);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--trz-text-3);
}
.woocommerce-order-overview li strong { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--trz-text); }
.woocommerce-order-details__title,
.woocommerce-column__title { margin: var(--trz-7) 0 var(--trz-4); font-size: 22px; font-weight: 300; }
.woocommerce-customer-details address { font-style: normal; line-height: 1.8; color: var(--trz-text-2); }
/* WooCommerce's show-password button: its own stylesheet is not loaded, so
it is drawn here — an eye at the end of the field. */
.password-input { position: relative; display: block; }
.show-password-input {
position: absolute;
inset-inline-end: 0;
top: 50%;
width: 36px;
height: 36px;
padding: 0;
border: 0;
background: none;
color: var(--trz-text-3);
transform: translateY(-50%);
cursor: pointer;
}
.show-password-input::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin: auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.show-password-input.display-password::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E"); }
.show-password-input:hover { color: var(--trz-text); }
/* Single-country store: the country is always Algeria, so its row is noise.
display:none still submits the hidden input WooCommerce validates. */
/* !important because WooCommerce's address script re-shows the row with an
inline style on every country refresh. */
#billing_country_field { display: none !important; }
/* Ivory, like the product page's order form: no accent on an order form. */
#shipping_method input[type="radio"],
.wc_payment_method input[type="radio"],
.woocommerce-form__input-checkbox { accent-color: var(--trz-text); }
/* WooCommerce's jQuery BlockUI loading overlay is inline-styled white;
on this ground it reads as a grey slab dropped over the summary. */
.blockUI.blockOverlay {
background: rgba(8, 8, 7, 0.55) !important;
opacity: 1 !important;
cursor: progress !important;
}
/* selectWoo, which WooCommerce attaches to the checkout's selects. */
.select2-container .select2-selection--single {
height: 48px;
border: 0;
border-bottom: 1px solid var(--trz-line-3);
border-radius: 0;
background: transparent;
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-inline: 0; color: var(--trz-text); }
.select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
.select2-dropdown { background: var(--trz-ink-2); border: 1px solid var(--trz-line-2); border-radius: 0; color: var(--trz-text); }
.select2-search--dropdown .select2-search__field { border-bottom: 1px solid var(--trz-line-3) !important; background: transparent; color: var(--trz-text); }
.select2-results__option { padding: var(--trz-2) var(--trz-3); font-size: 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--trz-ink-3); color: var(--trz-text); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: transparent; color: var(--trz-jade); }
/* Account */
.woocommerce-account .woocommerce { display: grid; gap: var(--trz-7); }
@media (min-width: 900px) {
.woocommerce-account.logged-in .woocommerce { grid-template-columns: 220px minmax(0, 1fr); gap: var(--trz-9); }
}
.trz-account-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--trz-1); }
.trz-account-nav a {
display: block;
padding-block: var(--trz-2);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--trz-text-3);
transition: color var(--trz-fast);
}
.trz-account-nav a:hover { color: var(--trz-text); }
.trz-account-nav .is-active a { color: var(--trz-text); }
.trz-account-nav .is-active a::before { content: ''; display: inline-block; width: 12px; height: 1px; margin-inline-end: var(--trz-2); vertical-align: middle; background: var(--trz-jade); }
.woocommerce-form-login,
.woocommerce-form-register { max-width: 420px; }
.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--trz-2); font-size: 13px; color: var(--trz-text-2); margin-bottom: var(--trz-5); }
.woocommerce-LostPassword a { font-size: 13px; color: var(--trz-text-2); border-bottom: 1px solid var(--trz-line-3); }
.woocommerce-MyAccount-content { font-size: 14px; color: var(--trz-text-2); }
.woocommerce-MyAccount-content a:not(.button) { color: var(--trz-text); border-bottom: 1px solid var(--trz-line-3); }
/* Long-form pages */
.trz-prose { max-width: 64ch; font-size: 16px; line-height: 1.8; color: var(--trz-text-2); }
.trz-prose > * + * { margin-top: var(--trz-4); }
.trz-prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: var(--trz-7); color: var(--trz-text); }
.trz-prose h3 { font-size: 1.15rem; font-weight: 400; margin-top: var(--trz-6); color: var(--trz-text); }
.trz-prose a { color: var(--trz-text); border-bottom: 1px solid var(--trz-line-3); }
.trz-prose a:hover { border-bottom-color: var(--trz-text); }
.trz-prose ul, .trz-prose ol { padding-inline-start: 1.2em; }
.trz-prose blockquote { padding-inline-start: var(--trz-5); border-inline-start: 1px solid var(--trz-jade); font-size: 1.2rem; font-weight: 300; color: var(--trz-text); }
/* ============================================================
* 17. Footer
* ============================================================ */
.trz-footer {
margin-top: clamp(var(--trz-7), 6vw, var(--trz-9));
padding-block: clamp(var(--trz-8), 7vw, var(--trz-9)) var(--trz-5);
border-top: 1px solid var(--trz-line);
background: var(--trz-ink);
}
.trz-footer__grid {
display: grid;
gap: var(--trz-7) var(--trz-5);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .trz-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.trz-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .trz-footer__brand { grid-column: auto; } }
.trz-footer__brand .trz-logo { margin-bottom: var(--trz-5); justify-content: flex-start; }
.trz-footer__brand p { max-width: 34ch; font-size: 14px; line-height: 1.75; color: var(--trz-text-2); }
.trz-footer__col .trz-label { margin-bottom: var(--trz-4); }
.trz-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--trz-3); }
.trz-footer__col a, .trz-footer__col li { font-size: 14px; color: var(--trz-text-2); transition: color var(--trz-fast); }
.trz-footer__col a:hover { color: var(--trz-text); }
/* The logo, large, closing the page — where the home page's flying
letters land. */
.trz-footer__mark { margin-top: clamp(var(--trz-8), 8vw, var(--trz-9)); line-height: 0; }
.trz-footer__mark img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.trz-footer__social { display: flex; flex-wrap: wrap; gap: var(--trz-2); list-style: none; margin: var(--trz-5) 0 0; padding: 0; }
.trz-footer__social a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--trz-line-2);
border-radius: 50%;
color: var(--trz-text-2);
transition: color var(--trz-fast), border-color var(--trz-fast);
}
.trz-footer__social a:hover { color: var(--trz-text); border-color: var(--trz-line-3); }
.trz-footer__social svg { width: 17px; height: 17px; }
.trz-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--trz-3) var(--trz-6);
margin-top: clamp(var(--trz-8), 7vw, var(--trz-9));
padding-top: var(--trz-5);
border-top: 1px solid var(--trz-line);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--trz-text-3);
}
/* ============================================================
* 18. Motion
* ============================================================ */
/*
* Reveal. site.js marks as pending only what is below the fold when the
* page arrives; everything on screen is shown at once. Without JS nothing is
* ever pending, so nothing is ever hidden.
*/
.trz-reveal { transition: opacity 900ms var(--trz-ease), transform 900ms var(--trz-ease); }
.trz-reveal.is-pending { opacity: 0; transform: translateY(16px); }
.trz-reveal.no-motion { transition: none; }
/*
* Photographs arrive with a fade instead of popping in. Lazy images only —
* an eager image is above the fold, and fading the hero or a product's lead
* photograph would only delay the moment the page looks ready.
*/
.js img[loading="lazy"]:not(.trz-card__alt) {
opacity: 0;
transition: opacity 600ms var(--trz-ease), transform 1.2s var(--trz-ease);
}
.js img[loading="lazy"].is-loaded:not(.trz-card__alt) { opacity: 1; }
/* ============================================================
* View transitions
*
* Every page opts in, so a same-site navigation cross-fades instead of
* cutting: the old page lifts away quickly and the new one settles in.
* The header is named, so it holds still while the page beneath it
* changes — the site stops feeling like separate pages.
*
* A product card's photograph and the product page's lead photograph share
* the name trz-product-image (set by site.js and trz_product_gallery), so
* the browser flies one into the other. The outgoing photograph stays
* opaque for the whole flight, so the morph always shows a real image even
* if the new one is still arriving.
*
* Browsers without cross-document transitions (Firefox, for now) simply
* navigate as before.
* ============================================================ */
@view-transition { navigation: auto; }
.trz-header { view-transition-name: trz-header; }
::view-transition-old(root) { animation: 200ms cubic-bezier(0.4, 0, 1, 1) both trz-vt-out; }
::view-transition-new(root) { animation: 420ms var(--trz-ease) 60ms both trz-vt-in; }
@keyframes trz-vt-out { to { opacity: 0; } }
@keyframes trz-vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-group(trz-header) { animation-duration: 300ms; }
::view-transition-group(trz-product-image) {
animation-duration: 560ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(trz-product-image) { animation: none; opacity: 1; }
::view-transition-new(trz-product-image) { animation: 300ms var(--trz-ease) 220ms both trz-vt-image-in; }
@keyframes trz-vt-image-in { from { opacity: 0; } }
/* Both ends are 4:5, but a snapshot should never be squeezed if they differ. */
::view-transition-old(trz-product-image),
::view-transition-new(trz-product-image) { height: 100%; object-fit: cover; overflow: clip; }
/*
* Motion is an enhancement, never a dependency: the site reads and sells
* with every transition off.
*/
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.trz-reveal.is-pending { opacity: 1; transform: none; }
.js img[loading="lazy"]:not(.trz-card__alt) { opacity: 1; }
.trz-card__alt { display: none; }
.trz-btn:active, .trz-size:active, .trz-swatch:active, .trz-qty__btn:active, .trz-icon-btn:active { transform: none; }
}
/* ============================================================
* 19. Depth
*
* Soft white light and two faint rings behind the page, so the black reads
* as a space rather than a flat fill; a fine grain over them keeps the soft
* light from showing steps. One fixed layer, painted once: it sits on its
* own compositor layer and the page scrolls over it, so scrolling never
* repaints it. Everything in it is white at low alpha; --trz-depth (0-1,
* TRZ Design > Strength) scales the whole layer. Off: no layer at all.
* ============================================================ */
/* The layer goes under the content but over the body's own fill. */
body.trz-depth { isolation: isolate; }
body.trz-depth::before {
content: '';
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
height: 100lvh; /* The largest viewport: no resize when a phone's toolbar slides. */
pointer-events: none;
opacity: var(--trz-depth, 0.28);
background-image:
var(--trz-depth-grain, none),
var(--trz-depth-rings, none),
radial-gradient(ellipse 58% 52% at 8% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
radial-gradient(ellipse 42% 56% at 100% 46%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
radial-gradient(ellipse 52% 44% at 24% 100%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 72%);
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
/* The rings: a 130vmax square whose centre sits on the right edge, a
third of the way down. */
background-size: 180px 180px, 130vmax 130vmax, auto, auto, auto;
background-position: 0 0, right -65vmax top calc(34vh - 65vmax), 0 0, 0 0, 0 0;
transform: translateZ(0);
}
body.trz-depth--shapes { --trz-depth-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg fill='none' stroke='%23fff' vector-effect='non-scaling-stroke'%3E%3Ccircle cx='500' cy='500' r='330' stroke-opacity='.2' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='500' cy='500' r='490' stroke-opacity='.13' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); }
body.trz-depth--grain { --trz-depth-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); }
/* Areas that paint their own ink would cut the light off at their edges. */
.trz-depth .trz-footer { background: transparent; }
/* ============================================================
* 20. Contact
*
* The page's text and the ways to reach the shop on one side; the form on
* the other, on the order form's raised surface so the two forms read as
* one family.
* ============================================================ */
.trz-contact {
display: grid;
gap: var(--trz-7) clamp(var(--trz-7), 6vw, var(--trz-9));
padding-bottom: clamp(var(--trz-8), 8vw, var(--trz-9));
}
@media (min-width: 900px) {
.trz-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.trz-contact__text { margin-bottom: var(--trz-6); }
.trz-contact__channels { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trz-line); }
.trz-contact__channels a {
display: flex;
align-items: center;
gap: var(--trz-3);
min-height: 56px;
border-bottom: 1px solid var(--trz-line);
font-size: 15px;
color: var(--trz-text);
transition: color var(--trz-fast);
}
.trz-contact__channels a:hover { color: var(--trz-text-2); }
.trz-contact__channels svg { flex: none; width: 18px; height: 18px; color: var(--trz-text-2); }
.trz-contact-form {
padding: 14px;
border: 1px solid var(--trz-line-2);
border-radius: 20px;
background: linear-gradient(180deg, #1A1917 0%, var(--trz-ink-2) 60%);
box-shadow:
inset 0 1px 0 rgba(237, 232, 223, 0.05),
0 30px 60px -32px rgba(0, 0, 0, 0.9);
container-type: inline-size;
}
@media (min-width: 560px) { .trz-contact-form { padding: 20px; } }
/* The order form's boxed fields: name and phone side by side once the card has the room. */
.trz-contact-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container (min-width: 420px) {
.trz-contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trz-contact-form__note { margin: var(--trz-3) 4px 0; font-size: 12.5px; color: var(--trz-text-3); }
.trz-contact-form .trz-order__error { margin-top: var(--trz-3); }
.trz-contact-form__submit { width: 100%; min-height: 56px; margin-top: var(--trz-4); border-radius: var(--trz-round); }
.trz-contact-form__submit.is-sending { opacity: 0.6; }
.trz-contact-form__submit.is-sending .trz-btn__label::after { content: '…'; }
.trz-contact-form__done { padding-block: var(--trz-6); text-align: center; outline: none; }
.trz-contact-form__mark {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin: 0 auto var(--trz-4);
border: 1px solid var(--trz-line-3);
border-radius: 50%;
}
.trz-contact-form__mark svg { width: 20px; height: 20px; }
.trz-contact-form__done-title { margin: 0 0 var(--trz-2); font-size: 20px; font-weight: 300; letter-spacing: -0.01em; color: var(--trz-text); }
.trz-contact-form__done p:last-child { margin: 0; color: var(--trz-text-2); }
/* Honeypot: off screen for people, still in the form for bots. */
.trz-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* ============================================================
* 21. Logo flight (home page)
*
* As the hero scrolls away its logo breaks into its letters (hero.js):
* they burst out, tumble in 3D in a layer of their own, and fly back
* together into the footer's logo. The layer sits above the hero — the
* letters start as its logo — and below everything after it, which is
* transparent: the letters pass behind photographs and text, never over
* them. Transforms and opacity only.
* ============================================================ */
.trz-flight {
position: fixed;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
perspective: 1100px;
}
.trz-flight__piece {
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
transform-origin: 50% 50%;
filter: brightness(0) invert(1); /* White, like the logos they come from. */
will-change: transform, opacity;
}
.trz-flight-on main > :not(.trz-hero),
.trz-flight-on .trz-footer,
.trz-flight-on .trz-announce { position: relative; z-index: 2; }
.trz-flight-on .trz-footer { background: transparent; }
/* The letters stand in for both logos while they fly. Opacity, not
visibility, so the hero's heading keeps its name for screen readers. */
.trz-flight-on .trz-hero__logo img,
.trz-flight-on [data-logo-mark] img { opacity: 0 !important; animation: none; }
/* ============================================================
* 22. Size guide
*
* The chart behind "Size guide": a sheet from the bottom on a phone, a
* drawer from the side on a larger screen — the same layer as the bag
* (scrim, Escape, focus back to the button). A row naming one of the
* product's sizes can be tapped to choose it; the size already chosen is
* marked. A chart wider than a phone scrolls sideways on its own.
* ============================================================ */
.trz-guide {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 100001;
display: flex;
flex-direction: column;
max-height: 86svh;
background: var(--trz-ink-2);
border-top: 1px solid var(--trz-line-2);
transform: translateY(100%);
visibility: hidden;
transition: transform 480ms var(--trz-ease), visibility 0s linear 480ms;
outline: none;
will-change: transform;
}
.trz-guide[data-open="true"] { transform: none; visibility: visible; transition: transform 480ms var(--trz-ease), visibility 0s; }
@media (min-width: 760px) {
.trz-guide {
inset-block: 0;
inset-inline: auto 0;
width: min(92vw, 480px);
max-height: none;
border-top: 0;
border-inline-start: 1px solid var(--trz-line);
transform: translateX(100%);
transition: transform 560ms var(--trz-ease), visibility 0s linear 560ms;
}
[dir="rtl"] .trz-guide { transform: translateX(-100%); }
.trz-guide[data-open="true"],
[dir="rtl"] .trz-guide[data-open="true"] { transform: none; transition: transform 560ms var(--trz-ease), visibility 0s; }
}
.trz-guide__head {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--trz-4);
min-height: 56px;
padding-inline: var(--trz-gutter) var(--trz-2);
border-bottom: 1px solid var(--trz-line);
}
.trz-guide__ar {
margin-inline-start: var(--trz-2);
font-family: var(--trz-arabic);
font-size: 12.5px;
letter-spacing: 0;
text-transform: none;
color: var(--trz-text-3);
}
.trz-guide__body {
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--trz-5) var(--trz-gutter) calc(var(--trz-6) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 760px) {
.trz-guide__head { padding-inline: var(--trz-5) var(--trz-3); min-height: var(--trz-header); }
.trz-guide__body { padding-inline: var(--trz-5); }
}
/* The garment, drawn: an outline, its seams, and an arrow for each
measurement with its letter — the letter heads its column below. */
.trz-chart__art {
display: flex;
justify-content: center;
gap: var(--trz-2);
margin-top: var(--trz-5);
padding: var(--trz-4) var(--trz-3);
border: 1px solid var(--trz-line);
border-radius: var(--trz-round);
background: rgba(237, 232, 223, 0.025);
}
.trz-chart__svg { width: auto; height: clamp(150px, 42vw, 190px); max-width: 100%; overflow: visible; }
.trz-chart__shape { fill: rgba(237, 232, 223, 0.05); stroke: var(--trz-text-3); stroke-width: 1.3; stroke-linejoin: round; }
.trz-chart__detail { fill: none; stroke: var(--trz-text-3); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.trz-chart__rib { fill: none; stroke: var(--trz-text-3); stroke-width: 0.6; opacity: 0.45; }
.trz-chart__shade { fill: rgba(237, 232, 223, 0.14); stroke: var(--trz-text-3); stroke-width: 0.6; stroke-opacity: 0.6; }
.trz-chart__stitch { fill: none; stroke: var(--trz-text-3); stroke-width: 0.7; stroke-dasharray: 2 2.2; opacity: 0.8; }
.trz-chart__tip { fill: none; stroke: var(--trz-text-3); stroke-width: 2.4; stroke-linecap: round; }
.trz-chart__arrow path { fill: none; stroke: var(--trz-text); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.trz-chart__arrow circle { fill: var(--trz-ink-2); stroke: var(--trz-text); stroke-width: 1; }
.trz-chart__arrow text { fill: var(--trz-text); font: 600 8.5px/1 var(--trz-font); text-anchor: middle; }
.trz-chart__key {
display: inline-grid;
place-items: center;
width: 17px;
height: 17px;
margin-inline-end: 5px;
border: 1px solid var(--trz-text);
border-radius: 50%;
font-size: 9px;
letter-spacing: 0;
color: var(--trz-text);
vertical-align: 1px;
}
.trz-guide__product { margin: 0 0 var(--trz-1); font-size: 17px; letter-spacing: -0.01em; }
.trz-guide__fit { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--trz-text-2); }
.trz-guide__scroll { margin-top: var(--trz-5); overflow-x: auto; overscroll-behavior-x: contain; }
.trz-guide__table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
font-variant-numeric: lining-nums tabular-nums;
}
.trz-guide__table th,
.trz-guide__table td {
height: 48px;
padding: 0 var(--trz-3);
border-bottom: 1px solid var(--trz-line);
text-align: center;
white-space: nowrap;
}
.trz-guide__table th:first-child { padding-inline-start: var(--trz-2); text-align: start; }
.trz-guide__table thead th {
height: 44px;
padding-block: 6px;
border-bottom-color: var(--trz-line-2);
font-size: 10px;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--trz-text-3);
/* Headings wrap rather than push the last column off a phone's edge. */
white-space: normal;
}
.trz-guide__table tbody th { font-weight: 600; letter-spacing: 0.08em; color: var(--trz-text); }
.trz-guide__table td { color: var(--trz-text-2); }
.trz-guide__table tr.is-pickable { cursor: pointer; transition: background var(--trz-fast); }
.trz-guide__table tr.is-pickable:hover { background: rgba(237, 232, 223, 0.04); }
.trz-guide__table tr.is-pickable:focus-visible { outline: 1px solid var(--trz-text); outline-offset: -1px; }
/* The size already chosen: lit, with a dot beside its name. */
.trz-guide__table tr.is-current { background: rgba(237, 232, 223, 0.07); }
.trz-guide__table tr.is-current td { color: var(--trz-text); }
.trz-guide__table tr.is-current th::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-inline-start: var(--trz-2);
border-radius: 50%;
background: var(--trz-text);
vertical-align: middle;
}
.trz-guide__hint { margin: var(--trz-3) 0 0; font-size: 12px; color: var(--trz-text-3); }
.trz-guide__hint[hidden] { display: none; }
.trz-guide__note { margin: var(--trz-3) 0 0; font-size: 12.5px; line-height: 1.6; color: var(--trz-text-2); }
@media (prefers-reduced-motion: reduce) {
.trz-guide,
.trz-guide[data-open="true"] { transition: visibility 0s; }
}