/* Quick add: the card's cart button and the popup (assets/js/quick-add.js). */
/* The button sits beside the image link, not inside it: the media box is what it is placed against (12px, 8px on phones via components.css, as the old arrow). */
.au-product-media{position:relative}
.au-quick-btn{position:absolute;right:12px;bottom:12px;z-index:2;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--ink);transition:transform var(--duration) ease,background-color var(--duration) ease}
.au-quick-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* It is a link now: base.css turns links terracotta on hover, which would stick after a tap on a touch screen. */
.au-quick-btn,.au-quick-btn:hover,.au-quick-btn:focus-visible{color:var(--ink)}
/* Only where there is a real pointer: on a touch screen a tap leaves :hover on, which would keep the second photo
   showing (and the button raised) after the popup closes. */
@media(hover:hover){
	.au-quick-btn:hover{transform:scale(1.06)}
	/* The second photo shows on hover anywhere on the photo, the button included (it is no longer inside the link). */
	.au-product-media:hover .au-alternate{opacity:1}
}
@media(hover:none){.au-quick-btn:hover{background:var(--surface)}}

/* The dialog scrolls; the head (name, close) stays at the top, the photos stay in view beside the picker and Add to bag stays at the bottom
   edge. No top or bottom padding on the dialog: the head and the foot carry their own, so stuck and resting look the same.
   --au-quick-head is the head's height, measured by quick-add.js on the dialog (96px until then). */
/* scroll-padding-bottom: a little more than the pinned foot (about 110px, 90px plus the safe area on phones), so when a script scrolls the
   picker's error line into view ("nearest") it lands above the foot and not under it. */
dialog:has(.au-quick){width:min(880px,calc(100% - 32px));padding:0 var(--space-6);scroll-padding-top:var(--au-quick-head,96px);scroll-padding-bottom:132px}
.au-quick .au-dialog-head{position:sticky;top:0;z-index:3;margin:0;padding:var(--space-6) 0 var(--space-4);background:var(--bg)}
/* Names run to 80 to 120 characters: two lines on a desktop, three on a phone; the heading still holds the whole name for screen readers. */
.au-quick .au-dialog-head h2{font-size:var(--text-2xl);outline:none;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.au-quick-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-6);align-items:start}
.au-quick-gallery{position:sticky;top:var(--au-quick-head,96px)} /* just under the head */
.au-quick-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0;border-radius:var(--radius-card);background:var(--surface)}
.au-quick-track::-webkit-scrollbar{display:none}
.au-quick-track:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.au-quick-slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1}
.au-quick-slide img{width:100%;height:100%;object-fit:cover;display:block}
.au-quick-step{position:absolute;top:calc(50% - 9px);translate:0 -50%;background:var(--surface);border:1px solid var(--border)} /* 9px: half of the dots row under the photo */
.au-quick-step--prev{left:8px}
.au-quick-step--prev .au-icon{rotate:180deg} /* the chevron icon points right */
.au-quick-step--next{right:8px}
.au-quick-dots{display:flex;justify-content:center;gap:6px;margin-top:var(--space-3)}
.au-quick-dots:empty{display:none}
.au-quick-dots span{width:6px;height:6px;border-radius:50%;background:var(--border)}
.au-quick-dots span.is-on{background:var(--ink)}
.au-quick-info{display:grid;gap:var(--space-3);min-width:0}
/* The card styles its eyebrow only inside .au-product-card; the popup is outside it, so the same look is set here. */
.au-quick-info .au-category-label{margin:0;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.au-quick-price .au-price{font-size:var(--text-lg)}
.au-quick-price:empty,.au-quick-urgency:empty{display:none}
.au-quick-form{display:grid;gap:var(--space-4)}
/* Pinned to the bottom of the scrolling dialog: the button, then the bundle note and the details link on one row (they wrap if they do not fit). */
.au-quick-foot{position:sticky;bottom:0;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 var(--space-3);background:var(--bg);border-top:1px solid var(--border);padding:var(--space-3) 0 var(--space-6)}
/* The picker's message sits first in the foot, always in sight. It stays rendered when empty (a role=alert region that is display:none
   is not in the accessibility tree, so its first message might not be announced): an empty paragraph has no height and, with no row
   gap in the foot (the rows below carry their own 4px top margin), no room either. */
.au-quick-foot .au-error-text{flex:1 1 100%;margin:0 0 var(--space-1);text-align:center;font-size:var(--text-sm);line-height:1.35}
.au-quick-foot .au-error-text:empty{margin-bottom:0}
.au-quick-submit{flex:1 1 100%;width:100%;margin:0}
.au-quick-note{margin:var(--space-1) 0 0;text-align:center;font-size:var(--text-xs)}
.au-quick-link{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:var(--space-1);font-size:var(--text-sm)}

/* Phones: a sheet from the bottom, Add to bag always in reach of the thumb. */
@media(max-width:699px){
	dialog:has(.au-quick){width:100%;max-width:100%;margin:auto 0 0;max-height:90dvh;border-radius:var(--radius-overlay) var(--radius-overlay) 0 0;padding:0 var(--space-4);scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
	dialog[open]:has(.au-quick){animation:au-quick-up .28s ease-out}
	.au-quick .au-dialog-head{padding:var(--space-4) 0}
	.au-quick .au-dialog-head h2{font-size:var(--text-lg);-webkit-line-clamp:3}
	/* A 72px photo beside the category, price and urgency line; the form takes the full width below.
	   The info box dissolves into the grid so its children can sit beside the photo. Rows have no gap
	   (spacing is margins on what is there), the last of the three rows takes what the photo needs, so a
	   missing category or urgency line leaves no hole. */
	.au-quick-body{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--space-3);row-gap:0}
	.au-quick-info{display:contents}
	.au-quick-gallery{position:relative;top:auto;grid-column:1;grid-row:1 / span 3} /* top:auto: the sticky offset above would push a relative box down */
	.au-quick-track{width:72px;height:72px;overflow:hidden}
	.au-quick-slide:nth-child(n+2){display:none}
	.au-quick-step,.au-quick-dots{display:none}
	.au-category-label + .au-quick-price{margin-top:var(--space-1)}
	.au-quick-price + .au-quick-urgency{margin-top:var(--space-2)}
	.au-quick-form{grid-column:1 / -1;margin-top:var(--space-4)}
	.au-quick-foot{margin:0 calc(var(--space-4) * -1);padding:var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom))}
}
@media(max-width:767px){
	.au-quick-btn::after{content:"";position:absolute;inset:-4px} /* a 44px target around the 36px button (components.css sizes it and sets 8px offsets up to 767px) */
}
@keyframes au-quick-up{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){dialog[open]:has(.au-quick){animation:none}.au-quick-btn{transition:none}}