/* Theme Name: CredoPlus Store Theme URI: https://example.com/credoplus-store Author: CredoPlus Description: Minimalna WooCommerce tema inspirirana premium tech trgovinama. Version: 1.3.0 Text Domain: credoplus-store Requires at least: 6.0 Requires PHP: 7.4 */ :root { --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --page: #fff; --soft: #f5f5f7; --blue: #0071e3; --blue-hover: #0077ed; --radius: 20px; --wrap: 1280px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--page); font-family: 'Space Grotesk', Arial, sans-serif; font-size: 16px; line-height: 1.45; } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } .container { width: min(calc(100% - 48px), var(--wrap)); margin-inline: auto; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; word-wrap: normal; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.84); border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: saturate(180%) blur(18px); } .utility-bar { background: #1d1d1f; color: #f5f5f7; font-size: 12px; } .utility-inner { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .utility-inner p { margin: 0; } .header-main { min-height: 76px; display: grid; grid-template-columns: auto auto minmax(230px, 1fr) auto; align-items: center; gap: 28px; } .custom-logo-link { display: flex; align-items: center; flex: 0 0 auto; } .custom-logo { display: block; max-height: 45px !important; width: auto !important; max-width: 190px; object-fit: contain; } .wordmark { font-size: 21px; font-weight: 700; letter-spacing: -.7px; white-space: nowrap; } .wordmark span { color: var(--blue); } .primary-navigation ul { list-style: none; display: flex; align-items: center; gap: 24px; padding: 0; margin: 0; font-size: 14px; font-weight: 500; } .primary-navigation a:hover, .primary-navigation .current-menu-item > a { color: var(--blue); } .header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; } .icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 36px; color: var(--ink); } .icon-link svg, [data-lucide] { width: 19px; height: 19px; stroke-width: 1.8; } .cart-count { position: absolute; top: 3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 10px; font-weight: 700; } .mobile-menu-button { display: none; border: 0; background: transparent; padding: 7px 0; color: inherit; cursor: pointer; } /* Search */ .header-search { position: relative; width: 100%; max-width: none; justify-self: stretch; } .search-form { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; background: var(--soft); border-radius: 11px; transition: box-shadow .2s, background .2s; } .search-form:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--blue); } .search-form button { display: flex; border: 0; background: transparent; padding: 0; color: var(--muted); cursor: pointer; } .search-form input { min-width: 0; width: 100%; border: 0; outline: none; background: transparent; font-size: 14px; } .header-search .search-results { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(680px, 100%); max-height: 390px; overflow-y: auto; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.16); } .header-search .search-results.is-open { display: block; } .header-search .search-result { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 64px; padding: 7px 9px; border-radius: 10px; } .header-search .search-result:hover, .header-search .search-result:focus { background: var(--soft); } .header-search .search-result img { width: 50px; height: 50px; border-radius: 8px; object-fit: contain; background: var(--soft); mix-blend-mode: multiply; } .header-search .search-result-copy { display: grid; min-width: 0; gap: 3px; } .header-search .search-result-title { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .header-search .search-result-category { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .header-search .search-result-price { min-width: 72px; color: var(--ink); font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; } .header-search .search-empty { padding: 14px 12px; color: var(--muted); font-size: 13px; } /* Content */ .site-content { min-height: 60vh; } .site-footer { margin-top: 72px; padding: 44px 0 20px; background: var(--soft); color: #424245; font-size: 12px; } .footer-grid { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 34px; padding-bottom: 36px; } .footer-grid h3 { margin: 0 0 12px; color: var(--ink); font-size: 13px; } .footer-grid p { margin: 0; max-width: 270px; } .footer-grid ul { padding: 0; margin: 0; list-style: none; } .footer-grid li + li { margin-top: 8px; } .footer-grid a:hover { color: var(--blue); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); } /* Home */ .store-hero { position: relative; min-height: 570px; overflow: hidden; display: grid; place-items: center; color: #f5f5f7; background: radial-gradient(circle at 52% 86%, #214e99 0, #0b214c 25%, #060a16 58%, #000 100%); text-align: center; } .store-hero::before { content: ''; position: absolute; width: min(76vw, 910px); aspect-ratio: 1.4; border: 10px solid rgba(82,155,255,.16); border-radius: 50%; transform: rotate(-14deg) translateY(170px); box-shadow: 0 0 90px 25px rgba(0,107,255,.16), inset 0 0 120px rgba(0,107,255,.12); } .hero-content { position: relative; z-index: 1; padding: 54px 20px 230px; } .eyebrow { margin: 0 0 7px; color: #86868b; font-size: 15px; font-weight: 600; } .brand-eyebrow { text-transform: uppercase; } .store-hero .eyebrow { color: #9ec7ff; } .store-hero h1 { max-width: 730px; margin: 0 auto 10px; font-size: clamp(42px, 6vw, 80px); line-height: .98; letter-spacing: -4px; } .store-hero .lead { margin: 0 auto 22px; max-width: 500px; color: #d2d2d7; font-size: clamp(18px, 2vw, 23px); } .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 19px; border: 1px solid var(--blue); border-radius: 980px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; transition: .2s ease; } .button:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; transform: translateY(-1px); } .button-outline { border-color: var(--blue); background: transparent; color: var(--blue); } .button-outline:hover { color: #fff; } .shop-section { padding-top: 88px; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; } .section-heading h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); letter-spacing: -2px; line-height: 1.05; } .section-heading h2 em { color: var(--muted); font-style: normal; } .text-link { color: var(--blue); font-size: 15px; font-weight: 600; } .text-link:hover { text-decoration: underline; } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .category-card { min-height: 252px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; background: var(--soft); border-radius: var(--radius); transition: transform .25s ease; } .category-card:hover { transform: scale(1.015); } .category-card img { position: absolute; top: 20px; left: 15%; width: 70%; height: 145px; object-fit: contain; mix-blend-mode: multiply; } .category-card h3 { position: relative; z-index: 1; margin: 0; font-size: 21px; letter-spacing: -.7px; } .category-card small { position: relative; z-index: 1; margin-top: 2px; color: var(--blue); font-weight: 600; } .category-card:nth-child(2n) { background: #ecf4ff; } .category-card:nth-child(3n) { background: #fff0f5; } /* WooCommerce catalogue */ .woocommerce .woocommerce-breadcrumb { width: min(calc(100% - 48px), var(--wrap)); margin: 24px auto 20px; color: var(--muted); font-size: 13px; } .woocommerce .woocommerce-breadcrumb a { color: var(--muted); } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--blue); } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 24px; } .woocommerce .woocommerce-ordering select { padding: 9px 30px 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .woocommerce .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; clear: both; margin: 0 !important; padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product { width: auto !important; float: none !important; display: flex; flex-direction: column; min-width: 0; margin: 0 !important; padding: 16px 16px 20px; border-radius: var(--radius); background: var(--soft); transition: transform .25s, box-shadow .25s; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.08); } .woocommerce ul.products li.product a img { height: 220px; margin: 0 0 14px !important; object-fit: contain; mix-blend-mode: multiply; } .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 42px; padding: 0 !important; color: var(--ink); font-size: 16px !important; line-height: 1.3; font-weight: 600; } .woocommerce ul.products li.product .price { margin: 8px 0 14px !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 700; } .woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; } .woocommerce ul.products li.product .price ins { text-decoration: none; } .woocommerce span.onsale { top: 13px !important; left: 13px !important; right: auto !important; min-height: 0 !important; margin: 0 !important; padding: 4px 8px !important; background: #ff3b30 !important; border-radius: 6px !important; font-size: 11px !important; line-height: 1.1 !important; } .woocommerce ul.products li.product .button { margin-top: auto !important; min-height: 36px; padding: 0 14px; background: var(--blue); color: #fff; font-size: 13px; text-align: center; } .woocommerce ul.products li.product .button.added { display: none; } .woocommerce nav.woocommerce-pagination { margin: 40px 0; } .woocommerce nav.woocommerce-pagination ul { border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 2px; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 34px; border-radius: 50%; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: #fff; } .woocommerce-page .site-main, .woocommerce-page .woocommerce-notices-wrapper, .woocommerce-page .woocommerce-result-count, .woocommerce-page .woocommerce-ordering { width: min(calc(100% - 48px), var(--wrap)); margin-left: auto; margin-right: auto; } .woocommerce-page .site-main { padding-bottom: 20px; } .woocommerce-products-header { margin-bottom: 28px; } .woocommerce-products-header__title.page-title { margin: 0; font-size: clamp(35px, 4vw, 54px); letter-spacing: -2.5px; } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top-color: var(--blue); background: #eef6ff; } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--blue); } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border-radius: 980px; background: var(--blue); color: #fff; font-weight: 600; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--blue-hover); color: #fff; } /* Product page */ .single-product .product-detail.product { display: block !important; padding-top: 24px; } .single-product .product-summary-panel { width: auto !important; float: none !important; } .single-product .product-summary-panel p.price, .single-product .product-summary-panel span.price { color: var(--ink); font-size: 22px; font-weight: 700; } .single-product .woocommerce-product-details__short-description { color: #424245; } .single-product .quantity .qty { height: 42px; border: 1px solid var(--line); border-radius: 8px; } .single-product .single_add_to_cart_button { min-height: 42px; margin-left: 8px; } .single-product .woocommerce-tabs { padding-top: 46px; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--line); } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li { padding: 0; margin: 0 22px 0 0; border: 0; border-radius: 0; background: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 1px; color: var(--muted); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom: 2px solid var(--ink); } .woocommerce #reviews #comments ol.commentlist li .comment-text { border-color: var(--line); } .single-product .related.products { padding-top: 15px; } .single-product .related.products > h2 { font-size: 28px; letter-spacing: -1px; } .entry-content, .entry-header, .comments-area, .not-found { width: min(calc(100% - 48px), 850px); margin-inline: auto; } .entry-header { margin-top: 55px; } .entry-title { font-size: 44px; letter-spacing: -2px; } .entry-content { padding-top: 20px; } /* Full storefront catalogue */ .catalog-page { padding-bottom: 35px; } .catalog-hero { padding: 66px 0 57px; color: #fff; background: radial-gradient(circle at 70% 65%, #3a77c5 0, #17213a 30%, #0d0e12 70%); } .catalog-hero .eyebrow { color: #a9caff; } .catalog-hero h1 { max-width: 800px; margin: 0; font-size: clamp(46px, 6vw, 76px); line-height: .98; letter-spacing: -3.8px; } .catalog-hero p:last-child { max-width: 440px; margin: 14px 0 0; color: #d2d2d7; font-size: 18px; } .catalog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding-top: 16px; } .catalog-filter { align-self: start; position: sticky; top: 114px; } .filter-heading { display: none; } .filter-group { padding: 18px 0; border-top: 1px solid var(--line); } .filter-group:first-of-type { border-top: 0; padding-top: 0; } .filter-group h2 { margin: 0 0 9px; font-size: 15px; letter-spacing: -.3px; } .filter-link { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; color: #424245; font-size: 14px; } .filter-link small { color: #86868b; font-size: inherit; } .filter-link:hover, .filter-link.is-active { color: var(--blue); } .catalog-products { min-width: 0; } .catalog-toolbar { min-height: 46px; display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .catalog-toolbar .woocommerce-result-count { float: none; margin: 10px 0 0; color: var(--muted); font-size: 13px; } .catalog-toolbar .woocommerce-ordering { float: none; margin: 0; } .catalog-ordering { display: flex; flex: 1; justify-content: space-between; align-items: start; } .store-sorting { display: inline-flex; align-items: center; gap: 9px; } .store-sorting > label { color: var(--muted); font-size: 13px; font-weight: 600; } .store-sort-control { position: relative; display: flex; align-items: center; min-width: 206px; height: 42px; padding-left: 13px; border: 1px solid #d2d2d7; border-radius: 11px; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: border-color .2s, box-shadow .2s; } .store-sort-control:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.13); } .store-sort-control > svg:first-child { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue); } .woocommerce .woocommerce-ordering .store-sort-control select { width: 100%; height: 40px; appearance: none; padding: 0 34px 0 9px !important; border: 0 !important; outline: 0; background: transparent !important; color: var(--ink) !important; cursor: pointer; font-size: 13px; font-weight: 600; } .woocommerce .woocommerce-ordering .store-sort-control select option { background: #fff; color: var(--ink); } .store-sort-chevron { position: absolute; right: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; } .filter-trigger { display: none; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; } .filter-trigger svg { width: 16px; } .catalog-products .products { grid-template-columns: repeat(3, 1fr); } .woocommerce ul.products li.product.store-product-card { padding: 0; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #e7e7ea; } .woocommerce ul.products li.product.store-product-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.09); } .product-card-media { position: relative; min-height: 236px; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--soft); } .woocommerce ul.products li.product .product-card-media a { display: block; width: 100%; } .woocommerce ul.products li.product .product-card-media img { width: 100%; height: 202px; margin: 0 !important; object-fit: contain; mix-blend-mode: multiply; } .product-card-badge { position: absolute; z-index: 1; top: 13px; left: 13px; padding: 4px 8px; border-radius: 6px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; } .product-card-copy { display: flex; flex: 1; flex-direction: column; padding: 17px 17px 15px; } .product-card-category { margin: 0 0 4px; color: var(--blue); font-size: 12px; font-weight: 700; } .woocommerce ul.products li.product .product-card-copy .woocommerce-loop-product__title { min-height: 44px; margin: 0; overflow: hidden; font-size: 17px !important; line-height: 1.3; } .woocommerce ul.products li.product .product-card-copy .woocommerce-loop-product__title a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-card-description { min-height: 34px; margin: 7px 0 14px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; } .woocommerce ul.products li.product .product-card-bottom .price { margin: 0 !important; font-size: 14px !important; } .woocommerce ul.products li.product .product-card-bottom .product-card-add { flex: 0 0 auto; width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: inline-grid; place-items: center; margin: 0 !important; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: #fff; transition: transform .18s ease, background .18s ease; } .woocommerce ul.products li.product .product-card-bottom .product-card-add:hover { background: var(--blue-hover); color: #fff; transform: scale(1.08); } .woocommerce ul.products li.product .product-card-bottom .product-card-add svg { width: 16px; height: 16px; } .woocommerce ul.products li.product .product-card-bottom .product-card-view { background: var(--ink); } .woocommerce ul.products li.product .product-card-bottom .product-card-add.loading { opacity: .62; pointer-events: none; } .woocommerce ul.products li.product.store-product-card > .onsale { display: none; } /* Product detail */ .single-product .site-content { padding-top: 0; } .single-product .product-detail { display: block; max-width: 1320px; padding-top: 24px; padding-bottom: 0; } .product-breadcrumb { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; color: var(--muted); font-size: 13px; } .product-breadcrumb a:hover { color: var(--blue); } .product-breadcrumb svg { width: 14px; height: 14px; } .product-showcase { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr); gap: clamp(42px, 5.5vw, 82px); align-items: start; } .product-gallery-panel { position: relative; min-width: 0; } .store-gallery-main { position: relative; min-height: 590px; display: grid; place-items: center; overflow: hidden; border: 1px solid #ededf0; border-radius: 26px; background: radial-gradient(circle at 50% 35%, #fff 0, #f7f7f9 52%, #ececf0 100%); } .store-main-image { width: 100%; height: 100%; min-height: 590px; display: grid; place-items: center; padding: 48px; } .store-gallery-main #store-product-main-image { display: block; width: 100%; height: 494px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .18s ease; } .store-sale-badge { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 6px 10px; border-radius: 8px; background: #ff453a; color: #fff; font-size: 12px; font-weight: 700; } .store-image-hint { position: absolute; right: 17px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; pointer-events: none; } .store-image-hint svg { width: 15px; height: 15px; } .store-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 13px; } .store-gallery-thumb { width: 70px; height: 70px; display: grid; place-items: center; overflow: hidden; padding: 5px; border: 1px solid transparent; border-radius: 12px; background: var(--soft); cursor: pointer; transition: border-color .18s, background .18s; } .store-gallery-thumb:hover, .store-gallery-thumb.is-active { border-color: var(--blue); background: #fff; } .store-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .product-summary-panel { min-width: 0; padding: 17px 0 4px; } .product-kicker { margin: 0 0 7px; color: var(--blue); font-size: 14px; font-weight: 700; } .single-product .product-summary-panel .product_title { margin-bottom: 15px; font-size: clamp(31px, 3.35vw, 45px); line-height: 1.05; letter-spacing: -2.1px; overflow-wrap: anywhere; } .single-product .product-summary-panel .price { display: block; margin: 0 0 22px !important; } .single-product .product-summary-panel .woocommerce-product-details__short-description { margin-bottom: 27px; font-size: 16px; } .single-product .product-summary-panel form.cart { display: flex; align-items: center; gap: 6px; margin: 22px 0 24px; padding: 18px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .single-product .product-summary-panel form.variations_form.cart { display: block; } .single-product .product-summary-panel table.variations { margin-bottom: 14px; } .single-product .product-summary-panel table.variations select { width: 100%; min-height: 40px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .single-product .product-summary-panel .single_variation_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .single-product .product-summary-panel .single_variation_wrap .woocommerce-variation { width: 100%; } .single-product .product-summary-panel .single_add_to_cart_button { flex: 1; margin-left: 0; } .purchase-reassurance { display: grid; gap: 14px; padding: 3px 0 20px; } .purchase-reassurance > div { display: flex; align-items: center; gap: 12px; } .purchase-reassurance svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--blue); } .purchase-reassurance p { display: grid; gap: 1px; margin: 0; font-size: 13px; line-height: 1.25; } .purchase-reassurance strong { font-weight: 600; } .purchase-reassurance span { color: var(--muted); font-size: 12px; } .product-share { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 13px; font-weight: 600; } .product-share svg { width: 15px; } .product-specs { display: grid; grid-template-columns: .75fr 1.25fr; gap: 35px; margin-top: 82px; padding: 52px; border-radius: 24px; background: #111114; color: #f5f5f7; } .product-specs .eyebrow { margin-bottom: 6px; color: #89bbff; font-size: 12px; } .product-specs h2 { max-width: 290px; margin: 0; font-size: clamp(29px, 3.3vw, 44px); line-height: 1.05; letter-spacing: -1.8px; } .spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px 20px; } .spec { display: flex; flex-direction: column; gap: 5px; } .spec svg { width: 21px; height: 21px; margin-bottom: 5px; color: #89bbff; } .spec span { color: #a1a1a6; font-size: 12px; } .spec strong { font-size: 16px; font-weight: 600; } .single-product .woocommerce-tabs { width: min(calc(100% - 48px), var(--wrap)); margin-left: auto; margin-right: auto; } .single-product .woocommerce-tabs { padding-top: 70px; } .single-product .related-products-section { width: 100% !important; float: none !important; clear: both; display: block !important; margin: 76px 0 0 !important; padding: 72px 0 82px; background: var(--soft); } .single-product .related-products-section .related-products-inner { width: min(calc(100% - 48px), var(--wrap)); margin: 0 auto; } .related-products-heading { margin-bottom: 28px; text-align: center; } .related-products-heading .eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 12px; } .related-products-heading h2 { margin: 0; font-size: clamp(29px, 3vw, 42px); letter-spacing: -1.6px; } .single-product .related-products-section .products { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* Cart, checkout and account retain the same calm, spacious purchase flow. */ .store-utility-page { padding: 0 0 55px; } .utility-page-header { padding: 52px 0 27px; background: var(--soft); } .utility-page-header h1 { margin: 0; font-size: clamp(36px, 4.5vw, 58px); letter-spacing: -2.5px; } .utility-page-content { max-width: 1120px; padding-top: 38px; } .woocommerce-cart-form table.shop_table, .woocommerce-checkout-review-order-table, .woocommerce-account .woocommerce-MyAccount-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px #e5e5e8; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: #e5e5e8; padding: 18px 14px; } .woocommerce-cart-form .product-thumbnail img { width: 84px; border-radius: 10px; background: var(--soft); } .woocommerce-cart-form .product-name a { font-weight: 600; } .woocommerce-cart-form .quantity .qty { min-height: 34px; border: 1px solid var(--line); border-radius: 7px; } .woocommerce-cart-form .actions .coupon .input-text { min-height: 38px; width: 160px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; } .cart-collaterals .cart_totals { width: min(100%, 400px); margin-top: 30px; padding: 23px; border-radius: 18px; background: var(--soft); } .cart-collaterals .cart_totals h2 { margin-top: 0; font-size: 23px; } .cart-collaterals .wc-proceed-to-checkout a.checkout-button { min-height: 47px; padding: 12px; font-size: 15px; } .woocommerce-checkout form .form-row label { margin-bottom: 6px; font-size: 13px; font-weight: 600; } .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row textarea, .woocommerce-checkout form .form-row select { min-height: 43px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .woocommerce-checkout #order_review_heading { margin-top: 28px; font-size: 25px; } .woocommerce-checkout #payment { border-radius: 14px; background: var(--soft); } .woocommerce-checkout #payment div.payment_box { border-radius: 9px; background: #fff; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; } .woocommerce-account .woocommerce-MyAccount-navigation { width: 205px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { overflow: hidden; padding: 0; border: 1px solid #e5e5e8; border-radius: 13px; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid #e5e5e8; } .woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 11px 13px; font-size: 14px; } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a, .woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--soft); color: var(--blue); } .woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 240px); padding: 23px; } /* WooCommerce Cart block: a compact product grid with a clear order panel. */ .store-flow-content { max-width: 1210px; padding-top: 56px; padding-bottom: 82px; } .woocommerce-cart .utility-page-header, .woocommerce-checkout .utility-page-header { display: none !important; } .woocommerce-cart .utility-page-content, .woocommerce-checkout .utility-page-content { padding-top: 56px; } .wc-block-cart .wc-block-components-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: clamp(30px, 5vw, 72px); align-items: start; } .wc-block-cart .wc-block-cart__main, .wc-block-cart .wc-block-components-main { width: auto; min-width: 0; padding: 0 24px 8px; border: 1px solid #e6e6e9; border-radius: 18px; background: #fff; overflow: hidden; } .wc-block-cart .wc-block-cart-items { margin: 0; border-top: 0; } .wc-block-cart .wc-block-cart-items__header { padding: 18px 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .wc-block-cart .wc-block-cart-items__row { padding: 20px 0; border-bottom: 1px solid var(--line); transition: background .2s; } .wc-block-cart .wc-block-cart-items__row:last-child { border-bottom: 0; } .wc-block-cart .wc-block-cart-item__image img { width: 96px; border: 1px solid #e8e8eb; border-radius: 13px; background: var(--soft); } .wc-block-cart .wc-block-components-product-name { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.38; } .wc-block-cart .wc-block-components-product-metadata, .wc-block-cart .wc-block-components-product-price { color: var(--muted); font-size: 13px; } .wc-block-cart .wc-block-components-quantity-selector { height: 36px; border-color: var(--line); border-radius: 9px; background: var(--soft); } .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-width: 30px; font-size: 13px; } .wc-block-cart .wc-block-cart-item__remove-link { display: inline-grid; place-items: center; color: var(--muted); font-size: 12px; } .wc-block-cart .wc-block-cart-item__remove-link:hover { color: #ff453a; } .wc-block-cart .wc-block-components-product-sale-badge { padding: 3px 6px; border: 0; border-radius: 5px; background: #e9f3ff; color: var(--blue); font-size: 10px; font-weight: 700; } .wc-block-cart .wc-block-components-sidebar, .wc-block-cart .wc-block-cart__sidebar { position: sticky; top: 122px; width: auto; padding: 24px; border: 1px solid #e6e6e9; border-radius: 18px; background: var(--soft); } .wc-block-cart .wc-block-components-sidebar h2, .wc-block-cart .wc-block-components-sidebar h3 { margin: 0 0 18px; color: var(--ink); font-size: 16px; letter-spacing: .01em; } .wc-block-cart .wc-block-components-totals-wrapper { padding: 0; border-top: 0; } .wc-block-cart .wc-block-components-totals-item { padding: 13px 0; border-color: var(--line); font-size: 14px; } .wc-block-cart .wc-block-components-totals-footer-item { margin-top: 2px; padding-top: 18px; color: var(--ink); font-size: 18px; } .wc-block-cart .wc-block-components-totals-coupon { padding: 12px 0; border-top: 1px solid var(--line); } .wc-block-cart .wc-block-components-totals-coupon-link { color: var(--blue); font-size: 13px; font-weight: 600; } .wc-block-cart .wc-block-components-totals-coupon__form { gap: 8px; margin-top: 10px; } .wc-block-cart .wc-block-components-totals-coupon__form input { min-height: 42px; border-color: var(--line); border-radius: 9px; background: #fff; } .wc-block-cart .wc-block-components-totals-coupon__form button { min-height: 42px; padding: 0 15px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; } .wc-block-cart .wc-block-components-totals-coupon__form button:hover { background: #333; color: #fff; } .wc-block-cart .wc-block-cart__submit { margin-top: 18px; } .wc-block-cart .wc-block-cart__submit-container { padding: 0; } .wc-block-cart .wc-block-cart__submit-button { min-height: 50px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; transition: background .2s, transform .2s; } .wc-block-cart .wc-block-cart__submit-button:hover { background: var(--blue-hover); color: #fff; transform: translateY(-1px); } .wc-block-cart .wc-block-components-totals-shipping { border-top: 1px solid var(--line); } .wc-block-cart .wc-block-components-totals-shipping .wc-block-components-totals-item { padding-top: 16px; } .wc-block-cart .wc-block-components-button:not(.wc-block-cart__submit-button) { border-radius: 8px; } /* Checkout block follows the same quiet two-column purchase layout. */ .wc-block-checkout .wc-block-components-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: clamp(38px, 5vw, 72px); align-items: start; } .wc-block-checkout .wc-block-checkout__main, .wc-block-checkout .wc-block-components-main { width: auto; min-width: 0; } .wc-block-checkout .wc-block-components-sidebar, .wc-block-checkout .wc-block-checkout__sidebar { position: sticky; top: 122px; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; } .wc-block-checkout .wc-block-components-checkout-step { margin: 0 0 28px; padding: 0 0 28px; border-bottom: 1px solid var(--line); } .wc-block-checkout .wc-block-components-checkout-step__title { margin: 0 0 15px; color: var(--ink); font-size: 20px; letter-spacing: -.45px; } .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-block-checkout .wc-block-components-address-form input, .wc-block-checkout .wc-block-components-address-form select { min-height: 46px; border: 1px solid var(--line) !important; border-radius: 9px; background: #fff; box-shadow: none !important; } .wc-block-checkout .wc-block-components-radio-control__option { padding: 15px; border: 1px solid var(--line) !important; border-radius: 10px; box-shadow: none !important; } .wc-block-checkout .wc-block-components-radio-control__option--selected { border-color: var(--blue) !important; background: #f5faff; box-shadow: 0 0 0 1px var(--blue) !important; } .wc-block-checkout .wc-block-components-order-summary { overflow: hidden; padding: 24px; border: 1px solid #e1e1e5; border-radius: 20px; background: var(--soft); box-shadow: 0 10px 28px rgba(0,0,0,.04); } .wc-block-checkout .wc-block-components-order-summary__title { margin: 0 0 17px; font-size: 19px; letter-spacing: -.4px; } .wc-block-checkout .wc-block-components-order-summary-item { padding: 15px 0; border-color: var(--line); } .wc-block-checkout .wc-block-components-order-summary-item__image img { width: 62px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; } .wc-block-checkout .wc-block-components-order-summary-item__description { min-width: 0; padding-left: 12px; } .wc-block-checkout .wc-block-components-order-summary-item__quantity { font-size: 11px; } .wc-block-checkout .wc-block-components-order-summary-item__individual-prices, .wc-block-checkout .wc-block-components-order-summary-item__total-price { font-size: 12px; } .wc-block-checkout .wc-block-components-order-summary-item__quantity { border-color: var(--soft); background: var(--ink); } .wc-block-checkout .wc-block-components-totals-wrapper { padding: 0; border-top: 0; } .wc-block-checkout .wc-block-components-totals-item { padding: 12px 0; border-color: var(--line); font-size: 14px; } .wc-block-checkout .wc-block-components-totals-footer-item { padding-top: 18px; color: var(--ink); font-size: 18px; } .wc-block-checkout .wc-block-components-checkout-place-order-button { min-height: 50px; margin-top: 18px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 700; } .wc-block-checkout .wc-block-components-checkout-place-order-button:hover { background: var(--blue-hover); color: #fff; } /* Clean checkout reset: one summary panel, no nested borders or colliding labels. */ .wc-block-checkout .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(400px, 430px) !important; gap: clamp(42px, 5vw, 76px); } .wc-block-checkout .wc-block-components-main, .wc-block-checkout .wc-block-checkout__main { grid-column: 1; width: 100% !important; max-width: none !important; } .wc-block-checkout .wc-block-components-sidebar, .wc-block-checkout .wc-block-checkout__sidebar { grid-column: 2; width: 100% !important; max-width: none !important; } .wc-block-checkout .wc-block-components-checkout-step { margin: 0 0 34px; padding: 0; border: 0 !important; } .wc-block-checkout .wc-block-components-checkout-step__title { margin-bottom: 14px; font-size: 21px; } .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-block-checkout .wc-block-components-address-form input, .wc-block-checkout .wc-block-components-address-form select { border: 0 !important; border-radius: 11px; background: var(--soft); } .wc-block-checkout .wc-block-components-text-input input:focus, .wc-block-checkout .wc-block-components-address-form input:focus, .wc-block-checkout .wc-block-components-address-form select:focus { box-shadow: 0 0 0 2px var(--blue) !important; } .wc-block-checkout .wc-block-components-address-card, .wc-block-checkout .wc-block-components-address-form__address-card { padding: 18px; border: 0 !important; border-radius: 14px; background: var(--soft); box-shadow: none !important; } .wc-block-checkout .wc-block-components-radio-control__option { margin-top: 8px; padding: 17px; border: 0 !important; border-radius: 14px; background: var(--soft); box-shadow: none !important; } .wc-block-checkout .wc-block-components-radio-control__option--selected { border: 0 !important; background: #eaf3ff; box-shadow: inset 0 0 0 2px var(--blue) !important; } .wc-block-checkout .wc-block-components-order-summary { padding: 0; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; } .wc-block-checkout .wc-block-components-order-summary__content, .wc-block-checkout .wc-block-components-order-summary-content { padding: 26px; border: 0 !important; border-radius: 20px; background: var(--soft); box-shadow: 0 12px 32px rgba(0,0,0,.05); } .wc-block-checkout .wc-block-components-order-summary__title { margin: 0 0 19px; font-size: 20px; } .wc-block-checkout .wc-block-components-order-summary-item { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) max-content; column-gap: 12px; align-items: start; padding: 12px 0; border: 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__image { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__image img { width: 62px; height: 62px; object-fit: contain; } .wc-block-checkout .wc-block-components-order-summary-item__description { grid-column: 2; grid-row: 1 / span 2; min-width: 0; padding: 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__total-price { grid-column: 3; grid-row: 1; margin: 0 !important; white-space: nowrap; } .wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-name { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .wc-block-checkout .wc-block-components-product-sale-badge { display: none !important; } .wc-block-checkout .wc-block-components-totals-wrapper, .wc-block-checkout .wc-block-components-totals-coupon { border: 0 !important; } .wc-block-checkout .wc-block-components-totals-item { padding: 10px 0; border: 0 !important; } .wc-block-checkout .wc-block-components-totals-footer-item { margin-top: 9px; padding-top: 18px; border-top: 1px solid #dcdce0 !important; } /* Cart items use the exact same panel language as the totals card. */ .wc-block-cart .wc-block-cart__main, .wc-block-cart .wc-block-components-main { padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; } .wc-block-cart .wc-block-cart-items { border-collapse: separate; border-spacing: 0 14px; } .wc-block-cart .wc-block-cart-items__header { padding: 0 0 4px; border: 0; } .wc-block-cart .wc-block-cart-items__row { padding: 18px; border: 1px solid #e1e1e5 !important; border-radius: 18px; background: var(--soft); box-shadow: 0 8px 22px rgba(0,0,0,.025); } .wc-block-cart .wc-block-cart-items__row td { padding-top: 18px; padding-bottom: 18px; border-top: 1px solid #e1e1e5 !important; border-bottom: 1px solid #e1e1e5 !important; background: var(--soft); } .wc-block-cart .wc-block-cart-items__row td:first-child { padding-left: 18px; border-left: 1px solid #e1e1e5 !important; border-radius: 18px 0 0 18px; } .wc-block-cart .wc-block-cart-items__row td:last-child { padding-right: 18px; border-right: 1px solid #e1e1e5 !important; border-radius: 0 18px 18px 0; } .wc-block-cart .wc-block-cart-items__row:last-child { border-bottom: 1px solid #e1e1e5 !important; } .wc-block-cart .wc-block-components-sidebar, .wc-block-cart .wc-block-cart__sidebar { border-color: #e1e1e5; border-radius: 18px; background: var(--soft); box-shadow: 0 8px 22px rgba(0,0,0,.025); } @media (max-width: 900px) { .wc-block-cart .wc-block-components-sidebar-layout { grid-template-columns: 1fr; gap: 28px; } .wc-block-cart .wc-block-components-sidebar, .wc-block-cart .wc-block-cart__sidebar { position: static; } .wc-block-checkout .wc-block-components-sidebar-layout { grid-template-columns: 1fr; gap: 28px; } .wc-block-checkout .wc-block-components-sidebar, .wc-block-checkout .wc-block-checkout__sidebar { position: static; } } @media (max-width: 600px) { .store-flow-content { padding-top: 28px; padding-bottom: 48px; } .wc-block-cart .wc-block-cart-items__header { display: none; } .wc-block-cart .wc-block-cart-items__row { padding: 16px 0; } .wc-block-cart .wc-block-cart-item__image img { width: 70px; } .wc-block-cart .wc-block-components-sidebar, .wc-block-cart .wc-block-cart__sidebar { padding: 18px; border-radius: 14px; } .wc-block-checkout .wc-block-components-order-summary { padding: 18px; border-radius: 14px; } } @media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; gap: 0; } .catalog-filter { position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; width: min(330px, 88vw); overflow-y: auto; padding: 24px; background: #fff; box-shadow: 15px 0 45px rgba(0,0,0,.16); transform: translateX(-105%); transition: transform .25s ease; } .catalog-filter.is-open { transform: translateX(0); } .filter-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; font-size: 20px; font-weight: 700; } .filter-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--soft); cursor: pointer; } .filter-trigger { display: inline-flex; } .catalog-products .products { grid-template-columns: repeat(3, 1fr); } .product-showcase { grid-template-columns: 1fr; gap: 12px; } .product-summary-panel { padding-top: 14px; } .product-specs { grid-template-columns: 1fr; margin-top: 56px; } .single-product .related-products-section .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 18px; } } @media (max-width: 600px) { .catalog-hero { padding: 42px 0 40px; } .catalog-hero h1 { letter-spacing: -2.5px; } .catalog-hero p:last-child { font-size: 16px; } .catalog-products .products { grid-template-columns: repeat(2, 1fr); } .catalog-toolbar { margin-bottom: 9px; } .catalog-toolbar .woocommerce-result-count { display: none; } .catalog-ordering { justify-content: flex-end; } .store-sorting > label { display: none; } .store-sort-control { min-width: 174px; height: 38px; } .woocommerce .woocommerce-ordering .store-sort-control select { height: 36px; font-size: 11px; } .product-card-media { min-height: 160px; padding: 12px; } .woocommerce ul.products li.product .product-card-media img { height: 136px; } .product-card-copy { padding: 12px 11px 11px; } .product-card-category { font-size: 10px; } .woocommerce ul.products li.product .product-card-copy .woocommerce-loop-product__title { font-size: 13px !important; } .product-card-description { display: none; } .product-card-bottom { margin-top: 12px; } .woocommerce ul.products li.product .product-card-bottom .price { font-size: 12px !important; } .woocommerce ul.products li.product .product-card-bottom .product-card-add { width: 31px; min-width: 31px; height: 31px; min-height: 31px; } .woocommerce ul.products li.product .product-card-bottom .product-card-add svg { width: 14px; height: 14px; } .single-product .product-detail { padding-top: 16px; } .product-specs { gap: 31px; margin-top: 45px; padding: 30px 22px; border-radius: 17px; } .spec-grid { gap: 24px 13px; } .spec strong { font-size: 13px; } .single-product .woocommerce-tabs { width: min(calc(100% - 32px), var(--wrap)); } .single-product .woocommerce-tabs { padding-top: 45px; } .single-product .related-products-section { margin-top: 46px !important; padding: 48px 0 55px; } .single-product .related-products-section .related-products-inner { width: min(calc(100% - 32px), var(--wrap)); } .utility-page-header { padding: 35px 0 20px; } .utility-page-content { padding-top: 24px; } .woocommerce-cart-form table.shop_table thead { display: none; } .woocommerce-cart-form table.shop_table td { display: block; text-align: right !important; } .woocommerce-cart-form table.shop_table td::before { float: left; } .woocommerce-cart-form .product-thumbnail { display: none !important; } .woocommerce-cart-form .actions .coupon .input-text { width: 48%; } } @media (max-width: 900px) { .header-main { grid-template-columns: auto 1fr auto; gap: 16px; } .primary-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 10px 24px 18px; border-bottom: 1px solid var(--line); background: #fff; } .primary-navigation.is-open { display: block; } .primary-navigation ul { display: block; } .primary-navigation li + li { margin-top: 14px; } .mobile-menu-button { display: inline-flex; } .category-grid, .woocommerce .products { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } @media (max-width: 600px) { .container, .woocommerce-page .site-main, .woocommerce-page .woocommerce-notices-wrapper, .woocommerce-page .woocommerce-result-count, .woocommerce-page .woocommerce-ordering { width: min(calc(100% - 32px), var(--wrap)); } .utility-inner { justify-content: center; } .utility-inner p:last-child { display: none; } .header-main { min-height: 64px; grid-template-columns: auto 1fr auto; gap: 11px; } .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-bottom: 12px; } .header-main { padding-top: 8px; } .wordmark { font-size: 18px; } .header-actions { gap: 9px; } .store-hero { min-height: 480px; } .hero-content { padding-bottom: 195px; } .store-hero h1 { letter-spacing: -2.5px; } .shop-section { padding-top: 56px; } .section-heading { display: block; margin-bottom: 20px; } .section-heading .text-link { display: inline-block; margin-top: 8px; } .category-grid, .woocommerce .products { gap: 10px; } .category-card { min-height: 190px; padding: 16px; border-radius: 14px; } .category-card img { top: 5px; height: 112px; } .category-card h3 { font-size: 16px; } .woocommerce ul.products li.product { padding: 10px; border-radius: 14px; } .woocommerce ul.products li.product a img { height: 145px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 36px; font-size: 13px !important; } .woocommerce ul.products li.product .price { font-size: 13px !important; } .woocommerce ul.products li.product .button { padding: 0 8px; font-size: 11px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; } .footer-grid > :first-child { grid-column: 1 / -1; } .footer-bottom { display: block; } .footer-bottom span + span { display: block; margin-top: 5px; } } /* Final Cart layout: isolate Woo's table from the summary and use a clean card grid. */ .woocommerce-cart .site-content { background: #fafafa; } .woocommerce-cart .store-flow-content { max-width: 1200px; } .wc-block-cart { width: 100%; max-width: none !important; } .wc-block-cart .wc-block-cart__sidebar-layout, .wc-block-cart .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important; column-gap: 42px !important; row-gap: 32px !important; align-items: start !important; } .wc-block-cart .wc-block-cart__main, .wc-block-cart .wc-block-components-main { grid-column: 1; min-width: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .wc-block-cart .wc-block-cart__sidebar, .wc-block-cart .wc-block-components-sidebar { grid-column: 2; min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 24px !important; border: 1px solid #e3e3e7 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 12px 34px rgba(0,0,0,.045) !important; } .wc-block-cart .wc-block-cart-items { width: 100% !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 14px !important; } .wc-block-cart .wc-block-cart-items__header { border: 0 !important; } .wc-block-cart .wc-block-cart-items__header th { padding: 0 0 3px !important; border: 0 !important; color: #86868b; font-size: 11px; font-weight: 700; letter-spacing: .06em; } .wc-block-cart .wc-block-cart-items__row { background: #fff; } .wc-block-cart .wc-block-cart-items__row > td { min-width: 0 !important; padding-top: 18px !important; padding-bottom: 18px !important; border-top: 1px solid #e3e3e7 !important; border-bottom: 1px solid #e3e3e7 !important; background: #fff !important; } .wc-block-cart .wc-block-cart-items__row > td:first-child { padding-left: 18px !important; border-left: 1px solid #e3e3e7 !important; border-radius: 18px 0 0 18px; } .wc-block-cart .wc-block-cart-items__row > td:last-child { padding-right: 18px !important; border-right: 1px solid #e3e3e7 !important; border-radius: 0 18px 18px 0; } .wc-block-cart .wc-block-cart-item__image { width: 90px !important; } .wc-block-cart .wc-block-cart-item__image img { width: 76px !important; height: 76px; object-fit: contain; border: 0 !important; border-radius: 12px; background: var(--soft); } .wc-block-cart .wc-block-cart-item__product { min-width: 0 !important; } .wc-block-cart .wc-block-components-product-name { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.38; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .wc-block-cart .wc-block-cart-item__total { width: 100px !important; white-space: nowrap; } .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price { color: var(--ink); font-size: 14px; font-weight: 700; } .wc-block-cart .wc-block-components-product-sale-badge { display: none !important; } .wc-block-cart .wc-block-components-quantity-selector { margin-top: 10px; background: var(--soft); } .wc-block-cart .wc-block-components-sidebar h2, .wc-block-cart .wc-block-components-sidebar h3 { font-size: 15px; font-weight: 700; letter-spacing: .02em; } .wc-block-cart .wc-block-components-totals-item, .wc-block-cart .wc-block-components-totals-coupon { border: 0 !important; } .wc-block-cart .wc-block-components-totals-footer-item { margin-top: 12px; padding-top: 18px; border-top: 1px solid #e3e3e7 !important; } .wc-block-cart .wc-block-cart__submit-button { border-radius: 12px !important; } @media (max-width: 900px) { .wc-block-cart .wc-block-cart__sidebar-layout, .wc-block-cart .wc-block-components-sidebar-layout { grid-template-columns: 1fr !important; } .wc-block-cart .wc-block-cart__main, .wc-block-cart .wc-block-components-main, .wc-block-cart .wc-block-cart__sidebar, .wc-block-cart .wc-block-components-sidebar { grid-column: 1; } .wc-block-cart .wc-block-cart__sidebar, .wc-block-cart .wc-block-components-sidebar { position: static !important; } } @media (max-width: 600px) { .wc-block-cart .wc-block-cart-items { border-spacing: 0 10px !important; } .wc-block-cart .wc-block-cart-items__row > td { padding-top: 13px !important; padding-bottom: 13px !important; } .wc-block-cart .wc-block-cart-item__image { width: 62px !important; } .wc-block-cart .wc-block-cart-item__image img { width: 54px !important; height: 54px; } .wc-block-cart .wc-block-cart-item__total { width: 72px !important; } .wc-block-cart .wc-block-cart__sidebar, .wc-block-cart .wc-block-components-sidebar { padding: 18px !important; } } /* -------------------------------------------------------------------------- Purchase flow — intentionally rebuilt on native WooCommerce templates. These screens use a white canvas throughout: spacing and type create the hierarchy, rather than grey panels or a stack of visible rules. -------------------------------------------------------------------------- */ .woocommerce-cart .site-content, .woocommerce-checkout .site-content, .woocommerce-cart .store-utility-page, .woocommerce-checkout .store-utility-page { background: #fff !important; } .woocommerce-cart .store-flow-content, .woocommerce-checkout .store-flow-content { width: min(calc(100% - 48px), 1180px); max-width: 1180px; padding-top: 48px; padding-bottom: 104px; } .store-cart-form, .store-checkout-form { margin: 0; } .store-flow-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; } .store-flow-intro > div:first-child { max-width: 650px; } .store-flow-kicker, .store-section-label { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .store-flow-kicker svg { width: 15px; height: 15px; } .store-flow-intro h1 { margin: 0; color: var(--ink); font-size: clamp(33px, 4vw, 48px); line-height: 1.03; letter-spacing: -2.2px; } .store-flow-intro h1 + p { max-width: 590px; margin: 13px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; } .store-continue-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 10px 0; color: var(--blue); font-size: 14px; font-weight: 700; } .store-continue-link svg { width: 17px; height: 17px; transition: transform .2s ease; } .store-continue-link:hover svg { transform: translate(2px, -2px); } /* Cart */ .store-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: clamp(42px, 6vw, 76px); align-items: start; } .store-cart-items-panel { min-width: 0; } .store-cart-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 19px; } .store-cart-panel-heading .store-section-label { margin-bottom: 4px; } .store-cart-panel-heading h2 { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -.8px; } .store-cart-items-note { color: var(--muted); font-size: 12px; white-space: nowrap; } .store-cart-items { display: grid; gap: 14px; } .store-cart-item { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(118px, auto); grid-template-areas: 'media copy total' 'media actions total'; column-gap: 22px; row-gap: 13px; align-items: start; min-width: 0; padding: 20px; border: 1px solid #e6e8ec; border-radius: 18px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .store-cart-item:hover { border-color: #c9dff7; box-shadow: 0 12px 30px rgba(0, 83, 163, .07); transform: translateY(-1px); } .store-cart-item-media { grid-area: media; display: grid; place-items: center; min-width: 0; min-height: 108px; overflow: hidden; border-radius: 12px; background: #fff; } .store-cart-item-media a { display: grid; place-items: center; width: 100%; height: 100%; } .store-cart-item-media img { display: block; width: 96px; height: 108px; object-fit: contain; mix-blend-mode: multiply; } .store-cart-item-copy { grid-area: copy; min-width: 0; padding-top: 3px; } .store-cart-item-copy h3 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.38; font-weight: 700; overflow-wrap: anywhere; } .store-cart-item-copy h3 a:hover { color: var(--blue); } .store-cart-item-meta { margin-top: 5px; color: var(--muted); font-size: 12px; } .store-cart-item-meta dl, .store-review-item-meta dl { display: flex; flex-wrap: wrap; gap: 3px 5px; margin: 0; } .store-cart-item-meta dt, .store-cart-item-meta dd, .store-review-item-meta dt, .store-review-item-meta dd { margin: 0; } .store-cart-item-meta dt::after, .store-review-item-meta dt::after { content: ':'; } .store-cart-item-price { margin-top: 10px; color: var(--ink); font-size: 13px; font-weight: 700; } .store-cart-item-price del { margin-right: 5px; color: var(--muted); font-weight: 400; } .store-cart-item-price ins { color: var(--ink); text-decoration: none; } .store-cart-item .backorder_notification { margin: 8px 0 0; color: var(--blue); font-size: 12px; } .store-cart-item-actions { grid-area: actions; display: flex; align-items: center; gap: 13px; min-width: 0; } .store-cart-quantity .quantity { display: block; } .store-cart-quantity .qty { width: 62px !important; min-width: 62px; height: 36px !important; min-height: 36px !important; padding: 0 7px !important; border: 1px solid #d8dce2 !important; border-radius: 9px !important; background: #fff !important; color: var(--ink); font-size: 13px; text-align: center; box-shadow: none !important; } .store-single-quantity { color: var(--muted); font-size: 13px; } .store-cart-remove { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; } .store-cart-remove svg { width: 15px; height: 15px; } .store-cart-remove:hover { color: #d92d20; } .store-cart-item-total { grid-area: total; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; padding-top: 3px; text-align: right; } .store-cart-item-total span { color: var(--muted); font-size: 11px; } .store-cart-item-total strong { color: var(--ink); font-size: 14px; white-space: nowrap; } .store-cart-item-total del { color: var(--muted); font-weight: 400; } .store-cart-item-total ins { color: inherit; text-decoration: none; } .store-cart-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 21px; } .store-cart-update-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--blue); font-size: 13px; font-weight: 700; cursor: pointer; } .store-cart-update-button svg { width: 15px; height: 15px; } .store-cart-update-button[disabled] { cursor: default; color: #9aa0a6; } .store-cart-summary { position: sticky; top: 128px; min-width: 0; padding: 25px; border: 1px solid #e0e4e9; border-radius: 20px; background: #fff; box-shadow: 0 16px 36px rgba(23, 60, 99, .06); } .store-cart-totals { width: 100%; } .store-summary-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .store-summary-heading .store-section-label { margin: 0 0 3px; font-size: 10px; } .store-summary-heading h2 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: -.65px; } .store-summary-icon { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 1px solid #d7e6f7; border-radius: 50%; color: var(--blue); } .store-summary-icon svg { width: 17px; height: 17px; } .store-cart-coupon { margin: 0 0 20px; } .store-cart-coupon label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 700; } .store-cart-coupon-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .store-cart-coupon input { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #d8dce2; border-radius: 9px; outline: none; background: #fff; color: var(--ink); font-size: 13px; } .store-cart-coupon input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .11); } .store-coupon-apply { min-height: 40px; padding: 0 13px; border: 1px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; } .store-coupon-apply:hover { border-color: var(--blue); color: var(--blue); } .store-cart-total-rows { display: grid; gap: 11px; } .store-cart-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 13px; } .store-cart-total-row strong { color: var(--ink); font-size: 13px; font-weight: 600; text-align: right; } .store-cart-total-row a { color: var(--blue); font-size: 11px; font-weight: 600; } .store-cart-shipping-table, .store-review-shipping-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; color: var(--muted); font-size: 13px; } .store-cart-shipping-table th, .store-cart-shipping-table td, .store-review-shipping-table th, .store-review-shipping-table td { padding: 0 !important; border: 0 !important; background: transparent !important; font-weight: 400; text-align: left; vertical-align: top; } .store-cart-shipping-table th, .store-review-shipping-table th { width: 42%; } .store-cart-shipping-table td, .store-review-shipping-table td { color: var(--ink); text-align: right; } .store-cart-shipping-table ul, .store-review-shipping-table ul { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; } .store-cart-shipping-table li, .store-review-shipping-table li { display: flex; justify-content: flex-end; gap: 5px; } .store-cart-shipping-table input, .store-review-shipping-table input { accent-color: var(--blue); } .store-cart-shipping-table label, .store-review-shipping-table label { font-size: 12px; } .store-cart-shipping-calculator { display: grid; gap: 8px; color: var(--muted); font-size: 13px; } .store-cart-shipping-calculator .shipping-calculator-button { color: var(--blue); font-size: 12px; font-weight: 700; } .store-cart-delivery { padding: 12px; border: 1px solid #dce8f5; border-radius: 12px; background: #fff; } .store-cart-delivery-label { margin: 0 0 7px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .store-cart-delivery .store-cart-shipping-table tr.shipping { display: block; } .store-cart-delivery .store-cart-shipping-table th { display: none; } .store-cart-delivery .store-cart-shipping-table td { display: block; width: 100%; text-align: left; } .store-cart-delivery .store-cart-shipping-table ul { align-items: flex-start; } .store-cart-delivery .store-cart-shipping-table li { justify-content: flex-start; } .store-cart-delivery .store-cart-shipping-table label { color: var(--ink); font-size: 12px; font-weight: 700; } .store-cart-delivery .store-cart-shipping-table td::before { display: none !important; } .store-cart-delivery .store-cart-delivery-copy { margin: 0; color: var(--muted); font-size: 12px; } .store-cart-delivery .store-cart-shipping-destination { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .store-cart-delivery .store-cart-shipping-destination strong { color: var(--ink); } .store-cart-delivery .store-change-delivery { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--blue); font-size: 11px; font-weight: 700; } .store-cart-delivery .store-change-delivery svg { width: 13px; height: 13px; } .store-cart-grand-total { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 25px; padding-top: 20px; color: var(--ink); } .store-cart-grand-total span { font-size: 15px; font-weight: 700; } .store-cart-grand-total strong { font-size: 22px; letter-spacing: -.7px; white-space: nowrap; } .store-cart-grand-total strong .woocommerce-Price-amount { color: var(--ink); } .store-cart-secure-note { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: var(--muted); font-size: 11px; } .store-cart-secure-note svg { width: 15px; height: 15px; color: var(--blue); } .store-proceed-to-checkout { margin: 20px 0 0 !important; padding: 0 !important; } .store-proceed-to-checkout .checkout-button { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0 !important; padding: 0 18px !important; border: 1px solid var(--blue) !important; border-radius: 11px !important; background: var(--blue) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; } .store-proceed-to-checkout .checkout-button:hover { border-color: var(--blue-hover) !important; background: var(--blue-hover) !important; } .store-empty-cart { width: min(100%, 590px); margin: 34px auto 92px; padding: 26px 0; text-align: center; } .store-empty-cart-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 20px; border: 1px solid #cfe3f7; border-radius: 50%; color: var(--blue); } .store-empty-cart-icon svg { width: 21px; height: 21px; } .store-empty-cart .store-flow-kicker { justify-content: center; margin-bottom: 8px; } .store-empty-cart h1 { margin: 0; color: var(--ink); font-size: 34px; letter-spacing: -1.5px; } .store-empty-cart p:not(.store-flow-kicker) { max-width: 420px; margin: 12px auto 22px; color: var(--muted); font-size: 15px; } /* Checkout */ .store-checkout-intro { align-items: flex-end; } .store-checkout-steps { display: flex; align-items: center; gap: 13px; padding-bottom: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; } .store-checkout-step { display: inline-flex; align-items: center; gap: 6px; } .store-checkout-step b { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #d8dce2; border-radius: 50%; color: var(--muted); font-size: 10px; } .store-checkout-step.is-current { color: var(--ink); font-weight: 700; } .store-checkout-step.is-current b { border-color: var(--blue); background: var(--blue); color: #fff; } .store-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 374px; gap: clamp(42px, 6vw, 76px); align-items: start; } .store-checkout-main { min-width: 0; } .store-checkout-card { padding: 31px; border: 1px solid #e2e5e9; border-radius: 20px; background: #fff; } .store-checkout-card + .store-checkout-card { margin-top: 22px; } .store-checkout-card-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 27px; } .store-checkout-card-heading > span { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; border: 1px solid #cfe3f7; border-radius: 50%; color: var(--blue); font-size: 11px; font-weight: 700; } .store-checkout-card-heading .store-section-label { margin-bottom: 3px; font-size: 10px; } .store-checkout-card-heading h2 { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -.75px; } .store-checkout-details { display: grid; gap: 29px; } .store-checkout-form .col2-set, .store-checkout-form .col2-set .col-1, .store-checkout-form .col2-set .col-2 { float: none; width: auto; } .store-checkout-form .woocommerce-billing-fields h3, .store-checkout-form .woocommerce-shipping-fields h3, .store-checkout-form .woocommerce-additional-fields h3 { margin: 0 0 16px; color: var(--ink); font-size: 16px; letter-spacing: -.25px; } .store-checkout-form .woocommerce-billing-fields__field-wrapper, .store-checkout-form .woocommerce-shipping-fields__field-wrapper, .store-checkout-form .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .store-checkout-form .form-row { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; } .store-checkout-form .form-row-wide { grid-column: 1 / -1; } .store-checkout-form .form-row label { display: block; margin: 0 0 7px; color: #4d535b; font-size: 12px; font-weight: 700; } .store-checkout-form .form-row .required { color: var(--blue); } .store-checkout-form .woocommerce-input-wrapper { display: block; width: 100%; } .store-checkout-form input.input-text, .store-checkout-form select, .store-checkout-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d8dce2 !important; border-radius: 10px !important; outline: none; background: #fff !important; color: var(--ink); font-size: 14px; box-shadow: none !important; } .store-checkout-form textarea { min-height: 98px; resize: vertical; } .store-checkout-form input.input-text:focus, .store-checkout-form select:focus, .store-checkout-form textarea:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, .11) !important; } .store-checkout-form .form-row.woocommerce-invalid input.input-text, .store-checkout-form .form-row.woocommerce-invalid select { border-color: #d92d20 !important; } .store-checkout-form .form-row .select2-container { width: 100% !important; } .store-checkout-form .select2-container--default .select2-selection--single { height: 46px; border: 1px solid #d8dce2; border-radius: 10px; background: #fff; } .store-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px; color: var(--ink); font-size: 14px; line-height: 44px; } .store-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; } .store-checkout-form .woocommerce-shipping-fields { padding-top: 2px; } .store-checkout-form #ship-to-different-address { margin-bottom: 13px; } .store-checkout-form .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .store-checkout-form .woocommerce-form__input-checkbox { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); } .store-checkout-form .shipping_address { margin-top: 18px; } .store-checkout-form .woocommerce-additional-fields { margin-top: 23px; } .store-checkout-form .create-account { margin-top: 18px !important; } .store-checkout-summary { position: sticky; top: 128px; min-width: 0; } .store-checkout-summary-card { padding: 25px; border: 1px solid #e0e4e9; border-radius: 20px; background: #fff; box-shadow: 0 16px 36px rgba(23, 60, 99, .06); } .store-checkout-summary-card .store-summary-heading { margin-bottom: 21px; } .store-review-items { display: grid; gap: 10px; } .store-review-item { display: grid; grid-template-columns: 57px minmax(0, 1fr) max-content; gap: 11px; align-items: center; min-width: 0; padding: 10px; border: 1px solid #edf0f3; border-radius: 13px; background: #fff; } .store-review-item-image { position: relative; display: grid; place-items: center; width: 57px; height: 64px; overflow: visible; border-radius: 9px; background: #fff; } .store-review-item-image a { display: grid; place-items: center; width: 100%; height: 100%; } .store-review-item-image img { width: 55px; height: 64px; object-fit: contain; mix-blend-mode: multiply; } .store-review-quantity { position: absolute; top: -6px; right: -7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; } .store-review-item-copy { min-width: 0; padding-top: 2px; } .store-review-item-copy h3 { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink); font-size: 13px; line-height: 1.34; font-weight: 700; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .store-review-item-copy h3 a:hover { color: var(--blue); } .store-review-item-meta { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; } .store-review-item-price { min-width: 62px; padding-top: 2px; color: var(--ink); font-size: 12px; text-align: right; white-space: nowrap; } .store-review-totals { display: grid; gap: 10px; margin-top: 23px; } .store-review-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; } .store-review-total-row strong { color: var(--ink); font-size: 12px; font-weight: 600; text-align: right; } .store-review-total-row a { color: var(--blue); font-size: 10px; } .store-review-delivery { margin-top: 18px; padding: 12px; border: 1px solid #dce8f5; border-radius: 12px; background: #fff; } .store-review-delivery-label { margin: 0 0 7px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .store-review-delivery .store-review-shipping-table th { display: none; } .store-review-delivery .store-review-shipping-table td { width: 100%; text-align: left; } .store-review-delivery .store-review-shipping-table li { justify-content: flex-start; } .store-review-delivery .store-review-shipping-table label { color: var(--ink); font-size: 12px; font-weight: 700; } .store-review-grand-total { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 22px; padding-top: 18px; color: var(--ink); } .store-review-grand-total span { font-size: 14px; font-weight: 700; } .store-review-grand-total strong { font-size: 21px; letter-spacing: -.65px; white-space: nowrap; } .store-review-grand-total strong .woocommerce-Price-amount { color: var(--ink); } .store-checkout-payment-content #payment { margin: 0; border: 0 !important; border-radius: 0 !important; background: #fff !important; } .store-checkout-payment-content #payment ul.payment_methods { padding: 0; border: 0 !important; background: transparent; } .store-checkout-payment-content #payment ul.payment_methods li { margin: 0 0 10px; padding: 15px; border: 1px solid #e0e4e9; border-radius: 13px; background: #fff; } .store-checkout-payment-content #payment ul.payment_methods li:last-child { margin-bottom: 0; } .store-checkout-payment-content #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; } .store-checkout-payment-content #payment ul.payment_methods input.input-radio { margin: 0; accent-color: var(--blue); } .store-checkout-payment-content #payment ul.payment_methods input.input-radio:checked + label { color: var(--blue); } .store-checkout-payment-content #payment div.payment_box { width: auto; margin: 12px 0 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--muted); font-size: 12px; line-height: 1.5; } .store-checkout-payment-content #payment div.payment_box::before { display: none; } .store-checkout-payment-content #payment .form-row.place-order { margin: 25px 0 0; padding: 0; } .store-checkout-payment-content #payment .woocommerce-terms-and-conditions-wrapper { color: var(--muted); font-size: 11px; line-height: 1.5; } .store-checkout-payment-content #payment .woocommerce-privacy-policy-text { margin-bottom: 13px; } .store-checkout-payment-content #payment .woocommerce-terms-and-conditions-checkbox-text { color: var(--muted); } .store-checkout-payment-content #payment #place_order { float: none; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 18px 0 0; padding: 0 18px; border: 1px solid var(--blue); border-radius: 11px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; } .store-checkout-payment-content #payment #place_order:hover { border-color: var(--blue-hover); background: var(--blue-hover); } /* Keep the address form compact enough that delivery and payment remain discoverable in the same checkout view on a desktop screen. */ .store-checkout-form .woocommerce-billing-fields__field-wrapper #billing_postcode_field, .store-checkout-form .woocommerce-billing-fields__field-wrapper #billing_city_field, .store-checkout-form .woocommerce-billing-fields__field-wrapper #billing_phone_field, .store-checkout-form .woocommerce-billing-fields__field-wrapper #billing_email_field { grid-column: auto !important; } .store-checkout-summary .store-checkout-payment-card { margin-top: 18px; padding: 23px; } .store-checkout-summary .store-checkout-payment-card .store-checkout-card-heading { margin-bottom: 18px; } .store-checkout-summary .store-checkout-payment-card .store-checkout-card-heading h2 { font-size: 18px; line-height: 1.22; } /* Native Woo notices and checkout coupon stay white and deliberately quiet. */ .store-flow-content .woocommerce-error, .store-flow-content .woocommerce-info, .store-flow-content .woocommerce-message { margin: 0 0 24px; padding: 15px 18px 15px 45px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: none; font-size: 13px; } .store-flow-content .woocommerce-error::before, .store-flow-content .woocommerce-info::before, .store-flow-content .woocommerce-message::before { left: 17px; color: var(--blue); } .store-flow-content .woocommerce-error { border-color: #f1c7c3; } .store-flow-content .woocommerce-error::before { color: #d92d20; } .store-flow-content .woocommerce-form-coupon-toggle { margin-bottom: 12px; } .store-flow-content form.checkout_coupon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 30px; padding: 19px; border: 1px solid #e0e4e9; border-radius: 15px; background: #fff; } .store-flow-content form.checkout_coupon p { margin: 0; } .store-flow-content form.checkout_coupon p:first-child { flex: 1 0 100%; color: var(--muted); font-size: 12px; } .store-flow-content form.checkout_coupon .form-row-first { flex: 1 1 180px; } .store-flow-content form.checkout_coupon .form-row-last { flex: 0 0 auto; } .store-flow-content form.checkout_coupon input.input-text { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d8dce2; border-radius: 9px; background: #fff; } .store-flow-content form.checkout_coupon button { min-height: 40px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; } @media (max-width: 980px) { .store-cart-layout, .store-checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .store-cart-summary, .store-checkout-summary { position: static; } .store-cart-summary { max-width: 520px; } .store-checkout-summary { max-width: 520px; } .store-checkout-steps { align-self: flex-start; } } @media (max-width: 700px) { .woocommerce-cart .store-flow-content, .woocommerce-checkout .store-flow-content { width: min(calc(100% - 32px), 1180px); padding-top: 31px; padding-bottom: 66px; } .store-flow-intro { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 33px; } .store-flow-intro h1 { font-size: 34px; letter-spacing: -1.55px; } .store-flow-intro h1 + p { font-size: 14px; } .store-checkout-steps { width: 100%; justify-content: space-between; gap: 6px; font-size: 11px; } .store-checkout-step { gap: 4px; } .store-cart-item { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: 'media copy' 'media actions' 'total total'; column-gap: 15px; row-gap: 10px; padding: 15px; } .store-cart-item-media { min-height: 83px; } .store-cart-item-media img { width: 76px; height: 83px; } .store-cart-item-copy h3 { font-size: 14px; } .store-cart-item-total { flex-direction: row; justify-content: space-between; width: 100%; padding-top: 7px; text-align: left; } .store-cart-item-total strong { font-size: 15px; } .store-cart-panel-heading { align-items: flex-start; } .store-cart-items-note { padding-top: 4px; font-size: 10px; } .store-cart-summary, .store-checkout-card, .store-checkout-summary-card { padding: 20px; border-radius: 16px; } .store-checkout-card-heading { margin-bottom: 22px; } .store-checkout-form .woocommerce-billing-fields__field-wrapper, .store-checkout-form .woocommerce-shipping-fields__field-wrapper, .store-checkout-form .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; gap: 13px; } .store-checkout-form .form-row-wide { grid-column: auto; } .store-review-item { grid-template-columns: 51px minmax(0, 1fr) auto; gap: 9px; } .store-review-item-image { width: 51px; height: 58px; } .store-review-item-image img { width: 50px; height: 58px; } .store-review-item-price { min-width: 56px; font-size: 11px; } } @media (max-width: 420px) { .store-checkout-steps .store-checkout-step:last-child { display: none; } .store-cart-coupon-fields { grid-template-columns: 1fr; } .store-coupon-apply { width: 100%; } .store-cart-summary { padding: 18px; } .store-cart-item-actions { justify-content: space-between; } } /* WooCommerce gives every `.remove` link a large red text treatment. The bag uses a deliberately quiet icon-only control instead. */ .woocommerce .store-cart-form .store-cart-quantity { display: block; min-height: 36px; padding: 0; border: 0; background: transparent; } .store-quantity-stepper { display: grid; grid-template-columns: 30px 40px 30px; align-items: center; min-height: 36px; overflow: hidden; border: 1px solid #d8dce2; border-radius: 10px; background: #fff; } .store-quantity-button { display: grid; place-items: center; width: 30px; height: 34px; padding: 0; border: 0; background: #fff; color: var(--ink); cursor: pointer; } .store-quantity-button:hover { background: #f5faff; color: var(--blue); } .store-quantity-button svg { width: 13px; height: 13px; stroke-width: 2; } .woocommerce .store-cart-form .store-quantity-stepper input.store-quantity-input { display: block !important; width: 40px !important; min-width: 40px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #edf0f3 !important; border-left: 1px solid #edf0f3 !important; border-radius: 0 !important; background: #fff !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 700; line-height: 34px; opacity: 1 !important; text-align: center !important; -moz-appearance: textfield; } .woocommerce .store-cart-form .store-quantity-stepper input.store-quantity-input::-webkit-inner-spin-button, .woocommerce .store-cart-form .store-quantity-stepper input.store-quantity-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } .woocommerce .store-cart-form a.store-cart-remove.remove { display: inline-grid !important; place-items: center; flex: 0 0 auto; width: 32px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e0e4e9 !important; border-radius: 50% !important; background: #fff !important; color: #6e7681 !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; } .woocommerce .store-cart-form a.store-cart-remove.remove svg { display: block; width: 15px; height: 15px; stroke-width: 1.9; } .woocommerce .store-cart-form a.store-cart-remove.remove span { display: none !important; } .woocommerce .store-cart-form a.store-cart-remove.remove:hover { border-color: #efc1bd !important; background: #fff7f6 !important; color: #d92d20 !important; } /* -------------------------------------------------------------------------- METRO DESIGN SYSTEM Flat typography, coloured tiles and a white canvas replace the previous rounded "premium" treatment across the entire storefront. -------------------------------------------------------------------------- */ :root { --ink: #173b2d; --muted: #65766d; --line: #cfdfd4; --page: #fff; --soft: #fff; --blue: #1d6b4d; --blue-hover: #124e38; --metro-blue: #1d6b4d; --metro-dark: #12382a; --metro-teal: #3c8062; --metro-orange: #a96828; --metro-yellow: #9bc7af; --metro-pale: #e9f3ed; --radius: 0; } body.credoplus-store { background: #fff; font-family: 'Space Grotesk', Arial, sans-serif; } .credoplus-store .site-content { background: #fff; } .credoplus-store .site-content *, .credoplus-store .site-header *, .credoplus-store .site-footer * { border-radius: 0 !important; } .credoplus-store .site-content * { box-shadow: none !important; } /* Header, search and footer */ .site-header { background: #fff !important; border-bottom: 2px solid var(--metro-blue); backdrop-filter: none; } .utility-bar { background: var(--metro-dark); } .header-main { min-height: 68px; gap: 24px; } .wordmark { font-size: 22px; font-weight: 900; letter-spacing: -1px; } .wordmark span { color: var(--metro-blue); } .primary-navigation ul { gap: 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; } .primary-navigation a:hover, .primary-navigation .current-menu-item > a { color: var(--metro-blue); } .icon-link { color: var(--metro-dark); } .cart-count { min-width: 17px; height: 17px; border-radius: 0 !important; background: var(--metro-blue); } .search-form { height: 42px; padding: 0 13px; border: 1px solid #b8cfe1; border-radius: 0 !important; background: #fff; } .search-form:focus-within { border-color: var(--metro-blue); background: #fff; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .header-search .search-results { padding: 0; border: 1px solid #9dc3e1; border-radius: 0 !important; box-shadow: 0 10px 20px rgba(0, 0, 0, .12) !important; } .header-search .search-result { border-radius: 0 !important; } .header-search .search-result:hover, .header-search .search-result:focus { background: var(--metro-pale); } .header-search .search-result img { border-radius: 0 !important; background: #fff; } .site-footer { margin-top: 64px; padding-top: 38px; border-top: 6px solid var(--metro-blue); background: #fff; color: #4b4b4b; } .footer-bottom { border-top-color: #d7d7d7; } /* Shared Metro building blocks */ .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { min-height: 42px; border: 0 !important; border-radius: 0 !important; background: var(--metro-blue) !important; color: #fff !important; font-weight: 700; letter-spacing: .01em; } .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--blue-hover) !important; color: #fff !important; transform: none; } .button-outline { border: 2px solid var(--metro-blue) !important; background: #fff !important; color: var(--metro-blue) !important; } .button-outline:hover { background: var(--metro-blue) !important; color: #fff !important; } .eyebrow, .brand-eyebrow { color: var(--metro-blue); font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .text-link { color: var(--metro-blue); font-weight: 700; } /* Home and catalogue */ .store-hero { min-height: 480px; place-items: stretch; background: var(--metro-blue); text-align: left; } .store-hero::before { display: none; } .hero-content { display: flex; flex-direction: column; justify-content: center; width: min(calc(100% - 48px), var(--wrap)); margin: 0 auto; padding: 60px 0; } .store-hero .eyebrow { color: #dceeff; } .store-hero h1 { max-width: 760px; margin: 0 0 15px; color: #fff; font-size: clamp(43px, 6vw, 74px); letter-spacing: -2.4px; } .store-hero .lead { max-width: 560px; margin: 0 0 26px; color: #fff; } .store-hero .button { align-self: flex-start; background: #fff !important; color: var(--metro-blue) !important; } .shop-section { padding-top: 70px; } .section-heading h2 { letter-spacing: -1.4px; } .category-grid { gap: 10px; } .category-card { min-height: 242px; border-radius: 0 !important; background: var(--metro-blue); color: #fff; transition: none; } .category-card:hover { transform: none; filter: brightness(.94); } .category-card small { color: #fff; } .category-card:nth-child(2n) { background: var(--metro-teal); } .category-card:nth-child(3n) { background: var(--metro-orange); } .category-card:nth-child(4n) { background: #5c2d91; } .category-card img { mix-blend-mode: normal; } .catalog-hero { padding: 56px 0; background: var(--metro-blue); } .catalog-hero .eyebrow, .catalog-hero p:last-child { color: #fff; } .catalog-hero h1 { letter-spacing: -2.4px; } .catalog-layout { gap: 32px; padding-top: 36px; } .catalog-ordering { width: 100%; justify-content: flex-start; align-items: center; } .catalog-ordering .woocommerce-result-count, .catalog-ordering .woocommerce-ordering { width: auto !important; float: none !important; margin: 0 !important; } .catalog-ordering .woocommerce-ordering { margin-left: auto !important; } .catalog-filter { top: 92px; } .filter-group { border-top-color: #d7d7d7; } .filter-link { padding: 8px 0; font-weight: 500; } .filter-link:hover, .filter-link.is-active { color: var(--metro-blue); } .store-sort-control, .filter-trigger { height: 42px; border: 1px solid #9dc3e1; border-radius: 0 !important; box-shadow: none !important; } .store-sort-control:focus-within { border-color: var(--metro-blue); box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } /* Product cards */ .woocommerce ul.products li.product, .woocommerce ul.products li.product.store-product-card { overflow: hidden; padding: 0; border: 1px solid #d7d7d7; border-radius: 0 !important; background: #fff; box-shadow: none !important; transition: border-color .15s ease, transform .15s ease; } .woocommerce ul.products li.product:hover, .woocommerce ul.products li.product.store-product-card:hover { border-color: var(--metro-blue); box-shadow: none !important; transform: translateY(-2px); } .product-card-media { min-height: 226px; padding: 18px; border-bottom: 6px solid var(--metro-blue); background: #fff; } .woocommerce ul.products li.product .product-card-media img { height: 188px; mix-blend-mode: multiply; } .product-card-badge, .woocommerce span.onsale { top: 0 !important; left: 0 !important; padding: 7px 10px !important; border-radius: 0 !important; background: var(--metro-orange) !important; font-size: 10px !important; letter-spacing: .05em; text-transform: uppercase; } .product-card-copy { padding: 16px; } .product-card-category { color: var(--metro-blue); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .woocommerce ul.products li.product .product-card-copy .woocommerce-loop-product__title { font-size: 16px !important; font-weight: 700; } .product-card-description { color: #646464; } .woocommerce ul.products li.product .product-card-bottom .product-card-add { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: 0 !important; background: var(--metro-blue); } .woocommerce ul.products li.product .product-card-bottom .product-card-add:hover { background: var(--blue-hover); transform: none; } .woocommerce ul.products li.product .product-card-bottom .product-card-add.added { display: inline-grid !important; background: var(--metro-blue); color: #fff; } .woocommerce ul.products li.product .product-card-bottom .product-card-add.added svg { display: block !important; } .woocommerce ul.products li.product .product-card-bottom .product-card-add.added::before { display: none !important; content: none !important; } .woocommerce ul.products li.product .product-card-bottom .product-card-add.added::after { display: none !important; content: none !important; } .woocommerce ul.products li.product .product-card-bottom .added_to_cart.wc-forward { display: none !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 0 !important; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--metro-blue); } /* Product detail */ .store-gallery-main { border: 1px solid #b8cfe1; border-radius: 0 !important; background: #fff; } .store-gallery-main::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--metro-blue); } .store-gallery-main #store-product-main-image { mix-blend-mode: multiply; } .store-gallery-thumb { border: 1px solid #d7d7d7; border-radius: 0 !important; background: #fff; } .store-gallery-thumb:hover, .store-gallery-thumb.is-active { border-color: var(--metro-blue); background: var(--metro-pale); } .product-kicker { color: var(--metro-blue); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .single-product .product-summary-panel .product_title { letter-spacing: -1.4px; } .single-product .product-summary-panel form.cart { border-top-color: #b8cfe1; border-bottom-color: #b8cfe1; } .single-product .product-summary-panel table.variations select, .single-product .quantity .qty { border-color: #9dc3e1; border-radius: 0 !important; } .product-specs { border-left: 8px solid var(--metro-yellow); border-radius: 0 !important; background: var(--metro-dark); } .single-product .related-products-section { background: #fff; border-top: 1px solid #d7d7d7; border-bottom: 0; } /* Cart and checkout page framework */ .woocommerce-cart .site-content, .woocommerce-checkout .site-content, .woocommerce-cart .store-utility-page, .woocommerce-checkout .store-utility-page { background: #fff !important; } .woocommerce-cart .store-flow-content, .woocommerce-checkout .store-flow-content { padding-top: 42px; padding-bottom: 88px; } .store-flow-intro { align-items: flex-end; margin-bottom: 36px; padding: 0 0 0 20px; border-left: 8px solid var(--metro-blue); } .store-flow-kicker, .store-section-label { color: var(--metro-blue); font-weight: 900; letter-spacing: .09em; } .store-flow-intro h1 { font-size: clamp(32px, 3.8vw, 48px); letter-spacing: -1.6px; } .store-flow-intro h1 + p { color: #646464; } .store-continue-link { color: var(--metro-blue); text-transform: uppercase; font-size: 12px; letter-spacing: .05em; } /* Cart */ .store-cart-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 46px; } .store-cart-panel-heading { margin-bottom: 14px; padding-bottom: 11px; border-bottom: 2px solid var(--metro-blue); } .store-cart-panel-heading h2 { font-size: 22px; letter-spacing: -.5px; } .store-cart-items { gap: 10px; } .store-cart-item { grid-template-columns: 100px minmax(0, 1fr) minmax(116px, auto); grid-template-areas: 'media copy total' 'media actions total'; column-gap: 20px; row-gap: 9px; padding: 18px; border: 1px solid #d7d7d7; border-left: 7px solid var(--metro-blue); border-radius: 0 !important; background: #fff; } .store-cart-item:hover { border-color: var(--metro-blue); border-left-color: var(--metro-blue); box-shadow: none !important; transform: none; } .store-cart-item-media { min-height: 94px; border: 0; border-radius: 0 !important; background: #fff; } .store-cart-item-media img { width: 86px; height: 94px; } .store-cart-item-copy h3 { font-size: 15px; font-weight: 700; } .store-cart-item-meta { color: #646464; } .store-cart-item-price { color: var(--metro-dark); font-weight: 900; } .store-cart-item-actions { gap: 10px; } .store-quantity-stepper { min-height: 36px; border: 1px solid var(--metro-blue); border-radius: 0 !important; } .store-quantity-button { background: var(--metro-blue); color: #fff; } .store-quantity-button:hover { background: var(--blue-hover); color: #fff; } .woocommerce .store-cart-form .store-quantity-stepper input.store-quantity-input { border-color: #d7e6f5 !important; color: var(--metro-dark) !important; } .woocommerce .store-cart-form a.store-cart-remove.remove { width: 36px !important; height: 36px !important; min-height: 36px !important; border: 1px solid #d83b01 !important; border-radius: 0 !important; color: #d83b01 !important; } .woocommerce .store-cart-form a.store-cart-remove.remove:hover { border-color: #d83b01 !important; background: #d83b01 !important; color: #fff !important; } .store-cart-item-total { padding-top: 4px; } .store-cart-item-total span { color: #646464; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .store-cart-item-total strong { color: var(--metro-dark); font-size: 15px; } .store-cart-update-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--metro-blue); background: #fff; color: var(--metro-blue); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; } .store-cart-update-button:hover { background: var(--metro-blue); color: #fff; } .store-cart-summary { padding: 23px; border: 1px solid var(--metro-blue); border-top: 8px solid var(--metro-blue); border-radius: 0 !important; background: #fff; box-shadow: none !important; } .store-summary-heading { margin: -23px -23px 22px; padding: 17px 19px; background: var(--metro-blue); color: #fff; } .store-summary-heading .store-section-label { color: #dceeff; } .store-summary-heading h2 { color: #fff; } .store-summary-icon { border: 1px solid rgba(255,255,255,.72); border-radius: 0 !important; color: #fff; } .store-cart-coupon label { color: var(--metro-dark); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } .store-cart-coupon input { height: 40px; border-color: #9dc3e1; border-radius: 0 !important; } .store-coupon-apply { min-height: 40px; border: 0; border-radius: 0 !important; background: var(--metro-dark); color: #fff; } .store-coupon-apply:hover { background: var(--metro-blue); color: #fff; } .store-cart-total-row { color: #646464; } .woocommerce-cart .store-cart-summary .store-cart-delivery, .woocommerce-cart .store-cart-summary .store-cart-shipping-calculator { display: none !important; } .store-cart-delivery { padding: 12px; border: 1px solid #9dc3e1; border-left: 5px solid var(--metro-blue); border-radius: 0 !important; background: #fff; } .store-cart-delivery-label { color: var(--metro-blue); font-weight: 900; } .store-cart-delivery .store-change-delivery { color: var(--metro-blue); text-transform: uppercase; letter-spacing: .04em; } .store-cart-grand-total { margin-top: 22px; padding-top: 17px; border-top: 2px solid var(--metro-dark); } .store-cart-grand-total strong { color: var(--metro-blue); font-size: 23px; } .store-cart-secure-note { color: #646464; } .store-proceed-to-checkout .checkout-button { border-radius: 0 !important; background: var(--metro-blue) !important; text-transform: uppercase; letter-spacing: .04em; } /* Checkout */ .store-checkout-layout { grid-template-columns: minmax(0, 1fr) 374px; gap: 46px; } .store-checkout-card, .store-checkout-summary-card { border: 1px solid #d7d7d7; border-top: 7px solid var(--metro-blue); border-radius: 0 !important; background: #fff; } .store-checkout-card { padding: 28px; } .store-checkout-card + .store-checkout-card { margin-top: 16px; } .store-checkout-card-heading > span { width: 34px; height: 34px; border: 0; border-radius: 0 !important; background: var(--metro-blue); color: #fff; font-size: 12px; } .store-checkout-card-heading h2 { font-size: 21px; letter-spacing: -.4px; } .store-saved-addresses { margin: 0 0 28px; padding: 0 0 26px; border-bottom: 2px solid #d7e6f5; } .store-saved-addresses-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .store-saved-addresses-heading .store-section-label { margin: 0 0 4px; } .store-saved-addresses-heading h3 { margin: 0; color: var(--metro-dark); font-size: 17px; letter-spacing: -.2px; } .store-saved-addresses-heading > p { max-width: 270px; margin: 0; color: #646464; font-size: 12px; line-height: 1.45; text-align: right; } .store-saved-address-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .store-saved-address { display: grid; grid-template-columns: 34px minmax(0, 1fr) max-content; gap: 10px; width: 100%; min-height: 105px; padding: 13px; border: 1px solid #9dc3e1; border-left: 5px solid #9dc3e1; border-radius: 0 !important; background: #fff; color: var(--metro-dark); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .store-saved-address:hover { border-color: var(--metro-blue); border-left-color: var(--metro-blue); background: #fff; } .store-saved-address.is-selected { border-color: var(--metro-blue); border-left-color: var(--metro-blue); box-shadow: inset 0 -4px 0 var(--metro-blue); } .store-saved-address-icon { display: grid; place-items: center; width: 32px; height: 32px; background: var(--metro-pale); color: var(--metro-blue); } .store-saved-address-icon svg { width: 17px; height: 17px; } .store-saved-address-copy { display: grid; align-content: start; gap: 2px; min-width: 0; color: #555; font-size: 12px; line-height: 1.35; } .store-saved-address-copy strong { margin-bottom: 2px; color: var(--metro-dark); font-size: 13px; font-weight: 900; } .store-saved-address-action { display: inline-flex; align-items: center; align-self: end; gap: 4px; color: var(--metro-blue); font-size: 10px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } .store-saved-address-action svg { width: 13px; height: 13px; } .store-checkout-form .woocommerce-billing-fields h3, .store-checkout-form .woocommerce-shipping-fields h3, .store-checkout-form .woocommerce-additional-fields h3 { color: var(--metro-dark); font-size: 16px; } .store-checkout-form .form-row label { color: #4b4b4b; font-size: 11px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; } .store-checkout-form input.input-text, .store-checkout-form select, .store-checkout-form textarea, .store-checkout-form .select2-container--default .select2-selection--single { border-color: #9dc3e1 !important; border-radius: 0 !important; background: #fff !important; } .store-checkout-form input.input-text:focus, .store-checkout-form select:focus, .store-checkout-form textarea:focus { border-color: var(--metro-blue) !important; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .store-checkout-steps { gap: 6px; } .store-checkout-step { min-height: 30px; padding: 0 8px; border: 1px solid #b8cfe1; border-radius: 0 !important; } .store-checkout-step b { display: none; } .store-checkout-step.is-current { border-color: var(--metro-blue); background: var(--metro-blue); color: #fff; } .store-checkout-summary-card { padding: 23px; box-shadow: none !important; } .store-checkout-summary-card .store-summary-heading { margin: -23px -23px 21px; } .store-review-item { padding: 10px; border: 1px solid #d7d7d7; border-left: 5px solid var(--metro-blue); border-radius: 0 !important; } .store-review-item-image { border: 1px solid #dbeafa; border-radius: 0 !important; } .store-review-quantity { border-radius: 0 !important; background: var(--metro-dark); } .store-review-item-copy h3 { font-size: 12px; } .store-review-item-price { color: var(--metro-dark); font-weight: 900; } .store-review-delivery { padding: 12px; border: 1px solid #9dc3e1; border-left: 5px solid var(--metro-blue); border-radius: 0 !important; background: #fff; } .store-review-delivery-label { color: var(--metro-blue); font-weight: 900; } .store-review-grand-total { border-top: 2px solid var(--metro-dark); } .store-review-grand-total strong { color: var(--metro-blue); } .store-checkout-summary .store-checkout-payment-card { margin-top: 16px; border-top-color: var(--metro-teal); } .store-checkout-payment-content #payment ul.payment_methods li { border: 1px solid #9dc3e1; border-left: 5px solid #9dc3e1; border-radius: 0 !important; background: #fff; } .store-checkout-payment-content #payment ul.payment_methods li:has(input:checked) { border-left-color: var(--metro-blue); background: #fff; } .store-checkout-payment-content #payment div.payment_box { margin: 12px 0 0; padding: 0; border-left: 0 !important; border-radius: 0 !important; background: #fff; color: #555; } .store-checkout-payment-content #payment #place_order { border-radius: 0 !important; background: var(--metro-blue); text-transform: uppercase; letter-spacing: .04em; } .store-flow-content .woocommerce-error, .store-flow-content .woocommerce-info, .store-flow-content .woocommerce-message { border: 1px solid #9dc3e1; border-left: 6px solid var(--metro-blue); border-radius: 0 !important; background: #fff; } .store-flow-content form.checkout_coupon { border: 1px solid #9dc3e1; border-left: 6px solid var(--metro-blue); border-radius: 0 !important; background: #fff; } .store-flow-content form.checkout_coupon input.input-text { border-radius: 0 !important; } /* Account and standard Woo components */ .woocommerce-account .woocommerce-MyAccount-navigation ul, .woocommerce-account .woocommerce-MyAccount-content { border-radius: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a, .woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--metro-pale); color: var(--metro-blue); } /* My Account: a compact Metro workspace, not WooCommerce's default sidebar. */ .woocommerce-account .site-content { min-height: 0; } .woocommerce-account .store-flow-content { width: min(calc(100% - 48px), 1180px); max-width: 1180px; padding-top: 52px; padding-bottom: 24px; } .woocommerce-account .store-flow-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 38px; align-items: start; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation { border: 1px solid #d7d7d7; border-top: 7px solid var(--metro-blue); background: #fff; } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; border: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul::before { content: 'MY ACCOUNT'; display: block; padding: 17px 18px 13px; color: var(--metro-dark); font-size: 11px; font-weight: 900; letter-spacing: .08em; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid #e1e1e1; } .woocommerce-account .woocommerce-MyAccount-navigation a { position: relative; display: flex; align-items: center; min-height: 47px; padding: 0 17px; border-left: 5px solid transparent; color: var(--metro-dark); font-size: 13px; font-weight: 700; } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a, .woocommerce-account .woocommerce-MyAccount-navigation a:hover { border-left-color: var(--metro-blue); background: #fff; color: var(--metro-blue); } .woocommerce-account .woocommerce-MyAccount-content { min-width: 0; padding: 0; border: 0 !important; overflow: visible; background: #fff; } .woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin: 0 0 20px; color: #555; font-size: 15px; line-height: 1.55; } .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 15px 17px; border: 1px solid #9dc3e1; border-left: 6px solid var(--metro-blue); border-radius: 0 !important; background: #fff; color: var(--metro-dark); font-size: 13px; line-height: 1.45; } .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-info::before, .woocommerce-account .woocommerce-error::before { display: none; } .woocommerce-account .woocommerce-message .button, .woocommerce-account .woocommerce-info .button, .woocommerce-account .woocommerce-error .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; float: none !important; min-height: 42px; margin: 0; padding: 0 16px !important; border: 0; border-radius: 0 !important; background: var(--metro-blue); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .035em; line-height: 1 !important; text-align: center !important; text-transform: uppercase; white-space: nowrap; } .woocommerce-account .woocommerce-message .button:hover, .woocommerce-account .woocommerce-info .button:hover, .woocommerce-account .woocommerce-error .button:hover { background: var(--blue-hover); color: #fff; } .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.shop_table { width: 100%; margin: 0; border: 1px solid #d7d7d7; border-top: 7px solid var(--metro-blue); border-collapse: collapse; border-radius: 0 !important; background: #fff; } .woocommerce-account table.woocommerce-orders-table thead, .woocommerce-account table.shop_table thead { background: #fff; } .woocommerce-account table.woocommerce-orders-table th, .woocommerce-account table.shop_table th { padding: 15px 14px; border: 0; color: #4b4b4b; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-align: left; text-transform: uppercase; } .woocommerce-account table.woocommerce-orders-table td, .woocommerce-account table.shop_table td { padding: 17px 14px; border: 0; border-top: 1px solid #d7d7d7; color: var(--metro-dark); font-size: 13px; vertical-align: middle; } .woocommerce-account .woocommerce-orders-table__cell-order-number a { color: var(--metro-blue); font-weight: 900; } .woocommerce-account .woocommerce-orders-table__cell-order-status { color: #8a3700; font-weight: 700; } .woocommerce-account .woocommerce-orders-table__cell-order-total { font-weight: 700; } .woocommerce-account .woocommerce-orders-table .button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 0 13px; border: 0; border-radius: 0 !important; background: var(--metro-blue); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; } .woocommerce-account .woocommerce-orders-table .button:hover { background: var(--blue-hover); color: #fff; } .woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: center; } .woocommerce-account .woocommerce-orders-table__cell-order-actions .button { min-width: 88px; text-align: center; } .woocommerce-account .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row; width: 100% !important; gap: 16px; } .woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after { display: none !important; content: none !important; } .woocommerce-account .woocommerce-Address { min-height: 0; width: 100% !important; margin: 0 !important; padding: 16px 18px; border: 1px solid #d7d7d7; border-top: 6px solid var(--metro-blue); background: #fff; } .woocommerce-account .woocommerce-Addresses .woocommerce-Address { float: none !important; clear: none !important; min-width: 0; box-sizing: border-box; } .woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; } .woocommerce-account .woocommerce-Address-title h3 { margin: 0; color: var(--metro-dark); font-size: 17px; } .woocommerce-account .woocommerce-Address-title .edit { color: var(--metro-blue); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .woocommerce-account .woocommerce-Address address { margin: 0; color: #555; font-size: 13px; font-style: normal; line-height: 1.65; } .woocommerce-account .woocommerce-EditAccountForm .form-row, .woocommerce-account .woocommerce-address-fields .form-row { float: none; width: 100%; margin: 0 0 15px; padding: 0; } .woocommerce-account .woocommerce-EditAccountForm label, .woocommerce-account .woocommerce-address-fields label { display: block; margin-bottom: 7px; color: #4b4b4b; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .woocommerce-account .woocommerce-EditAccountForm input, .woocommerce-account .woocommerce-EditAccountForm select, .woocommerce-account .woocommerce-EditAccountForm textarea, .woocommerce-account .woocommerce-address-fields input, .woocommerce-account .woocommerce-address-fields select, .woocommerce-account .woocommerce-address-fields textarea { min-height: 44px; border: 1px solid #9dc3e1 !important; border-radius: 0 !important; background: #fff; box-shadow: none !important; } .woocommerce-account .woocommerce-EditAccountForm input:focus, .woocommerce-account .woocommerce-EditAccountForm select:focus, .woocommerce-account .woocommerce-EditAccountForm textarea:focus, .woocommerce-account .woocommerce-address-fields input:focus, .woocommerce-account .woocommerce-address-fields select:focus, .woocommerce-account .woocommerce-address-fields textarea:focus { border-color: var(--metro-blue) !important; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .woocommerce-account .woocommerce-EditAccountForm .button, .woocommerce-account .woocommerce-address-fields .button { min-height: 42px; padding: 0 17px; border: 0; border-radius: 0 !important; background: var(--metro-blue); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } @media (max-width: 980px) { .store-cart-layout, .store-checkout-layout { grid-template-columns: 1fr; gap: 30px; } .store-cart-summary, .store-checkout-summary { max-width: none; } .store-checkout-summary { position: static; } .woocommerce-account .store-flow-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: 26px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce-account .woocommerce-MyAccount-navigation ul::before { grid-column: 1 / -1; } .woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { border-top: 1px solid #e1e1e1; } } @media (max-width: 700px) { .header-main { min-height: 62px; } .store-hero { min-height: 390px; } .hero-content { width: min(calc(100% - 32px), var(--wrap)); padding: 45px 0; } .store-flow-intro { align-items: flex-start; margin-bottom: 28px; padding-left: 14px; border-left-width: 6px; } .store-checkout-steps { width: auto; } .store-cart-item { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: 'media copy' 'media actions' 'total total'; border-left-width: 5px; } .store-cart-item-media { min-height: 82px; } .store-cart-item-media img { width: 72px; height: 82px; } .store-cart-item-total { flex-direction: row; align-items: baseline; } .store-cart-summary, .store-checkout-card, .store-checkout-summary-card { padding: 18px; } .store-saved-addresses-heading { display: block; } .store-saved-addresses-heading > p { max-width: none; margin-top: 7px; text-align: left; } .store-saved-address-list { grid-template-columns: 1fr; } .store-summary-heading, .store-checkout-summary-card .store-summary-heading { margin: -18px -18px 18px; padding: 14px 16px; } .woocommerce-account .store-flow-content { width: min(calc(100% - 32px), 1180px); padding-top: 32px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { display: grid; grid-template-columns: 1fr; gap: 12px; } .woocommerce-account .woocommerce-message .button, .woocommerce-account .woocommerce-info .button, .woocommerce-account .woocommerce-error .button { justify-self: start; } .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr !important; } .woocommerce-account .woocommerce-Addresses .woocommerce-Address { width: 100% !important; } } /* Homepage campaign layout — the three images are selected in Customizer. */ .home-category-strip { border-bottom: 1px solid #d7d7d7; background: #fff; } .home-category-strip-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 58px; overflow-x: auto; scrollbar-width: thin; } .home-category-strip a { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; min-width: 128px; padding: 0 18px; border-right: 1px solid #e4e4e4; color: var(--metro-dark); font-size: 12px; font-weight: 900; letter-spacing: .045em; text-align: center; text-transform: uppercase; white-space: nowrap; } .home-category-strip a:first-child { border-left: 1px solid #e4e4e4; } .home-category-strip a:hover { background: #fff; color: var(--metro-blue); box-shadow: inset 0 -4px 0 var(--metro-blue) !important; } .home-category-strip .home-category-all { gap: 8px; color: var(--metro-blue); } .home-category-strip .home-category-all svg { width: 15px; height: 15px; } .home-showcase { display: grid; grid-template-columns: minmax(0, 57%) minmax(0, 43%); grid-template-rows: repeat(2, minmax(260px, 1fr)); width: 100%; max-width: 1920px; min-height: 560px; margin: 0 auto; background: #fff; } .home-showcase-tile { position: relative; display: block; min-width: 0; overflow: hidden; isolation: isolate; background: var(--metro-blue); color: #fff; } .home-showcase-main { grid-row: 1 / span 2; min-height: 560px; background: #182a56; } .home-showcase-top { min-height: 280px; background: #151515; } .home-showcase-bottom { min-height: 280px; background: #0078d4; } .home-showcase-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .home-showcase-tile:hover .home-showcase-image { transform: scale(1.025); } .home-showcase-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .08) 65%); } .home-showcase-main .home-showcase-overlay { background: linear-gradient(90deg, rgba(5, 14, 37, .54), transparent 68%); } .home-showcase-bottom .home-showcase-overlay { background: linear-gradient(90deg, rgba(0, 72, 127, .58), rgba(0, 120, 212, .02) 76%); } .home-showcase-copy { position: absolute; left: clamp(24px, 4vw, 66px); bottom: clamp(25px, 4vw, 60px); display: grid; max-width: min(82%, 440px); gap: 4px; color: #fff; } .home-showcase-main .home-showcase-copy { bottom: clamp(32px, 6vw, 78px); } .home-showcase-copy strong { font-size: clamp(29px, 3.2vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: .98; } .home-showcase-main .home-showcase-copy strong { font-size: clamp(34px, 4vw, 66px); } .home-showcase-copy > span { font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; line-height: 1.25; } .home-showcase-copy em { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; align-self: start; justify-self: start; gap: 8px; width: 240px; min-height: 42px; margin-top: 18px; padding: 0 18px; border: 1px solid #fff; background: #fff; color: var(--metro-dark); font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; } .home-showcase-top .home-showcase-copy em { background: var(--metro-orange); border-color: var(--metro-orange); color: #fff; } .home-showcase-bottom .home-showcase-copy em { background: var(--metro-dark); border-color: var(--metro-dark); color: #fff; } .home-showcase-copy em svg { width: 14px; height: 14px; } .home-benefits { border-bottom: 1px solid #d7d7d7; background: #fff; } .home-benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .home-benefits-grid > div { display: flex; align-items: center; gap: 14px; min-height: 114px; padding: 22px; border-right: 1px solid #e1e1e1; } .home-benefits-grid > div:first-child { border-left: 1px solid #e1e1e1; } .home-benefits-grid > div > svg { flex: 0 0 auto; width: 34px; height: 34px; color: var(--metro-blue); stroke-width: 1.65; } .home-benefits-grid p { display: grid; gap: 3px; margin: 0; line-height: 1.2; } .home-benefits-grid strong { color: var(--metro-dark); font-size: 13px; font-weight: 900; } .home-benefits-grid span { color: #666; font-size: 12px; } .home-offers { padding-top: 64px; padding-bottom: 20px; } .home-offers .section-heading { align-items: end; margin-bottom: 28px; } .home-offers .section-heading h2 { margin: 0; color: var(--metro-dark); font-size: clamp(32px, 4vw, 50px); font-weight: 900; letter-spacing: -1.7px; } .home-offers .section-heading .store-section-label { margin: 0 0 5px; } .home-offers .text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } .home-offers .text-link svg { width: 15px; height: 15px; } @media (max-width: 980px) { .home-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 500px; } .home-showcase-main { min-height: 500px; } .home-showcase-top, .home-showcase-bottom { min-height: 250px; } .home-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-benefits-grid > div:nth-child(3) { border-left: 1px solid #e1e1e1; } } @media (max-width: 700px) { .home-category-strip { display: none; } .home-showcase { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; } .home-showcase-main, .home-showcase-top, .home-showcase-bottom { grid-row: auto; min-height: 320px; } .home-showcase-copy { left: 24px; bottom: 26px; } .home-showcase-main .home-showcase-copy { bottom: 26px; } .home-showcase-copy strong, .home-showcase-main .home-showcase-copy strong { font-size: clamp(31px, 10vw, 45px); } .home-showcase-copy > span { font-size: 15px; } .home-showcase-copy em { width: 220px; min-height: 40px; margin-top: 13px; padding: 0 14px; } .home-benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-benefits-grid > div, .home-benefits-grid > div:nth-child(3) { display: grid; grid-template-rows: 30px 62px; align-content: center; align-items: start; justify-items: center; min-width: 0; min-height: 136px; height: 136px; padding: 13px 6px 11px; border: 0; border-right: 1px solid #e1e1e1; row-gap: 7px; text-align: center; } .home-benefits-grid > div:first-child { border-left: 0; } .home-benefits-grid > div:last-child { border-right: 0; } .home-benefits-grid > div > svg { align-self: center; width: 29px; height: 29px; } .home-benefits-grid p { display: grid; grid-template-rows: 28px 34px; align-content: start; width: 100%; height: 62px; gap: 0; margin: 0; text-align: center; } .home-benefits-grid strong, .home-benefits-grid span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; width: 100%; text-wrap: balance; } .home-benefits-grid strong { -webkit-line-clamp: 2; align-self: start; color: var(--metro-dark); font-size: 10px; font-weight: 900; line-height: 1.18; } .home-benefits-grid span { -webkit-line-clamp: 2; align-self: start; color: #68766f; font-size: 9px; line-height: 1.22; } .home-offers { padding-top: 42px; } .home-offers .section-heading { display: flex; align-items: flex-start; gap: 14px; } .home-offers .section-heading h2 { font-size: 34px; } /* Keep WooCommerce's shortened page list on one calm, compact line. */ .woocommerce nav.woocommerce-pagination { width: 100%; margin: 32px 0; overflow: hidden; } .woocommerce nav.woocommerce-pagination ul { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; white-space: nowrap; } .woocommerce nav.woocommerce-pagination ul li { display: block; flex: 0 0 auto; margin: 0 !important; border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; font-size: 14px; line-height: 1; } } /* AJAX slide-in cart */ body.store-cart-drawer-open { overflow: hidden; } .store-cart-drawer[hidden] { display: none !important; } .store-cart-drawer { position: fixed; z-index: 100000; inset: 0; pointer-events: none; } .store-cart-drawer.is-open { pointer-events: auto; } .store-cart-drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, .42); cursor: pointer; opacity: 0; transition: opacity .22s ease; } .store-cart-drawer.is-open .store-cart-drawer-backdrop { opacity: 1; } .store-cart-drawer-panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(100%, 438px); height: 100dvh; min-height: 100vh; overflow: hidden; border: 0; background: #fff; color: var(--metro-dark); outline: 0; transform: translateX(100%); transition: transform .22s ease; } .store-cart-drawer.is-open .store-cart-drawer-panel { transform: translateX(0); } .store-cart-drawer-close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 0 !important; background: #fff; color: var(--metro-dark); cursor: pointer; } .store-cart-drawer-close:hover { background: var(--metro-pale); border-color: var(--metro-blue); color: var(--metro-blue); } .store-cart-drawer-close svg { width: 16px; height: 16px; } .store-cart-drawer-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 62px 24px 24px; overflow-y: auto; background: #fff; } .store-drawer-count { display: flex; align-items: baseline; gap: 6px; margin: 0 0 17px; color: #666; font-size: 12px; } .store-drawer-count span:first-child { color: var(--metro-dark); font-weight: 900; } .store-drawer-items { display: grid; flex: 1 0 auto; align-content: start; gap: 0; margin: 0; padding: 0; list-style: none; } .store-drawer-item { display: grid; grid-template-columns: 70px minmax(0, 1fr) max-content; grid-template-rows: auto auto; gap: 0 12px; align-items: start; padding: 14px 0; border-top: 1px solid #d7d7d7; } .store-drawer-item-image { display: grid; grid-row: 1 / span 2; place-items: center; align-self: center; width: 70px; height: 78px; border: 1px solid #dbeafa; background: #fff; } .store-drawer-item-image a { display: grid; place-items: center; width: 100%; height: 100%; } .store-drawer-item-image img { width: 62px; height: 70px; object-fit: contain; mix-blend-mode: multiply; } .store-drawer-item-copy { grid-column: 2; min-width: 0; } .store-drawer-item-copy h3 { display: -webkit-box; overflow: hidden; margin: 0 0 6px; color: var(--metro-dark); font-size: 13px; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .store-drawer-item-copy h3 a:hover { color: var(--metro-blue); } .store-drawer-item > strong { grid-column: 3; align-self: start; padding-top: 4px; color: var(--metro-dark); font-size: 12px; font-weight: 900; white-space: nowrap; } .store-drawer-item-meta { display: flex; grid-column: 2 / -1; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin-top: 7px; color: #666; font-size: 11px; } .store-drawer-remove { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0 !important; background: #fff; color: #777; cursor: pointer; } .store-drawer-remove:hover { background: #fff; color: var(--metro-orange); box-shadow: inset 0 -2px 0 var(--metro-orange) !important; } .store-drawer-remove:disabled { cursor: wait; opacity: .42; } .store-drawer-remove svg { width: 15px; height: 15px; } .store-drawer-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 18px 0; border-top: 3px solid var(--metro-dark); color: var(--metro-dark); } .store-drawer-total span { font-size: 16px; font-weight: 900; } .store-drawer-total strong { color: var(--metro-blue); font-size: 22px; font-weight: 900; white-space: nowrap; } .store-drawer-actions { display: grid; gap: 10px; } .store-drawer-primary, .store-drawer-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 47px; padding: 0 18px; border: 1px solid var(--metro-blue); border-radius: 0 !important; font-size: 12px; font-weight: 900; letter-spacing: .045em; text-align: center; text-transform: uppercase; } .store-drawer-primary { background: var(--metro-blue); color: #fff; } .store-drawer-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; } .store-drawer-secondary { background: #fff; color: var(--metro-blue); } .store-drawer-secondary:hover { background: #fff; color: var(--blue-hover); box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .store-drawer-primary svg { width: 15px; height: 15px; } .store-drawer-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 330px; text-align: center; } .store-drawer-empty > span { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; background: var(--metro-pale); color: var(--metro-blue); } .store-drawer-empty > span svg { width: 24px; height: 24px; } .store-drawer-empty h3 { margin: 0 0 6px; color: var(--metro-dark); font-size: 23px; letter-spacing: -.5px; } .store-drawer-empty p { margin: 0 0 22px; color: #666; font-size: 13px; } @media (max-width: 480px) { .store-cart-drawer-panel { width: calc(100% - 18px); } .store-cart-drawer-close { top: 12px; right: 12px; } .store-cart-drawer-content { padding: 56px 18px 18px; } .store-drawer-item { grid-template-columns: 62px minmax(0, 1fr) max-content; gap: 10px; } .store-drawer-item-image { width: 62px; height: 70px; } .store-drawer-item-image img { width: 55px; height: 63px; } } /* -------------------------------------------------------------------------- VELVET GREEN REFINEMENT A white storefront with one calm green system shared by every flow. -------------------------------------------------------------------------- */ :root { --ink: #173b2d; --muted: #65766d; --line: #cfdfd4; --page: #fff; --soft: #f4f8f5; --blue: #1d6b4d; --blue-hover: #124e38; --metro-blue: #1d6b4d; --metro-dark: #12382a; --metro-teal: #3c8062; --metro-orange: #a96828; --metro-yellow: #9bc7af; --metro-pale: #e9f3ed; } body, body.credoplus-store, button, input, select, textarea { font-family: 'Space Grotesk', Arial, sans-serif; } body, body.credoplus-store, .credoplus-store .site-content, .credoplus-store .site-footer { color: var(--ink); background: #fff; } /* The old utility banner is deliberately removed rather than merely hidden. */ .utility-bar { display: none !important; } .site-header { border-bottom-color: var(--metro-blue) !important; } .header-main { min-height: 70px; } .custom-logo { max-height: 45px !important; max-width: 220px !important; } .wordmark { color: var(--metro-dark); } .search-form, .store-sort-control, .filter-trigger { border-color: var(--line) !important; } .search-form:focus-within, .store-sort-control:focus-within { border-color: var(--metro-blue) !important; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .header-search .search-results { border-color: var(--line) !important; } .header-search .search-result:hover, .header-search .search-result:focus { background: var(--metro-pale) !important; } /* WordPress adds `search-results` to the body on a results page. Keep it separate from the similarly named autocomplete panel in the header. */ body.search-results { display: block !important; position: static !important; top: auto !important; left: auto !important; z-index: auto !important; width: auto !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .site-footer { border-top-color: var(--metro-blue) !important; background: #fff !important; color: var(--muted); } .footer-bottom { border-top-color: var(--line) !important; } /* Homepage: keep it white around the campaign and use the green range inside it. */ .home-category-strip, .home-benefits { border-color: var(--line) !important; } .home-category-strip a, .home-benefits-grid > div { border-color: var(--line) !important; } .home-showcase-main { background: #123c2d !important; } .home-showcase-top { background: #0d2b20 !important; } .home-showcase-bottom { background: #287356 !important; } .home-showcase-main .home-showcase-overlay { background: linear-gradient(90deg, rgba(8, 35, 25, .82), rgba(8, 35, 25, .08) 70%) !important; } .home-showcase-bottom .home-showcase-overlay { background: linear-gradient(90deg, rgba(20, 77, 54, .76), rgba(20, 77, 54, .04) 76%) !important; } .home-showcase-top .home-showcase-copy em { background: var(--metro-teal) !important; border-color: var(--metro-teal) !important; } .home-showcase-bottom .home-showcase-copy em { background: var(--metro-dark) !important; border-color: var(--metro-dark) !important; } .home-benefits-grid > div > svg { color: var(--metro-blue) !important; } /* Shared controls and panels. */ .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .store-drawer-primary { background: var(--metro-blue) !important; border-color: var(--metro-blue) !important; } .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .store-drawer-primary:hover { background: var(--blue-hover) !important; border-color: var(--blue-hover) !important; } .button-outline, .store-drawer-secondary { background: #fff !important; border-color: var(--metro-blue) !important; color: var(--metro-blue) !important; } .store-drawer-secondary:hover { color: var(--blue-hover) !important; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .product-card-media, .woocommerce ul.products li.product, .woocommerce ul.products li.product.store-product-card { border-color: var(--line) !important; } .product-card-media { border-bottom-color: var(--metro-blue) !important; } .product-card-badge, .woocommerce span.onsale { background: var(--metro-orange) !important; } /* Product gallery: a slightly more compact, high-resolution image without a click-through. */ .store-gallery-main { min-height: 430px; border-color: #c5d9cc !important; } .store-main-image { display: grid; place-items: center; width: 100%; min-height: 430px; padding: 30px 48px; } .store-main-image #store-product-main-image { width: 100%; height: 340px; max-height: 340px; object-fit: contain; mix-blend-mode: normal; cursor: default; pointer-events: none; } .store-image-hint { display: none !important; } .store-gallery-thumb { border-color: var(--line) !important; } .store-gallery-thumb:hover, .store-gallery-thumb.is-active { border-color: var(--metro-blue) !important; background: var(--metro-pale) !important; } .single-product .product-summary-panel form.cart { border-color: var(--line) !important; } .single-product .product-summary-panel table.variations select, .single-product .quantity .qty { border-color: var(--line) !important; } .product-specs { border-left-color: var(--metro-yellow) !important; background: var(--metro-dark) !important; } .product-specs .spec { gap: 6px; } /* A complete white empty-cart state, without WooCommerce's inline notice. */ .woocommerce-cart .store-empty-cart { width: min(calc(100% - 32px), 660px); margin: 52px auto 104px; padding: 52px 42px 48px; border: 1px solid var(--line); border-top: 6px solid var(--metro-blue); background: #fff; text-align: center; } .store-empty-cart-icon { width: 58px; height: 58px; margin-bottom: 18px; border-color: var(--line); background: var(--metro-pale); color: var(--metro-blue); } .store-empty-cart-icon svg { width: 25px; height: 25px; } .store-empty-cart h1 { color: var(--metro-dark); font-size: clamp(31px, 4vw, 43px); letter-spacing: -1.7px; } .store-empty-cart p:not(.store-flow-kicker) { max-width: 430px; color: var(--muted); } /* Checkout fields: one full-width note field and a standard searchable country picker. */ .store-checkout-form .woocommerce-additional-fields__field-wrapper #order_comments_field { grid-column: 1 / -1 !important; } .store-checkout-form #order_comments { width: 100% !important; min-height: 118px; } .store-checkout-form #billing_country, .store-checkout-form #shipping_country, .store-checkout-form select.country_to_state { min-height: 46px; padding: 0 12px !important; border: 1px solid var(--line) !important; appearance: auto !important; background: #fff !important; } .store-checkout-form .select2-container--default .select2-selection--single { height: 46px !important; border: 1px solid var(--line) !important; } .store-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px !important; line-height: 44px !important; } .store-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; } .store-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--metro-blue) !important; } .select2-container--open .select2-dropdown { border: 1px solid var(--line) !important; background: #fff; box-shadow: 0 12px 28px rgba(18, 56, 42, .12); } .select2-container--default .select2-search--dropdown .select2-search__field { min-height: 40px; border: 1px solid var(--line) !important; outline: 0; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--metro-blue) !important; color: #fff; } .store-checkout-form input.input-text, .store-checkout-form select, .store-checkout-form textarea { border-color: var(--line) !important; } .store-checkout-form input.input-text:focus, .store-checkout-form select:focus, .store-checkout-form textarea:focus { border-color: var(--metro-blue) !important; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } /* Account layout is named explicitly so a reversed WooCommerce markup order cannot break it. */ .woocommerce-account .store-flow-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-areas: 'nav content'; grid-template-columns: 228px minmax(0, 1fr); gap: 34px; } .woocommerce-account .woocommerce-MyAccount-navigation { grid-area: nav; border-color: var(--line) !important; border-top-color: var(--metro-blue) !important; } .woocommerce-account .woocommerce-MyAccount-content { grid-area: content; min-width: 0; padding: 28px !important; border: 1px solid var(--line) !important; border-top: 6px solid var(--metro-blue) !important; background: #fff !important; } .woocommerce-account .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li + li, .woocommerce-account table.woocommerce-orders-table td, .woocommerce-account table.shop_table td { border-color: var(--line) !important; } .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { border-color: var(--line) !important; border-left-color: var(--metro-blue) !important; } .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.shop_table { border-color: var(--line) !important; border-top-color: var(--metro-blue) !important; } .woocommerce-account .woocommerce-Address { border-color: var(--line) !important; border-top-color: var(--metro-blue) !important; } /* Guest account: Login and Register are two equal, full-size panels. */ .woocommerce-account .store-flow-content > .woocommerce > #customer_login { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 24px; width: min(100%, 880px); margin: 0 auto; } .woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { display: none !important; content: none !important; } .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2 { display: flex; flex-direction: column; float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 28px; border: 1px solid var(--line); border-top: 6px solid var(--metro-blue); background: #fff; box-shadow: 0 16px 36px rgba(23, 59, 45, .06); } .woocommerce-account #customer_login h2 { margin: 0 0 22px; color: var(--metro-dark); font-size: 28px; font-weight: 700; letter-spacing: -.9px; } .woocommerce-account #customer_login form { display: flex; flex: 1 1 auto; flex-direction: column; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .woocommerce-account #customer_login .form-row { float: none; width: 100%; margin: 0 0 17px; padding: 0; } .woocommerce-account #customer_login label { display: block; margin: 0 0 7px; color: var(--metro-dark); font-size: 11px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; } .woocommerce-account #customer_login .input-text, .woocommerce-account #customer_login input[type="email"], .woocommerce-account #customer_login input[type="text"], .woocommerce-account #customer_login input[type="password"] { width: 100% !important; min-height: 46px; padding: 0 13px; border: 1px solid var(--line) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; } .woocommerce-account #customer_login .input-text:-webkit-autofill, .woocommerce-account #customer_login input[type="email"]:-webkit-autofill, .woocommerce-account #customer_login input[type="text"]:-webkit-autofill, .woocommerce-account #customer_login input[type="password"]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--metro-dark) !important; caret-color: var(--metro-dark); } .woocommerce-account #customer_login .password-input { width: 100%; } .woocommerce-account #customer_login .input-text:focus, .woocommerce-account #customer_login input[type="email"]:focus, .woocommerce-account #customer_login input[type="text"]:focus, .woocommerce-account #customer_login input[type="password"]:focus { border-color: var(--metro-blue) !important; box-shadow: inset 0 -3px 0 var(--metro-blue) !important; } .woocommerce-account #customer_login .woocommerce-form-login .form-row:last-of-type { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 2px 0 0; } .woocommerce-account #customer_login .woocommerce-form-login__rememberme { display: inline-flex !important; grid-row: 1; align-items: center; gap: 10px; min-height: 42px; width: 100%; margin: 0 !important; padding: 0 12px; border: 1px solid var(--line); background: var(--metro-pale); color: var(--metro-dark); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: none; } .woocommerce-account #customer_login .woocommerce-form-login__rememberme input[type="checkbox"] { display: block; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--metro-blue); } .woocommerce-account #customer_login .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: stretch; width: 100%; min-height: 44px; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 0 !important; background: var(--metro-blue) !important; color: #fff !important; font-size: 11px; font-weight: 900; letter-spacing: .04em; line-height: 1; text-align: center; text-transform: uppercase; } .woocommerce-account #customer_login .woocommerce-form-login__submit { grid-row: 2; width: 100%; } .woocommerce-account #customer_login .u-column2 form .form-row:last-child { margin-top: auto; } .woocommerce-account #customer_login .button:hover { background: var(--blue-hover) !important; } .woocommerce-account #customer_login .lost_password { margin: 18px 0 0; font-size: 13px; } .woocommerce-account #customer_login .lost_password a { color: var(--metro-blue); font-weight: 700; text-decoration: none; } .woocommerce-account #customer_login .lost_password a:hover { color: var(--blue-hover); text-decoration: underline; text-underline-offset: 3px; } .woocommerce-account #customer_login .woocommerce-privacy-policy-text { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .wc-forward { display: none !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .store-confirm-email-link { color: var(--metro-blue); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .store-confirm-email-link:hover { color: var(--blue-hover); } @media (max-width: 700px) { .woocommerce-account .store-flow-content > .woocommerce > #customer_login { grid-template-columns: 1fr; gap: 16px; width: 100%; } .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2 { padding: 22px; } .woocommerce-account #customer_login h2 { margin-bottom: 18px; font-size: 25px; } .woocommerce-account #customer_login .button { width: 100%; } } /* Successful add-to-cart feedback is a short toast, never a page-wide banner. */ .store-toast-stack { position: fixed; z-index: 100001; top: 22px; right: 24px; display: grid; gap: 10px; width: min(calc(100vw - 40px), 430px); pointer-events: none; } .admin-bar .store-toast-stack { top: 54px; } .woocommerce-message.store-toast-message { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 14px 48px 14px 46px !important; border: 1px solid var(--line) !important; border-left: 5px solid var(--metro-blue) !important; background: #fff !important; color: var(--metro-dark) !important; box-shadow: 0 16px 34px rgba(18, 56, 42, .18) !important; font-size: 13px; line-height: 1.45; pointer-events: auto; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; } .woocommerce-message.store-toast-message::before { display: none !important; } .woocommerce-message.store-toast-message::after { content: '✓'; position: absolute; top: 50%; left: 16px; display: grid; place-items: center; width: 18px; height: 18px; color: #fff; background: var(--metro-blue); font-size: 12px; font-weight: 700; line-height: 1; transform: translateY(-50%); } .woocommerce-message.store-toast-message.is-leaving { opacity: 0; transform: translateY(-8px); } .store-toast-dismiss { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; transform: translateY(-50%); } .store-toast-dismiss:hover { color: var(--metro-blue); } .store-toast-dismiss svg { width: 17px; height: 17px; } @media (max-width: 980px) { .woocommerce-account .store-flow-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-areas: 'nav' 'content'; grid-template-columns: 1fr; } .woocommerce-account .woocommerce-MyAccount-content { padding: 22px !important; } .store-gallery-main, .store-main-image { min-height: 340px; } .store-main-image #store-product-main-image { height: 280px; max-height: 280px; } } @media (max-width: 700px) { .header-main { min-height: 58px; } .custom-logo { max-height: 35px !important; max-width: 165px !important; } .woocommerce-cart .store-empty-cart { width: min(calc(100% - 32px), 660px); margin: 34px auto 68px; padding: 40px 22px; } .store-toast-stack { top: 12px; right: 12px; width: calc(100vw - 24px); } .admin-bar .store-toast-stack { top: 48px; } .store-gallery-main, .store-main-image { min-height: 300px; } .store-main-image { padding: 22px 28px; } .store-main-image #store-product-main-image { height: 250px; max-height: 250px; } } /* The mobile catalogue filter is its own scrollable sheet. */ @media (max-width: 900px) { .catalog-filter { top: 0 !important; right: auto !important; bottom: auto !important; left: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; padding-bottom: 48px !important; overflow-x: hidden !important; overflow-y: scroll !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } } /* Footer menus are editable in the Customizer; keep accepted payments quiet and aligned with the legal links on every screen size. */ .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; } .footer-copyright { justify-self: start; } .footer-brand .custom-logo-link { display: inline-flex; align-items: center; } .footer-brand .custom-logo { width: auto !important; max-width: 150px !important; max-height: 30px !important; } .footer-payments { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .footer-payments-label { margin-right: 2px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; } .footer-payment-logo { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 22px; padding: 3px 5px; overflow: hidden; border: 0; border-radius: 0; background: transparent; line-height: 1; } .footer-payment-logo svg { display: block; width: 100%; height: 100%; } .footer-payment-visa { width: 48px; } .footer-payment-mastercard { width: 34px; padding: 2px 4px; } .footer-legal { justify-self: end; } .footer-legal-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 0; padding: 0; list-style: none; } .footer-legal-menu li { margin: 0 !important; } .footer-legal-menu a:hover { color: var(--metro-blue); } @media (max-width: 600px) { .footer-bottom { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 14px; } .footer-copyright, .footer-payments, .footer-legal { grid-column: 1; justify-self: start; } .footer-brand .custom-logo { max-width: 125px !important; max-height: 26px !important; } .footer-payments { min-height: 26px; padding: 2px 0; } .footer-legal { width: 100%; } .footer-legal-menu { justify-content: flex-start; gap: 8px 10px; } }