/*
 * Always-on feature styles, one stylesheet instead of four render-blocking ones (loaded on every page except the focused checkout,
 * see inc/features/megamenu.php): mega menu, newsletter band, the free-shipping meter and add-on row (cart page and
 * added-to-cart sheet), and the mobile added-to-cart sheet. Page-only styles stay in their own files (cart.css, ...).
 */

/* Blocksy's own shipping bar in the mini cart counts against its theme setting (69), not against what checkout charges (BOX NOW:
   free from 100 in the Greek zones). The redesign's meter is the one source of truth, so this second promise is not shown. */
html body.yr .ct-shipping-progress-mini-cart { display: none; }

/* Home page trust strip without its free-shipping card (zones where checkout charges shipping): three equal cards. */
@media (min-width: 1000px) {
	.yr-trust--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ========== mega menu ========== */
/* ---------- desktop panel ---------- */
.yr-nav { position: relative; }
/* The panel belongs to the whole nav bar, not to its item. */
.yr-nav__item--mega { position: static; }
.yr-nav__item--mega .yr-nav__link { padding-right: 6px; }

.yr-sub.yr-mega {
	left: 0; right: 0; min-width: 0; padding: 0;
	border-width: 0 0 4px; border-style: solid; border-color: var(--yr-ink);
	box-shadow: 0 10px 0 rgba(15, 6, 21, .12);
}
.yr-mega__in {
	max-width: 1440px; margin: 0 auto; padding: 32px 32px 36px; box-sizing: border-box;
	display: flex; gap: 40px; align-items: flex-start;
}
.yr-mega__col { flex: 1 1 0; min-width: 0; }
.yr-mega__col ul { gap: 2px; }
p.yr-mega__h {
	margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; line-height: 1.3;
	color: var(--yr-orange-text); text-transform: uppercase;
}
.yr-mega .yr-mega__col li a { padding: 8px 0; }
/* Category rows: the arrow and sun highlight show on hover and keyboard focus. */
.yr-mega .yr-mega__col li a.yr-mega__cat { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; margin: 0 -10px; }
.yr-mega__cat span { opacity: 0; transition: opacity .12s ease; }
html body.yr .yr-mega a.yr-mega__cat:hover,
html body.yr .yr-mega a.yr-mega__cat:focus-visible { background: var(--yr-sun); font-weight: 800; color: var(--yr-ink); }
.yr-mega__cat:hover span,
.yr-mega__cat:focus-visible span { opacity: 1; }

/* Featured product */
html body.yr .yr-mega a.yr-mega__feat {
	flex: 1.35 1 0; min-width: 0; display: flex; gap: 18px; align-items: stretch; box-sizing: border-box;
	padding: 16px; background: var(--yr-sun); border: 3px solid var(--yr-ink); box-shadow: var(--yr-sh-md);
	color: var(--yr-ink); text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease;
}
html body.yr .yr-mega a.yr-mega__feat:hover { color: var(--yr-ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--yr-ink); }
.yr-mega__img { flex: none; width: 150px; background: #FFFFFF; border: 2px solid var(--yr-ink); display: block; }
.yr-mega__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.yr-mega__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yr-mega__tag {
	align-self: flex-start; padding: 3px 8px; background: var(--yr-ink); color: var(--yr-paper);
	font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.yr-mega__name { font-family: var(--yr-display); font-weight: 800; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.yr-mega__price { margin-top: auto; display: flex; align-items: baseline; gap: 10px; }
.yr-mega__price strong { font-size: 24px; font-weight: 800; }
.yr-mega__price del { font-size: 15px; }

@media (max-width: 1179px) {
	.yr-mega__in { padding-left: 32px; padding-right: 32px; gap: 28px; }
	html body.yr .yr-mega a.yr-mega__feat { flex-direction: column; }
	.yr-mega__img { width: 100%; height: 150px; }
}

/* Without JavaScript the panels open on hover and keyboard focus (with it, redesign.js opens them after a short delay). */
html:not(.yr-js) .yr-nav__item.has-sub:is(:hover, :focus-within) > .yr-sub { display: block; }
html:not(.yr-js) .yr-nav__item.has-sub:is(:hover, :focus-within) { box-shadow: inset 0 -4px 0 var(--yr-orange); }

/* The dropdowns are white: their focus ring is ink with the sun halo, not the sun ring made for the dark bar. */
body.yr .yr-nav .yr-sub :focus-visible { outline-color: var(--yr-ink); box-shadow: 0 0 0 6px var(--yr-sun); }

/* ---------- mobile menu ---------- */
/* Category lists in two columns, as in the design. */
.yr-mmenu details > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.yr-mmenu details > ul a { padding: 6px 8px; line-height: 1.25; }

/* ========== newsletter band ========== */
/* Stack the form as in the design: email, interests, then the button. */
html body.yr .yr-news .ct-newsletter-subscribe-form-elements { flex-direction: column; align-items: stretch; gap: 14px !important; }
html body.yr .yr-news .ct-newsletter-subscribe-form-elements input[type="email"] { flex: none !important; width: 100%; }
html body.yr .yr-news .ct-newsletter-subscribe-form-elements .wp-element-button { width: 100%; }

.yr-news__label { display: block; margin: 0 0 -6px; font-weight: 800; font-size: 14px; line-height: 1.3; }

.yr-news__interests { min-width: 0; margin: 0; padding: 0; border: 0; }
.yr-news__interests legend { margin: 0 0 8px; padding: 0; font-weight: 800; font-size: 14px; line-height: 1.3; }
.yr-news__opt { font-weight: 600; }
.yr-news__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* The real checkbox stays in place (keyboard, screen readers, form data) and is only hidden; the text next to it is the chip. */
.yr-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
html body.yr .yr-chip input[type="checkbox"] {
	position: absolute !important; top: 0; left: 0; width: 1px !important; height: 1px !important; margin: 0 !important;
	opacity: 0 !important; pointer-events: none; appearance: none;
}
.yr-chip span {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; box-sizing: border-box;
	background: #FFFFFF; color: var(--yr-ink); border: 2px solid var(--yr-ink);
	font-weight: 800; font-size: 15px; line-height: 1.2; user-select: none;
	transition: background-color .12s ease, color .12s ease;
}
.yr-chip:hover span { background: var(--yr-sun); }
html body.yr .yr-chip input:checked + span { background: var(--yr-ink); color: var(--yr-paper); }
.yr-chip input:checked + span::before { content: "\2713"; }
html body.yr .yr-chip input:focus-visible + span { outline: 3px solid var(--yr-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yr-sun); }

/* Answer after sending. Blocksy hides it with display:none until it has text, but a live region has to exist beforehand, so it only collapses. */
html body.yr .yr-news .ct-newsletter-subscribe-form .ct-newsletter-subscribe-message { display: block; margin: 12px 0 0; }
html body.yr .yr-news .ct-newsletter-subscribe-form .ct-newsletter-subscribe-message:empty { height: 0; margin: 0; overflow: hidden; }
html body.yr .yr-news .ct-newsletter-subscribe-form.subscribe-success .ct-newsletter-subscribe-message,
html body.yr .yr-news .ct-newsletter-subscribe-form.subscribe-error .ct-newsletter-subscribe-message {
	padding: 14px 18px; background: #FFFFFF; border: 3px solid var(--yr-ink); box-shadow: var(--yr-sh-sm);
	color: var(--yr-ink); font-size: 15px; font-weight: 800;
}
html body.yr .yr-news .ct-newsletter-subscribe-form.subscribe-error .ct-newsletter-subscribe-message { background: #FFF5F4; border-color: #C4251C; color: #A31E17; box-shadow: none; }

/* ---------- free-shipping meter (also used by the mobile added-to-cart sheet) ---------- */
.yr-ship { background: #FFFFFF; border: 3px solid var(--yr-ink); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.yr-ship__msg { margin: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; }
.yr-ship__msg .yr-i { flex: none; margin-top: 1px; color: var(--yr-orange); }
.yr-ship__bar { position: relative; height: 16px; border: 2px solid var(--yr-ink); background: var(--yr-panel); }
.yr-ship__bar > span {
	position: absolute; top: 0; bottom: 0; left: 0; border-right: 2px solid var(--yr-ink); transition: width .3s ease;
	background: var(--yr-orange);
	background: repeating-linear-gradient(-45deg, var(--yr-orange) 0 10px, color-mix(in srgb, var(--yr-orange) 70%, var(--yr-sun)) 10px 20px);
}
.yr-ship.is-done .yr-ship__bar > span { border-right: 0; }

/* ---------- add-on row ---------- */
.yr-addon { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px; background: #FFFFFF; border: 2px solid var(--yr-ink); }
.yr-addon__img { display: block; flex: none; width: 72px; height: 72px; background: var(--yr-panel); }
.yr-addon__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.yr-addon__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html body.yr .yr-addon__title {
	font-weight: 600; font-size: 14px; line-height: 1.3; text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yr-addon__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 800; font-size: 15px; }
.yr-addon__price del { font-weight: 600; color: var(--yr-muted); }
.yr-addon__price ins { text-decoration: none; }
.yr-addon__pre { font-style: normal; font-weight: 800; font-size: 12px; color: var(--yr-purple); color: color-mix(in srgb, var(--yr-purple) 60%, var(--yr-ink)); }
html body.yr a.yr-addon__add {
	display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 44px; height: 44px; padding: 0;
	background: var(--yr-orange); color: var(--yr-ink) !important; border: 2px solid var(--yr-ink); text-decoration: none;
	transition: background-color .12s ease;
}
html body.yr a.yr-addon__add:hover { background: var(--yr-sun); }
html body.yr a.yr-addon__add--view { background: #FFFFFF; }
html body.yr a.yr-addon__add.loading { opacity: .5; pointer-events: none; }

/* The meter and the add-on row on phones */
@media (max-width: 689px) {
	.yr-ship { padding: 14px 16px; gap: 10px; }
	.yr-ship__msg { font-size: 15px; }
	.yr-ship__bar { height: 14px; }
	.yr-addon { gap: 12px; padding: 8px; }
	.yr-addon__img { width: 60px; height: 60px; }
}

/* ========== mobile added-to-cart sheet ========== */
html.yr-atc-lock { overflow: hidden; }

/* z-index: above the cookie banner (999999, full width at the bottom on phones), so the sheet's buttons are never under it.
   The banner stays where it is behind the dark backdrop and is reachable again as soon as the sheet closes. */
.yr-atc {
	position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: flex-end;
	background: rgba(15, 6, 21, .62);
	background: color-mix(in srgb, var(--yr-ink) 62%, transparent);
	opacity: 0; transition: opacity .2s ease;
}
.yr-atc.is-open { opacity: 1; }
.yr-atc[hidden] { display: none; }
@media (min-width: 690px) {
	.yr-atc { display: none !important; }
}

.yr-atc__sheet {
	box-sizing: border-box; width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
	padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
	display: flex; flex-direction: column; gap: 14px;
	background: var(--yr-paper); border-top: 4px solid var(--yr-ink);
	transform: translateY(100%); transition: transform .22s ease;
}
.yr-atc.is-open .yr-atc__sheet { transform: none; }
html body.yr .yr-atc__sheet:focus,
html body.yr .yr-atc__sheet:focus-visible { outline: 0; box-shadow: none; }

.yr-atc__grip { align-self: center; flex: none; width: 48px; height: 5px; background: var(--yr-ink); }
.yr-atc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body.yr .yr-atc__head h2 { margin: 0; font-family: var(--yr-display); font-weight: 800; font-size: 22px; line-height: 1.15; }
html body.yr .yr-atc__close {
	display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 0; padding: 0;
	background: transparent; color: var(--yr-ink); border: 0; box-shadow: none; cursor: pointer;
}

.yr-atc__body { display: flex; flex-direction: column; gap: 14px; }
.yr-atc__body:empty { display: none; }

/* The product just added */
.yr-atc__item { display: flex; align-items: center; gap: 12px; padding: 10px; background: #FFFFFF; border: 3px solid var(--yr-ink); }
.yr-atc__img { flex: none; width: 72px; height: 72px; background: var(--yr-panel); border: 2px solid var(--yr-ink); box-sizing: border-box; }
.yr-atc__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.yr-atc__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yr-atc__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.yr-atc__qty { font-size: 13px; color: var(--yr-muted); }
.yr-atc__qty strong { color: var(--yr-ink); font-weight: 800; }
.yr-atc__total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.yr-atc__total strong { font-weight: 800; font-size: 16px; }

/* Meter without its card */
.yr-ship--sheet { padding: 0; gap: 8px; border: 0; background: transparent; }
.yr-ship--sheet .yr-ship__msg { align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; }
.yr-ship--sheet .yr-ship__bar { height: 12px; }

/* One more from the same series */
.yr-atc__more { display: flex; flex-direction: column; gap: 8px; }
.yr-atc__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yr-orange-text); }
.yr-atc__list { list-style: none; margin: 0; padding: 0; }
.yr-atc .yr-addon { gap: 12px; padding: 8px; }
.yr-atc .yr-addon__img { width: 56px; height: 56px; border: 2px solid var(--yr-ink); box-sizing: border-box; }

/* Next steps */
.yr-atc__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
html body.yr .yr-atc__actions > .yr-btn { font-family: var(--yr-display); font-size: 17px; }
.yr-atc__row { display: flex; gap: 12px; }
html body.yr .yr-atc__row > .yr-btn { flex: 1; min-width: 0; padding: 0 10px; font-size: 15px; text-align: center; }