/* Print shop on order.html + order-status.html (shop.js). Uses the
   palette from forms.css. */
.shop{padding:48px 0 24px;}
.shop[hidden]{display:none !important;}
.shop-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:22px;}
.shop-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:600;}
.shop-head p{color:var(--ink-soft);max-width:60ch;}
.shop-step{
  font-size:0.78rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:6px;
}

/* 1. photo picker */
.shop-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.shop-cat{
  font:inherit;font-size:0.86rem;font-weight:500;color:var(--ink-soft);background:transparent;
  border:1px solid var(--line);border-radius:2px;padding:8px 14px;cursor:pointer;
}
.shop-cat[aria-pressed="true"]{color:var(--ink);border-color:var(--accent);}
.shop-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.shop-photo{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:2px;
  background:var(--field);cursor:pointer;overflow:hidden;text-align:left;color:var(--ink);font:inherit;
}
.shop-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s ease,opacity .2s ease;}
.shop-photo:hover img{transform:scale(1.04);}
.shop-photo span{
  position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:0.8rem;line-height:1.3;
  background:linear-gradient(transparent,rgba(0,0,0,0.85));
}
.shop-photo span small{display:block;color:var(--ink-soft);font-size:0.72rem;}
.shop-photo[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}

/* 2. configure */
.shop-config{
  margin-top:34px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:30px;scroll-margin-top:20px;
}
.shop-config[hidden]{display:none !important;}
.shop-preview{display:flex;align-items:center;justify-content:center;background:#050504;border-radius:2px;min-height:280px;padding:18px;}
.shop-preview img{max-height:520px;width:auto;max-width:100%;object-fit:contain;box-shadow:0 14px 40px rgba(0,0,0,0.55);}
.shop-preview.framed img{border:10px solid var(--frame,#111);padding:0;box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 14px 40px rgba(0,0,0,0.6);}
/* framed paper with a white mat */
.shop-preview.matted img{padding:clamp(10px,4%,26px);background:#f7f5ef;}
.shop-config h3{font-size:1.5rem;font-weight:600;margin-bottom:2px;}
.shop-config .shop-gal{color:var(--ink-soft);font-size:0.9rem;margin-bottom:20px;}
.shop-label{display:block;font-size:0.78rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);margin:20px 0 10px;}
.shop-products{display:grid;gap:10px;}
.shop-product{
  display:block;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--field);border:1px solid var(--line);border-radius:2px;padding:14px 16px;
}
.shop-product strong{display:flex;justify-content:space-between;gap:10px;font-weight:600;}
.shop-product strong em{font-style:normal;color:var(--ink-soft);font-weight:500;font-size:0.88rem;}
.shop-product small{display:block;color:var(--ink-soft);font-size:0.84rem;margin-top:4px;line-height:1.45;}
.shop-product[aria-pressed="true"]{border-color:var(--accent);}
.shop-frames{display:flex;flex-wrap:wrap;gap:10px;}
.shop-frame{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:0.88rem;color:var(--ink);cursor:pointer;
  background:var(--field);border:1px solid var(--line);border-radius:2px;padding:8px 12px;
}
.shop-frame i{width:18px;height:18px;border-radius:2px;border:1px solid rgba(255,255,255,0.25);background:var(--swatch);}
.shop-frame[aria-pressed="true"]{border-color:var(--accent);}
.shop-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;}
.shop-size{
  font:inherit;color:var(--ink);cursor:pointer;background:var(--field);border:1px solid var(--line);border-radius:2px;
  padding:10px 8px;text-align:center;line-height:1.3;
}
.shop-size b{display:block;font-weight:600;}
.shop-size span{font-size:0.84rem;color:var(--ink-soft);}
.shop-size[aria-pressed="true"]{border-color:var(--accent);}
.shop-size[aria-pressed="true"] span{color:var(--ink);}
.shop-add{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:22px;}
.shop-qty{display:flex;flex-direction:column;gap:6px;width:90px;}
.shop-add .btn-primary{flex:1 1 auto;}
.shop-msg{font-size:0.88rem;color:var(--ok);font-weight:600;min-height:1.2em;margin-top:10px;}
.shop-msg.error{color:var(--err);}

/* 3. cart + checkout */
.shop-cart{margin-top:34px;}
.shop-cart[hidden]{display:none !important;}
.shop-cart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.shop-box{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:26px;}
.shop-lines{list-style:none;display:grid;gap:14px;}
.shop-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;}
.shop-line img{width:64px;height:64px;object-fit:cover;border-radius:2px;border:1px solid var(--line);}
.shop-line-title{font-weight:600;font-size:0.95rem;}
.shop-line-desc{color:var(--ink-soft);font-size:0.84rem;}
.shop-line-ctrl{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.shop-line-ctrl select{width:auto;padding:6px 32px 6px 10px;font-size:0.88rem;}
.shop-remove{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:0.8rem;cursor:pointer;text-decoration:underline;}
.shop-remove:hover{color:var(--err);}
.shop-totals{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:6px;font-size:0.95rem;}
.shop-totals div{display:flex;justify-content:space-between;gap:12px;}
.shop-totals dt{color:var(--ink-soft);}
.shop-totals .shop-grand{font-size:1.15rem;font-weight:600;padding-top:8px;border-top:1px solid var(--line);margin-top:4px;}
.shop-totals .shop-grand dt{color:var(--ink);}
.shop-pay{width:100%;margin-top:18px;}
.shop-secure{display:block;text-align:center;margin-top:10px;font-size:0.8rem;color:var(--ink-soft);}
.field.invalid input{border-color:var(--err);}
.field-error{color:var(--err);font-size:0.8rem;}
.shop-or{margin:30px 0 0;color:var(--ink-soft);font-size:0.95rem;}
.shop-or a{text-decoration:underline;text-underline-offset:3px;}
.shop-notice{
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:2px;padding:14px 16px;background:var(--field);
  color:var(--ink-soft);margin-bottom:18px;
}
.shop-empty{color:var(--ink-soft);padding:20px 0;}
.shop-notice a,.shop-or a{text-decoration:underline;text-underline-offset:3px;}

/* order-status.html */
.status-card{max-width:820px;}
.status-card h2{font-size:1.8rem;font-weight:600;margin-bottom:8px;}
.status-card .lede{color:var(--ink-soft);margin-bottom:22px;}
.status-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;}
.status-steps li{
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}
.status-steps li.done{color:var(--ink);border-color:var(--ok);}
.status-steps li.now{color:#F1EEE7;background:var(--accent);border-color:var(--accent);}
.status-track{display:grid;gap:6px;margin:0 0 22px;padding:16px;border:1px solid var(--ok);border-radius:2px;background:var(--field);}
.status-track a{text-decoration:underline;text-underline-offset:3px;}
.status-ship{color:var(--ink-soft);font-size:0.92rem;margin-top:16px;white-space:pre-line;}
.spinner{
  display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;
  animation:spin .8s linear infinite;vertical-align:-3px;margin-right:8px;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none;}.shop-photo img{transition:none;}}

@media (max-width:900px){
  .shop-config{grid-template-columns:1fr;padding:20px;gap:20px;}
  .shop-cart-grid{grid-template-columns:1fr;}
  .shop-preview img{max-height:360px;}
}
@media (max-width:680px){
  .shop{padding:28px 0 12px;}
  .shop-photos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
  .shop-box{padding:18px;}
  .shop-line{grid-template-columns:52px minmax(0,1fr);}
  .shop-line img{width:52px;height:52px;}
  .shop-line-ctrl{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;}
}