/* ============================================================ CUIR — Premium Luxury Perfume Storefront Redesign (CSS ONLY) Salla "Selia" theme — real selectors verified against rendered DOM RTL Arabic. No HTML/JS/Liquid was modified — CSS additions/overrides only. ============================================================ */ /* ------------------------------------------------------------ 01. DESIGN TOKENS Re-tunes the theme's OWN CSS variables (defined in :root) so the new palette cascades through every remote-CSS component (buttons, badges, cards) automatically, plus adds new --cuir-* tokens for spacing/radius/shadow not previously exposed. ------------------------------------------------------------ */ :root { /* Re-themed brand palette (overrides theme tokens) */ --color-primary: #4a171d; --color-primary-dark: #2a0c10; --color-primary-light: #7c4d52; --color-primary-reverse: #fdfaf4; --bg-primary: #f8f1e5; --bg-secondary: #fdfaf4; --header-text-color: #f8f1e5; --store-text-primary: #2b1015; /* Original theme used raw saturated gold (#c9a227) for ALL secondary/body text (subtitles, old prices, FAQ borders). That reads cheap and hurts legibility. Replaced with a refined warm taupe; gold is reserved for decorative accents only (see --cuir-gold-*). */ --store-text-secondary: #8a7364; --product-bg: #ffffff; --product-border-color: rgba(74, 23, 29, .12); --product-image-height: 19rem; --footer-bg: #2b1015; --footer-text-color: #f5ead9; --bottom-footer-bg: #1a0d0f; /* Fixes an existing low-contrast bug: enhanced add-to-cart button was white-on-white by default in the theme's own tokens. */ --product-enhanced-btn-bg: #4a171d; --product-enhanced-btn-color: #fdfaf4; /* New CUIR tokens */ --cuir-burgundy-950: #26080d; --cuir-burgundy-900: #350f14; --cuir-burgundy-800: #4a171d; --cuir-brown-900: #2a1813; --cuir-gold-500: #bd9455; --cuir-gold-400: #d2ad6c; --cuir-gold-300: #e8d3ab; --cuir-ivory-50: #fdfaf4; --cuir-ivory-100: #f8f1e5; --cuir-ivory-200: #efe2cf; --cuir-white: #ffffff; --cuir-text-primary: #2b1015; --cuir-text-secondary: #8a7364; --cuir-border: rgba(74, 23, 29, .12); --cuir-border-strong: rgba(74, 23, 29, .22); --cuir-radius-sm: 8px; --cuir-radius-md: 14px; --cuir-radius-lg: 22px; --cuir-radius-xl: 30px; --cuir-radius-pill: 999px; --cuir-shadow-sm: 0 6px 18px rgba(42, 24, 19, .06); --cuir-shadow-md: 0 14px 35px rgba(42, 24, 19, .10); --cuir-shadow-lg: 0 24px 60px rgba(42, 24, 19, .16); --cuir-transition: 220ms cubic-bezier(.2, .7, .2, 1); --cuir-container-max: 1360px; --cuir-container-pad: clamp(16px, 4vw, 48px); --cuir-section-pad-y: clamp(48px, 7vw, 96px); --cuir-section-pad-y-sm: clamp(40px, 6vw, 64px); } /* ------------------------------------------------------------ 02. GLOBAL LAYOUT Scoped to confirmed structural parents (main, header, top bar, footer) rather than the bare .container class, since .container is also reused on pages not present in this audit (cart/checkout). ------------------------------------------------------------ */ main .container, .store-header .container, .top-navbar .container, #mainnav .container, .store-footer .container { max-width: var(--cuir-container-max); padding-inline: var(--cuir-container-pad); } body { background-color: var(--cuir-ivory-100); } /* Editorial section rhythm: alternate warm ivory / white / soft beige so the page doesn't read as one long beige slab. */ .s-block--circle-links { background-color: var(--cuir-ivory-100); } .s-block--best-offers { background-color: var(--cuir-white); } #best-offers-3-slider { background-color: var(--cuir-ivory-200); } .s-block--images-grid { background-color: var(--cuir-ivory-50); } .s-block--brands { background-color: var(--cuir-white); } .s-block--faq { background-color: var(--cuir-ivory-100); } .s-block--enhanced-features { background-color: var(--cuir-white); } .s-block--custom-reviews { background-color: var(--cuir-ivory-50); } .s-block--circle-links, .s-block--best-offers, .s-block--images-grid, .s-block--brands, .s-block--faq, .s-block--enhanced-features, .s-block--custom-reviews { padding-block: var(--cuir-section-pad-y); } @media (max-width: 991.98px) { .s-block--circle-links, .s-block--best-offers, .s-block--images-grid, .s-block--brands, .s-block--faq, .s-block--enhanced-features, .s-block--custom-reviews { padding-block: var(--cuir-section-pad-y-sm); } } @media (max-width: 575.98px) { .s-block--circle-links, .s-block--best-offers, .s-block--images-grid, .s-block--brands, .s-block--faq, .s-block--enhanced-features, .s-block--custom-reviews { padding-block: clamp(32px, 10vw, 48px); } } /* ------------------------------------------------------------ 03. TYPOGRAPHY ------------------------------------------------------------ */ .home-block-title h2, .s-block--best-offers>.home-block-title h2 { font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; line-height: 1.3; color: var(--cuir-text-primary); letter-spacing: 0; } .home-block-title p { color: var(--cuir-text-secondary); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.7; margin-top: .5rem; } /* Reuse the theme's OWN decorative underline element instead of inventing a pseudo-element — it already exists under every section title. */ .enhanced-title-border { display: block; width: 64px; height: 3px; margin: 18px auto 0; border-radius: var(--cuir-radius-pill); background: linear-gradient(90deg, transparent, var(--cuir-gold-500), transparent); } .s-block--brands .home-block-title .enhanced-title-border { margin-top: 14px; } .product-card__title a { color: var(--cuir-text-primary); font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.5em * 2); } /* ------------------------------------------------------------ 04. HEADER ------------------------------------------------------------ */ /* --- Top utility bar (announcement / info links) --- */ .top-navbar { background-color: var(--cuir-burgundy-950); border-bottom: 1px solid rgba(255, 255, 255, .08); } .top-navbar .container { min-height: 42px; padding-block: 8px; } .top-navbar .topnav-link-item { color: var(--cuir-ivory-200); font-size: 13px; opacity: .9; transition: opacity var(--cuir-transition), color var(--cuir-transition); } .top-navbar .topnav-link-item:hover { opacity: 1; color: var(--cuir-gold-400); } /* --- Header shell (transparent over hero by default via trans_header) --- */ .store-header { position: relative; z-index: 40; } .trans_header .store-header { background: linear-gradient(to bottom, rgba(20, 6, 9, .35), rgba(20, 6, 9, 0)); transition: background-color .25s ease; } #mainnav.main-nav-container { min-height: 76px; } .navbar-brand .logo-normal { max-height: 46px; width: auto; transition: transform var(--cuir-transition); } /* --- Icon buttons: search / login / cart --- */ .header-btn, button[data-selia="header-search-button"], .mburger { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; border-radius: var(--cuir-radius-pill); transition: background-color var(--cuir-transition), transform var(--cuir-transition); } .header-btn:hover, button[data-selia="header-search-button"]:hover, .mburger:hover { background-color: rgba(189, 148, 85, .14); } .header-btn__icon { font-size: 20px; } salla-cart-summary .s-cart-summary-wrapper { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--cuir-radius-pill); padding-inline: 6px; transition: background-color var(--cuir-transition); } salla-cart-summary .s-cart-summary-wrapper:hover { background-color: rgba(189, 148, 85, .14); } .s-cart-summary-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 4px; border-radius: var(--cuir-radius-pill); background: var(--cuir-gold-500); color: var(--cuir-burgundy-950); font-size: 11px; font-weight: 700; line-height: 1; } /* --- Solid header once scrolled past hero (mechanism defined in cuir.js) --- */ body.cuir-scrolled header.store-header, body.cuir-scrolled .main-nav-container, body.cuir-scrolled .top-navbar { background-color: var(--cuir-burgundy-950) !important; box-shadow: var(--cuir-shadow-md); transition: background-color .25s ease, box-shadow .25s ease; } body.cuir-scrolled header.store-header a, body.cuir-scrolled header.store-header .navbar-brand, body.cuir-scrolled header.store-header .header-btn, body.cuir-scrolled header.store-header .header-btn__icon, body.cuir-scrolled header.store-header i, body.cuir-scrolled header.store-header span, body.cuir-scrolled header.store-header svg, body.cuir-scrolled header.store-header .topnav-link-item { color: var(--cuir-ivory-100) !important; fill: var(--cuir-ivory-100) !important; } /* --- Off-canvas navigation drawer (used for both mobile + desktop side menu) --- Only visual polish: colors, spacing, typography. Panel open/close mechanics (mmenu.js classes/transforms) are left untouched. */ .mm-spn--main { background-color: var(--cuir-ivory-50); } .mobile-menu .main-menu li { border-block-end: 1px solid var(--cuir-border); } .mobile-menu [data-selia="header-menu-item-link"], .mobile-menu [data-selia="header-menu-parent-label"] { color: var(--cuir-text-primary); padding-block: 4px; } .mobile-menu [data-selia="header-submenu-view-all"] { color: var(--cuir-gold-500); font-weight: 600; } /* ------------------------------------------------------------ 05. HERO ------------------------------------------------------------ */ .advanced-slider { position: relative; } .advanced-slider__image { display: block; } /* Arrows: refined ivory glass pill instead of default dark square */ .s-slider-nav-arrow { width: 44px; height: 44px; border-radius: var(--cuir-radius-pill); background-color: rgba(253, 250, 244, .85); color: var(--cuir-burgundy-950); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--cuir-shadow-sm); transition: background-color var(--cuir-transition), transform var(--cuir-transition); } .s-slider-nav-arrow:hover { background-color: var(--cuir-white); transform: translateY(-2px); } .s-slider-nav-arrow.swiper-button-disabled { opacity: .35; } .advanced-slider .swiper-pagination-bullet { width: 8px; height: 8px; background-color: var(--cuir-white); opacity: .55; transition: opacity var(--cuir-transition), width var(--cuir-transition); } .advanced-slider .swiper-pagination-bullet-active { opacity: 1; width: 22px; border-radius: var(--cuir-radius-pill); background-color: var(--cuir-gold-400); } /* Only style the caption container/typography; never darken the image itself since hero slides currently ship with no embedded caption text — an overlay would only ever hide future merchant-authored content. */ .advanced-slider__caption__inner__content__heading { color: var(--cuir-ivory-50); font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); } .advanced-slider__caption__inner__content__text { color: var(--cuir-ivory-100); text-shadow: 0 1px 8px rgba(0, 0, 0, .3); } @media (max-width: 575.98px) { .s-slider-nav-arrow { width: 38px; height: 38px; } } /* ------------------------------------------------------------ 06. CATEGORIES ("تسوق حسب الفئة" — circle-links carousel) ------------------------------------------------------------ */ .s-block--circle-links .swiper-slide.slide--one-sixth a { display: block; } .s-block--circle-links .overflow-hidden.rounded-full.w-fit.mx-auto { position: relative; padding: 5px; background: var(--cuir-white); border: 1px solid var(--cuir-border); box-shadow: var(--cuir-shadow-sm); transition: transform var(--cuir-transition), border-color var(--cuir-transition), box-shadow var(--cuir-transition); } .s-block--circle-links .swiper-slide.slide--one-sixth:hover .overflow-hidden.rounded-full.w-fit.mx-auto { transform: translateY(-5px); border-color: var(--cuir-gold-400); box-shadow: var(--cuir-shadow-md); } .s-block--circle-links .swiper-slide.slide--one-sixth img { border-radius: 50%; } .s-block--circle-links .swiper-slide.slide--one-sixth h3 { color: var(--cuir-text-primary); font-weight: 600; margin-top: 14px; } .s-block--circle-links .swiper-slide.slide--one-sixth p { color: var(--cuir-text-secondary); font-size: 13px; } /* Hide the raw scrollbar track but keep the touch/drag scroll usable */ .s-block--circle-links .swiper-scrollbar { background: var(--cuir-border); height: 3px; } .s-block--circle-links .swiper-scrollbar-drag { background: var(--cuir-gold-400); } /* ------------------------------------------------------------ 07. PRODUCT GRID / SLIDER SECTIONS ------------------------------------------------------------ */ .s-block--best-offers .s-slider-block__title { margin-bottom: 8px; } .s-products-slider-card { padding-inline: 8px; box-sizing: border-box; } .s-block--best-offers salla-products-slider .s-slider-nav-arrow, #viewed-section .s-slider-nav-arrow { background-color: var(--cuir-white); color: var(--cuir-burgundy-950); border: 1px solid var(--cuir-border); box-shadow: var(--cuir-shadow-sm); } .s-block--best-offers salla-products-slider .s-slider-nav-arrow:hover, #viewed-section .s-slider-nav-arrow:hover { border-color: var(--cuir-gold-400); } /* ------------------------------------------------------------ 08. PRODUCT CARDS ------------------------------------------------------------ */ .product-card { background-color: var(--product-bg); border: 1px solid var(--cuir-border); border-radius: var(--cuir-radius-md); overflow: hidden; transition: transform var(--cuir-transition), box-shadow var(--cuir-transition), border-color var(--cuir-transition); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--cuir-shadow-md); border-color: var(--cuir-border-strong); } .product-card__image { position: relative; background-color: var(--cuir-ivory-50); aspect-ratio: 1 / 1; height: auto; padding: 18px; box-sizing: border-box; overflow: hidden; } .product-card__image img.main-image { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 320ms cubic-bezier(.2, .7, .2, 1); } .product-card:hover .product-card__image img.main-image { transform: scale(1.03); } /* Neutralise broken/missing product images instead of showing the raw browser broken-image icon */ .product-card__image img[src*="placeholder.png"] { object-fit: none; opacity: .35; padding: 32px; } /* Out-of-stock badge, restyled as a compact premium pill */ .product-card__out-label { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2; background-color: var(--cuir-burgundy-900); color: var(--cuir-ivory-100); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: var(--cuir-radius-pill); box-shadow: var(--cuir-shadow-sm); } /* Hover-reveal wishlist/quick-view overlay (desktop) */ .product-card__actions { position: absolute; inset-inline-end: 12px; inset-block-start: 12px; z-index: 2; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(0); transition: opacity var(--cuir-transition); } @media (hover: hover) { .product-card:hover .product-card__actions { opacity: 1; } } @media (hover: none) { .product-card__actions { opacity: 1; } } .product-card__actions .s-button-element, .product-card__buttons .s-button-element { min-width: 40px; min-height: 40px; border-radius: var(--cuir-radius-pill); background-color: var(--cuir-white); border-color: var(--cuir-border); box-shadow: var(--cuir-shadow-sm); transition: background-color var(--cuir-transition), border-color var(--cuir-transition), transform var(--cuir-transition); } .product-card__actions .s-button-element:hover, .product-card__buttons .s-button-element:hover { background-color: var(--cuir-burgundy-900); border-color: var(--cuir-burgundy-900); color: var(--cuir-ivory-100); transform: translateY(-2px); } .product-card__actions .s-button-element:hover .sicon-heart, .product-card__buttons .s-button-element:hover .sicon-heart, .product-card__actions .s-button-element:hover .sicon-eye, .product-card__buttons .s-button-element:hover .sicon-eye { color: var(--cuir-ivory-100); } .btn--wishlist.favorited .sicon-heart, .btn--wishlist.added .sicon-heart { color: #a3212c; } /* --- Content --- */ .product-card__content { padding: 16px 16px 18px; } .product-card__price { justify-content: flex-start !important; gap: 10px !important; margin-top: 6px; } .product-card__price .total-price { color: var(--cuir-burgundy-900) !important; font-size: 18px !important; font-weight: 700 !important; } .product-card__price .before-price { color: var(--cuir-text-secondary); font-size: 13px; opacity: .85; } .product-card__price .starting-or-normal-price .total-price { color: var(--cuir-text-primary) !important; } /* --- Add to cart / enhanced mini-cart --- */ .product-card__enhanced-mini-cart { padding: 0 16px 16px; } .product-card__enhanced-mini-cart-divider { display: none; } .product-card__enhanced-mini-cart .s-button-element { min-height: 44px; border-radius: var(--cuir-radius-sm); font-weight: 600; font-size: 14px; background-color: var(--product-enhanced-btn-bg); color: var(--product-enhanced-btn-color); border-color: var(--product-enhanced-btn-bg); transition: background-color var(--cuir-transition), transform var(--cuir-transition); } .product-card__enhanced-mini-cart .s-button-element:not(.s-button-disabled):hover { background-color: var(--cuir-burgundy-950); border-color: var(--cuir-burgundy-950); transform: translateY(-2px); } .product-card__enhanced-mini-cart .s-button-element.s-button-disabled { background-color: var(--cuir-ivory-200); color: var(--cuir-text-secondary); border-color: var(--cuir-ivory-200); } /* ------------------------------------------------------------ 09. PROMOTIONAL / EDITORIAL BANNERS (images-grid) ------------------------------------------------------------ */ .s-block--images-grid a[data-selia^="home-images-grid-item"] { border-radius: var(--cuir-radius-lg) !important; box-shadow: var(--cuir-shadow-sm); transition: box-shadow var(--cuir-transition); } .s-block--images-grid a[data-selia^="home-images-grid-item"]:hover { box-shadow: var(--cuir-shadow-md); } /* Legibility scrim behind the caption only, image itself stays untouched; the theme already sets a custom per-banner text color inline, this only adds contrast behind it. */ .s-block--images-grid a[data-selia^="home-images-grid-item"] h3 { background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent 70%); width: 100%; inset-inline-start: 0; padding-block-start: 32px !important; } /* ------------------------------------------------------------ 10. BRANDS ------------------------------------------------------------ */ .s-block--brands a[data-selia="home-brands-item"] { background-color: var(--cuir-ivory-50); border: 1px solid var(--cuir-border); border-radius: var(--cuir-radius-md); padding: 20px; min-height: 88px; transition: border-color var(--cuir-transition), box-shadow var(--cuir-transition), transform var(--cuir-transition); } .s-block--brands a[data-selia="home-brands-item"]:hover { border-color: var(--cuir-gold-400); box-shadow: var(--cuir-shadow-sm); transform: translateY(-3px); } .s-block--brands a[data-selia="home-brands-item"] img { max-height: 3.5rem; width: auto; object-fit: contain; filter: grayscale(85%) opacity(.75); transition: filter var(--cuir-transition); } .s-block--brands a[data-selia="home-brands-item"]:hover img { filter: grayscale(0%) opacity(1); } /* ------------------------------------------------------------ 11. FAQ ------------------------------------------------------------ */ .single-faq { border-color: var(--cuir-border) !important; background-color: var(--cuir-white) !important; border-radius: var(--cuir-radius-md) !important; padding: 6px 20px !important; transition: border-color var(--cuir-transition), box-shadow var(--cuir-transition); } .single-faq:hover { border-color: var(--cuir-border-strong) !important; box-shadow: var(--cuir-shadow-sm); } .faq-btn { padding-block: 14px; cursor: pointer; } .faq-btn [data-selia="home-faq-question"] { font-size: 15px; font-weight: 600; color: var(--cuir-text-primary); } .faq-btn .sicon-keyboard_arrow_down { flex-shrink: 0; transition: transform var(--cuir-transition); } [data-selia="home-faq-answer"] { color: var(--cuir-text-secondary); line-height: 1.8; } /* Best-effort open-state polish: covers the common class names Salla accordions toggle. Harmless no-op if the theme uses a different name — functionality itself lives in remote theme JS and is untouched. */ .single-faq.active, .single-faq.faq-open, .single-faq[open] { border-color: var(--cuir-gold-400) !important; } .single-faq.active .faq-btn .sicon-keyboard_arrow_down, .single-faq.faq-open .faq-btn .sicon-keyboard_arrow_down { transform: rotate(180deg); } /* ------------------------------------------------------------ 12. TRUST SIGNALS (enhanced-features / mini-features) ------------------------------------------------------------ */ .s-block--enhanced-features { padding-block: clamp(32px, 5vw, 56px) !important; } .s-block--enhanced-features__item { background-color: var(--cuir-ivory-50); border: 1px solid var(--cuir-border); border-radius: var(--cuir-radius-md); padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: border-color var(--cuir-transition), transform var(--cuir-transition); } .s-block--enhanced-features__item:hover { border-color: var(--cuir-gold-400); transform: translateY(-4px); } .s-block--enhanced-features__item .feature-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; } .s-block--enhanced-features__item .feature-icon img { max-height: 40px; width: auto; object-fit: contain; } .s-block--enhanced-features__item h2 { font-size: 16px; font-weight: 700; color: var(--cuir-text-primary); margin-bottom: 6px; } .s-block--enhanced-features__item p { font-size: 13px; color: var(--cuir-text-secondary); line-height: 1.7; } /* ------------------------------------------------------------ 13. TESTIMONIALS (custom-reviews) ------------------------------------------------------------ */ .reviews-slider .review>div { background-color: var(--cuir-white) !important; border: 1px solid var(--cuir-border); border-radius: var(--cuir-radius-md); min-height: 210px; box-shadow: var(--cuir-shadow-sm) !important; } .reviews-slider .review p { font-size: 14.5px; line-height: 1.8; } .reviews-slider .review h4 { font-weight: 700; color: var(--cuir-text-primary); } .reviews-slider .comment__rating .sicon-star2 { color: var(--cuir-gold-500); } /* Quote glyph already exists in the DOM (i.sicon-quote) — just refine it */ .reviews-slider .review .sicon-quote { color: var(--cuir-gold-500); opacity: .18; font-size: 2.5rem; } .reviews-slider .swiper-scrollbar-drag { background: var(--cuir-gold-400); } /* ------------------------------------------------------------ 14. FOOTER ------------------------------------------------------------ */ .store-footer { background-color: var(--footer-bg); color: var(--footer-text-color); padding-block-start: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(255, 255, 255, .06); } .store-footer__curve { color: var(--cuir-ivory-100); } [data-selia="footer-column-title"] { color: var(--cuir-gold-400); font-weight: 700; font-size: 15px; margin-bottom: 18px; letter-spacing: .01em; } .footer-list [data-selia="footer-link"] { color: rgba(245, 234, 217, .78); transition: color var(--cuir-transition); } .footer-list [data-selia="footer-link"]:hover { color: var(--cuir-gold-300); } .footer-badges .s-trust-badges-wrapper, salla-trust-badges { background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--cuir-radius-md); padding: 10px 16px; display: inline-flex; } .store-footer__contacts-row { border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); padding-block: 24px; margin-top: clamp(24px, 4vw, 40px); } .store-footer__contacts-row a { color: var(--footer-text-color); } .store-footer__contacts-row .contact-icon { border-color: rgba(255, 255, 255, .2); border-radius: var(--cuir-radius-pill); color: var(--cuir-gold-400); } .s-social-list li a { background-color: rgba(255, 255, 255, .08); border-radius: var(--cuir-radius-pill); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--cuir-transition); } .s-social-list li a:hover { background-color: var(--cuir-gold-500); } .footer-bottom { background-color: var(--bottom-footer-bg); } .footer-bottom .footer-rights, .footer-bottom .footer-rights p { color: rgba(245, 234, 217, .6); } .s-payments-list-item { background-color: var(--cuir-white); border-radius: var(--cuir-radius-sm); padding: 4px; overflow: hidden; } /* ------------------------------------------------------------ 15. RESPONSIVE ------------------------------------------------------------ */ @media (min-width: 1440px) { :root { --cuir-container-max: 1400px; } } @media (max-width: 1199.98px) { .product-card__content { padding: 14px 14px 16px; } } @media (max-width: 991.98px) { #mainnav.main-nav-container { min-height: 64px; } .s-block--brands .grid { gap: 16px !important; } } @media (max-width: 767.98px) { .home-block-title h2 { font-size: clamp(22px, 5vw, 26px); } .product-card__image { padding: 12px; } .product-card__content { padding: 12px 12px 14px; } .product-card__price .total-price { font-size: 16px !important; } .s-block--enhanced-features .grid { gap: 12px !important; } .s-block--enhanced-features__item { padding: 20px 12px; } } @media (max-width: 575.98px) { .top-navbar .container { min-height: 36px; } .navbar-brand .logo-normal { max-height: 38px; } .s-block--circle-links .overflow-hidden.rounded-full.w-fit.mx-auto img, .s-block--circle-links img.rounded-full { width: 76px !important; height: 76px !important; } .reviews-slider .review>div { min-height: 180px; } .footer-bottom .container { flex-direction: column; gap: 12px; } } @media (max-width: 389.98px) { .product-card__title a { font-size: 13.5px; } .product-card__price .total-price { font-size: 15px !important; } } /* ------------------------------------------------------------ 16. ACCESSIBILITY ------------------------------------------------------------ */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cuir-gold-500); outline-offset: 2px; border-radius: var(--cuir-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }