/* =========================================================================
   Sevroth Labs — WooCommerce layer
   Loaded only when WooCommerce is active. Everything here overrides
   WooCommerce's default styles so the shop, product, cart and checkout
   inherit the same design tokens as the rest of the theme.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Shop archive
   ------------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count {
  margin: 0; color: var(--sev-muted); font-size: 14px;
}
.woocommerce .woocommerce-ordering { margin: 0 0 24px; }
.woocommerce .woocommerce-ordering select {
  width: auto; min-width: 210px; padding: 9px 34px 9px 13px;
  font-size: 14px; border-radius: var(--sev-radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

.woocommerce .sev-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}

ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(var(--sev-shop-cols, 4), minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
/* WooCommerce prints a clearfix on ul.products (content:" "; display:table).
   In a grid container that pseudo-element becomes a real grid item and shoves
   every card one column to the right. content:none removes it properly;
   display:none alone loses the cascade to WooCommerce's own stylesheet. */
ul.products::before,
.woocommerce ul.products::before,
ul.products::after,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1100px) { ul.products, .woocommerce ul.products { --sev-shop-cols: 3; } }
@media (max-width: 820px)  { ul.products, .woocommerce ul.products { --sev-shop-cols: 2; gap: 16px; } }
@media (max-width: 420px)  { ul.products, .woocommerce ul.products { --sev-shop-cols: 1; } }

/* Product card */
.woocommerce ul.products li.product,
ul.products li.product {
  margin: 0; padding: 0; width: auto; float: none;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-lg); overflow: hidden;
  transition: box-shadow var(--sev-fast) var(--sev-ease),
              transform var(--sev-fast) var(--sev-ease),
              border-color var(--sev-fast) var(--sev-ease);
  position: relative;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  box-shadow: var(--sev-shadow-lg);
  border-color: var(--sev-border-strong);
  transform: translateY(-3px);
}

/* Media */
.woocommerce ul.products li.product a img,
ul.products li.product a img {
  width: 100%; height: auto; margin: 0;
  aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--sev-surface-2);
  padding: 10px;
  transition: transform 220ms var(--sev-ease);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sev-font-display);
  font-size: 14.5px; font-weight: 650; line-height: 1.35;
  color: var(--sev-navy);
  padding: 14px 16px 0; margin: 0;
}
.woocommerce ul.products li.product .price {
  color: var(--sev-navy); font-size: 15.5px; font-weight: 750;
  padding: 6px 16px 0; margin: 0;
  font-family: var(--sev-font-display);
}
.woocommerce ul.products li.product .price del {
  color: var(--sev-muted); font-weight: 500; opacity: .8; margin-right: 5px; font-size: 13px;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 12px 16px 16px; align-self: stretch;
  text-align: center; font-size: 13.5px; padding: 10px 14px;
  border-radius: var(--sev-radius-sm);
}
.woocommerce ul.products li.product .added_to_cart {
  background: none; border: 0; color: var(--sev-verified);
  font-weight: 650; padding: 4px 16px 16px; margin: 0;
}

/* Sale flash */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute; top: 12px; left: 12px; right: auto; z-index: 3;
  min-height: 0; min-width: 0; margin: 0; padding: 4px 10px;
  border-radius: var(--sev-radius-pill);
  background: var(--sev-danger); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
  letter-spacing: .03em; text-transform: uppercase;
}

/* Clinical batch/purity badge injected by the theme */
.sev-loop-badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--sev-radius-pill);
  background: rgba(10, 15, 29, .82); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.sev-loop-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sev-teal);
  box-shadow: 0 0 0 2px rgba(0, 212, 170, .28);
}

/* -------------------------------------------------------------------------
   2. Single product
   ------------------------------------------------------------------------- */
.woocommerce div.product { margin-top: 8px; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { margin-bottom: 32px; }

.woocommerce div.product div.images img {
  border-radius: var(--sev-radius-lg);
  background: var(--sev-surface-2);
  border: 1px solid var(--sev-border);
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-top: 12px;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: var(--sev-radius-sm); border: 1px solid var(--sev-border);
  cursor: pointer; padding: 4px; aspect-ratio: 1; object-fit: contain;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  border-color: var(--sev-cyan);
}

.woocommerce div.product .product_title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: .35em; letter-spacing: -.025em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sev-navy); font-size: 1.65rem; font-weight: 800;
  font-family: var(--sev-font-display); margin-bottom: .55em;
}
.woocommerce div.product p.price del { color: var(--sev-muted); font-size: 1.1rem; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--sev-text); font-size: 15.5px; line-height: 1.7;
  padding-block: 4px 16px;
  border-top: 1px solid var(--sev-border); margin-top: 12px; padding-top: 18px;
}

/* Add to cart */
.woocommerce div.product form.cart {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  margin: 20px 0 8px;
}
.woocommerce div.product form.cart div.quantity {
  display: flex; align-items: stretch; margin: 0;
  border: 1px solid var(--sev-border-strong); border-radius: var(--sev-radius);
  overflow: hidden; background: #fff;
}
.woocommerce .quantity input.qty {
  width: 68px; height: 48px; border: 0; text-align: center;
  font-size: 15px; font-weight: 650; padding: 0;
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .button {
  flex: 1 1 200px; height: 48px; font-size: 15px;
}
.woocommerce div.product form.cart .variations { margin-bottom: 16px; }
.woocommerce div.product form.cart .variations td { padding: 6px 0; }
.woocommerce div.product form.cart .variations label { margin: 0; }

/* Meta / SKU */
.woocommerce div.product .product_meta {
  font-size: 13px; color: var(--sev-muted);
  border-top: 1px solid var(--sev-border);
  padding-top: 16px; margin-top: 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.woocommerce div.product .product_meta a { color: var(--sev-text); }
.woocommerce div.product .product_meta .sku_wrapper .sku {
  font-family: var(--sev-font-mono); font-size: 12.5px;
  background: var(--sev-surface); padding: 2px 7px; border-radius: 5px;
}

/* Stock */
.woocommerce div.product .stock {
  font-size: 14px; font-weight: 650; color: var(--sev-verified);
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.woocommerce div.product .stock::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px rgba(10,124,90,.15);
}
.woocommerce div.product .out-of-stock { color: var(--sev-danger); }
.woocommerce div.product .out-of-stock::before { box-shadow: 0 0 0 3px rgba(178,58,72,.15); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 26px; border-bottom: 1px solid var(--sev-border);
  display: flex; gap: 4px; flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0;
  margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 18px; color: var(--sev-muted);
  font-size: 14.5px; font-weight: 650; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--sev-navy); border-bottom-color: var(--sev-teal);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--sev-navy); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; margin: 0; }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border-radius: 50%; width: 44px; padding: 0; border: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid var(--sev-border); border-radius: var(--sev-radius);
  padding: 16px 18px; margin-left: 60px;
}
.woocommerce .star-rating span::before, .woocommerce p.stars a { color: #F59E0B; }

/* Related / upsells */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: 1.25rem; margin-bottom: 20px;
  padding-top: 36px; border-top: 1px solid var(--sev-border);
}

/* -------------------------------------------------------------------------
   3. Cart
   ------------------------------------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-lg); border-collapse: separate;
  border-spacing: 0; overflow: hidden; margin-bottom: 28px;
}
.woocommerce table.shop_table th {
  background: var(--sev-surface-2); color: var(--sev-navy);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; padding: 14px 16px; border-bottom: 1px solid var(--sev-border);
}
.woocommerce table.shop_table td {
  padding: 16px; border-top: 1px solid var(--sev-border); vertical-align: middle;
}
.woocommerce table.cart img { width: 68px; border-radius: var(--sev-radius-sm); }
.woocommerce table.cart td.product-name a { color: var(--sev-navy); font-weight: 650; }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.15rem; }
.woocommerce .cart-collaterals .cart_totals table { margin-bottom: 16px; }
.woocommerce .cart-collaterals .cart_totals .order-total td,
.woocommerce .cart-collaterals .cart_totals .order-total th { font-size: 1.05rem; font-weight: 750; }
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
  font-size: 15px; padding: 15px 24px; border-radius: var(--sev-radius);
}

/* -------------------------------------------------------------------------
   4. Checkout
   ------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce { display: block; }
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--sev-border); border-radius: var(--sev-radius-lg);
  padding: 24px; background: var(--sev-surface-2);
}
.woocommerce-checkout #customer_details { margin-bottom: 32px; }
.woocommerce-checkout h3 {
  font-size: 1.05rem; padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--sev-border);
}
.woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label { font-size: 13.5px; font-weight: 600; }
.woocommerce form .form-row .required { color: var(--sev-danger); text-decoration: none; }
.woocommerce #order_review {
  background: var(--sev-surface-2); border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-lg); padding: 24px;
}
.woocommerce #order_review table.shop_table { border: 0; margin-bottom: 16px; }
.woocommerce #payment {
  background: transparent; border-radius: 0;
}
.woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid var(--sev-border); padding: 0 0 16px;
}
.woocommerce #payment div.payment_box {
  background: #fff; border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius); font-size: 14px;
}
.woocommerce #payment div.payment_box::before { display: none; }
.woocommerce #payment #place_order {
  font-size: 15.5px; padding: 16px 28px; width: 100%; border-radius: var(--sev-radius);
}

/* -------------------------------------------------------------------------
   5. My Account
   ------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--sev-border); border-radius: var(--sev-radius-lg);
  overflow: hidden; background: #fff;
}
.woocommerce-MyAccount-navigation ul li { margin: 0; border-bottom: 1px solid var(--sev-border); }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation ul li a {
  display: block; padding: 13px 18px; color: var(--sev-text);
  font-size: 14.5px; font-weight: 550; text-decoration: none;
}
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--sev-surface); color: var(--sev-navy); }
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--sev-navy); color: #fff; font-weight: 650;
}
.woocommerce-MyAccount-content { font-size: 15px; }

/* -------------------------------------------------------------------------
   6. Notices & messages
   ------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  border-radius: var(--sev-radius); border: 1px solid;
  padding: 14px 18px 14px 46px; margin-bottom: 20px;
  font-size: 14.5px; background-color: #fff;
  list-style: none;
}
.woocommerce-message { border-color: #A7F3D0; background: var(--sev-verified-bg); color: var(--sev-verified); }
.woocommerce-info    { border-color: #BFDBFE; background: #EFF6FF; color: #1E3A8A; }
.woocommerce-error   { border-color: #FECACA; background: var(--sev-danger-bg); color: var(--sev-danger); }
.woocommerce-message::before { color: var(--sev-verified); }
.woocommerce-info::before    { color: #1E3A8A; }
.woocommerce-error::before   { color: var(--sev-danger); }

/* -------------------------------------------------------------------------
   7. Breadcrumb
   ------------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  font-size: 12.5px; color: var(--sev-muted); margin: 0 0 20px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--sev-muted); }

/* -------------------------------------------------------------------------
   8. Widgets (shop sidebar / footer)
   ------------------------------------------------------------------------- */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--sev-cyan);
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: var(--sev-border); border-radius: var(--sev-radius-pill);
}

/* -------------------------------------------------------------------------
   9. Product gallery zoom / lightbox trigger
   ------------------------------------------------------------------------- */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  background: rgba(10,15,29,.72); color: #fff; border-radius: 50%;
  width: 42px; height: 42px; display: grid; place-items: center;
  top: 14px; right: 14px; z-index: 9;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
  border-color: #fff;
}

/* -------------------------------------------------------------------------
   10. Responsive shop
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100%; float: none; margin-bottom: 24px; }
  .woocommerce table.shop_table_responsive tr td::before { font-weight: 650; color: var(--sev-navy); }
  .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; margin-top: 24px; }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review { width: 100%; float: none; }
}
@media (max-width: 560px) {
  .woocommerce div.product form.cart .button { flex: 1 1 100%; }
  .woocommerce .quantity input.qty { width: 54px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 11px 13px; font-size: 13.5px; }
}

/* WooCommerce adds .first / .last to cards for its float grid. Harmless in a
   grid, but zeroing them prevents an extra offset if a plugin re-enables float. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none; margin: 0; }


/* =========================================================================
   11. WOOCOMMERCE BLOCKS (Cart / Checkout)
   -------------------------------------------------------------------------
   WooCommerce 8+ ships Cart and Checkout as Gutenberg blocks by default.
   They use wp-block-woocommerce-* and wc-block-* class names, NOT the
   classic table.shop_table / .checkout-button markup, so everything above
   this section missed them entirely and the pages rendered as an unstyled
   grey skeleton with fake "skeleton" placeholder rows.
   ========================================================================= */

/* Cart block */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--sev-font-body);
  color: var(--sev-text);
}

.wc-block-cart-items,
.wc-block-checkout__form {
  border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-lg);
  overflow: hidden;
  background: #fff;
}

.wc-block-cart-items__header th,
.wc-block-cart-items__header td {
  background: var(--sev-surface-2);
  color: var(--sev-navy);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sev-border);
}

.wc-block-cart-items__row td {
  padding: 18px 16px;
  border-top: 1px solid var(--sev-border);
  vertical-align: middle;
}

.wc-block-cart-item__image img,
.wc-block-cart-items__row .wc-block-components-product-image img {
  border-radius: var(--sev-radius);
  border: 1px solid var(--sev-border);
  background: var(--sev-surface-2);
  padding: 4px;
  max-width: 76px;
}

.wc-block-components-product-name,
.wc-block-cart-item__wrap a {
  color: var(--sev-navy);
  font-weight: 650;
  font-family: var(--sev-font-display);
  font-size: 15px;
  text-decoration: none;
}

.wc-block-cart-item__prices,
.wc-block-components-product-price {
  color: var(--sev-navy);
  font-weight: 750;
  font-family: var(--sev-font-display);
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  border: 1px solid var(--sev-border-strong);
  border-radius: var(--sev-radius);
  background: #fff;
  overflow: hidden;
  height: 44px;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  border: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--sev-navy);
  background: #fff;
}
.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button {
  background: var(--sev-surface-2);
  border: 0;
  color: var(--sev-navy);
  font-size: 16px;
  cursor: pointer;
  min-width: 40px;
}
.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button:hover {
  background: var(--sev-surface);
  color: var(--sev-cyan-dark);
}

/* Buttons inside blocks */
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wc-block-checkout__actions .wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  background: var(--sev-teal) !important;
  color: var(--sev-navy) !important;
  border: 1px solid transparent;
  border-radius: var(--sev-radius) !important;
  font-family: var(--sev-font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  text-decoration: none !important;
  box-shadow: none;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--sev-teal-dark) !important;
  color: var(--sev-navy) !important;
}

/* Cart sidebar totals */
.wc-block-components-totals-wrapper,
.wc-block-cart__totals-title,
.wc-block-components-order-summary {
  border-color: var(--sev-border);
}
.wc-block-components-totals-item,
.wc-block-components-order-summary-item {
  font-size: 14.5px;
  color: var(--sev-text);
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--sev-navy);
  font-weight: 750;
  font-family: var(--sev-font-display);
}
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--sev-border);
  padding-top: 14px;
  font-size: 1.05rem;
}

/* Coupon / notice panels */
.wc-block-components-panel,
.wc-block-components-totals-coupon__form,
.wc-block-components-notice-banner {
  border-radius: var(--sev-radius);
}
.wc-block-components-notice-banner {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E3A8A;
  font-size: 14.5px;
}

/* Form fields in the checkout block */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-select .components-select-control__input {
  border: 1px solid var(--sev-border-strong);
  border-radius: var(--sev-radius);
  padding: 11px 14px;
  font-size: 15px;
  color: var(--sev-navy);
  background: #fff;
  font-family: var(--sev-font-body);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
  border-color: var(--sev-cyan);
  box-shadow: var(--sev-ring);
  outline: none;
}
.wc-block-components-text-input label {
  color: var(--sev-muted);
  font-size: 13px;
  font-weight: 600;
}

/* Payment method boxes */
.wc-block-components-radio-control__option,
.wc-block-checkout__payment-method {
  border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius);
  margin-bottom: 10px;
  padding: 14px 16px;
  background: #fff;
}
.wc-block-checkout__payment-method.is-selected {
  border-color: var(--sev-cyan);
  box-shadow: var(--sev-ring);
}

/* Loading skeleton: WooCommerce shows grey placeholder rows while the block
   hydrates. Style them so they read as loading rather than broken. */
.wc-block-components-skeleton,
.wc-block-components-skeleton-text,
.wc-block-cart__main .wc-block-components-skeleton {
  background: linear-gradient(90deg, var(--sev-surface) 25%, #EDF2F7 37%, var(--sev-surface) 63%);
  background-size: 400% 100%;
  animation: sev-shimmer 1.4s ease infinite;
  border-radius: var(--sev-radius-sm);
  min-height: 14px;
}
@keyframes sev-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Centre the block cart a little tighter than the full container */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
  gap: 32px;
}
@media (max-width: 900px) {
  .wc-block-cart-items__header { display: none; }
  .wc-block-components-sidebar-layout { gap: 24px; }
}

/* ==========================================================================
   §12  CART / CHECKOUT / ACCOUNT LAYOUT
   page.php wraps every page in .sev-container--narrow (760px) because that is
   the right measure for editorial pages like About and Contact. It is the
   wrong measure for commerce: it straddles the block cart awkwardly and stops
   the block checkout from switching to its two-column layout. These rules
   re-widen only the WooCommerce pages, leaving editorial pages untouched.
   ========================================================================== */

.woocommerce-cart .sev-content .sev-container--narrow,
.woocommerce-checkout .sev-content .sev-container--narrow,
.woocommerce-account .sev-content .sev-container--narrow {
  max-width: none;
}

/* The block cart reads better with a ceiling than edge to edge. */
.woocommerce-cart .wp-block-woocommerce-cart-block,
.woocommerce-cart .wp-block-woocommerce-cart {
  max-width: 960px;
  margin-inline: auto;
}

/* Block headings were inheriting the theme's h2 scale (34px), which is sized
   for article sections, not for "Products in cart" and "Order summary". */
.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-checkout h2 {
  font-family: var(--sev-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sev-navy);
  margin: 0;
}

.wp-block-woocommerce-checkout h3,
.wp-block-woocommerce-cart h3 {
  font-family: var(--sev-font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--sev-navy);
  margin: 0 0 12px;
}

/* Editorial link underline is wrong for block UI controls. */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a {
  text-decoration: none;
}

.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-checkout a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inputs: the theme's 4px radius is tighter than the rest of the commerce UI. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input {
  border-radius: var(--sev-radius-sm);
}

/* Checkout columns breathe once the container is wide enough. */
@media (min-width: 1000px) {
  .wc-block-checkout .wp-block-woocommerce-checkout-fields-block {
    padding-right: 8px;
  }
  .wc-block-checkout .wp-block-woocommerce-checkout-totals-block {
    padding-left: 8px;
  }
}

/* Account page: narrow is fine for the login form, but not for the
   orders / downloads tables, which need horizontal room. */
.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100%;
}

/* ==========================================================================
   §13  INTERNAL LINK BLOCKS
   Category cross-links, category -> guide links, product siblings, shop
   category index, and the guide article body. These exist to give the crawl
   graph horizontal edges; they are styled as navigation, not as advertising.
   ========================================================================== */

.sev-cat-crosslinks,
.sev-cat-guides,
.sev-shop-cats,
.sev-product-siblings {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: var(--sev-surface-2);
  border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-lg);
}

.sev-cat-crosslinks__label,
.sev-cat-guides h2,
.sev-shop-cats h2,
.sev-product-siblings h2 {
  margin: 0 0 12px;
  font-family: var(--sev-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sev-navy);
}

.sev-cat-crosslinks__up {
  margin: 0 0 14px;
  font-size: 0.875rem;
  color: var(--sev-muted);
}

.sev-cat-crosslinks__up a {
  color: var(--sev-cyan-dark);
  font-weight: 600;
  text-decoration: none;
}

.sev-cat-crosslinks__list,
.sev-cat-guides ul,
.sev-shop-cats ul,
.sev-product-siblings__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sev-cat-crosslinks__list a,
.sev-shop-cats a,
.sev-product-siblings__list a {
  display: inline-block;
  padding: 7px 13px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sev-navy);
  background: var(--sev-white);
  border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-pill);
  text-decoration: none;
  transition: border-color var(--sev-fast) var(--sev-ease),
              color var(--sev-fast) var(--sev-ease);
}

.sev-cat-crosslinks__list a:hover,
.sev-shop-cats a:hover,
.sev-product-siblings__list a:hover,
.sev-cat-crosslinks__list a:focus-visible,
.sev-shop-cats a:focus-visible,
.sev-product-siblings__list a:focus-visible {
  border-color: var(--sev-teal);
  color: var(--sev-cyan-dark);
}

.sev-cat-crosslinks__list span,
.sev-shop-cats span {
  color: var(--sev-muted);
  font-weight: 500;
}

/* Guide links read as prose, not as pills — they are a reading suggestion. */
.sev-cat-guides ul {
  display: block;
}

.sev-cat-guides li {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sev-cat-guides li:last-child { margin-bottom: 0; }

.sev-cat-guides a {
  color: var(--sev-cyan-dark);
  font-weight: 600;
  text-decoration: none;
}

.sev-cat-guides a:hover,
.sev-cat-guides a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sev-product-siblings__price {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: var(--sev-muted);
}

.sev-product-siblings__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* --- Guide article ------------------------------------------------------- */

.sev-guide-meta {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--sev-muted);
}

.sev-guide-body {
  max-width: 74ch;
}

.sev-guide-section + .sev-guide-section {
  margin-top: 2em;
}

.sev-guide-section h2 {
  margin-top: 0;
}

.sev-guide-related {
  margin: 40px 0 0;
  padding: 22px 24px;
  background: var(--sev-surface-2);
  border: 1px solid var(--sev-border);
  border-radius: var(--sev-radius-lg);
}

.sev-guide-related h2 {
  margin: 0 0 12px;
  font-family: var(--sev-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sev-navy);
}

.sev-guide-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sev-guide-links li {
  padding: 9px 0;
  border-bottom: 1px solid var(--sev-border);
  font-size: 0.9375rem;
}

.sev-guide-links li:last-child { border-bottom: 0; }

.sev-guide-links a {
  color: var(--sev-cyan-dark);
  font-weight: 600;
  text-decoration: none;
}

.sev-guide-links a:hover,
.sev-guide-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sev-guide-links__count {
  margin-left: 6px;
  color: var(--sev-muted);
  font-size: 0.8125rem;
}

.sev-guide-cta {
  margin: 32px 0 0;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  .sev-cat-crosslinks,
  .sev-cat-guides,
  .sev-shop-cats,
  .sev-product-siblings,
  .sev-guide-related {
    padding: 18px;
  }

  .sev-product-siblings__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   §14  CITATIONS
   External references are styled to be quiet but clearly clickable: a thin
   underline and the muted publisher name. A citation should not compete with
   the call to action, but it must not look like decoration either.
   ========================================================================== */

.sev-cite,
.sev-sources a,
.sev-cat-methods a {
  color: var(--sev-cyan-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.sev-cite:hover,
.sev-sources a:hover,
.sev-cat-methods a:hover,
.sev-cite:focus-visible,
.sev-sources a:focus-visible,
.sev-cat-methods a:focus-visible {
  color: var(--sev-navy);
  text-decoration-thickness: 2px;
}

.sev-sources,
.sev-cat-methods {
  margin: 40px 0 0;
  padding: 20px 24px;
  background: var(--sev-surface);
  border-left: 3px solid var(--sev-cyan);
  border-radius: 0 var(--sev-radius-lg) var(--sev-radius-lg) 0;
}

.sev-sources h2,
.sev-cat-methods h2 {
  margin: 0 0 12px;
  font-family: var(--sev-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sev-navy);
}

.sev-sources__list,
.sev-cat-methods__list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.sev-sources__list li,
.sev-cat-methods__list li {
  margin-bottom: 6px;
}

.sev-sources__publisher,
.sev-cat-methods__list span {
  display: block;
  font-size: 0.8125rem;
  color: var(--sev-muted);
  text-decoration: none;
}

.sev-sources__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sev-muted);
}

/* Product compound reference: a footnote under the buy button, not a banner. */
.sev-compound-ref {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--sev-border);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sev-muted);
}

.sev-compound-ref .sev-cite {
  font-weight: 600;
}

.sev-cat-methods p {
  margin: 0 0 10px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--sev-muted);
}

.sev-cat-methods__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .sev-sources,
  .sev-cat-methods {
    padding: 16px 18px;
  }
}