/*
Theme Name: Erva2
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erva2
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
	margin: 0;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}



/*
 * χοβερ πανω στις εικονες κεντρικη
*/

/* --- Interactive Zoom Navigation Cover Block --- */


/* 1. Main container setup */
.zoom-nav-cover {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 2. Background image zoom effect */
.zoom-nav-cover .wp-block-cover__image-background {
  transition: transform 0.4s ease-in-out;
}
.zoom-nav-cover:hover .wp-block-cover__image-background {
  transform: scale(1.1);
}

/* 3. Overlay fade effect */
.zoom-nav-cover .wp-block-cover__background {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.zoom-nav-cover:hover .wp-block-cover__background {
  opacity: 0.5;
}

/* 4. The main content container - THIS IS THE NEW CORE LOGIC */
.zoom-nav-cover .wp-block-cover__inner-container {
  /* Positioning setup */
  position: absolute;
  left: 50%;
  width: 80%; /* Or adjust as needed */
  transform: translateX(-50%);
  text-align: center;
  
  /* Starting position: BOTTOM CENTER */
  bottom: 10%;
  top: auto; /* Explicitly unset 'top' to ensure 'bottom' takes priority */

  /* A smooth transition for all property changes, including position */
  transition: all 0.4s ease-in-out;
}

/* 5. The container's position on hover: TOP CENTER */
.zoom-nav-cover:hover .wp-block-cover__inner-container {
  bottom: auto; /* Unset 'bottom' */
  top: 10%; /* Set 'top' to move the container up */
}

/* 6. Style the introductory paragraph (fades out on hover) */
.zoom-nav-cover .cover-intro-text {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease-in-out, visibility 0.4s;
  /* All position rules have been removed from here */
}
.zoom-nav-cover:hover .cover-intro-text {
  opacity: 0;
  visibility: hidden;
}

/* 7. Style the Navigation block (fades in on hover) */
.zoom-nav-cover .wp-block-navigation {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s;
  /* All position rules have been removed from here */
}
.zoom-nav-cover:hover .wp-block-navigation {
  opacity: 1;
  visibility: visible;
}

/* 8. (Optional) Style navigation links */
.zoom-nav-cover .wp-block-navigation a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Product Variation Buttons */
.variation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0px;
}

.variation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: #FBFAF3;
    border: 1px solid #ddd;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
}

.variation-button:hover:not(.disabled) {
    border-color: #666;
}

.variation-button.selected {
    border: 1px solid #000;
    font-weight: bold;
}

.variation-button.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.variation-button.disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #ff0000;
    transform: rotate(45deg);
}

.variation-button.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #ff0000;
    transform: rotate(-45deg);
}

/* αρχική σελίδα κουμπια για νεα προιοντα */ 

/* Styling for the AJAX Category Filter Navigation */
.category-filter-nav {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping */
    justify-content: center; /* This is the key property for horizontal centering */
    gap: 10px;
    margin-bottom: 2em;
    width: 100%; /* Ensure it takes up the full width to center within */
}

/* Make the buttons smaller */
.category-filter-nav .category-filter-link {
    font-size: 0.9rem;
    padding: 8px 15px;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

/* Style for the currently active filter link */
.category-filter-nav .category-filter-link.is-active {
    background-color: #0073e6;
    color: white;
}


/*
 * ========================================================================
 * FINAL GLOBAL STYLES FOR PRODUCT VARIATIONS AND BUTTONS
 * Replaces all previous snippets for alignment and styling.
 * ======================================================================== */

/* --- 1. Reset the Variation Table Structure --- */
/* This is the most important part. It forces the table to behave like a stack of divs. */
.variations_form .variations,
.variations_form .variations tbody,
.variations_form .variations tr,
.variations_form .variations td {
    display: block; /* Treat all table elements as simple blocks */
    width: 100%;    /* Make them take up the full available width */
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}

/* --- 2. Hide Attribute Labels (e.g., "Color", "Μέγεθος") --- */
.variations_form .variations .label {
    display: none;
}

/* --- 3. Center the Button Container --- */
/* This container is created by our JavaScript. Now it can be centered perfectly. */
.variations_form .variations .value {
    display: flex;
    justify-content: center; /* HORIZONTALLY CENTER THE BUTTONS */
    align-items: center;
    flex-wrap: wrap;
    gap: 8px; /* Spacing between buttons */
    padding: 5px 0; /* Give each attribute row some vertical breathing room */
}

/* --- 4. Style the Variation Buttons --- */
.variation-button {
    min-width: 45px;
    height: 35px; /* Use height instead of min-height for consistency */
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Size/Text buttons get a rounded shape */
.variation-button:not(.color-swatch) {
    border-radius: 999px;
}

/* Color swatch buttons are circles */
.variation-button.color-swatch {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    padding: 0;
    border-width: 2px;
    border-color: transparent;
}
.variation-button.color-swatch.has-border {
    border-color: #e0e0e0;
}

/* --- 5. Selection and Disabled States --- */
.variation-button.selected {
    border-width: 2px;
    border-color: #000;
}

.variation-button.color-swatch.selected {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.variation-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: red;
}

/* --- 6. Stock and Clear Link Wrapper --- */
.variation-meta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
    min-height: 20px;
    flex-wrap: wrap;
}
.custom-stock-status {
    font-size: 0.9em;
    font-style: italic;
    color: #666;
    margin: 0;
}
.variation-meta-wrapper .reset_variations {
    margin: 0;
    font-size: 0.8em;
    order: 2;
}

/* --- 7. Final Add to Cart Button Styling --- */
.variations_form .single_add_to_cart_button,
.product-loop-add-to-cart-form .add_to_cart_button {
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    min-height: 38px;
    height: 38px;
    border-radius: 999px !important;
}

/*
 * ========================================================================
 * FINAL POLISHING TWEAKS
 * ======================================================================== */

/* 1. Forcefully hide the original WooCommerce stock/variation message container */
/* This prevents the duplicate message from ever appearing after a selection is made. */
.single_variation_wrap .woocommerce-variation {
    display: none !important;
}


/*
 * ========================================================================
 * FINAL STYLISTIC REFINEMENTS
 * ======================================================================== */

/* 1. Make stock status and clear link text smaller */
.custom-stock-status,
.variation-meta-wrapper .reset_variations {
    font-size: 0.75em !important; /* Smaller font size */
}

/* 2. Add a 3D effect to color swatches */
.variation-button.color-swatch {
    /* Create an inner shadow for depth and a subtle outer border */
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.4);
    border-color: rgba(0,0,0,0.2);
}

/* 3. Reduce vertical gaps between elements */
/* Reduce bottom margin on the price */
.wp-block-woocommerce-product-price {
    margin-bottom: 0.5rem !important;
}

/* Reduce the reserved space for the variations */
.product-loop-add-to-cart-form .variations {
    min-height: 70px;
}

/* Reduce the margin on the stock/clear wrapper */
.variation-meta-wrapper {
    margin: 0px 0;
}

/*
 * ========================================================================
 * FINAL ALIGNMENT AND SPACING REFINEMENTS
 * ======================================================================== */

/* 1. Adjust the product title line-height */
/* This targets the title and reduces the line spacing. */
li.product .wp-block-post-title {
    line-height: 1.1 !important;
}

/* 2. Reduce the vertical space around variation buttons */
/* This makes the container for the color/size buttons just tall enough for the buttons themselves. */
.variations_form .variations .value {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* 3. Make the stock/clear text smaller */
/* This targets the wrapper for "Επιλέξτε χρώμα/νούμερο" and "Καθαρισμός επιλογών". */
.variation-meta-wrapper {
    font-size: 0.8em !important;
}

/* 4. Reserve vertical space for variations to ensure button alignment */
/* This is the key fix for horizontal alignment. It gives the variations area a fixed
   minimum height, so products with only one attribute (e.g., color) take up the
   same space as products with two attributes, keeping the "Add to Cart" buttons aligned. */
.variations_form .variations {
    min-height: 80px;
}

/*
 * ========================================================================
 * CONSISTENT HEIGHT FIX FOR STOCK/CLEAR WRAPPER
 * ======================================================================== */

/* This targets the container for the stock status and clear link.
   Setting a fixed height and aligning items to the center vertically
   ensures it never changes size, regardless of its content. */
.variation-meta-wrapper {
    min-height: 20px;
    height: 20px;
    display: flex;
    align-items: center;
}

/*
 * ========================================================================
 * FINAL SPACING ADJUSTMENT FOR PRODUCT TITLE
 * ======================================================================== */

/* This rule specifically targets the block group containing the product title
   within a product grid item and sets its bottom margin to zero, overriding
   the default WooCommerce block spacing. */
.wc-block-product > .wp-block-group:has(.wp-block-post-title) {
    margin-bottom: 0 !important;
}

/*
 * ========================================================================
 * FINAL INLINE STYLE OVERRIDES
 * ======================================================================== */

/* 1. Set the product title's container height to 60px */
/* This directly overrides the inline style="min-height:75px". */
.wc-block-product > .wp-block-group:has(.wp-block-post-title) {
    min-height: 60px !important;
}

/* 2. Remove the bottom margin from the product price container */
/* This directly overrides the inline style="margin-bottom:1rem". */
.wc-block-product .wc-block-components-product-price {
    margin-bottom: 0 !important;
}

/*
 * ========================================================================
 * FINAL AND DEFINITIVE IMAGE CENTERING OVERRIDE
 * ======================================================================== */

/* 1. This re-affirms that the image's container is a flexbox,
      which is the most reliable way to center its contents. */
.wc-block-grid__products .wc-block-components-product-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. THIS IS THE CRITICAL FIX: We style the link (<a>) tag itself.
      By making the link an inline-block, we force it to be only as
      wide as the image inside it. This allows the flexbox rule above
      to perfectly center the link (and thus the image). */
.wc-block-grid__products .wc-block-components-product-image > a {
    display: inline-block;
}

.attachment-woocommerce_single{
	display: block !important;
	margin: auto !important;
}

.single-product .wp-block-add-to-cart-form .variations_form {
    display: inline;
}


.woocommerce-variation-add-to-cart {
    display: flex;
    justify-content: center; /* Horizontally centers the quantity box and button */
    align-items: center;     /* Vertically aligns them with each other */
    gap: 10px;               /* Adds a nice space between the two items */
    width: 100%;             /* Ensures the container takes full width for proper centering */
    margin-top: 2px;        /* Adds some space above this section */
}

.single_add_to_cart_button {
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    min-height: 38px;
    height: 38px;
    border-radius: 999px !important;
}

/* Ensure the title and price are also centered on simple product pages,
   matching the style of the variable product pages. */
.single-product .product-type-simple .wp-block-post-title,
.single-product .product-type-simple .wc-block-components-product-price {
    text-align: center;
}

/*
 * ========================================================================
 * SIMPLE PRODUCT ALIGNMENT FIX
 * Makes simple products align with variable products in product grids
 * ======================================================================== */

/* 1. Reserve the same minimum height for simple product container as variable products */
.wp-block-add-to-cart-form:not(:has(.variations_form)) {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 2. Style the spacer div to match variation buttons area */
.simple-product-spacer {
    min-height: 80px;
    display: block;
    flex-shrink: 0;
}

/* 3. Stock status styling for simple products (matches variable product stock wrapper) */
.wp-block-add-to-cart-form:not(:has(.variations_form)) > .stock.in-stock {
    min-height: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0px 0 !important;
    font-size: 0.6em !important;
    font-style: italic;
    flex-shrink: 0;
	color: #666;
}

/* 4. Center the quantity selector and add-to-cart button */
.cart-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}

/* 5. Ensure simple product buttons match variable product button styling */
.wp-block-add-to-cart-form .single_add_to_cart_button {
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    min-height: 38px;
    height: 38px;
    border-radius: 999px !important;
    background-color: #000 !important;
    color: #fff !important;
}

/* 6. Match quantity selector styling between simple and variable products */
.wp-block-add-to-cart-form .quantity input.qty {
    width: 50px;
    height: 22px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
	padding-left: 5px;
  	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* 7. Ensure the form itself doesn't add extra spacing */
.wp-block-add-to-cart-form:not(:has(.variations_form)) form.cart {
    display: contents; /* Makes form transparent in layout */
}

/* perigrafi proiontis na ginoun stin idia grammi ta tabs */

html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
	padding: .5em .5em;
	font-size: 0.9em;
}

#tab-description {
	padding: .5em .5em;
	font-size: 0.9em;
}

#tab-description p {
	font-size: 0.8em;
	
}

.woocommerce table.shop_attributes {
    font-size: 0.8em;
}


/* 1. Define a uniform container size for all images in the carousel.
   We set a fixed height to create consistency across all products. */
.in-dynamic-carousel .wc-block-components-product-image {
    height: 220px; /* <-- Adjust this height value to your preference */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* Optional: adds a white background for images with transparency */
}

/* 2. Style the image itself to fit within the container. */
.in-dynamic-carousel .wc-block-components-product-image img {
    /* This is the key property. It scales the image to fit inside its
       container while preserving its original aspect ratio. */
    object-fit: contain;

    /* Make the image occupy the full space of the container defined above.
       'object-fit' will handle the scaling. */
    width: 100%;
    height: 100%;
}

.in-dynamic-carousel .wp-block-woocommerce-product-price {
  margin-bottom: 0rem !important;
  font-size: medium;

}

.in-dynamic-carousel  .wc-block-components-product-price.has-text-align-center {
  margin-top: 0px !important;
}

.in-dynamic-carousel .wp-block-post-title a {
    line-height: 1.0rem;
}

.in-dynamic-carousel h2 {
    margin-bottom: 0px !important;
}

.in-dynamic-carousel .wc-block-components-product-button a {
    font-size: .7em;
}

/* Hide the title on all Pages */
.page .wp-block-post-title {
  display: none;
}
#wp--skip-link--target {
	margin-top: 0px !important;

}
#wp--skip-link--target > div {
	padding-top: 0px !important;
}


/* 1. Hide the line breaks inside the add-to-cart form */
.woocommerce-variation-add-to-cart br {
    display: none !important;
}

/* 2. Reset margins for all paragraphs inside the form so they don't push content */
.woocommerce-variation-add-to-cart p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; /* Collapses height if content is hidden */
}

/* 3. Hide empty paragraphs completely */
.woocommerce-variation-add-to-cart p:empty {
    display: none !important;
}

/* 4. KEY FIX: Hide the specific paragraph containing the hidden variation inputs */
/* We use :has() to find the paragraph that contains the hidden variation ID input */
.woocommerce-variation-add-to-cart p:has(.variation_id) {
    display: none !important;
}

/* 5. Ensure the button's container allows the button to size correctly */
/* Since we reset line-height above, we restore it for the button paragraph */
.woocommerce-variation-add-to-cart p:has(.single_add_to_cart_button) {
    line-height: normal !important;
}

li.wc-block-product > div {
	margin-bottom: 0 !important;
}

div.wp-site-blocks div {
	margin-block-start: 0rem !important;
}


/* 1. Hide the breaking line tags inside pagination */
.wp-block-query-pagination br, 
.wp-block-query-pagination-numbers br {
    display: none !important;
}

/* 2. Force the numbers container to display in a row */
.wp-block-query-pagination-numbers {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px; /* Adds space between the numbers */
}

/* 3. Fix the 'Next Page' link alignment */
.wp-block-query-pagination p {
    margin: 0 !important;
    display: inline-block;
}