/**
 * PCRN Theme - Comprehensive Responsive Breakpoints
 * Target Viewports: 320, 360, 375, 390, 393, 412, 414, 430, 480, 540, 600, 768, 820, 853, 912, 1024
 * Desktop (1280px+) is strictly LOCKED & preserved.
 */

/* -------------------------------------------------------------
   1. GLOBAL RESPONSIVE GUARDS & UTILITIES (Mobile & Tablet)
   ------------------------------------------------------------- */
@media (max-width: 1279px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

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

  /* Responsive Container Margins */
  .pcrn-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
  .pcrn-product-cards-4col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .pcrn-product-cards-4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

/* -------------------------------------------------------------
   2. TABLET BREAKPOINTS (769px - 1024px)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Header & Navigation */
  /* Mobile Header Top 3-Column Layout: Left (Hamburger) | Center (PCRN Jewellers) | Right (Sign In + Cart) */
  .pcrn-header-top {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .pcrn-header-left-col {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .pcrn-header-search {
    display: none !important;
  }

  .pcrn-mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: var(--pcrn-obsidian) !important;
  }

  .pcrn-header-logo {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .pcrn-logo-img {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
  }

  .pcrn-mobile-logo-img {
    max-height: 32px !important;
  }

  .pcrn-footer-logo-img {
    max-height: 42px !important;
  }

  .pcrn-logo-text {
    font-size: clamp(1.1rem, 4.2vw, 1.45rem) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-block !important;
    text-align: center !important;
  }

  .pcrn-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .pcrn-header-action-btn span {
    display: none !important;
  }

  .pcrn-header-action-btn {
    padding: 6px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 50% !important;
  }

  .pcrn-action-savings-scheme {
    padding: 6px !important;
    border-radius: 50% !important;
    background-color: #c5a059 !important;
    color: #ffffff !important;
  }

  .pcrn-nav-bar {
    display: none !important; /* Hide desktop nav bar on tablet/mobile */
  }

  .pcrn-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  /* Grids & Layouts */
  .pcrn-grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  .pcrn-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .pcrn-split-block {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .pcrn-split-block-reverse {
    direction: ltr !important;
  }

  .pcrn-split-block-reverse > * {
    direction: ltr !important;
  }

  /* Store Locator & Contact Us Page Split Blocks */
  div[style*="grid-template-columns: 360px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="min-height: 600px"] {
    min-height: 380px !important;
    height: 380px !important;
  }

  /* Cart & Checkout Layouts */
  .pcrn-cart-layout,
  .pcrn-checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* About Hero Banner */
  .pcrn-about-hero {
    height: 300px !important;
  }

  /* Lookbook Masonry */
  .pcrn-lookbook-grid {
    column-count: 2 !important;
    column-gap: 16px !important;
  }
  .pcrn-lookbook-item {
    margin-bottom: 16px !important;
  }
}

/* -------------------------------------------------------------
   3. SMALL TABLET & MOBILE LANDSCAPE (577px - 768px)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Header Search compact */
  .pcrn-header-search {
    display: none; /* Hide header search bar; mobile search is inside mobile drawer & sticky search bar */
  }

  .pcrn-logo-text {
    font-size: 1.35rem;
  }

  /* Banner & Section Heights */
  .pcrn-hero-banner-inner {
    min-height: 320px !important;
    padding: 24px 16px !important;
  }

  .pcrn-hero-title {
    font-size: 1.85rem !important;
  }

  /* Section Headings */
  .pcrn-section-heading h2,
  h1 {
    font-size: 1.75rem !important;
  }

  /* Product Grids: 2 columns on mobile/tablet for optimal shopping UX */
  .pcrn-grid-4,
  .pcrn-grid-3,
  .pcrn-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Stacking columns in About Us grid */
  div.pcrn-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pcrn-product-card {
    padding: 10px !important;
  }

  .pcrn-product-card-buttons {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .pcrn-btn {
    min-height: 44px; /* Touch target minimum height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Footer Layout */
  .pcrn-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .pcrn-footer-brand {
    grid-column: span 2 !important;
  }

  /* Store Locator Cards */
  div[style*="padding: 48px 40px"] {
    padding: 28px 20px !important;
  }

  /* WooCommerce Single Product */
  .pcrn-product-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* About Hero Banner */
  .pcrn-about-hero {
    height: 220px !important;
    margin-bottom: 24px !important;
  }
}

/* -------------------------------------------------------------
   4. MOBILE PORTRAIT & SMALL SCREENS (320px - 576px)
   ------------------------------------------------------------- */
@media (max-width: 576px) {
  /* Announcement bar font */
  .pcrn-announcement-bar {
    font-size: 0.675rem;
    padding: 6px 10px;
  }

  /* Header Top Compact */
  .pcrn-header-top {
    padding: 10px 14px;
  }

  .pcrn-action-savings-scheme span {
    display: none; /* Hide text on small mobile, keep icon */
  }

  .pcrn-action-savings-scheme {
    padding: 8px;
    border-radius: 50%;
  }

  /* Homepage Category Circle Bar: Horizontal Scrollable Touch Strip */
  .pcrn-category-scroll-strip,
  div[style*="overflow-x: auto"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }

  div[style*="overflow-x: auto"]::-webkit-scrollbar {
    display: none;
  }

  /* Contact Page Form Fields: Stack inputs to 100% width on narrow screens */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  div[style*="grid-template-columns: 110px 1fr"] {
    grid-template-columns: 100px 1fr !important;
  }

  /* Trust Badges Strip */
  .pcrn-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .pcrn-trust-item {
    font-size: 0.75rem !important;
  }

  /* Footer Layout */
  .pcrn-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .pcrn-footer-brand {
    grid-column: span 1 !important;
  }

  /* Floating WhatsApp & Back-To-Top Buttons */
  .pcrn-floating-actions {
    bottom: 16px !important;
    right: 14px !important;
    gap: 10px !important;
  }

  .pcrn-floating-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Mobile Drawer Styling */
  .pcrn-mobile-drawer-content {
    width: 88% !important;
    max-width: 320px !important;
  }

  .pcrn-mobile-nav-row a,
  .pcrn-mobile-nav-item a {
    font-size: 0.9rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* About Hero Banner */
  .pcrn-about-hero {
    height: 160px !important;
    margin-bottom: 18px !important;
  }

  /* Lookbook Mobile */
  .pcrn-lookbook-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
  }
  .pcrn-lookbook-item {
    margin-bottom: 12px !important;
  }
}

/* -------------------------------------------------------------
   5. ULTRA SMALL SCREENS (320px - 360px)
   ------------------------------------------------------------- */
@media (max-width: 360px) {
  .pcrn-logo-text {
    font-size: 1.2rem !important;
  }

  .pcrn-grid-4,
  .pcrn-grid-3,
  .pcrn-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .pcrn-product-card {
    padding: 8px !important;
  }

  .pcrn-product-title {
    font-size: 0.775rem !important;
  }

  .pcrn-product-price {
    font-size: 0.8rem !important;
  }
}

/* -------------------------------------------------------------
   6. TARGETED MOBILE UX OPTIMIZATIONS (320px - 768px)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Priority 1: Hero Section Mobile UX */
  .pcrn-hero-slider {
    height: 440px !important;
  }

  .pcrn-hero-slide {
    height: 100% !important;
    min-height: 100% !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  .pcrn-hero-overlay {
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.65) 100%) !important;
  }

  .pcrn-hero-section .pcrn-container {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    height: 100% !important;
  }

  .pcrn-hero-content-card {
    max-width: 90% !important;
    text-align: center !important;
    padding: 16px 18px !important;
    background: rgba(13, 13, 13, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    margin: 0 auto 16px auto !important;
  }

  .pcrn-hero-title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .pcrn-hero-description {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }

  .pcrn-hero-content-box .pcrn-flex,
  .pcrn-hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .pcrn-hero-content-box .pcrn-btn,
  .pcrn-hero-actions .pcrn-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Priority 1.5: Limited Edition Collection Mobile Layout (< 768px) */
  .pcrn-limited-edition-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .pcrn-limited-edition-content {
    display: contents !important;
  }

  .pcrn-limited-edition-header {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .pcrn-anklets-banner {
    order: 2 !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: var(--pcrn-radius-sm) !important;
  }

  /* Popular Jewellery Categories Mobile Alignment */
  .pcrn-categories-flex {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 4px !important;
    scrollbar-width: none !important;
  }

  .pcrn-categories-flex::-webkit-scrollbar {
    display: none !important;
  }

  .pcrn-category-callout {
    min-width: 130px !important;
    width: 130px !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  .pcrn-category-callout-title {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
  }

  .pcrn-cat-item {
    flex-shrink: 0 !important;
    min-width: 72px !important;
    width: 72px !important;
    text-align: center !important;
  }

  .pcrn-cat-thumb {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 50% !important;
    border: 2px solid var(--pcrn-gold) !important;
    margin: 0 auto 6px auto !important;
    overflow: hidden !important;
  }

  .pcrn-cat-label {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .pcrn-anklets-banner h3 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .pcrn-anklets-carousel {
    order: 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    padding-top: 4px !important;
    margin: 0 !important;
    width: 100% !important;
    scrollbar-width: none !important;
  }

  .pcrn-anklets-carousel::-webkit-scrollbar {
    display: none !important;
  }

  .pcrn-anklets-carousel .pcrn-product-card {
    flex: 0 0 calc(70% - 10px) !important;
    min-width: 210px !important;
    max-width: 240px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }

  /* Jewellery Care Page Mobile Responsive Overrides (< 768px) */
  .pcrn-care-hero-banner {
    height: 220px !important;
    margin-bottom: 24px !important;
    border-radius: var(--pcrn-radius-sm) !important;
  }

  .pcrn-care-header {
    margin-bottom: 32px !important;
    padding: 0 8px !important;
  }

  .pcrn-care-main-title {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
  }

  .pcrn-care-main-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  .pcrn-care-sections-list {
    gap: 24px !important;
    margin-bottom: 36px !important;
  }

  .pcrn-care-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px !important;
  }

  .pcrn-care-card-reverse .pcrn-care-img-wrap,
  .pcrn-care-card-reverse .pcrn-care-content-wrap {
    order: initial !important;
  }

  .pcrn-care-img-wrap img {
    height: 220px !important;
    width: 100% !important;
    border-radius: var(--pcrn-radius-sm) !important;
  }

  .pcrn-care-section-title {
    font-size: 1.4rem !important;
    margin-bottom: 10px !important;
  }

  .pcrn-care-bullet-list {
    font-size: 0.875rem !important;
    gap: 10px !important;
    padding-left: 18px !important;
  }

  .pcrn-care-footer {
    margin: 32px 0 !important;
    padding: 24px 16px !important;
  }

  .pcrn-care-footer-title {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
  }

  .pcrn-care-footer-text {
    font-size: 0.875rem !important;
  }

  /* Priority 2: Store Locator Mobile Layout */
  .pcrn-store-locator-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .pcrn-store-img-wrap img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: var(--pcrn-radius-sm) !important;
  }

  .pcrn-store-details-card {
    padding: 18px !important;
  }

  .pcrn-store-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .pcrn-store-actions .pcrn-btn {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Priority 3: Silver Idols Mobile Carousel & Banner */
  .pcrn-silver-idols-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .pcrn-idols-carousel {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    scrollbar-width: none !important;
  }

  .pcrn-idols-carousel::-webkit-scrollbar {
    display: none !important;
  }

  .pcrn-idols-carousel .pcrn-product-card {
    flex: 0 0 75% !important;
    max-width: 240px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .pcrn-idols-banner,
  .pcrn-silver-idols-section .pcrn-banner-card {
    height: 220px !important;
    min-height: 220px !important;
    width: 100% !important;
    border-radius: var(--pcrn-radius-sm) !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .pcrn-silver-idols-section .pcrn-banner-card h3 {
    font-size: 1.35rem !important;
    margin-bottom: 10px !important;
  }

  /* Priority 4: Signature Collections Mobile Card Aspects & Spacing */
  .pcrn-signature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 20px !important;
  }

  .pcrn-signature-card-main {
    min-height: 260px !important;
    height: 260px !important;
    width: 100% !important;
  }

  .pcrn-signature-col-stacked {
    gap: 16px !important;
  }

  .pcrn-signature-card-sub {
    height: 220px !important;
    min-height: 220px !important;
    width: 100% !important;
  }

  .pcrn-signature-card-content {
    bottom: 18px !important;
    left: 18px !important;
    right: 18px !important;
  }

  .pcrn-signature-card-content h3 {
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
  }

  .pcrn-signature-card-content span {
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;
  }

  .pcrn-signature-card-content .pcrn-btn {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
  }

  /* Priority 5: Jewellery Journey Responsive Grid & Touch Targets */
  .pcrn-journey-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    margin-top: 20px !important;
    align-items: stretch !important;
  }

  .pcrn-journey-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100% !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    border-radius: var(--pcrn-radius-sm) !important;
  }

  .pcrn-journey-card img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
  }

  .pcrn-journey-card span {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
  }

  /* Priority 7: Global Mobile Section Spacing & Touch Guard */
  .pcrn-section {
    padding: 36px 0 !important;
  }

  .pcrn-section-heading {
    margin-bottom: 24px !important;
  }

  .pcrn-section-heading h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }

  /* Ensure smooth horizontal scroll on touch bars without layout overflow */
  body {
    overflow-x: hidden !important;
  }

  .pcrn-footer-colophon {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    justify-content: center !important;
    padding-top: 16px !important;
  }
}

/* -------------------------------------------------------------
   7. ULTRA-SMALL MOBILE VIEWPORTS (320px - 480px)
   ------------------------------------------------------------- */
@media (max-width: 480px) {
  .pcrn-product-cards-4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .pcrn-product-card-title {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
  }

  .pcrn-product-card-buttons {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .pcrn-product-card-buttons .pcrn-btn {
    padding: 6px 4px !important;
    font-size: 0.65rem !important;
    width: 100% !important;
  }

  .pcrn-gifting-card {
    height: 260px !important;
  }

  .pcrn-gifting-card h3 {
    font-size: 1.35rem !important;
  }

  .pcrn-section-heading h2 {
    font-size: 1.5rem !important;
  }

  .pcrn-hero-content-card h1,
  .pcrn-hero-content-card h2 {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }
}