/*
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;
}

/* 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;
}

/* 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-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;
}

/* 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;
}

.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;
}

/* -------------------------------------------------------------------------
 * #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;
}