/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================================================
 * Global site styles (was WPCodeBox 2 snippet #9 "Global SCSS").
 * Uses the Tryckportal design-system Bricks variables (--tp-*, --space-*,
 * --radius-*). Migrated off the old ACSS tokens 2026-06-30
 * (--action -> --tp-orange, --action-hover -> --tp-orange-600,
 * --radius-s -> --radius-sm, --space-m -> --space-5, --space-xs -> --space-2).
 * ====================================================================== */

/* WooCommerce */
.woocommerce .button:hover {
  background-color: var(--tp-orange-600);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  border-radius: var(--radius-sm);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover {
  border-radius: var(--radius-sm);
}
.wc-section h2, .wc-section h3 {
  margin-bottom: var(--space-5);
}

/* Conditional pricing — mixed-cart/order note. Shown by the totals in cart,
 * checkout and order-details (My Account / view order) when an order mixes
 * priced and price-less ("offert") items — the total covers only the priced
 * ones. (Emails carry their own inline styling; they don't load this file.)
 * The "Offert" price label itself uses `.tp-quote-note` (Bricks global CSS). */
.tp-mixed-note td {
  font-size: 13px;
  font-weight: 400;
  color: var(--tp-gray-700);
  text-align: left;
}

/* WooCommerce — mobile fixes (varukorg + order addresses).
 * The cart/order tables are styled by Bricks' global custom CSS, which loads
 * after this file, so !important is needed to win. Scoped to <=768px only. */
@media (max-width: 768px) {
  /* Cart: consistent cell padding + left-aligned label/value so a long
   * product name no longer jams the cell edge / overflows. NB: the
   * product-name cell is a <th> (not <td>), so it is targeted by class. */
  .woocommerce-cart-form table.cart td,
  .woocommerce-cart-form table.cart th {
    padding: var(--space-4) !important;
  }
  .woocommerce-cart-form table.cart .product-name,
  .woocommerce-cart-form table.cart .product-quantity {
    justify-content: flex-start !important;
    align-items: center;
    column-gap: var(--space-3);
    flex-wrap: wrap;
    text-align: left !important;
  }
  .woocommerce-cart-form table.cart .product-name::before,
  .woocommerce-cart-form table.cart .product-quantity::before {
    width: auto !important;
    flex: 0 0 auto;
  }
  .woocommerce-cart-form table.cart .product-name a {
    overflow-wrap: anywhere;
  }
  /* The remove (x) cell is the first cell of each stacked item; widen it to
   * full width so its top border forms a complete divider between products.
   * Otherwise it is only ~32px wide, leaving a short stub — the "broken" line
   * between two cart items. */
  .woocommerce-cart-form table.cart .product-remove {
    width: 100% !important;
  }

  /* Order received / View order: stack the billing + shipping address columns
   * — they sit side-by-side and overflow (horizontal scroll) on narrow screens. */
  .woocommerce-customer-details .woocommerce-columns--2.addresses {
    flex-direction: column !important;
    gap: var(--space-6);
  }
  .woocommerce-customer-details .woocommerce-columns--2.addresses .woocommerce-column {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
  }
}

/* Generic page */
.gp-section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
  /* Horizontal gutter so plain (non-Bricks) content — e.g. the privacy policy —
   * isn't flush to the viewport edge on mobile. The article is width:900px /
   * max-width:100%, so with no section padding it hit both edges on narrow
   * screens. 20px (--space-5) matches the header's .brxe-container gutter. */
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.gp-section h1 {
  margin-bottom: var(--space-5);
}
.gp-section h2, .gp-section h3 {
  margin-bottom: var(--space-2);
}
.gp-section article#brx-content {
  width: 900px;
}

/* Menu */
li.menu-item .brx-submenu-toggle a {
  width: fit-content;
  padding-right: 0 !important;
}
li.menu-item .brx-submenu-toggle button {
  padding: 0 !important;
}
.bricks-nav-menu .sub-menu a:hover {
  color: var(--tp-orange);
}