/*
  File role: brand styling for the pages rendered by the parent theme (WooCommerce Shop, product, Cart,
  Checkout, My account and the older WordPress pages). Uses the tokens defined in home.css.
  Loaded after home.css on every page that is not a Qlarivia template.
  @file_version 1.0.2
*/

/* Content column: same width as the brand header, breathing room under the sticky header. */
.site-main {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: 40px auto 64px;
  padding: 0;
}
.site-main .entry-title,
.site-main .page-title,
.site-main h1.woocommerce-products-header__title {
  color: var(--ql-purple);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.04em;
  margin: 0 0 24px;
}
.site-main h2,
.site-main h3 {
  color: var(--ql-blue-dark);
  font-weight: 800;
  letter-spacing: -.02em;
}
.site-main a { color: var(--ql-blue); }
.site-main a:hover { color: var(--ql-blue-dark); }
.site-main p,
.site-main li,
.site-main td,
.site-main th,
.site-main label { color: var(--ql-text); }

/* Buttons: same look as .ql-btn. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-account .woocommerce-MyAccount-content .button,
.site-main button,
.site-main input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ql-blue), var(--ql-aqua));
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 119, 200, .24);
  line-height: 1;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.site-main button:hover,
.site-main input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--ql-blue-dark), var(--ql-blue));
  color: #ffffff;
}
/* Product cards (Shop grid, related products): WooCommerce sets these buttons to inline-block with a more
   specific selector, which drops the flex centring and pushes the label to the top. */
.site-main.woocommerce ul.products li.product .button,
.woocommerce .site-main ul.products li.product .button,
.site-main ul.products li.product .button {
  display: inline-flex;
  white-space: nowrap; /* "SELECT OPTIONS" on one line */
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: #c9d6e2;
  color: #ffffff;
  box-shadow: none;
}

/* Shop grid: product cards in the brand style. */
.woocommerce ul.products li.product {
  background: #ffffff;
  border-radius: var(--ql-radius);
  border: 1px solid rgba(0, 88, 168, .08);
  box-shadow: var(--ql-shadow);
  padding: 22px;
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--ql-blue-dark);
  font-size: 20px;
  font-weight: 800;
  padding: 12px 0 6px;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ql-purple);
  font-weight: 900;
  font-size: 22px;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del { color: var(--ql-muted); font-weight: 600; }
.woocommerce span.onsale {
  background: var(--ql-aqua);
  color: #ffffff;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
}

/* Product page: title, tabs, variation form. */
.woocommerce div.product .product_title {
  color: var(--ql-purple);
  font-weight: 900;
  letter-spacing: -.03em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: #ffffff;
  border: 1px solid rgba(0, 88, 168, .15);
  border-radius: 999px;
  margin-right: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--ql-bg);
  border-color: var(--ql-blue);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ql-blue-dark); font-weight: 700; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid rgba(0, 88, 168, .12); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product form.cart .variations select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.site-main input[type="text"],
.site-main input[type="email"],
.site-main input[type="tel"],
.site-main input[type="password"],
.site-main textarea {
  border: 1px solid rgba(0, 88, 168, .2);
  border-radius: 8px;
  padding: 12px 14px;
  background: #ffffff;
  font: inherit;
  color: var(--ql-text);
}
.woocommerce .quantity .qty { border: 1px solid rgba(0, 88, 168, .2); border-radius: 8px; padding: 10px; }

/* Cart and checkout tables and boxes. */
.woocommerce table.shop_table {
  border: 1px solid rgba(0, 88, 168, .12);
  border-radius: 14px;
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--ql-bg); color: var(--ql-blue-dark); }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: rgba(0, 88, 168, .1); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  background: #ffffff;
  border: 1px solid rgba(0, 88, 168, .1);
  border-radius: var(--ql-radius);
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 88, 168, .06);
}
.woocommerce-checkout #payment {
  background: var(--ql-bg);
  border-radius: 14px;
}
.woocommerce-checkout #payment div.payment_box { background: #ffffff; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #ffffff; }

/* Notices in brand colours. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--ql-blue);
  background: var(--ql-bg);
  color: var(--ql-text);
  border-radius: 12px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--ql-blue); }
.woocommerce-error { border-top-color: #b32d2e; background: #fdecec; }
.woocommerce-error::before { color: #b32d2e; }

/* My account: navigation as pills, content in a card. */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 16px;
  margin-bottom: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 88, 168, .18);
  color: var(--ql-blue-dark);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--ql-bg);
  border-color: var(--ql-blue);
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: #ffffff;
  border: 1px solid rgba(0, 88, 168, .1);
  border-radius: var(--ql-radius);
  padding: 26px;
  box-shadow: 0 10px 30px rgba(0, 88, 168, .06);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: #ffffff;
  border: 1px solid rgba(0, 88, 168, .12) !important;
  border-radius: var(--ql-radius) !important;
  padding: 26px !important;
}
.woocommerce form.login .lost_password a { color: var(--ql-blue); }

/* Breadcrumb and result count in the muted colour. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count { color: var(--ql-muted); }
.woocommerce .woocommerce-breadcrumb a { color: var(--ql-blue); }
.woocommerce .woocommerce-ordering select { border: 1px solid rgba(0, 88, 168, .2); border-radius: 8px; padding: 8px 12px; }

@media (max-width: 900px) {
  .site-main { margin: 24px auto 48px; }
}