/** * Mimus Showroom — room page, archive, and the product-page strip. * * Light palette only. There is no dark theme and none is planned, so every block * sets both background and color explicitly: a browser or extension forcing a * dark background must not be able to produce unreadable text. * * Class names are mimus-sr-*, never ux-*. Flatsome installs delegated click * handlers on its own class names and re-arms them on every ajaxComplete, so * borrowing one hands our clicks to the theme. * * Nothing here sets text-transform on a name. CSS uppercases i to I, not İ, so a * customer would be shown a name that is not the one being made. */ .mimus-sr, .mimus-sr-archive, .mimus-sr-backlink { --mimus-sr-ink: #2c2a28; --mimus-sr-muted: #6b6560; --mimus-sr-line: #e6e1db; --mimus-sr-paper: #ffffff; --mimus-sr-shade: #faf8f5; --mimus-sr-accent: var(--fs-color-primary, #7a6a58); --mimus-sr-accent-ink: #ffffff; --mimus-sr-warn: #a3341f; --mimus-sr-warn-bg: #fbeee9; --mimus-sr-ok: #3f6b4f; --mimus-sr-ok-bg: #edf4ef; --mimus-sr-radius: 12px; --mimus-sr-shadow: 0 1px 2px rgba(44, 42, 40, 0.06), 0 8px 24px rgba(44, 42, 40, 0.08); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } /* * The set page's own measure and side gutter. Its template opens no theme * container, and on a template Flatsome does not wrap, the room would otherwise run * edge to edge. Inside a container that already pads, this adds a little; it never * removes. * * Not the set list: since 2.24.2 it sits in Flatsome's category row and column, * which give it the header's width. Until then this rule covered it too, and * because the list's also carried .mimus-sr-archive, the whole page became * a 1240px white box on Flatsome's grey background. No body class may repeat a * block's name (Frontend\Templates::body_class()). */ .mimus-sr { box-sizing: border-box; max-width: var(--mimus-sr-max, 1240px); margin-inline: auto; padding-inline: 16px; } /* Flatsome gives many elements a display that beats the UA [hidden] rule. */ .mimus-sr [hidden], .mimus-sr-archive [hidden] { display: none !important; } .mimus-sr :focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } /* ---------------------------------------------------------------- layout */ /* * One column on a phone, in DOM order. Two columns from 900px, by grid area, so * the order on screen is still the DOM order read row by row. */ .mimus-sr__layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "stage" "items" "summary"; gap: 1.5rem; padding-block: 1rem 2rem; } .mimus-sr__header { grid-area: header; } .mimus-sr__stage { grid-area: stage; min-width: 0; } .mimus-sr__items { grid-area: items; min-width: 0; } .mimus-sr__summary { grid-area: summary; } @media (min-width: 900px) { .mimus-sr__layout { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "header header" "stage summary" "items summary"; column-gap: 2.5rem; align-items: start; } /* The column stretches down the whole items row; the card sticks inside it. */ .mimus-sr__summary { align-self: stretch; } .mimus-sr-summary { position: sticky; top: calc(var(--flatsome-scroll-padding-top, 0px) + 1rem); } } /* ---------------------------------------------------------------- header */ .mimus-sr__header .woocommerce-breadcrumb { margin: 0 0 0.5rem; color: var(--mimus-sr-muted); font-size: 0.85rem; } .mimus-sr__title { margin: 0 0 0.35rem; color: var(--mimus-sr-ink); line-height: 1.2; } .mimus-sr__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; margin: 0 0 0.5rem; color: var(--mimus-sr-muted); } .mimus-sr__meta strong { color: var(--mimus-sr-ink); font-size: 1.15rem; } .mimus-sr__excerpt { max-width: 70ch; color: var(--mimus-sr-muted); } .mimus-sr__excerpt p:last-child { margin-bottom: 0; } .mimus-sr__unavailable { margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--mimus-sr-warn); border-radius: 0 6px 6px 0; background: var(--mimus-sr-warn-bg); color: var(--mimus-sr-ink); } .mimus-sr-section-title { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--mimus-sr-ink); font-size: 1.1rem; line-height: 1.3; } /* A plain text button. Every property Flatsome sets on a bare button is put back. */ .mimus-sr-link { min-height: 0; margin: 0; padding: 0.35rem 0; border: 0; background: none; color: var(--mimus-sr-accent); font-size: 0.9rem; font-weight: 600; letter-spacing: normal; line-height: 1.3; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .mimus-sr-link:hover { background: none; color: var(--mimus-sr-ink); } .mimus-sr-link--quiet { color: var(--mimus-sr-muted); font-weight: normal; } /* ----------------------------------------------------------------- scene */ .mimus-sr-scene { position: relative; background: transparent; color: var(--mimus-sr-ink); } .mimus-sr-scene__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); /* cqw below is a percentage of this box's width: names and shadows scale with the room. */ container-type: inline-size; /* A horizontal swipe is ours; vertical scrolling and pinch stay the browser's. */ touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; } .mimus-sr-scene__wall, .mimus-sr .mimus-sr-scene__floor, .mimus-sr .mimus-sr-scene__overlay, .mimus-sr-scene__night, .mimus-sr-scene__pieces { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } /* Layer 0 — the whole wall-colour mechanism. */ .mimus-sr-scene__wall { background: var(--mimus-sr-wall, #f3e8dc); transition: background 160ms ease; } .mimus-sr .mimus-sr-scene__floor, .mimus-sr .mimus-sr-scene__overlay { object-fit: cover; pointer-events: none; } /* A flat fill reads as a paint chip; a light/shadow map in multiply makes it a room. */ .mimus-sr .mimus-sr-scene__overlay { z-index: 3; mix-blend-mode: multiply; } /* One background at a time. display:none rather than opacity: a hidden lazy image is not fetched. The selector outranks Flatsome's img { display }. */ .mimus-sr-scene [data-mimus-sr-scene-layer] { display: none; } .mimus-sr-scene [data-mimus-sr-scene-layer].is-active { display: block; } .mimus-sr-scene.is-switched [data-mimus-sr-scene-layer].is-active { animation: mimus-sr-fade 220ms ease-out; } @keyframes mimus-sr-fade { from { opacity: 0; } to { opacity: 1; } } /* The dark the lamps glow against. Under the products, over the room. */ .mimus-sr-scene__night { z-index: 1; background: rgba(22, 27, 48, 0.62); opacity: 0; pointer-events: none; transition: opacity 400ms ease; } .mimus-sr-scene.is-night .mimus-sr-scene__night { opacity: 1; } .mimus-sr-scene__pieces { z-index: 2; } /* ---------------------------------------------------------------- pieces */ /* * all: unset takes back every rule Flatsome puts on a button — margin, min-height, * padding, background, uppercase — in one line, and nothing of the theme's can * leak into a piece later. */ .mimus-sr-piece { all: unset; position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1 / var(--ratio); box-sizing: border-box; transform: translate(-50%, -100%); /* The light comes from the left in every background, so shadows fall right. */ filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.18)); filter: drop-shadow(0.2cqw 0.35cqw 0.35cqw rgba(0, 0, 0, 0.2)); /* A tap, never a drag: the frame's pan-y pinch-zoom applies here too. */ cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter 400ms ease; } .mimus-sr .mimus-sr-piece__image { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } .mimus-sr-piece:focus-visible, .mimus-sr-piece.is-selected { outline: 2px dashed var(--mimus-sr-accent); outline-offset: 4px; } .mimus-sr-piece.is-related { outline: 2px solid var(--mimus-sr-accent); outline-offset: 4px; } .mimus-sr-piece.is-removed { display: none; } .mimus-sr-piece.is-loading { opacity: 0.45; } /* The customer's name on the product, in its box. Sized by showroom.js. */ .mimus-sr-piece__name { position: absolute; display: flex; align-items: center; justify-content: center; overflow: visible; font-size: var(--fs, 2cqw); font-weight: 600; letter-spacing: normal; line-height: 1.2; text-transform: none; white-space: nowrap; pointer-events: none; } .mimus-sr-piece__name:empty { display: none; } .mimus-sr-piece__name.is-align-left { justify-content: flex-start; } .mimus-sr-piece__name.is-align-right { justify-content: flex-end; } .mimus-sr-piece__name.is-serif { font-family: Georgia, "Times New Roman", serif; } .mimus-sr-piece__name.is-script { font-family: "Brush Script MT", "Segoe Script", "Apple Chancery", cursive; font-weight: normal; } /* Lamps. The glow follows the cutout's outline because drop-shadow does. */ .mimus-sr-scene.is-night .mimus-sr-piece { filter: brightness(0.62); } .mimus-sr-scene.is-night .mimus-sr-piece.is-lit { filter: brightness(1.05) drop-shadow(0 0 0.6cqw var(--glow, #ffe3a3)) drop-shadow(0 0 2.4cqw var(--glow, #ffe3a3)) drop-shadow(0 0 6cqw var(--glow, #ffe3a3)); } /* Move mode: the product being moved, and a frame round the scene saying a tap on it is a destination. There is no drag on this page; see "moving a piece" in showroom.js. */ .mimus-sr-piece.is-moving { outline: 2px dashed var(--mimus-sr-accent); outline-offset: 4px; } .mimus-sr-scene.is-placing .mimus-sr-scene__frame::after { content: ""; position: absolute; inset: 0; z-index: 45; border: 2px solid var(--mimus-sr-accent); border-radius: inherit; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .mimus-sr-scene.is-placing .mimus-sr-scene__frame, .mimus-sr-scene.is-placing .mimus-sr-piece:not(.is-moving) { cursor: crosshair; } } /* ------------------------------------------------------- background arrows */ .mimus-sr-scene__step { all: unset; position: absolute; top: 50%; z-index: 40; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--mimus-sr-line); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--mimus-sr-ink); transform: translateY(-50%); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); cursor: pointer; } .mimus-sr-scene__step:hover { background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-scene__step--prev { left: 0.6rem; } .mimus-sr-scene__step--next { right: 0.6rem; } .mimus-sr-scene.is-loading-scene .mimus-sr-scene__step { cursor: progress; } .mimus-sr-scene__count { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 40; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--mimus-sr-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ info card */ .mimus-sr-card { position: absolute; z-index: 60; width: min(17rem, calc(100% - 1.2rem)); padding: 0.8rem 2.2rem 0.8rem 0.9rem; border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); box-shadow: var(--mimus-sr-shadow); user-select: text; } .mimus-sr-card__title { margin: 0; font-weight: 600; line-height: 1.3; } .mimus-sr-card__meta { margin: 0.15rem 0 0.5rem; color: var(--mimus-sr-muted); font-size: 0.9rem; } .mimus-sr-card__actions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; } .mimus-sr-card__close { all: unset; position: absolute; top: 0.45rem; right: 0.45rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--mimus-sr-muted); cursor: pointer; } /* ------------------------------------------------------------ move bar */ /* * Under the scene, never over it: on a 360 px phone the scene is barely 270 px tall. * Targets are 44 px. touch-action: manipulation keeps a fast double tap on an arrow * from zooming the page on iOS; the callout and selection rules keep a held arrow * from opening the magnifier or selecting the label. */ .mimus-sr-mover { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; padding: 0.6rem 0.75rem; box-sizing: border-box; border: 1px solid var(--mimus-sr-line); border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); box-shadow: var(--mimus-sr-shadow); scroll-margin-top: calc(var(--flatsome-scroll-padding-top, 0px) + 0.75rem); scroll-margin-bottom: 0.75rem; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .mimus-sr-mover[hidden] { display: none; } .mimus-sr-mover__text { margin: 0; background: transparent; color: var(--mimus-sr-ink); font-size: 0.9rem; line-height: 1.35; } .mimus-sr-mover__name { font-weight: 600; overflow-wrap: anywhere; } .mimus-sr-mover__hint { display: block; color: var(--mimus-sr-muted); font-size: 0.85rem; } .mimus-sr-mover__pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; } .mimus-sr-mover__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .mimus-sr-mover__step, .mimus-sr-mover__button { all: unset; display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 1rem; box-sizing: border-box; border: 1px solid var(--mimus-sr-line); border-radius: 10px; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.95rem; font-weight: 600; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mimus-sr-mover__step { padding: 0; } .mimus-sr-mover__step svg { pointer-events: none; } .mimus-sr-mover__step:hover, .mimus-sr-mover__button:hover { border-color: var(--mimus-sr-accent); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-mover__step:active, .mimus-sr-mover__button:active { background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); } .mimus-sr-mover__step:focus-visible, .mimus-sr-mover__button:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } .mimus-sr-mover__button--done, .mimus-sr-mover__button--done:hover, .mimus-sr-mover__button--done:active { border-color: var(--mimus-sr-accent); background: var(--mimus-sr-accent); color: var(--mimus-sr-accent-ink); } @media (min-width: 600px) { .mimus-sr-mover { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; } .mimus-sr-mover__text { flex: 1 1 14rem; } .mimus-sr-mover__pad { grid-template-columns: repeat(4, 2.75rem); } .mimus-sr-mover__actions { display: flex; } } /* --------------------------------------------------------------- toolbar */ .mimus-sr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.75rem; background: transparent; color: var(--mimus-sr-ink); } .mimus-sr-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; } .mimus-sr-toolbar__label { color: var(--mimus-sr-muted); font-size: 0.85rem; } .mimus-sr-toolbar__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } .mimus-sr-chips { display: flex; gap: 0.4rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .mimus-sr-chip, .mimus-sr-action { all: unset; display: inline-flex; align-items: center; gap: 0.35rem; flex: none; min-height: 2.25rem; padding: 0 0.85rem; box-sizing: border-box; border: 1px solid var(--mimus-sr-line); border-radius: 999px; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.875rem; white-space: nowrap; cursor: pointer; } .mimus-sr-chip:hover, .mimus-sr-action:hover { border-color: var(--mimus-sr-accent); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-chip[aria-pressed="true"], .mimus-sr-action[aria-pressed="true"] { border-color: var(--mimus-sr-accent); background: var(--mimus-sr-accent); color: var(--mimus-sr-accent-ink); } .mimus-sr-chip:focus-visible, .mimus-sr-action:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } .mimus-sr-wall__swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; } /* 32px to see, 40px to hit. */ .mimus-sr-wall__swatch, .mimus-sr-wall__custom { all: unset; position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; box-sizing: border-box; cursor: pointer; } .mimus-sr-wall__swatch::before, .mimus-sr-wall__custom::before { content: ""; width: 2rem; height: 2rem; box-sizing: border-box; border: 1px solid rgba(44, 42, 40, 0.18); border-radius: 50%; background: var(--swatch, #ffffff); } .mimus-sr-wall__swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--mimus-sr-paper), 0 0 0 4px var(--mimus-sr-ink); } .mimus-sr-wall__swatch:focus-visible, .mimus-sr-wall__custom:focus-within { outline: 2px solid var(--mimus-sr-accent); outline-offset: -2px; border-radius: 50%; } .mimus-sr-wall__custom::before { background: conic-gradient(#f6c9c9, #f6e7b8, #cfe8c6, #c6dff0, #d9cdf0, #f6c9c9); } .mimus-sr-wall__custom.is-active::before { box-shadow: 0 0 0 2px var(--mimus-sr-paper), 0 0 0 4px var(--mimus-sr-ink); } .mimus-sr-wall__custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } @media (max-width: 600px) { .mimus-sr-scene__step { width: 2.25rem; height: 2.25rem; } .mimus-sr-scene__step--prev { left: 0.35rem; } .mimus-sr-scene__step--next { right: 0.35rem; } .mimus-sr-toolbar__actions { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .mimus-sr-scene.is-switched [data-mimus-sr-scene-layer].is-active { animation: none; } .mimus-sr-scene__wall, .mimus-sr-scene__night, .mimus-sr-piece { transition: none; } } /* ---------------------------------------- fixed set: photos, cover, strip */ /* * The fixed set (Frontend\Room_View) prints no scene: the stage holds the set's * photos (2.24.0) or, without them, its cover when it has one, and under either * the strip of the set's products. The grid areas are the scene's, so nothing * else on the page moves. */ .mimus-sr--set .mimus-sr__stage { display: grid; gap: 1rem; } .mimus-sr-cover { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); } .mimus-sr .mimus-sr-cover__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* * The set's photos (parts/gallery.php): one square photo at a time in a native * scroller, snapped a photo at a time and never skipping one, and a row of * thumbnails under it. 600px wide at most: the photos are 750 × 750, and a * larger square would push the products below the fold. */ .mimus-sr-gallery { display: grid; gap: 0.6rem; width: 100%; max-width: 600px; min-width: 0; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-gallery__stage { position: relative; min-width: 0; } .mimus-sr .mimus-sr-gallery__list { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; aspect-ratio: 1; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); } .mimus-sr-gallery__list::-webkit-scrollbar { display: none; } .mimus-sr .mimus-sr-gallery__slide { min-width: 0; margin: 0; list-style: none; scroll-snap-align: start; scroll-snap-stop: always; } .mimus-sr .mimus-sr-gallery__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .mimus-sr-gallery__thumbs { display: flex; gap: 0.5rem; /* Room for a thumbnail's focus ring, which the scroller would otherwise clip. */ padding: 0.2rem; overflow-x: auto; scrollbar-width: none; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-gallery__thumbs::-webkit-scrollbar { display: none; } .mimus-sr-gallery__thumb { all: unset; box-sizing: border-box; flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); opacity: 0.7; cursor: pointer; } .mimus-sr-gallery__thumb:hover, .mimus-sr-gallery__thumb[aria-current="true"] { opacity: 1; } .mimus-sr-gallery__thumb[aria-current="true"] { border-color: var(--mimus-sr-accent); } .mimus-sr-gallery__thumb:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } .mimus-sr .mimus-sr-gallery__thumb-image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .mimus-sr-carousel { position: relative; min-width: 0; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } /* * One scrolling row, snapped a slide at a time. On a phone a slide is two thirds * of the width, so the edge of the next one says the row scrolls; from 900px about * three and a third fit. overscroll-behavior-x keeps a flick at the end from being * handed to the page. The scrollbar is hidden because a mouse has the arrows and * a finger does not need one. */ .mimus-sr .mimus-sr-carousel__list { display: grid; grid-auto-flow: column; grid-auto-columns: 66%; gap: 0.75rem; margin: 0; /* Room for a slide's focus ring, which the scroller would otherwise clip. */ padding: 0.3rem 0.3rem 0.75rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0.3rem; scrollbar-width: none; } .mimus-sr-carousel__list::-webkit-scrollbar { display: none; } @media (min-width: 600px) { .mimus-sr .mimus-sr-carousel__list { grid-auto-columns: calc((100% - 2 * 0.75rem) / 2.4); } } @media (min-width: 900px) { .mimus-sr .mimus-sr-carousel__list { grid-auto-columns: calc((100% - 3 * 0.75rem) / 3.3); } } .mimus-sr .mimus-sr-slide { min-width: 0; margin: 0; list-style: none; scroll-snap-align: start; } .mimus-sr-slide.is-loading { opacity: 0.55; pointer-events: none; } .mimus-sr-slide__open { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.35rem; width: 100%; height: 100%; padding: 0.5rem; border: 1px solid var(--mimus-sr-line); border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.9rem; line-height: 1.3; text-align: start; cursor: pointer; } .mimus-sr-slide__open:hover { border-color: var(--mimus-sr-accent); } .mimus-sr-slide__open:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } /* * One square frame for both pictures: a catalogue photo (750 × 750) fills it, and * a cutout — from a rocket at 0.48 to a name lamp at 2.41 — stands in it whole. */ .mimus-sr-slide__media { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 8px; background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); } .mimus-sr .mimus-sr-slide__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .mimus-sr .mimus-sr-slide__media.is-cutout .mimus-sr-slide__image { box-sizing: border-box; padding: 8%; object-fit: contain; } .mimus-sr-slide__name { display: -webkit-box; overflow: hidden; font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mimus-sr-slide__price { color: var(--mimus-sr-muted); font-variant-numeric: tabular-nums; } .mimus-sr-slide .mimus-sr-badge { align-self: flex-start; font-size: 0.8rem; } .mimus-sr-carousel__step, .mimus-sr-gallery__step { all: unset; position: absolute; top: 38%; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--mimus-sr-line); border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--mimus-sr-ink); transform: translateY(-50%); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); cursor: pointer; } .mimus-sr-carousel__step:hover, .mimus-sr-gallery__step:hover { background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-carousel__step:focus-visible, .mimus-sr-gallery__step:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } .mimus-sr-carousel__step--prev { left: 0.25rem; } .mimus-sr-carousel__step--next { right: 0.25rem; } /* Over the middle of the photo, inside its edges. */ .mimus-sr-gallery__step { top: 50%; } .mimus-sr-gallery__step--prev { left: 0.6rem; } .mimus-sr-gallery__step--next { right: 0.6rem; } .mimus-sr-carousel__step[aria-disabled="true"], .mimus-sr-gallery__step[aria-disabled="true"] { opacity: 0.35; cursor: default; } /* The arrows are for a mouse; a finger swipes. */ @media (hover: none), (pointer: coarse) { .mimus-sr-carousel__step, .mimus-sr-gallery__step { display: none; } } /* --------------------------------------------------------------- panels */ .mimus-sr-summary { padding: 1.1rem 1.2rem; border: 1px solid var(--mimus-sr-line); border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); } /* ----------------------------------------------------------------- items */ .mimus-sr__items-head { margin-bottom: 0.75rem; } /* * minmax( 0, 1fr ) and not the implicit `auto` track: a grid item's automatic * minimum size is its min-content width, and .mimus-sr-item carries no * min-width: 0, so one wide descendant inside a row would widen the row past the * phone — the same class of blow-out Flatsome's form.cart has on the product * page, and Flatsome's html { overflow-x: hidden } clips it rather than scrolling * it. Since configurator 1.33.0 a closed palette inside these rows is a sideways * scroller; it carries contain: inline-size, but containment is the newer half of * that defence and the configurator's own note says to keep both lines. */ .mimus-sr__rows { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 0.75rem; } .mimus-sr__extras { margin-top: 1.25rem; } .mimus-sr__extras-title { margin: 0 0 0.6rem; color: var(--mimus-sr-ink); font-size: 1rem; } .mimus-sr-item { padding: 0.8rem; border: 1px solid var(--mimus-sr-line); border-radius: var(--mimus-sr-radius); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease; } .mimus-sr-item.is-highlighted { border-color: var(--mimus-sr-accent); background: var(--mimus-sr-shade); } .mimus-sr-item--invalid { border-color: var(--mimus-sr-warn); } .mimus-sr-item.is-loading { opacity: 0.55; pointer-events: none; } /* A removed row stays legible and in place — it can come straight back. */ .mimus-sr-item[data-mimus-sr-selected="0"] { background: var(--mimus-sr-shade); } .mimus-sr-item[data-mimus-sr-selected="0"] .mimus-sr-item__thumb, .mimus-sr-item[data-mimus-sr-selected="0"] .mimus-sr-item__meta { opacity: 0.5; } .mimus-sr-item__head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb meta actions"; align-items: center; gap: 0.75rem; } .mimus-sr .mimus-sr-item__thumb { grid-area: thumb; width: 64px; height: 64px; border-radius: 8px; background: var(--mimus-sr-shade); object-fit: cover; } /* * A cutout is cropped tight to the product's outline and is transparent, so * `cover` would cut a tall lamp off at both ends. `contain` plus a little inset * makes the row thumbnail the small version of what stands on the scene. */ .mimus-sr .mimus-sr-item__thumb.is-cutout { box-sizing: border-box; padding: 4px; object-fit: contain; } .mimus-sr-item__meta { grid-area: meta; min-width: 0; } .mimus-sr-item__actions { grid-area: actions; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem 0.75rem; } .mimus-sr-item__info { display: inline-flex; align-items: center; gap: 0.25rem; } .mimus-sr-item__info-icon { flex: none; } @media (max-width: 480px) { .mimus-sr-item__head { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "thumb meta" "actions actions"; } .mimus-sr .mimus-sr-item__thumb { width: 56px; height: 56px; } .mimus-sr-item__actions { flex-direction: row; /* Three controls since 2.17.0: on a 360px phone the third one may have to drop. */ flex-wrap: wrap; justify-content: space-between; } } .mimus-sr-item__title { margin: 0; font-size: 1rem; line-height: 1.3; } .mimus-sr-item__title a { color: var(--mimus-sr-ink); text-decoration: none; } .mimus-sr-item__title a:hover { color: var(--mimus-sr-accent); } .mimus-sr-item__price, .mimus-sr-item__note { margin: 0.15rem 0 0; color: var(--mimus-sr-muted); font-size: 0.9rem; } .mimus-sr-item__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin: 0.3rem 0 0; font-size: 0.8rem; } .mimus-sr-item__values { overflow: hidden; color: var(--mimus-sr-muted); text-overflow: ellipsis; white-space: nowrap; } .mimus-sr-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-weight: 600; } .mimus-sr-badge:empty { display: none; } .mimus-sr-badge.is-ready { background: var(--mimus-sr-ok-bg); color: var(--mimus-sr-ok); } .mimus-sr-badge.is-needed { background: var(--mimus-sr-warn-bg); color: var(--mimus-sr-warn); } /* * The room campaign's pills: "Hediye" on a gift row and in the summary, and * "%10 indirim" / "Hediyeli" on a card. Literal fallbacks, because a card also * renders inside .mimus-sr-archive and .mimus-sr-backlink, and the cart has no * token scope at all. */ .mimus-sr-offer { display: inline-flex; align-items: center; margin: 0; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.5; } .mimus-sr-offer--gift { background: var(--mimus-sr-ok-bg, #edf4ef); color: var(--mimus-sr-ok, #3f6b4f); } .mimus-sr-offer--discount { background: var(--mimus-sr-accent, #7a6a58); color: var(--mimus-sr-accent-ink, #ffffff); } /* A gift row: a quiet green edge, so the free product reads as the room's gift. */ .mimus-sr-item.is-gift { border-left: 3px solid var(--mimus-sr-ok, #3f6b4f); } /* The page took the gift out because the rule stopped holding. */ .mimus-sr-item__gift-note { color: var(--mimus-sr-ok, #3f6b4f); } .mimus-sr-link:disabled, .mimus-sr-link:disabled:hover { color: var(--mimus-sr-muted, #6b6560); text-decoration: none; cursor: not-allowed; } .mimus-sr-item__pick { margin-top: 0.6rem; } .mimus-sr-segment { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; } .mimus-sr-segment__option { all: unset; display: inline-flex; flex-direction: column; min-width: 7rem; padding: 0.4rem 0.8rem; box-sizing: border-box; border: 1px solid var(--mimus-sr-line); border-radius: 10px; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.875rem; cursor: pointer; } .mimus-sr-segment__option[aria-pressed="true"] { border-color: var(--mimus-sr-accent); box-shadow: inset 0 0 0 1px var(--mimus-sr-accent); } .mimus-sr-segment__option:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } .mimus-sr-segment__price { color: var(--mimus-sr-muted); font-size: 0.8rem; } .mimus-sr-item__form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mimus-sr-line); } /* --------------------------------------------------------------- summary */ .mimus-sr-summary__totals { margin: 0.75rem 0 1rem; } .mimus-sr-summary__row { display: flex; justify-content: space-between; gap: 1rem; margin: 0.25rem 0 0; color: var(--mimus-sr-muted); } .mimus-sr-summary__amount { color: var(--mimus-sr-ink); font-size: 1.35rem; font-weight: 600; } .mimus-sr-summary__discount { color: var(--mimus-sr-accent); } .mimus-sr-summary__gift { align-items: center; gap: 0.6rem; color: var(--mimus-sr-ink); } .mimus-sr-summary__gift [data-mimus-sr-gift-names] { text-align: right; } .mimus-sr-summary__total { padding-top: 0.4rem; border-top: 1px solid var(--mimus-sr-line); color: var(--mimus-sr-ink); } .mimus-sr-summary__fineprint { margin: 0.35rem 0 0; color: var(--mimus-sr-muted); font-size: 0.8rem; } .mimus-sr-summary__error, .mimus-sr-summary__status { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.9rem; } .mimus-sr-summary__error { background: var(--mimus-sr-warn-bg); color: var(--mimus-sr-warn); } .mimus-sr-summary__status { background: var(--mimus-sr-ok-bg); color: var(--mimus-sr-ok); } .mimus-sr-summary__buttons { display: grid; gap: 0.5rem; } /* "Bu ürün olmadan ekle": a product of the set can no longer be sold (2.23.0). The `hidden` attribute is what shows and hides it, so no rule here gives the block a display of its own. */ .mimus-sr-without { margin: 0 0 0.75rem; padding: 0.75rem; border: 1px solid var(--mimus-sr-warn); border-radius: 8px; background: var(--mimus-sr-warn-bg); color: var(--mimus-sr-ink); font-size: 0.9rem; } .mimus-sr-without[hidden], .mimus-sr-without [hidden] { display: none; } .mimus-sr-without__reason { margin: 0 0 0.35rem; color: var(--mimus-sr-warn); font-weight: 600; } .mimus-sr-without__lost { margin: 0 0 0.35rem; } .mimus-sr-without__buttons { display: grid; gap: 0.5rem; margin-top: 0.6rem; } .mimus-sr .mimus-sr-without__add, .mimus-sr .mimus-sr-without__reload { width: 100%; margin: 0; text-align: center; } /* The consent tick the configurator builds; its own stylesheet draws the box. */ .mimus-sr-summary__consent:empty { display: none; } .mimus-sr-summary__consent { margin: 0 0 0.75rem; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.9rem; } /* A product the round could not add: marked in the list until the customer leaves it out or reloads. */ .mimus-sr-item.is-unavailable { border-color: var(--mimus-sr-warn); background: var(--mimus-sr-warn-bg); color: var(--mimus-sr-ink); } /* A passworded set: WordPress's password form, and nothing of the set. */ .mimus-sr--locked { max-width: 36rem; margin: 2rem auto; } .mimus-sr .mimus-sr-summary__add, .mimus-sr .mimus-sr-summary__cart { width: 100%; margin: 0; text-align: center; } /* After a successful round the cart link is the next step, and adding again is the quieter choice. */ .mimus-sr-summary.is-added .mimus-sr-summary__cart { order: -1; } .mimus-sr-assurance { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--mimus-sr-line); background: transparent; color: var(--mimus-sr-ink); font-size: 0.9rem; } .mimus-sr-assurance > :last-child { margin-bottom: 0; } /* ------------------------------------------------------------ bottom bar */ .mimus-sr-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 990; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); box-shadow: 0 -4px 16px rgba(44, 42, 40, 0.1); } .mimus-sr-bar__total { display: flex; flex-direction: column; margin: 0; color: var(--mimus-sr-muted); font-size: 0.8rem; line-height: 1.25; } .mimus-sr-bar__total strong { color: var(--mimus-sr-ink); font-size: 1.05rem; } .mimus-sr .mimus-sr-bar__add { margin: 0; white-space: nowrap; } @media (min-width: 900px) { .mimus-sr .mimus-sr-bar { display: none !important; } } /* The bar covers the bottom of the page; this gives the footer its room back. A floating button of another plugin can be lifted with the same variable. */ body.mimus-sr-bar-on { padding-bottom: var(--mimus-sr-bar-h, 0px); } /* ---------------------------------------------------------------- dialog */ .mimus-sr-dialog { width: min(56rem, calc(100vw - 1.5rem)); max-width: none; max-height: min(88dvh, 50rem); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .mimus-sr-dialog[open] { display: flex; flex-direction: column; } .mimus-sr-dialog::backdrop { background: rgba(24, 22, 20, 0.5); } .mimus-sr-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem 0.5rem; } .mimus-sr-dialog__title { margin: 0; color: var(--mimus-sr-ink); font-size: 1.15rem; } .mimus-sr-dialog__close { all: unset; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--mimus-sr-muted); cursor: pointer; } .mimus-sr-dialog__close:hover { background: var(--mimus-sr-shade); color: var(--mimus-sr-ink); } .mimus-sr-dialog__tools { display: grid; gap: 0.6rem; padding: 0 1.2rem 0.6rem; } .mimus-sr .mimus-sr-dialog__search input { width: 100%; margin: 0; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } /* The one scroll area: the suggestions scroll away with the full list below them. */ .mimus-sr-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); } .mimus-sr-dialog__state { margin: 0; padding: 0 1.2rem; color: var(--mimus-sr-muted); font-size: 0.9rem; } .mimus-sr-dialog__state:empty { display: none; } .mimus-sr .mimus-sr-dialog__section-title { margin: 0; padding: 0.6rem 1.2rem 0; background: transparent; color: var(--mimus-sr-ink); font-size: 0.95rem; font-weight: 600; line-height: 1.3; } .mimus-sr-dialog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0.6rem 1.2rem 1.2rem; list-style: none; } .mimus-sr-tile { all: unset; display: flex; flex-direction: column; gap: 0.3rem; width: 100%; box-sizing: border-box; padding: 0.5rem; border: 1px solid var(--mimus-sr-line); border-radius: 10px; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.85rem; line-height: 1.3; cursor: pointer; } .mimus-sr-tile:hover { border-color: var(--mimus-sr-accent); } .mimus-sr-tile:focus-visible { outline: 2px solid var(--mimus-sr-accent); outline-offset: 2px; } .mimus-sr-tile[aria-pressed="true"] { border-color: var(--mimus-sr-accent); box-shadow: inset 0 0 0 1px var(--mimus-sr-accent); } .mimus-sr .mimus-sr-tile img { display: block; width: 100%; max-width: none; aspect-ratio: 1; border-radius: 6px; background: var(--mimus-sr-shade); object-fit: contain; } .mimus-sr-tile__price { color: var(--mimus-sr-muted); } /* ----------------------------------------------------------------- story */ .mimus-sr__story { max-width: 70ch; margin: 1rem 0 2rem; background: transparent; color: var(--mimus-sr-ink); } /* --------------------------------------------------------------- related */ .mimus-sr-related { margin: 2rem 0; background: transparent; color: var(--mimus-sr-ink); } .mimus-sr-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 0.75rem; } /* ---------------------------------------------------------------- archive */ /* * The title, the breadcrumb and the count sit in Flatsome's category title band * (archive-mimus_showroom.php), outside the block's token scope, so the count * carries literal fallbacks. Flatsome's .page-title-inner p already zeroes the * margin. */ .mimus-sr-archive__count { margin: 0; background: transparent; color: var(--mimus-sr-muted, #6b6560); font-variant-numeric: tabular-nums; } .mimus-sr-archive__description { max-width: 70ch; margin-bottom: 0.75rem; color: var(--mimus-sr-muted); } /* The columns and gutters are Flatsome's row-small (Templates::grid_classes()). */ .mimus-sr-archive__grid { margin-top: 1.25rem; } .mimus-sr-archive__pagination { margin: 0.5rem 0 1.5rem; } .mimus-sr-archive__filter { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.5rem 0; min-width: 0; } .mimus-sr-archive__filter-label { flex: none; color: var(--mimus-sr-muted); font-size: 0.85rem; } .mimus-sr-archive__filter-list { display: flex; gap: 0.4rem; margin: 0; padding: 0 0 0.25rem; overflow-x: auto; list-style: none; scrollbar-width: thin; } .mimus-sr-archive__filter-list li { flex: none; margin: 0; } .mimus-sr-archive__filter-link { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--mimus-sr-line); border-radius: 999px; background: var(--mimus-sr-paper); color: var(--mimus-sr-ink); font-size: 0.85rem; white-space: nowrap; text-decoration: none; } .mimus-sr-archive__filter-link:hover { border-color: var(--mimus-sr-accent); color: var(--mimus-sr-ink); } .mimus-sr-archive__filter-link.is-active { border-color: var(--mimus-sr-accent); background: var(--mimus-sr-accent); color: var(--mimus-sr-accent-ink); } /* "Aydınlatma (30)": the count takes the chip's colour, active or not. */ .mimus-sr-archive__filter-count { color: inherit; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ cards */ /* * A set card reads as a Flatsome product box (owner, 2026-09-19; 2.24.2), wherever * it is drawn: the set list, a category page's strip beside the product grid, * [mimus_setler], the product-page strip and "Benzer setler". Square picture, the * title in the body font at the product title's size and link colour, the price * in Flatsome's own span.amount. Borrowed by value, not by class: Flatsome's * product box classes carry its hover tools and grid-style rules. */ .mimus-sr-card-room { position: relative; background: var(--mimus-sr-paper, #ffffff); color: var(--mimus-sr-ink, #2c2a28); } .mimus-sr-card-room__link { color: inherit; text-decoration: none; } /* The whole card is the link's hit area; the tags stay readable, not separate targets. */ .mimus-sr-card-room__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .mimus-sr-card-room__link:focus-visible { outline: none; } .mimus-sr-card-room:focus-within { outline: 2px solid var(--mimus-sr-accent, #7a6a58); outline-offset: 4px; } /* * 4:5 since 2.24.0: the design team's set cards are 1080 × 1350 (Card_Pieces:: * picture_for()). A set without a card shows its first photo, a square, cropped * at the sides. */ .mimus-sr-card-room__media { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 0; background: var(--mimus-sr-shade, #faf8f5); } .mimus-sr-card-room__media img, .mimus-sr-archive .mimus-sr-card-room__image, .mimus-sr-backlink .mimus-sr-card-room__image { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform 300ms ease; } .mimus-sr-card-room:hover .mimus-sr-card-room__media img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .mimus-sr-card-room__media img { transition: none; } .mimus-sr-card-room:hover .mimus-sr-card-room__media img { transform: none; } } .mimus-sr-card-room__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #f3e8dc 0 64%, #e9dccd 64% 100%); color: var(--mimus-sr-ink, #2c2a28); } /* * A set with no picture at all (no card, no photo, no cover) stands its products * on that wall (Frontend\Card_Pieces): * up to four cutouts side by side, feet on one line in the floor band. Each * picture is contained in its own slot and anchored at the bottom, so a tall lamp * and a small cube share the line rather than their centres. This selector * outranks the cover rule above (.mimus-sr-card-room__media img), which would * stretch a cutout to the whole frame and crop it. */ .mimus-sr-card-room__placeholder--pieces { display: flex; align-items: flex-end; justify-content: center; gap: 3%; box-sizing: border-box; padding: 8% 7% 9%; } .mimus-sr-card-room__media .mimus-sr-card-room__piece { flex: 1 1 0; min-width: 0; width: auto; max-width: 40%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; } /* * The product box's title: .box-text is .9em with .7em above, and the name sits in * it at line-height 1.3 in the link colour (Flatsome_Default: #334862, hover #111). * font: inherit drops the theme's heading face and weight from the h2/h3. */ .mimus-sr-card-room__title { margin: 0.7em 0 0.1em; font: inherit; font-size: 0.9em; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--fs-experimental-link-color, #334862); } .mimus-sr-card-room__link:hover .mimus-sr-card-room__title { color: var(--fs-experimental-link-color-hover, #111111); } .mimus-sr-card-room__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.3rem; padding: 0; list-style: none; } .mimus-sr-card-room__tag { margin: 0; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--mimus-sr-shade, #faf8f5); color: var(--mimus-sr-muted, #6b6560); font-size: 0.75rem; } .mimus-sr-card-room__offers { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.3rem; padding: 0; list-style: none; } .mimus-sr-card-room__meta { margin: 0.1em 0 0; color: var(--mimus-sr-muted, #6b6560); font-size: 0.9em; line-height: 1.3; } /* The product box's 1.4em under the text, where cards stack in rows. */ .mimus-sr-archive__grid .mimus-sr-card-room { padding-bottom: 1.25em; } .mimus-sr-card-room__meta strong { color: var(--mimus-sr-ink, #2c2a28); } /* ------------------------------------------------------- product strip */ .mimus-sr-backlink { margin: 2.5rem 0; } /* * The product-page strip is one scrolling row, not a wrapping grid: it sits * between the upsells and the related-products grid, and a second block that * reflows into three rows would read as a third catalogue rather than as a * pointer sideways. * * The 180px floor is chosen so six cards fit without scrolling in a normal * content column and the same rule starts scrolling on its own as the viewport * narrows. overscroll-behavior-x keeps a flick at the end of the strip from * being handed to the page underneath. * * The 240px ceiling (a Flatsome product box in a four-column row) holds for every * strip: the product page's, a category's and [mimus_setler]. Until 2.24.3 the * product-page strip grew its cards with 1fr, so a product in a single set showed * one 4:5 card as wide as the content column — about 1050 × 1310px, a banner * longer than the page (owner, 2026-09-19). Cards that do not fill the row now * sit at its start, under the heading. */ .mimus-sr-backlink__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 240px); gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 0.75rem; } .mimus-sr-backlink__grid > .mimus-sr-card-room { scroll-snap-align: start; } @media (max-width: 900px) { /* One card at a time, with the edge of the next one showing — that sliver is the only thing that says the strip scrolls. Capped at 300px, which a phone never reaches: on a tablet 68% was a 520–612px card, and a lone one read as a banner. */ .mimus-sr-backlink__grid { grid-auto-columns: min(68%, 300px); } } /* * The same strip above a product category's grid (Frontend\Category_Sets), with * a head of its own: what these are, and the way to all of them. It sits over the * products the shopper came for, so it is tighter than the product-page strip and * its heading is a step smaller than the page's own. */ .mimus-sr-backlink--category { margin: 0.5rem 0 1.75rem; } .mimus-sr-backlink__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; } .mimus-sr-backlink--category .mimus-sr-backlink__title { margin: 0; font-size: 1.2rem; line-height: 1.3; } .mimus-sr-backlink__all { flex: none; background: transparent; color: var(--mimus-sr-ink); font-size: 0.9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .mimus-sr-backlink__all:hover, .mimus-sr-backlink__all:focus-visible { color: var(--mimus-sr-accent); } .mimus-sr-backlink__lead { max-width: 70ch; margin: 0.25rem 0 0.9rem; background: transparent; color: var(--mimus-sr-muted); font-size: 0.9rem; } /* * [mimus_setler] (Frontend\Sets_Shortcode), usually inside a UX Builder column on * the home page: the column already spaces its content, so no outer margin of our * own beyond a little below. */ .mimus-sr-backlink--shortcode { margin: 0 0 1.5rem; } /* duzen="izgara": wrapping rows instead of one scrolling row. */ .mimus-sr-backlink--grid .mimus-sr-backlink__grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem 1.25rem; overflow-x: visible; scroll-snap-type: none; } @media (max-width: 900px) { /* Two to a row on a phone: one card per row would make eight sets a long scroll of near-identical pictures. */ .mimus-sr-backlink--grid .mimus-sr-backlink__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; } } /* --------------------------------------------------------------- the cart */ /* * A room's lines are contiguous (Cart\Hooks::group_rows()) and share this tint, * so a room reads as one block instead of as loose products. The rule shipped in * 1.0.0 and did nothing until 2.17.0, when Frontend\Assets finally loaded this * sheet on the cart and the checkout. * * The class carries the ADD ROUND's group uuid, not a scene group, so it says * which room a line came from but is not a name a stylesheet can target — every * room is tinted alike. */ .mimus-sr-row td { background: #faf8f5; color: #2c2a28; } /* The way back to the room, in the Oda Tasarımı row. */ .mimus-sr-row-link { color: #6b5b4e; text-decoration: underline; text-underline-offset: 0.2em; } .mimus-sr-row-link:hover, .mimus-sr-row-link:focus { color: #2c2a28; } /* * A room's gift line: its price and subtotal read "Hediye" (Cart\Hooks), and its * quantity is fixed text, not an input (Cart\Gifts). Literal colours: the cart is * outside every .mimus-sr token scope. */ .mimus-sr-gift-price { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; background: #edf4ef; color: #3f6b4f; font-weight: 600; } .mimus-sr-gift-qty { display: inline-block; min-width: 2em; text-align: center; color: #2c2a28; }