/* =========================================================================
   CLUTCHES — Shared components (product card, breadcrumbs, pills, accordion)
   ========================================================================= */

/* ---- Product card ---- */
.product-card { position: relative; display: flex; flex-direction: column; }
/* image + quick-add wrapper: the quick-add button is anchored to the bottom
   of the image, never over the brand/title/price below it */
.product-card__visual { position: relative; }
.product-card__media {
	position: relative; display: block; overflow: hidden;
	background: #fff; border: 1px solid var(--c-line);
	border-radius: 0;
}
/* Ratio via padding hack — reliable in every Safari, unlike aspect-ratio
   inside flex/scroll containers. */
.product-card__media::before { content: ""; display: block; padding-block-start: 133.33%; }
.product-card__media img {
	position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
	object-fit: contain; padding: 4%;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* uniform card heights: titles clamp to two lines and always reserve them */
.product-card__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-block-size: 2.6em;
}
/* flex children must be allowed to shrink — no card content may widen it */
.product-card > *, .product-card__body > * { min-inline-size: 0; max-inline-size: 100%; }

/* carousel sections use the bare container--wide modifier (no base class =
   no padding): on phones give the section its gutters so headings and the
   first card never touch the viewport edge */
@media (max-width: 900px) {
	.product-carousel > .container--wide { padding-inline: var(--gutter); }
}
.product-card__media .img-hover { opacity: 0; }
.product-card:hover .img-hover { opacity: 1; }
.product-card:hover .img-main { opacity: 0; }

.product-card__badges { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.product-card .wishlist-heart {
	position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 3;
	inline-size: 36px; block-size: 36px; border-radius: 50%;
	background: rgba(255,255,255,.9); border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: var(--c-ink);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.product-card .wishlist-heart:hover { background: #fff; }
.wishlist-heart.is-active { color: var(--c-sale); }
.wishlist-heart.is-active .icon-heart { fill: var(--c-sale); }

.product-card__sizes {
	position: absolute; inset-block-end: 8px; inset-inline: 8px; z-index: 2;
	display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
	background: rgba(255,255,255,.92); padding: 6px; border-radius: var(--radius-sm);
	opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card:hover .product-card__sizes { opacity: 1; transform: translateY(0); }
.size-dot { font-size: 11px; color: var(--c-ink); padding: 2px 6px; border: 1px solid var(--c-line-strong); border-radius: 2px; }
.size-dot.is-out { color: var(--c-muted-2); text-decoration: line-through; border-style: dashed; }

.product-card__quickadd {
	position: absolute; inset-block-end: 8px; inset-inline: 8px; z-index: 2;
	opacity: 0; transform: translateY(6px);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card:hover .product-card__quickadd { opacity: 1; transform: translateY(0); }
.product-card__quickadd .btn { inline-size: 100%; padding: 10px; font-size: var(--fs-xs); }

.product-card__body { padding-block: var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.product-card__brand { font-size: var(--fs-xxs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-muted); }
.product-card__title { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-ink); line-height: 1.35; }
.product-card__price { font-size: var(--fs-sm); margin-block-start: 2px; }
.product-card__price ins { color: var(--c-sale); font-weight: var(--fw-bold); text-decoration: none; }
.product-card__price del { color: var(--c-muted-2); margin-inline-start: 6px; }

@media (max-width: 640px) {
	.product-card .wishlist-heart { inline-size: 34px; block-size: 34px; }
}

/* ---- Breadcrumbs ---- */
.breadcrumbs { font-size: var(--fs-xs); color: var(--c-muted); padding-block: var(--sp-4); display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-ink); }
.breadcrumbs .sep { color: var(--c-muted-2); }

/* ---- Pills / trending ---- */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
	display: inline-flex; align-items: center;
	padding: 9px 18px; border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill); font-size: var(--fs-sm);
	color: var(--c-ink); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pill:hover { background: var(--c-black); color: #fff; border-color: var(--c-black); }

/* ---- Accordion (PDP / policy) ---- */
.accordion { border-block-start: 1px solid var(--c-line); }
.accordion__item { border-block-end: 1px solid var(--c-line); }
.accordion__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; background: 0; border: 0; cursor: pointer; font-size: var(--fs-base); font-weight: var(--fw-medium); text-align: start; }
.accordion__trigger[aria-expanded="true"] .icon-plus { transform: rotate(45deg); }
/* The rotated plus (18px box -> ~25px diagonal bounding box) sits flush on the
   trigger's inline-end edge and poked ~4px past the body — the source of the
   iOS horizontal jiggle. Give it exactly that room; layout is otherwise identical. */
.accordion__trigger .icon-plus { flex: 0 0 auto; margin-inline-end: 4px; }
.accordion__panel { padding-block-end: var(--sp-4); color: var(--c-muted); font-size: var(--fs-sm); line-height: var(--lh-base); }

/* ---- Product grid (shared: wishlist, brands, search) ---- */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter) var(--sp-4); list-style: none; margin: 0; padding: 0; }
@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); } }

/* ---- Content / policy pages ---- */
.page-content { padding-block: var(--sp-5) var(--sp-8); }
.entry-title { font-family: var(--font-serif); font-size: var(--fs-2xl); margin-block-end: var(--sp-5); }
.entry-content { line-height: var(--lh-base); }
.entry-content h2 { font-size: var(--fs-lg); margin-block: var(--sp-5) var(--sp-3); }
.entry-content p { color: var(--c-ink); }
.plp-head { padding-block: var(--sp-4) var(--sp-5); }
.plp-title { font-family: var(--font-serif); font-size: var(--fs-2xl); margin: 0; }
.wishlist-empty { text-align: center; padding: var(--sp-8) 0; display: grid; gap: var(--sp-4); place-items: center; color: var(--c-muted); }

/* ---- Brands page ---- */
.brands-page { display: grid; gap: var(--sp-6); }
.brands-letter-group { border-block-start: 1px solid var(--c-line); padding-block-start: var(--sp-4); }
.brands-letter { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--c-muted); margin: 0 0 var(--sp-3); }
.brands-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 768px) { .brands-list { grid-template-columns: repeat(2, 1fr); } }

/* ---- Contact form ---- */
.clutches-contact-form { max-inline-size: 520px; display: grid; gap: var(--sp-3); }
.clutches-contact-form label { display: grid; gap: 4px; font-size: var(--fs-sm); }

/* ---- Quantity stepper ---- */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); }
.qty-stepper button { inline-size: 40px; block-size: 44px; background: 0; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-stepper input { inline-size: 46px; text-align: center; border: 0; border-inline: 1px solid var(--c-line); border-radius: 0; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---- Club signup (phone → OTP → coupon); shared by home band + footer ---- */
.club-form { display: grid; gap: var(--sp-3); position: relative; }
.club-form [hidden] { display: none !important; } /* steps toggle via the hidden attribute; beats .club-done's display:grid */
.club-row { display: flex; gap: var(--sp-2); max-inline-size: 520px; margin-inline: auto; inline-size: 100%; }
.club-row input { flex: 1 1 auto; min-inline-size: 0; }
.club-row .btn { flex: 0 0 auto; }
.club-phone, .club-otp { direction: ltr; text-align: right; }
.club-otp { letter-spacing: .3em; font-weight: var(--fw-bold); }
.club-consent { display: flex; gap: var(--sp-2); align-items: flex-start; justify-content: center; font-size: var(--fs-xs); color: var(--c-muted); text-align: start; margin-block-start: var(--sp-3); }
.club-consent input { margin-block-start: 3px; }
.club-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.club-hint { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.club-actions { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; margin: var(--sp-3) 0 0; font-size: var(--fs-xs); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.link-btn:disabled { opacity: .55; cursor: default; text-decoration: none; }
.club-done { display: grid; gap: var(--sp-3); justify-items: center; }
.club-done-title, .club-done-note { margin: 0; }
.club-code-row { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; flex-wrap: wrap; margin: 0; }
.club-code { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: .12em; padding: 10px 18px; border: 2px dashed currentColor; }
.club-done-note { font-size: var(--fs-xs); color: var(--c-muted); }
/* Footer variant: dark background, start-aligned */
.footer-col--connect .club-row, .footer-col--connect .club-consent, .footer-col--connect .club-actions, .footer-col--connect .club-code-row { justify-content: flex-start; margin-inline: 0; }
.footer-col--connect .club-done { justify-items: start; }
.footer-col--connect .club-row input { background: transparent; border-color: #555; color: #fff; }
.footer-col--connect .club-row input::placeholder { color: #8a8781; }
.footer-col--connect .club-row .btn { border-color: #fff; background: #fff; color: var(--c-black); }
.footer-col--connect .club-consent, .footer-col--connect .club-done-note { color: #a8a49d; }
@media (max-width: 640px) {
	.club-row { flex-direction: column; }
	.club-row input, .club-row .btn { inline-size: 100%; }
}