/* =====================================================================
   Homepage sections — loaded only on is_front_page()
   ===================================================================== */

/* HERO --------------------------------------------------------------- */
.sk-hero { padding-block: 56px 48px; overflow: hidden; position: relative; background: linear-gradient(180deg, var(--sk-primary-light) 0%, #fff 70%); }

/* Hero slider: one full-width slide at a time. With a single slide this
   is visually identical to the old static hero — scroll-snap on one
   item has nothing to snap between. */
.sk-hero__slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.sk-hero__slider::-webkit-scrollbar { display: none; }
.sk-hero__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.sk-carousel-dots--hero { margin-top: 28px; }

.sk-hero__inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.sk-hero__custom-image { display: flex; align-items: center; justify-content: center; }
.sk-hero__custom-image-img { width: 100%; height: auto; border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-lg); }

.sk-hero__heading { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.2; margin-bottom: 16px; }
.sk-hero__heading span { display: block; color: var(--sk-primary); }
.sk-hero__subheading { font-size: 16px; color: var(--sk-text-light); max-width: 440px; margin-bottom: 24px; }

.sk-btn--arrow::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: 2px; }

.sk-hero__quick-features { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.sk-hero__quick-features li { display: flex; align-items: center; gap: 10px; }
.sk-hero__quick-features .sk-icon { width: 1.4em; height: 1.4em; color: var(--sk-primary); }
.sk-hero__quick-features strong { display: block; font-size: 13px; }
.sk-hero__quick-features small { color: var(--sk-text-light); font-size: 11px; }

.sk-hero__illustration { position: relative; }
.sk-hero__mockup { background: #fff; border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-lg); overflow: visible; position: relative; }
.sk-hero__mockup-bar {
	display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--sk-text);
	border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0; color: rgba(255,255,255,.7); font-size: 12px;
}
.sk-hero__mockup-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.sk-hero__mockup-nav { display: none; }
.sk-hero__mockup-btn { margin-left: auto; background: var(--sk-primary); color: #fff; padding: 5px 12px; border-radius: var(--sk-radius-pill); font-size: 11px; font-weight: 600; }
.sk-hero__mockup-body { background: var(--sk-text); padding: 24px; display: flex; gap: 20px; align-items: flex-start; }
.sk-hero__mockup-text { color: #fff; max-width: 40%; }
.sk-hero__mockup-text strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 14px; }
.sk-hero__mockup-preview { flex: 1; background: #fff; border-radius: var(--sk-radius); padding: 12px; }
.sk-hero__mockup-preview-label { font-size: 11px; font-weight: 700; color: var(--sk-text-light); display: block; margin-bottom: 10px; }
.sk-hero__mockup-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sk-hero__mockup-preview-grid span { display: block; aspect-ratio: 4/3; border-radius: 6px; background: var(--sk-bg-soft); border: 1px solid var(--sk-border-light); }

.sk-hero__mockup-badge {
	position: absolute; bottom: -22px; right: 24px; width: 64px; height: 64px; border-radius: 50%;
	background: var(--sk-primary); color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 26px; font-weight: 800; font-family: var(--sk-font-heading); box-shadow: var(--sk-shadow-lg);
	border: 3px solid #fff;
}

.sk-hero__mockup-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.sk-hero__mockup-feature {
	background: #fff; border-radius: var(--sk-radius); padding: 12px; display: flex; align-items: center; gap: 8px;
	box-shadow: var(--sk-shadow-sm); border: 1px solid var(--sk-border-light);
}
.sk-hero__mockup-feature .sk-icon { width: 1.3em; height: 1.3em; color: var(--sk-primary); flex-shrink: 0; }
.sk-hero__mockup-feature strong { display: block; font-size: 12px; }
.sk-hero__mockup-feature small { font-size: 10px; color: var(--sk-text-muted); }

/* CATEGORIES ----------------------------------------------------------- */
.sk-categories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sk-category-card {
	background: #fff; border: 1px solid var(--sk-border-light); border-radius: var(--sk-radius-lg);
	padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px;
	transition: all var(--sk-transition);
}
.sk-category-card:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg); border-color: transparent; }
.sk-category-card__icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--sk-primary); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; overflow: hidden;
	margin-bottom: 8px;
}
.sk-category-card__icon .sk-icon { width: 1.4em; height: 1.4em; }
.sk-category-card__icon-img { width: 100%; height: 100%; object-fit: cover; }
.sk-category-card__name { font-weight: 700; font-size: 16px; }
.sk-category-card__desc { font-size: 13px; color: var(--sk-text-light); margin-bottom: 10px; }
.sk-category-card__link { font-size: 13px; font-weight: 700; color: var(--sk-primary); display: inline-flex; align-items: center; gap: 4px; }
.sk-category-card:hover .sk-category-card__arrow { transform: translateX(3px); }
.sk-category-card__arrow { transition: transform var(--sk-transition); display: inline-block; }

/* BEST SELLERS / NEW ARRIVALS ------------------------------------------ */
.sk-best-new__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* SPECIAL OFFER (countdown banner) --------------------------------------- */
.sk-special-offer__inner {
	background: var(--sk-primary); border-radius: var(--sk-radius-lg); padding: 32px 40px;
	display: flex; align-items: center; gap: 24px; color: #fff; flex-wrap: wrap;
}
.sk-special-offer__icon {
	width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--sk-primary);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sk-special-offer__icon .sk-icon { width: 1.8em; height: 1.8em; }
.sk-special-offer__text { flex: 1; min-width: 220px; }
.sk-special-offer__text h2 { color: #fff; margin-bottom: 4px; font-size: 22px; }
.sk-special-offer__text p { margin: 0 0 14px; opacity: .9; font-size: 14px; }
.sk-special-offer__countdown { display: flex; gap: 10px; }
.sk-countdown-box {
	background: rgba(255,255,255,.15); border-radius: var(--sk-radius-sm); padding: 10px 14px;
	text-align: center; min-width: 62px;
}
.sk-countdown-box span { display: block; font-size: 20px; font-weight: 800; font-family: var(--sk-font-heading); }
.sk-countdown-box small { font-size: 10px; opacity: .85; text-transform: uppercase; letter-spacing: .03em; }

/* OUR PARTNERS ------------------------------------------------------------ */
.sk-partners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.sk-partners__item { font-family: var(--sk-font-heading); font-weight: 700; font-size: 18px; color: var(--sk-text-muted); opacity: .8; }

/* WHY CHOOSE US ---------------------------------------------------------- */
.sk-why-choose-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sk-why-choose-us__card { background: #fff; border-radius: var(--sk-radius-lg); padding: 28px; box-shadow: var(--sk-shadow); text-align: center; }
.sk-why-choose-us__icon { width: 52px; height: 52px; color: var(--sk-primary); margin-bottom: 16px; }
.sk-why-choose-us__card p { color: var(--sk-text-light); font-size: 14px; margin: 0; }

/* TESTIMONIALS ------------------------------------------------------------ */
.sk-testimonials { background: var(--sk-bg-soft); }
.sk-testimonials__carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sk-testimonial-card { background: #fff; border-radius: var(--sk-radius-lg); padding: 28px; box-shadow: var(--sk-shadow); }
.sk-testimonial-card__quote { font-size: 40px; color: var(--sk-primary-light); font-family: Georgia, serif; line-height: 1; }
.sk-testimonial-card p { font-style: italic; color: var(--sk-text-light); }
.sk-testimonial-card__author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.sk-testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sk-testimonial-card__author div { flex: 1; }
.sk-testimonial-card__author strong { display: block; font-size: 14px; }
.sk-testimonial-card__author span { font-size: 12px; color: var(--sk-text-muted); }

/* HOME NEWSLETTER ------------------------------------------------------------ */
.sk-home-newsletter__box {
	background: linear-gradient(120deg, var(--sk-primary-light) 0%, var(--sk-secondary-light) 100%);
	border-radius: var(--sk-radius-lg);
	padding: 32px 40px;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.sk-home-newsletter__icon {
	flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%;
	background: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: var(--sk-shadow-sm);
}
.sk-home-newsletter__text { flex: 1 1 260px; min-width: 220px; }
.sk-home-newsletter__text h2 { font-size: 20px; margin: 0 0 6px; color: var(--sk-text); }
.sk-home-newsletter__text p { margin: 0; color: var(--sk-text-light); font-size: 14px; }
.sk-home-newsletter__form-col { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-home-newsletter .sk-newsletter-form { gap: 10px; }
.sk-home-newsletter .sk-newsletter-form__message { text-align: left; margin: 0; }
.sk-home-newsletter__privacy { margin: 0; font-size: 12px; color: var(--sk-text-muted); }

/* FEATURED AUTHORS ------------------------------------------------------------ */
.sk-featured-authors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sk-author-card { background: #fff; border-radius: var(--sk-radius-lg); padding: 28px; text-align: center; box-shadow: var(--sk-shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sk-author-card__avatar { border-radius: 50%; width: 90px; height: 90px; object-fit: cover; margin-bottom: 6px; }
.sk-author-card__count { font-size: 13px; color: var(--sk-text-muted); }

/* BLOG GRID — moved to assets/css/blog.css (redesigned there) so it loads
   correctly on the real blog listing page, not just the homepage teaser.
   blog.css is now enqueued on is_front_page() too, see inc/enqueue.php. */

/* LATEST FROM BLOG (homepage teaser) — overlay/editorial card design.
   Uses its own .sk-latest-blog-grid / .sk-latest-blog-card classes
   (see template-parts/home/latest-blog-card.php) so this section has a
   distinct look without touching .sk-blog-grid / .sk-blog-card, which
   stay exactly as they were on the real blog listing, archive, search,
   and product grids. */
.sk-latest-blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-gap); }

.sk-latest-blog-card { border-radius: var(--sk-radius-lg); overflow: hidden; box-shadow: var(--sk-shadow); transition: box-shadow var(--sk-transition), transform var(--sk-transition); }
.sk-latest-blog-card:hover { transform: translateY(-6px); box-shadow: var(--sk-shadow-lg); }
.sk-latest-blog-card__link { display: block; position: relative; }
.sk-latest-blog-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--sk-bg-soft); }
.sk-latest-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms cubic-bezier(.4, 0, .2, 1); }
.sk-latest-blog-card:hover .sk-latest-blog-card__media img { transform: scale(1.07); }

.sk-latest-blog-card__generated { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--sk-gradient); color: #fff; }
.sk-latest-blog-card__generated .sk-svg-icon { width: 40px; height: 40px; opacity: .9; }

.sk-latest-blog-card__badge {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	font-family: var(--sk-font-body); font-size: 11px; font-weight: 700;
	padding: 6px 13px; border-radius: var(--sk-radius-pill);
	background: rgba(255, 255, 255, .94); color: var(--sk-primary-dark);
}

.sk-latest-blog-card__scrim {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	padding: 40px 18px 16px;
	background: linear-gradient(to top, rgba(10, 14, 26, .92) 0%, rgba(10, 14, 26, .62) 55%, rgba(10, 14, 26, 0) 100%);
}
.sk-latest-blog-card__title {
	font-family: var(--sk-font-heading); font-weight: 700; font-size: 15.5px; line-height: 1.4; margin: 0 0 8px; color: #fff;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-latest-blog-card__meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: rgba(255, 255, 255, .82); }
.sk-latest-blog-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.sk-latest-blog-card__meta-item .sk-svg-icon { width: 12px; height: 12px; flex-shrink: 0; }

@media (max-width: 1279px) { .sk-latest-blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023px) { .sk-latest-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
	.sk-latest-blog-grid { grid-template-columns: 1fr; }
	.sk-latest-blog-card__media { aspect-ratio: 16/10; }
}