/**
 * Styling for the Shopify cart drawer, product grid, and product detail/modal.
 * Uses the theme's existing color variables (see style.css :root) so this matches
 * the rest of the site instead of introducing a separate palette.
 */

/* Hard safety net: images from Shopify never exceed their container, no matter
   what other CSS on the page or intrinsic image size is at play. */
.shopify-product-block img,
.shopify-collection-grid img,
.shopify-modal img,
.ck-cart-drawer img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Custom buttons in these components should never inherit the browser's/theme's
   native button chrome (padding, background, stretch-to-fill-grid-cell, etc.) */
.shopify-product-block button,
.shopify-collection-grid button,
.shopify-modal button,
.ck-cart-drawer button,
.ck-cart-trigger {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	margin: 0;
	font-family: inherit;
	align-self: center;
}

/* ---------- Cart trigger (header) ---------- */

.ck-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* !important because the parent theme (Twenty Twenty-One) styles every
	   bare <button> with a dark gray background via a 3-deep :not() chain
	   (button:not(:hover):not(:active):not(.has-background)), which beats a
	   single class on specificity. Without this, the icon sits on an
	   unwanted dark gray box. */
	background: none !important;
	border: none !important;
	cursor: pointer;
	color: rgba(var(--color1), 1) !important;
	padding: 6px;
}

/* Hide the cart trigger while the site's slide-down mobile menu is open.
   .header sits at z-index:10, above the menu panel/overlay by original
   theme design, so anything in the header (including this button) would
   otherwise stay visible on top of the menu instead of being covered by it. */
.header.menu-open .navbar-cta {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.ck-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: rgba(var(--color1), 1);
	color: rgba(var(--color2), 1);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.ck-cart-count.is-visible {
	opacity: 1;
	transform: scale(1);
}

body.ck-cart-open {
	overflow: hidden;
}

/* ---------- Cart drawer ---------- */

.ck-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	pointer-events: none;
}

.ck-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.ck-cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ck-cart-drawer.is-open .ck-cart-drawer__overlay {
	opacity: 1;
}

.ck-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	box-sizing: border-box;
	overflow-x: hidden;
	background: rgba(var(--color2), 1);
	color: rgba(var(--color3), 1);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.ck-cart-drawer.is-open .ck-cart-drawer__panel {
	transform: translateX(0);
}

.ck-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(var(--color1), 0.3);
}

.ck-cart-drawer__header h2 {
	margin: 0;
	color: rgba(var(--color1), 1);
}

.ck-cart-drawer__close {
	background: none !important;
	border: none !important;
	color: rgba(var(--color3), 1) !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.ck-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px;
}

.ck-cart-drawer__empty {
	opacity: 0.7;
	text-align: center;
	margin-top: 40px;
}

.ck-cart-line {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto 24px;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid rgba(var(--color1), 0.15);
}

.ck-cart-line__img {
	/* !important: the blanket ".ck-cart-drawer img { height: auto; }" safety-net
	   rule above is slightly more specific (class + element vs. one class) and
	   would otherwise win, letting a tall/narrow bottle photo render at its
	   full intrinsic height instead of being cropped into this 64x64 square. */
	width: 64px !important;
	height: 64px !important;
	object-fit: cover !important;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.05);
}

.ck-cart-line__title {
	font-weight: 600;
}

.ck-cart-line__variant {
	font-size: 12px;
	opacity: 0.7;
}

.ck-cart-line__qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.ck-cart-line__qty span {
	min-width: 16px;
	text-align: center;
}

.ck-cart-line__qty button {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid rgba(var(--color1), 0.5);
	background: none !important;
	color: rgba(var(--color3), 1) !important;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.ck-cart-line__price {
	white-space: nowrap;
	font-weight: 600;
}

.ck-cart-line__remove {
	width: 24px;
	height: 24px;
	padding: 0;
	background: none !important;
	border: none !important;
	color: rgba(var(--color3), 0.6) !important;
	font-size: 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	align-self: start;
}

/* "You might also like" — renders nothing at all (no heading, no empty box)
   when Shopify has no recommendations to offer, which will happen often on a
   new store until there's enough sales history for auto-generated (RELATED)
   recommendations, or until complementary pairings are configured in Shopify
   admin via the Search & Discovery app. */
.ck-cart-recs:empty {
	display: none;
}

.ck-cart-recs {
	padding: 0 24px 16px;
	border-top: 1px solid rgba(var(--color1), 0.15);
}

.ck-cart-recs__heading {
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
	margin: 16px 0 12px;
}

.ck-cart-recs__row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.ck-cart-recs__card {
	flex: 0 0 auto;
	width: 96px;
	text-align: center;
}

.ck-cart-recs__img {
	/* Same specificity fix as .ck-cart-line__img above. */
	width: 80px !important;
	height: 80px !important;
	object-fit: cover !important;
	border-radius: 4px;
	margin: 0 auto 6px;
	display: block;
	background: rgba(255, 255, 255, 0.05);
}

.ck-cart-recs__title {
	font-size: 12px;
	line-height: 1.3;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ck-cart-recs__price {
	font-size: 12px;
	opacity: 0.75;
	margin-bottom: 6px;
}

.ck-cart-recs__add {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 4px 0;
	font-size: 12px;
	border: 1px solid rgba(var(--color1), 0.6);
	border-radius: 4px;
	background: none !important;
	color: rgba(var(--color3), 1) !important;
	cursor: pointer;
}

.ck-cart-recs__add:hover {
	background: rgba(var(--color1), 1);
	color: rgba(var(--color2), 1);
}

.ck-cart-drawer__footer {
	padding: 20px 24px;
	border-top: 1px solid rgba(var(--color1), 0.3);
}

.ck-cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-weight: 600;
}

.ck-cart-drawer__checkout {
	display: block;
	text-align: center;
	width: 100%;
}

.ck-cart-drawer__legal {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	opacity: 0.6;
}

.ck-cart-drawer__legal a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- our-spirits.php product listing ---------- */

/* This section (dynamic_product_listing in our-spirits.php) renders each
   product's photo directly on the page's dark navy background — same
   white-studio-photo-on-dark-navy clash as everywhere else, just via a
   different (pre-existing, non-Shopify) template loop. Same fix: a light card. */

/* Four products per row (drop to 2, then 1, on smaller screens) instead of one
   full-width product per row. The theme's original .row was itself a 2-column
   grid (text | image) for a single product — we repurpose that same markup as
   a vertical card (photo over text) and let .spirits-sec1 arrange several of
   those cards in a classic collection-grid layout. */
.spirits-sec1 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 24px;
}

@media (max-width: 1100px) {
	.spirits-sec1 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.spirits-sec1 .row {
	display: flex !important;
	flex-direction: column;
	background: #fdfaf5;
	color: #1a1a1a;
	border-radius: 8px;
	padding: 24px;
	border: none !important;
	margin: 0 !important;
}

/* Neutralize the old alternating left/right layout — not relevant once every
   product is its own uniform card rather than one row split into 2 columns. */
.spirits-sec1 .row:nth-child(odd) .content,
.spirits-sec1 .row:nth-child(even) .content,
.spirits-sec1 .row:nth-child(odd) .media {
	order: unset !important;
	border-left: none !important;
}

@media (max-width: 780px) {
	.spirits-sec1 {
		grid-template-columns: 1fr;
	}
}

.spirits-sec1 .media img {
	max-width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* The theme's original design had a full-viewport-height hero image column
   (height: 100vh) — now that the photo itself is capped and small, that just
   leaves a huge empty column. Let the row size to its (now much smaller) content
   instead, and tighten the text column to match — this is the "denser" layout. */
.spirits-sec1 .media {
	height: auto !important;
	padding: 24px !important;
}

.spirits-sec1 .content {
	padding: 24px !important;
}

.spirits-sec1 h2 {
	font-size: 24px !important;
}

.spirits-sec1 h2:not(:last-child) {
	margin-bottom: 12px !important;
}

.spirits-sec1 .table-cell {
	padding: 6px 12px !important;
	font-size: 14px;
}

.spirits-sec1 .table:not(:last-child) {
	margin-bottom: 16px !important;
}

/* Price, pulled live from Shopify (see hydrateAddToCartButtons in
   shopify-shop.js) — same gold accent treatment as the compact single-product
   block, so it reads as a clear price rather than another line of body text. */
.shopify-listing-price {
	font-size: 1.5em;
	font-weight: 600;
	color: rgba(var(--color1), 1);
	margin-top: 8px;
}

.shopify-listing-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/* The theme's ".spirits-sec1 .content .btn { width: 100% }" rule is 3 classes
   deep and beats plain single-class overrides on specificity alone. Size each
   button to its own text (flex: 0 0 auto) instead of forcing equal widths —
   splitting "ADD TO CART" and "MORE INFO" into equal boxes was what wrapped
   the longer label onto two lines. flex-wrap above lets them stack on the
   narrower 4-across cards instead of overflowing. */
.shopify-listing-actions .btn {
	width: auto !important;
	flex: 0 0 auto !important;
	white-space: nowrap;
	padding: 12px 20px !important;
	font-size: 14px;
}

/* ---------- Product grid ---------- */

.shopify-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
}

.shopify-grid__card {
	display: flex;
	flex-direction: column;
	background: #fdfaf5;
	color: #1a1a1a;
	border-radius: 8px;
	padding: 16px;
}

.shopify-grid__media,
.shopify-grid__title {
	background: none !important;
	border: none !important;
	text-align: left;
	cursor: pointer;
	padding: 0;
	color: inherit !important;
	font: inherit;
}

.shopify-grid__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.04);
}

.shopify-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.shopify-grid__media:hover img {
	transform: scale(1.04);
}

.shopify-grid__info {
	padding-top: 10px;
}

.shopify-grid__title {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.shopify-grid__price {
	opacity: 0.75;
	margin-bottom: 10px;
}

.shopify-grid__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The theme's shared .btn is a fully-rounded pill (border-radius: 100px) sized
   by inline-flex + padding, not a fixed width. Letting flexbox stretch/shrink
   it (flex: 1, or no override at all) lets its text wrap onto two lines,
   which turns the pill into a tall oval/circle instead of a normal button —
   same bug as the our-spirits.php listing buttons earlier. Sizing each button
   to its own text content fixes it here too. */
.shopify-grid__add,
.shopify-grid__more-info {
	flex: 0 0 auto !important;
	white-space: nowrap;
	padding: 10px 18px !important;
	font-size: 13px;
}

/* Solid orange "buy now"-style CTAs, overriding the site's shared outlined
   .btn look — these should read as the primary action, not a secondary link. */
.shopify-grid__add,
.shopify-detail__add {
	background: rgba(var(--color1), 1) !important;
	border-color: rgba(var(--color1), 1) !important;
	color: #fff !important;
}

.shopify-grid__add:hover,
.shopify-detail__add:hover {
	background: rgba(var(--color1), 0.85) !important;
	border-color: rgba(var(--color1), 0.85) !important;
}

.shopify-grid__more-info {
	background: none !important;
	border: 1px solid rgba(26, 26, 26, 0.3) !important;
	color: #1a1a1a !important;
}

.shopify-grid__more-info:hover {
	border-color: rgba(26, 26, 26, 0.6) !important;
}

.shopify-grid__loading,
.shopify-grid__empty,
.shopify-grid__error {
	text-align: center;
	opacity: 0.7;
	padding: 40px 0;
}

/* ---------- Product detail (inline + modal share this) ---------- */

.shopify-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	max-width: 100%;
}

/* Grid tracks default to a min size based on content's intrinsic size — for an
   image that means its full native pixel width, which can blow out the column
   (and the whole page, causing a horizontal scrollbar) despite width/object-fit
   rules on the <img> itself. minmax(0, 1fr) above + min-width: 0 here is the fix. */
.shopify-detail__gallery,
.shopify-detail__info {
	min-width: 0;
}

/* Compact mode (single-product.php's inline block) has no photo/gallery column
   at all — collapse to a single column instead of leaving an empty one. */
.shopify-detail--compact {
	grid-template-columns: 1fr;
}

@media (max-width: 780px) {
	.shopify-detail {
		grid-template-columns: 1fr;
	}
}

.shopify-detail__main-image {
	overflow: hidden;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* On the inline product-page block (as opposed to the bigger popup modal),
   keep the photo thumbnail-sized so it doesn't dominate next to a couple
   sentences of description. */
.shopify-product-block .shopify-detail__gallery {
	max-width: 280px;
}

.shopify-product-block {
	padding: 24px 0 0;
}

.shopify-detail__main-image img {
	width: 100%;
	height: auto;
	max-height: 480px;
	/* contain, not cover — a bottle photo is portrait-oriented, "cover" inside
	   a forced square just crops it down to the label. This shows the whole
	   product at its natural proportions instead. */
	object-fit: contain;
}

.shopify-product-block .shopify-detail__main-image img {
	max-height: 320px;
}

.shopify-detail__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.shopify-detail__thumb {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: none !important;
}

.shopify-detail__thumb.is-active {
	border-color: rgba(var(--color1), 1);
}

.shopify-detail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shopify-detail__title {
	margin-top: 0;
}

.shopify-detail__price {
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: 16px;
}

/* On the single-product.php compact block (no white card anymore), make the
   price a bold focal point matching the page's own gold accent color instead
   of a plain dark/small line of text. */
.shopify-product-block .shopify-detail__price {
	font-size: 2.5em;
	color: rgba(var(--color1), 1);
	margin-bottom: 20px;
}

.shopify-detail__option {
	margin-bottom: 16px;
}

.shopify-detail__option-label {
	font-weight: 600;
	margin-bottom: 6px;
}

.shopify-detail__option-values {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.shopify-detail__option-value {
	padding: 6px 14px;
	border: 1px solid rgba(var(--color1), 0.6);
	background: none !important;
	color: inherit !important;
	border-radius: 4px;
	cursor: pointer;
}

.shopify-detail__option-value.is-selected {
	background: rgba(var(--color1), 1);
	color: rgba(var(--color2), 1);
}

.shopify-detail__description {
	margin: 20px 0;
	line-height: 1.6;
}

.shopify-detail__add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.shopify-detail__error {
	opacity: 0.7;
}

/* ---------- Modal (grid card -> detail) ---------- */

.shopify-modal {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	pointer-events: none;
}

.shopify-modal.is-open {
	visibility: visible;
	pointer-events: auto;
}

.shopify-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.shopify-modal.is-open .shopify-modal__overlay {
	opacity: 1;
}

.shopify-modal__panel {
	position: relative;
	max-width: 900px;
	width: min(92vw, 900px);
	max-height: 90vh;
	overflow-y: auto;
	margin: 5vh auto;
	background: #fdfaf5;
	color: #1a1a1a;
	border-radius: 8px;
	padding: 40px;
	transform: translateY(20px);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.shopify-modal.is-open .shopify-modal__panel {
	transform: translateY(0);
	opacity: 1;
}

.shopify-modal__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none !important;
	border: none !important;
	color: inherit !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

/* ---------- Our Spirits — shrink the hero banner ---------- */
/* The base .home-sec1 .image-banner img rule (style.css) is shared by several
   pages' banners (homepage, our-story, etc.) at a fixed height: 100vh, so it
   can't be edited directly without affecting those other pages. Scoping to
   .our-sprit-banner + !important (equal selector specificity to the shared
   rule, so !important is needed to reliably win) shrinks just this page's
   banner to roughly a third of its original size. */
.our-sprit-banner .image-banner img {
	height: 55vh !important;
}

/* Vertical padding scaled down to match the shorter banner; horizontal left
   left/right unchanged from the theme's original value so this still lines
   up with the header and every other banner section on the site. */
.our-sprit-banner .bottom-wrap {
	padding: calc((23 / 1728) * 100vw) calc((50 / 1728) * 100vw) !important;
	gap: calc((17 / 1728) * 100vw) !important;
}

@media (max-width: 749px) {
	.our-sprit-banner .image-banner img {
		height: 55vh !important;
	}
	.our-sprit-banner .bottom-wrap {
		padding: calc((23 / 440) * 100vw) calc((25 / 440) * 100vw) !important;
		gap: calc((8 / 440) * 100vw) !important;
	}
}

/* Heading + smaller text used to sit in separate left/right columns
   (.left-part / .right-part, split via justify-content: space-between on
   .bottom-wrap). Now both live in .left-part, stacked — .bottom-wrap only
   has one child left, so space-between no longer does anything, but setting
   it explicitly documents the intent instead of relying on that fallback. */
.our-sprit-banner .bottom-wrap {
	justify-content: flex-start !important;
}

.our-sprit-banner .left-part p {
	margin-top: 8px;
	/* Optical alignment nudge — the h2 and p boxes share an identical left
	   edge, but "D" (Distillery) and "N" (Now) don't have the same left side
	   bearing in this font, and that gap gets magnified at the h2's much
	   larger size. Measured via canvas text metrics: "D"'s ink overshoots its
	   box by ~8px, "N"'s by only ~2px, a ~6px visual gap. This shifts the
	   paragraph left to compensate. Re-check if the wording/font changes. */
	margin-left: 6px;
	max-width: calc((420 / 1728) * 100vw);
}

@media (max-width: 749px) {
	.our-sprit-banner .left-part p {
		max-width: none;
	}
}

/* ---------- Our Spirits — "Our Spirits" / free-shipping line above the grid ---------- */
/* Twenty Twenty-One auto-applies generous spacing to every direct child
   section of .site-main (.site-main > * { margin: calc(3 * var(--global--
   spacing-vertical)) 0; }, ~90px top/bottom) — that's what was actually
   causing the huge gap the padding tweaks alone couldn't touch. */
.spirits-sec1-heading {
	margin-top: 24px !important;
	margin-bottom: 0 !important;
	text-align: center;
	padding: calc((4 / 1728) * 100vw) 24px calc((2 / 1728) * 100vw);
}

.spirits-sec1-heading h2 {
	margin: 0;
	font-size: calc((48 / 1728) * 100vw);
	color: rgba(var(--color3), 1);
}

.spirits-sec1-heading p {
	margin: 8px 0 0;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(var(--color1), 1);
}

@media (max-width: 749px) {
	.spirits-sec1-heading h2 {
		font-size: calc((32 / 440) * 100vw);
	}
}