/** Shopify CDN: Minification failed

Line 615:10 Unexpected "{"
Line 615:19 Expected ":"
Line 616:14 Expected identifier but found whitespace
Line 616:16 Unexpected "{"
Line 616:25 Expected ":"
Line 616:76 Expected ":"
Line 617:17 Expected identifier but found whitespace
Line 617:19 Unexpected "{"
Line 617:28 Expected ":"
Line 617:82 Expected ":"
... and 10 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection (INDEX:17) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:18) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:complete-order-flow (INDEX:19) */
/* Note: this theme defines --color-background, --color-foreground, --color-button and
     friends, but NOT --color-border. Hairlines here are rgba(var(--color-foreground), a)
     because a bare rgba(var(--color-border), a) is an invalid value and the whole
     declaration gets dropped -- which is why this card previously had no border at all. */

  /* Order Summary Card */
  .order-summary-card {
    background: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .order-summary-card h3 {
    margin: 0 0 1rem 0;
    font-size: var(--fs-title);
    color: rgb(var(--color-foreground));
  }
  
  /* Order Items */
  .order-summary-items {
    border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
  
  .order-summary-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .order-summary-item:last-child {
    margin-bottom: 0;
  }
  
  .order-summary-item-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.05);
  }
  
  .order-summary-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .order-summary-item-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(var(--color-foreground), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .order-summary-item-details {
    flex: 1;
  }
  
  .order-summary-item-details h4 {
    margin: 0 0 0.25rem 0;
    font-size: var(--fs-body);
    font-weight: 500;
    color: rgb(var(--color-foreground));
  }
  
  .order-summary-item-price,
  .order-summary-item-total {
    margin: 0;
    font-size: var(--fs-body);
    color: rgb(var(--color-foreground));
  }
  
  .order-summary-item-total {
    font-weight: 600;
  }
  
  /* Order Totals */
  .order-summary-totals {
    margin-bottom: 1.5rem;
  }
  
  .order-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: var(--fs-small);
    color: rgb(var(--color-foreground));
  }
  

  .order-summary-total {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.08);
    font-size: var(--fs-lead);
  }
  
  /* Actions */
  .order-summary-actions {
    text-align: center;
  }
  
  .order-summary-actions .button {
    width: 100%;
  }

  /* Empty State */
  .complete-order-empty {
    text-align: center;
    padding: 4rem 2rem;
  }
  
  .complete-order-empty h2 {
    margin-bottom: 1rem;
    color: rgb(var(--color-foreground));
  }
  
  .complete-order-empty p {
    margin-bottom: 2rem;
    color: rgb(var(--color-foreground));
    opacity: 0.8;
  }
/* END_SECTION:complete-order-flow */

/* START_SECTION:custom-section (INDEX:22) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:delivery-area-check (INDEX:23) */
.delivery-check__inner {
    padding: 3rem 1.5rem;
    text-align: center;
  }

  .delivery-check__heading {
    margin: 0 0 0.6rem;
  }

  .delivery-check__subheading {
    margin: 0 auto 1.8rem;
    max-width: 52rem;
    font-size: var(--fs-small);
    opacity: 0.8;
  }

  .delivery-check__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }

  .delivery-check__input {
    width: 14rem;
    text-align: center;
    letter-spacing: 0.1rem;
  }

  .delivery-check__answer {
    margin: 1.6rem auto 0;
    max-width: 52rem;
    font-size: var(--fs-small);
    line-height: 1.5;
  }

  .delivery-check__answer--yes {
    font-weight: 600;
  }

  .delivery-check__answer[hidden] {
    display: none;
  }
/* END_SECTION:delivery-area-check */

/* START_SECTION:flower-flight-product (INDEX:28) */
/* Layout */
.flower-flight-product {
  padding: 1rem 0;
}

/* Main Layout Grid */
.flight-main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

/* Product Info Section */
.product-info-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-image-main img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.product-details h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.price-large {
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(var(--color-accent));
  margin-bottom: 1rem;
}

.product-description {
  color: rgba(var(--color-foreground), 0.8);
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

@media screen and (max-width: 990px) {
  .flight-main-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .flight-builder-sidebar {
    width: 100%;
    max-width: none;
  }
  
  .product-info-section {
    flex-direction: row;
    gap: 2rem;
  }
  
  .product-image-main {
    flex-shrink: 0;
  }
  
  
  /* Flight selections mobile layout */
  .flight-selections-list {
    justify-content: center;
  }
}

@media screen and (max-width: 749px) {
  .product-info-section {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .product-image-main {
    align-self: center;
  }
  
  /* Match arrangement grid mobile layout */
  .flight-selections-list {
    gap: 0.75rem;
  }
}

/* Flight Builder Sidebar */
.flight-builder-sidebar {
  background: rgba(var(--color-accent), 0.05);
  border: 1px solid rgba(var(--color-accent), 0.2);
  border-radius: 8px;
  padding: 0 0 1.5rem 0;
  height: fit-content;
  min-width: 0;
}

.flight-builder-sidebar h3 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
  padding: 1.5rem 1.5rem 0;
}

.selection-count {
  color: rgb(var(--color-accent));
  font-weight: normal;
  font-size: 0.8rem;
}

/* Flight Selection List - MATCH ARRANGEMENT CARDS EXACTLY */
.flight-selections-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.flight-selection-item {
  border: 1px solid rgb(var(--color-border));
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.flight-selection-item.filled {
  border-color: rgb(var(--color-button));
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(var(--color-button), 0.3);
  background: rgba(var(--color-button), 0.05);
}

.selection-image {
  width: 100%;
  height: auto;
  aspect-ratio: 768/1024;
  object-fit: cover;
}

.selection-placeholder-image {
  width: 100%;
  height: auto;
  aspect-ratio: 768/1024;
  background: rgba(var(--color-border), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.placeholder-content {
  text-align: center;
  color: rgba(var(--color-foreground), 0.6);
}

.placeholder-number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: rgba(var(--color-foreground), 0.3);
  margin-bottom: 0.5rem;
}

.placeholder-text {
  font-size: 0.9rem;
  line-height: 1.3;
  color: rgba(var(--color-foreground), 0.6);
}

.remove-selection-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Flight Actions */
.flight-actions-compact {
  text-align: center;
  padding: 0 1.5rem;
}


/* Available Arrangements - Compact */
.available-arrangements-compact {
  margin-top: 2rem;
}

.available-arrangements-compact h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.arrangement-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.arrangement-card-compact {
  border: 1px solid rgb(var(--color-border));
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.arrangement-card-compact:hover {
  border-color: rgb(var(--color-accent));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.arrangement-card-compact.selected {
  border-color: rgb(var(--color-button));
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(var(--color-button), 0.3);
  background: rgba(var(--color-button), 0.05);
}

.arrangement-image-compact {
  position: relative;
  overflow: hidden;
}

.arrangement-image-compact img {
  width: 100%;
  height: auto;
  aspect-ratio: 768/1024;
  object-fit: cover;
}

.arrangement-controls-bottom {
  padding: 0.75rem;
  margin-top: auto;
}

.btn-add-only {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border: 1px solid rgba(var(--color-button), var(--alpha-button-border));
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-add-only:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.arrangement-controls-with-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.btn-add-compact, .btn-remove-compact {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border: 1px solid rgba(var(--color-button), var(--alpha-button-border));
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-add-compact:hover, .btn-remove-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-add-compact:disabled, .btn-remove-compact:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.quantity-display-compact {
  font-weight: bold;
  font-size: 1rem;
  min-width: 24px;
  text-align: center;
}

.arrangement-info-compact {
  padding: 0.75rem;
  text-align: center;
  flex-grow: 1;
}

.arrangement-info-compact h4 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}


/* Mobile Responsive for Arrangements */
@media screen and (max-width: 749px) {
  .arrangement-grid-compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  
  .btn-add-compact, .btn-remove-compact {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  
  .arrangement-controls-compact {
    padding: 4px 10px;
    gap: 6px;
  }
  
  .arrangement-info-compact {
    padding: 0.75rem 0.5rem;
  }
  
  .arrangement-info-compact h4 {
    font-size: 0.85rem;
  }
}



.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
  padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
}
/* END_SECTION:flower-flight-product */

/* START_SECTION:footer (INDEX:29) */
/* Balanced footer top row on desktop: link columns grouped left, newsletter pushed right */
  @media screen and (min-width: 990px) {
    .footer .footer__content-top {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 4rem 6rem;
    }

    .footer .footer__blocks-wrapper {
      display: flex;
      flex: 0 1 auto;
      gap: 6rem;
      margin: 0;
    }

    .footer .footer__blocks-wrapper > .footer-block {
      padding-left: 0;
    }

    .footer .footer-block--newsletter {
      flex: 0 1 32rem;
      margin-top: 0;
      align-items: flex-start;
    }

    .footer .footer-block__newsletter {
      text-align: left;
      margin: 0;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:search (INDEX:65) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* START_SECTION:welcome-offer (INDEX:68) */
.welcome-offer[hidden],
  .welcome-offer__card[hidden] {
    display: none;
  }

  .welcome-offer {
    position: fixed;
    left: 1.6rem;
    bottom: 1.6rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    max-width: calc(100vw - 3.2rem);
    background: none;
  }

  .welcome-offer__tab {
    display: flex;
    align-items: center;
    border-radius: 2.4rem;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18);
  }

  .welcome-offer__open {
    padding: 1rem 0.4rem 1rem 1.8rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.04rem;
    cursor: pointer;
  }

  .welcome-offer__dismiss,
  .welcome-offer__card-close {
    display: flex;
    width: 4.4rem;
    height: 4.4rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .welcome-offer__dismiss .icon,
  .welcome-offer__card-close .icon {
    width: 1.1rem;
    height: 1.1rem;
  }

  .welcome-offer__card {
    position: relative;
    width: 30rem;
    max-width: 100%;
    padding: 2rem 2rem 1.6rem;
    border-radius: 1.2rem;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.2);
  }

  .welcome-offer__card-close {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
  }

  .welcome-offer__heading {
    margin: 0 3rem 0.6rem 0;
  }

  .welcome-offer__text {
    margin: 0 0 1.2rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .welcome-offer__code {
    width: 100%;
    padding: 1rem;
    border: 0.15rem dashed currentColor;
    border-radius: 0.6rem;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    cursor: pointer;
  }

  .welcome-offer__hint {
    margin: 0.8rem 0 0;
    font-size: 1.2rem;
    text-align: center;
    opacity: 0.85;
  }
/* END_SECTION:welcome-offer */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:69) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:70) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:cart-complete-order-cta (INDEX:76) */
/* Dawn's `.cart__ctas button { width: 100% }` only matches the element, and the enabled
     state here is an <a>. Without this the disabled and enabled buttons would be different
     widths -- the same mismatch that made the earlier pair look wrong. */
  .cart__ctas .cart__checkout-button {
    width: 100%;
  }

  /* The arrow is the only thing here Dawn does not already provide. Sized in em so it
     tracks whatever the button's font-size turns out to be. */
  .cart-cta__arrow {
    margin-left: 0.6rem;
    font-size: 1.1em;
    transition: transform 0.2s ease;
    display: inline-block;
  }

  a.button:hover .cart-cta__arrow {
    transform: translateX(3px);
  }
/* END_SNIPPET:cart-complete-order-cta */

/* START_SNIPPET:cart-minimum-notice (INDEX:78) */
.cart__minimum-notice {
    margin: 0.8rem 0 0;
    font-size: var(--fs-fine);
    line-height: 1.5;
    text-align: center;
    color: rgba(var(--color-foreground), 0.75);
  }
/* END_SNIPPET:cart-minimum-notice */

/* START_SNIPPET:flower-shop-buyer-form (INDEX:84) */
.flower-shop-buyer-help {
    margin: -0.25rem 0 1rem;
    font-size: var(--fs-small);
    opacity: 0.75;
  }
/* END_SNIPPET:flower-shop-buyer-form */

/* START_SNIPPET:flower-shop-card-message (INDEX:85) */
.flower-shop-card-message {
    max-width: 100%;
    margin: 0;
  }

  .flower-shop-step-title {
    font-size: var(--fs-title);
    margin-bottom: 1.5rem;
    color: rgb(var(--color-foreground));
    border-bottom: 2px solid var(--color-border, #e0e0e0);
    padding-bottom: 0.5rem;
  }

  .flower-shop-form-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    background: rgb(var(--color-background));
  }

  .flower-shop-form-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: var(--fs-lead);
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .flower-shop-help-text {
    margin: 0 0 0.75rem 0;
    font-size: var(--fs-small);
    color: var(--color-foreground-subtle, #666);
    font-style: italic;
  }

  .flower-shop-form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .flower-shop-form-field {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0.75rem;
  }

  .flower-shop-form-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: rgb(var(--color-foreground));
  }

  .flower-shop-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 4px;
    font-size: var(--fs-body);
    font-family: inherit;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    transition: border-color 0.2s ease;
  }

  .flower-shop-input:focus {
    outline: none;
    border-color: var(--color-accent, #0066cc);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
  }

  .flower-shop-message-textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
  }

  .flower-shop-character-count {
    text-align: right;
    font-size: var(--fs-fine);
    color: var(--color-foreground-subtle, #666);
    margin-top: 0.25rem;
  }

  .flower-shop-character-count .flower-shop-count {
    font-weight: 500;
  }

  .flower-shop-card-preview {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .flower-shop-card-mockup {
    width: 300px;
    height: 200px;
    background: #f9f9f9;
    border: 2px solid var(--color-border, #e0e0e0);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .flower-shop-card-content {
    font-family: Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 400;
    color: #333;
    text-align: center;
    line-height: 1.4;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .flower-shop-card-signature {
    text-align: right;
    font-style: italic;
    font-size: var(--fs-small);
    color: #666;
    margin-top: 1rem;
  }

  .flower-shop-checkbox-field {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .flower-shop-checkbox-field input[type="checkbox"] {
    margin: 0;
    width: auto;
  }

  .flower-shop-checkbox-field label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: normal;
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .flower-shop-form-row {
      flex-direction: column;
    }
    
    .flower-shop-form-field {
      min-width: auto;
    }
    
    .flower-shop-form-section {
      padding: 1rem;
    }
    
    .flower-shop-card-mockup {
      width: 100%;
      max-width: 280px;
    }
  }
/* END_SNIPPET:flower-shop-card-message */

/* START_SNIPPET:flower-shop-checkout-flow (INDEX:86) */
.flower-shop-checkout-flow {
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }

  /* Step Navigation */

  /* Step changes scroll back here. scroll-margin-top keeps the step nav clear of the header
     rather than tucking under it -- --header-height is measured and set by header.liquid, so
     this stays correct whether the header is sticky or not, and at any breakpoint. */
  .flower-shop-checkout-flow {
    scroll-margin-top: calc(var(--header-height, 0px) + 1.6rem);
  }
  .flower-shop-step-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgb(var(--color-background));
    border-radius: 8px;
    border: 1px solid rgba(var(--color-foreground), 0.12);
  }

  /* No cursor: pointer. Nothing here has a click handler, and an affordance that does
     nothing is worse than none. Add it back alongside real step navigation. */
  .flower-shop-step-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
  }

  /* Only the current step carries weight. Every label used to be 600 with upcoming steps at
     full contrast, so the whole strip read as bold -- three headings competing instead of one
     position marker. */
  .flower-shop-step-item {
    color: rgba(var(--color-foreground), 0.55);
  }

  .flower-shop-step-item.active {
    color: rgb(var(--color-foreground));
  }

  .flower-shop-step-item.active .flower-shop-step-label {
    font-weight: 600;
  }

  .flower-shop-step-item.completed {
    color: rgb(var(--color-foreground));
    opacity: 0.7;
  }

  .flower-shop-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--color-foreground), 0.08);
    color: rgba(var(--color-foreground), 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: var(--fs-body);
    transition: all 0.3s ease;
  }

  .flower-shop-step-item.active .flower-shop-step-number {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    font-weight: 600;
  }

  .flower-shop-step-item.completed .flower-shop-step-number {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    opacity: 0.7;
  }

  /* An arrow rather than a rule: a line between steps says "separate", an arrow says
     "flow". Revert by putting back width/height/background and dropping the ::after. */
  .flower-shop-step-divider {
    margin: 0 0.2rem;
    color: rgba(var(--color-foreground), 0.3);
    line-height: 1;
    font-size: var(--fs-lead);
  }

  .flower-shop-step-divider::after {
    content: '92';
  }

  .flower-shop-step-item.completed + .flower-shop-step-divider {
    color: rgba(var(--color-foreground), 0.5);
  }

  .flower-shop-step-label {
    font-size: var(--fs-body);
    font-weight: 400;
    white-space: nowrap;
  }

  /* The heading is focused programmatically on a step change, so a ring on it is noise --
     the user did not arrive there by keyboard. :focus-visible is left intact and comes
     later, so someone who pressed Enter on Next still gets the ring. */
  .flower-shop-step-title:focus {
    outline: none;
  }

  .flower-shop-step-title:focus-visible {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
    outline-offset: 0.4rem;
  }
  /* Step Content */
  .flower-shop-step-content {
    background: rgb(var(--color-background));
    border-radius: 8px;
    margin-bottom: 2rem;
    position: relative;
  }

  /* A bracket around the form body.

     The scroll cue needs a CONTINUOUS element, because a fade is content-dependent: when a
     section happens to end at the fold there is nothing under the bar to fade and a
     half-finished form still reads as finished. That is the property a scrollbar has.

     A bracket beats a bare rail because its closing tick is a POSITIVE end-of-form signal
     rather than the absence of one. Can't see the bottom tick? There is more below. Can see
     it? That was the last field. It spans the body only, so it ends at the last field
     instead of running behind the action bar. */
  .flower-shop-step-body {
    position: relative;
    padding-left: 1.6rem;
    border-left: 0.2rem solid rgba(var(--color-foreground), 0.1);
  }

  .flower-shop-step-body::before,
  .flower-shop-step-body::after {
    content: '';
    position: absolute;
    left: -0.2rem;
    width: 1rem;
    height: 0.2rem;
    background: rgba(var(--color-foreground), 0.1);
  }

  .flower-shop-step-body::before {
    top: 0;
  }

  .flower-shop-step-body::after {
    bottom: 0;
  }

  /* Pinned to the bottom of the viewport so the step's primary action is always visible.
     The delivery and review steps are taller than a phone screen and nothing signalled
     there was more below, so customers could not find Continue.

     `sticky` rather than `fixed` on purpose: the bar stays in normal flow, so it pins only
     while the step is taller than the viewport and then settles at the end of the form. It
     can never cover the last field, and on a short step it does nothing at all. The top
     edge is what reads as "there is more above this". */
  .flower-shop-step-actions {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    padding-top: 3.4rem;
    /* Opaque by default. At the true end of the form nothing is below, so the bar should read
       as a footer -- and it hides the rail behind it, which is what says "this is the end". */
    background: rgb(var(--color-background));
  }

  /* Only while genuinely stuck. A fade at the end of the form would claim there is more below
       when there is not, which is the inverse of the bug it exists to fix. JS toggles this,
       because CSS cannot yet detect a stuck sticky element. */
  .flower-shop-step-actions.is-floating {
    background: linear-gradient(
      to bottom,
      rgba(var(--color-background), 0) 0,
      rgb(var(--color-background)) 2.4rem
    );
  }
  
  /* These buttons are Dawn's `.button`, not `.flower-shop-btn` (which is only used on the
     cart page), so they inherit Dawn's 1.5rem/15px and the type pass missed them. Sized
     against the scale here: the primary action should not read smaller than the fields
     above it. */
  .flower-shop-step-actions .button {
    flex: 1;
    min-width: 200px;
    font-size: var(--fs-body);
  }

  .flower-shop-step-actions .button--primary {
    font-size: var(--fs-lead);
  }

  /* Buttons */
  .flower-shop-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-body);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    min-width: 140px;
    justify-content: center;
  }

  .flower-shop-btn-primary {
    background: var(--color-accent, #0066cc);
    color: white;
  }

  .flower-shop-btn-primary:hover {
    background: var(--color-accent-hover, #0052a3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
  }

  .flower-shop-btn-checkout {
    background: var(--color-success, #28a745);
    color: white;
    font-size: var(--fs-lead);
    padding: 1rem 2rem;
  }

  .flower-shop-btn-checkout:hover {
    background: var(--color-success-hover, #218838);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  }

  .flower-shop-btn-secondary {
    background: transparent;
    color: rgb(var(--color-foreground));
    border: 1px solid var(--color-border, #ccc);
  }

  .flower-shop-btn-secondary:hover {
    background: var(--color-border-light, #f5f5f5);
  }

  .flower-shop-btn-arrow {
    font-size: 1.2em;
  }

  /* Cart Sidebar */
  .flower-shop-cart-sidebar {
    position: sticky;
    top: 2rem;
    width: 300px;
    float: right;
    margin-left: 2rem;
    padding: 1.5rem;
    background: rgb(var(--color-background));
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
  }

  .flower-shop-cart-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light, #f0f0f0);
  }

  .flower-shop-item-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
  }

  .flower-shop-item-details {
    flex: 1;
  }

  .flower-shop-item-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
  }

  .flower-shop-item-price {
    font-size: var(--fs-small);
    color: var(--color-foreground-subtle, #666);
  }

  .flower-shop-cart-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--color-border, #e0e0e0);
    text-align: center;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .flower-shop-checkout-flow {
      padding: 0;
    }
    
    .flower-shop-step-nav {
      padding: 0.75rem;
      /* Keep horizontal layout on mobile */
    }
    
    .flower-shop-step-item {
      flex: 1;
      justify-content: center;
      padding: 0.25rem 0.5rem;
    }
    
    .flower-shop-step-label {
      font-size: var(--fs-small);
    }
    
    .flower-shop-step-divider {
      margin: 0 0.25rem;
    }
    
    .flower-shop-step-actions {
      flex-direction: column;
      align-items: stretch;
    }

    /* Stacked, the markup order put Back above the main button. The main action goes first. */
    .flower-shop-step-actions .button--primary {
      order: -1;
    }

    .flower-shop-btn {
      width: 100%;
      min-width: auto;
    }
    
    .flower-shop-cart-sidebar {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .flower-shop-step-nav {
      padding: 0.5rem;
    }
    
    .flower-shop-step-number {
      width: 28px;
      height: 28px;
      font-size: var(--fs-small);
    }
  }

  .flower-shop-sms-legal-links {
    margin-top: 0.6rem;
    padding-left: 2rem;
    font-size: var(--fs-fine);
    color: rgba(var(--color-foreground), 0.85);
  }

  .flower-shop-sms-legal-links a {
    color: inherit;
    text-decoration: underline;
  }

  .flower-shop-sms-legal-links span {
    margin: 0 0.35rem;
  }

  /* The extras step. Each row echoes a cart line rather than a product card -- this is an
     attachment to an order already being placed, not a shelf to browse. */
  .flower-shop-extras-intro {
    margin: 0 0 1.4rem;
    font-size: 1.4rem;
    opacity: 0.75;
  }

  .flower-shop-extra {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: center;
    padding: 1.2rem 0;
  }

  .flower-shop-extra + .flower-shop-extra {
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }

  .flower-shop-extra[hidden] {
    display: none;
  }

  /* The whole picture, not a square crop of it. These are 1520x1840, so cover into a square box
     ate the top of the frame -- which on a balloon means the balloon. Fixed width, natural
     height: every add-on image shares that ratio, so the rows still line up. */
  .flower-shop-extra-image img {
    display: block;
    width: 5.6rem;
    height: auto;
    border-radius: 0.4rem;
  }

  .flower-shop-extra-text h4 {
    margin: 0 0 0.2rem;
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .flower-shop-extra-price {
    margin: 0;
    font-size: 1.3rem;
    opacity: 0.7;
  }

  .flower-shop-extra-note {
    margin: 0.1rem 0 0.2rem;
    font-size: 1.2rem;
    line-height: 1.35;
    opacity: 0.8;
  }

  .flower-shop-extra-add {
    min-width: 8.5rem;
    min-height: 3.6rem;
    padding: 0 1.4rem;
    font-size: 1.3rem;
  }

  .flower-shop-extras-empty {
    margin: 1.2rem 0 0;
    font-size: 1.4rem;
    opacity: 0.75;
  }

  @media screen and (max-width: 589px) {
    .flower-shop-extra {
      grid-template-columns: 5.6rem minmax(0, 1fr);
      row-gap: 0.8rem;
    }

    .flower-shop-extra-image img {
      width: 5rem;
    }

    .flower-shop-extra-add {
      grid-column: 2;
      width: 100%;
    }
  }

  /* The promise that we will ask for this one's wording a step later. */
  .flower-shop-extra-wording {
    margin: 0.3rem 0 0;
    font-size: var(--fs-fine);
    opacity: 0.75;
  }

  /* The count line under an add-on that is already on the order. */
  .flower-shop-extra-incart {
    margin: 0.2rem 0 0;
    font-size: 1.2rem;
    opacity: 0.75;
  }


  .flower-shop-extra-choice {
    width: 100%;
    max-width: 30rem;
    margin-top: 0.4rem;
    padding: 0.6rem 0.8rem;
    font-size: 1.3rem;
    border: 0.1rem solid rgba(var(--color-foreground), 0.2);
    border-radius: 0.4rem;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }

  /* Pinned to the bottom of the viewport so the length of the list never stands between someone
     and skipping it. Desktop leaves it where it was: the list is short enough there, and a bar
     floating over a wide page reads as an advert. */
  @media screen and (max-width: 749px) {
    /* No negative margins. They were guessing at the container's padding and guessed wrong, so
       the bar stopped short of the panel edge and the last row's Add button sat beside it, half
       covered -- which is the odd thing in the screenshot. Full width of its own container, and
       the list gets clearance underneath so the final row can be scrolled clear of the bar. */
    .flower-shop-extras-actions {
      position: sticky;
      bottom: 0;
      z-index: 2;
      width: 100%;
      padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
      background: rgb(var(--color-background));
      box-shadow: 0 -0.4rem 1.2rem rgba(var(--color-foreground), 0.08);
    }

    #step_extras .flower-shop-step-body {
      padding-bottom: 1.5rem;
    }
  }

  .flower-shop-extras-skip {
    border: 0;
    background: none;
    padding: 0;
    margin-left: 0.4rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .flower-shop-extras-skip:hover {
    text-decoration-thickness: 0.2rem;
  }
/* END_SNIPPET:flower-shop-checkout-flow */

/* START_SNIPPET:flower-shop-delivery-form (INDEX:87) */
/* The caveat on today's own card, past the cutoff. */
  .flower-shop-soonest__why--caution {
    color: rgba(155, 62, 90, 0.95);
    font-weight: 600;
  }

  /* Standing in for a date nothing has chosen yet. */
  .flower-shop-chosen--empty {
    color: rgba(var(--color-foreground), 0.55);
    font-weight: 400;
  }

  .flower-shop-delivery-form {
    max-width: 100%;
    margin: 0;
  }

  /* ---- Delivery date: two tiers, list first ---------------------------------------
     Deliberately conservative CSS. No :has(), no container queries, no subgrid, and
     nothing that depends on flex `gap` alone -- this has to be right on an old iPhone.
     Tap targets are floored at 44px on the list and 40px in the calendar, per iOS
     guidance, which still fits a 320px screen once the grid may shrink. */

  /* Full width, and its own row. Sharing a flex row squeezed the calendar to 16px. */
  .flower-shop-form-field--full {
    width: 100%;
    margin-bottom: 1.6rem;
  }

  /* ---- Delivery date -------------------------------------------------------------
     Two tiers, ranked. The rows are the primary control: white, bordered, evenly sized.
     The calendar sits on tinted ground with no border of its own, so it reads as the
     quieter second option instead of a competing card.

     Conservative on purpose -- no :has(), no container queries, nothing needing flex gap
     alone. Tap targets floored at 44px on rows, and the month grid is desktop-only
     because it cannot reach that on a phone inside this form. */

  .flower-shop-datefield {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
  }

  .flower-shop-datefield__legend {
    padding: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  /* Inline inside the label, so it costs no vertical space at all. font-weight and
     font-size are both stated because it inherits 600/--fs-body from
     `.flower-shop-form-field label` otherwise, and would read as part of the field's name
     rather than as an annotation on it. */
  /* The counterpart to .flower-shop-optional. Red because that is what a required mark is
     expected to be; aria-hidden on the span itself, so the asterisk is decoration and screen
     readers get the field's own required state instead of hearing "star". */
  .flower-shop-required-mark {
    color: #c0392b;
    margin-left: 0.2rem;
    font-weight: 700;
  }

  .flower-shop-optional {
    margin-left: 0.6rem;
    font-size: var(--fs-small);
    font-weight: 400;
    color: rgba(var(--color-foreground), 0.6);
  }

  .flower-shop-datefield__help {
    margin: 0.2rem 0 1.4rem;
    font-size: var(--fs-small);
    color: rgba(var(--color-foreground), 0.65);
  }

  .flower-shop-datefield__help:empty {
    display: none;
  }

  .flower-shop-tierlabel {
    margin: 0 0 0.8rem;
    font-size: var(--fs-fine);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.55);
  }

  /* Both tier labels share one style so they sit on the same line and read as a pair.
     Making the right one quieter broke the symmetry the labels are supposed to establish. */

  .flower-shop-datefield__tiers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  /* Rows at their own natural height. The equal-share mechanism that squares the two
     columns is DESKTOP ONLY and lives in the min-width query near the bottom of this file.

     It has to be, and this is the whole reason: `flex: 1 1 0` with `min-height: 0` gives a
     row a flex base size of 0 and turns off the automatic minimum, so the row has no size
     of its own -- it only has the share of its parent's height that it is handed. Beside
     the calendar that height is definite and the mechanism is exactly what we want. On a
     phone the calendar is gone, the column's height is auto, and a column of items that
     are all 0 tall collapses to the sum of its gaps: every row squashed to nothing with
     its text spilling over the rows below it. */
  .flower-shop-soonest {
    display: flex;
    flex-direction: column;
  }

  #delivery_soonest {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* Four rows at natural height, reserved so filling the list from JS does not shift the
       page. Desktop replaces this with the calendar's height. */
    min-height: 38.6rem;
  }

  .flower-shop-soonest__row {
    display: flex;
  }

  .flower-shop-soonest__label {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ---- tier 1: soonest deliverable dates ---- */

  /* Spacing comes from the flex gap on #delivery_soonest, never from a row margin -- a
     margin here would double up with it. */
  .flower-shop-soonest__row {
    position: relative;
  }

  /* Visually hidden but focusable, so keyboard and screen-reader behaviour come from the
     browser. Not display:none, which would drop it from the tab order. */
  .flower-shop-soonest__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }

  .flower-shop-soonest__label {
    min-height: 4.4rem;
    /* Border width is constant between states, so selecting a row cannot nudge the
       column's height. */
    padding: 1.1rem 3.6rem 1.1rem 1.4rem;
    border: 2px solid rgba(var(--color-foreground), 0.12);
    border-radius: 8px;
    background: rgb(var(--color-background));
    cursor: pointer;
    line-height: 1.35;
  }

  .flower-shop-soonest__label:hover {
    border-color: rgba(var(--color-foreground), 0.3);
  }

  .flower-shop-soonest__input:checked + .flower-shop-soonest__label {
    border-color: rgb(var(--color-button));
    background: rgba(var(--color-button), 0.05);
  }

  .flower-shop-soonest__input:focus-visible + .flower-shop-soonest__label {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
    outline-offset: 0.2rem;
  }

  .flower-shop-soonest__day {
    display: block;
    font-size: var(--fs-body);
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .flower-shop-soonest__date {
    display: block;
    font-size: var(--fs-small);
    color: rgba(var(--color-foreground), 0.65);
  }

  /* Every row reserves the third line whether it carries text or not, so all four cards are
     exactly the same height by construction rather than by a guessed min-height. There is
     room for the detail; there is no reason for the rows to be uneven. */
  /* No reserved height any more: every row is the same height because it takes an equal
     share of the column, so an empty third line would just push text off centre. */
  .flower-shop-soonest__why {
    display: block;
    font-size: var(--fs-small);
    color: rgba(var(--color-button), 0.95);
  }

  .flower-shop-soonest__why:empty {
    display: none;
  }

  .flower-shop-soonest__input:checked + .flower-shop-soonest__label::after {
    content: '\2713';
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-lead);
    font-weight: 600;
    color: rgb(var(--color-button));
  }

  /* ---- tier 2: the calendar, subordinate ---- */

  /* Tinted ground with a hairline, as in the mock: enough to read as a panel, far too
     quiet to compete with the bordered rows beside it. */
  .flower-shop-anydate {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: 8px;
    background: rgba(var(--color-foreground), 0.03);
  }

  .flower-shop-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .flower-shop-cal__month {
    font-size: var(--fs-body);
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.8);
  }

  .flower-shop-cal__nav {
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid rgba(var(--color-foreground), 0.16);
    border-radius: 6px;
    background: rgb(var(--color-background));
    font-size: var(--fs-body);
    line-height: 1;
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
  }

  .flower-shop-cal__nav[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
  }

  .flower-shop-cal__dow,
  .flower-shop-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .flower-shop-cal__dow {
    margin-bottom: 0.4rem;
  }

  .flower-shop-cal__dow span {
    text-align: center;
    font-size: var(--fs-fine);
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.45);
  }

  /* Six rows: the most weeks a month can span, reserved so no month shifts the page. */
  .flower-shop-cal__grid {
    min-height: 24rem;
  }

  .flower-shop-cal__day {
    min-height: 3.8rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 6px;
    background: rgb(var(--color-background));
    font: inherit;
    font-size: var(--fs-small);
    /* Explicit: never inherit a link colour into the grid. */
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .flower-shop-cal__day:hover:not([disabled]) {
    border-color: rgb(var(--color-button));
  }

  /* Unavailable: flat grey text, no box at all. */
  .flower-shop-cal__day[disabled] {
    border-color: transparent;
    background: none;
    color: rgba(var(--color-foreground), 0.28);
    cursor: not-allowed;
  }

  /* Selected: brand maroon, matching the chosen row. */
  .flower-shop-cal__day[aria-pressed="true"] {
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    font-weight: 600;
  }

  .flower-shop-cal__day--blank {
    border: 0;
    background: none;
    cursor: default;
  }

  /* One of these two shows, never both.

     Specificity-bumped past `.flower-shop-form-field label { display: block }` — a single
     class loses to that, which is how "Choose a date" ended up visible on desktop. The same
     trap is already noted further down for the checkbox label. */
  .flower-shop-anydate .flower-shop-cal__native,
  .flower-shop-anydate .flower-shop-cal__nativelabel {
    display: none;
  }

  /* ---- degraded: availability could not be loaded --------------------------------
     Set by degradeToCalendar() when the availability API is unreachable after its retries.
     It is the mobile layout forced on at every width, which is the honest fallback: neither
     the soonest-dates list nor the month grid can be built without availability, and the
     native date field needs no data at all.

     Three classes deep on purpose. The default hide for the native field is two
     (`.flower-shop-anydate .flower-shop-cal__native`) and the mobile query's show rule is
     two as well, so at equal specificity this would come down to source order -- and it has
     to win at every width, wherever it sits in the file. The same trap is noted twice more
     in this stylesheet. */
  .flower-shop-datefield--degraded .flower-shop-soonest,
  .flower-shop-datefield--degraded .flower-shop-cal {
    display: none;
  }

  /* The panel's own tier label goes too: "Or pick any other date" has nothing left to be
     other than once the list is gone. */
  .flower-shop-datefield--degraded .flower-shop-anydate .flower-shop-tierlabel {
    display: none;
  }

  .flower-shop-datefield--degraded .flower-shop-datefield__tiers {
    /* One column, or the panel sits in the right half with a hole beside it. Beats the
       two-column rule in the min-width query on specificity rather than order. */
    grid-template-columns: 1fr;
  }

  .flower-shop-datefield--degraded .flower-shop-anydate .flower-shop-cal__native,
  .flower-shop-datefield--degraded .flower-shop-anydate .flower-shop-cal__nativelabel {
    display: block;
  }

  .flower-shop-datefield--degraded .flower-shop-anydate .flower-shop-cal__native {
    width: 100%;
    /* 16px, or iOS zooms the page on focus. */
    font-size: var(--fs-body);
    min-height: 4.6rem;
    cursor: pointer;
  }

  /* ---- invalid fields -------------------------------------------------------------
     The message sits with the field. That is the only way a form this long can show a
     customer the complaint and the thing it is about at the same time. Colours are the
     theme's error pair, not the raw #ff0000 and #ff6b6b this replaces. */
  .flower-shop-input.flower-shop-input--invalid {
    border-color: #d7311f;
  }

  .flower-shop-field-error {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--fs-small);
    line-height: 1.4;
    color: #8e1f0b;
  }

  /* ---- the submit button, while it is working ---- */
  .flower-shop-spinner {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.8rem;
    vertical-align: -0.2rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: flower-shop-spin 0.7s linear infinite;
  }

  @keyframes flower-shop-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Asked for less motion: the label already says what is happening, so drop the ring
     rather than show a broken circle sitting still. */
  @media (prefers-reduced-motion: reduce) {
    .flower-shop-spinner {
      display: none;
    }
  }

  /* ---- the confirmation ---- */

  /* The rule that used to sit on the confirmation line belongs to the pair now, so it runs
     the full width of both halves instead of stopping at the left one. */
  .flower-shop-datefield__footer {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.1);
    align-items: start;
  }

  /* A heading for a readout, matched to `.flower-shop-form-field label` deliberately: the
     two halves only read as a pair if their labels are the same thing. */
  .flower-shop-pseudolabel {
    display: block;
    margin: 0 0 0.5rem;
    font-weight: 600;
    font-size: var(--fs-body);
    color: rgb(var(--color-foreground));
  }

  .flower-shop-datefield__chosen {
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: 1.35;
    color: rgb(var(--color-foreground));
  }

  /* Holds the line open before JS fills it, rather than collapsing and leaving the label
     sitting on nothing. Not `display: none` -- that would shift the row on load. */
  .flower-shop-datefield__chosen:empty::before {
    content: "\00a0";
  }

  /* It GATES the order, so it is allowed to look like it. This was a 3% neutral tint with
     25%-opacity borders and, in a live after-2pm test, was not seen at all. Brand rose at
     low alpha with a full-strength left edge; still quieter than an error, because nothing
     is wrong yet -- there is simply something to confirm. */
  .flower-shop-samedaynotice {
    margin-top: 1.2rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(155, 62, 90, 0.35);
    border-left: 3px solid rgba(155, 62, 90, 0.85);
    border-radius: 6px;
    background: rgba(155, 62, 90, 0.07);
  }

  .flower-shop-samedaynotice .flower-shop-checkbox-text {
    color: rgb(var(--color-foreground));
  }

  .flower-shop-samedaynotice[hidden] {
    display: none;
  }

  /* Stated here, because the acknowledgement no longer sits inside a
     .flower-shop-form-field and so no longer inherits that block label style -- and the
     only .flower-shop-checkbox-label rule in this file is scoped to the --checkbox
     modifier, which this box does not carry. Without this the box and its sentence run
     inline and the second line wraps under the checkbox. */
  .flower-shop-samedaynotice .flower-shop-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0;
    font-weight: 400;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  /* Phones: the month grid goes, a native date input takes over. Measured -- seven columns
     inside this form reach only 25-36px on a phone, against a 44px target. */
  @media screen and (max-width: 749px) {
    .flower-shop-cal {
      display: none;
    }

    /* Equal cards, the other way round. Desktop gets equal rows from the share of the
       calendar's height each one takes, so an empty third line there would only push the
       text off centre. There is no height to share here, so the third line is reserved on
       every row instead and the four cards come out identical by construction -- rather
       than 90/71/71/71, which is what natural height gives you when only the first row
       carries a reason. Same selector as the collapse rule above, later in the file. */
    .flower-shop-soonest__why:empty {
      display: block;
      min-height: 1.9rem;
    }

    /* Matching specificity to the default-hide rule above. */
    .flower-shop-anydate .flower-shop-cal__nativelabel {
      display: block;
      margin-bottom: 0.4rem;
      font-size: var(--fs-small);
      font-weight: 400;
      color: rgba(var(--color-foreground), 0.65);
      /* Clicking the label opens the picker too, by way of label activation firing a click
         on the input. */
      cursor: pointer;
    }

    .flower-shop-anydate .flower-shop-cal__native {
      display: block;
      width: 100%;
      /* 16px, or iOS zooms the page on focus. */
      font-size: var(--fs-body);
      min-height: 4.6rem;
      /* The whole field opens the picker -- see the click handler in the section -- so it
         should say so. */
      cursor: pointer;
    }
  }

  /* Desktop: rows left and a little wider, calendar right. Four rows and a six-week grid
     come out close enough in height to read as a pair. */
  @media screen and (min-width: 750px) {
    .flower-shop-datefield__tiers {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 2rem;
      /* NOT align-items:start. Stretch is what makes both columns the same height, and
         start was the reason they never matched. */
      align-items: stretch;
    }

    /* THE SYMMETRY MECHANISM -- and it can only exist where there are two columns.
       The grid stretches both columns to the taller of the two (the calendar); the list is
       then a flex column whose rows each take an equal share of that definite height, so
       the two columns start and end on exactly the same lines with no magic numbers and
       nothing to keep in sync when a row's text changes. */
    .flower-shop-soonest {
      min-height: 0;
    }

    #delivery_soonest {
      flex: 1;
      /* Beats the mobile reservation: same specificity, later in the file. */
      min-height: 0;
    }

    .flower-shop-soonest__row {
      flex: 1 1 0;
      min-height: 0;
    }
  }

  .flower-shop-date-help {
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    color: rgba(var(--color-foreground), 0.7);
    line-height: 1.4;
  }

  .flower-shop-date-error {
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    color: #8e1f0b;
    line-height: 1.4;
  }

  .flower-shop-date-error:empty,
  .flower-shop-date-help:empty {
    display: none;
  }
  .flower-shop-step-title {
    font-size: var(--fs-title);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: rgb(var(--color-foreground));
    border-bottom: 2px solid rgba(var(--color-foreground), 0.15);
    padding-bottom: 0.75rem;
  }

  .flower-shop-form-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    background: rgb(var(--color-background));
  }

  .flower-shop-form-section h4 {
    margin: 0 0 1rem 0;
    font-size: var(--fs-lead);
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .flower-shop-form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .flower-shop-form-field {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0.75rem;
  }

  .flower-shop-form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: var(--fs-body);
    color: rgb(var(--color-foreground));
  }

  .flower-shop-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid rgba(var(--color-foreground), 0.15);
    border-radius: 6px;
    font-size: var(--fs-body);
    font-family: inherit;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    transition: all 0.2s ease;
  }

  .flower-shop-input:focus {
    outline: none;
    border-color: rgb(var(--color-foreground));
    box-shadow: 0 0 0 2px rgba(var(--color-foreground), 0.1);
  }
  
  .flower-shop-input::placeholder {
    color: #666 !important;
    font-size: var(--fs-body) !important;
    opacity: 1 !important;
  }

  /* The card message is the one placeholder that is a whole sentence in a large box, and
     #666 at full opacity is close enough to body text that it read as a message someone had
     already typed. On a florist's card that mistake is expensive both ways round: either you
     think a message is there when the card will go out blank, or you think that example is
     what we are going to print.

     Lighter and italic, so it cannot be read as content. Two classes deliberately -- the
     rule above carries !important, so this needs both !important AND higher specificity, or
     which one wins would depend on the order Shopify happens to concatenate stylesheets in. */
  .flower-shop-input.flower-shop-message-textarea::placeholder {
    color: rgba(var(--color-foreground), 0.45) !important;
    font-style: italic !important;
  }
  
  .flower-shop-input::-webkit-input-placeholder {
    color: #666 !important;
    font-size: var(--fs-body) !important;
    opacity: 1 !important;
  }
  
  .flower-shop-input::-moz-placeholder {
    color: #666 !important;
    font-size: var(--fs-body) !important;
    opacity: 1 !important;
  }
  
  .flower-shop-input:-ms-input-placeholder {
    color: #666 !important;
    font-size: var(--fs-body) !important;
    opacity: 1 !important;
  }

  .flower-shop-textarea {
    resize: vertical;
    min-height: 80px;
  }

  .flower-shop-form-field--checkbox {
    margin-top: 0.25rem;
  }

  /* When the checkbox sits next to a phone input on the review step, push it
     down so the checkbox row lines up with the input instead of the label. */
  .flower-shop-form-row--phone-consent .flower-shop-form-field--checkbox {
    margin-top: 0;
    padding-top: calc(1.2rem * 1.2 + 0.5rem);
  }

  @media (max-width: 600px) {
    .flower-shop-form-row--phone-consent .flower-shop-form-field--checkbox {
      padding-top: 0;
    }
  }

  /* Specificity-bumped to override .flower-shop-form-field label (font-weight: 600) */
  .flower-shop-form-field--checkbox .flower-shop-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0;
    font-weight: 400;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .flower-shop-checkbox-text strong {
    font-weight: 700;
  }

  .flower-shop-checkbox {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    accent-color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .flower-shop-checkbox-text {
    flex: 1;
  }

  .flower-shop-validation-messages {
    margin-top: 1rem;
    padding: 1rem;
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
  }

  .flower-shop-error-text {
    color: #c00;
    font-weight: 500;
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .flower-shop-form-row {
      flex-direction: column;
    }
    
    .flower-shop-form-field {
      min-width: auto;
    }
    
    .flower-shop-form-section {
      padding: 1rem;
    }
  }
/* END_SNIPPET:flower-shop-delivery-form */

/* START_SNIPPET:image (INDEX:95) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */