/* ============================================================
   TrendiestStore — WooCommerce bridge

   THE ONE LAYER WITH NO SHOPIFY COUNTERPART. Everything else in
   assets/css is a verbatim copy of a file from the Shopify
   theme. This is not: WooCommerce renders the cart, the
   checkout, the variation picker, the notices and the pagination
   with its own markup, and none of it has a Dawn equivalent to
   port. What is below dresses that markup in the same tokens
   the rest of the theme uses.

   WHERE IT SITS. Loaded LAST, after ts-mobile.css, because it
   overrides Woo's own stylesheets as well as parts of base.css.
   Nothing else may be loaded after it.

   1rem IS 12px here too. Dawn sets
   `html { font-size: calc(var(--font-body-scale) * 62.5%) }`
   with body_scale 120, so the root is 12px — not 16. Values that
   have to be exact regardless (icon boxes, borders, control
   heights) are written in px on purpose.
   ------------------------------------------------------------
    1  Shared page furniture
    2  Type-ahead search dropdown
    3  Cart confirmation card
    4  Product page: variation form + delivery box
    5  Notices
    6  Cart page
    7  Checkout
    8  Pagination + sorting bar
    9  Account pages
   10  Responsive
   ============================================================ */

/* ---------- 1. Shared page furniture ------------------------- */
.ts-page {
  padding: 28px 0 56px;
}

.ts-product-page {
  padding-top: 16px;
}

.ts-crumbs {
  margin: 0 0 14px;
  font-size: 1.1667rem;
  color: var(--ts-muted);
}

.ts-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-crumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: var(--ts-muted-2);
}

.ts-crumbs a {
  color: var(--ts-muted);
  text-decoration: none;
}

.ts-crumbs a:hover {
  color: var(--ts-brand);
}

.ts-crumbs [aria-current] {
  color: var(--ts-text);
}

.ts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 20px;
  text-align: center;
}

.ts-empty p {
  margin: 0;
  color: var(--ts-muted);
}

.ts-article__body,
.rte {
  color: var(--ts-text-2);
  line-height: 1.75;
}

.ts-article__body h2,
.rte h2 {
  margin: 1.6em 0 0.5em;
  font-size: 1.9167rem;
  color: var(--ts-text);
}

.ts-article__body h3,
.rte h3 {
  margin: 1.4em 0 0.4em;
  font-size: 1.5rem;
  color: var(--ts-text);
}

.ts-article__body a,
.rte a {
  color: var(--ts-brand);
}

.ts-article__body ul,
.rte ul {
  padding-left: 1.4em;
}

.ts-article__body li,
.rte li {
  margin: 0.35em 0;
}

.ts-article__media img {
  width: 100%;
  height: auto;
  border-radius: var(--ts-r, 18px);
}

/* the blog listing, which the shop does not use yet but a page
   with no styling at all looks broken the day someone posts */
.ts-postlist {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ts-postcard {
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r, 18px);
  overflow: hidden;
  background: var(--ts-surface);
}

.ts-postcard__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ts-postcard__body {
  padding: 16px;
}

.ts-postcard__title {
  margin: 0 0 6px;
  font-size: 1.4167rem;
}

.ts-postcard__title a {
  color: var(--ts-text);
  text-decoration: none;
}

.ts-postcard__meta {
  margin: 0 0 8px;
  font-size: 1.0833rem;
  color: var(--ts-muted);
}

/* ---------- 2. Type-ahead search dropdown -------------------- */
/* Replaces Shopify's predictive-search custom element, which talked to
   an endpoint that does not exist here. Same shape, same tokens. */
.ts-search {
  position: relative;
}

.ts-predictive {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: 14px;
  box-shadow: var(--ts-sh-3);
}

.ts-predictive[hidden] {
  display: none;
}

.ts-predictive__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  color: var(--ts-text);
  text-decoration: none;
}

.ts-predictive__item:hover,
.ts-predictive__item:focus-visible {
  background: var(--ts-row-hover);
}

.ts-predictive__item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--ts-plate);
  flex: none;
}

.ts-predictive__item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ts-predictive__item b {
  font-size: 1.1667rem;
  font-weight: 500;
  line-height: 1.3;
  /* two lines, then ellipsis — product titles here run long and a
     third line pushes the next result off the visible list */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-predictive__item small {
  color: var(--ts-brand);
  font-weight: 600;
}

.ts-predictive__empty {
  margin: 0;
  padding: 14px;
  text-align: center;
  color: var(--ts-muted);
  font-size: 1.1667rem;
}

/* ---------- 3. Cart confirmation card ------------------------ */
/* component-cart-notification.css styles the inside; this positions the
   wrapper, which on Shopify was done by the custom element. */
.ts-cart-notification {
  position: fixed;
  z-index: 60;
  top: 68px;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ts-cart-notification[hidden] {
  display: none;
}

.ts-cart-notification.is-open {
  opacity: 1;
  transform: none;
}

.ts-cart-notification .cart-notification-wrapper {
  display: flex;
  justify-content: flex-end;
}

.ts-cart-notification .cart-notification {
  display: block;
  pointer-events: auto;
  width: min(380px, calc(100vw - 32px));
  padding: 16px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: 18px;
  box-shadow: var(--ts-sh-3);
}

.ts-cart-notification .cart-notification__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ts-cart-notification .cart-notification__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.2rem;
  color: var(--ts-mint);
}

.ts-cart-notification .cart-notification__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ts-muted);
  cursor: pointer;
}

.ts-cart-notification .cart-notification__close:hover {
  background: var(--ts-row-hover);
  color: var(--ts-text);
}

.ts-cart-notification .cart-notification-product {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ts-line);
}

.ts-cart-notification .cart-notification-product__image img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--ts-plate);
}

.ts-cart-notification .cart-notification-product__name {
  margin: 0 0 4px;
  font-size: 1.1667rem;
  line-height: 1.35;
}

.ts-cart-notification .cart-notification-product dl {
  margin: 0;
  font-size: 1.0833rem;
  color: var(--ts-muted);
}

.ts-cart-notification .cart-notification-product .product-option {
  display: flex;
  gap: 6px;
}

.ts-cart-notification .cart-notification-product dt,
.ts-cart-notification .cart-notification-product dd {
  margin: 0;
}

.ts-cart-notification .cart-notification__links {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ts-cart-notification .cart-notification__links .button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: var(--buttons-radius, 10px);
  font-size: 1.1667rem;
  font-weight: 600;
  text-decoration: none;
}

.ts-cart-notification .button--primary {
  background: var(--ts-brand);
  color: var(--ts-on-brand);
  border: 1px solid var(--ts-brand);
}

.ts-cart-notification .button--primary:hover {
  background: var(--ts-btn-hover);
}

.ts-cart-notification .button--secondary {
  background: var(--ts-surface);
  color: var(--ts-brand);
  border: 1px solid var(--ts-line-2);
}

.ts-cart-notification .button-label {
  border: 0;
  background: none;
  color: var(--ts-muted);
  font-size: 1.0833rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- 4. Product page ---------------------------------- */
/* Woo's variation form, dressed to match the ported buy block. */
.ts-product-page .variations {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
}

.ts-product-page .variations th,
.ts-product-page .variations td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.ts-product-page .variations th {
  padding-bottom: 6px;
  font-size: 1.1667rem;
  font-weight: 600;
  color: var(--ts-text);
}

.ts-product-page .variations select,
.ts-product-page .quantity input[type='number'],
.ts-product-page input[type='text'],
.ts-product-page input[type='email'],
.ts-product-page input[type='tel'] {
  width: 100%;
  min-height: 46px;
  padding: 0 40px 0 14px;
  background-color: var(--ts-select-bg);
  color: var(--ts-select-text);
  border: 1px solid var(--ts-line-2);
  border-radius: var(--inputs-radius, 10px);
  font: inherit;
  font-size: 1.1667rem;
  appearance: none;
}

.ts-product-page .variations select {
  background-image: var(--ts-caret);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.ts-product-page .reset_variations {
  display: inline-block;
  margin: 4px 0 10px;
  font-size: 1.0833rem;
  color: var(--ts-muted);
}

.ts-product-page .woocommerce-variation-price {
  margin-bottom: 12px;
}

.ts-product-page .woocommerce-variation-price .price {
  font-size: 1.9167rem;
  font-weight: 600;
  color: var(--ts-brand);
}

/* Quantity + add to cart on one row, the way the buy block reads on the
   reference design. `.quantity` keeps its intrinsic width. */
.ts-product-page form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: 78rem;
  margin: 0 0 18px;
}

.ts-product-page form.cart.variations_form {
  display: block;
}

.ts-product-page form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.ts-product-page .quantity {
  display: flex;
  flex: none;
  width: 108px;
}

.ts-product-page .quantity input[type='number'] {
  padding: 0 8px;
  text-align: center;
  -moz-appearance: textfield;
}

.ts-product-page .quantity input::-webkit-outer-spin-button,
.ts-product-page .quantity input::-webkit-inner-spin-button {
  opacity: 1;
}

.ts-product-page button.single_add_to_cart_button,
.ts-product-page .product-form__submit {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--buttons-radius, 10px);
  background: var(--ts-brand);
  color: var(--ts-on-brand);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ts-product-page button.single_add_to_cart_button:hover {
  background: var(--ts-btn-hover);
  transform: translateY(-1px);
}

.ts-product-page button.single_add_to_cart_button.disabled,
.ts-product-page button.single_add_to_cart_button:disabled {
  background: var(--ts-muted-2);
  cursor: not-allowed;
  transform: none;
}

.ts-product__sku {
  margin: 0 0 18px;
  font-size: 1.0833rem;
  color: var(--ts-muted);
}

.ts-product__sku span {
  color: var(--ts-text-2);
}

/* WOO'S "CLEAR" LINK IS HIDDEN, AND THAT FOLLOWS FROM THE DEFAULT.
   ts_variation_defaults() in inc/swatches.php now opens every variable
   product on a real, purchasable variation, so the only thing
   `.reset_variations` can still do is put the form back into the state
   that fix removed — no colour chosen and Add to cart disabled. It is
   printed by WooCommerce inside the variations table and there is no
   filter for it, so it goes here. Choosing a different colour is what
   the swatches are for. */
/* `form.variations_form` and NOT Woo's own `.woocommerce div.product
   form.cart` — the product wrapper in woocommerce/single-product.php is
   a <section class="product">, so `div.product` matches nothing here.
   `!important` because add-to-cart-variation.js writes `visibility`
   straight onto the element. */
form.variations_form .reset_variations {
  display: none !important;
}

/* The information stack under the buy block — what it is, what
   delivery costs, what happens if it is wrong.

   THIS REPLACED TWO THINGS AT ONCE: a bordered "Delivery & payment"
   card that sat under the SKU, and a full-width description band below
   both columns. Both are gone; see template-parts/product-details.php.

   Rows are real <details>/<summary>, so the open state, the keyboard
   and Ctrl+F-opens-a-closed-row all belong to the browser. base.css
   already drops the disclosure triangle for every summary on the site,
   which is why there is no `list-style` here. */
.ts-pinfo {
  width: 100%;
  max-width: 78rem;
  margin: 6px 0 0;
  border-top: 1px solid var(--ts-line);
}

.ts-pinfo__row {
  border-bottom: 1px solid var(--ts-line);
}

.ts-pinfo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 2px;
  cursor: pointer;
  color: var(--ts-text);
  transition: color 0.18s var(--ts-ease);
}

.ts-pinfo__head:hover {
  color: var(--ts-brand);
}

.ts-pinfo__head:focus-visible {
  outline: 2px solid var(--ts-brand);
  outline-offset: 2px;
  border-radius: var(--ts-r-sm);
}

.ts-pinfo__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ts-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-pinfo__title {
  flex: 1 1 auto;
  font-size: 1.1667rem;
  font-weight: 600;
}

/* THE PLUS IS TWO BARS AND THE VERTICAL ONE FOLDS AWAY. Drawn rather
   than set as a character so it lines up with the row's optical centre
   at any font size, and so open/closed is one transition rather than a
   swap between two glyphs. */
.ts-pinfo__sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.ts-pinfo__sign::before,
.ts-pinfo__sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s var(--ts-ease), opacity 0.22s var(--ts-ease);
}

.ts-pinfo__sign::after {
  transform: rotate(90deg);
}

.ts-pinfo__row[open] .ts-pinfo__sign::after {
  transform: rotate(0deg);
  opacity: 0;
}

.ts-pinfo__body {
  padding: 0 2px 18px;
  font-size: 1.0833rem;
  line-height: 1.65;
  color: var(--ts-text-2);
}

/* The rates and the small print under them are secondary to the row
   they are in; the description is not. */
.ts-pinfo__rates li,
.ts-pinfo__note {
  color: var(--ts-muted);
}

.ts-pinfo__rte > :first-child {
  margin-top: 0;
}

.ts-pinfo__rte > :last-child {
  margin-bottom: 0;
}

.ts-pinfo__rte img {
  height: auto;
  border-radius: var(--ts-r-sm);
}

.ts-pinfo__rte table {
  width: 100%;
  border-collapse: collapse;
}

/* The delivery rates, read off the shipping zones by
   ts_shipping_rate_summary() so they cannot disagree with what the
   checkout charges. */
.ts-pinfo__rates {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-pinfo__rates li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--ts-line);
}

.ts-pinfo__rates li:last-child {
  border-bottom: 0;
}

.ts-pinfo__rates b {
  color: var(--ts-text);
  white-space: nowrap;
}

.ts-pinfo__note {
  margin: 10px 0 0;
}

.ts-pinfo__note:first-child {
  margin-top: 0;
}

.ts-pinfo__link {
  color: var(--ts-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Related products, rendered by Woo's own loop into the ported grid. */
.related.products > h2,
.up-sells > h2 {
  margin: 40px 0 18px;
  font-size: 1.9167rem;
  color: var(--ts-text);
}

/* ---------- 5. Notices --------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--ts-line);
  border-left-width: 3px;
  border-radius: 12px;
  background: var(--ts-surface-2);
  font-size: 1.1667rem;
  list-style: none;
}

.woocommerce-message {
  border-left-color: var(--ts-mint);
}

.woocommerce-info {
  border-left-color: var(--ts-brand);
}

.woocommerce-error {
  border-left-color: #c62828;
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  color: var(--ts-brand);
  text-decoration: underline;
}

/* ---------- 6. Cart page ------------------------------------- */
.woocommerce-cart-form {
  margin-bottom: 28px;
}

.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.1667rem;
}

.shop_table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--ts-muted);
  border-bottom: 1px solid var(--ts-line);
  font-size: 1.0833rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shop_table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ts-line);
  vertical-align: middle;
}

.shop_table .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--ts-plate);
}

.shop_table .product-name a {
  color: var(--ts-text);
  text-decoration: none;
  font-weight: 500;
}

.shop_table .product-name a:hover {
  color: var(--ts-brand);
}

.shop_table .product-remove a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ts-row-hover);
  color: var(--ts-muted);
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1;
}

.shop_table .product-remove a:hover {
  background: var(--ts-brand);
  color: var(--ts-on-brand);
}

.cart_totals {
  max-width: 420px;
  margin-left: auto;
  padding: 18px;
  background: var(--ts-surface-2);
  border: 1px solid var(--ts-line);
  border-radius: 18px;
}

.cart_totals h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

.cart_totals .order-total .amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ts-brand);
}

.wc-proceed-to-checkout {
  margin-top: 14px;
}

/* Every button Woo prints that is not the add-to-cart one. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--ts-brand);
  border-radius: var(--buttons-radius, 10px);
  background: var(--ts-brand);
  color: var(--ts-on-brand);
  font: inherit;
  font-size: 1.1667rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--ts-btn-hover);
  border-color: var(--ts-btn-hover);
}

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
}

.woocommerce button.button[name='update_cart'],
.woocommerce button.button:disabled {
  background: var(--ts-surface);
  color: var(--ts-brand);
}

/* ---------- 7. Checkout -------------------------------------- */
.woocommerce-checkout .col2-set {
  display: grid;
  gap: 24px;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  margin: 0 0 14px;
  font-size: 1.5rem;
  color: var(--ts-text);
}

.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 14px;
}

.woocommerce-checkout label {
  font-size: 1.0833rem;
  font-weight: 600;
  color: var(--ts-text-2);
}

.woocommerce-checkout .required {
  color: var(--ts-brand);
  text-decoration: none;
}

.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-checkout select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  background-color: var(--ts-select-bg);
  color: var(--ts-select-text);
  border: 1px solid var(--ts-line-2);
  border-radius: var(--inputs-radius, 10px);
  font: inherit;
  font-size: 1.1667rem;
}

.woocommerce-checkout textarea {
  min-height: 90px;
  resize: vertical;
}

/* select2 is Woo's own dropdown replacement and it draws its own box;
   without these two the province field is the one control on the page
   that does not match. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 26px;
  padding-left: 0;
  color: var(--ts-select-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 10px;
  right: 8px;
}

#order_review,
.woocommerce-checkout-review-order {
  padding: 18px;
  background: var(--ts-surface-2);
  border: 1px solid var(--ts-line);
  border-radius: 18px;
}

.woocommerce-checkout-payment {
  margin-top: 14px;
}

.woocommerce-checkout-payment ul.payment_methods {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ts-line);
}

.woocommerce-checkout-payment li.wc_payment_method {
  padding: 10px 0;
}

.woocommerce-checkout-payment .payment_box {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: 12px;
  font-size: 1.0833rem;
  color: var(--ts-muted);
}

.woocommerce-checkout-payment .payment_box p {
  margin: 0;
}

#place_order {
  width: 100%;
  min-height: 52px;
  font-size: 1.25rem;
}

.woocommerce-terms-and-conditions-wrapper {
  margin: 12px 0;
  font-size: 1.0833rem;
  color: var(--ts-muted);
}

/* ---------- 8. Pagination + sorting bar ---------------------- */
.ts-facetbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
}

.ts-facetbar .woocommerce-result-count {
  margin: 0;
  font-size: 1.0833rem;
  color: var(--ts-muted);
  order: -1;
}

.ts-facetbar .woocommerce-ordering select {
  min-height: 40px;
  padding: 0 36px 0 14px;
  background-color: var(--ts-select-bg);
  background-image: var(--ts-caret);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  color: var(--ts-select-text);
  border: 1px solid var(--ts-line-2);
  border-radius: 999px;
  font: inherit;
  font-size: 1.0833rem;
  appearance: none;
}

.woocommerce-pagination ul,
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.woocommerce-pagination li {
  border: 0;
}

.woocommerce-pagination .page-numbers,
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ts-line);
  border-radius: 10px;
  background: var(--ts-surface);
  color: var(--ts-text-2);
  text-decoration: none;
  font-size: 1.1667rem;
}

.woocommerce-pagination .page-numbers.current,
.pagination .page-numbers.current {
  background: var(--ts-brand);
  border-color: var(--ts-brand);
  color: var(--ts-on-brand);
}

.woocommerce-pagination .page-numbers:hover:not(.current),
.pagination .page-numbers:hover:not(.current) {
  border-color: var(--ts-line-2);
  color: var(--ts-brand);
}

/* ---------- 9. Account pages --------------------------------- */
/* THE ACCOUNT PAGE HAS ITS OWN STYLESHEET NOW and this section is
   deliberately empty. `.woocommerce-MyAccount-navigation` was a wrapping
   row of chips here, which is the wrong shape beside a content column on
   a desktop and a three-line block on a phone; it is a scrolling chip row
   under 900px and a sidebar above it in assets/css/ts-account.css §7.

   Nothing was left behind as a base layer on purpose. That file is queued
   after ts-fixes.css on account pages, so a rule kept here would only ever
   be a second opinion the cascade ignores — or, worse, one it does not. */

/* ---------- 10. Responsive ----------------------------------- */
@media screen and (min-width: 750px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 990px) {
  .ts-page {
    padding: 36px 0 72px;
  }

  /* THE CHECKOUT GRID USED TO LIVE HERE AND IT DOES NOT ANY MORE.
     It was written against WooCommerce's own form-checkout.php, where
     `.col2-set`, `#order_review_heading` and `#order_review` are direct
     children of `form.checkout` and could be placed by `>` selectors.
     woocommerce/checkout/form-checkout.php now renders
     `.ts-checkout__main` and `.ts-checkout__side` instead, so those
     child selectors match nothing — but the `display: grid` on the form
     still applied, and at (0,2,1) it outranked `.ts-checkout` in
     ts-fixes.css. The result was a 1.15fr/0.85fr split the new layout
     never asked for: on the cart page the order summary came out 173px
     wide with "Proceed to checkout" wrapped onto two lines.

     The layout is now ts-fixes.css §5 (cart) and §6 (checkout). Leaving
     a dead rule here that still wins ties is worse than leaving nothing,
     so it is gone rather than commented out. */
}

@media screen and (max-width: 749px) {
  .ts-cart-notification {
    top: auto;
    bottom: 0;
    transform: translateY(8px);
  }

  .ts-cart-notification .cart-notification-wrapper {
    justify-content: center;
    padding: 0 12px 12px;
  }

  .ts-cart-notification .cart-notification {
    width: 100%;
  }

  /* The cart table has five columns and a phone has room for two, so it
     becomes a stack of rows with the header cell as the label. */
  .shop_table thead {
    display: none;
  }

  .shop_table,
  .shop_table tbody,
  .shop_table tr,
  .shop_table td {
    display: block;
    width: 100%;
  }

  .shop_table tr {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px solid var(--ts-line);
  }

  .shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
  }

  .shop_table td::before {
    content: attr(data-title);
    font-size: 1.0833rem;
    color: var(--ts-muted);
  }

  .shop_table td.product-remove::before,
  .shop_table td.product-thumbnail::before {
    content: none;
  }

  .cart_totals {
    max-width: 100%;
    margin-left: 0;
  }

  .ts-facetbar {
    justify-content: flex-start;
  }

  .ts-facetbar .woocommerce-ordering,
  .ts-facetbar .woocommerce-ordering select {
    width: 100%;
  }
}

/* ---------- 11. Contact form honeypot ------------------------
   Off-screen rather than `display: none` or `hidden`. A field the
   browser will not render is a field some bots know to skip, and the
   trap only works if they fill it in. `aria-hidden` on the wrapper and
   `tabindex="-1"` on the input keep it away from screen readers and
   the tab order, so nobody real ever meets it. */
.ts-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}