/**
 * The bag: FluentCart's floating bag button, its cart drawer and its add-to-cart
 * button, in the site's language (Part Two buying journey: Vanilla Cream, Onyx,
 * Rose Wine). FluentCart's markup and behaviour are untouched; this only restyles.
 * Colours are the site's tokens (Bricks palette variables), never hexes.
 *
 * Loaded on every front-end page by jt-core's Storefront module. Every selector
 * starts html body:not(.fluent-cart-no-colors), one step more specific than
 * FluentCart's own body:not(.fluent-cart-no-colors) rules, so ours win whatever
 * order the stylesheets load in.
 */

/* ------------------------------------------------------- FluentCart's own theme
   FluentCart colours itself from these variables (falling back to its own greys
   and navy when they are unset). Setting them is its supported way of theming,
   and they reach every FluentCart screen: the bag, cart, checkout and account. */
:root {
	--fct-primary-text-color: var(--ink);
	--fct-secondary-text-color: color-mix(in srgb, var(--ink) 72%, transparent);
	--fct-card-bg-color: var(--cream);
	--fct-secondary-bg-color: var(--cream);
	--fct-border-color: color-mix(in srgb, var(--ink) 20%, transparent);
	--fct-divider-color: color-mix(in srgb, var(--ink) 14%, transparent);
	--fct-active-border-color: var(--ink);
	--fct-input-bg-color: transparent;
	--fct-input-text-color: var(--ink);
	--fct-btn-bg-color: var(--rose-wine);
	--fct-btn-text-color: var(--cream);
	--fct-btn-border-color: var(--rose-wine);
	--fct-btn-hover-bg-color: var(--ink);
	--fct-btn-hover-text-color: var(--cream);
	--fct-btn-radius: 999px;
	--fct-secondary-btn-bg-color: transparent;
	--fct-secondary-btn-hover-bg-color: color-mix(in srgb, var(--ink) 6%, transparent);
	--fct-badge-radius: 999px;
	--fct-popup-radius: 0;
	--fct-container-radius: 0;
	--fct-cart-drawer-open-btn-bg-color: var(--rose-wine);
	--fct-cart-drawer-badge-bg-color: var(--ink);
	--fct-cart-drawer-badge-text-color: var(--cream);
	--fct-cart-drawer-footer-action-bg-color: transparent;
	--fct-cart-item-delete-btn-bg-color: transparent;
	--fct-cart-item-delete-btn-border-color: transparent;
	--fct-cart-item-delete-btn-hover-bg-color: transparent;
}

/* ------------------------------------------------------------ floating button */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn {
	width: 56px;
	height: 56px;
	/* the far right corner, whatever the width */
	right: 24px;
	bottom: 24px;
	border: 0;
	border-radius: 50%;
	/* Rose Wine: the bag belongs to buying, the one job that colour does on this site */
	background: var(--rose-wine);
	color: var(--cream);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--rose-wine) 35%, transparent);
	transition: transform .2s cubic-bezier(.22, .61, .36, 1), background .2s;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn:hover { transform: translateY(-2px); }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* FluentCart's icon is an <img> of a trolley, which no colour can reach. It is
   hidden, and a bag (it is "Your bag" everywhere else) is painted in cream through
   jt-core's own outline icon used as a mask. */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn > img { display: none; }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn::before {
	content: "";
	width: 26px;
	height: 26px;
	background: var(--cream);
	-webkit-mask: url(bag-icon.svg) no-repeat center / contain;
	        mask: url(bag-icon.svg) no-repeat center / contain;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn .fct-cart-badge-count {
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid var(--cream);
	border-radius: 999px;
	background: var(--ink);
	color: var(--cream);
	font: 600 12px/18px Figtree, sans-serif;
}

/* -------------------------------------------------------------------- drawer */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-overlay.active { background: color-mix(in srgb, var(--ink) 45%, transparent); }
/* FluentCart slides the drawer with left (100% closed, 100% - 500px open); the
   open position is restated for this narrower drawer so it sits flush right */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer.open { left: calc(100% - min(100%, 440px)); }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer {
	width: min(440px, 100vw);
	max-width: 100vw;
	background: var(--cream);
	color: var(--ink);
	font-family: Figtree, sans-serif;
	box-shadow: -24px 0 60px color-mix(in srgb, var(--ink) 18%, transparent);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-header {
	padding: 28px 28px 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
	background: transparent;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-header .title {
	margin: 0;
	font-family: "Source Serif 4 Display", serif;
	font-weight: 300;
	font-size: 34px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ink);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-header .title > span {
	font-family: Figtree, sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	opacity: .6;
	vertical-align: middle;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-close-button {
	/* a 44px tap target around FluentCart's 16px cross */
	box-sizing: content-box;
	padding: 14px;
	margin: -14px -14px -14px 0;
	border: 0;
	background: none;
	color: var(--ink);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-close-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* line items: cover-sized thumbnail, serif title, no quantity (guides are bought once) */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item {
	padding: 20px 28px;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-image img,
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-image {
	width: 56px;
	height: 78px;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 0;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-title,
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-title a {
	font-family: "Source Serif 4 Display", serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--ink);
	text-decoration: none;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-quantity { display: none; }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-total {
	font-family: "Source Serif 4 Display", serif;
	font-weight: 300;
	font-size: 22px;
	color: var(--ink);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-delete-button {
	border: 0;
	background: none;
	color: color-mix(in srgb, var(--ink) 70%, transparent);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item-delete-button:hover { color: var(--rose-wine); }

/* footer: total set large, one Rose Wine button */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer-actions { padding: 0; box-shadow: none; background: transparent; }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer {
	padding: 22px 28px 28px;
	border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
	background: transparent;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-total-wrapper {
	padding: 0 0 18px;
	align-items: baseline;
	font-family: "Source Serif 4 Display", serif;
	font-weight: 300;
	font-size: 26px;
	color: var(--ink);
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-total-wrapper > :last-child { font-size: 36px; letter-spacing: -.02em; }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-drawer-footer a.checkout-button.fct-primary-btn,
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-drawer-footer a.checkout-button.fct-primary-btn:visited {
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border: 1px solid var(--rose-wine);
	border-radius: 999px;
	background: var(--rose-wine);
	color: var(--cream);
	font: 600 var(--type-link, 14px)/1 Figtree, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	transition: background .22s, color .22s;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-drawer-footer a.checkout-button.fct-primary-btn:hover { background: transparent; color: var(--rose-wine); }

/* "View your bag" (bag.js): a quiet text link under the one Rose button */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-drawer-footer a.jt-view-bag {
	display: inline-block;
	align-self: center;
	width: auto;
	min-height: 0;
	margin: 16px auto 0;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--ink);
	font: 600 var(--type-link, 14px)/1.2 Figtree, sans-serif;
	text-decoration: none;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-drawer-footer a.jt-view-bag:hover { color: var(--rose-wine); }

/* empty bag */
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fluent-cart-cart-empty-content { color: var(--ink); }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fluent-cart-cart-empty-content svg { display: none; }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fluent-cart-cart-empty-content-text {
	font-family: "Source Serif 4 Display", serif;
	font-weight: 300;
	font-size: 24px;
}
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .continue-shopping-link {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------- add to bag button */
html body:not(.fluent-cart-no-colors) .fluent-cart-add-to-cart-button,
html body:not(.fluent-cart-no-colors) button.fluent-cart-add-to-cart-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid var(--rose-wine);
	border-radius: 999px;
	background: var(--rose-wine);
	color: var(--cream);
	font: 600 var(--type-link, 14px)/1 Figtree, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .22s, color .22s;
}
html body:not(.fluent-cart-no-colors) .fluent-cart-add-to-cart-button:hover { background: transparent; color: var(--rose-wine); }
html body:not(.fluent-cart-no-colors) .fluent-cart-add-to-cart-button:focus-visible { outline: 2px solid var(--rose-wine); outline-offset: 3px; }
html body:not(.fluent-cart-no-colors) .fluent-cart-add-to-cart-button .fluent-cart-loader svg { color: currentColor; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn,
html body:not(.fluent-cart-no-colors) .fct-cart-drawer { transition: none !important; }
}
@media (max-width: 478px) {
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-header,
html body:not(.fluent-cart-no-colors) .fct-cart-drawer .fct-cart-item,
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer { padding-left: 20px; padding-right: 20px; }
html body:not(.fluent-cart-no-colors) .fct-cart-drawer-open-btn { right: 16px; bottom: 16px; }
}