/* Kouture B2B Eyewear Catalog — storefront styles Layout language follows the reference (authentic.com): serif collection titles, grey square image tiles, pill controls, accordion filters, swatch buttons. */ :root { --kv-primary: #0F172A; --kv-highlight: #DD183B; --kv-ink: #111; --kv-muted: #6b6b6b; --kv-line: #e2e2e2; --kv-tile: #efefef; --kv-radius: 999px; --kv-serif: "Bodoni Moda", Didot, "Noto Serif Display", "URW Palladio L", P052, serif; --kv-sans: "Avenir Next", Avenir, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; --kv-cols: 4; } .kv-b2b .woocommerce, .kv-b2b.woocommerce-page .site-content { font-family: var(--kv-sans); } /* ------------------------------------------------------------------ buttons */ .kv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 3px; font: 600 13px/1 var(--kv-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .kv-btn--solid { background: var(--kv-primary); color: #fff; border: 1px solid var(--kv-primary); } .kv-btn--solid:hover { background: #000; color: #fff; } .kv-btn--ghost { background: #fff; color: var(--kv-ink); border: 1px solid var(--kv-ink); } .kv-btn--ghost:hover { background: var(--kv-ink); color: #fff; } /* ------------------------------------------------------------------ store bar */ .kv-storebar { background: var(--kv-primary); color: #fff; position: relative; z-index: 50; } .kv-storebar__inner { max-width: 1440px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; } .kv-storebar__menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .kv-storebar__menu::-webkit-scrollbar { display: none; } .kv-storebar__menu a, .kv-storebar__menu button { color: #fff; font: 500 16px/56px var(--kv-sans); text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .kv-storebar__menu a:hover, .kv-storebar__menu button:hover { text-decoration: underline; text-underline-offset: 6px; } .kv-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--kv-ink); box-shadow: 0 18px 30px rgba(0,0,0,.12); padding: 28px 30px 34px; } .kv-mega__list { max-width: 1380px; margin: 0 auto; list-style: none; padding: 0; columns: 4 180px; column-gap: 40px; } .kv-mega__list li { break-inside: avoid; } .kv-mega__list a { display: block; color: var(--kv-ink); font: 400 15px/2.1 var(--kv-sans); text-decoration: none; } .kv-mega__list a:hover { text-decoration: underline; } .kv-storebar__tools { display: flex; align-items: center; gap: 18px; } .kv-search { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: var(--kv-radius); padding: 0 6px 0 16px; height: 38px; } .kv-search input[type=search] { background: transparent; border: 0; color: #fff; width: 230px; font: 14px var(--kv-sans); outline: none; padding: 0; box-shadow: none; } .kv-search input::placeholder { color: rgba(255,255,255,.7); } .kv-search button { background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; display: flex; } .kv-storebar__icon { color: #fff; display: inline-flex; position: relative; } .kv-storebar__icon:hover { color: #fff; opacity: .8; } .kv-cart-count { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--kv-highlight); color: #fff; font: 600 11px/18px var(--kv-sans); text-align: center; padding: 0 4px; } /* ------------------------------------------------------------------ collection header */ .kv-plp-head { margin: 8px 0 18px; } .kv-plp-head__title { font-family: var(--kv-serif); font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 18px; color: var(--kv-ink); } .kv-plp-head__count { font-size: .42em; vertical-align: .55em; letter-spacing: 0; } .kv-plp-head__desc { color: var(--kv-muted); max-width: 760px; margin: -6px 0 18px; } .kv-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--kv-line); overflow-x: auto; scrollbar-width: none; } .kv-tabs::-webkit-scrollbar { display: none; } .kv-tabs a { color: #444; font: 400 17px/1 var(--kv-sans); padding: 12px 0 13px; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; } .kv-tabs a:hover { color: var(--kv-ink); } .kv-tabs a[aria-current="page"] { color: var(--kv-ink); font-weight: 600; border-bottom-color: var(--kv-ink); } /* ------------------------------------------------------------------ toolbar */ .kv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 18px; } .kv-toolbar__left { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .kv-pill { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: 1px solid var(--kv-line); border-radius: var(--kv-radius); background: #fff; color: var(--kv-ink); font: 500 14px/1 var(--kv-sans); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; } .kv-pill:hover { border-color: #999; } .kv-pill__show { display: none; } .kv-filters-hidden .kv-pill__hide { display: none; } .kv-filters-hidden .kv-pill__show { display: inline; } .kv-pill__badge { background: var(--kv-ink); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; font-size: 11px; line-height: 20px; text-align: center; padding: 0 5px; } .kv-pill--sort { padding: 0 6px 0 18px; } .kv-pill--sort form.woocommerce-ordering { margin: 0 !important; float: none !important; } .kv-pill--sort select { border: 0 !important; background-color: transparent !important; font: 500 14px var(--kv-sans) !important; text-transform: uppercase; letter-spacing: .02em; padding: 0 28px 0 4px !important; height: 44px; box-shadow: none !important; color: var(--kv-ink); cursor: pointer; } .kv-toolbar__right { display: inline-flex; gap: 6px; border: 1px solid var(--kv-line); border-radius: var(--kv-radius); padding: 8px 14px; } .kv-density { display: inline-flex; gap: 2px; align-items: stretch; height: 24px; padding: 0 6px; background: none; border: 0; cursor: pointer; } .kv-density i { display: block; width: 6px; border: 1.5px solid #333; border-radius: 1px; } .kv-density[aria-pressed="true"] i { background: #111; border-color: #111; } /* ------------------------------------------------------------------ layout */ .kv-plp { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 0 26px; align-items: start; } .kv-filters-hidden .kv-plp { grid-template-columns: minmax(0, 1fr); } .kv-filters-hidden .kv-facets { display: none; } .kv-plp__main { min-width: 0; } /* ------------------------------------------------------------------ facets */ .kv-facets { position: sticky; top: 20px; } .kv-facet { border-bottom: 1px solid var(--kv-line); } .kv-facet summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 26px 4px 26px 0; font: 500 15px/1 var(--kv-sans); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; color: var(--kv-ink); } .kv-facet summary::-webkit-details-marker { display: none; } .kv-facet summary::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid #222; border-bottom: 1.6px solid #222; transform: rotate(-45deg); transition: transform .15s; margin-right: 8px; } .kv-facet[open] summary::after { transform: rotate(45deg); } .kv-facet__n { margin-left: auto; margin-right: 14px; background: var(--kv-ink); color: #fff; border-radius: 10px; font-size: 11px; padding: 3px 7px; } .kv-facet__list { list-style: none; margin: -8px 0 18px; padding: 0; } .kv-facet__list--scroll { max-height: 300px; overflow: auto; } .kv-facet__list li { margin: 0; } .kv-facet__list label { display: flex; align-items: center; gap: 10px; padding: 7px 0; font: 15px/1.3 var(--kv-sans); color: #222; cursor: pointer; } .kv-facet__list input { width: 18px; height: 18px; accent-color: var(--kv-ink); margin: 0; } .kv-facet__list em { margin-left: auto; font-style: normal; color: var(--kv-muted); font-size: 13px; padding-right: 6px; } .kv-facets__actions { display: flex; gap: 10px; padding: 18px 0; } .kv-js .kv-facets__actions .kv-btn--solid { display: none; } .kv-empty { margin: 24px 0; } /* ------------------------------------------------------------------ product grid & cards */ .kv-plp ul.products, .kv-catalog-sc ul.products, .kv-sc-row ul.products, .woocommerce .kv-sc-row ul.products { display: grid !important; grid-template-columns: repeat(var(--kv-cols), minmax(0, 1fr)) !important; gap: 34px 12px !important; margin: 0 !important; padding: 0 !important; } .kv-plp ul.products::before, .kv-plp ul.products::after, .kv-catalog-sc ul.products::before, .kv-catalog-sc ul.products::after { display: none !important; } .kv-plp ul.products li.product, .kv-catalog-sc ul.products li.product, .kv-sc-row ul.products li.product, .woocommerce .kv-plp ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important; text-align: left !important; clear: none !important; } ul.products li.product .woocommerce-LoopProduct-link { display: block; text-decoration: none; color: inherit; } .kv-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--kv-tile); overflow: hidden; margin-bottom: 10px; } .kv-card__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; padding: 9%; margin: 0 !important; mix-blend-mode: multiply; transition: opacity .25s ease, transform .4s ease; } .kv-card__media .kv-card__alt { opacity: 0; } li.product:hover .kv-card__media .kv-card__alt { opacity: 1; } li.product:hover .kv-card__media img:not(.kv-card__alt) { transform: scale(1.03); } li.product:hover .kv-card__media:has(.kv-card__alt) img:not(.kv-card__alt) { opacity: 0; } .kv-card__quick { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(60, 64, 110, .55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: .9; transition: background .15s; } li.product:hover .kv-card__quick { background: var(--kv-primary); } .kv-card__colors { display: block; font: 15px/1.2 var(--kv-sans); color: #333; padding: 2px 0 8px; border-bottom: 1px solid var(--kv-line); margin-bottom: 12px; } .kv-card__brand { display: block; font: 400 15px/1.3 var(--kv-sans); color: #333; margin-bottom: 4px; } ul.products li.product .woocommerce-loop-product__title { font: 500 18px/1.35 var(--kv-sans) !important; color: var(--kv-ink) !important; padding: 0 !important; margin: 0 0 4px !important; letter-spacing: 0; } .kv-b2b ul.products li.product .button, .kv-b2b ul.products li.product .ast-on-card-button, .kv-b2b ul.products li.product .astra-shop-summary-wrap .ast-woo-product-category { display: none !important; } .kv-prices-hidden ul.products li.product .price { display: none !important; } .woocommerce nav.woocommerce-pagination { margin-top: 40px; } /* ------------------------------------------------------------------ product page */ .kv-pdp__eyebrow { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .kv-pdp__brand { font: 500 17px/1.2 var(--kv-sans); color: var(--kv-ink); text-decoration: underline; text-underline-offset: 3px; } .kv-pdp__crumbs { font: 13px/1.4 var(--kv-sans); color: #444; } .kv-pdp__crumbs a { color: #444; text-decoration: none; } .kv-pdp__crumbs a:hover { text-decoration: underline; } .kv-dot { margin: 0 6px; color: #888; } .single-product .product .summary .product_title { font-family: var(--kv-serif) !important; font-weight: 400 !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.12 !important; color: var(--kv-ink); margin: 0 0 6px !important; } .kv-pdp__model { font: 14px/1.4 var(--kv-sans); color: var(--kv-muted); margin: 0 0 18px; letter-spacing: .02em; } .kv-prices-hidden .single-product .summary > .price, .kv-prices-hidden .summary .price, .kv-prices-hidden .woocommerce-variation-price { display: none !important; } .single-product .variations { border: 0; margin: 0 0 8px; } .single-product .variations tr { display: block; margin-bottom: 18px; } .single-product .variations th.label, .single-product .variations td.label { display: block; padding: 0 0 8px !important; text-align: left; font: 600 14px var(--kv-sans); } .single-product .variations th.label label::after { content: ":"; } .single-product .variations td.value { display: block; padding: 0 !important; } .kv-select-wrap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kv-no-js .kv-select-wrap, .kv-swatches[hidden] + .kv-select-wrap { position: static !important; width: auto; height: auto; clip: auto; } .reset_variations { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--kv-muted); } .kv-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .kv-swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 16px; border: 1px solid #cfcfcf; border-radius: var(--kv-radius); background: #fff; color: var(--kv-ink); font: 14px/1.2 var(--kv-sans); cursor: pointer; transition: border-color .12s, box-shadow .12s; } .kv-swatch:hover { border-color: #777; } .kv-swatch[aria-checked="true"] { border-color: var(--kv-ink); box-shadow: inset 0 0 0 1px var(--kv-ink); } .kv-swatch[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; } .kv-swatches--color .kv-swatch { flex-direction: column; align-items: stretch; width: 108px; padding: 6px; border-radius: 6px; gap: 4px; } .kv-swatch__img { display: block; aspect-ratio: 2 / 1; background: var(--kv-tile) center / contain no-repeat; border-radius: 3px; background-blend-mode: multiply; } .kv-swatch__img:empty:not([style]) { display: none; } .kv-swatches--color .kv-swatch__label { font-size: 12px; text-align: center; line-height: 1.25; } .single-product form.cart .quantity .qty { height: 52px; min-width: 70px; } .single-product form.cart .single_add_to_cart_button { min-height: 52px; padding: 0 34px !important; background: var(--kv-primary) !important; border-color: var(--kv-primary) !important; color: #fff !important; border-radius: 3px !important; font: 600 14px var(--kv-sans) !important; letter-spacing: .07em; text-transform: uppercase; flex: 1; } .single-product form.cart .single_add_to_cart_button:hover { background: #000 !important; } .single-product form.cart .woocommerce-variation-add-to-cart, .single-product form.cart:not(.variations_form) { display: flex; gap: 10px; flex-wrap: wrap; } .kv-trade-cta { border: 1px solid var(--kv-line); padding: 18px; margin: 10px 0 22px; background: #fafafa; } .kv-trade-cta p { margin: 0 0 12px; } .kv-cannot-order form.cart .single_add_to_cart_button, .kv-cannot-order form.cart .quantity { display: none !important; } .kv-specs { margin: 26px 0 10px; border-top: 1px solid var(--kv-line); } .kv-specs details { border-bottom: 1px solid var(--kv-line); } .kv-specs summary { list-style: none; cursor: pointer; padding: 18px 0; font: 600 14px/1 var(--kv-sans); letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; } .kv-specs summary::-webkit-details-marker { display: none; } .kv-specs summary::after { content: "+"; font-weight: 400; font-size: 20px; line-height: 14px; } .kv-specs details[open] summary::after { content: "–"; } .kv-specs details > p { margin: 0 0 18px; color: #333; } .kv-measure { color: #444; max-width: 320px; margin: 0 0 10px; } .kv-measure__svg { width: 100%; height: auto; } .kv-specs__table { width: 100%; border-collapse: collapse; margin: 0 0 18px; border: 0; } .kv-specs__table th, .kv-specs__table td { text-align: left; padding: 8px 0; border: 0; border-bottom: 1px dotted #ddd; font: 14px/1.4 var(--kv-sans); background: none !important; } .kv-specs__table th { color: var(--kv-muted); font-weight: 400; width: 42%; } .kv-specs__table tr[hidden] { display: none; } .single-product .woocommerce-product-gallery { background: var(--kv-tile); } .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img { mix-blend-mode: multiply; } .single-product .flex-control-thumbs { display: flex !important; gap: 8px; margin-top: 8px !important; } .single-product .flex-control-thumbs li { width: 86px !important; float: none !important; background: var(--kv-tile); } .single-product .flex-control-thumbs img { mix-blend-mode: multiply; aspect-ratio: 1/1; object-fit: contain; opacity: .7; } .single-product .flex-control-thumbs img.flex-active, .single-product .flex-control-thumbs img:hover { opacity: 1; outline: 1px solid var(--kv-ink); } .related.products > h2, .upsells.products > h2 { font-family: var(--kv-serif); font-weight: 400; font-size: 30px; margin-bottom: 20px; } .related.products ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 30px 12px !important; } .related.products ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; } /* ------------------------------------------------------------------ cart / checkout (prices hidden) */ .kv-prices-hidden .woocommerce-cart-form .product-price, .kv-prices-hidden .woocommerce-cart-form .product-subtotal, .kv-prices-hidden .cart_totals .cart-subtotal, .kv-prices-hidden .cart_totals .order-total, .kv-prices-hidden .cart_totals .tax-rate, .kv-prices-hidden .cart_totals .fee, .kv-prices-hidden .woocommerce-checkout-review-order-table .product-total, .kv-prices-hidden .woocommerce-checkout-review-order-table tfoot, .kv-prices-hidden .woocommerce-mini-cart__total, .kv-prices-hidden .woocommerce-table--order-details tfoot tr:not(:last-child), .kv-prices-hidden .woocommerce-table--order-details .product-total, .kv-prices-hidden .woocommerce-order-overview__total, .kv-prices-hidden .ast-header-woo-cart .woocommerce-Price-amount, .kv-prices-hidden .ast-cart-menu-wrap .count + .woocommerce-Price-amount { display: none !important; } .kv-checkout-note { background: #f6f6f6; border-left: 3px solid var(--kv-primary); padding: 14px 16px; margin: 20px 0; } /* ------------------------------------------------------------------ tiles */ .kv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 12px; } .kv-tiles--departments { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .kv-tile { display: block; text-decoration: none; color: var(--kv-ink); } .kv-tile__media { position: relative; display: block; aspect-ratio: 1/1; background: var(--kv-tile); margin-bottom: 10px; overflow: hidden; } .kv-tile--large .kv-tile__media { aspect-ratio: 4/3; } .kv-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform .4s; } .kv-tile:hover .kv-tile__media img { transform: scale(1.04); } .kv-tile__name { display: block; font: 400 22px/1.2 var(--kv-serif); } .kv-tile__count { display: block; font: 13px var(--kv-sans); color: var(--kv-muted); margin-top: 2px; } /* ------------------------------------------------------------------ responsive */ @media (max-width: 1100px) { .kv-plp ul.products, .kv-catalog-sc ul.products { grid-template-columns: repeat(min(var(--kv-cols), 3), minmax(0, 1fr)) !important; } .kv-search input[type=search] { width: 150px; } } @media (max-width: 921px) { .kv-storebar__inner { padding: 0 16px; flex-wrap: wrap; gap: 0 16px; } .kv-storebar__menu { order: 2; width: 100%; gap: 22px; border-top: 1px solid rgba(255,255,255,.15); } .kv-storebar__menu a, .kv-storebar__menu button { line-height: 46px; font-size: 15px; } .kv-storebar__tools { width: 100%; padding: 10px 0; } .kv-search { flex: 1; } .kv-search input[type=search] { width: 100%; } .kv-plp { grid-template-columns: minmax(0, 1fr); } .kv-facets { position: fixed; inset: 0 auto 0 0; width: min(88vw, 360px); background: #fff; z-index: 99999; padding: 18px 20px 90px; overflow: auto; box-shadow: 10px 0 30px rgba(0,0,0,.18); transform: translateX(-105%); transition: transform .25s ease; display: block !important; } .kv-facets-open .kv-facets { transform: none; } .kv-facets-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99998; } .kv-js .kv-facets__actions .kv-btn--solid { display: inline-flex; } .kv-facets__actions { position: sticky; bottom: -90px; background: #fff; } .kv-pill__hide { display: none; } .kv-pill__show { display: inline; } .kv-toolbar__right { display: none; } .kv-plp ul.products, .kv-catalog-sc ul.products, .kv-sc-row ul.products, .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 10px !important; } ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; } .kv-card__colors, .kv-card__brand { font-size: 13px; } .kv-card__quick { width: 36px; height: 36px; right: 10px; bottom: 10px; } .kv-mega { padding: 20px 16px; } .kv-mega__list { columns: 2; } } @media (max-width: 480px) { .kv-toolbar { margin: 16px 0 14px; } .kv-pill { height: 42px; padding: 0 14px; font-size: 13px; } .kv-tabs { gap: 20px; } .kv-tabs a { font-size: 15px; } .kv-swatches--color .kv-swatch { width: calc(33.333% - 6px); } } @media (prefers-reduced-motion: reduce) { .kv-card__media img, .kv-tile__media img, .kv-facets { transition: none; } } /* ------------------------------------------------------------------ theme hardening Astra, Twenty Twenty-One and Elementor kits style every