/* Option B upload guide. Shared between Shopify and WooCommerce. */
.aisthetix-photo-guide { text-align: left; margin-bottom: 20px; color: var(--aisthetix-text); }
.aisthetix-guide-do { display: flex; gap: 14px; padding: 12px; border-radius: 16px; background: #f3faf5; border: 1px solid #d6efdd; }
.aisthetix-guide-scene { position: relative; overflow: hidden; background: linear-gradient(#efe9e2 0 80%, #ddd0c1 80%); border-radius: 10px; }
.aisthetix-guide-figure { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; height: 112px; width: 47px; }
.aisthetix-guide-do .aisthetix-guide-scene { width: 38%; max-width: 124px; height: 186px; flex-shrink: 0; border-radius: 12px; }
.aisthetix-guide-good .aisthetix-guide-figure { top: 10px; height: 166px; width: 70px; }
.aisthetix-photo-guide .aisthetix-guide-heading { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #15803d; margin: 4px 0 8px; }
.aisthetix-guide-do ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.aisthetix-guide-do li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.3; align-items: flex-start; margin: 0; padding: 0; }
.aisthetix-guide-do li b { font-weight: 600; display: block; }
.aisthetix-guide-do li div > span { color: var(--aisthetix-text-muted); font-size: 12px; }
.aisthetix-guide-check { color: #16a34a; flex-shrink: 0; }
.aisthetix-photo-guide .aisthetix-guide-dont { color: #b91c1c; margin: 16px 0 8px; }
.aisthetix-guide-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.aisthetix-guide-grid .aisthetix-guide-scene { height: 124px; }
.aisthetix-guide-grid p { margin: 6px 0 0; font-size: 11px; line-height: 1.25; font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.aisthetix-guide-badge { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #dc2626; color: #fff; font: 600 14px/1 sans-serif; box-shadow: 0 1px 3px #0004; }
.aisthetix-guide-good .aisthetix-guide-badge { top: 8px; left: 8px; width: 22px; height: 22px; background: #16a34a; }
.aisthetix-guide-crop .aisthetix-guide-figure { height: 250px; width: 104px; }
.aisthetix-guide-far .aisthetix-guide-figure { top: 72px; height: 38px; width: 16px; }
.aisthetix-guide-group .aisthetix-guide-figure { top: 22px; height: 100px; width: 42px; }
.aisthetix-guide-group .aisthetix-guide-left { top: 16px; left: 30%; filter: hue-rotate(150deg); }
.aisthetix-guide-group .aisthetix-guide-right { top: 16px; left: 70%; filter: hue-rotate(320deg); }
.aisthetix-guide-shade { position: absolute; inset: 0; background: rgba(10,10,20,.62); }
.aisthetix-photo-guide .aisthetix-guide-tip { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--aisthetix-text-muted); text-align: center; }
.aisthetix-mobile-upload { display: none; }
@media (max-width: 480px) {
  .aisthetix-avatar-upload .aisthetix-upload-area { border: 0; padding: 0; margin: 0; }
  .aisthetix-avatar-upload .aisthetix-upload-label,
  .aisthetix-avatar-upload .aisthetix-upload-cancel { display: none; }
  .aisthetix-avatar-upload .aisthetix-camera-launch { display: flex; flex-wrap: wrap; gap: 10px; }
  .aisthetix-avatar-upload .aisthetix-camera-launch .aisthetix-btn { flex: 1; min-width: 0; }
  .aisthetix-avatar-upload .aisthetix-mobile-upload { display: inline-flex; }
  .aisthetix-camera-fallback { flex-basis: 100%; }
}
@media (max-width: 350px) {
  .aisthetix-guide-do { gap: 10px; padding: 10px; }
  .aisthetix-guide-do .aisthetix-guide-scene { width: 30%; }
}

.aisthetix-avatar-upload .aisthetix-camera-launch .aisthetix-btn {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  font-weight: 500;
  line-height: 1.3;
  font-family: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  border: 0 !important;
  border-radius: var(--aisthetix-radius) !important;
}
.aisthetix-avatar-upload .aisthetix-camera-launch .aisthetix-btn-primary {
  background: var(--aisthetix-primary) !important;
  color: white !important;
}
.aisthetix-avatar-upload .aisthetix-camera-launch .aisthetix-btn-secondary {
  background: var(--aisthetix-secondary) !important;
  color: var(--aisthetix-text) !important;
}
.aisthetix-photo-guide, .aisthetix-photo-guide * { box-sizing: border-box; }