/* Syno eShop - WooCommerce layer.
   Loads after synoint-base.css, which supplies the tokens, the reset and the
   header/footer styling. Everything here maps WooCommerce's markup onto the
   design system primitives: .card, .btn / .btn-primary, .wrap, --bg-card.
   Never redefine a token here - change it in the Eleventy repo and re-sync. */

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

.shop-main {
  /* .header is fixed at 68px tall. */
  padding: 108px 0 96px;
  min-height: 60vh;
}

@media (min-width: 768px) {
  .shop-main {
    padding: 132px 0 128px;
  }
}

.shop-main .wrap {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.shop-main h1,
.shop-main h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.shop-main h1 {
  font-size: clamp(30px, 5vw, 44px);
  margin: 0 0 8px;
}

.woocommerce-products-header__title,
.page-title {
  font-size: clamp(30px, 5vw, 44px);
  margin: 0 0 8px;
}

.woocommerce-result-count,
.term-description,
.shop-main p {
  color: var(--text-2);
}

/* ---------- header cart badge ---------- */

/* Spacing between the cart and the primary action.

   Two separate problems were making this read as cramped:

   1. The count badge is absolutely positioned 8px beyond the icon's box, so it
      takes no part in the flex gap. A declared 12px gap measured just 4px from
      the badge to the button - which is what the eye judges. The margin below
      reserves that overhang so the declared gap is the gap you see.

   2. 12px is cluster spacing. Controls that belong together sit at 8-12px;
      distinct groups sit at 16-24px (and 8px is the floor for avoiding
      mis-taps). The cart is a quiet utility and Order now is the page's primary
      action - different in kind, so they should read as two groups, not a pair.
      20px is the middle of that band and leaves the CTA isolated enough to be
      the obvious target. */
/* Cart and account are the same kind of thing - quiet utilities - so they sit
   as one cluster at 12px, then 20px of air before the primary action. Same
   reasoning as before: 8-12px reads as "these belong together", 16-24px as
   "these are separate groups". */
.header-cta {
  gap: 20px;
}

.header-utils {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.header-cta .cart-link,
.header-cta .account-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  transition: 0.2s var(--ease);
}

/* The count badge overhangs the cart's box by 8px and takes no part in the
   flex gap, so without this the 12px above measures 4px to whatever follows.
   It now sits against the account icon rather than the button, but the fix is
   the same: reserve the overhang. */
.header-cta .cart-link {
  margin-right: 8px;
}

.header-cta .cart-link:hover,
.header-cta .account-link:hover {
  color: var(--ink);
}

.header-cta .cart-link svg,
.header-cta .account-link svg {
  width: 20px;
  height: 20px;
}

/* Signed in is worth showing without adding a word: the icon takes the signal
   colour, so a returning customer can see at a glance that they are known. */
.header-cta .account-link.is-signed-in {
  color: var(--brand);
}

.header-cta .account-link.is-signed-in:hover {
  color: var(--brand-600);
}

.header-cta .account-link:focus-visible,
.header-cta .cart-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 6px;
}

.header-cta .cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---------- buttons ---------- */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  transition: 0.2s var(--ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px var(--brand-glow);
}

/* Secondary actions read as ghost buttons. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce .cart .button.disabled {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ink);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.woocommerce button.button:disabled,
.woocommerce .button.disabled {
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- product grid ---------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce still ships a clearfix for its old float layout:
   `ul.products::before/::after { content:" "; display:table }`.
   Harmless with floats, but in a grid container those pseudo-elements become
   grid ITEMS and each swallow a whole cell, leaving empty gaps in the run. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after {
  content: none;
  display: none;
}

@media (min-width: 640px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--inset-top);
  border-radius: var(--radius-card);
  transition: 0.25s var(--ease);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(75, 123, 255, 0.45);
  box-shadow: 0 24px 60px -34px var(--brand-glow);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  /* 3:2, matching the source artwork exactly - see syno_eshop_thumbnail_size()
     in functions.php. Any other ratio here crops the image a second time. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  padding: 0;
  margin: 0 0 8px;
}

.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.woocommerce ul.products li.product .price del {
  color: var(--text-3);
  font-size: 15px;
  margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* Push the add-to-cart to the bottom so cards line up. */
.woocommerce ul.products li.product .button {
  margin-top: auto;
  align-self: flex-start;
}

/* The arrow says "this goes somewhere" rather than "this completes an action",
   which is the honest signal for a product that still needs configuring.

   The long selector is needed, not decorative: WooCommerce sets
   `.woocommerce ul.products li.product .button { display: block }`, which
   outranks the `inline-flex` in the buttons section above. With the button
   laid out as a block the svg stayed an inline, baseline-aligned box and
   dropped onto a second line - a 63px-tall button with the arrow under the
   label. Matching WooCommerce's specificity puts the flex row back. */
.woocommerce ul.products li.product .syno-configure-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

/* Label and icon are given the SAME height, so `align-items: center` centres
   two boxes of equal size and the result is exact rather than nearly right.
   Left as an anonymous text item the label takes its line box, which is taller
   than the 16px icon, and the arrow ends up a fraction of a pixel low. */
.syno-configure-label,
.syno-configure-link svg {
  height: 16px;
  line-height: 16px;
}

.syno-configure-link svg {
  width: 16px;
  flex: none;
  transition: transform 0.2s var(--ease);
}

.syno-configure-link:hover svg {
  transform: translateX(3px);
}

.woocommerce span.onsale {
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
}

/* ---------- single product ---------- */

.woocommerce div.product {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells {
    grid-column: 1 / -1;
  }
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
}

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-2);
  line-height: 1.6;
}

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}

.woocommerce div.product .product_meta {
  color: var(--text-3);
  font-size: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  margin-top: 8px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
  border: 0;
}

.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: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0;
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--brand);
  border-color: var(--brand);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #fff;
}

/* ---------- forms ---------- */

/* Scoped to WooCommerce's OWN forms - checkout, account, cart - and explicitly
   not the configurator, which sets its own type scale and layout.
   `.woocommerce label` was applying `display:block` to every configurator
   option, and those options are <label> elements wrapping their input: the
   radio was forced onto a line of its own above its text. Excluding the whole
   form beats chaining a `:not()` per component. */
.woocommerce form:not(.cfg-form) .form-row label,
.woocommerce-page form:not(.cfg-form) .form-row label,
.woocommerce form:not(.cfg-form) label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

.woocommerce input[type="text"]:not(.cfg-input),
.woocommerce input[type="email"]:not(.cfg-input),
.woocommerce input[type="tel"]:not(.cfg-input),
.woocommerce input[type="password"]:not(.cfg-input),
.woocommerce input[type="number"]:not(.cfg-input),
.woocommerce input[type="search"]:not(.cfg-input),
.woocommerce textarea:not(.cfg-input),
.woocommerce select:not(.cfg-input),
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 11px 14px;
  background: var(--frame);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  height: auto;
  transition: 0.2s var(--ease);
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
  color: var(--text-3);
}

.woocommerce .quantity .qty {
  width: 76px;
  text-align: center;
}

/* ---------- tables: cart, checkout, account ---------- */

.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 24px;
}

.woocommerce table.shop_table th {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}

.woocommerce table.shop_table td {
  padding: 16px;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
}

.woocommerce table.shop_table img {
  width: 56px;
  height: auto;
  border-radius: 8px;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.woocommerce-checkout #payment {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 20px;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--hairline);
  padding: 0 0 16px;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--frame);
  border-radius: 12px;
  color: var(--text-2);
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

/* ---------- notices ---------- */

/* One border, the same on all four sides.
   The previous 3px brand top over 1px sides read as two different rules
   fighting, and at the top edge it stacked with the focus ring below into what
   looked like a doubled border. Type is now carried by the border COLOUR and a
   faint tint of the same hue, which needs no asymmetry to be legible. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  color: var(--ink);
  padding: 16px 20px;
  margin: 0 0 24px;
  list-style: none;
}

.woocommerce-message {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, var(--bg-card));
}

.woocommerce-error {
  border-color: color-mix(in srgb, #ff5f6d 50%, transparent);
  background: color-mix(in srgb, #ff5f6d 8%, var(--bg-card));
}

/* WooCommerce gives notices `tabindex="-1"` and focuses them programmatically
   so screen readers announce them. The reader never navigated here, so a
   keyboard focus ring is misleading - it appears unbidden and then vanishes.
   Suppressed only on these announcement containers; every genuinely
   focusable control keeps its ring. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
  outline: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

/* WooCommerce puts the action link BEFORE the text in the markup and relied on
   `float: right` to move it over. Floats do not participate in the flex row
   above, so the link is reordered to the end instead.
   Separation is handled by `justify-content: space-between` on the container
   rather than `margin-left: auto` here - WooCommerce's own
   `.woocommerce .woocommerce-message .button` rule is more specific than
   anything sane to write at this level, and zeroes the margin. */
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  float: none;
  flex: none;
}

/* ---------- pagination & breadcrumb ---------- */

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--text-2);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.woocommerce .woocommerce-breadcrumb {
  color: var(--text-3);
  font-size: 14px;
  margin-bottom: 20px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--text-2);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--ink);
}

/* ---------- account ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: auto;
    float: none;
  }
}

/* ---------- footer ----------
   synoint.com's footer is six tracks: the brand column plus five link columns.
   The eshop adds a sixth link column, Shop, which pushed Contact onto a second
   row. Seven tracks here, with the brand a little wider than the rest since it
   carries the logo and a paragraph, and a slightly tighter gap to buy the space
   back. Overridden rather than edited into synoint-base.css, which is generated
   from the Eleventy repo and must keep matching the main site. */
@media (min-width: 1024px) {
  .footer .fcols {
    grid-template-columns: 1.15fr repeat(6, minmax(0, 1fr));
    gap: 30px;
  }
}

/* ---------- content rhythm ----------
   synoint-base.css opens with `*{margin:0;padding:0}`, which is right for the
   hand-built marketing pages but strips the spacing out of every block of
   editor- or WooCommerce-generated copy. Put it back, scoped to content areas
   so the header, footer and card layouts above are unaffected. */

.entry-content p,
.entry-content ul,
.entry-content ol,
.woocommerce-tabs .panel p,
.woocommerce-tabs .panel ul,
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description ul {
  margin-bottom: 1em;
}

.entry-content ul,
.entry-content ol,
.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol,
.woocommerce-product-details__short-description ul {
  padding-left: 1.25em;
}

.entry-content li,
.woocommerce-tabs .panel li {
  margin-bottom: 0.4em;
}

.entry-content > *:last-child,
.woocommerce-tabs .panel > *:last-child {
  margin-bottom: 0;
}

/* ---------- generic article content ---------- */

.entry-content a {
  color: var(--brand);
}

.entry-content h2,
.entry-content h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
}

.entry-content p,
.entry-content li {
  color: var(--text-2);
  line-height: 1.65;
}

/* ---------- Astra suppression ----------
   Astra is still the active theme while the shop runs from snippets, so its
   header, footer and page title render alongside the Syno ones. Hide them
   rather than fight their styling rule by rule.

   This whole block becomes dead the moment the theme itself is deployed -
   there is no Astra then. It is marked so it is easy to find and delete. */

.ast-main-header-wrap,
#masthead.site-header,
.ast-above-header-wrap,
.ast-below-header-wrap,
.site-footer,
#colophon,
.ast-small-footer,
.ast-page-builder-template .entry-header,
.ast-archive-description {
  display: none !important;
}

/* Astra pads the content area for a header that is no longer there. */
.ast-page-builder-template .site-content > .ast-container,
#content.site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.ast-separate-container,
body.ast-plain-container,
#page,
#content {
  background: var(--bg-base) !important;
}

/* ---------- WordPress admin bar ----------
   The Syno header is fixed at top:0, while WordPress pushes the document down
   with html{margin-top} and lays the admin bar over that gap. Without this the
   logo sits underneath the bar for every signed-in user - which is everyone
   reviewing the site. WordPress switches the bar from 46px to 32px at 783px. */

body.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}

/* ---------- Cart, checkout and account ----------
   These are ordinary pages rendered from WooCommerce shortcodes, so
   woocommerce_before_main_content never fires on them and they get no
   .shop-main wrapper. Without it the content starts at y=0 and the fixed
   header covers the page title. Mirror the .shop-main offsets onto Astra's
   content area. Specificity beats the padding reset in the block above. */

body.syno #content.site-content {
  padding-top: 108px !important;
  padding-bottom: 96px !important;
}

@media (min-width: 768px) {
  body.syno #content.site-content {
    padding-top: 132px !important;
    padding-bottom: 128px !important;
  }
}

/* WooCommerce's own templates print .shop-main, which carries the offset
   itself - applying it twice leaves a gap the height of the header. */
body.syno.syno-wc-main #content.site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Match the page title to the shop headings. */
body.woocommerce-cart .entry-header .entry-title,
body.woocommerce-checkout .entry-header .entry-title,
body.woocommerce-account .entry-header .entry-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- Responsive cart rows ----------
   Below WooCommerce's breakpoint the cart stacks and each cell grows a
   ::before label. Two of them land badly here: the configured products are
   sold individually, so the quantity cell has no control and renders a bare
   "Quantity:" over nothing, and the thumbnail cell gets a stray ": ". */

.woocommerce-cart table.cart td.product-quantity:not(:has(input:not([type="hidden"]), select)) {
  display: none;
}

.woocommerce-cart table.cart td.product-thumbnail::before {
  content: none;
}

/* ---------- Order received / order detail headings ----------
   Astra renders these two as light panels - #fbfbfb behind #f1f1f1 text -
   which is invisible against the dark shop. Make them read like every other
   shop heading. */

.woocommerce-order-details > h2,
.woocommerce-customer-details > h2,
.woocommerce-order-details h2.woocommerce-order-details__title,
.woocommerce-customer-details h2.woocommerce-column__title,
.woocommerce-order-details h3,
.woocommerce-customer-details h3 {
  background: none !important;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- Header, against Astra's generic rules ----------
   synoint-base.css styles .logo and .burger with single class selectors, which
   was enough on the Eleventy site. Here WooCommerce and Astra get there first
   with selectors that outrank them, and the results are not subtle:

     .woocommerce-page img { height: auto }   beat  .logo { height: 38px }
     Astra's button padding: 12px 24px        beat  .burger { width: 40px }

   The second one is why the mobile menu button looked empty: 24px of padding
   each side of a 48px border-box button leaves a content box exactly 0px wide,
   so the icon had nowhere to go. */

.header .logo,
img.logo {
  height: 38px !important;
  width: auto !important;
  max-width: none;
}

.header .burger {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
}

.header .burger:hover,
.header .burger:focus {
  background: rgba(255, 255, 255, 0.06);
}

.header .burger svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* ---------- Shop grid on small screens ----------
   Astra sets its own column counts from .ast-container, which outranks the
   grid in this sheet. One card per row on a phone is the design. */

@media (max-width: 639px) {
  .woocommerce ul.products,
  .ast-container .woocommerce ul.products:not(.elementor-grid) {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .woocommerce ul.products,
  .ast-container .woocommerce ul.products:not(.elementor-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products,
  .ast-container .woocommerce ul.products:not(.elementor-grid) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------- Buttons inside Astra's content area ----------
   Astra colours and underlines every link in .entry-content with a selector
   that outranks .btn-primary, so the primary button rendered as brand text on
   a brand background - a solid blue block with no readable label. */

.entry-content a.btn,
.woocommerce a.btn,
a.btn {
  text-decoration: none !important;
}

.entry-content a.btn.btn-primary,
.woocommerce a.btn.btn-primary,
a.btn.btn-primary {
  color: #fff !important;
}

.entry-content a.btn.btn-ghost,
.woocommerce a.btn.btn-ghost,
a.btn.btn-ghost {
  color: var(--ink) !important;
}