/* ══════════════════════════════════════════════════════════
   FrediDesk Salon Suite — eShop (WooCommerce) styling
   Reskins WooCommerce's default markup using the theme's own
   CSS variables (--warm-white, --accent, --gold, --font-display...)
   so shop/product/cart/checkout pages look native to the theme
   instead of the raw WooCommerce default look.
   Loaded ONLY when eShop is enabled (see fredi_eshop_active()).
   ══════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.woocommerce, .woocommerce-page {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--warm-white);
  padding: 32px 24px 50px;
  max-width: 1240px;
  margin: 0 auto;
  overflow-x: hidden; /* safety net against any stray wide element on small screens */
}
.woocommerce .page-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--dark); margin: 0 0 20px; }
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
  font-family: var(--font-display);
  color: var(--dark);
  font-weight: 400;
}

/* ── Shop grid ──
   Explicit width/float resets are important here: WooCommerce's own base
   stylesheet sets a percentage `width` + `float:left` on li.product (for its
   old-style non-grid layout). Even inside our CSS grid, a leftover % width
   on the grid item shrinks it and leaves large gaps — this is what caused
   the broken, narrow-column look. Setting width:auto/float:none neutralizes it.
   Column counts come from Fredi Settings → eShop via CSS variables. */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--fredi-shop-cols-d, 4), 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: #fff; border: 1px solid var(--beige); border-radius: 14px; padding: 14px 14px 16px; text-align: center; transition: box-shadow .25s, transform .25s, border-color .25s;
  position: relative;
  display: flex; flex-direction: column; height: 100%;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 12px 30px rgba(44,36,32,.10); transform: translateY(-4px); border-color: var(--gold); }
.woocommerce ul.products li.product img {
  border-radius: 10px; margin-bottom: 12px; aspect-ratio: 1/1; object-fit: contain;
  width: 100% !important; height: auto !important; background: var(--cream); padding: 6px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--dark); margin: 2px 0; line-height: 1.35; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce ul.products li.product .price { color: var(--accent); font-weight: 700; font-size: 15px; margin: 6px 0 12px; }
.woocommerce ul.products li.product .price del { color: var(--mocha); opacity: .55; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
  margin-top: auto; border-radius: 30px !important; font-size: 11px !important; padding: 12px 18px !important; width: 100%;
}

/* ── Result count + sorting row (top of Shop) ── */
.woocommerce .woocommerce-result-count { font-size: 12px; letter-spacing: .04em; color: var(--mocha); text-transform: uppercase; margin: 0; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--beige); border-radius: 20px; padding: 8px 16px; background: #fff;
  font-family: var(--font-body); font-size: 13px; color: var(--text); cursor: pointer;
}
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce > .woocommerce-result-count,
.woocommerce > .woocommerce-ordering { display: inline-block; }
.fredi-shop-main > .woocommerce-result-count,
.fredi-shop-main > .woocommerce-ordering { margin-bottom: 18px; }

/* "Εμφάνιση: 12 / 24 / 36" quick per-page picker */
.fredi-shop-toprow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 4px 0 18px; }
.fredi-per-page-select { font-size: 12px; color: var(--text); }
.fredi-per-page-label { color: var(--mocha); margin-right: 4px; }
.fredi-per-page-opt { color: var(--text); text-decoration: none; padding: 0 4px; }
.fredi-per-page-opt:hover { color: var(--accent); }
.fredi-per-page-opt.active { color: var(--accent); font-weight: 700; text-decoration: underline; }
.fredi-per-page-sep { color: var(--beige); margin: 0 2px; }
.fredi-toprow-pagination nav.woocommerce-pagination { margin: 0; }

/* ── Pagination — premium pill-style page numbers instead of plain text links ── */
.woocommerce nav.woocommerce-pagination { margin-top: 40px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 8px; border: none; background: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--beige); background: #fff; color: var(--text);
  font-family: var(--font-body); font-size: 13px; padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--dark); border-color: var(--dark); color: #fff; }

/* SALE / NEW badges — toggled via Fredi Settings → eShop.
   Small rounded-rectangle chip in the top-left corner (like modern e-commerce
   references), instead of a big centered pill — more minimal, less shouty. */
.fredi-eshop-hide-badges .onsale,
.fredi-eshop-hide-badges .fredi-new-badge { display: none !important; }
.woocommerce span.onsale {
  position: absolute; top: 12px; left: 12px; background: var(--dark); color: #fff;
  border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 9px; text-transform: uppercase; min-height: 0; min-width: 0; line-height: 1.4; z-index: 2;
}
.fredi-new-badge {
  position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--dark);
  border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 9px; text-transform: uppercase; z-index: 2;
}
.fredi-card-brand, .fredi-product-brand {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--mocha);
}
.fredi-card-brand { margin: 2px 0 2px; }
.fredi-product-brand { margin: 0 0 8px; }

/* Add-to-cart button toggle on loop cards */
.fredi-eshop-hide-addtocart ul.products li.product .add_to_cart_button,
.fredi-eshop-hide-addtocart ul.products li.product a.button { display: none !important; }

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(var(--fredi-shop-cols-t, 3), 1fr) !important; }
}
@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(var(--fredi-shop-cols-m, 2), 1fr) !important; gap: 14px !important; }
}
/* Inside the Shop page's sidebar layout specifically: the product grid's real
   available width (see container-type on .fredi-shop-main above) is what decides
   columns here — not the viewport. This block is the sole authority for column
   count in that context (it always sets a value, not just an override), so it
   isn't at the mercy of the @media rules above when the container is actually
   wide enough for the desktop count despite a narrower viewport. */
.fredi-shop-main ul.products { grid-template-columns: repeat(var(--fredi-shop-cols-d, 4), 1fr) !important; }
@container (max-width: 900px) {
  .fredi-shop-main ul.products { grid-template-columns: repeat(var(--fredi-shop-cols-t, 3), 1fr) !important; }
}
@container (max-width: 480px) {
  .fredi-shop-main ul.products { grid-template-columns: repeat(var(--fredi-shop-cols-m, 2), 1fr) !important; gap: 14px !important; }
}

/* ── Buttons (add to cart, checkout, etc.) ── */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 12px 22px; font-family: var(--font-body); font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; transition: background .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--dark);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--gold); color: var(--dark);
}

/* ── Single product page ──
   Explicit 2-column grid (gallery / info) instead of relying on WooCommerce's
   default float layout — this is what removes the large blank-space gap and
   keeps everything compact and aligned. */
.woocommerce div.product {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px; align-items: start;
  max-width: 1100px; margin: 0 auto 10px;
}
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary.entry-summary { grid-column: 2; }
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery img { width: 100%; height: auto; border-radius: 10px; display: block; }
.woocommerce div.product .summary.entry-summary > * { margin-top: 0; margin-bottom: 14px; }
.woocommerce div.product .product_title { font-size: 28px; margin-bottom: 4px; }
.fredi-product-brand { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mocha); margin: 0 0 8px; }
.woocommerce div.product .summary .price { font-size: 24px; color: var(--accent); font-family: var(--font-display); margin: 0 0 10px; }
.woocommerce div.product p.stock { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.woocommerce div.product p.stock.in-stock { color: #3a7d44; }
.woocommerce div.product p.stock.out-of-stock { color: #c0392b; }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.woocommerce div.product form.cart .quantity input { border: 1px solid var(--beige); border-radius: 6px; padding: 12px 10px; background: #fff; width: 70px; text-align: center; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--text); line-height: 1.7; margin: 0 0 6px; }

/* Tabs + description live below the 2-column area, spanning full width */
.woocommerce-tabs { max-width: 1100px; margin: 30px auto 0; }
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--beige); padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { font-family: var(--font-body); font-size: 13px; letter-spacing: .03em; list-style: none; }
.woocommerce-tabs ul.tabs li a { padding: 10px 16px; display: block; color: var(--text); text-decoration: none; }
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--accent); }
.woocommerce-tabs ul.tabs li.active a { color: var(--dark); font-weight: 600; }
.woocommerce-tabs .panel { padding: 22px 4px; line-height: 1.7; color: var(--text); }

/* Related products — reuses the same grid rules as the Shop page, so cards match exactly.
   IMPORTANT: WooCommerce renders related/upsell products as a sibling INSIDE the same
   div.product 2-column grid (gallery/summary) — without an explicit grid-column, it gets
   squeezed into a single column instead of spanning full width. This is what caused the
   half-width, oddly-wrapped related products with a big blank gap next to them. */
.woocommerce div.product .related.products,
.related.products,
.woocommerce div.product .upsells.products {
  grid-column: 1 / -1;
  max-width: 1100px; margin: 50px auto 0; padding-top: 36px; border-top: 1px solid var(--beige);
}
.related.products > h2 { font-family: var(--font-display); font-weight: 400; text-align: center; margin-bottom: 24px; }

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
  .woocommerce div.product .product_title { font-size: 22px; }
  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
  .woocommerce div.product form.cart .button { width: 100%; text-align: center; }
}

/* ── Cart & Checkout tables ── */
.woocommerce table.shop_table { border: 1px solid var(--beige); border-radius: 8px; overflow: hidden; border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { background: var(--cream); font-family: var(--font-body); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: var(--mocha); padding: 12px; }
.woocommerce table.shop_table td { padding: 14px 12px; border-top: 1px solid var(--beige); }
.woocommerce-checkout-review-order-table .order-total .amount { color: var(--accent); font-weight: 700; }
.woocommerce table.cart td.product-thumbnail img { width: 64px; border-radius: 6px; }
.woocommerce table.cart td.actions .button { margin-top: 8px; }

/* Cart/checkout tables on mobile: stack each row as label + value instead of a
   cramped horizontal table — WooCommerce already outputs a data-title attribute
   on every <td> for exactly this purpose, we just have to style it in. */
@media (max-width: 640px) {
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table, .woocommerce table.shop_table tbody, .woocommerce table.shop_table tr, .woocommerce table.shop_table td { display: block; width: 100%; }
  .woocommerce table.shop_table tr { border-bottom: 1px solid var(--beige); padding: 10px 0; }
  .woocommerce table.shop_table td { display: flex; justify-content: space-between; align-items: center; border-top: none; padding: 6px 12px; text-align: right; }
  .woocommerce table.shop_table td[data-title]::before { content: attr(data-title); font-weight: 600; color: var(--mocha); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .woocommerce table.cart td.product-thumbnail { justify-content: flex-start; }
  .woocommerce table.cart td.product-thumbnail::before { content: none; }
}

/* ── Checkout form fields ── */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border: 1px solid var(--beige); border-radius: 6px; padding: 12px; background: #fff; font-family: var(--font-body); width: 100%;
}
.woocommerce form .form-row label { font-size: 13px; color: var(--text); }
.woocommerce-checkout #payment { border-radius: 8px; }
.woocommerce-checkout #place_order { width: 100%; padding: 16px; font-size: 14px; }
@media (max-width: 640px) {
  .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
}

/* ── Notices (added to cart, errors, etc.) ── */
.woocommerce-message, .woocommerce-info { border-top-color: var(--accent); background: var(--cream); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }
.woocommerce-error { border-top-color: #c0392b; }

/* ── Header mini-cart icon (see fredi_eshop_header_cart_icon()) ── */
.fredi-eshop-cart-icon { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: var(--dark); }
.fredi-eshop-cart-icon svg { width: 22px; height: 22px; }
.fredi-eshop-cart-count { position: absolute; top: -6px; right: -8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ── Featured products widget (homepage, left/right placement) ── */
.fredi-featured-products { background: var(--cream); border-radius: 12px; padding: 20px; }
.fredi-featured-products h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 14px; color: var(--dark); }
.fredi-featured-products .fp-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--beige); }
.fredi-featured-products .fp-item:first-of-type { border-top: none; }
.fredi-featured-products .fp-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fredi-featured-products .fp-item .fp-name { font-size: 13px; color: var(--text); }
.fredi-featured-products .fp-item .fp-price { font-size: 13px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.fredi-featured-products .fp-view-all { display: block; text-align: center; margin-top: 14px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); text-decoration: none; }

/* ── Sticky side widget (left/right) ── */
.fredi-eshop-side-widget { position: fixed; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; align-items: center; }
.fredi-eshop-side-left { left: 0; }
.fredi-eshop-side-right { right: 0; flex-direction: row-reverse; }
.fredi-eshop-side-tab { background: var(--accent); color: #fff; border: none; width: 42px; height: 56px; font-size: 20px; cursor: pointer; }
.fredi-eshop-side-left .fredi-eshop-side-tab { border-radius: 0 8px 8px 0; }
.fredi-eshop-side-right .fredi-eshop-side-tab { border-radius: 8px 0 0 8px; }
.fredi-eshop-side-panel { width: 240px; max-height: 70vh; overflow-y: auto; background: var(--cream); border: 1px solid var(--beige); padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; transition: max-width .25s ease, opacity .2s ease, padding .25s ease; }
.fredi-eshop-side-left .fredi-eshop-side-panel { border-radius: 0 10px 10px 0; }
.fredi-eshop-side-right .fredi-eshop-side-panel { border-radius: 10px 0 0 10px; }
.fredi-eshop-side-widget:hover .fredi-eshop-side-panel,
.fredi-eshop-side-widget.fredi-eshop-side-open .fredi-eshop-side-panel { max-width: 240px; opacity: 1; padding: 16px; border-width: 1px; }
.fredi-eshop-side-panel h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 12px; color: var(--dark); white-space: nowrap; }
.fredi-eshop-side-panel .fp-item { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px 0; border-top: 1px solid var(--beige); }
.fredi-eshop-side-panel .fp-item:first-of-type { border-top: none; }
.fredi-eshop-side-panel .fp-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fredi-eshop-side-panel .fp-name { font-size: 12px; color: var(--text); flex: 1; white-space: normal; }
.fredi-eshop-side-panel .fp-price { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.fredi-eshop-side-panel .fp-view-all { display: block; text-align: center; margin-top: 12px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
@media (max-width: 782px) {
  .fredi-eshop-side-widget { top: auto; bottom: 90px; transform: none; }
  .fredi-eshop-side-panel { max-height: 50vh; }
}

/* ── Homepage product sliders (Slider 1 / Slider 2) ── */
.fredi-eshop-slider-section { padding: 60px 24px; }
.fredi-eshop-slider { position: relative; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.fredi-eshop-slider-track {
  flex: 1; display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.fredi-eshop-slider-track::-webkit-scrollbar { display: none; }
.fredi-eshop-slide {
  flex: 0 0 calc((100% - 20px * 3) / 4); /* 4 visible on desktop, JS keeps this in sync with settings */
  scroll-snap-align: start;
  background: var(--cream); border: 1px solid var(--beige); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; text-align: center;
}
.fredi-eshop-slide-link { text-decoration: none; color: inherit; display: block; }
.fredi-eshop-slide-img-wrap { position: relative; }
.fredi-eshop-slide-img-wrap img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.fredi-eshop-slide-brand { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mocha); margin-top: 10px; }
.fredi-eshop-slide-title { font-family: var(--font-display); font-size: 15px; color: var(--dark); margin-top: 4px; }
.fredi-eshop-slide-price { color: var(--accent); font-weight: 600; margin-top: 4px; }
.fredi-eshop-slide-addcart {
  margin-top: 10px; display: block; text-align: center; text-decoration: none; background: var(--accent); color: #fff;
  border-radius: 6px; padding: 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; transition: background .2s;
}
.fredi-eshop-slide-addcart:hover { background: var(--dark); }
.fredi-slider-arrow {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--beige); background: #fff;
  color: var(--dark); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fredi-slider-arrow:hover { background: var(--accent); color: #fff; }
.fredi-eshop-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.fredi-eshop-slider-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--beige); cursor: pointer; border: none; padding: 0; }
.fredi-eshop-slider-dots .dot.active { background: var(--accent); }

@media (max-width: 1024px) {
  .fredi-eshop-slide { flex: 0 0 calc((100% - 20px * 2) / 3); }
}
@media (max-width: 640px) {
  .fredi-eshop-slide { flex: 0 0 calc((100% - 14px) / 2); }
  .fredi-eshop-slider-track { gap: 14px; }
  .fredi-slider-arrow { display: none; } /* mobile relies on swipe, keeps the row clean */
}

/* ── Shop filter sidebar (native WooCommerce widgets: category / attribute / price) ── */
.fredi-shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: start; }
.fredi-shop-layout--no-filters { grid-template-columns: 1fr; }
/* The product grid should react to the ACTUAL space it has (which is narrower than the
   viewport once the filter sidebar takes 230px+gap) — not to the raw viewport width.
   container-type turns .fredi-shop-main into a query context so @container below can
   measure its real width; this is what fixes columns dropping to 3 too early on a
   normal laptop screen just because the sidebar is present. */
.fredi-shop-main { container-type: inline-size; }
.fredi-shop-filters { background: var(--cream); border: 1px solid var(--beige); border-radius: 12px; padding: 20px; position: sticky; top: 20px; }
.fredi-shop-filter-widget { margin-bottom: 26px; }
.fredi-shop-filter-widget:last-child { margin-bottom: 0; }
.fredi-shop-filter-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--dark); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .03em; }

/* Category / attribute (layered nav) lists */
.fredi-shop-filters ul.product-categories,
.fredi-shop-filters ul.woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; }
.fredi-shop-filters ul.product-categories li,
.fredi-shop-filters ul.woocommerce-widget-layered-nav-list li { margin-bottom: 8px; }
.fredi-shop-filters ul.product-categories-children { list-style: none; margin: 6px 0 0 14px; padding: 0; border-left: 1px solid var(--beige); padding-left: 10px; }
.fredi-shop-filters ul.product-categories-children li { margin-bottom: 6px; }
.fredi-shop-filters ul.product-categories-children a { font-size: 12px; }
.fredi-shop-filters ul.product-categories a,
.fredi-shop-filters .woocommerce-widget-layered-nav-list li a {
  color: var(--text); text-decoration: none; font-size: 13px; display: flex; justify-content: space-between; gap: 8px;
}
.fredi-shop-filters ul.product-categories a:hover,
.fredi-shop-filters .woocommerce-widget-layered-nav-list li a:hover { color: var(--accent); }
.fredi-shop-filters .current-cat > a,
.fredi-shop-filters .woocommerce-widget-layered-nav-list li.chosen a { color: var(--accent); font-weight: 600; }
.fredi-shop-filters .count { color: var(--mocha); font-size: 12px; }

/* Price filter slider */
.fredi-shop-filters .price_slider_wrapper { margin-top: 4px; }
.fredi-shop-filters .price_slider_amount { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.fredi-shop-filters .price_slider_amount .button {
  background: var(--accent); color: #fff; border: none; border-radius: 20px; padding: 8px 14px; font-size: 11px; text-transform: uppercase;
}
.fredi-shop-filters .price_label { font-size: 12px; color: var(--text); }
.fredi-shop-filters .ui-slider { position: relative; height: 4px; background: var(--beige); border-radius: 4px; margin: 10px 4px 0; }
.fredi-shop-filters .ui-slider .ui-slider-range { position: absolute; height: 100%; background: var(--accent); border-radius: 4px; }
.fredi-shop-filters .ui-slider .ui-slider-handle {
  position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -8px; margin-left: -8px;
  background: #fff; border: 2px solid var(--accent); border-radius: 50%; cursor: pointer; outline: none;
}

.fredi-shop-filters-empty { font-size: 12px; color: var(--mocha); }

/* Slider at the top of the Shop page sits inside the .woocommerce wrapper's own
   padding, so it needs its own negative-margin-free spacing (no full-bleed section). */
.fredi-eshop-shop-slider ~ .fredi-shop-layout,
#fredi-eshop-shop-slider + .fredi-shop-layout { margin-top: 10px; }
#fredi-eshop-shop-slider.fredi-eshop-slider-section { padding: 0 0 40px; }

@media (max-width: 900px) {
  .fredi-shop-layout { grid-template-columns: 1fr; }
  .fredi-shop-filters { position: static; }
}

/* ── Wishlist heart button (product cards + single product) ── */
.fredi-wishlist-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1px solid var(--beige); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--mocha); padding: 0; transition: color .2s, border-color .2s, transform .15s;
}
.fredi-wishlist-btn:hover { transform: scale(1.08); }
.fredi-wishlist-btn svg { width: 15px; height: 15px; }
.fredi-wishlist-btn.active { color: #c0392b; border-color: #c0392b; }
.fredi-wishlist-btn.active svg { fill: currentColor; }
.woocommerce div.product .summary .fredi-wishlist-btn { position: static; display: inline-flex; margin: 0 0 10px; width: auto; height: auto; padding: 8px 14px; border-radius: 20px; gap: 6px; font-size: 12px; }
.woocommerce div.product .summary .fredi-wishlist-btn::after { content: 'Αγαπημένα'; }
.woocommerce div.product .summary .fredi-wishlist-btn.active::after { content: 'Στα Αγαπημένα ✓'; }

/* Header wishlist icon — same style as the cart icon */
.fredi-eshop-wishlist-icon { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: var(--dark); }
.fredi-eshop-wishlist-icon svg { width: 22px; height: 22px; }

.fredi-wishlist-page { padding-top: 20px; }
.fredi-wishlist-page .page-title { font-family: var(--font-display); font-weight: 400; text-align: center; margin-bottom: 30px; }
.fredi-wishlist-empty { text-align: center; padding: 40px 0; color: var(--mocha); }

/* ── Shop page banners (top/bottom) ── */
.fredi-shop-banner { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 30px; display: block; }
.fredi-shop-banner img { width: 100%; height: auto; display: block; }
.fredi-shop-banner-overlay {
  position: absolute; left: 0; bottom: 0; padding: 24px 28px; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  width: 100%;
}
.fredi-shop-banner-overlay h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; }
.fredi-shop-banner-overlay p { font-size: 13px; margin: 0; opacity: .9; }