/* =========================================================
   RESPONSIVE.CSS
   GLOBAL RESPONSIVE SYSTEM
   PrintStudio by Studio2
========================================================= */

/* =========================================================
   LARGE DEVICES
========================================================= */

@media (max-width: 1400px) {

  .container {

    max-width: 1200px;

  }

}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

  .container {

    max-width: 100%;

    padding:
      0
      28px;

  }

  /* GRID */

  .product-grid,
  .theme-grid,
  .pricing-grid,
  .premium-grid,
  .premium-size-grid,
  .premium-features-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  /* CART */

  .basket-layout {

    grid-template-columns: 1fr;

  }

  .basket-summary {

    position: static;

  }

  /* STORYBOOK */

  .storybook-spotlight-box,
  .book-offer-card {

    grid-template-columns: 1fr;

  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

  /* =====================================================
     NAVBAR
  ===================================================== */

  .mobile-toggle {

    display: flex;

  }

  .nav-menu {

    position: fixed;

    top: 90px;
    left: 20px;
    right: 20px;

    flex-direction: column;

    align-items: flex-start;

    gap: 0;

    padding: 20px;

    border-radius: 28px;

    background-color: white;

    border:
      1px solid rgba(226,232,240,0.8);

    box-shadow: var(--shadow-xl);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: var(--transition-normal);

    z-index: 999;

  }

  .nav-menu.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }

  .nav-link {

    width: 100%;

    padding:
      16px
      0;

    border-bottom:
      1px solid rgba(226,232,240,0.6);

  }

  .nav-link:last-child {

    border-bottom: none;

  }

  /* =====================================================
     HERO
  ===================================================== */

  .kids-hero-title,
  .pricing-title,
  .basket-title,
  .faq-title {

    font-size: 4rem;

    letter-spacing: -1px;

  }

  .kids-hero-description,
  .pricing-description,
  .basket-description,
  .faq-description {

    font-size: 1rem;

  }

  /* =====================================================
     GRIDS
  ===================================================== */

  .product-grid,
  .theme-grid,
  .pricing-grid,
  .premium-grid,
  .premium-size-grid,
  .premium-features-grid,
  .basket-trust-grid {

    grid-template-columns: 1fr;

  }

  /* =====================================================
     CTA
  ===================================================== */

  .premium-cta-box {

    padding:
      80px
      36px;

  }

  .premium-cta-content h2 {

    font-size: 3rem;

  }

  /* =====================================================
     GUIDE
  ===================================================== */

  .guide-grid {

    grid-template-columns: 1fr;

  }

  /* =====================================================
     CUSTOM BOX
  ===================================================== */

  .custom-order-box {

    flex-direction: column;

    align-items: flex-start;

  }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  /* =====================================================
     GLOBAL
  ===================================================== */

  .section {

    padding:
      80px
      0;

  }

  .container {

    padding:
      0
      20px;

  }

  /* =====================================================
     NAVBAR
  ===================================================== */

  .navbar {

    padding:
      12px
      16px;

  }

  .nav-container {
    min-height: 64px;
    gap: 0;
    padding: 0 8px;
  }

  .logo {
    flex: 1;
    min-width: fit-content;
  }

  .logo-main {
    font-size: 1.3rem;
  }

  .logo-sub {
    font-size: 0.7rem;
  }

  /* Basket Button - Smaller & Simple */
  .nav-cta {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 48px;
    padding: 6px 10px;
    min-width: auto;
    height: auto;
    gap: 4px;
    border-radius: 24px;
    background: linear-gradient(90deg, #7c3aed 0%, #ec4899 100%);
    font-size: 0.75rem;
  }

  .nav-cta .basket-icon {
    width: 16px;
    height: 16px;
  }

  .nav-cta .floating-basket-count {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
    margin-left: -2px;
  }

  /* Mobile Toggle - Simple Hamburger */
  .mobile-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    width: auto;
    height: auto;
    gap: 5px;
    border-radius: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    flex-direction: column;
  }

  .mobile-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-black);
    border-radius: 1px;
    transition: all 300ms ease;
    display: block;
  }

  /* Hamburger Animation */
  .mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .nav-menu {
    top: 65px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    max-height: 100vh;
    overflow-y: auto;
  }

  .nav-menu.active {
    display: flex !important;
  }

  /* =====================================================
     HERO
  ===================================================== */

  .premium-kids-hero,
  .pricing-hero,
  .basket-hero,
  .faq-hero {

    padding:
      120px
      0
      80px;

  }

  .kids-hero-title,
  .pricing-title,
  .basket-title,
  .faq-title {

    font-size: 3rem;

    line-height: 1.05;

  }

  .hero-actions,
  .premium-cta-actions {

    flex-direction: column;

  }

  .hero-actions .btn,
  .premium-cta-actions .btn {

    width: 100%;

  }

  .hero-tags {

    gap: 10px;

  }

  .hero-tags span {

    font-size: 0.82rem;

  }

  /* =====================================================
     CARDS
  ===================================================== */

  .product-card,
  .theme-card,
  .pricing-card,
  .premium-card,
  .premium-size-card,
  .premium-feature-card {

    border-radius: 28px;

  }

  .product-card-content,
  .theme-card-content {

    padding: 24px;

  }

  /* =====================================================
     STORYBOOK
  ===================================================== */

  .storybook-spotlight-box,
  .book-offer-card {

    padding:
      44px
      26px;

    gap: 34px;

    border-radius: 32px;

  }

  .storybook-left h2,
  .book-offer-left h2 {

    font-size: 2.4rem;

  }

  .storybook-price-box {

    padding: 30px;

  }

  .new-price {

    font-size: 3rem;

  }

  /* =====================================================
     SWITCHERS
  ===================================================== */

  .product-switcher,
  .gender-switcher {

    flex-direction: column;

  }

  .product-switch-btn,
  .gender-btn {

    width: 100%;

  }

  /* =====================================================
     MODALS
  ===================================================== */

  .customize-modal {

    padding: 20px;

  }

  .customize-modal-content {

    grid-template-columns: 1fr;

    max-height: 92vh;

    overflow-y: auto;

    border-radius: 30px;

  }

  .customize-left {

    padding: 20px;

  }

  .customize-right {

    padding: 30px 24px;

  }

  .customize-title {

    font-size: 2rem;

  }

  .frame-options {

    grid-template-columns: 1fr;

  }

  /* =====================================================
     CART
  ===================================================== */

  .basket-item {

    grid-template-columns: 1fr;

    padding: 24px;

  }

  .basket-item-image {

    max-width: 260px;

  }

  .basket-item-top,
  .basket-item-bottom {

    flex-direction: column;

    align-items: flex-start;

  }

  .summary-card,
  .checkout-box {

    padding: 28px;

  }

  .checkout-title {

    font-size: 1.8rem;

  }

  /* =====================================================
     EMPTY CART
  ===================================================== */

  .empty-basket {

    padding:
      70px
      24px;

  }

  .empty-basket h2 {

    font-size: 2.5rem;

  }

  /* =====================================================
     FAQ
  ===================================================== */

  .faq-question {

    padding: 24px;

  }

  .faq-answer {

    padding:
      0
      24px
      24px;

  }

  /* =====================================================
     FOOTER
  ===================================================== */

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  /* =====================================================
     GLOBAL
  ===================================================== */

  body {

    font-size: 15px;

  }

  .section {

    padding:
      70px
      0;

  }

  /* =====================================================
     HERO
  ===================================================== */

  .kids-hero-title,
  .pricing-title,
  .basket-title,
  .faq-title {

    font-size: 2.5rem;

  }

  .kids-section-title,
  .pricing-section-header h2 {

    font-size: 2.2rem;

  }

  /* =====================================================
     BUTTONS
  ===================================================== */

  .btn {

    width: 100%;

    justify-content: center;

  }

  /* =====================================================
     CARDS
  ===================================================== */

  .product-card-content,
  .theme-card-content,
  .pricing-card,
  .premium-card {

    padding: 22px;

  }

  /* =====================================================
     SUMMARY
  ===================================================== */

  .summary-title {

    font-size: 1.6rem;

  }

  .total-row strong {

    font-size: 1.8rem;

  }

  /* =====================================================
     CTA
  ===================================================== */

  .premium-cta-box {

    padding:
      60px
      22px;

    border-radius: 30px;

  }

  .premium-cta-content h2 {

    font-size: 2.2rem;

  }

}