/* ==========================================================================
   islamade — main stylesheet
   --------------------------------------------------------------------------
   1. Brand colors & settings   ← change colors and fonts here
   2. Base
   3. Layout helpers
   4. Header & mobile menu
   5. Footer
   6. Playful cards (shared hover effects)
   7. Home page bento grid
   8. Buttons, chips, tags, badges
   9. Collections
   10. Products
   11. Custom order page
   12. Behind the studio page
   13. Reduced motion
   ========================================================================== */


/* 1. Brand colors & settings
   ========================================================================== */
:root {
  /* Brand palette (from the palette file) */
  --periwinkle: #AF99FF;
  --lavender:   #CAADFF;
  --pink:       #FFC2E2;
  --butter:     #F4EEA9;
  --mint:       #E5F4E3;

  /* Supporting colors */
  --ink:   #2E2250; /* all text and icons — passes WCAG AA on every palette color */
  --paper: #FFFBF4; /* page background */

  /* Deeper tints — ONLY for decorative shapes, never for text */
  --periwinkle-deep: #8E72F7;
  --lavender-deep:   #A985F5;
  --pink-deep:       #F79BCB;
  --butter-deep:     #DDCD5E;
  --mint-deep:       #A9D5A3;

  /* Fonts (loaded from Google Fonts in each page's <head>) */
  --font-logo:    "Yellowtail", cursive;
  --font-heading: "Chonburi", Georgia, serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shapes & spacing */
  --radius: 24px;
  --radius-sm: 14px;
  --gap: clamp(14px, 2vw, 24px);
  --page-width: 1240px;
  --shadow: 0 20px 32px -20px rgba(46, 34, 80, 0.5);
}

/* Accent helpers: class="accent-pink" gives an element a background color
   (--accent) and a matching color for its decorative shape (--shape).
   Collections in data/collections.json pick one of these with "accent". */
/* --soft is a second palette color, used behind a product with no photo yet */
.accent-periwinkle { --accent: var(--periwinkle); --shape: var(--paper);         --soft: var(--lavender); }
.accent-lavender   { --accent: var(--lavender);   --shape: var(--lavender-deep); --soft: var(--pink); }
.accent-pink       { --accent: var(--pink);       --shape: var(--pink-deep);     --soft: var(--butter); }
.accent-butter     { --accent: var(--butter);     --shape: var(--butter-deep);   --soft: var(--mint); }
.accent-mint       { --accent: var(--mint);       --shape: var(--mint-deep);     --soft: var(--pink); }


/* 2. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

img[hidden] {
  display: none !important;
}

/* Stops the page scrolling behind the product quick view */
.has-dialog {
  overflow: hidden;
}

h1, h2, h3 {
  margin: 0 0 0.4em;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
  text-transform: lowercase;
}

h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.35rem; }

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

/* Clear, high-contrast focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Hidden visually, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}


/* 3. Layout helpers
   ========================================================================== */
.container {
  width: min(100% - 32px, var(--page-width));
  margin-inline: auto;
}

.page-intro {
  max-width: 760px;
  padding-block: clamp(12px, 4vw, 40px) clamp(20px, 3vw, 32px);
}

.page-intro p {
  font-size: 1.15rem;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section {
  margin-top: clamp(40px, 7vw, 80px);
}

/* Messages shown while loading or when something goes wrong */
.notice {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--butter);
}

.notice h2 {
  font-size: 1.6rem;
}

.loading {
  padding: 24px 0;
  font-weight: 500;
}


/* 4. Header & mobile menu
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 20;
  padding-block: 18px;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* On the home page the big logo lives inside the bento grid instead */
.site-header--home .container {
  justify-content: flex-end;
}

.logo {
  font-family: var(--font-logo);
  font-weight: 400;
  line-height: 1;
  color: var(--paper);
  text-decoration: none;
  text-transform: none;
  /* soft periwinkle glow, with a thin darker edge so it stays readable */
  text-shadow:
    0 0 1px var(--periwinkle-deep),
    0 0 2px var(--periwinkle-deep),
    0 0 10px var(--periwinkle),
    0 0 22px var(--periwinkle),
    0 0 36px var(--lavender);
}

.site-header .logo {
  font-size: 2.4rem;
  padding: 4px 8px;
}

.site-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.site-nav a:hover {
  background: var(--lavender);
}

.site-nav a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 759px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: calc(100% - 6px);
    right: 16px;
    left: 16px;
    display: none;
    padding: 10px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
  }

  .site-nav a {
    padding: 12px 16px;
    font-size: 1.1rem;
  }
}


/* 5. Footer
   ========================================================================== */
.site-footer {
  margin-top: clamp(56px, 9vw, 104px);
  padding-bottom: 24px;
}

.footer-card {
  position: relative;
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius);
  background: var(--lavender);
  overflow: hidden;
}

.footer-card > * {
  position: relative; /* keep content above the decorative shape */
}

.footer-card .logo {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 2.6rem;
}

.footer-note {
  max-width: 58ch;
  font-size: 1.1rem;
}

.footer-card h2 {
  font-size: 1.4rem;
}

.footer-shape {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  --shape: var(--lavender-deep);
  transform: rotate(-12deg);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.social-links svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 8px 0;
  font-size: 0.9rem;
}

@media (min-width: 860px) {
  .footer-card {
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
  }
}


/* 6. Playful cards — shared hover effects
   Any element with class="playful" lifts on hover, its ".plus" button spins
   90° and its decorative ".shape" wiggles.
   ========================================================================== */
.playful {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.playful:hover,
.playful:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

/* The small round "+" button in the top-right corner */
.plus {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.35s ease;
}

.plus svg {
  width: 20px;
  height: 20px;
}

.playful:hover .plus,
.playful:focus-visible .plus {
  transform: rotate(90deg);
}

/* Decorative shapes. Their color comes from --shape (see accent helpers). */
.shape {
  display: block;
  color: var(--shape, var(--ink));
  aspect-ratio: 1;
}

.playful:hover .shape,
.playful:focus-visible .shape {
  animation: wiggle 0.7s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30%      { transform: rotate(-9deg) scale(1.04); }
  65%      { transform: rotate(7deg) scale(1.02); }
}

/* Photos masked into a soft, blobby flower shape */
.blob-mask {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: var(--blob) center / 100% 100% no-repeat;
          mask: var(--blob) center / 100% 100% no-repeat;
}

:root {
  --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M47 4C59 1 70 8 73 19C85 17 97 27 95 40C100 51 96 64 85 68C88 81 79 94 65 92C56 99 41 99 34 90C21 94 7 85 8 72C0 64 1 50 9 43C3 31 11 16 25 15C31 7 39 5 47 4Z'/%3E%3C/svg%3E");
}


/* 7. Home page bento grid
   Mobile: 1 column · Tablet: 2 columns · Desktop: 4 columns like the design
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "collections"
    "custom"
    "shop"
    "studio"
    "instagram"
    "youtube"
    "whatsapp";
  gap: var(--gap);
}

.bento__logo        { grid-area: logo; }
.tile--collections  { grid-area: collections; }
.tile--custom       { grid-area: custom; }
.tile--shop         { grid-area: shop; }
.tile--studio       { grid-area: studio; }
.tile--instagram    { grid-area: instagram; }
.tile--youtube      { grid-area: youtube; }
.tile--whatsapp     { grid-area: whatsapp; }

.bento__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 12px;
  text-align: center;
}

.bento__logo h1 {
  margin: 0;
  font-size: clamp(3.4rem, 12vw, 4.4rem);
}

.bento__logo p {
  margin: 6px 0 0;
  font-weight: 500;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-height: 260px;
  padding: 56px 24px 28px;
  border-radius: var(--radius);
  background: var(--accent);
  text-align: center;
}

.tile .shape {
  flex: 1;
  width: 100%;
  max-width: 150px;
  max-height: 150px;
  min-height: 100px;
}

.tile__title {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.05;
}

/* The tall "collections" tile with the blob photo */
.tile--collections {
  justify-content: space-between;
}

.tile__photo {
  position: relative;
  width: min(100%, 270px);
  aspect-ratio: 1;
  margin: auto;
}

.tile__dashes {
  position: absolute;
  bottom: -6%;
  left: -6%;
  width: 42%;
  color: var(--periwinkle-deep);
}

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "logo        logo"
      "collections custom"
      "collections shop"
      "studio      instagram"
      "youtube     whatsapp";
  }

  .tile {
    min-height: 280px;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    /* logo row · rest of the top tiles · bottom row */
    grid-template-rows: 120px minmax(190px, auto) minmax(320px, auto);
    grid-template-areas:
      "logo        custom    shop    studio"
      "collections custom    shop    studio"
      "collections instagram youtube whatsapp";
  }

  .bento__logo {
    align-items: flex-start;
    padding: 0 0 0 8px;
    text-align: left;
  }

  .bento__logo h1 {
    font-size: 4.2rem;
  }

  .tile {
    min-height: 0;
  }
}


/* 8. Buttons, chips, tags, badges
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Light version, for use on pastel backgrounds */
.btn--light {
  background: var(--paper);
  color: var(--ink);
}

.btn--light:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-style: dashed;
  background: transparent;
  color: var(--ink);
  cursor: not-allowed;
  transform: none;
}

.text-link {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.text-link:hover {
  text-decoration-color: var(--periwinkle-deep);
}

/* Filter chips on the shop page */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent, var(--paper));
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover {
  transform: translateY(-2px);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Small pill labels */
.tag,
.badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

a.tag:hover {
  background: var(--ink);
  color: var(--paper);
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.status--made-to-order::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.status--sold-out {
  text-decoration: line-through;
}

.status--sold-out::before {
  display: none;
}

.badge--new {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
}


/* 9. Collections
   ========================================================================== */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
}

.collection-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border-radius: var(--radius);
  background: var(--accent);
  overflow: hidden;
}

.collection-card__media {
  position: relative;
  width: 80%;
  aspect-ratio: 1;
  margin: 4px auto 18px;
}

.collection-card .shape {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 90px;
}

/* keep the text above the decorative shape */
.collection-card__name,
.collection-card__tagline,
.collection-card__count {
  position: relative;
  z-index: 1;
}

.collection-card__name {
  margin-bottom: 6px;
  font-size: 1.9rem;
}

.collection-card__tagline {
  max-width: 30ch;
  margin-bottom: 14px;
}

.collection-card__count {
  position: relative;
  margin: auto 0 0;
  font-weight: 700;
}

.collection-card .badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}

/* Header band on a single collection page */
.collection-hero {
  position: relative;
  display: grid;
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius);
  background: var(--accent);
  overflow: hidden;
}

.collection-hero__text {
  position: relative;
  z-index: 1;
}

.collection-hero__tagline {
  font-size: 1.25rem;
  font-weight: 500;
}

.collection-hero__media {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  justify-self: center;
}

.collection-hero .shape {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 110px;
}

.collection-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 8px;
}

@media (min-width: 800px) {
  .collection-hero {
    grid-template-columns: 1.3fr 1fr;
  }
}

.breadcrumb {
  margin: 4px 0 18px;
  font-weight: 500;
}

/* Previous / next collection links */
.pager {
  display: grid;
  gap: var(--gap);
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--accent);
}

.pager__link--next {
  text-align: right;
}

.pager__label {
  font-size: 0.9rem;
  font-weight: 700;
}

.pager__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  line-height: 1.1;
}

@media (min-width: 640px) {
  .pager {
    grid-template-columns: 1fr 1fr;
  }

  .pager__link--next:only-child {
    grid-column: 2;
  }
}


/* 10. Products
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--accent);
}

.product-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Product photo area: always 4:5, so cards line up and nothing jumps while loading */
.product-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--soft, var(--lavender));
  overflow: hidden;
}

.product-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper);
}

/* Shown when there's no photo (or it fails to load): a soft block with the name */
.product-media__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}

.product-media__fallback span {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.15;
  text-transform: lowercase;
}

/* Second photo swaps in on hover — desktop (mouse) only */
.product-media__img--hover {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-media__img--hover {
    display: block;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .product-card:hover .product-media__img--hover {
    opacity: 1;
  }
}

/* The product name is also the button that opens the quick view */
.product-card__open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.product-card__open:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.product-card__status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stock-note {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 2px dashed var(--ink);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 8px 6px;
}

.product-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.product-card__row--top {
  align-items: baseline;
}

.product-card__name {
  margin: 0;
  font-size: 1.4rem;
}

.product-card__desc {
  margin: 0;
}

.product-card__colors {
  margin: 0;
  font-size: 0.92rem;
}

.price {
  font-size: 1.15rem;
  font-weight: 700;
}

.product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
}

.product-card__actions .text-link {
  font-size: 0.95rem;
}

.empty-state {
  grid-column: 1 / -1;
}

.results-summary {
  margin: 0 0 20px;
  font-weight: 500;
}

/* Product quick view (pop-up) */
.quickview {
  width: min(100% - 24px, 980px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--ink);
  overflow: auto;
}

.quickview::backdrop {
  background: rgba(46, 34, 80, 0.55);
}

.quickview__inner {
  position: relative;
  display: grid;
  gap: 24px;
  padding: clamp(16px, 3vw, 28px);
}

.quickview__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.quickview__close svg {
  width: 22px;
  height: 22px;
}

.quickview__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.quickview__thumb {
  width: 64px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--soft);
  overflow: hidden;
  cursor: pointer;
}

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

.quickview__thumb[aria-pressed="true"] {
  border-color: var(--ink);
}

.quickview__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quickview__details p {
  margin: 0;
}

.quickview__name {
  margin: 8px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.quickview__facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.quickview__facts div {
  display: flex;
  gap: 8px;
}

.quickview__facts dt {
  font-weight: 700;
}

.quickview__facts dd {
  margin: 0;
}

.quickview .product-card__actions {
  margin-top: 8px;
}

@media (min-width: 760px) {
  .quickview__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .quickview__details {
    padding: 48px 8px 8px;
  }
}


/* 11. Custom order page
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--accent);
  overflow: hidden;
}

.step__number {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  line-height: 1;
}

.step h3 {
  font-size: 1.5rem;
}

.step p {
  position: relative;
  margin: 0;
}

.step .shape {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 70px;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.form-card {
  padding: clamp(24px, 5vw, 48px);
  border-radius: var(--radius);
  background: var(--mint);
}

.form-grid {
  display: grid;
  gap: 18px 22px;
}

@media (min-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.field .hint {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--periwinkle-deep);
  outline-offset: 2px;
}

.field [aria-invalid="true"] {
  border-style: dashed;
  border-width: 3px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 26px;
}

.form-status {
  min-height: 1.6em;
  margin: 16px 0 0;
  font-weight: 700;
}


/* 12. Behind the studio page
   ========================================================================== */
.about {
  display: grid;
  align-items: center;
  gap: clamp(28px, 6vw, 72px);
  padding-top: clamp(12px, 3vw, 32px);
}

.about__art {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  justify-self: center;
}

.about__art .shape {
  position: absolute;
}

.about__art .shape--a {
  top: -4%;
  right: -2%;
  width: 26%;
  color: var(--periwinkle-deep);
}

.about__art .shape--b {
  bottom: -2%;
  left: -6%;
  width: 30%;
  color: var(--pink-deep);
}

.about__art .shape--c {
  bottom: 4%;
  right: 4%;
  width: 18%;
  color: var(--butter-deep);
}

.about__text {
  position: relative;
  padding: clamp(26px, 5vw, 48px);
  border-radius: var(--radius);
  background: var(--butter);
}

.about__text p {
  font-size: 1.15rem;
}

.about__signature {
  display: block;
  margin-top: 8px;
  font-size: 2.6rem;
}

@media (min-width: 860px) {
  .about {
    grid-template-columns: 1fr 1.15fr;
  }
}

.cta-grid {
  display: grid;
  gap: var(--gap);
}

.cta-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 200px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--accent);
  overflow: hidden;
}

.cta-tile h2 {
  margin-top: auto;
  font-size: 2rem;
}

.cta-tile p {
  position: relative;
  margin: 0;
  max-width: 32ch;
}

.cta-tile .shape {
  position: absolute;
  top: 22px;
  left: 24px;
  width: 80px;
}

@media (min-width: 760px) {
  .cta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 13. Reduced motion — respect people who prefer less movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .playful:hover,
  .playful:focus-visible,
  .product-card:hover,
  .btn:hover,
  .chip:hover,
  .social-links a:hover {
    transform: none;
  }

  .playful:hover .plus,
  .playful:focus-visible .plus {
    transform: none;
  }
}