/* Squish Break's colour story. Product framing remains in refinements.css. */
:root {
  --cream: #fff9ef;
  --paper: #fffdf8;
  --ink: #2e1947;
  --muted: #51445e;
  --pink: #c9145e;
  --pink-dark: #a30c49;
  --yellow: #ffe458;
  --blush: #ffb3d5;
  --blue: #5521a8;
  --violet: #5521a8;
  --lilac: #d3b6ff;
  --aqua: #7be3d5;
  --line: #cdbad9;
  --soft-line: #cdbad9;
  --rose-paper: #ffd4e7;
}

.announcement { background: var(--violet); }
.announcement .mini-star { color: var(--yellow); }
.header { background: #fff5a0; border-color: var(--violet); }
.wordmark { color: var(--violet); }
.count { background: var(--violet); color: white; }
.market-picker select { border-color: var(--violet); }
.wishlist-toggle > .icon { color: var(--pink); }

.hero-band { position: relative; overflow: hidden; background: var(--lilac); }
.hero-band::before,
.hero-band::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.hero-band::before {
  width: 210px;
  height: 210px;
  right: -78px;
  top: -85px;
  background: #bb92f2;
  transform: rotate(16deg);
  clip-path: polygon(50% 0,61% 30%,85% 15%,70% 40%,100% 50%,70% 61%,85% 85%,60% 70%,50% 100%,40% 70%,15% 85%,30% 60%,0 50%,30% 40%,15% 15%,40% 30%);
}
.hero-band::after {
  width: 115px;
  height: 115px;
  left: -67px;
  bottom: 30px;
  border: 19px solid #bb92f2;
  border-radius: 50%;
}
.hero { position: relative; z-index: 1; }
.hero-copy h1 em {
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 5px;
}
.small-label { background: var(--yellow); color: var(--ink); border-radius: 20px; }
.hero-note svg { color: var(--violet); }
.hero-image { border: 2px solid var(--violet); box-shadow: 7px 7px 0 var(--violet); }
.hero-sticker { border-color: var(--yellow); box-shadow: 0 0 0 4px var(--pink); }
.photo-caption, .gallery-caption { background: var(--yellow); color: var(--ink); }
.hero-tabs { margin-top: 20px; }
.hero-tab { border-color: var(--violet); }
.hero-tab.active { background: var(--aqua); border-color: var(--violet); box-shadow: 0 2px 0 var(--violet); }

.button { border: 1px solid var(--ink); }
.button-pink { box-shadow: 3px 4px 0 var(--ink); }
.button-pink:active { box-shadow: 1px 2px 0 var(--ink); }
.button-outline { background: var(--yellow); border-color: var(--violet); box-shadow: 3px 3px 0 var(--violet); }
.button-outline:hover { background: var(--violet); color: white; }
.button-cream { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.ticker { background: var(--yellow); border-color: var(--violet); color: var(--violet); }
.ticker b { color: var(--pink); }

.product-card { --card-colour: var(--lilac); }
.product-card:nth-child(3n + 2) { --card-colour: var(--aqua); }
.product-card:nth-child(3n) { --card-colour: var(--blush); }
.product-photo { border: 2px solid var(--card-colour); box-shadow: 3px 4px 0 var(--card-colour); }
.product-tag { background: var(--yellow); color: var(--ink); }
.save-button { border-color: var(--violet); background: var(--paper); }
.save-button[aria-pressed=true] { background: var(--rose-paper); }
.round-arrow { background: var(--card-colour, var(--lilac)); border-color: var(--violet); color: var(--ink); }
.round-arrow:hover { background: var(--violet); border-color: var(--violet); color: white; }
.category-filter { border-color: var(--violet); }
.category-filter[data-category=Food]:not(.active) { background: var(--yellow); }
.category-filter[data-category=Animals]:not(.active) { background: var(--blush); }
.category-filter[data-category=Desk]:not(.active) { background: var(--aqua); }
.category-filter.active { background: var(--violet); border-color: var(--violet); color: white; }
.catalog-sort select { background: var(--paper); border-color: var(--violet); border-radius: 20px; }

.lineup-section { background: var(--yellow); border-color: var(--violet); }
.lineup-stage { border-color: var(--violet); box-shadow: 6px 6px 0 var(--violet); }
.lineup-stage-label { border-bottom-style: dashed; border-color: var(--violet); }
.lineup-tile img { border-color: var(--lilac); }
.lineup-option { background: var(--paper); border-color: var(--violet); }
.lineup-option:nth-child(2):not(.selected) { background: var(--aqua); }
.lineup-option:nth-child(3):not(.selected) { background: var(--blush); }
.lineup-option.selected { background: var(--violet); border-color: var(--violet); color: white; }
.lineup-option.selected span { color: white; }

.ritual-section, .product-story { background: var(--aqua); border-color: var(--violet); }
.ritual-steps article, .ritual-steps article:first-child { border-color: #398d86; }
.step-number { color: var(--violet); }
.ritual-heading h2 em, .product-story h2 em { color: var(--violet); }
.mood-button { background: var(--paper); border-color: var(--violet); }
.mood-button:nth-child(2):not(.selected) { background: var(--lilac); }
.mood-button:nth-child(3):not(.selected) { background: var(--yellow); }
.mood-button.selected { background: var(--violet); border-color: var(--violet); color: white; }
.finder-result { background: var(--rose-paper); border-color: var(--violet); box-shadow: 6px 6px 0 var(--lilac); }
.statement { background: var(--pink); color: white; }
.statement h2 em { color: var(--yellow); }
.statement-flower { color: var(--blush); opacity: .4; }
.statement h2, .statement > p { position: relative; z-index: 1; }
.faq-list summary > span, .product-accordions summary > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--lilac);
  color: var(--violet);
  border-radius: 50%;
}
.footer { background: var(--violet); color: white; }
.footer .wordmark, .footer .wordmark svg { color: var(--yellow); }
.footer-top p, .footer-bottom { color: #f0e6ff; }
.footer-bottom { border-color: #9e7bcd; }
.footer a:focus-visible, .footer button:focus-visible { outline-color: var(--yellow); }
.statement a:focus-visible, .statement button:focus-visible { outline-color: var(--yellow); }

.product-page { background: #f3eaff; }
.gallery-stage { border: 2px solid var(--violet); box-shadow: 5px 5px 0 var(--lilac); }
.gallery-option { background: var(--paper); border-color: var(--violet); }
.gallery-option.selected { border-color: var(--violet); background: var(--yellow); }
.gallery-option.close span { background: var(--paper); }
.product-colour .swatch { outline-color: var(--lilac); }
.offer-bullets li:before { background: var(--aqua); border-color: #398d86; color: var(--ink); }
.product-sticky { background: #fff5a0; border-color: var(--violet); }
.related-card img { border: 2px solid var(--lilac); }
dialog { border: 2px solid var(--violet); }
.dialog-close { background: var(--yellow); color: var(--ink); }
.wishlist-heading { background: var(--lilac); }
.toast { background: var(--violet); color: white; border-radius: 24px; }
.skip { background: var(--violet); color: white; }

@media (hover:hover) {
  .product-card:hover .product-photo { box-shadow: 4px 6px 0 var(--card-colour); }
}
@media (max-width:760px) {
  .hero-band::before { width: 120px; height: 120px; top: -48px; right: -54px; }
  .hero-band::after { display: none; }
  .hero-image { box-shadow: 4px 4px 0 var(--violet); }
  .hero-tabs { margin-top: 17px; }
  .lineup-stage { box-shadow: 4px 4px 0 var(--violet); }
  .finder-result { box-shadow: 4px 4px 0 var(--lilac); }
  .statement-flower { opacity: .23; }
}