/* 2026-10-07 signature layer: hero autoplay line, product ribbon, logo click and menu motion. */
:root{--rj-ease:cubic-bezier(.22,.8,.2,1);--rj-gold:#c9a063}

/* Hero autoplay: the line fills, then the next featured product arrives. */
.rj-autoplay{position:absolute;z-index:6;bottom:14px;inset-inline:50% auto;width:120px;margin-inline-start:-60px;height:2px;border-radius:2px;background:#ffffff24;overflow:hidden;pointer-events:none}
.rj-autoplay i{display:block;height:100%;background:linear-gradient(90deg,#f2d9a8,var(--rj-gold));transform:scaleX(0);transform-origin:left center}
html[dir=rtl] .rj-autoplay i{transform-origin:right center}
.rj-autoplay.is-running i{animation:rj-autoplay var(--rj-autoplay-ms,5200ms) linear forwards}
.showcase-stage:hover .rj-autoplay i,.showcase-stage:focus-within .rj-autoplay i{animation-play-state:paused}
@keyframes rj-autoplay{to{transform:scaleX(1)}}

/* Product ribbon: one slow, endless line. Hover or focus pauses it. */
.journey-site a.category-card.ssr-card{text-decoration:none;color:inherit}
.rj-ribbon{margin:0 0 56px}
.rj-ribbon-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.rj-ribbon-head h3{margin:4px 0 0;font-size:clamp(20px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em}
.rj-ribbon-head .eyebrow{margin:0}
.rj-ribbon-all{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;color:#7f5a15}
.rj-ribbon-all span{transition:transform .3s var(--rj-ease)}
.rj-ribbon-all:hover span{transform:translateX(4px)}
html[dir=rtl] .rj-ribbon-all:hover span{transform:translateX(-4px)}
.rj-ribbon-viewport{position:relative;overflow:hidden;padding:12px 10px 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rj-ribbon-track{display:flex;width:max-content;animation:rj-ribbon-ltr var(--rj-ribbon-ms,60s) linear infinite}
html[dir=rtl] .rj-ribbon-track{animation-name:rj-ribbon-rtl}
.rj-ribbon-viewport:hover .rj-ribbon-track,.rj-ribbon-viewport:focus-within .rj-ribbon-track{animation-play-state:paused}
.rj-ribbon-list{display:flex;gap:14px;margin:0;padding:0 7px;list-style:none}
.rj-ribbon-item{display:flex;align-items:center;gap:12px;width:250px;padding:10px 14px 10px 10px;border-radius:18px;background:#fff;border:1px solid #eee8dd;box-shadow:0 1px 2px #241c140a,0 8px 20px -14px #241c1433;transition:transform .35s var(--rj-ease),box-shadow .35s var(--rj-ease),border-color .35s}
html[dir=rtl] .rj-ribbon-item{padding:10px 10px 10px 14px}
.rj-ribbon-item:focus-visible{outline:2px solid #8a6420;outline-offset:2px}
.rj-ribbon-pause{flex:0 0 auto;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #d9cdb8;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
html.theme-dark .rj-ribbon-pause{border-color:#3d3529}
.rj-ribbon-item:hover,.rj-ribbon-item:focus-visible{transform:translateY(-4px);border-color:#d9c39d;box-shadow:0 2px 4px #241c140f,0 18px 30px -16px #241c1455}
.rj-ribbon-item img{flex:0 0 auto;width:64px;height:64px;object-fit:contain;border-radius:12px;background:#f1e9db;transition:transform .45s var(--rj-ease)}
.rj-ribbon-item:hover img{transform:scale(1.08)}
.rj-ribbon-copy{display:flex;flex-direction:column;min-width:0}
.rj-ribbon-copy strong{font-size:13px;line-height:1.35;color:#241c14;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rj-ribbon-copy small{margin-top:3px;font-size:11px;color:#6b5c48;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes rj-ribbon-ltr{to{transform:translateX(-50%)}}
@keyframes rj-ribbon-rtl{to{transform:translateX(50%)}}
@media(max-width:700px){.rj-ribbon{margin-bottom:40px}.rj-ribbon-head{align-items:flex-start;flex-direction:column;gap:8px}.rj-ribbon-item{width:210px}.rj-ribbon-item img{width:54px;height:54px}}

/* Logo: a short lift and settle while the sunrise mark replays. */
.rj-logo-play .brand-mark{animation:rj-logo-lift .9s var(--rj-ease)}
.rj-logo-play .brand-mark+span>*{animation:rj-logo-word .7s var(--rj-ease) both}
.rj-logo-play .brand-mark+span>small{animation-delay:.08s}
@keyframes rj-logo-lift{0%{transform:scale(1) rotate(0)}22%{transform:scale(.86) rotate(-8deg)}58%{transform:scale(1.1) rotate(3deg);box-shadow:0 0 0 6px #d4b07833,0 10px 24px -8px #241c1466}100%{transform:scale(1) rotate(0)}}
@keyframes rj-logo-word{0%{opacity:.35;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* Menu, wide screens: a highlight slides between links and rests on the section in view. */
@media(min-width:901px){
 .rj-nav-ready{position:relative;isolation:isolate}
 .rj-nav-ready>a{position:relative;z-index:1;transition:color .25s}
 .rj-nav-ready>a::after{display:none}
 .rj-nav-pill{position:absolute;z-index:0;left:0;top:0;width:calc(var(--rj-w,0px) + 24px);height:calc(var(--rj-h,0px) + 14px);transform:translate(calc(var(--rj-x,0px) - 12px),calc(var(--rj-y,0px) - 7px));border-radius:999px;background:#7f5a1514;box-shadow:inset 0 0 0 1px #7f5a151f;opacity:0;pointer-events:none;transition:transform .45s var(--rj-ease),width .45s var(--rj-ease),height .45s var(--rj-ease),opacity .3s}
 .rj-pill-on>.rj-nav-pill{opacity:1}
 .rj-pill-jump>.rj-nav-pill{transition:opacity .3s}
 .rj-nav-ready>a.rj-current{color:#7f5a15}
}
@media(max-width:900px){.rj-nav-pill{display:none}}

/* Menu, small screens: the panel unfolds and the links arrive one after another. */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 .journey-site .site-header nav.open{animation:rj-menu-open .42s var(--rj-ease) both}
 .journey-site .site-header nav.open>*{animation:rj-menu-item .5s var(--rj-ease) both;animation-delay:calc(var(--rj-i,0) * 45ms + 80ms)}
}
@keyframes rj-menu-open{from{clip-path:inset(0 0 100% 0 round 0 0 18px 18px);opacity:.6}to{clip-path:inset(0 0 0 0 round 0 0 18px 18px);opacity:1}}
@keyframes rj-menu-item{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.journey-site .menu-lines{transition:border-color .2s}
.journey-site .menu-lines::before,.journey-site .menu-lines::after{transition:transform .35s var(--rj-ease)}
.journey-site .menu-button[aria-expanded=true] .menu-lines{border-color:transparent}
.journey-site .menu-button[aria-expanded=true] .menu-lines::before{transform:rotate(45deg)}
.journey-site .menu-button[aria-expanded=true] .menu-lines::after{content:'';position:absolute;inset:50% 0 auto;height:1px;background:currentColor;transform:rotate(-45deg)}

/* Dark mode. */
html.theme-dark .rj-ribbon-item{background:#1e1a16;border-color:#372f26;box-shadow:0 8px 20px -14px #000}
html.theme-dark .rj-ribbon-item img{background:#2a241d}
html.theme-dark .rj-ribbon-copy strong{color:#f2ede5}
html.theme-dark .rj-ribbon-copy small{color:#ab9f8f}
html.theme-dark .rj-ribbon-all,html.theme-dark .rj-nav-ready>a.rj-current{color:#d2ab73}
html.theme-dark .rj-nav-pill{background:#d2ab731f;box-shadow:inset 0 0 0 1px #d2ab732e}

/* Warm ivory hero (light theme only; dark mode keeps its night scene). Brand ivory and gold,
   navy text, soft shadows so the product cut-outs sit on a sunlit surface. */
html:not(.theme-dark) .studio-site .hero{background:#f6f0e6;color:#241c14}
html:not(.theme-dark) .studio-site .hero::before{background:radial-gradient(ellipse at 72% 28%,#fffaf0 0,#fffaf000 52%),radial-gradient(ellipse at 12% 90%,#ecdcc0 0,#ecdcc000 48%),linear-gradient(120deg,#fbf7f0,#f2e8d8 62%,#f7f0e4)}
html:not(.theme-dark) .studio-site .hero h1,html:not(.theme-dark) .studio-site .hero h1 span{color:#241c14}
html:not(.theme-dark) .studio-site .hero h1 em{color:#8a6a3a}
html:not(.theme-dark) .studio-site .hero :is(.eyebrow,.hero-text,.hero-footnote,.hero-footnote p,.scroll-cue,.studio-scene-count,.studio-product-facts,.studio-swipe-hint){color:#655e51}
html:not(.theme-dark) .studio-site .hero .hero-footnote strong{color:#241c14}
html:not(.theme-dark) .studio-site .hero :is(.hero-link,.studio-department){color:#825805}
html:not(.theme-dark) .studio-site .hero .mini-rule{background:#c9a063}
html:not(.theme-dark) .studio-site .hero :is(.studio-scene-caption,.studio-product-name,.studio-caption-copy){color:#241c14}
html:not(.theme-dark) .studio-site .hero .studio-category-label{color:#7a5c2e}
html:not(.theme-dark) .studio-site .hero .studio-product-caption{border-color:#241c141a}
html:not(.theme-dark) .studio-site .hero .studio-orbit::before{opacity:.42}
html:not(.theme-dark) .studio-site .hero .studio-orbit::after{background-image:radial-gradient(#5a40142e,#5a401400 68%)}
html:not(.theme-dark) .studio-site .hero .studio-orbit-word{color:#241c1408;-webkit-text-stroke-color:#8a6a3a24}
html:not(.theme-dark) .studio-site .hero .journey-cutout{filter:drop-shadow(0 24px 20px #5a401447)}
html:not(.theme-dark) .studio-site .hero .studio-selectors{background:#ffffffa6;border-color:#241c1414;box-shadow:0 10px 30px -18px #5a401466}
html:not(.theme-dark) .studio-site .hero .studio-selector{color:#4b4438}
html:not(.theme-dark) .studio-site .hero .studio-selector:hover{color:#241c14;background:#ffffffb3}
html:not(.theme-dark) .studio-site .hero .studio-selector[aria-pressed=true]{color:#241c14;background:#fff;box-shadow:0 1px 3px #241c141f}
html:not(.theme-dark) .studio-site .hero .studio-arrow{background:#ffffffeb;color:#241c14;border-color:#241c141f;box-shadow:0 6px 18px -8px #5a401459}
html:not(.theme-dark) .studio-site .hero .scene-motion-toggle{color:#4c4438;border-color:#241c1499;font-size:14px}
html:not(.theme-dark) .studio-site .hero .rj-autoplay{background:#241c141f}

/* Dark mode hero: warm espresso night instead of navy, ivory text, gold light. */
html.theme-dark .studio-site .hero{background:#12100d}
html.theme-dark .studio-site .hero::before{background:radial-gradient(ellipse at 72% 28%,#3b3022 0,#3b302200 55%),radial-gradient(ellipse at 10% 92%,#2a2117 0,#2a211700 50%),linear-gradient(120deg,#0f0d0a,#1d1913 62%,#110f0c)}
html.theme-dark .studio-site .hero :is(h1,h1 span,.studio-product-name,.studio-scene-caption){color:#f5efe4}
html.theme-dark .studio-site .hero h1 em{color:#d9bd86}
html.theme-dark .studio-site .hero :is(.hero-text,.hero-footnote,.hero-footnote p,.scroll-cue,.studio-scene-count,.studio-product-facts,.studio-swipe-hint,.scene-motion-toggle){color:#c9bfaf}
html.theme-dark .studio-site .hero .studio-category-label{color:#d9bd86}
html.theme-dark .studio-site .hero .studio-arrow{background:#1d1913e0;border-color:#d9bd8633}
html.theme-dark .studio-site .hero .studio-selectors{background:#ffffff08;border-color:#d9bd8626}
html.theme-dark .studio-site .hero .studio-selector{color:#cfc6b8}
html.theme-dark .studio-site .hero .studio-selector[aria-pressed=true]{color:#1b1712;background:#f5efe4}
html.theme-dark .studio-site .hero .studio-product-caption{border-color:#d9bd8626}
html.theme-dark .studio-site .hero .studio-orbit::after{background-image:radial-gradient(#000000a0,#0000 68%)}
html.theme-dark .studio-site .hero .studio-orbit-word{-webkit-text-stroke-color:#d9bd861f}

/* Department cards: many products of the department, crossfading one card at a time. */
.journey-site .category-card-art.rj-rotating :is(.department-cutout,.category-photo,.category-card-placeholder){display:none}
.rj-cat-rotator{position:absolute;inset:4%;pointer-events:none}
.rj-cat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;border-radius:20px;padding:12px;box-shadow:0 2px 6px #241c1414,0 18px 34px -18px #241c1459;opacity:0;transform:scale(1.05);transition:opacity .9s ease,transform 5s cubic-bezier(.2,.7,.2,1)}
.rj-cat-photo.is-front{opacity:1;transform:scale(1)}
html.theme-dark .rj-cat-photo{background:#f5f1ea;box-shadow:0 18px 34px -18px #000}

/* Department sub-groups (collection chips) under the catalogue heading. */
.collection-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin:0 0 6px;scrollbar-width:thin}
.collection-chip{flex:0 0 auto;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #d9cdb8;background:#fff;color:#241c14;font:inherit;font-size:13px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.collection-chip:hover{border-color:#c9a063}
.collection-chip[aria-pressed=true]{background:#241c14;color:#fff;border-color:#241c14}
html.theme-dark .collection-chip{background:#1d1915;color:#f2ede5;border-color:#3d3529}
html.theme-dark .collection-chip[aria-pressed=true]{background:#f2ede5;color:#1d1915;border-color:#f2ede5}
.product-measure{font-weight:600}
.product-code{display:inline-block;font:600 11px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#6b5c48;direction:ltr;unicode-bidi:isolate}
html.theme-dark .product-code{color:#ab9f8f}
.availability-note{margin:-6px 0 14px;font-size:13px;color:#655e51}
html.theme-dark .availability-note{color:#b5ab9c}
.basket-list-tools{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px}
.basket-list-tools textarea{width:100%;font:inherit;font-size:13px}
.basket-print{display:none}
@media print{
 body.print-basket>*{display:none!important}
 body.print-basket>#basket-print{display:block!important;color:#000;background:#fff;font:14px/1.7 Tahoma,Arial,sans-serif;padding:24px}
 body.print-basket #basket-print h1{font-size:20px;margin:0 0 4px}
 body.print-basket #basket-print ol{padding-inline-start:22px}
}

/* Logo glow (used when the device asks for reduced motion: light, no movement). */
.rj-logo-soft .brand-mark{animation:rj-logo-glow 1.1s ease-out}
@keyframes rj-logo-glow{0%{box-shadow:0 0 0 0 #d4b07800}35%{box-shadow:0 0 0 5px #d4b07866,0 0 22px 4px #d4b07880}100%{box-shadow:0 0 0 0 #d4b07800}}

/* Hero crossfade (reduced motion): the new product fades in instead of sliding. */
.rj-hero-swap .journey-item[data-position="0"],.rj-hero-swap .studio-caption-copy{animation:rj-fade-in .7s ease both}
@keyframes rj-fade-in{from{opacity:0}to{opacity:1}}

/* Paused motion and reduced motion: movement stops; content may still change by crossfade
   (except Pause motion, which stops changes too). The ribbon becomes a scrollable row. */
body.effects-paused .rj-autoplay,body.effects-paused .rj-ribbon-clone{display:none}
body.effects-paused .rj-cat-photo{transition:none}
body.effects-paused .rj-ribbon-track{animation:none}
body.effects-paused .rj-ribbon-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
body.effects-paused .rj-logo-play .brand-mark,body.effects-paused .rj-logo-play .brand-mark+span>*{animation:none}
@media(prefers-reduced-motion:reduce){
 .rj-ribbon-clone{display:none}
 .rj-ribbon-track{animation:none}
 .rj-ribbon-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
 .rj-logo-play .brand-mark,.rj-logo-play .brand-mark+span>*{animation:none}
 .rj-ribbon-item,.rj-ribbon-item img{transition:none}
 /* No movement, but content still changes with opacity crossfades. These are more specific
    than the site-wide reduced-motion rules (".journey-site *", "*"), so they still apply. */
 .journey-site .rj-cat-photo{transform:none;transition:opacity .9s ease!important}
 .journey-site .rj-autoplay.is-running i{animation:rj-autoplay var(--rj-autoplay-ms,5200ms) linear forwards!important}
 .journey-site .rj-hero-swap .journey-item[data-position="0"],.journey-site .rj-hero-swap .studio-caption-copy{animation:rj-fade-in .7s ease both!important}
 .journey-site .rj-logo-soft .brand-mark{animation:rj-logo-glow 1.1s ease-out!important}
 .journey-site .rj-nav-pill{transition:opacity .3s ease!important}
 .journey-site .scene-motion-toggle{display:block}
 body.journey-site.effects-paused :is(.rj-cat-photo,.rj-nav-pill){transition:none!important}
}
/* Keyboard focus: a visible dark-gold outline on every control (2 October-style polish, 6 Oct 2026). */
.journey-site :is(a,button,select,input,textarea,summary,[role=button],[tabindex]):focus-visible{outline:2px solid #8a6420;outline-offset:3px}