/*
Theme Name: Dyvan
Theme URI: https://dyvanlizhkokrislostil.com.ua/
Author: Dyvan migration project
Description: Custom classic WordPress theme replicating the design of the former PrestaShop "cosmo" theme for dyvanlizhkokrislostil.com.ua (migration to WordPress + WooCommerce).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dyvan
WC requires at least: 8.0
WC tested up to: 11.2
*/

/* Visual styles are loaded via assets/css/global.css and friends, enqueued in functions.php.
   This file intentionally stays mostly empty except for a handful of WordPress/WooCommerce
   integration tweaks that have no equivalent in the original PrestaShop theme. */

.screen-reader-text {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
}

/* combined-live.css's .close-mobile-menu (X button in the mobile off-canvas
   menu) points its background-image at the live site's own domain — same
   pattern as the product-card cart icon (see the .ajax_add_to_cart_button
   rule further down): point it at our own local copy instead. */
.close-mobile-menu {
	background-image: url(assets/img/close-cross.png) !important;
}

/* #languages-block-top ul (language dropdown) is positioned `left:0` off
   its parent, which combined-live.css also floats hard right in the
   header — on desktop there's room for the 157px dropdown to extend past
   that, but on narrow mobile widths the parent itself sits near the right
   edge of the viewport, so `left:0` pushed the dropdown off-screen and
   caused page-wide horizontal scroll. Anchor it to the right edge instead
   below the tablet breakpoint, so it grows left into the viewport. */
@media (max-width: 767px) {
	#languages-block-top ul {
		left: auto;
		right: 0;
	}
}

/* Browser default focus ring (shows on every link/button click, not just
   keyboard nav) doesn't exist on the live site and reads as a stray black
   box here — suppressed for mouse/touch clicks specifically via
   :focus-visible (keyboard-tab navigation still gets an outline, so this
   doesn't remove focus indication for accessibility, only the click one). */
a:focus,
button:focus,
.btn:focus,
.button:focus,
input:focus {
	outline: none;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.button:focus-visible,
input:focus-visible {
	outline: 2px solid #2c3337;
	outline-offset: 2px;
}

/* combined-live.css's `#layer_cart .layer_cart_product h2{font:400 23px/29px
   "Dosis" Arial,Helvetica,sans-serif}` is missing the comma between "Dosis"
   and Arial — an invalid font-family list makes the whole `font` shorthand
   get rejected by the browser, so this heading ("Товар успішно додано до
   Вашого кошика") silently fell back to the browser default instead of
   Dosis, while the sibling `.layer_cart_cart h2` (comma present) didn't. */
#layer_cart .layer_cart_product h2 {
	font: 400 23px/29px "Dosis", Arial, Helvetica, sans-serif;
}

/* WooCommerce notices use PrestaShop-like alert classes for visual consistency */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	list-style: none;
	margin: 0 0 20px;
	padding: 10px 20px;
	border-radius: 3px;
	background: #f4f4f4;
	border: 1px solid #ddd;
	color: #555;
}
/* WooCommerce core (woocommerce.css) draws an icon via `::before`, absolutely
   positioned at `top:1em` using the "WooCommerce" icon font's own baseline —
   it never lines up with our smaller 10px-padding notice text (on Cart,
   Checkout, and My Account alike), sitting visibly off-centre whatever the
   left clearance. Simplest fix: drop the icon entirely rather than chase its
   vertical alignment. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}
.woocommerce-error { background:#fcf0f0; border-color:#e7c9c9; color:#b94a48; }
.woocommerce-message { background:#eef7ed; border-color:#cfe6cb; color:#3c763d; }

/* Basic alignment so WooCommerce's own markup on single product / cart / checkout
   inherits the site's typography and color palette without re-implementing PrestaShop markup. */
.woocommerce {
	font-family: Arial, Helvetica, sans-serif;
	color: #777;
}
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #2c3337;
}
.woocommerce a { color: #333; }
/* :not(#layer_cart *):not(.cart_navigation *) — several places (the "added
   to cart" popup, the cart page's "Оформити замовлення"/"Продовжити
   покупки" row) reuse PrestaShop's own `.button`-classed elements
   (.exclusive-medium, .button-medium, .button-exclusive) styled in full by
   combined-live.css; this generic override would otherwise clobber them
   (uppercase text, wrong colors/padding) the same way it did the card hover
   icon and the single-product add-to-cart button, both fixed earlier. */
.woocommerce .button:not(#layer_cart *):not(.cart_navigation *):not(.button-container *),
.woocommerce button.button:not(#layer_cart *):not(.cart_navigation *):not(.button-container *),
.woocommerce a.button:not(#layer_cart *):not(.cart_navigation *):not(.button-container *),
.woocommerce #respond input#submit,
.woocommerce input.button {
	background: #2c3337;
	color: #fff;
	border-radius: 0;
	border: none;
	padding: 10px 20px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.woocommerce .button:not(#layer_cart *):not(.cart_navigation *):not(.button-container *):hover,
.woocommerce button.button:not(#layer_cart *):not(.cart_navigation *):not(.button-container *):hover,
.woocommerce a.button:not(#layer_cart *):not(.cart_navigation *):not(.button-container *):hover,
.woocommerce input.button:hover {
	background: #e67e22;
	color: #fff;
}

/* WooCommerce's own "added" checkmark + inline "Переглянути кошик" link
   (added by WooCommerce core JS after a successful add-to-cart) are
   superseded by our #layer_cart popup below — hide them everywhere instead
   of showing both. */
.woocommerce a.added_to_cart.wc-forward {
	display: none !important;
}
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
	content: none !important;
}
/* The single product add-to-cart button reuses the live site's own
   `.exclusive` PrestaShop class/icon (see dyvan_single_add_to_cart() in
   inc/woocommerce.php) — combined-live.css swaps its icon to a checkmark
   once "added" (content:"\f00c"), which is the live site's own original
   behaviour, but duplicates the feedback our #layer_cart popup now gives —
   keep the plain cart icon ("\f07a") instead of swapping it. */
.box-info-product .exclusive.added:not(.disabled)::before,
#center_column.col-sm-9 .col-md-3 .box-info-product .exclusive.added:not(.disabled)::before {
	content: "\f07a" !important;
}
.woocommerce span.onsale {
	background: #e67e22;
}
.woocommerce ul.products li.product .price {
	color: #e67e22;
}

/* Language switcher: original theme CSS has "#languages-block-top ul{display:none}"
   with no rule to reveal it; JS toggles an "open" class instead of PrestaShop's
   original slideToggle(). The override needs to match the ID selector's
   specificity, a plain class rule loses to #languages-block-top ul. */
#languages-block-top ul.open {
	display: block;
}

/* -------------------------------------------------------------------------
 * Product card redesign (grid listings — category/shop).
 *
 * The captured live markup/CSS (combined-live.css, product_list.css)
 * positions `.right-block` (title/price/buttons) absolutely ON TOP of the
 * whole card (top:0, height:100%), i.e. the product name overlaps the photo
 * by design on the live site too — confirmed in earlier QA. On request,
 * this card is redone instead of matched 1:1: title above the image, all
 * images the same height (object-fit: contain, top-aligned, so photos with
 * different proportions don't get cropped or look inconsistent), and the
 * add-to-cart icon anchored to the image box only (not the whole card) so
 * revealing it on hover can never push the row below.
 *
 * product-card.php no longer wraps markup in .left-block/.right-block, so
 * none of the legacy absolute-overlay rules for those classes apply here —
 * these are fresh, self-contained rules under new class names
 * (.dyvan-card-title / .dyvan-card-price) to avoid any collision with the
 * legacy `.content_price` (hidden-until-hover price-on-photo overlay) and
 * `h5` (absolute, margin-top:35px) rules still used elsewhere.
 * ---------------------------------------------------------------------- */
.product_list.grid > li .product-container {
	display: flex;
	flex-direction: column;
	/* Legacy product_list.css sets `background:#eee` on this same selector
	   (with an extra `ul` ancestor, same specificity) for the old overlay
	   card design — with title/price now in normal flow instead of an
	   absolutely-positioned overlay, that background painted two visible
	   gray panels (behind the title, behind the price) with the white
	   image box sandwiched between. The live site itself has no card
	   background at all here, just a thin rule under each product. */
	background: transparent !important;
	border-bottom: 3px solid #d6d4d4;
}
.product_list.grid > li .product-container .dyvan-card-title {
	/* Fixed height (room for exactly 2 lines) instead of auto — titles vary
	   from 1 to 2 lines, and with auto height the image below started at a
	   different y per card, visibly misaligning every row. box-sizing:border-box
	   so padding doesn't add on top of the 70px. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	height: 70px;
	min-height: 0;
	padding: 6px 15px;
	overflow: hidden;
	text-align: center;
	font-family: "Dosis", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
}
.product_list.grid > li .product-container .dyvan-card-title a.product-name {
	display: block;
	width: auto;
	color: #2c3337;
	text-decoration: none !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
.product_list.grid > li .product-container .dyvan-card-title a.product-name:hover {
	color: #e67e22;
}

.product_list.grid > li .product-container .product-image-container {
	position: relative;
	aspect-ratio: 550 / 700;
	overflow: hidden;
	background: #fff;
	margin-bottom: 13px;
}
.product_list.grid > li .product-container .product-image-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
	margin: 0;
}

.product_list.grid > li .product-container .dyvan-card-price {
	text-align: center;
	padding: 0 15px 14px;
	font-family: "Dosis", sans-serif;
}
.product_list.grid > li .product-container .dyvan-card-price .price {
	display: inline-block;
	font-size: 19px;
	font-weight: 600;
	color: #2c3337;
}

/* Hover add-to-cart icon: anchored to the image box (position:relative
   above), pure CSS opacity toggle — never affects document flow, so it
   cannot push the cards in the row below regardless of hover state. */
.product_list.grid > li .product-container .product-image-container .button-container {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	opacity: 0;
	transition: opacity .2s ease-out, transform .2s ease-out;
}
.product_list.grid > li .product-container .product-image-container:hover .button-container {
	opacity: 1;
}
.product_list.grid > li .product-container .product-image-container .button-container .ajax_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	background-image: url(assets/img/supermarket72.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	font-size: 0;
	text-transform: none;
	letter-spacing: normal;
}
.product_list.grid > li .product-container .product-image-container .button-container .ajax_add_to_cart_button span {
	display: none;
}
.product_list.grid > li .product-container .product-image-container .button-container .ajax_add_to_cart_button:hover {
	background-color: #fff;
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.product_list.grid > li .product-container .lnk_view {
	display: none;
}
/* The cart-icon button above only reveals itself on :hover — touch devices
   (phones/tablets) have no hover state, so without this the button was
   permanently invisible and untappable on mobile; nothing else used the
   product card at all to add to cart there. Keep it always visible below
   the tablet breakpoint instead of relying on hover. */
@media (max-width: 767px) {
	.product_list.grid > li .product-container .product-image-container .button-container {
		opacity: 1;
	}
}

/* Sort / per-page toolbar above product listings (own markup, see
   dyvan_product_toolbar() in functions.php). */
.dyvan-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 15px;
}
.dyvan-toolbar-left,
.dyvan-toolbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.dyvan-toolbar-right {
	margin-left: auto;
}
.dyvan-toolbar-field {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Dosis", sans-serif;
	font-size: 13px;
}
.dyvan-toolbar-field select {
	padding: 4px 8px;
	border: 1px solid #ccc;
	font-family: "Dosis", sans-serif;
	font-size: 13px;
}
.product-count {
	font-family: "Dosis", sans-serif;
	font-size: 13px;
	color: #777;
}

/* -------------------------------------------------------------------------
 * Pagination row (count + page numbers + "Показати всі"), rendered via
 * dyvan_pagination_row() both above the grid (right after the filters) and
 * below it — see functions.php for why (matches the live site's own
 * top/bottom pagination duplication, confirmed by direct comparison).
 * ---------------------------------------------------------------------- */
.top-pagination-content,
.bottom-pagination-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 0;
}
.top-pagination-content {
	margin-bottom: 15px;
	border-top: 1px solid #d6d4d4;
	border-bottom: 1px solid #d6d4d4;
}
.bottom-pagination-content {
	margin-top: 10px;
}
.top-pagination-content .product-count,
.bottom-pagination-content .product-count {
	margin: 0;
}
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	/* combined-live.css sets `.top-pagination-content div.pagination,
	   .bottom-pagination-content div.pagination{width:530px}` — a fixed box
	   meant for the original float-based layout (ul.pagination centered
	   inside it, .showall floated right within the same box). We use flexbox
	   instead, so that fixed width just left a wide empty gap between the
	   numbers and the row's right edge instead of hugging it. */
	width: auto !important;
}
ul.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.pagination li {
	display: block;
}
ul.pagination li a,
ul.pagination li > span {
	display: block;
	min-width: 30px;
	padding: 5px 8px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	text-align: center;
	font-family: "Dosis", sans-serif;
	font-size: 13px;
	text-decoration: none !important;
}
ul.pagination li a:hover {
	background: #f6f6f6;
}
ul.pagination li.active > span {
	border-color: #2c3337;
	font-weight: 600;
	background: #f6f6f6;
}
ul.pagination li.pagination_previous,
ul.pagination li.pagination_next {
	min-width: 0;
}
ul.pagination li.pagination_previous > span,
ul.pagination li.pagination_next > span,
ul.pagination li.pagination_previous > a span,
ul.pagination li.pagination_next > a span {
	border: 0;
	background: none;
	padding: 5px 2px;
	white-space: nowrap;
}
ul.pagination li.pagination_previous.disabled > span,
ul.pagination li.pagination_next.disabled > span {
	color: #bbb;
}
ul.pagination li.spacer {
	padding: 5px 4px;
	color: #999;
}
.showall {
	/* combined-live.css's `.showall{float:right;margin:8px 53px 8px 14px}`
	   is inert for float (we're in a flex row) but its 53px right margin —
	   spacing meant to clear other floated elements in the original layout —
	   still applied, leaving a gap before the row's actual right edge. */
	margin: 0 !important;
}
.showall .btn {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	font-family: "Dosis", sans-serif;
	font-size: 13px;
	text-decoration: none !important;
}
.showall .btn:hover {
	background: #f6f6f6;
}

/* -------------------------------------------------------------------------
 * Single product page (see dyvan_single_add_to_cart() /
 * dyvan_single_product_extras() in inc/woocommerce.php). Most of the visual
 * styling (price color, quantity input, the red add-to-cart button incl. its
 * cart icon, social icons, payment box) already comes from combined-live.css
 * because the markup there intentionally reuses the live site's own class
 * names (.our_price_display, #quantity_wanted_p, .box-info-product
 * .exclusive, .socialsharing_product, #usefull_link_block…). Only the handful
 * of gaps below need covering ourselves.
 * ---------------------------------------------------------------------- */
/* `.exclusive` is NOT full-width on the live site either (confirmed: its
   add-to-cart button measures ~228px, natural content width) — no override
   needed here, combined-live.css's own `.box-info-product .exclusive{
   display:block;...}` already gives it the right look without stretching. */

/* WooCommerce core CSS (woocommerce.css) sets `div.product span.price`
   color via a `:where()`-wrapped selector that still out-specifies
   `.our_price_display .price` from combined-live.css (extra `div.product`
   element+class beats it) — overrides it back to the live site's red. */
/* Specs table (short description — on the live site this is literally an
   HTML <table> hand-authored in the PrestaShop admin, migrated as-is into
   post_excerpt). combined-live.css only borders/pads its table cells under
   the PrestaShop-specific ancestor chain
   `.pb-center-column #short_description_block #short_description_content`,
   which doesn't exist in our markup (WooCommerce wraps it in
   `.woocommerce-product-details__short-description` instead) — so the
   table rendered with no visible grid at all. Same border/padding values,
   our actual wrapper class. */
.woocommerce-product-details__short-description table td,
.woocommerce-product-details__short-description table th {
	padding: 8px 10px;
	border: 1px solid #999;
}
.woocommerce-product-details__short-description table {
	width: 100%;
}
/* The "Приклади текстилю можна знайти тут" button sits directly after the
   table in the migrated short-description HTML with no spacing at all. */
.woocommerce-product-details__short-description table + p {
	margin-top: 15px;
}
/* Characteristics migrated from the short-description table into real
   WooCommerce product attributes (2026-11-10) — rendered by
   dyvan_single_product_attributes_table() as its own
   .woocommerce-product-details__short-description wrapper, immediately
   followed by the (now much shorter) real short-description wrapper that
   only holds the leftover "textile button" paragraph, if any. Same 15px
   gap as the rule above, just between the two sibling wrappers instead of
   within one. */
.woocommerce-product-details__short-description + .woocommerce-product-details__short-description {
	margin-top: 15px;
}

.our_price_display .price {
	color: #ff4f40 !important;
	/* WooCommerce core also sets `font-size:1.25em` on this same element via
	   the same higher-specificity :where() selector — 1.25em compounds on
	   top of the 29px already inherited from the .our_price_display
	   wrapper (29 * 1.25 = 36.25px), so the price rendered noticeably
	   larger than the live site's actual 29px. */
	font-size: 29px !important;
	font-weight: 600 !important;
}
.summary #quantity_wanted_p input.qty {
	-moz-appearance: textfield;
}
.summary #product_payment_logos .box-security a {
	display: flex;
	align-items: center;
	gap: 10px;
}
.summary #product_payment_logos img {
	display: inline-block;
	width: auto;
	height: 30px;
}
.summary .socialsharing_product {
	list-style: none;
	padding: 0;
}
/* combined-live.css's `.socialsharing_product .btn-default{width:40px;
   height:40px;border-radius:100%;...}` only sizes/shapes the circle — the
   live markup uses <button> elements, whose UA default rendering centers
   inline content; ours are <a> tags (see dyvan_single_product_extras() in
   inc/woocommerce.php), which don't get that for free, so the icon glyph
   sat off-center (top-left) instead of centered in the circle. */
.summary .socialsharing_product .btn-default {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Compact gallery (user's call: keep WooCommerce's native gallery/lightbox
   rather than rebuilding PrestaShop's fancybox filmstrip) — turned into a
   single-row horizontally scrolling carousel (like the live site's
   arrow-scrolled filmstrip) instead of a tall wrapping grid, via
   dyvanInitGalleryCarousel() in main.js. Clicking a thumbnail still updates
   the main image/lightbox exactly as before — this only changes how the
   thumbnail strip itself is laid out and scrolled, not WooCommerce's own
   gallery wiring. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	max-height: none;
	scroll-behavior: smooth;
	gap: 8px;
	padding: 2px 0 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 80px !important;
	flex: 0 0 auto;
}
.dyvan-gallery-thumbs-wrap {
	position: relative;
	padding: 0 24px;
}
.dyvan-gallery-arrow {
	position: absolute;
	top: 0;
	bottom: 8px;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: #777;
	cursor: pointer;
	z-index: 5;
}
.dyvan-gallery-arrow:hover {
	color: #333;
}
.dyvan-gallery-arrow.dyvan-gallery-prev {
	left: 0;
}
.dyvan-gallery-arrow.dyvan-gallery-next {
	right: 0;
}

/* -------------------------------------------------------------------------
 * "Added to cart" popup (#layer_cart, see dyvan_add_to_cart_popup_markup()
 * in inc/woocommerce.php + the submit handler in main.js). combined-live.css
 * already styles everything inside it in full (panel layout, rounded
 * corners, green heading, button row) — it only ever defines
 * `position:absolute` with no top/left, relying on the live site's own JS
 * to position it inline on open; we center it as a fixed modal instead,
 * which is simpler and doesn't depend on scroll position.
 * ---------------------------------------------------------------------- */
#layer_cart {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	margin: 0;
	transform: translate(-50%, -50%);
	width: 84%;
	max-width: 960px;
	max-height: 85vh;
	overflow-y: auto;
}
body.dyvan-layer-cart-open {
	overflow: hidden;
}
.layer_cart_img img {
	max-width: 100%;
	height: auto;
}
/* WooCommerce 11's own core woocommerce.css (not our earlier override —
   that one is already scoped away from #layer_cart) also styles any
   `.button`-classed <a>/<span> via its new CSS-variable button theme
   (--wc-secondary etc.) through a long `:where()`-wrapped selector that
   still out-specifies combined-live.css's `.button.exclusive-medium` /
   `.button.button-medium` (lavender/olive instead of the intended
   white-outline / solid red) — same recurring pattern as the single-product
   price and add-to-cart button fixed earlier, just a different WC rule. */
#layer_cart .continue,
.cart_navigation .button-exclusive {
	background: #fff !important;
	color: #333 !important;
	border-color: #cacaca !important;
}
#layer_cart .button-medium,
.cart_navigation .button-medium {
	background: #f9544c !important;
	color: #fff !important;
	border-color: #f9544c !important;
}
#layer_cart .button-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#layer_cart .button-container .btn {
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * "Контакти" page (see scripts/update-contact-page.php) — on the live site
 * this is PrestaShop's own Stores controller output (confirmed:
 * page_name=stores in the page's own JS config), not a plain CMS page, so
 * the migrated version only had a bare address/phone/email paragraph. The
 * markup now reuses the live site's own classes (.page-contact-section,
 * .page-contact-block, .contact-info-i.*-ico-sg, .page-contact-store), so
 * layout/spacing comes from combined-live.css already — only the
 * background-image URLs need overriding: combined-live.css points them at
 * the live site's own absolute URLs, which we already have local copies of
 * (assets/img/*-ico-sg.png, IMG_store.jpg, store-if.jpg).
 * ---------------------------------------------------------------------- */
.contact-info-i.phone-ico-sg::before { background-image: url(assets/img/phone-ico-sg.png) !important; }
.contact-info-i.adress-ico-sg::before { background-image: url(assets/img/address-ico-sg.png) !important; }
.contact-info-i.email-ico-sg::before { background-image: url(assets/img/email-ico-sg.png) !important; }
.contact-info-i.instagram-ico-sg::before { background-image: url(assets/img/instagram-ico-sg.png) !important; }
.contact-info-i.facebook-ico-sg::before { background-image: url(assets/img/facebook-ico-sg.png) !important; }
.page-contact-store { background-image: url(assets/img/IMG_store.jpg) !important; }
.page-contact-section-second .page-contact-store { background-image: url(assets/img/store-if.jpg) !important; }

/* combined-live.css toggles two duplicate hours blocks (.work-schedule-2-sg
   / -4-sg) via media queries, each display:none by default — a responsive
   swap trick for identical content. We render the hours once under our own
   class instead of duplicating markup, and just force it always visible. */
.dyvan-work-schedule {
	display: block !important;
	height: auto !important;
	margin-bottom: 30px;
}

/* -------------------------------------------------------------------------
 * Checkout (woocommerce/checkout/form-checkout.php) — two-column layout for
 * the contact/address fields, per request. Each `.form-row` is a grid item;
 * `.form-row-wide`/`.notes` (the message textarea) span both columns.
 * ---------------------------------------------------------------------- */
.dyvan-checkout-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
}
.dyvan-checkout-fields-grid .form-row-wide,
.dyvan-checkout-fields-grid .notes {
	grid-column: 1 / -1;
}
@media (max-width: 767px) {
	.dyvan-checkout-fields-grid {
		grid-template-columns: 1fr;
	}
}
.woocommerce-checkout #order_review .shop_table {
	margin-bottom: 20px;
}

/* Boxed sections (contact form / delivery+payment / coupon+login) — grey
   background + border, matching the live site's step boxes (not captured in
   combined-live.css: checkout isn't one of the 5 page types whose CCC cache
   was collected, see claude.md Phase 0/2). */
.dyvan-checkout-box {
	background: #f9f9f9;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	padding: 25px 30px;
	margin-bottom: 30px;
}
.dyvan-checkout-box:empty {
	display: none;
}

/* Coupon + "Returning customer?" login notices, in the site's own notice
   style instead of WooCommerce's default blue-icon `.woocommerce-info` box. */
.dyvan-checkout-notices .woocommerce-info,
.dyvan-checkout-notices .woocommerce-form-login-toggle {
	background: none;
	border: none;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #333;
}
.dyvan-checkout-notices .woocommerce-info::before {
	display: none;
}
.dyvan-checkout-notices a.showcoupon,
.dyvan-checkout-notices a.showlogin {
	color: #f9544c;
	text-decoration: underline;
}
.dyvan-checkout-notices .checkout_coupon,
.dyvan-checkout-notices .woocommerce-form-login {
	background: #fff;
	border: 1px solid #e1e1e1;
	padding: 20px;
	margin-top: 15px;
}

/* Legacy PrestaShop rule `#password{border:none}` (global.css, meant for a
   password-reset page container) collides with WooCommerce's login field,
   which also uses id="password" — stripped its border/background, making
   the input invisible. Restore it, scoped to the checkout login form. */
.dyvan-checkout-notices .woocommerce-form-login input#password {
	border: 1px solid #d6d4d4;
	padding: 6px 12px;
	background: #fff;
}

/* -------------------------------------------------------------------------
 * #cart_summary (dyvan_cart_items_table()) tweaks for its use on Checkout —
 * also applies to the Cart page since the table markup is shared:
 * - "Усього"/"Всього товарів"/"Загальна доставка" labels and column
 *   headers were full font-weight:700 (via combined-live.css's generic
 *   `table th{font-weight:bold}`), making every row look equally heavy —
 *   now only the grand total stands out.
 * - Narrower price column, wider quantity column.
 * - Quantity stepper rebuilt as a single flex row (was: input on its own
 *   row with tiny +/- squares stacked underneath) — minus on the left,
 *   plus on the right of the number field.
 * ---------------------------------------------------------------------- */
#cart_summary thead th {
	font-weight: 600;
}
#cart_summary tfoot td.text-right {
	font-weight: 400;
}
#cart_summary tfoot td.total_price_container {
	font-weight: 700;
}
#cart_summary .cart_unit {
	width: 100px;
}
#cart_summary .cart_quantity {
	width: 170px;
	padding: 10px 14px !important;
}
.dyvan-qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #d6d4d4;
	border-radius: 2px;
	overflow: hidden;
	background: #fff;
}
.dyvan-qty-stepper .dyvan-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	color: #333;
	text-decoration: none;
	background: #f6f6f6;
}
.dyvan-qty-stepper .dyvan-qty-btn:hover {
	background: #ececec;
}
.dyvan-qty-stepper .cart_quantity_input {
	width: 48px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: none;
	border-left: 1px solid #d6d4d4;
	border-right: 1px solid #d6d4d4;
	text-align: center;
	-moz-appearance: textfield;
}
.dyvan-qty-stepper .cart_quantity_input::-webkit-outer-spin-button,
.dyvan-qty-stepper .cart_quantity_input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * My Account — design-system consistency pass. Previously plain default
 * WooCommerce markup (no theme CSS at all targeted `.woocommerce-account`
 * before this). Scoped to `body.woocommerce-account` only — Cart/Checkout
 * already shipped and verified separately (Phase 19-21), not touched here.
 * ---------------------------------------------------------------------- */

/* Inputs/selects — reproduce the site's `.form-control` look (global.css)
   instead of WooCommerce's own default (rounded, different border color). */
.woocommerce-account .input-text,
.woocommerce-account select,
.woocommerce-account textarea {
	display: block;
	width: 100%;
	height: 32px;
	padding: 6px 12px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.42857;
	color: #777;
	background-color: #fff;
	border: 1px solid #d6d4d4;
	border-radius: 0;
	box-shadow: none;
}
.woocommerce-account textarea.input-text {
	height: auto;
}
.woocommerce-account .input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: 0 0 8px rgba(102, 175, 233, .6);
}
.woocommerce-account .form-row label,
.woocommerce-account fieldset legend {
	font-weight: 600;
	color: #555454;
}
.woocommerce-account fieldset {
	border: none;
	padding: 0;
	margin: 20px 0 0;
}
.woocommerce-account fieldset legend {
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	padding: 0 0 15px;
	margin-bottom: 12px;
	border-bottom: 1px solid #d6d4d4;
	width: 100%;
}

/* Login/Register boxes — reuse the site's `.box`/`.page-subheading` look
   (combined-live.css) applied directly to WooCommerce's own selectors
   instead of changing the template markup. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: #fbfbfb;
	border: 1px solid #d6d4d4;
	padding: 14px 18px 13px;
}
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	color: #555454;
	font-size: 18px;
	padding: 0 0 15px;
	line-height: normal;
	margin: 0 0 12px;
	border-bottom: 1px solid #d6d4d4;
}

/* Account action tiles (navigation.php override) — reproduces the live
   site's icon-tile list (`my-account.tpl`/`my-account.css`): icon square on
   the left, label on the right, light hover state. */
.dyvan-account-nav .myaccount-link-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0 0 25px;
	padding: 0;
}
.dyvan-account-nav .myaccount-link-list li {
	flex: 1 1 220px;
}
.dyvan-account-nav .myaccount-link-list a {
	display: flex;
	align-items: center;
	height: 52px;
	border: 1px solid #d6d4d4;
	background: #fbfbfb;
	text-decoration: none;
	color: #555454;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .03em;
}
.dyvan-account-nav .myaccount-link-list a i {
	flex: 0 0 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #e67e22;
	border-right: 1px solid #d6d4d4;
}
.dyvan-account-nav .myaccount-link-list a span {
	padding: 0 15px;
}
.dyvan-account-nav .myaccount-link-list a:hover,
.dyvan-account-nav .myaccount-link-list li.is-active a {
	background: #efefef;
}

/* Orders table / order details — give the default `shop_table` the same
   bordered look as the rest of the site's tables (#cart_summary, category
   sidebar) instead of WooCommerce's borderless default. */
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #d6d4d4;
	margin-bottom: 20px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	border: 1px solid #d6d4d4;
	padding: 10px 12px;
	text-align: left;
}
.woocommerce-account table.shop_table thead th {
	background: #f7f7f7;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	color: #555454;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
	margin: 2px 4px 2px 0;
}

/* Addresses page / order view customer details — section titles to match
   the rest of the site's `.page-subheading`, address block spacing. */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-order-details__title {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	color: #555454;
	font-size: 16px;
	margin: 0 0 10px;
}
.woocommerce-account .woocommerce-Address {
	border: 1px solid #d6d4d4;
	background: #fbfbfb;
	padding: 14px 18px 13px;
	margin-bottom: 20px;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: none;
}
.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0;
}