/* ═══════════════════════════════════════════════════ modern.css — Yilmaz Theme v2 | Prefix: m- / mh- Slider: 1920×1080 desktop / 800×416 mobile Product img: 1500×830 ═══════════════════════════════════════════════════ */ /* ── 1. TOKENS ─────────────────────────────────── */ :root { --c-white: #ffffff; --c-bg: #ffffff; --c-bg2: #f7f7f7; --c-dark: #1c1c1c; --c-text: #333333; --c-muted: #888888; --c-border: #e8e8e8; --c-accent: #e63946; --c-accent2: #c1121f; --c-success: #16a34a; --c-danger: #e63946; --c-warning: #f59e0b; --f-heading: 'Montserrat', sans-serif; --f-body: 'Montserrat', sans-serif; --fw-normal: 400; --fw-medium: 500; --radius: 8px; --radius-lg: 12px; --radius-sm: 4px; --shadow-sm: 0 1px 4px rgba(0,0,0,.07); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.12); --t: all .2s ease; --t-fast: all .15s ease; --m-hero-mobile-ar: 800 / 416; --product-img-ar: 1500 / 830; } /* ── 2. RESET ──────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; } body { font-family: var(--f-body); font-size: 14px; font-weight: var(--fw-medium); color: var(--c-text); background: var(--c-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--f-heading); font-weight: var(--fw-medium); margin: 0; } button, input, select, textarea { font-family: inherit; } a { color: inherit; text-decoration: none !important; } a:hover { text-decoration: none !important; } img { max-width: 100%; height: auto; } p { margin: 0; } ul,ol { margin: 0; padding: 0; list-style: none; } button { cursor: pointer; } /* ── 3. CONTAINER ──────────────────────────────── */ .m-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* ── 4. TOPBAR ─────────────────────────────────── */ .mh-topbar { background: #f5f5f5; border-bottom: 1px solid var(--c-border); height: 36px; display: flex; align-items: center; } .mh-topbar__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 0 24px; width: 100%; font-size: 12px; color: var(--c-muted); } .mh-topbar__left, .mh-topbar__right { display: flex; align-items: center; gap: 16px; } .mh-topbar__left a, .mh-topbar__right a { color: var(--c-muted); font-size: 12px; display: flex; align-items: center; gap: 5px; transition: var(--t); } .mh-topbar__left a:hover, .mh-topbar__right a:hover { color: var(--c-accent); } .mh-topbar__sep { width: 1px; height: 14px; background: var(--c-border); } /* ── 5. MAIN HEADER ────────────────────────────── */ .mh-header { background: var(--c-white); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } .mh-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 72px; gap: 24px; } .mh-search form { display: flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; max-width: 320px; background: var(--c-bg2); transition: var(--t); } .mh-search form:focus-within { border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 3px rgba(230,57,70,.08); } .mh-search input { border: none; background: transparent; padding: 10px 14px; font-size: 13px; font-family: var(--f-body); color: var(--c-text); flex: 1; outline: none; min-width: 0; } .mh-search button { border: none; background: transparent; padding: 0 12px; cursor: pointer; color: var(--c-muted); display: flex; align-items: center; height: 100%; transition: var(--t); } .mh-search button:hover { color: var(--c-accent); } .mh-search button svg { width: 18px; height: 18px; } .mh-logo { text-align: center; } .mh-logo a { display: inline-block; } .mh-logo img { max-height: 48px; width: auto; } .mh-logo__link { position: relative; min-width: 140px; min-height: 48px; display: inline-flex !important; align-items: center; justify-content: center; } .mh-logo__img { display: block; transition: opacity .22s ease, filter .22s ease; } .mh-logo__img--dark { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); opacity: 1; } .mh-logo__img--light { opacity: 0; } .mh-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; } .mh-action { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); border: none; background: transparent; cursor: pointer; color: var(--c-dark); position: relative; transition: var(--t); text-decoration: none; } .mh-action svg { width: 20px; height: 20px; } .mh-action:hover { background: var(--c-bg2); color: var(--c-accent); } .mh-action__badge { position: absolute; top: 2px; right: 2px; background: var(--c-accent); color: #fff; font-size: 10px; font-weight: var(--fw-medium); width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-heading); } /* User dropdown */ .mh-user-dropdown { position: relative; } .mh-user-dropdown__menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--t); z-index: 100; overflow: hidden; } .mh-user-dropdown:hover .mh-user-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); } .mh-user-dropdown__menu a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 13px; color: var(--c-text); transition: var(--t-fast); } .mh-user-dropdown__menu a:hover { background: var(--c-bg2); color: var(--c-accent); } /* Mini cart */ .mh-cart-wrap { position: relative; } .mh-cart-mini { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--t); z-index: 100; } .mh-cart-wrap:hover .mh-cart-mini { opacity: 1; visibility: visible; transform: translateY(0); } .mh-cart-mini__header { padding: 14px 20px; border-bottom: 1px solid var(--c-border); } .mh-cart-mini__title { font-size: 14px; font-weight: var(--fw-medium); font-family: var(--f-heading); color: var(--c-dark); } .mh-cart-mini__body { max-height: 280px; overflow-y: auto; padding: 6px 0; } .mh-cart-mini__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; transition: var(--t-fast); } .mh-cart-mini__item:hover { background: var(--c-bg2); } .mh-cart-mini__img { width: 72px; height: auto; aspect-ratio: var(--product-img-ar); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; background: var(--c-bg2); } .mh-cart-mini__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mh-cart-mini__info { flex: 1; min-width: 0; } .mh-cart-mini__name { font-size: 13px; font-weight: 500; color: var(--c-dark); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .mh-cart-mini__price { font-size: 12px; color: var(--c-muted); } .mh-cart-mini__remove { color: var(--c-muted); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--t-fast); flex-shrink: 0; } .mh-cart-mini__remove:hover { background: #fee; color: var(--c-accent); } .mh-cart-mini__footer { border-top: 1px solid var(--c-border); padding: 14px 20px; } .mh-cart-mini__totals { margin-bottom: 12px; } .mh-cart-mini__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--c-muted); margin-bottom: 4px; } .mh-cart-mini__row--total { font-weight: var(--fw-medium); font-size: 15px; color: var(--c-dark); padding-top: 8px; border-top: 1px solid var(--c-border); margin-top: 4px; } .mh-cart-mini__btns { display: flex; gap: 8px; } .mh-cart-mini__empty { padding: 32px 20px; text-align: center; color: var(--c-muted); } .mh-cart-mini__empty svg { width: 44px; height: 44px; margin: 0 auto 12px; opacity: .35; display: block; } .mh-cart-mini__empty p { font-size: 14px; margin: 0 0 16px; } /* ── 6. NAV ─────────────────────────────────────── */ .mh-nav { background: var(--c-white); border-bottom: 1px solid var(--c-border); position: sticky; top: 72px; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,.04); } .mh-nav__inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; } .mh-nav__inner > ul { display: flex; align-items: center; list-style: none; } .mh-nav__item { position: relative; } .mh-nav__link { display: flex; align-items: center; gap: 4px; padding: 13px 13px; font-size: 13.5px; font-weight: 500; color: var(--c-dark); white-space: nowrap; transition: var(--t); font-family: var(--f-heading); } .mh-nav__link:hover, .mh-nav__item:hover > .mh-nav__link { color: var(--c-accent); } .mh-nav__link.text-red, .mh-nav__link.campaign { color: var(--c-accent) !important; font-weight: var(--fw-medium); } .mh-nav__link svg { width: 11px; height: 11px; flex-shrink: 0; } /* Mega dropdown */ .mh-mega { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--c-border); border-top: 2px solid var(--c-accent); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--t); z-index: 500; } .mh-nav__item:hover .mh-mega { opacity: 1; visibility: visible; transform: translateY(0); } .mh-mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 20px; gap: 6px 24px; } .mh-mega__col h5 { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); } .mh-mega__col h5 a { color: inherit; } .mh-mega__col a { display: block; font-size: 13px; color: var(--c-muted); padding: 4px 0; transition: var(--t-fast); } .mh-mega__col a:hover { color: var(--c-accent); padding-left: 4px; } /* ── 7. MOBILE HEADER ──────────────────────────── */ .mh-mobile { display: none; background: #fff; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } .mh-mobile__inner { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 58px; } .mh-mobile__logo img { max-height: 34px; } .mh-mobile__right { display: flex; gap: 4px; } .mh-mobile__search { padding: 8px 16px 10px; border-top: 1px solid var(--c-border); } .mh-mobile__search form { display: flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); } .mh-mobile__search input { flex: 1; border: none; background: transparent; padding: 9px 12px; font-size: 14px; outline: none; font-family: var(--f-body); } .mh-mobile__search button { border: none; background: transparent; padding: 0 12px; cursor: pointer; color: var(--c-muted); height: 38px; display: flex; align-items: center; } .mh-mobile .mh-action { color: var(--c-dark); flex-shrink: 0; } .mh-mobile .mh-action svg { width: 22px; height: 22px; stroke: currentColor; fill: none; display: block; } .mh-bottom-nav__item svg { stroke: currentColor; fill: none; display: block; } /* Drawer */ .mh-drawer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; } .mh-drawer.open { pointer-events: all; } .mh-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .25s; } .mh-drawer.open .mh-drawer__overlay { opacity: 1; } .mh-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; background: #fff; transform: translateX(-100%); transition: transform .3s cubic-bezier(.25,.46,.45,.94); overflow-y: auto; display: flex; flex-direction: column; } .mh-drawer.open .mh-drawer__panel { transform: translateX(0); } .mh-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-border); } .mh-drawer__header img { max-height: 30px; } .mh-drawer__close { border: none; background: none; cursor: pointer; font-size: 22px; color: var(--c-muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--t-fast); } .mh-drawer__close:hover { background: var(--c-bg2); color: var(--c-dark); } .mh-drawer__nav { padding: 6px 0; flex: 1; } .mh-drawer__link { display: block; padding: 13px 20px; font-size: 14px; color: var(--c-text); border-bottom: 1px solid var(--c-border); transition: var(--t-fast); } .mh-drawer__link:hover { color: var(--c-accent); background: var(--c-bg2); } /* Bottom nav */ .mh-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1800; width: 100%; background: rgba(255,255,255,.96); border-top: 1px solid var(--c-border); box-shadow: 0 -10px 30px rgba(0,0,0,.10); backdrop-filter: blur(14px); padding-bottom: env(safe-area-inset-bottom); } .mh-bottom-nav__inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; min-height: 62px; max-width: 560px; margin: 0 auto; } .mh-bottom-nav__item { min-width: 0; width: 100%; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; line-height: 1.1; color: var(--c-muted); text-decoration: none; cursor: pointer; border: none; background: transparent; padding: 7px 4px 6px; position: relative; transition: var(--t-fast); font-family: var(--f-heading); font-weight: var(--fw-medium); -webkit-tap-highlight-color: transparent; appearance: none; } .mh-bottom-nav__item svg { width: 21px; height: 21px; flex-shrink: 0; stroke-width: 2.2; } .mh-bottom-nav__item span:not(.mh-bottom-nav__badge) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mh-bottom-nav__item:hover, .mh-bottom-nav__item:focus, .mh-bottom-nav__item.active { color: var(--c-accent); outline: none; } .mh-bottom-nav__badge { position: absolute; top: 7px; left: 50%; transform: translateX(7px); background: var(--c-accent); color: #fff; font-size: 9px; font-weight: var(--fw-medium); min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px #fff; } /* ── 8. BUTTONS ─────────────────────────────────── */ .btn-m { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; font-family: var(--f-heading); font-size: 13px; font-weight: var(--fw-medium); border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: var(--t); text-decoration: none; white-space: nowrap; line-height: 1; justify-content: center; } .btn-m--dark { background: var(--c-dark); color: #fff; border-color: var(--c-dark); } .btn-m--dark:hover { background: #2d2d2d; color: #fff; } .btn-m--accent { background: var(--c-accent); color: #fff; border-color: var(--c-accent); } .btn-m--accent:hover { background: var(--c-accent2); border-color: var(--c-accent2); color: #fff; } .btn-m--outline { background: transparent; color: var(--c-dark); border-color: var(--c-border); } .btn-m--outline:hover { border-color: var(--c-dark); background: var(--c-bg2); color: var(--c-dark); } .btn-m--outline-accent { background: transparent; color: var(--c-accent); border-color: var(--c-accent); } .btn-m--outline-accent:hover { background: var(--c-accent); color: #fff; } .btn-m--sm { padding: 8px 16px; font-size: 12px; } .btn-m--lg { padding: 14px 32px; font-size: 15px; } .btn-m--full { width: 100%; justify-content: center; } /* ── 9. BREADCRUMB ──────────────────────────────── */ .m-breadcrumb { display: flex; align-items: center; gap: 6px; padding: 14px 0; font-size: 13px; color: var(--c-muted); } .m-breadcrumb a { color: var(--c-muted); transition: var(--t-fast); } .m-breadcrumb a:hover { color: var(--c-accent); } .m-breadcrumb__sep { color: var(--c-border); flex-shrink: 0; } /* ── 10. HERO SLIDER ────────────────────────────── */ /* * Desktop images: 1920×1080 (16:9) * Mobile images: 800×416 → aspect-ratio on mobile * object-fit: cover ensures the image fills the container without distortion */ .m-hero { position: relative; width: 100%; /* Fill the viewport below topbar(36) + header(72) + nav(44) = 152px */ height: calc(100vh - 152px); min-height: 460px; overflow: hidden; background: #111; } .m-hero .owl-carousel, .m-hero .owl-stage-outer, .m-hero .owl-stage, .m-hero .owl-item { height: 100%; } .m-hero__slide { position: relative; height: 100%; overflow: hidden; } .m-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .m-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.52) 0%, rgba(0,0,0,.14) 55%, rgba(0,0,0,.04) 100%); } .m-hero__content { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); max-width: 560px; color: #fff; } .m-hero__label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.75); margin-bottom: 14px; } .m-hero__title { font-family: var(--f-heading); font-size: clamp(24px, 3.5vw, 52px); font-weight: var(--fw-medium); line-height: 1.15; margin-bottom: 14px; color: #fff; } .m-hero__title em { font-style: normal; color: var(--c-warning); } .m-hero__subtitle { font-size: 16px; color: rgba(255,255,255,.85); margin-bottom: 26px; line-height: 1.6; } .m-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; } .m-hero__btn-primary { background: var(--c-accent); color: #fff; padding: 13px 28px; border-radius: var(--radius); font-weight: var(--fw-medium); font-family: var(--f-heading); font-size: 14px; transition: var(--t); display: inline-block; } .m-hero__btn-primary:hover { background: var(--c-accent2); color: #fff; } .m-hero__btn-secondary { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.55); color: #fff; padding: 13px 28px; border-radius: var(--radius); font-weight: var(--fw-medium); font-family: var(--f-heading); font-size: 14px; backdrop-filter: blur(4px); transition: var(--t); display: inline-block; } .m-hero__btn-secondary:hover { background: rgba(255,255,255,.28); color: #fff; } .m-hero__slide-name { position: absolute; bottom: 36px; right: 10%; font-family: var(--f-heading); font-size: clamp(32px, 5vw, 64px); font-weight: var(--fw-medium); color: rgba(255,255,255,.12); letter-spacing: -.02em; text-align: right; } .m-hero .owl-prev, .m-hero .owl-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,.18) !important; border: 1.5px solid rgba(255,255,255,.4) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); transition: all .35s ease; margin: 0; opacity: 0; } .m-hero:hover .owl-prev, .m-hero:hover .owl-next { opacity: 1; } .m-hero .owl-prev { left: 28px; } .m-hero .owl-next { right: 28px; } .m-hero .owl-prev:hover, .m-hero .owl-next:hover { background: rgba(255,255,255,.32) !important; border-color: rgba(255,255,255,.7) !important; transform: translateY(-50%) scale(1.08); } .m-hero .owl-prev span, .m-hero .owl-next span { display: none; } .m-hero .owl-prev::after, .m-hero .owl-next::after { content: ''; display: block; width: 10px; height: 10px; border-top: 2.5px solid #fff; border-left: 2.5px solid #fff; } .m-hero .owl-prev::after { transform: rotate(-45deg) translateX(2px); } .m-hero .owl-next::after { transform: rotate(135deg) translateX(2px); } .m-hero .owl-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .m-hero .owl-dot span { width: 24px !important; height: 3px !important; background: rgba(255,255,255,.35) !important; border-radius: 2px !important; transition: var(--t) !important; } .m-hero .owl-dot.active span { background: #fff !important; width: 40px !important; } /* ── 11. FEATURES ───────────────────────────────── */ .m-features { background: var(--c-bg2); border-bottom: 1px solid var(--c-border); } .m-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .m-feature { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-right: 1px solid var(--c-border); } .m-feature:last-child { border-right: none; } .m-feature__icon { width: 40px; height: 40px; border-radius: var(--radius); background: rgba(230,57,70,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--c-accent); } .m-feature__icon svg { width: 20px; height: 20px; } .m-feature__title { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); margin-bottom: 2px; } .m-feature__text { font-size: 12px; color: var(--c-muted); } /* ── 12. SECTIONS ───────────────────────────────── */ .m-section { padding: 64px 0; } .m-section--alt { background: var(--c-bg2); } .m-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; } .m-section-head__label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .12em; color: var(--c-accent); margin-bottom: 6px; } .m-section-head__title { font-family: var(--f-heading); font-size: clamp(20px, 2.5vw, 28px); font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.2; } .m-section-head__link { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); white-space: nowrap; transition: var(--t); font-family: var(--f-heading); padding: 8px 16px; border: 1.5px solid var(--c-border); border-radius: 100px; } .m-section-head__link:hover { border-color: var(--c-accent); color: var(--c-accent); } .m-section-head__link svg { width: 14px; height: 14px; } /* ── 13. PRODUCT CARD ───────────────────────────── */ /* * Product images: 1500×830 → aspect-ratio: var(--product-img-ar) */ .m-product-card { background: #fff; border-radius: 4px; overflow: hidden; border: 1px solid var(--c-border); transition: var(--t); position: relative; } .m-product-card:hover { box-shadow: var(--shadow-lg); border-color: transparent; transform: translateY(-2px); } .m-product-card__img { position: relative; overflow: hidden; background: var(--c-bg2); aspect-ratio: var(--product-img-ar); isolation: isolate; } .m-product-card__img > a { position: absolute; inset: 0; display: block; } .m-product-card__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .m-product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; } .m-badge { font-size: 10px; font-weight: var(--fw-medium); padding: 3px 8px; border-radius: 4px; display: inline-block; text-transform: uppercase; letter-spacing: .04em; } .m-badge--new { background: var(--c-accent); color: #fff; } .m-badge--sale { background: #f97316; color: #fff; } .m-badge--hot { background: var(--c-dark); color: #fff; } .m-badge--online { background: #16a34a; color: #fff; } .m-product-card__wish { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--t); color: var(--c-muted); border: 1px solid var(--c-border); } .m-product-card__wish:hover { color: var(--c-accent); border-color: var(--c-accent); } .m-product-card__wish svg { width: 15px; height: 15px; } .m-product-card__body { padding: 13px 14px; } .m-product-card__name { font-size: 14px; font-weight: 500; color: var(--c-dark); margin-bottom: 7px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--f-heading); } .m-product-card__pricing { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .m-product-card__old { font-size: 12px; color: var(--c-muted); text-decoration: line-through; } .m-product-card__new { font-size: 16px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); } .m-product-card__online-tag { font-size: 10px; font-weight: var(--fw-medium); color: var(--c-accent); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; display: block; } /* Product carousel nav */ .m-product-carousel { position: relative; } .m-product-carousel .owl-prev, .m-product-carousel .owl-next { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: #fff !important; border: 1.5px solid var(--c-border) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); transition: var(--t); margin: 0; z-index: 10; } .m-product-carousel .owl-prev { left: -19px; } .m-product-carousel .owl-next { right: -19px; } .m-product-carousel .owl-prev:hover, .m-product-carousel .owl-next:hover { background: var(--c-accent) !important; border-color: var(--c-accent) !important; } .m-product-carousel .owl-prev:hover::after, .m-product-carousel .owl-next:hover::after { border-color: #fff; } .m-product-carousel .owl-prev span, .m-product-carousel .owl-next span { display: none; } .m-product-carousel .owl-prev::after, .m-product-carousel .owl-next::after { content: ''; display: block; width: 9px; height: 9px; border-top: 2px solid var(--c-dark); border-left: 2px solid var(--c-dark); } .m-product-carousel .owl-prev::after { transform: rotate(-45deg) translateX(2px); } .m-product-carousel .owl-next::after { transform: rotate(135deg) translateX(2px); } .m-product-carousel .owl-stage { padding: 8px 2px 16px; } .m-product-carousel .owl-item { padding: 0 6px; } /* ── 14. CATEGORY CARDS ─────────────────────────── */ .m-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .m-cat-grid .m-cat-card:first-child { grid-column: span 2; grid-row: span 2; } .m-cat-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; cursor: pointer; } .m-cat-grid .m-cat-card:first-child { aspect-ratio: auto; } .m-cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .m-cat-card:hover img { transform: scale(1.06); } .m-cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.08) 60%); transition: var(--t); } .m-cat-card:hover .m-cat-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 70%); } .m-cat-card__content { position: absolute; bottom: 18px; left: 18px; } .m-cat-card__title { font-family: var(--f-heading); font-size: 17px; font-weight: var(--fw-medium); color: #fff; margin-bottom: 7px; } .m-cat-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.8); transition: var(--t); } .m-cat-card:hover .m-cat-card__link { color: #fff; gap: 10px; } /* ── 15. SHOP / CATEGORY ────────────────────────── */ .m-shop { padding: 0 0 64px; } .m-shop__layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } .m-filter-sidebar { position: sticky; top: 90px; } .m-filter-panel { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; } .m-filter-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--c-border); font-weight: var(--fw-medium); font-family: var(--f-heading); font-size: 14px; color: var(--c-dark); } .m-filter-block { border-bottom: 1px solid var(--c-border); } .m-filter-block:last-child { border-bottom: none; } .m-filter-block__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); cursor: pointer; user-select: none; font-family: var(--f-heading); transition: var(--t-fast); } .m-filter-block__head:hover { color: var(--c-accent); } .m-filter-block__head svg { width: 14px; height: 14px; transition: transform .2s; } .m-filter-block__head.open svg { transform: rotate(180deg); } .m-filter-block__body { padding: 4px 20px 14px; } .m-filter-block__body.collapsed { display: none; } .m-check-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: 13px; color: var(--c-text); transition: var(--t-fast); } .m-check-item:hover { color: var(--c-accent); } .m-check-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--c-accent); cursor: pointer; flex-shrink: 0; } .m-price-range { padding: 6px 0; } .m-price-text { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); margin: 8px 0 0; } .m-shop__products { min-width: 0; } .m-shop-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin-bottom: 20px; border-bottom: 1px solid var(--c-border); gap: 12px; } .m-shop-toolbar__count { font-size: 13px; color: var(--c-muted); } .m-shop-toolbar__count strong { color: var(--c-accent); font-weight: var(--fw-medium); } .m-filter-toggle { display: none; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid var(--c-border); border-radius: var(--radius); background: #fff; font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; color: var(--c-dark); font-family: var(--f-heading); transition: var(--t); } .m-filter-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); } .m-sort-select { padding: 8px 34px 8px 12px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 13px; font-family: var(--f-body); color: var(--c-dark); background: #fff; cursor: pointer; outline: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: var(--t); } .m-sort-select:focus { border-color: var(--c-accent); } .m-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .m-empty { padding: 60px 20px; text-align: center; color: var(--c-muted); } .m-empty svg { width: 52px; height: 52px; margin: 0 auto 16px; opacity: .35; display: block; } .m-empty__title { font-size: 18px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; font-family: var(--f-heading); } .m-empty__text { font-size: 14px; } .m-cat-desc { margin-top: 48px; padding: 28px 32px; background: var(--c-bg2); border-radius: var(--radius-lg); border: 1px solid var(--c-border); } .m-cat-desc h4 { font-family: var(--f-heading); font-size: 17px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 10px; } .m-cat-desc p, .m-cat-desc div { font-size: 14px; color: var(--c-muted); line-height: 1.8; } /* ── 16. PAGINATION ─────────────────────────────── */ .m-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 40px; flex-wrap: wrap; } .m-pagination a, .m-pagination span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); border: 1.5px solid var(--c-border); font-size: 13px; font-weight: var(--fw-medium); color: var(--c-muted); transition: var(--t); font-family: var(--f-heading); } .m-pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); } .m-pagination span.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } /* ── 17. PRODUCT DETAIL ─────────────────────────── */ .m-product-detail { padding: 28px 0 64px; } .m-product-layout { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; } .m-gallery { position: sticky; top: 90px; } .m-gallery #main-product-slider { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg2); } .m-gallery #main-product-slider .splide__track { aspect-ratio: var(--product-img-ar); } .m-gallery #main-product-slider .splide__list, .m-gallery #main-product-slider .splide__slide { height: 100%; } .m-gallery #main-product-slider .splide__slide { display: flex; align-items: center; justify-content: center; background: var(--c-bg2); } .m-gallery #main-product-slider .splide__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .m-gallery #thumbnail-product-slider { margin-top: 12px; } .m-gallery #thumbnail-product-slider .splide__slide { aspect-ratio: var(--product-img-ar); border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; opacity: .72; transition: var(--t-fast); cursor: pointer; background: var(--c-bg2); } .m-gallery #thumbnail-product-slider .splide__slide.is-active { border-color: var(--c-accent); opacity: 1; } .m-gallery #thumbnail-product-slider .splide__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .m-product-summary__name { font-family: var(--f-heading); font-size: clamp(20px, 2.5vw, 28px); font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 12px; line-height: 1.2; } .m-product-badge-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .m-product-discount-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--c-accent); color: #fff; font-size: 12px; font-weight: var(--fw-medium); padding: 4px 10px; border-radius: 100px; } .m-product-price-box { background: var(--c-bg2); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; } .m-product-price-old { font-size: 14px; color: var(--c-muted); text-decoration: line-through; margin-bottom: 4px; } .m-product-price-new { font-family: var(--f-heading); font-size: 28px; font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1; } .m-product-price-kdv { font-size: 12px; color: var(--c-muted); margin-top: 4px; } .m-product-actions { display: flex; gap: 10px; margin-bottom: 18px; } .m-product-actions > * { flex: 1; } .m-product-qty { display: flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; width: 120px; flex: none; } .m-product-qty button { width: 38px; height: 46px; border: none; background: var(--c-bg2); cursor: pointer; font-size: 18px; color: var(--c-dark); transition: var(--t-fast); display: flex; align-items: center; justify-content: center; } .m-product-qty button:hover { background: var(--c-border); } .m-product-qty input { flex: 1; border: none; text-align: center; font-size: 15px; font-weight: var(--fw-medium); background: #fff; outline: none; font-family: var(--f-heading); color: var(--c-dark); height: 46px; } .m-parts-summary { border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: 13px; } .m-parts-summary__row { display: flex; justify-content: space-between; padding: 4px 0; } .m-parts-summary__total { border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 8px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); } .m-product-wa { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #25d366; color: #fff; border-radius: var(--radius); font-size: 14px; font-weight: var(--fw-medium); font-family: var(--f-heading); width: 100%; justify-content: center; margin-bottom: 14px; transition: var(--t); } .m-product-wa:hover { background: #1aaa52; color: #fff; } .m-product-delivery { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); padding: 12px 0; border-top: 1px solid var(--c-border); } .m-product-delivery svg { color: var(--c-success); width: 16px; height: 16px; flex-shrink: 0; } .m-product-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .m-product-tag { padding: 5px 12px; border: 1px solid var(--c-border); border-radius: 100px; font-size: 12px; color: var(--c-muted); transition: var(--t-fast); } .m-product-tag:hover { border-color: var(--c-accent); color: var(--c-accent); } /* Tabs */ .m-tabs-nav { display: flex; border-bottom: 2px solid var(--c-border); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .m-tabs-nav::-webkit-scrollbar { display: none; } .m-tab-btn { flex-shrink: 0; padding: 12px 18px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--t); font-family: var(--f-heading); white-space: nowrap; } .m-tab-btn:hover { color: var(--c-dark); } .m-tab-btn.active { color: var(--c-accent); border-bottom-color: var(--c-accent); } .m-tab-pane { display: none; } .m-tab-pane.active { display: block; } .m-installment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .m-installment-item { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px; text-align: center; font-size: 13px; } .m-installment-item__bank { font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); margin-bottom: 6px; } .m-installment-item__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-muted); padding: 2px 0; } /* ── 18. CART ───────────────────────────────────── */ .m-cart { padding: 28px 0 64px; } .m-cart__layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; } .m-cart__title { font-family: var(--f-heading); font-size: 22px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 20px; } .m-cart-item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 18px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); margin-bottom: 10px; transition: var(--t); } .m-cart-item:hover { box-shadow: var(--shadow); } .m-cart-item__img { width: 88px; height: auto; aspect-ratio: var(--product-img-ar); border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); flex-shrink: 0; } .m-cart-item__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .m-cart-item__info { min-width: 0; } .m-cart-item__name { font-size: 14px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 4px; font-family: var(--f-heading); } .m-cart-item__parts { font-size: 12px; color: var(--c-muted); margin-bottom: 12px; } .m-cart-item__footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .m-cart-item__price { font-size: 16px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); margin-left: auto; } .m-cart-item__remove { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-muted); cursor: pointer; border: none; background: none; padding: 0; transition: var(--t-fast); } .m-cart-item__remove:hover { color: var(--c-accent); } .m-cart-item__remove svg { width: 14px; height: 14px; } .m-qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; } .m-qty-stepper button { width: 32px; height: 32px; border: none; background: var(--c-bg2); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: var(--t-fast); color: var(--c-dark); } .m-qty-stepper button:hover { background: var(--c-border); } .m-qty-stepper input { width: 40px; height: 32px; border: none; text-align: center; font-size: 14px; font-weight: var(--fw-medium); background: #fff; outline: none; font-family: var(--f-heading); color: var(--c-dark); } .m-cart-summary { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 90px; } .m-cart-summary__title { font-family: var(--f-heading); font-size: 16px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 18px; } .m-cart-summary__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-muted); padding: 8px 0; border-bottom: 1px solid var(--c-border); } .m-cart-summary__total { display: flex; justify-content: space-between; font-size: 18px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); padding: 16px 0 20px; border-top: 2px solid var(--c-border); margin-top: 4px; } .m-coupon-form { display: flex; gap: 8px; margin: 14px 0; } .m-coupon-input { flex: 1; border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; font-family: var(--f-body); outline: none; transition: var(--t); } .m-coupon-input:focus { border-color: var(--c-accent); } /* ── 19. CHECKOUT ───────────────────────────────── */ .m-checkout { padding: 28px 0 64px; } .m-checkout__layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; } .m-checkout__title { font-family: var(--f-heading); font-size: 22px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 22px; } .m-checkout-step { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; } .m-checkout-step__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; font-weight: var(--fw-medium); font-family: var(--f-heading); font-size: 15px; color: var(--c-dark); } .m-checkout-step__num { width: 30px; height: 30px; background: var(--c-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--fw-medium); flex-shrink: 0; font-family: var(--f-heading); } .m-checkout-step__body { padding: 0 20px 20px; border-top: 1px solid var(--c-border); } .m-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; } .m-address-card { border: 2px solid var(--c-border); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: var(--t); position: relative; } .m-address-card.selected { border-color: var(--c-accent); background: rgba(230,57,70,.03); } .m-address-card__name { font-weight: var(--fw-medium); font-size: 14px; color: var(--c-dark); font-family: var(--f-heading); margin-bottom: 5px; margin-right: 28px; } .m-address-card__text { font-size: 13px; color: var(--c-muted); line-height: 1.6; } .m-cargo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; } .m-cargo-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 2px solid var(--c-border); border-radius: var(--radius); cursor: pointer; transition: var(--t); font-size: 13px; font-weight: 500; } .m-cargo-option.selected { border-color: var(--c-accent); } .m-cargo-option input[type=radio] { accent-color: var(--c-accent); width: 16px; height: 16px; } .m-payment-tabs { display: flex; margin-bottom: 20px; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; } .m-payment-tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; font-size: 13px; font-weight: var(--fw-medium); font-family: var(--f-heading); color: var(--c-muted); background: #fff; border: none; transition: var(--t); border-right: 1.5px solid var(--c-border); } .m-payment-tab:last-child { border-right: none; } .m-payment-tab.active { background: var(--c-accent); color: #fff; } .m-order-summary { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 22px; position: sticky; top: 90px; } .m-order-summary__title { font-family: var(--f-heading); font-size: 16px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 18px; } .m-order-summary__item { display: flex; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); } .m-order-summary__item:last-of-type { border-bottom: none; } .m-order-summary__img { width: 72px; height: auto; aspect-ratio: var(--product-img-ar); border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); flex-shrink: 0; } .m-order-summary__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .m-order-summary__info { flex: 1; min-width: 0; } .m-order-summary__name { font-size: 13px; font-weight: 500; color: var(--c-dark); line-height: 1.3; margin-bottom: 3px; } .m-order-summary__price { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); } .m-order-totals { margin-top: 14px; } .m-order-totals__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-muted); padding: 5px 0; } .m-order-totals__final { display: flex; justify-content: space-between; font-size: 17px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); padding: 12px 0 0; border-top: 2px solid var(--c-border); margin-top: 8px; } /* ── 20. FOOTER ─────────────────────────────────── */ .m-footer { background: var(--c-white); border-top: 1px solid var(--c-border); } .m-footer-newsletter { background: var(--c-bg2); border-bottom: 1px solid var(--c-border); padding: 28px 0; } .m-footer-newsletter__inner { max-width: 560px; margin: 0 auto; text-align: center; padding: 0 24px; } .m-footer-newsletter__sub { font-size: 12px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin-bottom: 4px; } .m-footer-newsletter__title { font-family: var(--f-heading); font-size: 17px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 16px; } .m-footer-newsletter__form { display: flex; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: #fff; } .m-footer-newsletter__input { flex: 1; border: none; padding: 11px 18px; font-size: 14px; font-family: var(--f-body); outline: none; background: transparent; min-width: 0; } .m-footer-newsletter__btn { padding: 0 20px; border: none; background: var(--c-accent); color: #fff; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-medium); font-family: var(--f-heading); transition: var(--t); white-space: nowrap; flex-shrink: 0; } .m-footer-newsletter__btn:hover { background: var(--c-accent2); } .m-footer-newsletter__btn svg { width: 16px; height: 16px; } .m-footer__main { padding: 44px 0 28px; } .m-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; } .m-footer-brand__logo { margin-bottom: 14px; } .m-footer-brand__logo img { max-height: 42px; } .m-footer-brand__addr { font-size: 13px; color: var(--c-muted); line-height: 1.7; margin-bottom: 14px; } .m-footer-social-label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin-bottom: 10px; } .m-footer-social { display: flex; gap: 8px; } .m-footer-social a { width: 34px; height: 34px; border: 1.5px solid var(--c-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: 14px; transition: var(--t); } .m-footer-social a:hover { border-color: var(--c-accent); color: var(--c-accent); background: rgba(230,57,70,.05); } .m-footer-col__title { font-family: var(--f-heading); font-size: 12px; font-weight: var(--fw-medium); color: var(--c-dark); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; } .m-footer-col a { display: block; font-size: 13px; color: var(--c-muted); padding: 5px 0; transition: var(--t-fast); } .m-footer-col a:hover { color: var(--c-accent); padding-left: 4px; } .m-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--c-border); gap: 12px; flex-wrap: wrap; } .m-footer__copyright { font-size: 13px; color: var(--c-muted); } .m-footer__copyright strong { color: var(--c-dark); } .m-footer__payment img { max-height: 26px; opacity: .65; } /* ── 21. DYNAMIC PAGE ───────────────────────────── */ .m-page__header { background: var(--c-bg2); padding: 36px 0; border-bottom: 1px solid var(--c-border); } .m-page { padding: 44px 0 64px; } .m-page__content { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 36px 44px; } .m-page__content h1,.m-page__content h2,.m-page__content h3 { font-family: var(--f-heading); color: var(--c-dark); margin-bottom: 14px; margin-top: 24px; line-height: 1.3; } .m-page__content h1:first-child,.m-page__content h2:first-child { margin-top: 0; } .m-page__content p { line-height: 1.8; color: var(--c-text); margin-bottom: 14px; } .m-page__content a { color: var(--c-accent); } .m-page__content img { border-radius: var(--radius); margin-bottom: 16px; } /* ── 22. AUTH ───────────────────────────────────── */ .m-auth { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--c-bg2); } .m-auth__card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); } .m-auth__logo { text-align: center; margin-bottom: 24px; } .m-auth__logo img { max-height: 40px; } .m-auth__title { font-family: var(--f-heading); font-size: 22px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 6px; text-align: center; } .m-auth__subtitle { font-size: 13px; color: var(--c-muted); text-align: center; margin-bottom: 26px; line-height: 1.6; } .m-form-group { margin-bottom: 15px; } .m-form-label { display: block; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 6px; font-family: var(--f-heading); } .m-form-label .req { color: var(--c-accent); } .m-form-input { width: 100%; border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 11px 14px; font-size: 14px; font-family: var(--f-body); color: var(--c-dark); outline: none; transition: var(--t); background: #fff; display: block; } .m-form-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(230,57,70,.08); } .m-form-input.is-invalid { border-color: var(--c-danger); } .m-form-error { display: flex; align-items: flex-start; gap: 6px; padding: 10px 14px; background: #fff5f5; border: 1px solid #fecdd3; border-radius: var(--radius); font-size: 13px; color: var(--c-danger); margin-bottom: 12px; } .m-form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--c-muted); cursor: pointer; margin-bottom: 14px; line-height: 1.5; } .m-form-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--c-accent); flex-shrink: 0; margin-top: 2px; } .m-auth__links { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 13px; flex-wrap: wrap; gap: 8px; } .m-auth__links a { color: var(--c-accent); } .m-auth__links a:hover { text-decoration: underline; } .m-auth__or { text-align: center; font-size: 13px; color: var(--c-muted); margin: 18px 0; position: relative; } .m-auth__or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--c-border); } .m-auth__or span { background: #fff; padding: 0 12px; position: relative; } /* ── 23. USER ACCOUNT ───────────────────────────── */ .m-account { padding: 36px 0 64px; background: var(--c-bg2); min-height: 70vh; } .m-account__layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; } .m-account-sidebar { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 90px; } .m-account-sidebar__header { padding: 18px 20px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 12px; } .m-account-sidebar__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: var(--fw-medium); font-family: var(--f-heading); flex-shrink: 0; } .m-account-sidebar__name { font-size: 14px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); } .m-account-sidebar__email { font-size: 11px; color: var(--c-muted); margin-top: 1px; } .m-account-nav { padding: 6px 0; } .m-account-nav__link { display: flex; align-items: center; gap: 10px; padding: 11px 20px; font-size: 13px; color: var(--c-text); transition: var(--t-fast); font-weight: 500; border-left: 3px solid transparent; } .m-account-nav__link svg { width: 16px; height: 16px; color: var(--c-muted); flex-shrink: 0; } .m-account-nav__link:hover { color: var(--c-accent); background: var(--c-bg2); } .m-account-nav__link.active { color: var(--c-accent); background: rgba(230,57,70,.05); border-left-color: var(--c-accent); font-weight: var(--fw-medium); } .m-account-nav__link.active svg { color: var(--c-accent); } .m-account-nav__link--danger { color: var(--c-danger) !important; } .m-account-nav__link--danger svg { color: var(--c-danger) !important; } .m-account-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; } .m-account-card__header { padding: 15px 22px; border-bottom: 1px solid var(--c-border); font-family: var(--f-heading); font-size: 15px; font-weight: var(--fw-medium); color: var(--c-dark); } .m-account-card__body { padding: 22px; } .m-order-card { border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .m-order-card__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--c-bg2); border-bottom: 1px solid var(--c-border); flex-wrap: wrap; gap: 8px; } .m-order-card__code { font-family: var(--f-heading); font-weight: var(--fw-medium); color: var(--c-dark); font-size: 14px; } .m-order-card__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--c-border); } .m-order-card__meta-label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin-bottom: 4px; } .m-order-card__meta-value { font-size: 14px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); } .m-order-card__footer { display: flex; justify-content: flex-end; padding: 12px 18px; } .m-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: var(--fw-medium); } .m-status-badge--success { background: #dcfce7; color: #166534; } .m-status-badge--warning { background: #fef9c3; color: #854d0e; } .m-status-badge--danger { background: #fee2e2; color: #991b1b; } .m-status-badge--info { background: #dbeafe; color: #1e40af; } /* ── 24. FAB / SCROLL ───────────────────────────── */ .m-whatsapp-fab { position: fixed; bottom: 76px; right: 20px; z-index: 900; } .m-whatsapp-fab a { width: 50px; height: 50px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.38); transition: var(--t); } .m-whatsapp-fab a:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37,211,102,.5); } .m-whatsapp-fab svg { width: 26px; height: 26px; } .m-scroll-top { position: fixed; bottom: 138px; right: 20px; width: 38px; height: 38px; background: #fff; border: 1.5px solid var(--c-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); z-index: 900; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--t); color: var(--c-dark); } .m-scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .m-scroll-top:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } /* ── 25. MISC ───────────────────────────────────── */ .maintenance-bar { background: var(--c-accent); color: #fff; text-align: center; padding: 8px; font-size: 14px; font-weight: var(--fw-medium); font-family: var(--f-heading); } .loading { position: fixed; inset: 0; background: rgba(255,255,255,.7); backdrop-filter: blur(2px); z-index: 9999; display: flex; align-items: center; justify-content: center; } .loading.hidden { display: none !important; } .loading::after { content: ''; width: 38px; height: 38px; border: 3px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: m-spin .7s linear infinite; } @keyframes m-spin { to { transform: rotate(360deg); } } .toast-top-right { top: 96px !important; } /* ── 26. JQUERY UI SLIDER ───────────────────────── */ .ui-slider { height: 4px; background: var(--c-border); border: none; border-radius: 2px; } .ui-slider .ui-slider-range { background: var(--c-accent); } .ui-slider .ui-slider-handle { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--c-accent) !important; top: -7px; cursor: grab; outline: none; box-shadow: 0 2px 6px rgba(230,57,70,.25); transition: var(--t-fast); } .ui-slider .ui-slider-handle:focus { box-shadow: 0 0 0 4px rgba(230,57,70,.18); } /* ── 27. SELECT2 ────────────────────────────────── */ .select2-container--default .select2-selection--single { border: 1.5px solid var(--c-border) !important; border-radius: var(--radius) !important; height: 44px !important; padding: 10px 14px !important; font-family: var(--f-body) !important; background: #fff !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--c-dark) !important; line-height: 1 !important; padding: 0 !important; font-size: 14px !important; } .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px rgba(230,57,70,.08) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px !important; } .select2-dropdown { border: 1.5px solid var(--c-border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; font-family: var(--f-body) !important; } .select2-container--default .select2-results__option--highlighted { background: var(--c-accent) !important; } /* ── 28. SPLIDE ─────────────────────────────────── */ .splide__pagination__page { background: var(--c-border) !important; } .splide__pagination__page.is-active { background: var(--c-accent) !important; } .splide__arrow { background: #fff !important; box-shadow: var(--shadow) !important; } .splide__arrow:hover { opacity: 1 !important; background: var(--c-accent) !important; } .splide__arrow svg { fill: var(--c-dark) !important; } .splide__arrow:hover svg { fill: #fff !important; } /* ── 29. BOOTSTRAP OVERRIDES ────────────────────── */ .form-control { border: 1.5px solid var(--c-border) !important; border-radius: var(--radius) !important; padding: 10px 14px !important; font-size: 14px !important; font-family: var(--f-body) !important; color: var(--c-dark) !important; transition: var(--t) !important; } .form-control:focus { border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px rgba(230,57,70,.08) !important; outline: none !important; } .form-control.is-invalid { border-color: var(--c-danger) !important; } .invalid-feedback { font-size: 12px; color: var(--c-danger); } .alert { border-radius: var(--radius) !important; font-size: 14px !important; border: none !important; } .alert-success { background: #dcfce7 !important; color: #166534 !important; } .alert-danger { background: #fee2e2 !important; color: #991b1b !important; } .alert-warning { background: #fef9c3 !important; color: #854d0e !important; } .btn-primary { background: var(--c-accent) !important; border-color: var(--c-accent) !important; border-radius: var(--radius) !important; font-family: var(--f-heading) !important; } .btn-primary:hover { background: var(--c-accent2) !important; border-color: var(--c-accent2) !important; } .btn-secondary { background: var(--c-bg2) !important; border-color: var(--c-border) !important; color: var(--c-dark) !important; border-radius: var(--radius) !important; font-family: var(--f-heading) !important; } .btn-danger { border-radius: var(--radius) !important; font-family: var(--f-heading) !important; } .modal-content { border-radius: var(--radius-lg) !important; border: none !important; box-shadow: var(--shadow-lg) !important; } .modal-header { border-bottom: 1px solid var(--c-border) !important; padding: 16px 22px !important; } .modal-title { font-family: var(--f-heading) !important; font-weight: var(--fw-medium) !important; color: var(--c-dark) !important; } .modal-body { padding: 18px 22px !important; } .modal-footer { border-top: 1px solid var(--c-border) !important; padding: 12px 22px !important; } .table th, .table td { font-size: 13px; padding: .6rem .75rem !important; vertical-align: middle !important; } .table thead th { font-family: var(--f-heading); font-weight: var(--fw-medium); color: var(--c-dark); border-bottom: 2px solid var(--c-border) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } /* ── 30. BLOG ───────────────────────────────────── */ .m-blog { padding: 36px 0 64px; } .m-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .m-blog-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--t); } .m-blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .m-blog-card__img { aspect-ratio: 16/9; overflow: hidden; } .m-blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .m-blog-card:hover .m-blog-card__img img { transform: scale(1.05); } .m-blog-card__body { padding: 18px; } .m-blog-card__date { font-size: 12px; color: var(--c-muted); margin-bottom: 8px; } .m-blog-card__title { font-family: var(--f-heading); font-size: 15px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; line-height: 1.4; } .m-blog-card__excerpt { font-size: 13px; color: var(--c-muted); line-height: 1.6; } /* ── 31. RESPONSIVE ─────────────────────────────── */ @media (min-width: 1600px) { .m-container { max-width: 1560px; } } @media (max-width: 1280px) { .mh-search form { max-width: 250px; } .m-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 24px; } } @media (max-width: 1024px) { .mh-header, .mh-nav, .mh-topbar { display: none !important; } .mh-mobile { display: block; } .mh-bottom-nav { display: block; } body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } .m-whatsapp-fab { bottom: calc(86px + env(safe-area-inset-bottom)); } .m-scroll-top { bottom: calc(148px + env(safe-area-inset-bottom)); } .m-hero .owl-prev, .m-hero .owl-next { opacity: 1; width: 38px; height: 38px; } .m-product-layout { grid-template-columns: 1fr; } .m-gallery { position: static; } .m-cart__layout, .m-checkout__layout { grid-template-columns: 1fr; } .m-cart-summary, .m-order-summary { position: static; } .m-account__layout { grid-template-columns: 1fr; } .m-account-sidebar { position: static; } .m-shop__layout { grid-template-columns: 1fr; } .m-filter-sidebar { display: none; } .m-filter-toggle { display: flex !important; } .m-product-grid { grid-template-columns: repeat(2, 1fr); } .m-cat-grid { grid-template-columns: repeat(2, 1fr); } .m-cat-grid .m-cat-card:first-child { grid-column: span 1; grid-row: span 1; } .m-footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .m-blog__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .m-container { padding: 0 16px; } .m-features__grid { grid-template-columns: repeat(2, 1fr); } .m-feature { border-right: none; border-bottom: 1px solid var(--c-border); } .m-feature:nth-child(odd) { border-right: 1px solid var(--c-border); } .m-hero__content { left: 5%; max-width: 88%; } .m-hero__title { font-size: clamp(18px, 5vw, 28px); } .m-hero__subtitle { font-size: 14px; margin-bottom: 18px; } .m-section { padding: 36px 0; } .m-section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; } .m-section-head__link { display: none; } .m-auth__card { padding: 26px 20px; } .m-page__content { padding: 22px 20px; } .m-order-card__meta { grid-template-columns: repeat(2, 1fr); } .m-footer__grid { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (max-width: 480px) { .m-features__grid { grid-template-columns: 1fr; } .m-feature { border-right: none !important; } .m-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .m-cat-grid { grid-template-columns: 1fr; } .m-footer__grid { grid-template-columns: 1fr; } .m-hero__btns { flex-direction: column; } .m-order-card__meta { grid-template-columns: 1fr 1fr; } .m-address-grid { grid-template-columns: 1fr; } .m-cargo-grid { grid-template-columns: 1fr; } .m-blog__grid { grid-template-columns: 1fr; } .m-hero .owl-prev { left: 12px; } .m-hero .owl-next { right: 12px; } .m-hero .owl-prev, .m-hero .owl-next { width: 36px; height: 36px; } } /* ═══════════════════════════════════════════════════ EXTENDED STYLES — v2.1 Slider fixes, product detail, blog, category, drawer ═══════════════════════════════════════════════════ */ /* ── SLIDER IMAGE DESKTOP/MOBILE TOGGLE ───────────── Desktop: 1920×1080 → show .m-hero__img, hide mobile Mobile ≤1024: 800×416 → show .m-hero__img--mobile Arrow icons: main.js injects navText AND ::after adds chevron → both visible = double icon. Hide img. ────────────────────────────────────────────────────── */ .m-hero__img--mobile { display: none !important; } .m-hero__img { display: block; } /* Hide injected img icons from OWL nav (double icon fix) */ .m-hero .owl-prev img, .m-hero .owl-next img, .m-product-carousel .owl-prev img, .m-product-carousel .owl-next img { display: none !important; } /* Ensure slider fills full viewport width, no horizontal overflow */ .m-hero { width: 100%; max-width: 100%; overflow: hidden; } .m-hero .owl-carousel { width: 100%; } .m-hero .owl-stage-outer { overflow: hidden; width: 100%; } @media (max-width: 1024px) { .m-hero__img { display: none !important; } .m-hero__img--mobile { display: block !important; } /* Fallback: if mobile img errors, show desktop img */ .m-hero__img--mobile.img-error { display: none !important; } .m-hero__img--mobile.img-error ~ .m-hero__img { display: block !important; } /* Mobile slider: lock 800×416 box and fill it completely */ .m-hero { height: auto; min-height: 0; max-height: none; aspect-ratio: var(--m-hero-mobile-ar); width: 100%; } .m-hero > .owl-carousel { position: absolute; inset: 0; width: 100%; height: 100%; } .m-hero .owl-stage-outer, .m-hero .owl-stage, .m-hero .owl-item, .m-hero__slide { height: 100%; } .m-hero__img, .m-hero__img--mobile { max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: center center; } } /* ── MOBILE DRAWER — FULL REDESIGN ────────────────── */ .mh-drawer { position: fixed; inset: 0; z-index: 3000; pointer-events: none; } .mh-drawer.open { pointer-events: all; } .mh-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .3s ease; backdrop-filter: blur(3px); } .mh-drawer.open .mh-drawer__overlay { opacity: 1; } /* Panel — slide from left, full-height modern card */ .mh-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw; background: #fff; transform: translateX(-100%); transition: transform .35s cubic-bezier(.25,.46,.45,.94); display: flex; flex-direction: column; box-shadow: 4px 0 32px rgba(0,0,0,.15); } .mh-drawer.open .mh-drawer__panel { transform: translateX(0); } /* Drawer Header */ .mh-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--c-dark); flex-shrink: 0; } .mh-drawer__header img { max-height: 32px; filter: brightness(0) invert(1); } .mh-drawer__close { border: none; background: rgba(255,255,255,.12); cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(255,255,255,.8); font-size: 20px; line-height: 1; transition: var(--t-fast); flex-shrink: 0; } .mh-drawer__close:hover { background: rgba(255,255,255,.22); color: #fff; } /* Drawer User Row */ .mh-drawer__user { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--c-bg2); border-bottom: 1px solid var(--c-border); flex-shrink: 0; } .mh-drawer__user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: var(--fw-medium); font-family: var(--f-heading); flex-shrink: 0; } .mh-drawer__user-avatar svg { width: 18px; height: 18px; } .mh-drawer__user-name { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); margin-bottom: 2px; } .mh-drawer__user-sub { font-size: 11px; color: var(--c-muted); } /* Drawer Search */ .mh-drawer__search { padding: 14px 20px; border-bottom: 1px solid var(--c-border); flex-shrink: 0; } .mh-drawer__search form { display: flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); transition: var(--t); } .mh-drawer__search form:focus-within { border-color: var(--c-accent); } .mh-drawer__search input { flex: 1; border: none; background: transparent; padding: 10px 14px; font-size: 14px; outline: none; font-family: var(--f-body); color: var(--c-dark); } .mh-drawer__search button { border: none; background: transparent; padding: 0 14px; cursor: pointer; color: var(--c-muted); height: 42px; display: flex; align-items: center; } .mh-drawer__search button svg { width: 17px; height: 17px; } /* Drawer Nav */ .mh-drawer__nav { flex: 1; overflow-y: auto; padding: 8px 0; } .mh-drawer__nav-section { padding: 10px 20px 4px; font-size: 10px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); } .mh-drawer__link { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: 14px; color: var(--c-text); border-bottom: 1px solid var(--c-border); transition: var(--t-fast); text-decoration: none; font-weight: 500; } .mh-drawer__link:hover { color: var(--c-accent); background: rgba(230,57,70,.03); padding-left: 24px; } .mh-drawer__link svg { width: 14px; height: 14px; color: var(--c-muted); flex-shrink: 0; } .mh-drawer__link--accent { color: var(--c-accent) !important; font-weight: var(--fw-medium); } .mh-drawer__link--danger { color: var(--c-danger) !important; } .mh-drawer__link--danger svg { color: var(--c-danger) !important; } .mh-drawer__divider { height: 1px; background: var(--c-border); margin: 8px 0; } /* Drawer Footer */ .mh-drawer__footer { padding: 16px 20px; border-top: 1px solid var(--c-border); flex-shrink: 0; background: var(--c-bg2); } .mh-drawer__footer-social { display: flex; gap: 10px; margin-bottom: 10px; } .mh-drawer__footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--c-border); display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: 14px; transition: var(--t-fast); } .mh-drawer__footer-social a:hover { border-color: var(--c-accent); color: var(--c-accent); } .mh-drawer__footer-copy { font-size: 11px; color: var(--c-muted); } /* ── PRODUCT DETAIL — MISSING CLASSES ────────────── */ .m-product-detail__layout { display: grid; grid-template-columns: 1fr 440px; gap: 52px; align-items: start; } .m-price-box { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 18px; } .m-price-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; } .m-price-row + .m-price-row { border-top: 1px solid var(--c-border); margin-top: 5px; padding-top: 10px; } .m-price-lbl { font-size: 13px; color: var(--c-muted); font-weight: 500; } .m-price-old { font-size: 15px; color: var(--c-muted); text-decoration: line-through; } .m-price-new { font-family: var(--f-heading); font-size: 28px; font-weight: var(--fw-medium); color: var(--c-dark); } .m-discount-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: var(--fw-medium); margin-bottom: 14px; } .m-discount-chip--cart { background: #dcfce7; color: #166534; } .m-discount-chip--web { background: rgba(230,57,70,.1); color: var(--c-accent); } .m-discount-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .m-parts-box { border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; } .m-parts-box__head { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); padding: 10px 14px; background: var(--c-bg2); border-bottom: 1px solid var(--c-border); } .m-part-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-border); font-size: 13px; } .m-part-row:last-child { border-bottom: none; } .m-part-name { color: var(--c-dark); font-weight: 500; } .m-part-price { color: var(--c-muted); } .m-extra-discount { display: flex; justify-content: space-between; align-items: center; background: var(--c-accent); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 16px; color: #fff; gap: 12px; } .m-extra-discount__lbl { font-size: 13px; font-weight: var(--fw-medium); line-height: 1.4; } .m-extra-discount__price { font-size: 20px; font-weight: var(--fw-medium); font-family: var(--f-heading); white-space: nowrap; } .m-product-cta { margin-bottom: 12px; } .m-product-cta .btn-m { width: 100%; justify-content: center; font-size: 15px; padding: 14px; } .m-whatsapp-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; background: #25d366; color: #fff !important; border-radius: var(--radius); font-size: 14px; font-weight: var(--fw-medium); font-family: var(--f-heading); margin-bottom: 14px; transition: var(--t); text-decoration: none !important; } .m-whatsapp-btn:hover { background: #1aaa52; color: #fff !important; } .m-whatsapp-btn svg { width: 22px; height: 22px; flex-shrink: 0; } .m-product-meta { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; } .m-product-meta__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--c-border); font-size: 13px; } .m-product-meta__row:last-child { border-bottom: none; } .m-product-meta__lbl { color: var(--c-muted); } .m-product-meta__val { font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); } .m-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .m-tag { display: inline-block; padding: 5px 12px; border: 1px solid var(--c-border); border-radius: 100px; font-size: 12px; color: var(--c-muted); transition: var(--t-fast); text-decoration: none; } .m-tag:hover { border-color: var(--c-accent); color: var(--c-accent); } .m-variants { margin-bottom: 18px; } .m-variants__title { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); margin-bottom: 10px; } .m-variants__grid { display: flex; gap: 10px; flex-wrap: wrap; } .m-variant-card { border: 2px solid var(--c-border); border-radius: var(--radius); overflow: hidden; width: 80px; transition: var(--t); cursor: pointer; text-decoration: none; display: block; } .m-variant-card:hover { border-color: var(--c-accent); } .m-variant-card img { width: 100%; aspect-ratio: var(--product-img-ar); object-fit: cover; object-position: center; display: block; } .m-variant-card__name { font-size: 11px; text-align: center; padding: 4px; color: var(--c-muted); font-weight: 500; } .m-detail-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .m-detail-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 13px; color: var(--c-dark); cursor: pointer; transition: var(--t); font-weight: 500; font-family: var(--f-heading); } .m-detail-link:hover { border-color: var(--c-accent); color: var(--c-accent); } .m-parts-config { margin: 48px 0; } .m-parts-config__title { font-family: var(--f-heading); font-size: 20px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 20px; } .m-part-item { border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; } .m-part-item__img { aspect-ratio: 1; overflow: hidden; background: var(--c-bg2); } .m-part-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .m-part-item__name { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); padding: 10px 12px 4px; font-family: var(--f-heading); } .m-part-item__price { font-size: 13px; color: var(--c-muted); padding: 0 12px 8px; } .m-part-item__price strong { color: var(--c-dark); font-weight: var(--fw-medium); } .m-part-item__controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px 14px; } .m-select { padding: 8px 12px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 13px; font-family: var(--f-body); color: var(--c-dark); background: #fff; outline: none; flex: 1; cursor: pointer; } .m-select:focus { border-color: var(--c-accent); } .checkbox-circle { width: 20px; height: 20px; accent-color: var(--c-accent); flex-shrink: 0; cursor: pointer; } .m-tab-link { flex-shrink: 0; padding: 12px 18px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--t); font-family: var(--f-heading); white-space: nowrap; display: inline-block; } .m-tab-link:hover { color: var(--c-dark); } .m-tab-link.active { color: var(--c-accent); border-bottom-color: var(--c-accent); } .m-product-tabs .m-tabs-nav { display: flex; border-bottom: 2px solid var(--c-border); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .m-product-tabs .m-tabs-nav::-webkit-scrollbar { display: none; } .m-table { width: 100%; border-collapse: collapse; } .m-table th, .m-table td { padding: 10px 16px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--c-border); } .m-table th { font-weight: var(--fw-medium); color: var(--c-dark); font-family: var(--f-heading); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; background: var(--c-bg2); } .m-table tr:last-child td { border-bottom: none; } .m-installment-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 14px; } .m-installment-card { border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; } .m-installment-card__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--c-bg2); border-bottom: 1px solid var(--c-border); font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); } .m-installment-card__head img { max-height: 28px; max-width: 80px; object-fit: contain; } .m-installment-card table { width: 100%; border-collapse: collapse; } .m-installment-card th, .m-installment-card td { padding: 8px 14px; font-size: 12px; border-bottom: 1px solid var(--c-border); text-align: left; } .m-installment-card th { background: #fafafa; font-weight: var(--fw-medium); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .m-installment-card tr:last-child td { border-bottom: none; } .m-label { display: block; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 6px; font-family: var(--f-heading); } .m-input { width: 100%; border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; font-family: var(--f-body); color: var(--c-dark); outline: none; transition: var(--t); background: #fff; display: block; } .m-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(230,57,70,.08); } .m-textarea { width: 100%; border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; font-family: var(--f-body); color: var(--c-dark); outline: none; transition: var(--t); resize: vertical; min-height: 80px; background: #fff; display: block; } .m-textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(230,57,70,.08); } /* ── CATEGORY — FULL WIDTH + TOP FILTER BAR ───────── */ .m-shop--full .m-shop__layout { grid-template-columns: 1fr !important; } .m-shop--full .m-filter-sidebar { display: none !important; } .m-shop--full .m-product-grid { grid-template-columns: repeat(4,1fr); } .m-filter-bar { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); margin-bottom: 24px; padding: 14px 20px; } .m-filter-bar__inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .m-filter-bar__label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin-right: 4px; white-space: nowrap; } .m-filter-dropdown { position: relative; } .m-filter-dropdown__btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); background: #fff; cursor: pointer; font-family: var(--f-heading); transition: var(--t); white-space: nowrap; } .m-filter-dropdown__btn svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform .2s; } .m-filter-dropdown.open .m-filter-dropdown__btn { border-color: var(--c-accent); color: var(--c-accent); } .m-filter-dropdown.open .m-filter-dropdown__btn svg { transform: rotate(180deg); } .m-filter-dropdown__menu { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); min-width: 240px; z-index: 400; padding: 16px; display: none; } .m-filter-dropdown.open .m-filter-dropdown__menu { display: block; } .m-filter-bar__apply { margin-left: auto; } .m-shop-toolbar--solo .m-filter-bar__apply { margin-left: auto; } /* ── INTERIOR DESIGN SECTION ──────────────────────── */ .m-interior { padding: 80px 0; background: #fafafa; position: relative; overflow: hidden; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .m-interior::before { content: ''; position: absolute; right: -80px; top: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(230,57,70,.06) 0%, transparent 70%); pointer-events: none; } .m-interior__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } .m-interior__label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .15em; color: var(--c-accent); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .m-interior__label::after { content: ''; flex: 1; max-width: 36px; height: 1px; background: var(--c-accent); } .m-interior__title { font-family: var(--f-heading); font-size: clamp(24px,3.5vw,40px); font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.15; margin-bottom: 16px; } .m-interior__title em { font-style: normal; color: var(--c-accent); } .m-interior__desc { font-size: 15px; color: var(--c-muted); line-height: 1.85; margin-bottom: 28px; } .m-interior__features { margin-bottom: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .m-interior__feature { display: flex; align-items: flex-start; gap: 12px; } .m-interior__feature svg { width: 15px; height: 15px; color: var(--c-accent); flex-shrink: 0; } .m-interior__btns { display: flex; gap: 12px; flex-wrap: wrap; } .m-interior__visual { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; } .m-interior__img { border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow); } .m-interior__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .m-interior__img:hover img { transform: scale(1.04); } .m-interior__img--tall { grid-row: span 2; min-height: 280px; } .m-interior__img--short img { aspect-ratio: 4/3; } .m-interior__badge { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); color: var(--c-dark); font-size: 11px; font-weight: var(--fw-medium); padding: 5px 12px; border-radius: 100px; border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); } .m-interior__badge-num { color: var(--c-accent); } /* ── BLOG REDESIGN ────────────────────────────────── */ .m-blog-page { padding: 0 0 64px; } .m-blog-hero { background: var(--c-dark); padding: 52px 0; } .m-blog-hero__label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .15em; color: var(--c-accent); margin-bottom: 10px; } .m-blog-hero__title { font-family: var(--f-heading); font-size: clamp(24px,3vw,36px); font-weight: var(--fw-medium); color: #fff; margin-bottom: 6px; } .m-blog-hero__sub { font-size: 14px; color: rgba(255,255,255,.5); } .m-blog__filter { display: flex; gap: 8px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--c-border); margin-bottom: 36px; align-items: center; } .m-blog__filter-label { font-size: 12px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-right: 4px; } .m-blog__cat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border: 1.5px solid var(--c-border); border-radius: 100px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-muted); transition: var(--t); font-family: var(--f-heading); text-decoration: none; } .m-blog__cat-pill:hover, .m-blog__cat-pill.active { border-color: var(--c-accent); color: var(--c-accent); background: rgba(230,57,70,.05); } .m-blog__cat-count { font-size: 11px; opacity: .65; } .m-blog__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .m-blog-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--t); display: block; text-decoration: none; } .m-blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; } .m-blog-card__img { aspect-ratio: 16/9; overflow: hidden; background: var(--c-bg2); } .m-blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; display: block; } .m-blog-card:hover .m-blog-card__img img { transform: scale(1.06); } .m-blog-card__body { padding: 18px 20px 14px; } .m-blog-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .m-blog-card__date { font-size: 12px; color: var(--c-muted); display: flex; align-items: center; gap: 4px; } .m-blog-card__date svg { width: 12px; height: 12px; } .m-blog-card__tag { font-size: 10px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent); padding: 2px 8px; background: rgba(230,57,70,.08); border-radius: 4px; } .m-blog-card__title { font-family: var(--f-heading); font-size: 15px; font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .m-blog-card__excerpt { font-size: 13px; color: var(--c-muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; } .m-blog-card__read { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--fw-medium); color: var(--c-accent); font-family: var(--f-heading); } .m-blog-card__read svg { width: 13px; height: 13px; transition: transform .2s; } .m-blog-card:hover .m-blog-card__read svg { transform: translateX(3px); } /* Blog Detail */ .m-post { padding: 0 0 80px; } .m-post__header { background: var(--c-bg2); border-bottom: 1px solid var(--c-border); padding: 44px 0 36px; } .m-post__cat { display: inline-block; font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent); padding: 4px 12px; background: rgba(230,57,70,.08); border-radius: 4px; margin-bottom: 14px; } .m-post__title { font-family: var(--f-heading); font-size: clamp(22px,4vw,40px); font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.2; margin-bottom: 16px; } .m-post__meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--c-muted); flex-wrap: wrap; } .m-post__meta-item { display: flex; align-items: center; gap: 5px; } .m-post__meta-item svg { width: 13px; height: 13px; } .m-post__body-wrap { padding: 44px 0; } .m-post__banner { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 44px; } .m-post__banner img { width: 100%; aspect-ratio: 16/6; object-fit: cover; display: block; } .m-post__layout { display: grid; grid-template-columns: 1fr 300px; gap: 52px; align-items: start; } .m-post__body { font-size: 15.5px; line-height: 1.85; color: var(--c-text); } .m-post__body h1,.m-post__body h2,.m-post__body h3,.m-post__body h4 { font-family: var(--f-heading); color: var(--c-dark); margin: 28px 0 12px; line-height: 1.25; font-weight: var(--fw-medium); } .m-post__body h2 { font-size: clamp(18px,2.5vw,24px); } .m-post__body h3 { font-size: clamp(15px,2vw,20px); } .m-post__body p { margin-bottom: 16px; } .m-post__body img { border-radius: var(--radius); margin: 16px 0; max-width: 100%; height: auto; display: block; } .m-post__body a { color: var(--c-accent); } .m-post__body ul,.m-post__body ol { padding-left: 22px; margin-bottom: 16px; } .m-post__body li { margin-bottom: 6px; } .m-post__body blockquote { border-left: 3px solid var(--c-accent); padding: 14px 20px; background: var(--c-bg2); border-radius: 0 var(--radius) var(--radius) 0; margin: 20px 0; } .m-post__sidebar { position: sticky; top: 90px; } .m-post-widget { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; } .m-post-widget__title { font-family: var(--f-heading); font-size: 12px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--c-border); text-transform: uppercase; letter-spacing: .08em; } .m-post-recent { display: flex; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); text-decoration: none; } .m-post-recent:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .m-post-recent__img { width: 62px; height: 62px; border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); flex-shrink: 0; } .m-post-recent__img img { width: 100%; height: 100%; object-fit: cover; } .m-post-recent__title { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } .m-post-recent__date { font-size: 11px; color: var(--c-muted); } .m-blog-related { padding: 52px 0; background: var(--c-bg2); border-top: 1px solid var(--c-border); } /* ── COMMENTS PAGE ────────────────────────────────── */ .m-comment-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-border); } .m-comment-item:last-child { border-bottom: none; } .m-comment-stars { display: flex; gap: 2px; margin-bottom: 5px; } .m-comment-stars svg { width: 14px; height: 14px; } .m-comment-product { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 4px; font-family: var(--f-heading); } .m-comment-text { font-size: 13px; color: var(--c-muted); line-height: 1.6; } /* ── RESPONSIVE ADDITIONS ─────────────────────────── */ @media (max-width: 1024px) { .m-product-detail__layout { grid-template-columns: 1fr; } .m-post__layout { grid-template-columns: 1fr; } .m-post__sidebar { position: static; } .m-shop--full .m-product-grid { grid-template-columns: repeat(3,1fr); } .m-interior__inner { grid-template-columns: 1fr; gap: 40px; } .m-interior__visual { grid-template-columns: repeat(3,1fr); } .m-interior__img--tall { grid-row: span 1; min-height: 0; } .m-interior__img--short img { aspect-ratio: 3/2; } .m-blog__grid { grid-template-columns: repeat(2,1fr); } .m-footer__payment { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } } @media (max-width: 768px) { .m-shop--full .m-product-grid { grid-template-columns: repeat(2,1fr); } .m-interior__visual { grid-template-columns: 1fr 1fr; } .m-post__title { font-size: clamp(20px,5vw,28px); } .m-post__banner img { aspect-ratio: 16/9; } .m-filter-bar__inner { gap: 8px; } .m-blog__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .m-shop--full .m-product-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } .m-interior__features { grid-template-columns: 1fr; } .m-interior__visual { grid-template-columns: 1fr 1fr; } .m-post__banner img { aspect-ratio: 4/3; } } /* ── FOOTER PAYMENT STRIP ─────────────────────────── */ .m-footer__payment { display: flex; align-items: center; gap: 10px; } .m-footer__payment img { max-height: 28px; max-width: 200px; width: auto; opacity: .75; filter: grayscale(20%); transition: var(--t); } .m-footer__payment img:hover { opacity: 1; filter: none; } /* ── INTERIOR FEATURE EXTENDED ────────────────────── */ .m-interior__feature-icon { width: 36px; height: 36px; border-radius: var(--radius); background: rgba(230,57,70,.08); border: 1px solid rgba(230,57,70,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .m-interior__feature-icon svg { width: 16px; height: 16px; color: var(--c-accent); } .m-interior__feature-title { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.3; } .m-interior__feature-text { font-size: 11.5px; color: var(--c-muted); margin-top: 1px; } .m-interior__badge-num { font-family: var(--f-heading); font-size: 20px; font-weight: var(--fw-medium); color: var(--c-accent); line-height: 1; } .m-interior__badge-text { font-size: 10px; color: var(--c-muted); margin-top: 2px; } /* ── CATEGORY FILTER ADDITIONAL ───────────────────── */ .m-price-text { margin: 0; } /* ── CATEGORY SHOWCASE ─────────────────────────────── */ .m-cat-showcase { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto auto; gap: 10px; } .m-cat-showcase__main { grid-row: 1; grid-column: 1; position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; min-height: 340px; } .m-cat-showcase__col { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 10px; } .m-cat-showcase__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; flex: 1; min-height: 160px; } .m-cat-showcase__bottom { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .m-cat-showcase__sm { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; min-height: 160px; } .m-cat-showcase__main img, .m-cat-showcase__item img, .m-cat-showcase__sm img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .m-cat-showcase__main:hover img, .m-cat-showcase__item:hover img, .m-cat-showcase__sm:hover img { transform: scale(1.04); } .m-cat-showcase__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 55%, transparent 100%); } .m-cat-showcase__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 22px; } .m-cat-showcase__tag { font-size: 10px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6); margin-bottom: 6px; } .m-cat-showcase__name { font-family: var(--f-heading); font-size: 20px; font-weight: var(--fw-medium); color: #fff; line-height: 1.2; margin-bottom: 10px; } .m-cat-showcase__sm .m-cat-showcase__name { font-size: 15px; margin-bottom: 0; } .m-cat-showcase__item .m-cat-showcase__name { font-size: 16px; margin-bottom: 6px; } .m-cat-showcase__cta { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12px; font-weight: var(--fw-medium); padding: 6px 14px; border-radius: 100px; transition: var(--t); } .m-cat-showcase__main:hover .m-cat-showcase__cta, .m-cat-showcase__item:hover .m-cat-showcase__cta { background: var(--c-accent); border-color: var(--c-accent); } @media (max-width: 900px) { .m-cat-showcase { grid-template-columns: 1fr; } .m-cat-showcase__main { grid-column: 1; min-height: 260px; } .m-cat-showcase__col { grid-row: 2; grid-column: 1; flex-direction: row; } .m-cat-showcase__item { min-height: 180px; } .m-cat-showcase__bottom { grid-row: 3; grid-column: 1; grid-template-columns: repeat(3,1fr); } } @media (max-width: 576px) { .m-cat-showcase__col { flex-direction: column; } .m-cat-showcase__bottom { grid-template-columns: 1fr 1fr; } } /* ── CONTACT PAGE ──────────────────────────────────── */ .m-contact-hero { background: var(--c-bg2); border-bottom: 1px solid var(--c-border); padding: 36px 0 32px; } .m-contact-hero__title { font-family: var(--f-heading); font-size: clamp(22px,3vw,36px); font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; margin-top: 16px; } .m-contact-hero__sub { font-size: 14px; color: var(--c-muted); } .m-contact-cards { padding: 36px 0; } .m-contact-cards__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .m-contact-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 24px 20px; } .m-contact-card__icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: rgba(230,57,70,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .m-contact-card__icon svg { width: 20px; height: 20px; color: var(--c-accent); } .m-contact-card__label { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin-bottom: 8px; } .m-contact-card__val { font-size: 13.5px; color: var(--c-dark); line-height: 1.7; } .m-contact-card__val a { color: var(--c-dark); display: block; transition: var(--t-fast); } .m-contact-card__val a:hover { color: var(--c-accent); } .m-contact-card__val span { display: block; } .m-contact-body { padding: 0 0 64px; } .m-contact-body__grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: flex-start; } .m-contact-form-wrap { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 32px 36px; } .m-contact-form-head { margin-bottom: 24px; } .m-contact-form-head__title { font-family: var(--f-heading); font-size: 20px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 6px; } .m-contact-form-head__sub { font-size: 13.5px; color: var(--c-muted); } .m-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .m-contact-aside { display: flex; flex-direction: column; gap: 16px; } .m-contact-wa { display: flex; align-items: center; gap: 14px; background: #25d366; color: #fff; border-radius: var(--radius-lg); padding: 18px 20px; transition: var(--t); } .m-contact-wa:hover { background: #1db954; } .m-contact-wa__icon { width: 44px; height: 44px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .m-contact-wa__icon svg { width: 24px; height: 24px; } .m-contact-wa__title { font-size: 14px; font-weight: var(--fw-medium); color: #fff; } .m-contact-wa__num { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 2px; } .m-contact-info-block { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 22px 20px; } .m-contact-info-block__title { font-family: var(--f-heading); font-size: 14px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 16px; } .m-contact-info-block__row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--c-muted); line-height: 1.65; margin-bottom: 12px; } .m-contact-info-block__row svg { flex-shrink: 0; color: var(--c-accent); margin-top: 2px; } .m-contact-info-block__row:last-child { margin-bottom: 0; } .m-contact-map { border-top: 1px solid var(--c-border); } .m-contact-map iframe { display: block; width: 100%; height: 380px; border: none; } .m-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 500; } .m-alert--success { background: #f0fdf4; border: 1px solid #86efac; color: var(--c-success); } .m-alert--danger { background: #fff1f2; border: 1px solid #fca5a5; color: var(--c-danger); } .m-field-error { display: block; font-size: 12px; color: var(--c-danger); margin-top: 4px; } @media (max-width: 900px) { .m-contact-cards__grid { grid-template-columns: 1fr 1fr; } .m-contact-body__grid { grid-template-columns: 1fr; } .m-contact-aside { flex-direction: row; flex-wrap: wrap; } .m-contact-wa, .m-contact-info-block { flex: 1 1 250px; } } @media (max-width: 576px) { .m-contact-cards__grid { grid-template-columns: 1fr; } .m-contact-form__row { grid-template-columns: 1fr; } .m-contact-form-wrap { padding: 20px 18px; } } /* ── PART CONFIGURATOR ─────────────────────────────── */ .m-configurator { margin-top: 40px; background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 28px 24px; } .m-configurator__head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--c-border); } .m-configurator__title { font-family: var(--f-heading); font-size: 18px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 4px; } .m-configurator__sub { font-size: 13px; color: var(--c-muted); } .m-configurator__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; } .m-cfg-card { background: #fff; border: 1.5px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--t); } .m-cfg-card--active { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(230,57,70,.1); } .m-cfg-card__img { aspect-ratio: 1; overflow: hidden; background: var(--c-bg2); } .m-cfg-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .m-cfg-card:hover .m-cfg-card__img img { transform: scale(1.04); } .m-cfg-card__body { padding: 12px 14px; } .m-cfg-card__name { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 6px; line-height: 1.3; } .m-cfg-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .m-cfg-card__old { font-size: 11px; color: var(--c-muted); text-decoration: line-through; } .m-cfg-card__new { font-size: 14px; font-weight: var(--fw-medium); color: var(--c-accent); } .m-cfg-card__controls { display: flex; align-items: center; gap: 8px; } .m-cfg-check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: var(--fw-medium); color: var(--c-dark); flex-shrink: 0; } .m-cfg-check input { accent-color: var(--c-accent); width: 15px; height: 15px; cursor: pointer; } .m-cfg-select { flex: 1; padding: 5px 8px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 12px; background: #fff; cursor: pointer; outline: none; } .m-cfg-select:focus { border-color: var(--c-accent); } @media (max-width: 576px) { .m-configurator__grid { grid-template-columns: 1fr 1fr; } } /* ── SEARCH PAGE ───────────────────────────────────── */ .m-search-hero { background: var(--c-bg2); border-bottom: 1px solid var(--c-border); padding: 24px 0 28px; } .m-search-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 12px; } .m-search-hero__query { font-family: var(--f-heading); font-size: clamp(18px,2.5vw,28px); font-weight: var(--fw-medium); color: var(--c-dark); display: flex; align-items: center; gap: 10px; } .m-search-hero__query svg { color: var(--c-accent); } .m-search-hero__count { font-size: 13px; color: var(--c-muted); margin-top: 4px; } .m-search-hero__form { flex: 1; max-width: 440px; } .m-search-hero__input-wrap { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 8px 12px; } .m-search-hero__input-wrap svg { color: var(--c-muted); flex-shrink: 0; } .m-search-hero__input-wrap input { flex: 1; border: none; outline: none; font-size: 14px; font-family: var(--f-body); color: var(--c-dark); background: transparent; } .m-search-hero__input-wrap:focus-within { border-color: var(--c-accent); } .m-search-body { padding: 28px 0 64px; } .m-search-grid { grid-template-columns: repeat(4,1fr); } .m-search-empty { text-align: center; padding: 80px 20px; max-width: 520px; margin: 0 auto; } .m-search-empty__icon { width: 72px; height: 72px; background: var(--c-bg2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .m-search-empty__icon svg { width: 32px; height: 32px; color: var(--c-muted); } .m-search-empty__title { font-family: var(--f-heading); font-size: 20px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; } .m-search-empty__text { font-size: 14px; color: var(--c-muted); margin-bottom: 24px; } .m-search-empty__tips { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 16px 20px; text-align: left; } .m-search-empty__tip-title { font-size: 13px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; } .m-search-empty__tips ul { margin: 0; padding-left: 18px; } .m-search-empty__tips ul li { font-size: 13px; color: var(--c-muted); line-height: 1.8; } @media (max-width: 900px) { .m-search-grid { grid-template-columns: repeat(3,1fr); } .m-search-hero__form { max-width: 100%; flex: 0 0 100%; order: 3; } } @media (max-width: 576px) { .m-search-grid { grid-template-columns: repeat(2,1fr); } .m-search-hero__inner { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ── COMMERCE REDESIGN: CART + CHECKOUT + PRODUCT TABS ── */ .m-cart-page, .m-checkout-page { padding: 28px 0 72px; background: linear-gradient(180deg,#fff 0%,#fafafa 100%); } .m-commerce-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; margin: 8px 0 28px; padding: 30px; border: 1px solid var(--c-border); border-radius: 22px; background: radial-gradient(circle at top right, rgba(230,57,70,.12), transparent 32%), #fff; box-shadow: 0 16px 42px rgba(0,0,0,.055); } .m-commerce-hero--checkout { background: radial-gradient(circle at top right, rgba(28,28,28,.10), transparent 34%), #fff; } .m-commerce-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .13em; text-transform: uppercase; color: var(--c-accent); font-family: var(--f-heading); } .m-commerce-hero__title { font-family: var(--f-heading); font-size: clamp(24px,3vw,38px); line-height: 1.15; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; } .m-commerce-hero__text { max-width: 620px; font-size: 14px; color: var(--c-muted); line-height: 1.8; } .m-commerce-hero__count { min-width: 132px; padding: 18px 20px; border-radius: 18px; background: var(--c-dark); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .m-commerce-hero__count strong { font-family: var(--f-heading); font-size: clamp(26px,3vw,38px); line-height: 1; font-weight: var(--fw-medium); } .m-commerce-hero__count span { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.68); font-weight: var(--fw-medium); } .m-cart-page__grid, .m-checkout-page__grid { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 28px; align-items: start; } .m-cart-panel, .m-checkout-card, .m-commerce-summary { border: 1px solid var(--c-border); border-radius: 20px; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.045); } .m-cart-panel { overflow: hidden; } .m-cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--c-border); } .m-cart-panel__head h2 { font-family: var(--f-heading); font-size: 18px; font-weight: var(--fw-medium); color: var(--c-dark); } .m-cart-panel__refresh { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--c-border); border-radius: 999px; padding: 9px 14px; background: #fff; color: var(--c-dark); font-size: 12px; font-weight: var(--fw-medium); font-family: var(--f-heading); transition: var(--t); } .m-cart-panel__refresh:hover { border-color: var(--c-accent); color: var(--c-accent); } .m-cart-list { padding: 6px 24px 18px; } .m-cart-line { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--c-border); } .m-cart-line:last-child { border-bottom: none; } .m-cart-line__media { display: block; width: 132px; height: auto; aspect-ratio: var(--product-img-ar); overflow: hidden; border-radius: 16px; background: var(--c-bg2); flex-shrink: 0; } .m-cart-line__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .35s; } .m-cart-line:hover .m-cart-line__media img { transform: scale(1.04); } .m-cart-line__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .m-cart-line__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .m-cart-line__title { display: inline-block; font-family: var(--f-heading); font-size: 16px; font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.35; margin-bottom: 8px; } .m-cart-line__title:hover { color: var(--c-accent); } .m-cart-line__badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(230,57,70,.08); color: var(--c-accent); font-size: 11px; font-weight: var(--fw-medium); } .m-cart-line__remove { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-muted); background: var(--c-bg2); transition: var(--t); flex-shrink: 0; } .m-cart-line__remove:hover { color: var(--c-danger); background: #fff1f2; } .m-cart-line__parts { display: flex; flex-wrap: wrap; gap: 7px; } .m-cart-line__parts span { padding: 5px 9px; border-radius: 999px; background: var(--c-bg2); color: var(--c-muted); font-size: 12px; } .m-cart-line__bottom { display: grid; grid-template-columns: 1fr auto 150px; gap: 18px; align-items: end; } .m-cart-line__unit span, .m-cart-line__total span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .m-cart-line__unit strong { font-family: var(--f-heading); color: var(--c-dark); } .m-cart-line__total { text-align: right; } .m-cart-line__total del { display: block; font-size: 12px; color: var(--c-muted); } .m-cart-line__total strong { display: block; font-family: var(--f-heading); font-size: 17px; font-weight: var(--fw-medium); color: var(--c-accent); } .m-cart-line__qty { display: inline-flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: 999px; overflow: hidden; background: #fff; } .m-cart-line__qty button { width: 36px; height: 36px; border: none; background: var(--c-bg2); color: var(--c-dark); font-size: 18px; line-height: 1; transition: var(--t-fast); } .m-cart-line__qty button:hover { background: var(--c-dark); color: #fff; } .m-cart-line__qty input { width: 46px; height: 36px; border: none; text-align: center; outline: none; font-family: var(--f-heading); font-weight: var(--fw-medium); color: var(--c-dark); } .m-cart-tools { padding: 22px 24px 24px; background: var(--c-bg2); border-top: 1px solid var(--c-border); } .m-cart-coupon { display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr); gap: 18px; align-items: center; } .m-cart-coupon label { display: block; font-family: var(--f-heading); font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 4px; } .m-cart-coupon p { font-size: 13px; color: var(--c-muted); } .m-cart-coupon__control { display: flex; gap: 10px; } .m-commerce-summary { position: sticky; top: 104px; overflow: hidden; } .m-commerce-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--c-border); } .m-commerce-summary__head span { font-family: var(--f-heading); font-size: 17px; font-weight: var(--fw-medium); color: var(--c-dark); } .m-commerce-summary__head strong, .m-commerce-summary__head a { font-size: 12px; color: var(--c-accent); font-weight: var(--fw-medium); } .m-commerce-summary__body { padding: 14px 22px; } .m-summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 14px; border-bottom: 1px dashed var(--c-border); } .m-summary-row:last-child { border-bottom: none; } .m-summary-row__lbl { color: var(--c-muted); } .m-summary-row__val { color: var(--c-dark); font-weight: var(--fw-medium); text-align: right; } .m-summary-row--discount .m-summary-row__val { color: var(--c-danger); } .m-summary-row--coupon .m-summary-row__val { color: var(--c-success); } .m-summary-row--coupon a { margin-left: 8px; color: var(--c-danger); font-size: 12px; } .m-commerce-summary__total { padding: 20px 22px; background: var(--c-dark); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .m-commerce-summary__total span { font-size: 13px; color: rgba(255,255,255,.68); } .m-commerce-summary__total strong { font-family: var(--f-heading); font-size: 22px; font-weight: var(--fw-medium); text-align: right; } .m-commerce-summary__actions { padding: 18px 22px 22px; } .m-commerce-summary__continue { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--c-muted); font-weight: var(--fw-medium); } .m-commerce-summary__continue:hover { color: var(--c-accent); } .m-cart-empty { max-width: 560px; margin: 44px auto 0; padding: 60px 28px; text-align: center; border: 1px solid var(--c-border); border-radius: 24px; background: #fff; box-shadow: var(--shadow); } .m-cart-empty__icon { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border-radius: 50%; background: rgba(230,57,70,.08); color: var(--c-accent); } .m-cart-empty h2 { font-family: var(--f-heading); font-size: 24px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; } .m-cart-empty p { color: var(--c-muted); margin-bottom: 24px; } .m-checkout-flow { display: flex; flex-direction: column; gap: 16px; } .m-checkout-card { overflow: hidden; } .m-checkout-card__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--c-border); background: linear-gradient(90deg,#fff,var(--c-bg2)); } .m-checkout-card__step { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-accent); color: #fff; font-family: var(--f-heading); font-weight: var(--fw-medium); flex-shrink: 0; } .m-checkout-card__head h2 { font-family: var(--f-heading); font-size: 17px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 4px; } .m-checkout-card__head p { font-size: 13px; color: var(--c-muted); line-height: 1.6; } .m-checkout-card__body { padding: 22px 24px; } .m-checkout-addresses, .m-checkout-cargos { display: grid; gap: 12px; margin-bottom: 16px; } .m-checkout-address, .m-cargo-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1.5px solid var(--c-border); border-radius: 16px; background: #fff; cursor: pointer; transition: var(--t); position: relative; } .m-checkout-address:hover, .m-cargo-card:hover, .m-checkout-address.selected, .m-cargo-card.selected { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(230,57,70,.07); } .m-checkout-address input, .m-cargo-card input { position: absolute; opacity: 0; pointer-events: none; } .m-checkout-address__mark { width: 22px; height: 22px; border: 2px solid var(--c-border); border-radius: 50%; position: relative; } .m-checkout-address.selected .m-checkout-address__mark { border-color: var(--c-accent); } .m-checkout-address.selected .m-checkout-address__mark::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-accent); } .m-checkout-address__content strong, .m-cargo-card__content strong { display: block; font-family: var(--f-heading); font-size: 14px; color: var(--c-dark); margin-bottom: 3px; } .m-checkout-address__content small, .m-cargo-card__content small { display: block; font-size: 12.5px; color: var(--c-muted); line-height: 1.55; } .m-checkout-address__edit { border: none; background: var(--c-bg2); color: var(--c-dark); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: var(--fw-medium); transition: var(--t); } .m-checkout-address__edit:hover { background: var(--c-dark); color: #fff; } .m-checkout-empty-note { padding: 18px; border: 1px dashed var(--c-border); border-radius: 16px; background: var(--c-bg2); color: var(--c-muted); } .m-checkout-empty-note strong { display: block; color: var(--c-dark); margin-bottom: 3px; } .m-cargo-card__icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--c-bg2); color: var(--c-accent); } .m-cargo-card__price { font-family: var(--f-heading); font-weight: var(--fw-medium); color: var(--c-dark); white-space: nowrap; } .m-checkout-note { min-height: 110px; } .m-payment-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .m-payment-switch .m-payment-tab { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; border: 1.5px solid var(--c-border); border-radius: 16px; background: #fff; color: var(--c-dark); font-family: var(--f-heading); font-weight: var(--fw-medium); transition: var(--t); } .m-payment-switch .m-payment-tab.active { border-color: var(--c-accent); background: var(--c-accent); color: #fff; box-shadow: 0 12px 24px rgba(230,57,70,.2); } .m-payment-tab__icon { display: inline-flex; } .m-payment-pane { display: flex; flex-direction: column; gap: 16px; } .m-payment-info { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; border: 1px solid #bbf7d0; border-radius: 16px; background: #f0fdf4; color: #166534; } .m-payment-info--warning { border-color: #fed7aa; background: #fff7ed; color: #9a3412; } .m-payment-info strong { font-family: var(--f-heading); font-size: 14px; } .m-payment-info span { font-size: 13px; line-height: 1.6; } .m-bank-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 16px; } .m-bank-table { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; } .m-bank-table th, .m-bank-table td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); text-align: left; font-size: 12.5px; } .m-bank-table th { background: var(--c-bg2); color: var(--c-muted); font-family: var(--f-heading); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .06em; } .m-bank-table tr:last-child td { border-bottom: none; } .m-agree { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; color: var(--c-muted); font-size: 13px; cursor: pointer; } .m-agree input { margin-top: 2px; accent-color: var(--c-accent); } .m-checkout-summary__items { max-height: 320px; overflow-y: auto; padding: 8px 22px; border-bottom: 1px solid var(--c-border); } .m-checkout-summary-item { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--c-border); } .m-checkout-summary-item:last-child { border-bottom: none; } .m-checkout-summary-item strong { display: block; font-size: 13px; color: var(--c-dark); line-height: 1.45; } .m-checkout-summary-item span { display: block; font-size: 12px; color: var(--c-muted); margin-top: 2px; } .m-checkout-summary-item em { font-style: normal; font-family: var(--f-heading); font-weight: var(--fw-medium); color: var(--c-dark); white-space: nowrap; } .m-product-tabs { margin: 56px 0; padding: 0; } .m-product-tabs__head { max-width: 720px; margin-bottom: 22px; } .m-product-tabs__eyebrow { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .13em; text-transform: uppercase; color: var(--c-accent); font-family: var(--f-heading); } .m-product-tabs__head h2 { font-family: var(--f-heading); font-size: clamp(24px,3vw,34px); font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 8px; } .m-product-tabs__head p { font-size: 14px; color: var(--c-muted); line-height: 1.8; } .m-product-tabs__shell { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 22px; align-items: start; } .m-product-tabs__shell > .m-tabs-nav { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--c-border); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); overflow: visible; } .m-product-tabs .m-tab-link { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 14px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--c-muted); text-align: left; font-family: var(--f-heading); font-size: 13px; font-weight: var(--fw-medium); transition: var(--t); } .m-product-tabs .m-tab-link span { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-bg2); color: var(--c-muted); font-size: 11px; flex-shrink: 0; transition: var(--t); } .m-product-tabs .m-tab-link:hover { color: var(--c-dark); background: var(--c-bg2); } .m-product-tabs .m-tab-link.active { border-color: rgba(230,57,70,.18); background: rgba(230,57,70,.08); color: var(--c-accent); } .m-product-tabs .m-tab-link.active span { background: var(--c-accent); color: #fff; } .m-product-tabs .m-tab-content { min-width: 0; padding: 28px; border: 1px solid var(--c-border); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.05); } .m-tab-pane__intro { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); } .m-tab-pane__intro h3 { font-family: var(--f-heading); font-size: 20px; font-weight: var(--fw-medium); color: var(--c-dark); margin-bottom: 4px; } .m-tab-pane__intro p { color: var(--c-muted); font-size: 13.5px; } .m-tab-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 16px; } .m-detail-table th, .m-detail-table td { padding: 14px 16px; font-size: 13.5px; } .m-detail-table tbody th { width: 34%; color: var(--c-muted); font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; background: #fff; } .m-detail-table td:last-child { color: var(--c-dark); font-weight: var(--fw-medium); } .m-video-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; } .m-video-card { aspect-ratio: 16/9; overflow: hidden; border-radius: 18px; background: var(--c-bg2); box-shadow: var(--shadow-sm); } .m-video-card iframe { width: 100%; height: 100%; display: block; } .m-delivery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; } .m-delivery-card { padding: 18px; border-radius: 16px; background: var(--c-bg2); border: 1px solid var(--c-border); } .m-delivery-card span { display: block; color: var(--c-muted); font-size: 12px; margin-bottom: 6px; } .m-delivery-card strong { display: block; color: var(--c-dark); font-family: var(--f-heading); font-size: 15px; } .m-tab-copy { max-width: 780px; color: var(--c-text); font-size: 14.5px; line-height: 1.85; } .m-tab-copy p + p { margin-top: 10px; } .m-suggestion-form { max-width: 620px; display: flex; flex-direction: column; gap: 16px; } .m-suggestion-form__types { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; } .m-suggestion-form__types label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 14px; cursor: pointer; font-weight: var(--fw-medium); color: var(--c-dark); } .m-suggestion-form__types input { accent-color: var(--c-accent); } .m-suggestion-form__grid { display: grid; gap: 14px; } @media (max-width: 1100px) { .m-cart-page__grid, .m-checkout-page__grid, .m-product-tabs__shell { grid-template-columns: 1fr; } .m-commerce-summary, .m-product-tabs__shell > .m-tabs-nav { position: static; } .m-product-tabs__shell > .m-tabs-nav { flex-direction: row; overflow-x: auto; } .m-product-tabs .m-tab-link { width: auto; white-space: nowrap; } } @media (max-width: 768px) { .m-cart-page, .m-checkout-page { padding-bottom: 44px; } .m-commerce-hero { flex-direction: column; padding: 22px; border-radius: 18px; } .m-commerce-hero__count { width: 100%; min-width: 0; } .m-cart-panel__head { align-items: flex-start; flex-direction: column; } .m-cart-line { grid-template-columns: 92px minmax(0,1fr); gap: 14px; } .m-cart-line__media { width: 92px; height: auto; } .m-cart-line__bottom { grid-template-columns: 1fr; align-items: start; gap: 12px; } .m-cart-line__total { text-align: left; } .m-cart-coupon { grid-template-columns: 1fr; } .m-cart-coupon__control { flex-direction: column; } .m-checkout-card__head, .m-checkout-card__body, .m-product-tabs .m-tab-content { padding: 18px; } .m-payment-switch, .m-delivery-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .m-container { padding-left: 16px; padding-right: 16px; } .m-cart-line { grid-template-columns: 1fr; } .m-cart-line__media { width: 100%; height: auto; aspect-ratio: var(--product-img-ar); } .m-cart-line__top { gap: 10px; } .m-checkout-address, .m-cargo-card { grid-template-columns: auto 1fr; } .m-checkout-address__edit, .m-cargo-card__price { grid-column: 2; justify-self: start; } .m-commerce-summary__total { flex-direction: column; align-items: flex-start; } .m-product-tabs .m-tab-link span { display: none; } } /* ── YILMAZ HOME HERO HEADER ───────────────────────── */ .yilmaz-home .mh-desktop-shell { position: absolute; top: 0; left: 0; right: 0; z-index: 1200; transition: background .28s ease, box-shadow .28s ease; } .yilmaz-home .mh-topbar { display: none; } .yilmaz-home .mh-header, .yilmaz-home .mh-nav { position: relative; top: auto; background: transparent; border-bottom-color: rgba(255,255,255,.18); box-shadow: none; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease; } .yilmaz-home .mh-header__inner { height: 70px; } .yilmaz-home .mh-nav__inner > ul { justify-content: center; } .yilmaz-home .mh-desktop-shell .mh-search form { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); backdrop-filter: blur(8px); } .yilmaz-home .mh-desktop-shell .mh-search input { color: #fff; } .yilmaz-home .mh-desktop-shell .mh-search input::placeholder { color: rgba(255,255,255,.9); } .yilmaz-home .mh-desktop-shell .mh-search button, .yilmaz-home .mh-desktop-shell .mh-action, .yilmaz-home .mh-desktop-shell .mh-nav__link { color: #fff; } .yilmaz-home .mh-desktop-shell .mh-logo__img--light { opacity: 1; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); } .yilmaz-home .mh-desktop-shell .mh-logo__img--dark { opacity: 0; } .yilmaz-home .mh-desktop-shell .mh-action:hover, .yilmaz-home .mh-desktop-shell .mh-nav__link:hover, .yilmaz-home .mh-desktop-shell .mh-nav__item:hover > .mh-nav__link { color: #fff; background: rgba(255,255,255,.12); } .yilmaz-home .mh-desktop-shell .mh-nav__link.text-red, .yilmaz-home .mh-desktop-shell .mh-nav__link.campaign { color: #ff8a00 !important; } .yilmaz-home .mh-mobile .mh-action { color: var(--c-dark); } .yilmaz-home .mh-desktop-shell:hover .mh-header, .yilmaz-home .mh-desktop-shell:hover .mh-nav, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-header, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-nav { background: #fff; border-bottom-color: var(--c-border); box-shadow: 0 8px 28px rgba(0,0,0,.08); } .yilmaz-home .mh-desktop-shell:hover .mh-search form, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-search form { background: #fff; border-color: var(--c-border); backdrop-filter: none; } .yilmaz-home .mh-desktop-shell:hover .mh-search form:focus-within, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-search form:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(230,57,70,.08); } .yilmaz-home .mh-desktop-shell:hover .mh-search input, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-search input { color: var(--c-dark); } .yilmaz-home .mh-desktop-shell:hover .mh-search input::placeholder, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-search input::placeholder { color: var(--c-muted); } .yilmaz-home .mh-desktop-shell:hover .mh-search button, .yilmaz-home .mh-desktop-shell:hover .mh-action, .yilmaz-home .mh-desktop-shell:hover .mh-nav__link, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-search button, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-action, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-nav__link { color: var(--c-dark); } .yilmaz-home .mh-desktop-shell:hover .mh-action:hover, .yilmaz-home .mh-desktop-shell:hover .mh-nav__link:hover, .yilmaz-home .mh-desktop-shell:hover .mh-nav__item:hover > .mh-nav__link, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-action:hover, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-nav__link:hover, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-nav__item:hover > .mh-nav__link { color: var(--c-accent); background: var(--c-bg2); } .yilmaz-home .mh-desktop-shell:hover .mh-logo__img--light, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-logo__img--light { opacity: 0; filter: none; } .yilmaz-home .mh-desktop-shell:hover .mh-logo__img--dark, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-logo__img--dark { opacity: 1; } .yilmaz-home .mh-desktop-shell:hover .mh-nav__link.text-red, .yilmaz-home .mh-desktop-shell:hover .mh-nav__link.campaign, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-nav__link.text-red, .yilmaz-home .mh-desktop-shell.is-scrolled .mh-nav__link.campaign { color: var(--c-accent) !important; } .yilmaz-home .m-hero { height: 100svh; min-height: 0; max-height: none; margin-top: 0; background: #111; } .yilmaz-home .m-hero > .owl-carousel { position: absolute; inset: 0; width: 100%; height: 100%; } .yilmaz-home .m-hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.03) 68%, rgba(0,0,0,.20) 100%); } .yilmaz-home .m-hero__content { top: 52%; } .yilmaz-home .m-hero .owl-prev, .yilmaz-home .m-hero .owl-next { opacity: 1; background: rgba(255,255,255,.78) !important; border-color: rgba(255,255,255,.9) !important; backdrop-filter: blur(8px); } .yilmaz-home .m-hero .owl-prev::after, .yilmaz-home .m-hero .owl-next::after { border-color: var(--c-dark); } .yilmaz-home .m-hero .owl-prev:hover, .yilmaz-home .m-hero .owl-next:hover { background: #fff !important; } .yilmaz-home .m-hero .owl-dots { bottom: 24px; } .yilmaz-home .m-hero .owl-dot span { height: 6px !important; width: 6px !important; border-radius: 50% !important; background: rgba(255,255,255,.62) !important; } .yilmaz-home .m-hero .owl-dot.active span { width: 26px !important; border-radius: 999px !important; background: #fff !important; } @media (max-width: 1024px) { .yilmaz-home .mh-desktop-shell { display: none; } .yilmaz-home .m-hero { height: auto; min-height: 0; aspect-ratio: var(--m-hero-mobile-ar); width: 100%; } } /* ── STATIC + BANK PAGES REDESIGN ─────────────────── */ .m-static-page, .m-bank-page { background: linear-gradient(180deg,#fff 0%,#fafafa 52%,#fff 100%); } .m-static-hero { position: relative; overflow: hidden; padding: 28px 0 64px; background: radial-gradient(circle at 12% 8%, rgba(230,57,70,.14), transparent 28%), linear-gradient(135deg,#191919 0%,#2a2523 54%,#141414 100%); color: #fff; } .m-static-hero::after { content: ''; position: absolute; right: -110px; top: -130px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(circle, rgba(255,255,255,.08), transparent 64%); pointer-events: none; } .m-static-hero--bank { background: radial-gradient(circle at 12% 8%, rgba(245,158,11,.16), transparent 30%), linear-gradient(135deg,#151515 0%,#312922 58%,#111 100%); } .m-static-hero .m-container { position: relative; z-index: 1; } .m-static-hero .m-breadcrumb { color: rgba(255,255,255,.56); } .m-static-hero .m-breadcrumb a { color: rgba(255,255,255,.62); } .m-static-hero .m-breadcrumb a:hover { color: #fff; } .m-static-hero .m-breadcrumb__sep { color: rgba(255,255,255,.26); } .m-static-hero__content { max-width: 760px; padding-top: 26px; } .m-static-hero__eyebrow { display: inline-flex; margin-bottom: 12px; font-family: var(--f-heading); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .14em; text-transform: uppercase; color: #ffb703; } .m-static-hero__content h1 { font-family: var(--f-heading); font-size: clamp(30px,4.6vw,58px); line-height: 1.08; font-weight: var(--fw-medium); color: #fff; margin-bottom: 14px; } .m-static-hero__content p { max-width: 640px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.85; margin-bottom: 24px; } .m-static-page__body, .m-bank-page__body { padding: 52px 0 76px; } .m-static-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 28px; align-items: start; } .m-static-aside { position: sticky; top: 104px; } .m-static-aside__card { border: 1px solid var(--c-border); border-radius: 22px; background: #fff; padding: 24px; box-shadow: 0 14px 36px rgba(0,0,0,.055); } .m-static-aside__card span { display: block; margin-bottom: 8px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); font-family: var(--f-heading); } .m-static-aside__card strong { display: block; font-family: var(--f-heading); font-size: 20px; line-height: 1.25; color: var(--c-dark); margin-bottom: 10px; } .m-static-aside__card p { color: var(--c-muted); font-size: 13.5px; line-height: 1.75; } .m-static-document { min-width: 0; border: 1px solid var(--c-border); border-radius: 24px; background: #fff; box-shadow: 0 16px 42px rgba(0,0,0,.055); overflow: hidden; } .m-static-document__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--c-border); background: var(--c-bg2); color: var(--c-muted); font-size: 12px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .08em; } .m-static-document__content { padding: 34px 38px 42px; color: var(--c-text); font-size: 15px; line-height: 1.9; } .m-static-document__content h1, .m-static-document__content h2, .m-static-document__content h3, .m-static-document__content h4 { font-family: var(--f-heading); color: var(--c-dark); font-weight: 850; line-height: 1.3; margin: 28px 0 12px; } .m-static-document__content h1:first-child, .m-static-document__content h2:first-child, .m-static-document__content h3:first-child { margin-top: 0; } .m-static-document__content p { margin-bottom: 16px; } .m-static-document__content ul, .m-static-document__content ol { padding-left: 22px; margin: 14px 0 18px; } .m-static-document__content li { margin-bottom: 8px; } .m-static-document__content a { color: var(--c-accent); font-weight: var(--fw-medium); } .m-static-document__content table { width: 100%; border-collapse: collapse; margin: 18px 0; overflow: hidden; border-radius: 14px; } .m-static-document__content th, .m-static-document__content td { padding: 12px 14px; border: 1px solid var(--c-border); vertical-align: top; } .m-static-document__content th { background: var(--c-bg2); color: var(--c-dark); font-weight: var(--fw-medium); } .m-bank-page__notice { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; padding: 18px 20px; border: 1px solid #fed7aa; border-radius: 20px; background: #fff7ed; color: #9a3412; } .m-bank-page__notice-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #ffedd5; flex-shrink: 0; } .m-bank-page__notice strong { display: block; font-family: var(--f-heading); font-size: 14px; margin-bottom: 3px; color: #7c2d12; } .m-bank-page__notice span { display: block; font-size: 13.5px; line-height: 1.65; } .m-bank-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .m-bank-card { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.05); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .m-bank-card:hover { transform: translateY(-4px); border-color: rgba(230,57,70,.28); box-shadow: 0 20px 46px rgba(0,0,0,.08); } .m-bank-card__top { display: flex; align-items: center; gap: 14px; padding: 22px; background: linear-gradient(135deg,#1f1f1f,#333); color: #fff; } .m-bank-card__icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #4b5563; color: #fff; flex-shrink: 0; } .m-bank-card__top span { display: block; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.56); margin-bottom: 4px; } .m-bank-card__top h2 { font-family: var(--f-heading); font-size: 18px; line-height: 1.25; font-weight: var(--fw-medium); color: #fff; } .m-bank-card__details { margin: 0; padding: 20px 22px 22px; display: grid; gap: 13px; } .m-bank-card__details div { min-width: 0; padding-bottom: 13px; border-bottom: 1px dashed var(--c-border); } .m-bank-card__details div:last-child { padding-bottom: 0; border-bottom: none; } .m-bank-card__details dt { margin-bottom: 4px; color: var(--c-muted); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; } .m-bank-card__details dd { margin: 0; color: var(--c-dark); font-family: var(--f-heading); font-size: 14px; font-weight: var(--fw-medium); line-height: 1.45; overflow-wrap: anywhere; } .m-bank-card__iban dd { color: var(--c-accent); letter-spacing: .02em; } .m-bank-empty { grid-column: 1 / -1; padding: 42px 24px; border: 1px dashed var(--c-border); border-radius: 22px; background: #fff; text-align: center; } .m-bank-empty strong { display: block; font-family: var(--f-heading); font-size: 18px; color: var(--c-dark); margin-bottom: 4px; } .m-bank-empty span { color: var(--c-muted); } @media (max-width: 1100px) { .m-bank-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .m-static-layout { grid-template-columns: 1fr; } .m-static-aside { position: static; } } @media (max-width: 640px) { .m-static-hero { padding: 20px 0 44px; } .m-static-hero__content { padding-top: 18px; } .m-static-page__body, .m-bank-page__body { padding: 32px 0 56px; } .m-bank-grid { grid-template-columns: 1fr; } .m-static-document__meta { align-items: flex-start; flex-direction: column; padding: 16px 18px; } .m-static-document__content { padding: 24px 20px 30px; font-size: 14px; } .m-bank-page__notice { flex-direction: column; } } /* ── YILMAZ UX FIXES ─────────────────────────────── */ .m-footer { background: #f7f7f5; border-top-color: #dedbd5; } .m-footer-newsletter { background: #efeee9; border-bottom-color: #dedbd5; } .m-footer__main { padding-top: 52px; } .m-footer-brand__logo img { max-height: 46px; filter: none; opacity: 1; } .m-footer-brand__addr { color: #3f3f3f; font-size: 14px; line-height: 1.85; } .m-footer-social-label, .m-footer-col__title { color: #1d1d1d; font-weight: 850; } .m-footer-col a { color: #3d3d3d; font-size: 13.5px; line-height: 1.65; } .m-footer-col a:hover { color: var(--c-accent); } .m-footer-social a { border-color: #d1cec7; color: #2f2f2f; background: #fff; } .m-footer__bottom { border-top-color: #d8d5ce; padding: 20px 0 24px; } .m-footer__copyright { color: #404040; } .m-footer__payment { padding: 10px 14px; border: 1px solid #d8d5ce; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.06); } .m-footer__payment img { max-height: 34px; max-width: 260px; opacity: 1; filter: none; } .m-shop--full .m-product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; } @media (min-width: 1600px) { .m-shop--full .m-product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 768px) { .m-shop--full .m-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } } .m-cat-desc { width: 100%; max-height: 260px; overflow-y: auto; padding: 26px 30px; background: #fff; border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); scrollbar-width: thin; scrollbar-color: var(--c-accent) var(--c-bg2); } .m-cat-desc::-webkit-scrollbar { width: 7px; } .m-cat-desc::-webkit-scrollbar-track { background: var(--c-bg2); border-radius: 999px; } .m-cat-desc::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 999px; } .m-cat-desc h4 { position: sticky; top: -26px; margin: -26px -30px 16px; padding: 18px 30px 12px; background: #fff; border-bottom: 1px solid var(--c-border); z-index: 1; } .m-cat-desc p, .m-cat-desc div { color: #555; } @media (max-width: 768px) { .m-filter-bar { position: sticky; top: 0; z-index: 80; margin: 0 -16px 18px; padding: 12px 16px; border-left: none; border-right: none; border-radius: 0; box-shadow: 0 8px 20px rgba(0,0,0,.08); } .m-filter-bar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: stretch; } .m-filter-bar__label { grid-column: 1 / -1; display: flex; align-items: center; color: var(--c-dark); margin: 0; } .m-filter-dropdown { position: static; min-width: 0; } .m-filter-dropdown__btn, .m-sort-select { width: 100%; min-height: 42px; justify-content: space-between; border-radius: 12px; font-size: 12px; background-color: #fff; } .m-filter-bar__apply { grid-column: 1 / -1; margin-left: 0; } .m-filter-dropdown__menu { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); top: auto; min-width: 0; max-height: min(62vh, 440px); overflow-y: auto; padding: 18px; border-radius: 20px; z-index: 2200; box-shadow: 0 18px 50px rgba(0,0,0,.24); } .m-filter-dropdown.open::before { content: ''; position: fixed; inset: 0; z-index: 2190; background: rgba(0,0,0,.22); pointer-events: none; } .m-check-item { min-height: 38px; padding: 8px 0; font-size: 14px; } .m-check-item input[type=checkbox] { width: 18px; height: 18px; } .m-cat-desc { max-height: 220px; margin-top: 28px; padding: 22px 20px; } .m-cat-desc h4 { top: -22px; margin: -22px -20px 14px; padding: 16px 20px 10px; } .m-shop-toolbar { margin-bottom: 14px; border-bottom: none; padding: 0; } .m-shop-toolbar .m-filter-bar__apply { width: 100%; margin-left: 0; } .m-shop-toolbar .m-sort-select { width: 100%; min-height: 42px; } } .m-product-summary { align-self: start; position: sticky; top: 104px; padding: 26px; border: 1px solid var(--c-border); border-radius: 24px; background: linear-gradient(180deg,#fff 0%,#fbfbfa 100%); box-shadow: 0 18px 48px rgba(0,0,0,.07); } .m-product-summary__name { font-size: clamp(24px,2.5vw,34px); font-weight: var(--fw-medium); letter-spacing: -.02em; margin-bottom: 16px; } .m-price-box { margin-bottom: 18px; padding: 18px 20px; border: 1px solid #ece9e4; border-radius: 18px; background: #f8f6f1; } .m-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #dfd9cf; } .m-price-row:last-child { border-bottom: none; } .m-price-lbl { color: #777; font-size: 12px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .08em; } .m-price-new { color: var(--c-accent); font-size: 32px; } .m-parts-box, .m-product-meta { border-radius: 16px; background: #fff; } .m-product-cta .btn-m { min-height: 54px; border-radius: 16px; background: #111; font-size: 16px; } .m-whatsapp-btn { border-radius: 16px; min-height: 50px; } .m-tags { margin-top: 16px; } .m-detail-links { padding-top: 12px; border-top: 1px solid var(--c-border); } .m-product-tabs__shell > .m-tabs-nav { grid-template-columns: none; } .m-product-tabs .m-tab-link { border-bottom: 0; } @media (max-width: 1100px) { .m-product-summary { position: static; } } @media (max-width: 768px) { .m-product-summary { padding: 20px; border-radius: 20px; box-shadow: var(--shadow-sm); } .m-product-summary__name { font-size: 23px; } .m-price-new { font-size: 26px; } .m-product-tabs { margin-top: 36px; } .m-product-tabs__head { margin-bottom: 16px; } .m-product-tabs__shell > .m-tabs-nav { display: flex; flex-direction: row; gap: 8px; margin: 0 -16px 14px; padding: 0 16px 6px; border: none; border-radius: 0; background: transparent; box-shadow: none; overflow-x: auto; scroll-snap-type: x mandatory; } .m-product-tabs .m-tab-link { flex: 0 0 auto; width: auto; min-height: 42px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 999px; background: #fff; scroll-snap-align: start; } .m-product-tabs .m-tab-link span { display: none; } .m-product-tabs .m-tab-link.active { background: var(--c-dark); border-color: var(--c-dark); color: #fff; } .m-product-tabs .m-tab-content { padding: 18px; border-radius: 18px; } .m-delivery-grid { grid-template-columns: 1fr; } } /* Montserrat — site-wide medium weight baseline */ strong, b { font-weight: var(--fw-medium); } .btn, .form-control, label, .select2-container { font-weight: var(--fw-medium); } /* ── RELATED PRODUCTS SLIDER (product detail) ─────── */ .m-related-products { padding: 52px 0 60px; background: linear-gradient(180deg, #fafafa 0%, #fff 100%); border-top: 1px solid var(--c-border); overflow: hidden; } .m-related-products__head { margin-bottom: 22px; } .m-related-products__title { font-family: var(--f-heading); font-size: clamp(22px, 2.8vw, 30px); font-weight: var(--fw-medium); color: var(--c-dark); line-height: 1.2; margin-bottom: 6px; } .m-related-products__sub { font-size: 14px; color: var(--c-muted); } .m-related-products__shell { position: relative; padding: 0 44px; } .m-related-products__shell .owl-carousel { width: 100%; } .m-related-products__shell .owl-stage-outer { overflow: hidden; } .m-related-products__shell .owl-stage { display: flex; align-items: stretch; } .m-related-products__shell .owl-item { float: none; display: flex; height: auto; } .m-related-products__shell .m-product-card { width: 100%; height: 100%; border-radius: 14px; box-shadow: var(--shadow-sm); transition: var(--t); } .m-related-products__shell .m-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .m-related-products__shell .owl-prev, .m-related-products__shell .owl-next { top: calc(50% - 8px); width: 42px; height: 42px; border-radius: 50% !important; background: #fff !important; border: 1.5px solid var(--c-border) !important; box-shadow: var(--shadow); } .m-related-products__shell .owl-prev { left: 0; } .m-related-products__shell .owl-next { right: 0; } .m-related-products__shell .owl-prev:hover, .m-related-products__shell .owl-next:hover { background: var(--c-dark) !important; border-color: var(--c-dark) !important; } .m-related-products__shell .owl-prev:hover::after, .m-related-products__shell .owl-next:hover::after { border-color: #fff; } @media (max-width: 768px) { .m-related-products { padding: 36px 0 44px; } .m-related-products__shell { padding: 0 36px; } .m-related-products__shell .owl-prev, .m-related-products__shell .owl-next { width: 34px; height: 34px; } } /* ── PRODUCT IMAGE RATIO (1500×830) — legacy views ─ */ .product-box-image-wrapper, .shipment-content-product-box .product-box-image-wrapper { width: 88px; aspect-ratio: var(--product-img-ar); overflow: hidden; border-radius: var(--radius); background: var(--c-bg2); flex-shrink: 0; } .product-box-image, .product-box-image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .single-product-img { aspect-ratio: var(--product-img-ar); overflow: hidden; background: var(--c-bg2); border-radius: var(--radius); } .single-product-img img, .single-product-img img.height100 { width: 100%; height: 100% !important; object-fit: cover; object-position: center; display: block; }