/*
Theme Name: Danuko Redesign
Template: miniture
Author: Danuko krautuvÄ—lÄ—
Description: Playful, modern visual redesign for Danuko krautuvÄ—lÄ—, built as a child theme of Miniture. Restyles the storefront via CSS custom properties; does not alter WooCommerce, Paysera, cart, or checkout functionality.
Version: 0.1.0
Text Domain: danuko-redesign
*/

/* ==========================================================================
   0. Self-hosted webfonts (Shantell Sans display / Karla body), split into
      latin + latin-ext (Lithuanian diacritics) subsets like Google Fonts
      itself serves them. Variable fonts: one file covers the 300-800 range.
   ========================================================================== */
@font-face {
	font-family: 'Shantell Sans';
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	src: url('fonts/shantell-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'Shantell Sans';
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	src: url('fonts/shantell-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
	font-family: 'Karla';
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	src: url('fonts/karla-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'Karla';
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	src: url('fonts/karla-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF;
}

/* ==========================================================================
   1. Design tokens — overrides the parent theme's existing CSS variables
      (confirmed present in the live site's :root) plus new tokens for
      colours/spacing/shadows the parent theme does not define.
   ========================================================================== */
:root {
	/* Palette, derived from the Danuko logo (coral wordmark, teal script, violet kite accent) */
	--danuko-coral: #E85A34;
	--danuko-coral-dark: #C8451F;
	--danuko-teal: #2F93A6;
	--danuko-teal-dark: #21707F;
	--danuko-teal-mid: #2E8577;
	--danuko-marigold: #EFA13C;
	--danuko-violet: #8B6FB3;
	--danuko-ink-teal: #1E4A50;
	--danuko-ink-teal-deep: #163A3F;
	--danuko-bg: #FFFBF4;
	--danuko-surface: #FFFFFF;
	--danuko-text: #2B2620;
	--danuko-text-muted: #6B6459;
	--danuko-border: #EAE2D6;

	/* Category accents */
	--danuko-cat-boardgames: var(--danuko-marigold);
	--danuko-cat-puzzles: var(--danuko-teal-mid);
	--danuko-cat-creative: var(--danuko-violet);

	/* Spacing scale */
	--danuko-space-1: 4px;
	--danuko-space-2: 8px;
	--danuko-space-3: 16px;
	--danuko-space-4: 24px;
	--danuko-space-5: 40px;
	--danuko-space-6: 64px;

	/* Shape + elevation */
	--danuko-radius-sm: 10px;
	--danuko-radius-md: 16px;
	--danuko-radius-lg: 28px;
	--danuko-shadow-sm: 0 2px 8px rgba(43, 38, 32, 0.07);
	--danuko-shadow-md: 0 10px 28px rgba(43, 38, 32, 0.10);

	/* --- Overrides of the parent (Miniture/Kitify) theme's own variables --- */
	--site-bg-color: var(--danuko-bg);
	--site-text-color: var(--danuko-text-muted);
	--site-heading-color: var(--danuko-text);
	--site-accent-color: var(--danuko-coral);
	--site-border-color: var(--danuko-border);
	--site-link-color: var(--danuko-teal-dark);
	--site-link-hover-color: var(--danuko-coral);

	--site-main-font: 'Shantell Sans', system-ui, sans-serif;
	--site-secondary-font: 'Karla', system-ui, sans-serif;

	--site-wc-price: var(--danuko-coral-dark);
	--site-wc-price-old: rgba(43, 38, 32, 0.45);

	--site-primary-button-color: #FFFFFF;
	--site-primary-button-bg: var(--danuko-coral);
	--site-secondary-button-color: #FFFFFF;
	--site-secondary-button-bg: var(--danuko-teal-dark);

	--site-header-bg-color: var(--danuko-surface);
	--site-header-text-color: var(--danuko-text-muted);
	--site-header-accent-color: var(--danuko-coral);
	--site-header-border-color: var(--danuko-border);

	--site-main-menu-bg-color: var(--danuko-surface);
	--site-main-menu-text-color: var(--danuko-text);
	--site-main-menu-accent-color: var(--danuko-coral);
	--site-main-menu-border-color: var(--danuko-border);

	--dropdown-bg-color: var(--danuko-surface);
	--dropdown-text-color: var(--danuko-text-muted);
	--dropdown-accent-color: var(--danuko-coral);
	--dropdown-border-color: var(--danuko-border);

	--site-button-radius: var(--danuko-radius-sm);
	--site-field-radius: var(--danuko-radius-sm);

	--kitify-primary-color: var(--danuko-coral);
	--kitify-pagination-link-hover-bg-color: var(--danuko-coral);
	--kitify-secondary-color: var(--danuko-text);
	--kitify-body-color: var(--danuko-text-muted);
	--kitify-border-color: var(--danuko-border);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
	background-color: var(--danuko-bg);
	font-family: var(--site-secondary-font);
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.woocommerce-loop-category__title {
	font-family: var(--site-main-font);
	font-weight: 600;
}

/* ==========================================================================
   3. Buttons — every WooCommerce/theme button already reads the
      --site-*-button-* variables above; this section only adds shape/motion.
   ========================================================================== */
.button,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button,
.add_to_cart_button,
.checkout-button {
	border-radius: var(--danuko-radius-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: var(--danuko-shadow-sm);
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: var(--danuko-shadow-md);
	opacity: 0.95;
}

/* ==========================================================================
   4. Product cards (shop / category loops)
      Confirmed structure: li.product.kitify-product.product_item
        > .product-item__thumbnail
        > .info-right > a.title > h3.woocommerce-loop-product__title
        > span.price / span.onsale / a.add_to_cart_button
   ========================================================================== */
.kitify-products__list.products li.product {
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kitify-products__list.products li.product:hover {
	box-shadow: var(--danuko-shadow-md);
	transform: translateY(-2px);
}

.kitify-products__list.products li.product .product-item__thumbnail {
	border-radius: var(--danuko-radius-md) var(--danuko-radius-md) 0 0;
	overflow: hidden;
}

.kitify-products__list.products li.product .info-right {
	padding: var(--danuko-space-3);
}

.kitify-products__list.products .woocommerce-loop-product__title {
	font-size: 16px;
	line-height: 1.3;
	color: var(--danuko-text);
}

.kitify-products__list.products .onsale {
	background: var(--danuko-coral);
	color: #FFFFFF;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 12px;
	padding: 4px 10px;
	top: var(--danuko-space-2);
	left: var(--danuko-space-2);
}

/* Age badge — added via the woocommerce_after_shop_loop_item_title hook in functions.php */
.danuko-age-badge {
	display: inline-block;
	margin: var(--danuko-space-2) 0 0;
	padding: 2px 10px;
	border-radius: var(--danuko-radius-sm);
	background: rgba(47, 147, 166, 0.12);
	color: var(--danuko-teal-dark);
	font-family: var(--site-secondary-font);
	font-size: 12px;
	font-weight: 600;
}

/* Category banner tiles shown at the top of the shop grid (Nova Ajax Product Filters) */
.nova-banner-box {
	border-radius: var(--danuko-radius-md);
	overflow: hidden;
	box-shadow: var(--danuko-shadow-sm);
}

.nova-banner-box .woocommerce-loop-category__title {
	color: #FFFFFF;
}

/* ==========================================================================
   5. Header & navigation
      Confirmed structure: .kitify-nav__item > a.menu-item-link
      Category dropdown children: .kitify-nav-item-sub
   ========================================================================== */
.kitify-nav__item > .menu-item-link {
	border-radius: var(--danuko-radius-sm);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kitify-nav__item > .menu-item-link:hover,
.kitify-nav__item.current-menu-item > .menu-item-link {
	background-color: rgba(232, 90, 52, 0.08);
	color: var(--danuko-coral);
}

/* Bug fix, re-fixed 2026-07-26: "ParduotuvÄ—" and the "Kategorijos" dropdown
   both link to the same shop URL (existing menu setup), so on the plain shop
   page both get marked current at once — two nav items highlighted together
   (user-reported, with screenshot). An earlier fix attempt here targeted
   .kitify-nav__item / .menu-item-link, which don't exist anywhere in the
   real menu markup (confirmed by inspecting the live page source: it's
   plain WordPress menu-item/current-menu-item classes under
   .danuko-nav__list, styled above at line ~1324) — so it silently never
   matched anything. WooCommerce's own body class distinguishes the plain
   shop archive (woocommerce-shop) from category archives, so this
   un-highlights only the has-children (Kategorijos) item, only on that
   specific page. */
body.woocommerce-shop .danuko-nav__list > li.menu-item-has-children.current-menu-item > a {
	background: transparent;
	color: var(--danuko-text);
}

/* ==========================================================================
   6. Form fields — visual only, does not alter field type/validation/required
      behaviour set by existing Code Snippets (postal code, optional fields, etc.)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
	border-radius: var(--danuko-radius-sm) !important;
	border-color: var(--danuko-border) !important;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--danuko-coral) !important;
	box-shadow: 0 0 0 3px rgba(232, 90, 52, 0.15) !important;
	outline: none;
}

/* ==========================================================================
   7. Homepage (front-page.php) — new custom-coded sections.
      Everything below is scoped to .danuko-home so it cannot leak into
      shop/category/product/cart/checkout markup handled elsewhere.
   ========================================================================== */
.danuko-home h1,
.danuko-home h2,
.danuko-home h3 {
	text-wrap: balance;
}

.danuko-home a:focus-visible,
.danuko-home button:focus-visible {
	outline: 3px solid var(--danuko-coral);
	outline-offset: 2px;
}

.danuko-section {
	padding: 72px 0;
}

.danuko-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.danuko-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.danuko-section__head h2 {
	font-size: clamp(24px, 3vw, 32px);
	font-family: var(--site-main-font);
}

.danuko-section__head p {
	margin: 8px 0 0;
	color: var(--danuko-text-muted);
	max-width: 50ch;
}

.danuko-section__link {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--danuko-teal-mid);
	white-space: nowrap;
}

/* --- Hero --- */
/* Switched from a dark teal gradient to the site's own light background
   (2026-07-24, "more playful, lighter in colors") — was the one dark
   section on an otherwise light/cream site. The wave divider that used
   to transition cream-over-dark is gone (removed from front-page.php)
   since hero and the section below it now share the same background. */
.danuko-hero {
	background: var(--danuko-bg);
	position: relative;
	overflow: hidden;
}

.danuko-hero__wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 24px;
	display: grid;
	grid-template-columns: 1.05fr 0.85fr;
	gap: 40px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.danuko-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--danuko-coral-dark);
	margin-bottom: 18px;
	font-family: var(--site-secondary-font);
}

.danuko-hero__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--danuko-marigold);
	display: inline-block;
}

.danuko-hero h1 {
	font-size: clamp(32px, 4.4vw, 50px);
	line-height: 1.1;
	color: var(--danuko-ink-teal);
	margin: 0;
}

.danuko-hero h1 em {
	font-style: normal;
	color: var(--danuko-coral);
}

.danuko-hero p {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 17px;
	color: var(--danuko-text-muted);
	font-family: var(--site-secondary-font);
}

.danuko-hero__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.danuko-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.danuko-btn:hover { transform: translateY(-2px); }

.danuko-btn--coral { background: var(--danuko-coral); color: #fff; box-shadow: 0 10px 24px rgba(232, 85, 46, 0.35); }
.danuko-btn--ghost-dark { background: transparent; color: var(--danuko-ink-teal); border: 1.5px solid rgba(30, 74, 80, 0.25); }
.danuko-btn--ghost-dark:hover { background: rgba(30, 74, 80, 0.06); }

.danuko-hero__trust {
	display: flex;
	gap: 22px;
	margin-top: 32px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--danuko-text-muted);
	font-family: var(--site-secondary-font);
}

.danuko-hero__trust span { display: flex; align-items: center; gap: 7px; }

.danuko-hero__art { position: relative; height: 320px; }

/* Hero illustration, replaced 2026-07-25: the previous kite+circles scene
   never quite landed (raised "why are these circles here" — fair, since
   they'd been flattened from a soft dark-background glow effect to solid
   shapes with no remaining reason to exist) and a sparkle-accent patch on
   top of it wasn't liked either. Replaced with what the store actually
   sells — a scattered die, puzzle piece, pawn, and a small kite matching
   the real logo's 4-color diamond — all fully static, no animation. */

/* --- Category shelf --- */
.danuko-shelf {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.danuko-cat-card {
	background: var(--danuko-surface);
	border-radius: var(--danuko-radius-lg);
	padding: 32px 26px;
	box-shadow: var(--danuko-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid var(--danuko-border);
	display: block;
}

.danuko-cat-card:hover { box-shadow: var(--danuko-shadow-md); }

.danuko-cat-card:nth-child(1) { transform: rotate(-1.1deg); }
.danuko-cat-card:nth-child(2) { transform: rotate(0.6deg) translateY(-14px); }
.danuko-cat-card:nth-child(3) { transform: rotate(-0.4deg); }
.danuko-cat-card:nth-child(1):hover { transform: rotate(-1.1deg) translateY(-4px); }
.danuko-cat-card:nth-child(2):hover { transform: rotate(0.6deg) translateY(-18px); }
.danuko-cat-card:nth-child(3):hover { transform: rotate(-0.4deg) translateY(-4px); }

.danuko-cat-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.danuko-cat-card__icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.7; }

.danuko-cat-card--boardgames .danuko-cat-card__icon { background: var(--danuko-cat-boardgames); }
.danuko-cat-card--puzzles .danuko-cat-card__icon { background: var(--danuko-cat-puzzles); }
.danuko-cat-card--creative .danuko-cat-card__icon { background: var(--danuko-cat-creative); }

.danuko-cat-card h3 { font-size: 20px; margin-bottom: 8px; font-family: var(--site-main-font); }
.danuko-cat-card p { margin: 0 0 16px; color: var(--danuko-text-muted); font-size: 14.5px; font-family: var(--site-secondary-font); }

.danuko-cat-card__count {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--danuko-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: var(--site-secondary-font);
}

/* --- Homepage product grid --- */
.danuko-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.danuko-product-card {
	background: var(--danuko-surface);
	border-radius: var(--danuko-radius-md);
	overflow: hidden;
	border: 1px solid var(--danuko-border);
	box-shadow: var(--danuko-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.danuko-product-card:hover { transform: translateY(-5px); box-shadow: var(--danuko-shadow-md); }

.danuko-product-card__cap { height: 6px; background: var(--danuko-cat-boardgames); }

.danuko-product-card__media {
	aspect-ratio: 1 / 0.82;
	position: relative;
	overflow: hidden;
	background: #FCEFDA;
}

.danuko-product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.danuko-badge-sale {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--danuko-coral);
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--site-secondary-font);
}

/* Wishlist heart button — restyles YITH WooCommerce Wishlist's own real
   markup (kept functionally untouched: real AJAX add/remove, real nonces,
   real state persistence — nothing here re-implements any of that) into
   this theme's .danuko-icon-btn convention. Confirmed live: YITH renders
   two structurally different blocks depending on state, not just a class
   toggle on one — .yith-wcwl-add-button (outline heart + text, not yet
   added) vs .yith-wcwl-wishlistaddedbrowse (filled heart + "PridÄ—ta!"
   text + a "browse wishlist" link, already added). Both SVGs already use
   fill/stroke: currentColor, so — same as every other icon in this theme
   — color alone drives the idle/active look; no JS needed. */
.danuko-wishlist-btn-wrap {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
}

.danuko-product-summary__cart .danuko-wishlist-btn-wrap {
	position: static;
	flex-shrink: 0;
}

.danuko-wishlist-btn-wrap .yith-wcwl-add-to-wishlist,
.danuko-wishlist-btn-wrap .yith-wcwl-add-button,
.danuko-wishlist-btn-wrap .yith-wcwl-wishlistaddedbrowse {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.danuko-wishlist-btn-wrap a.add_to_wishlist,
.danuko-wishlist-btn-wrap .feedback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--danuko-surface);
	box-shadow: var(--danuko-shadow-sm);
	color: var(--danuko-text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.danuko-wishlist-btn-wrap a.add_to_wishlist:hover {
	color: var(--danuko-coral);
}

.danuko-wishlist-btn-wrap .feedback {
	color: var(--danuko-coral);
	cursor: default;
	/* "PridÄ—ta!" is a bare text node next to the icon here (not its own
	   span, unlike the idle state's label) — font-size:0 hides it
	   visually without display:none/aria-hidden, so screen readers
	   (which read text regardless of font-size) still get it. The SVG's
	   own size is set explicitly in px below, so it's unaffected. */
	font-size: 0;
}

/* Small "pop" the instant the added-state markup appears — it's a fresh
   element each time (YITH swaps in a whole new block, not a class on the
   same node), so a plain CSS animation plays automatically with no JS. */
@keyframes danuko-wishlist-pop {
	0% { transform: scale(0.6); }
	60% { transform: scale(1.15); }
	100% { transform: scale(1); }
}
.danuko-wishlist-btn-wrap .feedback {
	animation: danuko-wishlist-pop 0.35s ease;
}

.danuko-wishlist-btn-wrap .yith-wcwl-icon-svg {
	width: 21px;
	height: 21px;
	flex-shrink: 0;
}

/* Idle-state label ("Pridėti prie mėgstamiausių") IS its own <span> —
   real sr-only technique available here, unlike .feedback's bare text. */
.danuko-wishlist-btn-wrap a.add_to_wishlist span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "Browse wishlist" link: too cramped to show inline over a product
   photo, so hidden on card overlays; kept visible on the single-product
   page where there's real room, giving customers at least one way back
   to their wishlist once they've added something. */
.danuko-wishlist-btn-wrap .yith-wcwl-wishlistaddedbrowse > a {
	display: none;
}
.danuko-wishlist-btn-wrap--inline .yith-wcwl-wishlistaddedbrowse > a {
	display: inline;
	margin-left: 4px;
	font-family: var(--site-secondary-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--danuko-teal-dark);
	text-decoration: underline;
}

.danuko-product-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	font-family: var(--site-secondary-font);
}

.danuko-product-card .danuko-age-badge { align-self: flex-start; margin: 0; }

.danuko-product-card__title {
	font-weight: 700;
	font-size: 15px;
	color: var(--danuko-text);
	margin: 0;
	line-height: 1.35;
}

.danuko-product-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.danuko-price {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 16.5px;
	color: var(--danuko-coral-dark);
}

.danuko-price__old {
	font-weight: 500;
	font-size: 13px;
	color: var(--danuko-text-muted);
	text-decoration: line-through;
	margin-right: 6px;
}

/* Real WooCommerce add-to-cart link (button/add_to_cart_button classes,
   styled globally in section 3) — sized to sit compactly in the card footer.
   width/flex overrides guard against the parent theme's generic .button
   rule making it full-width on small screens, which is what made it look
   oversized and misaligned on phone. */
.danuko-product-card__footer {
	align-items: center;
}

.danuko-product-card__footer .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	flex-shrink: 0;
	padding: 7px 14px !important;
	font-size: 13px;
	line-height: 1.3 !important;
	white-space: nowrap;
	background: var(--danuko-ink-teal);
	color: #fff;
	box-shadow: none;
}

.danuko-product-card__footer .button:hover {
	background: var(--danuko-coral);
	transform: none;
}

@media (max-width: 560px) {
	.danuko-product-card__body { padding: 12px; gap: 6px; }
	.danuko-product-card__footer { gap: 6px; }
	.danuko-product-card__footer .button {
		padding: 6px 10px !important;
		font-size: 11.5px;
	}
	.danuko-price { font-size: 14px; }
}

/* --- Age shop-by strip --- */
.danuko-age-strip { background: var(--danuko-surface); border-top: 1px solid var(--danuko-border); border-bottom: 1px solid var(--danuko-border); }

.danuko-age-strip__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 28px 0;
	overflow-x: auto;
}

.danuko-age-strip__label {
	font-family: var(--site-main-font);
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
	padding-right: 8px;
	flex-shrink: 0;
}

.danuko-age-chip {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--danuko-bg);
	border: 2px solid var(--danuko-border);
	font-weight: 800;
	font-size: 13.5px;
	color: var(--danuko-text);
	font-family: var(--site-secondary-font);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.danuko-age-chip:hover { border-color: var(--danuko-coral); color: var(--danuko-coral-dark); background: #FCEFDA; }

/* --- Trust strip --- */
.danuko-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.danuko-trust-item { display: flex; flex-direction: column; gap: 10px; }

.danuko-trust-item__icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.danuko-trust-item__icon svg { width: 21px; height: 21px; stroke: var(--danuko-teal-mid); fill: none; stroke-width: 1.7; }
.danuko-trust-item h3 { font-family: var(--site-secondary-font); font-size: 15.5px; font-weight: 700; }
.danuko-trust-item p { margin: 0; font-size: 13.5px; color: var(--danuko-text-muted); font-family: var(--site-secondary-font); }

/* ==========================================================================
   8. Shop / category archive (archive-product.php)
   ========================================================================== */
.danuko-archive__header {
	background: var(--danuko-surface);
	border-bottom: 1px solid var(--danuko-border);
	padding: 28px 0 32px;
}

.danuko-breadcrumb {
	font-family: var(--site-secondary-font);
	font-size: 13px;
	color: var(--danuko-text-muted);
	margin-bottom: 12px;
}

.danuko-breadcrumb a { color: var(--danuko-text-muted); }
.danuko-breadcrumb a:hover { color: var(--danuko-coral); }

.danuko-archive__header h1 {
	font-size: clamp(26px, 3.4vw, 36px);
}

.danuko-archive__desc {
	margin-top: 12px;
	max-width: 70ch;
	color: var(--danuko-text-muted);
	font-family: var(--site-secondary-font);
	font-size: 15px;
}

.danuko-archive__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

.danuko-filters {
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 22px;
	position: sticky;
	top: 88px;
}

.danuko-filter-group {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--danuko-border);
}

.danuko-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.danuko-filter-group h3 {
	font-family: var(--site-main-font);
	font-size: 16px;
	margin: 0 0 12px;
}

.danuko-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.danuko-filter-list a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 10px;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-size: 14px;
	color: var(--danuko-text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.danuko-filter-list a:hover { background: var(--danuko-bg); color: var(--danuko-coral-dark); }
.danuko-filter-list li.is-active a { background: rgba(232, 90, 52, 0.1); color: var(--danuko-coral-dark); font-weight: 700; }
.danuko-filter-count { color: var(--danuko-text-muted); font-weight: 400; }

.danuko-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.danuko-filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1.5px solid var(--danuko-border);
	font-family: var(--site-secondary-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.danuko-filter-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.danuko-filter-chip:hover { border-color: var(--danuko-coral); }
.danuko-filter-chip.is-active { background: var(--danuko-coral); border-color: var(--danuko-coral); color: #fff; }

.danuko-filter-clear {
	display: inline-block;
	margin-top: 10px;
	font-size: 12.5px;
	font-family: var(--site-secondary-font);
	color: var(--danuko-teal-mid);
	font-weight: 600;
}

.danuko-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.danuko-price-inputs input {
	width: 0;
	flex: 1;
	padding: 9px 10px !important;
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
}

.danuko-filter-apply { width: 100%; justify-content: center; padding: 10px 18px; }

.danuko-archive__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.danuko-result-count p,
.woocommerce-result-count {
	margin: 0;
	font-family: var(--site-secondary-font);
	font-size: 14px;
	color: var(--danuko-text-muted);
}

.danuko-product-grid--archive { grid-template-columns: repeat(3, 1fr); }

.danuko-empty-state {
	background: var(--danuko-surface);
	border: 1px dashed var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 48px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	color: var(--danuko-text-muted);
	font-family: var(--site-secondary-font);
}

/* Bug fix (confirmed by direct testing): the parent theme has a
   "shop-pagination-infinite_scroll" / "shop-pagination-load_more_button"
   body-class mode that sets .woocommerce-pagination{display:none} — meant
   for its own JS-driven infinite scroll, which we're not using. That
   selector has higher specificity than a plain .woocommerce-pagination
   rule, so it silently hid our classic numbered pagination entirely. */
body.shop-pagination-infinite_scroll .danuko-archive .woocommerce-pagination,
body.shop-pagination-load_more_button .danuko-archive .woocommerce-pagination {
	display: block !important;
}

/* The parent theme puts its own border/background/padding on the <nav>
   and/or <ul> (a pill-shaped container meant to hold its own pagination
   style) — combined with our individually-boxed .page-numbers buttons
   below, that produced a visible outer rectangle wrapping all the
   already-boxed page buttons (user-reported, with screenshot). Stripped
   so only the per-button boxes show. */
.woocommerce-pagination {
	margin-top: 40px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	gap: 6px;
	padding: 0 !important;
	margin: 0;
	justify-content: center;
	flex-wrap: wrap;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Bug fix (confirmed by direct testing): a parent-theme rule meant for blog
   comment pagination ("margin-right:2rem; line-height:1.5rem; display:
   inline-block") shares the exact .page-numbers selector and loads after
   ours in the combined CSS, so it won since specificity was equal. Extra
   !important + the .danuko-archive ancestor guarantees ours wins instead. */
.danuko-archive .woocommerce-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	margin: 0 !important;
	padding: 0 10px;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-weight: 600;
	font-size: 14px;
	line-height: normal !important;
	color: var(--danuko-text);
	border: 1px solid var(--danuko-border);
	background: var(--danuko-surface);
}
.danuko-archive .woocommerce-pagination .page-numbers.current { background: var(--danuko-coral); border-color: var(--danuko-coral); color: #fff; }
.danuko-archive .woocommerce-pagination .page-numbers:hover { border-color: var(--danuko-coral); color: var(--danuko-coral-dark); }

/* Bug fix (confirmed by direct testing): the parent theme's own AJAX
   "load more" button renders regardless of which archive template is
   active (it isn't tied to our custom product grid, so clicking it did
   nothing) — our classic pagination above is the real, working control. */
body.woocommerce-shop .products_ajax_button,
body.tax-product_cat .products_ajax_button,
body.tax-pa_amzius .products_ajax_button {
	display: none !important;
}

/* Bug fix (confirmed by direct testing): a fixed-position "sticky" button
 (elementor-element-8c59688) floats over product pages independently of
 the main content — it isn't part of anything this template renders, and
 duplicated/confused the real add-to-cart form. Likely lives in the still-
 original footer (next phase); hidden here in the meantime via its stable,
 specific element ID so no other Elementor button is affected. */
.elementor-element-8c59688 {
	display: none !important;
}

/* ==========================================================================
   9. Single product page (single-product.php)
   ========================================================================== */
.danuko-product-page,
.danuko-product-layout {
	max-width: 100%;
	overflow-x: hidden;
}

.danuko-product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
}

/* Bug fix: once the gallery's own slider JS (FlexSlider, via the
   wc_product_gallery re-init added earlier) actually runs, it sets explicit
   pixel widths on its wrapper/slides via inline styles for its sliding math
   — that beats a plain CSS max-width rule regardless of specificity, which
   is what was pushing images (and the whole page) wider than the phone
   screen. !important is required here specifically to win against those
   JS-set inline styles, not for general specificity reasons.

   IMPORTANT (2026-07-27): .woocommerce-product-gallery__wrapper must NOT be
   in this list. It's FlexSlider's inner slide track, deliberately wider than
   the visible viewport by design (count * slide-width) so it can be slid
   behind the .flex-viewport "window" below, which is what actually needs
   clipping and is already max-width:100% here. Capping the wrapper itself
   broke the gallery: when FlexSlider's own init calls
   $wrapper.width('N00%') (jQuery converts non-px units to a measured pixel
   value immediately, baking in whatever the wrapper measures as at that
   exact moment), the max-width clamp was already active during that very
   first measurement, so the wrong single-slide width got permanently baked
   into the wrapper's inline style before any later fix could ever apply —
   only the 2nd/3rd images were affected since the 1st slide's position
   happened to fit within that undersized track. Confirmed via live
   browser console (jQuery flexslider instance's own .container/.doMath()
   inspection) that FlexSlider's slide-count/index tracking was correct the
   entire time; only this wrapper's own measured width was wrong. */
.danuko-product-gallery,
.danuko-product-gallery .woocommerce-product-gallery,
.danuko-product-gallery .flex-viewport,
.danuko-product-gallery .woocommerce-product-gallery__image {
	max-width: 100% !important;
	overflow: hidden !important;
}

.danuko-product-gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--danuko-radius-md);
	border: 1px solid var(--danuko-border);
}

.danuko-product-gallery img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover;
}

/* Swipe/drag (FlexSlider touch + mouse-drag) already covers navigation,
   so the plain text "Previous"/"Next" links are redundant clutter. */
.danuko-product-gallery .flex-direction-nav {
	display: none;
}

.danuko-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.danuko-product-gallery .flex-control-thumbs li { width: 72px; }

.danuko-product-gallery .flex-control-thumbs img {
	border-radius: var(--danuko-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.7;
}

.danuko-product-gallery .flex-control-thumbs img.flex-active,
.danuko-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--danuko-coral);
	opacity: 1;
}

.danuko-product-summary { display: flex; flex-direction: column; gap: 14px; }

.danuko-product-summary__title {
	font-size: clamp(24px, 3vw, 32px);
	margin: 4px 0 0;
}

.danuko-product-summary__price {
	font-family: var(--site-secondary-font);
	font-size: 26px;
	font-weight: 800;
	color: var(--danuko-coral-dark);
	font-variant-numeric: tabular-nums;
}

.danuko-product-summary__price ins { text-decoration: none; }
.danuko-product-summary__price del { opacity: 0.5; font-size: 0.6em; margin-right: 8px; }

.danuko-product-summary .stock {
	display: inline-flex;
	align-self: flex-start;
	padding: 5px 14px;
	border-radius: 999px;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 13px;
}

.danuko-product-summary .stock.in-stock { background: rgba(46, 133, 119, 0.12); color: var(--danuko-teal-dark); }
.danuko-product-summary .stock.out-of-stock { background: rgba(232, 90, 52, 0.1); color: var(--danuko-coral-dark); }

.danuko-product-summary__excerpt {
	font-family: var(--site-secondary-font);
	color: var(--danuko-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.danuko-product-summary__cart {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--danuko-border);
	border-bottom: 1px solid var(--danuko-border);
}

/* Kept for variable/grouped/external products, which still render via
   woocommerce_template_single_add_to_cart() (see single-product.php) —
   simple products (the confirmed, tested case) use .danuko-qty-stepper
   below instead. */
.danuko-product-summary__cart .quantity { display: flex; }

.danuko-product-summary__cart .qty {
	width: 68px;
	padding: 12px 10px !important;
	text-align: center;
	font-family: var(--site-secondary-font);
	font-weight: 700;
}

.danuko-product-summary__cart .danuko-qty-form {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Bug fix (confirmed via screenshots): a page-wide vendor script injects
   its own +/- buttons next to any .quantity/.qty element, but positions
   them nowhere near the actual field on this layout — one ended up
   floating next to the price, entirely disconnected from the real input.
   danuko_render_simple_add_to_cart_form() deliberately avoids those class
   names so that script has nothing here to attach to; this is a plain,
   self-contained stepper instead. */
.danuko-qty-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.danuko-qty-stepper__btn {
	width: 40px;
	border: none;
	background: var(--danuko-bg);
	color: var(--danuko-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.danuko-qty-stepper__btn:hover { background: var(--danuko-border); }

.danuko-qty-stepper__input {
	width: 52px;
	border: none;
	border-left: 1px solid var(--danuko-border);
	border-right: 1px solid var(--danuko-border);
	text-align: center;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 16px;
	color: var(--danuko-text);
	-moz-appearance: textfield;
	padding: 0 !important;
	border-radius: 0 !important;
}

.danuko-qty-stepper__input::-webkit-outer-spin-button,
.danuko-qty-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.danuko-product-summary__cart .single_add_to_cart_button {
	padding: 14px 30px !important;
	font-size: 15px;
}

.danuko-product-summary__meta {
	font-family: var(--site-secondary-font);
	font-size: 13px;
	color: var(--danuko-text-muted);
}

.danuko-product-summary__meta a { color: var(--danuko-teal-mid); }

.danuko-product-summary__trust {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--site-secondary-font);
	font-size: 13px;
	color: var(--danuko-text-muted);
}

/* Product data tabs (Description / Additional information / Reviews) */
.danuko-product-tabs .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--danuko-border);
	flex-wrap: wrap;
}

.danuko-product-tabs .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.danuko-product-tabs .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 18px;
	font-family: var(--site-main-font);
	font-weight: 600;
	font-size: 15px;
	color: var(--danuko-text-muted);
	border-radius: var(--danuko-radius-sm) var(--danuko-radius-sm) 0 0;
}

.danuko-product-tabs .woocommerce-tabs ul.tabs li.active a {
	color: var(--danuko-coral-dark);
	background: rgba(232, 90, 52, 0.08);
}

.danuko-product-tabs .woocommerce-Tabs-panel {
	font-family: var(--site-secondary-font);
	color: var(--danuko-text);
	line-height: 1.7;
	max-width: 78ch;
}

.danuko-product-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.danuko-product-tabs table.shop_attributes th,
.danuko-product-tabs table.shop_attributes td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--danuko-border);
	text-align: left;
	font-size: 14.5px;
}

.danuko-product-tabs table.shop_attributes th { color: var(--danuko-text-muted); font-weight: 600; width: 40%; }

@media (max-width: 980px) {
	.danuko-product-layout { grid-template-columns: 1fr; gap: 28px; }
	.danuko-hero__wrap { grid-template-columns: 1fr; }
	.danuko-hero__art { height: 200px; order: -1; }
	.danuko-shelf { grid-template-columns: 1fr; }
	.danuko-cat-card, .danuko-cat-card:hover, .danuko-cat-card:nth-child(2) { transform: none; }
	.danuko-product-grid { grid-template-columns: repeat(2, 1fr); }
	.danuko-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.danuko-archive__layout { grid-template-columns: 1fr; }
	.danuko-filters { position: static; }
	.danuko-product-grid--archive { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.danuko-product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.danuko-section { padding: 52px 0; }
	.danuko-archive__toolbar { flex-direction: column; align-items: stretch; }

	/* Single product page had no small-screen pass at all until now — every
	   other page got one, this was a genuine gap, not a mystery bug. */
	.danuko-product-summary__title { font-size: 21px; }
	.danuko-product-summary__price { font-size: 20px; }

	.danuko-product-summary__cart {
		flex-wrap: wrap;
		padding: 14px 0;
	}

	.danuko-qty-form { flex-wrap: wrap; width: 100%; }

	.danuko-product-summary__cart .single_add_to_cart_button {
		flex: 1;
		padding: 12px 18px !important;
		font-size: 14px;
	}

	.danuko-product-gallery .flex-control-thumbs li { width: calc(25% - 8px) !important; }

	/* Three tabs (one long label) don't fit a phone width — horizontal
	   scroll reads cleaner on mobile than wrapping to a second row. */
	.danuko-product-tabs .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 4px;
		margin-bottom: 18px;
	}

	.danuko-product-tabs .woocommerce-tabs ul.tabs li a {
		padding: 8px 13px;
		font-size: 13.5px;
		white-space: nowrap;
	}

	.danuko-product-tabs table.shop_attributes th,
	.danuko-product-tabs table.shop_attributes td {
		padding: 9px 10px;
		font-size: 13px;
	}

	.danuko-product-summary__trust { font-size: 12px; }
}

/* ==========================================================================
   10. Header & footer (header.php / footer.php)
   ========================================================================== */
.danuko-site-header {
	background: var(--danuko-surface);
	border-bottom: 1px solid var(--danuko-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.danuko-site-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px 24px;
}

.danuko-logo img { display: block; height: 64px; width: auto; }
.danuko-logo--footer img { height: 46px; }

.danuko-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.danuko-nav__list > li { position: relative; }

.danuko-nav__list > li > a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--danuko-text);
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.danuko-nav__list > li > a:hover,
.danuko-nav__list > li.current-menu-item > a,
.danuko-nav__list > li.current-menu-ancestor > a {
	background: rgba(232, 90, 52, 0.08);
	color: var(--danuko-coral-dark);
}

.danuko-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 230px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-md);
	list-style: none;
	margin: 0;
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 10;
}

.danuko-nav__list > li:hover > .sub-menu,
.danuko-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.danuko-nav__list .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-size: 14px;
	color: var(--danuko-text);
}

.danuko-nav__list .sub-menu a:hover { background: var(--danuko-bg); color: var(--danuko-coral-dark); }

/* Bug fix: with no flex:1/margin-left:auto anywhere in this row, once .danuko-nav
   is hidden on mobile there's nothing pushing this group to the right edge —
   it was just sitting close to the logo instead of mirroring its edge position. */
.danuko-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }

.danuko-header-actions__search { margin-right: 6px; position: relative; }
.danuko-header-actions__search .search-form { display: flex; }
.danuko-header-actions__search input[type="search"] {
	border-radius: var(--danuko-radius-sm) 0 0 var(--danuko-radius-sm) !important;
	border-right: none !important;
	padding: 9px 14px !important;
	font-size: 14px;
	width: 180px;
}
.danuko-header-actions__search button {
	border: 1px solid var(--danuko-border);
	border-left: none;
	border-radius: 0 var(--danuko-radius-sm) var(--danuko-radius-sm) 0;
	background: var(--danuko-surface);
	padding: 0 14px;
	cursor: pointer;
}

.danuko-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--danuko-bg);
	color: var(--danuko-text);
	transition: background-color 0.15s ease;
}

/* Permanent background instead of :hover-only — touchscreens have no
   reliable hover state, so a hover-only background was invisible on phone,
   leaving just bare icon lines with no visible button boundary. */
.danuko-icon-btn:hover { background: #F3E9DA; }
.danuko-icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; }

.danuko-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--danuko-coral);
	color: #fff;
	font-family: var(--site-secondary-font);
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Bug fix (confirmed by screenshot): the SVG stroke-line hamburger icon
   rendered completely invisible — button background showed, but the lines
   never did. Something in the site's large combined CSS (very icon/SVG-
   heavy from Elementor) was almost certainly overriding SVG stroke
   rendering. Rebuilt with plain background-color bars instead, which
   nothing else on the site plausibly targets. */
.danuko-nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border: none;
	background: var(--danuko-bg);
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
}

.danuko-nav-toggle:hover { background: #F3E9DA; }

.danuko-nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--danuko-text) !important;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.danuko-nav-toggle.is-open .danuko-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.danuko-nav-toggle.is-open .danuko-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.danuko-nav-toggle.is-open .danuko-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Fixed overlay anchored to the sticky header (which establishes the
   positioning context), so opening it never pushes page content down —
   solid background + shadow + high z-index make it unambiguous that a
   menu opened, rather than a subtle in-flow height change. */
.danuko-mobile-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 0;
	overflow: hidden;
	background: var(--danuko-surface);
	box-shadow: var(--danuko-shadow-md);
	transition: max-height 0.25s ease;
	border-top: 1px solid var(--danuko-border);
	z-index: 200;
}

/* Bug fix (user-reported, iOS Safari — an iPhone's default browser doesn't
   run any content-blocking that other browser apps on the same device
   may apply, which is why this reproduced there but not elsewhere): only
   max-height was ever set here, sized to the viewport as an animation
   trick (you can't transition height:auto directly). But max-height is
   only a CAP — when the actual menu content (search box + link list) is
   shorter than that cap, the panel's real rendered height shrinks to fit
   its content instead of filling the screen, and since this panel is
   position:absolute rather than a true full-screen fixed overlay,
   whatever page content sits below the header (the homepage hero
   illustration, in the reported screenshot) becomes visible in the gap
   underneath. min-height forces genuine full-screen coverage regardless
   of content length. Delaying min-height's own transition until *after*
   max-height's 0.25s opening animation finishes (rather than applying
   instantly) keeps that slide-open animation intact — without the delay,
   min-height would fight max-height for the entire transition and make
   the panel snap open instantly instead of sliding. */
.danuko-mobile-nav.is-open {
	max-height: calc(100vh - 64px);
	min-height: calc(100vh - 64px);
	overflow-y: auto;
	transition: max-height 0.25s ease, min-height 0s linear 0.25s;
}

body.danuko-nav-open { overflow: hidden; }

.danuko-mobile-nav__list { list-style: none; margin: 0; padding: 10px 24px 18px; }
.danuko-mobile-nav__list .sub-menu { list-style: none; margin: 0; padding: 0 0 0 14px; }

.danuko-mobile-nav__list a {
	display: block;
	padding: 11px 4px;
	font-family: var(--site-secondary-font);
	font-weight: 600;
	font-size: 15px;
	color: var(--danuko-text);
	border-bottom: 1px solid var(--danuko-border);
}

.danuko-mobile-nav__list .sub-menu a { font-weight: 500; font-size: 14px; color: var(--danuko-text-muted); }

/* Search was previously dropped entirely on mobile (no room in the
   compact header bar), which meant it wasn't just hard to find — it
   genuinely couldn't be used at all on a phone. Given here in the
   mobile menu panel instead, full-width. */
.danuko-mobile-nav__search { padding: 18px 24px 4px; position: relative; }
.danuko-mobile-nav__search .search-form { display: flex; }

.danuko-mobile-nav__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border-radius: var(--danuko-radius-sm) 0 0 var(--danuko-radius-sm) !important;
	border-right: none !important;
	padding: 11px 14px !important;
	font-size: 15px;
}

.danuko-mobile-nav__search button {
	flex-shrink: 0;
	border-radius: 0 var(--danuko-radius-sm) var(--danuko-radius-sm) 0;
	padding: 0 18px !important;
	background: var(--danuko-coral);
	color: #FFFFFF;
	border: none;
}

/* --- Footer --- */
.danuko-site-footer {
	background: var(--danuko-ink-teal-deep);
	color: #BFD8D4;
	padding: 64px 0 26px;
	margin-top: 0;
}

.danuko-footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}

.danuko-footer-brand .danuko-logo { display: inline-flex; }
.danuko-footer-brand img { filter: brightness(0) invert(1); opacity: 0.92; }

.danuko-footer-brand p {
	max-width: 34ch;
	font-size: 14px;
	margin: 16px 0 20px;
	color: #9FC2BC;
	font-family: var(--site-secondary-font);
}

.danuko-footer-social { display: flex; gap: 10px; }
.danuko-footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}
.danuko-footer-social svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.7; }

.danuko-footer-col h3 {
	font-family: var(--site-secondary-font);
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 18px;
}

.danuko-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.danuko-footer-col a { font-family: var(--site-secondary-font); font-size: 14px; color: #BFD8D4; transition: color 0.15s ease; }
.danuko-footer-col a:hover { color: #fff; }

.danuko-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 22px;
	font-family: var(--site-secondary-font);
	font-size: 13px;
	color: #7FA6A0;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   11. Cart page (page-cart.php)
      Restyles WooCommerce's own [woocommerce_cart] shortcode output —
      real classes only, no structural changes to the form/table.
   ========================================================================== */
/* Base (mobile-first): product list and order summary stacked full-width.
   Desktop gets a side-by-side layout instead — see the min-width:981px
   block near the end of this section — now with a wider column and the
   float/table-display conflicts (found and fixed below) accounted for,
   so it doesn't repeat the earlier cramped/overlapping attempt. */
.danuko-cart-wrap .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 20px;
}

.danuko-cart-wrap table.cart {
	width: 100%;
	border-collapse: collapse;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	overflow: hidden;
}

.danuko-cart-wrap table.cart thead th {
	text-align: left;
	padding: 16px;
	font-family: var(--site-secondary-font);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--danuko-text-muted);
	border-bottom: 1px solid var(--danuko-border);
}

.danuko-cart-wrap table.cart td {
	padding: 16px;
	border-bottom: 1px solid var(--danuko-border);
	font-family: var(--site-secondary-font);
	vertical-align: middle;
}

.danuko-cart-wrap table.cart tr:last-child td { border-bottom: none; }

.danuko-cart-wrap td.product-thumbnail img {
	border-radius: var(--danuko-radius-sm);
	width: 84px;
	height: 84px;
	object-fit: cover;
}

.danuko-cart-wrap td.product-name a:first-child {
	font-weight: 700;
	color: var(--danuko-text);
	font-size: 15px;
}

.danuko-cart-wrap td.product-name a.remove {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--danuko-coral-dark);
}

.danuko-cart-wrap td.product-price .amount,
.danuko-cart-wrap td.product-subtotal .amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--danuko-text);
	/* Bug fix (user-reported, with mobile screenshot): the amount and the
	   € sign already have a non-breaking space between them (WooCommerce's
	   own default markup), but the mobile card layout's narrow flex column
	   still wrapped it onto its own line — a parent-theme wrap rule takes
	   priority over a plain "non-breaking" space in a tight flex item.
	   Forbidding wrapping outright is the reliable fix; a price should
	   never break from its currency symbol at any width anyway. */
	white-space: nowrap;
}

.danuko-cart-wrap .quantity .qty {
	width: 68px;
	padding: 10px !important;
	text-align: center;
	font-weight: 700;
}

.danuko-cart-wrap td.actions {
	border-bottom: none;
	text-align: center;
}

/* Root cause, found via the user's own DevTools screenshot after two
   earlier attempts against tr.actions did nothing: WooCommerce marks up
   this row as a plain <tr> with the "actions" class on its <td>, not on
   the <tr> itself. Every selector in this section was written as
   tr.actions, which matched nothing at all, silently — including the
   button's own intended teal styling below (it's been rendering in the
   parent theme's default outline style this whole time). Corrected to
   td.actions throughout.

   The actual layout bug: on mobile this button is normal static flow
   (the parent theme puts no position/float on it at all there). At the
   min-width:64em breakpoint the parent theme takes it out of flow
   entirely — position:absolute; top:calc(50% + 38px); margin-top:-19px;
   transform:translateY(-50%) — a "second row" trick that assumes
   .coupon (normal flow, right before it) fills the top half of
   td.actions first. With .coupon display:none, td.actions collapses to
   just its own top padding and the absolutely-positioned button
   contributes nothing to that height, so the button renders straddling
   the bottom edge of a now much-shorter cell. Forcing it back to static
   at the same breakpoint restores normal in-flow stacking, matching how
   it already renders correctly on mobile. */
@media print, screen and (min-width: 64em) {
	.danuko-cart-wrap td.actions button[name="update_cart"] {
		position: static !important;
		top: auto !important;
		right: auto !important;
		margin-top: 0 !important;
		-webkit-transform: none !important;
		transform: none !important;
	}
}

/* Removed from the cart page per instruction — checkout still has its
   own working coupon entry, this was redundant there. Hidden rather than
   stripped out of WooCommerce's own cart template, so nothing about the
   real coupon-handling logic changes and this is a one-line revert if
   ever wanted back. */
.danuko-cart-wrap .coupon {
	display: none !important;
}

.danuko-cart-wrap .coupon label { display: none; }

.danuko-cart-wrap .coupon #coupon_code {
	padding: 11px 14px !important;
	font-size: 14px;
	width: 180px;
}

.danuko-cart-wrap td.actions .button {
	width: 100%;
	padding: 18px 20px !important;
	background: var(--danuko-ink-teal);
	color: #fff;
}

.danuko-cart-wrap td.actions .button:hover { background: var(--danuko-coral); }

/* WooCommerce disables "Atnaujinti krepšelį" until a quantity actually
   changes — correct, expected behaviour — but the browser's own default
   disabled look (very low contrast) made it read as broken rather than
   intentionally inactive (user-reported, with mobile screenshot). Kept
   visibly muted so it's still clear it's not clickable yet, but legible. */
.danuko-cart-wrap td.actions .button:disabled {
	background: var(--danuko-border);
	color: var(--danuko-text-muted);
	opacity: 1;
	cursor: not-allowed;
}

/* Bug fix (root cause of the footer-overlap report, confirmed by direct
   inspection): the parent theme's own CSS floats this exact element
   (.cart-collaterals{float:right}) for its original 2-column layout. My
   earlier fix only overrode display (flex beats their inline-block on
   specificity), but never touched float — a floated element is removed
   from normal document flow, so the parent section never expanded to
   include its height, and the footer rendered right on top of it. */
.danuko-cart-wrap .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	margin-top: 32px;
	float: none !important;
	width: 100% !important;
}

.danuko-cart-wrap .cart_totals {
	width: 100%;
	/* Widened from 440px (2026-07-30): fine for the original plain
	   subtotal/tax/total rows, but too narrow once the real shipping-
	   method cards (logo + name + price) render inside it — content was
	   forced into extreme name truncation with almost no right-side
	   breathing room for the price (confirmed live via
	   getBoundingClientRect on the shipping <li>). */
	max-width: 515px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 28px;
}

/* Bug fix (likely cause of the footer-overlap report): forcing this one
   <tr> to display:block while its sibling rows stayed as normal table rows
   mixes display modes inside a real <table>, which is a known source of
   unpredictable height/layout bugs across browsers. Reverted to normal
   table row/cell display.
   The real courier choice (cards) now shows on the cart page too
   (2026-07-30) — previously hidden per an earlier instruction, in favour of
   a fixed "will be updated after payment" message. Reversed because the
   cart total already included a real shipping cost (WooCommerce
   auto-selects the first matching rate) that the hidden state gave
   customers no way to see or change. Shared card styling for both cart and
   checkout lives in the combined .danuko-checkout-wrap/.danuko-cart-wrap
   rules further down; the "Shipment" -> "Pristatymas" label fix stays in
   functions.php (danuko_buffer_shipping_row_label). */

.danuko-cart-wrap .cart_totals h2 {
	font-size: 19px;
	margin: 0 0 16px;
}

/* WooCommerce/Paysera render this note ("Pristatymo pasirinkimai bus
   atnaujinti apmokÄ—jimo metu.") right alongside the real, selectable
   shipping-method list, not instead of it — leftover from when the note
   was the only thing customers saw here (the list itself was hidden, see
   above). Now that the real cards render, the note just contradicts what's
   visibly right above it. Checkout doesn't show this element at all
   (confirmed: it never matched the old buffer-replace regex there), so
   this is scoped to cart only. */
.danuko-cart-wrap .woocommerce-shipping-destination {
	display: none;
}

/* Bug fix: the parent theme also forces tbody/tr to display:block within
   this exact table (for its own original layout) while cells default to
   table-cell — the same mixed-table-display-mode risk already found and
   fixed elsewhere in this project. Forced back to consistent, real table
   display so row/cell alignment can't misbehave. */
.danuko-cart-wrap .cart_totals table {
	display: table !important;
	width: 100%;
	border-collapse: collapse;
	font-family: var(--site-secondary-font);
}

.danuko-cart-wrap .cart_totals table tbody {
	display: table-row-group !important;
}

.danuko-cart-wrap .cart_totals table tr {
	display: table-row !important;
}

.danuko-cart-wrap .cart_totals table tr th,
.danuko-cart-wrap .cart_totals table tr td {
	display: table-cell !important;
}

.danuko-cart-wrap .cart_totals table tr th,
.danuko-cart-wrap .cart_totals table tr td {
	padding: 12px 0;
	border-bottom: 1px solid var(--danuko-border);
	font-size: 14.5px;
	text-align: left;
}

.danuko-cart-wrap .cart_totals table tr th { color: var(--danuko-text-muted); font-weight: 500; }
.danuko-cart-wrap .cart_totals table tr td { text-align: right; font-weight: 600; }

.danuko-cart-wrap .cart_totals table tr.order-total th,
.danuko-cart-wrap .cart_totals table tr.order-total td {
	border-bottom: none;
	font-size: 17px;
	font-weight: 800;
	color: var(--danuko-coral-dark);
}

.danuko-cart-wrap .wc-proceed-to-checkout { margin-top: 18px; }

.danuko-cart-wrap .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 20px !important;
	font-size: 15.5px;
}

/* Bug fix, confirmed via a real screenshot + fetching the actual empty-
   cart markup with a fresh, item-less session: .cart-empty also carries
   the class woocommerce-info — the exact same parent-theme icon-font
   :before mechanism already found and fixed on checkout (large teal
   background + an icon-font glyph tied to padding this project doesn't
   use), just never noticed here since testing normally uses a populated
   cart. Same fix: hide the icon, use a plain card instead. */
.danuko-cart-wrap .cart-empty {
	display: block;
	background: var(--danuko-surface);
	border: 1px dashed var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 48px 24px;
	text-align: center;
	font-family: var(--site-secondary-font);
	font-size: 16px;
	color: var(--danuko-text-muted);
}

.danuko-cart-wrap .cart-empty:before {
	display: none;
}

.danuko-cart-wrap .return-to-shop {
	text-align: center;
}

.danuko-cart-wrap .return-to-shop .button {
	display: inline-flex;
	margin-top: 16px;
}

/* Desktop only: side-by-side layout, order summary aligned with the top of
   the product table (align-items:start) rather than following below it.
   Wider column than the original attempt (440px vs 380px) for breathing
   room, and both the float and table-display conflicts found earlier are
   already handled by the rules above, which apply regardless of layout. */
@media (min-width: 981px) {
	.danuko-cart-wrap .woocommerce {
		display: grid;
		grid-template-columns: 1fr 440px;
		gap: 44px;
		align-items: start;
	}

	.danuko-cart-wrap .woocommerce-notices-wrapper:not(:empty) {
		grid-column: 1 / -1;
	}

	.danuko-cart-wrap .woocommerce-cart-form {
		grid-column: 1;
	}

	.danuko-cart-wrap .cart-collaterals {
		grid-column: 2;
		margin-top: 0;
	}

	.danuko-cart-wrap .cart_totals {
		max-width: none;
	}

	/* Bug fix: the empty-cart state's two elements (.wc-empty-cart-message,
	   .return-to-shop) are unrelated to the populated cart's own children
	   above, but with no grid-column of their own they fell into this
	   grid's default auto-placement — one per column — which is exactly
	   what put the "return to shop" button beside the empty-state message
	   instead of below it. */
	.danuko-cart-wrap .wc-empty-cart-message,
	.danuko-cart-wrap .return-to-shop {
		grid-column: 1 / -1;
	}
}

@media (max-width: 980px) {
	.danuko-cart-wrap .cart-collaterals { justify-content: center; }

	/* Card-style item layout instead of plain stacked label:value rows:
	   thumbnail + name/remove on one line, price/qty/subtotal grouped
	   neatly below within the same card. */
	.danuko-cart-wrap table.cart, .danuko-cart-wrap table.cart tbody { display: block; width: 100%; }
	.danuko-cart-wrap table.cart thead { display: none; }
	.danuko-cart-wrap table.cart tr.cart_item {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 16px;
		margin-bottom: 12px;
		border: 1px solid var(--danuko-border);
		border-radius: var(--danuko-radius-md);
		background: var(--danuko-surface);
	}

	.danuko-cart-wrap table.cart td {
		border-bottom: none;
		padding: 0;
	}

	.danuko-cart-wrap table.cart td.product-thumbnail { flex: 0 0 auto; }
	.danuko-cart-wrap table.cart td.product-thumbnail img { width: 68px; height: 68px; }

	.danuko-cart-wrap table.cart td.product-name {
		flex: 1 1 auto;
		min-width: 0;
		padding-left: 14px;
		align-self: center;
	}

	.danuko-cart-wrap table.cart td.product-name a:first-child {
		display: block;
		font-size: 14.5px;
		line-height: 1.3;
	}

	.danuko-cart-wrap table.cart td.product-price,
	.danuko-cart-wrap table.cart td.product-quantity,
	.danuko-cart-wrap table.cart td.product-subtotal {
		flex: 1 1 0;
		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px solid var(--danuko-border);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.danuko-cart-wrap table.cart td[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--danuko-text-muted);
		font-size: 11.5px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.danuko-cart-wrap table.cart td.product-quantity .quantity { display: block; }
	.danuko-cart-wrap table.cart td.product-quantity .qty { width: 56px; padding: 8px !important; }

	.danuko-cart-wrap td.actions { display: block; padding: 16px; }

	/* Bug fix (user-reported, with mobile screenshot): the coupon input
	   and "Taikyti KuponÄ…" button squeezed onto one cramped line at phone
	   widths (a fixed 180px input plus the button rarely leaves either
	   enough room). Stacked full-width instead — same pattern already
	   used for the price filter's own input+button in the shop sidebar. */
	.danuko-cart-wrap .coupon {
		flex-direction: column;
		align-items: stretch;
	}
	.danuko-cart-wrap .coupon #coupon_code { width: 100%; flex: none; }
	.danuko-cart-wrap td.actions .coupon .button,
	.danuko-cart-wrap td.actions > .button {
		width: 100%;
		justify-content: center;
	}

	.danuko-nav { display: none; }
	.danuko-header-actions__search { display: none; }
	.danuko-nav-toggle { display: flex; }
	.danuko-mobile-nav { display: block; }
	.danuko-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}

@media (max-width: 560px) {
	.danuko-site-header__bar { padding: 10px 16px; gap: 12px; }
	.danuko-logo img { height: 42px; }
	.danuko-footer-grid { grid-template-columns: 1fr; }
	.danuko-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   12. Checkout page (page-checkout.php)
      A fully custom shell (woocommerce/checkout/form-checkout.php overrides
      WooCommerce's own template) around WooCommerce's own field/payment
      sub-templates — real classes only, confirmed via a session-based
      fetch of /apmokejimas/ with an actual populated cart before writing
      any of this (same discipline as cart), re-confirmed after the
      form-checkout.php override to check for regressions.
   ========================================================================== */

/* Notices + "have a coupon" toggle + coupon form. The coupon form's two
   fields are float-paired in the parent theme (unclearfixed by design,
   self-contained); converted to flex here rather than fought, consistent
   with the no-floats lesson learned from the cart page's footer-overlap
   bugs (see .col2-set below, which had the exact same risk at a much
   larger scale). */
.danuko-checkout-wrap .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 20px;
}

.danuko-checkout-wrap .woocommerce-form-coupon-toggle {
	margin-bottom: 20px;
}

/* Bug fix, found on mobile (confirmed by checking the combined CSS): the
   parent theme renders a custom icon-font glyph via a :before pseudo-
   element on .woocommerce-info, positioned with a negative left margin
   that only lines up correctly with the parent's own ~3rem left-padding
   reservation. Overriding that padding below (down to 18px, for a
   simpler, calmer look) left the icon with nothing to sit inside, so it
   rendered outside the box. Simplest correct fix: drop the icon rather
   than fight its padding coupling — nothing else on this page uses icon
   fonts, so plain text + a colored link stays consistent with the rest of
   the design. .woocommerce-error and .woocommerce-message share the exact
   same icon mechanism (confirmed in the combined CSS) and weren't visibly
   broken only because no validation error had been triggered yet — fixed
   proactively here rather than waiting to hit the same bug per-notice. */
.danuko-checkout-wrap .woocommerce-info,
.danuko-checkout-wrap .woocommerce-message,
.danuko-checkout-wrap .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 14px 18px;
	margin: 0 0 16px;
	font-family: var(--site-secondary-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--danuko-text);
}

.danuko-checkout-wrap .woocommerce-info:before,
.danuko-checkout-wrap .woocommerce-message:before,
.danuko-checkout-wrap .woocommerce-error:before {
	display: none;
}

/* .woocommerce-error is a <ul> — each validation error is its own <li>,
   which should stack, not sit side by side like the row above. */
.danuko-checkout-wrap .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	border-color: rgba(232, 90, 52, 0.35);
	background: rgba(232, 90, 52, 0.06);
}

.danuko-checkout-wrap .woocommerce-error li {
	list-style: none;
	font-weight: 600;
	color: var(--danuko-coral-dark);
}

.danuko-checkout-wrap .woocommerce-message {
	border-color: rgba(47, 147, 166, 0.35);
	background: rgba(47, 147, 166, 0.08);
}

/* Bug fix (user-reported): the "Paspauskite čia ir įveskite kodą" toggle
   link was rendering white-on-white (invisible) despite this rule already
   setting a real color — the parent theme evidently wins this one with a
   more specific or !important rule of its own elsewhere. Forced with
   !important rather than chasing the exact competing selector. */
.danuko-checkout-wrap .woocommerce-info a.showcoupon,
.danuko-checkout-wrap .woocommerce-message a {
	color: var(--danuko-coral-dark) !important;
	font-weight: 700;
}

/* Was side-by-side (form-row-first next to form-row-last, WooCommerce's
   own classic two-column convention) but the input visibly overlapped
   the button (user-reported, with screenshot, on desktop and mobile
   alike) — this exact float/flex-basis interaction has broken this
   checkout template before (see the col2-set note below). Stacked
   full-width instead, same clean, can't-overlap pattern as the cart's
   own "Atnaujinti krepšelį" button, rather than a fourth attempt at
   getting the side-by-side sizing exactly right. */
.danuko-checkout-wrap .checkout_coupon {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 18px;
	margin-bottom: 20px;
}

.danuko-checkout-wrap .checkout_coupon p.form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.danuko-checkout-wrap .checkout_coupon #coupon_code {
	padding: 11px 14px !important;
	width: 100%;
}

.danuko-checkout-wrap .checkout_coupon p.form-row-last .button {
	width: 100%;
	justify-content: center;
}

/* Bug-avoidance, kept even now that the shell is a real custom template
   (lesson from cart, found three times there): the parent theme floats
   .col2-set left at 54.5% and #order_review_heading/.woocommerce-checkout-
   review-order left at 45.5% as an unclearfixed sibling-float pair — the
   exact pattern that caused the cart's footer-overlap bug twice. These
   elements still exist with the same classes (just genuinely nested inside
   .danuko-checkout-card now, via woocommerce/checkout/form-checkout.php),
   so the parent rule would still try to match them — neutralized
   unconditionally rather than relying on their new ancestor to save them. */
.danuko-checkout-wrap .col2-set,
.danuko-checkout-wrap #order_review_heading,
.danuko-checkout-wrap .woocommerce-checkout-review-order {
	float: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Real nested cards now (see form-checkout.php), not two CSS-grid siblings
   pretending to be one box — simpler and sturdier than the previous
   grid-row split trick. */
.danuko-checkout-card {
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
	padding: 24px;
}

.danuko-checkout-card + .danuko-checkout-card { margin-top: 24px; }

.danuko-checkout-wrap .col-2 { margin-top: 8px; }

.danuko-checkout-wrap .woocommerce-billing-fields > h3,
.danuko-checkout-wrap #order_review_heading {
	font-family: var(--site-main-font);
	font-size: 17px !important;
	font-weight: 700;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--danuko-ink-teal);
	margin: 0 0 20px;
}

/* #ship-to-different-address is itself an <h3> wrapping a checkbox+label,
   not a plain heading — an ID selector already wins over the class rule
   above regardless of source order, so this needs no :not() exclusion. */
.danuko-checkout-wrap #ship-to-different-address {
	font-size: 14.5px;
	margin: 0 0 20px;
	padding-top: 24px;
	border-top: 1px solid var(--danuko-border);
}

/* Shared checkbox treatment: ship-to-different-address, the Omnisend
   newsletter opt-in, and the terms checkbox all carry the real, shared
   "checkbox" class WooCommerce/the plugin already put on their <label>. */
.danuko-checkout-wrap label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--site-secondary-font);
	font-weight: 600;
}

.danuko-checkout-wrap input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--danuko-coral);
	cursor: pointer;
	flex-shrink: 0;
}

.danuko-checkout-wrap .required { color: var(--danuko-coral) !important; }

#omnisend_newsletter_checkbox_field { margin-top: 20px; }

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--site-secondary-font);
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table thead th {
	text-align: left;
	padding-bottom: 12px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--danuko-text-muted);
	border-bottom: 1px solid var(--danuko-border);
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table th.product-total,
.danuko-checkout-wrap table.woocommerce-checkout-review-order-table td.product-total,
.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tbody td {
	padding: 14px 0;
	border-bottom: 1px solid var(--danuko-border);
	font-size: 14.5px;
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--danuko-text-muted);
	font-weight: 600;
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot th,
.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot td {
	padding: 12px 0;
	border-bottom: 1px solid var(--danuko-border);
	font-size: 14.5px;
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	border-bottom: none;
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot th {
	color: var(--danuko-text-muted);
	font-weight: 500;
	text-align: left;
}

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tfoot td { font-weight: 600; }

.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tr.order-total th,
.danuko-checkout-wrap table.woocommerce-checkout-review-order-table tr.order-total td {
	font-size: 17px;
	font-weight: 800;
	color: var(--danuko-coral-dark);
	border-bottom: none;
}

/* Shipment row: the real courier choice (cards) shows on both cart and
   checkout — only the hardcoded "Shipment" label is fixed (functions.php,
   danuko_buffer_shipping_row_label). */
.danuko-checkout-wrap tr.woocommerce-shipping-totals td,
.danuko-cart-wrap tr.woocommerce-shipping-totals td { text-align: left !important; }

.danuko-checkout-wrap ul.woocommerce-shipping-methods,
.danuko-cart-wrap ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.danuko-checkout-wrap ul.woocommerce-shipping-methods li,
.danuko-cart-wrap ul.woocommerce-shipping-methods li {
	position: relative;
	border: 1.5px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	padding: 0;
	overflow: hidden;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.danuko-checkout-wrap ul.woocommerce-shipping-methods li:has(input:checked),
.danuko-cart-wrap ul.woocommerce-shipping-methods li:has(input:checked) {
	border-color: var(--danuko-coral);
	box-shadow: 0 0 0 3px rgba(232, 90, 52, 0.12);
	background: rgba(232, 90, 52, 0.04);
}

.danuko-checkout-wrap ul.woocommerce-shipping-methods li:has(input:focus-visible),
.danuko-cart-wrap ul.woocommerce-shipping-methods li:has(input:focus-visible) {
	outline: 2px solid var(--danuko-coral);
	outline-offset: 2px;
}

/* The native radio stays in the DOM (focusable/keyboard-usable), just
   visually hidden — the card's own border/shadow is the real selected-
   state indicator, matching the Paysera payment-method tile convention. */
.danuko-checkout-wrap ul.woocommerce-shipping-methods input[type="radio"],
.danuko-cart-wrap ul.woocommerce-shipping-methods input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

/* Labels are inline by default and shrink-wrap their content — without
   this, .danuko-shipping-card's width:100% had nothing real to measure
   against, so its flex children never actually shrank to fit the <li>,
   causing the price to render past the card's right edge (confirmed
   live: card rendered 316px wide inside a 287px li).
   margin: 0 overrides the parent theme's own generic
   "[type=radio] + label { margin-left: 0.375rem; margin-right: 0.75rem }"
   rule (app.css) — a different property than the ones above, so it was
   never canceled by them and silently added 18px on top of width:100%.
   Always present on checkout too, just never visibly clipped there
   because that box has more spare width than the cart's fixed 287px <li>
   (confirmed live via getComputedStyle/getBoundingClientRect on cart). */
.danuko-checkout-wrap ul.woocommerce-shipping-methods label,
.danuko-cart-wrap ul.woocommerce-shipping-methods label {
	display: block;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/* Restyled courier cards — see assets/js/shipping-method-cards.js, which
   restructures WooCommerce's flat label markup (name text + price span +
   logo img, all inline) into these sub-elements. Generic: works for
   however many shipping methods actually render, logo is optional.
   Single-row layout: checkbox, small logo, name, price pushed right —
   per the user's own sketch, not a two-line/large-logo tile. */
.danuko-shipping-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.danuko-shipping-card__checkbox {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--danuko-border);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.danuko-shipping-card__checkbox::after {
	content: "";
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: 0;
	transition: opacity 0.1s ease;
}
.danuko-checkout-wrap ul.woocommerce-shipping-methods li:has(input:checked) .danuko-shipping-card__checkbox,
.danuko-cart-wrap ul.woocommerce-shipping-methods li:has(input:checked) .danuko-shipping-card__checkbox {
	border-color: var(--danuko-coral);
	background: var(--danuko-coral);
}
.danuko-checkout-wrap ul.woocommerce-shipping-methods li:has(input:checked) .danuko-shipping-card__checkbox::after,
.danuko-cart-wrap ul.woocommerce-shipping-methods li:has(input:checked) .danuko-shipping-card__checkbox::after {
	opacity: 1;
}

/* min-width:0 overrides flexbox's default min-width:auto, which would
   otherwise refuse to shrink this item below the logo image's natural
   size — the exact bug that caused the earlier overlapping-logo layout. */
.danuko-shipping-card__logo {
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
.danuko-shipping-card__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 60px;
	max-height: 18px;
}

/* Wraps onto 2 lines instead of single-line ellipsis truncation
   (2026-07-30): white-space:nowrap (required for text-overflow:ellipsis
   to work) made every table containing this card size its columns to fit
   the courier name UNWRAPPED under the browser's default table-layout:
   auto — "Omniva Paštomatai" needing to fit on one line pushed the whole
   cart-totals table past its box. table-layout:fixed was tried as a fix
   but backfired (column collapsed to near-zero, wrapping text letter by
   letter) rather than actually respecting the intended width. Letting the
   name wrap normally sidesteps the problem at its root: a wrappable
   phrase's minimum width for table layout purposes is just its longest
   word ("Paštomatai"), not the full un-wrapped name, which comfortably
   fits without forcing the table wider. */
.danuko-shipping-card__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--site-secondary-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--danuko-text);
	overflow-wrap: break-word;
}

/* Hidden (not deleted, see shipping-method-cards.js) whenever a logo
   renders — Omniva/LP Express both show their own name in the logo
   image, so the separate text is redundant clutter. Kept in the DOM as
   a fallback: a future courier shipped without a logo has no
   --has-logo modifier, so its name still shows normally. */
.danuko-shipping-card--has-logo .danuko-shipping-card__name {
	display: none;
}

.danuko-shipping-card__price {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 10px;
	font-family: var(--site-secondary-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--danuko-text-muted);
}

/* Paysera's own country -> city -> terminal Select2 cascade is fully
   replaced by .danuko-terminal-picker below (see
   assets/js/paysera-terminal-picker.js). The native <select> elements
   inside this wrapper are deliberately kept in the DOM (never removed)
   — they remain the real submitted paysera_country/paysera_city/
   paysera_terminal fields; only their Paysera-rendered visual UI is
   hidden. Do not remove this wrapper from the DOM. */
.danuko-checkout-wrap .paysera-delivery-terminal,
.danuko-cart-wrap .paysera-delivery-terminal { display: none !important; }

/* Custom Paysera terminal picker (assets/js/paysera-terminal-picker.js) */
.danuko-terminal-picker { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.danuko-terminal-picker[hidden] { display: none; }
.danuko-terminal-picker__step { display: flex; flex-direction: column; gap: 8px; }
.danuko-terminal-picker__step[hidden] { display: none; }
.danuko-terminal-picker__label { font-family: var(--site-secondary-font); font-size: 13px; font-weight: 700; color: var(--danuko-text); }

.danuko-terminal-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.danuko-terminal-picker__chip {
	font-family: var(--site-secondary-font); font-size: 13.5px; font-weight: 600;
	padding: 8px 14px; border: 1.5px solid var(--danuko-border); border-radius: var(--danuko-radius-sm);
	background: var(--danuko-surface); color: var(--danuko-text); cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.danuko-terminal-picker__chip:hover { border-color: var(--danuko-teal); }

.danuko-terminal-picker__search-input {
	width: 100%; padding: 11px 14px; border-radius: var(--danuko-radius-sm) !important;
	border: 1.5px solid var(--danuko-border) !important; font-family: var(--site-secondary-font);
	font-size: 14px; background: var(--danuko-surface);
}
.danuko-terminal-picker__search-input:focus {
	border-color: var(--danuko-coral) !important;
	box-shadow: 0 0 0 3px rgba(232, 90, 52, 0.15);
	outline: none;
}

.danuko-terminal-picker__results {
	max-height: 260px; overflow-y: auto; border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm); padding: 6px; display: flex; flex-direction: column; gap: 4px;
	margin-top: 8px;
}
.danuko-terminal-picker__row {
	display: block; width: 100%; text-align: left; padding: 10px 12px;
	border: 1.5px solid transparent; border-radius: var(--danuko-radius-sm); background: none;
	font-family: var(--site-secondary-font); font-size: 13.5px; font-weight: 600;
	color: var(--danuko-text); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.danuko-terminal-picker__row:hover { background: var(--danuko-bg); }

/* Same selected-state convention already used for courier radio cards and Paysera payment-method tiles */
.danuko-terminal-picker__chip.is-selected,
.danuko-terminal-picker__row.is-selected,
.danuko-terminal-picker__summary {
	border-color: var(--danuko-coral) !important;
	box-shadow: 0 0 0 3px rgba(232, 90, 52, 0.12);
	background: rgba(232, 90, 52, 0.04);
}
.danuko-terminal-picker__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
	border: 1.5px solid var(--danuko-border); border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font); font-size: 13.5px; font-weight: 700; color: var(--danuko-ink-teal);
}
.danuko-terminal-picker__summary-change {
	background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 700;
	color: var(--danuko-teal-dark); text-decoration: underline; cursor: pointer;
}
.danuko-terminal-picker__empty, .danuko-terminal-picker__error {
	padding: 12px; text-align: center; font-family: var(--site-secondary-font);
	font-size: 13px; color: var(--danuko-text-muted);
}
.danuko-terminal-picker__error { color: var(--danuko-coral-dark); }
.danuko-terminal-picker__error-retry {
	margin-left: 6px; font-weight: 700; color: var(--danuko-teal-dark);
	text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0;
}

/* Payment methods (Paysera) */
.danuko-checkout-wrap #payment {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--danuko-border);
}

.danuko-checkout-wrap .wc_payment_method > label {
	font-family: var(--site-main-font);
	font-weight: 700;
	font-size: 15px;
	color: var(--danuko-ink-teal);
}

.danuko-checkout-wrap .wc_payment_method > label img {
	height: 20px;
	vertical-align: middle;
	margin-left: 8px;
}

.danuko-checkout-wrap .wc_payment_method input.input-radio { accent-color: var(--danuko-coral); }

.danuko-checkout-wrap .payment-group-title {
	font-family: var(--site-secondary-font);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--danuko-text-muted);
	margin: 20px 0 12px;
}

.danuko-checkout-wrap .payment-group-wrapper:first-child .payment-group-title { margin-top: 0; }

.danuko-checkout-wrap div.paysera-payments.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
}

.danuko-checkout-wrap div.paysera-payments.grid div.paysera-payment-method {
	display: block !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.danuko-checkout-wrap .paysera-payment-method-label {
	flex-direction: column-reverse !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	height: 100%;
	box-sizing: border-box;
	border: 1.5px solid var(--danuko-border) !important;
	border-radius: var(--danuko-radius-sm);
	padding: 12px !important;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.danuko-checkout-wrap .paysera-payment-method-label:hover { border-color: var(--danuko-teal); }

.danuko-checkout-wrap .paysera-payment-method-label:has(input:checked),
.danuko-checkout-wrap .paysera-payment-active,
.danuko-checkout-wrap .paysera-payment-active .paysera-payment-method-label {
	border-color: var(--danuko-coral) !important;
	box-shadow: 0 0 0 3px rgba(232, 90, 52, 0.12);
	background: rgba(232, 90, 52, 0.04);
}

.danuko-checkout-wrap .paysera-text {
	font-family: var(--site-secondary-font);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--danuko-text);
}

.danuko-checkout-wrap .paysera-image img { max-height: 26px; max-width: 100%; }

.danuko-checkout-wrap .paysera-payment-method-label input[type="radio"] {
	accent-color: var(--danuko-coral);
	margin: 0;
}

/* The Paysera payment-initiation legal notice is a trailing, unwrapped
   text node (not its own element) inside this box — styled by setting
   readable defaults on the parent for it to inherit, safe because every
   other element inside already has its own, more specific font rules
   above that win on specificity. */
.danuko-checkout-wrap .payment_box.payment_method_paysera {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--danuko-text-muted);
}

.danuko-checkout-wrap .payment_box.payment_method_paysera a {
	color: var(--danuko-teal-dark);
	font-weight: 600;
}

/* Terms, privacy text, place order */
.danuko-checkout-wrap .woocommerce-terms-and-conditions-wrapper { margin: 28px 0 4px; }

.danuko-checkout-wrap .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--danuko-text-muted);
	margin-bottom: 14px;
}

.danuko-checkout-wrap .woocommerce-terms-and-conditions {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--danuko-text-muted);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	padding: 14px;
	margin-bottom: 14px;
}

.danuko-checkout-wrap .woocommerce-terms-and-conditions-link,
.danuko-checkout-wrap .woocommerce-privacy-policy-link {
	color: var(--danuko-teal-dark);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--danuko-teal);
}

.danuko-checkout-wrap .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 13.5px;
	color: var(--danuko-text);
}

.danuko-checkout-wrap #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 17px 20px !important;
	font-size: 16px;
	margin-top: 20px;
}

/* Desktop only: real two-column layout via grid, replacing the parent
   theme's unclearfixed float pair neutralized above. Two real cards now
   (see form-checkout.php), so this no longer needs the grid-row split
   trick the previous shortcode-only version relied on. */
@media (min-width: 981px) {
	.danuko-checkout-wrap form.checkout {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		gap: 44px;
		align-items: start;
	}

	.danuko-checkout-card--details { grid-column: 1; }
	.danuko-checkout-card--review { grid-column: 2; }
	.danuko-checkout-card + .danuko-checkout-card { margin-top: 0; }
}

/* Bug fix (user-reported: the two checkout cards rendering one below the
   other instead of side by side on desktop). Root cause confirmed in the
   live markup: WooCommerce core's own Order Attribution feature injects
   <wc-order-attribution-inputs> custom elements directly inside
   form.checkout, as a sibling sitting right between the details and
   review cards (via woocommerce_checkout_after_customer_details) — not
   something form-checkout.php added, a WooCommerce core hook this
   template was never in control of. Since form.checkout is the grid
   container above, every direct child becomes a grid item; this one has
   no grid-column of its own, so it got auto-placed into row 1 column 2,
   pushing the real .danuko-checkout-card--review (explicitly column 2)
   down into row 2 instead of sharing row 1 with the details card. It
   only ever carries hidden tracking <input>s (form submission doesn't
   care about CSS display for those), so removing it from layout
   entirely is safe everywhere it appears, not just inside the grid. */
wc-order-attribution-inputs {
	display: none;
}

@media (max-width: 980px) {
	.danuko-checkout-card {
		padding: 20px;
	}

	.danuko-checkout-wrap div.paysera-payments.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.danuko-checkout-wrap .checkout_coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.danuko-checkout-wrap .checkout_coupon p.form-row-last .button { width: 100%; }
}

/* ==========================================================================
   13. Blog (home.php archive, single.php post)
      Confirmed via direct inspection that /blogas/ is a native theme
      template (no Elementor page wrapper), unlike every other page in
      this project — home.php/single.php override it through WordPress's
      normal template hierarchy, no template_include forcing. Individual
      posts remain Elementor-editable for their body content only
      (the_content() below); that per-post canvas is untouched.
   ========================================================================== */

.danuko-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.danuko-post-card {
	display: flex;
	flex-direction: column;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.danuko-post-card:hover {
	box-shadow: var(--danuko-shadow-md);
	transform: translateY(-2px);
}

.danuko-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--danuko-bg);
}

.danuko-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.danuko-post-card__cat {
	position: absolute;
	left: var(--danuko-space-2);
	top: var(--danuko-space-2);
	background: var(--danuko-teal-dark);
	color: #FFFFFF;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
}

.danuko-post-card__cat--static { position: static; display: inline-block; text-decoration: none; }

.danuko-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--danuko-space-3);
}

.danuko-post-card__date {
	font-family: var(--site-secondary-font);
	font-size: 12px;
	color: var(--danuko-text-muted);
	margin-bottom: 6px;
}

.danuko-post-card__title {
	font-size: 17px;
	line-height: 1.35;
	margin: 0 0 8px;
}

.danuko-post-card__title a {
	color: var(--danuko-text);
}

.danuko-post-card__title a:hover { color: var(--danuko-coral-dark); }

.danuko-post-card__excerpt {
	font-family: var(--site-secondary-font);
	font-size: 14px;
	line-height: 1.55;
	color: var(--danuko-text-muted);
	margin: 0 0 14px;
	flex: 1;
}

.danuko-post-card__more {
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--danuko-coral-dark);
	align-self: flex-start;
}

.danuko-blog-empty {
	font-family: var(--site-secondary-font);
	color: var(--danuko-text-muted);
	padding: 40px 0;
	text-align: center;
}

/* Pagination — standard WordPress the_posts_pagination() markup */
.danuko-pagination { margin-top: 40px; }

.danuko-pagination .pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.danuko-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: var(--danuko-radius-sm);
	border: 1px solid var(--danuko-border);
	background: var(--danuko-surface);
	font-family: var(--site-secondary-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--danuko-text);
}

.danuko-pagination .page-numbers:hover { border-color: var(--danuko-coral); color: var(--danuko-coral-dark); }
.danuko-pagination .page-numbers.current { background: var(--danuko-coral); border-color: var(--danuko-coral); color: #FFFFFF; }
.danuko-pagination .page-numbers.dots { border: none; background: none; }

/* Single post */
.danuko-blog-single__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.danuko-blog-single__date {
	font-family: var(--site-secondary-font);
	font-size: 13px;
	color: var(--danuko-text-muted);
}

.danuko-blog-single__hero {
	margin: 28px auto 0;
}

.danuko-blog-single__hero img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
}

.danuko-blog-single__wrap { max-width: 760px; }

/* Prose styling for the_content() — real Elementor text-editor output:
   plain headings/paragraphs/links/images/lists, no special classes. */
.entry-content {
	font-family: var(--site-secondary-font);
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--danuko-text);
}

.entry-content > *:first-child { margin-top: 0; }

.entry-content h1 {
	font-family: var(--site-main-font);
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 700;
	color: var(--danuko-ink-teal);
	text-wrap: balance;
	margin: 0 0 20px;
}

.entry-content h2 {
	font-family: var(--site-main-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--danuko-ink-teal);
	margin: 36px 0 14px;
}

.entry-content h3 {
	font-family: var(--site-main-font);
	font-size: 18.5px;
	font-weight: 700;
	color: var(--danuko-text);
	margin: 28px 0 12px;
}

.entry-content p { margin: 0 0 18px; }

.entry-content a {
	color: var(--danuko-teal-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(47, 147, 166, 0.35);
	text-underline-offset: 2px;
}

.entry-content a:hover { color: var(--danuko-coral-dark); }

.entry-content strong { color: var(--danuko-ink-teal); }

.entry-content ul,
.entry-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.entry-content li { margin-bottom: 8px; }

.entry-content blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--danuko-coral);
	background: var(--danuko-bg);
	border-radius: 0 var(--danuko-radius-sm) var(--danuko-radius-sm) 0;
	font-style: italic;
	color: var(--danuko-text-muted);
}

.entry-content img { max-width: 100%; height: auto; border-radius: var(--danuko-radius-sm); }

.entry-content figure { margin: 24px 0; }

.entry-content figcaption {
	font-size: 13px;
	color: var(--danuko-text-muted);
	text-align: center;
	margin-top: 8px;
}

.danuko-blog-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.danuko-tag-pill {
	font-family: var(--site-secondary-font);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--danuko-teal-dark);
	background: rgba(47, 147, 166, 0.08);
	border-radius: var(--danuko-radius-sm);
	padding: 6px 12px;
}

.danuko-tag-pill:hover { background: rgba(47, 147, 166, 0.16); }

.danuko-blog-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 44px;
	padding: 28px 32px;
	background: var(--danuko-ink-teal);
	border-radius: var(--danuko-radius-md);
	color: #FFFFFF;
}

.danuko-blog-cta h2 {
	font-family: var(--site-main-font);
	font-size: 20px;
	margin: 0 0 6px;
	color: #FFFFFF;
}

.danuko-blog-cta p {
	font-family: var(--site-secondary-font);
	font-size: 14px;
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
}

.danuko-blog-cta .button {
	flex-shrink: 0;
	background: var(--danuko-coral);
	color: #FFFFFF;
	padding: 13px 24px !important;
}

.danuko-blog-single__related {
	margin-top: 56px;
	max-width: none;
}

.danuko-blog-single__related h2 {
	font-family: var(--site-main-font);
	font-size: 22px;
	color: var(--danuko-ink-teal);
	margin: 0 0 20px;
}

@media (max-width: 980px) {
	.danuko-post-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.danuko-blog-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}

@media (max-width: 640px) {
	.danuko-post-grid { grid-template-columns: 1fr; }
	.entry-content { font-size: 16px; }
}

/* ==========================================================================
   14. Search results (search.php)
      Confirmed via the same discipline as everywhere else in this
      project: not an Elementor canvas, real markup checked before
      styling. Reuses .danuko-product-grid/.danuko-post-card and the
      shared danuko_render_*_card() functions directly — no new card
      design needed here, just the section layout around them. The
      previous version had no .danuko-archive__header at all (relying on
      the parent theme's own page-header banner, sized for the old sticky
      Elementor header this project already replaced), which is what
      left results sitting flush under the site header with no breathing
      room — this reuses the same header band every other page already
      has, so that gap is inherited for free rather than special-cased.
   ========================================================================== */
.danuko-search-section-title {
	font-family: var(--site-main-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--danuko-ink-teal);
	margin: 0 0 20px;
}

.danuko-search-section-title--posts { margin-top: 48px; }

/* ==========================================================================
   15. Live search preview (header.php inline script + danuko_ajax_live_search)
      Floating panel for the desktop header search; the mobile nav's copy
      renders inline instead (.danuko-live-search--inline below) — a
      floating overlay inside the already-scrollable mobile menu panel
      risked being clipped or fighting that panel's own scroll, and a
      plain in-flow block sidesteps the problem entirely.
   ========================================================================== */
.danuko-live-search {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 340px;
	max-width: 90vw;
	max-height: 400px;
	overflow-y: auto;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-md);
	padding: 8px;
	z-index: 200;
}

.danuko-live-search--inline {
	position: static;
	width: 100%;
	max-width: none;
	margin-top: 8px;
	box-shadow: none;
}

.danuko-live-search__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: var(--danuko-radius-sm);
}

.danuko-live-search__item:hover { background: var(--danuko-bg); }

.danuko-live-search__media {
	flex-shrink: 0;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: var(--danuko-radius-sm);
	overflow: hidden;
	background: var(--danuko-bg);
}

.danuko-live-search__media img { width: 100%; height: 100%; object-fit: cover; }

.danuko-live-search__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.danuko-live-search__title {
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--danuko-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.danuko-live-search__price {
	font-family: var(--site-secondary-font);
	font-size: 13px;
	font-weight: 700;
	color: var(--danuko-coral-dark);
}

.danuko-live-search__price del { opacity: 0.55; font-weight: 500; margin-right: 4px; text-decoration: line-through; }
.danuko-live-search__price ins { text-decoration: none; }

.danuko-live-search__add {
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px;
	height: 30px;
	border-radius: 50% !important;
	background: var(--danuko-coral);
	color: #FFFFFF !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px !important;
	text-align: center;
	padding: 0 !important;
}

.danuko-live-search__add:hover { background: var(--danuko-coral-dark); }
.danuko-live-search__add.added { background: var(--danuko-teal); }

.danuko-live-search__view {
	flex-shrink: 0;
	font-family: var(--site-secondary-font);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--danuko-teal-dark);
	padding: 6px 10px;
	white-space: nowrap;
}

.danuko-live-search__empty {
	padding: 16px 10px;
	margin: 0;
	text-align: center;
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	color: var(--danuko-text-muted);
}

/* ==========================================================================
   16. Downloads / print & play (page-downloads.php)
      Confirmed Elementor wp-page canvas via the real page source, same as
      every other main page — real titles/descriptions/images (see
      danuko_get_downloads() in functions.php) checked against the live
      page before writing any of this.
   ========================================================================== */
.danuko-download-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.danuko-download-card {
	display: flex;
	flex-direction: column;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.danuko-download-card:hover {
	box-shadow: var(--danuko-shadow-md);
	transform: translateY(-2px);
}

.danuko-download-card__media {
	aspect-ratio: 1 / 1;
	background: var(--danuko-bg);
}

.danuko-download-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.danuko-download-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--danuko-space-3);
}

.danuko-download-card__title {
	font-size: 16.5px;
	line-height: 1.35;
	margin: 0 0 8px;
	color: var(--danuko-text);
}

.danuko-download-card__desc {
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--danuko-text-muted);
	margin: 0 0 16px;
	flex: 1;
}

.danuko-download-card__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: auto;
}

.danuko-download-card__btn {
	text-align: center;
	padding: 12px 20px !important;
	font-size: 14px;
}

.danuko-download-card__count {
	font-family: var(--site-secondary-font);
	font-size: 12px;
	text-align: center;
	color: var(--danuko-text-muted);
}

@media (max-width: 980px) {
	.danuko-download-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 640px) {
	.danuko-download-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. Order tracking (page-order-tracking.php) + My Account
      (page-my-account.php, woocommerce/myaccount/form-login.php)
      Order tracking and the login form were checked against the real live
      markup before writing any of this (confirmed real field names/nonce,
      and — for login — three hardcoded-English strings bypassing
      translation, fixed by the template override itself, not CSS).
      The logged-in dashboard/orders/addresses/edit-account views could
      not be checked the same way (no test account credentials available)
      — styled against WooCommerce core's own stable, long-documented
      classes instead. Flag anything that looks off there specifically.
   ========================================================================== */

/* --- Order tracking --- */
.danuko-order-tracking-card {
	max-width: 560px;
	margin: 0 auto;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
	padding: 32px;
}

.danuko-order-tracking-card form.track_order {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.danuko-order-tracking-card form.track_order > p {
	flex: 1 1 100%;
	margin: 0;
}

.danuko-order-tracking-card form.track_order > p:first-child {
	font-family: var(--site-secondary-font);
	color: var(--danuko-text-muted);
	margin-bottom: 4px;
}

.danuko-order-tracking-card form.track_order > p.form-row-first,
.danuko-order-tracking-card form.track_order > p.form-row-last {
	flex: 1 1 200px;
}

.danuko-order-tracking-card label {
	display: block;
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--danuko-text);
	margin-bottom: 6px;
}

.danuko-order-tracking-card input[type="text"] { width: 100%; }
.danuko-order-tracking-card .clear { display: none; }

.danuko-order-tracking-card button[type="submit"] {
	width: 100%;
	padding: 13px 20px !important;
}

/* --- Login / register (woocommerce/myaccount/form-login.php) --- */
.danuko-account-auth {
	max-width: 480px;
	margin: 0 auto;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	box-shadow: var(--danuko-shadow-sm);
	padding: 32px;
}

.danuko-account-auth--split {
	max-width: 760px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
	overflow: hidden;
}

.danuko-account-auth--split .danuko-account-auth__panel { padding: 32px; }
.danuko-account-auth--split .danuko-account-auth__panel:first-child {
	border-right: 1px solid var(--danuko-border);
}

.danuko-account-auth__panel h2 {
	font-family: var(--site-main-font);
	font-size: 20px;
	color: var(--danuko-ink-teal);
	margin: 0 0 20px;
}

.danuko-account-auth .form-row { margin-bottom: 18px; }

.danuko-account-auth label {
	display: block;
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--danuko-text);
	margin-bottom: 6px;
}

.danuko-account-auth .required { color: var(--danuko-coral); }

.danuko-account-auth input[type="text"],
.danuko-account-auth input[type="password"],
.danuko-account-auth input[type="email"] {
	width: 100%;
}

.danuko-account-auth .form-row--remember-me label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 0;
}

.danuko-account-auth input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--danuko-coral);
	margin: 0;
}

.danuko-account-auth button[type="submit"] {
	width: 100%;
	padding: 13px 20px !important;
}

.danuko-account-auth .woocommerce-LostPassword {
	text-align: center;
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	margin: 14px 0 0;
}

.danuko-account-auth .woocommerce-LostPassword a {
	color: var(--danuko-teal-dark);
	font-weight: 600;
}

/* --- Account dashboard (logged in) --- */
.danuko-my-account-wrap .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 20px; }

.danuko-my-account-wrap .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
}

.danuko-my-account-wrap .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--danuko-text);
}

.danuko-my-account-wrap .woocommerce-MyAccount-navigation-link a:hover { background: var(--danuko-bg); }

.danuko-my-account-wrap .woocommerce-MyAccount-navigation-link--active a {
	background: var(--danuko-coral);
	color: #FFFFFF;
}

.danuko-my-account-wrap .woocommerce-MyAccount-content {
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 28px;
	font-family: var(--site-secondary-font);
	color: var(--danuko-text);
	line-height: 1.6;
	margin-top: 20px;
}

.danuko-my-account-wrap .woocommerce-MyAccount-content a {
	color: var(--danuko-teal-dark);
	font-weight: 600;
}

.danuko-my-account-wrap .woocommerce-MyAccount-content mark {
	background: none;
	color: var(--danuko-coral-dark);
	font-weight: 700;
}

.danuko-my-account-wrap table.woocommerce-orders-table,
.danuko-my-account-wrap table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--site-secondary-font);
	font-size: 14px;
}

.danuko-my-account-wrap table.woocommerce-orders-table thead th,
.danuko-my-account-wrap table.shop_table thead th {
	text-align: left;
	padding: 12px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--danuko-text-muted);
	border-bottom: 1px solid var(--danuko-border);
}

.danuko-my-account-wrap table.woocommerce-orders-table tbody td,
.danuko-my-account-wrap table.shop_table tbody td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--danuko-border);
}

.danuko-my-account-wrap .woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--danuko-teal-dark); }
.danuko-my-account-wrap .button.view { padding: 8px 16px !important; font-size: 13px; }

.danuko-my-account-wrap .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.danuko-my-account-wrap .woocommerce-Address {
	background: var(--danuko-bg);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 20px;
}

.danuko-my-account-wrap .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.danuko-my-account-wrap .woocommerce-Address-title h2,
.danuko-my-account-wrap .woocommerce-Address-title h3 {
	font-size: 16px;
	margin: 0;
	color: var(--danuko-ink-teal);
}

.danuko-my-account-wrap address { font-style: normal; line-height: 1.7; }

.danuko-my-account-wrap .woocommerce-EditAccountForm .form-row,
.danuko-my-account-wrap .woocommerce-address-fields .form-row {
	margin-bottom: 18px;
}

.danuko-my-account-wrap .woocommerce-EditAccountForm label,
.danuko-my-account-wrap .woocommerce-address-fields label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 6px;
}

.danuko-my-account-wrap fieldset {
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	padding: 20px;
	margin-top: 20px;
}

.danuko-my-account-wrap legend {
	font-family: var(--site-main-font);
	font-weight: 700;
	padding: 0 8px;
	color: var(--danuko-ink-teal);
}

.danuko-my-account-wrap button[type="submit"] { padding: 12px 24px !important; }

@media (min-width: 981px) {
	.danuko-my-account-wrap .woocommerce-MyAccount {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 32px;
		align-items: start;
	}
}

@media (max-width: 700px) {
	.danuko-account-auth--split { grid-template-columns: 1fr; }
	.danuko-account-auth--split .danuko-account-auth__panel:first-child {
		border-right: none;
		border-bottom: 1px solid var(--danuko-border);
	}
	.danuko-my-account-wrap .woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. Generic content pages (page.php)
      Covers the footer-linked delivery/returns/FAQ/contact/privacy/terms
      pages. Confirmed via the real page sources before writing any of
      this: most are a plain Elementor text-editor widget outputting
      standard wp-block-heading/wp-block-paragraph content (the .entry-
      content h1/h2/h3/p rules from the blog already handle that), DUK
      specifically uses an Elementor accordion widget, and Kontaktai has
      Elementor heading widgets (mixing real <h2> and plain <span> tags for
      the same visual style) plus a real Contact Form 7 form — all three
      confirmed by direct inspection, not assumed from page names.
   ========================================================================== */
.danuko-content-page__body {
	max-width: 760px;
}

/* Bug fix, confirmed live on all six pages using .entry-content for
   the_content() outside the blog (the five generic content pages +
   Kontaktai): several of them have their own Elementor "Breadcrumbs"
   widget (Kitify's kitify-breadcrumbs, complete with hardcoded English
   "Home" text bypassing translation) baked into the page content itself,
   stacking a second, redundant breadcrumb underneath the real one this
   project already builds in every page template's own header band. Not
   present on blog posts (checked before adding this), so scoped safely
   to .entry-content rather than removed everywhere. */
.entry-content .elementor-kitify-breadcrumbs { display: none; }

/* Kontaktai's intro lines use Elementor's heading widget set to a <span>
   tag (not a real heading) for some of them — styled as readable intro
   text rather than repeating a big bold heading three times in a row. The
   one real <h2> among them already matches .entry-content h2 as-is. */
.entry-content span.elementor-heading-title {
	display: block;
	font-family: var(--site-secondary-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--danuko-text-muted);
	margin-bottom: 14px;
}

/* --- Contact Form 7 (Kontaktai) --- */
.entry-content .wpcf7-form {
	max-width: 480px;
	margin-top: 24px;
}

.entry-content .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 16px;
}

.entry-content .wpcf7-form-control { width: 100%; }
.entry-content .wpcf7-form br { display: none; }

.entry-content .wpcf7-submit {
	border: none;
	border-radius: var(--danuko-radius-sm);
	background: var(--danuko-coral);
	color: #FFFFFF;
	padding: 13px 28px !important;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: var(--danuko-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.entry-content .wpcf7-submit:hover {
	transform: translateY(-1px);
	box-shadow: var(--danuko-shadow-md);
	opacity: 0.95;
}

.entry-content .wpcf7-not-valid-tip {
	display: block;
	color: var(--danuko-coral-dark);
	font-size: 13px;
	margin-top: 4px;
}

.entry-content .wpcf7-response-output {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-size: 14px;
}

/* --- Elementor accordion (DUK) --- */
.entry-content .elementor-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.entry-content .elementor-accordion-item {
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	overflow: hidden;
}

.entry-content .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	margin: 0;
	cursor: pointer;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 15px;
	color: var(--danuko-text);
	background: var(--danuko-surface);
}

.entry-content .elementor-tab-title .elementor-accordion-title {
	color: inherit;
	font-weight: inherit;
	flex: 1;
}

.entry-content .elementor-tab-title[aria-expanded="true"],
.entry-content .elementor-tab-title.elementor-active {
	background: rgba(232, 90, 52, 0.06);
	color: var(--danuko-coral-dark);
}

.entry-content .elementor-accordion-icon { flex-shrink: 0; color: var(--danuko-coral); }

.entry-content .elementor-tab-content {
	padding: 0 20px 18px;
	font-family: var(--site-secondary-font);
	font-size: 14.5px;
	color: var(--danuko-text-muted);
	line-height: 1.65;
}

.entry-content .elementor-tab-content p:first-child { margin-top: 0; }
.entry-content .elementor-tab-content ul { margin: 0 0 12px; padding-left: 20px; }

/* ==========================================================================
   19. Kontaktai (page-kontaktai.php)
      Split out from the generic content-page template per instruction —
      warmer/more playful than the sober policy pages. Real content
      confirmed via the live page source: an Elementor heading widget for
      the intro copy (mixing a real <h2> and plain <span> tags for the
      same visual style) as one top-level section, then a real Contact
      Form 7 form as a second, separate top-level section — both direct
      children of .elementor, which is what the :first-child/.wpcf7
      selectors below rely on instead of Elementor's own auto-generated,
      unstable per-element IDs.
   ========================================================================== */
.danuko-kontaktai-content { max-width: 620px; }

/* The intro copy's own top-level Elementor section, given a warm tinted
   card — .wpcf7 (stable, real class) is excluded via :not() so this
   doesn't also catch the form's own section further down. */
.danuko-kontaktai-content > .elementor > .elementor-element:first-child {
	background: rgba(232, 90, 52, 0.07);
	border-radius: var(--danuko-radius-lg);
	padding: 32px;
}

.danuko-kontaktai-content h2 {
	font-family: var(--site-main-font);
	font-size: clamp(30px, 4vw, 42px);
	color: var(--danuko-coral-dark);
	margin: 0 0 16px;
	text-wrap: balance;
}

.danuko-kontaktai-content span.elementor-heading-title {
	display: block;
	font-family: var(--site-secondary-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--danuko-ink-teal);
	margin-bottom: 12px;
}

.danuko-kontaktai-content span.elementor-heading-title:last-of-type { margin-bottom: 0; }

.danuko-kontaktai-content .wpcf7 {
	display: block;
	margin-top: 28px;
	padding: 32px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-lg);
	box-shadow: var(--danuko-shadow-md);
}

.danuko-kontaktai-content .wpcf7-form-control-wrap { margin-bottom: 18px; }

.danuko-kontaktai-content .wpcf7-submit {
	width: 100%;
	padding: 14px 20px !important;
	font-size: 15px;
}

@media (max-width: 640px) {
	.danuko-kontaktai-content > .elementor > .elementor-element:first-child,
	.danuko-kontaktai-content .wpcf7 {
		padding: 22px;
	}
}

/* ==========================================================================
   20. DUK (page-duk.php)
      Split out from the generic content-page template per instruction,
      same reasoning as Kontaktai. Real content confirmed via the live
      page source: a single Elementor accordion widget, 6 real FAQ items —
      untouched, along with Elementor's own expand/collapse JS; only the
      visual treatment below (overriding the generic .entry-content
      .elementor-accordion rules with something bolder) is custom.
   ========================================================================== */
/* Bug fix (user-reported, with screenshot: "it looks so narrow on
   desktop"). The 720px cap above was a deliberate readability choice for
   the accordion text, but this element was never centered — it just sits
   at the left edge of the much wider .danuko-wrap, so on a normal desktop
   screen it reads as broken/cut-off rather than intentionally narrow.
   Widened moderately and centered instead of removing the cap outright,
   since unconstrained full-width FAQ paragraphs would hurt readability
   more than the empty space hurts here. */
.danuko-duk-content {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.danuko-duk-content .elementor-accordion { gap: 14px; }

.danuko-duk-content .elementor-accordion-item {
	border: 2px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	transition: border-color 0.15s ease;
}

/* A different accent color per item, cycling through the brand palette —
   a small, deliberate bit of visual variety rather than one flat color
   repeated six times down the page. rgba() literals (not color-mix()) to
   match how every other tint in this project is built. */
.danuko-duk-content .elementor-accordion-item:nth-child(3n+1) { --danuko-duk-accent: var(--danuko-coral); --danuko-duk-accent-dark: var(--danuko-coral-dark); --danuko-duk-tint: rgba(232, 90, 52, 0.08); }
.danuko-duk-content .elementor-accordion-item:nth-child(3n+2) { --danuko-duk-accent: var(--danuko-teal); --danuko-duk-accent-dark: var(--danuko-teal-dark); --danuko-duk-tint: rgba(47, 147, 166, 0.08); }
.danuko-duk-content .elementor-accordion-item:nth-child(3n+3) { --danuko-duk-accent: var(--danuko-violet); --danuko-duk-accent-dark: var(--danuko-violet); --danuko-duk-tint: rgba(139, 111, 179, 0.08); }

.danuko-duk-content .elementor-tab-title {
	padding: 18px 22px;
	font-family: var(--site-main-font);
	font-weight: 700;
	font-size: 16.5px;
}

.danuko-duk-content .elementor-tab-title[aria-expanded="true"],
.danuko-duk-content .elementor-tab-title.elementor-active {
	background: var(--danuko-duk-tint);
	color: var(--danuko-duk-accent-dark);
}

.danuko-duk-content .elementor-accordion-item:has(.elementor-tab-title[aria-expanded="true"]) {
	border-color: var(--danuko-duk-accent);
}

.danuko-duk-content .elementor-accordion-icon { color: var(--danuko-duk-accent); font-size: 1.15em; }

.danuko-duk-content .elementor-tab-content {
	padding: 0 22px 20px;
	font-size: 15px;
}

.danuko-duk-content .elementor-tab-content li { margin-bottom: 8px; }

/* ==========================================================================
   21. Apie mus (page-apie-mus.php)
      Real content confirmed via the live page source: 6 top-level
      Elementor sections in this order — (1) hero: a heading widget (h2
      tagline) + image widget as plain siblings, (2)-(4) three founding-
      story blocks, each two columns (h3 keyword-label | paragraph),
      (5) a closing tagline + divider bundled with "Mūsų komanda" and the
      team carousel, (6) the Instagram section. All untouched; targeted by
      position among top-level sections (same idea as Kontaktai's
      :first-child, just more sections to distinguish) plus Elementor's
      real per-widget-type classes, which don't repeat within a given
      section.

      Real bugs fixed here, content itself untouched:
      - The team carousel (.elementor-kitify-team-member) had Elementor's
        own elementor-hidden-mobile / elementor-hidden-mobile_extra
        classes, so it never appeared on phones — visitors got a bare,
        uncaptioned fallback photo grid (a separate native
        elementor-widget-image-gallery, hidden on every OTHER breakpoint)
        instead. First attempt standardized on the carousel + restyled it;
        its "preset-pop-card" visual (a die-cut notch shape plus an
        absolutely-positioned role badge meant to sit in it) turned out to
        be tightly coupled, undocumented CSS this project doesn't own, and
        looked broken after restyling (user-reported, with screenshot).
        Replaced outright: the carousel is now hidden unconditionally and
        a small custom .danuko-team-grid (real photos/names/roles, same
        data) is injected in its place by
        danuko_inject_apie_mus_team_grid() in functions.php. The fallback
        gallery is still redundant either way, so still hidden.
      - Kitify's own widget classes use an "elementor-kitify-*" prefix,
        not Elementor's usual "elementor-widget-*" — confirmed against the
        real markup (matches the elementor-kitify-breadcrumbs precedent
        from Section 18).
   ========================================================================== */

.danuko-apie-mus-content { max-width: 1080px; }

/* --- Section 1: hero (tagline + image) ---
   The image is a wide banner (1250x580, ~2.15:1) with its own baked-in
   mission statement + bullet list, designed to be seen at something
   close to full width. An earlier side-by-side layout (heading | image)
   squeezed it into a half-width column, shrinking that baked-in text to
   near-illegible while sitting right next to the big heading saying the
   same thing — read as redundant clutter rather than a supporting
   visual (user-reported, with screenshot). Stacked full-width instead,
   at every breakpoint, so the image can render close to its natural
   size and its own text stays legible. */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(1) .e-con-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(1) h2.elementor-heading-title {
	font-family: var(--site-main-font);
	font-size: clamp(28px, 4vw, 40px);
	color: var(--danuko-ink-teal);
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(1) .elementor-widget-image {
	width: 100%;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(1) .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--danuko-radius-lg);
	box-shadow: var(--danuko-shadow-md);
}

/* --- Sections 2-4: three founding-story blocks (h3 label | paragraph) --- */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) {
	padding: 28px 0;
	border-top: 1px solid var(--danuko-border);
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) .e-con-inner {
	display: grid;
	gap: 8px 40px;
	align-items: start;
}

/* Elementor saved this page's own two columns at 25%/70% (--width, read
   by the parent theme's .e-con{width:var(--width)}) for its native flex
   layout, where that's measured against the whole row. Once the row
   above becomes display:grid with a fixed first track, the same 25%
   resolves against just that track instead (25% of 220px is ~55px),
   which is what was forcing "Buvimas KARTU" to wrap mid-word. Both
   columns forced back to filling their own grid track. */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) .e-con.e-child {
	width: 100% !important;
	max-width: none !important;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) h3.elementor-heading-title {
	margin: 0;
	font-family: var(--site-main-font);
	font-size: 21px;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) p.elementor-heading-title {
	margin: 0;
	font-family: var(--site-secondary-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--danuko-text-muted);
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(2) h3.elementor-heading-title { color: var(--danuko-coral-dark); }
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(3) h3.elementor-heading-title { color: var(--danuko-teal-dark); }
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(4) h3.elementor-heading-title { color: var(--danuko-violet); }

@media (min-width: 720px) {
	.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) .e-con-inner {
		grid-template-columns: 220px 1fr;
	}
}

/* --- Section 5: closing tagline + divider + team --- */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) {
	padding-top: 16px;
	text-align: center;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) .elementor-widget-text-editor h2 {
	margin: 0 0 24px;
	font-family: var(--site-main-font);
	font-size: clamp(24px, 3.2vw, 32px);
	color: var(--danuko-coral-dark);
	text-wrap: balance;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) .elementor-divider-separator {
	max-width: 80px;
	margin: 0 auto 40px;
	border-top: 3px solid var(--danuko-marigold);
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) .elementor-widget-heading h2.elementor-heading-title {
	margin: 0 0 8px;
	font-family: var(--site-main-font);
	font-size: clamp(24px, 3.2vw, 32px);
	color: var(--danuko-ink-teal);
}

/* Redundant once the carousel below shows on every breakpoint (see
   Section 21 docblock above) — hidden rather than left duplicating it.
   Spacer widgets hidden too; this stylesheet's own gaps control rhythm. */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) .elementor-widget-image-gallery,
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) .elementor-widget-spacer {
	display: none;
}

/* The kitify-team-member carousel is hidden unconditionally now (not
   just on mobile) — its "preset-pop-card" visual (a die-cut notch shape
   plus an absolutely-positioned role badge meant to sit in it) is
   tightly coupled, undocumented CSS this project doesn't own. Two rounds
   of restyling it on top of that preset still looked broken, so it's
   replaced outright by .danuko-team-grid below (real photos/names/roles,
   injected right after this widget by danuko_inject_apie_mus_team_grid()
   in functions.php — same data, markup this theme fully controls). */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(5) .elementor-kitify-team-member {
	display: none !important;
}

.danuko-team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 1080px;
	margin: 32px auto 0;
	padding: 0 var(--danuko-space-3, 16px);
}

.danuko-team-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--danuko-radius-lg);
	overflow: hidden;
	background: var(--danuko-surface);
	box-shadow: var(--danuko-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.danuko-team-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--danuko-shadow-md);
}

.danuko-team-card__photo {
	aspect-ratio: 416 / 477;
	background: var(--danuko-team-accent-bg);
}

.danuko-team-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.danuko-team-card__info {
	padding: 14px 12px 18px;
	text-align: center;
}

.danuko-team-card__role {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 8px;
	border-radius: 999px;
	font-family: var(--site-secondary-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--danuko-team-accent-tint);
	color: var(--danuko-team-accent-dark);
}

.danuko-team-card__name {
	margin: 0;
	font-family: var(--site-main-font);
	font-size: 17px;
	color: var(--danuko-text);
}

/* Each card's accent matches its own portrait's actual background color
   (confirmed against the real images: Danukas=teal, mama=coral,
   tėtis=violet, Puma=marigold) — not an arbitrary rotation. */
.danuko-team-card--teal { --danuko-team-accent-bg: var(--danuko-teal); --danuko-team-accent-tint: rgba(47, 147, 166, 0.12); --danuko-team-accent-dark: var(--danuko-teal-dark); }
.danuko-team-card--coral { --danuko-team-accent-bg: var(--danuko-coral); --danuko-team-accent-tint: rgba(232, 90, 52, 0.12); --danuko-team-accent-dark: var(--danuko-coral-dark); }
.danuko-team-card--violet { --danuko-team-accent-bg: var(--danuko-violet); --danuko-team-accent-tint: rgba(139, 111, 179, 0.14); --danuko-team-accent-dark: var(--danuko-violet); }
.danuko-team-card--marigold { --danuko-team-accent-bg: var(--danuko-marigold); --danuko-team-accent-tint: rgba(239, 161, 60, 0.18); --danuko-team-accent-dark: #A87415; }

@media (min-width: 640px) {
	.danuko-team-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0; }
}

/* --- Section 6: Instagram --- */
.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(6) {
	margin-top: 56px;
	padding-top: 48px;
	border-top: 1px solid var(--danuko-border);
	text-align: center;
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(6) h2.elementor-heading-title {
	margin: 0 0 10px;
	font-family: var(--site-main-font);
	font-size: clamp(26px, 3.4vw, 34px);
	color: var(--danuko-ink-teal);
}

.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(6) p.elementor-heading-title {
	max-width: 46ch;
	margin: 0 auto 26px;
	font-family: var(--site-secondary-font);
	font-size: 16px;
	color: var(--danuko-text-muted);
}

/* The real button had no href at all (fixed in functions.php via
   danuko_fix_apie_mus_instagram_button_link()) — styled here to match
   .danuko-btn--coral used everywhere else, since it can't carry that
   class itself without further rewriting the content. */
.danuko-apie-mus-content .elementor-kitify-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 15px;
	background: var(--danuko-coral);
	color: #fff;
	box-shadow: 0 10px 24px rgba(232, 85, 46, 0.35);
	text-decoration: none;
	transition: transform 0.15s ease;
}

.danuko-apie-mus-content .elementor-kitify-button .elementor-button:hover { transform: translateY(-2px); }

.danuko-apie-mus-content .kitify-images-layout__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.danuko-apie-mus-content .kitify-images-layout__item { width: auto !important; }

.danuko-apie-mus-content .kitify-images-layout__inner {
	border-radius: var(--danuko-radius-md);
	overflow: hidden;
}

.danuko-apie-mus-content .kitify-images-layout__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
}

.danuko-apie-mus-content .kitify-images-layout__image {
	position: absolute;
	inset: 0;
}

.danuko-apie-mus-content .kitify-images-layout__image-instance {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.danuko-apie-mus-content .kitify-images-layout__content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 74, 80, 0);
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.danuko-apie-mus-content .kitify-images-layout__link:hover .kitify-images-layout__content {
	opacity: 1;
	background: rgba(30, 74, 80, 0.4);
}

.danuko-apie-mus-content .kitify-images-layout__icon svg {
	width: 26px;
	height: 26px;
	fill: #fff;
}

@media (min-width: 640px) {
	.danuko-apie-mus-content .kitify-images-layout__list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (max-width: 640px) {
	.danuko-apie-mus-content > .elementor > .elementor-element:nth-child(n+2):nth-child(-n+4) { padding: 22px 0; }
}

/* ==========================================================================
   27. Wishlist page (page-wishlist.php) — "Mano norai"
      Restyles YITH WooCommerce Wishlist's own [yith_wcwl_wishlist] output.
      Real classes only; the shortcode's markup, nonces, share tokens and
      AJAX wiring are untouched.

      The plugin renders the list as a <table>, which is the wrong shape for
      what this page actually is: a gift list people browse and share, not a
      transactional line-item ledger like the cart. So the table is laid out
      as the same product-card grid used on the shop and homepage
      (.danuko-product-grid / .danuko-product-card), by switching the table
      elements' display modes. Photos are the point of a wishlist — YITH's
      table gives them an 80px thumbnail column, and the parent theme hides
      them outright on phones.

      The table's own semantics go away with display:block/grid, which is
      intentional and safe here: every card is self-describing (name, price,
      stock badge, one action) and the column headers were empty or
      redundant, so there is no row/column relationship left to carry.
      The parent theme's competing rule block is switched off at its source
      instead of being fought here — see danuko_drop_parent_wishlist_body_class().
   ========================================================================== */

.danuko-wishlist-page .danuko-archive__desc {
	max-width: 62ch;
}

/* YITH sets font-size:80% on the table, which would shrink every nested
   value below this theme's own type scale. */
.danuko-wishlist-wrap table.wishlist_table {
	display: block;
	width: 100%;
	font-size: 1rem;
	border: 0;
	background: none;
	margin: 0;
}

.danuko-wishlist-wrap table.wishlist_table thead {
	display: none;
}

.danuko-wishlist-wrap table.wishlist_table tbody {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

/* --- The card ------------------------------------------------------- */

/* min-width:0 is a guard, not decoration. A grid item's default minimum size
   is its content's min-content width, so any single oversized descendant
   silently widens the whole card past its track and makes neighbouring cards
   collide — which is exactly what an unsized 300px SVG in the add-to-cart
   cell did here once. This keeps the track authoritative regardless of what
   WooCommerce or a plugin drops into a cell later. */
.danuko-wishlist-wrap table.wishlist_table tbody tr {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-md);
	overflow: hidden;
	box-shadow: var(--danuko-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.danuko-wishlist-wrap table.wishlist_table tbody tr:hover {
	transform: translateY(-3px);
	box-shadow: var(--danuko-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.danuko-wishlist-wrap table.wishlist_table tbody tr,
	.danuko-wishlist-wrap table.wishlist_table tbody tr:hover {
		transform: none;
		transition: none;
	}
}

.danuko-wishlist-wrap table.wishlist_table td {
	display: block;
	width: auto;
	min-width: 0;
	max-width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
	font-family: var(--site-secondary-font);
}

/* Remove control, lifted out of its cell and onto the photo — the same
   corner treatment as the heart button on shop cards, mirrored to the
   opposite side from the sale badge. 40px is a real touch target. */
/* width/height:auto and padding:0 are the load-bearing part, not the offsets.
   YITH sets "width:0" on this cell for its own table layout
   (table.wishlist_table.shop_table .product-remove) and "padding:16px 0" via
   another rule — both out-specify the generic td reset above. Absolutely
   positioning a zero-width box against right:10px leaves its 40px button
   with nowhere to sit but outside the box, overflowing a further 40px to the
   right and off the card entirely (the card's overflow:hidden then clipped
   it to a sliver, which is what "the × is outside the box" looked like).
   Letting the cell shrink-to-fit its button instead keeps the button as the
   single source of truth for its own size, including at the narrower mobile
   size set further down. */
.danuko-wishlist-wrap table.wishlist_table td.product-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: auto;
	height: auto;
	padding: 0;
}

.danuko-wishlist-wrap table.wishlist_table td.product-remove > div {
	display: block;
	width: auto;
	height: auto;
	padding: 0;
}

/* The × is drawn with pseudo-elements rather than rendered as the link's own
   "&times;" text. Two reasons, both from a real screenshot: as text it sits
   optically high and off-centre in the circle (a glyph's ink box is not its
   line box, and no font-size/line-height pairing fixes that reliably across
   the two families this theme loads), and defining ::after here also occupies
   the slot the parent theme uses to paint a second, duplicate × from its
   "iNova" icon font — the reason two of them appeared per card.
   font-size:0 hides the glyph visually while leaving it in the accessibility
   tree, the same technique already used for the wishlist button's feedback
   text; assets/js/wishlist-page.js upgrades the name further to include the
   product it removes. */
.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--danuko-shadow-sm);
	color: var(--danuko-text-muted);
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove:before,
.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	font-family: inherit;
}

.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove:before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove:hover,
.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove:focus-visible {
	background: var(--danuko-coral);
	color: #fff;
}

/* YITH caps the thumbnail link at 80px wide — correct for its own table
   layout, far too small for a card. */
.danuko-wishlist-wrap table.wishlist_table td.product-thumbnail a {
	display: block;
	max-width: none;
	border: 0;
}

.danuko-wishlist-wrap table.wishlist_table td.product-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--danuko-bg);
}

.danuko-wishlist-wrap table.wishlist_table td.product-name {
	padding: 15px 16px 0;
}

/* Clamped to two lines so cards in a row keep their price, stock badge and
   action aligned regardless of how long a product name runs. */
.danuko-wishlist-wrap table.wishlist_table td.product-name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--danuko-text);
	text-transform: none;
	text-decoration: none;
}

.danuko-wishlist-wrap table.wishlist_table td.product-name a:hover {
	color: var(--danuko-coral-dark);
}

.danuko-wishlist-wrap table.wishlist_table td.product-price {
	padding: 9px 16px 0;
}

.danuko-wishlist-wrap table.wishlist_table td.product-price ins {
	text-decoration: none;
	background: none;
}

.danuko-wishlist-wrap table.wishlist_table td.product-price .amount {
	font-weight: 800;
	font-size: 16.5px;
	color: var(--danuko-coral-dark);
	font-variant-numeric: tabular-nums;
	/* Same reason as the cart: WooCommerce's own &nbsp; before the € is not
	   enough to stop a narrow column breaking the symbol onto its own line. */
	white-space: nowrap;
}

.danuko-wishlist-wrap table.wishlist_table td.product-price del {
	margin-right: 6px;
}

.danuko-wishlist-wrap table.wishlist_table td.product-price del .amount {
	font-weight: 500;
	font-size: 13px;
	color: var(--danuko-text-muted);
}

.danuko-wishlist-wrap table.wishlist_table td.product-stock-status {
	padding: 10px 16px 0;
}

.danuko-wishlist-wrap .wishlist_table .product-stock-status span.wishlist-in-stock,
.danuko-wishlist-wrap .wishlist_table .product-stock-status span.wishlist-out-of-stock {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

.danuko-wishlist-wrap .wishlist_table .product-stock-status span.wishlist-in-stock:before,
.danuko-wishlist-wrap .wishlist_table .product-stock-status span.wishlist-out-of-stock:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* Both pairs checked for contrast against their own tint over white
   (5.7:1 and 5.2:1). Out-of-stock is deliberately neutral rather than red:
   it is a fact about availability, not an error, and a red pill would also
   compete with the coral add-to-cart button directly below it. */
.danuko-wishlist-wrap .wishlist_table .product-stock-status span.wishlist-in-stock {
	color: #1F6B4F;
	background: rgba(46, 133, 119, 0.12);
}

.danuko-wishlist-wrap .wishlist_table .product-stock-status span.wishlist-out-of-stock {
	color: var(--danuko-text-muted);
	background: rgba(43, 38, 32, 0.07);
}

/* margin-top:auto pins the action to the bottom of every card, so a
   short-titled product's button still lines up with its neighbours'. */
.danuko-wishlist-wrap table.wishlist_table td.product-add-to-cart {
	margin-top: auto;
	padding: 14px 16px 16px;
}

/* This link carries NO "button" class. WooCommerce's loop template renders
   it as class="product_type_simple add_to_cart_button ajax_add_to_cart
   add_to_cart alt" — confirmed in the live markup. A first version of this
   block targeted a.button and so matched nothing at all, which caused three
   symptoms at once (all visible in one screenshot): the label rendered as
   bare unstyled text; the rule sizing the icon never applied either, so the
   <svg class="miniture-addtocart"> inside — which has no width/height
   attributes — fell back to the default 300x150px replaced-element box; and
   that box pushed each card wider than its own grid track, so cards
   overflowed and collided with their neighbours.

   Styled in full here rather than leaning on a global .button rule: dropping
   the woocommerce-wishlist body class (see functions.php) also drops the
   parent theme's button styling for this context — a fair trade for
   everything else that class was breaking, but it does mean this button now
   owns its entire appearance. YITH additionally forces display:table and
   auto margins with !important, hence the matching weight on those two. */
.danuko-wishlist-wrap .wishlist_table .product-add-to-cart a.add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin: 0 !important;
	padding: 11px 16px !important;
	border-radius: var(--danuko-radius-sm);
	background: var(--danuko-coral);
	color: #fff;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	box-shadow: var(--danuko-shadow-sm);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.danuko-wishlist-wrap .wishlist_table .product-add-to-cart a.add_to_cart_button:hover,
.danuko-wishlist-wrap .wishlist_table .product-add-to-cart a.add_to_cart_button:focus-visible {
	background: var(--danuko-coral-dark);
	box-shadow: var(--danuko-shadow-md);
}

/* WooCommerce marks the button "loading" for the duration of its AJAX add. */
.danuko-wishlist-wrap .wishlist_table .product-add-to-cart a.add_to_cart_button.loading {
	opacity: 0.75;
	pointer-events: none;
}

/* The icon this template asks for does not exist on this install: it is a
   <use xlink:href="#miniture-addtocart"> pointing at a sprite symbol present
   on no page of the site (checked both shop and wishlist). It can only ever
   render as empty space, so it is hidden rather than sized. */
.danuko-wishlist-wrap .wishlist_table .product-add-to-cart a svg {
	display: none;
}

/* The "view cart" link WooCommerce appends after a successful AJAX add —
   a secondary action, so it reads as a link rather than a second button. */
.danuko-wishlist-wrap .wishlist_table .product-add-to-cart a.added_to_cart {
	display: block;
	margin-top: 8px !important;
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--danuko-teal-dark);
	text-align: center;
	text-decoration: underline;
}

/* --- List title + rename form ---------------------------------------- */

.danuko-wishlist-wrap .wishlist-title-container {
	margin-bottom: 24px;
}

.danuko-wishlist-wrap .wishlist-title {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.danuko-wishlist-wrap .wishlist-title h2 {
	margin: 0;
	font-size: clamp(20px, 2.6vw, 26px);
	color: var(--danuko-text);
}

.danuko-wishlist-wrap .wishlist-title a.show-title-form {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1.5px solid rgba(30, 74, 80, 0.25);
	border-radius: 999px;
	background: transparent;
	color: var(--danuko-ink-teal);
	font-family: var(--site-secondary-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.danuko-wishlist-wrap .wishlist-title a.show-title-form:hover {
	background: rgba(30, 74, 80, 0.06);
}

.danuko-wishlist-wrap .wishlist-title a.show-title-form svg {
	width: 15px;
	height: 15px;
}

.danuko-wishlist-wrap .hidden-title-form {
	margin: 0 0 24px;
	max-width: 420px;
}

.danuko-wishlist-wrap .hidden-title-form > input[type="text"] {
	width: 100%;
	padding: 12px 76px 12px 14px !important;
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-secondary-font);
	font-size: 15px;
	min-height: 48px;
}

.danuko-wishlist-wrap .hidden-title-form .edit-title-buttons a {
	color: var(--danuko-text-muted);
}

.danuko-wishlist-wrap .hidden-title-form .edit-title-buttons a.save-title-form {
	color: var(--danuko-teal-dark);
}

.danuko-wishlist-wrap .hidden-title-form .edit-title-buttons svg {
	width: 18px;
	height: 18px;
}

/* --- Share card ------------------------------------------------------- */

/* YITH floats this block (float:left; clear:both) for its own footer
   layout, which this page has none of — the same unclearfixed-float
   pattern already met on the cart. */
.danuko-wishlist-wrap .yith_wcwl_wishlist_footer {
	overflow: hidden;
	margin-top: 40px;
}

.danuko-wishlist-wrap .yith_wcwl_wishlist_footer > div {
	margin-bottom: 0;
}

.danuko-wishlist-wrap .yith-wcwl-share {
	float: none;
	max-width: 620px;
	margin: 0 auto;
	padding: 30px 24px 28px;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-lg);
	box-shadow: var(--danuko-shadow-sm);
	text-align: center;
}

.danuko-wishlist-wrap .yith-wcwl-share h4.yith-wcwl-share-title {
	margin: 0 0 6px;
	font-size: clamp(19px, 2.4vw, 23px);
	color: var(--danuko-text);
}

.danuko-wishlist-wrap .yith-wcwl-share ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.danuko-wishlist-wrap .yith-wcwl-share ul li {
	margin: 0;
}

/* Resting state: a neutral circle carrying the channel's own brand colour as
   the icon, filling with that colour on hover/focus. Both the plugin and the
   parent theme paint these icons white — the parent theme with
   ".yith-wcwl-share a{color:#fff!important}" — which on a light card rendered
   them very nearly invisible until hovered (reported from a screenshot). The
   !important below is matching that weight, not raising the stakes.

   Brand colour on the icon rather than on the whole button keeps five
   channels from turning this quiet card into a colour strip, while still
   letting each one be recognised at a glance. Every resting colour below
   clears 4:1 against the cream circle — comfortably past the 3:1 that
   non-text UI needs. */
.danuko-wishlist-wrap .yith-wcwl-share li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--danuko-border);
	border-radius: 50%;
	background: var(--danuko-bg);
	color: var(--danuko-ink-teal) !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.danuko-wishlist-wrap .yith-wcwl-share li a svg,
.danuko-wishlist-wrap .yith-wcwl-share li a.email svg {
	width: 19px;
	height: 19px;
}

.danuko-wishlist-wrap .yith-wcwl-share li a.facebook { color: #1877F2 !important; }
.danuko-wishlist-wrap .yith-wcwl-share li a.whatsapp { color: #128C4A !important; }
.danuko-wishlist-wrap .yith-wcwl-share li a.email    { color: var(--danuko-teal-dark) !important; }
.danuko-wishlist-wrap .yith-wcwl-share li a.twitter  { color: #14171A !important; }
.danuko-wishlist-wrap .yith-wcwl-share li a.pinterest { color: #BD081C !important; }

.danuko-wishlist-wrap .yith-wcwl-share li a:hover,
.danuko-wishlist-wrap .yith-wcwl-share li a:focus-visible {
	color: #fff !important;
	transform: translateY(-2px);
}

.danuko-wishlist-wrap .yith-wcwl-share li a.facebook:hover,
.danuko-wishlist-wrap .yith-wcwl-share li a.facebook:focus-visible {
	background: #1877F2;
	border-color: #1877F2;
}

.danuko-wishlist-wrap .yith-wcwl-share li a.whatsapp:hover,
.danuko-wishlist-wrap .yith-wcwl-share li a.whatsapp:focus-visible {
	background: #128C4A;
	border-color: #128C4A;
}

.danuko-wishlist-wrap .yith-wcwl-share li a.email:hover,
.danuko-wishlist-wrap .yith-wcwl-share li a.email:focus-visible {
	background: var(--danuko-teal-dark);
	border-color: var(--danuko-teal-dark);
}

.danuko-wishlist-wrap .yith-wcwl-share li a.twitter:hover,
.danuko-wishlist-wrap .yith-wcwl-share li a.twitter:focus-visible {
	background: #14171A;
	border-color: #14171A;
}

.danuko-wishlist-wrap .yith-wcwl-share li a.pinterest:hover,
.danuko-wishlist-wrap .yith-wcwl-share li a.pinterest:focus-visible {
	background: #BD081C;
	border-color: #BD081C;
}

@media (prefers-reduced-motion: reduce) {
	.danuko-wishlist-wrap .yith-wcwl-share li a:hover,
	.danuko-wishlist-wrap .yith-wcwl-share li a:focus-visible {
		transform: none;
	}
}

.danuko-wishlist-wrap .yith-wcwl-after-share-section {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px dashed var(--danuko-border);
}

.danuko-wishlist-wrap .yith-wcwl-after-share-section input.copy-target {
	width: 100%;
	padding: 12px 14px !important;
	border: 1px solid var(--danuko-border);
	border-radius: var(--danuko-radius-sm);
	background: var(--danuko-bg);
	font-family: var(--site-secondary-font);
	font-size: 13.5px;
	color: var(--danuko-text-muted);
	text-align: center;
	text-overflow: ellipsis;
	min-height: 46px;
}

/* YITH's share.php splits one sentence across three gettext calls, the
   middle one being the copy trigger; making the <small> a flex row turns
   that into a button plus its own explanation, with the surrounding text
   nodes becoming anonymous flex items. */
.danuko-wishlist-wrap .yith-wcwl-after-share-section small {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--danuko-text-muted);
}

.danuko-wishlist-wrap .copy-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--danuko-coral);
	color: #fff;
	font-family: var(--site-secondary-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.danuko-wishlist-wrap .copy-trigger:hover {
	background: var(--danuko-coral-dark);
}

.danuko-wishlist-wrap .copy-trigger.is-copied {
	background: var(--danuko-teal-mid);
}

/* Confirmation text injected by assets/js/wishlist-page.js into an
   aria-live region, so it is announced as well as seen. */
.danuko-wishlist-copied:not(:empty) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--danuko-teal-dark);
}

.danuko-wishlist-copied:not(:empty):before {
	content: "\2713";
}

/* --- Empty state, and the states that swap around it ------------------ */

/* Both custom blocks are always in the DOM; :has() decides which one shows
   by reading what the shortcode actually rendered. See page-wishlist.php
   for why this is done in CSS rather than counted in PHP. Where :has() is
   unsupported neither block appears and YITH's own empty row (translated,
   and styled below) remains — degraded, never broken. */
.danuko-wishlist-empty {
	display: none;
	max-width: 520px;
	margin: 0 auto;
	padding: 48px 28px 44px;
	background: var(--danuko-surface);
	border: 1px dashed var(--danuko-border);
	border-radius: var(--danuko-radius-lg);
	text-align: center;
}

.danuko-wishlist-wrap:has(.wishlist-empty) .danuko-wishlist-empty {
	display: block;
}

/* An empty list has nothing to rename and nothing worth sharing. */
.danuko-wishlist-wrap:has(.wishlist-empty) #yith-wcwl-form,
.danuko-wishlist-wrap:has(.wishlist-empty) .danuko-wishlist-continue {
	display: none;
}

.danuko-wishlist-empty__art svg {
	width: 62px;
	height: 62px;
	fill: none;
	stroke: var(--danuko-coral);
	stroke-width: 3;
	stroke-linejoin: round;
	opacity: 0.5;
}

.danuko-wishlist-empty h2 {
	margin: 16px 0 8px;
	font-size: clamp(20px, 2.6vw, 25px);
	color: var(--danuko-text);
}

.danuko-wishlist-empty p {
	margin: 0 auto 24px;
	max-width: 42ch;
	font-family: var(--site-secondary-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--danuko-text-muted);
}

/* Fallback styling for YITH's own empty row (see above). */
.danuko-wishlist-wrap td.wishlist-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	font-family: var(--site-secondary-font);
	font-size: 15px;
	color: var(--danuko-text-muted);
}

.danuko-wishlist-wrap table.wishlist_table tbody tr:has(td.wishlist-empty) {
	grid-column: 1 / -1;
	border-style: dashed;
	box-shadow: none;
}

.danuko-wishlist-continue {
	margin: 32px 0 0;
	text-align: center;
	font-family: var(--site-secondary-font);
	font-size: 14.5px;
}

.danuko-wishlist-continue a {
	color: var(--danuko-teal-dark);
	font-weight: 600;
}

.danuko-wishlist-continue a:hover {
	color: var(--danuko-coral);
}

/* --- Header / mobile-nav entry points --------------------------------- */

.danuko-icon-btn--wishlist svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.danuko-icon-btn--wishlist:hover {
	color: var(--danuko-coral);
}

/* Same badge geometry as .danuko-cart-count next to it, in teal rather than
   coral so the two counters read as distinct at a glance instead of as one
   repeated element. Filled in by the script in header.php — it carries the
   [hidden] attribute until then, so it occupies nothing when the list is
   empty and can never flash a wrong number from a cached page. */
.danuko-wishlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--danuko-teal-dark);
	color: #fff;
	font-family: var(--site-secondary-font);
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.danuko-wishlist-count[hidden] {
	display: none;
}

.danuko-mobile-nav__extra {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	border-top: 1px solid var(--danuko-border);
	font-family: var(--site-secondary-font);
	font-weight: 600;
	font-size: 16px;
	color: var(--danuko-text);
}

.danuko-mobile-nav__extra svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--danuko-coral);
	stroke-width: 1.8;
	stroke-linejoin: round;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 980px) {
	.danuko-wishlist-wrap table.wishlist_table tbody {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.danuko-wishlist-wrap table.wishlist_table tbody {
		gap: 14px;
	}

	.danuko-wishlist-wrap table.wishlist_table td.product-name,
	.danuko-wishlist-wrap table.wishlist_table td.product-price,
	.danuko-wishlist-wrap table.wishlist_table td.product-stock-status {
		padding-left: 12px;
		padding-right: 12px;
	}

	.danuko-wishlist-wrap table.wishlist_table td.product-add-to-cart {
		padding: 12px;
	}

	.danuko-wishlist-wrap table.wishlist_table td.product-name a {
		font-size: 14px;
	}

	.danuko-wishlist-wrap table.wishlist_table td.product-remove a.remove {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.danuko-wishlist-wrap .yith-wcwl-share {
		padding: 26px 18px 24px;
	}

	/* Full-width copy button on phones: it is the primary action of this
	   card, and the explanatory line reads better beneath it than beside it. */
	.danuko-wishlist-wrap .copy-trigger {
		width: 100%;
	}
}