/*
 * Drake Metal Work theme customisations.
 *
 * Keep this file intentionally small while the Belgrade 3 migration
 * is developed and tested.
 */

/*
 * Drake Metal Work design tokens.
 *
 * Recovered from the existing site and applied to components only where
 * required. Belgrade's native --beo-* variables remain the primary theme
 * system.
 */
:root {
  --drake-text-heading: #444444;
  --drake-text-muted: #555555;
  --drake-text-subtle: #666666;

  --drake-surface-subtle: #f7f7f7;
  --drake-surface-hover: #f2f2f2;
  --drake-border-subtle: #dddddd;

  --drake-gallery-control-bg: rgba(0, 0, 0, 0.4);
  --drake-gallery-control-hover-bg: rgba(0, 0, 0, 0.6);
  --drake-gallery-dot-bg: #888888;
}

/*
 * Drupal page titles remain in the document outline for assistive technology,
 * but Drake's page layouts provide their own visible contextual headings.
 */
.region-content #block-drake-page-title .page-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Preserve Drake's compact desktop catalogue navigation.
 * Belgrade 3 increased horizontal link padding from 0.7rem to 1rem.
 */
@media (min-width: 1200px) {
  #block-drake-horizontalmenu .nav {
    --beo-nav-link-padding-x: 0.7rem;
    flex-wrap: nowrap;
  }

  #block-drake-horizontalmenu .nav-link {
    white-space: nowrap;
  }
}

/*
 * Compact catalogue subtitles.
 */
.field--name-field-catalog-subtitle,
.field--name-field-main-catalog-subtitle {
  color: var(--drake-text-muted);
  font-size: 0.9rem;
  line-height: 1.15;
}

.field--name-field-catalog-subtitle p,
.field--name-field-main-catalog-subtitle p,
.field-catalog-subtitle p,
.field-main-catalog-subtitle p {
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

/*
 * Drake full-product gallery.
 *
 * Maintains a centred square image area while showing the complete photograph.
 */
.commerce-product--full .product-image-wrapper {
  display: flex;
  justify-content: center;
}

.commerce-product--full .product-image-wrapper > div {
  width: 100%;
  max-width: 570px;
}

.commerce-product--full .product-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 570px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
}

.commerce-product--full .product-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Gallery controls added by belgradegalleryenhancements. */
.commerce-product--full .gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  padding: 0.25rem 0.5rem 0.5rem;
  color: #ffffff;
  background: var(--drake-gallery-control-bg);
  border: 0;
  border-radius: 6px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease;
}

.commerce-product--full .gallery-arrow:hover {
  background: var(--drake-gallery-control-hover-bg);
}

.commerce-product--full .gallery-arrow.prev {
  left: 0;
}

.commerce-product--full .gallery-arrow.next {
  right: 0;
}

.commerce-product--full .gallery-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 10;
  display: flex;
  gap: 6px;
  pointer-events: auto;
  transform: translateX(-50%);
}

.commerce-product--full .gallery-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--drake-gallery-dot-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.commerce-product--full .gallery-dot.active {
  background: var(--drake-surface-hover);
}

@media (max-width: 768px) {
  .commerce-product--full .gallery-arrow {
    display: none;
  }
}

/*
 * Drake reusable content components.
 */

/*
 * Shared returns content embedded on Commerce product pages.
 *
 * Match the compact typography used by the product description rather
 * than inheriting the site's larger general body-copy presentation.
 */
.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns {
  color: var(--drake-text-subtle);
  font-size: 0.8rem;
  line-height: 1.45;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns h3 {
  margin: 0 0 0.45rem;
  color: var(--drake-text-heading);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns p {
  margin: 0 0 0.65rem;
  font-size: inherit;
  line-height: inherit;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns p:last-child {
  margin-bottom: 0;
}

/*
 * Compact Etsy trust indicator.
 *
 * This deliberately behaves as social proof rather than a secondary
 * purchase button. The fee warning remains visible.
 */
.drake-etsy-trust {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0.4rem 0.55rem;
  color: var(--drake-text-subtle);
  background: var(--beo-body-bg, #ffffff);
  border: 1px solid var(--drake-text-subtle);
  border-radius: 6px;
  line-height: 1.1;
}

.drake-etsy-trust__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.drake-etsy-trust__name {
  color: var(--drake-text-heading);
  font-size: 0.82rem;
  font-weight: 700;
}

.drake-etsy-trust__stars {
  color: #f1641e;
  font-size: 0.72rem;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.drake-etsy-trust__note {
  margin-top: 0.28rem;
  font-size: 0.58rem;
  line-height: 1.2;
}

.drake-etsy-trust__link:hover
  .drake-etsy-trust__name,
.drake-etsy-trust__link:focus
  .drake-etsy-trust__name {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Shared 403 and 404 page presentation. */
.drake-error-page {
  padding-top: 2rem;
  color: var(--beo-body-color, #333333);
  text-align: center;
}

.drake-error-page__title {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
}

.drake-error-page__message,
.drake-error-page__links {
  margin: 0.3rem 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.drake-error-page__links {
  margin: 1rem 0;
}

/* One-off Developer page. */
.drake-developer-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.25rem 2rem 1.5rem;
  font-family: monospace;
  font-size: 1rem;
  line-height: 1.35;
  text-align: center;
}

.drake-developer-page__actions {
  margin: 0 0 0.75rem;
}

.drake-developer-page__button {
  padding: 9px 18px;
  background: var(--drake-surface-hover);
  border: 2px solid var(--drake-text-heading);
  color: var(--drake-text-heading);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.drake-developer-page__button:hover,
.drake-developer-page__button:focus-visible {
  background: var(--drake-border-subtle);
}

.drake-developer-page__count {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  line-height: 1.3;
}

.drake-developer-page__response {
  min-height: 1.3em;
  margin: 0 0 0.65rem;
  font-size: 1rem;
  line-height: 1.3;
}

.drake-developer-page__image {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  padding-top: 0;
  opacity: 0;
  animation: drake-developer-fade-in 1.5s ease-in-out forwards;
}

@keyframes drake-developer-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 575.98px) {
  .drake-developer-page {
    padding: 1rem 0;
  }
}

/*
 * Drake catalogue vertical spacing.
 *
 * Bootstrap already supplies the correct horizontal column gutters.
 */
#block-drake-content
  .view[class*="-catalog"]
  .views-view-grid
  > .views-row
  + .views-row {
  margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
  #block-drake-content
    .view[class*="-catalog"]
    .views-view-grid
    > .views-row
    > .views-col
    + .views-col {
    margin-top: 1.5rem;
  }
}

/*
 * Drake customer review cards.
 */
.view-reviews .views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 1rem !important;
}

.view-reviews .views-view-responsive-grid__item {
  padding: 10px;
  color: var(--beo-body-color, #333333);
  background: var(--drake-surface-subtle);
  border: 1px solid var(--drake-border-subtle);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1.3;
}

.view-reviews .views-view-responsive-grid__item-inner {
  padding: 5px;
}

.view-reviews .views-field-field-reviewer-name .reviewer-name p {
  margin: 0;
  color: var(--drake-text-heading);
  font-size: 1rem;
}

.view-reviews .views-field-field-review-date .reviewdate time {
  display: block;
  margin-top: 1px;
  color: var(--drake-text-subtle);
  font-size: 0.9rem;
}

.view-reviews .views-field-field-star-rating .field-content .star {
  color: var(--drake-text-heading);
  font-size: 1.3rem;
}

.view-reviews
  .views-field-field-star-rating
  .field-content
  .star:last-child {
  margin-right: 0;
}

.view-reviews .views-field-field-review-message .reviewmessage {
  margin: 0 0.5rem 0.5rem 0;
}

.view-reviews .views-field-field-review-message .reviewmessage p {
  margin: 0;
  color: var(--beo-body-color, #333333);
  font-size: 0.85rem;
}

/* Submit-review block displayed above the Reviews View. */
#block-drake-submitareview {
  display: inline-block;
  padding: 0.65rem 1rem;
  background: var(--drake-surface-subtle);
  border: 1px solid var(--drake-border-subtle);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

#block-drake-submitareview:hover {
  background: var(--drake-surface-hover);
}

#block-drake-submitareview p {
  margin: 0;
}

/*
 * Drake shopping cart item cards.
 */
.view-commerce-cart-form .views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 1rem !important;
}

.view-commerce-cart-form .views-view-responsive-grid__item {
  padding: 10px;
  color: var(--beo-body-color, #333333);
  background: var(--drake-surface-subtle);
  border: 1px solid var(--drake-border-subtle);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1.3;
}

.view-commerce-cart-form .views-view-responsive-grid__item-inner {
  padding: 5px;
}

/* Keep cart fields comfortably separated inside each item card. */
.view-commerce-cart-form .views-field {
  margin-bottom: 0.5rem;
}

.view-commerce-cart-form .views-field:last-child {
  margin-bottom: 0;
}

.view-commerce-cart-form .views-field-remove-button {
  text-align: left;
}

/*
 * Drake cart totals spacing.
 */
.view-commerce-cart-form .order-total-summary {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}

.view-commerce-cart-form .order-total-summary__label,
.view-commerce-cart-form .order-total-summary__value {
  line-height: inherit;
}

.view-commerce-cart-form .order-total-summary p {
  margin-bottom: 0.25rem;
}

.view-commerce-cart-form .order-total-summary p:last-child {
  margin-bottom: 0;
}

/*
 * Drake cart totals inner and action spacing.
 */
.view-commerce-cart-form .order-total-summary__inner {
  margin-bottom: 0.1rem;
}

.view-commerce-cart-form #edit-actions {
  margin-top: 0.5rem;
}

/*
 * Drake checkout order summary layout.
 *
 * Keep quantity beside the title, customisation beneath it, and the price
 * clearly separated before the following item.
 */
.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-view-grid
  > .views-row {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--drake-border-subtle);
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-view-grid
  > .views-row:first-child {
  padding-top: 0.25rem;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-view-grid
  > .views-row:last-child {
  padding-bottom: 0.5rem;
  border-bottom: 0;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-col {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.4rem;
  row-gap: 0.2rem;
  width: 100%;
  padding: 0;
  line-height: 1.25;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field {
  margin: 0;
  line-height: inherit;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-quantity {
  grid-column: 1;
  grid-row: 1;
  color: var(--drake-text-subtle);
  white-space: nowrap;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-purchased-entity {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-field-customisation {
  grid-column: 2;
  grid-row: 2;
  color: var(--drake-text-subtle);
  font-size: 0.85rem;
  line-height: 1.2;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-field-customisation
  .views-label {
  font-weight: 600;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-total-price__number {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  margin-top: 0.15rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/*
 * Remove the empty image column and Bootstrap row gutters from the compact
 * purchased-entity rendering used in the checkout sidebar.
 */
.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-purchased-entity
  .row {
  display: block;
  margin: 0;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-purchased-entity
  .row
  > [class*="col-"] {
  width: 100%;
  padding: 0;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .views-field-purchased-entity
  .d-none {
  display: none !important;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .field--name-title {
  line-height: 1.25;
}

/* Compact totals beneath the checkout items. */
.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .view-footer
  .order-total-summary {
  margin: 0.5rem 0 0.4rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--drake-border-subtle);
  line-height: 1.2;
}

.focused-checkout-form__sidebar-inner
  .view-commerce-checkout-order-summary
  .order-total-summary__inner {
  margin-bottom: 0.1rem;
}

/*
 * Drake mobile navigation and checkout summary.
 */
@media (max-width: 1199.98px) {
  /*
   * This block uses Drupal's standard .nav markup rather than Belgrade's
   * .main-nav markup, so hide the block explicitly below the xl breakpoint.
   */
  #block-drake-horizontalmenu {
    display: none;
  }

  /*
   * Preserve Belgrade's intended collapsible floating order-summary bar.
   */
  .focused-checkout-form__sidebar,
  .focused-checkout-form__sidebar-inner {
    display: block !important;
  }

  .focused-checkout-form__sidebar
    .order-summary--mobile-floating {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: block !important;
    visibility: visible;
    margin: 0;
    opacity: 1;
    background: var(--focused-page-sidebar-bg, #f0f1f5);
  }

  .focused-checkout-form__sidebar
    .order-summary--mobile-floating
    > .order-summary__title {
    display: flex !important;
  }

  /*
   * Leave enough room beneath the checkout form so the fixed summary bar
   * cannot cover the final controls.
   */
  .focused-page__content:has(
    .order-summary--mobile-floating
  ) {
    padding-bottom: 4.75rem;
  }
}

@media (min-width: 1200px) {
  #block-drake-horizontalmenu {
    display: block;
  }
}

/*
 * Drake mobile checkout summary containment fix.
 *
 * Prevent the focused-checkout grid from clipping or containing Belgrade's
 * fixed mobile order-summary bar.
 */
@media (max-width: 1199.98px) {
  .focused-page__content,
  .focused-checkout-form,
  .focused-checkout-form > .row,
  .focused-checkout-form__sidebar,
  .focused-checkout-form__sidebar-inner {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    clip-path: none !important;
    contain: none !important;
  }

  .focused-checkout-form__sidebar
    .order-summary--mobile-floating {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 2000 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip-path: none !important;
    pointer-events: auto !important;
    background: var(--focused-page-sidebar-bg, #f0f1f5);
    border-top: 1px solid var(--drake-border-subtle);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.14);
  }

  .focused-checkout-form__sidebar
    .order-summary--mobile-floating
    > .order-summary__title {
    display: flex !important;
    min-height: 3.75rem;
    margin: 0 !important;
    padding: 0.75rem 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
  }

  .focused-checkout-form__sidebar
    .order-summary--mobile-floating
    .order-summary__content.show {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }

  .focused-page__content {
    padding-bottom: 5rem !important;
  }
}

/*
 * Drake compact header alignment.
 *
 * Below the desktop-navigation breakpoint, keep the logo against the left
 * edge and centre the discount message within all remaining header space.
 */
@media (max-width: 1199.98px) {
  .region-header > .container-xl > .d-flex {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    width: 100%;
  }

  #block-drake-branding {
    grid-column: 1;
    justify-self: start;
    margin: 0;
  }

  #block-drake-discountbanner-2 {
    grid-column: 2;
    justify-self: center;
    width: 100%;
    max-width: 24rem;
    margin: 0;
    text-align: center;
  }
}

/*
 * Drake full-width mobile catalogue tiles.
 *
 * Preserve the page container padding but remove the redundant grid gutter
 * after catalogue Views collapse to one column.
 */
@media (max-width: 767.98px) {
  #block-drake-content
    .view[class*="-catalog"]
    .views-view-grid
    > .views-row {
    --beo-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
  }

  #block-drake-content
    .view[class*="-catalog"]
    .views-view-grid
    > .views-row
    > .views-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  #block-drake-content
    .view[class*="-catalog"]
    .catalog-tile-link,
  #block-drake-content
    .view[class*="-catalog"]
    article,
  #block-drake-content
    .view[class*="-catalog"]
    img {
    display: block;
    width: 100%;
  }
}

/*
 * Drake catalogue description spacing.
 */
#block-drake-content
  .view[class*="-catalog"]
  > .view-footer
  .catalog-description {
  margin-top: 2rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  #block-drake-content
    .view[class*="-catalog"]
    > .view-footer
    .catalog-description {
    margin-top: 1.5rem;
  }
}

/*
 * Drake footer top spacing.
 */
.region-footer {
  margin-top: 2rem;
}

/*
 * Drake compact footer padding.
 *
 * Override Bootstrap's py-5 and remove the additional my-4 spacing
 * from the footer's single content row.
 */
.region-footer.py-5 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.region-footer > .container-xl > .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * Drake cropped product thumbnails.
 *
 * Keep thumbnail boxes square without distorting landscape or portrait
 * photographs. The main product image continues to use object-fit: contain.
 */
article.commerce-product--full
  .image-list
  .ratio {
  overflow: hidden;
}

article.commerce-product--full
  .image-list
  .ratio
  > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Drake product select label border fix.
 *
 * Belgrade groups select labels with attribute fieldset headings and gives
 * them a bottom border. Floating select labels must remain borderless.
 */
.commerce-product--full
  .attribute-widgets
  > .form-item.js-form-type-select
  > label {
  border-bottom: 0 !important;
}

/*
 * Drake product attribute labels and required marker.
 */
.commerce-product--full
  .attribute-widgets
  > .form-item.js-form-type-select
  > label.form-label {
  color: var(--drake-text-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

/* Suppress any additional marker included inside the label markup. */
.commerce-product--full
  .attribute-widgets
  > .form-item.js-form-type-select
  > label.form-required
  > .form-required,
.commerce-product--full
  .attribute-widgets
  > .form-item.js-form-type-select
  > label.form-required
  > abbr {
  display: none !important;
}

/* Use one consistently positioned required marker. */
.commerce-product--full
  .attribute-widgets
  > .form-item.js-form-type-select
  > label.form-required::before {
  display: none !important;
}

.commerce-product--full
  .attribute-widgets
  > .form-item.js-form-type-select
  > label.form-required::after {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin-left: 0.2rem;
  content: "*";
  color: #d72222;
  background: none !important;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.18em;
  transform: none !important;
}

/*
 * Drake definitive product attribute legends.
 *
 * Present product dropdown labels as compact, readable legends and ensure
 * that each required field has exactly one marker.
 */
.commerce-product--full
  .attribute-widgets
  > .form-item.form-floating
  > label.form-label {
  position: absolute;
  top: 0;
  left: 0.65rem;
  z-index: 2;
  width: auto;
  max-width: calc(100% - 1.3rem);
  height: auto;
  margin: 0;
  padding: 0 0.35rem;
  color: var(--drake-text-heading);
  background: var(--beo-body-bg, #ffffff) !important;
  background-image: none !important;
  border: 0 !important;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  opacity: 1;
  transform: translateY(-50%) !important;
  transform-origin: left center;
  pointer-events: none;
}

/* Remove any alternate required marker. */
.commerce-product--full
  .attribute-widgets
  > .form-item.form-floating
  > label.form-required {
  background-image: none !important;
  background-repeat: no-repeat !important;
}

.commerce-product--full
  .attribute-widgets
  > .form-item.form-floating
  > label.form-required::before {
  display: none !important;
  content: none !important;
}

/* Define the single required marker. */
.commerce-product--full
  .attribute-widgets
  > .form-item.form-floating
  > label.form-required::after {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin-left: 0.18rem !important;
  content: "*" !important;
  color: #d72222 !important;
  background: none !important;
  background-image: none !important;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.15em;
  transform: none !important;
}

/*
 * Drake product price emphasis.
 */
.commerce-product--full
  .commerce-product__contents
  .field--type-commerce-price {
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.commerce-product--full
  .commerce-product__contents
  .field--type-commerce-price
  .field__item {
  font: inherit;
}

/*
 * Drake mobile product gallery.
 *
 * Mobile uses swipe navigation and dots, so the thumbnail rail is hidden.
 * Desktop and tablet gallery thumbnails remain unchanged.
 */
@media (max-width: 767.98px) {
  article.commerce-product--full
    .product-image
    .image-list {
    display: none !important;
  }
}

/*
 * Drake mobile product gallery thumbnails — corrected selector.
 */
@media (max-width: 767.98px) {
  article.commerce-product--full .image-list {
    display: none !important;
  }
}

/*
 * Drake mobile gallery dots below image.
 *
 * Move the navigation indicators onto the white space beneath the gallery,
 * where their active and inactive states remain clear on every photograph.
 */
@media (max-width: 767.98px) {
  article.commerce-product--full .product-image {
    overflow: visible;
    margin-bottom: 2rem;
  }

  article.commerce-product--full .gallery-dots {
    bottom: -1.25rem;
  }

  article.commerce-product--full .gallery-dot {
    background: #b0b0b0;
  }

  article.commerce-product--full .gallery-dot.active {
    background: var(--beo-primary, #4c4c4c);
  }
}

/*
 * Drake product buying hierarchy.
 */
.commerce-product--full .commerce-product__heading {
  margin-bottom: 0.75rem;
}

.commerce-product--full .commerce-product__title {
  margin: 0;
  font: inherit;
  color: inherit;
}

.commerce-product--full .commerce-product__heading .field--name-field-reviews {
  margin-top: 0.35rem;
}

.commerce-product--full .commerce-product__buying-form {
  margin-top: 0.75rem;
}

.commerce-product--full .commerce-product__details {
  margin-top: 2.5rem;
}

@media (max-width: 767.98px) {
  .commerce-product--full .commerce-product__details {
    margin-top: 2rem;
  }
}

/*
 * Drake product information tabs and accordion.
 *
 * Desktop presents two horizontal section controls.
 * Mobile presents the same content as stacked accordion-style controls.
 */
.commerce-product--full .drake-product-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.commerce-product--full .drake-product-tabs__label {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.75rem 0.85rem;
  color: var(--drake-text-muted);
  background: var(--drake-surface-subtle);
  border: 1px solid var(--drake-border-subtle);
  border-bottom-color: var(--drake-text-heading);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.commerce-product--full
  .drake-product-tabs__label--description {
  grid-column: 1;
  grid-row: 1;
  border-right: 0;
}

.commerce-product--full
  .drake-product-tabs__label--delivery {
  grid-column: 2;
  grid-row: 1;
}

.commerce-product--full .drake-product-tabs__panel {
  display: none;
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 1rem 0.25rem 0;
  line-height: 1.5;
}

.commerce-product--full
  .drake-product-tabs__toggle:checked
  + .drake-product-tabs__label {
  color: var(--drake-text-heading);
  background: #ffffff;
  border-bottom-color: #ffffff;
  font-weight: 700;
}

.commerce-product--full
  .drake-product-tabs__toggle[id$="-description"]:checked
  ~ .drake-product-tabs__panel--description {
  display: block;
}

.commerce-product--full
  .drake-product-tabs__toggle[id$="-delivery"]:checked
  ~ .drake-product-tabs__panel--delivery {
  display: block;
}

.commerce-product--full
  .drake-product-tabs__toggle:focus-visible
  + .drake-product-tabs__label {
  outline: 2px solid var(--drake-text-heading);
  outline-offset: 2px;
}

.commerce-product--full
  .drake-product-tabs__panel
  > :first-child {
  margin-top: 0;
}

.commerce-product--full
  .drake-product-tabs__panel
  > :last-child {
  margin-bottom: 0;
}

/* Products that currently have only one information section. */
.commerce-product--full
  .drake-product-tabs--single {
  display: block;
}

.commerce-product--full
  .drake-product-tabs__heading {
  margin: 0 0 0.75rem;
  color: var(--drake-text-heading);
  font-size: 1rem;
  font-weight: 700;
}

.commerce-product--full
  .drake-product-tabs--single
  .drake-product-tabs__panel {
  display: block;
  padding: 0;
}

/*
 * Mobile accordion presentation.
 */
@media (max-width: 767.98px) {
  .commerce-product--full .drake-product-tabs {
    display: block;
  }

  .commerce-product--full .drake-product-tabs__label {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.9rem 2.75rem 0.9rem 1rem;
    background: var(--drake-surface-subtle);
    border: 1px solid var(--drake-border-subtle);
    text-align: left;
  }

  .commerce-product--full
    .drake-product-tabs__label::after {
    position: absolute;
    top: 50%;
    right: 1rem;
    content: "+";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
  }

  .commerce-product--full
    .drake-product-tabs__toggle:checked
    + .drake-product-tabs__label {
    background: #ffffff;
    border-bottom-color: transparent;
  }

  .commerce-product--full
    .drake-product-tabs__toggle:checked
    + .drake-product-tabs__label::after {
    content: "−";
  }

  .commerce-product--full .drake-product-tabs__panel {
    padding: 0.25rem 1rem 1rem;
    border-right: 1px solid var(--drake-border-subtle);
    border-bottom: 1px solid var(--drake-border-subtle);
    border-left: 1px solid var(--drake-border-subtle);
  }
}

/*
 * Drake final delivery typography and Etsy strip.
 */

/* Match the normal product-description body typography exactly. */
.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns {
  font-family: var(--beo-body-font-family);
  font-size: var(--beo-body-font-size);
  font-weight: var(--beo-body-font-weight);
  line-height: var(--beo-body-line-height);
  color: var(--beo-body-color);
  text-align: var(--beo-body-text-align);
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns p:last-child {
  margin-bottom: 0;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns h3 {
  margin: 0 0 0.5rem;
  color: var(--drake-text-heading);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Long, quiet Etsy credibility indicator. */
.drake-etsy-trust {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.drake-etsy-trust__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.38rem 0.6rem;
  color: var(--drake-text-subtle);
  background: var(--beo-body-bg, #ffffff);
  border: 1px solid var(--drake-text-subtle);
  border-radius: 5px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.drake-etsy-trust__name {
  color: var(--drake-text-heading);
  font-size: 0.75rem;
  font-weight: 700;
}

.drake-etsy-trust__stars {
  color: #f1641e;
  font-size: 0.7rem;
  letter-spacing: 0.025em;
}

.drake-etsy-trust__note {
  margin: 0;
  color: var(--drake-text-subtle);
  font-size: 0.6rem;
  line-height: 1;
}

.drake-etsy-trust__link:hover,
.drake-etsy-trust__link:focus {
  color: var(--drake-text-heading);
  border-color: var(--drake-text-heading);
}

@media (max-width: 420px) {
  .drake-etsy-trust__link {
    gap: 0.35rem;
    padding-right: 0.45rem;
    padding-left: 0.45rem;
  }
}

/*
 * Drake product processing time.
 *
 * Product-specific making time appears before the shared returns policy.
 */
.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-processing-time {
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  color: inherit;
  border-bottom: 1px solid var(--drake-border-subtle);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-processing-time h3 {
  margin: 0 0 0.5rem;
  color: var(--drake-text-heading);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-processing-time p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-processing-time strong {
  color: var(--drake-text-heading);
  font-weight: 700;
}

/*
 * Drake collapsible product tabs and content alignment.
 */

/*
 * Delivery content is rendered through an entity-reference field and
 * therefore contains several nested Drupal wrappers. Remove their inherited
 * horizontal spacing so every heading and paragraph shares one left edge.
 */
.commerce-product--full
  .drake-product-tabs__panel--delivery
  > .field,
.commerce-product--full
  .drake-product-tabs__panel--delivery
  > .field
  > .field__item,
.commerce-product--full
  .drake-product-tabs__panel--delivery
  article,
.commerce-product--full
  .drake-product-tabs__panel--delivery
  .node__content,
.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

/*
 * Keep section headings clear without making them dominate the body copy.
 */
.commerce-product--full
  .drake-product-tabs__panel
  .drake-processing-time
  h3,
.commerce-product--full
  .drake-product-tabs__panel
  .drake-delivery-returns
  h3 {
  margin: 0 0 0.45rem;
  color: var(--drake-text-heading);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

/*
 * Ensure subsequent delivery paragraphs remain aligned with their heading.
 */
.commerce-product--full
  .drake-product-tabs__panel--delivery
  .drake-delivery-returns
  p {
  margin-right: 0;
  margin-left: 0;
}

/*
 * On desktop, a subtle minus sign indicates that the active tab can be
 * clicked again to minimise it. Mobile retains the existing plus/minus icon.
 */
@media (min-width: 768px) {
  .commerce-product--full
    .drake-product-tabs__toggle:checked
    + .drake-product-tabs__label::after {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    content: "−";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
  }
}

/*
 * Drake understated information labels.
 *
 * Keep these as semantic headings while presenting them as quiet labels
 * within the Delivery & returns content.
 */
.commerce-product--full
  .drake-product-tabs__panel
  .drake-processing-time h3,
.commerce-product--full
  .drake-product-tabs__panel
  .drake-delivery-returns h3 {
  color: var(--drake-text-muted);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.35;
}

/*
 * Drake account navigation and product disclosure.
 */

/*
 * Account links in the vertical navigation.
 *
 * Align My account and Log in/Log out with the main navigation rather
 * than presenting them as an indented nested menu.
 */
#block-drake-account-menu {
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--drake-border-subtle);
}

#block-drake-account-menu ul,
#block-drake-account-menu .menu,
#block-drake-account-menu .nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#block-drake-account-menu li,
#block-drake-account-menu .nav-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

#block-drake-account-menu a,
#block-drake-account-menu .nav-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0 !important;
  text-indent: 0;
}

/*
 * Long product-description disclosure.
 *
 * Make the additional information look like an obvious interactive
 * control rather than another underlined heading within the copy.
 */
.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details {
  margin: 1rem 0;
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details
  > summary {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.7rem 2.75rem 0.7rem 0.85rem;
  color: var(--drake-text-heading);
  background: var(--drake-surface-subtle);
  border: 1px solid var(--drake-border-subtle);
  border-radius: 3px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details
  > summary::-webkit-details-marker {
  display: none;
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details
  > summary::after {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details[open]
  > summary::after {
  content: "−";
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details[open]
  > summary {
  margin-bottom: 0.9rem;
  background: var(--beo-body-bg, #ffffff);
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details
  > summary:hover {
  background: var(--drake-surface-hover);
}

.commerce-product--full
  .drake-product-tabs__panel--description
  .drake-product-details
  > summary:focus-visible {
  outline: 2px solid var(--drake-text-heading);
  outline-offset: 2px;
}

/* Commerce checkout Go back action — direct selector. */
.link--previous {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 0.75rem !important;
  padding: 0.75rem 1.1rem !important;
  border: 1px solid #b8b8b8;
  border-radius: 4px;
  background: #f3f3f3;
  color: #444444 !important;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
}

.link--previous:hover,
.link--previous:focus-visible {
  border-color: #777777;
  background: #e7e7e7;
  color: #222222 !important;
  text-decoration: none !important;
}

@media (max-width: 575.98px) {
  .link--previous {
    display: flex !important;
    width: 100%;
    margin: 0.65rem 0 0 !important;
  }
}

/* Contact form message textarea: clear the floating label. */
.form-style-floating_labels.form-floating.form-type-textarea
  textarea.form-control {
  padding: 2.75rem 1.25rem 1rem !important;
  line-height: 1.45 !important;
}

/* Space between CAPTCHA refresh control and form submit button. */
.captcha .reload-captcha-wrapper {
  margin-bottom: 0.75rem;
}

/* Match the Submit review button to the standard contact-form button. */
#contact-message-review-form .form-actions .button,
#contact-message-review-form .form-actions input[type="submit"] {
  border-color: #555555 !important;
  background: #555555 !important;
  color: #ffffff !important;
}

#contact-message-review-form .form-actions .button:hover,
#contact-message-review-form .form-actions .button:focus-visible,
#contact-message-review-form .form-actions input[type="submit"]:hover,
#contact-message-review-form .form-actions input[type="submit"]:focus-visible {
  border-color: #444444 !important;
  background: #444444 !important;
  color: #ffffff !important;
}

/*
 * Clear visual hierarchy for shopping-cart item cards.
 */
.view-commerce-cart-form
.views-view-responsive-grid__item {
  padding: 1.15rem 1.25rem;
  background: #ffffff;
}

.view-commerce-cart-form
.views-view-responsive-grid__item-inner {
  display: grid;
  grid-template-columns:
    auto
    minmax(8rem, 1fr)
    auto
    auto
    auto;
  grid-template-areas:
    "image product product product product"
    "custom custom custom custom custom"
    "price price quantity total remove";
  align-items: end;
  gap: 1rem 1.75rem;
  padding: 0;
}

.view-commerce-cart-form .views-field {
  min-width: 0;
  margin: 0;
}

.view-commerce-cart-form
.views-field-drake-cart-thumbnail {
  grid-area: image;
  align-self: start;
  margin: 0;
}

.view-commerce-cart-form
.views-field-purchased-entity {
  grid-area: product;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--drake-border-subtle);
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.35;
}

.view-commerce-cart-form
.views-field-purchased-entity a {
  color: inherit;
  text-decoration: none;
}

.view-commerce-cart-form
.views-field-purchased-entity a:hover {
  text-decoration: underline;
}

.view-commerce-cart-form
.views-field-field-customisation {
  grid-area: custom;
  padding: 0.7rem 0.85rem;
  background: var(--drake-surface-subtle);
  border-left: 3px solid var(--drake-border-subtle);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.view-commerce-cart-form
.views-field-unit-price__number {
  grid-area: price;
}

.view-commerce-cart-form
.views-field-edit-quantity {
  grid-area: quantity;
}

.view-commerce-cart-form
.views-field-total-price__number {
  grid-area: total;
}

.view-commerce-cart-form
.views-field-remove-button {
  grid-area: remove;
  text-align: right;
}

.view-commerce-cart-form
.views-view-responsive-grid__item-inner
.views-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--drake-text-subtle);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-transform: uppercase;
}

.view-commerce-cart-form
.views-field-unit-price__number
.field-content,
.view-commerce-cart-form
.views-field-total-price__number
.field-content {
  font-weight: 650;
  white-space: nowrap;
}

.view-commerce-cart-form
.views-field-edit-quantity
.form-item {
  margin: 0;
}

@media (max-width: 700px) {
  .view-commerce-cart-form
  .views-view-responsive-grid__item-inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "image product product"
      "custom custom custom"
      "price price total"
      "quantity quantity quantity"
      "remove remove remove";
    gap: 0.85rem 1rem;
  }

  .view-commerce-cart-form
  .views-field-remove-button {
    text-align: left;
  }
}

/*
 * Slightly softer cart product title.
 */
.view-commerce-cart-form
.views-field-purchased-entity {
  color: #404650;
  font-size: 1.03rem;
  font-weight: 600;
}

/*
 * Use a quieter cart product title now that the card structure
 * provides the visual hierarchy.
 */
.view-commerce-cart-form
.views-field-purchased-entity {
  color: #4f5560;
  font-weight: 400;
}

.view-commerce-cart-form
.views-field-purchased-entity a {
  font-weight: inherit;
}

/*
 * Show + for closed product-information tabs and − for open tabs.
 */
@media (min-width: 768px) {
  .commerce-product--full
  .drake-product-tabs__label::after {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    content: "+";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
  }

  .commerce-product--full
  .drake-product-tabs__toggle:checked
  + .drake-product-tabs__label::after {
    content: "−";
  }
}

/*
 * Reusable supporting-information accordions beneath product tabs.
 * Match the existing More product details disclosure.
 */
.commerce-product--full .drake-product-support {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
}

.commerce-product--full
  .drake-product-support__section {
  margin: 0;
}

.commerce-product--full
  .drake-product-support__heading {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.7rem 2.75rem 0.7rem 0.85rem;
  color: var(--drake-text-heading);
  background: var(--drake-surface-subtle);
  border: 1px solid var(--drake-border-subtle);
  border-radius: 3px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.commerce-product--full
  .drake-product-support__heading::-webkit-details-marker {
  display: none;
}

.commerce-product--full
  .drake-product-support__heading::marker {
  content: "";
}

.commerce-product--full
  .drake-product-support__heading::after {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}

.commerce-product--full
  .drake-product-support__section[open]
  > .drake-product-support__heading::after {
  content: "−";
}

.commerce-product--full
  .drake-product-support__section[open]
  > .drake-product-support__heading {
  margin-bottom: 0.9rem;
  background: var(--beo-body-bg, #ffffff);
}

.commerce-product--full
  .drake-product-support__heading:hover {
  background: var(--drake-surface-hover);
}

.commerce-product--full
  .drake-product-support__heading:focus-visible {
  outline: 2px solid var(--drake-text-heading);
  outline-offset: 2px;
}

.commerce-product--full
  .drake-product-support__content {
  padding: 0 0.85rem 0.25rem;
  line-height: 1.5;
}

.commerce-product--full
  .drake-product-support__content
  > :first-child {
  margin-top: 0;
}

.commerce-product--full
  .drake-product-support__content
  > :last-child {
  margin-bottom: 0;
}

/*
 * Product information typography.
 *
 * Reserve bold text for tab and accordion titles. Content inside the
 * Product details, Delivery and supporting accordions uses normal weight.
 */
.commerce-product--full .drake-product-tabs__panel,
.commerce-product--full .drake-product-tabs__panel *,
.commerce-product--full .drake-product-support__content,
.commerce-product--full .drake-product-support__content * {
  font-weight: 400 !important;
}


/* Product-support contact links. */
.commerce-product--full
  .drake-product-support__content
  a[href="/contact"] {
  display: inline-block;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.commerce-product--full
  .drake-product-support__content
  a[href="/contact"]::after {
  content: " →";
}

.commerce-product--full
  .drake-product-support__content
  a[href="/contact"]:hover,
.commerce-product--full
  .drake-product-support__content
  a[href="/contact"]:focus-visible {
  text-decoration-thickness: 2px;
}

/*
 * Drake Commerce mobile action-button system.
 *
 * Cart:
 * - Equal-width actions from 375px to the mobile breakpoint.
 * - Stacked actions below 375px.
 *
 * Checkout:
 * - Consistent full-width actions on every mobile checkout step.
 */
@media (max-width: 575.98px) {
  .view-commerce-cart-form #edit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  .view-commerce-cart-form #edit-actions > * {
    min-width: 0;
  }

  .view-commerce-cart-form #edit-actions .button,
  .view-commerce-cart-form #edit-actions input[type="submit"],
  .view-commerce-cart-form #edit-actions a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 4rem;
    margin: 0 !important;
    padding: 0.75rem 0.85rem !important;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  form[id*="commerce-checkout-flow"] #edit-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
  }

  form[id*="commerce-checkout-flow"] #edit-actions > * {
    min-width: 0;
  }

  form[id*="commerce-checkout-flow"] #edit-actions .button,
  form[id*="commerce-checkout-flow"] #edit-actions input[type="submit"],
  form[id*="commerce-checkout-flow"] #edit-actions .link--previous {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 4rem;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 374.98px) {
  .view-commerce-cart-form #edit-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Long-form information pages.
 */
.drake-info-page {
  max-width: 52rem;
  margin-inline: auto;
  color: var(--drake-text-body, #3f444b);
  font-size: 1rem;
  line-height: 1.65;
}

.drake-info-page h5 {
  margin: 2rem 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--drake-border-subtle, #d6d0ca);
  background: var(--drake-surface-subtle, #f7f5f2);
  color: var(--drake-text-heading, #30343a);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
}

.drake-info-page p {
  margin: 0 0 0.9rem;
}

.drake-info-page ul {
  margin: 0.25rem 0 1rem;
  padding-left: 1.4rem;
}

.drake-info-page li {
  margin-bottom: 0.35rem;
}

.drake-info-page hr {
  margin: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--drake-border-subtle, #d8d3cf);
}

.drake-info-page blockquote {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--drake-border-subtle, #c9c1ba);
  background: var(--drake-surface-subtle, #f7f5f2);
}

.drake-info-page blockquote p {
  margin: 0;
}

@media (max-width: 700px) {
  .drake-info-page {
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .drake-info-page h5 {
    margin-top: 1.5rem;
    padding: 0.65rem 0.8rem;
    font-size: 1.05rem;
  }
}

/* Keep the focused cart/checkout header clear behind the Drake logo. */
.focused-page__header {
  background: #ffffff;
}