/* Brändileht (U24 live, spec ai/specs/2026-09-29-brandileht-live-design.md, mock FraDPhvfDF5FzCEnCoEAGi v18).
 * Everything is scoped to body.brand-page; font is the portal font when defined (var(--chilli-font, inherit)). Reels (U23) only when the firm has live reels.
 * Phone: rail 300 px, the header is a rounded sheet over it. From 768 px: the offer open view recipe (public/css/offer-hero.css on
 * the creators branch): edge to edge collage rail under the normal site header, 2 px seams, a 32 px lip that reads as the white
 * sheet rising over the photos, everything else in a centered column of max 1240 px + 32 px sides. */
/* .brand is a flex item of #main-content: without min-width 0 the review rows stretch it to their full width */
body.brand-page .brand { font-family: var(--chilli-font, inherit); padding-bottom: 32px; flex: 1 1 auto; width: 100%; min-width: 0; }

/* hero rail: offer-page collage blocks */
body.brand-page .brail-wrap { position: relative; height: 420px; background: #0e1210; border-radius: 0 0 22px 22px; overflow: hidden; }
body.brand-page .brail-wrap--empty { height: 160px; background: linear-gradient(135deg, #e9ecef, #f8f9fa); }
body.brand-page .brail { position: absolute; inset: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x proximity; }
body.brand-page .brail::-webkit-scrollbar { display: none; }
body.brand-page .brail__blk { flex: none; height: 100%; display: grid; gap: 4px; grid-template-rows: 1fr 1fr; scroll-snap-align: start; }
body.brand-page .brail__blk--half { width: 315px; grid-template-columns: 1fr; }
body.brand-page .brail__blk--full { width: 630px; grid-template-columns: 1fr 1fr; }
body.brand-page .brail__tile { position: relative; display: block; overflow: hidden; background: #333; border: 0; padding: 0; }
body.brand-page .brail__tile img, body.brand-page .brail__tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
body.brand-page .brail__tile--reel { cursor: pointer; }
/* photos grow a little under the mouse and open full screen, like the offer page rail (Marti 5.10) */
body.brand-page .brail__tile[data-brail-photo] { cursor: zoom-in; }
body.brand-page .brail__tile img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
body.brand-page .brail__tile[data-brail-photo]:hover img { transform: scale(1.035); }
body.brand-page .brail__tag { position: absolute; left: 12px; bottom: 100px; display: inline-flex; gap: 4px; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(8px); }
body.brand-page .span-c { grid-column: 1 / 3; }
body.brand-page .span-r { grid-row: 1 / 3; }
body.brand-page .span-all { grid-column: 1 / 3; grid-row: 1 / 3; }
body.brand-page .brail__arr { position: absolute; top: 40%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 4px 18px rgba(0, 0, 0, .28); display: grid; place-items: center; font-size: 20px; }
body.brand-page .brail__arr--prev { left: 18px; }
body.brand-page .brail__arr--next { right: 18px; }

/* header v2 (Wolt / Bolt Food line): sheet with rounded top corners over the rail, big logo half over the photos */
body.brand-page .brand-head { position: relative; z-index: 5; display: flow-root; margin-top: -34px; padding: 0 22px 20px; text-align: center; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .14); }
body.brand-page .brand-logo { position: relative; display: block; width: 112px; height: 112px; margin: -56px auto 0; border-radius: 26px; background: #fff; object-fit: contain; padding: 8px; border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
body.brand-page .brand-logo--text { display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 15px; color: #212529; line-height: 1.1; }
body.brand-page .brand-head h1 { margin: 14px 0 0; font-size: 30px; line-height: 1.15; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
body.brand-page .brand-plus-pill { display: inline-flex; align-items: center; padding: 4px 11px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #18AE00 0%, #4CD964 100%); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; font-style: italic; line-height: 1.1; box-shadow: 0 3px 10px rgba(24, 174, 0, .3); cursor: pointer; }
body.brand-page .brand-plus-pill--static { cursor: default; box-shadow: none; margin-right: 6px; }
body.brand-page .brand-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 10px; font-size: 14.5px; color: var(--bs-secondary-color, #5f6862); }
body.brand-page .brand-meta b { color: var(--bs-body-color, #212529); }
body.brand-page .brand-meta .dot { color: #b7bdb9; margin: 0 7px; }
body.brand-page .brand-meta .bi { font-size: .95em; vertical-align: -.05em; }
body.brand-page .brand-served-ic { color: #18ae00; margin-right: 2px; }
body.brand-page .brand-meta-link { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
body.brand-page .brand-meta-link:hover { text-decoration-color: currentColor; }
body.brand-page .brand-anchor { scroll-margin-top: 90px; }
body.brand-page .brand-arr.is-fit { display: none !important; }
body.brand-page .brand-open-link { border: 0; padding: 0; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; background: linear-gradient(135deg, #18AE00 0%, #4CD964 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.brand-page .brand-side { display: grid; gap: 12px; max-width: 520px; margin: 16px auto 0; }
body.brand-page .brand-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
body.brand-page .brand-act { display: grid; justify-items: center; gap: 6px; padding: 13px 6px 11px; border: 0; border-radius: 16px; background: var(--bs-tertiary-bg, #f1f3f2); color: var(--bs-body-color, #212529); text-decoration: none; font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; min-width: 0; }
body.brand-page .brand-act:hover { background: var(--bs-secondary-bg, #e7ebe8); color: var(--bs-body-color, #212529); }
body.brand-page .brand-act svg { width: 22px; height: 22px; color: #18ae00; }
body.brand-page .brand-act span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
body.brand-page .brand-act__m { display: none; }
body.brand-page .brand-act--tel-text { display: none; cursor: default; }
body.brand-page .brand-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
body.brand-page .brand-row .brand-follow-slot { flex: 1; }
body.brand-page .brand-share { width: 50px; height: 50px; flex: none; border: 0; border-radius: 50%; background: var(--bs-tertiary-bg, #f1f3f2); color: var(--bs-body-color, #212529); display: grid; place-items: center; cursor: pointer; }
body.brand-page .brand-share svg { width: 20px; height: 20px; }
body.brand-page .brand-soc { display: flex; gap: 8px; justify-content: center; }
body.brand-page .brand-soc--row { margin-top: 14px; }
body.brand-page .brand-soc--inline { display: none; }
body.brand-page .brand-net {
    position: relative; width: 36px; height: 36px; border-radius: 50%; display: block;
    background: var(--bs-body-bg, #fff); color: var(--bs-emphasis-color, #1d2420);
    box-shadow: 0 3px 10px rgba(16, 24, 18, .16), 0 1px 2px rgba(16, 24, 18, .08); transition: transform .15s;
}
/* one-colour channel glyphs (Bootstrap Icons, MIT) drawn in the text colour through a mask */
body.brand-page .brand-net::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask: var(--net-glyph) center / 50% no-repeat; mask: var(--net-glyph) center / 50% no-repeat; }
body.brand-page .brand-net:hover { transform: scale(1.1); }
body.brand-page .brand-net--tiktok { --net-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3z'/%3E%3C/svg%3E"); }
body.brand-page .brand-net--instagram { --net-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/%3E%3C/svg%3E"); }
body.brand-page .brand-net--facebook { --net-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E"); }
body.brand-page .brand-net--youtube { --net-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z'/%3E%3C/svg%3E"); }
body.brand-page .brand-net--www { --net-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855q-.215.403-.395.872c.705.157 1.472.257 2.282.287zM4.249 3.539q.214-.577.481-1.078a7 7 0 0 1 .597-.933A7 7 0 0 0 3.051 3.05q.544.277 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9 9 0 0 1-1.565-.667A6.96 6.96 0 0 0 1.018 7.5zm1.4-2.741a12.3 12.3 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332M8.5 5.09V7.5h2.99a12.3 12.3 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.6 13.6 0 0 1 7.5 10.91V8.5zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741zm-3.282 3.696q.18.469.395.872c.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a7 7 0 0 1-.598-.933 9 9 0 0 1-.481-1.079 8.4 8.4 0 0 0-1.198.49 7 7 0 0 0 2.276 1.522zm-1.383-2.964A13.4 13.4 0 0 1 3.508 8.5h-2.49a6.96 6.96 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667m6.728 2.964a7 7 0 0 0 2.275-1.521 8.4 8.4 0 0 0-1.197-.49 9 9 0 0 1-.481 1.078 7 7 0 0 1-.597.933M8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855q.216-.403.395-.872A12.6 12.6 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.96 6.96 0 0 0 14.982 8.5h-2.49a13.4 13.4 0 0 1-.437 3.008M14.982 7.5a6.96 6.96 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008zM11.27 2.461q.266.502.482 1.078a8.4 8.4 0 0 0 1.196-.49 7 7 0 0 0-2.275-1.52c.218.283.418.597.597.932m-.488 1.343a8 8 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z'/%3E%3C/svg%3E"); }
/* from 768 px: edge to edge rail + lip, centered column; logo half over the photos, name + channels + facts in the middle,
   contact tiles and share on the right */
@media (min-width: 768px) {
    body.brand-page {
        --bp-pad: 32px;
        --bp-vw: calc(100vw - var(--bp-sb, 0px));
        --bp-rail-h: clamp(420px, 34vw, 560px);
    }
    /* guard against a rounding pixel of the full width rail: never a horizontal scroll */
    html:has(> body.brand-page) { overflow-x: clip; }
    body.brand-page .brand { flex: 0 0 auto; width: var(--bp-vw); max-width: none; margin-left: calc(50% - var(--bp-vw) / 2); margin-right: 0; }
    body.brand-page .brand-body { max-width: calc(1240px + 2 * var(--bp-pad)); margin: 0 auto; padding: 0 var(--bp-pad); }

    /* rail: the 2 px seams between the tiles show the page background */
    body.brand-page .brail-wrap { height: var(--bp-rail-h); border-radius: 0; background: var(--bs-body-bg, #fff); }
    body.brand-page .brail-wrap--empty { height: 200px; background: linear-gradient(135deg, #e9ecef, #f8f9fa); }
    /* the lip: reads as the rounded sheet rising over the photos */
    body.brand-page .brail-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 33px; z-index: 3; pointer-events: none; background: var(--bs-body-bg, #fff); border-radius: 32px 32px 0 0; }
    /* the tiles end under the lip: at fractional zoom their last pixel row would show below it */
    body.brand-page .brail { inset: 0 0 8px; gap: 2px; overscroll-behavior-x: contain; }
    body.brand-page .brail__blk { gap: 2px; }
    body.brand-page .brail__blk--half { width: calc(var(--bp-rail-h) * .75); }
    body.brand-page .brail__blk--full { width: calc(var(--bp-rail-h) * 1.5); }
    body.brand-page .brail__blk:last-child { flex-grow: 1; }
    body.brand-page .brail__tile { background: var(--bs-secondary-bg, #e9ecef); }
    body.brand-page .brail__arr { top: calc(50% - 16px); width: 48px; height: 48px; transition: opacity .2s; }
    body.brand-page .brail__arr--prev { left: 24px; }
    body.brand-page .brail__arr--next { right: 24px; }
    body.brand-page .brail__arr.is-off { opacity: 0; pointer-events: none; }

    /* tablet and small desktop: logo + name on the first row, contact tiles and share full width under them */
    body.brand-page .brand-head { text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; margin-top: 0; padding: 0 0 24px; background: transparent; border-radius: 0; box-shadow: none; }
    body.brand-page .brand-logo { grid-row: 1; width: 112px; height: 112px; margin: -88px 0 0; }
    body.brand-page .brand-id { grid-column: 2; padding-top: 2px; min-width: 0; }
    body.brand-page .brand-head h1 { justify-content: flex-start; margin-top: 0; font-size: clamp(28px, 2.4vw, 36px); }
    /* facts on one wrapping line; the separator dot of the first fact on each line sits in the clipped 22 px strip */
    /* rating · served, open today, address: one line each (Marti 5.10) */
    body.brand-page .brand-meta { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 15px; }
    body.brand-page .brand-meta .g { white-space: nowrap; }
    body.brand-page .brand-meta .g--addr { white-space: normal; }
    /* contact tiles on the first row, «Jälgi» + share under them (Marti 1.10) */
    body.brand-page .brand-side { grid-column: 1 / -1; grid-row: 2; margin: 18px 0 0; max-width: none; }
    body.brand-page .brand-row { justify-content: flex-end; }
    body.brand-page .brand-soc--inline { display: inline-flex; gap: 7px; margin-left: 4px; }
    body.brand-page .brand-soc--inline .brand-net { width: 30px; height: 30px; }
    body.brand-page .brand-soc--row { display: none; }
}
/* desktop from 1200 px: logo | name and facts | contact tiles + share, like the offer open view */
@media (min-width: 1200px) {
    body.brand-page .brand-head { grid-template-columns: auto minmax(0, 1fr) minmax(400px, 470px); }
    body.brand-page .brand-logo { grid-row: 1 / 3; width: 124px; height: 124px; margin-top: -95px; }
    body.brand-page .brand-side { grid-column: 3; grid-row: 1 / 3; margin: 0; }
}
/* desktop: the phone number is plain text (nothing to call from a computer) */
@media (min-width: 992px) {
    body.brand-page .brand-act--tel { display: none; }
    body.brand-page .brand-act--tel-text { display: grid; }
    body.brand-page .brand-act--tel-text:hover { background: var(--bs-tertiary-bg, #f1f3f2); }
}
@media (max-width: 767.98px) {
    body.brand-page .brand-act__d { display: none; }
    body.brand-page .brand-act__m { display: inline; }
}
/* directions: Google Maps / Waze choice on the phone */
body.brand-page .brand-sheet { position: fixed; inset: 0; z-index: 1060; background: rgba(10, 16, 12, .45); display: flex; align-items: flex-end; justify-content: center; }
body.brand-page .brand-sheet[hidden] { display: none; }
body.brand-page .brand-sheet__box { width: min(420px, 100%); background: var(--bs-body-bg, #fff); border-radius: 22px 22px 0 0; padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 10px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
body.brand-page .brand-sheet__box h2 { margin: 4px 0 6px; text-align: center; font-size: 16px; font-weight: 800; }
body.brand-page .brand-sheet__box a, body.brand-page .brand-sheet__box button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 0; border-radius: 14px; background: var(--bs-tertiary-bg, #f1f3f2); color: var(--bs-body-color, #212529); text-decoration: none; font-family: inherit; font-weight: 800; cursor: pointer; }
body.brand-page .brand-sheet__ic { width: 22px; height: 22px; border-radius: 6px; display: inline-block; }
body.brand-page .brand-sheet__ic--g { background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); }
body.brand-page .brand-sheet__ic--w { background: #33ccff; }
body.brand-page .brand-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1080; background: #1f2622; color: #fff; border-radius: 14px; padding: 12px 18px; font-size: 14.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
/* Chilli Plus on-site discount modal */
body.brand-page .brand-plus-modal { border-radius: 22px; font-family: var(--chilli-font, inherit); }
body.brand-page .brand-checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; line-height: 1.5; }
body.brand-page .brand-checks li { position: relative; padding-left: 32px; }
body.brand-page .brand-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #51ab24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
body.brand-page .brand-plus-cta { display: grid; gap: 8px; }
body.brand-page .brand-plus-cta .btn { border-radius: 14px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }
body.brand-page .brand-plus-note { margin: 0; background: #e6f6e1; color: #118300; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
body.brand-page .brand-plus-hint { margin: 0; text-align: center; color: var(--bs-secondary-color, #6b736e); font-size: 13.5px; }

/* anchors */
body.brand-page .brand-nav { display: flex; gap: 4px; padding: 18px 22px 0; overflow-x: auto; border-bottom: 1px solid var(--bs-border-color, #eceeec); scrollbar-width: none; }
body.brand-page .brand-nav a { padding: 10px 14px; font-weight: 700; color: var(--bs-secondary-color, #5f6862); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; font-size: 14.5px; }
body.brand-page .brand-nav a.is-on { color: var(--bs-body-color, #212529); border-color: #18ae00; }

/* sections */
body.brand-page .brand-sec { padding: 22px; scroll-margin-top: 90px; }
body.brand-page .brand-sec > h2, body.brand-page .brand-two h2, body.brand-page .brand-rhead h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; }
body.brand-page .brand-sec--reels { padding-top: 10px; }
body.brand-page .brand-sec .discount { font-size: 22px; padding: 6px 12px; border-radius: 12px; line-height: 1; }
body.brand-page .brand-empty { color: var(--bs-secondary-color, #6b736e); }
body.brand-page .brand-about { line-height: 1.6; max-width: 75ch; }
body.brand-page .brand-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
body.brand-page .brand-locs { margin: 10px 0 0; padding-left: 18px; }
body.brand-page .brand-hours { width: 100%; border-collapse: collapse; font-size: 14.5px; }
body.brand-page .brand-hours td { padding: 6px 0; border-bottom: 1px solid var(--bs-border-color, #eceeec); }
body.brand-page .brand-hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
body.brand-page .brand-hours tr.is-today td { font-weight: 800; color: #118300; }

/* Tutvustus: photo grid beside the text (Marti 30.09). Phone: 2 x 2 under the text; tablet: one row of four; from 992 px the
   grid is exactly as tall as the text, brand-page.js picks the number of rows (before it runs: three). The white «N fotot»
   chip and every tile open the full screen viewer (PhotoSwipe: swipe, arrows). */
body.brand-page .brand-gal { position: relative; margin-top: 16px; }
body.brand-page .brand-gal__box { position: relative; }
body.brand-page .brand-gal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border-radius: 16px; overflow: hidden; }
body.brand-page .brand-gal__t { display: none; position: relative; aspect-ratio: 4 / 3; min-height: 0; padding: 0; border: 0; overflow: hidden; background: var(--bs-secondary-bg, #e9ecef); cursor: pointer; }
body.brand-page .brand-gal__t:nth-child(-n+4) { display: block; }
body.brand-page .brand-gal__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
body.brand-page .brand-gal__t:hover img { transform: scale(1.04); }
body.brand-page .brand-gal__all { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 12px; background: #fff; color: #111; font-family: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 2px 14px rgba(0, 0, 0, .22); cursor: pointer; }
@media (min-width: 768px) and (max-width: 991.98px) {
    body.brand-page .brand-gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    body.brand-page .brand-about-wrap.has-gal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
    body.brand-page .brand-about-wrap.has-gal .brand-about { max-width: none; }
    body.brand-page .brand-about-wrap.has-gal .brand-about > :last-child { margin-bottom: 0; }
    body.brand-page .brand-gal { margin-top: 0; min-height: 210px; }
    body.brand-page .brand-gal__box { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
    body.brand-page .brand-gal__grid { height: 100%; grid-template-rows: repeat(var(--gal-rows, 3), minmax(0, 1fr)); }
    body.brand-page .brand-gal__t { aspect-ratio: auto; }
    body.brand-page .brand-gal__t:nth-child(-n+6) { display: block; }
    body.brand-page .brand-gal[data-rows] .brand-gal__t { display: none; }
    body.brand-page .brand-gal[data-rows] .brand-gal__t.is-in { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    body.brand-page .brand-gal__t img { transition: none; }
}

/* map + hours side by side: the map is exactly as tall as the hours list (Marti 30.09); stacked on the phone it keeps its square */
@media (min-width: 768px) {
    body.brand-page .brand-two--sync > div:first-child { display: flex; flex-direction: column; min-width: 0; }
    body.brand-page .brand-two--sync .vendor-embedded-map { flex: 1 1 auto; min-height: 200px; margin: 0 !important; }
    body.brand-page .brand-two--sync .vendor-embedded-map .chilli-public-map-wrap { position: absolute !important; inset: 0; }
    body.brand-page .brand-two--sync .vendor-embedded-map .chilli-public-map-wrap,
    body.brand-page .brand-two--sync .vendor-embedded-map .chilli-public-map-inner,
    body.brand-page .brand-two--sync .vendor-embedded-map #chilli-public-map-el-vendor { aspect-ratio: auto; height: 100%; min-height: 0 !important; }
    body.brand-page .brand-two--sync .brand-locs { flex: none; }
}

/* no opening hours: the map alone runs edge to edge under its heading (Marti 5.10) */
body.brand-page .brand-two--wide { grid-template-columns: minmax(0, 1fr); }
body.brand-page .brand-two--wide .vendor-embedded-map {
    width: calc(100vw - var(--bp-sb, 0px)); height: clamp(320px, 32vw, 480px);
    margin: 4px 0 0 calc(50% - (100vw - var(--bp-sb, 0px)) / 2) !important;
}
body.brand-page .brand-two--wide .vendor-embedded-map .chilli-public-map-wrap { position: absolute !important; inset: 0; border-radius: 0 !important; }
body.brand-page .brand-two--wide .vendor-embedded-map .chilli-public-map-wrap,
body.brand-page .brand-two--wide .vendor-embedded-map .chilli-public-map-inner,
body.brand-page .brand-two--wide .vendor-embedded-map #chilli-public-map-el-vendor { aspect-ratio: auto; height: 100%; min-height: 0 !important; border-radius: 0 !important; }

/* from 768 px the column gives the side padding */
@media (min-width: 768px) {
    body.brand-page .brand-nav { padding: 6px 0 0; }
    body.brand-page .brand-sec { padding: 28px 0; }
}

/* reviews: two rows, horizontal scroll */
body.brand-page .brand-rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
body.brand-page .brand-rhead h2 { margin: 0; }
body.brand-page .brand-grow { flex: 1; }
/* review arrows follow the theme (Marti 1.10): light in the light theme, dark in the dark one, like the share button */
body.brand-page .brand-arr { border: 0; background: var(--bs-tertiary-bg, #f1f3f2); color: var(--bs-body-color, #212529); }
body.brand-page .brand-arr:hover, body.brand-page .brand-arr:focus-visible { background: var(--bs-secondary-bg, #e7ebe8); color: var(--bs-body-color, #212529); }
body.brand-page .brand-sub { font-weight: 500; font-size: 15px; color: var(--bs-secondary-color, #7a827c); }
body.brand-page .brand-revs { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 300px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
body.brand-page .brand-rev { margin: 0; scroll-snap-align: start; border: 1px solid var(--bs-border-color, #e2e6e3); border-radius: 16px; padding: 14px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; align-content: start; }
body.brand-page .brand-rev blockquote { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
/* a long review no longer stretches its whole carousel row: 6 lines, tap to read all */
body.brand-page .brand-rev.is-clamped { cursor: pointer; }
body.brand-page .brand-rev.is-open blockquote { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
body.brand-page .brand-stars { display: inline-flex; gap: 4px; line-height: 1; }
body.brand-page .brand-sub .bi { font-size: .9em; }
body.brand-page .brand-rev figcaption { color: var(--bs-secondary-color, #7a827c); font-size: 13px; }

@media (max-width: 767.98px) {
    body.brand-page .brail-wrap { height: 300px; border-radius: 0; }
    body.brand-page .brail__blk--half { width: 200px; }
    body.brand-page .brail__blk--full { width: 400px; }
    body.brand-page .brail__arr { display: none; }
    body.brand-page .brand-sec { padding: 16px 12px; }
    body.brand-page .brand-nav { padding: 12px 12px 0; }
    body.brand-page .brand-two { grid-template-columns: 1fr; }
    body.brand-page .brand-revs { grid-auto-columns: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    body.brand-page .brail__tile img { transition: none; }
    body.brand-page .brail { scroll-behavior: auto; }
    body.brand-page .brand-net { transition: none; }
}

/* brand value gift card (U24, spec §4.2, mock v18): card visual with 3D tilt, amount chips, quantity, buy */
body.brand-page .bgc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
body.brand-page .bgc-left { display: grid; gap: 14px; min-width: 0; }
body.brand-page .bgc-right { display: grid; gap: 16px; align-content: start; min-width: 0; }
body.brand-page .bgc-card { --mx: 30%; --my: 20%; --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 1.586; border-radius: 22px; overflow: hidden; color: #1d1d1f; display: grid; place-items: center; border: 1px solid #cfd3d8; cursor: pointer; color-scheme: light;
    background:
        radial-gradient(60% 80% at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .5) 44%, rgba(255, 255, 255, 0) 58%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .02) 1px 2px),
        linear-gradient(160deg, #f6f7f9 0%, #dcdfe3 36%, #eef0f2 56%, #c9cdd2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .08), 0 10px 20px -6px rgba(20, 28, 24, .18), 0 34px 60px -18px rgba(20, 28, 24, .42);
    transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
body.brand-page .bgc-card.is-tilt { transition: transform .08s linear; }
body.brand-page .bgc-card--photo { border-color: transparent; background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, .05) 100%), var(--gph) center / cover; }
body.brand-page .bgc-card--color { border-color: transparent; background: radial-gradient(60% 80% at var(--mx) var(--my), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%), linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .18) 45%, rgba(255, 255, 255, 0) 58%), var(--gcol); }
body.brand-page .bgc-card__in { display: grid; justify-items: center; gap: 10px; text-align: center; }
body.brand-page .bgc-card__mini { width: 74px; height: 74px; border-radius: 18px; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 6px; font-size: 13px; font-weight: 800; color: #0b6b8a; line-height: 1.05; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); word-break: break-word; }
body.brand-page .bgc-card__mini img { width: 100%; height: 100%; object-fit: contain; }
body.brand-page .bgc-card--photo .bgc-card__mini, body.brand-page .bgc-card--color .bgc-card__mini { box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
body.brand-page .bgc-card__kind { font-size: 15px; font-weight: 700; letter-spacing: .02em; background: linear-gradient(180deg, #9aa0a6 0%, #5b6167 55%, #8d9399 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.brand-page .bgc-card--photo .bgc-card__kind, body.brand-page .bgc-card--color.is-dark .bgc-card__kind { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: rgba(255, 255, 255, .92); }
body.brand-page .bgc-card--color:not(.is-dark) .bgc-card__kind { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: rgba(0, 0, 0, .6); }
/* the value: a gold text layer over a shadow layer of the same text (a filter on the clipped gold text covers and dims it in Safari) */
body.brand-page .bgc-card__val { position: relative; display: block; font-size: 92px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
body.brand-page .bgc-card__val-t { position: relative; display: block; background: linear-gradient(180deg, #f3d77a 0%, #c9971f 42%, #8f6a0c 58%, #d8b04a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.brand-page .bgc-card__val-sh { position: absolute; inset: 0; color: transparent; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); pointer-events: none; -webkit-user-select: none; user-select: none; }
body.brand-page .bgc-card--photo .bgc-card__val-sh, body.brand-page .bgc-card--color.is-dark .bgc-card__val-sh { text-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
/* on a photo or a dark colour the gold is a step brighter */
body.brand-page .bgc-card--photo .bgc-card__val-t, body.brand-page .bgc-card--color.is-dark .bgc-card__val-t { background-image: linear-gradient(180deg, #fbe7a1 0%, #ecc04a 42%, #c9961c 58%, #f2d277 100%); }
/* the text link sits clear of the card's shadow (the tilted card is painted above in-flow siblings) */
body.brand-page .bgc-left { gap: 30px; }
body.brand-page .bgc-link { position: relative; z-index: 2; display: block; width: max-content; max-width: 100%; margin: 0 auto; padding: 6px 4px; text-align: center; text-decoration: none; border: 0; padding: 0; background: linear-gradient(135deg, #18AE00 0%, #4CD964 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
body.brand-page .bgc-terms { margin: 0; }
body.brand-page .bgc-buy { display: grid; gap: 14px; border-top: 1px solid var(--bs-border-color, #eceeec); padding-top: 16px; }
body.brand-page .bgc-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.brand-page .bgc-chips button { border: 1.5px solid #d8ded9; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border-radius: 999px; padding: 9px 4px; font-family: inherit; font-weight: 700; white-space: nowrap; text-align: center; cursor: pointer; }
body.brand-page .bgc-chips button[aria-pressed="true"] { border-color: #18ae00; background: #e6f6e1; color: #118300; }
body.brand-page .bgc-m { display: none; }
body.brand-page .bgc-amt { display: grid; gap: 8px; border: 1px solid var(--bs-border-color, #e2e6e3); border-radius: 16px; padding: 12px 14px; }
body.brand-page .bgc-amt[hidden] { display: none; }
body.brand-page .bgc-amt__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* own slider (Marti 1.10): a bigger knob with a clear shadow; --f is the filled share of the track, set by brand-page.js */
body.brand-page .bgc-amt input[type=range] { --f: .0556; --knob: 30px; flex: 1; min-width: 160px; height: var(--knob); margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
body.brand-page .bgc-amt input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, #18ae00 calc(var(--knob) / 2 + (100% - var(--knob)) * var(--f)), var(--bs-secondary-bg, #e3e7e4) 0); }
body.brand-page .bgc-amt input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--knob); height: var(--knob); margin-top: calc(4px - var(--knob) / 2); border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .18); }
body.brand-page .bgc-amt input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--bs-secondary-bg, #e3e7e4); }
body.brand-page .bgc-amt input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: #18ae00; }
body.brand-page .bgc-amt input[type=range]::-moz-range-thumb { width: var(--knob); height: var(--knob); box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .18); }
body.brand-page .bgc-amt input[type=range]:focus { outline: none; }
body.brand-page .bgc-amt input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(24, 174, 0, .28), 0 3px 10px rgba(0, 0, 0, .3); }
body.brand-page .bgc-amt input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(24, 174, 0, .28), 0 3px 10px rgba(0, 0, 0, .3); }
body.brand-page .bgc-amt input[type=text] { width: 110px; border: 1.5px solid #d8ded9; border-radius: 12px; padding: 9px 12px; font-family: inherit; font-size: 18px; font-weight: 800; text-align: right; background: #fff; color: #212529; color-scheme: light; }
body.brand-page .bgc-amt input[type=text]:focus { outline: none; border-color: #18ae00; }
body.brand-page .bgc-amt small { color: var(--bs-secondary-color, #6b736e); }
body.brand-page .bgc-amt small.is-err { color: #b3261e; font-weight: 700; }
body.brand-page .bgc-qrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.brand-page .bgc-ql { font-weight: 700; }
body.brand-page .bgc-qty { display: inline-flex; align-items: center; border: 1.5px solid #d8ded9; border-radius: 999px; overflow: hidden; }
body.brand-page .bgc-qty button { width: 40px; height: 38px; border: 0; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); font-size: 20px; font-weight: 700; cursor: pointer; }
body.brand-page .bgc-qty button:disabled { color: #c3c8c4; cursor: not-allowed; }
body.brand-page .bgc-qty output { min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; }
body.brand-page .bgc-add { width: 100%; justify-content: center; font-size: 16px; font-weight: 700; padding: 13px 18px; border-radius: 14px; }
/* PDF sample modal (desktop and tablet): the real legacy PDF in an iframe, A4 portrait */
html.bgc-vm-open { overflow: hidden; }
body.brand-page .bgc-vm { position: fixed; inset: 0; z-index: 1070; background: rgba(10, 16, 12, .6); display: grid; place-items: center; padding: 16px; }
body.brand-page .bgc-vm[hidden] { display: none; }
body.brand-page .bgc-vm__wrap { --pdf-h: min(calc(100vh - 90px), 1120px); display: grid; gap: 10px; justify-items: center; }
body.brand-page .bgc-vm__bar { display: flex; gap: 10px; align-items: center; color: #fff; font-weight: 700; font-size: 14px; }
body.brand-page .bgc-vm__bar button { border: 0; border-radius: 999px; padding: 8px 14px; background: #fff; color: #212529; font-family: inherit; font-weight: 800; cursor: pointer; }
body.brand-page .bgc-vm__sheet { position: relative; }
body.brand-page .bgc-vm__pdf { display: block; height: var(--pdf-h); width: min(calc(100vw - 32px), calc(var(--pdf-h) * .707)); border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
body.brand-page .bgc-vm__sheet.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 4px solid #e6ece8; border-top-color: #18AE00; animation: bgc-spin .8s linear infinite; }
@keyframes bgc-spin { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) {
    body.brand-page .bgc { grid-template-columns: 1fr; gap: 22px; }
    body.brand-page .bgc-left { gap: 26px; }
    body.brand-page .bgc-card__in { gap: 6px; }
    body.brand-page .bgc-card__mini { width: 60px; height: 60px; border-radius: 15px; }
    body.brand-page .bgc-card__val { font-size: min(92px, 17vw); }
    body.brand-page .bgc-d { display: none; }
    body.brand-page .bgc-m { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    body.brand-page .bgc-card, body.brand-page .bgc-card.is-tilt { transition: none; transform: none; }
}

/* «Jälgi» (2026-09-30 C): OSTA gradient + gold bell; following = grey, the bell rings once */
body.brand-page .brand-follow { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #18AE00 0%, #4CD964 100%); color: #fff; font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 6px 16px rgba(24, 174, 0, .22); transition: filter .15s, background .2s, color .2s; }
body.brand-page .brand-follow:hover { filter: brightness(1.05); }
body.brand-page .brand-follow:disabled { cursor: progress; }
body.brand-page .brand-follow__bell { width: 20px; height: 20px; color: #f7c948; flex: none; transform-origin: 50% 12%; }
body.brand-page .brand-follow__n { padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, .22); font-size: 13px; font-weight: 700; }
body.brand-page .brand-follow__n[hidden] { display: none; }
body.brand-page .brand-follow.is-on { background: #e9ecef; color: #212529; box-shadow: none; }
body.brand-page .brand-follow.is-on .brand-follow__bell { color: #f59e0b; }
body.brand-page .brand-follow.is-on .brand-follow__n { background: rgba(0, 0, 0, .07); }
body.brand-page .brand-follow.is-ring .brand-follow__bell { animation: brand-bell .9s ease-in-out 1; }
@keyframes brand-bell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }