/* ------------------------------------------------------------ * widgets.css — every QB section (loaded via widget style deps and on * the home / recipe pages). One section banner comment per widget. * ------------------------------------------------------------ */ .mkr-card .mkr-frame, .mkr-pcard .mkr-frame { --mkr-cutbg: var(--mkr-paper); } .mkr-editor-note { margin: 12px auto; max-inline-size: 900px; padding: 12px 16px; border-radius: 12px; background: #fff6d6; color: #5c4a00; font: 13px/1.6 system-ui, sans-serif; text-align: center; } /* ------------------------------------------------ Collections Stage */ .mkr-cstage { padding-block-start: 20px; } .mkr-cstage__in { position: relative; overflow: hidden; block-size: clamp(640px, 82vh, 900px); border-radius: var(--mkr-r-stage); background: var(--c-bg); color: var(--c-fg); transition: background-color .9s var(--mkr-ease-out), color .9s var(--mkr-ease-out); display: grid; grid-template-columns: clamp(220px, 21%, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); padding: clamp(28px, 4vw, 56px); padding-block-end: clamp(36px, 4vw, 56px); } .mkr-cstage__ghost { position: absolute; inset-block-end: -.16em; inset-inline-end: -.02em; font-family: var(--mkr-font-num); font-size: clamp(260px, 36vw, 600px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c-stroke); letter-spacing: -.04em; pointer-events: none; transition: -webkit-text-stroke-color .9s; } .mkr-cstage__index { position: relative; z-index: 3; display: flex; flex-direction: column; padding-inline-end: clamp(16px, 2vw, 40px); border-inline-end: 1px solid var(--c-line); } .mkr-cstage__label { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13px; font-weight: 500; color: var(--c-accent); } .mkr-cstage__label .mkr-diamonds { color: inherit; } .mkr-cstage__list { list-style: none; margin: 0; padding: 0; } .mkr-cstage__tab { inline-size: 100%; text-align: start; border: 0; background: none; color: inherit; padding-block: 12px; display: flex; flex-direction: column; gap: 10px; opacity: .5; transition: opacity .4s; } .mkr-cstage__tab:hover, .mkr-cstage__tab.is-active { opacity: 1; } .mkr-cstage__tabhead { display: flex; align-items: baseline; gap: 14px; } .mkr-cstage__tabhead .mkr-num { font-size: 14px; color: var(--c-accent); } .mkr-cstage__tabname { font-size: 18px; font-weight: 400; transition: font-size .45s var(--mkr-ease-out), font-weight .3s; } .mkr-cstage__tab.is-active .mkr-cstage__tabname { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; } .mkr-cstage__bar { display: block; block-size: 2px; background: var(--c-line); border-radius: 2px; overflow: hidden; } .mkr-cstage__bar span { display: block; block-size: 100%; background: var(--c-accent); transform-origin: inline-start; transform: scaleX(0); } .mkr-cstage__tab.is-done .mkr-cstage__bar span { transform: scaleX(1); } .mkr-cstage__tab.is-active .mkr-cstage__bar span { transform: scaleX(var(--p, 0)); } .mkr-cstage__ctrl { margin-block-start: auto; display: flex; align-items: center; gap: 10px; padding-block-start: 20px; } .mkr-cstage .mkr-round { border-color: var(--c-line); color: var(--c-fg); inline-size: 48px; block-size: 48px; } .mkr-cstage .mkr-round--solid { background: var(--c-btn-bg); border-color: var(--c-btn-bg); color: var(--c-btn-fg); } .mkr-cstage .mkr-round:hover { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); } .mkr-cstage .mkr-counter { color: var(--c-fg); min-inline-size: 0; } .mkr-cstage__pause { color: var(--c-fg); margin-inline-start: auto; } .mkr-cstage__pause .mkr-icon--play, .mkr-cstage__pause[aria-pressed="true"] .mkr-icon--pause { display: none; } .mkr-cstage__pause[aria-pressed="true"] .mkr-icon--play { display: block; } .mkr-cstage__slides { position: relative; min-block-size: 0; } .mkr-cstage__slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: stretch; visibility: hidden; } .mkr-cstage__slide.is-active { visibility: visible; z-index: 2; } .mkr-cstage__copy { display: flex; flex-direction: column; gap: 20px; padding-block: clamp(12px, 3vw, 40px) 0; position: relative; z-index: 2; } .mkr-cstage__kicker { font-size: 13px; font-weight: 500; color: var(--c-accent); } .mkr-cstage__name { font-size: clamp(44px, 6vw, 96px); line-height: 1.04; color: inherit; font-weight: 700; letter-spacing: -.02em; } .mkr-cstage__rule { inline-size: 96px; block-size: 2px; background: var(--c-accent); transform-origin: inline-start; } .mkr-cstage__text { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.95; color: var(--c-muted); max-inline-size: 40ch; } .mkr-cstage__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mkr-cstage__btn { --b-bg: var(--c-btn-bg); --b-fg: var(--c-btn-fg); box-shadow: none; } .mkr-cstage__btn:hover { --b-bg: var(--c-fg); --b-fg: var(--c-bg); } .mkr-cstage__count { font-size: 13px; color: var(--c-muted); } .mkr-cstage__minis { margin-block-start: auto; display: flex; flex-direction: column; gap: 12px; } .mkr-cstage__minis > p { font-size: 12px; color: var(--c-muted); } .mkr-cstage__minis > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .mkr-cstage__minis a { display: flex; flex-direction: column; gap: 8px; color: inherit; font-size: 13px; font-weight: 500; } .mkr-cstage__mini { aspect-ratio: 4 / 5; --mkr-cutbg: var(--c-bg); background-color: var(--c-ph); } .mkr-cstage__media { position: relative; min-block-size: 0; } .mkr-cstage__main { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: min(100%, 84%); border-radius: 26px; --mkr-cutbg: var(--c-bg); --mkr-knot: var(--c-accent); background-color: var(--c-ph); } .mkr-cstage__detail { position: absolute; inset-block-end: 8%; inset-inline-end: 0; inline-size: 38%; aspect-ratio: 4 / 5; border: 8px solid var(--c-bg); border-radius: 18px; --mkr-cutbg: var(--c-bg); background-color: var(--c-ph); transition: border-color .9s; } .mkr-cstage__olive { position: absolute; inset-block-start: -40px; inset-inline-end: 0; inline-size: 240px; transform: rotate(-24deg); z-index: 3; pointer-events: none; transition: filter .9s, opacity .9s; } .mkr-cstage__in[data-dark] .mkr-cstage__olive { opacity: .6; } .mkr-cstage__in[data-red] .mkr-cstage__olive { filter: brightness(0) invert(1); opacity: .45; } .mkr-cstage__progress { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; block-size: 4px; } .mkr-cstage__progress span { background: var(--c-line); overflow: hidden; } .mkr-cstage__progress i { display: block; block-size: 100%; background: var(--c-accent); transform-origin: inline-start; transform: scaleX(0); } .mkr-cstage__progress .is-done i { transform: scaleX(1); } .mkr-cstage__progress .is-active i { transform: scaleX(var(--p, 0)); } /* Slide choreography: the image uncovers step by step in the stitch shape */ .mkr-cstage__slide .mkr-cstage__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mkr-ease-out), transform .8s var(--mkr-ease-out); } .mkr-cstage__slide.is-active .mkr-cstage__copy > * { opacity: 1; transform: none; } .mkr-cstage__slide.is-active .mkr-cstage__copy > :nth-child(2) { transition-delay: 80ms; } .mkr-cstage__slide.is-active .mkr-cstage__copy > :nth-child(3) { transition-delay: 160ms; } .mkr-cstage__slide.is-active .mkr-cstage__copy > :nth-child(4) { transition-delay: 220ms; } .mkr-cstage__slide.is-active .mkr-cstage__copy > :nth-child(5) { transition-delay: 280ms; } .mkr-cstage__slide.is-active .mkr-cstage__copy > :nth-child(6) { transition-delay: 340ms; } .mkr-cstage__slide .mkr-cstage__main { clip-path: polygon(0 0, 0 0, 0 25%, 0 25%, 0 50%, 0 50%, 0 75%, 0 75%, 0 100%, 0 100%); transition: clip-path 1.1s var(--mkr-ease-io); } .mkr-cstage__slide.is-active .mkr-cstage__main { clip-path: polygon(0 0, 100% 0, 100% 25%, 100% 25%, 100% 50%, 100% 50%, 100% 75%, 100% 75%, 100% 100%, 0 100%); } .mkr-cstage__slide .mkr-cstage__detail { opacity: 0; transform: translateY(24px); transition: opacity .7s .3s, transform 1s var(--mkr-ease-out) .3s; } .mkr-cstage__slide.is-active .mkr-cstage__detail { opacity: 1; transform: none; } .mkr-cstage__slide.is-active .mkr-frame__img { animation: mkr-settle 7s var(--mkr-ease-out) both; } @keyframes mkr-settle { from { transform: scale(1.08); } to { transform: scale(1); } } .mkr-no-js .mkr-cstage__slide .mkr-cstage__main { clip-path: none; } @media (max-width: 1100px) { .mkr-cstage__in { block-size: auto; grid-template-columns: minmax(0, 1fr); padding: 16px; } .mkr-cstage__index, .mkr-cstage__slides { min-inline-size: 0; } .mkr-cstage__index { order: 2; border: 0; padding: 0; } .mkr-cstage__label, .mkr-cstage__bar { display: none; } .mkr-cstage__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; } .mkr-cstage__tab { opacity: 1; padding: 0 14px; min-block-size: 40px; border: 1px solid var(--c-line); border-radius: 999px; flex-direction: row; white-space: nowrap; } .mkr-cstage__tab.is-active { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); } .mkr-cstage__tab.is-active .mkr-cstage__tabname, .mkr-cstage__tabname { font-size: 13px; font-weight: 500; } .mkr-cstage__tabhead .mkr-num { display: none; } .mkr-cstage__ctrl { display: none; } .mkr-cstage__slides { display: grid; } .mkr-cstage__slide { position: relative; grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); gap: 20px; } .mkr-cstage__media { order: -1; aspect-ratio: 4 / 4.2; } .mkr-cstage__main { inline-size: 100%; border-radius: 20px; } .mkr-cstage__detail { inline-size: 32%; inset-block-end: -6%; } .mkr-cstage__copy { padding: 8px 6px 24px; gap: 12px; } .mkr-cstage__minis { display: none; } .mkr-cstage__ghost { font-size: 260px; inset-block-end: auto; inset-block-start: 40%; } .mkr-cstage__olive { inline-size: 150px; inset-block-start: -10px; } } /* ------------------------------------------------ Quick Finder */ .mkr-finder { padding-block-start: 24px; position: relative; z-index: 2; } .mkr-finder__card { overflow: hidden; padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 18px; } .mkr-finder__form { display: flex; align-items: center; gap: 16px; } .mkr-finder__q { font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; color: var(--mkr-ink); white-space: nowrap; } .mkr-finder__field { flex: 1; display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding-inline: 22px; border-radius: 999px; background: #f6eee3; color: var(--mkr-muted); } .mkr-finder__field input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 15px; color: var(--mkr-ink); min-inline-size: 0; } .mkr-finder__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mkr-finder__label { font-size: 13px; color: var(--mkr-muted); margin-inline-end: 4px; } .mkr-finder__size { margin-inline-start: auto; gap: 6px; } @media (max-width: 760px) { .mkr-finder__form { flex-wrap: wrap; } .mkr-finder__q { inline-size: 100%; white-space: normal; } .mkr-finder__form .mkr-btn { display: none; } .mkr-finder__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; } .mkr-finder__chips .mkr-chip { flex-shrink: 0; } .mkr-finder__label { display: none; } } /* ------------------------------------------------ Product card */ .mkr-pcard { padding: 12px; display: flex; flex-direction: column; gap: 14px; block-size: 100%; } .mkr-pcard__media { position: relative; display: block; border-radius: var(--mkr-r-s); overflow: hidden; } .mkr-pcard__frame { aspect-ratio: 4 / 5; } .mkr-pcard__alt { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; z-index: 1; } .mkr-pcard:hover .mkr-pcard__alt { opacity: 1; } .mkr-pcard__tag { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 3; padding: 5px 12px; border-radius: 999px; background: var(--mkr-primary); color: #fff; font-size: 11px; } .mkr-pcard__quick { position: absolute; inset-inline: 12px; inset-block-end: 12px; z-index: 3; min-block-size: 44px; border-radius: 999px; background: rgba(var(--mkr-ink-rgb), .92); color: var(--mkr-bg); font-size: 13px; display: flex; align-items: center; justify-content: center; transform: translateY(8px); opacity: 0; transition: opacity .35s, transform .35s var(--mkr-ease-out); } .mkr-pcard:hover .mkr-pcard__quick { opacity: 1; transform: none; } .mkr-pcard__body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; } .mkr-pcard__cat { font-size: 12px; color: var(--mkr-primary); } .mkr-pcard__title { font-size: 17px; font-weight: 600; line-height: 1.4; } .mkr-pcard__title a { color: var(--mkr-ink); } .mkr-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mkr-price { font-size: 15px; font-weight: 500; color: var(--mkr-ink); } .mkr-price del { opacity: .5; font-weight: 300; margin-inline-end: 6px; } .mkr-price ins { text-decoration: none; color: var(--mkr-primary); } .mkr-dots { display: flex; gap: 4px; } .mkr-dots { align-items: center; } .mkr-dots i { inline-size: 12px; block-size: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--mkr-ink-rgb), .12); } .mkr-dots b { font-size: 11px; font-weight: 500; color: var(--mkr-muted); margin-inline-start: 2px; } @media (hover: none) { .mkr-pcard__quick { display: none; } } /* ------------------------------------------------ Labels — woven garment labels sewn into the photo's top seam * Sale (crimson) · New (paper) · Sold out (ink, product page). Dashed stitch inside, a fold shadow at the seam. */ .mkr-labels { position: absolute; inset-block-start: 0; inset-inline-start: 14px; z-index: 3; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; } .mkr-label { --lb-bg: var(--mkr-primary); --lb-fg: #fff; --lb-stitch: rgba(255, 255, 255, .5); --lb-rule: rgba(255, 255, 255, .32); position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 11px 8px; border-radius: 0 0 7px 7px; background: var(--lb-bg); color: var(--lb-fg); font-size: 11.5px; font-weight: 600; line-height: 1.15; white-space: nowrap; box-shadow: 0 1px 0 rgba(var(--mkr-ink-rgb), .06), 0 12px 20px -12px rgba(var(--mkr-ink-rgb), .55); transition: padding-block-start .45s var(--mkr-ease-out); } .mkr-label::before { content: ""; position: absolute; inset: 0 3px 3px; border: 1px dashed var(--lb-stitch); border-block-start: 0; border-radius: 0 0 5px 5px; pointer-events: none; } .mkr-label::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 5px; background: linear-gradient(rgba(0, 0, 0, .2), transparent); pointer-events: none; } .mkr-label__k { flex: none; inline-size: 5px; block-size: 5px; background: currentColor; transform: rotate(45deg); opacity: .75; } .mkr-label__v { padding-inline-start: 7px; border-inline-start: 1px solid var(--lb-rule); font-family: var(--mkr-font-num); font-size: 13px; font-weight: 600; letter-spacing: .01em; direction: ltr; unicode-bidi: isolate; } .mkr-label--new { --lb-bg: var(--mkr-paper); --lb-fg: var(--mkr-primary); --lb-stitch: rgba(var(--mkr-primary-rgb), .32); --lb-rule: rgba(var(--mkr-primary-rgb), .22); } .mkr-label--new::after { background: linear-gradient(rgba(var(--mkr-ink-rgb), .1), transparent); } .mkr-label--soldout { --lb-bg: #2a2220; --lb-fg: #F2E9DE; --lb-stitch: rgba(242, 233, 222, .38); } .mkr-pcard:hover .mkr-label { padding-block-start: 16px; } /* Sale card: the stitch around the photo stays faintly visible */ .mkr-pcard.is-sale .mkr-stitch-hover { outline-color: rgba(var(--mkr-primary-rgb), .34); } .mkr-pcard.is-sale:hover .mkr-stitch-hover { outline-color: var(--mkr-primary); } /* Sold-out card: a soft veil + a linen hang-tag on a thread (swings straight on hover) */ .mkr-soldout { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .mkr-soldout::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 20, 18, .2) 0%, rgba(28, 20, 18, .38) 100%); transition: opacity .5s var(--mkr-ease-out); } .mkr-pcard.is-soldout .mkr-frame__img, .mkr-pcard.is-soldout .mkr-pcard__alt { filter: saturate(.5) contrast(.96); } .mkr-pcard.is-soldout:hover .mkr-soldout::before { opacity: .55; } .mkr-soldout__tag { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 4px; min-inline-size: 118px; padding: 19px 18px 11px; border-radius: 7px; background: rgba(255, 253, 249, .96); color: var(--mkr-ink); text-align: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 20px 34px -18px rgba(0, 0, 0, .6); transform-origin: 50% 9px; transform: translate(-50%, -50%) rotate(-4deg); transition: transform .7s var(--mkr-ease-out); } [dir="rtl"] .mkr-soldout__tag { transform: translate(-50%, -50%) rotate(4deg); } .mkr-pcard.is-soldout:hover .mkr-soldout__tag { transform: translate(-50%, -50%) rotate(0deg); } .mkr-soldout__tag::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(var(--mkr-primary-rgb), .38); border-radius: 4px; pointer-events: none; } .mkr-soldout__tag::after { content: ""; position: absolute; left: 50%; top: 6px; inline-size: 7px; block-size: 7px; margin-left: -3.5px; border-radius: 50%; background: rgba(var(--mkr-ink-rgb), .16); box-shadow: inset 0 0 0 1.5px rgba(var(--mkr-primary-rgb), .55); } .mkr-soldout__tag > .mkr-soldout__t::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 9px); inline-size: 1px; block-size: 70vh; margin-left: -.5px; background: linear-gradient(to top, rgba(255, 253, 249, .95), rgba(255, 253, 249, .55) 40%, rgba(255, 253, 249, .3)); } .mkr-soldout__t { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .mkr-soldout__l { font-family: var(--mkr-font-num); font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--mkr-primary); direction: ltr; } .mkr-pcard.is-soldout .mkr-price { color: var(--mkr-muted); } .mkr-pcard.is-soldout .mkr-price ins { color: inherit; } .mkr-pcard.is-soldout .mkr-dots { opacity: .45; } @media (max-width: 760px) { .mkr-labels { inset-inline-start: 10px; gap: 4px; } .mkr-label { padding: 10px 8px 6px; gap: 5px; font-size: 10.5px; } .mkr-label__v { padding-inline-start: 5px; font-size: 11.5px; } .mkr-pgrid .mkr-label__k { display: none; } .mkr-soldout__tag { min-inline-size: 0; padding: 16px 12px 8px; } .mkr-soldout__t { font-size: 11.5px; } .mkr-soldout__l { font-size: 8px; letter-spacing: .2em; } } @media (prefers-reduced-motion: reduce) { .mkr-label, .mkr-soldout__tag, .mkr-soldout::before { transition: none; } } /* ------------------------------------------------ Products (slider + grid) */ .mkr-sliderctrl { display: flex; align-items: center; gap: 10px; } .mkr-track-wrap { padding-inline-start: max(var(--mkr-gutter), calc((100% - var(--mkr-container)) / 2)); } .mkr-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((min(100vw - 2 * var(--mkr-gutter), var(--mkr-container)) - 3 * 24px) / 3.5); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 28px; padding-inline-end: var(--mkr-gutter); cursor: grab; overscroll-behavior-x: contain; } .mkr-track::-webkit-scrollbar { display: none; } .mkr-track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .mkr-track.is-dragging a { pointer-events: none; } .mkr-track__item { scroll-snap-align: start; } .mkr-pgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 22px; } @media (min-width: 1920px) { .mkr-track { grid-auto-columns: calc((min(100vw - 2 * var(--mkr-gutter), var(--mkr-container)) - 4 * 24px) / 4.5); } .mkr-pgrid { --cols: 5; } } @media (max-width: 1100px) { .mkr-track { grid-auto-columns: 42%; } .mkr-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .mkr-track { grid-auto-columns: 72%; gap: 14px; } .mkr-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mkr-pgrid .mkr-pcard { padding: 7px; gap: 8px; } .mkr-pgrid .mkr-pcard__title { font-size: 14px; } .mkr-pgrid .mkr-pcard__cat, .mkr-pgrid .mkr-dots { display: none; } .mkr-sliderctrl .mkr-round { display: none; } } /* ------------------------------------------------ Craft */ .mkr-craft { overflow: hidden; } .mkr-craft__band { inline-size: min(760px, 70%); opacity: .85; margin-block-end: clamp(40px, 5vw, 64px); } .mkr-craft__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .mkr-craft__copy { display: flex; flex-direction: column; gap: 22px; } .mkr-craft__copy .mkr-sec__title { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.3; } .mkr-craft .mkr-lead { color: #d9cfc2; } .mkr-craft__media { position: relative; aspect-ratio: 5 / 5.2; padding-inline-end: 12%; } .mkr-craft__poster { block-size: 100%; border-radius: 26px; --mkr-cutbg: var(--mkr-ink); background-color: #2a2524; background-image: repeating-linear-gradient(135deg, rgba(242, 233, 222, .06) 0 1px, transparent 1px 14px); } .mkr-craft__play { position: absolute; inset-block-start: 50%; inset-inline-start: calc(50% - 6%); transform: translate(-50%, -50%); inline-size: 88px; block-size: 88px; border-radius: 50%; border: 0; background: var(--mkr-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(var(--mkr-primary-rgb), .25); transition: transform .3s var(--mkr-ease-out), box-shadow .3s; } [dir="rtl"] .mkr-craft__play { transform: translate(50%, -50%); } .mkr-craft__play:hover { box-shadow: 0 0 0 16px rgba(var(--mkr-primary-rgb), .2); } .mkr-craft__card { position: absolute; inset-block-end: 10%; inset-inline-end: 0; inline-size: 220px; padding: 18px 22px; border-radius: 18px; background: var(--mkr-bg); color: var(--mkr-ink); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); } .mkr-craft__card .mkr-motif { block-size: 56px; inline-size: auto; } .mkr-craft__card strong { font-size: 14px; font-weight: 600; } .mkr-video { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; padding: 4vw; } .mkr-video iframe, .mkr-video video { inline-size: min(1200px, 100%); aspect-ratio: 16 / 9; border: 0; border-radius: 16px; background: #000; } .mkr-video button { position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } @media (max-width: 900px) { .mkr-craft__grid { grid-template-columns: 1fr; } .mkr-craft__media { padding: 0; } .mkr-craft__card { inline-size: 180px; inset-block-end: -20px; } } /* ------------------------------------------------ Bento */ .mkr-bento__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .mkr-bento__big { position: relative; min-block-size: clamp(420px, 40vw, 600px); border-radius: var(--mkr-r-l); overflow: hidden; color: var(--mkr-ink); display: block; } .mkr-bento__img { position: absolute; inset: 0; border-radius: inherit; --mkr-cutbg: var(--mkr-bg); } .mkr-bento__num { position: absolute; inset-block-start: 36px; inset-inline-start: 36px; z-index: 3; font-size: 15px; color: var(--mkr-primary); } .mkr-bento__caption { position: absolute; inset-inline: 24px; inset-block-end: 24px; z-index: 3; padding: 26px 30px; border-radius: 20px; background: var(--mkr-paper); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mkr-bento__caption small, .mkr-bento__promo small, .mkr-bento__small small { display: block; font-size: 13px; color: var(--mkr-primary); margin-block-end: 6px; } .mkr-bento__caption strong { font-size: clamp(22px, 2vw, 28px); font-weight: 600; } .mkr-bento__go { inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--mkr-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mkr-bento__side { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 24px; } .mkr-bento__promo { position: relative; overflow: hidden; border-radius: var(--mkr-r-l); background: var(--mkr-primary); color: #fff; padding: clamp(28px, 3vw, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .mkr-bento__promo:hover { color: #fff; } .mkr-bento__promo small { color: #f6dada; } .mkr-bento__promo strong { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.3; } .mkr-bento__promo em { font-size: 15px; font-weight: 500; border-block-end: 1px solid currentColor; padding-block-end: 4px; } .mkr-bento__olive { position: absolute; inset-block-start: -20px; inset-inline-end: -40px; inline-size: 320px; opacity: .22; } .mkr-bento__small { padding: clamp(24px, 3vw, 36px); display: flex; gap: 26px; align-items: center; color: var(--mkr-ink); } .mkr-bento__thumb { inline-size: clamp(120px, 11vw, 160px); aspect-ratio: 4 / 5; flex-shrink: 0; } .mkr-bento__small strong { display: block; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; margin-block-end: 8px; } .mkr-bento__small em { font-size: 14px; color: var(--mkr-body); display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 900px) { .mkr-bento__grid { grid-template-columns: 1fr; } .mkr-bento__big { min-block-size: 420px; } } /* ------------------------------------------------ Features */ .mkr-feats--card .mkr-feats__box { background: var(--mkr-paper); border-radius: var(--mkr-r-l); padding: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; box-shadow: var(--mkr-shadow-m); } .mkr-feats__item { display: flex; align-items: center; gap: 20px; } .mkr-feats__item .mkr-motif { block-size: clamp(80px, 7vw, 104px); inline-size: auto; flex-shrink: 0; } .mkr-feats__title { font-size: 18px; font-weight: 600; margin-block-end: 6px; } .mkr-feats__text { font-size: 13.5px; line-height: 1.8; color: var(--mkr-body); } .mkr-feats--banner .mkr-feats__box { position: relative; overflow: hidden; background: var(--mkr-ink); color: var(--mkr-bg); border-radius: var(--mkr-r-stage); padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; align-items: center; } .mkr-feats--banner .mkr-sec__title { font-size: clamp(24px, 2.4vw, 34px); color: var(--mkr-bg); line-height: 1.4; } .mkr-feats__intro { display: flex; flex-direction: column; gap: 14px; position: relative; } .mkr-feats__intro .mkr-link { color: var(--mkr-rose); } .mkr-feats--banner .mkr-feats__item { flex-direction: column; align-items: flex-start; gap: 12px; padding-inline-start: 32px; border-inline-start: 1px solid rgba(242, 233, 222, .16); position: relative; } .mkr-feats--banner .mkr-feats__item .mkr-motif { block-size: 72px; opacity: .9; } .mkr-feats--banner .mkr-feats__title { color: var(--mkr-bg); font-size: 17px; } .mkr-feats__olive { position: absolute; inset-block-end: -30px; inset-inline-end: -40px; inline-size: 340px; opacity: .12; } .mkr-feats--grid .mkr-feats__box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .mkr-feats--grid .mkr-feats__item { flex-direction: column; align-items: flex-start; padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px); gap: 18px; } .mkr-feats--grid .mkr-feats__item .mkr-motif { block-size: 120px; } .mkr-feats--grid .mkr-feats__title { font-size: 22px; } .mkr-feats--grid .mkr-feats__text { font-size: 15px; line-height: 1.9; } @media (max-width: 900px) { .mkr-feats--card .mkr-feats__box, .mkr-feats--grid .mkr-feats__box, .mkr-feats--banner .mkr-feats__box { grid-template-columns: 1fr; gap: 18px; } .mkr-feats--banner .mkr-feats__item { flex-direction: row; align-items: center; padding: 16px 0 0; border: 0; border-block-start: 1px solid rgba(242, 233, 222, .16); } } /* ------------------------------------------------ Branches — cards */ .mkr-bcards__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .mkr-bcard { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; } .mkr-bcard__top { display: flex; justify-content: space-between; align-items: center; } .mkr-bcard__top .mkr-num { font-size: 22px; color: var(--mkr-primary); } .mkr-bcard__name { font-size: 18px; } .mkr-bcard__addr { font-size: 13px; line-height: 1.75; color: var(--mkr-body); min-block-size: 46px; } .mkr-bcard__hours { font-size: 12px; color: var(--mkr-muted); padding-block-start: 12px; border-block-start: 1px dashed var(--mkr-line); } .mkr-bcard__actions { display: flex; gap: 8px; margin-block-start: auto; } .mkr-bcard__actions .mkr-btn { flex: 1; padding-inline: 12px; } .mkr-bcard__call { inline-size: 44px; block-size: 44px; flex-shrink: 0; } @media (max-width: 1280px) { .mkr-bcards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .mkr-bcards__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--mkr-gutter) * -1); padding-inline: var(--mkr-gutter); padding-block-end: 12px; } .mkr-bcard { scroll-snap-align: start; } } /* ------------------------------------------------ Branches — strip */ .mkr-bstrip__card { padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 32px; } .mkr-bstrip__head { display: flex; flex-direction: column; gap: 8px; min-inline-size: 180px; } .mkr-bstrip__head strong { font-size: 26px; color: var(--mkr-ink); font-weight: 600; } .mkr-bstrip__list { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .mkr-bstrip__list a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-inline-start: 14px; border-inline-start: 1px solid #ede3d5; color: var(--mkr-ink); font-size: 15px; } .mkr-bstrip__list .mkr-pill { font-size: 10px; } @media (max-width: 1100px) { .mkr-bstrip__card { flex-direction: column; align-items: stretch; } .mkr-bstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } } /* ------------------------------------------------ Hero slider (Home 2) */ .mkr-hero { padding-block-start: 20px; } .mkr-hero__in { position: relative; overflow: hidden; border-radius: var(--mkr-r-stage); block-size: clamp(560px, 78vh, 820px); background: var(--mkr-sand); } .mkr-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--mkr-ease-out), visibility 0s 1s; background: var(--h-bg); } .mkr-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--mkr-ease-out); z-index: 2; } .mkr-hero__media { position: absolute; inset: 0; background-color: var(--h-bg); background-image: repeating-linear-gradient(135deg, rgba(var(--mkr-primary-rgb), .07) 0 1px, transparent 1px 14px); } .mkr-hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s var(--mkr-ease-out); } .mkr-hero__slide.is-active .mkr-hero__img { transform: scale(1); } [dir="rtl"] .mkr-hero__img.is-mirror { transform: scaleX(-1) scale(1.06); } [dir="rtl"] .mkr-hero__slide.is-active .mkr-hero__img.is-mirror { transform: scaleX(-1); } .mkr-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, var(--h-scrim) 0%, color-mix(in srgb, var(--h-scrim) 70%, transparent) 38%, transparent 66%); pointer-events: none; } [dir="ltr"] .mkr-hero__slide::after { background: linear-gradient(to right, var(--h-scrim) 0%, color-mix(in srgb, var(--h-scrim) 70%, transparent) 38%, transparent 66%); } .mkr-hero__copy { position: absolute; z-index: 3; inset-block: 0; inset-inline-start: clamp(28px, 7vw, 110px); inline-size: min(640px, 80%); display: flex; flex-direction: column; justify-content: center; gap: 22px; color: var(--h-fg); } .mkr-hero__eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; color: var(--h-accent); } .mkr-hero__eyebrow span { inline-size: 32px; block-size: 1px; background: currentColor; } .mkr-hero__title { font-size: clamp(38px, 4.4vw, 68px); line-height: 1.15; color: inherit; } .mkr-hero__text { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.9; color: var(--h-muted); max-inline-size: 44ch; } .mkr-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; } .mkr-hero__btn1 { --b-bg: var(--h-btn-bg); --b-fg: var(--h-btn-fg); } .mkr-hero__btn1:hover { --b-bg: var(--h-fg); --b-fg: var(--h-bg); } .mkr-hero__btn2 { --b-bg: transparent; --b-fg: var(--h-fg); --b-bd: var(--h-fg); font-weight: 500; } .mkr-hero__slide .mkr-hero__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--mkr-ease-out), transform .9s var(--mkr-ease-out); } .mkr-hero__slide.is-active .mkr-hero__copy > * { opacity: 1; transform: none; } .mkr-hero__slide.is-active .mkr-hero__copy > :nth-child(2) { transition-delay: 90ms; } .mkr-hero__slide.is-active .mkr-hero__copy > :nth-child(3) { transition-delay: 180ms; } .mkr-hero__slide.is-active .mkr-hero__copy > :nth-child(4) { transition-delay: 260ms; } .mkr-hero__nav { position: absolute; z-index: 4; inset-inline: clamp(28px, 7vw, 110px) 36px; inset-block-end: 32px; display: flex; align-items: center; justify-content: space-between; color: var(--mkr-hero-fg, #141414); } .mkr-hero__dots { display: flex; gap: 4px; } .mkr-hero__dots button { inline-size: 44px; block-size: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; } .mkr-hero__dots span { inline-size: 10px; block-size: 10px; border: 1.5px solid currentColor; transform: rotate(45deg); transition: inline-size .3s, block-size .3s, background-color .3s; } .mkr-hero__dots .is-active span { inline-size: 14px; block-size: 14px; background: currentColor; } .mkr-hero__arrows { display: flex; align-items: center; gap: 12px; } .mkr-hero__arrows .mkr-counter { color: currentColor; min-inline-size: 0; } .mkr-hero__arrows .mkr-round { border-color: currentColor; color: currentColor; } .mkr-hero__arrows .mkr-round--solid { background: currentColor; } .mkr-hero__arrows .mkr-round--solid svg { color: var(--mkr-hero-bg, #f2e9de); } .mkr-hero__progress { position: absolute; z-index: 4; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: rgba(255, 255, 255, .18); } .mkr-hero__progress span { display: block; block-size: 100%; background: var(--mkr-hero-accent, var(--mkr-primary)); transform-origin: inline-start; transform: scaleX(var(--p, 0)); } @media (max-width: 760px) { .mkr-hero__in { block-size: auto; aspect-ratio: auto; min-block-size: 640px; } .mkr-hero__slide::after { background: linear-gradient(to top, var(--h-scrim) 0%, color-mix(in srgb, var(--h-scrim) 80%, transparent) 50%, transparent 78%) !important; } .mkr-hero__copy { inset-block: auto 90px; inset-inline: 20px; inline-size: auto; } .mkr-hero__nav { inset-inline: 12px 16px; inset-block-end: 18px; } .mkr-hero__arrows .mkr-round { display: none; } } /* ------------------------------------------------ Category row */ .mkr-catrow { padding-block-start: 24px; } .mkr-catrow__grid { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px; } .mkr-catrow__tile { position: relative; display: block; border-radius: var(--mkr-radius); overflow: hidden; } .mkr-catrow__img { aspect-ratio: 4 / 4.6; border-radius: inherit; } .mkr-catrow__cap { position: absolute; z-index: 3; inset-inline: 12px; inset-block-end: 12px; padding: 12px 16px; border-radius: 14px; background: var(--mkr-paper); display: flex; justify-content: space-between; align-items: center; } .mkr-catrow__cap strong { font-size: 16px; font-weight: 600; color: var(--mkr-ink); } .mkr-catrow__cap .mkr-num { font-size: 12px; color: var(--mkr-primary); } @media (max-width: 1100px) { .mkr-catrow__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .mkr-catrow__tile { scroll-snap-align: start; } } @media (max-width: 600px) { .mkr-catrow__grid { grid-auto-columns: 62%; } } /* ------------------------------------------------ Products tabs */ .mkr-ptabs__panel { animation: mkr-fade .5s var(--mkr-ease-out); } .mkr-ptabs__more { display: flex; justify-content: center; margin-block-start: 36px; } @keyframes mkr-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------ Marquee */ .mkr-marquee { --m-bg: var(--mkr-primary); --m-fg: var(--mkr-bg); background: var(--m-bg); color: var(--m-fg); overflow: hidden; } .mkr-marquee--dark { --m-bg: var(--mkr-ink); } .mkr-marquee--sand { --m-bg: var(--mkr-sand); --m-fg: var(--mkr-ink); } .mkr-marquee__track { display: flex; min-block-size: 76px; align-items: center; } .mkr-marquee__row { display: flex; align-items: center; gap: 36px; padding-inline-end: 36px; white-space: nowrap; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; animation: mkr-marq var(--speed, 40s) linear infinite; flex-shrink: 0; } .mkr-marquee__row i { inline-size: 9px; block-size: 9px; background: currentColor; transform: rotate(45deg); flex-shrink: 0; } .mkr-marquee:hover .mkr-marquee__row { animation-play-state: paused; } @keyframes mkr-marq { to { transform: translateX(calc(-100% * var(--mkr-dir))); } } [dir="rtl"] .mkr-marquee__row { animation-name: mkr-marq-rtl; } @keyframes mkr-marq-rtl { to { transform: translateX(100%); } } /* ------------------------------------------------ Shop the look */ .mkr-look__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 420px); gap: clamp(32px, 4vw, 64px); align-items: center; } .mkr-look__media { position: relative; } .mkr-look__img { aspect-ratio: 5 / 5.4; border-radius: 28px; } /* Hotspot layer: physical percentages from the photo's top-left, same in RTL and LTR */ .mkr-look__layer { position: absolute; inset: 0; z-index: 4; direction: ltr; pointer-events: none; } .mkr-look__layer > * { pointer-events: auto; } .mkr-look__spot { position: absolute; z-index: 3; inline-size: 48px; block-size: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .mkr-look__dot { position: relative; inline-size: 24px; block-size: 24px; background: rgba(20, 20, 20, .82); border: 3px solid var(--mkr-paper); transform: rotate(45deg); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .45); transition: background-color .3s, transform .35s var(--mkr-ease-out); } .mkr-look__dot::after { content: ""; position: absolute; inset: -9px; border: 1.5px solid rgba(255, 253, 249, .85); opacity: 0; animation: mkr-ring 2.6s ease-out infinite; } .mkr-look__spot b { position: absolute; inset-block-start: calc(100% - 6px); font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); letter-spacing: .04em; } .mkr-look__spot:hover .mkr-look__dot { transform: rotate(45deg) scale(1.12); } .mkr-look__spot.is-active { z-index: 4; } .mkr-look__spot.is-active .mkr-look__dot { background: var(--mkr-primary); transform: rotate(45deg) scale(1.15); } .mkr-look__spot.is-active .mkr-look__dot::after { animation: none; opacity: 1; border-color: rgba(166, 31, 35, .55); } .mkr-look__spot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; } @keyframes mkr-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } /* Card: placed by JS (left/top in px), clamped inside the photo, above or below its spot */ .mkr-look__pop { position: absolute; z-index: 2; inline-size: 290px; max-inline-size: calc(100% - 24px); opacity: 0; translate: 0 8px; transition: opacity .3s var(--mkr-ease-out), translate .4s var(--mkr-ease-out); } .mkr-look__pop.is-shown { opacity: 1; translate: 0 0; } [dir="rtl"] .mkr-look__pop { direction: rtl; } [dir="ltr"] .mkr-look__pop { direction: ltr; } [dir="rtl"] .mkr-look__caret { direction: ltr; } .mkr-look__pop[hidden] { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; } .mkr-look__card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; background: rgba(255, 253, 249, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -20px rgba(20, 20, 20, .55); color: var(--mkr-ink); } .mkr-look__card:hover { color: var(--mkr-ink); } .mkr-look__caret { position: absolute; inline-size: 14px; block-size: 14px; background: rgba(255, 253, 249, .97); transform: rotate(45deg); left: var(--cx, 50%); margin-left: -7px; z-index: -1; } .mkr-look__pop[data-side="below"] .mkr-look__caret { top: -6px; } .mkr-look__pop[data-side="above"] .mkr-look__caret { bottom: -6px; } .mkr-look__thumb { inline-size: 64px; aspect-ratio: 4 / 5; flex-shrink: 0; border-radius: 12px; --mkr-cutbg: var(--mkr-paper); } .mkr-look__info { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .mkr-look__info small { color: var(--mkr-primary); font-size: 11px; font-weight: 600; } .mkr-look__info strong { font-size: 15px; color: var(--mkr-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkr-look__price { font-size: 14px; color: var(--mkr-ink); font-weight: 600; } .mkr-look__go { inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--mkr-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .3s, transform .4s var(--mkr-ease-out); } .mkr-look__card:hover .mkr-look__go { background: var(--mkr-primary-dark); transform: rotate(-12deg); } .mkr-look__qv { display: flex; align-items: center; justify-content: center; gap: 6px; inline-size: 100%; margin-block-start: 6px; min-block-size: 36px; border: 0; border-radius: 999px; background: rgba(20, 20, 20, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; } .mkr-look__qv:hover { background: var(--mkr-ink); } .mkr-look__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } .mkr-look__list { inline-size: 100%; display: flex; flex-direction: column; gap: 8px; } .mkr-look__list button { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 68px; padding: 8px 14px 8px 8px; border: 1px solid transparent; border-radius: 18px; background: transparent; text-align: start; color: var(--mkr-ink); transition: background-color .3s, border-color .3s, box-shadow .3s; } [dir="rtl"] .mkr-look__list button { padding: 8px 8px 8px 14px; } .mkr-look__list button:hover { background: rgba(255, 253, 249, .6); border-color: var(--mkr-line); } .mkr-look__list button.is-active { background: var(--mkr-paper); border-color: transparent; box-shadow: var(--mkr-shadow-s); } .mkr-look__list button.is-active::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; inline-size: 3px; border-radius: 3px; background: var(--mkr-primary); } .mkr-look__ln { font-size: 13px; color: var(--mkr-primary); min-inline-size: 22px; } .mkr-look__lthumb { inline-size: 44px; aspect-ratio: 4 / 5; border-radius: 10px; flex-shrink: 0; --mkr-cutbg: var(--mkr-bg); } .mkr-look__list button.is-active .mkr-look__lthumb { --mkr-cutbg: var(--mkr-paper); } .mkr-look__ltext { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; } .mkr-look__ltext strong { font-size: 15px; font-weight: 600; } .mkr-look__ltext small { font-size: 12px; color: var(--mkr-muted); } .mkr-look__lprice { font-size: 14px; font-weight: 600; white-space: nowrap; } @media (max-width: 900px) { .mkr-look__grid { grid-template-columns: minmax(0, 1fr); } .mkr-look__pop { inline-size: auto; } } /* ------------------------------------------------ Social mosaic */ .mkr-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(150px, 14vw, 230px)); gap: 12px; } .mkr-mosaic__item { border-radius: 18px; overflow: hidden; } .mkr-mosaic__item .mkr-frame { block-size: 100%; border-radius: 18px; } .mkr-mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .mkr-mosaic__item:nth-child(4), .mkr-mosaic__item:nth-child(5) { grid-column: span 2; } @media (max-width: 760px) { .mkr-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; } .mkr-mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .mkr-mosaic__item:nth-child(4), .mkr-mosaic__item:nth-child(5) { grid-column: auto; } .mkr-mosaic__item:nth-child(n+6) { display: none; } } /* ------------------------------------------------ Page stage */ .mkr-pstage { padding-block-start: 20px; } .mkr-pstage__in { position: relative; overflow: hidden; border-radius: var(--mkr-r-stage); } .mkr-pstage--stage .mkr-pstage__in { background: var(--mkr-sand); min-block-size: clamp(300px, 26vw, 380px); display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 420px); gap: 32px; align-items: stretch; padding: clamp(20px, 2.4vw, 32px); padding-inline-start: clamp(28px, 6.6vw, 96px); } .mkr-pstage__ghost { position: absolute; inset-block-end: -.3em; inset-inline-end: 30%; font-family: var(--mkr-font-num); font-size: clamp(200px, 26vw, 380px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--mkr-primary-rgb), .2); pointer-events: none; white-space: nowrap; } .mkr-pstage__ghost.is-long { font-size: clamp(120px, 15vw, 230px); inset-block-end: -.22em; inset-inline-end: 22%; } .mkr-pstage__ghost.is-xlong { font-size: clamp(84px, 9.5vw, 150px); inset-block-end: -.18em; inset-inline-end: 18%; -webkit-text-stroke-width: 1.2px; } .mkr-pstage__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-block: 24px; } .mkr-pstage__title { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.12; } .mkr-pstage__title .mkr-latin { font-size: .4em; color: var(--mkr-primary); letter-spacing: 0; } .mkr-pstage__text { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.9; color: var(--mkr-body); max-inline-size: 54ch; } .mkr-pstage__note { display: flex; align-items: center; gap: 12px; font-size: 14px; } .mkr-pstage__note a { color: var(--mkr-ink); font-weight: 500; direction: ltr; unicode-bidi: isolate; } .mkr-pstage__note .mkr-diamond { inline-size: 6px; block-size: 6px; } .mkr-pstage__img { border-radius: 24px; min-block-size: 220px; --mkr-cutbg: var(--mkr-sand); } .mkr-pstage__olive { position: absolute; inset-block-start: -20px; inset-inline-end: calc(clamp(260px, 28%, 420px) - 60px); inline-size: 200px; transform: rotate(-20deg); z-index: 3; pointer-events: none; } .mkr-pstage--cine .mkr-pstage__in { background: var(--mkr-ink); min-block-size: clamp(520px, 72vh, 700px); display: flex; align-items: center; } .mkr-pstage__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .mkr-pstage--cine .mkr-pstage__in::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, rgba(20, 20, 20, .96) 0%, rgba(20, 20, 20, .78) 45%, rgba(20, 20, 20, .2) 100%); } [dir="ltr"] .mkr-pstage--cine .mkr-pstage__in::before { background: linear-gradient(to right, rgba(20, 20, 20, .96) 0%, rgba(20, 20, 20, .78) 45%, rgba(20, 20, 20, .2) 100%); } .mkr-pstage--cine .mkr-pstage__copy { max-inline-size: 760px; padding-inline-start: clamp(28px, 6.6vw, 96px); padding-block: 80px 120px; } .mkr-pstage--cine .mkr-pstage__title { color: var(--mkr-bg); font-size: clamp(34px, 3.9vw, 58px); line-height: 1.35; font-weight: 700; } .mkr-pstage--cine .mkr-pstage__title em { font-weight: 300; } .mkr-pstage--cine .mkr-pstage__text { color: #d9cfc2; } .mkr-pstage--cine .mkr-crumbs { color: #9c9187; } .mkr-pstage--cine .mkr-crumbs [aria-current] { color: var(--mkr-bg); } .mkr-pstage__dm { color: var(--mkr-rose); } .mkr-pstage__band { position: absolute; z-index: 2; inset-block-end: 36px; inset-inline-start: clamp(28px, 6.6vw, 96px); inline-size: min(460px, 60%); margin: 0; opacity: .85; } @media (max-width: 760px) { .mkr-pstage--stage .mkr-pstage__in { grid-template-columns: 1fr; padding: 22px; } .mkr-pstage__img { min-block-size: 200px; } .mkr-pstage__olive { inline-size: 140px; inset-inline-end: 10px; } .mkr-pstage__ghost, .mkr-pstage__ghost.is-long, .mkr-pstage__ghost.is-xlong { inset-inline-end: -20px; } .mkr-pstage__ghost.is-long { font-size: clamp(90px, 24vw, 140px); } .mkr-pstage__ghost.is-xlong { font-size: clamp(56px, 14.5vw, 92px); inset-inline-end: -8px; } } /* ------------------------------------------------ Story */ .mkr-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 110px); align-items: center; } .mkr-story__copy { display: flex; flex-direction: column; gap: 22px; } .mkr-story__media { position: relative; aspect-ratio: 1 / 1.1; } .mkr-story__main { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 72%; block-size: 88%; border-radius: 24px; } .mkr-story__second { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 46%; aspect-ratio: 4 / 5; border-radius: 20px; border: 10px solid var(--mkr-bg); } .mkr-story__olive { position: absolute; inset-block-end: 4%; inset-inline-start: 34%; inline-size: 40%; transform: rotate(-12deg); z-index: 3; } @media (max-width: 900px) { .mkr-story__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------ Stats */ .mkr-stats__card { padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; } .mkr-stats__item { display: flex; flex-direction: column; gap: 8px; padding-inline-end: 24px; border-inline-end: 1px solid #ede3d5; } .mkr-stats__item:last-child { border: 0; } .mkr-stats__num { font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--mkr-primary); } .mkr-stats__label { font-size: 15px; font-weight: 500; color: var(--mkr-ink); } @media (max-width: 760px) { .mkr-stats__card { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkr-stats__item { border: 0; padding: 0; } } /* ------------------------------------------------ Family */ .mkr-family { background: var(--mkr-primary); color: #fff; overflow: hidden; } .mkr-family .mkr-sec__title { color: #fff; } .mkr-family .mkr-eyebrow { color: #f6dada; } .mkr-family .mkr-lead { color: #f6dada; } .mkr-family__olive { position: absolute; inset-block-start: -40px; inset-inline-end: -60px; inline-size: 520px; opacity: .14; } .mkr-family__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 80px); align-items: center; } .mkr-family__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .mkr-family__brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mkr-family__brand { background: var(--b-bg); color: var(--b-fg); border-radius: var(--mkr-radius); padding: 30px 22px; min-block-size: 150px; display: flex; flex-direction: column; gap: 12px; } .mkr-family__brand strong { font-size: 22px; font-weight: 700; } .mkr-family__brand span { font-size: 13px; line-height: 1.7; opacity: .8; color: var(--mkr-body); } .mkr-family__brand:hover { color: var(--b-fg); } .mkr-family__brand[style*="#141414"] span { color: #cfc4b6; } .mkr-family__brand[aria-current] { outline: 2px solid var(--mkr-bg); outline-offset: 4px; } @media (max-width: 900px) { .mkr-family__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .mkr-family__brands { grid-template-columns: 1fr; } } /* ------------------------------------------------ CTA band */ .mkr-cta--plain .mkr-cta__box { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .mkr-cta__title { font-size: clamp(26px, 2.8vw, 40px); } .mkr-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; } .mkr-cta--red .mkr-cta__box { position: relative; overflow: hidden; background: var(--mkr-primary); color: #fff; border-radius: var(--mkr-r-l); padding: clamp(28px, 3vw, 44px) clamp(28px, 3.4vw, 48px); display: flex; align-items: center; gap: 32px; } .mkr-cta--red .mkr-cta__title { color: #fff; font-size: clamp(22px, 2vw, 28px); } .mkr-cta--red p { color: #f6dada; margin-block-start: 6px; } .mkr-cta__copy { flex: 1; } .mkr-cta__motif { block-size: 110px; inline-size: auto; flex-shrink: 0; } @media (max-width: 760px) { .mkr-cta--red .mkr-cta__box { flex-direction: column; align-items: flex-start; } .mkr-cta__motif { block-size: 80px; } } /* ------------------------------------------------ Branches map */ .mkr-bmap__grid { display: grid; grid-template-columns: clamp(320px, 34%, 460px) minmax(0, 1fr); gap: 32px; align-items: start; } .mkr-bmap__side { display: flex; flex-direction: column; gap: 14px; } .mkr-bmap__side .mkr-segment { align-self: flex-start; } .mkr-bmap__list { display: flex; flex-direction: column; gap: 12px; } .mkr-bmap__item { display: flex; gap: 18px; align-items: flex-start; text-align: start; border: 1.5px solid transparent; border-radius: var(--mkr-radius); background: var(--mkr-paper); color: var(--mkr-ink); padding: 22px 24px; transition: background-color .3s, color .3s, border-color .3s, opacity .3s; } .mkr-bmap__item[hidden] { display: none; } .mkr-bmap__item .mkr-num { font-size: 26px; line-height: 1; color: var(--mkr-primary); } .mkr-bmap__item.is-active { background: var(--mkr-ink); color: var(--mkr-bg); } .mkr-bmap__item.is-active .mkr-num { color: var(--mkr-rose); } .mkr-bmap__item.is-active .mkr-pill:not(.is-open) { background: rgba(242, 233, 222, .15); color: var(--mkr-bg); } .mkr-bmap__body { flex: 1; display: flex; flex-direction: column; gap: 8px; } .mkr-bmap__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .mkr-bmap__row strong { font-size: 18px; font-weight: 600; } .mkr-bmap__addr { font-size: 13px; line-height: 1.7; opacity: .85; } .mkr-bmap__hours { font-size: 12px; opacity: .7; } .mkr-bmap__map { position: sticky; inset-block-start: calc(var(--mkr-header-h) + 16px); block-size: clamp(560px, 78vh, 820px); border-radius: 30px; overflow: hidden; background: #e9dfd1; background-image: linear-gradient(rgba(20, 20, 20, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 20, .05) 1px, transparent 1px); background-size: 56px 56px; } .mkr-bmap__drawn, .mkr-bmap__drawn svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } .mkr-bmap__iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; filter: saturate(.6) sepia(.15); } .mkr-bmap__pin { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: 36px; block-size: 36px; margin: -18px; border: 3px solid var(--mkr-paper); background: var(--mkr-ink); transform: rotate(45deg); box-shadow: 0 10px 20px -8px rgba(20, 20, 20, .5); display: flex; align-items: center; justify-content: center; transition: inline-size .3s, block-size .3s, background-color .3s, margin .3s; z-index: 2; } .mkr-bmap__pin[hidden] { display: none; } .mkr-bmap__pin .mkr-num { transform: rotate(-45deg); color: #fff; font-size: 13px; } .mkr-bmap__pin.is-active { inline-size: 48px; block-size: 48px; margin: -24px; background: var(--mkr-primary); z-index: 3; } .mkr-bmap__detail { position: absolute; z-index: 4; inset-inline: 24px; inset-block-end: 24px; padding: 22px 26px; display: flex; gap: 22px; align-items: center; box-shadow: 0 24px 50px -24px rgba(20, 20, 20, .45); animation: mkr-fade .4s var(--mkr-ease-out); } .mkr-bmap__photo { inline-size: 140px; aspect-ratio: 5 / 4; flex-shrink: 0; } .mkr-bmap__info { flex: 1; display: flex; flex-direction: column; gap: 6px; } .mkr-bmap__info small { font-size: 12px; color: var(--mkr-primary); } .mkr-bmap__info strong { font-size: 22px; font-weight: 600; color: var(--mkr-ink); } .mkr-bmap__info span { font-size: 13px; color: var(--mkr-body); } .mkr-bmap__acts { display: flex; flex-direction: column; gap: 8px; } .mkr-bmap__acts div { display: flex; gap: 8px; } @media (max-width: 1100px) { .mkr-bmap__grid { grid-template-columns: 1fr; } .mkr-bmap__map { position: relative; inset: auto; block-size: 560px; order: -1; } .mkr-bmap__detail { flex-wrap: wrap; inset-inline: 12px; inset-block-end: 12px; padding: 16px; } .mkr-bmap__photo { display: none; } } /* ------------------------------------------------ Contact channels */ .mkr-channels__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .mkr-channel { padding: 26px; display: flex; flex-direction: column; gap: 12px; color: var(--mkr-ink); } .mkr-channel.is-dark { background: var(--mkr-ink); color: var(--mkr-bg); } .mkr-channel__icon { inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--mkr-primary); color: #fff; display: flex; align-items: center; justify-content: center; } .mkr-channel small { font-size: 13px; opacity: .75; } .mkr-channel strong { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; } .mkr-channel span:last-child { font-size: 12px; opacity: .75; font-weight: 300; } .mkr-channel:hover { color: inherit; } .mkr-channels__grid { margin-block-start: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mkr-channels__grid.has-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto 1fr; } .mkr-channels__grid.has-form .mkr-channels__form { grid-row: span 2; } .mkr-channels__form { padding: clamp(28px, 3vw, 44px); } .mkr-channels__hours { position: relative; overflow: hidden; background: var(--mkr-sand); border-radius: var(--mkr-r-l); padding: 34px; display: flex; flex-direction: column; gap: 16px; } .mkr-channels__hours h3, .mkr-channels__social h3 { font-size: 20px; position: relative; } .mkr-channels__hours dl { margin: 0; display: flex; flex-direction: column; gap: 12px; position: relative; } .mkr-channels__hours dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; } .mkr-channels__hours dt { color: var(--mkr-ink); font-weight: 400; } .mkr-channels__hours dd { margin: 0; white-space: nowrap; color: var(--mkr-body); } .mkr-channels__olive { position: absolute; inset-block-end: -20px; inset-inline-end: -40px; inline-size: 240px; opacity: .45; } .mkr-channels__social { padding: 30px; display: flex; flex-direction: column; gap: 16px; } .mkr-social--lg a { inline-size: 48px; block-size: 48px; } @media (max-width: 1100px) { .mkr-channels__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkr-channels__grid, .mkr-channels__grid.has-form { grid-template-columns: 1fr; } .mkr-channels__grid.has-form .mkr-channels__form { grid-row: auto; } } /* ------------------------------------------------ Size guide */ .mkr-sizes__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block-end: var(--mkr-space-s); } .mkr-sizes__step { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .mkr-sizes__step .mkr-frame { aspect-ratio: 16 / 11; } .mkr-sizes__stephead { display: flex; align-items: baseline; gap: 10px; } .mkr-sizes__stephead .mkr-num { font-size: 24px; color: var(--mkr-primary); } .mkr-sizes__stephead strong { font-size: 18px; font-weight: 600; color: var(--mkr-ink); } .mkr-sizes__steptext { font-size: 13.5px; line-height: 1.8; color: var(--mkr-body); } .mkr-table-wrap { overflow-x: auto; padding: 0; } .mkr-table { inline-size: 100%; border-collapse: collapse; font-size: 15px; min-inline-size: 560px; } .mkr-table th, .mkr-table td { padding: 16px 24px; text-align: start; } .mkr-table thead th { background: var(--mkr-ink); color: var(--mkr-bg); font-weight: 500; font-size: 14px; } .mkr-table tbody tr { border-block-start: 1px solid #ede3d5; } .mkr-table tbody tr:nth-child(even) { background: #fbf6ef; } .mkr-table tbody th { font-size: 18px; color: var(--mkr-primary); font-weight: 500; } .mkr-table td { color: var(--mkr-muted); } .mkr-table-note { padding: 14px 24px 20px; font-size: 13px; color: var(--mkr-muted); } @media (max-width: 900px) { .mkr-sizes__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------ FAQ */ .mkr-faq__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; } .mkr-faq__side { display: flex; flex-direction: column; gap: 20px; position: sticky; inset-block-start: calc(var(--mkr-header-h) + 16px); } .mkr-faq__groups { display: flex; flex-direction: column; gap: 8px; } .mkr-faq__groups button { min-block-size: 60px; border: 0; border-radius: 18px; background: var(--mkr-paper); color: var(--mkr-ink); padding-inline: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; text-align: start; transition: background-color .3s, color .3s; } .mkr-faq__groups button.is-active { background: var(--mkr-ink); color: var(--mkr-bg); font-weight: 600; } .mkr-faq__groups .mkr-num { font-size: 13px; opacity: .7; } .mkr-faq__help { background: var(--mkr-ink); color: var(--mkr-bg); border-radius: var(--mkr-radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .mkr-faq__help .mkr-motif { block-size: 70px; } .mkr-faq__help a { color: var(--mkr-rose); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .mkr-faq__panels { padding: 16px clamp(20px, 3vw, 40px); } .mkr-acc { border-block-end: 1px solid #ede3d5; } .mkr-acc:last-child { border: 0; } .mkr-acc summary { list-style: none; min-block-size: 76px; display: flex; align-items: center; gap: 16px; cursor: pointer; font-size: 18px; font-weight: 500; color: var(--mkr-ink); } .mkr-acc summary::-webkit-details-marker { display: none; } .mkr-acc summary .mkr-num { font-size: 14px; color: var(--mkr-primary); } .mkr-acc__q { flex: 1; } .mkr-acc__sign { inline-size: 36px; block-size: 36px; border-radius: 50%; background: #f6eee3; position: relative; flex-shrink: 0; transition: background-color .3s; } .mkr-acc__sign::before, .mkr-acc__sign::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 12px; block-size: 1.5px; margin: -.75px -6px; background: var(--mkr-primary); transition: transform .3s; } .mkr-acc__sign::after { transform: rotate(90deg); } .mkr-acc[open] .mkr-acc__sign { background: var(--mkr-primary); } .mkr-acc[open] .mkr-acc__sign::before, .mkr-acc[open] .mkr-acc__sign::after { background: #fff; } .mkr-acc[open] .mkr-acc__sign::after { transform: rotate(0); } .mkr-acc__a { padding: 0 52px 26px 32px; font-size: 15px; line-height: 2; color: var(--mkr-body); } .mkr-acc__a p { margin: 0 0 .6em; } @media (max-width: 900px) { .mkr-faq__grid { grid-template-columns: 1fr; } .mkr-faq__side { position: static; } .mkr-faq__groups { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .mkr-faq__groups button { white-space: nowrap; min-block-size: 44px; gap: 10px; } .mkr-faq__help { display: none; } .mkr-acc summary { font-size: 16px; } .mkr-acc__a { padding-inline: 0; } } /* ------------------------------------------------ Theme form (contact) */ .mkr-form { display: flex; flex-direction: column; gap: 18px; } .mkr-form__hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .mkr-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .mkr-form__field { margin: 0; display: flex; flex-direction: column; gap: 8px; } .mkr-form__field--wide { grid-column: 1 / -1; } .mkr-form__field label { font-size: 13px; font-weight: 500; color: var(--mkr-ink); } .mkr-form__field label b { color: var(--mkr-primary); } .mkr-form__field input, .mkr-form__field textarea { inline-size: 100%; min-block-size: 52px; border-radius: 14px; border: 1px solid var(--mkr-line); background: var(--mkr-bg); padding: 12px 18px; font-size: 14px; color: var(--mkr-ink); transition: border-color .25s, box-shadow .25s; } .mkr-form__field textarea { resize: vertical; min-block-size: 130px; } .mkr-form__field .mkr-select { inline-size: 100%; min-block-size: 52px; border-radius: 14px; background-color: var(--mkr-bg); } .mkr-form__field input:focus, .mkr-form__field textarea:focus, .mkr-form__field select:focus { outline: 0; border-color: var(--mkr-primary); box-shadow: 0 0 0 3px rgba(var(--mkr-primary-rgb), .12); } .mkr-form__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mkr-form__note { font-size: 12px; color: var(--mkr-muted); } .mkr-form.is-busy { opacity: .7; } .mkr-form__status { margin: 0; padding: 14px 18px; border-radius: 14px; font-size: 14px; } .mkr-form__status.is-ok { background: #e4f0e6; color: var(--mkr-success); } .mkr-form__status.is-error { background: #fbeceb; color: var(--mkr-primary-dark); } @media (max-width: 640px) { .mkr-form__grid { grid-template-columns: minmax(0, 1fr); } } .mkr-form { position: relative; } .mkr-form__field input::placeholder, .mkr-form__field textarea::placeholder { color: #ab9f92; font-weight: 300; } .mkr-form__err { display: none; font-size: 12px; color: var(--mkr-primary); } .mkr-form__field.is-invalid input, .mkr-form__field.is-invalid textarea { border-color: var(--mkr-primary); background: #fdf5f4; } .mkr-form__field.is-invalid .mkr-form__err { display: block; animation: mkr-fade .3s var(--mkr-ease-out); } .mkr-form__done { display: none; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px 10px 10px; } .mkr-form__done strong { font-size: 22px; color: var(--mkr-ink); } .mkr-form__done span:not(.mkr-form__check) { font-size: 14px; color: var(--mkr-body); } .mkr-form__check { inline-size: 64px; block-size: 64px; background: var(--mkr-primary); color: #fff; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; margin-block-end: 12px; animation: mkr-pop .5s var(--mkr-ease-out); } .mkr-form__check .mkr-icon { transform: rotate(-45deg); stroke-width: 2.2; } .mkr-form__done .mkr-link { border: 0; background: none; cursor: pointer; color: var(--mkr-primary); font-weight: 600; margin-block-start: 6px; } .mkr-form.is-sent > :not(.mkr-form__done) { display: none; } .mkr-form.is-sent .mkr-form__done { display: flex; } /* ------------------------------------------------ Category Row — cards layout (name under the image) */ .mkr-catrow--cards .mkr-catrow__grid { gap: 16px; } .mkr-catcard { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px; border-radius: 24px; background: var(--mkr-paper); color: var(--mkr-ink); box-shadow: 0 1px 2px rgba(var(--mkr-ink-rgb), .04), 0 18px 34px -26px rgba(var(--mkr-ink-rgb), .35); transition: transform .5s var(--mkr-ease-out), box-shadow .5s var(--mkr-ease-out); isolation: isolate; } .mkr-catcard:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(var(--mkr-ink-rgb), .05), 0 30px 50px -28px rgba(var(--mkr-primary-rgb), .45); } .mkr-catcard__media { position: relative; display: block; border-radius: 17px; overflow: hidden; } .mkr-catcard__img { aspect-ratio: 4 / 4.9; border-radius: inherit; --mkr-cutbg: var(--mkr-paper); } .mkr-catcard__img img { transition: transform 1.1s var(--mkr-ease-out); } .mkr-catcard:hover .mkr-catcard__img img { transform: scale(1.06); } .mkr-catcard__num { position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-end: 12px; min-inline-size: 38px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 253, 249, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--mkr-primary); font-size: 12px; text-align: center; } .mkr-catcard__body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 10px 10px; } .mkr-catcard__body::before { content: ""; position: absolute; inset-block-start: 8px; inset-inline: 10px; block-size: 1px; background: repeating-linear-gradient(90deg, var(--mkr-line) 0 6px, transparent 6px 11px); } .mkr-catcard__body::after { content: ""; position: absolute; inset-block-start: 8px; inset-inline-start: 10px; block-size: 1px; inline-size: calc(100% - 20px); background: repeating-linear-gradient(90deg, var(--mkr-primary) 0 6px, transparent 6px 11px); transform: scaleX(0); transform-origin: var(--mkr-origin-start, right); transition: transform .7s var(--mkr-ease-out); } [dir="ltr"] .mkr-catcard__body::after { --mkr-origin-start: left; } .mkr-catcard:hover .mkr-catcard__body::after { transform: scaleX(1); } .mkr-catcard__text { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; } .mkr-catcard__name { font-size: clamp(15px, 1.2vw, 19px); font-weight: 700; line-height: 1.3; color: var(--mkr-ink); } .mkr-catcard__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mkr-muted); white-space: nowrap; } .mkr-catcard__meta .mkr-latin { font-size: 13px; color: var(--mkr-primary); } .mkr-catcard__meta .mkr-latin + .mkr-catcard__count::before { content: "·"; margin-inline-end: 8px; color: var(--mkr-line); } .mkr-catcard__go { position: absolute; z-index: 4; inset-block-start: 0; inset-inline-end: 14px; transform: translateY(-62%); inline-size: 40px; block-size: 40px; border-radius: 50%; border: 3px solid var(--mkr-paper); background: var(--mkr-ink); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--mkr-ease-out); } .mkr-catcard:hover .mkr-catcard__go { background: var(--mkr-primary); transform: translateY(-62%) rotate(-12deg); } .mkr-catcard:focus-visible { outline: 2px solid var(--mkr-primary); outline-offset: 4px; } @media (max-width: 1280px) and (min-width: 1101px) { .mkr-catcard__meta .mkr-latin { display: none; } .mkr-catcard__meta .mkr-latin + .mkr-catcard__count::before { display: none; } } @media (max-width: 1100px) { .mkr-catrow--cards .mkr-catrow__grid { grid-auto-columns: 34%; gap: 12px; padding-block: 4px 18px; } .mkr-catcard:hover { transform: none; } } @media (max-width: 600px) { .mkr-catrow--cards .mkr-catrow__grid { grid-auto-columns: 46%; } .mkr-catcard { padding: 6px; border-radius: 20px; } .mkr-catcard__body { padding: 14px 6px 6px; } .mkr-catcard__go { inline-size: 34px; block-size: 34px; inset-inline-end: 10px; } } /* ------------------------------------------------ Offers — calm, editorial */ .mkr-offers__head { align-items: end; } .mkr-offers__all { white-space: nowrap; } .mkr-ofeat { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 56px); align-items: center; padding: clamp(14px, 1.6vw, 22px); border-radius: clamp(26px, 2.6vw, 36px); background: var(--mkr-paper); box-shadow: 0 1px 2px rgba(var(--mkr-ink-rgb), .04), 0 40px 70px -48px rgba(var(--mkr-ink-rgb), .45); isolation: isolate; } .mkr-ofeat::after { content: ""; position: absolute; inset: 10px; border-radius: inherit; border: 1px dashed rgba(var(--mkr-primary-rgb), .16); pointer-events: none; } .mkr-ofeat__media { position: relative; display: block; border-radius: clamp(20px, 2vw, 28px); overflow: hidden; } .mkr-ofeat__img { aspect-ratio: 16 / 11; --mkr-cutbg: var(--mkr-paper); } .mkr-ofeat__img img { transition: transform 1.4s var(--mkr-ease-out); } .mkr-ofeat:hover .mkr-ofeat__img img { transform: scale(1.04); } .mkr-ofeat__medal { position: absolute; z-index: 3; inset-block-end: 18px; inset-inline-start: 18px; inline-size: 104px; block-size: 104px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(255, 253, 249, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 34px -18px rgba(var(--mkr-ink-rgb), .55); color: var(--mkr-primary); } .mkr-ofeat__medal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(var(--mkr-primary-rgb), .35); } .mkr-ofeat__medal b { font-size: 30px; line-height: 1; direction: ltr; unicode-bidi: isolate; } .mkr-ofeat__medal small { font-size: 11px; letter-spacing: .08em; color: var(--mkr-ink); } .mkr-ofeat__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(6px, 1.4vw, 18px) clamp(4px, 1vw, 12px); } .mkr-ofeat__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(var(--mkr-primary-rgb), .08); color: var(--mkr-primary); font-size: 12px; font-weight: 600; } .mkr-ofeat__title { margin: 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3; font-weight: 700; color: var(--mkr-ink); } .mkr-ofeat__title a { color: inherit; } .mkr-ofeat__text { margin: 0; max-inline-size: 46ch; font-size: 15px; line-height: 1.9; color: var(--mkr-body); } .mkr-ofeat__rule { display: block; inline-size: 120px; block-size: 1px; background: repeating-linear-gradient(90deg, var(--mkr-primary) 0 6px, transparent 6px 11px); opacity: .6; } .mkr-cd { display: flex; gap: 10px; } .mkr-cd__cell b { direction: ltr; unicode-bidi: isolate; } .mkr-cd__cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-inline-size: 68px; padding: 12px 8px 10px; border-radius: 16px; background: var(--mkr-bg); border: 1px solid rgba(var(--mkr-ink-rgb), .05); } .mkr-cd__cell b { font-size: 28px; line-height: 1; color: var(--mkr-ink); font-variant-numeric: tabular-nums; transition: opacity .3s; } .mkr-cd__cell small { font-size: 11px; color: var(--mkr-muted); } .mkr-cd__cell b.is-tick { animation: mkrTick .5s var(--mkr-ease-out); } @keyframes mkrTick { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .mkr-ofeat__ends { margin: 0; font-size: 13px; color: var(--mkr-muted); } .mkr-ofeat__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-block-start: 4px; } .mkr-ofeat__count { font-size: 13px; color: var(--mkr-muted); } .mkr-oflist { display: grid; grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); gap: 16px; margin-block-start: 18px; } .mkr-ofcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px; padding-inline-end: 16px; border-radius: 22px; background: var(--mkr-paper); box-shadow: 0 1px 2px rgba(var(--mkr-ink-rgb), .04), 0 22px 40px -32px rgba(var(--mkr-ink-rgb), .45); color: var(--mkr-ink); transition: transform .45s var(--mkr-ease-out), box-shadow .45s var(--mkr-ease-out); } .mkr-ofcard:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(var(--mkr-ink-rgb), .05), 0 30px 50px -30px rgba(var(--mkr-primary-rgb), .4); color: var(--mkr-ink); } .mkr-ofcard__img { flex-shrink: 0; inline-size: 92px; aspect-ratio: 4 / 5; border-radius: 16px; --mkr-cutbg: var(--mkr-paper); } .mkr-ofcard__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; } .mkr-ofcard__badge { color: var(--mkr-primary); font-size: 11px; font-weight: 600; } .mkr-ofcard__body strong { font-size: 15px; line-height: 1.45; } .mkr-ofcard__meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .mkr-ofcard__meta b { font-size: 20px; color: var(--mkr-primary); direction: ltr; unicode-bidi: isolate; } .mkr-ofcard__meta em { font-style: normal; font-size: 12px; color: var(--mkr-muted); } .mkr-ofcard__go { inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--mkr-line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .3s, border-color .3s, color .3s; } .mkr-ofcard:hover .mkr-ofcard__go { background: var(--mkr-primary); border-color: var(--mkr-primary); color: #fff; } .mkr-ofcard.is-soon { opacity: .82; } /* Offer page */ .mkr-offpage__crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; font-size: 13px; color: var(--mkr-muted); } .mkr-offpage__crumbs a { color: var(--mkr-muted); } .mkr-offpage__crumbs b { color: var(--mkr-ink); font-weight: 500; } .mkr-ofeat--page .mkr-ofeat__title { font-size: clamp(28px, 3.2vw, 46px); } .mkr-offarch__head { max-inline-size: 720px; } .mkr-offempty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; text-align: center; color: var(--mkr-primary); } .mkr-offempty p { margin: 0; color: var(--mkr-body); } .mkr-offempty strong { display: block; font-size: 20px; color: var(--mkr-ink); margin-block-end: 4px; } .mkr-offsoon__title { font-size: 20px; margin: 0 0 6px; } @media (max-width: 900px) { .mkr-ofeat { grid-template-columns: minmax(0, 1fr); } .mkr-oflist { grid-template-columns: minmax(0, 1fr); } .mkr-cd__cell { min-inline-size: 0; flex: 1; } .mkr-ofeat__medal { inline-size: 84px; block-size: 84px; } .mkr-ofeat__medal b { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .mkr-cd__cell b.is-tick { animation: none; } } /* ===================================================== Wholesale «تجار الجملة» (template-parts/sections/wholesale.php) */ .mkr-whs { padding-block-end: 0; } .mkr-whs__intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .mkr-whs__lead { margin: 18px 0 0; max-inline-size: 54ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 2; color: var(--mkr-body); } .mkr-whs__perks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .mkr-whs__perk { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--mkr-radius); background: var(--mkr-paper); } .mkr-whs__perk:nth-child(2) { margin-inline-start: clamp(0px, 3vw, 36px); } .mkr-whs__perk:nth-child(3) { margin-inline-start: clamp(0px, 6vw, 72px); } .mkr-whs__perkicon { display: grid; place-items: center; flex: none; inline-size: 50px; block-size: 50px; border-radius: 50%; background: rgba(var(--mkr-primary-rgb), .08); color: var(--mkr-primary); transition: background-color .3s, color .3s, transform .4s var(--mkr-ease-out); } .mkr-whs__perk:hover .mkr-whs__perkicon { background: var(--mkr-primary); color: #fff; transform: rotate(-8deg) scale(1.04); } .mkr-whs__perktxt { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; } .mkr-whs__perktxt strong { font-size: 15.5px; font-weight: 600; color: var(--mkr-ink); } .mkr-whs__perktxt small { font-size: 13px; line-height: 1.7; color: var(--mkr-muted); } .mkr-whs__how { margin-block-start: clamp(56px, 7vw, 96px); } .mkr-whs__howhead { margin-block-end: 28px; } .mkr-whs__steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .mkr-whs__steps::before { content: ""; position: absolute; inset-block-start: 46px; inset-inline: 40px; border-block-start: 1.5px dashed rgba(var(--mkr-primary-rgb), .35); pointer-events: none; } .mkr-whs__step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; border-radius: var(--mkr-radius); background: var(--mkr-paper); border: 1px solid var(--mkr-line); box-shadow: var(--mkr-shadow-s); transition: transform .4s var(--mkr-ease-out), box-shadow .4s, border-color .3s; } .mkr-whs__step:hover { transform: translateY(-4px); box-shadow: var(--mkr-shadow-hover); border-color: rgba(var(--mkr-primary-rgb), .3); } .mkr-whs__stepnum { position: absolute; inset-block-start: 18px; inset-inline-end: 20px; font-family: var(--mkr-font-num); font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--mkr-primary-rgb), .45); } .mkr-whs__stepicon { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--mkr-ink); color: #fff; box-shadow: 0 0 0 6px var(--mkr-paper); } .mkr-whs__step h3 { margin: 6px 0 0; font-size: 17px; font-weight: 600; color: var(--mkr-ink); } .mkr-whs__step p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--mkr-body); } .mkr-whs__band { margin-block-start: clamp(56px, 7vw, 96px); padding-block: 0 var(--mkr-space); } .mkr-whs__bandin { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--mkr-r-stage, 32px); background: radial-gradient(120% 90% at 100% 0%, rgba(var(--mkr-primary-rgb), .35), transparent 55%), var(--mkr-ink); color: #d9cfc2; overflow: hidden; } .mkr-whs__pitch { position: relative; z-index: 1; padding-block-start: 8px; } @media (min-width: 1025px) { .mkr-whs__pitch { position: sticky; inset-block-start: calc(var(--mkr-header-h, 90px) + 32px); } } .mkr-whs__pitch .mkr-sec__title { color: #fff; } .mkr-whs__pitch .mkr-sec__title em { color: var(--mkr-rose); } .mkr-whs__closing { margin: 18px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 2; color: #e8ddcf; } .mkr-whs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-block-start: 26px; } .mkr-whs__wa { display: inline-flex; align-items: center; gap: 10px; background: var(--mkr-wa, #1f9d55); color: #fff; border-color: transparent; } .mkr-whs__wa:hover { filter: brightness(1.06); } .mkr-whs__shop { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; text-decoration: none; border-block-end: 1px solid rgba(255, 255, 255, .35); padding-block-end: 2px; transition: border-color .25s, gap .3s var(--mkr-ease-out); } .mkr-whs__shop:hover { border-color: #fff; gap: 12px; } .mkr-whs__olive { position: absolute; inset-block-end: -60px; inset-inline-start: -40px; inline-size: 300px; opacity: .14; filter: brightness(3) grayscale(1); pointer-events: none; } .mkr-whs__formcard { position: relative; z-index: 1; padding: clamp(20px, 2.6vw, 34px); border-radius: var(--mkr-r-l, 24px); background: var(--mkr-paper); color: var(--mkr-body); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } /* Photo picker */ .mkr-form__label { font-size: 13px; font-weight: 500; color: var(--mkr-ink); } .mkr-form__label i { font-style: normal; font-size: 12px; color: var(--mkr-muted); } .mkr-drop { position: relative; display: flex; flex-direction: column; gap: 12px; } .mkr-drop__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .mkr-drop__zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; border: 1.5px dashed rgba(var(--mkr-primary-rgb), .4); border-radius: 18px; background: var(--mkr-bg); text-align: center; cursor: pointer; transition: border-color .25s, background-color .25s, transform .3s var(--mkr-ease-out); } .mkr-drop__zone:hover, .mkr-drop.is-over .mkr-drop__zone { border-style: solid; border-color: var(--mkr-primary); background: #fdf6f3; } .mkr-drop.is-over .mkr-drop__zone { transform: scale(1.01); } .mkr-drop__input:focus-visible + .mkr-drop__zone { outline: 2px solid var(--mkr-primary); outline-offset: 3px; } .mkr-drop__icon { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--mkr-primary); color: #fff; margin-block-end: 4px; } .mkr-drop.is-busy .mkr-drop__icon { animation: mkr-drop-pulse 1s ease-in-out infinite; } @keyframes mkr-drop-pulse { 50% { transform: scale(.9); opacity: .7; } } .mkr-drop__zone strong { font-size: 14.5px; font-weight: 600; color: var(--mkr-ink); } .mkr-drop__zone small { font-size: 12.5px; color: var(--mkr-muted); } .mkr-drop__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .mkr-drop__list:empty { display: none; } .mkr-drop__item { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--mkr-sand); box-shadow: 0 6px 14px -10px rgba(var(--mkr-ink-rgb), .6); animation: mkr-fade .35s var(--mkr-ease-out); } .mkr-drop__item img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .mkr-drop__n { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; min-inline-size: 22px; padding: 2px 6px; border-radius: 99px; background: rgba(20, 20, 20, .72); color: #fff; font-size: 11px; font-weight: 600; text-align: center; } .mkr-drop__x { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; display: grid; place-items: center; inline-size: 26px; block-size: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--mkr-ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: background-color .2s, color .2s; } .mkr-drop__x:hover, .mkr-drop__x:focus-visible { background: var(--mkr-primary); color: #fff; outline: 0; } .mkr-drop.has-files::after { content: attr(data-count); font-size: 12px; color: var(--mkr-muted); } .mkr-drop__msg { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--mkr-primary); } .mkr-form__field select.mkr-select { min-block-size: 52px; } @media (max-width: 1024px) { .mkr-whs__intro, .mkr-whs__bandin { grid-template-columns: minmax(0, 1fr); } .mkr-whs__perk:nth-child(n) { margin-inline-start: 0; } .mkr-whs__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkr-whs__steps::before { display: none; } } @media (max-width: 640px) { .mkr-whs__steps { grid-template-columns: minmax(0, 1fr); gap: 12px; } .mkr-whs__steps::before { display: block; inset-block: 40px; inset-inline: auto; inset-inline-start: 45px; border-block-start: 0; border-inline-start: 1.5px dashed rgba(var(--mkr-primary-rgb), .35); } .mkr-whs__step { padding: 18px 18px 20px; } .mkr-whs__bandin { padding: 22px 18px; border-radius: 24px; } .mkr-whs__formcard { padding: 18px; } .mkr-drop__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .mkr-whs__step, .mkr-whs__perkicon, .mkr-drop__zone, .mkr-drop__item { transition: none; animation: none; } .mkr-drop.is-busy .mkr-drop__icon { animation: none; } }