/*
 * Cart and checkout, styled to match the rest of the boutique.
 *
 * Both pages are WooCommerce Blocks, rendered by React on the client. That rules
 * out template overrides: the markup is generated at runtime, so the only stable
 * surface is its class names, which WooCommerce treats as public API. Everything
 * below hangs off those, so a WooCommerce update changes the internals without
 * taking the styling with it.
 *
 * A note on specificity. WooCommerce ships its own stylesheet for these blocks
 * with selectors that are often two or three classes deep, so several rules here
 * are prefixed with `body` purely to win the cascade. Where that is the reason,
 * it is marked. No !important is used.
 *
 * The design language is the same as the rest of the site: serif headings, a
 * hairline rather than a shadow, square corners, and one solid black call to
 * action per screen.
 */

/* -------------------------------------------------------------------
 * Shared shell
 * ----------------------------------------------------------------- */

.wc-block-cart,
.wc-block-checkout {
	font-family: var(--bb-font-sans);
	color: var(--bb-ink);
}

/* The page template already provides the reading column and side padding, so the
   blocks should fill it rather than impose a second, narrower one. */
.bb-page .wc-block-cart,
.bb-page .wc-block-checkout {
	max-width: none;
	margin: 0;
}

/* Section headings across both pages. */
.wc-block-cart-items__header,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__title-text {
	font-family: var(--bb-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bb-tertiary-alt);
}

.wc-block-components-checkout-step__title {
	font-family: var(--bb-font-serif);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--bb-ink);
}

/* -------------------------------------------------------------------
 * Buttons
 *
 * One shape for every button on both pages: solid black, square, uppercase.
 * `body` prefix beats WooCommerce's own `.wc-block-components-button` rules.
 * ----------------------------------------------------------------- */

body .wc-block-components-button:not(.is-link) {
	background: var(--bb-black-solid);
	color: #fff;
	border: 1px solid var(--bb-black-solid);
	border-radius: 0;
	font-family: var(--bb-font-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	min-height: 52px;
	padding: 0 30px;
	transition: background 160ms ease-out, color 160ms ease-out;
}

body .wc-block-components-button:not(.is-link):hover {
	background: #fff;
	color: var(--bb-ink);
}

body .wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--bb-link-hover);
	outline-offset: 2px;
}

/* Text buttons: the coupon toggle, "Remove", "Add apartment". */
body .wc-block-components-button.is-link,
.wc-block-cart-item__remove-link {
	color: var(--bb-muted);
	font-size: 12px;
	letter-spacing: .02em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .wc-block-components-button.is-link:hover,
.wc-block-cart-item__remove-link:hover {
	color: var(--bb-link-hover);
}

/* -------------------------------------------------------------------
 * Cart
 * ----------------------------------------------------------------- */

.wc-block-cart__main {
	padding-right: 56px;
}

.wc-block-cart-items {
	border-collapse: collapse;
	width: 100%;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var(--bb-hairline);
}

body .wc-block-cart-items__header th {
	padding-bottom: 14px;
}

/* A hairline between rows, not a boxed table. */
body .wc-block-cart-items__row td {
	border-top: 1px solid var(--bb-hairline);
	padding-top: 26px;
	padding-bottom: 26px;
}

.wc-block-cart-item__image img {
	width: 100%;
	height: auto;
	display: block;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	font-family: var(--bb-font-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bb-ink);
	text-decoration: none;
}

.wc-block-cart-item__product .wc-block-components-product-name:hover {
	color: var(--bb-link-hover);
}

.wc-block-cart-item__product .wc-block-components-product-metadata {
	font-size: 12.5px;
	color: var(--bb-muted);
	line-height: 1.6;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__prices {
	font-size: 14px;
}

/* Quantity stepper: square, hairline, matching the product page. */
body .wc-block-components-quantity-selector {
	border: 1px solid var(--bb-hairline);
	border-radius: 0;
	background: #fff;
	max-width: 108px;
}

body .wc-block-components-quantity-selector::after {
	display: none;
}

body .wc-block-components-quantity-selector__input,
body .wc-block-components-quantity-selector__button {
	color: var(--bb-ink);
	font-size: 13px;
	background: none;
	border: 0;
}

body .wc-block-components-quantity-selector__button:hover {
	color: var(--bb-link-hover);
}

/* Cross-sells sit under the line items, so they need air above them and must not
   read as another cart row. */
.wc-block-cart__main .wp-block-woocommerce-product-collection {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--bb-hairline);
}

.wc-block-cart__main .wp-block-woocommerce-product-collection > h2 {
	font-family: var(--bb-font-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--bb-ink);
	margin-bottom: 24px;
}

/* -------------------------------------------------------------------
 * Totals panel, on both pages
 * ----------------------------------------------------------------- */

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid var(--bb-hairline);
	padding: 28px;
}

.wc-block-cart__totals-title {
	display: block;
	margin-bottom: 18px;
}

body .wc-block-components-totals-item {
	font-size: 13.5px;
	color: var(--bb-muted);
	padding: 9px 0;
}

body .wc-block-components-totals-item__value {
	color: var(--bb-ink);
	font-weight: 600;
}

body .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--bb-hairline);
	margin-top: 8px;
	padding-top: 18px;
	font-size: 16px;
	color: var(--bb-ink);
}

body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--bb-font-serif);
	font-size: 22px;
}

.wc-block-cart__submit-container {
	margin-top: 22px;
}

body .wc-block-cart__submit-button {
	width: 100%;
}

/* -------------------------------------------------------------------
 * Checkout form
 * ----------------------------------------------------------------- */

.wc-block-checkout__main {
	padding-right: 56px;
}

body .wc-block-components-checkout-step {
	border: 0;
	padding: 0 0 36px;
}

/* WooCommerce numbers the steps in a pseudo-element. The design has no numbered
   steps, and the numbers push the headings out of alignment with everything
   else on the page. */
body .wc-block-components-checkout-step__heading::before,
body .wc-block-components-checkout-step__container::after {
	display: none;
}

body .wc-block-components-checkout-step__content {
	padding-left: 0;
}

/* Inputs: hairline box, square, no inner shadow. */
body .wc-block-components-text-input input.components-text-control__input,
body .wc-block-components-textarea,
body .wc-block-components-select__select,
body .wc-block-components-combobox-control input.components-combobox-control__input {
	background: #fff;
	border: 1px solid var(--bb-hairline);
	border-radius: 0;
	box-shadow: none;
	color: var(--bb-ink);
	font-family: var(--bb-font-sans);
	font-size: 14px;
	min-height: 52px;
	padding: 20px 14px 6px;
}

body .wc-block-components-textarea {
	padding: 14px;
}

body .wc-block-components-text-input input.components-text-control__input:focus,
body .wc-block-components-select__select:focus,
body .wc-block-components-textarea:focus {
	border-color: var(--bb-ink);
	outline: none;
	box-shadow: none;
}

body .wc-block-components-text-input label,
body .wc-block-components-select__label,
body .wc-block-components-combobox-control label {
	color: var(--bb-muted);
	font-size: 13px;
}

/* Radio rows: payment methods, shipping rates, pickup locations. */
body .wc-block-components-radio-control__option {
	border-radius: 0;
	padding: 16px 16px 16px 48px;
}

body .wc-block-components-radio-control-accordion-option,
body .wc-block-components-radio-control__option {
	border-color: var(--bb-hairline);
}

body .wc-block-components-radio-control__option-checked,
body .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked) {
	border-color: var(--bb-ink);
}

/* Delivery / Pick Up toggle. Two equal tiles, the chosen one inked in. */
.wc-block-checkout__shipping-method-container {
	gap: 12px;
}

body .wc-block-checkout__shipping-method-option {
	border: 1px solid var(--bb-hairline);
	border-radius: 0;
	padding: 18px 16px;
	background: #fff;
	transition: border-color 160ms ease-out;
}

body .wc-block-checkout__shipping-method-option:hover {
	border-color: var(--bb-muted);
}

body .wc-block-checkout__shipping-method-option--selected {
	border-color: var(--bb-ink);
	background: var(--bb-body-bg);
}

body .wc-block-checkout__shipping-method-option-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bb-ink);
}

/* Order summary on checkout. */
body .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--bb-font-serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--bb-ink);
}

body .wc-block-components-order-summary-item__quantity {
	background: var(--bb-ink);
	border-color: var(--bb-ink);
	color: #fff;
	border-radius: 0;
}

body .wc-block-components-panel__button {
	color: var(--bb-ink);
	font-size: 13px;
}

/* Place Order sits at the end of the form, so it earns the full width. */
body .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	width: 100%;
}

body .wc-block-checkout__actions_row {
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 16px;
}

body .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button {
	text-align: center;
}

/* Notices: the site has no rounded corners anywhere else. */
body .wc-block-components-notice-banner {
	border-radius: 0;
	font-size: 13.5px;
}

/* -------------------------------------------------------------------
 * Narrow screens
 *
 * The full mobile pass across the site is still to come. These two pages carry
 * the money, so they get their stacking rules now rather than waiting for it.
 * ----------------------------------------------------------------- */

@media (max-width: 900px) {
	.wc-block-cart__main,
	.wc-block-checkout__main {
		padding-right: 0;
	}

	.wc-block-cart__sidebar .wc-block-components-sidebar,
	.wc-block-checkout__sidebar .wc-block-components-sidebar {
		padding: 22px 18px;
	}

	.wc-block-cart__main .wp-block-woocommerce-product-collection {
		margin-top: 40px;
		padding-top: 30px;
	}
}

@media (max-width: 600px) {
	body .wc-block-cart-items__row td {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.wc-block-cart-item__product .wc-block-components-product-name {
		font-size: 15px;
	}

	body .wc-block-components-button:not(.is-link) {
		min-height: 48px;
		font-size: 12px;
	}

	body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 19px;
	}
}


/* bb-address-order
   Shipping address field order for Trinidad and Tobago.

   The block checkout renders additional checkout fields after every core
   field, so the Town / City dropdown would otherwise sit below Island and
   Phone. The address form is a flex container, so the running order is set
   here rather than by fighting the markup.

   Postcode and the core city input are hidden server side in the TT locale,
   not here, so nothing depends on this file to stay correct. */
.wc-block-components-address-form { flex-wrap: wrap; }
.wc-block-components-address-form > * { order: 50; }
.wc-block-components-address-form__first_name { order: 10; }
.wc-block-components-address-form__last_name  { order: 11; }
.wc-block-components-address-form__country    { order: 20; }
.wc-block-components-address-form__address_1  { order: 30; }
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2-hidden-input { order: 31; }
.wc-block-components-select-input-bliss-beauty-delivery-area { order: 40; }
.wc-block-components-address-form__state { order: 41; }
.wc-block-components-address-form__phone { order: 60; }

/* Town / City and Island share a row above the phone number. */
@media (min-width: 600px) {
  .wc-block-components-address-form__state,
  .wc-block-components-select-input-bliss-beauty-delivery-area {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
}


/* Arrival dates under Delivery in the order summary, and the per-line
   remove control. Both are injected by inc/delivery-areas.php. The colour
   is a single custom property so the shade can be changed in one place. */
:root { --bb-eta: #7a4fa3; }

.bb-eta {
  color: var(--bb-eta);
  font-weight: 600;
  font-size: 0.875em;
  line-height: 1.35;
  margin-top: 2px;
}

/* Reserve the gutter the control sits in, so it never lands on the price. */
.wc-block-components-order-summary-item {
  position: relative;
  padding-right: 30px;
}

.bb-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a8a8a;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}

.bb-remove:hover { background: rgba(0,0,0,.06); color: #111; }
.bb-remove:focus-visible { outline: 2px solid var(--bb-eta); outline-offset: 2px; }
.bb-remove[disabled] { opacity: .4; cursor: default; }



/* bb-wc-buttons

   WooCommerce ships its own block buttons as dark grey pills: the product
   grid on the empty bag, Browse store on the empty checkout, and the
   cross-sells. None of them match the theme, whose buttons are square and
   ink black (the footer Sign Up button is the reference).

   Link-style block buttons are targeted rather than every block button, so
   Place Order and the other real <button> controls keep their own styling
   and nothing in the payment flow is touched. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-cart a.wc-block-components-button,
.wp-block-woocommerce-checkout a.wc-block-components-button,
a.wc-block-components-button.contained,
.woocommerce .cross-sells a.button,
.woocommerce .cross-sells button.button {
  background: var(--bb-ink, #14141a);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 13px 26px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  min-height: 0;
  transition: background 140ms ease;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-cart a.wc-block-components-button:hover,
.wp-block-woocommerce-checkout a.wc-block-components-button:hover,
a.wc-block-components-button.contained:hover,
.woocommerce .cross-sells a.button:hover,
.woocommerce .cross-sells button.button:hover {
  background: #2c2c36;
  color: #fff;
}

/* The empty-state call to action was rendering as a very large oval. */
a.wc-block-components-button.contained {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: auto;
}

/* Tablet and phone: the product grid buttons go full width of their card
   so they stay tappable and the row never overflows. */
@media (max-width: 900px) {
  .wc-block-grid__product-add-to-cart .wp-block-button__link,
  .wc-block-components-product-button .wp-block-button__link {
    display: block;
    width: 100%;
    padding: 13px 10px;
  }
}

@media (max-width: 560px) {
  a.wc-block-components-button.contained {
    width: 100%;
  }
  .wc-block-grid__product-add-to-cart .wp-block-button__link,
  .wc-block-components-product-button .wp-block-button__link {
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}

/* The empty-bag and empty-checkout call to action is a plain
   wp-block-button__link rather than a wc-block-components-button, and its
   flex parent was stretching it into a tall oval. */
.wc-block-checkout-empty .wp-block-button,
.wc-block-cart-empty .wp-block-button {
  align-self: center;
  display: block;
}

.wc-block-checkout-empty .wp-block-button__link,
.wc-block-cart-empty .wp-block-button__link,
.wp-block-woocommerce-checkout .wc-block-checkout-empty a.wp-block-button__link {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  background: var(--bb-ink, #14141a);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 13px 26px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 140ms ease;
}

.wc-block-checkout-empty .wp-block-button__link:hover,
.wc-block-cart-empty .wp-block-button__link:hover {
  background: #2c2c36;
  color: #fff;
}

@media (max-width: 560px) {
  .wc-block-checkout-empty .wp-block-button__link,
  .wc-block-cart-empty .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }
}