/* Foxy checkout theme variables and cart layout overrides. */
#fc {
  --ws-brand-navy: #002868;
  --ws-brand-red: #bf0a30;
  --ws-cart-border: #d7dee8;
  --ws-cart-muted: #5c6877;
  --ws-cart-surface: #ffffff;
  --ws-cart-canvas: #f4f6f8;

  --foxy-font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --foxy-font-heading:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --foxy-font-weight-normal: 400;
  --foxy-font-weight-semi: 600;
  --foxy-font-weight-bold: 700;
  --foxy-font-size-heading: 19px;
  --foxy-font-size-body: 15px;

  --foxy-background: var(--ws-cart-surface);
  --foxy-sidebar-background: var(--ws-cart-canvas);
  --foxy-text: #17212b;
  --foxy-text-muted: var(--ws-cart-muted);
  --foxy-heading-color: var(--ws-brand-navy);
  --foxy-border: var(--ws-cart-border);
  --foxy-divider: var(--ws-cart-border);
  --foxy-radius: 6px;

  --foxy-button-background: var(--ws-brand-navy);
  --foxy-button-text: #ffffff;
  --foxy-button-border: var(--ws-brand-navy);
  --foxy-button-hover-background: #001d4b;
  --foxy-button-hover-text: #ffffff;
  --foxy-button-hover-border: #001d4b;

  --foxy-secondary-button-background: transparent;
  --foxy-secondary-button-text: var(--ws-brand-navy);
  --foxy-secondary-button-border: var(--ws-brand-navy);
  --foxy-secondary-button-hover-background: var(--ws-brand-navy);
  --foxy-secondary-button-hover-text: #ffffff;
  --foxy-secondary-button-hover-border: var(--ws-brand-navy);

  --foxy-input-background: #ffffff;
  --foxy-input-text: #1a1a1a;
  --foxy-input-border: #e5e5e5;
  --foxy-input-focus-border: var(--ws-brand-navy);
  --foxy-button-focus-ring: 0 0 0 3px rgba(0, 40, 104, 0.2);

  --foxy-link-color: var(--ws-brand-navy);
  --foxy-link-hover-color: #001d4b;
  --foxy-discount-color: var(--ws-brand-navy);

  --foxy-success-background: #e8f5e9;
  --foxy-success-border: #c8e6c9;
  --foxy-success-text: #2e7d32;
  --foxy-warning-background: #fff8e1;
  --foxy-warning-border: #ffecb3;
  --foxy-warning-text: #e65100;
  --foxy-info-background: #f0f0f0;
  --foxy-info-border: #e0e0e0;
  --foxy-info-text: #333333;
  --foxy-danger-background: #fdecea;
  --foxy-danger-border: #f5c6cb;
  --foxy-danger-text: #b71c1c;
}

#fc .fc-cart__item__option,
#fc .fc-cart__item__option--code,
#fc .fc-cart__item__option--category,
#fc .fc-cart__item__option--weight {
  display: flex;
  align-items: flex-start;
  color: transparent;
  font-size: 0;
  line-height: 1.45;
}

#fc .fc-cart__item__option__name {
  flex: 0 0 7.5rem;
  max-width: 40%;
  margin-right: 0.35rem;
  color: var(--foxy-text);
  font-size: var(--foxy-font-size-body);
  font-weight: var(--foxy-font-weight-semi);
  overflow-wrap: anywhere;
}

#fc .fc-cart__item__option__name::after {
  /* Current Foxy markup includes the colon; JS also normalizes older markup. */
  content: none;
}

#fc .fc-cart__item__option__value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--foxy-text);
  font-size: var(--foxy-font-size-body);
  overflow-wrap: anywhere;
}

/* Intrinsic, per-item label width: short Boat Cover labels stay compact while
   longer labels share a wider column. No product-specific widths or scripts. */
@supports (grid-template-columns: subgrid) {
  #fc .fc-cart__item__options {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    column-gap: 0.6rem;
  }

  #fc .fc-cart__item__options > li {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #fc .fc-cart__item__option,
  #fc .fc-cart__item__option--code,
  #fc .fc-cart__item__option--category,
  #fc .fc-cart__item__option--weight {
    display: grid;
    grid-template-columns: subgrid;
  }

  #fc .fc-cart__item__option__name {
    grid-area: 1 / 1;
    max-width: none;
    margin-right: 0;
  }

  #fc .fc-cart__item__option__value {
    grid-area: 1 / 2;
  }
  /* Explicit cells keep Foxy's hidden literal colon out of the content row. */
}

@media (min-width: 768px) {
  #fc #fc-cart--responsive .fc-cart__item__details-and-image {
    width: 70% !important;
  }

  #fc #fc-cart--responsive .fc-cart__item__totals {
    width: 30% !important;
  }

  #fc #fc-cart--responsive
    .fc-cart__items--without-images
    .fc-cart__item__details {
    width: 100% !important;
    max-width: none !important;
  }
}

/* The script adds this class only after the sole rate is selected. */
#fc .fc-shipping-rates__rate.ws-single-shipping-rate
  .fc-form-control--shipping-rate {
  display: none !important;
}

#fc .fc-shipping-rates__rate.ws-single-shipping-rate
  .fc-form-label--shipping-rate {
  cursor: default;
}

#fc .fc-shipping-rates__rate.ws-single-shipping-rate
  .fc-shipping-rates__rate__name {
  padding-left: 0 !important;
}

/* Preserve the source storefront identity through the hosted checkout handoff. */
#fc .fc-context--cart-fullpage .fc-logo {
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--ws-cart-border);
  text-align: center;
}

#fc .fc-context--cart-fullpage .fc-logo__image {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  padding: 8px 0 12px;
}

#fc .ws-storefront-context {
  margin: 0;
  color: var(--ws-cart-muted);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#fc .ws-storefront-context a {
  color: var(--ws-brand-navy);
  font-weight: var(--foxy-font-weight-semi);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#fc .ws-storefront-context a:hover {
  color: var(--ws-brand-red);
}

#fc .ws-storefront-context a:focus-visible {
  border-radius: 2px;
  outline: 3px solid rgba(0, 54, 120, 0.24);
  outline-offset: 3px;
}

/* Permanent AB-141 cart direction: Balanced Commerce. */
#fc body.fc-context--cart-fullpage {
  min-height: 100vh;
  background: var(--ws-cart-canvas) !important;
  border-top: 4px solid var(--ws-brand-red);
}

#fc body.fc-context--cart-fullpage::before {
  display: none !important;
}

#fc .fc-cart__title__header,
#fc .fc-transaction__header,
#fc .fc-cart__item__name {
  color: var(--ws-brand-navy) !important;
}

#fc .fc-cart__title__header {
  font-size: 24px !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

#fc .fc-cart__item__name {
  font-size: 16px !important;
  line-height: 1.35;
}

#fc .fc-cart__items__header {
  color: var(--ws-cart-muted) !important;
}

#fc .fc-cart__item {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

#fc .fc-cart__item__remove a {
  color: var(--ws-cart-muted) !important;
  text-underline-offset: 3px;
}

#fc .fc-cart__item__remove a:hover {
  color: var(--ws-brand-red) !important;
}

#fc .fc-transaction__subtotal,
#fc .fc-transaction__shipping,
#fc .fc-transaction__taxes {
  padding: 0 0 14px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--ws-cart-border);
}

#fc .fc-transaction__shipping {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 14px;
  align-items: baseline;
}

#fc .fc-transaction__shipping .fc-transaction__ui {
  grid-column: 1;
}

#fc .fc-transaction__shipping .fc-transaction__ui__header {
  margin: 0;
}

#fc .fc-transaction__shipping-address {
  grid-column: 2;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  margin: 0 !important;
  color: var(--ws-cart-muted) !important;
  font-style: normal;
  text-align: right;
}

#fc .fc-transaction__shipping-address img {
  margin-left: 5px;
  vertical-align: baseline;
}

#fc .fc-transaction__shipping > table {
  grid-column: 1 / -1;
}

/* Foxy keeps this control available for scripted destination correction. */
#fc [data-fc-id="change-shipping-location-button"] {
  display: none !important;
}

#fc .fc-actions--payment {
  margin-top: 22px;
}

/* Select payment on checkout; keep only the regular checkout action on /cart. */
#fc .fc-context--cart-fullpage .fc-actions--payment > :not(.fc-action--payment--checkout) {
  display: none !important;
}

/* Payment methods remain available below the address form. */
#fc #fc-checkout__section--express-options {
  display: none !important;
}

#fc .fc-actions--payment .fc-action--checkout--button {
  width: 100%;
  min-height: 48px;
  font-size: 16px !important;
  font-weight: var(--foxy-font-weight-bold);
}

#fc .fc-cart__item__quantity .fc-form-control {
  min-width: 44px;
  min-height: 40px;
  font-variant-numeric: tabular-nums;
}

#fc .fc-cart__item__total,
#fc .fc-subtotal__value {
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  /* Flatten Foxy's nested header wrappers into the same three columns used by
     each item row. */
  #fc #fc-cart--responsive .fc-cart__items__header {
    display: grid !important;
    grid-template-columns:
      minmax(0, 70%) minmax(76px, 15%) minmax(80px, 15%);
    align-items: end;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #fc #fc-cart--responsive .fc-cart__items__header::before,
  #fc #fc-cart--responsive .fc-cart__items__header::after {
    display: none;
  }

  #fc #fc-cart--responsive .fc-cart__items__header__item {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    margin-left: 0 !important;
    padding: 0 0 0 25px !important;
    float: none !important;
  }

  #fc #fc-cart--responsive .fc-cart__items__header__totals,
  #fc #fc-cart--responsive
    .fc-cart__items__header__totals
    > .fc-container__row {
    display: contents !important;
  }

  #fc #fc-cart--responsive .fc-cart__item__totals .fc-container__row {
    display: grid;
    grid-template-columns: minmax(76px, 1fr) minmax(80px, 1fr);
    align-items: start;
  }

  #fc #fc-cart--responsive .fc-cart__item__price,
  #fc #fc-cart--responsive .fc-cart__items__header__price {
    display: none !important;
  }

  #fc #fc-cart--responsive .fc-cart__item__quantity {
    grid-column: 1;
    width: auto !important;
    padding: 0 10px 0 0 !important;
    text-align: center;
  }

  #fc #fc-cart--responsive .fc-cart__item__total {
    grid-column: 2;
    width: auto !important;
    padding: 0 !important;
    text-align: right;
  }

  #fc #fc-cart--responsive .fc-cart__item__quantity,
  #fc #fc-cart--responsive .fc-cart__item__total {
    grid-row: 1;
    position: static !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
  }

  #fc #fc-cart--responsive .fc-cart__items__header__quantity {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    padding: 0 10px 0 0 !important;
    text-align: center;
  }

  #fc #fc-cart--responsive .fc-cart__items__header__total {
    grid-column: 3;
    grid-row: 1;
    width: auto !important;
    padding: 0 !important;
    text-align: right;
  }
}

@media (min-width: 1000px) {
  #fc .fc-context--cart-fullpage .fc-cart__header,
  #fc .fc-context--cart-fullpage .fc-cart__main {
    max-width: 1200px;
  }

  #fc .fc-context--cart-fullpage .fc-cart__main__content {
    flex: 0 0 66% !important;
    width: 66% !important;
    padding: 28px 34px !important;
    border: 1px solid var(--ws-cart-border);
    border-radius: 8px;
    background: var(--ws-cart-surface) !important;
  }

  #fc .fc-context--cart-fullpage .fc-cart__main .fc-sidebar--cart {
    flex: 0 0 34% !important;
    width: 34% !important;
    padding: 0 0 0 28px !important;
  }

  #fc .fc-context--cart-fullpage .fc-sidebar--cart .fc-sidebar {
    padding: 28px !important;
    border: 1px solid var(--ws-cart-border);
    border-top: 4px solid var(--ws-brand-navy);
    border-radius: 8px;
    background: var(--ws-cart-surface) !important;
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.08);
  }
}

@media (max-width: 999px) {
  #fc .fc-context--cart-fullpage .fc-cart__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 16px;
    padding: 18px 15px 8px;
  }

  #fc .fc-context--cart-fullpage .fc-cart__header::before,
  #fc .fc-context--cart-fullpage .fc-cart__header::after {
    display: none;
  }

  /* Both Foxy's base CSS and theme hide this logo at mobile breakpoints. */
  #fc .fc-context--cart-fullpage .fc-logo {
    display: block !important;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    padding: 0 0 16px;
  }

  #fc .fc-context--cart-fullpage .fc-cart__title,
  #fc .fc-context--cart-fullpage .fc-cancel-continue-shopping {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
  }

  #fc .fc-context--cart-fullpage .fc-cart__title {
    grid-column: 1;
    grid-row: 2;
  }

  #fc .fc-context--cart-fullpage .fc-cart__title__header {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    text-align: left;
  }

  #fc .fc-context--cart-fullpage .fc-order-quantity {
    display: block;
    margin: 0;
    text-align: left;
  }

  #fc .fc-context--cart-fullpage .fc-cancel-continue-shopping {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  #fc .fc-context--cart-fullpage .fc-cancel-continue-shopping .fc-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  #fc .fc-context--cart-fullpage .fc-cart__main__content,
  #fc .fc-context--cart-fullpage .fc-cart__main .fc-sidebar--cart {
    width: 100% !important;
    padding: 20px !important;
    border: 1px solid var(--ws-cart-border);
    border-radius: 6px;
    background: var(--ws-cart-surface) !important;
  }

  #fc .fc-context--cart-fullpage .fc-cart__main .fc-sidebar--cart {
    margin-top: 18px !important;
  }
}

/* Keep Foxy's native radio and expanded payment fields within one clear row. */
#fc #fc-payment .fc-container__grid--payment-method > .fc-input-group-container {
  border: 1px solid var(--ws-cart-border);
  border-radius: 6px;
  margin-bottom: 10px;
}

#fc #fc-payment .fc-container__grid--payment-method > .fc-input-group-container--active {
  border-color: var(--ws-brand-navy);
}

#fc #fc-payment .fc-input-group-container__title {
  /* Foxy declares display: block !important on these labels. */
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  margin: 0;
  cursor: pointer;
}

#fc #fc-payment .fc-input-group-container__title input[type="radio"] {
  position: static;
  flex: 0 0 auto;
  margin: 0;
}

#fc #fc-payment .fc-input-group-container__title:has(input:focus-visible) {
  outline: 2px solid var(--ws-brand-navy);
  outline-offset: 2px;
}

#fc #fc-payment .fc-input-group-container__title:hover {
  background: var(--ws-cart-canvas);
}

/* Retain readable fallback text until PayPal has rendered its mark. */
#fc #fc-payment .fc-input-group-container__title:has(.paypal-mark-holder > *) .ws-payment-label-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#fc #fc-payment .fc-form-group[hidden] {
  display: none !important;
}

#fc #fc-payment .fc-input-group-container__title .fc-checkout__section--payment__method__logo,
#fc #fc-payment .fc-input-group-container__title .paypal-mark-holder {
  display: inline-flex;
  align-items: center;
}

#fc #fc-payment .fc-input-group-container__title img {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0;
}

#fc #fc-payment .paypal-mark-holder > div {
  display: flex;
  align-items: center;
}

/* PayPal marks combine an icon and text; keep both on one centered line. */
#fc #fc-payment .paypal-mark {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

/* Remove the empty heading section, but retain any future additional fields. */
#fc [data-fc-id="block-additional-fields"]:has(#fc-additional-fields > legend:only-child) {
  display: none;
}

#fc #fc-additional-fields > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Offer the PayPal row without separate Venmo or Pay Later selections. */
#fc #fc-payment > .fc-form-group:has(> :is(
  #fc-payment-method-paypal_platform_venmo,
  #fc-payment-method-paypal_platform_paylater
)) {
  display: none !important;
}

/* Native receipt custom fields otherwise collapse customer-entered line breaks. */
#fc #fc-receipt__section--custom-field--Order_Notes .fc-form-control--static {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Also style the earlier pasted grid markup after JS marks its notes group. */
#fc .ws-order-notes {
  display: block;
  box-sizing: border-box;
  margin: 0 0 28px;
  /* Match the 15px inset of Foxy's shipping and payment field groups. */
  padding: 0 15px;
}

#fc .ws-order-notes > .fc-form-label {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
  color: var(--foxy-heading-color);
  font-size: var(--foxy-font-size-heading);
  font-weight: var(--foxy-font-weight-bold);
}

#fc .ws-order-notes > div {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#fc .ws-order-notes .fc-input-group-container {
  margin: 0;
  padding: 0;
}

#fc textarea#Order_Notes {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 112px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--ws-cart-border);
  border-radius: var(--foxy-radius);
  background: var(--foxy-input-background);
  color: var(--foxy-input-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}

#fc #ws-order-notes-help {
  margin: 8px 0 0;
  color: var(--foxy-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

#fc .ws-order-notes-optional {
  font-size: var(--foxy-font-size-body);
  font-weight: var(--foxy-font-weight-normal);
}

#fc textarea#Order_Notes:focus-visible {
  outline: 2px solid var(--ws-brand-navy);
  outline-offset: 2px;
}
