/**
 * Artwork Add-On Ordering — customer-facing styles.
 *
 * Built to sit alongside Artwork Designer rather than beside it: the same tokens, the same shell,
 * the same step panel, the same product card, the same summary panel and the same pill buttons.
 * Where the Designer hardcodes a colour that it also declares as a variable, the variable is used
 * here so a single palette change carries across both pages.
 */

.has-aao-app{
  --has-aao-text:#0f172a;
  --has-aao-heading:#111827;
  --has-aao-muted:#64748b;
  --has-aao-soft-text:#475569;
  --has-aao-border:#e2e8f0;
  --has-aao-border-strong:#d7dee9;
  --has-aao-soft:#f8fafc;
  --has-aao-fee:#1247a5;
  --has-aao-ink:#0b1f40;
  --has-aao-radius-lg:30px;
  --has-aao-radius-md:24px;
  --has-aao-radius-sm:16px;

  box-sizing:border-box;
  width:100%;
  max-width:1460px;
  margin:0 auto;
  /* The shortcode usually lands in a full-width page template, so the page gutter has to come
     from here or the content runs edge to edge on both desktop and phone. */
  padding:clamp(16px,2.4vw,32px) clamp(16px,3vw,40px) clamp(28px,4vw,56px);
  background:linear-gradient(180deg,var(--has-aao-bg,#f8fafc),#ffffff 62%);
  color:var(--has-aao-text);
  font-family:inherit;
  line-height:1.5;
}
.has-aao-app *,
.has-aao-app *:before,
.has-aao-app *:after{ box-sizing:inherit; }

.has-aao-app .screen-reader-text{
  position:absolute !important;
  width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;
  overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}

.has-aao-notice{
  border:1px solid var(--has-aao-border);
  border-radius:var(--has-aao-radius-md);
  background:#fff;
  padding:18px 20px;
  color:var(--has-aao-soft-text);
}

/* ---------- Hero ---------- */

.has-aao-hero{
  position:relative;
  overflow:hidden;
  margin:0 0 18px;
  padding:clamp(26px,4vw,44px);
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.18),transparent 34%),
    radial-gradient(circle at 78% 44%,rgba(255,255,255,.12),transparent 26%),
    linear-gradient(135deg,var(--has-aao-primary,#111827),#07111f 74%);
  color:#fff;
  box-shadow:0 28px 70px rgba(15,23,42,.16);
}
.has-aao-kicker{
  display:inline-block;
  margin:0 0 10px;
  color:var(--has-aao-accent,#f97316);
  font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
}
.has-aao-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,4.4vw,54px);
  letter-spacing:-.045em;
  line-height:.98;
}
.has-aao-hero p{
  margin:14px 0 0;
  max-width:62ch;
  color:rgba(255,255,255,.82);
  font-size:clamp(16px,1.6vw,21px);
  line-height:1.48;
}

/* ---------- Progress ---------- */

.has-aao-progress{
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid var(--has-aao-border);
  border-radius:var(--has-aao-radius-md);
  background:#fff;
  box-shadow:0 14px 36px rgba(15,23,42,.055);
}
.has-aao-progress-bar{
  height:12px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.has-aao-progress-bar span{
  display:block;height:100%;width:50%;
  background:var(--has-aao-accent,#f97316);
  transition:width .25s;
}
.has-aao-progress em{
  display:block;margin-top:9px;
  color:var(--has-aao-muted);
  font-style:normal;font-weight:900;
}

/* ---------- Step panel ---------- */

.has-aao-step{
  display:none;
  padding:clamp(22px,4vw,44px);
  border:1px solid var(--has-aao-border);
  border-radius:var(--has-aao-radius-lg);
  background:#fff;
  box-shadow:0 22px 56px rgba(15,23,42,.075);
  animation:aaoIn .25s ease;
}
.has-aao-step.is-active{ display:block; }
.has-aao-step[hidden]{ display:none; }
@keyframes aaoIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.has-aao-step-head h3{
  margin:0;
  color:var(--has-aao-text);
  font-size:clamp(26px,3.6vw,48px);
  letter-spacing:-.035em;
  line-height:1.06;
}
.has-aao-step-head p{
  margin:12px 0 0;
  max-width:70ch;
  color:var(--has-aao-muted);
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.55;
}
.has-aao-chosen-sport{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:14px 0 0 !important;
  font-size:15px !important;
  color:var(--has-aao-soft-text) !important;
}
.has-aao-chosen-sport strong{ color:var(--has-aao-text); }

/* ---------- Sport cards ---------- */

/* Four across on a desktop, stepping down to a single stacked column on a phone. */
.has-aao-sport-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:22px 0 0;
}
/* A real button: tapping one is the whole of step one, so it behaves like a link to that sport. */
.has-aao-sport-card{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;
  margin:0 !important;
  padding:10px 10px 14px;
  border:2px solid #e5e7eb;
  border-radius:20px;
  background:#fff;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:box-shadow .18s,border-color .18s,transform .18s,background .18s;
}

.has-aao-sport-thumb{
  position:relative;
  display:block;
  width:100%;
  /* A fixed 4:3 frame keeps every tile the same shape whatever the store owner uploads, and
     caps the height so a large original cannot take over the page. */
  aspect-ratio:4 / 3;
  max-height:210px;
  overflow:hidden;
  border-radius:14px;
  background:#f1f5f9;
}
.has-aao-sport-thumb img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  /* Anchored per sport in the settings. The default keeps the top of the frame, because that is
     where faces are and heads are what a centre crop removes first. */
  object-position:50% 0%;
  transition:transform .22s;
}
/* "Show the whole picture": nothing is cropped, the spare space is filled in behind instead. */
.has-aao-sport-thumb.is-contain{ background:#0f172a; }
.has-aao-sport-thumb.is-contain img{ object-fit:contain; }
.has-aao-sport-card:hover .has-aao-sport-thumb img{ transform:scale(1.03); }
.has-aao-sport-initial{
  display:grid;place-items:center;width:100%;height:100%;
  background:linear-gradient(145deg,#e2e8f0,#f8fafc);
  color:#94a3b8;font-size:38px;font-weight:900;letter-spacing:-.02em;
}
.has-aao-sport-body{ display:flex;flex-direction:column;gap:2px;min-width:0;margin:12px 4px 0;text-align:center; }
.has-aao-sport-body strong{ color:var(--has-aao-heading);font-size:17px;font-weight:900;line-height:1.25; }
.has-aao-sport-body small{ color:var(--has-aao-muted);font-size:13px; }
/* Says what the tile does, so it never reads as something to tick. */
.has-aao-sport-go{
  margin-top:8px;
  color:var(--has-aao-accent,#f97316);
  font-size:13px;font-weight:900;letter-spacing:.02em;
  opacity:.85;
  transition:opacity .18s,transform .18s;
}
.has-aao-sport-card:hover{ transform:translateY(-2px);border-color:var(--has-aao-accent,#f97316);box-shadow:0 14px 30px rgba(15,23,42,.10); }
.has-aao-sport-card:hover .has-aao-sport-go{ opacity:1; }
.has-aao-sport-card:active{ transform:translateY(0);box-shadow:0 8px 18px rgba(15,23,42,.10); }
/* Which sport is currently being shown, for when a customer comes back to change it. */
.has-aao-sport-card.is-selected{
  border-color:var(--has-aao-accent,#f97316);
  background:#fff7ed;
}
.has-aao-sport-card:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aao-accent,#f97316) 55%,transparent);
  outline-offset:3px;
}

/* ---------- Design-only note ---------- */

.has-aao-note{
  display:flex;align-items:flex-start;gap:12px;
  margin:22px 0 0;
  padding:16px 18px;
  border:1px solid var(--has-aao-border);
  border-radius:var(--has-aao-radius-sm);
  background:var(--has-aao-soft);
}
.has-aao-note span{ color:var(--has-aao-accent,#f97316);font-size:18px;line-height:1.3; }
.has-aao-note p{ margin:0;color:var(--has-aao-soft-text);font-size:14px;line-height:1.5; }

/* ---------- Product cards ---------- */

.has-aao-product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:22px 0 0;
}
.has-aao-product-card{
  position:relative;
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:96px;
  margin:0 !important;
  padding:10px;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--has-aao-border-strong);
  border-radius:var(--has-aao-radius-sm);
  background:#fff;
  cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.has-aao-product-card[hidden]{ display:none !important; }
.has-aao-product-card:hover{ transform:translateY(-2px);border-color:#94a3b8;box-shadow:0 12px 26px rgba(15,23,42,.08); }
.has-aao-product-card input{ position:absolute;opacity:0;pointer-events:none; }

.has-aao-card-check{
  position:absolute;z-index:2;top:10px;right:10px;
  display:grid;place-items:center;
  width:29px;height:29px;
  border:2px solid var(--has-aao-ink);
  border-radius:999px;
  background:#fff;color:transparent;
  font-size:14px;
  transition:background .18s,color .18s;
}
.has-aao-product-card:has(input:checked),
.has-aao-product-card.is-selected{
  border:2px solid var(--has-aao-ink);
  box-shadow:0 0 0 3px rgba(11,31,64,.10);
}
.has-aao-product-card:has(input:checked) .has-aao-card-check,
.has-aao-product-card.is-selected .has-aao-card-check{ background:var(--has-aao-ink);color:#fff; }
.has-aao-product-card:focus-within{
  outline:3px solid color-mix(in srgb,var(--has-aao-accent,#f97316) 45%,transparent);
  outline-offset:2px;
}
.has-aao-product-card.is-locked{ opacity:.45;cursor:not-allowed; }
.has-aao-product-card.is-locked:hover{ transform:none;box-shadow:none;border-color:var(--has-aao-border-strong); }

.has-aao-card-image{
  display:block;width:72px;height:72px;
  overflow:hidden;border-radius:11px;background:#f1f5f9;
}
.has-aao-card-image img{ display:block;width:100%;height:100%;object-fit:cover;transition:transform .22s; }
.has-aao-product-card:hover .has-aao-card-image img{ transform:scale(1.025); }
.has-aao-image-placeholder{
  display:grid;place-items:center;width:100%;height:100%;
  color:#94a3b8;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.has-aao-card-body{
  display:flex;align-self:stretch;min-width:0;
  flex-direction:column;justify-content:center;
  padding:1px 32px 1px 0;
}
.has-aao-card-body strong{ color:var(--has-aao-text);font-size:14px;font-weight:800;line-height:1.25; }
.has-aao-card-body small{
  display:-webkit-box;
  margin:5px 0 7px;
  color:var(--has-aao-soft-text);font-size:12px;line-height:1.3;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.has-aao-card-fee{
  margin-top:auto;
  color:var(--has-aao-fee);
  font-size:13px;font-style:normal;font-weight:900;
}
/* The badge gets its own band across the top of the card so it can never sit on the product name. */
.has-aao-product-card.is-recommended{ padding-top:32px; }
.has-aao-product-card.is-recommended:before{
  content:'Recommended';
  position:absolute;z-index:2;top:8px;left:10px;
  padding:3px 9px;border-radius:999px;
  background:var(--has-aao-accent,#f97316);color:#fff;
  font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;
}

.has-aao-empty{
  margin:22px 0 0;
  padding:18px;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:var(--has-aao-soft);
  color:var(--has-aao-soft-text);
  text-align:center;
}

/* ---------- Identification fields ---------- */

.has-aao-details{ margin:30px 0 0;padding:24px 0 0;border-top:1px solid var(--has-aao-border); }
.has-aao-details h4{ margin:0;color:var(--has-aao-heading);font-size:clamp(19px,2vw,25px);letter-spacing:-.02em; }
.has-aao-details-intro{ margin:8px 0 0;color:var(--has-aao-muted);font-size:15px; }
.has-aao-field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin:20px 0 0;
}
.has-aao-field{
  margin:0 !important;
  display:flex;flex-direction:column;gap:7px;
  padding:16px 18px;
  border:1px solid var(--has-aao-border);
  border-radius:var(--has-aao-radius-md);
  background:var(--has-aao-soft);
}
.has-aao-field.is-wide{ grid-column:1 / -1; }
.has-aao-field label{ color:var(--has-aao-heading);font-size:15px;font-weight:900;line-height:1.35; }
.has-aao-required{ color:#dc2626;margin-left:2px; }
.has-aao-field input,
.has-aao-field textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:var(--has-aao-radius-sm);
  background:#fff;
  color:var(--has-aao-text);
  /* 16px keeps iOS Safari from zooming the page when a field takes focus. */
  font-family:inherit;font-size:16px;line-height:1.4;
}
.has-aao-field textarea{ min-height:96px;resize:vertical; }
.has-aao-field input:focus,
.has-aao-field textarea:focus{
  outline:3px solid color-mix(in srgb,var(--has-aao-accent,#f97316) 40%,transparent);
  outline-offset:1px;
  border-color:var(--has-aao-accent,#f97316);
}
.has-aao-field-error{ display:none;color:#b91c1c;font-size:13px;font-weight:800; }
.has-aao-field.has-error{ border-color:#fca5a5;background:#fef2f2; }
.has-aao-field.has-error input,
.has-aao-field.has-error textarea{ border-color:#dc2626; }
.has-aao-field.has-error .has-aao-field-error{ display:block; }

/* ---------- Buttons ---------- */

.has-aao-actions{ display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0; }
.has-aao-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  padding:16px 28px;
  border:0;border-radius:999px;
  font-family:inherit;font-size:15px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s,opacity .18s;
}
.has-aao-btn-primary{
  background:var(--has-aao-accent,#f97316);
  color:#fff;
  box-shadow:0 16px 32px rgba(249,115,22,.25);
}
.has-aao-btn-primary:hover:not(:disabled){ transform:translateY(-1px);box-shadow:0 20px 38px rgba(249,115,22,.32); }
.has-aao-btn-primary:disabled{ opacity:.5;cursor:not-allowed;box-shadow:none;transform:none; }
.has-aao-btn-ghost{ background:#e5e7eb;color:var(--has-aao-heading); }
.has-aao-btn-ghost:hover{ background:#d7dbe2; }
.has-aao-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-aao-accent,#f97316) 55%,transparent);
  outline-offset:3px;
}
.has-aao-link{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:0 2px;
  border:0;background:transparent;
  color:var(--has-aao-accent,#f97316);
  font:inherit;font-size:14px;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.has-aao-link:hover{ color:#c2410c; }
.has-aao-link:focus-visible{ outline:2px solid currentColor;outline-offset:3px; }

/* ---------- Errors ---------- */

.has-aao-error{
  display:none;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:#fee2e2;
  color:#991b1b;
  font-size:14px;font-weight:800;
}
.has-aao-error.is-visible{ display:block; }

/* ---------- Summary panel ---------- */

.has-aao-summary{
  width:100%;
  max-width:760px;
  margin:28px auto 0;
  padding:26px;
  border:1px solid #e5e7eb;
  border-radius:var(--has-aao-radius-lg);
  background:#fff;
  box-shadow:0 22px 56px rgba(15,23,42,.09);
}
.has-aao-summary[hidden]{ display:none; }
.has-aao-summary-title{ margin:0 0 14px;color:var(--has-aao-text);font-size:26px;letter-spacing:-.02em; }
.has-aao-mini{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px 18px;
  color:var(--has-aao-soft-text);
  font-size:14px;
}
.has-aao-mini[data-empty]{ display:block;color:var(--has-aao-muted); }
.has-aao-mini>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;
  border-bottom:1px solid #f1f5f9;
}
.has-aao-mini>div strong{ color:var(--has-aao-text);font-weight:800;min-width:0; }
.has-aao-mini>div span{ color:var(--has-aao-fee);font-weight:900;white-space:nowrap; }

.has-aao-credit-message{
  margin:16px 0 0;
  padding:12px 14px;
  border:1px solid #86efac;
  border-radius:12px;
  background:#f0fdf4;
  color:#14532d;
  font-size:14px;font-weight:700;line-height:1.45;
}
.has-aao-credit-message[hidden]{ display:none; }
.has-aao-credit-message:not(.is-positive){ border-color:#e2e8f0;background:var(--has-aao-soft);color:var(--has-aao-soft-text); }

.has-aao-price{
  display:flex;align-items:center;justify-content:space-between;
  margin:24px 0;
  padding-top:22px;
  border-top:1px solid #e5e7eb;
  font-size:18px;
}
.has-aao-price strong{ color:var(--has-aao-text);font-size:32px;letter-spacing:-.02em; }
.has-aao-summary .has-aao-btn{ width:100%; }
.has-aao-summary .has-aao-error{ margin:0 0 16px; }

.has-aao-app.is-complete .has-aao-mini{ color:#14532d;font-weight:800; }

/* ---------- Responsive ---------- */

@media (max-width:1100px){
  .has-aao-product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .has-aao-sport-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .has-aao-product-grid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .has-aao-sport-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .has-aao-step{ padding:22px;border-radius:var(--has-aao-radius-md); }
  .has-aao-hero{ padding:26px 22px; }
  .has-aao-field-grid{ grid-template-columns:1fr; }
  .has-aao-summary{ margin-top:20px;padding:22px;border-radius:var(--has-aao-radius-md); }
  .has-aao-mini{ grid-template-columns:1fr; }
  .has-aao-actions .has-aao-btn{ flex:1 1 100%; }
}
@media (max-width:600px){
  /* Phones: one sport per row. The frame keeps the same 4:3 shape as the desktop tile, so the
     crop a store owner sets up in the settings is exactly the crop a phone shows — a different
     aspect here was what cut the tops off heads on mobile only. */
  .has-aao-sport-grid{ grid-template-columns:1fr; }
  .has-aao-sport-thumb{ max-height:none; }
}
@media (max-width:540px){
  .has-aao-product-grid{ grid-template-columns:1fr; }
  .has-aao-card-body{ padding-right:44px; }
  .has-aao-price strong{ font-size:28px; }
  .has-aao-summary-title{ font-size:22px; }
  .has-aao-btn{ padding:15px 22px;font-size:14px; }
}

/* Touch devices get no hover lift: it only ever fires as a sticky artefact after a tap. */
@media (hover:none){
  .has-aao-sport-card:hover,
  .has-aao-sport-card:hover .has-aao-sport-thumb img,
  .has-aao-product-card:hover,
  .has-aao-btn-primary:hover:not(:disabled){ transform:none;box-shadow:none; }
  .has-aao-btn-primary:hover:not(:disabled){ box-shadow:0 16px 32px rgba(249,115,22,.25); }
}

@media (prefers-reduced-motion:reduce){
  .has-aao-app *{ animation:none !important;transition:none !important; }
}

/* ---------- Cart & checkout readability ---------- */
/*
 * WooCommerce prints item data as a definition list. Many themes leave dt and dd inline, which
 * turns an add-on request into one unbroken sentence. Each label gets its own line here.
 */
.woocommerce-cart .cart_item dl.variation,
.woocommerce-checkout .cart_item dl.variation,
.woocommerce table.shop_table dl.variation{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.55;
}
.woocommerce table.shop_table dl.variation dt{
  display:block;
  clear:both;
  float:none;
  margin:6px 0 0;
  padding:0;
  color:#111827;
  font-weight:700;
}
.woocommerce table.shop_table dl.variation dd{
  display:block;
  clear:both;
  float:none;
  margin:0;
  padding:0;
  color:#475569;
}
.woocommerce table.shop_table dl.variation dd p{ margin:0; }

/* A hint sits between the label and the field, where it is read before the box is filled in. */
.has-aao-field-hint{
  margin:-2px 0 2px;
  color:var(--has-aao-muted);
  font-size:12.5px;
  line-height:1.45;
}
/* The second group is a continuation of the same panel, so it gets a lighter separation. */
.has-aao-details + .has-aao-details{ margin-top:24px;padding-top:22px; }