/* ========================================================================== WooCommerce (shop / category / product) — themed to the GOOD design ========================================================================== */ /* NOTE: `woocommerce-page` is a BODY class — an `inherit` here would pull the UA default (Times) from . State the font stack explicitly instead. */ .woocommerce, .woocommerce-page { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ---- Shop layout: category sidebar + main grid ---- */ .shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; } .shop-widget { margin-bottom: 30px; } .shop-widget h3 { margin: 0 0 14px; padding: 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--placeholder); } /* Collapsible widgets (Категории / Бренд): plain headings on desktop; the chevron and accordion behaviour only kick in on mobile (media query below). */ .shop-widget__toggle { display: flex; align-items: center; justify-content: space-between; } .shop-widget__chevron { display: none; flex: none; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; } .shop-search { padding: 0 12px; } .shop-search input { width: 100%; border: 1.5px solid #e8e4e0; border-radius: 999px; padding: 11px 18px; font-family: inherit; font-size: 14px; color: var(--text); background: #fff; transition: border-color .15s ease; } .shop-search input:focus { outline: none; border-color: var(--orange); } .shop-cats, .shop-cats ul { list-style: none; margin: 0; padding: 0; } .shop-cats > li { margin: 0 0 2px; } .shop-cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.3; transition: background .12s ease, color .12s ease; } .shop-cats a:hover { background: var(--newsletter-bg); color: var(--orange); } .shop-cats .cnt { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--placeholder); background: #f3f1ee; border-radius: 999px; padding: 3px 9px; transition: background .12s ease, color .12s ease; } .shop-cats li.is-current > a { background: var(--newsletter-bg); color: var(--orange); font-weight: 700; } .shop-cats li.is-current > a .cnt { background: var(--orange); color: #fff; } .shop-cats ul { margin: 2px 0 8px 14px; padding-left: 8px; border-left: 2px solid #f3ede8; } .shop-cats ul a { font-size: 13px; padding: 7px 10px; } /* ---- Sidebar attribute filters (Бренд, …) — checkbox-style toggle list ---- */ .shop-filter { list-style: none; margin: 0; padding: 0; } .shop-filter > li { margin: 0 0 2px; } .shop-filter a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.3; transition: background .12s ease, color .12s ease; } .shop-filter a:hover { background: var(--newsletter-bg); color: var(--orange); } .shop-filter__check { flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid #d8cfc4; border-radius: 5px; background: #fff; transition: background .12s ease, border-color .12s ease; } .shop-filter a:hover .shop-filter__check { border-color: var(--orange); } .shop-filter__name { flex: 1 1 auto; } .shop-filter .cnt { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--placeholder); background: #f3f1ee; border-radius: 999px; padding: 3px 9px; } .shop-filter li.is-active a { color: var(--text); font-weight: 600; } .shop-filter li.is-active .shop-filter__check { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--orange); } .shop-filter__reset { display: inline-block; margin: 8px 0 0 12px; font-size: 13px; color: var(--placeholder); text-decoration: none; } .shop-filter__reset:hover { color: var(--orange); } /* ---- Uniform product card grid (replaces Woo float layout) ---- */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; margin: 0 0 8px !important; } /* Woo's clearfix pseudo-elements would become grid items (empty first cell) */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; } .shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0; display: flex; flex-direction: column; position: relative; /* anchor for the full-card click overlay */ background: transparent; border: none; text-align: left; } /* Whole card is clickable (stretched product link) */ .woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before { content: ""; position: absolute; inset: 0; border-radius: 18px; z-index: 1; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; position: static; } /* Image tile: the wrapper carries the background; the image blends into it with multiply, so photos with baked-in white backgrounds lose the white box. */ .loop-tile { position: relative; /* anchors the audience badge so it moves with the tile */ z-index: 2; /* above the stretched card-link ::before (z1) so the variant arrows inside stay clickable — the :hover transform makes this tile its own stacking context */ display: block; background: #faf8f6; border: 1px solid #f1ede9; border-radius: 18px; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; } .woocommerce ul.products li.product:hover .loop-tile { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(56,56,55,.10); } .woocommerce ul.products li.product .loop-tile img { width: 100% !important; aspect-ratio: 1 / 1; object-fit: contain; background: none; border: none; border-radius: 0; padding: 0; margin: 0 !important; mix-blend-mode: multiply; } /* Audience badge (pulled from the «Для кого» attribute) — overlaid inside the tile so cards without an audience (e.g. bowls) still align, and it lifts as one element with the tile on hover (no separate transition to desync). */ .woocommerce ul.products li.product .loop-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 10px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; border-radius: 6px; } /* Brand (left) + volume (right) on one row, above the title. */ .woocommerce ul.products li.product .loop-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 4px 0; } .woocommerce ul.products li.product .loop-brand { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--placeholder); } .woocommerce ul.products li.product .loop-vol { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--text); padding: 6px 4px 2px; flex: 1; transition: color .12s ease; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--orange); } .woocommerce ul.products li.product .price { color: var(--text); font-weight: 700; font-size: 16px; padding: 0 4px; } .woocommerce ul.products li.product .price del { color: var(--placeholder); font-weight: 500; } .woocommerce ul.products li.product .price ins { text-decoration: none; } /* Quiet text link instead of a pill button */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button { margin: 6px 4px 2px; padding: 0; align-self: flex-start; background: none; border-radius: 0; color: var(--orange); font-size: 14px; font-weight: 600; position: relative; z-index: 2; /* stays clickable above the overlay */ } .woocommerce ul.products li.product .button::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .15s ease; } .woocommerce ul.products li.product:hover .button::after { transform: translateX(4px); } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover { background: none; color: var(--orange); filter: none; } /* ---- Toolbar: result count + ordering ---- */ .woocommerce .woocommerce-result-count { font-size: 14px; color: var(--placeholder); margin: 8px 0 20px; } .woocommerce .woocommerce-ordering { margin: 0 0 20px; } .woocommerce .woocommerce-ordering select, .woocommerce select.orderby { appearance: none; -webkit-appearance: none; border: 1.5px solid #e2e2e2; border-radius: 10px; padding: 10px 38px 10px 16px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--muted); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23606060' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; cursor: pointer; } .woocommerce .woocommerce-ordering select:focus { outline: none; border-color: var(--orange); } /* buttons */ .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce input.button, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce #respond input#submit.alt, .woocommerce .widget_price_filter .price_slider_amount .button { background: var(--orange); color: #fff; font-family: inherit; font-weight: 600; border-radius: 14px; padding: 12px 20px; font-size: 15px; } /* ---- Pagination (WooCommerce) ---- */ .woocommerce nav.woocommerce-pagination { margin: 52px 0 12px; text-align: center; } .woocommerce nav.woocommerce-pagination ul { border: none; display: inline-flex; gap: 8px; flex-wrap: wrap; margin: 0; } .woocommerce nav.woocommerce-pagination ul li { border: none; overflow: visible; float: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid #e8e4e0; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1; background: #fff; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--orange); border-color: var(--orange); color: #fff; } .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--orange); color: var(--orange); background: #fff; } /* single product */ .woocommerce div.product .product_title { font-size: 30px; font-weight: 700; color: var(--text); } /* gallery on a soft tile; multiply removes baked-in white photo backgrounds. The image is capped and centered so tall product photos (e.g. 757×2560 bottles) don't blow the gallery out to full page height. */ .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { background: #faf8f6; border: 1px solid #f1ede9; border-radius: 18px; padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 360px; } .woocommerce div.product div.images .woocommerce-product-gallery__image { width: auto !important; max-width: 100%; margin: 0 auto; } .woocommerce div.product div.images img { mix-blend-mode: multiply; width: auto !important; max-width: 100%; max-height: 520px; margin: 0 auto; display: block; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--orange); font-weight: 700; font-size: 26px; } .woocommerce .woocommerce-tabs ul.tabs li.active { border-bottom-color: #fff; } .woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--orange); } .woocommerce span.onsale { background: var(--orange); border-radius: 999px; min-height: auto; min-width: auto; padding: 6px 14px; line-height: 1; } /* Variation picker (e.g. bowl colour). Rows stack (label above options) like a modern shop. JS replaces the