/* =====================================================================
   Responsive — loaded last so it wins the cascade at each breakpoint.
   Breakpoints: 1279px (laptop), 1023px (tablet), 767px (mobile), 479px (small mobile)
   ===================================================================== */

/* ---------------------------------------------------------------------
   LAPTOP (≤1279px)
   --------------------------------------------------------------------- */
@media (max-width: 1279px) {
	.sk-product-grid, .sk-product-grid--4col,
	.sk-blog-grid,
	.related.products ul.products,
	.sk-categories__grid,
	.sk-why-choose-us__grid,
	.sk-featured-authors__grid { grid-template-columns: repeat(3, 1fr); }

	.sk-single-product__top { gap: 28px; }
	.sk-single-product__pricing-row { grid-template-columns: 1fr 280px; gap: 28px; }
	.sk-mega-panel__inner { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   TABLET (≤1023px)
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {

	.sk-hero__inner { grid-template-columns: 1fr; text-align: center; }
	.sk-hero__quick-features { justify-content: center; }
	.sk-hero__subheading { margin-inline: auto; }
	.sk-hero__illustration { margin-top: 32px; }
	.sk-hero__mockup-features { grid-template-columns: repeat(2, 1fr); }

	.sk-categories__grid { grid-template-columns: repeat(3, 1fr); }
	.sk-product-grid, .sk-product-grid--4col,
	.sk-blog-grid,
	.related.products ul.products,
	ul.products,
	.sk-why-choose-us__grid,
	.sk-featured-authors__grid,
	.sk-testimonials__carousel { grid-template-columns: repeat(2, 1fr); }

	.sk-best-new__grid { grid-template-columns: 1fr; gap: 48px; }

	.sk-shop-layout { grid-template-columns: 1fr; }
	.sk-shop-filters {
		position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; z-index: 1000;
		transform: translateX(-100%); transition: transform var(--sk-transition);
		overflow-y: auto; border-radius: 0;
	}
	.sk-shop-filters.is-open { transform: translateX(0); }
	.sk-shop-filters__mobile-close { display: block; position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; }

	/* Toolbar: Filters button stays left, sort dropdown stays right, on
	   the same row. The result-count text drops to its own full-width
	   row underneath instead of fighting them for space. */
	.sk-shop-toolbar { justify-content: space-between; }
	.sk-shop-toolbar__filters-btn { display: flex; order: 1; }
	.sk-shop-toolbar__count { order: 3; flex-basis: 100%; }
	.sk-shop-toolbar__right { order: 2; margin-left: 0; }
	.sk-shop-toolbar__sort { min-width: 0; flex: 1; }

	.sk-single-product__top { grid-template-columns: 1fr; }
	.sk-single-product__pricing-row { grid-template-columns: 1fr; }

	.sk-blog-layout { grid-template-columns: 1fr; }
	.sk-sidebar { position: static; order: 2; }

	.sk-account-layout { grid-template-columns: 1fr; }
	.sk-account-nav { position: static; max-width: none; }

	.sk-cart-grid { grid-template-columns: 1fr; gap: 22px; }
	.sk-cart-summary-col { position: static; }
	.sk-cart-hero--sidebar { border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0; }

	.sk-dashboard__stats { grid-template-columns: repeat(2, 1fr); }

	.sk-mega-panel__inner { grid-template-columns: repeat(2, 1fr); }
	.sk-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   MOBILE (≤767px)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	:root { --sk-header-height: 64px; --sk-gap: 18px; }

	.sk-topbar, .sk-primary-nav { display: none; }
	.sk-mobile-toggle { display: flex; }
	.sk-main-header__inner { flex-wrap: wrap; padding-block: 12px; gap: 6px; }
	.sk-mobile-page-title {
		display: block; margin: 0; font-size: 17px; font-weight: 700; text-align: left;
		flex: 1; order: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.sk-main-header__inner:has(.sk-mobile-page-title) .sk-logo { display: none; }
	.sk-main-header__inner:has(.sk-mobile-page-title) .sk-header-actions { order: 3; }
	.sk-header-actions { margin-left: auto; }

	/* The bottom app-style nav (below) already has Cart and Account —
	   no need to repeat them up here on small screens. */
	.sk-header-action--cart, .sk-mini-cart, .sk-account-menu, .sk-header-action--account { display: none; }

	.sk-section { padding-block: 40px; }
	.sk-section__header { flex-direction: column; align-items: flex-start; gap: 8px; }
	.sk-section__header--center { align-items: center; }

	.sk-hero { padding-block: 32px 24px; }
	.sk-hero__heading { font-size: 26px; }
	.sk-hero__quick-features { gap: 16px; }
	.sk-hero__illustration { display: none; }

	.sk-categories__grid { grid-template-columns: 1fr; gap: 14px; }
	.sk-category-card { padding: 20px; }

	.sk-product-grid, .sk-product-grid--4col,
	.sk-blog-grid,
	.related.products ul.products,
	ul.products,
	.sk-why-choose-us__grid,
	.sk-featured-authors__grid,
	.sk-blog-grid--related { grid-template-columns: repeat(2, 1fr); gap: 14px; }

	/* Compact product card — keeps the badge + rating but tightens
	   sizing so two cards sit comfortably side by side on a phone
	   width. Applies everywhere .sk-product-card is used (home
	   sections, shop grid, wishlist, search, related). */
	.sk-product-card__body { padding: 10px 12px 12px; gap: 4px; }
	.sk-product-card__title {
		font-size: 13px; line-height: 1.35;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.sk-badge--type { font-size: 10px; padding: 3px 8px; }
	.sk-rating { font-size: 11px; }
	.sk-star { font-size: 12px; }
	.sk-product-card__footer { padding-top: 8px; }

	/* Compact blog card — same idea as the product card above: two
	   cards sit side by side on a phone, so tighten padding/type. */
	.sk-blog-card__body { padding: 12px 14px 14px; }
	.sk-blog-card__title { font-size: 13.5px; margin-bottom: 10px; }
	.sk-blog-card__meta { gap: 8px; font-size: 10.5px; }
	.sk-blog-card__generated { padding: 14px; }
	.sk-blog-card__generated-label { font-size: 14px; }
	.sk-blog-card__generated-icon { width: 42px; height: 42px; border-radius: 12px; }
	.sk-blog-card__generated-icon .sk-svg-icon { width: 20px; height: 20px; }

	/* Toolbar: filter pills scroll horizontally instead of wrapping to
	   many rows; sort + view controls drop to their own full-width row. */
	.sk-blog-toolbar { gap: 12px; }
	.sk-blog-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; width: 100%; scrollbar-width: none; }
	.sk-blog-filters::-webkit-scrollbar { display: none; }
	.sk-blog-filter-pill { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }
	.sk-blog-toolbar__right { width: 100%; justify-content: space-between; }

	.sk-blog-grid.is-list-view { grid-template-columns: 1fr; }
	.sk-blog-grid.is-list-view .sk-blog-card { flex-direction: column; }
	.sk-blog-grid.is-list-view .sk-blog-card__thumb { width: 100%; aspect-ratio: 16/10; }

	.sk-blog-newsletter { flex-direction: column; align-items: flex-start; padding: 22px; }
	.sk-blog-newsletter form { width: 100%; }
	.sk-blog-newsletter input[type="email"] { flex: 1; min-width: 0; }

	.sk-home-newsletter__box { flex-direction: column; align-items: flex-start; padding: 24px 22px; text-align: left; }
	.sk-home-newsletter__form-col { width: 100%; }
	.sk-home-newsletter .sk-newsletter-form { width: 100%; }
	.sk-home-newsletter .sk-newsletter-form input { flex: 1; min-width: 0; }

	.sk-product-card__price { font-size: 14px; }
	.sk-product-card__price del { font-size: 11px; }
	.sk-badge--version-circle { width: 28px; height: 28px; font-size: 9px; top: 8px; right: 8px; }
	.sk-badge--status { top: 8px; left: 8px; font-size: 10.5px; padding: 3px 8px; }
	.sk-wishlist-btn { width: 30px; height: 30px; top: 8px; right: 8px; font-size: 13px; }
	.sk-icon-btn--square { width: 30px; height: 30px; font-size: 13px; }
	/* .sk-pricing-card__love (the wishlist heart beside "Add to Cart" on
	   the single product page) shares the .sk-icon-btn--square class with
	   the product-card cart/quick-view buttons above, so without this it
	   would get squashed to the same fixed 30x30 box and stop matching
	   the Add to Cart button's height — restore its own sizing here. */
	.sk-pricing-card__actions .sk-pricing-card__love { width: 46px; height: auto; }
	/* Quick View drops off the card on mobile — tapping straight through
	   to the product page is the mobile pattern, and it frees up room
	   for the cart button at this width. */
	.sk-product-card__actions [data-quick-view] { display: none; }

	/* Popular Categories + Featured Products become 2-per-view swipeable
	   carousels with dot pagination on mobile (see main.js initCarouselDots). */
	.sk-categories__grid[data-carousel],
	.sk-product-grid[data-carousel] {
		display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
		gap: 14px; margin-inline: calc(var(--sk-gutter) * -1); padding: 0 var(--sk-gutter) 4px;
		max-width: 100vw; scrollbar-width: none;
	}
	.sk-categories__grid[data-carousel]::-webkit-scrollbar,
	.sk-product-grid[data-carousel]::-webkit-scrollbar { display: none; }
	.sk-categories__grid[data-carousel] > *,
	.sk-product-grid[data-carousel] > * {
		flex: 0 0 calc(50% - 7px); scroll-snap-align: start; min-width: 0;
	}

	/* Testimonials: 1-per-view carousel on mobile */
	.sk-testimonials__carousel {
		display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
		gap: 14px; margin-inline: calc(var(--sk-gutter) * -1); padding: 0 var(--sk-gutter) 4px;
		max-width: 100vw; scrollbar-width: none;
	}
	.sk-testimonials__carousel::-webkit-scrollbar { display: none; }
	.sk-testimonials__carousel > * { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }

	.sk-carousel-dots:not([hidden]) { display: flex; }

	/* Best Sellers / New Arrivals carousel: show exactly 2 full cards
	   per view (same calc-based sizing as the other mobile carousels
	   above) instead of a fixed 240px width that cut the 2nd card off
	   mid-way. Extra items are still reachable by swiping. */
	.sk-carousel__item { flex: 0 0 calc(50% - (var(--sk-gap) / 2)); min-width: 0; }


	.sk-special-offer__inner { flex-direction: column; text-align: center; padding: 28px 20px; }
	.sk-special-offer__countdown { flex-wrap: wrap; justify-content: center; }

	.sk-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
	.sk-footer-col--brand { grid-column: 1 / -1; margin-bottom: 24px; }
	.sk-footer-col { padding-block: 14px; border-bottom: 1px solid var(--sk-border); grid-column: 1 / -1; }
	.sk-footer-title__btn { cursor: pointer; }
	.sk-footer-chevron {
		display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transition: transform var(--sk-transition); flex-shrink: 0;
	}
	.sk-footer-col.is-open .sk-footer-chevron { transform: rotate(-135deg); }
	.sk-footer-links-wrap { display: none; overflow: hidden; }
	.sk-footer-col.is-open .sk-footer-links-wrap { display: block; margin-top: 14px; }
	.sk-footer-links-wrap .sk-footer-links { margin: 0; }
	.sk-footer-newsletter__inner { flex-direction: column; text-align: center; }
	.sk-newsletter-form { flex-direction: column; width: 100%; }
	.sk-newsletter-form input { min-width: 0; }
	.sk-footer-bottom__inner { flex-direction: column; text-align: center; }

	.sk-single-post__title { font-size: 26px; }
	.sk-single-post__content { font-size: 16px; }

	/* Post-meta bar: author row spans full width, then date/reading-time
	   and comments/share each pair up into a 2-col grid row, matching
	   the reference mobile layout. */
	.sk-post-meta-bar { gap: 10px; padding-block: 14px; }
	.sk-post-meta-bar__avatar { width: 42px; height: 42px; }
	.sk-post-meta-bar__name { font-size: 14.5px; }
	.sk-post-meta-bar__sub { font-size: 12.5px; }
	.sk-post-meta-bar__actions { gap: 12px; }

	.sk-toc { padding: 16px 18px; }
	.sk-toc__list { columns: 1; }

	.sk-author-box { flex-direction: column; text-align: center; }
	.sk-author-box h3 { justify-content: center; }
	.sk-author-box__social { justify-content: center; }

	.sk-post-nav { grid-template-columns: 1fr; }
	.sk-post-nav__link--next { justify-content: flex-start; text-align: left; }
	.sk-post-nav__all { margin-inline: auto; }

	.sk-single-product__title { font-size: 22px; }
	.sk-single-product__highlights { display: none; }
	.sk-pricing-card { padding: 18px; }
	.sk-trust-strip { grid-template-columns: repeat(2, 1fr); padding: 16px; }

	/* Description/Features/Requirements/.../Reviews tab bar: horizontal
	   swipe-scroll instead of wrapping to a second/third line, so a long
	   tab list stays a single tidy row on a phone. Scrollbar hidden;
	   the row itself is the only affordance, same pattern shoppers
	   already know from app tab bars. */
	.sk-tabs__nav {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.sk-tabs__nav::-webkit-scrollbar { display: none; }
	.sk-tabs__nav-item { flex-shrink: 0; white-space: nowrap; padding: 10px 14px; font-size: 13px; }

	/* Reviews: stack the score card above the star-breakdown bars, and
	   let the "Write a review" button take the full width under the
	   heading instead of squeezing onto the same row. */
	.sk-review-dashboard__header { flex-direction: column; align-items: stretch; }
	.sk-review-dashboard__header .sk-btn { width: 100%; }
	.sk-review-summary { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
	.sk-review-summary__score { padding: 16px 12px; }
	.sk-review-item__inner { gap: 12px; }
	.sk-review-item__avatar { width: 38px; height: 38px; font-size: 13px; }

	/* Write-a-review card: Name/Email stack to one column, stars shrink
	   a touch, card padding tightens so it doesn't feel cramped. */
	.sk-review-form-wrap { padding: 18px; }
	.sk-comment-form { grid-template-columns: 1fr; }
	.sk-star-picker label { font-size: 26px; }

	body.sk-view-list .sk-product-card { flex-direction: column; }
	body.sk-view-list .sk-product-card__media { width: 100%; aspect-ratio: 3/2; }

	/* Mobile shop listing: same 2-per-row compact vertical card as the
	   rest of the site (see the shared .sk-product-card rules above) —
	   the grid/list toggle only makes sense at desktop widths. */
	.sk-shop-toolbar__view { display: none; }
	#sk-shop-results ul.products,
	.sk-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
	body.sk-view-list #sk-shop-results .sk-product-card { flex-direction: column; }

	.sk-quick-view { grid-template-columns: 1fr; }

	/* Cart page — collapse the two-column grid, swap the plain header
	   for the gradient mobile hero, and turn each item row into a
	   stacked card. The item/head rows use the same .sk-cart-item
	   markup as desktop; only the grid-template-areas change here. */
	.sk-cart-grid { grid-template-columns: 1fr; gap: 20px; }
	.sk-cart-summary-col { position: static; }

	.sk-cart-page-header__title { display: none; }
	.sk-cart-page-header { margin-bottom: 14px; }
	.sk-cart-continue { width: 100%; justify-content: center; }

	.sk-cart-hero--mobile { display: flex; }
	.sk-cart-hero--sidebar { display: none; }
	.sk-cart-summary { border-top: 1px solid var(--sk-border-light); border-radius: var(--sk-radius-lg); margin-top: 20px; }

	.sk-cart-item--head { display: none; }
	.sk-cart-items { border-radius: 0; border: none; background: transparent; }

	.sk-cart-item {
		grid-template-columns: 56px 1fr auto;
		grid-template-areas:
			"thumb info price"
			"qty   qty   remove";
		row-gap: 10px;
		padding: 16px;
		background: #fff;
		border: 1px solid var(--sk-border-light);
		border-radius: var(--sk-radius);
		margin-bottom: 12px;
	}
	.sk-cart-items .sk-cart-item:last-child { border-bottom: 1px solid var(--sk-border-light); margin-bottom: 0; }
	.sk-cart-item__thumb { grid-area: thumb; width: 56px; height: 56px; }
	.sk-cart-item__info { grid-area: info; }
	.sk-cart-item__price { grid-area: price; align-self: start; justify-self: end; color: var(--sk-primary); font-weight: 800; }
	.sk-cart-item__qty { grid-area: qty; }
	.sk-cart-item__remove { grid-area: remove; justify-self: end; align-self: center; }
	.sk-cart-item__total { display: none; }

	.sk-cart-actions-row { display: none; }

	.sk-cart-trust { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; margin-top: 24px; }
	.sk-pay-info-card { overflow: hidden; }
	.sk-pay-copy-row { min-width: 0; }

	/* My Account → Dashboard (Overview design) */
	.sk-dashboard__welcome { align-items: flex-start; }
	.sk-dashboard__welcome h2 { font-size: 19px; }
	.sk-dashboard__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.sk-dashboard__stat { padding: 14px; }
	.sk-dashboard__stat-value { font-size: 20px; }
	.sk-dashboard__section { padding: 16px; }
	.sk-dashboard__orders-table { display: none; }
	.sk-dashboard__orders-list { display: block; }
	.sk-dashboard__quick { grid-template-columns: repeat(2, 1fr); }

	.sk-trust-badges { flex-direction: column; gap: 0; background: var(--sk-bg-soft); border-radius: var(--sk-radius); padding: 6px 18px; }
	.sk-trust-badges__item { padding-block: 16px; border-bottom: 1px solid var(--sk-border); min-width: 0; }
	.sk-trust-badges__item:last-child { border-bottom: none; }

	.sk-category-strip {
		display: flex; gap: 16px; overflow-x: auto; padding-block: 4px 16px;
		scrollbar-width: none;
	}
	.sk-category-strip::-webkit-scrollbar { display: none; }

	/* Bottom app-style nav replaces the desktop header actions on small screens */
	.sk-mobile-bottom-nav {
		display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
		background: #fff; border-top: 1px solid var(--sk-border); padding: 8px 0;
		padding-bottom: max(8px, env(safe-area-inset-bottom));
	}
	.sk-mobile-bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--sk-text-light); }
	.sk-mobile-bottom-nav__item.is-active { color: var(--sk-primary); }

	/* Raised center cart button — icon only, no text label */
	.sk-mobile-bottom-nav__item--cart { position: relative; }
	.sk-mobile-bottom-nav__cart-icon {
		position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
		width: 48px; height: 48px; border-radius: 50%; background: var(--sk-gradient);
		display: flex; align-items: center; justify-content: center;
		border: 3px solid var(--sk-bg); box-shadow: var(--sk-shadow-lg);
		transition: transform var(--sk-transition);
	}
	.sk-mobile-bottom-nav__item--cart:active .sk-mobile-bottom-nav__cart-icon { transform: translateX(-50%) scale(.94); }
	.sk-mobile-bottom-nav__item--cart .sk-icon--cart { width: 20px; height: 20px; color: var(--sk-btn-text); }
	.sk-mobile-bottom-nav__badge {
		position: absolute; top: -3px; right: -3px; background: var(--sk-secondary); color: #fff;
		font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center; padding: 0 3px;
		border: 2px solid var(--sk-bg);
	}

	/* Small inline badge for regular (non-raised) nav icons, e.g. Wishlist */
	.sk-mobile-bottom-nav__icon-wrap { position: relative; display: inline-flex; }
	.sk-mobile-bottom-nav__badge--inline { top: -6px; right: -8px; min-width: 14px; height: 14px; font-size: 9px; border-width: 1.5px; }

	body { padding-bottom: 64px; }
	body.sk-no-bottom-nav { padding-bottom: 0; }

	.sk-back-to-top { bottom: 76px; }
	body.sk-no-bottom-nav .sk-back-to-top { bottom: 20px; }

	.sk-404 { padding-block: 56px 44px; }
}

/* ---------------------------------------------------------------------
   SMALL MOBILE (≤479px)
   --------------------------------------------------------------------- */
@media (max-width: 479px) {
	:root { --sk-gutter: 16px; }

	.sk-categories__grid,
	.sk-why-choose-us__grid,
	.sk-featured-authors__grid,
	.sk-testimonials__carousel,
	.sk-footer-grid { grid-template-columns: 1fr; }

	/* Product cards AND blog cards (home grids, shop, wishlist, search,
	   related, blog listing) stay 2-per-row all the way down to the
	   smallest phone — only the gap tightens a touch. */
	.sk-product-grid, .sk-product-grid--4col,
	.related.products ul.products,
	ul.products,
	.sk-blog-grid,
	.sk-blog-grid--related { grid-template-columns: repeat(2, 1fr); gap: 10px; }

	.sk-blog-card__thumb { aspect-ratio: 4/3; }
	.sk-blog-card__body { padding: 10px 12px 12px; }
	.sk-blog-card__title { font-size: 12.5px; margin-bottom: 8px; }
	.sk-blog-card__generated { padding: 10px; }
	.sk-blog-card__generated-label { font-size: 12px; max-width: 60%; }
	.sk-blog-card__generated-icon { width: 34px; height: 34px; border-radius: 10px; }
	.sk-blog-card__generated-icon .sk-svg-icon { width: 16px; height: 16px; }
	.sk-blog-card__meta { font-size: 10.5px; gap: 8px; }
	.sk-blog-card__meta-item .sk-svg-icon { width: 11px; height: 11px; }
	/* Author drops off first at this width — date + comment count is
	   enough context for a card this small; the full byline is one tap
	   away on the post itself. */
	.sk-blog-card__meta-item:nth-child(2) { display: none; }

	.sk-blog-filter-pill { padding: 7px 12px; font-size: 12.5px; }
	.sk-blog-sort select { padding: 8px 30px 8px 12px; font-size: 12.5px; }

	/* Reviews: tighten padding and drop the fixed star-count column
	   width so bars have more room on very narrow phones. */
	.sk-review-summary { padding: 14px; border-radius: var(--sk-radius); }
	.sk-review-summary__number { font-size: 32px; }
	.sk-review-summary__bar-label { width: 40px; font-size: 11.5px; }
	.sk-review-summary__bar-count { width: 22px; font-size: 11.5px; }
	.sk-review-item { padding: 16px 0; }
	.sk-review-item__avatar { width: 34px; height: 34px; font-size: 12px; }
	.sk-review-item__name { font-size: 13px; }
	.sk-review-item__date { font-size: 11px; }
	.sk-review-item__text { font-size: 13px; }

	.sk-review-form-wrap { padding: 14px; border-radius: var(--sk-radius); }
	.sk-star-picker label { font-size: 23px; }
	.sk-star-picker { gap: 2px; }

	/* Search bar stacks to full-width input + full-width button so both
	   stay comfortably tappable on narrow phones. */
	.sk-404__search { flex-direction: column; padding: 8px; gap: 8px; }
	.sk-404__search-input { text-align: center; padding: 8px; }
	.sk-404__search-submit { padding: 11px; justify-content: center; }

	/* Single product page — final tightening pass for very narrow phones.
	   The toggle goes full-width 50/50 so the "Subscription Plans / Save
	   up to X%" label always has room; everything else just loses a
	   little padding/icon size rather than reflowing. */
	.sk-single-product__badges { gap: 6px; }
	.sk-badge--version, .sk-badge--sale, .sk-badge--status-new { padding: 5px 10px; font-size: 11px; }
	.sk-pricing-toggle { display: flex; width: 100%; }
	.sk-pricing-toggle__btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 12px; text-align: center; }
	.sk-pricing-card { padding: 16px; }
	.sk-pricing-card__price span { font-size: 22px; }
	.sk-sidebar-box { padding: 18px; }
	.sk-share-box__icons a, .sk-share-box__icons button { width: 34px; height: 34px; }
	.sk-trust-strip { padding: 14px; gap: 14px 8px; }
	.sk-trust-strip__item { font-size: 11.5px; }
	.sk-trust-strip__item .sk-icon { width: 1.4em; height: 1.4em; }
}