/* Playful futurism: an illustrated bakery universe, grounded in warm typography.
   Extends the existing components so routes and everyday tasks stay consistent. */
:root {
  --cream:#f8f3eb;
  --paper:#fffbf5;
  --green:#443251;
  --deep:#30203c;
  --sage:#6d536f;
  --muted:#605566;
  --line:#dfd4df;
  --gold:#e9bc80;
  --lavender:#e1d2ee;
  --mint:#cde5d7;
  --coral:#b84b39;
}

body {
  background:var(--cream);
}

.site-header {
  background:#f8f3ebf2;
  border-bottom-color:#dfd4df80;
  backdrop-filter:blur(14px);
}

.button {
  border-radius:100px;
}

.brand-name {
  font-size:2.65rem;
}

.nav-order {
  background:var(--green);
  border-color:var(--green);
}

.bakery-world {
  position:relative;
  background:radial-gradient(ellipse at 77% 45%,#e5d7f4 0,transparent 48%),radial-gradient(ellipse at 45% 70%,#f6e2d5 0,transparent 50%),var(--cream);
  color:var(--green);
  overflow:hidden;
  isolation:isolate;
}

.bakery-world::before {
  content:'';
  position:absolute;
  width:76rem;
  height:76rem;
  border:1px solid #b6a3c425;
  border-radius:50%;
  top:-46rem;
  left:calc(50% - 38rem);
  pointer-events:none;
  z-index:-1;
}

.world-grid {
  display:grid;
  grid-template-columns:.93fr 1.15fr;
  align-items:center;
  max-width:1600px;
  margin-inline:auto;
  padding:1.8rem var(--gutter) 1.2rem;
  gap:1rem;
  min-height:690px;
}

.world-copy {
  position:relative;
  z-index:3;
  padding:2rem 0 3rem;
}

.world-eyebrow {
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--sage);
  margin-bottom:2.1rem;
  letter-spacing:.12em;
}

.world-eyebrow > span {
  font-size:1.45rem;
  line-height:1;
  color:var(--coral);
}

.bakery-world h1 {
  font-size:clamp(4.5rem,6.8vw,7.25rem);
  letter-spacing:-.045em;
  line-height:.98;
  margin-bottom:1.8rem;
  overflow-wrap:normal;
}

.bakery-world h1 em {
  color:#8a435d;
}

.world-description {
  font-size:1.0625rem;
  max-width:35ch;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:2rem;
}

.bakery-world .actions {
  gap:1.5rem;
  padding:0;
  margin:0;
}

.world-cta {
  gap:1.5rem;
  background:var(--coral);
  border-color:var(--coral);
  color:#fffaf1;
  min-height:3.5rem;
  box-shadow:0 5px 0 #86362614;
}

.world-cta:hover {
  background:#983b2e;
}

.world-cta > span {
  font-size:1.3rem;
}

.bakery-world .text-link {
  color:var(--green);
  font-size:.8rem;
}

.world-origin {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:3rem;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.65;
}

.world-origin svg {
  width:24px;
  height:24px;
  color:var(--sage);
}

.world-origin strong {
  font-weight:400;
  color:var(--green);
}

.world-visual {
  min-width:0;
  position:relative;
  padding-top:0;
}

.world-scene {
  width:100%;
  aspect-ratio:1.23;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}

.world-scene canvas {
  z-index:1;
  border-radius:1.5rem;
}

.world-scene canvas:focus-visible {
  outline-offset:-8px;
  outline-color:var(--green);
}

.world-scene .scene-fallback {
  inset:11% 5% 10%;
  width:90%;
  height:79%;
  border-radius:48% 48% 35% 35%;
  object-position:center;
  box-shadow:0 30px 60px #6a45751a;
}

.world-scene .scene-fallback[data-world-poster] {
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  object-fit:contain;
  box-shadow:none;
}

.world-orbit {
  position:absolute;
  border:1px dashed #a68fb84d;
  border-radius:50%;
  inset:12% 0 0;
  transform:rotate(-16deg);
  z-index:0;
  pointer-events:none;
}

.world-orbit::after {
  content:'';
  position:absolute;
  width:11px;
  height:11px;
  background:var(--mint);
  border:1px solid #7e9d89;
  border-radius:50%;
  left:18%;
  top:5%;
}

.world-heading {
  display:flex;
  gap:.5rem;
  align-items:center;
  position:absolute;
  top:0;
  left:9%;
  right:3%;
  font-size:.625rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sage);
  z-index:2;
  pointer-events:none;
}

.world-dot {
  width:5px;
  height:5px;
  background:#8a435d;
  border-radius:50%;
  flex-shrink:0;
}

.world-coordinate {
  margin-left:auto;
}

.world-seal {
  position:absolute;
  top:10%;
  right:0;
  z-index:2;
  width:6.3rem;
  height:6.3rem;
  border:1px solid #a78baf;
  border-radius:50%;
  background:#f8f3ebc9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--green);
  font-size:.5625rem;
  line-height:1.3;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:center;
  transform:rotate(13deg);
  pointer-events:none;
}

.world-seal svg {
  width:16px;
  height:16px;
  margin:.4rem;
  color:var(--coral);
}

.world-scene .scene-bottom {
  bottom:0;
  inset-inline:8%;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--sage);
  font-size:.6875rem;
  gap:.5rem;
}

.world-scene .scene-controls {
  padding:.3rem;
  border:1px solid #cab6d6;
  border-radius:100px;
  background:#fffaf0e6;
  gap:.2rem;
}

.world-scene .scene-controls button {
  width:36px;
  min-height:36px;
  border-radius:50%;
  color:var(--green);
  padding:0;
}

.world-scene .scene-controls button:hover,
.world-scene .scene-controls button[aria-pressed=true] {
  background:var(--lavender);
}

.world-scene .scene-load {
  inset:auto 15% 12%;
  padding:.8rem 1.2rem;
  border-radius:100px;
  background:#fffaf3;
  box-shadow:0 5px 20px #44325120;
  z-index:5;
  font-size:.75rem;
  text-align:center;
}

.world-launch {
  position:absolute;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
  border:1px solid var(--green);
  background:var(--paper);
  color:var(--green);
  border-radius:100px;
  padding:.7rem 1.25rem;
  min-height:44px;
  white-space:nowrap;
  font-size:.8rem;
  z-index:3;
  box-shadow:0 8px 20px #44325120;
}

.world-launch:disabled {
  opacity:.8;
}

.world-shelf {
  position:relative;
  z-index:3;
  margin:1.15rem 4% 0 8%;
}

.world-choices {
  display:flex;
  gap:.3rem;
  padding:.25rem;
  border:1px solid #d3c4dc;
  border-radius:100px;
  background:#f8f3ebc2;
}

.world-choice {
  flex:1;
  min-width:0;
  min-height:44px;
  border:1px solid transparent;
  border-radius:100px;
  padding:.65rem .6rem;
  background:transparent;
  color:var(--green);
  font-size:.75rem;
  white-space:normal;
  transition:background .25s,box-shadow .25s;
}

.world-choice > span {
  margin-right:.6rem;
  color:var(--sage);
  font-size:.625rem;
}

.world-choice:hover {
  background:#ffffff70;
}

.world-choice[aria-pressed=true] {
  background:var(--paper);
  border-color:#d9cde1;
  box-shadow:0 4px 12px #4432510d;
}

.world-product {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin:1rem .9rem 0;
}

.world-product .eyebrow {
  font-size:.5625rem;
  letter-spacing:.14em;
  color:var(--sage);
}

.world-product p {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem;
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1.5;
}

.world-price {
  font-family:var(--sans);
  font-size:.625rem;
  color:var(--muted);
}

.world-product-link {
  font-size:.6875rem;
  font-weight:500;
  flex-shrink:0;
  padding:.55rem 0;
  border-bottom:1px solid #a78baf;
}

.world-product-link > span {
  margin-left:.5rem;
  font-size:.9rem;
}

.world-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:1.3rem;
  font-size:.625rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sage);
}

.world-foot a {
  display:flex;
  gap:1rem;
  padding:.5rem 0;
}

.world-foot a > span {
  font-size:1rem;
}

.values-strip {
  background:var(--green);
  color:var(--cream);
  padding-block:1.4rem;
  border:0;
}

.values-inner .star {
  color:var(--gold);
}

.product-image {
  border-radius:1.5rem;
  background:var(--lavender);
}

.product-number {
  border-radius:50%;
}

.badge {
  border-radius:100px;
}

.product-card {
  perspective:900px;
}

.product-card .product-image {
  transition:transform .45s var(--ease),box-shadow .45s;
}

.product-card:hover .product-image {
  box-shadow:0 18px 36px #44325115;
}

.craft {
  background:var(--lavender);
}

.craft-photo {
  border-radius:45% 45% 1.5rem 1.5rem;
  overflow:hidden;
  position:relative;
  aspect-ratio:1;
  background:#a895aa;
}

.craft-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.craft-photo figcaption {
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  padding:.6rem 1rem;
  border-radius:100px;
  font-size:.6875rem;
  background:var(--paper);
  white-space:nowrap;
}

.craft-list li {
  border-color:#b5a0c7;
}

.story-photo,.about-photo {
  border-radius:2rem;
}

.story-photo-note {
  border-radius:0 1rem 0 0;
}

.order-section,.manifesto {
  background:var(--green);
  color:var(--cream);
}

.order-section .eyebrow,.order-intro,.step p,.order-actions p,
.manifesto p,.manifesto .eyebrow {
  color:#e9ddec;
}

.step {
  border-color:#89768e;
}

.payment-card {
  border-radius:1.5rem;
}

.payment-card img {
  border-radius:.5rem;
}

.payment-card:hover {
  background:#e9dfef;
}

.special-order {
  background:var(--mint);
}

.filter {
  border-radius:100px;
}

.contact-image {
  border-radius:45% 45% 1.5rem 1.5rem;
}

.contact-image-note {
  border-radius:1rem;
}

.note-dialog {
  border-radius:1.5rem;
}

.site-footer {
  background:#ede4f0;
}

@media(min-width:1600px) {
  .world-grid {
    min-height:780px;
  }
}

@media(max-width:1100px) {
  .world-grid {
    grid-template-columns:1fr 1.05fr;
    min-height:620px;
    padding-inline:2.5rem;
  }
  .bakery-world h1 {
    font-size:clamp(3.4rem,6.7vw,5rem);
  }
  .world-eyebrow {
    font-size:.625rem;
    letter-spacing:.1em;
  }
  .world-choice > span {
    display:none;
  }
  .world-shelf {
    margin-inline:0;
  }
  .world-product {
    margin-inline:.5rem;
  }
  .world-product-link {
    max-width:10ch;
    line-height:1.5;
  }
  .world-seal {
    width:5rem;
    height:5rem;
    font-size:.5rem;
  }
}

@media(max-width:800px) {
  .world-grid {
    grid-template-columns:1fr 1.05fr;
    padding:2rem var(--gutter);
    gap:1rem;
    min-height:550px;
  }
  .bakery-world h1 {
    font-size:clamp(2.8rem,6.2vw,4rem);
  }
  .world-description {
    font-size:.9375rem;
  }
  .world-origin {
    margin-top:2rem;
  }
  .world-seal {
    display:none;
  }
  .world-heading {
    font-size:.5rem;
    letter-spacing:.06em;
    left:3%;
  }
  .world-scene {
    aspect-ratio:.9;
  }
  .world-scene .scene-bottom {
    inset-inline:2%;
    justify-content:center;
  }
  .world-scene .scene-hint {
    display:none;
  }
  .world-choice {
    font-size:.625rem;
    padding:.6rem .2rem;
  }
  .world-product {
    gap:.5rem;
    flex-wrap:wrap;
  }
  .world-product-link {
    max-width:none;
  }
  .world-product p {
    font-size:1.3rem;
  }
}

@media(max-width:600px) {
  .world-grid {
    grid-template-columns:1fr;
    gap:0;
    padding:2.5rem var(--gutter) 1.5rem;
    min-height:0;
  }
  .world-copy {
    padding:0;
  }
  .world-eyebrow {
    font-size:.625rem;
    margin-bottom:1.3rem;
  }
  .bakery-world h1 {
    font-size:clamp(3rem,13vw,5rem);
    line-height:1;
    margin-bottom:1.3rem;
  }
  .world-description {
    font-size:1rem;
    max-width:36ch;
    margin-bottom:1.4rem;
  }
  .bakery-world .actions {
    gap:1rem;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .world-cta {
    padding:.8rem 1.25rem;
    min-height:3.25rem;
  }
  .world-origin {
    display:none;
  }
  .world-visual {
    margin-top:2.5rem;
  }
  .world-scene {
    aspect-ratio:1.05;
  }
  .world-heading {
    font-size:.5625rem;
    left:3%;
    right:3%;
  }
  .world-seal {
    display:flex;
    right:0;
    top:14%;
    width:4.75rem;
    height:4.75rem;
  }
  .world-scene .scene-fallback {
    inset:10% 2% 8%;
    width:96%;
    height:82%;
  }
  .world-scene .scene-bottom {
    justify-content:space-between;
  }
  .world-scene .scene-hint {
    display:block;
    font-size:.5625rem;
  }
  .world-shelf {
    margin-top:1.1rem;
    margin-inline:0;
  }
  .world-choice {
    font-size:.75rem;
    padding:.6rem .3rem;
  }
  .world-product {
    flex-wrap:nowrap;
    margin-top:1rem;
  }
  .world-product p {
    font-size:1.4rem;
  }
  .world-product-link {
    font-size:.625rem;
  }
  .world-foot {
    justify-content:center;
    padding-block:.8rem 1.4rem;
  }
  .world-foot > span {
    display:none;
  }
  .craft-photo {
    aspect-ratio:1.05;
  }
}

@media(max-width:360px) {
  .world-choice {
    font-size:.6875rem;
  }
  .world-product-link {
    max-width:10ch;
  }
}

@media(prefers-reduced-motion:reduce) {
  .world-scene canvas,.world-scene .scene-fallback,.world-choice,.product-card .product-image {
    transition:none;
  }
}

@media print {
  .world-visual,.world-foot {
    display:none;
  }
  .bakery-world,.craft,.site-header,.site-footer,.special-order {
    background:#fff;
    color:#000;
  }
  .bakery-world h1 em,.world-description,.world-eyebrow {
    color:#222;
  }
  .world-grid {
    display:block;
    min-height:0;
    padding:1rem 0;
  }
}