/*
 * WooCommerce styles for the SOLOS design.
 * Loaded after WooCommerce's own stylesheets; selectors match theirs so these win.
 * Global controls first; page-specific sections follow.
 */

/*
 * Colour variables the copied SOLOS templates and their Tailwind classes refer
 * to (previously printed by the eflow-core customizer from child-theme settings).
 */
:root {
  --accent-color: #ff7800;
  --accent-color-hover: #ff7800;
  --success-color: #ff7800;
  --error-color: #dd3333;
  --info-color: #dd9933;
  --link-color: #ffffff;
  --navbar-text-color: #ffffff;
}

/*
 * The copied SOLOS templates expect Tailwind's border reset (solid style, zero
 * width). Applied only inside the filter sidebar and the product page, with
 * zero specificity so any other rule wins.
 */
:where(#secondary, .single-product #main, .woocommerce-cart .oxa-page, .woocommerce-checkout .oxa-page, .woocommerce-account .oxa-page) *,
:where(#secondary, .single-product #main, .woocommerce-cart .oxa-page, .woocommerce-checkout .oxa-page, .woocommerce-account .oxa-page) ::before,
:where(#secondary, .single-product #main, .woocommerce-cart .oxa-page, .woocommerce-checkout .oxa-page, .woocommerce-account .oxa-page) ::after {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

/* SOLOS parent-theme `img { width: auto }`: images ignore their width attribute,
   so a max-height (cart thumbnail: max-h-[200px]) scales them in proportion. */
:where(.woocommerce-cart .oxa-page, .woocommerce-checkout .oxa-page, .woocommerce-account .oxa-page) img { width: auto; }

/* Buttons: orange, square, dark text. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--oxa-radius);
  background: var(--oxa-primary);
  color: var(--oxa-on-primary);
  font-family: var(--oxa-font-sans);
  font-weight: 500;
  line-height: 1;
}
/* In SOLOS the base button border loses to the `border-none` utility (product Buy now / cart buttons). */
.woocommerce :is(a, button, input).button.border-none { border-style: none; }
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--oxa-primary);
  color: var(--oxa-on-primary);
  opacity: .9;
}
/* Live: the product Buy now / cart buttons only change colours on hover, no opacity fade. */
.woocommerce :is(a, button, input).button.border-none:hover { opacity: 1; }

/* Form fields: white, square, grey border (eflow-core/style.css .input-text). */
.woocommerce .input-text:not(textarea),
.woocommerce input[type=email],
.woocommerce input[type=number],
.woocommerce input[type=password],
.woocommerce input[type=search],
.woocommerce input[type=tel],
.woocommerce input[type=text],
.woocommerce input[type=url],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
  padding: .5rem .75rem;
  border: 1px solid rgb(209 213 219);
  border-radius: var(--oxa-radius);
  background: #ffffff;
  color: #43454b;
  font-size: 1rem;
  line-height: 1.5rem;
}
/* SOLOS parent-theme textarea: wider left padding, body line-height on mobile. */
.woocommerce form .form-row textarea { padding-left: .875em; line-height: 1.618; }
@media (min-width: 640px) {
  .woocommerce form .form-row textarea { font-size: .875rem; line-height: 1.25rem; }
}
.woocommerce .input-text:focus,
.woocommerce input:focus,
.woocommerce select:focus { border-color: var(--accent-color); outline: 2px solid transparent; }

@media (min-width: 640px) {
  .woocommerce .input-text:not(textarea),
  .woocommerce input[type=email],
  .woocommerce input[type=password],
  .woocommerce input[type=tel],
  .woocommerce input[type=text] { font-size: .875rem; line-height: 1.25rem; }
}

/* SOLOS hides these everywhere (eflow-core/style.css). */
a.added_to_cart.wc-forward,
button[name=update_cart] { display: none; }

/* Checkboxes and radios (Tailwind forms, as in eflow-core/style.css). */
.woocommerce input[type=checkbox],
.woocommerce input[type=radio] {
  display: inline-block; flex-shrink: 0; vertical-align: middle;
  width: 1rem; height: 1rem;
  padding: 0;
  border: 1px solid #6b7280;
  background-color: #ffffff;
  background-origin: border-box;
  color: #2563eb;
  appearance: none;
  user-select: none;
  print-color-adjust: exact;
}
/* SOLOS checkboxes: light grey border, orange when ticked (eflow-core input[type=checkbox]). */
.woocommerce input[type=checkbox] { border-radius: 0; border-color: rgb(209 213 219); color: var(--oxa-accent); }
.woocommerce input[type=radio] { border-radius: 100%; }
.woocommerce input[type=checkbox]:checked,
.woocommerce input[type=radio]:checked {
  border-color: transparent;
  background-color: currentColor;
  background-position: 50%; background-repeat: no-repeat; background-size: 100% 100%;
}
.woocommerce input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
}
.woocommerce input[type=radio]:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}
/* Templates hide some inputs with Tailwind's `hidden` and draw their own box (payment methods). */
.woocommerce input[type=checkbox].hidden,
.woocommerce input[type=radio].hidden { display: none; }

/* Payment method description: SOLOS shows it (Alpine x-show) for the selected
   method only. Without Alpine the box keeps x-cloak; show it from the radio state.
   Display only: the payment template and gateway code are unchanged. */
#payment li:has(> label input[name="payment_method"]:checked) > [x-cloak] { display: block !important; }
/* Card logos on a white badge (child-theme dist/style.css). */
#payment .payment_methods li img { background: #ffffff !important; border-radius: 3px; }

/* Notices. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-top: 0;
  background: var(--oxa-info);
  color: #ffffff;
}
.woocommerce-info::before,
.woocommerce-message::before { color: #ffffff; }
.woocommerce-info a, .woocommerce-message a { color: #ffffff; }
.woocommerce-error { background: var(--oxa-error); }
/* "No products found" box on the shop (live: 8px 12px padding, 12px below, capped at 1280px). */
.woocommerce-no-products-found .woocommerce-info { max-width: 1280px; margin: 0 0 12px; padding: 8px 12px; }

/* ---------------------------------------------------------------------------
 * Shop (product archives) — woocommerce/archive-product.php
 * WooCommerce's own CSS is switched off (inc/solos/base/setup.php), as before.
 * ------------------------------------------------------------------------- */

/* SOLOS <main id="main" class="container mx-auto site-main"> with 20px padding.
   Tailwind's .container caps the width by window width and centres it.
   Measured on live at 700, 800, 1100, 1366, 1440, 1536 and 1920px: capped at
   640 / 768 / 1024 / 1280 / 1536px from those widths up. */
.woocommerce-shop #main,
.tax-product_cat #main,
.tax-product_tag #main,
.post-type-archive-product #main,
.single-product #main, .error404 #main, .search #main {
  width: 100%;
  margin-inline: auto;
  padding: 20px;
}
@media (min-width: 640px)  { .woocommerce-shop #main, .tax-product_cat #main, .tax-product_tag #main, .post-type-archive-product #main, .single-product #main, .error404 #main, .search #main { max-width: 640px; } }
@media (min-width: 768px)  { .woocommerce-shop #main, .tax-product_cat #main, .tax-product_tag #main, .post-type-archive-product #main, .single-product #main, .error404 #main, .search #main { max-width: 768px; } }
@media (min-width: 1024px) { .woocommerce-shop #main, .tax-product_cat #main, .tax-product_tag #main, .post-type-archive-product #main, .single-product #main, .error404 #main, .search #main { max-width: 1024px; } }
@media (min-width: 1280px) { .woocommerce-shop #main, .tax-product_cat #main, .tax-product_tag #main, .post-type-archive-product #main, .single-product #main, .error404 #main, .search #main { max-width: 1280px; } }
@media (min-width: 1536px) { .woocommerce-shop #main, .tax-product_cat #main, .tax-product_tag #main, .post-type-archive-product #main, .single-product #main, .error404 #main, .search #main { max-width: 1536px; } }

.oxa-shop { display: flex; justify-content: center; }
.oxa-shop__main { display: flex; flex-direction: column; width: 100%; min-width: 0; }

/* Sidebar column (#secondary from sidebar.php; inner markup from filters.js). */
.oxa-shop #secondary { flex: 0 0 auto; align-self: flex-start; }
#secondary .bg-accent { background-color: var(--oxa-accent); }
/* The filter panel scrolls vertically only. Its price-slider handle ends up to 0.5px outside the panel (the same on
   live), which Windows scrollbars turn into a horizontal scrollbar under the "Filtro" button when the panel is
   fractionally narrow. Live shows none there, so sideways overflow is clipped. */
#secondary .overflow-y-auto { overflow-x: hidden; }
#secondary button:disabled { opacity: .5; color: #000000; cursor: default; }
/* SOLOS parent-theme base button (eflow-core/style.css), under the Tailwind
   utilities (zero specificity) as it was there. */
:where(#secondary, #sm_options) button {
  padding: .5rem 1rem;
  border: 1px solid transparent;
  font-weight: 500;
  line-height: 1;
}
/* Classes filters.js adds at runtime (term/selection/hover states), missing from the
   generated shop-filters.css. Values from the child-theme's compiled CSS. */
:where(#secondary) .pl-2 { padding-left: .5rem; }
:where(#secondary) .\!opacity-50 { opacity: .5 !important; }
:where(#secondary) .bg-gray-200 { background-color: rgb(229 231 235); }
:where(#secondary) .border-\[\#d51e52\] { border-color: rgb(213 30 82); }
:where(#secondary) .cursor-default { cursor: default; }
:where(#secondary) .flex-wrap { flex-wrap: wrap; }
:where(#secondary) .h-\[0\.05rem\] { height: .05rem; }
:where(#secondary) .h-\[0\.15rem\] { height: .15rem; }
:where(#secondary) .hover\:border-accent:hover { border-color: var(--accent-color); }
:where(#secondary) .text-\[\#d51e52\] { color: rgb(213 30 82); }

/* Toolbar: selected-filter chips + sorting. */
.oxa-shop__toolbar { display: none; }
.oxa-shop__chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 1rem; line-height: 1.5rem; }
.oxa-shop__chip-group { display: flex; align-items: flex-end; gap: 8px; }
.oxa-shop__chip-title { margin-right: 8px; color: var(--oxa-accent); font-size: 18px; font-weight: 600; line-height: 1.75rem; text-transform: capitalize; }
/* One selected term: name + 16px X icon (SOLOS: span + svg.w-4.h-4.ml-0.5, gap-2). */
.oxa-shop__chip { display: flex; align-items: center; gap: 8px; }
.oxa-shop__chip-remove { display: block; width: 16px; height: 16px; margin-left: 2px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.oxa-shop__chip-remove svg { display: block; width: 16px; height: 16px; }

.woocommerce-ordering { margin: 0; }
/* SOLOS: as wide as the longest option, at most 250px (eflow-core dist/woocommerce.css). */
.woocommerce-ordering select {
  width: auto; max-width: 250px; height: 42px; line-height: 1.5rem;
  padding: 8px 40px 8px 12px;
  border: 1px solid #6b7280;
  border-radius: 0;
  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right 8px center / 24px no-repeat;
  color: #333333;
  font-size: 16px;
  appearance: none;
}

/* Mobile bar: Filter (n) + sorting, floating at the bottom. */
.oxa-shop__mobile-bar {
  position: fixed; bottom: 0; left: 0; z-index: 50;
  display: flex; justify-content: center; align-items: stretch; gap: 8px;
  width: 100vw;
  padding: 12px 0;
}
.oxa-shop__filter-toggle {
  padding: 8px 16px;
  border: 1px solid transparent;
  background: var(--oxa-accent);
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
/* SOLOS: `#sm_options ... select { border: #fff }` drops the border (40px tall), black text. */
.oxa-shop__mobile-bar .woocommerce-ordering select { width: 120px; height: 40px; border: 0; color: #000000; }
body.oxa-no-scroll { overflow: hidden; }

/* Product grid and cards (SOLOS: flex rows, items spread with space-between). */
ul.products {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 5px; /* SOLOS ul.products computed gap on live: 5px (adds 5px between rows) */
  margin: 0; padding: 0;
  list-style: none;
}
ul.products li.product { position: relative; width: 48.57%; margin: 0 0 16px; }
/* 404 grid on phones (shortcode columns="4"): 164px cards in the 350px row on live. */
ul.products.columns-4 li.product { width: calc(50% - 11px); }
ul.products li.product a { display: block; color: var(--oxa-text); }
.oxa-product-card__image { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; text-align: center; }
.oxa-product-card__name { margin: 0 0 1.41575em; font-size: 16px; font-weight: 500; }
/* SOLOS: the price paragraph inherits the card font (16px on phones, 14px from 768px), 1.41575em below. */
.oxa-product-card__price { margin: 0 0 1.41575em; }
.oxa-product-card__price .price { display: block; font-size: 14px; font-weight: 300; line-height: 1.25rem; }
/* SOLOS .price (eflow-core): taller line from 640px. */
@media (min-width: 640px) {
  .oxa-product-card__price .price { line-height: 1.75rem; }
}
.oxa-product-card__price .price .woocommerce-Price-amount { color: #adadad; }
/* Sale: old price grey without strike-through, new price orange (child-theme/dist/style.css). */
del { text-decoration: none; }
del .woocommerce-Price-amount bdi { color: #666666; }
ins { background: transparent; text-decoration: none; font-weight: 500; }
ins .woocommerce-Price-amount bdi { color: var(--oxa-accent); }

/* Infinite scroll (assets/solos/shop.js): page links and status stay hidden, as before. */
.woocommerce-pagination,
#page-loading-status { display: none; }
#loadPreviousPage {
  display: block; margin: 12px auto;
  padding: 8px 16px; border: 0;
  background: var(--oxa-accent); color: #000000;
  cursor: pointer;
}
#loadPreviousPageCon.loading #loadPreviousPage { opacity: .5; }

@media (min-width: 768px) {
  /* Live: 178.25px from 768px (25% of the 713px row at 768, still 178px at 820), 22.66% from 1024px. */
  .oxa-shop #secondary { width: 178.25px; margin: 0 22.65px 41.89px 0; }
  .oxa-shop__toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin: 24px 0 8px;
  }
  .oxa-shop__toolbar .woocommerce-ordering { margin-left: auto; }
  .oxa-shop__mobile-bar { display: none; }
  /* Live: one third of the row minus 13.2px (measured at 1024-1920px: 229, 295, 299, 361, 364.6px). */
  ul.products li.product { width: calc(33.3333% - 13.2px); font-size: 14px; }
  /* 404 page grid (shortcode columns="4"): 295px cards in the 1240px row on live = (100% - 3 x 19.8px) / 4. */
  ul.products.columns-4 li.product { width: calc(25% - 14.85px); }
  .oxa-product-card__name { font-size: 14px; }
}
@media (min-width: 1024px) {
  /* Live sidebar width from 1024px: 0.230762 x (row width - the 22.652px margin). Measured to 0.1px at row widths
     984, 1240, 1480.8 and 1496px (221.85, 280.93, 336.5, 340px). A plain 22.66% is up to 1.5px narrower, which made
     the filter panel's content overflow and show a horizontal scrollbar under "Filtro" with Windows scrollbars. */
  .oxa-shop #secondary { width: calc((100% - 22.652px) * 0.230762); margin-right: 22.652px; }
}

/* ---------------------------------------------------------------------------
 * Single product — copied SOLOS templates (woocommerce/single-product/).
 * Tailwind classes in those templates: assets/css/product-utilities.css.
 * Values below are SOLOS's own rules (child-theme/dist/style.css,
 * eflow-core/style.css, eflow-core/dist/woocommerce.css).
 * ------------------------------------------------------------------------- */

/* Same #main container as the shop (see there): Tailwind .container, capped by window width. */
[x-cloak] { display: none !important; }

.single-product div.product { position: relative; }
.single-product div.product .woocommerce-product-gallery { position: relative; margin-bottom: 0; }
.single-product div.product .summary {
  display: flex; flex-direction: column; justify-content: space-between;
  margin: 0; padding: 0;
}
/* Line-heights come from h1 (1.214) and .price (product-utilities.css: 1.25rem, 1.75rem from 640px), as in SOLOS. */
.single-product div.product .product_title { margin-bottom: 0; font-size: 1.41575em; font-weight: 300; }
.single-product div.product p.price { margin: 16px 0 0; font-size: 1.41575em; }
.single-product .summary span.woocommerce-Price-amount.amount { color: #8a8a8a; font-size: 24px; font-weight: 400; letter-spacing: 1px; }
.single-product .product-description p { margin: 0; }
.single-product .product-info p { margin: 0 0 1.415em; }
.single-product .product-color, .single-product .product-color > span,
.single-product .product-categories, .single-product .product-info a { color: #ffffff; }
.single-product div.product form.cart { margin: 0; padding: 0; }
/* No forced display: live's "Blini tani" button is display:block, so on phones its text breaks inside the word
   (4 lines in the 88px button of variable products). The icon button gets its flex from the `flex` utility class. */
.single-product div.product form.cart .button { font-weight: 500; line-height: 1; color: #000000; }
.woocommerce-variation-price { display: none; }

/* Gallery: one image, or a slider for several (behaviour in assets/js/main.js). */
#img_item_alone { object-fit: cover; object-position: top; }
#galleryWrapper #parentGallery img { height: 700px; object-fit: cover; }
#productGallery { position: relative; overflow: hidden; }
#productGallery .swiper-wrapper { display: flex; transition: transform .35s ease; }
#productGallery .swiper-slide { flex: 0 0 100%; cursor: zoom-in; }
#productGallery .swiper-wrapper .swiper-slide img { height: 700px; object-fit: cover; }
#productGallery .swiper-lazy-preloader { display: none; }
#productGallery .swiper-button-prev,
#productGallery .swiper-button-next {
  position: absolute; top: 50%; z-index: 2;
  width: 44px; height: 44px;
  margin-top: -22px;
  color: var(--oxa-accent);
  cursor: pointer;
}
#productGallery .swiper-button-prev { left: 10px; }
#productGallery .swiper-button-next { right: 10px; }
#productGallery .swiper-button-prev::after,
#productGallery .swiper-button-next::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  border-top: 3px solid currentColor; border-left: 3px solid currentColor;
}
#productGallery .swiper-button-prev::after { transform: translate(-30%, -50%) rotate(-45deg); }
#productGallery .swiper-button-next::after { transform: translate(-70%, -50%) rotate(135deg); }

/* Variation buttons (drawn by the "variation-buttons" behaviour). */
.variable-items-wrapper { display: flex; flex-wrap: wrap; }
.variable-items-wrapper .variable-item {
  display: flex; align-items: center; justify-content: center;
  min-width: 50px; height: 40px;
  margin: 0 5px 5px 0; padding: 0 .5rem;
  border: 1px solid rgb(209 213 219);
  border-radius: 0;
}
.variable-items-wrapper .variable-item:hover { border-color: var(--accent-color); }
.variable-items-wrapper .variable-item:not(.disabled) { cursor: pointer; }
.variable-items-wrapper .variable-item.disabled { position: relative; background-color: #ffffff; opacity: .3; }
.variable-items-wrapper .variable-item.disabled::before,
.variable-items-wrapper .variable-item.disabled::after {
  content: ""; position: absolute;
  width: 2px; height: 30px;
  background-color: red;
}
.variable-items-wrapper .variable-item.disabled::before { transform: rotate(45deg); transform-origin: left; }
.variable-items-wrapper .variable-item.disabled::after { transform: rotate(-45deg); }
.variable-items-wrapper .variable-item.selected { background-color: var(--accent-color); color: #ffffff; }
.variable-items-wrapper .variable-item:last-child { margin-right: 0; }

/* Up-sells ("TË NGJASHME"). */
.up-sells { margin-top: 3rem; }
.up-sells h2 { margin-bottom: 1rem; font-size: 1.2rem; }
.upsell-products ul.products li.product { width: 48.43%; }

@media (max-width: 640px) {
  #parentGallery { height: 450px !important; }
  #parentGallery img { max-height: 450px !important; width: 100% !important; object-fit: contain !important; }
  #productGallery { height: 450px !important; }
}

@media (max-width: 768px) {
  .up-sells { padding: 0 1rem; }
}

@media (min-width: 768px) {
  .single-product div.product { display: grid; grid-template-columns: 4fr 5fr; }
  .single-product div.product .woocommerce-product-gallery { overflow: hidden; }
  .single-product div.product .up-sells { grid-column: span 2 / span 2; }
  .single-product div.product .product_title { font-size: 1.618em; }
  .upsell-products ul.products li.product { flex: 1 0 calc(25% - 14.8653px); width: auto; max-width: calc(25% - 14.8653px); font-size: 14px; }
}

/* ---------------------------------------------------------------------------
 * Cart, checkout, account — copied SOLOS templates (woocommerce/cart, checkout,
 * myaccount, global). Tailwind classes: assets/css/pages-utilities.css.
 * SOLOS page wrapper: article.flex.flex-col.gap-3 > .entry-content { margin: 0 auto }
 * (centred and shrink-to-fit above 1024px). OXA's page.php has no .entry-content,
 * so the page content itself gets that behaviour.
 * ------------------------------------------------------------------------- */

.woocommerce-cart .oxa-page,
.woocommerce-checkout .oxa-page,
.woocommerce-account .oxa-page { display: flex; flex-direction: column; gap: 12px; color: var(--oxa-text); }

@media (min-width: 1025px) {
  .woocommerce-cart .oxa-page > *,
  .woocommerce-checkout .oxa-page > *,
  .woocommerce-account .oxa-page > * { max-width: var(--oxa-wide-width); margin-inline: auto; }
}

.wc-proceed-to-checkout a.button,
.woocommerce .wc-proceed-to-checkout a.button { font-weight: 500; }

/* Prices and required markers. */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--oxa-text); }
.woocommerce form .form-row .required { color: var(--oxa-error); }

/* Shipping method list (cart totals and checkout order review): solos.shop has no indent and 10px above and below. */
.woocommerce-shipping-methods { margin: 0; padding: 10px 0; list-style: none; }

/* Search results (search.php): solos.shop keeps the storefront colours here, which are very dark on the black page
   (heading #131315, text #43454b), and nests a second container (px-5) per result. */
.search #main { color: #43454b; }
.search .page-title { color: #131315; }
.search #main > article.container { width: 100%; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px)  { .search #main > article.container { max-width: 640px; } }
@media (min-width: 768px)  { .search #main > article.container { max-width: 768px; } }
@media (min-width: 1024px) { .search #main > article.container { max-width: 1024px; } }
@media (min-width: 1280px) { .search #main > article.container { max-width: 1280px; } }
@media (min-width: 1536px) { .search #main > article.container { max-width: 1536px; } }

/* solos.shop hides the pagination links of every list (eflow-core/style.css and child-theme/dist/style.css). */
.pagination, .woocommerce-pagination { height: 0; position: absolute; visibility: hidden; width: 0; }
.woocommerce-pagination { display: none !important; }

/* Register form on my-account (fields added by the integrohu plugin): on solos.shop the dropdown is 38px high with the
   chevron on the right and white text on its white box, and the date field has no native height. */
.woocommerce form.register select,
.woocommerce form.woocommerce-form-register select {
  appearance: none;
  padding: 8px 48px 8px 12px;
  color: #ffffff;
  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat calc(100% - 8px) 50% / 21px 21px;
}
.woocommerce form.register input[type=date],
.woocommerce form.woocommerce-form-register input[type=date] { appearance: none; height: 42px; }
/* From 640px the fields use the smaller text (same breakpoint as the inputs above). */
@media (min-width: 640px) {
  .woocommerce form.register select,
  .woocommerce form.woocommerce-form-register select { font-size: .875rem; line-height: 1.25rem; }
  .woocommerce form.register input[type=date],
  .woocommerce form.woocommerce-form-register input[type=date] { height: 38px; }
}

/* Search form inside the page (empty search results): same field and button look as solos.shop. */
main .search-form .search-field {
  padding: 8px 12px;
  border: 1px solid rgb(209 213 219);
  border-radius: 0;
  background: #ffffff;
  color: #43454b;
  font-size: .875rem;
  line-height: 1.25rem;
  appearance: none;
}
main .search-form .search-submit {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--oxa-primary);
  color: var(--oxa-on-primary);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

/* Checkout order review: the product name column is 45% wide and breaks long words (child-theme dist/woocommerce.css). */
table.woocommerce-checkout-review-order-table .product-name { overflow-wrap: anywhere; width: 45%; word-break: break-word; }

/* solos.shop resets form controls to margin 0 and makes textareas blocks (Tailwind base), so checkbox rows and the order notes sit tighter. */
.woocommerce input[type=checkbox], .woocommerce input[type=radio] { margin: 0 .3342em 0 0; }
.woocommerce textarea { display: block; }

/* ---------------------------------------------------------------------------
 * Design refresh (2026-10-27), small changes with Marshall's shop as the reference:
 * tighter card text, calmer product page text, softer hovers. Colours and layout are unchanged.
 * To go back to the live-identical look, delete everything from this comment to the end of the file.
 * ------------------------------------------------------------------------- */
/* 1. Product cards: name and price sit close to the picture and each other, calmer row spacing. */
ul.products li.product { margin-bottom: 28px; }
.oxa-product-card__name { margin: 12px 0 4px; font-size: 14px; font-weight: 500; line-height: 1.4; transition: color .15s ease; }
.oxa-product-card__price { margin: 0; }
.oxa-product-card__price .price { color: #ffffff; font-size: 14px; font-weight: 400; }
/* 2. Hover: the picture dims a little and the name turns orange. */
.oxa-product-card__image { transition: opacity .2s ease; }
ul.products li.product a:hover .oxa-product-card__image { opacity: .9; }
ul.products li.product a:hover .oxa-product-card__name { color: var(--oxa-accent); }
/* 3. Product page: calmer description and a compact, muted details list. */
.single-product .summary .product-description { font-size: 16px; line-height: 1.7; max-width: 62ch; color: #e8e8e8; }
.single-product .product-info { margin-bottom: 24px; }
.single-product .product-info p { margin: 0 0 6px; font-size: 14px; color: #b5b5b5; }
.single-product .product-info p span { color: #ffffff; }
/* 4. Buttons: smooth hover colour change. */
.button, button.button, a.button { transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
/* 5. Pictures that fill the tile: card-crop.js wraps a picture in this frame when its file has black bars. */
.oxa-product-card__frame { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.oxa-product-card__frame .oxa-product-card__image { display: block; width: 100%; height: 100%; }