/* ==========================================================================
   Aroma Product Gallery
   Custom gallery widget: aspect-square main image + thumbnail strip.
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.apg-wrapper {}

/* ── Main image container ─────────────────────────────────────────────────── */

.apg-main-wrap {
	position:      relative;
	aspect-ratio:  1 / 1;
	border-radius: 1.5rem;        /* rounded-3xl */
	overflow:      hidden;
	background:    #f9fafb;       /* bg-gray-50  */
	border:        1px solid #f3f4f6; /* border-gray-100 */
	box-shadow:    0 1px 2px 0 rgba( 0, 0, 0, .05 ); /* shadow-sm */
	margin-bottom: 1rem;          /* mb-4 */
}

/* ── Main image ───────────────────────────────────────────────────────────── */
/* position:absolute lets two images overlap during a slide transition.       */

.apg-main-img {
	position:   absolute;
	top:        0;
	left:       0;
	width:      100%;
	height:     100%;
	object-fit: contain;
	transition: opacity 0.3s ease; /* used by the variation-image fade only */
}

/* ── SALE badge ───────────────────────────────────────────────────────────── */

.apg-sale-badge {
	position:     absolute;
	top:          1rem;           /* top-4    */
	left:         1rem;           /* left-4   */
	background:   #ef4444;        /* bg-red-500 */
	color:        #ffffff;
	font-size:    11px;           /* text-[11px] */
	line-height:  1.2;            /* leading-tight */
	font-weight:  900;            /* font-black */
	padding:      6px 12px;       /* py-1.5 px-3 */
	border-radius: 9999px;        /* rounded-full */
	box-shadow:   0 1px 3px 0 rgba( 0, 0, 0, .1 );
	z-index:      10;
	pointer-events: none;
}

@media ( min-width: 768px ) {
	.apg-sale-badge {
		font-size: 20px;          /* md:text-[20px] */
	}
}

/* ── Main nav arrows ──────────────────────────────────────────────────────── */
/* Selector 0,2,1 — beats Elementor kit's .elementor-kit-38 button (0,1,1).  */

body .apg-main-wrap .apg-nav {
	position:         absolute;
	top:              50%;
	transform:        translateY( -50% );
	width:            40px;       /* w-10 */
	height:           40px;       /* h-10 */
	padding:          0;
	margin:           0;
	border:           none;
	border-radius:    9999px;     /* rounded-full */
	background:       rgba( 255, 255, 255, .8 ); /* bg-white/80 */
	background-color: rgba( 255, 255, 255, .8 );
	color:            #1f2937;    /* text-gray-800 */
	box-shadow:       0 1px 2px 0 rgba( 0, 0, 0, .05 );
	z-index:          10;
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       background-color 0.15s ease;
	font-size:        inherit;
	font-weight:      inherit;
	text-transform:   none;
	letter-spacing:   normal;
	box-shadow:       0 1px 3px rgba( 0, 0, 0, .15 );
}

body .apg-main-wrap .apg-nav:hover {
	background:       #ffffff;
	background-color: #ffffff;
	color:            #1f2937;
}

body .apg-main-wrap .apg-nav.apg-nav--hidden {
	display: none;
}

.apg-nav--prev { left:  1rem; } /* left-4  */
.apg-nav--next { right: 1rem; } /* right-4 */

/* ── Thumbnail strip wrapper ──────────────────────────────────────────────── */

.apg-thumbs-wrap {
	position: relative; /* scroll buttons are absolute children */
}

/* ── Scrollable strip ─────────────────────────────────────────────────────── */

.apg-thumbs {
	display:          flex;
	width:            100%;
	gap:              12px;             /* gap-3     */
	overflow-x:       auto;
	scroll-snap-type: x mandatory;     /* snap-x snap-mandatory */
	padding-bottom:   8px;             /* pb-2      */
	scrollbar-width:  none;            /* [scrollbar-width:none] */
}

.apg-thumbs::-webkit-scrollbar {
	display: none;
}

/* ── Thumbnail button ─────────────────────────────────────────────────────── */
/* Selector 0,2,1 — beats Elementor kit button rule.                         */

body .apg-thumbs .apg-thumb {
	position:         relative;
	flex-shrink:      0;                 /* shrink-0 */
	width:            80px;             /* w-20     */
	height:           80px;             /* h-20     */
	padding:          0;
	margin:           0;
	border-radius:    1rem;             /* rounded-2xl */
	overflow:         hidden;
	background:       #f9fafb;          /* bg-gray-50 */
	background-color: #f9fafb;
	border:           2px solid transparent;
	border-style:     solid;
	border-width:     2px;
	border-color:     transparent;
	scroll-snap-align: center;          /* snap-center */
	cursor:           pointer;
	transition:       border-color 0.15s ease, box-shadow 0.15s ease;
	font-size:        inherit;
	text-transform:   none;
	letter-spacing:   normal;
	box-shadow:       none;
	color:            inherit;
}

@media ( min-width: 640px ) {
	body .apg-thumbs .apg-thumb {
		width:  96px;                   /* sm:w-24 */
		height: 96px;                   /* sm:h-24 */
	}
}

body .apg-thumbs .apg-thumb:hover:not( .apg-thumb--active ) {
	border-color: #d1d5db;              /* hover:border-gray-300 */
	background-color: #f9fafb;
}

body .apg-thumbs .apg-thumb.apg-thumb--active {
	border-color: #1660aa;              /* border-[#1660aa] */
	box-shadow:   0 4px 6px -1px rgba( 0, 0, 0, .1 ),
	              0 2px 4px -2px rgba( 0, 0, 0, .1 ); /* shadow-md */
}

.apg-thumb img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ── Thumbnail strip scroll buttons ──────────────────────────────────────── */
/* Overlaid on the strip edges. Selector 0,2,1 — beats Elementor kit (0,1,1) */

body .apg-thumbs-wrap .apg-scroll-btn {
	position:         absolute;
	top:              50%;
	transform:        translateY( calc( -50% - 4px ) ); /* -4px centres on images, not pb-2 */
	z-index:          2;
	width:            32px;
	height:           32px;
	padding:          0;
	margin:           0;
	border-radius:    9999px;
	border:           1px solid #e5e7eb;
	border-style:     solid;
	border-width:     1px;
	border-color:     #e5e7eb;
	background:       rgba( 255, 255, 255, .9 );
	background-color: rgba( 255, 255, 255, .9 );
	color:            #6b7280;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	cursor:           pointer;
	transition:       background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	font-size:        inherit;
	font-weight:      inherit;
	text-transform:   none;
	letter-spacing:   normal;
	box-shadow:       0 1px 4px rgba( 0, 0, 0, .12 );
}

.apg-scroll-btn--prev { left:  4px; }
.apg-scroll-btn--next { right: 4px; }

body .apg-thumbs-wrap .apg-scroll-btn:hover {
	background:       #ffffff;
	background-color: #ffffff;
	border-color:     #1660aa;
	color:            #1660aa;
}

body .apg-thumbs-wrap .apg-scroll-btn.apg-scroll-btn--hidden {
	visibility:     hidden;
	pointer-events: none;
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */

.apg-notice {
	padding:       16px;
	border:        1px dashed #d1d5db;
	border-radius: 8px;
	color:         #6b7280;
	font-size:     13px;
	text-align:    center;
}