/* Theme Name: Klshay Commerce Theme URI: https://aamaltechnology.com/ Author: Aamal Technology Description: A lightweight WooCommerce storefront theme. Version: 2.1.19 Requires at least: 6.5 Requires PHP: 7.4 Text Domain: klshay License: GPL-2.0-or-later */ @font-face { font-family: "Avenir Next World"; src: url("assets/fonts/avenir-next-world-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Avenir Next World"; src: url("assets/fonts/avenir-next-world-demi.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Avenir Next World"; src: url("assets/fonts/avenir-next-world-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --ink: #11130f; --lime: #d9ec11; --lime-deep: #b9d000; --canvas: #fff; --mist: #f3f4f8; --line: #e4e6ea; --muted: #9ca2ac; --red: #d82b24; --blue: #07558d; --radius-sm: 16px; --radius: 18px; --radius-lg: 26px; --shadow: 0 14px 30px rgba(15, 21, 16, .09); --content: min(1800px, calc(100% - 32px)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Avenir Next World", Avenir, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; overflow-x: hidden; } button, input { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } svg { display: block; } .sprite { height: 0; overflow: hidden; position: absolute; width: 0; } .container { margin-inline: auto; width: var(--content); } .sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } :focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 3px; } .site-header { background: var(--lime); border-bottom: 0; position: sticky; top: 0; z-index: 20; } .header-main { align-items: center; display: grid; gap: clamp(.65rem, 1.4vw, 1.7rem); grid-template-columns: 46px minmax(110px, auto) minmax(0, 1fr) auto; min-height: 76px; } .menu-button { align-items: center; background: rgba(183, 207, 0, .38); border: 0; border-radius: 50%; display: inline-flex; flex-direction: column; gap: 4px; height: 46px; justify-content: center; padding: 0; width: 46px; } .menu-button span:not(.sr-only) { background: var(--ink); border-radius: 4px; font-size: 0; height: 2px; line-height: 0; transition: transform .2s ease, opacity .2s ease; width: 20px; } .site-header.is-open .menu-button span:nth-child(2) { transform: translateY(6px) rotate(45deg); } .site-header.is-open .menu-button span:nth-child(3) { opacity: 0; } .site-header.is-open .menu-button span:nth-child(4) { transform: translateY(-6px) rotate(-45deg); } .brand { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 900; line-height: 1; text-transform: uppercase; } header form.search { align-items: center; background: transparent; border: 1px solid var(--ink); border-radius: 999px; display: flex; height: 43px; min-width: 0; overflow: visible; padding-inline-start: .9rem; position: relative; } header form.search input { background: transparent; border: 0; color: var(--ink); font-size: .82rem; height: 100%; min-width: 0; outline: 0; width: 100%; } header form.search input::placeholder { color: rgba(17,19,15,.55); } .search__input-wrap { display: block; flex: 1 1 auto; height: 100%; min-width: 0; position: relative; } .search__input-wrap input { display: block; position: relative; z-index: 1; } .search__rotating-placeholder { align-items: center; color: rgba(17,19,15,.55); display: flex; font-size: .82rem; inset: 0; overflow: hidden; pointer-events: none; position: absolute; transition: opacity .18s ease, transform .18s ease; white-space: nowrap; } .search__rotating-placeholder[hidden] { display: none; } .search__rotating-placeholder.is-leaving { opacity: 0; transform: translateY(-.85em); } .search__rotating-placeholder.is-entering { opacity: 0; transform: translateY(.85em); } @media (prefers-reduced-motion: reduce) { .search__rotating-placeholder { transition: none; } } header form.search button { align-items: center; background: var(--ink); border: 0; border-radius: 999px; color: #fff; display: inline-flex; font-size: 1.2rem; height: 35px; justify-content: center; margin-inline-end: 3px; min-width: clamp(54px, 6vw, 108px); padding: 0 .9rem; } .search-popup { background: #fff; border: 1px solid #e3e6ea; border-radius: 14px; box-shadow: 0 14px 26px rgba(15, 21, 16, .16); inset-inline-start: 50%; padding: 1.2rem 1.65rem; position: absolute; top: calc(100% + .6rem); transform: translateX(-50%); width: 100%; z-index: 70; } .search-popup[hidden] { display: none; } .search-popup h2 { font-size: .85rem; margin: 0 0 .65rem; font-weight: 400; color: var(--muted);} .search-popup__chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; } .search-popup__chips a { align-items: center; border: 1px solid #ebedf1; border-radius: 8px; color: #434950; display: inline-flex; font-size: .72rem; gap: .35rem; min-height: 38px; padding: .4rem .7rem; } .search-popup__chips a:hover { background: var(--mist); border-color: #d9dde3; color: var(--ink); } .search-popup__trend { color: var(--ink); font-size: .9rem; line-height: 1; } .search-popup__suggestion { display: inline-flex; line-height: 1; } .search-popup__suggestion svg { display: block; } .search-popup__loading { align-items: center; color: var(--muted); display: flex; font-size: .82rem; gap: .5rem; margin: .5rem 0 0; } .search-popup__loading::before { animation: klshay-search-spin .7s linear infinite; border: 2px solid #d8dce2; border-right-color: var(--ink); border-radius: 50%; content: ""; display: inline-block; height: 14px; width: 14px; } .search-popup__columns { display: grid; gap: 1rem; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .search-popup__suggestions { border-inline-end: 1px solid #e8eaee; display: grid; gap: .9rem; padding-inline-end: 1rem; } .search-popup__section h3, .search-popup__products h3 { font-size: .73rem; letter-spacing: .04em; margin: 0 0 .4rem; text-transform: uppercase; } .search-popup__section ul, .search-popup__products ul { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; } .search-popup__section a { align-items: center; border-radius: 6px; color: #434950; display: flex; font-size: .78rem; gap: .2rem; min-height: 32px; padding: .2rem .3rem; } .search-popup__products li a { align-items: center; border-radius: 8px; color: var(--ink); display: grid; gap: .65rem; grid-template-columns: 48px minmax(0, 1fr); min-height: 60px; padding: .3rem; } .search-popup__products img { aspect-ratio: 1; height: 48px; object-fit: contain; width: 48px; } .search-popup__product-text { display: grid; gap: .18rem; min-width: 0; } .search-popup__product-text strong { font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-popup__product-text small { color: #626872; font-size: .7rem; } .search-popup mark { background: var(--mist); color: inherit; font-weight: 600; padding: 0; } .search-popup [data-search-selectable].is-active, .search-popup [data-search-selectable]:hover { background: #f1f4f7; outline: 0; } .search-popup__view-all { border-top: 1px solid #e8eaee; color: var(--ink); display: block; font-size: .82rem; font-weight: 600; margin-top: .9rem; padding: .85rem .3rem 0; text-align: center; } .klshay-search-correction { background: #f5f7dc; border-radius: 8px; font-size: .88rem; margin: 0 0 1rem; padding: .65rem .75rem; } @keyframes klshay-search-spin { to { transform: rotate(360deg); } } .klshay-breadcrumb { align-items: center; color: #626872; display: flex; flex-wrap: wrap; font-size: .85rem; gap: .55rem; padding-bottom: .45rem; padding-top: 1.1rem; } .klshay-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: .16em; } .klshay-search-results { padding-top: 1.4rem; } .klshay-search-results__heading { align-items: center; margin-bottom: 1rem; } .klshay-search-results__heading h1 { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 500; margin: 0; } .klshay-search-results__heading p { color: #626872; font-size: .9rem; margin: 0; } .klshay-related-searches { align-items: center; display: flex; flex-wrap: wrap; font-size: .86rem; gap: .35rem .65rem; margin: 0 0 1.2rem; } .klshay-related-searches a { color: var(--ink); text-decoration: underline; text-underline-offset: .16em; } .klshay-active-filters { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; } .klshay-active-filters a { align-items: center; background: #eff2f4; border-radius: 999px; color: var(--ink); display: inline-flex; font-size: .78rem; gap: .4rem; padding: .38rem .65rem; } .klshay-active-filters a span { font-size: 1rem; line-height: .7; } .klshay-active-filters .klshay-active-filters__clear { background: transparent; text-decoration: underline; text-underline-offset: .16em; } .klshay-search-layout { align-items: start; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); } .klshay-search-filter-toggle { background: #fff; border: 1px solid #cfd5db; border-radius: 7px; color: var(--ink); cursor: pointer; display: none; font: inherit; font-size: .82rem; font-weight: 700; min-height: 38px; padding: .4rem .8rem; } .klshay-search-facets { background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 12px; display: grid; gap: .8rem; padding: 1rem; } .klshay-search-facets__head { align-items: baseline; display: flex; justify-content: space-between; } .klshay-search-facets__head h2 { font-size: 1.1rem; margin: 0; } .klshay-search-facets__head button { background: transparent; border: 0; color: var(--ink); cursor: pointer; display: none; font-size: 1.65rem; line-height: 1; padding: 0; } .klshay-search-facets__head a { font-size: .75rem; text-decoration: underline; } .klshay-search-facets fieldset { border: 0; border-top: 1px solid #dfe3e7; display: grid; gap: .38rem; margin: 0; padding: .8rem 0 0; } .klshay-search-facets legend { font-size: .84rem; font-weight: 700; padding: 0; } .klshay-search-facets fieldset label { align-items: center; display: grid; font-size: .82rem; gap: .45rem; grid-template-columns: 16px minmax(0, 1fr) auto; } .klshay-search-facets fieldset input[type="checkbox"], .klshay-search-facets fieldset input[type="radio"] { height: 16px; margin: 0; width: 16px; } .klshay-search-facets small { color: #6c727b; } .klshay-price-inputs { align-items: center; display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .klshay-price-inputs input { background: #fff; border: 1px solid #d8dce2; border-radius: 6px; font: inherit; min-width: 90px; padding: .45rem; width: 100%; } .klshay-search-facets > button { background: var(--ink); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-weight: 600; min-height: 40px; } .klshay-search-products { min-width: 0; } .klshay-search-toolbar { align-items: center; border-bottom: 1px solid #e3e6ea; display: flex; gap: .6rem; justify-content: flex-end; margin-bottom: 1rem; padding-bottom: .8rem; } .klshay-search-toolbar p { margin: 0 auto 0 0; font-size: .84rem; } .klshay-search-toolbar label { font-size: .78rem; font-weight: 600; } .klshay-search-toolbar select { background: #fff; border: 1px solid #d8dce2; border-radius: 6px; font: inherit; min-height: 36px; padding: .25rem .45rem; } .klshay-product-filters { align-items: end; background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 12px; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; padding: 1rem; } .klshay-product-filters__field { display: grid; gap: .35rem; } .klshay-product-filters label { font-size: .78rem; font-weight: 600; } .klshay-product-filters input, .klshay-product-filters select { background: #fff; border: 1px solid #d8dce2; border-radius: 7px; color: var(--ink); font: inherit; min-height: 40px; padding: .45rem .55rem; width: 100%; } .klshay-product-filters__actions { align-items: center; display: flex; gap: .9rem; grid-column: 1 / -1; } .klshay-product-filters__actions button { background: var(--ink); border: 1px solid var(--ink); border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-weight: 600; min-height: 40px; padding: .45rem .9rem; } .klshay-product-filters__actions a { color: var(--ink); font-size: .85rem; text-decoration: underline; text-underline-offset: .16em; } .klshay-pagination { margin: 2rem 0 .5rem; } .klshay-pagination .page-numbers { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; } .klshay-pagination a, .klshay-pagination span { align-items: center; border: 1px solid #d8dce2; border-radius: 6px; color: var(--ink); display: inline-flex; justify-content: center; min-height: 36px; min-width: 36px; padding: .25rem .5rem; } .klshay-pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; } .klshay-search-results__empty { padding: 2rem 0; } .header-actions { align-items: center; display: flex; gap: clamp(.3rem, 0.3vw, 1.45rem); } .klshay-language-switcher { align-items: center; display: flex; gap: .2rem; } .klshay-language-switcher [aria-current="true"] { background: rgba(17,19,15,.1); font-weight: 700; } .icon-link {padding: 5px 12px; align-items: center; border-radius: 8px; display: inline-flex; font-size: clamp(1rem, 1.1vw, 1rem); font-weight: 400; gap: .42rem; min-height: 46px; white-space: nowrap; } .icon-link:hover { background: #cadc08; } .icon-link__icon { font-size: 1.65rem; line-height: 1; } .location-link { border: 0; background: transparent; color: var(--ink); cursor: pointer; } .location-picker { position: relative; display: none;} .gcc-popup { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 30px rgba(15, 21, 16, .16); padding: .65rem; position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); width: 220px; z-index: 60; } .gcc-popup[hidden] { display: none; } .gcc-popup__label { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .07em; margin: .2rem .4rem .45rem; text-transform: uppercase; } .gcc-popup__countries { display: grid; gap: .15rem; list-style: none; margin: 0; padding: 0; } .gcc-popup__countries button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--ink); display: flex; font-size: .78rem; justify-content: space-between; min-height: 44px; padding: .5rem .55rem; text-align: start; width: 100%; } .gcc-popup__countries button:hover, .gcc-popup__countries button[aria-pressed="true"] { background: var(--mist); font-weight: 800; } .gcc-popup__countries button[aria-pressed="true"]::after { color: var(--lime-deep); content: "✓"; font-size: 1rem; } .flag { background: #fff; box-shadow: inset 10px 0 #7e1f4c; display: inline-block; font-size: 0; height: 15px; line-height: 0; width: 25px; } .language-icon { font-size: 1.5rem; font-weight: 700; line-height: 1; } .cart-icon, .header-wishlist .icon-link__icon { position: relative; } .cart-count, .wishlist-count { align-items: center; background: var(--ink); border-radius: 99px; color: #fff; display: inline-flex; font-size: .58rem; height: 17px; justify-content: center; min-width: 17px; position: absolute; inset-inline-end: -.5rem; top: -.5rem; } .cart-count[hidden], .wishlist-count[hidden] { display: none; } .category-nav { background: #fff; border-top: 1px solid rgba(17,19,15,.08); display: block; overflow: hidden; position: relative; } html.js .category-nav { display: none; } .category-nav__viewport { cursor: grab; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x; } .category-nav__viewport::-webkit-scrollbar { display: none; } .category-nav__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; } .category-nav__list { display: flex; list-style: none; margin: 0 auto; min-width: var(--content); padding: 0; width: max-content; } .category-nav__list li { scroll-snap-align: start; } .category-nav__list li:first-child { padding-inline-start: 50px; } .category-nav a { align-items: center; display: flex; font-size: clamp(.75rem, 1vw, .90rem); font-weight: 600; min-height: 45px; padding: .45rem clamp(.55rem, .95vw, 1.15rem); white-space: nowrap; } .category-nav a:hover { background: var(--mist); } html.js .site-header.is-open .category-nav { display: block; } .nav-arrow { align-items: center; background: #fff; border: 0; color: var(--ink); display: none; font-size: 2rem; height: 100%; justify-content: center; position: absolute; top: 0; width: 52px; z-index: 2; } .nav-arrow:disabled { opacity: 0; pointer-events: none; } .nav-arrow--previous { inset-inline-start: 0; } .nav-arrow--next { inset-inline-end: 0; } .site-header.has-mega-menu { z-index: 40; } .mega-menu { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 18px 28px rgba(15, 21, 16, .13); inset-inline-start: 0; padding: clamp(1.2rem, 2.25vw, 2.2rem) 0 1.15rem; position: absolute; top: 100%; width: 100%; z-index: 3; } .mega-menu[hidden] { display: none; } .mega-menu__inner { margin-inline: auto; width: var(--content); } .mega-menu__layout { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); grid-template-columns: minmax(0, 1fr) minmax(190px, 22%); } .mega-menu__eyebrow { color: var(--muted); font-size: .7rem; font-weight: 400; letter-spacing: .08em; margin: 0 0 .8rem; text-transform: uppercase; } .mega-menu__categories { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(4, minmax(120px, 1fr)); } .mega-menu__categories--cards { gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .mega-menu__category-card { color: var(--ink); display: grid; gap: .4rem; min-width: 0; text-align: center; text-decoration: none; } .mega-menu__category-card img { aspect-ratio: 2; background: linear-gradient(145deg, #f5f6f7, #dfe4e7); border-radius: 8px; height: auto; object-fit: cover; width: 100%; } .mega-menu__category-card span { font-size: 1rem; line-height: 1.15; overflow-wrap: anywhere; } .mega-menu__category-card:hover span { text-decoration: underline; } .mega-menu__group h3 { font-size: 1rem; line-height: 1.25; margin: 0 0 .55rem; } .mega-menu__group ul { display: grid; gap: .38rem; list-style: none; margin: 0; padding: 0; } .mega-menu__group ul li{border-bottom: solid 1px var(--line);} .mega-menu__group ul li:last-child{border-bottom:none;} .mega-menu__group a { color: #4f5661; display: inline-flex; font-size: .8rem; min-height: 22px; width: 100%;} .mega-menu__group a:hover { color: var(--ink); text-decoration: none; font-weight: 600; } .mega-menu__promo { color: var(--ink); min-height: 245px; overflow: hidden; padding:0; position: relative; aspect-ratio: 1.3; border-radius: 0 0 12px 12px;} .mega-menu__promo p { color: var(--muted); font-size: .7rem; font-weight: 400; letter-spacing: .08em; margin: 0 0 .8rem; text-transform: uppercase; } .mega-menu__promo h3 { font-size: clamp(1.15rem, 1.55vw, 1.65rem); font-weight: 900; letter-spacing: -.055em; line-height: .94; margin: .3rem 0 0; max-width: 12ch; position: relative; text-transform: uppercase; z-index: 1; } .mega-menu__promo svg { bottom: 1.25rem; height: 57%; position: absolute; right: .5rem; width: 75%; } .mega-menu__promo > .mega-menu__promo-image-link { display: block; /* inset: 0; */ position: absolute; z-index: 0; border-radius: 12px;} .mega-menu__promo > .mega-menu__promo-image-link img { height: 100%; object-fit: cover; width: 100%; border-radius: 12px;} .mega-menu__promo:has(> .mega-menu__promo-image-link img:not([hidden]))::after { background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); content: ""; inset: 0; pointer-events: none; position: absolute; } .mega-menu__brands { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; padding-top: .85rem; } .mega-menu__brands-title { align-items: center; display: inline-flex; font-size: .67rem; font-weight: 800; letter-spacing: .04em; margin-inline-end: .3rem; text-transform: uppercase; } .mega-menu__brand { align-items: center; border: 1px solid #dfe3ea; border-radius: 5px; display: inline-flex; font-size: .7rem; font-weight: 900; justify-content: center; padding: .45rem .65rem; text-transform: uppercase; } body.menu-drawer-open { overflow: hidden; } .side-menu { background: #fff; display: grid; grid-template-columns: minmax(245px, 17vw) minmax(0, 1fr); inset: 0; opacity: 0; pointer-events: none; position: fixed; transform: translateX(-100%); transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s; visibility: hidden; z-index: 100; } .side-menu[aria-hidden="false"] { opacity: 1; pointer-events: auto; transform: translateX(0); transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1); visibility: visible; max-width: 60%; } body.menu-drawer-open::before{content: ''; width: 100%; height: 100vh; position: fixed; background: rgba(4, 18, 35, .72); backdrop-filter: blur(5px); z-index: 99; } .side-menu__sidebar { background: #f6f7f8; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .side-menu__sidebar-head { align-items: center; background: #fff; display: flex; gap: 10px; min-height: 59px; padding: .75rem 1rem; } .side-menu__sidebar-head h2 { font-size: .9rem; margin: 0; } .side-menu__close { align-items: center; background: #f5f5f5; border: 0; border-radius: 50%; display: inline-flex; font-size: 1.6rem; height: 44px; justify-content: center; width: 44px; } .side-menu__close:hover { background: var(--mist); } .side-menu__categories { list-style: none; margin: 0; overflow-y: auto; padding: .45rem 0 1rem; } .side-menu__categories button, .side-menu__categories a { align-items: center; background: transparent; border: 0; border-inline-start: 3px solid transparent; color: var(--ink); display: flex; font-size: .9rem; gap: .65rem; justify-content: flex-start; min-height: 46px; padding: .6rem 1rem; text-align: start; width: 100%; } .side-menu__categories button:hover, .side-menu__categories button[aria-current="true"], .side-menu__categories a:hover, .side-menu__categories a[aria-current="true"] { background: #fff; border-inline-start-color: var(--ink); font-weight: 400; } .side-menu__category-icon { align-items: center; color: #5d6570; display: inline-flex; font-size: 1rem; justify-content: center; width: 22px; } .side-menu__content { min-height: 0; overflow-y: auto; padding: clamp(1.25rem, 2.5vw, 2.4rem); } .side-menu__content-head { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; gap: .7rem; justify-content: space-between; margin-bottom: 1.2rem; padding-bottom: .85rem; } .side-menu__content-head p { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .08em; margin: 0; text-transform: uppercase; } .side-menu__content-head h3 { font-size: 1rem; margin: 0; } .side-menu__section { border-bottom: 1px solid var(--line); padding: 0 0 1rem; } .side-menu__section + .side-menu__section { padding-top: 1.05rem; } .side-menu__section h4 { font-size: .81rem; margin: 0 0 .85rem; } .side-menu__recommendations, .side-menu__brands, .side-menu__styles { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; } .side-menu__recommendations::-webkit-scrollbar, .side-menu__brands::-webkit-scrollbar, .side-menu__styles::-webkit-scrollbar { display: none; } .side-menu__recommendations { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); overflow: visible; } .side-menu__product { display: grid; flex: 0 0 88px; gap: .35rem; text-align: center; } .side-menu__product-art { align-items: center; background: linear-gradient(145deg, #f5f6f7, #dfe4e7); border-radius: 8px; display: flex; height: 76px; justify-content: center; overflow: hidden; padding: 0; } .side-menu__product-art svg { height: 100%; max-width: 60px; width: 100%; } .side-menu__product-art img { height: 100%; object-fit: cover; width: 100%; } .side-menu__product span:last-child { font-size: .7rem; line-height: 1.1; } .side-menu__brand-card { align-items: center; border-radius: 3px; color: #fff; display: inline-flex; flex: 0 0 80px; font-size: .67rem; font-weight: 900; height: 40px; justify-content: center; letter-spacing: -.04em; padding: .35rem; text-align: center; text-transform: uppercase; } .side-menu__style { display: grid; flex: 0 0 75px; gap: .35rem; text-align: center; } .side-menu__style-art { align-items: center; background: radial-gradient(circle at 35% 25%, var(--lime) 0 12%, transparent 13%), linear-gradient(145deg, #edf0f2, #d8dee3); border-radius: 50%; display: flex; height: 58px; justify-content: center; margin-inline: auto; overflow: hidden; width: 58px; } .side-menu__style-art svg { height: 82%; width: 82%; } .side-menu__style span:last-child { font-size: .64rem; } .side-menu__links { display: grid; gap: 1.1rem 1.6rem; grid-template-columns: repeat(5, minmax(120px, 1fr)); padding: .15rem 0 .35rem; } .side-menu__link-group h4 { font-size: .75rem; line-height: 1.2; margin: 0 0 .55rem; font-weight: 600;} .side-menu__link-group ul { display: grid; gap: .42rem; list-style: none; margin: 0; padding: 0; } .side-menu__link-group a { color: #424953; font-size: .9rem; } .side-menu__link-group a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } main { /* padding-block: 1rem 0; */} .hero-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; } .hero-card, .promo-card { border-radius: var(--radius); overflow: hidden; position: relative; } .hero-card { background: #3cac48; color: #fff; min-height: 280px; } .hero-card__content { display: flex; flex-direction: column; height: 100%; justify-content: center; max-width: 55%; padding: clamp(1.2rem, 4vw, 3rem); position: relative; z-index: 2; } .hero-card__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .09em; margin: 0 0 .55rem; text-transform: uppercase; } .hero-card h1 { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 900; letter-spacing: -.07em; line-height: .89; margin: 0; text-transform: uppercase; } .hero-card__content > p:not(.hero-card__eyebrow) { font-size: .78rem; margin: .85rem 0 1.1rem; max-width: 26ch; } .hero-button, .text-button { align-items: center; border-radius: 999px; display: inline-flex; font-size: .72rem; font-weight: 800; justify-content: center; min-height: 38px; padding: .5rem .9rem; } .hero-button { background: #fff; color: var(--ink); width: fit-content; } .hero-art { bottom: -2%; height: 104%; position: absolute; right: -2%; width: 59%; } .hero-art::before { background: rgba(255,255,255,.14); border-radius: 50%; content: ""; height: 155%; left: -25%; position: absolute; top: -28%; width: 115%; } .hero-art svg { height: 100%; position: relative; width: 100%; } .promo-stack { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; } .promo-card { background: #f2f4f7; min-height: 134px; padding: 1rem; } .promo-card--blur { background: radial-gradient(circle at 20% 20%, #f1ddef 0 7%, transparent 20%), radial-gradient(circle at 80% 20%, #e8f5ec 0 8%, transparent 24%), #f6f6f7; } .promo-card--dark { background: linear-gradient(130deg, #071630, #093a65); color: #fff; } .promo-card__label { font-size: .66rem; font-weight: 900; letter-spacing: .04em; margin: 0; text-transform: uppercase; } .promo-card h2 { font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -.05em; line-height: .92; margin: .28rem 0; text-transform: uppercase; } .promo-card .mini-art { bottom: -14px; height: 105px; position: absolute; right: -7px; width: 58%; } .promo-card .mini-art svg { height: 100%; width: 100%; } .promo-card .text-button { background: var(--ink); bottom: .7rem; color: #fff; min-height: 30px; padding: .3rem .65rem; position: absolute; } .hero-slider { border-radius: var(--radius); cursor: grab; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; aspect-ratio: 2.77;} .hero-slider.is-dragging { cursor: grabbing; } .hero-slider.is-dragging .hero-slider__track { transition: none; } .hero-slider__track { display: flex; height: 100%; min-height: inherit; transition: transform .48s ease; } .hero-slide { color: #fff; flex: 0 0 100%; min-height: inherit; overflow: hidden; position: relative; } .hero-slide::after { background: rgba(255,255,255,.96); clip-path: polygon(25% 0, 100% 0, 100% 100%, 7% 100%, 34% 77%, 23% 54%, 36% 28%); content: ""; inset: 0 0 0 52%; position: absolute; } .hero-slide__content { display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 0; position: relative; z-index: 2; } .hero-slide__content a{background: #ff0;} .hero-slide__content a img{width: 100%;} .hero-slide--navy .hero-slide__content { display: block; inset: 0; position: absolute; } .hero-slider:hover .hero-slider__arrows button{ background: rgb(217 237 17); } .hero-slide--navy .hero-slide__content a { background: transparent; display: block; height: 100%; } .hero-slide--navy .hero-slide__content img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; } .hero-slide__eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .09em; margin: 0 0 .4rem; text-transform: uppercase; } .hero-slide h1 { font-size: clamp(1.8rem, 4vw, 4.1rem); font-weight: 900; letter-spacing: -.07em; line-height: .85; margin: 0; text-transform: uppercase; } .hero-slide__copy { font-size: .7rem; margin: .7rem 0 .9rem; max-width: 29ch; } .hero-slide__button { align-items: center; background: #fff; border-radius: 999px; color: var(--ink); display: inline-flex; font-size: .64rem; font-weight: 800; justify-content: center; min-height: 34px; padding: .4rem .7rem; width: fit-content; } .hero-slide__art { bottom: 7%; height: 84%; position: absolute; right: 8%; width: 36%; z-index: 1; } .hero-slide__art svg { height: 100%; width: 100%; } .hero-slider__controls { align-items: end; bottom: 1.5rem; display: flex; justify-content: space-between; left: 1.9rem; position: absolute; right: 1.9rem; z-index: 3; } .hero-slider__dots { display: flex; gap: .35rem; } .hero-slider__dots button { background: rgba(255,255,255,.58); border: 0; border-radius: 99px; height: 7px; padding: 0; transition: width .2s ease, background .2s ease; width: 7px; } .hero-slider__dots button[aria-current="true"] { background: #fff; width: 20px; } .hero-slider__arrows { display: flex; gap: .4rem; } .hero-slider__arrows button { align-items: center; background: rgba(255,255,255,.94); border: 0; border-radius: 8px; color: var(--ink); display: inline-flex; font-size: 1.4rem; height: 34px; justify-content: center; padding: 0; width: 34px; } .hero-slider__arrows button:hover { background: #fff; } .hero-side-promo { border-radius: var(--radius); color: var(--ink); display: block; /* min-height: 220px; */ overflow: hidden; padding: 0; position: relative; aspect-ratio: 0.92;} .hero-side-promo img{width: 100%; object-fit: cover; height: 100%;} .hero-side-promo p { font-size: .68rem; font-weight: 900; letter-spacing: .06em; margin: .5rem 0 0; position: relative; text-transform: uppercase; z-index: 1; } .hero-side-promo h2 { font-size: clamp(1.3rem, 2.4vw, 2.3rem); font-weight: 900; letter-spacing: -.065em; line-height: .88; margin: .25rem 0; max-width: 8ch; position: relative; text-transform: uppercase; z-index: 1; } .hero-side-promo svg { bottom: -10%; height: 70%; position: absolute; right: -7%; width: 110%; } .section { margin-top: 1.7rem; } .section-head { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .05rem; } .section-head h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin: 0; font-weight: 400;} .section-head a { font-size: 1rem; font-weight: 600; display: flex; gap: 5px;} .rail { display: grid; gap: .75rem; grid-auto-columns: minmax(146px, 1fr); grid-auto-flow: column; overflow-x: auto; overscroll-behavior-inline: contain; padding: .15rem .1rem .55rem; scrollbar-width: thin; } .mini-deal { border-radius: var(--radius-sm); overflow: hidden; position: relative; aspect-ratio: 2;} .mini-deal a img{width: 100%; height: 100%; object-fit: cover;} .mini-deal__badge { background: var(--lime); border-radius: 7px; color: var(--ink); font-size: .58rem; font-weight: 900; left: .6rem; padding: .22rem .35rem; position: absolute; top: .6rem; } .mini-deal svg { bottom: -4%; height: 88%; position: absolute; right: 5%; width: 80%; } .seasonal-carousel { position: relative; } #seasonal .rail { grid-auto-columns: calc((100% - .75rem) / 2); overflow-x: auto; padding-inline: .1rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } #seasonal .rail::-webkit-scrollbar { display: none; } #seasonal .mini-deal { scroll-snap-align: start; } .seasonal-carousel__control { align-items: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; box-shadow: 0 3px 8px rgba(15, 21, 16, .08); color: var(--ink); display: inline-flex; height: 35px; justify-content: center; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 35px; z-index: 2; } .seasonal-carousel:hover .seasonal-carousel__control { background: var(--lime); border: 1px solid #b1c20a;} .seasonal-carousel__control:hover { background: var(--lime); } .seasonal-carousel__control:disabled { opacity: 0; pointer-events: none; } .seasonal-carousel__control--previous { left: 1.15rem; } .seasonal-carousel__control--next { right: 1.15rem; } .featured-carousel { position: relative; } .featured-carousel:hover .featured-carousel__control{ background: #d9ed11;} .featured-carousel__viewport { display: flex; gap: .45rem; overflow-x: auto; overscroll-behavior-inline: contain; padding: .1rem .2rem .55rem; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .featured-carousel__viewport::-webkit-scrollbar { display: none; } .featured-carousel__card { color: var(--ink); display: flex; flex: 0 0 clamp(118px, 10.6vw, 200px); flex-direction: column; gap: .45rem; min-width: 0; position: relative; scroll-snap-align: start; text-decoration: none; } .featured-carousel__image { aspect-ratio: 3 / 4; border-radius: 12px; display: block; overflow: hidden; } .featured-carousel__card img { display: block; height: 100%; object-fit: cover; width: 100%; } .featured-carousel__title { display: -webkit-box; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .featured-carousel__control { align-items: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 8px; box-shadow: 0 3px 8px rgba(15, 21, 16, .06); color: var(--ink); display: inline-flex; font-size: 1.35rem; height: 35px; justify-content: center; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 35px; z-index: 2; transition: 0.3s;} .featured-carousel .featured-carousel__control:hover{scale: 1.2; background: var(--ink); border-color: var(--ink);} .featured-carousel__control:hover svg{fill: var(--lime);} .featured-carousel__control:disabled { opacity: 0; pointer-events: none; } .featured-carousel__control--previous { left: -.75rem; } .featured-carousel__control--next { right: -.75rem; } .promo-mosaic { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); } .mosaic-card { border-radius: var(--radius); min-height: 150px; overflow: hidden; position: relative; } .mosaic-card--orange { background: linear-gradient(135deg, #f5cc80, #e5793e); } .mosaic-card--soft { background: #e8e9eb; } .mosaic-card--blue { background: linear-gradient(125deg, #074c85, #0b76ab); } .mosaic-card--snow { background: linear-gradient(135deg, #d8e2e7, #f3f6f7); } .mosaic-card__copy { left: .85rem; position: absolute; top: .85rem; z-index: 1; } .mosaic-card__copy p { font-size: .58rem; font-weight: 900; letter-spacing: .06em; margin: 0; text-transform: uppercase; } .mosaic-card__copy h3 { font-size: clamp(.9rem, 2vw, 1.5rem); letter-spacing: -.055em; line-height: .9; margin: .18rem 0; text-transform: uppercase; } .mosaic-card__copy .text-button { background: var(--ink); color: #fff; margin-top: .45rem; min-height: 28px; padding: .25rem .55rem; } .mosaic-card svg { bottom: -10%; height: 105%; position: absolute; right: -3%; width: 61%; } .campaign-layout { display: grid; gap: .7rem; } .campaign-slider, .campaign-banner, .campaign-small { border-radius: var(--radius); overflow: hidden; position: relative; } .campaign-slider:hover .campaign-slider__controls button{background: #d9ed11;} .campaign-slider { cursor: grab; min-height: 190px; touch-action: pan-y; user-select: none; } .campaign-slider.is-dragging { cursor: grabbing; } .campaign-slider.is-dragging .campaign-slider__track { transition: none; } .campaign-slider__track { display: flex; height: 100%; min-height: inherit; transition: transform .42s ease; aspect-ratio: 1.25;} .campaign-slide { background: linear-gradient(140deg, #d8dde3, #f6f7f8); flex: 0 0 100%; min-height: inherit; overflow: hidden; position: relative; } .campaign-slide--soft { background: linear-gradient(135deg, #f5d9bd, #f3f5f6); } /* .campaign-slide::before { color: rgba(17,19,15,.16); content: "FLASH\A PLAY"; font-size: clamp(1.2rem, 2.6vw, 2.2rem); font-weight: 900; left: .7rem; line-height: .8; position: absolute; top: 36%; white-space: pre; } */ .campaign-slide img { width: 100%; object-fit: cover; height: 100%; } .campaign-slider__controls { bottom: .65rem; display: flex; gap: .35rem; position: absolute; right: .65rem; z-index: 2; } .campaign-slider__controls button, .campaign-link-icon { align-items: center; background: #fff; border: 0; border-radius: 7px; color: var(--ink); display: inline-flex; font-size: 1.2rem; height: 34px; justify-content: center; padding: 0; width: 34px; } .campaign-banner { background: radial-gradient(circle at 77% 18%, rgba(255,255,255,.8) 0 2%, transparent 2.5%), linear-gradient(145deg, #dfe3eb, #eef0f5); /* min-height: 190px; */ padding: 0; } .campaign-banner img{ width: 100%; object-fit: cover; height: 100%;} .campaign-banner p, .campaign-small p { color: rgba(17,19,15,.55); font-size: .57rem; font-weight: 900; letter-spacing: .07em; margin: 0; position: relative; text-transform: uppercase; z-index: 1; } .campaign-banner h2 { color: rgba(17,19,15,.32); font-size: clamp(1.35rem, 3vw, 3rem); font-weight: 900; letter-spacing: -.07em; line-height: .84; margin: .6rem 0 0; position: relative; text-transform: uppercase; z-index: 1; } .campaign-small { min-height: 110px; padding: 0; } .campaign-small img{width: 100%; height: 100%; object-fit: cover;} .campaign-small--sale { background: linear-gradient(145deg, #e8e9ed, #f6f6f7); } .campaign-small h3 { color: rgba(17,19,15,.42); font-size: clamp(.9rem, 1.5vw, 1.3rem); font-weight: 900; letter-spacing: -.055em; line-height: .86; margin: .35rem 0; position: relative; text-transform: uppercase; z-index: 1; } .campaign-small svg { bottom: -18%; height: 118%; position: absolute; right: -4%; width: 54%; z-index: 1; } .campaign-link-icon { position: absolute; right: .65rem; text-decoration: none; top: .65rem; transition: background .25s ease, box-shadow .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1); will-change: transform; z-index: 2; } .campaign-link-icon svg { height: 18px; position: static; transition: transform .35s cubic-bezier(.2, .8, .2, 1); width: 18px; } .campaign-banner:hover .campaign-link-icon, .hero-side-promo:hover .campaign-link-icon, .campaign-small:hover .campaign-link-icon, .campaign-banner:focus-visible .campaign-link-icon, .campaign-small:focus-visible .campaign-link-icon { animation: campaign-link-icon-lift .42s cubic-bezier(.2, .8, .2, 1) both; background: var(--lime); box-shadow: 0 7px 15px rgba(15, 21, 16, .16); } .campaign-banner:hover .campaign-link-icon svg, .hero-side-promo:hover .campaign-link-icon svg, .campaign-small:hover .campaign-link-icon svg, .campaign-banner:focus-visible .campaign-link-icon svg, .campaign-small:focus-visible .campaign-link-icon svg { transform: translate(2px, -2px); } @keyframes campaign-link-icon-lift { 0% { transform: translateY(0) scale(1); } 58% { transform: translateY(-4px) scale(1.08); } 100% { transform: translateY(0px) scale(1); } } @media (prefers-reduced-motion: reduce) { .campaign-banner:hover .campaign-link-icon, .campaign-small:hover .campaign-link-icon, .campaign-banner:focus-visible .campaign-link-icon, .campaign-small:focus-visible .campaign-link-icon { animation: none; transform: translateY(-2px); } .campaign-banner:hover .campaign-link-icon svg, .campaign-small:hover .campaign-link-icon svg, .campaign-banner:focus-visible .campaign-link-icon svg, .campaign-small:focus-visible .campaign-link-icon svg { transform: none; } } .product-rail { display: grid; gap: .75rem; grid-auto-columns: minmax(168px, 1fr); grid-auto-flow: column; overflow-x: auto; padding: .1rem .1rem .7rem; scrollbar-width: thin; } .product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: .5rem; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; overflow: hidden; position: relative; padding-bottom: 20px;} .product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .product-card__link { color: inherit; display: grid; gap: .5rem; padding: 10px;} .product-card__link figure.product-media{ aspect-ratio: 1 / 0.8; width: 100%; height: 100%; } .product-card__link figure img{width: 100%; height: 100%; object-fit: cover;} .product-card__link::after { content: ""; inset: 0; position: absolute; z-index: 1; } .product-media { align-items: center; border-radius: 16px; display: flex; height: 148px; justify-content: center; overflow: hidden; position: relative; } .product-media--white { background: #f1f2f5; margin: 0;} .product-media--blue { background: radial-gradient(circle at 50% 25%, #0b83c6, transparent 45%), #02355f; } .product-media__sale { background: var(--lime); border-radius: 50%; font-size: .56rem; font-weight: 900; height: 33px; left: .45rem; line-height: .95; position: absolute; text-align: center; top: .45rem; width: 33px; z-index: 1; line-height: 32px;} .product-media svg { height: 94%; position: relative; width: 94%; } .product-card__details { min-width: 0; } .product-card h3 { font-size: 1.2rem; font-weight: 500; height: 2.44em; line-height: 1.22; margin: 10px 0 0 0; overflow: hidden; } .product-card__title-link { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; line-clamp: 2; max-height: 2.44em; overflow: hidden; overflow-wrap: anywhere; width: 100%; } .rating { display: flex; padding: 0;} .rating span { color: var(--muted); letter-spacing: 0; margin-left: .5rem; font-size: .9rem;} .product-card__bottom { align-items: center; padding: 0 15px; position: relative; } .product-card .price { font-size: 1.3rem; font-weight: 600; white-space: nowrap; } .product-card__price-wrap { min-width: 0; } .product-card__stock-status { display: block; font-size: .75rem; font-weight: 800; margin-top: .2rem; } .product-card__stock-status--out { color: #b7221d; } .product-card .price del .woocommerce-Price-amount.amount {font-size: 12px; color: var(--muted); text-decoration: line-through;} .product-card .price del, .product-card .price ins{text-decoration:none; display: block;} .product-card .price del{ line-height: 16px;} .price small { color: var(--muted); display: block; font-size: .8rem; font-weight: 600; text-decoration: line-through; } .add-button { width: 100%; margin-top: 10px; align-items: center; gap: 10px; background: var(--ink); border: 0; border-radius: 9px; color: #fff; display: inline-flex; font-size: .85rem; font-weight: 400; justify-content: center; min-height: 35px; min-width: 35px; overflow: hidden; padding: .35rem .48rem; position: relative; transition: background .3s ease, box-shadow .3s ease, min-width .45s cubic-bezier(.2, .8, .2, 1), padding .45s cubic-bezier(.2, .8, .2, 1), transform .3s ease; white-space: nowrap; z-index: 2; } .added_to_cart.wc-forward {background: var(--lime); width: 100%; display: block; text-align: center; padding: 5px 10px; margin-top: 10px; border-radius: 9px; } .added_to_cart.wc-forward:hover {background: var(--ink); color: var(--lime);} .add-button::before { background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.46) 48%, transparent 82%); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transform: translateX(-130%); z-index: 1; } .add-button.is-added::after { color: #222; content: attr(data-added-label); font-size: .8rem; font-weight: 700; opacity: 0; position: relative; transform: translateX(12px); transition: opacity .2s ease .12s, transform .35s cubic-bezier(.2, .8, .2, 1) .12s; z-index: 2; } .add-button > svg { position: relative; transition: opacity .16s ease, transform .28s cubic-bezier(.2, .8, .2, 1); z-index: 2; } .add-button:active { transform: scale(.97); } .add-button.is-added, .product-card:hover .add-button.is-added, .product-card:focus-within .add-button.is-added { background:var(--lime); color: #fff; min-width: 132px; padding-inline: .85rem; position: absolute; inset-inline-end: 15px; transform: translateY(-2px); } .add-button.is-added::before { animation: add-to-cart-sheen .75s ease both; opacity: 1; } .add-button.is-added::after { opacity: 1; transform: translateX(0); } .add-button.is-added > svg { opacity: 0; position: absolute; transform: translateX(-15px) scale(.72); } @keyframes add-to-cart-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } } .add-button svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .product-card:hover .add-button, .product-card:focus-within .add-button { background: var(--lime); color: var(--ink); transform: translateY(-2px) scale(1.03); } .product-card:hover .add-button svg, .product-card:focus-within .add-button svg { animation: product-cart-icon-lift .42s cubic-bezier(.2, .8, .2, 1) both; fill: currentColor; } @keyframes product-cart-icon-lift { 0% { transform: translateX(0) scale(1); } 58% { transform: translateX(3px) translateY(-2px) scale(1.12); } 100% { transform: translateX(0px) translateY(-1px) scale(1); } } @media (prefers-reduced-motion: reduce) { .product-card:hover .add-button, .product-card:focus-within .add-button { transform: translateY(-2px); } .product-card:hover .add-button svg, .product-card:focus-within .add-button svg { animation: none; transform: none; } .add-button, .add-button::after, .add-button > svg { transition: none; } .add-button.is-added::before { animation: none; } } .top-deals-carousel { position: relative; } .klshay-home-products--carousel .product-rail { overflow-x: auto; padding: 10px 0px 40px 0px; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .klshay-home-products--carousel .product-rail::-webkit-scrollbar { display: none; } .klshay-home-products--carousel .product-card { scroll-snap-align: start; } .klshay-home-products--carousel .product-rail { grid-auto-columns: calc((100% - .75rem) / 2); } #top-deals .product-rail { scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } #top-deals .product-rail::-webkit-scrollbar { display: none; } #top-deals .product-card { scroll-snap-align: start; } #top-deals .product-media { aspect-ratio: 1 / 1; height: auto; margin: 0; } #top-deals .product-media img {width: 100%; height: 100%; object-fit: cover;} #top-deals .product-media.product-gallery { display: block; padding: 0; } /*#top-deals .product-media__sale, #top-deals .product-card__bottom .add-button { display: none; } */ #top-deals .product-card__bottom { justify-content: space-between; } #top-deals .product-media__wishlist, #top-deals .product-card__wishlist { align-items: center; background: rgba(255,255,255,.94); border: 1px solid rgba(17,19,15,.08); border-radius: 50%; box-shadow: 0 4px 10px rgba(15, 21, 16, .12); color: var(--ink); display: inline-flex; font-weight: 800; justify-content: center; min-height: 44px; position: absolute; z-index: 3; } #top-deals .product-media__wishlist { font-size: 1.55rem; height: 36px; padding: 0; right: .55rem; top: .55rem; width: 36px; border-radius: 52px; background: rgb(255 255 255 / 67%);} #top-deals .product-media__wishlist svg { height: 18px; position: static; width: 18px; } #top-deals .product-media__wishlist[aria-pressed="true"] { background: #ffe7e8; color: #c81925; } #top-deals .product-card__wishlist { height: 44px; padding: 0; right: 1.05rem; top: 1.05rem; width: 44px; } #top-deals .product-card__wishlist svg { height: 21px; width: 21px; } #top-deals .product-card__wishlist[aria-pressed="true"] { background: var(--lime); color:var(--ink); } #top-deals .product-card__wishlist:hover, #top-deals .product-media__wishlist:hover { background: #fff; transform: translateY(-1px); } #top-deals .product-card--gallery .product-card__media { padding: 0; position: relative; } #top-deals .product-card--gallery .product-card__image-link { color: inherit; display: block; } #top-deals .product-card--gallery .product-media { display: block; } #top-deals .product-card--gallery .product-gallery { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; transform: translateX(0); transition: transform .35s ease; will-change: transform; } #top-deals .product-card--gallery .product-gallery__item { flex: 0 0 100%; height: 100%; } #top-deals .product-card--gallery .product-gallery__item img { display: block; height: 100%; object-fit: cover; width: 100%; } #top-deals .product-card--gallery .product-card__details { padding: 0 15px; } #top-deals .product-card--gallery h3 { margin: 0; } #top-deals .product-card--gallery .product-card__title-link { color: inherit; } .product-gallery__track { display: flex; height: 100%; transition: transform .35s ease; width: 100%; } .product-gallery__slide { align-items: center; display: flex; flex: 0 0 100%; height: 100%; justify-content: center; overflow: hidden; } .product-gallery__slide svg { height: 94%; position: relative; transition: transform .35s ease; width: 94%; } .product-gallery__slide img { display: block; height: 100%; object-fit: cover; width: 100%; } .product-gallery__slide:nth-child(2) svg { transform: scale(.9) translateX(-8%); } .product-gallery__slide:nth-child(3) svg { transform: scale(1.03) translateY(-3%); } .product-gallery__slide:nth-child(4) svg { transform: scale(.92) translateX(9%); } .product-gallery__slide:nth-child(5) svg { transform: scale(1.05) translateY(2%); } #top-deals .product-gallery__dots { bottom: .75rem; display: flex; gap: .25rem; left: 50%; opacity: 0; pointer-events: none; position: absolute; transform: translateX(-50%); transition: opacity .2s ease; z-index: 3; } #top-deals .product-card:hover .product-gallery__dots, #top-deals .product-card:focus-within .product-gallery__dots { opacity: 1; } #top-deals .product-gallery__dot { background: rgba(255,255,255,.72); border-radius: 50%; height: 5px; width: 5px; } #top-deals .product-gallery__dot.is-active { background: #fff; box-shadow: 0 1px 4px rgba(15, 21, 16, .38); width: 15px; border-radius: 99px; } #top-deals .product-card--gallery .product-gallery__dots { bottom: -.45rem; gap: 0; pointer-events: auto; } #top-deals .product-card--gallery .product-gallery__dots button { align-items: center; background: transparent; border: 0; display: inline-flex; height: 44px; justify-content: center; min-height: 44px; min-width: 24px; padding: 0; width: 24px; } #top-deals .product-card--gallery .product-gallery__dots button::after { background: rgba(255,255,255,.72); border-radius: 50px; content: ""; height: 5px; transition: width .2s ease, background .2s ease; width: 5px; } #top-deals .product-card--gallery .product-gallery__dots button[aria-current="true"]::after { background: #fff; box-shadow: 0 1px 4px rgba(15, 21, 16, .38); width: 15px; } .product-card--gallery .product-card__media { min-width: 0; padding: 0; position: relative; } .product-card--gallery .product-card__image-link { color: inherit; display: block; min-width: 0; } .product-card--gallery .product-media { aspect-ratio: 1 / 1; contain: paint; display: block; height: auto; isolation: isolate; margin: 0; overflow: hidden; position: relative; } .product-card--gallery .product-gallery { height: 100%; inset: 0; list-style: none; margin: 0; overflow: hidden; padding: 0; position: absolute; transform: none; width: 100%; } .product-card--gallery .product-gallery__item { height: 100%; inset: 0; min-width: 0; opacity: 0; overflow: hidden; position: absolute; transition: opacity .24s ease; visibility: hidden; width: 100%; } .product-card--gallery .product-gallery__item.is-active { opacity: 1; visibility: visible; z-index: 1; } .product-card--gallery .product-gallery__item img { display: block; height: 100%; object-fit: cover; width: 100%; } .product-card--gallery .product-card__details { padding: 0 15px; } .product-card--gallery h3 { margin: 0; } .product-card--gallery .product-card__title-link { color: inherit; } .product-gallery__dots { bottom: .75rem; display: flex; gap: .25rem; left: 50%; opacity: 0; pointer-events: none; position: absolute; transform: translateX(-50%); transition: opacity .2s ease; z-index: 3; } .product-card:hover .product-gallery__dots, .klshay-home-products .product-card:focus-within .product-gallery__dots { opacity: 1; } .product-card--gallery .product-gallery__dots { bottom: -.45rem; gap: 0; pointer-events: auto; } .product-card--gallery .product-gallery__dots button { align-items: center; background: transparent; border: 0; display: inline-flex; height: 44px; justify-content: center; min-height: 44px; min-width: 24px; padding: 0; width: 24px; } .product-card--gallery .product-gallery__dots button::after { background: rgba(255,255,255,.72); border-radius: 50px; content: ""; height: 5px; transition: width .2s ease, background .2s ease; width: 5px; } .product-card--gallery .product-gallery__dots button[aria-current="true"]::after { background: #fff; box-shadow: 0 1px 4px rgba(15, 21, 16, .38); width: 15px; } .product-card__wishlist { align-items: center; background: rgba(255,255,255,.94); border: 1px solid rgba(17,19,15,.08); border-radius: 50px; box-shadow: 0 4px 10px rgba(15,21,16,.12); color: var(--ink); display: inline-flex; font-weight: 800; height: 34px; justify-content: center; min-height: 34px; padding: 0; position: absolute; right: .5rem; top: .5rem; width: 34px; z-index: 3; } .product-card__wishlist[aria-pressed="true"] { background: var(--lime); color:var(--ink); } .product-card__wishlist:hover { background: #fff; transform: translateY(-1px); } .top-deals-carousel__control { align-items: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 8px; box-shadow: 0 3px 8px rgba(15, 21, 16, .06); color: var(--ink); display: inline-flex; font-size: 1.35rem; height: 35px; justify-content: center; padding: 0; position: absolute; top: 42%; transform: translateY(-50%); width: 35px; z-index: 3; transition: 0.3s;} .top-deals-carousel:hover .top-deals-carousel__control {background: #d9ed11;} .top-deals-carousel__control:hover{scale:1.2} .top-deals-carousel__control:disabled { opacity: 0; pointer-events: none; } .top-deals-carousel__control--previous { left: -.75rem; } .top-deals-carousel__control--next { right: -.75rem; } #top-deals .product-rail { grid-auto-columns: calc((100% - .75rem) / 2); overflow-x: auto; padding: 20px 0 30px 0;} .woocommerce h2#category-subcategories-heading {text-align: start; font-weight: 400;} .woocommerce .woocommerce-form-login .woocommerce-form-login__submit{width: 100%;} .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{display: flex; width: 100%; align-items: center; gap: 10px;} .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox { width: 20px;} .deal-panel { background: var(--mist); border-radius: var(--radius); padding: 3rem 1.6rem; } .deal-panel .section-head { justify-content: center; margin-bottom: .75rem; } .deal-panel .section-head h2 { font-size: 1.95rem; font-weight: 400;} .product-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-grid .product-card { min-height: 100%; } .product-grid .product-media { /* min-height: 240px; */ } .app-badge img { max-height: 35px; } .wide-banner { min-height: 185px; overflow: hidden; position: relative;padding-bottom: 40px; } .wide-banner:not([data-wide-banner-slider]) { align-items: center; background: #42ad48; color: #fff; display: grid; padding: 1.25rem; } .wide-banner:not([data-wide-banner-slider])::after { background: rgba(255,255,255,.12); border-radius: 50%; content: ""; height: 210%; position: absolute; right: 7%; top: -55%; width: 40%; } .wide-banner:not([data-wide-banner-slider]) .wide-banner__content { max-width: 48%; position: relative; z-index: 1; } .wide-banner:not([data-wide-banner-slider]) p { font-size: .66rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .45rem; text-transform: uppercase; } .wide-banner:not([data-wide-banner-slider]) h2 { font-size: clamp(1.8rem, 4vw, 3.8rem); letter-spacing: -.075em; line-height: .88; margin: 0; text-transform: uppercase; } .wide-banner:not([data-wide-banner-slider]) > svg { bottom: -11%; height: 120%; position: absolute; right: 2%; width: 46%; z-index: 1; } .wide-banner[data-wide-banner-slider] { color: #fff; cursor: grab; min-height: clamp(185px, 17vw, 300px); touch-action: pan-y; user-select: none; } .wide-banner[data-wide-banner-slider].is-dragging { cursor: grabbing; } .wide-banner[data-wide-banner-slider].is-dragging .wide-banner__track { transition: none; } .wide-banner__track { display: flex; gap: .75rem; height: 100%; min-height: inherit; transition: transform .45s ease; } .wide-banner__slide { align-items: stretch; display: grid; flex: 0 0 100%; grid-template-columns: minmax(0, 100%) ; min-height: inherit; overflow: hidden; position: relative; } .wide-banner__slide--green { background: linear-gradient(90deg, #4caf45 0 54%, #f2f3f1 54%); } .wide-banner__slide--blue { background: linear-gradient(90deg, #07558d 0 54%, #eef3f7 54%); } .wide-banner__slide--violet { background: linear-gradient(90deg, #6751a5 0 54%, #f4f1f8 54%); } .wide-banner__slide--orange { background: linear-gradient(90deg, #d97336 0 54%, #f5f0eb 54%); } .wide-banner__slide--teal { background: linear-gradient(90deg, #138f85 0 54%, #edf4f2 54%); } .wide-banner__content { align-self: center; padding: 0; position: relative; width: 100%; z-index: 1; } .wide-banner__content .wide-banner__link img{width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm);} .wide-banner__eyebrow { font-size: clamp(.54rem, .85vw, .75rem); font-weight: 800; letter-spacing: .11em; margin: 0 0 .36rem; opacity: .83; text-transform: uppercase; } .wide-banner__content h2 { font-size: clamp(1.65rem, 3.9vw, 4rem); font-weight: 500; letter-spacing: -.075em; line-height: .78; margin: 0; text-transform: uppercase; } .wide-banner__content h2 strong { display: block; font-size: 1.08em; font-weight: 900; } .wide-banner__copy { font-size: clamp(.6rem, .9vw, .82rem); line-height: 1.4; margin: .75rem auto 0; max-width: 31ch; opacity: .78; } .wide-banner__link { display: inline-flex; gap: .35rem; position: relative; z-index: 1; } .wide-banner__art { align-self: stretch; grid-column: 2; overflow: hidden; position: relative; z-index: 1; } .wide-banner__art-label { color: rgba(17,19,15,.56); font-size: clamp(.45rem, .65vw, .63rem); font-weight: 800; left: 21%; letter-spacing: .06em; line-height: 1.25; position: absolute; text-align: center; text-transform: uppercase; top: 16%; z-index: 1; } .wide-banner__art svg { bottom: -11%; height: 118%; left: 42%; position: absolute; width: 45%; } .wide-banner__control { align-items: center; background: rgba(255,255,255,.95); border: 1px solid rgba(17,19,15,.1); border-radius: 12px; box-shadow: 0 3px 9px rgba(15, 21, 16, .08); color: var(--ink); display: inline-flex; height: 34px; justify-content: center; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; z-index: 3; } .section.container.wide-banner:hover .wide-banner__control{background: rgb(217 237 17); border: 1px solid rgb(177 194 9);} .wide-banner__control:hover { background: #fff; transform: translateY(-50%) scale(1.06); } .wide-banner__control--previous { left: 1rem; } .wide-banner__control--next { right: 1rem; } .wide-banner__pagination { bottom: -.05rem; display: flex; gap: 0; left: 50%; position: absolute; transform: translateX(-50%); z-index: 3; } .wide-banner__pagination button { align-items: center; background: transparent; border: 0; display: inline-flex; height: 44px; justify-content: center; min-height: 44px; min-width: 30px; padding: 0; width: 30px; } .wide-banner__pagination button::after { background:rgb(198 200 210); border-radius: 999px; content: ""; height: 9px; transition: width .2s ease, background .2s ease; width: 9px; } .wide-banner__pagination button[aria-current="true"]::after { background: #747474; width: 36px; } .mobile-search-nav__item{/* position: absolute; left: 45%; top: -20px; */ background: var(--lime); border-radius: 50px; border: navajowhite; width: 55px; height: 55px; min-width: 55px; border: solid 5px #d2e50b;} .mobile-search-nav__item svg{margin: auto;} article.klshay-cart-item > p{display: none;} .hero-slider .hero-slider__arrows button:hover{ background: var(--ink);} .hero-slider__arrows button:hover svg {fill:var(--lime);} .campaign-slider .campaign-slider__controls button:hover{background: var(--ink);} .campaign-slider .campaign-slider__controls button:hover svg {fill:var(--lime);} .section.container.wide-banner .wide-banner__control:hover{background: var(--ink); border-color: var(--ink);} .section.container.wide-banner .wide-banner__control:hover svg {fill:var(--lime);} img.logo.site-logo{max-width: 130px;} .woocommerce .col2-set::after, .woocommerce .col2-set::before, .woocommerce-page .col2-set::after, .woocommerce-page .col2-set::before {display: none;} .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {width: 100%;} .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {width: 100%;} .category-panel { background: var(--mist); border-radius: var(--radius); padding: .9rem; padding: 3rem 1.6rem;} .category-panel .section-head { justify-content: center; } .category-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); } .category-grid .category-card img{width: 100%; border-radius: 10px; height: 100%; object-fit: cover;} .category-card { border-radius: var(--radius-sm); color: var(--ink); overflow: hidden; position: relative; aspect-ratio: 1;} .category-card svg { height: 100%; inset: 0; position: absolute; width: 100%; } .category-card span { background: rgba(255,255,255,.94); border-radius: 9px; bottom: 1.4rem; font-size: 1.3rem; font-weight: 400; left: 0; padding: .52rem 1rem; position: absolute; width: 90%; margin: 0 5%; line-height: 26px;} .category-card:hover span { background: var(--lime); } .about { background: #fff; border: 1px solid #e1e5ed; border-radius: var(--radius); overflow: hidden; padding: 0; } .about__heading { margin: 0; } .about__trigger { align-items: center; background: #f5f6fa; border: 0; border-bottom: 1px solid #e1e5ed; color: var(--ink); display: flex; font: inherit; font-size: clamp(.5rem, 3vw, 1rem); font-weight: 600; gap: 1rem; justify-content: space-between; padding: clamp(0.5rem, 2vw, 0.8rem) clamp(1rem, 2.6vw, 1.5rem); text-align: left; width: 100%; } .about__trigger svg { flex: 0 0 24px; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .about__trigger[aria-expanded="false"] svg { transform: rotate(90deg); } .about__content { display: grid; grid-template-rows: 1fr; opacity: 1; padding: clamp(1.35rem, 2.6vw, 2.7rem) clamp(1rem, 2.6vw, 3.25rem) clamp(1.5rem, 3vw, 3.3rem); transition: grid-template-rows .48s cubic-bezier(.2,.8,.2,1), opacity .3s ease, padding-block .48s cubic-bezier(.2,.8,.2,1); } .about__content[hidden] { display: none; } .about__content.is-collapsed { grid-template-rows: 0fr; opacity: 0; padding-block: 0; } .about__content-inner { min-height: 0; overflow: hidden; } .about__content p { color: #24272c; font-size: clamp(.86rem, 1.35vw, 1rem); font-weight: 500; line-height: 1.45; margin: 0; max-width: 150ch; } .about__content p + p { margin-top: clamp(1rem, 2vw, 1.8rem); } @media (prefers-reduced-motion: reduce) { .about__content, .about__trigger svg { transition: none; } } .support-strip { align-items: center; background: var(--mist); display: flex; gap: 1rem; justify-content: space-between; margin-top: 1.7rem; padding: 1.25rem max(16px, calc((100vw - 1800px) / 2)); } .support-strip h2 { font-size: 1.5rem; margin: 0; font-weight: 400;} .support-strip p { color: var(--muted); font-size: .9rem; margin: .15rem 0 0; } .socials { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .35rem; } .socials a { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; box-sizing: border-box; color: var(--ink); display: inline-flex; flex: 0 0 45px; font-size: .65rem; font-weight: 900; height: 45px; justify-content: center; padding: 10px; width: 45px; } .socials svg { display: block; fill: currentColor; flex: 0 0 20px; height: 20px; width: 20px; } .site-footer { background: #fff; padding: 2rem 0 .7rem; } .popular-searches { text-align: center; } .popular-searches h2 { font-size: 1.6rem; margin: 0 0 .75rem; font-weight: 400;} .keyword-list { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; list-style: none; margin: 0; padding: 0; } .keyword-list a { border: 1px solid var(--line); border-radius:10px; color:var(--ink); display: block; font-size: .72rem; padding: .35rem .8rem; line-height: 16px; } .keyword-list a:hover{border-color:var(--ink) ;} .footer-columns { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; } .footer-column h3 { font-size: 1rem; margin: 0 0 .65rem; font-weight: 400;} .footer-column a { color: var(--muted); display: block; font-size: .83rem; margin: .33rem 0; } .footer-column a:hover{color: var(--ink);} .app-row { align-items: center; display: none; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.8rem; padding-top: 1rem; } .app-row p { font-size: .9rem; font-weight: 600; margin: 0; } .app-badge { align-items: center; display: inline-flex; font-size: .6rem; font-weight: 700; min-height: 27px; padding: .25rem .5rem; } .copyright { border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: .9rem; gap: .5rem 1rem; justify-content: space-between; margin-top: 1.4rem; padding-top: .75rem; } .copyright .footer-bottom-link{list-style: none; display: flex; flex-wrap: wrap; gap: 30px; margin: 0;} .copyright .footer-bottom-link li a:hover{color: var(--ink);} .toast { background: var(--ink); border-radius: 12px; bottom: 1rem; box-shadow: var(--shadow); color: #fff; font-size: .82rem; left: 50%; opacity: 0; padding: .75rem 1rem; pointer-events: none; position: fixed; transform: translate(-50%, 1rem); transition: .2s ease; visibility: hidden; z-index: 100; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); visibility: visible; } .klshay-wishlist-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 200; } .klshay-wishlist-modal[hidden] { display: none; } .klshay-wishlist-modal__backdrop { background: rgba(17,19,15,.54); inset: 0; position: absolute; } .klshay-wishlist-modal__content { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 430px; padding: 2rem; position: relative; width: 100%; z-index: 1; } .klshay-wishlist-modal__content h2 { font-size: 1.4rem; margin: 0 2rem .6rem 0; } .klshay-wishlist-modal__content p { color: #4f5661; margin: 0; } .klshay-wishlist-modal__close { align-items: center; background: var(--mist); border: 0; border-radius: 50%; display: inline-flex; font-size: 1.5rem; height: 36px; justify-content: center; position: absolute; right: 1rem; top: 1rem; width: 36px; } .klshay-wishlist-modal__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; } .klshay-wishlist-page__button { align-items: center; background: var(--ink); border-radius: 8px; color: #fff; display: inline-flex; font-weight: 700; justify-content: center; min-height: 42px; padding: .55rem .9rem; } .klshay-wishlist-page__button:hover { background: var(--lime-deep); color: var(--ink); } .klshay-wishlist-page__button--secondary { background: var(--mist); color: var(--ink); } .mobile-bottom-nav { display: none; } .mobile-search-modal[hidden] { display: none; } .mobile-search-modal { inset: 0; position: fixed; z-index: 160; } .mobile-search-modal__backdrop { background: rgba(17,19,15,.42); inset: 0; position: absolute; } .mobile-search-modal__content { background: #fff; inset: 0; overflow: auto; padding: 1rem; position: absolute; } .mobile-search-modal__head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; } .mobile-search-modal__head h2 { font-size: 1.2rem; margin: 0; } .mobile-search-modal__head button { align-items: center; background: var(--mist); border: 0; border-radius: 50%; color: var(--ink); display: inline-flex; font-size: 1.6rem; height: 38px; justify-content: center; line-height: 1; padding: 0; width: 38px; } .mobile-search-modal__form { align-items: center; border: 1px solid var(--ink); border-radius: 999px; display: flex; min-height: 46px; padding-left: .9rem; position: relative; } .mobile-search-modal__form input { background: transparent; border: 0; color: var(--ink); font-size: .92rem; min-width: 0; outline: 0; width: 100%; } .mobile-search-modal__form > button { align-items: center; background: var(--ink); border: 0; border-radius: 999px; display: inline-flex; height: 38px; justify-content: center; margin-right: 3px; min-width: 48px; padding: 0 .65rem; } .mobile-search-modal .search-popup { box-shadow: none; left: 0; padding: 1.1rem 0; position: absolute; top: calc(100% + .7rem); transform: none; width: 100%; } body.has-mobile-search-open { overflow: hidden; } body.has-search-filters-open { overflow: hidden; } .campaign-layout .campaign-link-icon svg{bottom: auto; right: auto; width: 18px;} .campaign-layout.one-col a{padding: 0; background: none; border-radius: unset; aspect-ratio: 4.2; width: 100%;} .campaign-layout.one-col a img{ width: 100%; border-radius:var(--radius-sm);} .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{ position: initial;} @media (min-width: 680px) { .header-main { grid-template-columns: 54px minmax(120px, auto) minmax(260px, 1fr) auto; min-height: 76px; } .menu-button { display: inline-flex; height: 54px; width: 54px; } header form.search { height: 43px; } .category-nav, html.js .category-nav { display: block; } html.js .nav-arrow { display: flex; } .category-nav__list { padding-inline: 52px; } .mega-menu__categories { grid-template-columns: repeat(4, minmax(120px, 1fr)); } .campaign-layout { grid-template-columns: minmax(170px, .72fr) minmax(300px, 1.45fr) minmax(170px, .75fr); grid-template-rows: repeat(2, minmax(0, 1fr)); } .campaign-layout.one-col{display: block;} .campaign-layout.one-col a{display: block; width: 100%;} .campaign-slider { grid-column: 1; grid-row: span 2; min-height: 0; } .campaign-banner { grid-column: 2; grid-row: span 2; min-height: 0; aspect-ratio: 2.48;} .campaign-small { grid-column: 3; min-height: 0; aspect-ratio: 2.7;} #top-deals .product-rail { grid-auto-columns: calc((100% - 2.25rem) / 4); } .klshay-home-products--carousel .product-rail { grid-auto-columns: calc((100% - 2.25rem) / 4); } .hero-grid { grid-template-columns: minmax(0, 3fr) minmax(210px, 1fr); } .hero-slider, .hero-side-promo { /* min-height: 300px; */} .promo-stack { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .hero-card { min-height: 300px; } .promo-mosaic { grid-template-columns: 1.1fr 1.45fr 1.1fr; grid-template-rows: repeat(2, 156px); } .mosaic-card:first-child { grid-row: span 2; } .mosaic-card:last-child { grid-column: 3; grid-row: span 2; } .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .klshay-product-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .klshay-search-layout { grid-template-columns: minmax(200px, 245px) minmax(0, 1fr); } .category-grid { grid-template-columns: repeat(4, 1fr); } .footer-columns { grid-template-columns: repeat(5, 1fr); } #seasonal .rail { grid-auto-columns: calc((100% - 2.25rem) / 4); } } @media (min-width: 1250px) { .mega-menu__categories { grid-template-columns: repeat(5, minmax(120px, 1fr)); } } @media (min-width: 980px) { main { /* padding-top: 1.2rem; */} .hero-card { min-height: 345px; } .hero-slider, .hero-side-promo { /* min-height: 445px; */} .promo-card { min-height: 163px; } .rail { grid-auto-columns: minmax(134px, 1fr); overflow: visible; } .product-rail { grid-auto-columns: minmax(162px, 1fr); overflow: visible; } .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .klshay-product-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); } .klshay-product-filters__actions { grid-column: auto; } .category-card { min-height: 178px; } .promo-mosaic { grid-template-rows: repeat(2, 174px); } #top-deals .product-rail { grid-auto-columns: calc((100% - 3rem) / 5); overflow-x: auto; } .klshay-home-products--carousel .product-rail { grid-auto-columns: calc((100% - 3rem) / 5); } .wide-banner__slide { flex-basis: calc((100% - .75rem) / 2); } } @media (min-width: 1200px) { #top-deals .product-rail { grid-auto-columns: calc((100% - 3.75rem) / 6); } .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .klshay-home-products--carousel .product-rail { grid-auto-columns: calc((100% - 3.75rem) / 6); } .klshay-category-subcategories__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1400px) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .klshay-product-recommendations .product-grid {grid-template-columns: repeat(8, minmax(0, 1fr));} .klshay-home-products.klshay-home-products--grid .product-grid{grid-template-columns: repeat(6, minmax(0, 1fr));}} @media (max-width: 1124px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }} @media (min-width: 1024px) { #seasonal .rail { grid-auto-columns: calc((100% - 3.75rem) / 6); } } @media (max-width: 980px) {.header-icon-label{display: none;}} @media (max-width: 767px) { .product-card .price{ font-weight: 400; font-size: 1.2rem;} .side-menu[aria-hidden="false"]{max-width: 90%;} .klshay-wishlist-view, .header-user-account {display: none;} img.logo.site-logo { max-width: 110px;} .featured-carousel__title{font-size: .8rem;} .category-card span{bottom: 0.8rem; font-size: 0.9rem;} .category-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 679px) { .category-card span{font-size: .8rem; font-weight: 600;} .category-panel{padding: 3rem 1rem;} .header-main { grid-template-columns: 42px 1fr auto; min-height: 64px; } .menu-button { height: 42px; width: 42px; } .hero-grid{margin-top: 15px;} .brand { font-size: 1.4rem; } .hero-slider {aspect-ratio: 1.6;} header form.search { display: none; } header .search-popup { display: none !important; } .mobile-search-modal .search-popup:not([hidden]) { display: block !important; } .klshay-search-filter-toggle { display: inline-flex; justify-content: center; width: max-content; } .klshay-search-facets { border-radius: 0; bottom: 0; display: none; left: 0; overflow: auto; position: fixed; right: 0; top: 0; z-index: 160; } .klshay-search-facets.is-open { display: grid; } .klshay-search-facets__head { align-items: center; } .klshay-search-facets__head button { display: inline-flex; margin-left: auto; } .header-actions .icon-link:not(:last-child) { display: none; } .header-actions .klshay-language-switcher .icon-link { display: inline-flex; } .header-actions .icon-link:last-child span:last-child { /* display: none; */} .mega-menu { display: none !important; } .side-menu { grid-template-columns: minmax(200px, 17vw) minmax(0, 1fr); } .side-menu .side-menu__category-icon{display: none;} .side-menu__sidebar { max-height: 100vh; overflow-y: auto;} .side-menu__links { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .side-menu__content { padding: 0.6rem; } .hero-side-promo{display: none;} .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-strip { align-items: flex-start; flex-direction: column; } .socials { width: 100%; } .side-menu[aria-hidden="false"]{max-width: 100%;} .deal-panel {padding: 1rem 0rem; width: 100%; border-radius: 0;} .deal-panel .section-head h2{font-size: 1.5rem;} .side-menu__recommendations {grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));} } @media (max-width: 480px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .side-menu { grid-template-columns: minmax(150px, 17vw) minmax(0, 1fr); } .side-menu__close{width: 30px; height: 30px;} .side-menu__links { grid-template-columns: repeat(1, minmax(120px, 1fr)); } img.logo.site-logo{max-width: 120px;} .product-card h3{font-size: 1rem;} .wide-banner__control{top: 80%;} .wide-banner__pagination{bottom: 10%;} .product-card__bottom{display: grid; grid-template-columns: 1fr;} .product-card__bottom .card-add-to-card .add-button {width: 100%; gap: 10px;} .product-card__bottom .card-add-to-card .add-button span {font-size: 12px; font-weight: 600; gap: 10px;} .product-card__bottom .card-add-to-card .added_to_cart.wc-forward{background: var(--lime); color: #111; border-radius: 9px; display: block; margin-top: 20px; text-align: center; width: 100%; font-weight: 600; line-height: 32px;} .category-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } .mobile-bottom-nav { align-items: stretch; background: #fff; border: 1px solid var(--line); bottom: 0; display: flex; /* height: calc(68px + env(safe-area-inset-bottom)); */ left: 0; padding-bottom: env(safe-area-inset-bottom); position: fixed; right: 0; z-index: 90; margin: 10px 16px; border-radius: 30px;} .mobile-bottom-nav__item { align-items: center; background: transparent; border: 0; color: #111111; display: flex; flex: 1 1 25%; flex-direction: column; font-family: inherit; font-size: .74rem; font-weight: 600; gap: .15rem; justify-content: center; min-height: 44px; padding: .35rem .25rem; text-decoration: none; } .mobile-bottom-nav__item svg { height: 26px; width: 26px; } .mobile-bottom-nav__item.is-active, .mobile-bottom-nav__item[aria-expanded="true"] { color: var(--ink); } .search-popup__columns{grid-template-columns: minmax(0, 1fr);} .mobile-search-modal .search-popup{padding: 1.2rem;} .search-popup__suggestions{padding-right: 0; border-right: none;} } /* One responsive, category-aware WooCommerce product listing page. */ .klshay-category-page { padding-bottom: 2rem; } .klshay-category-hero { align-items: center; background: #f5f7f8; border: 1px solid #e4e8eb; border-radius: 14px; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-top: .8rem; overflow: hidden; padding: clamp(1.1rem, 3vw, 2rem); } .klshay-category-hero h1 { font-size: clamp(1.45rem, 3vw, 2.35rem); margin: 0 0 .5rem; font-weight: 400;} .klshay-category-hero p { color: #626872; font-size: .88rem; margin: .6rem 0 0; } .klshay-category-hero__description > :first-child { margin-top: 0; } .klshay-category-hero__description > :last-child { margin-bottom: 0; } .klshay-category-hero__description { color: #4f5660; font-size: .92rem; line-height: 1.55; max-width: 70ch; } .klshay-category-hero__banner { border-radius: 10px; max-height: 200px; object-fit: cover; width: 100%; } .klshay-category-subcategories { padding-bottom: 0; } .klshay-category-subcategories h2 { font-size: 1rem; margin: 0 0 .75rem; } .klshay-category-subcategories__grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .klshay-category-subcategories__grid a { align-items: center; background: #fff; border: 1px solid #e1e5e9; border-radius: 9px; color: var(--ink); display: grid; gap: .45rem; grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 58px; padding: .45rem .6rem; } .klshay-category-subcategories__grid img { aspect-ratio: 1; height: 42px; object-fit: contain; width: 42px; } .klshay-category-subcategories__grid span { font-size: .9rem; font-weight: 400; } .klshay-category-subcategories__grid small { color: #6b727c; font-size: .72rem; } .klshay-category-listing { padding-top: 1.4rem; } .klshay-category-layout { align-items: start; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); } .klshay-category-toolbar { align-items: center; border-bottom: 1px solid #e3e6ea; display: flex; gap: .6rem; grid-column: 1 / -1; margin-bottom: -.25rem; padding-bottom: .8rem; } .klshay-category-toolbar p { font-size: .84rem; margin: 0 auto 0 0; } .klshay-category-toolbar label { font-size: .78rem; font-weight: 600; } .klshay-category-toolbar select { background: #fff; border: 1px solid #d8dce2; border-radius: 6px; font: inherit; min-height: 36px; padding: .25rem .45rem; } .klshay-category-filter-toggle { background: #fff; border: 1px solid #cfd5db; border-radius: 7px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-size: .8rem; font-weight: 600; min-height: 36px; padding: .25rem .65rem; } .klshay-category-facets { position: relative; } .klshay-category-facets [data-plp-close-filters] { background: transparent; border: 0; color: var(--ink); cursor: pointer; display: none; font-size: 1.6rem; line-height: 1; padding: 0; } .klshay-category-products { min-width: 0; } .klshay-category-layout.is-loading .klshay-category-products { opacity: .56; pointer-events: none; transition: opacity .15s ease; } .klshay-category-pagination { margin: 1.5rem 0 .25rem; text-align: center; } .klshay-category-pagination .page-numbers { align-items: center; display: inline-flex; flex-wrap: wrap; gap: .45rem; justify-content: center; list-style: none; margin: 0; /*padding: 0; */} .klshay-category-pagination li { margin: 0; } .klshay-category-pagination a, .klshay-category-pagination .current { border: 1px solid #d7dfe3; border-radius: 6px; color: var(--ink); display: inline-block; font-size: .78rem; font-weight: 700; min-width: 38px; padding: .52rem .68rem; text-decoration: none; } .klshay-category-pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; } .klshay-category-pagination a:hover, .klshay-category-pagination a:focus-visible { background: #f3f5f6; outline: 0; } .klshay-category-empty { background: #f8f9fa; border: 1px dashed #cbd1d7; border-radius: 10px; margin-top: 1rem; padding: 1.5rem; text-align: center; } .klshay-category-empty h2 { font-size: 1.05rem; margin: 0 0 .45rem; } .klshay-category-empty p { color: #626872; font-size: .88rem; margin: 0 0 .85rem; } .klshay-category-empty a { color: var(--ink); font-size: .86rem; font-weight: 700; text-decoration: underline; text-underline-offset: .15em; } .klshay-category-related { padding-bottom: 0; } .klshay-category-content { color: #505862; font-size: .92rem; line-height: 1.65; /* max-width: 1080px; */} .klshay-category-content h2 { color: var(--ink); font-size: 1.15rem; } /* Reusable WooCommerce single-product page. */ .klshay-single-product { padding-bottom: 2rem; } .klshay-product-layout { align-items: start; display: grid; gap: clamp(1.25rem, 3vw, 4.25rem); grid-template-columns: minmax(0, 1fr); padding-top: 1rem; } .klshay-product-gallery { --klshay-gallery-thumb-size: clamp(54px, 7vw, 92px); display: grid; gap: .75rem; grid-template-columns: var(--klshay-gallery-thumb-size) minmax(0, 1fr); position: relative; } .klshay-product-gallery__thumbs { align-self: stretch; display: grid; gap: .5rem; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc((var(--klshay-gallery-thumb-size) * 6) + 3.4rem); min-height: 0; } .klshay-product-gallery__thumbs-viewport { max-height: calc((var(--klshay-gallery-thumb-size) * 6) + (2.5rem)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-behavior: smooth; } .klshay-product-gallery__thumbs-track { display: grid; gap: .5rem; grid-auto-rows: var(--klshay-gallery-thumb-size); } .klshay-product-gallery__thumbs-track button { background: #fff; border: 1px solid #dce1e5; border-radius: 8px; cursor: pointer; padding:0; scroll-snap-align: start; } .klshay-product-gallery__thumbs-track button[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .klshay-product-gallery__thumbs img { height: 100%; object-fit: contain; width: 100%; border-radius: 8px;} .klshay-product-gallery__thumb-control { align-items: center; background: #fff; border: 1px solid #dce1e5; border-radius: 7px; color: var(--ink); cursor: pointer; display: inline-flex; height: 24px; justify-content: center; padding: 0; width: 100%; } .klshay-product-gallery__thumb-control:hover:not(:disabled) { background: var(--lime); } .klshay-product-gallery__thumb-control:disabled { cursor: default; opacity: .35; } .klshay-product-gallery__main { align-items: center; background: #fff; border: 1px solid #e4e7eb; border-radius: 14px; display: flex; /* min-height: min(62vw, 610px);*/ aspect-ratio: 1; overflow: hidden; position: relative; } .klshay-product-gallery__zoom { background: transparent; border: 0; cursor: zoom-in; display: block; height: 100%; padding: 0; width: 100%; aspect-ratio: 1;} .klshay-product-gallery__zoom img { display: block; height: 100%; object-fit: contain; width: 100%; } .klshay-product-gallery__zoom img.is-changing { animation: klshay-product-gallery-image-in .22s ease-out; } @keyframes klshay-product-gallery-image-in { from { opacity: .35; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .klshay-product-gallery__controls { align-items: center; display: flex; inset-inline: .7rem; justify-content: space-between; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); } .klshay-product-gallery__controls button { align-items: center; background: rgba(255,255,255,.94); border: 1px solid #dce1e5; border-radius: 50%; box-shadow: 0 2px 8px rgba(17,19,15,.12); color: var(--ink); cursor: pointer; display: inline-flex; height: 38px; justify-content: center; padding: 0; pointer-events: auto; transition: background .15s ease, transform .15s ease; width: 38px; } .klshay-product-gallery__controls button:hover { background: var(--lime); transform: scale(1.06); } .klshay-product-gallery__controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .klshay-product-gallery__sale { display: none; background: var(--red); border-radius: 7px; color: #fff; font-size: .8rem; font-weight: 800; left: .9rem; padding: .35rem .55rem; position: absolute; top: .9rem; } .klshay-product-gallery__video { background: #fff; border: 1px solid #d9dde2; border-radius: 7px; color: var(--ink); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; grid-column: 2; justify-self: start; padding: .45rem .7rem; position: absolute; top: 20px; right: 20px; } .klshay-product-summary { min-width: 0; } .klshay-product-summary__top { align-items: start; display: flex; gap: 1rem; justify-content: space-between; } .klshay-product-brand { color: #4baff8; display: flex; font-size: .9rem; font-weight: 600; margin-bottom: .7rem; text-decoration: none; gap: 8px; align-items: center; line-height: 22px;} .klshay-product-brand .denok {transition: .3s;} .klshay-product-brand:hover .denok{transform: translateX(-5px);} .klshay-product-summary h1 { font-size: 26px; line-height:36px; margin: 0; font-weight: 500;} .klshay-product-wishlist { align-items: center; background: #fff; border: 1px solid #dce1e6; border-radius: 50%; color: var(--ink); display: inline-flex; flex: 0 0 auto; font-size: 1.65rem; height: 42px; justify-content: center; padding: 0; width: 42px; } .klshay-product-wishlist[aria-pressed="true"] { background: #ffe8e8; color: #c52a22; } .klshay-product-meta-row { align-items: center; color: #666d76; display: flex; flex-wrap: wrap; font-size: .8rem; gap: .55rem 1rem; margin: .85rem 0; } .klshay-product-rating { align-items: center; color: var(--ink); display: inline-flex; gap: .4rem; } .klshay-product-rating .star-rating { color: #f0b900; font-size: .75rem; } .klshay-product-price { align-items: center; display: grid; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 600; gap: 0; margin: .55rem 0; } .klshay-product-price del { color: #7a818a; font-size: .5em; font-weight: 500; } .klshay-product-price ins { text-decoration: none; } .klshay-product-price > span.klshay-discount { display: none; background: #d2fad5; border-radius: 999px; color: #34af18; font-size: .35em; padding: .2rem .85rem; text-transform: uppercase; max-width: 100px; text-align: center;} .klshay-product-stock .stock { margin: .3rem 0; } .klshay-product-stock .stock span{color: #258f0c; font-size: .8rem; font-weight: 600; border: solid 1px #2ea213; border-radius: 6px; padding: 3px 10px; background: #e0f9d7; } .klshay-product-stock .out-of-stock { color: #b7221d; } section.klshay-product-delivery h2{ text-align: start; } .klshay-product-sales { color: #666d76; font-size: .8rem; margin: .25rem 0 .8rem; display: none;} .klshay-product-short-description { border-top: 1px solid #e1e5e9; color: #4d555f; font-size: .9rem; line-height: 1.55; margin-top: .85rem; padding-top: .85rem; } a.icon-link.klshay-language-switcher__link[lang="en"] { display: none; } a.icon-link.klshay-language-switcher__link[lang="ar"] { display: inline-flex; } .klshay-product-short-description p { margin: 0; } .main-d-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px;} .klshay-partner-section input{width: 100%; border: solid 1px #dde1e7; padding: 2px 12px; border-radius: 5px; height: 35px;} .klshay-partner-section select{width: 100%; border: solid 1px #dde1e7; padding: 2px 12px; border-radius: 5px; height: 35px;} .klshay-partner-section input[type="submit" i]{background: var(--ink); color: var(--canvas);} .klshay-product-buy > .stock.in-stock{display: none;} .klshay-partner-section {background: #f5f7fa; padding: 1px 35px; border-radius: 20px;} .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt{background-color: var(--lime); color: var(--ink);} .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover{background-color: var(--ink); color: var(--lime);} .klshay-product-buy { border-top: 1px solid #e1e5e9; margin-top: .95rem; padding-top: 1rem; } .klshay-product-buy form.cart { display: grid; gap: .85rem; margin: 0; grid-template-columns: 100px minmax(0, 1fr);} .klshay-product-buy table.variations { border: 0; margin: 0; width: 100%; } .klshay-product-buy table.variations td, .klshay-product-buy table.variations th { border: 0; padding: .35rem 0; text-align: left; vertical-align: middle; } .klshay-product-buy table.variations th label { font-size: .84rem; font-weight: 800; } .klshay-product-buy table.variations select { background: #fff; border: 1px solid #cfd5db; border-radius: 7px; color: var(--ink); font: inherit; min-height: 40px; padding: .35rem .45rem; width: 100%; } .klshay-product-buy .reset_variations { font-size: .78rem; margin-left: .45rem; text-decoration: underline; } .klshay-product-buy .woocommerce-variation-description { color: #5b636d; font-size: .84rem; } .klshay-product-buy .woocommerce-variation-price { font-size: 1.15rem; font-weight: 800; margin: .25rem 0; } .klshay-product-buy .quantity { align-items: center; display: inline-flex; gap: 0; } .klshay-product-buy .quantity .qty { border: 1px solid #cfd5db; border-radius: 0px; font: inherit; height: 40px; min-width: 50px; text-align: center; width: 50px; border-left: none; border-right: none;} .klshay-quantity-button { align-items: center; background: #f3f5f6; border: 1px solid #d9dee2; border-radius: 0; color: var(--ink); display: inline-flex; font-size: 1.15rem; height: 40px; justify-content: center; padding: 0; width: 30px; } .klshay-product-buy .single_add_to_cart_button { background: var(--ink); border: 1px solid var(--ink); border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-weight: 800; min-height: 46px; padding: .6rem 1rem; width: 100%; } .klshay-product-buy .single_add_to_cart_button:not(:disabled):hover { background: var(--lime-deep); color: var(--ink); } .klshay-product-buy .single_add_to_cart_button:disabled { cursor: not-allowed; opacity: .5; } .klshay-product-buy .woocommerce-variation-add-to-cart { align-items: center; display: grid; gap: .7rem; grid-template-columns: 100px minmax(0, 1fr); } .klshay-product-buy .woocommerce-variation-add-to-cart .quantity { grid-column: 1; } .klshay-product-buy .woocommerce-variation-add-to-cart .single_add_to_cart_button { grid-column: 2; } .klshay-product-buy__wishlist { align-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-size: .84rem; font-weight: 700; gap: .4rem; grid-column: 1 / -1; justify-self: start; padding: .2rem 0; text-decoration: underline; text-underline-offset: .18em; } .klshay-product-buy__wishlist:hover, .klshay-product-buy__wishlist[aria-pressed="true"] { color: #b7221d; } .klshay-product-buy__wishlist[aria-pressed="true"] svg { fill: currentColor; } .klshay-product-delivery { border-top: 1px solid #e1e5e9; margin-top: 1rem; padding-top: 1rem; } .klshay-product-delivery[hidden] { display: none; } .klshay-product-delivery h2 { color: #1f2650; font-size: 1rem; font-weight: 500; letter-spacing: .025em; margin: 0 0 .65rem; text-transform: uppercase; } .klshay-product-delivery__card { align-items: center; background: #fff; border: 1px solid #e2e6eb; border-radius: 14px; display: flex; flex-wrap: wrap; gap: .65rem .85rem; min-height: 72px; padding: .7rem .9rem; } .klshay-product-delivery__type { background: var(--lime); border-radius: 15px 0px 15px 15px; color: var(--ink); font-size: .76rem; font-style: italic; font-weight: 800; padding: .4rem .85rem; text-transform: lowercase; } .klshay-product-delivery__card p { color: #202938; font-size: 1rem; margin: 0; } .klshay-product-delivery__card strong { font-size: 1.12em; font-weight: 600;} .klshay-product-delivery__countdown { align-items: center; background: #fff6ed; border-radius: 10px; color: #9f3e1c !important; display: flex; flex-wrap: wrap; font-size: .86rem !important; gap: .45rem .65rem; margin-inline-start: auto !important; padding: .5rem .65rem; } .klshay-product-delivery__countdown-intro { font-weight: 700; } .klshay-product-delivery__timer { align-items: start; display: inline-flex; gap: .35rem; isolation: isolate; } .klshay-product-delivery__timer-unit { align-items: center; display: inline-flex; flex-direction: column; gap: .1rem; min-width: 2.7rem; text-align: center; } .klshay-product-delivery__timer-unit strong { background: #9f3e1c; border-radius: 5px; color: #fff; font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; min-width: 2.5rem; padding: .38rem .32rem; } .klshay-product-delivery__timer-unit span { color: #7c351e; font-size: .6rem; font-weight: 700; line-height: 1.1; white-space: nowrap; } @media (max-width: 520px) { .klshay-product-delivery__countdown { margin-inline-start: 0 !important; width: 100%; } } /* WooCommerce Stock Alerts: native plugin form inside the product buying area. */ .klshay-product-stock-alert:empty { display: none; } .klshay-product-stock-alert .wcsa-alert { background: #f8faf7; border: 1px solid #dce4d7; border-radius: 10px; margin: .9rem 0 0; padding: 1rem; text-align: start; } .klshay-product-stock-alert .wcsa-alert h3 { color: var(--ink); font-size: 1rem; font-weight: 800; margin: 0 0 .35rem; } .klshay-product-stock-alert .wcsa-alert p { color: #59626c; font-size: .84rem; line-height: 1.45; margin: 0 0 .75rem; } .klshay-product-stock-alert .wcsa-alert form { align-items: start; display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr) auto; } .klshay-product-stock-alert .wcsa-alert input[type="email"] { background: #fff; border: 1px solid #cfd5db; border-radius: 7px; color: var(--ink); min-height: 44px; padding: .55rem .7rem; } .klshay-product-stock-alert .wcsa-alert__button { background: var(--ink); border: 1px solid var(--ink); border-radius: 7px; color: #fff; font-weight: 800; min-height: 44px; padding: .5rem .9rem; white-space: nowrap; } .klshay-product-stock-alert .wcsa-alert__button:hover { background: var(--lime-deep); border-color: var(--lime-deep); color: var(--ink); } .klshay-product-stock-alert .wcsa-alert__consent, .klshay-product-stock-alert .cf-turnstile, .klshay-product-stock-alert .wcsa-alert__notice { grid-column: 1 / -1; } .klshay-product-stock-alert .wcsa-alert__consent { color: #59626c; font-size: .75rem; text-align: start; } .klshay-product-stock-alert .wcsa-alert__selection { color: #424850; font-weight: 700; } .klshay-product-stock-alert .wcsa-alert__success strong { color: #16713a; } @media (max-width: 460px) { .klshay-product-stock-alert .wcsa-alert form { grid-template-columns: 1fr; } .klshay-product-stock-alert .wcsa-alert__button { width: 100%; } } .klshay-product-cart-notice { align-items: center; background: #edf8ec; border: 1px solid #bfe1bd; border-radius: 8px; display: flex; flex-wrap: wrap; font-size: .82rem; gap: .5rem .8rem; margin-top: .8rem; padding: .7rem .8rem; } .klshay-product-cart-notice[hidden] { display: none; } .klshay-product-cart-notice strong { color: #1f6d32; } .klshay-product-cart-notice a { color: var(--mist); font-weight: 600; padding: 6px 30px; border-radius: 20px; background: #1c8033; line-height: 20px; text-underline-offset: .15em; } .klshay-product-trust { border-top: 1px solid #e1e5e9; color: #47505a; display: grid; font-size: .82rem; gap: .6rem; list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; grid-template-columns: 1fr 1fr;} .klshay-product-trust li{ background: var(--mist); border-radius: 999px; color: var(--blue); font-size: 1em; padding: .4rem .85rem; display: flex; align-items: center; gap: 10px;} .klshay-product-trust li.klshay-fast-delivery{} .klshay-product-trust li.klshay-free-delivery{ } .klshay-product-trust li.klshay-fast-return{ } .klshay-product-trust li.klshay-s-checkout{} .klshay-product-highlights { border-bottom: 1px solid #e1e5e9; border-top: 1px solid #e1e5e9; margin-top: 2rem; padding-block: 1.15rem; } .klshay-product-highlights h2 { font-size: 1.05rem; margin: 0 0 .75rem; } .klshay-product-highlights ul { display: grid; gap: .65rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .klshay-product-highlights li { font-size: .86rem; } .klshay-product-accordions { display: grid; gap: .55rem; } .klshay-product-accordions details { background: #fff; border: 1px solid #e0e4e8; border-radius: 8px; } .klshay-product-accordions summary { cursor: pointer; font-size: .94rem; font-weight: 800; list-style: none; padding: .9rem 1rem; } .klshay-product-accordions summary::-webkit-details-marker { display: none; } .klshay-product-accordions summary::after { content: '+'; float: right; font-size: 1.25rem; font-weight: 400; line-height: .8; } .klshay-product-accordions details[open] summary::after { content: '−'; } .klshay-product-accordions details > div { border-top: 1px solid #e5e8eb; color: #4d555f; font-size: .9rem; line-height: 1.6; padding: .85rem 1rem 1rem; } .klshay-product-accordions details > div > :first-child { margin-top: 0; } .klshay-product-accordions details > div > :last-child { margin-bottom: 0; } .klshay-product-accordions .woocommerce-product-attributes { border-collapse: collapse; width: 100%; } .klshay-product-accordions .woocommerce-product-attributes th, .klshay-product-accordions .woocommerce-product-attributes td { border-bottom: 1px solid #e8eaed; padding: .55rem; text-align: left; } .klshay-product-reviews .commentlist { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; } .klshay-product-reviews .comment_container { border: 1px solid #e1e5e9; border-radius: 8px; padding: .85rem; } .klshay-product-reviews #review_form_wrapper { margin-top: 1rem; } .klshay-product-recommendations { padding-top: .6rem; } .klshay-product-media-modal[hidden] { display: none; } .klshay-product-media-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 220; } .klshay-product-media-modal__backdrop { background: rgba(10,13,15,.8); inset: 0; position: absolute; } .klshay-product-media-modal__content { align-items: center; display: grid; gap: .75rem; grid-template-columns: auto minmax(0, 1fr) auto; max-height: 92vh; max-width: min(1100px, 96vw); position: relative; width: 100%; z-index: 1; } .klshay-product-media-modal__content > div { align-items: center; display: flex; justify-content: center; max-height: 82vh; min-height: 250px; } .klshay-product-media-modal__content img, .klshay-product-media-modal__content video, .klshay-product-media-modal__content iframe { background: #fff; border-radius: 10px; max-height: 82vh; max-width: 100%; object-fit: contain; width: auto; } .klshay-product-media-modal__content iframe { aspect-ratio: 16 / 9; height: min(60vw, 620px); width: min(100%, 940px); } .klshay-product-media-modal__content > button { align-items: center; background: rgba(255,255,255,.94); border: 0; border-radius: 50%; color: var(--ink); display: inline-flex; font-size: 2rem; height: 42px; justify-content: center; padding: 0; width: 42px; } .klshay-product-media-modal__content > button[data-product-media-close] { position: absolute; right: 0; top: -52px; } body.has-product-media-open { overflow: hidden; } .klshay-sticky-add-to-cart { align-items: center; background: #fff; border-top: 1px solid #dce1e5; bottom: calc(68px + env(safe-area-inset-bottom)); box-shadow: 0 -7px 20px rgba(17,19,15,.11); display: none; gap: .8rem; justify-content: space-between; left: 0; padding: .65rem 1rem; position: fixed; right: 0; z-index: 80; margin: 0px 40px; border-radius: 20px 20px 0px 0px; } .klshay-sticky-add-to-cart[hidden] { display: none; } .klshay-sticky-add-to-cart > span { font-size: 1rem; font-weight: 800; } .klshay-sticky-add-to-cart del { color: #737a83; font-size: .75em; } .klshay-sticky-add-to-cart ins { text-decoration: none; } .klshay-sticky-add-to-cart button { background: var(--ink); border: 0; border-radius: 7px; color: #fff; font: inherit; font-size: .82rem; font-weight: 800; min-height: 40px; padding: .45rem .8rem; } img.ar.logo{display:none;} img.eng.logo{display:block} @media (min-width: 768px) { .klshay-product-layout { grid-template-columns: minmax(0, 1fr) minmax(370px, 1fr); } .klshay-product-highlights ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 767px) { .klshay-product-gallery { grid-template-columns: minmax(0, 1fr); } .klshay-product-gallery__thumbs { display: block; grid-column: 1; grid-row: 2; max-height: none; } .klshay-product-gallery__thumb-control { display: none; } .klshay-product-gallery__thumbs-viewport { max-height: none; overflow-x: auto; overflow-y: hidden; } .klshay-product-gallery__thumbs-track { grid-auto-columns: 58px; grid-auto-flow: column; grid-auto-rows: 58px; grid-template-rows: 58px; padding-bottom: .15rem; } .klshay-product-gallery__video { grid-column: 1; } .klshay-product-gallery__main { min-height: 84vw; } .klshay-product-highlights ul { grid-template-columns: 1fr; } .klshay-sticky-add-to-cart:not([hidden]) { display: flex; } } /* WooCommerce cart: review, adjust, and proceed. */ .klshay-cart-page { margin-inline: auto; max-width: 1400px; padding: 1.2rem 16px 3rem; } .klshay-cart-heading { align-items: baseline; border-bottom: 1px solid #e1e5e9; display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .85rem; } .klshay-cart-heading h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0; } .klshay-cart-heading p { color: #68707a; font-size: .88rem; margin: 0; } .klshay-cart-layout { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } .klshay-cart-items { display: grid; } .klshay-cart-item { border-bottom: 1px solid #e1e5e9; display: grid; gap: .8rem; grid-template-columns: 100px minmax(0, 1fr); padding: 1rem 0; } .klshay-cart-item__image { align-items: center; background: #fff; border: 1px solid #e2e6e9; border-radius: 9px; display: flex; height: 100px; justify-content: center; overflow: hidden; } .klshay-cart-item__image img { height: 100%; object-fit: contain; width: 100%; } .klshay-cart-item__details h2 { font-size: .95rem; margin: 0 0 .25rem; } .klshay-cart-item__variation, .klshay-cart-item__variation dl { color: #636b75; font-size: .78rem; margin: 0; } .klshay-cart-item__variation dl { display: flex; flex-wrap: wrap; gap: .2rem .4rem; } .klshay-cart-item__variation dt, .klshay-cart-item__variation dd { margin: 0; } .klshay-cart-item__stock { color: #16713a; font-size: .78rem; margin: .3rem 0; } .klshay-cart-item__price { align-items: center; display: flex; flex-wrap: wrap; font-size: 1rem; font-weight: 800; gap: .5rem; } .klshay-cart-item__price del { color: #737a83; font-size: .78em; font-weight: 400; } .klshay-cart-item__price ins { text-decoration: none; } .klshay-cart-summary {text-align: left;} .klshay-cart-item__price small { background: #dbf5d9; border-radius: 99px; color: #22ae21; font-size: .68rem; padding:.18rem .62rem; text-transform: uppercase; } .klshay-cart-item__line-total { color: #69717a; font-size: .77rem; margin: .35rem 0; } .klshay-cart-item__line-total strong { color: var(--ink); margin-left: .35rem; } .klshay-cart-item__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem .75rem; margin-top: .6rem; } .klshay-cart-item__actions > a, .klshay-cart-item__actions > button { background: transparent; border: 0; color: #464e57; cursor: pointer; font: inherit; font-size: .76rem; padding: 0; text-decoration: underline; text-underline-offset: .15em; } .klshay-cart-item__actions > button[data-cart-remove] { color: #a82e28; text-decoration: none; background: #ffe9e8; padding: 4px 10px; border-radius: 6px; } .klshay-cart-quantity { align-items: center; border: 1px solid #d8dde2; border-radius: 7px; display: inline-flex; overflow: hidden; } .klshay-cart-quantity button { background: #f5f6f7; border: 0; color: var(--ink); font-size: 1.1rem; height: 31px; width: 31px; } .klshay-cart-quantity output { font-size: .83rem; font-weight: 700; min-width: 31px; text-align: center; } .klshay-cart-summary { background: #f7f8fa; border: 1px solid #e0e4e8; border-radius: 12px; padding: 1rem; } .klshay-cart-summary h2 { font-size: 1rem; margin: 0 0 .85rem; text-transform: uppercase; text-align: left;} .klshay-cart-summary dl { display: grid; gap: .55rem; margin: 0; } .klshay-cart-summary dl div { display: flex; font-size: .85rem; justify-content: space-between; } .klshay-cart-summary dd { margin: 0; } .klshay-cart-summary__total { border-top: 1px solid #d6dce1; display: flex; font-size: 1.05rem; font-weight: 800; justify-content: space-between; margin-top: .8rem; padding-top: .8rem; } .klshay-cart-summary__saved { color: #19733a; font-size: .8rem; font-weight: 700; margin: .55rem 0; } .klshay-cart-delivery-progress { background: #fff; border: 1px solid #e1e5e8; border-radius: 8px; margin: .85rem 0; padding: .65rem; } .klshay-cart-delivery-progress p { font-size: .76rem; margin: 0 0 .45rem; } .klshay-cart-delivery-progress > span { background: #e3e7ea; border-radius: 99px; display: block; height: 7px; overflow: hidden; } .klshay-cart-delivery-progress i { background: var(--lime-deep); display: block; height: 100%; } .klshay-cart-delivery-progress small { display: flex; font-size: .7rem; justify-content: space-between; margin-top: .35rem; } .klshay-cart-summary__delivery { font-size: .78rem; margin: .8rem 0; } .klshay-cart-checkout, .klshay-cart-empty > a { background: var(--ink); border-radius: 8px; color: #fff; display: flex; font-size: .95rem; font-weight: 600; justify-content: center; min-height: 46px; padding: .65rem; text-transform: uppercase; align-items: center; line-height: 25px;} .klshay-cart-summary ul { color: #56606a; display: grid; font-size: .75rem; gap: .35rem; list-style: none; margin: .85rem 0 0; padding: 0; padding-top: 10px;} .klshay-cart-summary .klshay-product-trust li { border: solid 1px #dfe2e9;} .woocommerce h2 { text-align: center; } .klshay-cart-coupon { border-bottom: 1px solid #e1e5e9; padding: .9rem 0; } .klshay-cart-coupon summary { cursor: pointer; font-size: .85rem; font-weight: 700; } .klshay-cart-coupon > div { display: flex; gap: .5rem; margin-top: .75rem; } .klshay-cart-coupon input { border: 1px solid #d6dce1; border-radius: 7px; font: inherit; min-width: 0; padding: .5rem; width: 100%; } .klshay-cart-coupon button { background: var(--ink); border: 0; border-radius: 7px; color: #fff; font: inherit; font-weight: 700; padding: .5rem .8rem; } .klshay-cart-notice { background: #edf8ec; border: 1px solid #bfe1bd; border-radius: 8px; color: #176d32; font-size: .85rem; font-weight: 700; margin-bottom: .8rem; padding: .65rem .8rem; } .klshay-cart-notice[hidden] { display: none; } .klshay-cart-notice button { background: transparent; border: 0; color: inherit; font: inherit; font-weight: 800; margin-left: .6rem; padding: 0; text-decoration: underline; } .klshay-cart-page.is-updating { opacity: .62; pointer-events: none; transition: opacity .15s; } .klshay-cart-saved, .klshay-cart-recommendations, .klshay-cart-popular { margin-top: 2rem; } .klshay-cart-saved__list { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .klshay-cart-saved__list article { border: 1px solid #e1e5e9; border-radius: 9px; display: grid; gap: .45rem; padding: .6rem; } .klshay-cart-saved__list a { align-items: center; display: grid; font-size: .8rem; gap: .5rem; grid-template-columns: 48px minmax(0, 1fr); } .klshay-cart-saved__list img { height: 48px; object-fit: contain; width: 48px; } .klshay-cart-saved__list strong { font-size: .82rem; } .klshay-cart-saved__list button { background: #fff; border: 1px solid #cfd5da; border-radius: 6px; font: inherit; font-size: .75rem; font-weight: 700; min-height: 32px; } .klshay-cart-empty { align-items: center; background: #f7f8fa; border: 1px dashed #cdd3d8; border-radius: 12px; display: flex; flex-direction: column; gap: .65rem; padding: 3rem 1rem; text-align: center; } .klshay-cart-empty > span { font-size: 3rem; } .klshay-cart-empty h1, .klshay-cart-empty p { margin: 0; } .klshay-cart-empty p { color: #68707a; } .klshay-cart-empty > a { min-width: 200px; } .klshay-cart-empty__saved { align-items: center; border-top: 1px solid #dce1e5; display: flex; flex-wrap: wrap; font-size: .84rem; gap: .6rem 1rem; justify-content: center; margin-top: .65rem; padding-top: .9rem; } .klshay-cart-empty__saved a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: .15em; } .klshay-cart-sticky-checkout { align-items: center; background: #fff; border-top: 1px solid #d8dde1; bottom: calc(68px + env(safe-area-inset-bottom)); box-shadow: 0 -7px 18px rgba(17,19,15,.12); display: none; justify-content: space-between; left: 0; padding: .6rem 1rem; position: fixed; right: 0; z-index: 80; } .klshay-cart-sticky-checkout span { font-weight: 800; } .klshay-cart-sticky-checkout a { background: var(--ink); border-radius: 7px; color: #fff; font-size: .78rem; font-weight: 800; padding: .7rem; text-transform: uppercase; } @media (min-width: 780px) { .klshay-cart-layout { grid-template-columns: minmax(0, 1.85fr) minmax(290px, 1fr); } .klshay-cart-summary { position: sticky; top: 95px; } .klshay-cart-saved__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 779px) { .klshay-cart-sticky-checkout { display: flex; } } /* WooCommerce checkout: focused, guest-friendly purchase flow. */ .klshay-checkout-body { background: #f7f8fa; } .klshay-checkout-header { background: #fff; border-bottom: 3px solid var(--lime-deep); } .klshay-checkout-header__inner { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; margin-inline: auto; max-width: 1240px; min-height: 72px; padding: .75rem 16px; } .klshay-checkout-header__back, .klshay-checkout-header__secure { color: #38414a; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; } .klshay-checkout-header__secure { justify-self: end; } .klshay-checkout-header__brand { color: var(--ink); font-size: 1.45rem; font-weight: 900; letter-spacing: -.06em; text-transform: uppercase; } .klshay-checkout-header__brand .custom-logo-link { display: block; } .klshay-checkout-header__brand .custom-logo { display: block; height: auto; max-height: 42px; max-width: 160px; width: auto; } .klshay-checkout-page { margin-inline: auto; max-width: 1240px; padding: 1.5rem 16px 4rem; } .klshay-checkout-page > .woocommerce-notices-wrapper { margin-bottom: .9rem; } .klshay-checkout-page .woocommerce-error, .klshay-checkout-page .woocommerce-message, .klshay-checkout-page .woocommerce-info { background: #fff; border: 1px solid #d9dfe4; border-radius: 8px; color: #313940; list-style: none; margin: 0; padding: .8rem 1rem; } .klshay-checkout__layout { align-items: start; display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); } .klshay-checkout__details, .klshay-checkout__summary { background: #fff; border: 1px solid #e0e4e8; border-radius: 12px; } .klshay-checkout__details { padding: clamp(1rem, 3vw, 1.7rem); } .klshay-checkout__title { border-bottom: 1px solid #e5e8eb; margin-bottom: 1rem; padding-bottom: 1rem; } .klshay-checkout__title h1 { font-size: clamp(1.45rem, 2.5vw, 2rem); margin: 0; } .klshay-checkout__title p { color: #66707a; font-size: .84rem; margin: .35rem 0 0; } .klshay-checkout__title a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: .15em; } .klshay-checkout-section { border-bottom: 1px solid #e5e8eb; padding: 1.15rem 0; } .klshay-checkout-section:first-of-type { padding-top: 0; } .klshay-checkout-section h2, .klshay-checkout__summary > h2 { font-size: 1rem; margin: 0 0 .9rem; text-transform: uppercase; } .klshay-checkout-section h2 span { color: #77818a; margin-right: .2rem; } .klshay-checkout-fields { display: grid; gap: .75rem; } .klshay-checkout-fields .form-row { float: none; margin: 0; padding: 0; width: auto; } .klshay-checkout-fields .form-row-first, .klshay-checkout-fields .form-row-last { width: auto; } .klshay-checkout-fields label { color: #3f4750; display: block; font-size: .8rem; font-weight: 700; margin: 0 0 .35rem; } .klshay-checkout-fields input, .klshay-checkout-fields select, .klshay-checkout-fields textarea { background: #fff; border: 1px solid #cfd6dc; border-radius: 7px; box-sizing: border-box; font: inherit; min-height: 43px; padding: .55rem .65rem; width: 100%; } .klshay-checkout-fields textarea { min-height: 85px; } .klshay-checkout-fields .select2-container { width: 100% !important; } .klshay-checkout-fields .select2-selection { border: 1px solid #cfd6dc; border-radius: 7px; min-height: 43px; padding: .25rem; } .klshay-checkout-fields .select2-selection__rendered { line-height: 34px; } .klshay-checkout__same-address { color: #317142; font-size: .78rem; line-height: 1.45; margin: .7rem 0 0; } .klshay-checkout-section--shipping .woocommerce-shipping-fields > h3 { font-size: .9rem; margin: 0 0 .8rem; } .klshay-checkout-section--shipping .woocommerce-shipping-fields__field-wrapper { display: grid; gap: .75rem; } .klshay-checkout-section--shipping .form-row { float: none; margin: 0; padding: 0; width: auto; } .klshay-checkout-section--shipping input, .klshay-checkout-section--shipping select, .klshay-checkout-section--shipping textarea { border: 1px solid #cfd6dc; border-radius: 7px; box-sizing: border-box; min-height: 43px; padding: .55rem .65rem; width: 100%; } .klshay-checkout-section--shipping label { font-size: .8rem; font-weight: 700; } .klshay-checkout-section--delivery .woocommerce-shipping-methods { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; } .klshay-checkout-section--delivery .woocommerce-shipping-methods li { align-items: center; border: 1px solid #dce1e5; border-radius: 7px; display: flex; gap: .55rem; padding: .7rem; } .klshay-checkout__summary { padding: 1rem; } .klshay-checkout__summary > h2 { margin-bottom: .85rem; } .klshay-checkout__summary .woocommerce-form-coupon-toggle { border-top: 1px solid #e3e7e9; margin-top: .8rem; padding-top: .8rem; } .klshay-checkout__summary .woocommerce-info { background: transparent; border: 0; font-size: .82rem; padding: 0; } .klshay-checkout__summary .woocommerce-info a { color: var(--ink); font-weight: 800; } .klshay-checkout__summary .checkout_coupon { display: flex; gap: .45rem; margin: .65rem 0; } .klshay-checkout__summary .checkout_coupon input { border: 1px solid #cfd6dc; border-radius: 7px; font: inherit; min-width: 0; padding: .5rem; width: 100%; } .klshay-checkout__summary .checkout_coupon button { background: var(--ink); border: 0; border-radius: 7px; color: #fff; font: inherit; font-weight: 800; padding: .5rem .7rem; white-space: nowrap; } .klshay-checkout-order__items { display: grid; gap: .75rem; } .klshay-checkout-order__item { align-items: start; display: grid; gap: .6rem; grid-template-columns: 56px minmax(0, 1fr) auto; } .klshay-checkout-order__item > a { align-items: center; background: #f7f8fa; border: 1px solid #e1e5e8; border-radius: 7px; display: flex; height: 56px; justify-content: center; overflow: hidden; width: 56px; } .klshay-checkout-order__item img { height: 100%; object-fit: contain; width: 100%; } .klshay-checkout-order__item strong { display: -webkit-box; font-size: .8rem; line-height: 1.3; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .klshay-checkout-order__item .variation { color: #66707a; display: flex; flex-wrap: wrap; font-size: .7rem; gap: .1rem .35rem; margin: .2rem 0; } .klshay-checkout-order__item .variation dt, .klshay-checkout-order__item .variation dd { margin: 0; } .klshay-checkout-order__item small { color: #66707a; display: block; font-size: .7rem; } .klshay-checkout-order__item > b { font-size: .78rem; white-space: nowrap; } .klshay-checkout-order__totals { border-top: 1px solid #e2e6e9; display: grid; gap: .55rem; margin: .9rem 0 0; padding-top: .8rem; } .klshay-checkout-order__totals div { display: flex; font-size: .82rem; justify-content: space-between; } .klshay-checkout-order__totals dd { margin: 0; text-align: right; } .klshay-checkout-order__discount dd { color: #28723d; } .klshay-checkout-order__total { align-items: center; border-top: 1px solid #d2d8dd; display: flex; font-size: 1.05rem; font-weight: 800; justify-content: space-between; margin-top: .8rem; padding-top: .85rem; } .klshay-checkout-order__total .includes_tax { color: #68727a; display: block; font-size: .65rem; font-weight: 400; } .klshay-checkout__summary .woocommerce-checkout-payment { border-top: 1px solid #e2e6e9; margin-top: 1rem; padding-top: 1rem; } .klshay-checkout__summary .wc_payment_methods { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; } .klshay-checkout__summary .wc_payment_method { border: 1px solid #dce1e5; border-radius: 7px; padding: .65rem; } .klshay-checkout__summary .wc_payment_method label { font-size: .85rem; font-weight: 800; } .klshay-checkout__summary .payment_box { color: #59636d; font-size: .77rem; line-height: 1.45; } .klshay-checkout__summary #place_order { background: var(--ink); border: 0; border-radius: 8px; color: #fff; font: inherit; font-size: .87rem; font-weight: 800; margin-top: .8rem; min-height: 48px; text-transform: uppercase; width: 100%; } .klshay-checkout__summary .woocommerce-privacy-policy-text, .klshay-checkout__summary .woocommerce-terms-and-conditions-checkbox-text { color: #66707a; font-size: .72rem; line-height: 1.45; } .klshay-checkout__trust { border-top: 1px solid #e2e6e9; color: #59636d; display: grid; font-size: .75rem; gap: .35rem; list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; grid-template-columns: 1fr 1fr 1fr;} .klshay-checkout-footer { color: #67717a; font-size: .75rem; margin: 0 auto 1rem; max-width: 1240px; padding: 0 16px; text-align: center; } .klshay-checkout-footer p { margin: .35rem 0; } .klshay-checkout-footer a { color: inherit; margin: 0 .5rem; text-decoration: underline; text-underline-offset: .15em; } .footer-column {text-align: left;} .footer-column ul{padding: 0;} .footer-column ul li{list-style: none; } .footer-column ul li a {} .header-icon-label{} .klshay-cart-item__actions > button[data-cart-save] { color: #11140f; text-decoration: none; background: #d9ec10; padding: 4px 10px; border-radius: 6px; } a.woocommerce-terms-and-conditions-link { text-decoration: underline; } .klshay-cart-item__details h2{text-align: left;} .klshay-checkout__trust li { background: #f3f4f8; border: solid 1px #e0e0e8; border-radius: 50px; display: flex; align-items: center; gap: 10px;} .klshay-checkout__trust li svg { background: #d9ec10; border-radius: 30px; width: 40px; height: 40px; padding: 9px; } .woocommerce .woocommerce-terms-and-conditions, .woocommerce-page .woocommerce-terms-and-conditions{padding: 1em;} .woocommerce-billing-fields__field-wrapper p.form-row{width: 100%;} section.klshay-checkout-section.klshay-checkout-section--shipping { display: none; } #billing_address_1_field, #billing_city_field{} #billing_state_field, .klshay-checkout__same-address{} #billing_address_2_field, #billing_postcode_field{display: none;} .klshay-checkout-section h2 {text-align: start;} #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment{background: var(--mist);} #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{background: var(--line);} @media (min-width: 820px) { .klshay-checkout__layout { grid-template-columns: minmax(0, 1.5fr) minmax(330px, .9fr); } .klshay-checkout__summary { position: sticky; top: 18px; } .klshay-checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .klshay-checkout-fields #billing_address_1_field, .klshay-checkout-fields #billing_address_2_field, .klshay-checkout-fields #billing_country_field { grid-column: span 2; } } @media (max-width: 819px) { .klshay-checkout-page { padding: 1rem 10px calc(92px + env(safe-area-inset-bottom)); } .klshay-checkout-header__inner { min-height: 58px; } .klshay-checkout-header__back span, .klshay-checkout-header__secure span { display: none; } .klshay-checkout__details, .klshay-checkout__summary { border-radius: 9px; } .klshay-checkout__summary #place_order { bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -5px 18px rgba(0,0,0,.14); left: 10px; margin: 0; position: fixed; right: 10px; width: calc(100% - 20px); z-index: 90; } .header-icon-label{display: none;}} @media (min-width: 768px) { .klshay-category-hero { grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr); } .klshay-category-subcategories__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .klshay-category-subcategories__grid a { grid-template-columns: 42px 1fr 30px; } .klshay-category-subcategories__grid small { grid-column: 2; margin-top: -.5rem; } .klshay-category-layout { grid-template-columns: minmax(205px, 250px) minmax(0, 1fr); } .klshay-category-facets { grid-column: 1; grid-row: 2; } .klshay-category-products { grid-column: 2; grid-row: 2; } .klshay-category-filter-toggle { display: none; } } @media (max-width: 767px) { .klshay-category-facets { border-radius: 0; bottom: 0; display: none; left: 0; overflow: auto; position: fixed; right: 0; top: 0; z-index: 120; } .klshay-category-facets.is-open { display: grid; } .klshay-category-facets [data-plp-close-filters] { display: inline-flex; } .klshay-category-facets__head { align-items: center; } } /* WooCommerce My Account: a quiet customer portal instead of the default account view. */ .klshay-account-portal { margin: clamp(1.25rem, 3vw, 3rem) auto; max-width: 1280px; padding: 0 50px; } .woocommerce-account .woocommerce-MyAccount-navigation{width: 100%;} .woocommerce-account .woocommerce-MyAccount-content{width: 100%;} .klshay-account-portal__header { border-bottom: 1px solid #dfe4e8; margin-bottom: clamp(1rem, 2.25vw, 1.75rem); padding-bottom: 1rem; } .klshay-account-portal__eyebrow { color: #66707a; font-size: .75rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .25rem; text-transform: uppercase; } .klshay-account-portal__header h1 { color: var(--ink); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.12; margin: 0; } .klshay-account-portal__layout { display: grid; gap: clamp(1rem, 2.5vw, 2rem); } .klshay-account-navigation { background: #f7f8f9; border: 1px solid #e0e5e8; border-radius: 12px; padding: .5rem; } .klshay-account-navigation ul { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; } .klshay-account-navigation a { align-items: center; border-radius: 8px; color: #303840; display: flex; font-size: .9rem; font-weight: 700; min-height: 42px; padding: .55rem .75rem; text-decoration: none; transition: background-color .16s ease, color .16s ease; } .klshay-account-navigation a:hover, .klshay-account-navigation a:focus-visible { background: #e7ecef; color: var(--ink); outline: 0; } .klshay-account-navigation .is-active a { background: var(--ink); color: #fff; } .klshay-account-navigation li:last-child { border-top: 1px solid #dce2e6; margin-top: .3rem; padding-top: .3rem; } .klshay-account-navigation li:last-child a { color: #a22c2c; } .klshay-account-navigation .is-active:last-child a { background: #a22c2c; color: #fff; } .klshay-account-portal__content { min-width: 0; } .klshay-account-portal__content > :first-child { margin-top: 0; } .klshay-account-dashboard { display: grid; gap: 1.25rem; } .klshay-account-dashboard__welcome { background: linear-gradient(135deg, #f7f8f9, #eef2f3); border: 1px solid #e1e6e9; border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.65rem); } .klshay-account-dashboard__welcome p { color: #65707a; font-size: .85rem; margin: 0 0 .25rem; } .klshay-account-dashboard__welcome h2 { color: var(--ink); font-size: clamp(1.35rem, 2.25vw, 1.8rem); margin: 0; } .klshay-account-dashboard__actions { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .klshay-account-dashboard__actions a { background: #fff; border: 1px solid #dfe5e8; border-radius: 10px; color: var(--ink); display: grid; gap: .2rem; min-height: 76px; padding: .85rem; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .klshay-account-dashboard__actions a:hover, .klshay-account-dashboard__actions a:focus-visible { border-color: #aab5ba; box-shadow: 0 7px 16px rgba(15, 23, 22, .08); outline: 0; transform: translateY(-1px); } .klshay-account-dashboard__actions strong { font-size: .88rem; } .klshay-account-dashboard__actions span { color: #67717a; font-size: .73rem; line-height: 1.35; } .klshay-account-dashboard__orders { background: #fff; border: 1px solid #dfe5e8; border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.5rem); } .klshay-account-dashboard__section-head { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .75rem; } .klshay-account-dashboard__section-head h2 { font-size: 1.05rem; margin: 0; } .klshay-account-dashboard__section-head a, .klshay-account-dashboard__order-total a { color: #354d49; font-size: .78rem; font-weight: 800; text-decoration: underline; text-underline-offset: .15em; } .klshay-account-dashboard__order-list { border-top: 1px solid #e2e6e9; list-style: none; margin: 0; padding: 0; } .klshay-account-dashboard__order-list li { align-items: center; border-bottom: 1px solid #e2e6e9; display: flex; gap: 1rem; justify-content: space-between; padding: .85rem 0; } .klshay-account-dashboard__order-list li > div:first-child { display: grid; gap: .2rem; min-width: 0; } .klshay-account-dashboard__order-list strong { font-size: .84rem; } .klshay-account-dashboard__order-list small { color: #717b84; font-size: .72rem; } .klshay-account-dashboard__status { color: #63707a; font-size: .74rem; font-weight: 700; } .klshay-account-dashboard__status--completed { color: #1d7441; } .klshay-account-dashboard__status--processing, .klshay-account-dashboard__status--on-hold { color: #925a00; } .klshay-account-dashboard__status--cancelled, .klshay-account-dashboard__status--failed { color: #b23131; } .klshay-account-dashboard__order-total { align-items: end; display: grid; gap: .35rem; justify-items: end; text-align: right; white-space: nowrap; } .klshay-account-dashboard__order-total b { font-size: .85rem; } .klshay-account-dashboard__empty { color: #64707a; font-size: .85rem; padding: .45rem 0 0; } .klshay-account-dashboard__empty .button { background: var(--ink); border-radius: 7px; color: #fff; display: inline-block; font-size: .8rem; font-weight: 800; margin-top: .25rem; padding: .65rem .85rem; text-decoration: none; } .klshay-account-portal .woocommerce-message, .klshay-account-portal .woocommerce-info, .klshay-account-portal .woocommerce-error { border-radius: 8px; font-size: .84rem; margin: 0 0 1rem; } .klshay-account-portal .woocommerce-orders-table { border: 1px solid #dfe5e8; border-collapse: separate; border-radius: 10px; border-spacing: 0; overflow: hidden; width: 100%; } .klshay-account-portal .woocommerce-orders-table th { background: #f6f8f9; color: #59636c; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; } .klshay-account-portal .woocommerce-orders-table td, .klshay-account-portal .woocommerce-orders-table th { border: 0; border-bottom: 1px solid #e2e6e9; padding: .8rem; text-align: start; } .klshay-account-portal .woocommerce-orders-table tr:last-child td { border-bottom: 0; } .klshay-account-portal .woocommerce-orders-table a { color: var(--ink); font-weight: 700; } .klshay-account-portal .woocommerce-orders-table .button, .klshay-account-portal .woocommerce-Button { background: var(--ink); border: 0; border-radius: 6px; color: #fff; font: inherit; font-size: .75rem; font-weight: 800; padding: .5rem .65rem; text-decoration: none; } .klshay-account-portal .woocommerce-address-fields, .klshay-account-portal .woocommerce-EditAccountForm { background: #fff; border: 1px solid #dfe5e8; border-radius: 10px; display: grid; gap: .85rem; padding: clamp(1rem, 2.5vw, 1.5rem); } .klshay-account-portal .woocommerce-address-fields .form-row, .klshay-account-portal .woocommerce-EditAccountForm .form-row { float: none; margin: 0; padding: 0; width: auto; } .klshay-account-portal .woocommerce-address-fields label, .klshay-account-portal .woocommerce-EditAccountForm label { color: #4a545d; display: block; font-size: .8rem; font-weight: 700; margin-bottom: .35rem; } .klshay-account-portal .woocommerce-address-fields input, .klshay-account-portal .woocommerce-address-fields select, .klshay-account-portal .woocommerce-EditAccountForm input { border: 1px solid #cbd3d8; border-radius: 7px; box-sizing: border-box; font: inherit; min-height: 43px; padding: .55rem .65rem; width: 100%; } .klshay-account-portal .woocommerce-Addresses { display: grid; gap: 1rem; } .klshay-account-portal .woocommerce-Address { background: #fff; border: 1px solid #dfe5e8; border-radius: 10px; padding: 1rem; } .klshay-account-portal .woocommerce-Address-title { align-items: center; display: flex; justify-content: space-between; } .klshay-account-portal .woocommerce-Address-title h3 { font-size: 1rem; margin: 0; } .klshay-account-portal .woocommerce-Address-title a { color: #354d49; font-size: .8rem; font-weight: 800; } .klshay-account-portal .woocommerce-Address address { color: #5c6670; font-size: .85rem; font-style: normal; line-height: 1.55; } .woocommerce-account .woocommerce form.woocommerce-form-login, .woocommerce-account .woocommerce form.register { border: 1px solid #dfe5e8; border-radius: 12px; margin: clamp(1.5rem, 4vw, 3rem) auto; max-width: 480px; padding: clamp(1rem, 3vw, 1.5rem); } .woocommerce-account .woocommerce form.woocommerce-form-login input, .woocommerce-account .woocommerce form.register input { border: 1px solid #cbd3d8; border-radius: 7px; box-sizing: border-box; min-height: 43px; padding: .55rem .65rem; width: 100%; } .woocommerce-account .woocommerce form.woocommerce-form-login .button, .woocommerce-account .woocommerce form.register .button { background: var(--ink); border: 0; border-radius: 7px; color: #fff; font: inherit; font-weight: 800; min-height: 43px; padding: .5rem .85rem; } @media (min-width: 768px) { .klshay-account-portal__layout { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); } .klshay-account-navigation { align-self: start; position: sticky; top: 16px; } .klshay-account-dashboard__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } .klshay-account-portal .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .klshay-account-portal { margin-block: 1.1rem; padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .klshay-account-navigation { background: transparent; border: 0; border-radius: 0; margin: 0 -16px; overflow-x: auto; padding: 0 16px .35rem; scrollbar-width: none; } .klshay-account-navigation::-webkit-scrollbar { display: none; } .klshay-account-navigation ul { display: flex; gap: .45rem; width: max-content; } .klshay-account-navigation li, .klshay-account-navigation li:last-child { border: 0; margin: 0; padding: 0; } .klshay-account-navigation a { background: #f5f7f8; border: 1px solid #dce2e6; min-height: 38px; padding: .45rem .7rem; white-space: nowrap; } .klshay-account-navigation li:last-child a { color: #a22c2c; } .klshay-account-navigation .is-active a { background: var(--ink); color: #fff; } .klshay-account-dashboard__order-list li { align-items: start; } .klshay-account-portal .woocommerce-orders-table thead { display: none; } .klshay-account-portal .woocommerce-orders-table, .klshay-account-portal .woocommerce-orders-table tbody, .klshay-account-portal .woocommerce-orders-table tr, .klshay-account-portal .woocommerce-orders-table td { display: block; width: 100%; } .klshay-account-portal .woocommerce-orders-table { border: 0; } .klshay-account-portal .woocommerce-orders-table tr { border: 1px solid #dfe5e8; border-radius: 10px; margin-bottom: .75rem; overflow: hidden; } .klshay-account-portal .woocommerce-orders-table td { align-items: center; border-bottom: 1px solid #e5e9eb; display: flex; justify-content: space-between; } .klshay-account-portal .woocommerce-orders-table td:last-child { border-bottom: 0; } .klshay-account-portal .woocommerce-orders-table td::before { color: #65707a; content: attr(data-title); font-size: .72rem; font-weight: 700; } } /* Contact page: layout surrounds Contact Form 7; form fields remain plugin-owned. */ .klshay-contact-page { padding-bottom: clamp(2rem, 5vw, 4rem); } .klshay-contact-hero { border-bottom: 1px solid #e0e5e8; padding-block: clamp(1.75rem, 4vw, 3.25rem) 1.25rem; text-align: center; } .klshay-contact-eyebrow { color: #68737d; font-size: .74rem; font-weight: 800; letter-spacing: .09em; margin: 0 0 .35rem; text-transform: uppercase; } .klshay-contact-hero h1, .klshay-contact-section-head h2 { color: var(--ink); margin: 0; } .klshay-contact-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); } .klshay-contact-hero > p:last-child { color: #64707a; font-size: clamp(.9rem, 1.8vw, 1.05rem); margin: .6rem auto 0; max-width: 540px; } .klshay-contact-help-options { display: grid; gap: .85rem; padding-block: 1.25rem; } .klshay-contact-help-options article { background: #f7f8f9; border: 1px solid #e0e5e8; border-radius: 12px; padding: 1.1rem; } .klshay-contact-help-options__icon { align-items: center; background: #e8eeee; border-radius: 50%; color: #263a37; display: flex; font-size: 1.1rem; font-weight: 900; height: 34px; justify-content: center; margin: 0 0 .65rem; width: 34px; } .klshay-contact-help-options h2 { color: var(--ink); font-size: 1rem; margin: 0; } .klshay-contact-help-options p:not(.klshay-contact-help-options__icon) { color: #65707a; font-size: .83rem; line-height: 1.5; margin: .4rem 0 .75rem; } .klshay-contact-help-options a, .klshay-contact-faq__actions a { color: #2e514b; font-size: .82rem; font-weight: 800; text-decoration: underline; text-underline-offset: .16em; } .klshay-contact-section-head { margin-bottom: 1rem; text-align: center; } .klshay-contact-section-head h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); } .klshay-contact-touch__layout { display: grid; gap: 1rem; } .klshay-contact-form-slot, .klshay-contact-details { background: #fff; border: 1px solid #dfe5e8; border-radius: 12px; padding: clamp(1rem, 3vw, 1.5rem); } .klshay-contact-form-slot__setup { color: #68727c; font-size: .85rem; margin: 0; } .klshay-contact-form-slot .wpcf7 { max-width: none; } .klshay-contact-form-slot .wpcf7-form { display: grid; gap: .85rem; } .klshay-contact-form-slot .wpcf7-form p { margin: 0; } .klshay-contact-form-slot .wpcf7-form label { color: #3e4952; display: grid; font-size: .8rem; font-weight: 700; gap: .35rem; } .klshay-contact-form-slot input:not([type="checkbox"]):not([type="radio"]), .klshay-contact-form-slot select, .klshay-contact-form-slot textarea { border: 1px solid #cbd3d8; border-radius: 7px; box-sizing: border-box; font: inherit; min-height: 46px; padding: .6rem .7rem; width: 100%; } .klshay-contact-form-slot textarea { min-height: 130px; resize: vertical; } .klshay-contact-form-slot input[type="submit"] { background: var(--ink); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 800; min-height: 46px; padding: .6rem 1rem; text-transform: uppercase; } .klshay-contact-form-slot .wpcf7-not-valid-tip { color: #b32626; font-size: .75rem; font-weight: 600; margin-top: .2rem; } .klshay-contact-form-slot .wpcf7-response-output { border-radius: 7px; font-size: .82rem; margin: 0; padding: .7rem; } .klshay-contact-details h3 { color: var(--ink); font-size: 1rem; margin: 0 0 1rem; } .klshay-contact-details > div { align-items: start; border-top: 1px solid #e4e8ea; display: grid; gap: .65rem; grid-template-columns: 22px minmax(0, 1fr); padding: .8rem 0; } .klshay-contact-details > div:last-child { padding-bottom: 0; } .klshay-contact-details b { color: #2b514a; font-size: 1rem; line-height: 1.2; } .klshay-contact-details p { display: grid; gap: .2rem; margin: 0; } .klshay-contact-details strong { color: #303940; font-size: .78rem; } .klshay-contact-details span, .klshay-contact-details a { color: #68727c; font-size: .83rem; line-height: 1.45; text-decoration: none; } .klshay-contact-details a:hover, .klshay-contact-details a:focus-visible { color: var(--ink); text-decoration: underline; } .klshay-contact-map__frame { background: #f5f7f8; border: 1px solid #dfe5e8; border-radius: 12px; overflow: hidden; } .klshay-contact-map__frame iframe { border: 0; display: block; height: min(55vw, 420px); min-height: 260px; width: 100%; } .klshay-contact-faq { max-width: 850px; } .klshay-contact-faq__items { border-top: 1px solid #dfe5e8; } .klshay-contact-faq details { border-bottom: 1px solid #dfe5e8; } .klshay-contact-faq summary { color: #283139; cursor: pointer; font-size: .9rem; font-weight: 800; list-style: none; padding: 1rem .15rem; } .klshay-contact-faq summary::-webkit-details-marker { display: none; } .klshay-contact-faq summary::after { content: '+'; float: right; font-size: 1.15rem; font-weight: 400; } .klshay-contact-faq details[open] summary::after { content: '−'; } .klshay-contact-faq details p { color: #67717a; font-size: .84rem; line-height: 1.55; margin: -.1rem .15rem 1rem; } .klshay-contact-faq__actions { margin-top: 1rem; text-align: center; } .klshay-contact-final { background: var(--ink); border-radius: 12px; color: #fff; margin-top: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.4rem, 4vw, 2.5rem); text-align: center; } .klshay-contact-final h2 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); margin: 0; } .klshay-contact-final p { color: #d8dfdf; font-size: .9rem; margin: .45rem 0 1rem; } .klshay-contact-final a { background: #fff; border-radius: 7px; color: var(--ink); display: inline-block; font-size: .8rem; font-weight: 800; padding: .7rem 1rem; text-decoration: none; } @media (min-width: 720px) { .klshay-contact-help-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .klshay-contact-touch__layout { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); } } /* Reusable long-form page template for policies, guides and editorial content. */ .klshay-information-page { padding-bottom: clamp(2.5rem, 6vw, 5rem); } .klshay-information-header { border-bottom: 1px solid #e0e5e8; padding-block: clamp(1.2rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem); } .klshay-information-breadcrumb { color: #69737c; display: flex; flex-wrap: wrap; font-size: .76rem; gap: .35rem; margin-bottom: 1rem; } .klshay-information-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: .14em; } .klshay-information-breadcrumb a:hover, .klshay-information-breadcrumb a:focus-visible { color: var(--ink); } .klshay-information-header__body { align-items: center; display: grid; gap: 1.25rem; } .klshay-information-header h1 { color: var(--ink); font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.08; margin: 0; } .klshay-information-header__body > div > p { color: #606b74; font-size: clamp(.95rem, 1.75vw, 1.12rem); line-height: 1.55; margin: .65rem 0 0; max-width: 63ch; } .klshay-information-header__visual { background: #f3f5f6; border-radius: 12px; margin: 0; max-height: 190px; min-height: 120px; overflow: hidden; } .klshay-information-header__visual img { display: block; height: 100%; object-fit: cover; width: 100%; } .klshay-information-content { max-width: 930px; padding-top: clamp(1.5rem, 4vw, 3rem); } .klshay-information-prose { color: #3d474f; font-size: clamp(.93rem, 1.5vw, 1.04rem); line-height: 1.72; } .klshay-information-prose > :first-child { margin-top: 0; } .klshay-information-prose h2, .klshay-information-prose h3, .klshay-information-prose h4 { color: var(--ink); line-height: 1.22; margin: 2em 0 .6em; } .klshay-information-prose h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); } .klshay-information-prose h3 { font-size: clamp(1.08rem, 2vw, 1.3rem); } .klshay-information-prose p, .klshay-information-prose ul, .klshay-information-prose ol { margin: 0 0 1.15em; } .klshay-information-prose ul, .klshay-information-prose ol { padding-inline-start: 1.3em; } .klshay-information-prose li + li { margin-top: .35em; } .klshay-information-prose a { color: #294f48; font-weight: 700; text-decoration: underline; text-underline-offset: .14em; } .klshay-information-prose blockquote { border-inline-start: 3px solid #b9c8c4; color: #53616a; margin: 1.5em 0; padding-block: .2em; padding-inline-start: 1em; } .klshay-information-prose figure { margin: 1.5em 0; } .klshay-information-prose figcaption { color: #707b84; font-size: .78rem; margin-top: .4rem; text-align: center; } .klshay-information-prose table { border: 1px solid #dfe5e8; border-collapse: separate; border-radius: 8px; border-spacing: 0; display: block; margin: 1.5em 0; max-width: 100%; overflow-x: auto; width: max-content; } .klshay-information-prose td, .klshay-information-prose th { border-bottom: 1px solid #e1e6e8; padding: .65rem .75rem; text-align: start; white-space: nowrap; } .klshay-information-prose th { background: #f5f7f8; color: var(--ink); font-size: .8rem; } .klshay-information-prose tr:last-child td { border-bottom: 0; } .klshay-information-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; } .klshay-information-pagination .post-page-numbers { border: 1px solid #d9e0e3; border-radius: 5px; color: var(--ink); font-size: .8rem; padding: .35rem .55rem; text-decoration: none; } .klshay-information-pagination .current { background: var(--ink); color: #fff; } @media (min-width: 720px) { .klshay-information-header--with-image .klshay-information-header__body { grid-template-columns: minmax(0, 1fr) minmax(230px, .45fr); } .klshay-information-header__visual { height: 170px; } } /* Editorial single-post template. */ .klshay-post-page { padding-bottom: clamp(2.5rem, 6vw, 5rem); } .klshay-post-header { padding-block: clamp(1.2rem, 3vw, 2.25rem) 0; } .klshay-post-breadcrumb { color: #6b757e; display: flex; flex-wrap: wrap; font-size: .76rem; gap: .35rem; margin: 0 auto 1.35rem; max-width: 790px; } .klshay-post-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: .14em; } .klshay-post-breadcrumb a:hover, .klshay-post-breadcrumb a:focus-visible { color: var(--ink); } .klshay-post-header__intro { margin: 0 auto; max-width: 790px; } .klshay-post-header__category { color: #39564f; display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .08em; margin-bottom: .55rem; text-decoration: none; text-transform: uppercase; } .klshay-post-header__category:hover, .klshay-post-header__category:focus-visible { text-decoration: underline; text-underline-offset: .14em; } .klshay-post-header h1 { color: var(--ink); font-size: clamp(2rem, 4.8vw, 3.65rem); letter-spacing: -.025em; line-height: 1.06; margin: 0; } .klshay-post-header__intro > p { color: #5e6972; font-size: clamp(1rem, 1.9vw, 1.18rem); line-height: 1.5; margin: .75rem 0 0; max-width: 62ch; } .klshay-post-header__meta { align-items: center; color: #68737c; display: flex; flex-wrap: wrap; font-size: .78rem; gap: .35rem; margin-top: 1rem; } .klshay-post-header__image { background: #f4f6f7; border-radius: 12px; margin: clamp(1.4rem, 4vw, 2.5rem) auto 0; max-width: 1180px; overflow: hidden; } .klshay-post-header__image img { aspect-ratio: 16 / 8.5; display: block; height: auto; object-fit: cover; width: 100%; } .klshay-post-reading { max-width: 800px; padding-top: clamp(1.8rem, 4vw, 3.2rem); } .klshay-post-prose { color: #374149; font-size: clamp(1rem, 1.65vw, 1.1rem); line-height: 1.8; } .klshay-post-prose > :first-child { margin-top: 0; } .klshay-post-prose h2, .klshay-post-prose h3, .klshay-post-prose h4 { color: var(--ink); line-height: 1.2; margin: 2.1em 0 .7em; } .klshay-post-prose h2 { font-size: clamp(1.4rem, 2.7vw, 1.9rem); } .klshay-post-prose h3 { font-size: clamp(1.14rem, 2.2vw, 1.42rem); } .klshay-post-prose p, .klshay-post-prose ul, .klshay-post-prose ol { margin: 0 0 1.2em; } .klshay-post-prose ul, .klshay-post-prose ol { padding-inline-start: 1.35em; } .klshay-post-prose li + li { margin-top: .4em; } .klshay-post-prose a { color: #2d514a; font-weight: 700; text-decoration: underline; text-underline-offset: .14em; } .klshay-post-prose blockquote { border-inline-start: 3px solid #aebfba; color: #4e5d66; font-size: 1.08em; font-style: italic; margin: 1.7em 0; padding-block: .25em; padding-inline-start: 1em; } .klshay-post-prose figure { margin: 1.7em 0; } .klshay-post-prose figcaption { color: #707b84; font-size: .77rem; margin-top: .45rem; text-align: center; } .klshay-post-prose table { border: 1px solid #dfe5e8; border-collapse: separate; border-radius: 8px; border-spacing: 0; display: block; margin: 1.5em 0; max-width: 100%; overflow-x: auto; width: max-content; } .klshay-post-prose td, .klshay-post-prose th { border-bottom: 1px solid #e2e6e9; padding: .65rem .75rem; text-align: start; white-space: nowrap; } .klshay-post-prose th { background: #f5f7f8; color: var(--ink); font-size: .8rem; } .klshay-post-prose tr:last-child td { border-bottom: 0; } .klshay-post-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; } .klshay-post-pagination .post-page-numbers { border: 1px solid #d9e0e3; border-radius: 5px; color: var(--ink); font-size: .8rem; padding: .35rem .55rem; text-decoration: none; } .klshay-post-pagination .current { background: var(--ink); color: #fff; } .klshay-post-support { margin-top: clamp(2rem, 5vw, 3.5rem); max-width: 800px; } .klshay-post-tags-share { border-block: 1px solid #dfe5e8; display: grid; gap: 1rem; padding-block: 1rem; } .klshay-post-tags, .klshay-post-share { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; } .klshay-post-tags strong, .klshay-post-share strong { color: #3e474e; font-size: .78rem; margin-inline-end: .15rem; } .klshay-post-tags a, .klshay-post-share a { border: 1px solid #d9e0e3; border-radius: 99px; color: #44515a; font-size: .72rem; font-weight: 700; padding: .35rem .55rem; text-decoration: none; } .klshay-post-tags a:hover, .klshay-post-tags a:focus-visible, .klshay-post-share a:hover, .klshay-post-share a:focus-visible { background: #f2f5f5; color: var(--ink); outline: 0; } .klshay-post-author { align-items: start; background: #f5f7f8; border-radius: 12px; display: grid; gap: 1rem; grid-template-columns: 64px minmax(0, 1fr); margin-top: 1.35rem; padding: 1rem; } .klshay-post-author__avatar { border-radius: 50%; height: 64px; object-fit: cover; width: 64px; } .klshay-post-author p { color: #6c767e; font-size: .72rem; margin: 0 0 .15rem; } .klshay-post-author h2 { color: var(--ink); font-size: 1rem; margin: 0; } .klshay-post-author h2 + div { color: #59656e; font-size: .82rem; line-height: 1.5; margin-top: .35rem; } .klshay-post-author h2 + div p { color: inherit; font-size: inherit; margin: 0; } .klshay-post-adjacent { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.35rem; } .klshay-post-adjacent a { border: 1px solid #dfe5e8; border-radius: 9px; color: var(--ink); display: grid; gap: .3rem; min-height: 83px; padding: .8rem; text-decoration: none; } .klshay-post-adjacent a:last-child { text-align: end; } .klshay-post-adjacent a:hover, .klshay-post-adjacent a:focus-visible { border-color: #b7c3c2; box-shadow: 0 5px 12px rgba(0,0,0,.05); outline: 0; } .klshay-post-adjacent small { color: #66727b; font-size: .7rem; } .klshay-post-adjacent strong { font-size: .8rem; line-height: 1.35; } .klshay-related-posts { margin-top: clamp(2.5rem, 6vw, 4.5rem); } .klshay-post-section-head { margin-bottom: 1rem; text-align: center; } .klshay-post-section-head h2 { color: var(--ink); font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 0; } .klshay-related-posts__grid { display: grid; gap: 1rem; } .klshay-related-posts article { border: 1px solid #dfe5e8; border-radius: 10px; overflow: hidden; } .klshay-related-posts__image { background: #f4f6f7; display: block; } .klshay-related-posts__image:empty { min-height: 150px; } .klshay-related-posts__image img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; } .klshay-related-posts article > div { padding: .85rem; } .klshay-related-posts article span { color: #506b65; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .klshay-related-posts h3 { font-size: .98rem; line-height: 1.3; margin: .35rem 0; } .klshay-related-posts h3 a { color: var(--ink); text-decoration: none; } .klshay-related-posts p { color: #68737c; font-size: .78rem; line-height: 1.45; margin: 0 0 .65rem; } .klshay-related-posts__read { color: #36564f; font-size: .76rem; font-weight: 800; text-decoration: underline; text-underline-offset: .13em; } .klshay-post-shop-cta { align-items: center; background: var(--ink); border-radius: 12px; color: #fff; display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 4rem); padding: clamp(1.3rem, 4vw, 2.3rem); } .klshay-post-shop-cta p { color: #c9d2d1; font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .25rem; text-transform: uppercase; } .klshay-post-shop-cta h2 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); margin: 0; } .klshay-post-shop-cta span { color: #d4dcdb; display: block; font-size: .85rem; margin-top: .35rem; } .klshay-post-shop-cta > a { background: #fff; border-radius: 7px; color: var(--ink); font-size: .82rem; font-weight: 800; justify-self: start; padding: .7rem .9rem; text-decoration: none; } @media (min-width: 680px) { .klshay-post-tags-share { align-items: center; grid-template-columns: minmax(0, 1fr) auto; } .klshay-related-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .klshay-post-shop-cta { grid-template-columns: minmax(0, 1fr) auto; } .klshay-post-shop-cta > a { justify-self: end; } } @media (max-width: 520px) { .klshay-post-adjacent { grid-template-columns: 1fr; } .klshay-post-adjacent span:empty { display: none; } .klshay-post-adjacent a:last-child { text-align: start; } } /* Editorial WordPress blog-category archive. Product-category archives keep their WooCommerce PLP. */ .klshay-blog-category-page { padding-bottom: clamp(2.5rem, 6vw, 5rem); } .klshay-blog-category-header { background: #f5f7f8; border-bottom: 1px solid #e0e5e8; } .klshay-blog-category-header > .container { min-height: clamp(200px, 22vw, 280px); padding-block: clamp(1.35rem, 3.5vw, 2.4rem); } .klshay-blog-category-breadcrumb { color: #69737c; display: flex; flex-wrap: wrap; font-size: .76rem; gap: .35rem; margin-bottom: clamp(1.3rem, 3vw, 2rem); } .klshay-blog-category-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: .14em; } .klshay-blog-category-breadcrumb a:hover, .klshay-blog-category-breadcrumb a:focus-visible { color: var(--ink); } .klshay-blog-category-header__intro { max-width: 760px; } .klshay-blog-category-header__intro > p, .klshay-blog-category__eyebrow, .klshay-blog-category-cta p { color: #506b65; font-size: .72rem; font-weight: 800; letter-spacing: .09em; margin: 0 0 .45rem; text-transform: uppercase; } .klshay-blog-category-header h1 { color: var(--ink); font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.025em; line-height: 1.08; margin: 0; } .klshay-blog-category-header__intro > div { color: #606b74; font-size: clamp(.93rem, 1.7vw, 1.08rem); line-height: 1.55; margin-top: .65rem; max-width: 62ch; } .klshay-blog-category-featured { padding-top: clamp(1.8rem, 4vw, 3.2rem); } .klshay-blog-category-featured > .klshay-blog-category__eyebrow { margin-bottom: .75rem; } .klshay-blog-category-featured article { background: #f5f7f8; border: 1px solid #e0e5e8; border-radius: 14px; display: grid; overflow: hidden; } .klshay-blog-category-featured__image, .klshay-blog-category-card__image { background: #e8ecee; display: block; } .klshay-blog-category-featured__image:empty { min-height: 240px; } .klshay-blog-category-featured__image img { aspect-ratio: 16 / 10; display: block; height: 100%; object-fit: cover; width: 100%; } .klshay-blog-category-featured__content { align-content: center; display: grid; justify-items: start; padding: clamp(1.15rem, 4vw, 3rem); } .klshay-blog-category-featured__content > span, .klshay-blog-category-card > div > span { color: #49635d; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .klshay-blog-category-featured h2 { font-size: clamp(1.45rem, 3vw, 2.3rem); letter-spacing: -.015em; line-height: 1.14; margin: .45rem 0; } .klshay-blog-category-featured h2 a, .klshay-blog-category-card h3 a { color: var(--ink); text-decoration: none; } .klshay-blog-category-featured h2 a:hover, .klshay-blog-category-featured h2 a:focus-visible, .klshay-blog-category-card h3 a:hover, .klshay-blog-category-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: .13em; } .klshay-blog-category-featured__content > p { color: #626d76; font-size: .92rem; line-height: 1.6; margin: .2rem 0 .7rem; max-width: 52ch; } .klshay-blog-category__meta { align-items: center; color: #68737c; display: flex; flex-wrap: wrap; font-size: .75rem; gap: .35rem; } .klshay-blog-category__button { background: var(--ink); border-radius: 7px; color: #fff; display: inline-block; font-size: .78rem; font-weight: 800; margin-top: 1.1rem; padding: .68rem .9rem; text-decoration: none; } .klshay-blog-category__button:hover, .klshay-blog-category__button:focus-visible { background: #2e3730; outline: 0; } .klshay-blog-category-latest { padding-top: clamp(2.5rem, 6vw, 4.5rem); } .klshay-blog-category-section-head { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; } .klshay-blog-category-section-head h2, .klshay-blog-category-seo h2 { color: var(--ink); font-size: clamp(1.4rem, 2.7vw, 1.9rem); margin: 0; } .klshay-blog-category-section-head > span { color: #69737c; font-size: .76rem; padding-bottom: .15rem; white-space: nowrap; } .klshay-blog-category-grid { display: grid; gap: 1rem; } .klshay-blog-category-card { border: 1px solid #dfe5e8; border-radius: 10px; display: grid; overflow: hidden; } .klshay-blog-category-card__image:empty { min-height: 170px; } .klshay-blog-category-card__image img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; } .klshay-blog-category-card > div { padding: .95rem; } .klshay-blog-category-card h3 { font-size: 1rem; line-height: 1.32; margin: .35rem 0; } .klshay-blog-category-card p { color: #68737c; font-size: .79rem; line-height: 1.5; margin: 0 0 .65rem; } .klshay-blog-category-pagination { margin-top: 1.5rem; text-align: center; } .klshay-blog-category-pagination .page-numbers { align-items: center; display: inline-flex; flex-wrap: wrap; gap: .45rem; justify-content: center; list-style: none; margin: 0; padding: 0; } .klshay-blog-category-pagination li { margin: 0; } .klshay-blog-category-pagination a, .klshay-blog-category-pagination .current { border: 1px solid #d7dfe3; border-radius: 6px; color: var(--ink); display: inline-block; font-size: .78rem; font-weight: 700; padding: .55rem .7rem; text-decoration: none; } .klshay-blog-category-pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; } .klshay-blog-category-pagination a.next { background: var(--ink); border-color: var(--ink); color: #fff; } .klshay-blog-category-pagination a:hover, .klshay-blog-category-pagination a:focus-visible { background: #f3f5f6; outline: 0; } .klshay-blog-category-pagination a.next:hover, .klshay-blog-category-pagination a.next:focus-visible { background: #2e3730; } .klshay-blog-category-empty { color: #67727b; margin: 0; } .klshay-blog-category-related { padding-top: clamp(2.5rem, 6vw, 4.5rem); } .klshay-blog-category-related > div:last-child { display: grid; gap: .65rem; } .klshay-blog-category-related a { align-items: center; border: 1px solid #dfe5e8; border-radius: 9px; color: var(--ink); display: flex; font-size: .86rem; font-weight: 800; justify-content: space-between; min-height: 54px; padding: .7rem .85rem; text-decoration: none; } .klshay-blog-category-related a:hover, .klshay-blog-category-related a:focus-visible { background: #f5f7f8; border-color: #bfcacb; outline: 0; } .klshay-blog-category-related small { color: #6c7780; font-size: .72rem; font-weight: 600; } .klshay-blog-category-cta { align-items: center; background: var(--ink); border-radius: 12px; color: #fff; display: grid; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding: clamp(1.35rem, 4vw, 2.4rem); } .klshay-blog-category-cta p { color: #c9d2d1; } .klshay-blog-category-cta h2 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.2; margin: 0; max-width: 28ch; } .klshay-blog-category-cta span { color: #d4dcdb; display: block; font-size: .86rem; margin-top: .4rem; max-width: 62ch; } .klshay-blog-category-cta > a { background: #fff; border-radius: 7px; color: var(--ink); font-size: .8rem; font-weight: 800; justify-self: start; padding: .7rem .9rem; text-decoration: none; } .klshay-blog-category-seo { color: #48535b; line-height: 1.7; max-width: 900px; padding-top: clamp(2.5rem, 6vw, 4.5rem); } .klshay-blog-category-seo h2 { margin-bottom: .8rem; } .klshay-blog-category-seo > div > :first-child { margin-top: 0; } .klshay-blog-category-seo a { color: #2d514a; font-weight: 700; text-decoration: underline; text-underline-offset: .14em; } @media (min-width: 620px) { .klshay-blog-category-related > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) { .klshay-blog-category-featured article { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); } .klshay-blog-category-featured__image:empty { min-height: 360px; } .klshay-blog-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .klshay-blog-category-card { grid-template-rows: auto 1fr; } .klshay-blog-category-cta { grid-template-columns: minmax(0, 1fr) auto; } .klshay-blog-category-cta > a { justify-self: end; } }