/* ═══════════════════════════════════════════════════════════
   PERFORA CLONE — FULL RESPONSIVE STYLES
   Mobile-first · Tablet · Desktop
   ═══════════════════════════════════════════════════════════ */

/* ── Global ── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  overflow-x: hidden;
  min-width: 320px;
  width: 100%;
  max-width: 100vw;
  margin: 0;
}

#site-header,
#site-footer,
.header-wrapper,
.anb-sticky {
  width: 100%;
  max-width: 100%;
}

main {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Prevent section overflow on small screens */
.deal-countdown,
.shop-by-concern-section,
.video-reviews-section,
.section[data-tabs],
.tab__panel,
.concern-panel {
  overflow: hidden;
  max-width: 100%;
}

.products-grid,
.pdp-layout,
.product-page-grid {
  max-width: 100%;
}

.s-header__title,
.h1, .h2, .h3 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Touch-friendly buttons */
.btn-large,
.tab__link,
.concern-tab,
.product-carousel__arrow,
.pdp-qty__btn {
  min-height: 44px;
}

/* ── Product images ── */
.product-img,
.product-card .card__media img,
.product-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8f8fa;
}

.product-gallery__main img,
.pdp-gallery__image {
  display: block;
  width: 100%;
  object-fit: contain;
  background: #f8f8fa;
}

@media (min-width: 769px) {
  .product-gallery__main img,
  .pdp-gallery__image {
    height: 100%;
  }
}

@media (max-width: 768px) {
  .product-gallery__main img,
  .pdp-gallery__image,
  .pdp-gallery__video {
    height: auto;
    max-height: min(68vw, 320px);
  }
}

.card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card .card__media {
  aspect-ratio: 1;
  background: #f8f8fa;
  border-radius: 4px;
}

.product-gallery {
  position: sticky;
  top: calc(var(--header-height, 68px) + 16px);
}

.product-gallery__main {
  aspect-ratio: 1;
  background: #f8f8fa;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.product-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.product-gallery__thumbs::-webkit-scrollbar { height: 0; }

.product-gallery__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #f8f8fa;
  padding: 0;
}

.product-gallery__thumb.active { border-color: #212121; }

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card .card__media img {
  max-width: none;
}

@media (min-width: 769px) {
  .product-gallery__main img,
  .pdp-gallery__image {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .product-gallery__main img,
  .pdp-gallery__image,
  .pdp-gallery__video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(68vw, 320px);
    object-fit: contain;
  }

  .pdp-gallery__main,
  .product-gallery__main {
    aspect-ratio: unset !important;
    max-height: min(72vw, 340px);
    min-height: 240px;
  }
}

/* ── Header ── */
@media (max-width: 1024px) {
  .header {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    grid-template-areas: "menu-btn logo icons" !important;
    align-items: center !important;
    padding: 8px var(--gutter-container) !important;
    min-height: var(--header-height, 56px) !important;
    gap: 8px !important;
  }

  .header__menu-btn {
    grid-area: menu-btn;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    width: 44px;
    height: 44px;
  }

  .header__logo {
    grid-area: logo;
    justify-content: center !important;
    margin: 0 !important;
  }

  .header__logo-link { margin: 0 auto; }

  .header__logo-img {
    max-width: 100px !important;
    width: 100px !important;
    height: auto;
  }

  .header__menu { display: none !important; }

  .header__icons--right {
    grid-area: icons;
    margin-left: 0 !important;
    gap: 4px !important;
  }

  .header__icon .btn-icon {
    width: 44px;
    height: 44px;
  }

  .d-none-lg { display: flex !important; }

  .mega-menu-wrapper { display: none !important; }
}

@media (min-width: 1025px) {
  .header.logo-position--middle-center,
  .header {
    display: grid !important;
    grid-template-columns: 160px 1fr auto !important;
    grid-template-areas: "logo header-nav icon-right" !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .header__menu-btn { display: none !important; }

  .header__logo { grid-area: logo !important; }

  .header__menu {
    grid-area: header-nav !important;
    display: flex !important;
  }

  .header__icons--right {
    grid-area: icon-right !important;
    margin-left: 0 !important;
  }

  .d-none-lg { display: none !important; }
}

/* ── Mobile menu & cart drawer ── */
@media (max-width: 1024px) {
  .mobile-menu-drawer {
    width: min(100%, 360px);
    max-width: 85vw;
  }

  .mobile-menu-drawer nav a {
    display: block;
    padding: 12px 0;
    font-size: 1.6rem;
  }

  .drawer__wrapper,
  .cart-drawer__wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  .drawer.active .drawer__wrapper {
    max-width: 100% !important;
  }

  .cart-drawer.active .cart-drawer__wrapper {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .drawer__wrapper { max-width: 100% !important; }
}

/* ── Hero slider ── */
.hero-slider { width: 100%; overflow: hidden; }
.hero-slide img { width: 100%; height: auto; display: block; }

.hero-slide img.slide-mobile { display: block !important; }
.hero-slide img.slide-desktop { display: none !important; }

@media (min-width: 769px) {
  .hero-slide img.slide-desktop { display: block !important; }
  .hero-slide img.slide-mobile { display: none !important; }
}

/* ── Category slider ── */
.custom-category-section-wrapper {
  overflow: hidden;
  padding: 0 var(--gutter-container);
}

.custom-category-section-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  padding: 0 var(--gutter-container);
}

.custom-category-section-slider {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* ── Section spacing ── */
.section { padding: 32px 0; }

@media (min-width: 769px) {
  .section { padding: 48px 0; }
}

.section .ctnr { max-width: 1400px; margin: 0 auto; }

.s-header__title { font-size: clamp(2rem, 5vw, 3.2rem); }

/* ── Product tabs ── */
.tab__header {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
  padding: 0 var(--gutter-container) 16px;
  gap: 8px;
}

@media (min-width: 769px) {
  .tab__header,
  .product-tabs { justify-content: center; }
}

.tab__header::-webkit-scrollbar { display: none; }

.tab__link {
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  padding: 8px 14px;
  flex-shrink: 0;
}

@media (max-width: 380px) {
  .tab__link {
    padding: 8px 12px;
    font-size: 1.2rem;
  }
}

/* ── Product carousel ── */
.product-carousel {
  overflow: hidden;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.product-carousel__track {
  padding: 8px max(8px, calc(50% - min(40vw, 155px)));
  width: 100%;
  max-width: 100%;
}

.product-carousel__slide {
  flex: 0 0 min(80vw, 300px);
  max-width: 300px;
}

.product-carousel__arrow {
  width: 34px;
  height: 34px;
}

.product-carousel__arrow--prev { left: 6px; }
.product-carousel__arrow--next { right: 6px; }

@media (min-width: 769px) {
  .product-carousel__slide {
    flex: 0 0 min(340px, 30vw);
    max-width: 360px;
  }

  .product-carousel__track {
    padding: 8px max(16px, calc(50% - min(340px, 30vw) / 2));
    gap: 20px;
  }

  .product-carousel__arrow {
    width: 42px;
    height: 42px;
  }

  .product-carousel__arrow--prev { left: 12px; }
  .product-carousel__arrow--next { right: 12px; }

  .product-carousel-card__title { font-size: 17px; }
  .product-carousel-card__subtitle { font-size: 12px; }
}

@media (max-width: 480px) {
  .product-carousel-card__clinical { display: none; }

  .product-carousel__slide {
    flex: 0 0 78vw;
    max-width: none;
  }

  .product-carousel__track {
    padding: 8px max(6px, calc(50% - 39vw));
  }

  .product-carousel-card__badges { gap: 4px; }
  .product-carousel-card__tag { font-size: 9px; padding: 3px 8px; }
}

@media (max-width: 360px) {
  .product-carousel__arrow {
    width: 30px;
    height: 30px;
  }

  .product-carousel__slide { flex: 0 0 76vw; }
}

/* ── Deal of the Day ── */
.deal-countdown { overflow: hidden; }

.deal-carousel .product-carousel__track {
  padding: 24px max(8px, calc(50% - min(40vw, 165px))) 12px;
}

@media (min-width: 769px) {
  .deal-carousel .product-carousel__slide {
    flex: 0 0 min(360px, 32vw);
    max-width: 380px;
  }

  .deal-carousel .product-carousel__track {
    padding: 24px max(16px, calc(50% - min(360px, 32vw) / 2)) 12px;
  }
}

@media (max-width: 480px) {
  .deal-countdown { padding: 32px 0 28px; }

  .deal-countdown__logo { max-width: 180px; }

  .deal-countdown__timer .countdown-unit span {
    min-width: 48px;
    font-size: 20px;
    padding: 8px 6px;
  }

  .deal-card__title { font-size: 15px; }
  .deal-card__offer { width: 56px; height: 56px; font-size: 9px; }

  .deal-countdown__cta {
    min-width: auto;
    width: calc(100% - 32px);
    max-width: 280px;
  }
}

/* ── Video reels ── */
.video-reviews-section { overflow: hidden; }

.video-reels-track {
  padding: 0 var(--gutter-container) 8px;
}

@media (max-width: 480px) {
  .video-reel-card { flex: 0 0 200px; }
}

@media (min-width: 769px) {
  .video-reel-card { flex: 0 0 260px; }
}

/* ── Shop by Concern ── */
.shop-by-concern-section { overflow: hidden; }

.concern-tabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px var(--gutter-container) 4px;
  justify-content: flex-start;
}

@media (min-width: 769px) {
  .concern-tabs { justify-content: center; }
}

.concern-tabs::-webkit-scrollbar { height: 0; }

@media (max-width: 560px) {
  .concern-tab__icon { width: 64px; height: 64px; }
  .concern-tab__icon img { width: 44px; height: 44px; }
  .concern-tab__label { font-size: 12px; }
  .concern-tab { min-width: 80px; }
}

@media (max-width: 360px) {
  .concern-tab__icon { width: 56px; height: 56px; }
  .concern-tab__icon img { width: 38px; height: 38px; }
  .concern-tab__label { font-size: 11px; }
}

/* ── Product grid (collections) ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 var(--gutter-container);
}

@media (min-width: 480px) {
  .products-grid { gap: 16px; }
}

@media (min-width: 769px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1025px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .product-card .card__heading { font-size: 14px; }
  .product-card .card__subtitle {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card .card__vendor { display: none; }
  .product-card .btn-large { min-height: 40px; font-size: 13px; padding: 0 12px; }
  .rating-badge { font-size: 10px; padding: 3px 6px; top: 8px; left: 8px; }
  .bestseller-badge { font-size: 9px; padding: 3px 8px; top: 8px; }
}

/* ── Standard product page ── */
.product-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 16px var(--gutter-container) 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-page-grid > * {
  min-width: 0;
}

@media (min-width: 769px) {
  .product-page-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 32px var(--gutter-container) 64px;
  }
}

.product-details .product__title,
.product-details h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

@media (max-width: 768px) {
  .product-gallery { position: static; }
  .size-option, .color-option { font-size: 12px; padding: 8px 14px; }
  .product-gallery__thumb { width: 56px; height: 56px; }
}

/* ── Extended PDP (water-flosser) ── */
.pdp-layout {
  padding: 16px var(--gutter-container) 32px;
}

@media (min-width: 769px) {
  .pdp-layout {
    padding: 32px var(--gutter-container) 64px;
  }
}

@media (max-width: 768px) {
  .pdp-gallery__main { position: static; }
  .pdp-gallery__thumb { flex: 0 0 60px; width: 60px; height: 60px; }
  .pdp-price-block__sale { font-size: 24px; }
  .pdp-details__title { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  .pdp-section { padding: 32px var(--gutter-container); }
  .pdp-review-bar { grid-template-columns: 28px 1fr 70px; font-size: 11px; }
  .pdp-offers__grid { grid-template-columns: 1fr; }
  .pdp-personalize__label { align-items: flex-start; }
  .pdp-qty { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .pdp-gallery__counter { font-size: 11px; bottom: 8px; right: 8px; }
  .pdp-faq-item summary { font-size: 14px; }
}

/* ── Footer ── */
@media (max-width: 768px) {
  footer .rw {
    flex-direction: column;
    margin: 0 !important;
  }

  footer .clm {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  footer .footer__nav__list { grid-template-columns: 1fr !important; }
  .footer-newsletter { margin-top: 0 !important; }
  footer .p-sides { padding-left: 0; padding-right: 0; }
  .footer-newsletter-form .d-flex { flex-direction: column; }
  .footer-newsletter-form input,
  .footer-newsletter-form button { width: 100%; }
}

@media (max-width: 480px) {
  footer.pt-48 { padding-top: 32px !important; }
  footer .h6 { font-size: 1.4rem; }
}

/* ── Info pages ── */
.page-content {
  padding: 24px var(--gutter-container);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .page-content { padding: 48px var(--gutter-container); }
}

.page-content h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

/* ── Collection header ── */
.collection-header { padding: 24px var(--gutter-container); }

.collection-header h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

/* ── Our story ── */
.our-story-section {
  padding: 32px var(--gutter-container);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .our-story-section { padding: 48px 24px; }
}

.our-story-section .btn-large {
  width: 100%;
  max-width: 320px;
}

/* ── Announcement bar ── */
@media (max-width: 560px) {
  .announcement-bar { font-size: 12px; padding: 5px 0; }
  .announcement-item { padding: 0 16px; gap: 6px; }
  .announcement-item svg { width: 12px; height: 12px; }
}

/* ── Focus banner ── */
.focus-banner img { width: 100%; height: auto; display: block; }

.focus-banner .slide-mobile { display: block; }
.focus-banner .slide-desktop { display: none; }

@media (min-width: 769px) {
  .focus-banner .slide-desktop { display: block; }
  .focus-banner .slide-mobile { display: none; }
}

/* ── Show more button ── */
.show-more-btn {
  width: auto;
  max-width: calc(100% - 32px);
}

@media (max-width: 480px) {
  .show-more-btn {
    min-width: auto;
    width: calc(100% - 48px);
    max-width: 280px;
  }
}

/* ── Countdown (generic) ── */
@media (max-width: 480px) {
  .countdown-unit span { font-size: 22px; }
  .countdown-unit { min-width: 48px; }
}

/* ── Safe area (notched phones) ── */
@supports (padding: max(0px)) {
  .mobile-menu-drawer,
  .drawer__wrapper {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .header-wrapper {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── Landscape phone ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-slider { max-height: 70vh; }
  .hero-slide img { object-fit: cover; max-height: 70vh; }
  .mobile-menu-drawer { max-height: 100vh; overflow-y: auto; }
}

/* ── Print ── */
@media print {
  .announcement-bar,
  .header-wrapper,
  .product-carousel__arrow,
  .video-reels-track,
  footer { display: none !important; }
}