/* Nature's Lines — gift carousel (feature 3). Visual 1:1 with the design etalon
   (Natureslines.dc.html): a surface band with sub-section chips and a horizontally
   scrolling row of gift cards, each with a round gold "+" express-add. Tokens (--nl-*)
   from header.css :root; lein register inherits the swapped tokens via .nl-product.is-lein. */

/* ---- column containment ---------------------------------------------------
   The carousel lives inside the product summary column (.nl-product__summary),
   a grid item of .nl-product__grid (1fr 1fr). A flex/grid item's automatic
   minimum size is its CONTENT width — for the summary that becomes the sum of
   all 42 gift cards, which blows the column to full width and squeezes the
   gallery track to ~0 (photo gone). min-width:0 (and minmax(0,1fr) tracks)
   lets the column shrink so the lane scrolls horizontally within it instead. */
.nl-product__summary { min-width: 0; }
@media (min-width: 768px) {
	.nl-product__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
	.nl-product__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* full-width band UNDER the two-column product block (etalon D-TOODE). It breaks out of
   .nl-product's gutter so the surface strip spans the whole content width, then restores
   the inner padding so the carousel lines up with the columns above. */
.nl-giftc-band {
	margin: 28px calc(-1 * var(--nl-gutter, 24px)) 0;
	padding: 24px var(--nl-gutter, 24px) 10px;
	background: var(--nl-surface, #f7f5f1);
	border-top: 1px solid var(--nl-line, #e6e3dc);
	border-bottom: 1px solid var(--nl-line, #e6e3dc);
}
.nl-giftc {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	min-width: 0; max-width: 100%;
}

/* ---- head: title + note ---- */
.nl-giftc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nl-giftc__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 18px; color: var(--nl-ink, #222222);
}
.nl-giftc__note { font-size: 11.5px; line-height: 1.5; color: var(--nl-mute, #6e6e6e); max-width: 440px; }

/* ---- chips ---- */
.nl-giftc__chips { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.nl-giftc__chip {
	flex: 0 0 auto; cursor: pointer;
	border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0;
	padding: 8px 15px; font: 600 12.5px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	background: var(--nl-canvas, #fff); color: var(--nl-ink, #222222);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nl-giftc__chip:hover { border-color: var(--nl-sage, #abc8bf); }
.nl-giftc__chip.is-active { background: var(--nl-ink, #222222); color: #fff; border-color: var(--nl-ink, #222222); }

/* ---- size-first warning ---- */
.nl-giftc__warn {
	margin-top: 12px; padding: 10px 13px; border-radius:  0;
	background: #fbeee0; border: 1px solid var(--nl-gold, #1c1c1c);
	font-size: 12px; font-weight: 600; color: #8a6a26;
	display: inline-flex; align-items: center; gap: 8px;
}
.nl-giftc__warn[hidden] { display: none; }

/* ---- card tracks ---- */
.nl-giftc__track { display: none; gap: 12px; overflow-x: auto; padding: 14px 0 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.nl-giftc__track.is-active { display: flex; }
.nl-giftc__track[hidden] { display: none; }

.nl-giftc-card {
	flex: 0 0 auto; width: 150px; scroll-snap-align: start;
	border-radius:  0; padding: 9px; background: var(--nl-canvas, #fff);
	border: 1px solid var(--nl-line, #e6e3dc);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.nl-giftc-card.is-selected { border: 1.5px solid var(--nl-gold, #1c1c1c); box-shadow: 0 0 0 3px rgba(28, 28, 28, .16); }
.nl-giftc-card__media {
	width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius:  0; overflow: hidden;
	background: var(--nl-surface, #f7f5f1); border: 1px solid var(--nl-line, #e6e3dc);
}
.nl-giftc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-giftc-card__name {
	font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--nl-ink, #222222);
	margin-top: 7px; height: 30px; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nl-giftc-card__note { font-size: 10.5px; color: var(--nl-mute, #6e6e6e); margin-top: 2px; }
.nl-giftc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.nl-giftc-card__price { font-size: 13.5px; font-weight: 700; color: var(--nl-ink, #222222); font-feature-settings: "tnum"; }
.nl-giftc-card__price .amount { font-weight: 700; }
.nl-giftc-card__add {
	flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius:  0; cursor: pointer;
	background: var(--nl-gold, #1c1c1c); color: #fff;
	font-size: 18px; font-weight: 700; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .10);
	transition: transform .12s ease, opacity .12s ease;
}
.nl-giftc-card__add:hover { transform: translateY(-1px); }
.nl-giftc-card__add:active { transform: translateY(0); }
.nl-giftc-card__add.is-loading { opacity: .6; pointer-events: none; }

/* ---- tablet / desktop ---- */
@media (min-width: 768px) {
	.nl-giftc-band { margin-top: 40px; padding-top: 30px; padding-bottom: 14px; }
	.nl-giftc__title { font-size: 21px; }
	.nl-giftc__note { font-size: 12.5px; }
	.nl-giftc__chip { padding: 9px 17px; font-size: 13px; }
	.nl-giftc__track { gap: 16px; }
	.nl-giftc-card { width: 168px; padding: 10px; }
	.nl-giftc-card__name { font-size: 13px; height: 32px; }
	.nl-giftc-card__note { font-size: 11px; }
	.nl-giftc-card__price { font-size: 14px; }
	.nl-giftc-card__add { width: 32px; height: 32px; }
}

/* thin, unobtrusive scrollbars for the horizontal rails */
.nl-giftc__chips::-webkit-scrollbar, .nl-giftc__track::-webkit-scrollbar { height: 6px; }
.nl-giftc__chips::-webkit-scrollbar-thumb, .nl-giftc__track::-webkit-scrollbar-thumb { background: var(--nl-line, #e6e3dc); border-radius:  0; }