/* ═══════════════════════════════════════════════════════════
   ROYSEN · Кошик + Оформлення замовлення
   Перенесено з дизайн-семпла roysen-cart-checkout.html
   Палітра (логобук BLUFF 2025): крем/чорний/жовтий/беж · Inter
   ═══════════════════════════════════════════════════════════ */

:root{
	--ink:      #111111;
	--bg:       #FFFFFF;
	--cream:    #FFFFFF;
	--beige:    #D6CEBA;
	--beige-50: #EDE8DB;
	--yellow:   #FEE34A;
	--yellow-soft: #FFF6CC;
	--muted:    rgba(17,17,17,.55);
	--faint:    rgba(17,17,17,.38);
	--line:     rgba(17,17,17,.14);
	--line-input: rgba(17,17,17,.34); /* рамки полів — контрастніші за розділювачі */
	--line-strong: rgba(17,17,17,.85);
	--font-shop: 'Roysen Inter', 'Roysen Inter Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--pad: clamp(16px, 4vw, 56px);
}

body.woocommerce-cart,
body.woocommerce-checkout{
	font-family:var(--font-shop);
	background:var(--bg);
	color:var(--ink);
	font-size:14px;
	line-height:1.5;
}
.woocommerce-cart .site-main .container,
.woocommerce-checkout .site-main .container{
	max-width:1440px;
}
.woocommerce-cart button,
.woocommerce-checkout button{ font-family:inherit; cursor:pointer; }
.woocommerce-cart input, .woocommerce-cart select, .woocommerce-cart textarea,
.woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea{
	font-family:inherit; font-size:14px; color:var(--ink);
}

/* ─── Сторінка ─── */
.shop-page{ padding: clamp(28px,5vw,56px) 0 clamp(60px,8vw,110px); }
.shop-breadcrumbs{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.shop-breadcrumbs a{ text-decoration:none; }
.shop-breadcrumbs a:hover{ color:var(--ink); }
.shop-title{
	font-size:clamp(21px, 3.22vw, 36px);
	font-weight:600; letter-spacing:.04em; text-transform:uppercase;
	line-height:1.05;
	margin-bottom:clamp(28px, 4vw, 48px);
}
.shop-title sup{ font-size:.38em; font-weight:400; letter-spacing:.08em; color:var(--muted); margin-left:6px; }
.label-caps{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; }

/* Повідомлення WooCommerce — глобальні стилі в main.css; тут — відступ від хедера */
.woocommerce-cart .woocommerce-notices-wrapper > :first-child,
.woocommerce-checkout .woocommerce-notices-wrapper > :first-child{ margin-top:28px; }

/* ════════ КОШИК ════════ */
.cart-layout{
	display:grid;
	grid-template-columns: minmax(0,1fr) 400px;
	gap: clamp(28px, 4vw, 64px);
	align-items:start;
}

.cart-head{
	display:grid;
	grid-template-columns: minmax(0,1fr) 130px 130px 110px;
	gap:16px;
	padding-bottom:14px;
	border-bottom:1px solid var(--line-strong);
}
.cart-head span:nth-child(3){ text-align:center; }
.cart-head span:last-child{ text-align:right; }

.cart_item{
	display:grid;
	grid-template-columns: minmax(0,1fr) 130px 130px 110px;
	gap:16px;
	padding:26px 0;
	border-bottom:1px solid var(--line);
	align-items:start;
}
.product-cell{ display:flex; gap:18px; min-width:0; }
.product-thumb{
	width:96px; height:120px; flex:none;
	background:var(--beige);
	display:flex; align-items:center; justify-content:center;
	position:relative; overflow:hidden;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-meta{ display:flex; flex-direction:column; gap:6px; min-width:0; padding-top:2px; }
.product-name{ font-size:14px; font-weight:600; text-decoration:none; }
.product-name:hover{ text-decoration:underline; text-underline-offset:3px; }
.product-attrs{ font-size:12.5px; color:var(--muted); }
.product-attrs dl.variation{ display:flex; flex-wrap:wrap; gap:2px 6px; margin:0; }
.product-attrs dl.variation dt{ font-weight:400; }
.product-attrs dl.variation dd{ margin:0; }
.product-attrs dl.variation dd p{ display:inline; margin:0; }
.badge-preorder{
	align-self:flex-start;
	background:var(--yellow);
	font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
	padding:4px 8px; margin-top:2px;
}
.item-actions{ display:flex; gap:14px; margin-top:auto; padding-top:10px; }
.item-actions a, .item-actions button{
	background:none; border:none; padding:0; display:flex;
	color:var(--faint); transition:color .2s; text-decoration:none;
}
.item-actions a:hover, .item-actions button:hover{ color:var(--ink); }
.item-actions svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.4; }

.price-cell{ padding-top:2px; font-variant-numeric:tabular-nums; }
.price-cell del{ display:block; color:var(--faint); font-size:12.5px; margin-top:3px; }
.price-cell ins{ text-decoration:none; font-weight:500; }
.price-now{ font-weight:500; }

.qty-cell{ display:flex; justify-content:center; }
.qty{
	display:inline-flex; align-items:center;
	border:1px solid var(--line-input); height:40px;
}
.qty button{
	width:34px; height:100%; background:none; border:none;
	font-size:16px; font-weight:300; color:var(--muted); transition:color .2s;
}
.qty button:hover{ color:var(--ink); }
.qty input{
	width:36px; text-align:center; border:none; background:none;
	font-size:14px; font-weight:500; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }

.subtotal-cell{ text-align:right; font-weight:600; font-size:15px; padding-top:8px; font-variant-numeric:tabular-nums; }

.cart-continue{ margin-top:26px; }
.cart-continue a{
	font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
	text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px;
}

/* Порожній кошик */
.cart-empty-state{ text-align:center; padding:clamp(40px,8vw,90px) 0; }
.cart-empty-state p{ font-size:15px; color:var(--muted); margin-bottom:28px; }
.cart-empty-state .btn{ max-width:320px; margin:0 auto; }

/* ─── Сайдбар кошика / підсумок ─── */
.cart_totals, .order-summary{
	border:1px solid var(--line-strong);
	background:var(--bg);
	padding:clamp(20px, 2.5vw, 30px);
	position:sticky; top:96px;
}

.freeship{ margin-bottom:24px; }
.freeship-text{ font-size:13px; margin-bottom:10px; }
.freeship-text strong{ font-weight:600; }
.freeship-track{ height:2px; background:var(--line); position:relative; }
.freeship-fill{
	position:absolute; inset:0 auto 0 0; background:var(--ink);
	transition:width .4s ease;
}

.coupon-toggle{
	width:100%; background:none; border:none;
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
	padding:16px 2px;
	display:flex; align-items:center; justify-content:space-between;
	font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.coupon-toggle .plus{ font-size:18px; font-weight:300; transition:transform .25s; }
.coupon-toggle[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.coupon{ display:none; padding:16px 0 20px; gap:8px; }
.coupon.open{ display:flex; }
.coupon .input-text{
	flex:1; min-width:0; height:44px; padding:0 14px;
	border:1px solid var(--line-input); background:transparent;
	letter-spacing:.05em;
}
.coupon .input-text:focus{ outline:none; border-color:var(--ink); }
.coupon .apply-btn{
	height:44px; padding:0 18px;
	background:var(--ink); color:var(--cream); border:1px solid var(--ink);
	font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.coupon-applied{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:14px 0; font-size:13px; border-bottom:1px solid var(--line);
}
.coupon-applied .code{
	background:var(--yellow-soft); border:1px dashed rgba(17,17,17,.3);
	padding:3px 10px; font-weight:600; letter-spacing:.06em; font-size:12px; text-transform:uppercase;
}
.coupon-applied .woocommerce-remove-coupon{ color:var(--faint); font-size:12px; text-decoration:underline; text-underline-offset:2px; }

.totals-rows{ padding:20px 0 6px; display:flex; flex-direction:column; gap:12px; }
.totals-row{ display:flex; justify-content:space-between; gap:14px; font-size:13.5px; }
.totals-row .t-label{ color:var(--muted); }
.totals-row .t-value{ font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }

.totals-due{
	display:flex; justify-content:space-between; align-items:baseline;
	border-top:1px solid var(--line-strong);
	margin-top:14px; padding-top:18px;
}
.totals-due .t-label{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.totals-due .t-value{ font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }

.btn{
	display:flex; align-items:center; justify-content:center; width:100%;
	height:54px; border:1px solid var(--ink);
	font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
	text-decoration:none; transition:background .2s, color .2s;
	background:transparent; color:var(--ink);
}
.btn-primary{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); margin-top:22px; }
.btn-primary:hover{ background:var(--ink); color:var(--yellow); border-color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); margin-top:10px; }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn[disabled], .btn.disabled{ opacity:.55; cursor:not-allowed; }

.pay-hints{
	margin-top:20px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.pay-hints span{
	font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
	border:1px solid var(--line); color:var(--muted);
	padding:4px 8px;
}
.summary-note{ margin-top:14px; font-size:11.5px; color:var(--faint); text-align:center; }

/* ════════ ОФОРМЛЕННЯ ════════ */
.checkout-layout{
	display:grid;
	grid-template-columns: minmax(0,1fr) 440px;
	gap:clamp(28px, 4vw, 72px);
	align-items:start;
}

.co-section{ padding:30px 0 34px; border-top:1px solid var(--line-strong); }
.co-section:first-child{ border-top:none; padding-top:0; }
.co-section-head{
	display:flex; align-items:baseline; gap:14px; margin-bottom:22px;
}
.co-step{
	font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--faint);
	font-variant-numeric:tabular-nums;
}
.co-section-title{ font-size:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-grid p.form-row, .form-row{ display:flex; flex-direction:column; gap:7px; min-width:0; margin:0; }
.form-row.wide, .form-grid .form-row-wide{ grid-column:1 / -1; }
.form-row label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--muted); }
.form-row .required{ color:var(--ink); text-decoration:none; }
.form-row .woocommerce-input-wrapper{ display:block; width:100%; }
.input-text, .form-row select, .form-row textarea{
	width:100%;
	height:48px; padding:0 14px;
	border:1px solid var(--line-input); background:transparent;
	transition:border-color .2s;
	border-radius:0; appearance:none; -webkit-appearance:none;
}
.form-row textarea{ height:auto; min-height:96px; padding:12px 14px; resize:vertical; }
.input-text:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--ink); }
.input-text::placeholder, .form-row textarea::placeholder{ color:var(--faint); }
.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select{ border-color:#b3261e; }
.form-row .description, .field-hint{ font-size:11.5px; color:var(--faint); }

/* ── Методи доставки та оплати ── */
.shipping-methods, .wc_payment_methods{
	list-style:none; display:flex; flex-direction:column; gap:10px;
	margin:0; padding:0;
}
.shipping-methods li, .wc_payment_methods li{
	position:relative;
	border:1px solid var(--line);
	transition:border-color .2s, background .2s;
	margin:0;
}
.shipping-methods li:hover, .wc_payment_methods li:hover{ border-color:var(--ink); }
.shipping-methods li:has(input:checked), .wc_payment_methods li:has(input:checked){
	border-color:var(--ink); background:#FFFDF5;
}
.shipping-methods input[type="radio"], .wc_payment_methods input[type="radio"]{
	appearance:none; -webkit-appearance:none;
	position:absolute; left:17px; margin:0;
	width:18px; height:18px;
	border:1px solid var(--ink); border-radius:50%;
	background:transparent; cursor:pointer;
	/*
	 * По ПЕРШОМУ РЯДКУ назви, а не по центру блока: у способів з описом
	 * блок вищий, і центрування зсувало б кружечок до опису.
	 * 22.5px = підібрано заміром: за top:50% центр кружечка стояв на 29.5px
	 * від верху блока, а центр тексту — на 26.5px.
	 */
	top:22.5px; transform:translateY(-50%);
}
.shipping-methods input[type="radio"]:checked, .wc_payment_methods input[type="radio"]:checked{
	background:radial-gradient(circle, var(--ink) 0 4px, transparent 4.6px);
}
.shipping-methods label, .wc_payment_methods label{
	display:block; cursor:pointer;
	padding:15px 120px 15px 48px;
	margin:0;
}
.method-name{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	font-size:13px; font-weight:600; letter-spacing:.04em;
}
.method-desc{ display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.method-cost{
	position:absolute; right:18px; top:50%; transform:translateY(-50%);
	font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.method-cost .woocommerce-Price-amount{ color:var(--ink); font-weight:500; }

/* Зноска про мито (міжнародна доставка) */
.customs-note{
	margin-top:14px;
	padding:12px 14px;
	border:1px solid rgba(17,17,17,.15);
	background:var(--yellow-soft);
	font-size:12.5px; line-height:1.55; color:var(--muted);
}

.payment_box{
	padding:0 18px 16px 48px;
	font-size:12.5px; color:var(--muted); line-height:1.55;
}
.payment_box p{ margin:0; }

.pay-brands{ display:flex; gap:5px; margin-top:10px; flex-wrap:wrap; }
.pay-brands span{
	font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
	border:1px solid var(--line); color:var(--muted); padding:3px 8px;
}

/* ══ WC Ukraine Shipping (wc-ukr-shipping) — оверрайди під стиль ROYSEN ══ */
/* Оверлей під час AJAX: у плагіна білий — робимо прозоро-кремовий, спінер у чорнилі */
.wcus-state-loading:before{ background:rgba(255,255,255,.7) !important; }
.wcus-state-loading:after{
	border-color:rgba(17,17,17,.25) !important;
	border-left-color:var(--ink) !important;
}
.wc-ukr-shipping-np-fields{ margin-top:18px; }
.wcus-checkout-fields{
	display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
}
.wcus-checkout-field-hidden{ display:none !important; }
.wcus-checkout-fields .form-row{ margin:0; }
.wcus-checkout-fields label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--muted); }
.wcus-checkout-fields input[type="text"]{
	width:100%; height:48px; padding:0 14px !important;
	border:1px solid var(--line-input) !important; background:transparent !important;
	border-radius:0 !important;
}
.wcus-checkout-fields input[type="text"]:focus{ outline:none; border-color:var(--ink) !important; }

.zen-ui-select{ position:relative; display:block; width:100%; line-height:1.4; }
.zen-ui-select__value{
	position:relative; display:block;
	padding:13px 38px 13px 14px !important;
	background:transparent !important;
	border:1px solid var(--line-input) !important;
	border-radius:0 !important;
	color:var(--ink) !important;
	cursor:pointer; user-select:none;
	transition:border-color .2s, background .2s;
}
.zen-ui-select__value:hover{ background:#FFFDF5 !important; border-color:var(--ink) !important; }
.zen-ui-select__value > svg{
	position:absolute; right:14px; top:50%; transform:translateY(-50%);
	width:10px; height:10px; fill:var(--ink);
}
.zen-ui-select__value.disabled{ background:transparent !important; color:var(--faint) !important; cursor:default; }
.zen-ui-select__value.disabled > svg{ fill:var(--faint); }
.zen-ui-select__value-text{ display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.zen-ui-select__value-text.zen-placeholder{ color:var(--faint); }

.zen-ui-select__dropdown-container{ position:absolute; z-index:1096; width:100%; left:0; top:100%; }
.zen-ui-select__dropdown{
	display:none; width:100%;
	background:var(--bg);
	border:1px solid var(--ink);
	box-shadow:0 10px 28px rgba(17,17,17,.10);
}
.zen-ui-select__dropdown.active{ display:block; }
.zen-ui-select__search{ display:block; padding:10px; border:none; border-bottom:1px solid var(--line); }
.zen-ui-select__search-input{
	width:100%; height:36px; padding:0 10px !important;
	background:transparent; border:1px solid var(--line) !important; border-radius:0 !important;
	font-size:13px;
}
.zen-ui-select__search-input:focus{ outline:none; border-color:var(--ink) !important; }
.zen-ui-select__options{ display:block; max-height:260px; padding:6px 0; border:none; overflow:auto; }
.zen-ui-select__option{
	display:block; padding:10px 14px; font-size:13.5px; color:var(--ink);
	cursor:pointer; transition:background .15s;
}
.zen-ui-select__option--current{ background:var(--yellow-soft); }
.zen-ui-select__option--loading, .zen-ui-select__option--more, .zen-ui-select__option--disabled{ color:var(--faint); cursor:default; }
.zen-ui-select__option:not(.zen-ui-select__option--disabled):not(.zen-ui-select__option--current):hover{ background:var(--beige-50); }

.wcus-state-loading:after{ border-color:var(--beige) !important; border-left-color:var(--ink) !important; }

/* ── Підсумок замовлення (checkout) ── */
.summary-items{ display:flex; flex-direction:column; }
.summary-item{
	display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
}
.summary-item:first-child{ padding-top:4px; }
.summary-thumb{
	width:56px; height:70px; flex:none; background:var(--beige); position:relative;
	display:flex; align-items:center; justify-content:center;
}
.summary-thumb img{ width:100%; height:100%; object-fit:cover; }
/* Лічильник — ВСЕРЕДИНІ мініатюри: за її межами він наїжджав на назву
   товару, а при липкій кнопці ще й «протикав» її наскрізь. */
.summary-thumb .s-qty{
	position:absolute; top:4px; right:4px;
	background:var(--ink); color:var(--cream);
	font-size:9.5px; font-weight:600;
	min-width:17px; height:17px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	z-index:1;
}
.summary-item .s-meta{ flex:1; min-width:0; }
.summary-item .s-name{ display:block; font-size:12.5px; font-weight:600; }
.summary-item .s-attrs{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; }
.summary-item .s-attrs dl.variation{ display:flex; flex-wrap:wrap; gap:2px 6px; margin:0; }
.summary-item .s-attrs dl.variation dt{ font-weight:400; }
.summary-item .s-attrs dl.variation dd{ margin:0; }
.summary-item .s-attrs dl.variation dd p{ display:inline; margin:0; }
.summary-item .s-price{ font-size:13px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }

.order-summary .co-section-head{ margin-bottom:6px; }

.legal-note{ margin-top:16px; font-size:11.5px; line-height:1.6; color:var(--muted); text-align:center; }
.legal-note a{ color:var(--ink); text-underline-offset:2px; }

/* ─── Планшети ─── */
@media (max-width: 1100px){
	.cart-layout{ grid-template-columns: minmax(0,1fr) 350px; }
	.checkout-layout{ grid-template-columns: minmax(0,1fr) 380px; }
	.cart-head, .cart_item{ grid-template-columns: minmax(0,1fr) 110px 110px 90px; }
}

@media (max-width: 900px){
	.cart-layout, .checkout-layout{ grid-template-columns: 1fr; }
	/* в одну колонку gap працює як вертикальний відступ між формою і підсумком —
	   clamp(28..72px) тут зайвий, підсумок і так відбитий рамкою */
	.checkout-layout{ gap:16px; }
	.cart_totals, .order-summary{ position:static; }

	.cart-head{ display:none; }

	/* Рядок кошика на мобільному: фото ліворуч на всю висоту, а назва,
	   ціна й кількість — стовпчиком праворуч від нього. Було інакше:
	   ціна й кількість лежали ПІД фото з відступом зліва, тож рядок займав
	   219px при тому, що праворуч від фото лишалась порожнеча.
	   `display:contents` розкриває .product-cell, щоб фото і текстовий
	   блок стали прямими комірками цієї ж сітки. */
	.cart_item{
		display:grid;
		grid-template-columns: 84px minmax(0,1fr);
		column-gap:14px; row-gap:0;
		position:relative; padding:22px 0;
		align-items:start;
	}
	/* display:contents двічі: і на .product-cell, і на .product-meta —
	   щоб фото, назва, розмір і кошик видалення стали прямими комірками
	   цієї сітки і їх можна було розкласти по рядках незалежно. */
	.product-cell, .product-meta{ display:contents; }
	.product-thumb{ grid-column:1; grid-row:1 / span 4; width:84px; height:106px; }
	.product-name{ grid-column:2; grid-row:1; }
	.product-attrs{ grid-column:2; grid-row:2; }
	.badge-preorder{ grid-column:2; grid-row:2; justify-self:end; }

	/* Кошик видалення — у рядок ціни, праворуч: там і так порожньо. */
	.item-actions{
		grid-column:2; grid-row:3;
		justify-self:end; align-self:center;
		margin:8px 0 0; padding:0;
	}

	.price-cell{
		grid-column:2; grid-row:3; justify-self:start;
		display:flex; gap:8px; align-items:baseline;
		margin:8px 0 0; font-size:13px;
	}
	.price-cell del{ display:inline; margin:0; font-size:12px; }
	.qty-cell{
		grid-column:2; grid-row:4;
		justify-content:flex-start;
		margin:8px 0 0;
	}
	.qty{ height:36px; }
	.subtotal-cell{
		position:absolute; right:0; bottom:28px;
		font-size:14.5px;
	}
	/* Кнопка оформлення НЕ липка: липка перекривала вміст підсумку і виглядала
	   як чужий елемент поверх сторінки. Просто йде в потоці, останньою. */
	.summary-sticky-cta{
		position:static; margin-top:14px; padding:0; z-index:auto;
		background:none; border-top:0; box-shadow:none;
	}
}

/* ─── Телефони ─── */
@media (max-width: 640px){
	.shop-breadcrumbs{ margin-bottom:14px; }
	.shop-page{ padding-top:22px; }
	.shop-title{ margin-bottom:24px; }

	.form-grid{ grid-template-columns:1fr; gap:0 14px; }

	.cart_totals, .order-summary{ padding:18px 16px; }
	.totals-due .t-value{ font-size:20px; }
	.btn{ height:52px; font-size:12px; }

	.shipping-methods label, .wc_payment_methods label{ padding:14px 15px 14px 46px; }
	.method-cost{ position:static; display:block; margin-top:4px; }
	.method-desc{ font-size:12px; }
	/* left/top під мобільний падінг підпису (14px) + півряд­ка назви (~10px).
	   transform:translateY(-50%) успадковується з базового правила. */
	.shipping-methods input[type="radio"], .wc_payment_methods input[type="radio"]{ left:15px; top:22.5px; }
	#payment ul.payment_methods li input[type="radio"]{ left:15px; top:26px; }
	.payment_box{ padding:0 15px 14px 46px; }
	.wcus-checkout-fields{ grid-template-columns:1fr; gap:14px; }

	.co-section{ padding:18px 0 18px; }
	.co-section-head{ margin-bottom:14px; }
	/* поле форми: власний вертикальний падінг зайвий, рядки й так не злипаються */
	.form-grid p.form-row, .form-row{ padding-top:0; padding-bottom:0; }
	.co-section-title{ font-size:14px; }

	.cart_item{ grid-template-columns: 76px minmax(0,1fr); }
	.product-thumb{ width:76px; height:96px; }
	.subtotal-cell{ bottom:26px; }
	.cart-continue{ margin-top:20px; }

	.legal-note{ font-size:11px; }
	.pay-hints span{ font-size:9px; padding:3px 6px; }
}

@media (prefers-reduced-motion: reduce){
	.freeship-fill, .coupon-toggle .plus{ transition:none !important; }
}

/* ══ Оверрайди дефолтних стилів WooCommerce (специфічність) ══ */

/* Іконка видалення: woo фарбує a.remove у червоний !important */
.woocommerce-cart .item-actions a.remove{
	color:var(--faint) !important;
	background:none !important;
	width:auto; height:auto; line-height:1; font-size:0; border-radius:0;
}
.woocommerce-cart .item-actions a.remove:hover{ color:var(--ink) !important; }

/* Блок оплати: приберемо сірі фони й стрілки woocommerce.css */
#payment.woocommerce-checkout-payment{ background:transparent; border-radius:0; }
#payment ul.payment_methods{
	list-style:none; display:flex; flex-direction:column; gap:10px;
	padding:0 !important; margin:0; border:none !important;
}
#payment ul.payment_methods li{
	position:relative; margin:0; padding:0;
	border:1px solid var(--line);
	background:transparent;
	transition:border-color .2s, background .2s;
	text-align:left; line-height:1.5;
}
#payment ul.payment_methods li:hover{ border-color:var(--ink); }
#payment ul.payment_methods li:has(input:checked){ border-color:var(--ink); background:#FFFDF5; }
#payment ul.payment_methods li input[type="radio"]{
	appearance:none; -webkit-appearance:none;
	position:absolute; left:17px; margin:0;
	width:18px; height:18px;
	border:1px solid var(--ink); border-radius:50%;
	background:transparent; cursor:pointer;
	/*
	 * Кружечок вирівнюємо по ПЕРШОМУ РЯДКУ назви способу оплати.
	 * top = padding-top підпису (15px) + половина рядка (26px / 2) = 28px,
	 * далі translateY(-50%) ставить центр кружечка рівно на центр рядка.
	 *
	 * Було `top:18px` — і воно давало криво одразу з двох причин:
	 * по-перше, з правила .wc_payment_methods сюди прилітав
	 * `transform:translateY(-50%)`, який зсував кружечок ще на 9px угору;
	 * по-друге, 18px і без того не збігалося з рядком. Заміряно: центр
	 * кружечка був на 19px, центр тексту — на 29px.
	 *
	 * Центрувати по всьому блоку (top:50%) не можна: у способів з описом
	 * («Банківський переказ») блок утричі вищий, і кружечок з'їжджав би
	 * до опису замість назви.
	 */
	top:28px; transform:translateY(-50%);
}
#payment ul.payment_methods li input[type="radio"]:checked{
	background:radial-gradient(circle, var(--ink) 0 4px, transparent 4.6px);
}
#payment ul.payment_methods li label{
	display:block !important; cursor:pointer; margin:0;
	padding:15px 18px 15px 48px !important;
	font-size:13px; font-weight:600; letter-spacing:.04em;
}
#payment ul.payment_methods li img{ display:inline-block; vertical-align:middle; margin-left:8px; }
#payment div.payment_box,
.woocommerce-checkout #payment div.payment_box{
	position:static;
	background:transparent !important;
	padding:0 18px 14px 48px !important;
	margin:0 !important; /* woo дає 1em зверху/знизу — текст відлітав від назви */
	font-size:12.5px; color:var(--muted); line-height:1.55;
	border-radius:0;
}
#payment div.payment_box::before{ display:none !important; }
#payment .place-order{ padding:0 !important; margin:0; }
#payment .woocommerce-privacy-policy-text p{
	margin:16px 0 0; font-size:11.5px; line-height:1.6; color:var(--faint);
}
#payment .woocommerce-privacy-policy-text a{ color:var(--ink); }
#payment .woocommerce-terms-and-conditions-wrapper{ margin-top:14px; font-size:12px; }

/* Методи доставки: страховка від чужих стилів */
ul#shipping_method.shipping-methods{ padding:0 !important; margin:0 !important; }
ul#shipping_method.shipping-methods li{ padding:0 !important; }
ul#shipping_method.shipping-methods li label{
	display:block !important;
	padding:15px 120px 15px 48px !important;
	margin:0 !important;
}

/* ══ Поля Нової Пошти: реальна пост-mount розмітка Vue (#wcus-billing-fields) ══ */
#wcus-billing-fields{ margin-top:18px; }
#wcus-billing-fields .wcus-checkout-fields{ display:block; }
#wcus-billing-fields h3{
	font-size:11px; letter-spacing:.1em; text-transform:uppercase;
	color:var(--muted); font-weight:500;
	margin:10px 0 14px; /* в лінію з лейблом лівої колонки */
}
#wcus-billing-fields p.form-row{ margin:0 0 14px; padding:0; }
#wcus-billing-fields .woocommerce-input-wrapper{ display:block; }
@media (min-width: 900px){
	#wcus-billing-fields .wcus-checkout-fields > div > div{
		display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
	}
	#wcus-billing-fields .wcus-checkout-fields > div > div > p.form-row{ margin:0; }
	#wcus-billing-fields .wcus-checkout-fields > div > p.form-row{ max-width:calc(50% - 10px); }
}
/* курʼєрська адреса (текстовий інпут плагіна) */
#wcus-billing-fields input.input-text[type="text"]{
	width:100%; height:48px; padding:0 14px !important;
	border:1px solid var(--line-input) !important; background:transparent !important;
	border-radius:0 !important;
}
#wcus-billing-fields input.input-text[type="text"]:focus{ outline:none; border-color:var(--ink) !important; }
/* невалідні поля НП не підсвічуємо червоним до сабміту */
#wcus-billing-fields .woocommerce-invalid .zen-ui-select__value{ border-color:var(--line-input) !important; }

/* ── Ряд «Доставка + Коментар» на десктопі ── */
@media (min-width: 1101px){
	.co-duo{ display:grid; grid-template-columns: 1.35fr 1fr; gap:0 clamp(24px, 3vw, 56px); align-items:start; }
	.co-duo .co-section{ min-width:0; }
}

/* ── Селект країни (SelectWoo/select2 від WooCommerce) ── */
.woocommerce-checkout .select2-container--default .select2-selection--single{
	height:48px; border:1px solid var(--line-input); border-radius:0; background:transparent;
	transition:border-color .2s;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height:46px; padding:0 38px 0 14px; color:var(--ink); font-size:14px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
	height:46px; width:38px;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single:focus{
	border-color:var(--ink); outline:none;
}
.select2-dropdown{
	border:1px solid var(--ink) !important; border-radius:0 !important;
	background:var(--bg) !important;
	box-shadow:0 10px 28px rgba(17,17,17,.10);
	font-family:var(--font-shop); font-size:13.5px;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
	border:1px solid var(--line) !important; border-radius:0 !important; background:transparent;
	height:36px; padding:0 10px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
	background:var(--beige-50) !important; color:var(--ink) !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
	background:var(--yellow-soft) !important; color:var(--ink) !important;
}

/* Вирівнювання колонок duo: обидві секції з однаковим верхом */
.co-duo .co-section,
.co-duo .co-section:first-child{
	border-top:1px solid var(--line-strong);
	padding-top:30px;
}

/* ── Секція «Доставка»: методи зліва, адреса НП справа ── */
.ship-duo{ display:grid; grid-template-columns:1fr; gap:0 clamp(24px, 3vw, 48px); align-items:start; }
.form-grid--country{ margin-bottom:18px; }
.ship-col--np #wcus-billing-fields{ margin-top:0; }
/* Заголовок правої колонки має лягати в ТУ САМУ сітку, що й підпис лівої,
   інакше поля колонок стартують на різній висоті. Заміряно: підписи обидва
   на 317.5px, але в лівої рядок 22px і зазор до поля 6px, а в правої —
   16.5px і 14px, через що праве поле починалось на ~18px нижче. */
#wcus-billing-fields h3,
.ship-col--np .wcus-checkout-fields > h3{
	line-height:22px;
	/* !important — бо WC Ukraine Shipping друкує свої правила інлайном
	   у wp_head і за порядком джерел перебиває файл теми (без цього
	   лишалось 14px і праве поле стояло нижче за ліве). */
	margin:10px 0 0 !important;
}
@media (min-width: 1101px){
	.ship-duo{ grid-template-columns:1.1fr 1fr; }
	/* у правій колонці поля НП — в одну колонку, бо простір вужчий */
	#wcus-billing-fields .wcus-checkout-fields > div > div{ display:block; }
	#wcus-billing-fields .wcus-checkout-fields > div > div > p.form-row{ margin:0 0 14px; }
	#wcus-billing-fields .wcus-checkout-fields > div > p.form-row{ max-width:none; }
}
@media (max-width: 1100px){
	.ship-col--np{ margin-top:18px; }
}

/* Нейтралізуємо зелений бордер woo-валідації (лишаємо лише червоний для помилок) */
.woocommerce-checkout .form-row.woocommerce-validated .input-text,
.woocommerce-checkout .form-row.woocommerce-validated select,
.woocommerce-checkout .form-row.woocommerce-validated .select2-selection--single{
	border-color:var(--line-input) !important;
}
/* селект країни: на всю ширину своєї колонки */
.form-grid--country{ grid-template-columns:1fr; }
.form-grid--country .select2-container{ width:100% !important; }

/* ══ Перебиваємо інлайн-стилі плагіна WC Ukraine Shipping на звичайних полях ══
   Плагін друкує в wp_head свої правила (radius 4px, padding 7px, білий фон) —
   повертаємо єдиний стиль дизайну всім полям чекаута. */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea{
	height:48px !important;
	padding:0 14px !important;
	border:1px solid var(--line-input) !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	color:var(--ink) !important;
	font-size:14px !important;
	width:100%;
	appearance:none; -webkit-appearance:none;
	transition:border-color .2s;
}
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row textarea.input-text{
	height:auto !important; min-height:96px; padding:12px 14px !important; resize:vertical;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus{
	outline:none !important; border-color:var(--ink) !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select{
	border-color:#b3261e !important;
}
.woocommerce-checkout .form-row.woocommerce-validated .input-text,
.woocommerce-checkout .form-row.woocommerce-validated select{
	border-color:var(--line-input) !important;
}

/* ══ AJAX-оверлей (blockUI) — прозорий кремовий зі спінером замість білого блоку ══ */
.woocommerce-cart .blockUI.blockOverlay,
.woocommerce-checkout .blockUI.blockOverlay{
	background:rgba(255,255,255, .55) !important; /* --cream із прозорістю */
	opacity:1 !important;
}
.woocommerce-cart .blockUI.blockOverlay::before,
.woocommerce-checkout .blockUI.blockOverlay::before{
	content:"";
	position:absolute; top:50%; left:50%;
	width:26px; height:26px; margin:-13px 0 0 -13px;
	border:2px solid rgba(17,17,17,.15);
	border-top-color:var(--ink);
	border-radius:50%;
	animation:roysen-spin .7s linear infinite;
}
@keyframes roysen-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
	.blockUI.blockOverlay::before{ animation-duration:1.4s; }
}

/* ══ Кошик і оформлення: заголовки трохи менші, ніж у каталозі ══
   (специфічність 0,2,0 — перебиває .shop-title з responsive.css) */
.woocommerce-cart .shop-title,
.woocommerce-checkout .shop-title{
	font-size:clamp(18px, 2.52vw, 28px);
	margin-bottom:clamp(22px, 3vw, 36px);
}
.woocommerce-cart .co-section-title,
.woocommerce-checkout .co-section-title{ font-size:14px; letter-spacing:.08em; }
.woocommerce-cart .order-summary .co-section-title,
.woocommerce-checkout .order-summary .co-section-title{ font-size:13px; }

@media (max-width: 767px){
	.woocommerce-cart .shop-title,
	.woocommerce-checkout .shop-title{ font-size:clamp(18px, 4.9vw, 21px); margin-bottom:20px; }
	.woocommerce-cart .co-section-title,
	.woocommerce-checkout .co-section-title{ font-size:13px; }
	.woocommerce-cart .order-summary .co-section-title,
	.woocommerce-checkout .order-summary .co-section-title{ font-size:12px; }
	/* трохи повітря навколо рядків підсумку */
	.summary-item{ gap:16px; padding:14px 0; }
	.order-summary .co-section-head{ margin-bottom:10px; }
}