/* Celestia additions on top of the Serenity design (serenity.css) and its polish layer (polish.css). */
.sr-celestia .sr-celestia-options { margin-top: 24px; }
.sr-celestia .sr-celestia-options[hidden] { display: none; }
.sr-celestia .sr-feels button { flex: 1 1 140px; min-height: 48px; font-size: 14px; }
/* Feel buttons: the feel's name, then its description on a second line (John and Liz, Nov 11). */
.sr-celestia .sr-feels button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 10px; line-height: 1.25; text-align: center; }
.sr-celestia .sr-feels .sr-feel-name { font-size: 15px; font-weight: 600; }
.sr-celestia .sr-feels .sr-feel-description { font-size: 13px; font-weight: 400; color: var(--sr-muted); text-wrap: balance; }
.sr-celestia .sr-feels button:hover .sr-feel-description,
.sr-celestia .sr-feels button[aria-pressed='true'] .sr-feel-description { color: var(--sr-plum-dark); }
/* Selected: a 2px plum edge like the size buttons, drawn inside the border so the buttons do not shift. */
.sr-celestia .sr-feels button[aria-pressed='true'] { box-shadow: inset 0 0 0 1px var(--sr-plum); }
@media (max-width: 480px) {
  .sr-celestia .sr-feels button { padding: 10px 6px; }
  .sr-celestia .sr-feels .sr-feel-name { font-size: 14px; }
  .sr-celestia .sr-feels .sr-feel-description { font-size: 12px; }
}
body.sr-celestia-page .sr-celestia #sr-price { margin-top: 4px; }

/* Thumbnails wrap into rows of four instead of a sideways-scrolling strip, so every photo is in view. */
body.sr-celestia-page .sr-serenity.sr-celestia .sr-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding: 4px 2px;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
}
body.sr-celestia-page .sr-serenity.sr-celestia .sr-thumbnails button { width: 100%; height: auto; aspect-ratio: 1 / 1; }
body.sr-celestia-page .sr-serenity.sr-celestia .sr-thumbs-arrow { display: none; }

/* Tile icons by tile, not position: polish.css assigns Serenity's shipping, exchange, and dealer icons in order. */
body.sr-celestia-page .sr-serenity.sr-celestia .sr-purchase-tiles > a[data-sr-dialog="warranty"] { --sr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
body.sr-celestia-page .sr-serenity.sr-celestia .sr-purchase-tiles > a[data-sr-dialog="white-glove"] { --sr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }

/* Lead time line under Add to cart (Serenity shows it in its shipping tile; Celestia's tiles keep Liz's wording). */
body.sr-celestia-page .sr-serenity.sr-celestia .sr-ship-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 15px; line-height: 1.4; color: var(--sr-muted); text-wrap: balance; }
body.sr-celestia-page .sr-serenity.sr-celestia .sr-ship-note::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--sr-plum); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 480px) { body.sr-celestia-page .sr-serenity.sr-celestia .sr-ship-note { font-size: 14px; } }
/* Phrases stay whole, so a narrow phone wraps at the dot. The spacing under Add to cart is set here, not by the quantity box's margin, so it holds when the quantity box stacks above the button. */
body.sr-celestia-page .sr-serenity.sr-celestia .sr-ship-note .sr-nowrap { white-space: nowrap; }
body.sr-celestia-page .sr-serenity.sr-celestia .sr-native .woocommerce-variation-add-to-cart { row-gap: 16px; }
body.sr-celestia-page .sr-serenity.sr-celestia .sr-native .woocommerce-variation-add-to-cart .quantity { margin-bottom: 0; }