/*
 * Phase 16: the PLATFORM's additions to the storefront design.
 *
 * The design is the reference store's own stylesheets, copied byte for byte (shopile/css/vendor_pack.css and
 * shopile/css/style.css) and loaded first. This sheet loads after them and does only five things:
 *
 *   1. THE ONE OWNER OVERRIDE: an interactive target never moves away from the pointer on hover, focus or press.
 *      Every reference rule that shifts a link or button by padding, margin or a translate on :hover/:focus is set
 *      back to its resting value here (the resting values are the reference's own), and nothing else about those
 *      rules changes - colour, shadow and underline feedback stay.
 *   2. Visible keyboard focus, drawn with an outline (an outline takes no layout space, so nothing moves).
 *   3. What the PLATFORM renders that the reference did not have: the skip link, the store-name fallback of an empty
 *      logo slot, the consent banner in the cookie notice's place, and the PLATFORM-only product features.
 *   4. The reference look for the PLATFORM-only inner pages, scoped to `.dx-inner` so it never touches reference markup.
 *   5. Reduced motion for visitors who ask for it.
 *
 * no-descending-specificity is off for this sheet: it is an OVERRIDE sheet, ordered by concern (the list above), and
 * each rule targets reference markup with exactly the specificity it has to beat - not an order of increasing weight.
 */

/* stylelint-disable no-descending-specificity */

/* ------------------------------------------------------------------ 1. no moving targets */

.footer-links > ul > li a,
.footer-links > ul > li a:hover,
.footer-links > ul > li a:focus {
	padding: 0;
	transition: color .3s linear, text-shadow .3s linear;
}

.vertical-menu-wrap li > .sub-menu a:hover,
.vertical-menu-wrap li > .sub-menu a:focus {
	padding: 10px 20px;
}

.main-navigation ul li ul.mega-menu-wrap > li ul li a:hover,
.vertical-menu ul li ul.mega-menu-wrap > li ul li a:hover,
.main-navigation ul li .sub-menu > li:hover > a,
.desc-listcategoreis a:hover,
body.rtl .desc-listcategoreis a:hover,
.user-linker-pane .pane-close:hover {
	transform: none;
}

.blog-post a.read-more-btn:hover,
body.rtl .blog-post a.read-more-btn:hover,
.blog-post-content-inner .read-more-btn:hover,
body.rtl .blog-post-content-inner .read-more-btn:hover {
	padding: 0;
}

.read-more:hover {
	padding: 15px;
}

.nav-container .slick-vertical .slick-slide:focus {
	margin: 0;
}

/* ------------------------------------------------------------------ 2. keyboard focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.exec-header .main-board a:focus-visible,
.exec-header .main-board button:focus-visible,
.footer-area a:focus-visible,
.footer-area button:focus-visible {
	outline-color: #fff;
}

#main-content:focus {
	outline: none;
}

/*
 * Phase 18: the design dims an unselected choice card (payment methods at checkout) to 40% black on white, about
 * 2.8:1 - below WCAG 1.4.3. It became visible once a store offers two payment methods (the Phase 16 store had one, so
 * the card row never rendered). The dimming stays; the TEXT is dimmed to 60% instead (#666 on white, about 5.7:1).
 */
.rb-cell .cell-face .txt {
	opacity: .6;
}

/* ------------------------------------------------------------------ 3. PLATFORM additions */

.skip-link {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100000;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: #000;
	color: #fff;
}

.skip-link:focus {
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip-path: none;
	color: #fff;
}

.exec-header .logo-slot .logo-text,
.footer-logo .logo-text {
	display: inline-block;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}

.fixed-cookies-notice.dx-consent {
	display: flex;
	color: #fff;
}

.fixed-cookies-notice .dx-consent-actions {
	display: flex;
	flex-shrink: 0;
	gap: .5rem;
}

.fixed-cookies-notice .dx-consent-actions form {
	margin: 0;
}

.footer-contact li {
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
}

.footer-contact li a {
	display: block;
}

/*
 * A desktop sub-menu opens on :hover only, so a keyboard user could never reach its links (they stay
 * visibility: hidden). It also opens while focus is inside its item - the very rule the design gives :hover, nothing
 * more - and Escape closes it again (shopile-after.js marks the item `dx-sub-closed` until focus leaves it).
 */
@media (width >= 1200px) {
	.exec-header .app-nav .menu li:focus-within > .submenu {
		visibility: visible;
		opacity: 1;
		z-index: 10;
	}

	.exec-header .app-nav .menu li.dx-sub-closed > .submenu {
		visibility: hidden;
		opacity: 0;
		z-index: -1;
	}
}

/*
 * The password field's show/hide button is a 22px square in the design, under the 24px minimum pointer target (WCAG
 * 2.5.8). It grows by one pixel on each side around the same centre; the icon is drawn in the same 22px content box
 * (background-origin/clip), so what shows does not change.
 */
.password-gizmo .ctrlbtn.eyes-btn {
	top: 10px;
	left: 9px;
	width: 24px;
	height: 24px;
	padding: 1px;
	background-origin: content-box;
	background-clip: content-box;
}

/*
 * A section heading the merchant made a PICTURE (the design's .img-h-tag) is wrapped in an h2 so the outline has its
 * level; the h2 takes the surrounding type metrics, so the picture sits exactly where it did.
 */
.dx-img-heading {
	margin: 0;
	font: inherit;
	line-height: inherit;
}

/*
 * Text contrast (WCAG 1.4.3, 4.5:1). Two of the design's text colours fall short, and each keeps its look with the
 * smallest change that passes: the WhatsApp button keeps its green and writes its label in black (white on #36dc54 is
 * 1.8:1, black is 11.5:1), and a struck-out old price is #767676 instead of #9b9b9b (2.8:1 -> 4.5:1).
 */
.btn.btn-theme.whatsapp,
.btn.btn-theme.whatsapp:hover,
.btn.btn-theme.whatsapp:focus {
	--btn-theme-text-color: #000;

	color: #000;
}

.list-product .price.old,
.prod-price.old {
	color: #767676;
}

/*
 * Phase 22: the product page's inactive information tabs («מידע נוסף», «מפרט», «ביקורות») - 18px bold is not large
 * text, and the design's #888 on white is 3.5:1. #707070 is 4.9:1 and reads as the same grey; the active and hovered
 * tab keep the theme colour.
 */
.description-review-topbar.nav a:not(.active, :hover) {
	color: #707070;
}

/*
 * The quantity counter's - and + are 20px wide, under the 24px minimum target (WCAG 2.5.8). They sit over the input's
 * own 24px side padding, so at 24px they still never cover the number; the glyphs move 2px inward.
 */
.qty-ui-counter .qtybutton {
	width: 24px;
}

/*
 * The coupon "apply" control is a real button (the cart's form submits without scripting). The design drew it as an
 * anchor; these are that anchor's computed values, so it looks exactly the same.
 */
.inline-coupon-rig button.btn-inln {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000;
	font: inherit;
	font-size: 16px;
	line-height: 36px;
	cursor: pointer;
}

/*
 * The home banner mosaic sets hairline rows (.row.gx-hair, -1.5px side margins) inside a `px-0` container, so on a
 * phone they stick out of the viewport by a pixel and a half and the whole page scrolls sideways - in the reference
 * too. Clipping that overflow keeps every pixel that shows where it was and removes the sideways scroll.
 */
.banner-3-area {
	overflow-x: clip;
}

/*
 * Phase 17: THE NEW-STORE DEMO PLACEHOLDER (Shop\View\DemoStorefront, the `placeholder` macro of _shopile.html.twig).
 * Deliberately plain and obviously temporary: a neutral gray box with its label centred - no picture, gradient,
 * artwork or brand. Each shape is the size of the design's own picture in that slot: `fill` covers a card's square
 * (the card's img-block keeps its own ratio), `tall`/`wide` are the banner mosaic's pictures (690x540, 1903x430),
 * `about` the portrait "about" picture (900x1100), `logo` a logo in the brand strip. The label is #444 on #e2e2e2
 * (7.6:1); a demo slide uses the design's own gray slide frame (.slider-ella.bg-img, #bebebe) with a #222 label (9.6:1).
 */
.dx-demo-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: #e2e2e2;
	color: #444;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

.dx-demo-ph.fill {
	position: absolute;
	inset: 0;
}

.dx-demo-ph.tall { aspect-ratio: 690 / 540; }

.dx-demo-ph.wide { aspect-ratio: 1903 / 430; }

.dx-demo-ph.about { aspect-ratio: 900 / 1100; }

.dx-demo-ph.logo {
	aspect-ratio: 2 / 1;
	font-size: 16px;
}

.dx-demo-slide .dx-demo-label {
	color: #222;
	font-size: 40px;
	font-weight: 500;
}

/*
 * The accessibility toolbar (Phase 12) on this design.
 *
 * TEXT SIZE. The toolbar steps the ROOT font size, which enlarges rem-sized text; this design sizes its type in px, so
 * that would move nothing. On the storefront each step zooms the page body by the same factor instead - text and the
 * boxes around it grow together and reflow, with nothing pushed sideways (checked in all three engines) - and the root
 * size stays at 100%, so the rem-sized toolbar is not enlarged twice.
 *
 * HIGH CONTRAST. The toolbar's mode paints text black and links dark blue, which is right on white and unreadable on
 * this design's black header bar and footer. On those two surfaces the text and links turn white (21:1), and the white
 * boxes inside the header - the phone menu panel, the account menu, the search box - keep black.
 */
html:root[data-a11y-text] {
	font-size: 100%;
}

:root[data-a11y-text="1"] body { zoom: 1.125; }
:root[data-a11y-text="2"] body { zoom: 1.25; }
:root[data-a11y-text="3"] body { zoom: 1.5; }
:root[data-a11y-text="4"] body { zoom: 1.75; }

:root[data-a11y-contrast="on"] .exec-header .main-board.dark :where(a, span, div, i, li, strong),
:root[data-a11y-contrast="on"] .footer-area :where(a, p, li, span, h2, h3, h4, div, i, strong),
:root[data-a11y-contrast="on"] .fixed-cookies-notice > div:not(.dx-consent-actions) :where(a, span, strong),
:root[data-a11y-contrast="on"] .fixed-cookies-notice > div:not(.dx-consent-actions) {
	/* Phase 22: the cookie notice's blue bar is the third dark surface (white on #305ca5 is 6.9:1) */
	color: #fff;
}

:root[data-a11y-contrast="on"] .exec-header .main-board.dark :is(.dropdown-menu, .search-gizmo) :where(a, span, div, i, li, strong) {
	color: #000;
}

@media (width < 1200px) {
	:root[data-a11y-contrast="on"] .exec-header .main-board.dark .app-nav :where(a, span, div, i, li, strong) {
		color: #000;
	}
}

/*
 * The accessibility toolbar (Phase 12, the PLATFORM's own, WCAG-tested implementation) keeps its behaviour and its
 * shared stylesheet; on the storefront only its TRIGGER takes the reference design's place and look - the blue square
 * on the left edge under the WhatsApp button (droxit-a11y's `.activator.square.legup`), with the reference's own figure
 * icon (droxit-a11y/images/ualogo.svg, embedded as data because an SVG file is never published as an asset). The
 * button keeps its text as its accessible name; only its rendering is replaced. `body.rtl` gives these rules the
 * specificity to follow the shared sheet, which loads last.
 */
body.rtl .a11y-toolbar {
	inset-block-end: 95px;
	inset-inline-start: auto;
	left: 0;
	z-index: 90000;
}

body.rtl .a11y-toolbar .a11y-toggle,
body.rtl .a11y-toolbar .a11y-toggle:hover {
	position: relative;
	left: -3px;
	width: 46px;
	height: 46px;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0;
	justify-content: center;
	overflow: hidden;
	border: 2px solid #fff;
	border-left: 0;
	border-radius: 0;
	background: #305ca5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M27.935,8.101H4.065c-1.191,0-2.159,0.968-2.159,2.161c0,1.192,0.968,2.16,2.159,2.16h6.775v17.421c0,1.192,0.967,2.158,2.159,2.158c1.193,0,2.16-0.966,2.16-2.158v-8.438h1.682v8.438c0,1.192,0.967,2.158,2.158,2.158c1.193,0,2.161-0.966,2.161-2.158V12.421h6.775c1.193,0,2.159-0.967,2.159-2.16C30.094,9.068,29.128,8.101,27.935,8.101z' fill='%23fff'/%3E%3Ccircle cx='16' cy='3.63' r='3.631' fill='%23fff'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
	box-shadow: none;
	color: transparent;
	font-size: 0;
}

/* ------------------------------------------------------------------ 4. inner-page vocabulary (.dx-inner only)

   The PLATFORM's account, returns, blog, contact, login and payment pages have no counterpart in the reference store,
   so they keep their own markup (panels, fields, notices, data tables) inside _page.html.twig's `.dx-inner`. Each rule
   below is scoped to that wrapper and borrows the reference's own values: the .shaddow-frame box, the .common-tbox
   field, .btn.btn-theme / .btn.btn-theme.v2, the reference alert colours and its table rules. */

.dx-inner .layout {
	display: grid;
	gap: 30px;
	grid-template-columns: minmax(0, 1fr);
}

@media (width >= 992px) {
	.dx-inner .layout.with-aside { grid-template-columns: 270px minmax(0, 1fr); }
}

.dx-inner .panel {
	padding: 30px;
	background-color: #fff;
	box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}

.dx-inner .panel + .panel { margin-top: 30px; }

.dx-inner .layout > .panel + .panel { margin-top: 0; }

.dx-inner .panel h2,
.dx-inner .panel h3 {
	margin-bottom: 20px;
	color: #000;
	font-size: 20px;
	font-weight: 600;
}

.dx-inner .field { margin-bottom: 20px; }

.dx-inner .field label,
.dx-inner .field > span:first-child {
	display: block;
	margin-bottom: 6px;
	color: #000;
	font-size: 14px;
}

.dx-inner .field-hint {
	margin: 4px 0 0;
	color: #666;
	font-size: 13px;
}

.dx-inner .field-row {
	display: grid;
	gap: 0 20px;
	grid-template-columns: minmax(0, 1fr);
}

@media (width >= 576px) {
	.dx-inner .field-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dx-inner input[type="text"],
.dx-inner input[type="email"],
.dx-inner input[type="tel"],
.dx-inner input[type="password"],
.dx-inner input[type="search"],
.dx-inner input[type="number"],
.dx-inner input[type="date"],
.dx-inner select,
.dx-inner textarea {
	width: 100%;
	height: 45px;
	padding: 0 15px;
	border: 1px solid #ebebeb;
	border-radius: 0;
	background-color: #fff;
	color: #666;
	font-size: 14px;
}

.dx-inner textarea {
	height: auto;
	min-height: 120px;
	padding: 10px 15px;
	resize: vertical;
}

.dx-inner input[aria-invalid="true"],
.dx-inner select[aria-invalid="true"],
.dx-inner textarea[aria-invalid="true"] { border-color: #d00; }

.dx-inner .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.dx-inner .checkbox input { margin-top: 5px; }

/* the look of .btn.btn-theme (reference buttons themselves are left alone); `ghost` / `btn-quiet` look like .v2 */
.dx-inner .btn:not(.btn-theme) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 48px;
	padding: 0 30px;
	border: 1px solid #000;
	border-radius: 0;
	background-color: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
}

.dx-inner .btn:not(.btn-theme):hover,
.dx-inner .btn:not(.btn-theme):focus {
	border-color: var(--theme-solid);
	background-color: var(--theme-solid);
	color: #fff;
}

.dx-inner .btn:not(.btn-theme)[disabled] {
	border-color: #a69c88;
	background-color: #a69c88;
}

.dx-inner .btn.ghost,
.dx-inner .btn.btn-quiet {
	border-color: #000;
	background-color: #fff;
	color: #000;
}

.dx-inner .btn.ghost:hover,
.dx-inner .btn.btn-quiet:hover {
	background-color: #000;
	color: #fff;
}

.dx-inner .btn.block { width: 100%; }

.dx-inner .btn.small {
	min-height: 44px;
	padding: 0 16px;
}

/* Bootstrap 4's .alert colours */
.dx-inner .notice {
	margin-bottom: 20px;
	padding: 12px 20px;
	border: 1px solid #b8daff;
	background-color: #cce5ff;
	color: #004085;
}

.dx-inner .notice.error,
.dx-inner .notice-error {
	border-color: #f5c6cb;
	background-color: #f8d7da;
	color: #721c24;
}

.dx-inner .notice.ok,
.dx-inner .notice.success {
	border-color: #c3e6cb;
	background-color: #d4edda;
	color: #155724;
}

.dx-inner .notice.warn {
	border-color: #ffeeba;
	background-color: #fff3cd;
	color: #856404;
}

.dx-inner .table-wrap { overflow-x: auto; }

.dx-inner table.data {
	width: 100%;
	border-collapse: collapse;
}

.dx-inner table.data th,
.dx-inner table.data td {
	padding: 12px 10px;
	border-bottom: 1px solid #ebebeb;
	text-align: right;
	vertical-align: top;
}

.dx-inner table.data thead th {
	background-color: #f3f3f3;
	color: #000;
	font-size: 14px;
	font-weight: 600;
}

.dx-inner table.data .num {
	text-align: left;
	white-space: nowrap;
}

.dx-inner .totals {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dx-inner .totals li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
}

.dx-inner .totals li.grand {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid #000;
	font-size: 18px;
	font-weight: 700;
}

.dx-inner .badge {
	padding: 4px 8px;
	border-radius: 0;
	background-color: #000;
	color: #fff;
	font-weight: 400;
}

.dx-inner .muted,
.dx-inner .line-variant { color: #666; }

.dx-inner .stack > * + * { margin-top: 20px; }

.dx-inner .inline-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.dx-inner .lede { font-size: 18px; }

/*
 * Phase 17: the list grids of the inner pages - the wishlist's products and the blog's posts - which named classes no
 * sheet defined (.product-grid, .product-card, .card). The design's own listing proportions: two columns on a phone,
 * three from 768px, a hairline border like the reference's framed thumbnails, and the card title in the design's type.
 */
.dx-inner .product-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

@media (width >= 768px) {
	.dx-inner .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dx-inner .product-card,
.dx-inner .product-grid .card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 15px;
	border: 1px solid #ebebeb;
	background-color: #fff;
}

.dx-inner .product-card img,
.dx-inner .product-grid .card img {
	display: block;
	width: 100%;
	height: auto;
}

.dx-inner .product-card a,
.dx-inner .product-grid .card-title a { color: #000; }

.dx-inner .product-card .title,
.dx-inner .product-grid .card-title {
	display: block;
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 500;
}

.dx-inner .product-card form { margin-top: auto; }

/* Phase 17: the product reviews block (_reviews.html.twig) in this vocabulary - its stars, list and rating choice */
.dx-inner .stars {
	color: #b8860b;
	letter-spacing: 2px;
}

.dx-inner .review-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.dx-inner .review {
	padding: 15px 0;
	border-bottom: 1px solid #ebebeb;
}

.dx-inner .review p { margin-bottom: 6px; }

.dx-inner .rating-set {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	border: 0;
	padding: 0;
}

.dx-inner .rating-set legend {
	width: 100%;
	margin-bottom: 6px;
	color: #000;
	font-size: 14px;
}

.dx-inner .rating-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
}

.dx-inner .rich { line-height: 1.75; }

.dx-inner .rich a { text-decoration: underline; }

.dx-inner .rich table {
	width: 100%;
	margin: 12px 0;
	border-collapse: collapse;
}

.dx-inner .rich th,
.dx-inner .rich td {
	padding: 8px;
	border: 1px solid #ebebeb;
}

.dx-inner .ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

.dx-inner .visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ 5. reduced motion */

/*
 * Phase 18 (section 7.2): the return request's photographs - a row of fixed-size thumbnails, each with its own
 * remove button under it. Fixed boxes, so a preview that is still loading never moves the controls around it.
 * The native file control is ~306px wide in Chromium, which scrolled a 320px phone sideways: it may shrink.
 */
.dx-inner .dx-evidence input[type="file"] {
	max-width: 100%;
}

.dx-inner .dx-evidence-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.dx-inner .dx-evidence-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 96px;
}

.dx-inner .dx-evidence-item img {
	width: 96px;
	height: 96px;
	border: 1px solid #e2e2e2;
	object-fit: cover;
	background: #f6f6f6;
}

.dx-inner .dx-evidence-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dx-inner .dx-evidence-thumbs img {
	width: 120px;
	height: 120px;
	border: 1px solid #e2e2e2;
	object-fit: cover;
}

.dx-inner .dx-required {
	font-size: 14px;
	font-weight: 600;
}

/* Phase 19 (section 12.2): the partner area - figure cards, the link builder's output, the campaign row actions */
.dx-inner .partner-cards {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	margin: 0 0 16px;
}

.dx-inner .partner-cards > div {
	padding: 12px 14px;
	border: 1px solid #e2e2e2;
}

.dx-inner .partner-cards dt {
	margin-bottom: 4px;
	color: #555;
	font-size: 14px;
	font-weight: 400;
}

.dx-inner .partner-cards dd {
	margin: 0;
	color: #000;
	font-size: 20px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dx-inner .partner-refresh,
.dx-inner .partner-inline-form,
.dx-inner .partner-link-copy {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
}

.dx-inner .partner-inline-form { align-items: flex-end; }

.dx-inner .partner-inline-form .field,
.dx-inner .partner-link-copy input {
	flex: 1 1 220px;
	min-width: 0;
	margin-bottom: 0;
}

.dx-inner .partner-link-result { margin-top: 20px; }

.dx-inner .partner-actions summary { cursor: pointer; }

.dx-inner .partner-actions form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* Phase 19 (section 7): the related posts under a blog post */
.dx-inner .blog-related { margin-top: 40px; }

/*
 * Phase 19 (section 4): the product video's poster and its floating play button. The frame keeps its 16:9 box whether
 * the picture has loaded or not, and nothing changes size or position on hover or focus - only the play disc darkens.
 */
.after-media-ctr .dx-video-poster {
	display: inline-block;
	width: 100%;
	max-width: 320px;
	color: inherit;
	text-decoration: none;
}

.after-media-ctr .dx-video-frame {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #212529;
	overflow: hidden;
}

.after-media-ctr .dx-video-frame img,
.after-media-ctr .dx-video-blank {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.after-media-ctr .dx-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: rgb(0 0 0 / 60%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease;
}

.after-media-ctr .dx-video-poster:hover .dx-video-play,
.after-media-ctr .dx-video-poster:focus-visible .dx-video-play { background: rgb(0 0 0 / 85%); }

.after-media-ctr .dx-video-poster:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

.after-media-ctr .dx-video-caption {
	display: block;
	margin-top: 6px;
}

/*
 * Phase 19 (section 9): a variant value the current choice rules out, or one sold out on its own. Never removed and
 * never resized - only dimmed and struck through (a text value) or crossed (a colour swatch), so nothing moves and the
 * state is not carried by colour alone.
 */
.dx-capsule-input .dx-cap[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
	text-decoration: line-through;
}

.dx-capsule-input .dx-cap.color[aria-disabled="true"] {
	background-image: linear-gradient(to top left, transparent calc(50% - 1px), #212529 50%, transparent calc(50% + 1px));
}

.nice-select .option.disabled[aria-disabled="true"] { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* Phase 20 (section V): the product video as the FIRST gallery slide (the video reference's layout) - a square frame
   over a first-party poster with a centred Play button; the privacy-enhanced player replaces the button on Play. */
.dx-video-slide .dx-video-square {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f2f2f2;
}

.dx-video-slide .dx-video-cover,
.dx-video-slide .dx-video-square picture,
.dx-video-slide .dx-video-square picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dx-video-slide .dx-video-blank {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #e9ecef, #dee2e6);
}

.dx-video-slide .dx-video-inline {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dx-video-slide .dx-video-start {
	display: none;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

html.js .dx-video-slide .dx-video-start {
	display: inline-flex;
}

.dx-video-slide .dx-video-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgb(0 0 0 / 65%);
	transition: background-color 0.15s ease-in-out;
}

.dx-video-slide .dx-video-start:hover .dx-video-play,
.dx-video-slide .dx-video-start:focus-visible .dx-video-play {
	background: rgb(0 0 0 / 85%);
}

.dx-video-slide .dx-video-start:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 50%;
}

.dx-video-slide .product-video-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* Phase 23 (section 13) + Phase 24 (section 11): the provider's hosted payment page inside the store (in_iframe), in the
   reference's presentation (reference store style.css 9599-9604 `.embeded-iframe`): the container's full width, at least 800px
   tall on every screen, no border, scrolling inside the frame. One rule for every framed provider - the reference had no
   per-provider or per-breakpoint difference. */
.dx-payment-frame {
	position: relative;
	width: 100%;
}

.dx-payment-frame-iframe {
	display: block;
	width: 100%;
	min-height: 800px;
	border: 0;
	overflow: auto;
}

.dx-payment-frame-loading:not(.sr-only) {
	margin-block-end: 0.5rem;
	font-size: 0.95rem;
}

.dx-payment-frame-loading.is-loaded {
	color: #2e7d32;
}

.dx-payment-frame-fallback {
	margin-block-start: 0.5rem;
}

/* Phase 24 (section 10): the product-series strip of the reference (z.wamp style.css 10472-10491) */
.dx-series .serial-alt-prod {
	width: 100px;
	text-align: center;
	font-size: 14px;
	color: inherit;
}

.dx-series .bordered {
	padding: 4px;
	border: 1px solid #ebebeb;
}

.dx-series .swatch {
	display: block;
	width: 90px;
	height: 90px;
}

.dx-series .ttl {
	margin: 5px 0 0;
	font-size: inherit;
	font-weight: 400;
}

.dx-series .serial-alt-prod:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* Phase 24 (section 9): a city the chosen delivery does not reach - listed, but disabled and saying why */
.dx-hinter .dx-city-off {
	display: block;
	padding: 2px 8px;
	background-color: #fff;
	color: #6c757d;
	cursor: not-allowed;
}

.dx-hinter .dx-city-off small {
	font-size: 0.8em;
}

/* Phase 24: the reference's cart actions ("המשך קניה" / "עדכון הסל") sit side by side with 63px paddings and no phone
   rule, so a FILLED cart pushed the page sideways at 320px (WCAG 1.4.10 reflow). On phones they wrap and keep their look. */
@media (width < 576px) {
	.cart-shiping-update-wrapper {
		flex-wrap: wrap;
		gap: 12px;
	}

	.cart-shiping-update-wrapper .cart-clear > button,
	.cart-shiping-update-wrapper .cart-shiping-update > a {
		margin-right: 0;
		padding: 16px 24px;
	}
}

/*
 * Phase 27 (CLS): the home page's hero slider holds its place while it is being built.
 *
 * The slider is an Owl carousel, and Owl's own stylesheet keeps every carousel `display: none` until its script has
 * built it (`.owl-carousel.owl-loaded` shows it). On a first visit the page is painted before the scripts have run, so
 * everything below the slider was drawn at the top of the page and then pushed down by the slider's whole height when
 * it appeared - the largest layout shift of the storefront (CLS 0.86-1.09 on the desktop home page in the Phase 27
 * baseline). The slide's height is fixed by the design (`.slider-ella`: 100vw, 490px from 768px, 640px from 992px), so
 * the area is given exactly that height until the carousel is built, and nothing after it: the built carousel is
 * exactly as tall, so the finished page is unchanged. Every height sits inside a media query, so a browser that cannot
 * read the query or :has() simply keeps the old behaviour (never a wrong height).
 */
@media (width < 768px) {
	.slider-area:has(> #hp-main-slider:not(.owl-loaded)) {
		min-height: 100vw;
	}
}

@media (768px <= width < 992px) {
	.slider-area:has(> #hp-main-slider:not(.owl-loaded)) {
		min-height: 490px;
	}
}

@media (width >= 992px) {
	.slider-area:has(> #hp-main-slider:not(.owl-loaded)) {
		min-height: 640px;
	}
}

/*
	Phase 27: a card's hover picture on a device that cannot hover. The design shows it only on :hover (style.css:
	`.no-touchevents .list-product:hover .second-img`), so there it is never visible - absolute, transparent and hidden -
	and ds.pic gives it a 1x1 placeholder source so it is never downloaded. Taking it out of the rendering changes no pixel
	and no layout (it is absolutely positioned); it only stops that placeholder from being treated as a picture displayed
	at the card's size.
*/
@media (any-hover: none) {
	.list-product .second-img {
		display: none;
	}
}