/* Ivory and gold: the owner's palette (16 Oct 2026). Loaded last on every public page.
   Named colours, radius, shadow, stacking and timing scales; earlier layers keep their own values. */
:root{--iv-page:#faf6ef;--iv-paper:#f6f0e6;--iv-surface:#fffdf9;--iv-soft:#f1e9db;--iv-line:#e3d6c1;--iv-ink:#241c14;--iv-muted:#6b5c48;--iv-accent:#7f5a15;--iv-accent-strong:#664710;--iv-on-accent:#fff;--iv-gold:#c9a253;--iv-gold-soft:#efe0bd;--iv-espresso:#241c14;--iv-espresso-2:#2f2419;
 --iv-radius-s:10px;--iv-radius-m:16px;--iv-radius-l:24px;
 --iv-shadow-1:0 1px 2px #241c140f,0 8px 20px -12px #241c142e;--iv-shadow-2:0 2px 6px #241c1412,0 20px 44px -20px #241c1447;--iv-shadow-3:0 34px 90px -28px #241c1470;
 --iv-z-raised:2;--iv-z-sticky:30;--iv-z-bar:40;--iv-z-menu:60;--iv-z-dialog:100;--iv-z-toast:200;
 --iv-fast:160ms;--iv-ui:260ms;--iv-scene:700ms;--iv-ease:cubic-bezier(.2,.7,.2,1);--iv-ease-out:cubic-bezier(.16,1,.3,1)}
html.theme-dark{--iv-page:#14110e;--iv-paper:#17120d;--iv-surface:#211a13;--iv-soft:#2a2118;--iv-line:#3a2f23;--iv-ink:#f2ebe0;--iv-muted:#b5a690;--iv-accent:#d4b078;--iv-accent-strong:#e2c27c;--iv-on-accent:#241c14;--iv-gold:#d4b078;--iv-gold-soft:#3a2f1f}

/* Page and header surfaces: ivory instead of plain white; the phone browser bar (#f6f0e6) now matches the header. */
html:not(.theme-dark) body.journey-site,html:not(.theme-dark) body.catalogue-shell{background:var(--iv-page)}
html:not(.theme-dark) .journey-site .site-header,html:not(.theme-dark) body.catalogue-shell>header{background:#f6f0e6f0}
html:not(.theme-dark) .journey-site .topline{background:var(--iv-soft)}
html:not(.theme-dark) .journey-site .mobile-enquiry{background:#f6f0e6f2}

/* Contact band and company monogram: deep espresso with a warm gold glow. */
.journey-site .contact-section{background:radial-gradient(120% 90% at 85% 0%,#3d2d1c 0%,var(--iv-espresso) 55%,#1b140e 100%)}
.journey-site .contact-section .button,.journey-site .contact-section .button-gold{background:#d4b078;border-color:#d4b078;color:var(--iv-espresso)}
.journey-site .contact-section .button:hover,.journey-site .contact-section .button-gold:hover{background:#e2c27c;border-color:#e2c27c}
.journey-site .about-monogram{background:linear-gradient(160deg,var(--iv-espresso-2),#1d1610);border:1px solid #c9a25340}
.journey-site .about-monogram small{color:#cdbfa8}

/* Footer small print: AA contrast on the soft ivory band. */
html:not(.theme-dark) .journey-site footer :is(small,span){color:var(--iv-muted)}

/* Dark mode: gold buttons carry espresso text (white on gold was below AA); quiet tool buttons were light text on white. */
html.theme-dark .studio-site .hero-actions .button,html.theme-dark .studio-site .product-add,html.theme-dark .studio-site .card-actions .product-add,html.theme-dark .workbench-content button[aria-pressed=true]{background:#d4b078;border-color:#d4b078;color:var(--iv-espresso)}
html.theme-dark .workbench-content .button-quiet{background:var(--iv-surface);border-color:var(--iv-line);color:var(--iv-ink)}
html.theme-dark .journey-site :is(.topline i,.scroll-cue span){color:var(--iv-gold)}

/* Product and catalogue pages on phones (plan items 3-4): shorter header, no empty band above "Back"; buttons stay 44 px. */
@media(max-width:760px){body.catalogue-shell>header{padding-block:10px;row-gap:8px}body.catalogue-shell>header nav a{min-height:44px;padding-block:7px}body.catalogue-shell>main{padding-top:12px}body.catalogue-shell>main>.product-navigation:first-child{margin-top:0;border-top:0;padding-top:2px}}

/* Brand tile matches the app icons: espresso tile, gold sun (plan item 28). */
.journey-site :is(.site-header,footer) .brand-mark,.catalogue-shell .brand-mark{background:var(--iv-espresso);box-shadow:0 6px 16px -8px #241c1480}
html.theme-dark .journey-site :is(.site-header,footer) .brand-mark,html.theme-dark .catalogue-shell .brand-mark{background:#2f2419;box-shadow:inset 0 0 0 1px #c9a25340}
#footer-identity{white-space:pre-line}

/* Narrow phones: the hero "Pause motion" button sits above the scroll hint instead of covering it (found by layout-check at 320 px). */
@media(max-width:420px){.journey-site .hero .scene-motion-toggle{position:relative;inset:auto;display:block;width:max-content;margin:4px 5% 56px;margin-inline-start:auto}}

/* ---- Release 2026-10-16-motion: motion and layering (plan C and D) ---- */
/* 35: the product photo that flies to the basket. */
.iv-fly{position:fixed;z-index:var(--iv-z-toast);pointer-events:none;object-fit:contain;margin:0;padding:6px;border-radius:16px;background:var(--iv-surface);box-shadow:var(--iv-shadow-2)}
/* 42: gold check drawn in the saved-request confirmation. */
.iv-check{display:inline-block;width:1.05em;height:1.05em;margin-inline-end:.35em;vertical-align:-.12em}
.iv-check circle{fill:var(--iv-gold-soft);stroke:var(--iv-gold);stroke-width:1.2}
.iv-check path{fill:none;stroke:var(--iv-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
html.theme-dark .iv-check circle{fill:#3a2f1f}
/* 34: on touch, holding a finger on the moving ribbon holds it still (hover and keyboard focus already pause it). */
.rj-ribbon-viewport:active .rj-ribbon-track{animation-play-state:paused}
/* 44: the logo draws itself once per visit; a click on the logo still replays it. */
html.logo-seen :is(.site-header,footer,body.catalogue-shell>header) .brand:not(.rj-logo-play) .brand-mark *{animation:none!important}
/* 48: soft floor shadow under the main hero product. */
.studio-site #showcase-stage .journey-item[data-position="0"]::after{content:'';position:absolute;left:20%;right:20%;bottom:1%;height:8%;border-radius:50%;background:radial-gradient(closest-side,#241c1438,transparent);z-index:-1;pointer-events:none}
html.theme-dark .studio-site #showcase-stage .journey-item[data-position="0"]::after{background:radial-gradient(closest-side,#00000066,transparent)}
/* 49: desktop hover lifts the department photo a little off its shelf. */
@media(hover:hover) and (pointer:fine){.studio-site #category-grid .category-card:hover .category-card-art,.studio-site #category-grid .category-card:focus-visible .category-card-art{transform:rotate(-2deg) translateY(-10px) scale(1.03)}}
/* 50: header is lightly see-through over the top of the page and turns solid with a soft shadow once scrolled. */
html:not(.theme-dark) .journey-site .site-header:not(.scrolled){background:#f6f0e6c7;box-shadow:none}
html:not(.theme-dark) .journey-site .site-header.scrolled{background:#f6f0e6f5;box-shadow:0 10px 28px -22px #241c1480}
/* 51: the phone bottom bar sits visibly above the page. */
.journey-site .mobile-enquiry{box-shadow:0 -12px 30px -20px #241c1470}
/* 54: soft colour bands between sections instead of hard edges. */
html:not(.theme-dark) .journey-site #products{background:linear-gradient(180deg,#f6edde 0,#fffdf9 280px)}
html:not(.theme-dark) .journey-site #why-us{background:linear-gradient(180deg,#faf1e2 0,#fffdf9 240px)}
html:not(.theme-dark) .journey-site .owner-information{background:linear-gradient(180deg,#24180f08 0,#f1e9db 60px)}

/* ---- Plan A fixes ---- */
/* 10: the swipe hint on product pages is a slim line, not a large dashed box. */
.product-swipe-zone{border:0!important;border-block:1px solid var(--iv-line)!important;border-radius:0!important;background:transparent!important;padding:9px 6px!important;font-size:12px}
/* 12: keyboard focus never lands under the sticky header or the phone bottom bar (the catalogue and dialogs already had their own, more specific margins). */
.studio-site :focus-visible{scroll-margin-block:calc(var(--site-header-height,72px) + 24px) 24px}
@media(max-width:900px){.studio-site :focus-visible{scroll-margin-block-end:calc(96px + env(safe-area-inset-bottom))}}
/* 13: long English product names: two lines on cards (the full name is on the product page and in the basket). */
html[lang=en] .catalogue-product-card :is(h3,h2){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* 15: printing shows the content only. */
@media print{.mobile-enquiry,.scene-motion-toggle,.rj-ribbon-pause,.assistant-launcher,.skip-link,.iv-fly,.rj-autoplay{display:none!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* 16: on touch screens every button, field and stand-alone link is at least 44 px (found by layout-check). */
@media(pointer:coarse){
 .studio-site .catalogue-product-card .product-favorite,.product-favorite{width:44px;height:44px;min-width:44px;min-height:44px}
 .journey-site .hero :is(.scene-motion-toggle,.scroll-cue),.studio-site .card-actions :is(.product-quick,.product-compare),.studio-site .catalogue-toolbar .assistant-launcher{min-height:44px}
 .mobile-track{min-width:44px;justify-content:center}
 .site-header .language-switch{min-width:44px}
 :is(.product-compare,.product-quick,.assistant-launcher,.scene-motion-toggle,.studio-department,.scroll-cue,.rj-ribbon-pause,.mobile-track){min-height:44px}
 :is(.scroll-cue,.mobile-track){display:inline-flex;align-items:center}
 .journey-site a.brand,.catalogue-shell a.brand{min-height:44px}
 #product-search,.search-suggestions-wrap input{min-height:44px}
 .workbench-product-tools>summary,.catalogue-workbench>summary{min-height:44px;display:flex;align-items:center}
 .product-category-link{display:inline-flex;align-items:center;min-height:44px}
 /* Plain text links: a bigger touch area without moving anything. */
 :is(.catalogue-product-copy h4 a,footer div a,.catalogue-breadcrumbs li a,.rj-ribbon-all,.catalogue-directory-meta a,.catalogue-related-heading a,.catalogue-shell h2 a){padding-block:12px;margin-block:-12px}
 :is(footer div a,.catalogue-breadcrumbs li a){padding-inline:6px;margin-inline:-6px}
}
/* 9: narrow phone cards: "Cartons [1]" and "Select" each get their own line instead of breaking letter by letter. */
@media(max-width:700px){.studio-site .edition-cartons{flex-wrap:wrap;gap:6px}.studio-site .edition-cartons>label{flex:1 1 100%;min-height:44px;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap}.studio-site .edition-cartons>label input[type=number]{max-width:72px}.studio-site .edition-cartons .edition-select{justify-content:flex-start}.studio-site .edition-cartons .edition-select input{width:20px;height:20px;margin:0}}

/* ---- Release 2026-10-16-shop: customer features (plan E) ---- */
/* 55: install button in the footer; iPhone instructions dialog. */
.iv-install{font:inherit;min-height:44px;padding:8px 14px;border:1px solid var(--iv-gold);border-radius:999px;background:transparent;color:var(--iv-accent);cursor:pointer}
.iv-install-help{max-width:min(420px,calc(100vw - 32px));border:0;border-radius:var(--iv-radius-l);padding:24px;background:var(--iv-surface);color:var(--iv-ink);box-shadow:var(--iv-shadow-3)}
.iv-install-help::backdrop{background:#241c1480}.iv-install-help h2{font-size:20px;margin:0 0 10px}.iv-install-help p{margin:0 0 18px;line-height:1.8}
/* 56: microphone in the search box. */
.search-field{position:relative}
.iv-voice{flex:0 0 auto;display:inline-grid;place-items:center;width:44px;height:44px;margin-inline-start:4px;border:0;border-radius:50%;background:transparent;color:var(--iv-accent);cursor:pointer}
.iv-voice svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.iv-voice.is-listening{background:var(--iv-gold-soft);box-shadow:0 0 0 0 #c9a25366;animation:iv-listen 1.2s ease-out infinite}
@keyframes iv-listen{to{box-shadow:0 0 0 12px #c9a25300}}
@media(prefers-reduced-motion:reduce){.iv-voice.is-listening{animation:none;box-shadow:0 0 0 3px var(--iv-gold)}}
body.effects-paused .iv-voice.is-listening{animation:none;box-shadow:0 0 0 3px var(--iv-gold)}
/* 59: department and group shortcuts under the search box. */
.iv-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.iv-shortcut{font:inherit;font-size:13px;min-height:44px;padding:8px 14px;border:1px solid var(--iv-line);border-radius:999px;background:var(--iv-surface);color:var(--iv-ink);cursor:pointer}
.iv-shortcut:hover{border-color:var(--iv-gold)}
/* 57 and 66: newest arrivals and the continue card. */
.iv-newest{margin:56px auto 8px;max-width:1440px}
.iv-newest-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.iv-newest-head h3{margin:0;font-size:clamp(24px,3vw,34px)}.iv-newest-head>p{margin:0;color:var(--iv-muted)}
.iv-newest-list{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,180px);gap:14px;margin:0;padding:4px 2px 14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.iv-newest-list li{scroll-snap-align:start}
.iv-newest-item{display:flex;flex-direction:column;gap:8px;height:100%;padding:10px;border:1px solid var(--iv-line);border-radius:var(--iv-radius-m);background:var(--iv-surface);color:var(--iv-ink);text-decoration:none;box-shadow:var(--iv-shadow-1);transition:transform var(--iv-ui) var(--iv-ease),box-shadow var(--iv-ui) var(--iv-ease)}
.iv-newest-item img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px;background:#fff}
.iv-newest-item span{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(hover:hover){.iv-newest-item:hover{transform:translateY(-3px);box-shadow:var(--iv-shadow-2)}}
.iv-continue{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;border:1px solid var(--iv-gold);border-radius:var(--iv-radius-m);background:var(--iv-gold-soft)}
.iv-continue strong{font-size:13px}.iv-continue-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--iv-ink)}
.iv-continue-link img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#fff}
.iv-continue-hide{font:inherit;font-size:12px;min-height:44px;padding:4px 10px;border:0;background:transparent;color:var(--iv-muted);text-decoration:underline;cursor:pointer}
/* 64: letter bar when sorted by name. */
.iv-letters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.iv-letters button{font:inherit;min-width:44px;min-height:44px;border:1px solid var(--iv-line);border-radius:12px;background:var(--iv-surface);color:var(--iv-ink);cursor:pointer}
.iv-letters button:hover{border-color:var(--iv-gold);color:var(--iv-accent)}
.studio-site #catalogue-products .catalogue-product-card{scroll-margin-top:190px}
@media(max-width:900px){.studio-site #catalogue-products .catalogue-product-card{scroll-margin-top:216px}}
/* 67: large-photo view of the catalogue. */
.iv-photo-toggle[aria-pressed=true]{background:var(--iv-gold-soft);border-color:var(--iv-gold)}
#catalogue-products.iv-photo-view{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))!important}
#catalogue-products.iv-photo-view .catalogue-product-card :is(.product-description,.product-specs){display:none}
#catalogue-products.iv-photo-view .catalogue-product-card img{aspect-ratio:1;height:auto;max-height:none;object-fit:contain}
/* 62: track page progress as a connected step line. */
.request-progress{counter-reset:step;position:relative;gap:0!important}
.request-progress li{position:relative;counter-increment:step;border:0!important;background:none!important;padding:44px 8px 4px!important;text-align:center;min-width:110px!important}
.request-progress li::before{content:counter(step);position:absolute;top:0;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--iv-line);background:var(--iv-surface);color:var(--iv-muted);font-weight:700;z-index:1}
.request-progress li::after{content:'';position:absolute;top:15px;inset-inline-start:50%;width:100%;height:2px;background:var(--iv-line)}
.request-progress li:last-child::after{display:none}
.request-progress li:has(~li[aria-current=step])::before{content:'\2713';border-color:var(--iv-gold);background:var(--iv-gold);color:#fff}
.request-progress li:has(~li[aria-current=step])::after{background:var(--iv-gold)}
.request-progress li[aria-current=step]::before{border-color:var(--iv-accent);background:var(--iv-accent);color:#fff;box-shadow:0 0 0 5px var(--iv-gold-soft)}
.request-progress li[aria-current=step]{font-weight:700}
@media(max-width:640px){.request-progress li{text-align:start;padding:6px 0 18px!important;padding-inline:48px 0!important;min-width:0!important}.request-progress li::before{left:auto;inset-inline-start:0;transform:none}.request-progress li::after{top:34px;inset-inline-start:15px;width:2px;height:calc(100% - 28px)}}
/* 63: department headings in the basket. */
.basket-department{margin:18px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--iv-line);font-size:14px;color:var(--iv-accent);letter-spacing:0}
.basket-items>.basket-department:first-child{margin-top:4px}
/* 65: product names under the bottom previous/next links. */
.product-navigation-name{display:block;flex-basis:100%;margin-top:2px;font-size:12px;font-weight:400;color:var(--iv-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-navigation-step:has(.product-navigation-name){flex-wrap:wrap;text-align:center;line-height:1.35;min-width:0}
/* 61: other options of the same item (only when the owner has confirmed a group). */
.other-options{margin:22px 0 0;padding:16px 18px;border:1px solid var(--iv-line);border-radius:var(--iv-radius-m);background:var(--iv-surface)}
.other-options h2{font-size:16px;margin:0 0 10px}.other-options ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.other-options a{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 14px;border:1px solid var(--iv-line);border-radius:12px;color:var(--iv-ink);text-decoration:none}
.other-options a:hover{border-color:var(--iv-gold)}.other-options small{color:var(--iv-muted);font-size:12px}
/* 58: department pages open with their sub-groups as photo tiles, then group headings. */
.catalogue-subgroups{margin:18px 0 8px}.catalogue-subgroups ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0}
.catalogue-subgroups a{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:12px;border:1px solid var(--category-line,var(--iv-line));border-radius:var(--iv-radius-m);background:var(--iv-surface);color:var(--iv-ink);text-decoration:none;text-align:center;box-shadow:var(--iv-shadow-1)}
.catalogue-subgroups a:hover{border-color:var(--category-accent,var(--iv-gold))}.catalogue-subgroups img{width:96px;height:96px;object-fit:contain;border-radius:12px;background:#fff}
.catalogue-subgroups span{font-weight:700;line-height:1.4}.catalogue-subgroups small{color:var(--iv-muted)}
.catalogue-subgroup{margin-top:34px;scroll-margin-top:24px}.catalogue-subgroup>h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--category-line,var(--iv-line))}
/* 41: soft loading placeholders behind product photos on slow networks (photos are opaque, so they cover it). */
:is(.catalogue-product-card .product-open,.catalogue-product-link,.iv-newest-item,.product-gallery>a){background-color:var(--iv-soft);background-image:linear-gradient(100deg,transparent 30%,#ffffff8c 50%,transparent 70%);background-size:220% 100%;background-repeat:no-repeat;animation:iv-shimmer 1.6s linear infinite}
@keyframes iv-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){:is(.catalogue-product-card .product-open,.catalogue-product-link,.iv-newest-item,.product-gallery>a){animation:none;background-image:none}}
body.effects-paused :is(.catalogue-product-card .product-open,.catalogue-product-link,.iv-newest-item,.product-gallery>a),:is(.catalogue-product-card .product-open,.catalogue-product-link,.iv-newest-item,.product-gallery>a).iv-loaded{animation:none;background-image:none}
/* 60: share picture button on product pages. */
.share-card-button{font:inherit;min-height:44px;padding:8px 14px;border:1px solid var(--iv-gold);border-radius:999px;background:var(--iv-surface);color:var(--iv-accent);cursor:pointer}
.share-card-button:disabled{opacity:.6;cursor:progress}.share-card-status{margin:6px 0 0;font-size:13px;color:var(--iv-muted);min-height:1em}
/* 68: printable QR poster. */
.poster-tools{max-width:720px;margin:0 auto 18px;text-align:center}
.poster{max-width:720px;margin:0 auto;padding:44px 40px;text-align:center;background:#fffdf9;color:#241c14;border:1px solid #e3d6c1;border-radius:24px}
.poster-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:22px}.poster-mark{width:76px;height:76px}
.poster h1{margin:0;font-size:40px}.poster-head p{margin:4px 0 0;color:#6b5c48}
.poster-scan{font-size:26px;font-weight:800;margin:6px 0 14px}.poster-qr{display:block;width:min(420px,80%);margin:0 auto;border:10px solid #fff;outline:2px solid #c9a253;border-radius:8px}
.poster-url{font:700 22px 'DM Sans',sans-serif;color:#7f5a15;margin:14px 0 18px}.poster-cats{color:#4d4033;margin:0 0 10px}.poster-order{font-weight:700;margin:0 0 8px}
.poster-phones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font:600 20px 'DM Sans',sans-serif;margin:0 0 14px}.poster-other{color:#6b5c48;font-size:15px;margin:0}
@media print{@page{size:A4;margin:12mm}body.catalogue-shell>header,body.catalogue-shell>footer,.poster-tools{display:none!important}.poster{border:0;max-width:none;padding:0}body{background:#fff!important}}

/* Design system (plan items 19, 21-27; 17 Oct 2026): one scale each for corners, shadows, buttons, text and icons.
   ":not(#iv)" lifts a rule above the older layered stylesheets without !important (no element has id "iv"). */
:root{--iv-radius-xs:8px;--iv-radius-s:12px;--iv-radius-m:18px;--iv-radius-l:26px;--iv-radius-pill:999px;
 --iv-shadow-card:var(--iv-shadow-1);--iv-shadow-raised:var(--iv-shadow-2);--iv-shadow-dialog:var(--iv-shadow-3);--iv-floor:0 12px 12px -12px #241c1470;
 --iv-text-xs:12px;--iv-text-s:13px;--iv-text-m:14px;--iv-text-body:16px;--iv-text-l:18px;
 --iv-icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
 --iv-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
 --iv-icon-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.3S3.5 15.4 3.5 9.2A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 8.5 2.6c0 6.2-8.5 11.1-8.5 11.1z'/%3E%3C/svg%3E");
 --iv-icon-heart-full:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.3S3.5 15.4 3.5 9.2A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 8.5 2.6c0 6.2-8.5 11.1-8.5 11.1z'/%3E%3C/svg%3E");
 --iv-icon-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a7 7 0 0 0 10.7 10.7z'/%3E%3C/svg%3E");
 --iv-icon-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
 --iv-icon-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.3 7.2 7.2 2.3-7.2 2.3-2.3 7.2-2.3-7.2L2.5 12l7.2-2.3z'/%3E%3C/svg%3E");
 --iv-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E")}
html.theme-dark{--iv-shadow-1:0 1px 2px #0006,0 8px 20px -12px #000c;--iv-shadow-2:0 2px 6px #0007,0 20px 44px -20px #000;--iv-shadow-3:0 34px 90px -28px #000;--iv-floor:0 12px 12px -12px #000}

/* 23: corners. xs tags, s buttons and fields, m cards, l panels and dialogs, pill and circle controls. */
:is(.product-category-label,.availability-tag,.carton-contents,.new-badge,.catalogue-download):not(#iv){border-radius:var(--iv-radius-xs)}
:is(.button,.product-add,.product-quick,.product-compare,.assistant-launcher,.catalogue-photo-selection,.filter-reset,.studio-selector,.rj-ribbon-item,.search-field):not(#iv){border-radius:var(--iv-radius-s)}
:is(.catalogue-product-card,.category-card,.iv-continue,.iv-newest-item,.reveal,.rj-cat-photo,.trust-policy,.about-monogram,.studio-selectors,.catalogue-subgroups a):not(#iv){border-radius:var(--iv-radius-m)}
:is(.contact-panel,.edition-spotlight,.customer-assistant,.studio-dialog,.photo-selection-dialog,.workbench-dialog,#product-dialog,.basket-dialog):not(#iv){border-radius:var(--iv-radius-l)}
@media(max-width:760px){:is(#product-dialog,.basket-dialog):not(#iv){border-radius:var(--iv-radius-l) var(--iv-radius-l) 0 0}}
:is(.language-switch,.logo-replay,.nav-basket,.scene-motion-toggle,.studio-action,.studio-view,.rj-theme-toggle,.rj-ribbon-pause,.filter-chip,.collection-chip):not(#iv){border-radius:var(--iv-radius-pill)}

/* 22: shadows. Card for resting tiles, raised for hover, sticky bars and floating controls, dialog for dialogs. */
:is(.rj-ribbon-item,.iv-newest-item,.reveal,.catalogue-subgroups a):not(#iv){box-shadow:var(--iv-shadow-card)}
:is(.rj-ribbon-item,.iv-newest-item,.catalogue-product-card,.category-card):not(#iv):is(:hover,:focus-visible){box-shadow:var(--iv-shadow-raised)}
:is(.site-header.scrolled,.catalogue-toolbar[data-condensed=true],.studio-selectors,.studio-arrow,.rj-cat-photo,.search-suggestions,.basket-feedback,.iv-fly):not(#iv){box-shadow:var(--iv-shadow-raised)}
:is(dialog,#product-dialog,.basket-dialog,.customer-assistant,.contact-panel,.iv-install-help):not(#iv){box-shadow:var(--iv-shadow-dialog)}

/* 21: three button looks. Primary is filled (brown on light, gold on dark bands), secondary has a line, quiet is text
   only. The catalogue toolbar toggles had no storefront style and showed the browser's grey default. */
.catalogue-toolbar .button-quiet:not(#iv){background:var(--iv-surface);color:var(--iv-ink);border:1px solid var(--iv-line);font-weight:600;min-height:44px}
.catalogue-toolbar .button-quiet:not(#iv):hover{border-color:var(--iv-accent)}
.catalogue-toolbar .button-quiet:not(#iv)[aria-pressed=true]{background:var(--iv-gold-soft);border-color:var(--iv-gold)}
:is(.button-primary,.button-gold,.product-add):not(#iv){font-weight:700}

/* 24: type scale 12/13/14/16/18 for interface text; nothing below 12 px. Arabic body text 1 px larger on phones. */
:is(.product-category-label,.language-switch,.track-request,.availability-tag,.new-badge):not(#iv){font-size:var(--iv-text-xs)}
.edition-facts:not(#iv){font-size:var(--iv-text-l)}
@media(max-width:640px){html[lang=ar] body{font-size:17px}}

/* 26: product photos sit on white with a soft floor shadow on cards, ribbon, newest row and product pages. */
:is(.product-open,.rj-ribbon-item,.iv-newest-item) img:not(#iv){background:#fff;border-radius:var(--iv-radius-s);box-shadow:var(--iv-floor)}
.product-gallery>a:not(#iv){background:#fff;box-shadow:var(--iv-shadow-card)}

/* 27: selected states carry a check mark as well as colour. */
:is(.category-card[aria-pressed=true] .category-card-count,.collection-chip[aria-pressed=true])::before{content:"";display:inline-block;width:.9em;height:.9em;margin-inline-end:5px;vertical-align:-.08em;background:currentColor;-webkit-mask:var(--iv-icon-check) center/contain no-repeat;mask:var(--iv-icon-check) center/contain no-repeat}
:is(.gallery-buttons button,.detail-thumbnail)[aria-pressed=true]{outline:2px solid currentColor;outline-offset:2px}

/* 19: department colour on the department filter chip and the basket's department headings. */
.filter-chip-department:not(#iv){border-color:var(--category-line);background:var(--category-soft);color:var(--category-ink)}
html.theme-dark .filter-chip-department:not(#iv){background:color-mix(in srgb,var(--category-accent) 22%,#1d1915);border-color:color-mix(in srgb,var(--category-accent) 55%,#1d1915);color:color-mix(in srgb,var(--category-accent) 35%,#fff)}
.basket-department[style]:not(#iv){color:var(--category-ink);border-bottom:2px solid var(--category-line)}
html.theme-dark .basket-department[style]:not(#iv){color:color-mix(in srgb,var(--category-accent) 35%,#fff);border-bottom-color:color-mix(in srgb,var(--category-accent) 55%,#1d1915)}

/* 25: one SVG icon set instead of text symbols. The symbol stays in the page (same size and spacing) but is not
   painted; the icon is drawn in the same colour. Windows high-contrast mode keeps the plain symbols. */
@media not all and (forced-colors:active){
 :is(.studio-arrow,.category-card-arrow,.rj-ribbon-all>span[aria-hidden],.search-field>span[aria-hidden],.product-favorite,.rj-theme-toggle>[aria-hidden],.category-card-placeholder){-webkit-text-fill-color:transparent}
 :is(.rj-ribbon-all>span[aria-hidden],.search-field>span[aria-hidden],.rj-theme-toggle>[aria-hidden]){position:relative}
 :is(.studio-arrow,.category-card-arrow,.rj-ribbon-all>span[aria-hidden],.search-field>span[aria-hidden],.product-favorite,.rj-theme-toggle>[aria-hidden],.category-card-placeholder)::before{content:"";position:absolute;inset:0;margin:auto;width:var(--iv-icon-size,1em);height:var(--iv-icon-size,1em);background:currentColor;-webkit-mask:var(--iv-icon) center/contain no-repeat;mask:var(--iv-icon) center/contain no-repeat;pointer-events:none}
 .studio-arrow{--iv-icon:var(--iv-icon-arrow);--iv-icon-size:20px}
 .category-card-arrow{--iv-icon:var(--iv-icon-arrow);--iv-icon-size:18px}
 .rj-ribbon-all>span[aria-hidden]{--iv-icon:var(--iv-icon-arrow);--iv-icon-size:15px}
 .search-field>span[aria-hidden]{--iv-icon:var(--iv-icon-search);--iv-icon-size:19px}
 .product-favorite{--iv-icon:var(--iv-icon-heart);--iv-icon-size:22px}
 .product-favorite[aria-pressed=true]{--iv-icon:var(--iv-icon-heart-full)}
 .rj-theme-toggle>[aria-hidden]{--iv-icon:var(--iv-icon-moon);--iv-icon-size:15px}
 .rj-theme-toggle[aria-pressed=true]>[aria-hidden]{--iv-icon:var(--iv-icon-sun)}
 .category-card-placeholder{--iv-icon:var(--iv-icon-spark);--iv-icon-size:56px}
 /* Arrows point forward in the reading direction: right in English, left in Arabic; "previous" points back. */
 html[dir=rtl] :is(.studio-next,.category-card-arrow,.rj-ribbon-all>span[aria-hidden])::before,html:not([dir=rtl]) .studio-previous::before{transform:scaleX(-1)}
}