/**
 * Diorarteestudios Addons — Header Icons (User + Cart) Styles.
 *
 * Combined stylesheet for the unified "Header Icons" Elementor widget.
 * Single widget renders both the user (login / register) trigger and
 * the shopping-cart (mini cart side bar) trigger; the admin can toggle
 * each on or off.
 *
 * Design tokens (shared with the rest of the plugin):
 *   border-radius: 30px;
 *   box-shadow:    0px 0px 10px 2px rgba(0, 0, 0, 0.5);
 *
 * Self-contained, responsive down to 320px, no external dependencies.
 *
 * @package Diorarteestudios_Addons
 */

/* ===========================================================================
 * 1. Wrapper
 * ========================================================================= */
.dior-header-icons {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	line-height: 0;
	color: #000000;
}

.dior-header-icons *,
.dior-header-icons *::before,
.dior-header-icons *::after {
	box-sizing: border-box;
}

/* ===========================================================================
 * 1b. Trigger entrance animation
 *
 * Each icon fades in + slides down a few pixels when the widget first
 * paints. The user icon animates first; the cart icon follows with a
 * small stagger so the entrance feels sequential rather than both
 * popping in at the same time.
 *
 * Important: the icons are `opacity: 0` by DEFAULT, with the animation
 * bringing them to `opacity: 1`. Without this, the icons briefly flash
 * visible during the (very short) window between the HTML being parsed
 * and the CSS being applied — `backwards` only kicks in once the
 * stylesheet is loaded. Hiding them up front eliminates the flash.
 *
 * Visitors with `prefers-reduced-motion: reduce` see the icons rendered
 * straight to `opacity: 1` (no animation, no flash).
 * ========================================================================= */
@keyframes dior-header-icons-enter {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Default state: invisible (waiting for the animation to run). */
.dior-header-icons__btn {
	opacity: 0;
	transform: translateY(-8px);
}

@media (prefers-reduced-motion: no-preference) {
	.dior-header-icons__btn {
		animation: dior-header-icons-enter 360ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	}

	.dior-header-icons__btn--user {
		animation-delay: 1250ms;
	}

	.dior-header-icons__btn--cart {
		animation-delay: 1350ms;
	}
}

/* Reduced-motion users: show the icons as-is, no animation, no delay. */
@media (prefers-reduced-motion: reduce) {
	.dior-header-icons__btn {
		opacity: 1 !important;
		transform: none;
	}
}

/* ===========================================================================
 * 2. Trigger buttons (user + cart)
 *
 * Both icons are <span role="button"> so they don't inherit browser-
 * default button styles (border / padding / font). Keyboard activation
 * (Enter / Space) is wired up in `header-icons.js`.
 * ========================================================================= */
.dior-header-icons__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	cursor: pointer;
	color: inherit;
	line-height: 0;
	border-radius: 8px;
	transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
}

a.dior-header-icons__btn {
	color: inherit;
	text-decoration: none;
}

.dior-header-icons__btn:hover,
.dior-header-icons__btn:focus-visible {
	transform: translateY(-1px) !important;
	outline: none;
}

.dior-header-icons__btn:focus-visible {
	box-shadow: 0 0 0 2px #000000;
}

.dior-header-icons__btn svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	color: currentColor;
	transition: color 160ms ease;
	pointer-events: none;
}

/* Solid user icon uses fill, not stroke. Override. */
.dior-header-icons__btn--user svg[fill="currentColor"] {
	fill: currentColor;
	stroke: none;
}

/* ===========================================================================
 * 3. Cart count badge
 *
 * Anchored to the top-right corner of the cart icon. Hides cleanly when
 * the count is 0 (the wrapper keeps the icon centred). The format is
 * the literal number up to 99, "99+" beyond — see
 * `Dior_Header_Icons_Widget::format_badge_count()`.
 * ========================================================================= */
.dior-header-icons__cart-count {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 2px), calc(-50% - 2px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 500;
	color: #000000 !important;
	background: transparent !important;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	box-sizing: border-box;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

/* Pop animation when the badge value changes. */
.dior-header-icons__cart-count.is-bumped {
	animation: dior-header-bump 320ms ease-out;
}

@keyframes dior-header-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* Screen-reader live region (announces count updates). */
.dior-header-icons__cart-count-screen-reader {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

/* ===========================================================================
 * 4. Account side bar
 *
 * Mirrors the cart side bar: slides in from the right, same brand
 * shadow + radius, same backdrop. Keeps the markup compatible with the
 * original `.dior-account-modal*` class names so existing JS keeps
 * working — only the visual presentation changes.
 * ========================================================================= */
.dior-account-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #000000;
}

.dior-account-modal[hidden] {
	display: none;
}

.dior-account-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.55);
	cursor: pointer;
}

.dior-account-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	height: 100%;
	background: #ffffff;
	border-radius: 30px 0 0 30px;
	border: 1px solid #000000;
	border-right: 0;
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	animation: dior-account-modal-in 220ms ease-out;
	overflow: hidden;
}

@keyframes dior-account-modal-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

body.dior-account-modal-open {
	overflow: hidden;
}

/* Same header scaffold as the cart side bar so the two modals read
 * as siblings of the same component. */
.dior-account-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px 18px;
	border-bottom: 1px solid #e5e5e5;
	flex-shrink: 0;
}

.dior-account-modal__close {
	width: 32px;
	height: 32px;
	font-family: "Fira Sans", Sans-serif;
	font-size: 35px !important;
	line-height: 26px;
    font-weight: 500;
    text-transform: uppercase;
	text-align: center;
    color: #000000 !important;
    font-weight: 400;
    background: transparent !important;
    border: 2px solid #000000;
    border-radius: 3px !important;
    cursor: pointer;
    padding: 0 0 !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000;
    transition: all .3s;
}

.dior-account-modal__close:hover,
.dior-account-modal__close:focus-visible {
	background: #000000 !important;
    border-color: #000 !important;
    color: #ffffff !important;
    box-shadow: none;
}

.dior-account-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #000000;
	line-height: 1.2;
}

/* Scrollable body — title stays at the top, form scrolls if needed. */
.dior-account-modal__content {
	padding: 24px 24px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1;
}

.dior-account-modal__subtitle {
	margin: 0 0 22px;
	font-size: 13px;
	color: #525252;
	line-height: 1.5;
}

/* Tabs. */
.dior-account-modal__tabs {
	display: flex;
	display: none!important;
	gap: 4px;
	margin: 0 0 22px;
	padding: 4px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
}

.dior-account-modal__tab {
	flex: 1;
	appearance: none!important;
	background: transparent!important;
	border: 0!important;
	padding: 8px 12px!important;
	border-radius: 999px!important;
	font-size: 13px!important;
	font-weight: 600!important;
	color: #525252!important;
	cursor: pointer!important;
	letter-spacing: 0.01em!important;
	transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease!important;
	font-family: inherit!important;
}

.dior-account-modal__tab:hover {
	color: #000000!important;
}

.dior-account-modal__tab--active {
	background: #ffffff!important;
	color: #000000!important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)!important;
	border: 1px solid #000000!important;
}

.dior-account-modal__tab:focus-visible {
	outline: 2px solid #000000!important;
	outline-offset: 2px!important;
}

/* Panels. */
.dior-account-modal__panel {
	display: none;
}

.dior-account-modal__panel--active {
	display: block;
}

.dior-account-modal__form {
	margin: 0;
}

.dior-account-modal__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.dior-account-modal__row--between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 16px;
}

.dior-account-modal__field {
	margin: 0 0 14px;
}

.dior-account-modal__field:last-of-type {
	margin-bottom: 16px;
}

.dior-account-modal__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #000000;
}

.dior-account-modal__label--required::after {
	content: " *";
	color: #000000;
}

.dior-account-modal__input {
	display: block;
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #000000;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	font-family: inherit;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.dior-account-modal__input:focus {
	outline: none;
	border-color: #000000;
	box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.dior-account-modal__input[aria-invalid="true"] {
	border-color: #000000;
	box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

.dior-account-modal__hint {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	color: #737373;
}

.dior-account-modal__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #000000;
	cursor: pointer;
	user-select: none;
}

.dior-account-modal__remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #000000;
}

/* Submit button. */
.dior-account-modal__submit {
	width: 100%;
    text-transform: var(--e-global-typography-accent-text-transform);
    font-weight: 500;
    box-shadow: rgb(0, 0, 0) 0.9px -1px 0px 0px, rgb(0, 0, 0) 1.5px -2px 0px 0px, rgb(0, 0, 0) 2.5px -3px 0px 0px, rgb(0, 0, 0) 3.5px -4px 0px 0px, rgb(0, 0, 0) 4.5px -5px 0px 0px, rgb(0, 0, 0) 5.5px -6px 0px 0px, rgb(0, 0, 0) 6.5px -7px 0px 0px, rgb(0, 0, 0) 7.5px -8px 0px 0px, rgb(0, 0, 0) 8.5px -9px 0px 0px, rgb(0, 0, 0) 9.5px -10px 0px 0px;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    color: rgb(0, 0, 0) !important;
    background-color: var(--e-global-color-accent) !important;
    border-style: solid;
    border-width: 2px;
    border-radius: 3px;
    padding: 12px 16px;
    transition: 0.3s;
    border-color: rgb(0, 0, 0) !important;
}

.dior-account-modal__submit:hover,
.dior-account-modal__submit:focus-visible {
	box-shadow: none;
    color: rgb(255, 255, 255) !important;
    background: rgb(0, 0, 0) !important;
    border-color: rgb(0, 0, 0) !important;
}

.dior-account-modal__submit:active {
	transform: translateY(1px);
}

.dior-account-modal__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.dior-account-modal__submit.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.dior-account-modal__submit.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: dior-account-spin 720ms linear infinite;
}

@keyframes dior-account-spin {
	to { transform: rotate(360deg); }
}

/* Switch links. */
.dior-account-modal__switch {
	margin: 14px 0 0;
	font-size: 13px;
	color: #525252;
	text-align: center;
}

.dior-account-modal__switch:first-of-type {
	margin-top: 16px;
}

.dior-account-modal__link {
	appearance: none!important;
	background: transparent!important;
	border: 0!important;
	padding: 0!important;
	margin: 0 0 0 4px!important;
	color: #000000!important;
	font-size: 13px!important;
	font-weight: 700!important;
	text-decoration: underline!important;
	text-underline-offset: 2px!important;
	cursor: pointer!important;
	font-family: inherit!important;
}

.dior-account-modal__link:hover,
.dior-account-modal__link:focus-visible {
	color: #000000!important;
	text-decoration-thickness: 2px!important;
	outline: none!important;
}

/* Status region. */
.dior-account-modal__status {
	margin: 16px 0 0;
	min-height: 1px;
}

.dior-account-modal__notice {
	padding: 10px 14px;
	margin: 0;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	background: #ffffff;
	color: #000000;
	border: 1px solid #000000;
}

.dior-account-modal__notice--success {
	background: #ffffff;
	color: #000000;
	border-color: #000000;
}

.dior-account-modal__notice--error {
	background: #ffffff;
	color: #000000;
	border-color: #000000;
}

.dior-account-modal__field-error {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	color: #000000;
	font-weight: 600;
}

/* ===========================================================================
 * 4b. Logged-in panel (profile card + links + sign-out).
 *
 * Visually parallel to the rest of the form panels so swapping between
 * `logged-in` ↔ `login/register/lost` doesn't re-flow the layout.
 * ========================================================================= */
.dior-account-modal__user-card {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	padding: 16px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 14px;
}

.dior-account-modal__avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	overflow: hidden;
	color: #000000;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}

.dior-account-modal__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.dior-account-modal__avatar--initials {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

.dior-account-modal__user-info {
	flex: 1;
	min-width: 0;
}

.dior-account-modal__user-name {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 700;
	color: #000000;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dior-account-modal__user-email {
	margin: 0;
	font-size: 13px;
	color: #525252;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* List of useful links. */
.dior-account-modal__user-links {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	border-top: 1px solid #e5e5e5;
}

.dior-account-modal__user-link {
	border-bottom: 1px solid #e5e5e5;
}

.dior-account-modal__user-link a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 4px;
	font-size: 14px;
	font-weight: 600;
	color: #000000;
	text-decoration: none;
	transition: background-color 160ms ease;
}

.dior-account-modal__user-link a:hover,
.dior-account-modal__user-link a:focus-visible {
	background: rgba(0, 0, 0, 0.04);
	outline: none;
}

.dior-account-modal__user-link-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #000000;
}

.dior-account-modal__user-link-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dior-account-modal__user-link-arrow {
	flex-shrink: 0;
	font-size: 18px;
	color: #737373;
	line-height: 1;
}

/* Sign-out button. Matches the visual weight of the other primary
 * buttons in the modal (rounded, full-width). */
.dior-account-modal__logout-btn {
	width: 100%;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-weight: var(--e-global-typography-accent-font-weight);
    text-transform: var(--e-global-typography-accent-text-transform);
    font-weight: 500;
    color: #000000 !important;
    background-color: var(--e-global-color-accent) !important;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #000000 !important;
    border-radius: 3px 3px 3px 3px;
    padding: 12px 16px 12px 16px;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000, 4.5px -5px 0 0 #000, 5.5px -6px 0 0 #000, 6.5px -7px 0 0 #000, 7.5px -8px 0 0 #000, 8.5px -9px 0 0 #000, 9.5px -10px 0 0 #000;
    transition: all .3s;
}

.dior-account-modal__logout-btn:hover,
.dior-account-modal__logout-btn:focus-visible {
	background: #000000 !important;
    border-color: #000 !important;
    color: #ffffff !important;
    box-shadow: none;
}

.dior-account-modal__logout-btn:active {
	transform: translateY(1px);
}

.dior-account-modal__logout-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.dior-account-modal__logout-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.dior-account-modal__logout-btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	border: 2px solid rgba(0, 0, 0, 0.3);
	border-top-color: #000000;
	border-radius: 50%;
	animation: dior-account-spin 720ms linear infinite;
}

.dior-account-modal__logout-btn.is-loading:hover {
	background: transparent;
	color: transparent;
}
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

/* Focus-visible accessibility. */
.dior-account-modal__submit:focus-visible,
.dior-account-modal__logout-btn:focus-visible,
.dior-account-modal__tab:focus-visible,
.dior-account-modal__close:focus-visible,
.dior-account-modal__input:focus-visible,
.dior-account-modal__link:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* ===========================================================================
 * 5. Cart side bar panel
 * ========================================================================= */
.dior-cart-panel {
	position: fixed;
	inset: 0;
	z-index: 100001; /* above the account modal */
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #000000;
}

.dior-cart-panel[hidden] {
	display: none;
}

.dior-cart-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.55);
	cursor: pointer;
}

body.dior-cart-panel-open {
	overflow: hidden;
}

.dior-cart-panel__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	height: 100%;
	background: #ffffff;
	border-radius: 30px 0 0 30px;
	border: 1px solid #000000;
	border-right: 0;
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	animation: dior-cart-panel-in 220ms ease-out;
	overflow: hidden;
}

@keyframes dior-cart-panel-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.dior-cart-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px 18px;
	border-bottom: 1px solid #e5e5e5;
	flex-shrink: 0;
}

.dior-cart-panel__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #000000;
	line-height: 1.2;
}

.dior-cart-panel__close {
	width: 32px;
	height: 32px;
	font-family: "Fira Sans", Sans-serif;
	font-size: 35px !important;
	line-height: 26px;
    font-weight: 500;
    text-transform: uppercase;
	text-align: center;
    color: #000000 !important;
    font-weight: 400;
    background: transparent !important;
    border: 2px solid #000000;
    border-radius: 3px !important;
    cursor: pointer;
    padding: 0 0 !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000;
    transition: all .3s;
}

.dior-cart-panel__close:hover,
.dior-cart-panel__close:focus-visible {
	background: #000000 !important;
    border-color: #000 !important;
    color: #ffffff !important;
    box-shadow: none;
}

.dior-cart-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 4px 24px 16px;
	-webkit-overflow-scrolling: touch;
}

/* Loading. */
.dior-cart-panel__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 0;
}

.dior-cart-panel__spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 2px solid #e5e5e5;
	border-top-color: #000000;
	border-radius: 50%;
	animation: dior-cart-spin 720ms linear infinite;
}

@keyframes dior-cart-spin {
	to { transform: rotate(360deg); }
}

/* Empty. */
.dior-cart-panel__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 0;
	text-align: center;
}

.dior-cart-panel__empty-icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fafafa;
	color: #000000;
}

.dior-cart-panel__empty-icon svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
}

.dior-cart-panel__empty-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #000000;
}

.dior-cart-panel__empty-text {
	margin: 0;
	font-size: 13px;
	color: #525252;
	line-height: 1.5;
	max-width: 280px;
}

.dior-cart-panel__empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #000000;
	background: transparent;
	border: 1px solid #000000;
	border-radius: 30px;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.dior-cart-panel__empty-cta:hover,
.dior-cart-panel__empty-cta:focus-visible {
	background: #000000;
	color: #ffffff;
	outline: none;
}

/* Items. */
.dior-cart-panel__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.dior-cart-panel__item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid #e5e5e5;
	align-items: flex-start;
}

.dior-cart-panel__item:last-child {
	border-bottom: 0;
}

.dior-cart-panel__item-thumb {
	display: block;
	width: 72px;
	height: 72px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
}

.dior-cart-panel__item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dior-cart-panel__item-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dior-cart-panel__item-name {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #000000;
	line-height: 1.35;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dior-cart-panel__item-name:hover,
.dior-cart-panel__item-name:focus-visible {
	text-decoration: underline;
	outline: none;
}

.dior-cart-panel__item-price {
	font-size: 13px;
	color: #525252;
	margin: 0;
	line-height: 1.4;
}

.dior-cart-panel__item-qty {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
}

.dior-cart-panel__qty-btn {
	width: 22px;
    height: 22px;
    color: #000000 !important;
    font-family: "Fira Sans", Sans-serif !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: 1px solid #000000;
    font-size: 22px;
    line-height: 20px;
    border-radius: 3px !important;
    padding: 0 0 !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000;
    transition: all .3s;
}

.dior-cart-panel__qty-btn:hover,
.dior-cart-panel__qty-btn:focus-visible {
	background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none;
}

.dior-cart-panel__qty-btn:disabled,
.dior-cart-panel__item-remove:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Subtle visual feedback on the row that is currently talking to the
   server. Keeps the user from double-clicking and signals "this is
   working" without flashing the whole panel. */
.dior-cart-panel__item.is-loading {
	opacity: 0.6;
	transition: opacity 160ms ease;
}
.dior-cart-panel__item.is-loading .dior-cart-panel__qty-input {
	background-color: #f7f7f7;
}

.dior-cart-panel__qty-input {
	width: 40px !important;
    height: 22px;
    padding: 0 !important;
    font-size: 13px;
    line-height: 22px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    background: #ffffff;
    font-family: inherit;
    -moz-appearance: textfield;
}

.dior-cart-panel__qty-input::-webkit-outer-spin-button,
.dior-cart-panel__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dior-cart-panel__qty-input:focus {
	outline: none;
	border-color: #000000;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.dior-cart-panel__item-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	min-width: 0;
}

.dior-cart-panel__item-total {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #000000;
	line-height: 1.2;
	white-space: nowrap;
}

.dior-cart-panel__item-remove {
	color: #000000 !important;
    font-family: "Fira Sans", Sans-serif;
    font-weight: 400;
    background: transparent !important;
    border: 1px solid #000000;
    font-size: 25px;
    line-height: 20px;
    width: 25px;
    height: 25px;
    border-radius: 3px !important;
    cursor: pointer;
    padding: 0 0 !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000;
    transition: all .3s;
}

.dior-cart-panel__item-remove:hover,
.dior-cart-panel__item-remove:focus-visible {
	background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none;
}

/* Footer. */
.dior-cart-panel__footer {
	flex-shrink: 0;
	padding: 18px 24px 22px;
	border-top: 1px solid #e5e5e5;
	background: #ffffff;
}

.dior-cart-panel__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	font-size: 14px;
	color: #000000;
}

.dior-cart-panel__subtotal-label {
	font-weight: 500;
	color: #525252;
}

.dior-cart-panel__subtotal-value {
	font-weight: 700;
	color: #000000;
	font-variant-numeric: tabular-nums;
}

.dior-cart-panel__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.dior-cart-panel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border: 2px solid #000000;
    border-radius: 3px !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000 !important;
	cursor: pointer;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
	-webkit-tap-highlight-color: transparent;
}

.dior-cart-panel__button:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

.dior-cart-panel__button--secondary {
	background: #ffffff;
	color: #000000;
}

.dior-cart-panel__button--secondary:hover {
	background: #FFFFFF;
	border-color: #000000;
	color: #000000;
	box-shadow: none !important;
}

.dior-cart-panel__button--primary {
	background: #000000;
	border-top-color: #FFFFFF !important;
	border-right-color: #FFFFFF !important;
	color: #ffffff !important;
}

.dior-cart-panel__button--primary:hover {
	background: #FFFFFF;
	border-color: #000000 !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}

.dior-cart-panel__button:active {
	transform: translateY(1px);
}

/* ===========================================================================
 * 6. Responsive
 * ========================================================================= */
@media (max-width: 600px) {
	.dior-account-modal__dialog {
		max-width: 100%;
		border-radius: 24px 0 0 24px;
	}

	.dior-account-modal__content {
		padding: 24px 20px 22px;
	}

	.dior-account-modal__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.dior-account-modal__tabs {
		flex-wrap: wrap;
	}

	.dior-account-modal__tab {
		flex: 1 1 30%;
		font-size: 12px;
		padding: 7px 6px;
	}

	.dior-cart-panel__dialog {
		max-width: 100%;
		border-radius: 24px 0 0 24px;
	}

	.dior-cart-panel__header,
	.dior-cart-panel__body,
	.dior-cart-panel__footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dior-cart-panel__item {
		grid-template-columns: 64px 1fr auto;
		gap: 12px;
	}

	.dior-cart-panel__item-thumb {
		width: 64px;
		height: 64px;
	}
}

@media (max-width: 380px) {
	.dior-account-modal__close {
		top: 14px;
		right: 14px;
		width: 28px;
		height: 28px;
		font-size: 18px;
	}

	.dior-account-modal__content {
		padding: 22px 16px 18px;
	}

	.dior-account-modal__tab {
		font-size: 11px;
	}

	.dior-account-modal__input {
		font-size: 13px;
		padding: 9px 10px;
	}

	.dior-account-modal__submit {
		font-size: 13px;
		padding: 11px 14px;
	}

	.dior-cart-panel__dialog {
		border-radius: 20px 0 0 20px;
	}

	.dior-cart-panel__header,
	.dior-cart-panel__body,
	.dior-cart-panel__footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dior-cart-panel__title {
		font-size: 16px;
	}

	.dior-cart-panel__actions {
		grid-template-columns: 1fr;
	}

	.dior-cart-panel__button {
		padding: 11px 14px;
		font-size: 12px;
	}

	.dior-cart-panel__item {
		grid-template-columns: 56px 1fr auto;
		gap: 10px;
	}

	.dior-cart-panel__item-thumb {
		width: 56px;
		height: 56px;
	}

	.dior-cart-panel__item-name {
		font-size: 13px;
	}

	.dior-cart-panel__item-total {
		font-size: 13px;
	}
}

/* Honeypot. */
.dior-account-modal__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

/* ===========================================================================
 * 7. Reduced motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.dior-account-modal__dialog,
	.dior-cart-panel__dialog,
	.dior-cart-panel__spinner,
	.dior-account-modal__submit.is-loading::after,
	.dior-account-modal__logout-btn.is-loading::after,
	.dior-header-icons__cart-count.is-bumped {
		animation: none;
	}
	.dior-header-icons__btn,
	.dior-header-icons__btn svg,
	.dior-header-icons__cart-count,
	.dior-account-modal__close,
	.dior-account-modal__tab,
	.dior-account-modal__input,
	.dior-account-modal__submit,
	.dior-account-modal__logout-btn,
	.dior-account-modal__link,
	.dior-account-modal__user-link a,
	.dior-cart-panel__close,
	.dior-cart-panel__qty-btn,
	.dior-cart-panel__qty-input,
	.dior-cart-panel__button,
	.dior-cart-panel__item-remove {
		transition: none;
	}
}