/*  =======================================================================
    GENERAL
    =======================================================================
*/


/*Remove all-around padding*/
.wd-content-layout
{
	padding-block:unset !important;
}

/*Remove prefooter padding*/
.wd-prefooter
{
	padding-bottom:unset !important;
}

/*Hide Google reCAPTCHA badge*/
.grecaptcha-badge 
{ 
	visibility: hidden; 
}

/*Search results*/
.wd-suggestions-group img
{
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:10px;
	justify-content:flex-start;
}



/*  =======================================================================
    Frontpage
    =======================================================================
*/


/***Frontpage sticky scroller section***/


/*LAYOUT — Outer wrapper*/
.sv-wrap 
{ 
	--gap: clamp(20px, 4vw, 48px);  /* Fluid gap: min 20px, max 48px, scales with viewport */
	--sticky-top: 20vh;              /* How far from the top the sticky column locks */
	padding-top:100px;
	padding-bottom:100px;
	padding-left:10%;                /* Left indent only — right side has no matching padding */
}

/* Two-column grid*/
.sv-grid 
{ 
	display:grid; 
	grid-template-columns: 1fr 1.2fr; 
	gap: var(--gap); 
	align-items:start; /*Prevent the columns from stretching to equal height*/
}

/* Below 900px, collapse to a single column (stacked layout)*/
@media (max-width: 900px)
{ 
	.sv-grid
	{ 
		grid-template-columns: 1fr; 
	} 
}

/*LEFT COLUMN — Sticky text panel*/
.sv-sticky 
{ 
	padding-top:5vw;           /* Fluid top padding — grows with viewport width */
	position: sticky;
	display:flex;
	flex-direction:column;
	align-items:start;
	justify-content:center;
	top: var(--sticky-top);    /* Locks 20vh from the top of the viewport */
	align-self:start;          /* Critical: without this, sticky has no effect in grid */
}

/* Small decorative heading — "about amilima" label above the dynamic text */
.sv-heading
{ 
	font-size: 1.8em;
	line-height:1.05;  
	color:#191919;
	font-weight:300;   /* Light weight for contrast against the bold subtitle below */
}

/* Dynamic subtitle — updated by JavaScript as each slide enters the viewport */
.sv-subtitle 
{ 
	font-size: 2.5em; 
	color:#191919;
	font-weight:600;
}

/* Dynamic description paragraph — also updated by JS on scroll*/
.sv-desc 
{ 
	max-width: 90%; 
	color: #191919; 
	font-size:1em !important;  /* !important needed to override Elementor widget styles */
	font-weight:400;
	text-align: left;
}

@media (max-width: 768px)
{ 
	.elementor-21 .elementor-element.elementor-element-6d35349
	{ 
		font-size:1em !important;
	}
}

/*RIGHT COLUMN — Scrolling image track*/
.sv-track 
{ 
	position: relative; 
}

/* Each slide*/
.sv-slide 
{ 
	height: 85vh; 
	display: grid; 
	place-items: stretch;
	margin-bottom:50px;
}

/* The image card inside each slide*/
.sv-slide .sv-img 
{
  background-image: var(--sv-image);   /* Set per-slide via inline style on the parent */
  background-size: cover; 	background-position: center; border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  width: 90%; 
	height: 100%;
  transform: scale(.985); transition: transform .4s ease, opacity .4s ease, filter .4s ease;
}

/* When JavaScriptS adds .is-active, the image scales up to full size — 
   gives a subtle "pop" effect on the currently visible slide */
.sv-slide.is-active .sv-img 
{ 
	transform: scale(1); 
}

/*ACCESSIBILITY — Reduced motion*/
@media (prefers-reduced-motion: reduce)
{
  .sv-slide .sv-img 
	{ 
		transition: none; 
	}
}

/***--------------------------------***/














































/*  =======================================================================
    Woocommerce product archives
    =======================================================================
*/

/*Shop page Κατηγορίες widget*/
#wd-product-category-filter-3 .widget-title
{
	color:#2e2a26;
	font-size:1.3em;
}

#wd-product-category-filter-3 a
{
	color:#2e2a26;
}

/*Age tags widget*/
.age-tags-widget
{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding-left: unset;
}

.age-tags-widget a
{
	color:#2e2a26;
}

#block-10
{
    border-bottom:unset;
    padding-bottom:unset;
    margin-bottom:unset;
}




@media only screen and (max-width: 1024px)
{
	.elementor-element-fe5fb3d .wd-tabs-content-wrapper
	{
		padding-left:2%;
		padding-right:2%;
	}
}






@media only screen and (max-width: 768px)
{
	.woocommerce-checkout-review-order-table tr
	{
        flex-direction:column;
	}
}

























/* ============================================================
   FRONTPAGE CATEGORIES SECTION
   On hover over any child slide, the parent .main-container-slide
   displays the corresponding full-width background image.
   Uses CSS :has() to select the parent based on which child is hovered.
   ============================================================ */

/* Parent container base — required for background-image to display
   correctly when triggered. Without these, the image may tile or
   stretch incorrectly. */
.main-container-slide
{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Smooth color transition on all child slides */
.main-container-slide [class*="slide"] 
{
    transition: background-color 0.4s ease-in-out;
}

/* ── Per-slide hover color tints on the child containers ── */
.main-container-slide .slide1:hover { background-color: #E9B24080 !important; }
.main-container-slide .slide2:hover { background-color: #BED5DD80 !important; }
.main-container-slide .slide3:hover { background-color: #F08D6D80 !important; }
.main-container-slide .slide4:hover { background-color: #A7613180 !important; }
.main-container-slide .slide5:hover { background-color: #76783180 !important; }
.main-container-slide .slide6:hover { background-color: #FBFEFB8C !important; }

/* ── Full-width background image on parent via :has() ──
   When a child slide is hovered, the parent container shows
   the matching image at full width and height.
   Note: background-image cannot be CSS-transitioned — the swap is instant.
   Only the color tint on the child animates smoothly. ── */

/* Κατηγορία — Βρεφικά */
.main-container-slide:has(.slide1:hover) 
{
    background-image: url(https://amilima.com/wp-content/uploads/2025/07/κατηγορια-βρεφικα.jpg) !important;
}
/* Κατηγορία — Παιδικά */
.main-container-slide:has(.slide2:hover) 
{
    background-image: url(https://amilima.com/wp-content/uploads/2025/07/κατηγορια-παιδικα.jpg) !important;
}
/* Κατηγορία — Κάρτες */
.main-container-slide:has(.slide3:hover) 
{
    background-image: url(https://amilima.com/wp-content/uploads/2025/07/κατηγορία-κάρτες.jpg) !important;
}
/* Κατηγορία — Γιορτές */
.main-container-slide:has(.slide4:hover) 
{
    background-image: url(https://amilima.com/wp-content/uploads/2025/07/κατηγορια-γιορτες.jpg) !important;
}
/* Κατηγορία — Διακόσμηση */
.main-container-slide:has(.slide5:hover) 
{
    background-image: url(https://amilima.com/wp-content/uploads/2025/07/κατηγορια-κρεμαστα.jpg) !important;
}
/* Κατηγορία — Αξεσουάρ */
.main-container-slide:has(.slide6:hover) 
{
    background-image: url(https://amilima.com/wp-content/uploads/2025/12/αξεσουάρ-κατηγορία.jpg) !important;
}









































































/*Mobile menu styling*/

/*Text styling*/
.mobile-pages-menu .nav-link-text
{
	text-transform:none !important;
}






/*Frontpage gift set video styling*/
.wd-image-hotspot-hotspots video 
{
    border-radius: 20px !important;
}

/*Thank you page styling*/

.wc-bacs-bank-details-heading
{
	font-weight:500;
	text-align:center;
	margin-bottom:50px;
	margin-top:50px;
}

.wc-bacs-bank-details-account-name
{
	margin-bottom:30px !important;
	text-align:center;
	font-size:1.1em;
	font-weight:500;
}

.wc-bacs-bank-details
{
	margin-bottom:80px;
}









/*Single product gift checkbox styling*/
.gift-checkbox
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}