/* A printed colour sample book in Kholoud's brown and blush identity. */
.bouquet-plan {
  --bouquet-ink: #331e22;
  --bouquet-rule: #bba5aa;
  background: #f6e9eb;
  color: var(--bouquet-ink);
  padding-block: clamp(38px,6vw,88px);
  scroll-margin-block-start: 8px;
}
.bouquet-plan h2 {
  font-size: clamp(34px,5.1vw,78px);
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
.bouquet-plan header p { max-inline-size: 69ch; line-height: 1.6; margin: 12px 0 24px; }
.bouquet-nav { display: flex; flex-wrap: wrap; gap: 0 clamp(15px,3vw,42px); border-block-end: 1px solid var(--bouquet-rule); }
.bouquet-nav a {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
  padding-block: 12px 8px;
  min-block-size: 44px;
  text-decoration: none;
  border-block-end: 3px solid transparent;
}
.bouquet-nav a:is([aria-current],:hover,:focus-visible) { border-color: currentColor; }
.bouquet-nav a[aria-current] { font-weight: 700; }
.bouquet-nav small { font-variant-numeric: tabular-nums; }
.bouquet-panel { display: grid; grid-template-columns: minmax(0,.68fr) minmax(0,1.32fr); align-items: start; gap: clamp(24px,6vw,98px); margin-block-start: 25px; }
.bouquet-selector { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 7px; }
.bouquet-selector label { grid-column: 1/-1; font-weight: 650; }
.bouquet-selector select { background: #fffafa; border-color: var(--bouquet-rule); min-block-size: 46px; }
.bouquet-selector button { min-block-size: 46px; background: var(--bouquet-ink); color: #fffafa; font-weight: 650; border-color: var(--bouquet-ink); padding-inline: 13px; }
.bouquet-panel h3 { margin: 0; font-size: clamp(28px,3.7vw,58px); line-height: 1.2; }
.bouquet-palette > p { margin: 6px 0 15px; font-size: 16px; line-height: 1.5; max-inline-size: 58ch; }
.bouquet-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(78px,1fr));
  gap: 10px 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bouquet-chip a { display: grid; align-content: start; gap: 4px; padding: 3px; min-block-size: 46px; height: 100%; font-size: 14px; text-decoration: none; }
.bouquet-chip a:is([aria-current],:hover,:focus-visible) { background: #fffafa; text-decoration: underline; }
.bouquet-chip a[aria-current] { outline: 2px solid var(--bouquet-ink); outline-offset: 0; }
.bouquet-swatch { display: block; min-block-size: clamp(29px,3.4vw,52px); width: 100%; background: var(--swatch); border: 1px solid rgb(51 30 34 / 20%); }
.bouquet-match { scroll-margin-block-start: 16px; margin-block-start: 22px; border-block-start: 1px solid var(--bouquet-rule); padding-block-start: 13px; }
.bouquet-match h4 { margin: 0 0 6px; font-size: 19px; }
.bouquet-match ul, .bouquet-shapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 17px; }
.bouquet-match li a, .bouquet-match-reset, .bouquet-actions a, .bouquet-return { min-block-size: 44px; display: inline-flex; align-items: center; }
.bouquet-match [aria-current] { font-weight: 700; }
.bouquet-match-reset { font-size: 15px; }
.bouquet-shapes li { padding-block: 8px; font-size: clamp(18px,2vw,29px); border-block-start: 1px solid var(--bouquet-rule); }
.bouquet-shapes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.bouquet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-block-start: 24px; border-block-start: 1px solid var(--bouquet-rule); }
.bouquet-actions a { font-weight: 650; }
.bouquet-plan :is(a,button,select):focus-visible { outline: 2px solid #5a3245; outline-offset: 3px; }
.bouquet-return { margin-block-start: 14px; }
@media (max-width: 740px) {
  .bouquet-panel { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .bouquet-nav { column-gap: 15px; }
  .bouquet-nav a { gap: 3px; }
  .bouquet-selector { max-inline-size: 34rem; }
  .bouquet-colors { grid-template-columns: repeat(auto-fill,minmax(68px,1fr)); }
}
.bouquet-swatch.color-white { --swatch: #FFFFFF; }
.bouquet-swatch.color-red { --swatch: #B32C3B; }
.bouquet-swatch.color-green { --swatch: #477952; }
.bouquet-swatch.color-blue { --swatch: #3E61A7; }
.bouquet-swatch.color-black { --swatch: #222124; }
.bouquet-swatch.color-yellow { --swatch: #F1D04E; }
.bouquet-swatch.color-off-white { --swatch: #F4EEDD; }
.bouquet-swatch.color-orange { --swatch: #E58B43; }
.bouquet-swatch.color-purple { --swatch: #8956A2; }
.bouquet-swatch.color-dark-purple { --swatch: #51385C; }
.bouquet-swatch.color-light-purple { --swatch: #C5A7D6; }
.bouquet-swatch.color-light-brown { --swatch: #BB967B; }
.bouquet-swatch.color-burgundy { --swatch: #722D40; }
.bouquet-swatch.color-beige { --swatch: #DCCBB1; }
.bouquet-swatch.color-tiffany { --swatch: #83CFC5; }
.bouquet-swatch.color-light-grey { --swatch: #C7C7C7; }
.bouquet-swatch.color-dark-grey { --swatch: #66666A; }
.bouquet-swatch.color-sky-blue { --swatch: #99C9E3; }
.bouquet-swatch.color-pink { --swatch: #EBA0BB; }
.bouquet-swatch.color-dark-pink { --swatch: #B8597C; }
.bouquet-swatch.color-light-pink { --swatch: #F5D4E0; }
.bouquet-panel:has(.bouquet-print) { grid-template-areas: "select palette" "print palette"; grid-template-rows: auto 1fr; row-gap: 18px; }
.bouquet-panel:has(.bouquet-print) > .bouquet-selector { grid-area: select; }
.bouquet-panel:has(.bouquet-print) > .bouquet-palette { grid-area: palette; }
.bouquet-print { grid-area: print; display: block; max-inline-size: 32rem; align-self: start; }
.bouquet-print img { display: block; border: 1px solid var(--bouquet-rule); width: 100%; height: auto; aspect-ratio: 2.13; object-fit: cover; object-position: center top; }
.bouquet-print span { display: inline-flex; align-items: center; min-block-size: 44px; font-size: 14px; line-height: 1.45; }
@media (max-width: 740px) {
  .bouquet-panel:has(.bouquet-print) { grid-template-areas: "select" "palette" "print"; grid-template-rows: auto; }
  .bouquet-print { max-inline-size: 26rem; }
}