/* =====================================================================
   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); }

	/* Shop archive grid: #sk-shop-results .sk-product-grid (shop.css) sets
	   its column count from the Theme Options "columns" setting via
	   --sk-shop-columns, and because that selector includes an ID it beats
	   the plain-class rule above on specificity alone, no matter which
	   stylesheet loads last. Repeating the same ID here at every breakpoint
	   is what actually lets the shop grid collapse on smaller screens. */
	#sk-shop-results .sk-product-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-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-shop-results .sk-product-grid { 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; }
	#sk-shop-results .sk-product-grid { 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-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;
		/* Full-bleed width must come from the parent's own box, not 100vw —
		   100vw can include the OS scrollbar gutter or the browser's
		   dynamic toolbar allowance depending on device/browser, which was
		   making this row a few pixels wider than the real screen and
		   forcing the whole page into horizontal scroll/pinch-zoom on
		   Home. calc(100% + gutter*2) always matches the true available
		   width exactly, on every device. */
		width: calc(100% + var(--sk-gutter) * 2); 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;
		width: calc(100% + var(--sk-gutter) * 2); 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; }
}