/* Brandable shop styling.
   Loaded AFTER WooCommerce's own stylesheets (see the dependency in
   functions.php) because Woo and this site both define .button, and whoever
   loads last wins. Without that ordering the header CTA turns Woo grey. */

/* ---- the collision: Woo's .button greys out the site's own buttons ---- */
.woocommerce .header .button,
.woocommerce .header-cta,
.header .button,
.header-cta{
  background:var(--blue); color:#fff; border:0;
  min-height:52px; padding:16px 26px; border-radius:12px;
  font-size:16px; font-weight:600;
}
.header .button:hover,.header-cta:hover{background:#0540c4}

.shop-shell{padding-block:40px 96px}

/* ---- buttons ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--blue); color:#fff; border-radius:12px;
  padding:14px 22px; font-size:15px; font-weight:600; line-height:1.2;
  transition:background .2s,transform .2s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:#0540c4;color:#fff}
.woocommerce a.button.disabled,.woocommerce button.button:disabled{
  background:#c9d2e8;color:#fff;opacity:1}

/* ---- prices: brand ink, not Woo's orange ---- */
.woocommerce .price,.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--ink); font-weight:700}
.woocommerce div.product p.price{font-size:26px;margin:6px 0 14px}
.woocommerce ul.products li.product .price{font-size:16px}

/* ---- catalogue grid ---- */
.woocommerce ul.products{display:grid;gap:34px 26px;margin:26px 0 0}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;text-align:left}
@media(min-width:900px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)}}
@media(max-width:899px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.woocommerce ul.products{grid-template-columns:1fr}}
.woocommerce ul.products li.product a img{border-radius:16px;margin-bottom:14px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:17px;font-weight:650;letter-spacing:-.2px;padding:0;margin:0 0 4px}
.woocommerce ul.products li.product .button{margin-top:12px;display:inline-flex}

/* ---- single product ---- */
.woocommerce div.product div.images{border-radius:20px;overflow:hidden}
.woocommerce div.product div.images img{border-radius:20px}
.woocommerce div.product .product_title{
  font-size:clamp(30px,3.4vw,44px);line-height:1.06;letter-spacing:-1.4px;margin:0 0 10px}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:17px;color:#5b616b;line-height:1.6;max-width:46ch}
.woocommerce div.product form.cart{margin:26px 0 18px}
.woocommerce div.product form.cart .variations{margin-bottom:16px}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{padding:8px 0;vertical-align:middle}
.woocommerce div.product form.cart .variations label{font-weight:650;font-size:14px}
.woocommerce div.product form.cart .variations select{
  min-height:46px;padding:10px 14px;border:1px solid #d8dce4;border-radius:10px;
  font-size:15px;background:#fff;min-width:220px}
.woocommerce .quantity .qty{
  min-height:46px;padding:10px;border:1px solid #d8dce4;border-radius:10px;
  font-size:15px;width:74px}
.woocommerce div.product .product_meta{font-size:13px;color:#7a8089;margin-top:18px}

/* ---- tabs ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:44px 0 0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:#e7e9ed}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 26px 0 0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:14px 0;font-weight:600;color:#6b727c;font-size:15px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
/* Woo tab panels inherit the site's huge h2; the shop needs a smaller step */
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce .related h2,.woocommerce .up-sells h2,
.woocommerce-page .cart-collaterals h2{
  font-size:26px;letter-spacing:-.8px;margin:26px 0 14px}
.woocommerce div.product .woocommerce-tabs .panel p{
  font-size:16px;line-height:1.7;color:#4c525b;max-width:70ch}

/* ---- breadcrumb + result count ---- */
.woocommerce .woocommerce-breadcrumb{font-size:13px;color:#8a9099;margin:0 0 18px}
.woocommerce .woocommerce-breadcrumb a{color:#8a9099}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{
  font-size:14px;color:#7a8089}
.woocommerce .woocommerce-ordering select{
  padding:9px 12px;border:1px solid #d8dce4;border-radius:9px;font-size:14px}
.woocommerce .page-title{font-size:clamp(30px,3.4vw,44px);letter-spacing:-1.4px;margin:0 0 6px}

/* ---- notices ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--blue);border-radius:10px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--blue)}

/* Woo keeps add-to-cart disabled until a variation is chosen, and paints it its
   own lilac. Match the brand instead, and make it read as waiting rather than broken. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled{
  background:#c3d0f2;color:#fff;cursor:not-allowed;opacity:1}
.woocommerce div.product form.cart .button.disabled:hover{background:#c3d0f2}
.woocommerce div.product .woocommerce-variation-price{margin:0 0 14px}
.woocommerce div.product .woocommerce-variation-price .price{font-size:26px}
.woocommerce div.product .reset_variations{font-size:13px;color:#7a8089;margin-left:10px}

/* Shipping at checkout. The single United States rate costs nothing today, so
   WooCommerce prints "Free" beside it and in the totals; both would contradict
   "quoted with your proof" on a banner order. The rate label, set in the
   commerce plugin, is the whole message: "Shipping included" on business cards,
   "Shipping quoted with your proof" on everything else. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label,
.wc-block-components-totals-shipping .wc-block-components-totals-item__value { display: none !important; }