/* ==========================================================================
   MiniWebSites "Makeover" design layer  (mw-core.css)
   Shared by every site that ran the AI Site Makeover.
   Per-site look comes ONLY from the :root tokens in Makeover/{ProviderID}/site.css
   All component classes are prefixed "mw-" so they never collide with skin CSS.
   ========================================================================== */

:root {
    --mw-primary: #b4235a;
    --mw-primary-2: #861641;
    --mw-accent: #e7a325;
    --mw-ink: #1d1720;
    --mw-muted: #615a66;
    --mw-bg: #ffffff;
    --mw-surface: #f7f3ef;
    --mw-surface-2: #efe7df;
    --mw-on-primary: #ffffff;
    --mw-line: rgba(29, 23, 32, .10);
    --mw-radius: 20px;
    --mw-radius-sm: 12px;
    --mw-btn-radius: 12px;
    --mw-shadow: 0 22px 48px -24px rgba(29, 23, 32, .45);
    --mw-shadow-sm: 0 8px 22px -14px rgba(29, 23, 32, .35);
    --mw-font-display: inherit;
    --mw-font-body: inherit;
    --mw-grad: linear-gradient(120deg, var(--mw-primary) 0%, var(--mw-primary-2) 55%, var(--mw-accent) 140%);
    --mw-section-pad: clamp(56px, 8vw, 112px);
    --mw-container: 1200px;
    --mw-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base wrapper ---------- */
.mw, .mw * { box-sizing: border-box; }
.mw { font-family: var(--mw-font-body); color: var(--mw-ink); line-height: 1.65; font-size: 17px; position: relative; overflow: hidden; }
.mw img { max-width: 100%; height: auto; display: block; }
.mw a { text-decoration: none; }
.mw h1, .mw h2, .mw h3, .mw h4 { font-family: var(--mw-font-display); color: inherit; margin: 0 0 .5em; line-height: 1.15; letter-spacing: normal; text-transform: none; }
.mw p { /*margin: 0 0 1em;*/ }
.mw p:last-child { margin-bottom: 0; }

.mw-section { padding-block: var(--mw-section-pad); background: var(--mw-bg); }
.mw-section--surface { background: var(--mw-surface); }
.mw-section--dark { background: var(--mw-ink); color: #fff; }
.mw-section--dark .mw-sub, .mw-section--dark .mw-muted { color: rgba(255, 255, 255, .72); }
.mw-section--primary { background: var(--mw-grad); color: var(--mw-on-primary); }
.mw-section--primary .mw-sub { color: rgba(255, 255, 255, .85); }
.mw-section--tight { padding-block: calc(var(--mw-section-pad) * .55); }
.mw-container { width: 100%; max-width: var(--mw-container); margin-inline: auto; padding-inline: 20px; }
.mw-muted { color: var(--mw-muted); }
.mw-center { text-align: center; }

/* ---------- section heading group: eyebrow -> title -> sub ---------- */
.mw-head { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); }
.mw-head--start { text-align: start; margin-inline: 0; }
.mw-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mw-font-body); font-weight: 700; font-size: .9rem; letter-spacing: .04em; color: var(--mw-primary); margin-bottom: 14px; }
.mw-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; opacity: .8; }
.mw-section--dark .mw-eyebrow, .mw-section--primary .mw-eyebrow { color: var(--mw-accent); }
.mw-section--primary .mw-eyebrow { color: #fff; }
.mw-title { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; }
.mw-title em, .mw-hl { font-style: normal; background: var(--mw-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mw-section--primary .mw-title em, .mw-section--primary .mw-hl { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--mw-accent); text-underline-offset: 8px; }
.mw-sub { font-size: 1.12rem; color: var(--mw-muted); max-width: 62ch; margin-inline: auto; }
.mw-head--start .mw-sub { margin-inline: 0; }

/* ---------- buttons ---------- */
.mw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: var(--mw-btn-radius); font-family: var(--mw-font-body); font-weight: 700; font-size: 1.02rem; line-height: 1.2; border: 2px solid transparent; cursor: pointer; transition: transform .25s var(--mw-ease), box-shadow .25s var(--mw-ease), background-color .25s, color .25s; }
.mw-btn--primary { background: var(--mw-primary); color: var(--mw-on-primary) !important; box-shadow: 0 12px 26px -14px var(--mw-primary); }
.mw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px var(--mw-primary); background: var(--mw-primary-2); }
.mw-btn--ghost { background: transparent; color: var(--mw-ink) !important; border-color: var(--mw-line); }
.mw-btn--ghost:hover { border-color: var(--mw-primary); color: var(--mw-primary) !important; }
.mw-btn--light { background: #fff; color: var(--mw-ink) !important; }
.mw-btn--light:hover { transform: translateY(-2px); box-shadow: var(--mw-shadow-sm); }
.mw-section--dark .mw-btn--ghost, .mw-section--primary .mw-btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.mw-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.mw-head .mw-actions { justify-content: center; }

/* ---------- grids & cards ---------- */
.mw-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.mw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mw-card { background: #fff; color: var(--mw-ink); border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: clamp(22px, 3vw, 32px); box-shadow: var(--mw-shadow-sm); transition: transform .35s var(--mw-ease), box-shadow .35s var(--mw-ease); height: 100%; }
.mw-card:hover { transform: translateY(-4px); box-shadow: var(--mw-shadow); }
.mw-card__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, var(--mw-primary) 12%, #fff); color: var(--mw-primary); margin-bottom: 18px; }
.mw-card__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.mw-card__text { color: var(--mw-muted); font-size: 1rem; }

/* ---------- big-number stats ---------- */
.mw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(18px, 3vw, 32px); }
.mw-stat { text-align: center; padding: 26px 18px; border-radius: var(--mw-radius); background: #fff; border: 1px solid var(--mw-line); box-shadow: var(--mw-shadow-sm); }
.mw-stat__num { display: block; font-family: var(--mw-font-display); font-weight: 800; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; background: var(--mw-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.mw-stat__label { font-weight: 700; font-size: 1.08rem; }
.mw-stat__text { color: var(--mw-muted); font-size: .96rem; margin-top: 4px; }

/* ---------- marquee / ticker band ---------- */
.mw-marquee { background: var(--mw-ink); color: #fff; overflow: hidden; padding-block: 16px; white-space: nowrap; position: relative; }
.mw-marquee--primary { background: var(--mw-grad); color: var(--mw-on-primary); }
.mw-marquee__track { display: inline-flex; gap: 0; width: max-content; animation: mw-marquee 38s linear infinite; }
.mw-marquee:hover .mw-marquee__track { animation-play-state: paused; }
.mw-marquee__item { font-family: var(--mw-font-display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.35rem); padding-inline: 22px; display: inline-flex; align-items: center; gap: 22px; }
.mw-marquee__item::after { content: "\2726"; color: var(--mw-accent); font-size: .9em; }
@keyframes mw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mw-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
[dir="rtl"] .mw-marquee__track, .mw[dir="rtl"] .mw-marquee__track { animation-name: mw-marquee-rtl; }

/* ---------- steps ---------- */
.mw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 3vw, 30px); counter-reset: mwstep; }
.mw-step { position: relative; padding: 30px 24px 26px; border-radius: var(--mw-radius); background: #fff; border: 1px solid var(--mw-line); counter-increment: mwstep; }
.mw-step::before { content: counter(mwstep); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mw-grad); color: #fff; font-family: var(--mw-font-display); font-weight: 800; font-size: 1.35rem; margin-bottom: 16px; box-shadow: 0 10px 22px -12px var(--mw-primary); }
.mw-step__title { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.mw-step__text { color: var(--mw-muted); font-size: .98rem; }

/* ---------- split (text + media) ---------- */
.mw-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.mw-split--reverse .mw-split__media { order: -1; }
.mw-split__media { position: relative; }
.mw-split__media img { width: 100%; border-radius: var(--mw-radius); box-shadow: var(--mw-shadow); object-fit: cover; aspect-ratio: 4 / 3.4; }
.mw-split__media::after { content: ""; position: absolute; inset: auto -16px -16px auto; width: 45%; height: 45%; border-radius: var(--mw-radius); background: var(--mw-grad); opacity: .18; z-index: -1; }
.mw-stack { position: relative; padding-bottom: 14%; }
.mw-stack img:first-child { width: 82%; }
.mw-stack img:nth-child(2) { position: absolute; width: 52%; inset-inline-end: 0; bottom: 0; border: 6px solid #fff; aspect-ratio: 1 / 1; }
.mw-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.mw-list li { display: flex; gap: 12px; align-items: flex-start; }
.mw-list li::before { content: "\2713"; flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--mw-primary) 14%, #fff); color: var(--mw-primary); font-weight: 800; font-size: .85rem; margin-top: 2px; }

/* ---------- hero ---------- */
.mw-hero { padding-block: clamp(48px, 8vw, 110px); background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--mw-accent) 22%, transparent), transparent 60%), var(--mw-surface); }
.mw-hero__title { font-size: clamp(2.3rem, 5.6vw, 4.4rem); font-weight: 800; line-height: 1.06; margin-bottom: 18px; }
.mw-hero__lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--mw-muted); max-width: 54ch; }
.mw-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-weight: 700; color: var(--mw-ink); }
.mw-facts span::before { content: "\2726"; color: var(--mw-accent); margin-inline-end: 8px; }

/* ---------- testimonials ---------- */
.mw-quote { background: #fff; border-radius: var(--mw-radius); padding: 28px; border: 1px solid var(--mw-line); box-shadow: var(--mw-shadow-sm); display: flex; flex-direction: column; gap: 14px; height: 100%; position: relative; }
.mw-quote::before { content: "\201D"; position: absolute; inset-inline-end: 22px; top: 6px; font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; color: var(--mw-primary); opacity: .14; }
.mw-stars { color: var(--mw-accent); letter-spacing: 3px; font-size: 1.05rem; }
.mw-quote__text { font-size: 1.04rem; flex: 1; margin: 0; }
.mw-quote__who { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.mw-quote__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mw-grad); color: #fff; font-weight: 800; flex: 0 0 44px; }
.mw-quote__meta { display: block; font-weight: 500; color: var(--mw-muted); font-size: .9rem; }

/* ---------- FAQ (native <details>) ---------- */
.mw-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.mw-faq__item { background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius-sm); overflow: hidden; transition: box-shadow .25s; }
.mw-faq__item[open] { box-shadow: var(--mw-shadow-sm); border-color: color-mix(in srgb, var(--mw-primary) 35%, transparent); }
.mw-faq__item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 800; font-size: 1.08rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mw-faq__item summary::-webkit-details-marker { display: none; }
.mw-faq__item summary::after { content: "+"; flex: 0 0 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--mw-surface); color: var(--mw-primary); font-size: 1.3rem; transition: transform .3s var(--mw-ease); }
.mw-faq__item[open] summary::after { transform: rotate(45deg); }
.mw-faq__body { padding: 0 24px 22px; color: var(--mw-muted); }

/* ---------- CTA band ---------- */
.mw-cta { position: relative; overflow: hidden; border-radius: calc(var(--mw-radius) * 1.4); background: var(--mw-grad); color: var(--mw-on-primary); padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; box-shadow: var(--mw-shadow); }
.mw-cta::before, .mw-cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.mw-cta::before { width: 340px; height: 340px; inset-inline-start: -120px; top: -160px; }
.mw-cta::after { width: 220px; height: 220px; inset-inline-end: 12%; bottom: -130px; }
.mw-cta > * { position: relative; z-index: 1; }
.mw-cta__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 8px; }
.mw-cta__text { opacity: .9; font-size: 1.1rem; margin: 0; }

/* ---------- trust strip ---------- */
.mw-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; padding-block: 22px; border-block: 1px solid var(--mw-line); }
.mw-trust__item { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .98rem; }
.mw-trust__item i, .mw-trust__icon { color: var(--mw-primary); font-size: 1.3rem; font-style: normal; }

/* ---------- image tiles (occasions / categories / gallery) ---------- */
.mw-tile { position: relative; display: block; border-radius: var(--mw-radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--mw-surface-2); color: #fff !important; box-shadow: var(--mw-shadow-sm); }
.mw-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mw-ease); }
.mw-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 58%); }
.mw-tile:hover img { transform: scale(1.06); }
.mw-tile__caption { position: absolute; inset-inline: 20px; bottom: 18px; z-index: 1; font-family: var(--mw-font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.mw-tile__caption small { display: block; font-family: var(--mw-font-body); font-weight: 500; font-size: .9rem; opacity: .85; margin-top: 4px; }
.mw-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; }
.mw-gallery > * { border-radius: var(--mw-radius-sm); overflow: hidden; }
.mw-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mw-ease); }
.mw-gallery > *:hover img { transform: scale(1.05); }
.mw-gallery > *:nth-child(5n+1) { grid-row: span 2; }

/* ---------- badges & ribbons ---------- */
.mw-badge { display: inline-block; padding: 6px 12px; border-radius: 8px; background: color-mix(in srgb, var(--mw-primary) 12%, #fff); color: var(--mw-primary); font-weight: 800; font-size: .82rem; }
.mw-ribbon { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 6px 12px; border-radius: 8px; background: var(--mw-accent); color: var(--mw-ink); font-weight: 800; font-size: .82rem; box-shadow: var(--mw-shadow-sm); }

/* ---------- product cards ---------- */
.mw-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.mw-product { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); overflow: hidden; box-shadow: var(--mw-shadow-sm); transition: transform .35s var(--mw-ease), box-shadow .35s var(--mw-ease); height: 100%; color: var(--mw-ink) !important; }
.mw-product:hover { transform: translateY(-5px); box-shadow: var(--mw-shadow); }
.mw-product__media { position: relative; aspect-ratio: 1 / 1; background: var(--mw-surface); overflow: hidden; }
.mw-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--mw-ease); }
.mw-product:hover .mw-product__media img { transform: scale(1.05); }
.mw-product__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mw-product__title { font-family: var(--mw-font-display); font-weight: 800; font-size: 1.12rem; line-height: 1.3; margin: 0; }
.mw-product__text { color: var(--mw-muted); font-size: .94rem; margin: 0; }
.mw-product__price { margin-top: auto; font-weight: 800; font-size: 1.2rem; color: var(--mw-primary); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mw-product__price del, .mw-product__price s { color: var(--mw-muted); font-weight: 500; font-size: .95rem; }
.mw-product__price ins { text-decoration: none; }
.mw-product__price small, .mw-product__price strike { color: var(--mw-muted); font-weight: 500; font-size: .92rem; margin-inline-end: 6px; }
.mw-product__cta { margin-top: 10px; display: inline-flex; justify-content: center; padding: 11px 16px; border-radius: var(--mw-btn-radius); background: var(--mw-ink); color: #fff; font-weight: 700; font-size: .95rem; transition: background-color .25s; }
.mw-product:hover .mw-product__cta { background: var(--mw-primary); }

/* ---------- pricing / packages ---------- */
.mw-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
.mw-plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--mw-shadow-sm); }
.mw-plan--featured { border: 2px solid var(--mw-primary); box-shadow: var(--mw-shadow); transform: translateY(-6px); }
.mw-plan__name { font-family: var(--mw-font-display); font-weight: 800; font-size: 1.3rem; margin: 0; }
.mw-plan__price { font-family: var(--mw-font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--mw-primary); }
.mw-plan__price small { font-size: 1rem; color: var(--mw-muted); font-weight: 500; }
.mw-plan .mw-list { margin-top: 4px; flex: 1; }
.mw-plan .mw-btn { width: 100%; }

/* ---------- team ---------- */
.mw-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.mw-person { text-align: center; }
.mw-person img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; border-radius: var(--mw-radius); box-shadow: var(--mw-shadow-sm); margin-bottom: 14px; }
.mw-person__name { font-family: var(--mw-font-display); font-weight: 800; font-size: 1.15rem; margin: 0; }
.mw-person__role { color: var(--mw-primary); font-weight: 700; font-size: .92rem; }
.mw-person__text { color: var(--mw-muted); font-size: .95rem; margin-top: 6px; }

/* ---------- timeline (story / milestones) ---------- */
.mw-timeline { position: relative; max-width: 820px; margin-inline: auto; padding-inline-start: 34px; display: grid; gap: 26px; }
.mw-timeline::before { content: ""; position: absolute; inset-inline-start: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--mw-primary), var(--mw-accent)); border-radius: 2px; }
.mw-tl-item { position: relative; background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius-sm); padding: 18px 22px; box-shadow: var(--mw-shadow-sm); }
.mw-tl-item::before { content: ""; position: absolute; inset-inline-start: -32px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--mw-primary); }
.mw-tl-item__when { font-weight: 800; color: var(--mw-primary); font-size: .9rem; }
.mw-tl-item__title { font-weight: 800; font-size: 1.1rem; margin: 2px 0 4px; }

/* ---------- opening hours + map / contact cards ---------- */
.mw-info { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.mw-hours { background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: 26px; box-shadow: var(--mw-shadow-sm); }
.mw-hours__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--mw-line); }
.mw-hours__row:last-child { border-bottom: 0; }
.mw-hours__row b { font-weight: 700; }
.mw-map { border-radius: var(--mw-radius); overflow: hidden; min-height: 320px; box-shadow: var(--mw-shadow-sm); background: var(--mw-surface-2); }
.mw-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.mw-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.mw-contact__item { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius-sm); padding: 18px; color: var(--mw-ink) !important; transition: border-color .25s, transform .25s var(--mw-ease); }
.mw-contact__item:hover { border-color: var(--mw-primary); transform: translateY(-2px); }
.mw-contact__icon { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--mw-primary) 12%, #fff); color: var(--mw-primary); font-size: 1.3rem; }
.mw-contact__label { display: block; font-size: .85rem; color: var(--mw-muted); }
.mw-contact__value { font-weight: 800; direction: ltr; unicode-bidi: plaintext; }

/* ---------- video ---------- */
.mw-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mw-radius); overflow: hidden; box-shadow: var(--mw-shadow); background: #000; }
.mw-video iframe, .mw-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- logos strip ---------- */
.mw-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 4vw, 54px); }
.mw-logos img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.mw-logos img:hover { filter: none; opacity: 1; }

/* ---------- bento feature grid ---------- */
.mw-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 16px; }
.mw-bento > * { background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: 24px; position: relative; overflow: hidden; }
.mw-bento__item--wide { grid-column: span 2; }
.mw-bento__item--tall { grid-row: span 2; }
.mw-bento__item--accent { background: var(--mw-grad) !important; color: var(--mw-on-primary); border: 0 !important; }
.mw-bento__item--image { padding: 0 !important; }
.mw-bento__item--image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- statement / highlight band ---------- */
.mw-statement { font-family: var(--mw-font-display); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.25; text-align: center; max-width: 920px; margin-inline: auto; }
.mw-statement__by { display: block; margin-top: 16px; font-family: var(--mw-font-body); font-size: 1rem; font-weight: 600; color: var(--mw-muted); }

/* ---------- entity / inner-page helpers (used by redesigned category templates) ---------- */
.mw-article { max-width: 860px; margin-inline: auto; }
.mw-article__media img { width: 100%; border-radius: var(--mw-radius); box-shadow: var(--mw-shadow); margin-bottom: 26px; }
.mw-article__body { font-size: 1.08rem; }
.mw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.mw-aside { position: sticky; top: 110px; display: grid; gap: 14px; }
.mw-aside__item { display: flex; gap: 12px; align-items: center; color: var(--mw-ink) !important; padding: 10px; border-radius: var(--mw-radius-sm); border: 1px solid var(--mw-line); background: #fff; }
.mw-aside__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: 0 0 64px; }
.mw-pagehead { padding-block: clamp(40px, 6vw, 80px); background: var(--mw-surface); text-align: center; }
.mw-pagehead .mw-title { margin-bottom: 6px; }
.mw-pager { margin-top: 34px; display: flex; justify-content: center; }

/* ---------- floating WhatsApp ---------- */
.mw-float-wa { position: fixed; z-index: 9990; bottom: 22px; inset-inline-start: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff !important; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7); transition: transform .25s var(--mw-ease); }
.mw-float-wa:hover { transform: scale(1.08); }
.mw-float-wa svg { width: 30px; height: 30px; fill: currentColor; }
.mw-float-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: mw-pulse 2.4s infinite; }
@keyframes mw-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- reveal on scroll (only when JS is present) ---------- */
.mw-js .mw-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--mw-ease), transform .8s var(--mw-ease); animation: mw-failsafe 0s 3s forwards; }
.mw-js .mw-reveal.mw-in { opacity: 1; transform: none; animation: none; }
.mw-js .mw-reveal[data-mw-delay="1"] { transition-delay: .08s; }
.mw-js .mw-reveal[data-mw-delay="2"] { transition-delay: .16s; }
.mw-js .mw-reveal[data-mw-delay="3"] { transition-delay: .24s; }
.mw-js .mw-reveal[data-mw-delay="4"] { transition-delay: .32s; }
@keyframes mw-failsafe { to { opacity: 1; transform: none; } }
.mw-float { animation: mw-float 6s ease-in-out infinite; }
@keyframes mw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- global polish (safe, skin-agnostic) ---------- */
html { scroll-behavior: smooth; }
::selection { background: var(--mw-primary); color: #fff; }
a:focus-visible, button:focus-visible, .mw-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--mw-primary) 55%, transparent); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .mw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mw-split { grid-template-columns: 1fr; }
    .mw-split--reverse .mw-split__media { order: 0; }
    .mw-cta { grid-template-columns: 1fr; text-align: center; }
    .mw-cta .mw-actions { justify-content: center; }
    .mw-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
    .mw-info, .mw-layout { grid-template-columns: 1fr; }
    .mw-aside { position: static; }
    .mw-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mw-plan--featured { transform: none; }
}
@media (max-width: 575px) {
    .mw-bento { grid-template-columns: 1fr; }
    .mw-bento__item--wide { grid-column: auto; }
}
@media (max-width: 575px) {
    .mw { font-size: 16px; }
    .mw-grid--2, .mw-grid--3 { grid-template-columns: 1fr; }
    .mw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mw-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mw-product__body { padding: 12px 12px 14px; }
    .mw-product__title { font-size: 1rem; }
    .mw-actions .mw-btn { flex: 1 1 100%; }
    .mw-float-wa { width: 52px; height: 52px; bottom: 16px; inset-inline-start: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .mw-marquee__track, .mw-float, .mw-float-wa::before { animation: none !important; }
    .mw-js .mw-reveal { opacity: 1; transform: none; transition: none; animation: none; }
    html { scroll-behavior: auto; }
}