/**
 * Artwork Product Showcase — customer-facing styles.
 *
 * Same design language as Artwork Designer and Artwork Add-On Ordering: the same tokens, the same
 * radii, the same pill buttons, the same blue price, the same focus rings. A customer moving
 * between the three should not be able to tell they are three plugins.
 *
 * Two things are defended against throughout, because a WordPress theme will do both:
 *   1. themes restyle every <button> on the page — padding, line-height, text-transform, shadows.
 *      Every button here therefore states its own values rather than inheriting whatever it lands
 *      in, and the two icon buttons centre their icon by absolute position, which no amount of
 *      inherited padding can shift.
 *   2. themes put a transform or a filter on their page wrapper, which pins a fixed overlay inside
 *      it. The script moves the overlay out to <body>, so the tokens live on both roots.
 */

.has-aps,
.has-aps-overlay{
  --has-aps-text:#0f172a;
  --has-aps-heading:#111827;
  --has-aps-muted:#64748b;
  --has-aps-soft-text:#475569;
  --has-aps-border:#e2e8f0;
  --has-aps-border-strong:#d7dee9;
  --has-aps-soft:#f8fafc;
  /* The same blue the Add-On page prices in, and the same deep navy it uses for a chosen card. */
  --has-aps-fee:#1247a5;
  --has-aps-ink:#0b1f40;
  --has-aps-included:#0f766e;
  /* Product photography is shot on white and must not be cropped, so the frame behind a contained
     image is white rather than grey. */
  --has-aps-media-bg:#ffffff;
  /* The launcher's colour and the lettering that reads on it. Both are written onto the element by
     the shortcode, so one button on a page can differ from another. The fallbacks here are what a
     button falls back to if the inline values ever go missing. */
  --has-aps-button:#3a7ee4;
  --has-aps-button-text:#ffffff;
  --has-aps-radius-lg:30px;
  --has-aps-radius-md:24px;
  --has-aps-radius-sm:16px;
  --has-aps-gutter:clamp(16px,3.4vw,30px);
  --has-aps-gap:14px;
  --has-aps-shadow:0 24px 60px rgba(15,23,42,.18);

  box-sizing:border-box;
  color:var(--has-aps-text);
  font-family:inherit;
  line-height:1.5;
}
.has-aps{
  display:flex;
  width:100%;
  margin:0;
}
.has-aps *,
.has-aps *:before,
.has-aps *:after,
.has-aps-overlay *,
.has-aps-overlay *:before,
.has-aps-overlay *:after{ box-sizing:border-box; }

/*
 * The theme reset.
 *
 * A theme that uppercases every button, or gives it a 12px vertical padding and a drop shadow, was
 * doing exactly that to this plugin's buttons. Each button below re-declares whatever it actually
 * wants, so what is on screen is what is written here and not a blend of two stylesheets.
 */
.has-aps :where(button),
.has-aps-overlay :where(button){
  margin:0;
  border:0;
  background:none;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
  text-shadow:none;
  box-shadow:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
/* Themes hang decorative pseudo-elements off buttons for icon fonts and hover effects. Inside this
   plugin they only add stray boxes to a layout that has already been decided. */
.has-aps :where(button):before,
.has-aps :where(button):after,
.has-aps-overlay :where(button):before,
.has-aps-overlay :where(button):after{ content:none; }

.has-aps-align-left{ justify-content:flex-start; }
.has-aps-align-center{ justify-content:center; }
.has-aps-align-right{ justify-content:flex-end; }
.has-aps-align-full .has-aps-btn{ width:100%; }
/* Only a full-width button has spare room to push the arrow into. */
.has-aps-align-full .has-aps-btn-chevron{ margin-left:auto; }

.has-aps-notice{
  border:1px dashed #cbd5e1;
  border-radius:var(--has-aps-radius-sm);
  background:#fff;
  padding:18px;
  color:var(--has-aps-soft-text);
  font-size:14px;
  line-height:1.5;
}

/* ---------- Buttons, matching the Add-On page ---------- */

.has-aps .has-aps-btn,
.has-aps-overlay .has-aps-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:48px;
  padding:12px 24px;
  border:2px solid transparent;
  border-radius:999px;
  background:var(--has-aps-button,#3a7ee4);
  color:var(--has-aps-button-text,#fff);
  font-family:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.2;
  text-align:left;
  text-transform:uppercase;
  /* A neutral lift first, then the same lift tinted with the button's own colour where the browser
     can mix it — so a recoloured button never keeps the last colour's glow. */
  box-shadow:0 14px 30px rgba(15,23,42,.18);
  box-shadow:0 16px 32px color-mix(in srgb,var(--has-aps-button,#3a7ee4) 32%,transparent);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.has-aps .has-aps-btn:hover,
.has-aps-overlay .has-aps-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 38px rgba(15,23,42,.24);
  box-shadow:0 20px 38px color-mix(in srgb,var(--has-aps-button,#3a7ee4) 40%,transparent);
}
.has-aps-btn:active{ transform:translateY(0); }
.has-aps-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aps-button,#3a7ee4) 60%,transparent);
  outline-offset:3px;
}

.has-aps .has-aps-btn-outline,
.has-aps-overlay .has-aps-btn-outline{
  background:transparent;
  border-color:var(--has-aps-button,#3a7ee4);
  color:var(--has-aps-button,#3a7ee4);
  box-shadow:none;
}
.has-aps-btn-outline:hover{
  background:var(--has-aps-button,#3a7ee4);
  color:var(--has-aps-button-text,#fff);
  box-shadow:0 12px 26px rgba(15,23,42,.20);
}

.has-aps .has-aps-btn-ghost,
.has-aps-overlay .has-aps-btn-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--has-aps-button,#3a7ee4);
  box-shadow:none;
}
.has-aps-btn-ghost:hover{ background:rgba(15,23,42,.06);box-shadow:none; }

.has-aps .has-aps-btn-compact,
.has-aps-overlay .has-aps-btn-compact{ min-height:46px;padding:10px 20px;font-size:13px; }

.has-aps-btn-mark{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:38px;height:38px;
  padding:0;
  border-radius:12px;
  background:color-mix(in srgb,var(--has-aps-button-text,#fff) 18%,transparent);
  color:inherit;
}
.has-aps-btn-outline .has-aps-btn-mark,
.has-aps-btn-ghost .has-aps-btn-mark{ background:color-mix(in srgb,var(--has-aps-button,#3a7ee4) 12%,transparent); }
/* Absolutely centred, so a theme's own padding on the parent cannot shift it. */
.has-aps-btn-mark svg{
  position:absolute;top:50%;left:50%;
  width:20px;height:20px;
  margin:0;
  transform:translate(-50%,-50%);
}

.has-aps-btn-lines{ display:grid;gap:3px;min-width:0; }
.has-aps-btn-lines strong{ font-size:inherit;font-weight:900;line-height:1.2;letter-spacing:.02em; }
.has-aps-btn-lines small{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  opacity:.78;line-height:1.2;
}

.has-aps-btn-chevron{ padding-left:2px;font-size:17px;opacity:.8;transition:transform .18s ease; }
.has-aps-btn:hover .has-aps-btn-chevron{ transform:translateX(3px); }

/* ---------- Icon buttons ---------- */

/*
 * The close button and the two arrows put their icon at the exact centre of the circle with
 * absolute positioning rather than by centring it inside the content box. A theme that adds
 * padding, a line-height or a font-size to buttons changes where that content box is — which is
 * how an X ends up sitting off-centre in its own circle on one site and not another.
 */
.has-aps-overlay .has-aps-close,
.has-aps-overlay .has-aps-arrow{
  position:relative;
  flex:0 0 auto;
  width:44px;height:44px;
  padding:0;
  border:1px solid var(--has-aps-border-strong);
  border-radius:999px;
  background:#fff;
  color:var(--has-aps-soft-text);
  font-size:0;
  line-height:0;
  transition:background .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease;
}
.has-aps-overlay .has-aps-close svg,
.has-aps-overlay .has-aps-arrow svg{
  position:absolute;top:50%;left:50%;
  display:block;
  margin:0;
  transform:translate(-50%,-50%);
}
.has-aps-overlay .has-aps-close svg{ width:20px;height:20px; }
.has-aps-overlay .has-aps-arrow svg{ width:22px;height:22px; }

.has-aps-overlay .has-aps-close{ margin-left:auto; }
.has-aps-overlay .has-aps-close:hover{ background:var(--has-aps-soft);color:var(--has-aps-heading);border-color:#94a3b8; }
.has-aps-overlay .has-aps-close:focus-visible,
.has-aps-overlay .has-aps-arrow:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aps-accent,#f97316) 55%,transparent);
  outline-offset:3px;
}

.has-aps-overlay .has-aps-arrow{
  display:none;
  align-self:center;
  width:46px;height:46px;
  margin:0 6px;
  color:var(--has-aps-heading);
  box-shadow:0 6px 18px rgba(15,23,42,.10);
}
.has-aps-overlay .has-aps-arrow:hover{ background:var(--has-aps-soft);border-color:#94a3b8; }
.has-aps-overlay .has-aps-arrow[disabled]{ opacity:.32;cursor:default;box-shadow:none; }

/* ---------- Overlay shell ---------- */

.has-aps-overlay[hidden]{ display:none; }
.has-aps-overlay{
  position:fixed;
  z-index:999999;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-family:inherit;
  line-height:1.5;
  color:var(--has-aps-text);
}
.has-aps-backdrop,
.has-aps-info-backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,15,28,.62);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  animation:has-aps-fade .22s ease both;
}

.has-aps-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:92vh;
  max-height:92dvh;
  padding:0;
  border-radius:var(--has-aps-radius-md) var(--has-aps-radius-md) 0 0;
  background:var(--has-aps-bg,#fff);
  box-shadow:var(--has-aps-shadow);
  animation:has-aps-rise .28s cubic-bezier(.22,.9,.3,1) both;
  overflow:hidden;
}

.has-aps-grab{
  display:block;
  width:44px;height:5px;
  margin:10px auto 0;
  border-radius:999px;
  background:#cbd5e1;
  flex:0 0 auto;
}

.has-aps-panel-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px var(--has-aps-gutter) 14px;
  border-bottom:1px solid var(--has-aps-border);
  flex:0 0 auto;
}
.has-aps-panel-titles{ min-width:0; }
.has-aps-panel-head h2{
  margin:0;
  color:var(--has-aps-heading);
  font-size:clamp(19px,2.4vw,26px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.01em;
}
.has-aps-panel-head p{
  margin:5px 0 0;
  color:var(--has-aps-muted);
  font-size:14px;
  line-height:1.45;
}

/* ---------- Slider ---------- */

/*
 * The row is stretched to exactly the height left over between the header and the footer, never
 * centred inside it. Centred, a card taller than the space it had was allowed to grow out of both
 * ends of the row and paint straight over the heading above it and the counter below — which is
 * what happened on a phone in landscape, or with the browser's own toolbars taking a bite out of
 * the window. The overflow rule is the backstop: nothing in the row can ever paint outside it.
 */
.has-aps-slider{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:0;
  overflow:hidden;
  flex:1 1 auto;
}

.has-aps-track{
  display:flex;
  gap:var(--has-aps-gap);
  width:100%;
  padding:18px var(--has-aps-gutter) 20px;
  /* Scroll padding has to match the track's own padding, or a snapped row comes to rest one
     padding-width in and never reads as being at the start. */
  scroll-padding-inline:var(--has-aps-gutter);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  align-items:stretch;
}
.has-aps-track:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aps-accent,#f97316) 55%,transparent);
  outline-offset:-3px;border-radius:var(--has-aps-radius-sm);
}
.has-aps-track::-webkit-scrollbar{ height:8px; }
.has-aps-track::-webkit-scrollbar-thumb{ background:#cbd5e1;border-radius:999px; }
.has-aps-track::-webkit-scrollbar-track{ background:transparent; }

/* The card is the Add-On page's product card, scaled up: same border, same radius, same lift on
   hover, same padded frame around the picture. */
.has-aps-slide{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:0 0 var(--has-aps-slide,84%);
  padding:10px;
  scroll-snap-align:start;
  border:1px solid var(--has-aps-border-strong);
  border-radius:var(--has-aps-radius-sm);
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.has-aps-slide:hover{ transform:translateY(-2px);border-color:#94a3b8;box-shadow:0 12px 26px rgba(15,23,42,.08); }
.has-aps-media{
  position:relative;
  /* First to give up height when the card has less room than it wants. Nothing is cropped by that:
     the photo is contained, so it simply gets smaller along with its frame. */
  flex:0 1 auto;
  min-height:0;
  /* Square, because product photography is: a garment shot upright is portrait or square, and a
     landscape frame either crops it or shrinks it to a stamp between two empty margins. */
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:11px;
  background:var(--has-aps-media-bg);
}
.has-aps-media img{
  display:block;
  width:100%;height:100%;
  /* Contained by default: these are product shots, and a garment with its hem cut off is worse
     than a little space either side of it. */
  object-fit:contain;
  object-position:50% 50%;
}
.has-aps-media.is-cover{ background:linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.has-aps-media.is-cover img{ object-fit:cover;object-position:50% 18%;transition:transform .22s ease; }
/* Only a photo that already fills its frame may grow on hover. Zooming a contained photo would
   push the product past the edges of the frame — the exact cropping this setting exists to avoid. */
.has-aps-slide:hover .has-aps-media.is-cover img{ transform:scale(1.02); }
.has-aps-media-fallback{
  display:grid;
  place-items:center;
  width:100%;height:100%;
  color:#94a3b8;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

.has-aps-slide-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto;
  align-items:center;
  padding:12px 6px 4px;
  min-width:0;
  min-height:0;
}
.has-aps-slide-body h3{
  margin:0;
  color:var(--has-aps-text);
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-wrap:balance;
}
.has-aps-summary{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  color:var(--has-aps-soft-text);
  font-size:13px;
  line-height:1.4;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  /* Centred with the name above it. A centred title over a left-aligned line reads as a mistake. */
  text-align:center;
}
.has-aps-overlay .has-aps-info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:46px;
  margin:12px 0 0;
  padding:10px 16px;
  border:0;
  border-radius:999px;
  background:#e5e7eb;
  color:var(--has-aps-heading);
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.2;
  text-transform:uppercase;
  transition:background .16s ease,color .16s ease;
}
.has-aps-info-btn:hover{ background:var(--has-aps-ink);color:#fff; }
.has-aps-info-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aps-accent,#f97316) 55%,transparent);
  outline-offset:3px;
}
.has-aps-info-mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:19px;height:19px;
  border:1.5px solid currentColor;
  border-radius:999px;
  font-size:11px;
  font-style:italic;
  font-weight:900;
  line-height:1;
}

.has-aps-panel-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:10px var(--has-aps-gutter) max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--has-aps-border);
  flex:0 0 auto;
}
.has-aps-progress{
  margin:0;
  color:var(--has-aps-muted);
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
}

/* ---------- The description reader ---------- */

.has-aps-info[hidden]{ display:none; }
.has-aps-info{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:2;
}
.has-aps-info-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:94vh;
  max-height:94dvh;
  border-radius:var(--has-aps-radius-md) var(--has-aps-radius-md) 0 0;
  background:#fff;
  box-shadow:var(--has-aps-shadow);
  animation:has-aps-rise .26s cubic-bezier(.22,.9,.3,1) both;
  overflow:hidden;
}
.has-aps-info-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px var(--has-aps-gutter) 13px;
  border-bottom:1px solid var(--has-aps-border);
  flex:0 0 auto;
}
.has-aps-info-eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--has-aps-accent,#f97316);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.has-aps-info-head h3{
  margin:0;
  color:var(--has-aps-heading);
  font-size:clamp(18px,2.2vw,23px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
}

.has-aps-info-body{
  flex:1 1 auto;
  min-height:0;
  padding:18px var(--has-aps-gutter) 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  color:var(--has-aps-soft-text);
  font-size:15.5px;
  line-height:1.62;
  -webkit-overflow-scrolling:touch;
}
.has-aps-info-body:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aps-accent,#f97316) 55%,transparent);
  outline-offset:-3px;
}

/* Whatever the shop owner wrote, made to behave inside a narrow scrolling column. */
.has-aps-info-body > *:first-child{ margin-top:0; }
.has-aps-info-body > *:last-child{ margin-bottom:0; }
.has-aps-info-body p{ margin:0 0 1em; }
.has-aps-info-body h1,
.has-aps-info-body h2,
.has-aps-info-body h3,
.has-aps-info-body h4{
  margin:1.4em 0 .5em;
  color:var(--has-aps-heading);
  font-weight:800;
  line-height:1.25;
}
.has-aps-info-body h1{ font-size:1.42em; }
.has-aps-info-body h2{ font-size:1.28em; }
.has-aps-info-body h3{ font-size:1.14em; }
.has-aps-info-body h4{ font-size:1.02em; }
.has-aps-info-body ul,
.has-aps-info-body ol{ margin:0 0 1em;padding-left:1.35em; }
.has-aps-info-body li{ margin:.3em 0; }
.has-aps-info-body a{ color:var(--has-aps-accent,#f97316);font-weight:800;text-decoration:underline;text-underline-offset:3px; }
.has-aps-info-body a:hover{ color:#c2410c; }
.has-aps-info-body strong{ color:var(--has-aps-heading); }
.has-aps-info-body blockquote{
  margin:1em 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--has-aps-accent,#f97316);
  color:var(--has-aps-muted);
  font-style:italic;
}
.has-aps-info-body img,
.has-aps-info-body video,
.has-aps-info-body iframe{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.1em auto;
  border-radius:11px;
}
.has-aps-info-body figure{ margin:1.1em 0; }
.has-aps-info-body figcaption{ margin-top:6px;color:var(--has-aps-muted);font-size:13px;text-align:center; }
.has-aps-info-body .alignleft,
.has-aps-info-body .alignright{ float:none;margin:1.1em auto; }
.has-aps-info-body table{ width:100%;border-collapse:collapse;margin:1em 0;font-size:14px; }
.has-aps-info-body th,
.has-aps-info-body td{ padding:8px 10px;border:1px solid var(--has-aps-border);text-align:left; }
.has-aps-info-body .has-aps-info-empty{ color:var(--has-aps-muted);font-style:italic; }

/*
 * Automatic product-photo fallback. It occupies the same 255 x 340 space as the portrait image
 * inserted by the WordPress editor in the common Full Description example. A landscape or square
 * source is contained rather than distorted, and on a phone the image becomes a centred block so
 * text never gets squeezed into an unreadably narrow column.
 */
.has-aps-info-body .has-aps-info-product-image{
  float:left;
  width:255px;
  max-width:100%;
  height:340px;
  margin:0 24px 16px 0;
  overflow:hidden;
  border-radius:11px;
  background:var(--has-aps-media-bg,#fff);
}
.has-aps-info-body .has-aps-info-product-image img{
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
  object-fit:contain;
  object-position:50% 50%;
}

.has-aps-info-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px var(--has-aps-gutter) max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--has-aps-border);
  flex:0 0 auto;
}
.has-aps-info-nav{ display:flex;gap:8px; }
/* Both footer controls stay on one line. Wrapped words in a pill button look like a fault, and on
   a phone a second footer row costs the description real reading space. */
.has-aps-info-foot .has-aps-btn-compact,
.has-aps-info-step{ white-space:nowrap; }
.has-aps-overlay .has-aps-info-step{
  min-height:42px;
  padding:8px 14px;
  border:1px solid var(--has-aps-border-strong);
  border-radius:999px;
  background:#fff;
  color:var(--has-aps-soft-text);
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.has-aps-info-step:hover{ background:var(--has-aps-soft);color:var(--has-aps-heading);border-color:#94a3b8; }
.has-aps-info-step:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aps-accent,#f97316) 55%,transparent);
  outline-offset:3px;
}
.has-aps-info-step[disabled]{ opacity:.35;cursor:default; }

/* ---------- Body lock ---------- */

body.has-aps-locked{ overflow:hidden !important; }

/* ---------- Breakpoints ---------- */

/* Tablet upwards: the sheet becomes a floating panel and the arrows appear. */
@media (min-width:768px){
  .has-aps-overlay{ align-items:center;padding:28px; }
  .has-aps-panel{
    width:min(1180px,100%);
    max-height:min(880px,90vh);
    border-radius:var(--has-aps-radius-lg);
  }
  .has-aps-panel > .has-aps-grab{ display:none; }
  .has-aps-panel-head{ padding-top:22px; }
  .has-aps-slide{ flex-basis:var(--has-aps-slide,calc((100% - var(--has-aps-gap)) / 2)); }
  .has-aps-overlay .has-aps-arrow{ display:block; }
  .has-aps-info{ padding:28px; }
  .has-aps-info-panel{
    width:min(760px,100%);
    max-height:min(820px,88vh);
    border-radius:var(--has-aps-radius-lg);
  }
  .has-aps-info-panel > .has-aps-grab{ display:none; }
}

/* Laptop: three across. */
@media (min-width:1080px){
  .has-aps-slide{ flex-basis:var(--has-aps-slide,calc((100% - 2 * var(--has-aps-gap)) / 3)); }
}

/* Desktop: four across, and a little more air between them. */
@media (min-width:1400px){
  .has-aps-track{ --has-aps-gap:16px; }
  .has-aps-slide{ flex-basis:var(--has-aps-slide,calc((100% - 3 * var(--has-aps-gap)) / 4)); }
}

/* Short screens — a laptop in landscape, or a phone held sideways — where a 4:3 photo would push
   the button off the bottom. The photo gives up its height first. */
@media (max-height:680px) and (min-width:768px){
  .has-aps-media{ aspect-ratio:4/3; }
  .has-aps-panel-head p{ display:none; }
}
@media (max-width:767px) and (max-height:680px){
  .has-aps-media{ aspect-ratio:4/3; }
}

/* Narrow phones: the footer controls tighten rather than wrap. */
@media (max-width:430px){
  .has-aps-info-foot{ gap:8px;padding-left:14px;padding-right:14px; }
  .has-aps-overlay .has-aps-info-foot .has-aps-btn-compact{ padding:10px 14px;font-size:12.5px; }
  .has-aps-overlay .has-aps-info-step{ padding:8px 11px;font-size:11px; }
  .has-aps-panel-foot{ gap:10px;justify-content:center; }
  .has-aps .has-aps-btn,
  .has-aps-overlay .has-aps-btn{ padding:12px 18px;font-size:14px;gap:11px; }
}

@media (max-width:640px){
  .has-aps-info-body .has-aps-info-product-image{
    float:none;
    width:min(255px,100%);
    height:auto;
    aspect-ratio:3/4;
    margin:0 auto 18px;
  }
}

@keyframes has-aps-rise{
  from{ transform:translateY(28px);opacity:0; }
  to{ transform:translateY(0);opacity:1; }
}
@keyframes has-aps-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .has-aps-panel,
  .has-aps-info-panel,
  .has-aps-backdrop,
  .has-aps-info-backdrop{ animation:none; }
  .has-aps-track{ scroll-behavior:auto; }
  .has-aps-btn,
  .has-aps-slide,
  .has-aps-media.is-cover img,
  .has-aps-btn-chevron{ transition:none; }
}

@media (forced-colors:active){
  .has-aps-slide,
  .has-aps-panel,
  .has-aps-info-panel{ border:1px solid CanvasText; }
}
