/* ============================================================
 * openair_lounge — minimal brand overrides on top of Helendo
 * ============================================================ */

:root {
    /* Stone & Terracotta — the palette he chose, RE-LIT. Not one hue is new.
       What changes is value, which is what "нещо в цветовете" actually was:
         paper -> stone was 2.42 L*  (invisible)   -> now 7.61 L*
         paper -> line  was 6.63 L*  (a smudge)    -> now 14.00 L*
         ink            was L* 9.16  (never black) -> now L* 5.38
         --ol-soft      was 2.69:1   (AA FAIL)     -> now 5.13:1  AA
       Terracotta keeps its exact hex. Only its COUNT changes: ~30 marks per
       homepage becomes 11, all of them labels and rules — which is the rule
       the owner set himself. */
    --ol-paper:    #FAF8F4;   /* the page                     L* 97.63 */
    --ol-surface:  #FFFFFF;   /* true white is now a highlight L* 100  */
    --ol-stone:    #E7E2D8;   /* the one band that reads       L* 90.02 */
    --ol-line:     #D6D0C3;   /* a hairline you can see        L* 83.63 */
    --ol-accent:   #A85D45;   /* terracotta — UNCHANGED HEX. Rare now.  */
    --ol-accent-2: #8A7F6F;   /* supporting taupe — UNCHANGED HEX       */
    --ol-accent-light: #D9977C; /* the clay lifted for photographs      */
    --ol-muted:    #55504A;   /* running copy   7.52:1 on paper   AAA   */
    --ol-soft:     #6E6961;   /* captions, meta 5.13:1 on paper   AA    */
    --ol-ink:      #12120F;   /* 17.69:1 on paper                 AAA   */
    --ol-error:    #B23A2E;   /* a warning must not be the brand colour */

    /* Type. Playfair is NOT Playfair Display: it is the 2023 variable
       superfamily with an opsz axis 5..1200 and, unlike Playfair Display,
       real Bulgarian letterforms (cyrl/BGR, 30 locl substitutions roman /
       14 italic, verified with fontTools on the served woff2). Commissioner
       carries the small tracked voice (cyrl/BGR, 22 subs).
       Prata, Cormorant Garamond and Roboto all leave the payload. */
    --ol-font-display: 'Playfair', 'Cormorant Garamond', Georgia, serif;
    --ol-font-accent:  'Playfair', 'Cormorant Garamond', Georgia, serif; /* its OWN true italic */
    --ol-font-body:    'Commissioner', 'Helvetica Neue', Arial, sans-serif;

    /* Measure: two values, replacing five defensive max-widths */
    --ol-measure:       66ch;
    --ol-measure-tight: 40ch;

    /* One label register, one tracking */
    --ol-track: .24em;
}

/* Theme typography — exact pixel values lifted from Helendo style.css */
body {
    font-family: var(--ol-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.74;
    color: #1A1A17;
}

h1, h2, h3, h4, h5, h6,
.section-title--one,
.hero-area.hero-slider-one .hero-title,
.breadcrumb-title,
.ol-wordmark {
    font-family: var(--ol-font-display);
    font-weight: 400;
    color: #1A1A17;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.41;
    letter-spacing: 0;
}

h1, .hero-area.hero-slider-one .hero-title { font-size: 60px; line-height: 1.1; }
h2, .section-title--one                    { font-size: 36px; }
h3                                         { font-size: 30px; }
h4                                         { font-size: 26px; }
h5                                         { font-size: 24px; }
h6                                         { font-size: 18px; }@media (min-width: 992px) and (max-width: 1199px) {
    h1, .hero-area.hero-slider-one .hero-title { font-size: 46px; }
    h4 { font-size: 24px; }}@media (min-width: 768px) and (max-width: 991px) {
    h1, .hero-area.hero-slider-one .hero-title { font-size: 40px; }
    h2, .section-title--one { font-size: 32px; }
    h3 { font-size: 28px; }
    h4 { font-size: 22px; }}@media (max-width: 767px) {
    h1, .hero-area.hero-slider-one .hero-title { font-size: 34px; }
    h2, .section-title--one { font-size: 30px; }
    h3 { font-size: 25px; }
    h4 { font-size: 22px; }
    h5 { font-size: 20px; }}

/* Sans-serif (Roboto) for all UI: eyebrows, nav, buttons, meta, product cards */
.sub-heading,
.ol-feat-block__copy h6.sub-heading,
.hero-area .text-color-primary,
.ol-top-nav a, .ol-lang,
.btn, .hero-btn-one, .btn--text,
.prodect-title, .prodect-price,
.footer-widget__title,
.breadcrumb-list,
.result-count {
    font-family: var(--ol-font-body) !important;
}
.sub-heading { font-size: 14px; color: #9A958C; }

p, .product-content, .quickview-peragraph p {
    font-family: var(--ol-font-body);
}

/* Italic accent serif — for occasional emphasis only */
em, i, .ol-accent-quote, .ol-rich blockquote {
    font-family: var(--ol-font-accent);
    font-style: italic;
}

/* Brand wordmark — Prata (matching demo logo style) */
.ol-wordmark {
    font-family: var(--ol-font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1A1A17 !important;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
}
.ol-wordmark--footer { color: #1A1A17 !important; }

/* --- Logo lockup (outlined SVG so it never depends on a webfont) --- */
.ol-logo {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}
/* header carries the mark + wordmark lockup (5:1), the footer the wordmark alone */
.ol-logo img {
    display: block;
    width: 218px;
    height: auto;
}
.ol-logo--footer img { width: 184px; }@media (max-width: 1199px) { .ol-logo img { width: 190px; }}@media (max-width: 767px)  { .ol-logo img { width: 168px; } .ol-logo--footer img { width: 156px; }}
.bg-img.bg-dark .ol-wordmark { color: #fff !important; }@media (max-width: 1199px) {
    .ol-wordmark { font-size: 19px; letter-spacing: .1em; }}

/* Top-left horizontal nav, sits in the search column on desktop */
.ol-top-nav {
    display: flex;
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ol-top-nav a {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .22em;
    color: #1A1A17;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, color .25s ease;
}
.ol-top-nav a:hover {
    border-bottom-color: var(--ol-accent);
    color: var(--ol-ink);
}

/* Language switcher — sits in a flex row with the contact icon */
.ol-lang {
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    margin-right: 18px;
}
/* .55 opacity on ink put the inactive language at ~4:1 on paper, under the
   4.5:1 AA floor for 12px text. The muted ink is a real palette colour at
   7.52:1 and keeps the same quiet-vs-current reading. */
.ol-lang a       { color: var(--ol-muted); text-decoration: none; padding: 0 4px; opacity: 1; }
.ol-lang a:hover { color: var(--ol-ink); }
.ol-lang a.is-active { color: var(--ol-ink); }
.ol-lang a.is-active { opacity: 1; font-weight: 600; border-bottom: 1px solid var(--ol-accent); }
.ol-lang .sep    { opacity: .4; margin: 0 2px; }

/* Header — white background, dark content, sits above the hero. Matches
   the Helendo demo: search left, brand center, lang+icons right. */
.header-area.header-area--default { background: #fff; }
.header-area.header-area--default + #main-wrapper .site-wrapper-reveal { background: transparent; }
.header-search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.header-search-box .search-field {
    border: 0;
    border-bottom: 1px solid #E4E0D7;
    background: transparent;
    padding: 8px 30px 8px 0;
    font-size: 13px;
    color: #1A1A17;
    width: 100%;
    outline: none;
    font-family: inherit;
}
.header-search-box .search-field::placeholder { color: #9A958C; }
.header-search-box .search-field:focus { border-bottom-color: var(--ol-accent); }
.header-search-box .search-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #1A1A17;
    cursor: pointer;
    padding: 0;
}
.header-right-side .header-right-items {
    display: inline-block;
    margin-left: 22px;
}
.header-right-side .header-right-items a {
    color: #1A1A17;
    font-size: 18px;
}
.header-right-side .header-right-items a:hover { color: var(--ol-accent); }

.ol-mobile-lang {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 16px;
}
.ol-mobile-lang a { text-decoration: none; color: #1A1A17; }
.ol-mobile-lang a.is-active { color: var(--ol-accent); font-weight: 600; }


/* ---------- Categories — magazine quilt tiles ---------- */
/* --- 01 · THE INDEX — the contents page: ten collections, one scene
   each. Three bands (5-4-3 / four portraits / 3-4-5) on a 12-column bed;
   the aspect ratios are solved so each band's photographs land at one
   height. Captions live BELOW the frame, magazine-style — never a scrim. */
.ol-index__lede { color: var(--ol-muted); line-height: 1.7; max-width: 60ch; }
.ol-chapter__meta {
    margin-left: auto;
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ol-index__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: clamp(14px, 1.4vw, 20px);
    row-gap: 44px;
    margin-top: 8px;
}
.ol-index-tile { display: block; text-decoration: none; min-width: 0; }
.ol-index-tile__photo {
    display: block;
    overflow: hidden;
    background: var(--ol-stone);
    aspect-ratio: 1;          /* ten identical frames — two calm rows of five */
}
.ol-index-tile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.ol-index-tile:hover .ol-index-tile__photo img { transform: scale(1.03); }
.ol-index-tile__caption {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ol-line);
}
.ol-index-tile__no {
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
}
.ol-index-tile__name {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 30;
    font-style: italic;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ol-ink);
    transition: color .25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ol-index-tile:hover .ol-index-tile__name { color: var(--ol-accent); }
.ol-index-tile__count {
    margin-left: auto;
    font-family: var(--ol-font-body);
    font-size: 9.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 1199px) {
    .ol-index__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}
@media (max-width: 767px) {
    .ol-index__grid { column-gap: 12px; row-gap: 36px; }
    .ol-index-tile__no { display: none; }
    .ol-index-tile__caption { flex-wrap: wrap; gap: 3px 12px; }
    .ol-index-tile__name { font-size: 16px; flex: 1 1 100%; white-space: normal; }
    .ol-index-tile__count { font-size: 9px; margin-left: 0; }
    .ol-chapter__meta { display: none; }
}

/* ---------- Lookbook — full-bleed editorial scene tiles, zig-zag rhythm ---------- */
.ol-lookbook { background: #F5F3EF; }
.ol-lookbook__lede { color: #726D64; line-height: 1.7; max-width: 60ch; margin: 0 auto; }
.ol-lookbook__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    /* Reserve room for the vertical shift */
    padding-top: 60px;
    padding-bottom: 60px;
}
.ol-lookbook__tile {
    position: relative;
    display: block;
    height: 460px;
    background-size: cover;
    background-position: center;
    background-color: #1A1A17;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: transform .5s ease;
}
/* Magazine zig-zag — 1st & 3rd up, 2nd & 4th down. Same size, just offset. */
.ol-lookbook__tile:nth-child(odd)  { transform: translateY(-50px); }
.ol-lookbook__tile:nth-child(even) { transform: translateY(50px);  }
.ol-lookbook__tile:nth-child(odd):hover  { transform: translateY(-56px); }
.ol-lookbook__tile:nth-child(even):hover { transform: translateY(44px);  }

.ol-lookbook__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 100%);
    transition: background .35s;
}
.ol-lookbook__tile:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.72) 100%); }
.ol-lookbook__tile:hover { color: #fff; }
/* Drop the tall modifier — all tiles are equal now */
.ol-lookbook__tile--tall { grid-row: auto; }

.ol-lookbook__overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 28px 30px;
}
.ol-lookbook__eyebrow {
    display: block;
    font-family: var(--ol-font-body);
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: 10px;
    color: rgba(255,255,255,.78);
    margin-bottom: 6px;
}
.ol-lookbook__name {
    font-family: var(--ol-font-display);
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 10px;
    color: #fff;
}
.ol-lookbook__cta {
    font-family: var(--ol-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 11px;
    color: #f4e8c7;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s ease;
}
.ol-lookbook__tile:hover .ol-lookbook__cta { gap: 14px; }@media (max-width: 991px) {
    .ol-lookbook__grid {
        grid-template-columns: 1fr 1fr;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .ol-lookbook__tile { height: 320px; }
    .ol-lookbook__tile:nth-child(odd)  { transform: translateY(-30px); }
    .ol-lookbook__tile:nth-child(even) { transform: translateY(30px); }
    .ol-lookbook__tile:nth-child(odd):hover  { transform: translateY(-36px); }
    .ol-lookbook__tile:nth-child(even):hover { transform: translateY(24px); }}@media (max-width: 575px) {
    .ol-lookbook__grid { grid-template-columns: 1fr; padding: 0; }
    .ol-lookbook__tile { height: 280px; transform: none !important; }
    .ol-lookbook__tile:hover { transform: none !important; }}


/* ---------- Collection scenes — magazine masonry/quilt ---------- */
.ol-scenes { background: #F5F3EF; }
.ol-scenes__grid {
    display: grid;
    gap: 14px;
}
/* Layout variants based on scene count, picking magazine-style rhythms */
.ol-scenes__grid--1 { grid-template-columns: 1fr; grid-auto-rows: 520px; }
.ol-scenes__grid--2 { grid-template-columns: 2fr 1fr; grid-auto-rows: 480px; }
.ol-scenes__grid--3 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 240px 240px;
}
.ol-scenes__grid--3 .ol-scenes__tile--1 { grid-row: span 2; }
.ol-scenes__grid--4,
.ol-scenes__grid--5,
.ol-scenes__grid--6 {
    grid-template-columns: 2fr 1fr 1fr 2fr;
    grid-template-rows: 240px 240px;
}
.ol-scenes__grid--4 .ol-scenes__tile--1,
.ol-scenes__grid--4 .ol-scenes__tile--4,
.ol-scenes__grid--5 .ol-scenes__tile--1,
.ol-scenes__grid--6 .ol-scenes__tile--1 { grid-row: span 2; }
.ol-scenes__grid--5 .ol-scenes__tile--5 { grid-column: span 2; }
.ol-scenes__grid--6 .ol-scenes__tile--5,
.ol-scenes__grid--6 .ol-scenes__tile--6 { grid-row: 3; }
.ol-scenes__grid--6 { grid-template-rows: 240px 240px 320px; }
.ol-scenes__grid--6 .ol-scenes__tile--5,
.ol-scenes__grid--6 .ol-scenes__tile--6 { grid-column: span 2; }

.ol-scenes__tile {
    background-size: cover;
    background-position: center;
    /* paper, not near-black: a scene that turns out to be a cut-out would
       otherwise render as a solid black rectangle */
    background-color: var(--ol-stone);
    overflow: hidden;
    transition: transform .6s ease;
}
.ol-scenes__tile:hover { transform: scale(1.02); }@media (max-width: 991px) {
    .ol-scenes__grid--3,
    .ol-scenes__grid--4,
    .ol-scenes__grid--5,
    .ol-scenes__grid--6 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px 240px 240px;
    }
    .ol-scenes__grid--3 .ol-scenes__tile--1,
    .ol-scenes__grid--4 .ol-scenes__tile--1,
    .ol-scenes__grid--4 .ol-scenes__tile--4,
    .ol-scenes__grid--5 .ol-scenes__tile--1,
    .ol-scenes__grid--6 .ol-scenes__tile--1 { grid-row: auto; grid-column: span 2; }
    .ol-scenes__grid--5 .ol-scenes__tile--5,
    .ol-scenes__grid--6 .ol-scenes__tile--5,
    .ol-scenes__grid--6 .ol-scenes__tile--6 { grid-column: span 1; }}@media (max-width: 575px) {
    .ol-scenes__grid { grid-template-columns: 1fr !important; grid-auto-rows: 240px !important; }
    .ol-scenes__tile { grid-row: auto !important; grid-column: 1 !important; }}


/* ---------- Product page atmosphere strip ---------- */
.ol-atmosphere { background: #F5F3EF; }
.ol-atmosphere__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}
/* Collections ship 1-6 scenes; without these the grid kept four tracks and
   left up to three empty columns in a 340px-tall band. */
/* Four 316x340 columns cropped every landscape photograph into a portrait
   slot — the sofa lost both its arms and the setting around it disappeared,
   which is the whole point of the section. Two wide frames per row instead:
   an establishing shot arrives whole, and 800px sources (Erinoz publish
   nothing larger) still land on a 640px slot rather than a stretched one. */
.ol-atmosphere__strip { grid-template-columns: repeat(2, 1fr); }
.ol-atmosphere__strip--1 { grid-template-columns: 1fr; }
.ol-atmosphere__strip--3 { grid-template-columns: repeat(3, 1fr); }
.ol-atmosphere__tile {
    display: block;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: var(--ol-stone);
    transition: filter .35s ease;
}
.ol-atmosphere__strip--1 .ol-atmosphere__tile { aspect-ratio: 21 / 9; }
.ol-atmosphere__tile:hover { filter: brightness(.85); }@media (max-width: 991px) { .ol-atmosphere__strip, .ol-atmosphere__strip--3 { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 575px) { .ol-atmosphere__strip, .ol-atmosphere__strip--1, .ol-atmosphere__strip--3 { grid-template-columns: 1fr; } .ol-atmosphere__strip--1 .ol-atmosphere__tile { aspect-ratio: 3 / 2; }}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* Group title on category listing */
.ol-category-group__title {
    font-family: var(--ol-font-display);
    font-size: 28px;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ol-line);
    flex: 1;
}


/* Hero slider — demo-exact layout: cool light gray bg, text left, product right.
   Background color sampled from Helendo demo (cooler/lighter than warm cream).
   Pulled from #F5F3EF to a slightly desaturated tone for a magazine feel. */
.hero-box-area { background: #EFECE6; }
/* The slide is laid out by the .ol-hero rules at the end of this file; slick
   only needs it to be a block-level box with a stacking context. */
.hero-area.hero-slider-one .single-hero-slider-one {
    position: relative;
    overflow: hidden;
}
.hero-area.hero-slider-one .container { position: relative; z-index: 2; }
/* The masthead's size, its 56px terracotta bar and its fake italic all moved to
   the EDITORIAL LAYER II block at the end of this file. What is left here is
   only the position:relative the layout still needs. */
.hero-area.hero-slider-one .hero-text-one .hero-title {
    position: relative;
}
.hero-area.hero-slider-one .hero-btn-one {
    background: #1A1A17 !important;
    color: #fff !important;
    border: 1px solid #1A1A17 !important;
    padding: 13px 26px !important;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    height: auto;
    line-height: 1.2 !important;
    transition: background .25s, border-color .25s, color .25s;
}
.hero-area.hero-slider-one .hero-btn-one:hover {
    background: var(--ol-accent) !important;
    border-color: var(--ol-accent) !important;
}
.hero-area.hero-slider-one .hero-btn-one i { margin-left: 8px; font-size: 13px; }

/* Product cutout — wide column lets the subject feel substantial; soft
   radial vignette below adds the "magazine shadow" depth from the demo. */
.hero-area.hero-slider-one .hero-product {
    position: relative;
    padding: 0;
    background-color: #EFECE6;
    background-image: radial-gradient(ellipse 55% 18% at 50% 88%, rgba(31,31,28,.12) 0%, rgba(31,31,28,0) 100%);
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vertical magazine-style watermark — sits in a fixed-width strip on the
   left edge, rotated -90° around its own center. Pattern: wrapper is a
   200px column, watermark inside is absolutely centered + rotated. */
.hero-area.hero-slider-one .hero-watermark-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
.hero-area.hero-slider-one .hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    font-family: var(--ol-font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(70px, 7vw, 120px);
    color: rgba(31, 31, 28, .075);
    line-height: 1;
    letter-spacing: -.005em;
    white-space: nowrap;
    display: block;
}@media (max-width: 991px) {
    .hero-area.hero-slider-one .hero-watermark-wrap { display: none; }}

/* Slick dots — center bottom like demo */
.hero-area.hero-slider-one .slick-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 4;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
}
.hero-area.hero-slider-one .slick-dots li { margin: 0; }
.hero-area.hero-slider-one .slick-dots button {
    background: #d8d3c2;
    border: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    padding: 0;
    cursor: pointer;
    transition: background .25s;
}
.hero-area.hero-slider-one .slick-dots .slick-active button { background: var(--ol-accent); }

/* Hide arrows on narrow viewports */
.hero-area.hero-slider-one .slick-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 4;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(31,31,28,.2);
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.hero-area.hero-slider-one .slick-arrow:hover {
    background: #1A1A17;
    border-color: #1A1A17;
}
.hero-area.hero-slider-one .slick-prev { left: 28px; }
.hero-area.hero-slider-one .slick-next { right: 28px; }
.hero-area.hero-slider-one .slick-prev::before,
.hero-area.hero-slider-one .slick-next::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-top: 1px solid #1A1A17;
    border-right: 1px solid #1A1A17;
    transition: border-color .2s;
}
.hero-area.hero-slider-one .slick-arrow:hover::before {
    border-top-color: #fff;
    border-right-color: #fff;
}
.hero-area.hero-slider-one .slick-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.hero-area.hero-slider-one .slick-next::before { transform: translate(-70%, -50%) rotate(45deg); }@media (max-width: 991px) {
    .hero-area.hero-slider-one .single-hero-slider-one {
        min-height: 0;
        height: auto;
        padding: 50px 0 70px;
    }
    .hero-area.hero-slider-one .slick-arrow { display: none !important; }
    /* Product container: shrink to content on stacked layout */
    .hero-area.hero-slider-one .hero-product {
        min-height: 0;
        background-image: radial-gradient(ellipse 60% 14% at 50% 92%, rgba(31,31,28,.12) 0%, rgba(31,31,28,0) 100%);
    }
    .hero-area.hero-slider-one .slick-dots { bottom: 16px; }}@media (max-width: 575px) {
    .hero-area.hero-slider-one .single-hero-slider-one { padding: 36px 0 64px; }}


/* Slick dots / arrows visible on the hero */
.hero-area.hero-slider-one .slick-dots {
    position: absolute;
    bottom: 30px;
    left: 0; right: 0;
    text-align: center;
    z-index: 3;
}


/* Featured-product blocks — magazine layout matching Helendo demo:
   - Product cutout floats on the cream page (mix-blend-mode kills white box)
   - Soft circular backdrop behind product for depth
   - Watermark: BOLD SANS-SERIF, very light gray, BOTTOM of block, bleeds off edge */
.ol-feat-block {
    position: relative;
    overflow: hidden;
    background: #F5F3EF;
}
.ol-feat-block + .ol-feat-block { padding-top: 0; }
.ol-feat-block:nth-child(even of .ol-feat-block) { background: #EFECE6; }

.ol-feat-block__watermark {
    position: absolute;
    font-family: var(--ol-font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(50px, 7vw, 120px);
    line-height: 1;
    color: rgba(31, 31, 28, .07);
    pointer-events: none;
    z-index: 0;
    bottom: 30px;
    letter-spacing: 0;
    text-transform: capitalize;
    white-space: nowrap;
}
.ol-feat-block--left  .ol-feat-block__watermark { right: -.08em; text-align: right; }
.ol-feat-block--right .ol-feat-block__watermark { left:  -.08em; text-align: left;  }

.ol-feat-block .container { position: relative; z-index: 1; }

.ol-feat-block__media {
    position: relative;
    padding: 30px;
    /* Cream background painted directly on the closest parent of the img so
       mix-blend-mode: multiply has a stable surface to multiply against
       (without it the white PNG bg shows through). The radial gradient on top
       adds a soft circular shadow behind the product, matching the demo.    */
    background-color: #F5F3EF;
    background-image: radial-gradient(circle at 50% 55%, rgba(31,31,28,.06) 0%, rgba(31,31,28,0) 60%);
}
.ol-feat-block:nth-child(even of .ol-feat-block) .ol-feat-block__media {
    background-color: #EFECE6;
}
.ol-feat-block__media a {
    display: block;
}
.ol-feat-block__media img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    object-position: center;
    /* Multiply against the cream parent — white PNG background blends away. */
    mix-blend-mode: multiply;
    transition: transform .8s ease;
}
.ol-feat-block:hover .ol-feat-block__media img { transform: scale(1.04); }

.ol-feat-block__copy .section-title--one {
    margin-top: 6px;
}
.ol-feat-block__copy .section-title--one a {
    color: var(--ol-ink);
    font-family: var(--ol-font-display);
    text-decoration: none;
}
.ol-feat-block__copy p {
    color: var(--ol-muted);
    line-height: 1.85;
    max-width: 48ch;
}

/* Text-only ghost button, sits beside the bordered button */
.btn--text {
    background: transparent !important;
    border: 0 !important;
    color: var(--ol-ink) !important;
    padding: 0 0 6px !important;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 11px;
    border-bottom: 1px solid var(--ol-accent) !important;
    border-radius: 0 !important;
    margin-left: 14px;
    line-height: 1;
}
.btn--text:hover { color: var(--ol-accent) !important; }@media (max-width: 767px) {
    .ol-feat-block__watermark { font-size: 28vw; opacity: .8; }
    .ol-feat-block__media img { max-height: 360px; }
    .btn--text { margin-left: 0; margin-top: 16px; display: inline-block; }}


/* Make .sub-heading consistent across the site */
.sub-heading {
    color: var(--ol-accent);
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: 11px;
    font-weight: 500;
}

/* Section title family */
.section-title--one {
    font-family: var(--ol-font-display);
    font-weight: 500;
    letter-spacing: .015em;
    font-size: clamp(28px, 4vw, 48px);
    color: var(--ol-ink);
    margin: 0;
}


/* Product cards — keep theme structure but cleaner image and overlay.
   multiply blends the white PNG canvas into the card background. */
.single-product-item .products-images { background: #EFECE6; }
.single-product-item .products-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    mix-blend-mode: multiply;
}
.single-product-item .prodect-title a {
    text-decoration: none;
}
.single-product-item .prodect-price .new-price {
    color: #8a8a82;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2em;
}


/* Collection grid (banner-style cards) */
.ol-cat-card {
    display: block;
    text-decoration: none;
    color: var(--ol-ink);
    background: #F5F3EF;
    transition: transform .35s ease;
}
.ol-cat-card:hover { transform: translateY(-4px); color: var(--ol-ink); }
.ol-cat-card__media {
    position: relative;
    overflow: hidden;
    /* 3:2, the shape every photograph in the catalogue was actually shot in.
       The frame used to be 4:5, which cropped more than half the width out of
       a landscape establishing shot and left cards showing a patch of decking
       or a woven texture instead of the furniture. */
    aspect-ratio: 3 / 2;
}
.ol-cat-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}
.ol-cat-card:hover .ol-cat-card__media img { transform: scale(1.06); }
.ol-cat-card__body { padding: 18px 4px 8px; }
.ol-cat-card__title {
    font-family: var(--ol-font-display);
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--ol-ink);
}
.ol-cat-card__cta {
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: 11px;
    color: var(--ol-accent);
}


/* Collection hero */
.ol-collection-hero {
    position: relative;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-color: #1A1A17;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
}
.ol-collection-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%);
}
.ol-collection-hero > .container { position: relative; z-index: 2; }
.ol-collection-hero__title {
    color: #fff;
    font-family: var(--ol-font-display);
    font-weight: 500;
    font-size: clamp(40px, 6vw, 76px);
    margin: 4px 0 16px;
}
.ol-collection-hero__lede {
    color: rgba(255,255,255,.88);
    max-width: 64ch;
    margin: 0 auto;
    line-height: 1.8;
}


/* Product detail gallery — the hero plate carries the page; every other
   shot is a small uniform thumbnail on the row beneath it */
.ol-pdp-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.ol-pdp-gallery__item {
    background: #EFECE6;
    overflow: hidden;
    position: relative;
}
.ol-pdp-gallery__item--hero { grid-column: 1 / -1; }
.ol-pdp-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
}
/* every plate opens in the lightbox */
.ol-pdp-gallery a.ol-pdp-pop { display: block; cursor: zoom-in; }
/* product cut-outs pop on a paper plate, not on the dark overlay */
.ol-mfp-paper .mfp-figure:after { background: var(--ol-paper); }
/* The gallery now holds only the hero plate; the detail shots live in their
   own strip below, so that past four of them they can run as a slider
   instead of stacking into a wall. */
.ol-pdp-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.ol-pdp-thumb {
    background: #EFECE6;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.ol-pdp-thumb .ol-pdp-pop {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: zoom-in;
}
.ol-pdp-thumb img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
/* slider mode: slick lays the slides out, so the grid stands down */
.ol-pdp-thumbs--slider { display: block; margin-left: -8px; margin-right: -8px; }
.ol-pdp-thumbs--slider .ol-pdp-thumb { margin: 0 8px; }
.ol-pdp-thumbs--slider:not(.slick-initialized) { display: flex; overflow: hidden; }
.ol-pdp-thumbs--slider:not(.slick-initialized) .ol-pdp-thumb { flex: 0 0 calc(25% - 16px); }
.ol-pdp-thumbs .slick-list { overflow: hidden; }
.ol-pdp-thumbs .slick-track { display: flex; }
.ol-pdp-thumbs .slick-slide { height: auto; }
/* arrows sit on the paper, quiet until wanted */
.ol-pdp-thumbs .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ol-line);
    background: rgba(250, 248, 244, .92);
    color: var(--ol-ink);
    font-size: 0;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.ol-pdp-thumbs .slick-arrow:hover { background: var(--ol-accent); color: #fff; }
.ol-pdp-thumbs .slick-prev { left: 0; }
.ol-pdp-thumbs .slick-next { right: 0; }
.ol-pdp-thumbs .slick-arrow::before {
    content: '';
    display: block;
    width: 9px; height: 9px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    margin: 0 auto;
}
.ol-pdp-thumbs .slick-prev::before { transform: rotate(-135deg); margin-left: 17px; }
.ol-pdp-thumbs .slick-next::before { transform: rotate(45deg); margin-left: 13px; }
.ol-pdp-thumbs .slick-disabled { opacity: .35; cursor: default; }

/* PDP hero image cell — relative anchor for the 3D viewer overlay */
.ol-pdp-gallery__item--hero { position: relative; }
.ol-pdp-hero__img { display: block; }

/* 3D viewer trigger pill, sits in the top-right of the hero gallery image.
   Light like the plate it sits on — the dark version read as a smudge */
.ol-3d-trigger {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(250, 248, 244, .92);
    color: var(--ol-ink);
    border: 1px solid var(--ol-line);
    padding: 10px 18px;
    font-family: var(--ol-font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    backdrop-filter: blur(6px);
    transition: background .2s, opacity .2s;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ol-3d-trigger:hover { background: var(--ol-accent); color: #fff; }
.ol-3d-trigger i { font-size: 14px; }
/* Hide the trigger when the 3D viewer is active over the image */
.ol-pdp-gallery__item--hero.is-3d-active .ol-3d-trigger { opacity: 0; pointer-events: none; }

/* 3D model viewer overlays the hero image in place. visibility (not just
   pointer-events) — model-viewer's shadow DOM re-enables its own hit
   areas, so the dormant overlay would still swallow clicks on the photo */
.ol-pdp-hero__3d {
    position: absolute;
    inset: 0;
    background: #F5F3EF;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.ol-pdp-gallery__item--hero.is-3d-active .ol-pdp-hero__3d {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease;
}
.ol-pdp-hero__3d model-viewer {
    width: 100%;
    height: 100%;
    display: block;
}
.ol-3d__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(31,31,28,.85);
    color: #fff;
    border: 0;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.ol-3d__close:hover { background: var(--ol-accent); }
.ol-3d__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    font-family: var(--ol-font-body);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #777;
    text-align: center;
    z-index: 4;
    pointer-events: none;
}
.ol-3d__loading {
    padding: 12px 20px;
    background: rgba(255,255,255,.92);
    color: var(--ol-ink);
    font-family: var(--ol-font-body);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
model-viewer { --poster-color: transparent; outline: none; }


/* About page feature strip */
.ol-feature-strip { background: #F5F3EF; }
.ol-feature {
    text-align: center;
    padding: 30px 16px;
}
.ol-feature i,
.ol-feature__icon {
    font-size: 36px;
    color: var(--ol-accent);
    display: inline-block;
}
.ol-feature h5 {
    font-family: var(--ol-font-display);
    font-size: 22px;
}
.ol-feature p { color: #4A463F; line-height: 1.7; }


/* Story banner over dark background. NOTE: don't use the theme's .bg-img
   class here — its JS reads data-bg and would override our background with
   url(undefined), leaving white text on a white page. */
.ol-story-banner { background: #1A1A17; }
.offer-colection-area .colection-info-wrap .text-white,
.offer-colection-area .colection-info-wrap p,
.offer-colection-area .colection-info-wrap h2 { color: #F5F3EF !important; }
.offer-colection-area .text-white-70 { color: rgba(251,249,244,.78); line-height: 1.8; }
.offer-colection-area .text-color-primary { color: var(--ol-accent) !important; }
.btn--border-white {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding: 14px 30px;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    transition: background .25s, color .25s;
}
.btn--border-white:hover { background: #fff; color: var(--ol-ink); }


/* Contact flash */
.ol-flash {
    padding: 24px;
    background: #EFECE6;
    border-left: 3px solid var(--ol-accent);
    color: var(--ol-ink);
}
/* "you are asking about this product" card above the contact form */
.ol-enquiry-note {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #F5F3EF;
    border-left: 3px solid var(--ol-accent);
}
.ol-enquiry-note img {
    width: 62px; height: 62px; object-fit: contain;
    background: #fff; flex: 0 0 62px;
}
.ol-enquiry-note__label {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9A958C;
}
.ol-enquiry-note a { font-family: var(--ol-font-display); font-size: 20px; }

.ol-flash--error {
    background: #fbeceb;
    border-left-color: #c0453c;
}
/* server-side validation marker on the contact form */
.contact-form .is-invalid {
    border-color: #c0453c !important;
    background: #fffafa;
}


/* Footer brand wordmark — sits in the bottom row */
.footer-area-wrapper .ol-wordmark--footer {
    font-size: 22px;
    letter-spacing: .2em;
}

/* Tighten the dead space between the newsletter band and the footer */
.our-newsletter-area.section-space--ptb_90 { padding: 70px 0 60px; }
.footer-area-wrapper .footer-area.section-space--ptb_120 { padding: 80px 0 50px; }

/* ---------- Live search dropdown ---------- */
.ol-search { position: relative; }
.ol-search__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 380px;
    max-width: 80vw;
    background: #fff;
    border: 1px solid var(--ol-line);
    box-shadow: 0 24px 48px -20px rgba(31, 31, 28, .25);
    z-index: 60;
    max-height: 480px;
    overflow-y: auto;
}
.ol-search__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--ol-ink);
    border-bottom: 1px solid #f1ede2;
    transition: background .15s;
}
.ol-search__item:last-child { border-bottom: 0; }
.ol-search__item:hover { background: #faf8f2; color: var(--ol-ink); }
.ol-search__thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    background: #F5F3EF;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ol-search__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.ol-search__text { display: flex; flex-direction: column; min-width: 0; }
.ol-search__text strong {
    font-family: var(--ol-font-body);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ol-search__text small {
    color: #9A958C;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.ol-search__empty {
    padding: 18px 16px;
    color: #9A958C;
    font-size: 13px;
    text-align: center;
}

/* ---------- Mobile fullscreen search overlay ---------- */
.ol-msearch {
    position: fixed;
    inset: 0;
    background: #F5F3EF;
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    overflow-y: auto;
}
.ol-msearch__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ol-msearch__input {
    flex: 1;
    border: 0;
    border-bottom: 2px solid var(--ol-accent);
    background: transparent;
    font-family: var(--ol-font-body);
    font-size: 18px;
    padding: 12px 4px;
    outline: none;
    color: var(--ol-ink);
}
.ol-msearch__close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: #1A1A17;
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ol-msearch__results .ol-search__item { padding: 12px 4px; }
.ol-msearch__empty {
    padding: 24px 4px;
    color: #9A958C;
    text-align: center;
    font-size: 14px;
}

/* Newsletter inline feedback */
.ol-newsletter-note {
    margin: 10px 0 0;
    font-family: var(--ol-font-body);
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--ol-accent-2);
}
.ol-newsletter-note.is-error { color: #a94442; }/* Sticky product info on desktop — stays alongside the long gallery */@media (min-width: 992px) {
    .product-details-content {
        position: sticky;
        top: 120px;
    }}


/* ============================================================
 * DESIGN REFINEMENT PASS
 * Warm the cool theme grays, unify type rhythm, elevate cards.
 * ============================================================ */

/* --- Page intro band (breadcrumb area): warm, lower, more elegant --- */
.breadcrumb-area {
    background-color: #F5F3EF;
    padding-top: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid #E4E0D7;
}
.breadcrumb-title {
    font-size: clamp(30px, 3.4vw, 44px) !important;
    line-height: 1.15;
}
.breadcrumb-list {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
}
.breadcrumb-list .breadcrumb-item a { color: #726D64; transition: color .2s; }
.breadcrumb-list .breadcrumb-item a:hover { color: var(--ol-accent); }
.breadcrumb-list .breadcrumb-item.active { color: var(--ol-ink); }

/* --- Selection, focus & scrollbar — brand details --- */
::selection { background: var(--ol-accent); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--ol-accent);
    outline-offset: 2px;
}
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1efe8; }
::-webkit-scrollbar-thumb { background: #cfc8b6; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ol-accent); }

/* --- Product cards: lift + zoom + refined action bar --- */
.single-product-item {
    transition: transform .35s ease;
}
.single-product-item .products-images {
    overflow: hidden;
    position: relative;
}
.single-product-item .products-images img {
    transition: transform .7s cubic-bezier(.25, .65, .35, 1);
}
.single-product-item:hover { transform: translateY(-5px); }
.single-product-item:hover .products-images img { transform: scale(1.06); }

/* Replace centered white circles with a slim dark bar sliding from bottom */
.single-product-item .product-actions {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    width: 100%;
    background: rgba(31, 31, 28, .92);
    backdrop-filter: blur(4px);
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 0;
    transition: transform .35s ease;
    opacity: 1 !important;
    visibility: visible !important;
}
.single-product-item:hover .product-actions { transform: translateY(0); }
.single-product-item .product-actions a {
    width: auto;
    height: 44px;
    line-height: 44px;
    flex: 1;
    background: transparent;
    border-radius: 0;
    font-size: 15px;
    margin: 0;
    color: #fff;
    transition: background .2s, color .2s;
    transform: none !important;
    opacity: 1 !important;
}
.single-product-item .product-actions a:hover {
    background: var(--ol-accent);
    color: #fff;
}
.single-product-item .product-actions a + a { border-left: 1px solid rgba(255,255,255,.12); }
.single-product-item .product-actions a .tool-tip { display: none; }

.single-product-item .prodect-title a { transition: color .2s; }
.single-product-item:hover .prodect-title a { color: var(--ol-accent-2); }

/* --- Collection cards (collections page): editorial with count --- */
.ol-cat-card { background: transparent; }
.ol-cat-card__media {
    box-shadow: 0 0 0 1px #E4E0D7 inset;
}
.ol-cat-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 2px 8px;
}
.ol-cat-card__title { font-size: 23px; }
.ol-cat-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.ol-cat-card__count {
    font-family: var(--ol-font-body);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9A958C;
    white-space: nowrap;
}
.ol-cat-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s ease;
}
.ol-cat-card:hover .ol-cat-card__cta { gap: 14px; }
/* The mobile-menu close control is a real <button> now (so it is focusable and
   announced); strip the browser chrome so it still looks like the bare icon. */
.mobile-menu-close-box .mobile-navigation-close-icon {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    line-height: 1;
}

/* Category index: the one-line "what belongs here" note under the title */
.ol-cat-card__tag {
    font-family: var(--ol-font-body);
    font-size: 14px;
    line-height: 1.5;
    /* #8c8577 measured 3.45:1 on paper — under the 4.5:1 AA floor for 14px.
       The house muted ink carries the same quiet tone at 7.52:1. */
    color: var(--ol-muted);
    margin: 2px 0 6px;
}

/* --- Footer: warm band + refined hierarchy --- */
.footer-area-wrapper {
    background: #F5F3EF;
    border-top: 1px solid #E4E0D7;
}
.footer-widget h6,
.footer-widget .footer-widget__title {
    font-family: var(--ol-font-body) !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: #726D64 !important;
    margin-bottom: 22px !important;
}
.footer-widget__list li { margin-bottom: 9px; font-size: 14px; }
.footer-widget__list a { transition: color .2s; }
.footer-widget__list a:hover { color: var(--ol-accent) !important; }
.footer-copyright-area {
    border-top: 1px solid #E4E0D7;
    padding-top: 26px !important;
}
.copyright-text { color: #9A958C; font-size: 12px; letter-spacing: .04em; }
.footer-widget__footer-menu li a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #726D64;
}
.footer-widget__footer-menu li a:hover { color: var(--ol-accent); }

/* --- Contact info icon boxes: gold icons, serif heads --- */
.single-contact-info-item .icon i {
    color: var(--ol-accent);
    font-size: 30px;
}
.single-contact-info-item .iconbox-desc h6,
.single-contact-info-item .iconbox-desc .iconbox-title {
    font-family: var(--ol-font-display);
    font-size: 20px;
}

/* --- Buttons: one consistent system everywhere --- */
.btn--black, .btn--md.btn--black, .hero-btn-one,
.ol-contact-form button[type="submit"], .comment-submit {
    letter-spacing: .2em !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 14px 30px !important;
    line-height: 1.2 !important;
    height: auto !important;
    border-radius: 0 !important;
    transition: background .25s, border-color .25s !important;
}
.btn--border_1 {
    letter-spacing: .2em !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 13px 28px !important;
    line-height: 1.2 !important;
    border-radius: 0 !important;
}
.btn--black:hover, .hero-btn-one:hover {
    background: var(--ol-accent) !important;
    border-color: var(--ol-accent) !important;
    color: #fff !important;
}

/* --- Scenes & atmosphere tiles: subtle inner ring like a print frame --- */
.ol-scenes__tile, .ol-atmosphere__tile, .ol-lookbook__tile {
    box-shadow: 0 0 0 1px rgba(31,31,28,.04) inset;
}

/* --- Newsletter band: anchor it visually with a top rule --- */
.our-newsletter-area { border-top: 1px solid #E4E0D7; }


/* Lazy image fade-in */
img[loading="lazy"] { transition: opacity .4s; }




/* Collection names: dialled back so the photography leads, not the type */
.ol-lookbook__name { font-size: 23px; letter-spacing: .01em; }
.ol-cat-card__title { font-size: 19px; }@media (max-width: 1199px) { .ol-lookbook__name { font-size: 21px; }}@media (max-width: 767px)  { .ol-lookbook__name { font-size: 19px; } .ol-cat-card__title { font-size: 18px; }}

/* Atmosphere tokens — colour and strength of the trail layer */
:root {
    --ol-atmo-ink: #A85D45;   /* brass, on the light sections */
    --ol-atmo-o:   .15;       /* master strength — tune here */
}


/* ============================================================
   The alley crosses everything, including the hero.

   The product cut-outs now carry a real alpha channel (the white
   studio backdrop was removed from the files themselves), so the
   tiles no longer need an opaque backing colour and no longer need
   mix-blend-mode to hide one. Dropping both is what lets the trail
   run through the photographs instead of stopping at their edge.
   ============================================================ */
/* The category tiles stay cards — they carry a title and a count, they are
   meant to read as surfaces. Only the image area inside them goes clear, so
   it takes the card's own colour instead of a second, different rectangle. */
.ol-cat-tile__media,
.ol-cat-tile:nth-child(n) .ol-cat-tile__media { background: transparent; }

/* These sit straight on the page, so they can go fully clear and let the
   alley run underneath them. */
.single-product-item .products-images,
.ol-feat-block__media,
.ol-feat-block:nth-child(even of .ol-feat-block) .ol-feat-block__media { background: transparent; }

.ol-cat-tile__media img,
.single-product-item .products-images img,
.ol-feat-block__media img,
.hero-area.hero-slider-one .hero-product img { mix-blend-mode: normal; }


/* ==========================================================================
   BLOCK B — EDITORIAL LAYER II · THE MASTHEAD
             (replaces openair.css:1629 to end of file)
   ========================================================================== */

/* --- 1. Global type discipline ----------------------------------------- */
html {
    font-synthesis: none;            /* a missing cut must fail, never skew  */
    font-optical-sizing: auto;
    overflow-x: clip;                /* full-bleed plates cannot scroll the
                                        page sideways. `clip`, not `hidden`,
                                        so position:sticky at :1310 survives. */
    -webkit-font-smoothing: antialiased;
}@supports not (overflow: clip) { html { overflow-x: hidden; }}
html, body { background: var(--ol-paper); }                       /* [CARRIED] */

body {
    font-family: var(--ol-font-body);
    font-size: 17px;
    line-height: 1.68;
    color: var(--ol-muted);
}

/* --- 2. The optical-size ladder -----------------------------------------
   Playfair's stroke contrast is a measured function of opsz, not a taste.
   Rasterising 'О' at 1x and comparing stem to the thinnest point of the
   bowl gives:
        108px @ opsz 14 -> 3.0:1     108px @ opsz 40 -> 4.5:1
        108px @ opsz 90 -> 9.0:1      72px @ opsz 90 -> 6.0:1
         64px @ opsz 40 -> 5.0:1      42px @ opsz 16 -> 4.0:1
         27px @ opsz 10 -> 2.0:1      17px @ opsz  6 -> 1.0:1
   In every one of those the hairline still measures >= 1.0 CSS px at 1x, so
   nothing greys out on a non-retina screen. That is the whole ladder: the
   masthead is a Didone, the caption is a sturdy text serif, one file.       */
h1, h2, h3, h4, h5, h6,
.section-title--one,
.hero-area.hero-slider-one .hero-title,
.breadcrumb-title, .ol-wordmark,
.ol-cat-tile__name, .ol-cat-card__title, .ol-lookbook__name,
.ol-collection-hero__title, .ol-category-group__title,
.ol-pdp-title, .prodect-title a, .ol-plate__title {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' var(--ol-opsz, 40);
    font-weight: 400;
    color: var(--ol-ink);
    text-wrap: balance;
    overflow-wrap: break-word;       /* a long Bulgarian token can never
                                        push the column open              */
    margin-top: 0;
}

/* THE MASTHEAD. Specificity 0,4,0 — identical to openair.css:539, and later
   in the file, so it finally wins. (Delete the size declarations at :543
   anyway; a dead higher-specificity rule is how the last 76px was lost.)
   Cap measured against real data: the widest single unbreakable collection
   name, "Nottingham", is 500.0px at this size against a 652px column.       */
.hero-area.hero-slider-one .hero-text-one .hero-title {
    --ol-opsz: 110;
    font-family: var(--ol-font-display);
    font-size: clamp(40px, 7.6vw, 108px);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.022em;
    color: var(--ol-ink);
    margin: 0 0 30px;
    padding-bottom: 0;               /* the 56px terracotta bar is gone     */
}/* The masthead needs a column it can live in. openair.css:524 caps
   .hero-text-one at 460px, which no font-size can widen. */@media (min-width: 992px) {
    .hero-area.hero-slider-one .single-hero-slider-one { min-height: 86vh; }}

/* Interior mastheads. Measured: the widest Bulgarian token in the whole
   site, "Сервитьорска", is 487.1px at 84px/opsz 60 against a 750px column
   once .breadcrumb_box is widened to col-lg-8 (see markup_changes).        */
.breadcrumb-title,
.ol-collection-hero__title { --ol-opsz: 60; font-size: clamp(34px, 5.8vw, 84px) !important; line-height: .96; letter-spacing: -.018em; }
h1                        { --ol-opsz: 60; font-size: clamp(34px, 5.8vw, 84px); line-height: .96; letter-spacing: -.018em; }
h2, .section-title--one   { --ol-opsz: 30; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.014em; }
h3                        { --ol-opsz: 14; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1;  letter-spacing: -.008em; }
h4                        { --ol-opsz: 10; font-size: 26px; line-height: 1.18; letter-spacing: -.004em; }
h5                        { --ol-opsz:  8; font-size: 21px; line-height: 1.24; }
h6                        { --ol-opsz:  6; font-size: 17px; line-height: 1.3;  }
.ol-pdp-title             { --ol-opsz: 24; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -.014em; }/* Size is fluid via clamp(); optical size can only be stepped, so it is
   stepped at the file's own breakpoints plus one new step at 1200-1399. */@media (min-width: 1200px) and (max-width: 1399px) {}@media (min-width: 992px) and (max-width: 1199px) {
    .breadcrumb-title, .ol-collection-hero__title, h1 { --ol-opsz: 40; }
    h2, .section-title--one { --ol-opsz: 20; }}@media (min-width: 768px) and (max-width: 991px) {
    .breadcrumb-title, .ol-collection-hero__title, h1 { --ol-opsz: 26; }
    h2, .section-title--one { --ol-opsz: 16; }
    h3 { --ol-opsz: 10; }}@media (max-width: 767px) {
    .breadcrumb-title, .ol-collection-hero__title, h1 { --ol-opsz: 14; letter-spacing: -.014em; }
    h2, .section-title--one { --ol-opsz: 10; }
    h3 { --ol-opsz: 8; }
    h4 { --ol-opsz: 6; font-size: 22px; }
    body { font-size: 16px; }}

/* --- 3. The standfirst — the site has never had one ----------------------
   openair.css:565 sets the hero lede to 14px while the body copy under it
   runs 16px: the introduction is smaller than the text it introduces. That
   inverted hierarchy is the loudest template tell on the page. Specificity
   0,4,1 to match :565, and later in the file.                              */
.hero-area.hero-slider-one .hero-text-one p,
.ol-masthead__lede,
.ol-collection-hero__lede,
.ol-categories__lede,
.ol-lookbook__lede,
.ol-plate__lede {
    font-family: var(--ol-font-display) !important;
    font-variation-settings: 'opsz' 9;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.6vw, 24px) !important;
    line-height: 1.46;
    letter-spacing: 0 !important;
    text-transform: none;
    color: var(--ol-ink) !important;
    max-width: var(--ol-measure-tight);
    text-wrap: pretty;
    margin: 24px 0 0;
}
.ol-categories__lede, .ol-lookbook__lede { margin-left: 0; margin-right: 0; }
.ol-collection-hero__lede { color: rgba(255,255,255,.92) !important; max-width: 34ch; }@media (max-width: 767px) {
    .ol-masthead__lede { margin-left: 0; margin-right: 0; }}

/* --- 4. Exactly two label registers. There were thirteen. ----------------
   `case` asks for caps-specific sidebearings on the Cyrillic capitals; it is
   a harmless no-op if the shipped cut has no such feature. The negative
   margin gives back the trailing letter-space, so a tracked block still sits
   optically flush instead of ~2.5px left of the grid.                      */
.sub-heading,
.ol-feat-block__copy h6.sub-heading,
.hero-area.hero-slider-one .hero-text-one h6,
.hero-area .text-color-primary,
.ol-masthead__eyebrow, .ol-lookbook__eyebrow, .ol-lookbook__cta,
.ol-chapter,
.footer-widget h6, .footer-widget .footer-widget__title,
.product-details-tab .nav > li > a,
.btn, .btn--text, .btn--border_1, .btn--black, .btn--md.btn--black,
.hero-area.hero-slider-one .hero-btn-one, .btn--border-white,
.our-newsletter-area .submit-btn,
.ol-top-nav a, .ol-3d-trigger, .ol-plate__kicker, .ol-folio {
    font-family: var(--ol-font-body) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: var(--ol-track) !important;
    text-transform: uppercase !important;
    font-feature-settings: 'case' 1;
    color: var(--ol-ink) !important;
    margin-right: calc(-1 * var(--ol-track));
}
.result-count, .breadcrumb-list,
.ol-cat-card__count, .ol-cat-tile__count, .ol-cat-card__cta,
.product_meta .item_meta .label, .product_socials .label,
.ol-enquiry-note__label, .ol-search__text small, .copyright-text,
.footer-widget__footer-menu li a {
    font-family: var(--ol-font-body) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: var(--ol-track) !important;
    text-transform: uppercase !important;
    font-feature-settings: 'case' 1;
    color: var(--ol-soft) !important;
    margin-right: calc(-1 * var(--ol-track));
}
/* a kicker that runs to two lines needs leading back */
.hero-area.hero-slider-one .hero-text-one h6 { line-height: 2 !important; margin-bottom: 26px !important; }
.ol-lookbook__eyebrow { color: rgba(255,255,255,.78) !important; }
.ol-lookbook__cta     { color: #fff !important; }
.ol-plate__kicker     { color: var(--ol-accent-light) !important; }  /* clay, lifted, on a photograph */
.ol-collection-hero .sub-heading { color: #fff !important; }

/* --- 5. Running copy: one measure, controlled rag ---------------------- */
p, .product-content p, .quickview-peragraph p, .ol-rich p {
    font-family: var(--ol-font-body);
    color: var(--ol-muted);
    max-width: var(--ol-measure);
    text-wrap: pretty;
}
.ol-feat-block__copy p { max-width: 44ch; }
/* reversed copy on ink gets the short measure — long lines plus reversed
   type is the one combination print designers actually avoid */
.offer-colection-area .text-white-70 { max-width: var(--ol-measure-tight); line-height: 1.7; }
.ol-cat-tile__tag, .ol-cat-card__tag { max-width: 34ch; }
em, i, .ol-accent-quote, .ol-rich blockquote {
    font-family: var(--ol-font-accent);
    font-variation-settings: 'opsz' 12;
    font-style: italic;
}

/* --- 6. THE TERRACOTTA BUDGET ------------------------------------------
   --ol-accent keeps its hex, so the token never lies. What changes is the
   count: every RESTING mark below is re-pointed to ink or soft, leaving
   terracotta in exactly the places it earns — the trail, the five chapter
   rules, the five chapter numerals, the drop cap and ::selection. Eleven
   marks instead of thirty, and all of them are "етикети и линийки".
   Each selector below is written to beat the exact rule it replaces.      */
.ol-top-nav a:hover                                   { border-bottom-color: var(--ol-ink); }
.ol-lang a.is-active                                  { border-bottom-color: var(--ol-ink); }
.ol-mobile-lang a.is-active                           { color: var(--ol-ink); }
.header-right-side .header-right-items a:hover        { color: var(--ol-ink); }
.hero-area.hero-slider-one .slick-dots .slick-active button { background: var(--ol-ink); }
.hero-area.hero-slider-one .slick-dots button         { background: var(--ol-line); width: 22px; height: 2px; border-radius: 0; }
.hero-area.hero-slider-one .slick-arrow               { border-color: var(--ol-line); border-radius: 0; }
.hero-area.hero-slider-one .slick-arrow:hover         { background: var(--ol-ink); border-color: var(--ol-ink); }
.ol-cat-card__cta                                     { color: var(--ol-soft); }
.ol-feature i, .ol-feature__icon,
.single-contact-info-item .icon i                     { color: var(--ol-ink); }
.offer-colection-area .text-color-primary             { color: var(--ol-accent-light) !important; }
.breadcrumb-list .breadcrumb-item a:hover             { color: var(--ol-ink); }
.single-product-item:hover .prodect-title a           { color: var(--ol-ink); }
.single-product-item .product-actions a:hover         { background: var(--ol-ink); color: #fff; }
.footer-widget__list a:hover                          { color: var(--ol-ink) !important; text-decoration: underline; text-underline-offset: .26em; }
.footer-widget__footer-menu li a:hover                { color: var(--ol-ink) !important; }
.ol-3d-trigger:hover, .ol-3d__close:hover             { background: var(--ol-ink); color: #fff; }
.ol-msearch__input                                    { border-bottom-color: var(--ol-ink); font-family: var(--ol-font-body); }
.ol-newsletter-note                                   { color: var(--ol-muted); }
.our-newsletter-area .submit-btn:hover                { color: var(--ol-soft) !important; }
.product-details-tab .nav > li > a.active,
.product-details-tab .nav > li > a:hover              { color: var(--ol-ink) !important; border-bottom-color: var(--ol-ink); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ol-ink); outline-offset: 3px; }
::-webkit-scrollbar-track                             { background: var(--ol-stone); }
::-webkit-scrollbar-thumb                             { background: var(--ol-line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover                       { background: var(--ol-ink); }
/* a warning is not a brand colour */
.contact-form .is-invalid,
.contact-form .contact-inner .is-invalid               { border-color: var(--ol-error) !important; border-bottom-color: var(--ol-error) !important; background: transparent; }
.ol-flash--error                                       { border-top-color: var(--ol-error); }
/* KEPT terracotta */
::selection { background: var(--ol-accent); color: #fff; }

/* --- 7. The theme ornament dies ----------------------------------------
   style.css:419 and :429 weld a 4px x 70px #dcb14a bar under every heading,
   in a left AND a centred variant. It ships with Helendo, Avada, Bridge and
   half of ThemeForest; recolouring it terracotta (openair.css:1720) is
   exactly why the page still reads "template with a nice palette".        */
.section-title--one::after,
.section-title--center::after,
.ol-lookbook .section-title--one::after { content: none !important; display: none !important; }
.section-title--one { padding-bottom: 0; margin: 0 0 26px; letter-spacing: -.014em; font-weight: 400; }

/* Nothing on a magazine page is centred. This is a safety net; also do it
   in the markup (see markup_changes) or a left-ranged head still sits
   off-centre inside a `col-lg-8 m-auto`. */
.ol-categories .text-center, .ol-lookbook .text-center,
.product-wrapper .text-center, .product-wrapper .section-title.text-center,
.ol-categories .section-title--center, .ol-lookbook .section-title--center { text-align: left !important; }
.single-product-item.text-center { text-align: left !important; }

/* --- 8. The chapter opener becomes the device --------------------------
   The markup already numbers the homepage 01-05 like a contents page and
   then renders the figure at 10.5px, the same size, weight, colour and
   tracking as the words beside it. The numeral IS the thing he likes.     */
.ol-chapter {
    display: flex !important;
    align-items: baseline;
    justify-content: flex-start !important;
    gap: 18px;
    width: 100%;
    border-top: 1px solid var(--ol-accent);   /* one of the eleven */
    padding-top: 16px;
    margin: 0 0 24px;
    font-size: 10.5px !important;
    letter-spacing: var(--ol-track) !important;
    color: var(--ol-ink) !important;
    margin-right: 0;
}
/* the two dangling 46px ticks go; the full-measure rule replaces them */
.ol-chapter::before, .ol-chapter::after { content: none !important; display: none !important; }
.ol-chapter__no {
    font-family: var(--ol-font-display) !important;
    font-variation-settings: 'opsz' 30;
    font-size: clamp(38px, 3.6vw, 58px) !important;
    font-weight: 400 !important;
    line-height: .78 !important;
    letter-spacing: -.03em !important;
    text-transform: none !important;
    font-variant-numeric: lining-nums;
    color: var(--ol-accent) !important;       /* one of the eleven */
    margin-right: 0;
}
.ol-chapter--dark { border-top-color: var(--ol-accent-light); color: var(--ol-paper) !important; }
.ol-chapter--dark .ol-chapter__no { color: var(--ol-accent-light) !important; }
.text-center .ol-chapter { justify-content: flex-start !important; }

/* --- 9. The editorial devices the site never had ----------------------- */
/* drop cap */
/* the eyebrow is a <p class="sub-heading"> since the heading-order pass,
   so the drop cap must aim at the paragraph AFTER the title, never at
   whichever <p> happens to come first */
.ol-story-banner p:not(.sub-heading):first-of-type::first-letter,
.about-content h2 + p::first-letter,
.ol-rich > p:not(.sub-heading):first-of-type::first-letter {
    float: left;
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 60;
    /* A float must be an EXACT whole number of line boxes or the last line it
       touches wraps at a different indent than the ones above it. Body copy is
       line-height 1.68, so three lines is 5.04em and the line-height must be 1
       with no vertical margin — any margin reintroduces the fraction. */
    font-size: 5.04em;
    line-height: 1;
    font-weight: 400;
    margin: 0 .1em 0 0;
    color: var(--ol-accent);                  /* one of the eleven */
}
.ol-story-banner p:not(.sub-heading):first-of-type::first-letter { color: var(--ol-accent-light); }
/* the caption under a product card: an italic whisper, not a tracked price.
   0,3,1 to beat openair.css:1824. */
.single-product-item .prodect-price,
.single-product-item .prodect-price .new-price {
    font-family: var(--ol-font-display) !important;
    font-variation-settings: 'opsz' 8;
    font-style: italic !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ol-soft) !important;
}
.prodect-title a, .single-product-item .prodect-title a {
    --ol-opsz: 8;
    font-family: var(--ol-font-display);
    font-size: 20px;
    letter-spacing: -.004em;
    color: var(--ol-ink);
}
/* the watermark that has been styled, saved and admin-editable since day one
   and emitted by no template. After the swap `italic` is a REAL italic. */
.ol-feat-block__watermark,
.hero-area.hero-slider-one .hero-watermark {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 400;      /* here the sub-pixel hairline IS the point */
    font-style: italic;
    font-weight: 400;
    color: rgba(18,18,15,.055);
}
/* pull quote + folio, available to any template */
.ol-pullquote {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 24;
    font-style: italic;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--ol-ink);
    max-width: 22ch;
    margin: 56px 0;
    border: 0;
    padding: 0;
}
.ol-folio {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--ol-line);
    padding: 0 0 12px; margin-bottom: 48px;
}

/* --- 10. Surfaces: cut-outs on the paper, not product tiles ------------ */
.ol-cat-card:hover, .single-product-item:hover { transform: none; }
.ol-cat-card__media, .ol-scenes__tile, .ol-atmosphere__tile, .ol-lookbook__tile { box-shadow: none; }
.ol-cat-card:hover .ol-cat-card__title,
.single-product-item:hover .prodect-title a {
    text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px;
}
.ol-cat-card__title { --ol-opsz: 9; font-size: 21px; }
.ol-lookbook__name { --ol-opsz: 12; font-size: 28px; letter-spacing: -.012em; color: #fff; }
.hero-box-area,
.hero-area.hero-slider-one .single-hero-slider-one { background: var(--ol-stone); }
.ol-lookbook { background: var(--ol-stone) !important; }              /* [CARRIED] */
.ol-index, .ol-scenes, .ol-atmosphere, .ol-feature-strip { background: var(--ol-paper); }
.ol-feat-block { background: var(--ol-paper); }
.ol-feat-block:nth-child(even of .ol-feat-block) { background: var(--ol-paper); }
.ol-feat-block + .ol-feat-block { border-top: 1px solid var(--ol-line); }  /* [CARRIED] */
.footer-area-wrapper { background: var(--ol-paper); border-top: 1px solid var(--ol-line); } /* [CARRIED] */
.single-product-item .products-images { border-bottom: 1px solid var(--ol-ink); padding-bottom: 12px; } /* [CARRIED] */
.single-product-item .product-content { padding-top: 14px; }
/* the Bootstrap .alert construction, deleted */
.ol-flash, .ol-enquiry-note {
    background: transparent; border-left: 0;
    border-top: 1px solid var(--ol-ink); border-bottom: 1px solid var(--ol-line);
    padding: 20px 0;
}
.ol-enquiry-note { display: flex; align-items: center; gap: 16px; }
.ol-enquiry-note a { font-family: var(--ol-font-display); font-size: 20px; }
.header-area.header-area--default { background: var(--ol-paper); border-bottom: 1px solid var(--ol-line); }/* --- 11. The featured spread stops being one loop run three times ------
   Three sections, 28% of the page, are the same rectangle: `row
   align-items-center` with two col-lg-6 halves, three times, the only
   variable being which side the picture is on. 58/42, top-aligned, and the
   photograph runs off the OUTER edge.
   NOTE the container is deliberately NOT reset to max-width:none — the
   negative margin is calculated against the container, and doing both
   crops 135px of the photograph off-screen.                               */@media (min-width: 992px) {
    .ol-feat-block .featuted-product-one { align-items: flex-start !important; }
    .ol-feat-block__col--media { flex: 0 0 58%; max-width: 58%; padding-left: 0; padding-right: 0; }
    /* basis 0, not auto: with `auto` the copy column is as wide as its own
       longest line, so between 992 and ~1365px it no longer fitted beside
       the 58% photograph and wrapped underneath it, stranding half the
       page blank */
    .ol-feat-block__col--copy  { flex: 1 1 0; min-width: 0; max-width: none; padding: 0 0 0 5vw; }
    .ol-feat-block--right .ol-feat-block__col--copy { padding: 0 5vw 0 0; }
    .ol-feat-block--left  .ol-feat-block__col--media { margin-left:  calc(50% - 50vw); }
    .ol-feat-block--right .ol-feat-block__col--media { margin-right: calc(50% - 50vw); }
    .ol-feat-block__copy { padding-top: 88px; }
    .ol-feat-block--right .ol-feat-block__copy { padding-top: 164px; }}
/* Below the container's 1170px cap there is no window margin left, and the
   copy column gave its outer gutter away to the 5vw inner one — so the type
   ran into the edge of the screen. Give it back, only where it is needed. */
@media (min-width: 992px) and (max-width: 1199px) {
    .ol-feat-block--left  .ol-feat-block__col--copy { padding-right: 26px; }
    .ol-feat-block--right .ol-feat-block__col--copy { padding-left:  26px; }
}
.ol-feat-block__media { padding: 0; }
.ol-feat-block__media img { max-height: 560px; }
.ol-feat-block__copy .section-title--one {
    margin-top: 8px;
    --ol-opsz: 36;
    font-style: italic;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;      /* italics take no negative tracking */
}

/* --- 12. The page breaks its own edge ----------------------------------
   No element here uses 100vw: .ol-plate and .ol-story-banner are already
   full-width children of .site-wrapper-reveal, so zeroing the Bootstrap
   padding is the whole trick and no horizontal scrollbar can appear.
   z-index:2 is mandatory — the trail paints at z-index 1 and would
   otherwise stamp a terracotta ladder across the photograph. The precedent
   is already in the file at openair.css:1590.                             */
.ol-plate {
    position: relative;
    z-index: 2;
    min-height: 88vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.ol-plate::before {
    content: '';
    position: absolute; inset: 0;
    /* The curated plate is a dark evening scene, but the owner can point this
       at any of the ~320 catalogue photographs from data/site.json — several
       of which are near-white studio renders. The scrim is sized so reversed
       type still clears 4.5:1 on the brightest of them. */
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.80) 100%),
        linear-gradient(90deg,  rgba(0,0,0,.62) 0%, rgba(0,0,0,.10) 46%, rgba(0,0,0,0) 66%);
}
.ol-plate__inner { position: relative; z-index: 2; padding: 0 0 8vh 6vw; max-width: 44ch; }
.ol-plate__title { --ol-opsz: 40; color: #fff; font-size: clamp(30px, 4.4vw, 62px); line-height: .98; letter-spacing: -.016em; margin: 10px 0 14px; }
.ol-plate__lede  { color: rgba(255,255,255,.9) !important; }@media (max-width: 767px) { .ol-plate { min-height: 62vh; } .ol-plate__inner { padding: 0 24px 7vh; }}

/* the story spread stops 12px short of both edges today — a hairline of
   paper down each side that the eye files as a bug */
.offer-colection-area.container-fluid { padding-left: 0; padding-right: 0; }
/* the Bootstrap row inside it still carries -15px gutters; without this the
   spread overhangs the viewport by 15px on each side */
.ol-story-banner > .row { margin-left: 0; margin-right: 0; }

/* --- 13. The trail stops crossing the photographs ----------------------
   The whitelist at openair.css:1585 lifts `.container`, but the lookbook
   grid lives in a `.container-fluid`, so a 13.8% terracotta ladder is
   painted straight across the only four real photographs on the homepage.
   On paper that mark reads as a drawn alley — which is why he loves it.
   Over a photograph the identical mark reads as a watermark.              */
body.page-home .ol-lookbook__grid,
body.page-home .ol-plate { position: relative; z-index: 2; }

/* The zig-zag STAYS — it is one of the few things already doing magazine
   work. What goes is the tile hopping on hover while the photograph inside
   it stays frozen relative to its own frame. Now the frame holds still and
   the picture breathes. */
.ol-lookbook__tile:nth-child(odd):hover  { transform: translateY(-50px); }
.ol-lookbook__tile:nth-child(even):hover { transform: translateY(50px); }
.ol-lookbook__tile::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background: inherit;                 /* picks up the inline background-image
                                            from home.phtml:144/153/162/171 */
    background-size: cover;
    background-position: center;
    transition: transform 1.3s cubic-bezier(.16,.84,.44,1);
}
.ol-lookbook__tile:hover::before { transform: scale(1.05); }
.ol-lookbook__tile::after { z-index: 1; }
.ol-lookbook__overlay { z-index: 2; }@media (max-width: 575px) {
    .ol-lookbook__tile:nth-child(odd):hover,
    .ol-lookbook__tile:nth-child(even):hover { transform: none; }}

/* --- 14. Air: a 2.7x spread instead of the current 1.32x --------------- */
.section-space--ptb_90  { padding-top: 104px; padding-bottom: 104px; }
.section-space--ptb_120 { padding-top: 168px; padding-bottom: 168px; }
.ol-feat-block.section-space--ptb_120 { padding-top: 124px; padding-bottom: 124px; }
.ol-lookbook.section-space--ptb_120 { padding-top: 200px; padding-bottom: 200px; }
.our-newsletter-area.section-space--ptb_90 { padding-top: 74px; padding-bottom: 74px; }@media (max-width: 991px) {
    .section-space--ptb_90  { padding-top: 64px; padding-bottom: 64px; }
    .section-space--ptb_120 { padding-top: 88px; padding-bottom: 88px; }
    .ol-lookbook.section-space--ptb_120 { padding-top: 104px; padding-bottom: 104px; }
    .ol-feat-block.section-space--ptb_120 { padding-top: 72px; padding-bottom: 72px; }}

/* --- 15. Controls: hairlines, inversions, no hue -----------------------
   openair.css:572 pins the hero button with `background:#1A1A17!important`
   at 0,3,0 and :587 hovers it to the accent at 0,3,0. Both are re-specified
   here with the SAME selector, or the hover would silently do nothing.    */
.btn--black, .btn--md.btn--black,
.ol-contact-form button[type="submit"], .comment-submit,
.hero-area.hero-slider-one .hero-btn-one {
    background: var(--ol-ink) !important;
    color: var(--ol-paper) !important;
    border: 1px solid var(--ol-ink) !important;
    border-radius: 0 !important;
    padding: 15px 30px !important;
    line-height: 1.2 !important;
    height: auto !important;
}
.btn--black:hover, .btn--md.btn--black:hover,
.ol-contact-form button[type="submit"]:hover,
.hero-area.hero-slider-one .hero-btn-one:hover {
    background: transparent !important;
    color: var(--ol-ink) !important;
    border-color: var(--ol-ink) !important;
}
.btn--border_1 {
    background: transparent !important;
    border: 1px solid var(--ol-line) !important;
    color: var(--ol-ink) !important;
    padding: 14px 28px !important;
    border-radius: 0 !important;
}
.btn--border_1:hover { border-color: var(--ol-ink) !important; background: transparent !important; }
.btn--text {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ol-ink) !important;
    border-radius: 0 !important;
    padding: 0 0 5px !important;
    color: var(--ol-ink) !important;
}
.btn--text:hover { color: var(--ol-ink) !important; border-bottom-width: 2px !important; }
.btn--border-white { color: #fff !important; border: 1px solid #fff !important; background: transparent !important; padding: 14px 30px !important; border-radius: 0 !important; }
.btn--border-white:hover { background: #fff !important; color: var(--ol-ink) !important; }
.single-product-item .product-actions { background: rgba(18,18,15,.94); }

/* --- 16. Interior mastheads + the full-bleed collection cover ---------- */
.breadcrumb-area {                                                    /* [CARRIED] */
    padding-top: 92px;
    padding-bottom: 56px;
    background-color: var(--ol-paper);
    border-bottom: 1px solid var(--ol-line);
}
.breadcrumb-area .breadcrumb_box { align-items: flex-end !important; } /* [CARRIED] */
.breadcrumb-area--compact {                                            /* [CARRIED] */
    padding-top: 14px; padding-bottom: 14px;
    background-color: var(--ol-paper); border-bottom: 0;
}
/* the compact trail hugs the content column instead of floating alone
   on the right, and the section below closes the gap */
.breadcrumb-area--compact .breadcrumb-list { text-align: left !important; }
.single-product-wrap.section-space--pt_90 { padding-top: 36px; }
.breadcrumb-area + .section-space--ptb_120,                            /* [CARRIED] */
.breadcrumb-area + .section-space--ptb_90 { padding-top: 84px; }
.ol-masthead__eyebrow {
    display: block;
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-soft);
    margin-bottom: 14px;
}
/* THE COVER — he loves it, so it only gets bigger and keeps its gradients */
.ol-collection-hero {                                                  /* [CARRIED] */
    min-height: 72vh;
    align-items: flex-end;
    text-align: left;
}
.ol-collection-hero > .container { padding-bottom: 72px; }             /* [CARRIED] */
.ol-collection-hero::before {                                          /* [CARRIED] */
    background:
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.14) 40%, rgba(0,0,0,.82) 100%),
        linear-gradient(90deg,  rgba(0,0,0,.52) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%);
}
.ol-collection-hero__title { margin: 8px 0 16px; color: #fff; }@media (max-width: 767px) {
    .ol-collection-hero { min-height: 52vh; }
    .ol-collection-hero > .container { padding-bottom: 44px; }
    .breadcrumb-area { padding-top: 56px; padding-bottom: 40px; }
    .breadcrumb-area + .section-space--ptb_120,
    .breadcrumb-area + .section-space--ptb_90 { padding-top: 52px; }}
.ol-category-group__title { --ol-opsz: 12; font-size: 26px; border-bottom-color: var(--ol-line); }

/* --- 17. Things he already likes — carried forward verbatim ------------ */
/* the photograph dissolving into the ink [CARRIED, unchanged] */
.ol-story-banner { position: relative; overflow: hidden; background: var(--ol-ink); }
.ol-story-banner__media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46%;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
            mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.ol-story-banner .row { position: relative; z-index: 2; }@media (max-width: 991px) {
    .ol-story-banner__media { width: 100%; opacity: .22; -webkit-mask-image: none; mask-image: none; }}
.offer-colection-area .colection-info-wrap .text-white,
.offer-colection-area .colection-info-wrap p,
.offer-colection-area .colection-info-wrap h2 { color: var(--ol-paper) !important; }

/* the ruled newsletter line, not a grey box [CARRIED] */
.our-newsletter-area { border-top: 1px solid var(--ol-line); }
.our-newsletter-area .newsletter--one { display: flex; align-items: stretch; border-bottom: 1px solid var(--ol-ink); }
.our-newsletter-area .input-box {
    flex: 1; background: transparent; border: 0;
    padding: 14px 4px; font-size: 16px; color: var(--ol-ink);
    font-family: var(--ol-font-body);
}
.our-newsletter-area .input-box::placeholder { color: var(--ol-soft); }
.our-newsletter-area .submit-btn {
    background: transparent; border: 0; color: var(--ol-ink);
    padding: 0 4px 0 24px; cursor: pointer; transition: color .25s;
}

/* the ruled contact form [CARRIED] */
.contact-form .contact-inner input,
.contact-form .contact-inner textarea {
    background: transparent; border: 0;
    border-bottom: 1px solid var(--ol-line);
    border-radius: 0; padding: 14px 2px;
    font-size: 16px; color: var(--ol-ink);
    font-family: var(--ol-font-body);
    transition: border-color .2s;
}
.contact-form .contact-inner input:focus,
.contact-form .contact-inner textarea:focus { border-bottom-color: var(--ol-ink); outline: none; box-shadow: none; }
.contact-form .contact-inner input::placeholder,
.contact-form .contact-inner textarea::placeholder { color: var(--ol-soft); }

/* the ruled spec list [CARRIED] */
.product_meta .item_meta {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 12px 0; border-bottom: 1px solid var(--ol-line);
    font-size: 15px; color: var(--ol-ink);
}
.product_meta .item_meta:first-child { border-top: 1px solid var(--ol-line); }

/* the contact colophon flex fix [CARRIED] */
.single-contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.single-contact-info-item .icon { float: none; flex: 0 0 auto; }
.single-contact-info-item .iconbox-desc { display: block; flex: 1 1 auto; min-width: 0; }
.single-contact-info-item h6 { font-size: 19px; }
.single-contact-info-item p { font-size: 15px; }

/* the footer hierarchy [CARRIED, retuned] */
.footer-widget h6, .footer-widget .footer-widget__title { color: var(--ol-ink) !important; margin-bottom: 20px !important; }
.footer-widget__list li { margin-bottom: 9px; font-size: 15px; }
.footer-copyright-area { border-top: 1px solid var(--ol-line); padding-top: 26px !important; }/* --- 18. Motion: one curve, one gesture, then stop ---------------------
   wow.js keeps running (main.js:39). Only the animation NAME changes, and
   deliberately WITHOUT !important: WOW writes `animation-name:none` as an
   INLINE style until the element scrolls into view, and an !important
   stylesheet rule would beat that inline value, firing the whole reveal at
   page load behind `visibility:hidden`. `.ol-cat-tile.wow` is 0,2,0, which
   already beats animate.css's `.fadeInUp` (0,1,0), so this is correct.    */@keyframes olWipe {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0);    opacity: 1; }}
.ol-lookbook__tile {
    animation-name: olWipe;
    animation-duration: .95s;
    animation-timing-function: cubic-bezier(.16,.84,.44,1);
    animation-fill-mode: both;
}


.header-area.header-sticky.is-sticky { border-bottom: 1px solid var(--ol-ink); }
.single-product-item .products-images img { transition: transform 1.1s cubic-bezier(.16,.84,.44,1); }
.single-product-item:hover .products-images img { transform: scale(1.04); }
.ol-scenes__tile:hover { transform: none; }
.ol-atmosphere__tile:hover { filter: none; }
img[loading="lazy"] { transition: opacity .4s; }@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }}


/* --- 19. The header's left column: two words, not a search field --------
   The 275px input that used to open the page is gone; search now lives
   behind the magnifier on the right, which opens the full-screen overlay
   that already existed for mobile. */
.ol-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}
.ol-nav__word {
    font-family: var(--ol-font-body);
    font-size: 11px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--ol-ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: border-color .25s;
}
.ol-nav__word:hover { border-bottom-color: var(--ol-ink); color: var(--ol-ink); }/* Playfair's Cyrillic italic uses true cursive letterforms — beautiful for a
   two-line standfirst, hard work for seven lines on a phone. Below the tablet
   breakpoint the standfirst returns to roman and keeps only its scale. */@media (max-width: 767px) {
    .hero-area.hero-slider-one .hero-text-one p,
    .ol-masthead__lede,
    .ol-collection-hero__lede,
    .ol-categories__lede,
    .ol-lookbook__lede,
    .ol-plate__lede { font-style: normal; }}

/* ==========================================================================
   THE HERO — one photograph, one name, one quiet index
   A slide is a magazine opener: the collection's best scene bleeding off
   the left of the page, the name set huge on the paper beside it, and the
   two or three pieces reduced to a ruled index strip under the copy —
   not cut-outs scattered across the stage.
   ========================================================================== */
.ol-hero {
    /* slick writes `display:inline-block` inline on every slide */
    display: grid !important;
    grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
    min-height: 92vh;
    background: var(--ol-stone);
    overflow: hidden;
}

/* --- the photograph, bleeding off three edges --------------------------- */
.ol-hero__photo {
    margin: 0;
    position: relative;
    min-height: 100%;
}
.ol-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s cubic-bezier(.16,.84,.44,1);
}
/* the slow push-in a brand film does; barely perceptible, never a zoom */
.slick-active .ol-hero__photo img { transform: scale(1.045); }

/* --- the panel ---------------------------------------------------------- */
.ol-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 7vh, 96px) clamp(28px, 5.5vw, 96px) clamp(36px, 5vh, 64px);
}
.ol-hero__folio {
    position: absolute;
    top: clamp(24px, 4vh, 40px);
    right: clamp(28px, 5.5vw, 96px);
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
}
.ol-hero__kicker {
    display: block;
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-accent);
    margin-bottom: 16px;
}
.ol-hero__title {
    --ol-opsz: 110;
    font-family: var(--ol-font-display);
    font-size: clamp(52px, 7.2vw, 112px) !important;
    line-height: .94;
    letter-spacing: -.022em;
    margin: 0 0 20px;
    padding-bottom: 0;
}
.ol-hero__title::after { content: none !important; }
.ol-hero__lede {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 9;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ol-muted);
    max-width: 44ch;
    margin: 0 0 28px;
}

/* --- the index: the pieces as a ruled specimen strip -------------------- */
.ol-hero__index {
    margin-top: clamp(36px, 6vh, 68px);
    border-top: 1px solid var(--ol-line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ol-hero__piece {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 18px 0 0;
    text-decoration: none;
    min-width: 0;
}
.ol-hero__piece + .ol-hero__piece { border-left: 1px solid var(--ol-line); padding-left: 18px; }
.ol-hero__piece img {
    height: clamp(64px, 10vh, 104px);
    width: 100%;
    object-fit: contain;
    object-position: left bottom;
    transition: transform .6s cubic-bezier(.16,.84,.44,1);
}
.ol-hero__piece:hover img { transform: translateY(-5px); }
.ol-hero__piece-name {
    font-family: var(--ol-font-body);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ol-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s;
}
.ol-hero__piece:hover .ol-hero__piece-name { color: var(--ol-ink); }

/* --- slick furniture ---------------------------------------------------- */
.hero-area.hero-slider-one .slick-dots {
    position: absolute;
    left: auto;
    right: clamp(28px, 5.5vw, 96px);
    bottom: clamp(20px, 3.5vh, 36px);
    width: auto;
    text-align: right;
}

@media (max-width: 991px) {
    .ol-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .ol-hero__photo { min-height: 44vh; }
    .ol-hero__panel { padding: 44px 28px 56px; }
    .ol-hero__folio { top: auto; bottom: 20px; right: 28px; }
}
@media (max-width: 767px) {
    /* the phone hero keeps the cast as a TWO-piece specimen pair (three
       columns truncated every name); the 5s slide turn brings the next
       collection's pair, so the pieces keep changing on their own */
    .ol-hero { padding-top: 0 !important; }   /* the photo meets the header */
    .ol-hero__photo { min-height: 32vh; }
    .ol-hero__panel { padding: 26px 20px 48px; }
    /* the lede yields two lines so the cast pair fits the first screen */
    .ol-hero__lede {
        font-style: normal;
        font-size: 16px;
        margin-bottom: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ol-hero__index {
        margin-top: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ol-hero__piece { padding-top: 16px; }
    .ol-hero__piece:nth-child(3) { display: none; }
    .ol-hero__piece img { height: 76px; }
    .ol-hero__folio { display: none; }
    .hero-area.hero-slider-one .slick-dots { right: 20px; }
}

/* The hero owns its canvas: the walk must not stamp itself on the
   photograph or between the panel and its type. It begins below. */
body.page-home .hero-box-area { position: relative; z-index: 2; background: var(--ol-stone); }


/* ==========================================================================
   BELOW THE MASTHEAD — the body catches up with the hero.
   The lower page was designed around the (now removed) garden trail: the
   cut-outs stood on it. Without it they floated on bare paper. The fix is
   the same thing that makes the hero rich: photography. Every spread leads
   with the collection's scene, and every cut-out stands on a ground shadow.
   ========================================================================== */

/* --- the featured spread: photograph + the piece standing before it ----- */
.ol-feat-media { position: relative; }
.ol-feat-media__photo { display: block; }
.ol-feat-media__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
@media (max-width: 991px) {
    .ol-feat-media__photo img { aspect-ratio: 3 / 2; }
}

/* --- spotlight pieces get a floor too ---------------------------------- */
.single-product-item .products-images { position: relative; }
.single-product-item .products-images::after {
    content: '';
    position: absolute;
    left: 20%; right: 20%; bottom: 18px;
    height: 14px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(18,18,15,.12), rgba(18,18,15,0) 68%);
}
.single-product-item .products-images img { position: relative; z-index: 1; }

/* the copy balances the tall photograph instead of hanging at its top */
.featuted-product-one:has(.ol-feat-media) { align-items: center; }


/* ==========================================================================
   TIGHTER RHYTHM — the copy column earns its height, the air comes down
   a notch. The spreads were half empty: 300px of copy centred in a 950px
   column, framed by 156px paddings. The sibling index fills the column
   with something worth having, and the paddings return to magazine — not
   cathedral — proportions.
   ========================================================================== */
/* scenes open large — say so with the cursor */
a.ol-scene-pop { cursor: zoom-in; display: block; }

/* --- pre-init hero: identical to slick's first frame ------------------
   Before slick boots, only the first slide shows, at the exact final
   geometry — so the LCP image never repaints larger after JS arrives. */
.hero-slider-one:not(.slick-initialized) .single-hero-slider-one { display: none; }
.hero-slider-one:not(.slick-initialized) .single-hero-slider-one:first-child { display: block; width: 100%; }

/* --- the film: a windowed clip inside the scenes chapter, shown at
   half its native pixels so a retina screen never sees an upscale ----- */
.ol-film { margin-bottom: 16px; }
.ol-film__video {
    display: block;
    width: 100%;
    background: var(--ol-stone);
}
@media (min-width: 992px) {
    .ol-scenes__band--film { display: flex; align-items: stretch; }
    .ol-scenes__band--film .ol-film {
        flex: 0 0 38%;
        margin: 0 16px 0 0;
        height: clamp(340px, 52vh, 520px);
    }
    .ol-scenes__band--film .ol-film__video {
        height: 100%;
        object-fit: cover;      /* the film is a slide: same crop rules */
    }
    .ol-scenes__band--film .ol-scenes__rail {
        flex: 1 1 auto;
        min-width: 0;           /* slick inside flex needs this to shrink */
    }
}

/* --- the product dossier: ruled facts, no tabs, no shop chrome --------- */
.ol-pdp-collink { text-decoration: none; transition: color .25s; }
.ol-pdp-collink:hover { color: var(--ol-accent); }
.ol-pdp-specs { margin-top: clamp(30px, 4.5vh, 46px); border-top: 1px solid var(--ol-line); }
.ol-pdp-specs__row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--ol-line);
}
.ol-pdp-specs__label {
    font-family: var(--ol-font-body);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ol-soft);
    white-space: nowrap;
}
.ol-pdp-specs__leader {
    flex: 1 1 24px;
    min-width: 24px;
    border-bottom: 1px solid var(--ol-line);
    transform: translateY(-4px);
}
.ol-pdp-specs__value {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 9;
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--ol-ink);
    text-align: right;
    text-decoration: none;
}
a.ol-pdp-specs__value { transition: color .25s; }
a.ol-pdp-specs__value:hover { color: var(--ol-accent); }
.ol-pdp-share {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-top: clamp(30px, 4.5vh, 46px);
}
.ol-pdp-share__label,
.ol-pdp-share a {
    font-family: var(--ol-font-body);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
}
.ol-pdp-share__label { color: var(--ol-soft); }
.ol-pdp-share a { color: var(--ol-ink); transition: color .25s; }
.ol-pdp-share a:hover { color: var(--ol-accent); }
.ol-shelf-head__more {
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s;
}
.ol-shelf-head__more i { font-size: 11px; }
.ol-shelf-head__more:hover { color: var(--ol-accent); }
.ol-atmosphere__lede { color: var(--ol-muted); line-height: 1.7; max-width: 56ch; }

/* --- the scenes slider: two equal frames gliding, house line-dots ----- */
.ol-scenes__slider .slick-list { margin: 0 -8px; }
.ol-scenes__slider .ol-scenes__slide {
    position: relative;
    display: block;
    height: clamp(340px, 52vh, 520px);
    overflow: hidden;
    margin: 0 8px;
}
.ol-scenes__slide-bg {
    position: absolute;
    inset: 0;
    display: block;
    background-size: cover;
    background-position: center;
}
@media (max-width: 767px) {
    .ol-scenes__slider .slick-list { margin: 0; }
    .ol-scenes__slider .ol-scenes__slide { margin: 0; }
}
.ol-scenes__slider .slick-dots {
    position: static;
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    padding: 0;
}
.ol-scenes__slider .slick-dots li {
    list-style: none;
    width: auto; height: auto;
    margin: 0;
}
.ol-scenes__slider .slick-dots button {
    width: 22px; height: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0;
    background: var(--ol-line);
    transition: background .3s;
}
.ol-scenes__slider .slick-dots li.slick-active button { background: var(--ol-ink); }

/* --- THE SHELF — the collection page's catalogue plates. Every cut-out
   stands on its caption's hairline as on a floor, all in one frame.
   The whole plate is a link; no web-shop hover chrome. ----------------- */
.ol-shelf-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 1px solid var(--ol-line);
    padding-top: 12px;
    margin-bottom: 10px;
}
.ol-shelf-head__meta {
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ol-shelf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(28px, 3.4vw, 56px);
    row-gap: 64px;
}
.ol-shelf__item { display: block; text-decoration: none; min-width: 0; }
.ol-shelf__stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 270px;
    position: relative;
}
.ol-shelf__stage::after {              /* the floor under the piece */
    content: '';
    position: absolute;
    left: 18%; right: 18%; bottom: -3px;
    height: 16px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(18, 18, 15, .15), rgba(18, 18, 15, 0) 68%);
}
.ol-shelf__stage img {
    position: relative;
    z-index: 1;
    max-width: 94%;
    max-height: 250px;        /* one frame for every piece — no size games */
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.16, .84, .44, 1);
}
.ol-shelf__item:hover .ol-shelf__stage img { transform: translateY(-6px); }
.ol-shelf__caption {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-top: 1px solid var(--ol-line);
    padding-top: 14px;
}
.ol-shelf__name {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 9;
    font-size: 18px;
    line-height: 1.25;
    color: var(--ol-ink);
    transition: color .25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ol-shelf__item:hover .ol-shelf__name { color: var(--ol-accent); }
.ol-shelf__type {
    margin-left: auto;
    font-family: var(--ol-font-body);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ol-soft);
    white-space: nowrap;
}
@media (max-width: 991px) {
    .ol-shelf { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
    .ol-shelf__stage { height: 230px; }
    .ol-shelf__stage img { max-height: 196px; }
}
@media (max-width: 575px) {
    .ol-shelf { column-gap: 18px; row-gap: 40px; }
    .ol-shelf__stage { height: 180px; }
    .ol-shelf__stage img { max-height: 152px; }
    .ol-shelf__name { font-size: 15px; }
    .ol-shelf__type { display: none; }
}

/* --- the page turn: the magazine continues into the next collection --- */
.ol-next-col {
    display: block;
    text-decoration: none;
    background: var(--ol-stone);
    padding: clamp(56px, 8vh, 88px) 0;
    text-align: center;
}
.ol-next-col__kicker {
    display: block;
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-muted);   /* soft fails WCAG contrast on the stone band */
    margin-bottom: 14px;
}
.ol-next-col__name {
    display: block;
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 60;
    font-style: italic;
    font-size: clamp(40px, 5.4vw, 76px);
    line-height: 1;
    color: var(--ol-ink);
    transition: color .3s;
}
.ol-next-col__name i {
    font-size: .45em;
    vertical-align: .28em;
    margin-left: .18em;
    display: inline-block;
    transition: transform .35s ease;
}
.ol-next-col:hover .ol-next-col__name { color: var(--ol-accent); }
.ol-next-col:hover .ol-next-col__name i { transform: translateX(10px); }

/* --- the spread is an INNER PAGE, not a second cover -------------------
   The hero speaks in roman display type, vertical hairline dividers and
   cutout images; the spread answers with an italic feature headline,
   HORIZONTAL rules and a numbered text register — same family, different
   editorial device. No images in this column: the scene photograph and
   the inset card own all the photography.                                */
.ol-feat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 1px solid var(--ol-line);
    padding-top: 12px;
    margin-bottom: clamp(20px, 3vh, 30px);
}
.ol-feat-head__col {
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-ink);
}
.ol-feat-head__count {
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ol-feat-reg { margin-top: clamp(30px, 4.5vh, 48px); }
.ol-feat-reg__label {
    display: block;
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-soft);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ol-line);
}
.ol-feat-reg__row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--ol-line);
    text-decoration: none;
}
.ol-feat-reg__no {
    font-family: var(--ol-font-body);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--ol-soft);
    font-variant-numeric: tabular-nums;
}
.ol-feat-reg__name {
    font-family: var(--ol-font-display);
    font-variation-settings: 'opsz' 9;
    font-size: 17px;
    line-height: 1.2;
    color: var(--ol-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s;
}
.ol-feat-reg__leader {                 /* the contents-page dot leader */
    flex: 1 1 24px;
    min-width: 24px;
    border-bottom: 1px solid var(--ol-line);
    transform: translateY(-4px);
    transition: border-color .25s;
}
.ol-feat-reg__type {
    font-family: var(--ol-font-body);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ol-soft);
    white-space: nowrap;
}
.ol-feat-reg__row:hover .ol-feat-reg__name   { color: var(--ol-accent); }
.ol-feat-reg__row:hover .ol-feat-reg__leader { border-color: var(--ol-muted); }
.ol-feat-reg__all {                    /* the register closes open — no rule under it */
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 2px 0;
    font-family: var(--ol-font-body);
    font-size: 10.5px;
    letter-spacing: var(--ol-track);
    text-transform: uppercase;
    color: var(--ol-ink);
    text-decoration: none;
}
.ol-feat-reg__all i { font-size: 11px; transition: transform .3s; }
.ol-feat-reg__all:hover { color: var(--ol-accent); }
.ol-feat-reg__all:hover i { transform: translateX(4px); }
.ol-feat-block__copy .btn--text { margin-left: 0; }
@media (max-width: 575px) {
    .ol-feat-reg__name { font-size: 15.5px; }
    .ol-feat-reg__type { display: none; }
    .ol-feat-reg__leader { min-width: 16px; }
}

/* the air, retuned: generous, no longer cavernous */
.section-space--ptb_90  { padding-top: 96px; padding-bottom: 96px; }
.section-space--ptb_120 { padding-top: 116px; padding-bottom: 116px; }
.ol-feat-block.section-space--ptb_120 { padding-top: 92px; padding-bottom: 92px; }

@media (max-width: 991px) {
    .section-space--ptb_90  { padding-top: 64px; padding-bottom: 64px; }
    .section-space--ptb_120 { padding-top: 76px; padding-bottom: 76px; }
    .ol-feat-block.section-space--ptb_120 { padding-top: 64px; padding-bottom: 64px; }
}

/* the header triggers are buttons now (crawlable-anchors) — no UA chrome */
button.search-icon, button.mobile-navigation-icon, button.scroll-top {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* --- mobile micro-typography & controls: the phone reads at arm's length,
   so the small voice comes up a notch and controls behave like controls -- */
@media (max-width: 767px) {
    /* the theme's .btn box model leaves the text-button's underline floating
       30px under its label — on the phone it reads as a stray dash */
    .btn--text {
        height: auto !important;
        /* the underline is text-decoration, so it tracks the baseline and
           the padding is free to build a real 44px thumb target */
        min-height: 44px !important;
        line-height: 1.4 !important;
        padding: 13px 0 !important;
        font-size: 12px;
    }
    /* the register's dot leader points at a hidden type label — drop it */
    .ol-feat-reg__leader { display: none; }
    .ol-feat-reg__row { gap: 12px; }
    .ol-feat-reg__no { font-size: 11px; }
    .ol-feat-reg__name { font-size: 16px; white-space: normal; }
    .ol-feat-reg__all { font-size: 11.5px; }
    /* breadcrumb: a quiet one-line trail, not a second headline */
    .breadcrumb-area .breadcrumb-list li { font-size: 10.5px; letter-spacing: .12em; }
    /* labels lift to the phone's legibility floor */
    .ol-feat-head__col, .ol-feat-head__count,
    .ol-shelf-head .sub-heading, .ol-shelf-head__meta,
    .ol-index-tile__count, .ol-shelf__type,
    .ol-pdp-share__label, .ol-pdp-share a,
    .ol-pdp-specs__label { font-size: 11px; }
    .ol-shelf__name { font-size: 16px; }
    /* the dossier's one true action reads as one: full width, firm */
    .ol-pdp-dossier .btn--border_1 { display: block; width: 100%; text-align: center; }
    /* air between the dossier's share row and the gallery below it */
    .ol-pdp-dossier { margin-bottom: 40px; }
}

/* --- the phone breathes tighter: 90px desktop air reads as a void ------- */
@media (max-width: 767px) {
    .section-space--pt_90  { padding-top: 56px; }
    /* ONE content edge on the phone: the full-bleed strips align with the
       container text edge instead of sitting 15px deeper */
    .container-fluid--cp-30 { padding-left: 15px; padding-right: 15px; }
    /* the breadcrumb is a trail, not a landing strip */
    .breadcrumb-area { padding: 6px 0 0; }
    .breadcrumb-area .breadcrumb-list { font-size: 10px; }
    .single-product-wrap.section-space--pt_90 { padding-top: 26px; }
    /* scenes: title, film and strip sit close, one composition */
    .ol-scenes .row.mb-40 { margin-bottom: 8px; }
    .ol-film { margin-top: 10px; margin-bottom: 14px; }
}

/* --- controls behave like controls: >=44px hit areas, visuals unchanged -- */
button.search-icon, button.mobile-navigation-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
}
.footer-social-networks .item a {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -10px -4px;
}
.footer-widget__newsletter .submit-button { min-width: 44px; min-height: 44px; }
.ol-pdp-share a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
/* slider line-dots keep their hairline look but gain a real hit box */
.ol-scenes__slider .slick-dots button,
.hero-area.hero-slider-one .slick-dots button {
    width: 28px !important;
    height: 30px !important;
    padding: 14px 3px !important;
    background-clip: content-box !important;
    box-sizing: content-box;
}
/* inactive dots must be findable on stone */
.hero-area.hero-slider-one .slick-dots button { background-color: #C9C2B4; }
.ol-scenes__slider .slick-dots button { background-color: #C9C2B4; }
.hero-area.hero-slider-one .slick-dots .slick-active button,
.ol-scenes__slider .slick-dots li.slick-active button { background-color: var(--ol-ink); }
/* carousel arrows: real buttons, not bare glyphs */
.product-slider-active .slick-arrow {
    width: 48px;
    height: 48px;
    display: grid !important;
    place-items: center;
}
/* the film's pause control — quiet, bottom-right, WCAG 2.2.2 */
.ol-film { position: relative; }
.ol-film__toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(18, 18, 15, .45);
    border: 0;
    cursor: pointer;
    transition: background .25s;
}
.ol-film__toggle:hover { background: rgba(18, 18, 15, .7); }
.ol-film__toggle-glyph {                     /* pause bars */
    width: 10px;
    height: 12px;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
}
.ol-film__toggle.is-paused .ol-film__toggle-glyph {   /* play triangle */
    width: 0;
    height: 0;
    border: 0;
    border-left: 11px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 3px;
}
/* text links carry a real hit area */
.btn--text, .ol-feat-reg__all, .ol-shelf-head__more { min-height: 44px; display: inline-flex; align-items: center; }
.btn--text { padding-top: 0 !important; padding-bottom: 0 !important; border-bottom-width: 0 !important; text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px; text-decoration-color: var(--ol-accent); }

/* --- the audited mobile pass ------------------------------------------- */
@media (max-width: 767px) {
    /* one 20px gutter everywhere — media and text share a rail */
    .container { padding-left: 20px !important; padding-right: 20px !important; }
    .container-fluid--cp-30 { padding-left: 20px; padding-right: 20px; }
    /* breadcrumb: quiet left trail; the page name is the H1 right below it.
       The tap padding lives on the li (flex-centered), so the slash
       separators stay on the same baseline as the links */
    .breadcrumb-list { text-align: left !important; }
    .breadcrumb-list .breadcrumb-item.active { display: none; }
    .breadcrumb-list li {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .breadcrumb-list li a { display: inline-block; padding: 4px 2px; }
    /* shelf: no cathedral ceilings over small tables */
    .ol-shelf { row-gap: 30px; }
    .ol-shelf__stage { height: 170px; }
    .ol-shelf__stage img { max-height: 150px; }
    /* section heads that share a row stack cleanly instead of colliding */
    .ol-shelf-head { flex-wrap: wrap; row-gap: 4px; }
    /* related products: a swipe strip — no orphan half-row */
    .related-products .ol-shelf {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 72%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .related-products .ol-shelf::-webkit-scrollbar { display: none; }
    .related-products .ol-shelf__item { scroll-snap-align: start; }
    .related-products .section-title--one { font-size: 26px; }
    /* PDP thumbnails: three to a row on the phone */
    .ol-pdp-thumbs { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .ol-pdp-thumbs--slider:not(.slick-initialized) .ol-pdp-thumb { flex: 0 0 calc(33.333% - 16px); }

    /* Mobile reading order — name, photograph, then the dossier. The two
       bootstrap columns and the dossier dissolve into the row's own flex
       flow (display:contents), so the single <h1> is ORDERED above the
       gallery instead of being duplicated into a second hidden heading.
       The row's negative gutters go with the column padding they cancel. */
    .single-product-wrap > .container > .row {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }
    .single-product-wrap > .container > .row > [class*="col-"],
    .single-product-wrap .ol-pdp-dossier { display: contents; }
    /* Anything not named below lands after the ordered blocks. Without this
       a section added later (the price line, the parts table) inherits
       order:0 and jumps ABOVE the product's own name. */
    .single-product-wrap .ol-pdp-dossier > *   { order: 9; }
    .ol-pdp-dossier > .ol-feat-head            { order: 1; }
    .ol-pdp-dossier > .ol-pdp-title            { order: 2; margin-bottom: 0; }
    .ol-pdp-dossier > .ol-pdp-price            { order: 2; }
    .single-product-wrap .product-details-left { order: 3; margin: 16px 0 30px; }
    .ol-pdp-dossier > .quickview-peragraph     { order: 4; }
    .ol-pdp-dossier > .button-box              { order: 5; }
    .ol-pdp-dossier > .ol-pdp-specs            { order: 6; }
    .ol-pdp-dossier > .ol-pdp-parts            { order: 7; }
    .ol-pdp-dossier > .ol-pdp-share            { order: 8; }

    /* display:contents drops the column box, so the gallery has no definite
       width to shrink into: a 1fr track falls back to the photograph's own
       3549px and the page grew to 63000px wide. minmax(0,1fr) plus min-width
       on the flex items is what keeps the intrinsic size out of the layout. */
    .single-product-wrap .product-details-left { min-width: 0; max-width: 100%; }
    .ol-pdp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ol-pdp-thumbs,
    .ol-pdp-thumbs .slick-list,
    .ol-pdp-thumbs .slick-track { min-width: 0; max-width: 100%; }
    .ol-pdp-gallery img, .ol-pdp-thumbs img { max-width: 100%; height: auto; }
    .ol-3d-trigger { min-height: 44px; padding: 12px 18px; }
    .ol-pdp-dossier .btn--border_1 { min-height: 52px; align-items: center; display: inline-flex; justify-content: center; }
    /* lookbook captions never depend on the photograph behind them */
    .ol-lookbook__tile { position: relative; }
    .ol-lookbook__tile::after {
        content: '';
        position: absolute;
        inset: 45% 0 0 0;
        background: linear-gradient(transparent, rgba(20, 16, 12, .58));
        pointer-events: none;
    }
    /* the caption stays pinned to the bottom of the 460px tile, where the
       scrim above darkens the photograph — floating it back into flow put
       white type on the undimmed top half */
    .ol-lookbook__lede { margin-bottom: 36px; }
    /* the tiny gray voice gets ink enough to read */
    .ol-index-tile__count, .ol-shelf__type, .ol-shelf-head__meta,
    .ol-feat-head__count, .ol-feat-reg__no, .ol-pdp-specs__label,
    .ol-index-tile__no { color: var(--ol-muted); }
    /* film: honest 16:9 frame, not a thin cinema strip */
    .ol-film__video { aspect-ratio: 16 / 9; object-fit: cover; height: auto; width: 100%; }
    /* plate kicker over dark photography uses the light accent */
    .ol-plate__kicker { color: var(--ol-accent-light); }
    /* the copyright fits its line */
    .copyright-text { font-size: 10.5px; letter-spacing: .1em; display: block; }
    /* the footer centres itself on the phone */
    .footer-widget { text-align: center; }
    .footer-widget .footer-widget__title { text-align: center; }
    .footer-widget__list li { justify-content: center; }
    .footer-social-networks { display: flex; justify-content: center; }
    .footer-widget__about-text { margin-left: auto; margin-right: auto; }
    .footer-widget__newsletter form { max-width: 320px; margin-left: auto; margin-right: auto; }
    .footer-widget__footer-menu { text-align: center; }
    /* carousel: caption tight under its piece, no dead stage */
    .product-slider-active .single-product-item { margin-bottom: 0; }
    .product-slider-active .single-product-item .products-images {
        height: 300px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .product-slider-active .single-product-item .products-images img {
        max-height: 280px;
        width: auto;
        max-width: 92%;
    }
    /* the full-width CTA keeps a breath between label and arrow */
    .ol-pdp-dossier .btn--border_1 i,
    .ol-feat-block .btn--text i { margin-left: 10px; }
}


/* ==========================================================================
   Keyboard focus. The theme monolith carries `*:focus { outline: none
   !important }`, which erased every focus ring on the site — including the
   lightbox, the 3D controls and the whole admin-adjacent tab order. This
   file is concatenated last, so the ring comes back here, and only for
   :focus-visible, so a mouse click still leaves no halo.
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--ol-ink) !important;
    outline-offset: 3px !important;
}
.ol-collection-hero :focus-visible,
.ol-plate :focus-visible,
.ol-story-banner :focus-visible,
.mfp-wrap :focus-visible { outline-color: #fff !important; }

/* The theme pulls the product carousel out of its container by a flat 15px
   while the container only pads by half a gutter (12px), so the page grew a
   3px horizontal scrollbar wherever the container runs full width. Cancel
   exactly the padding instead of guessing at it. */
.product-slider-active {
    margin-left:  calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
}

/* The slash between breadcrumb links needs air on both sides — without it
   the trail reads "НАЧАЛО /КОЛЕКЦИИ /BALI". */
.breadcrumb-list .breadcrumb-item + .breadcrumb-item::before { padding-right: .4em; }

/* An arrow glued to its label reads as a typo: "ЦЯЛАТА КОЛЕКЦИЯ→". */
.ol-shelf-head__more i,
.ol-feat-reg__all i,
.btn--text i { margin-left: .5em; }

/* Small type that sat just under the AA contrast floor. */
.ol-3d__hint      { color: #5C5C5C; }
.ol-hero__folio,
.ol-hero__piece-name { color: #5F5A53; }
.ol-hero__kicker  { color: #92492F; }

/* The site carries two makers now: a quiet tag names which one, in the
   same tabular voice as the other small labels. */
.ol-brand-tag {
    display: block;
    font-family: var(--ol-font-body);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ol-soft);
    margin-top: 4px;
}
.ol-cat-card__row .ol-brand-tag { flex-basis: 100%; }

/* --- YouTube reels: a poster that becomes a player on click ------------- */
.ol-film--yt { position: relative; width: 100%; }
.ol-film__play {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--ol-stone);
    cursor: pointer;
    overflow: hidden;
}
.ol-film__play img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.16,.84,.44,1);
}
.ol-film__play:hover img { transform: scale(1.03); }
.ol-film__play-glyph {
    position: absolute;
    left: 50%; top: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(250, 248, 244, .92);
    transition: background .25s, transform .25s;
}
/* the triangle, drawn rather than fetched */
.ol-film__play-glyph::after {
    content: '';
    position: absolute;
    left: 26px; top: 21px;
    border-style: solid;
    border-width: 11px 0 11px 17px;
    border-color: transparent transparent transparent var(--ol-ink);
}
.ol-film__play:hover .ol-film__play-glyph { background: #fff; transform: scale(1.06); }
.ol-film__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.ol-pdp-film { margin-top: 16px; }
@media (max-width: 767px) {
    .ol-film__play-glyph { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
    .ol-film__play-glyph::after { left: 22px; top: 17px; border-width: 10px 0 10px 15px; }
}


/* --- a collection whose family is one or two pieces ---------------------
   The shelf is a three-column grid; with a single product the piece sat in
   the first column and two empty columns trailed after it. Narrow the track
   instead, and centre what is there. */
.ol-shelf--n1 { grid-template-columns: minmax(0, 460px); justify-content: center; }
.ol-shelf--n2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.ol-shelf--n1 .ol-shelf__caption,
.ol-shelf--n2 .ol-shelf__caption { justify-content: center; gap: 14px; }
@media (max-width: 767px) {
    .ol-shelf--n1, .ol-shelf--n2 { grid-template-columns: minmax(0, 1fr); }
}


/* --- a collection of one is a whole set ---------------------------------
   The card says what the set is ("седяща група") instead of "1 продукт",
   and wears the accent with a short rule so a complete set reads apart
   from a family of separate pieces at a glance. */
.ol-cat-card__count--set { color: var(--ol-accent); }
.ol-cat-card__count--set::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 8px;
    opacity: .75;
}


/* --- the price ----------------------------------------------------------
   Set in the display face at reading size: a figure the eye lands on right
   after the name, without shouting like a discount sticker. */
.ol-pdp-price {
    font-family: var(--ol-font-display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--ol-ink);
    margin: -6px 0 22px;
}
.ol-pdp-price small {
    display: block;
    font-family: var(--ol-font-body);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ol-muted);
    margin-top: 6px;
}
@media (max-width: 767px) { .ol-pdp-price { font-size: 26px; } }


/* --- what is inside the set --------------------------------------------
   The maker's own measurements, one line per piece, set as a register so
   the eye can run down the sizes without meeting a table grid. */
.ol-pdp-parts { margin: 30px 0 6px; }
.ol-pdp-parts__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--ol-ink);
    padding-bottom: 8px;
    margin-bottom: 4px;
    font-family: var(--ol-font-body);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.ol-pdp-parts__unit { color: var(--ol-muted); }
.ol-pdp-parts__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ol-line);
}
.ol-pdp-parts__name { font-size: 15px; color: var(--ol-ink); }
.ol-pdp-parts__dims {
    font-family: var(--ol-font-display);
    font-size: 15px;
    color: var(--ol-muted);
    white-space: nowrap;
}