/* ============================================================
   YUKI — Mobile Responsive v8  |  Loads LAST — wins all
   Mobile-only: max-width 991px. Desktop unchanged.
   ============================================================ */

/* ── Universal box-model & overflow prevention ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
img, video, iframe, embed, svg { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════
   PHONE ICON — fix direction (mirror so handset faces right)
══════════════════════════════════════════════════════ */
.yk-mh-call i.fa-phone,
.yk-mob-call-btn i.fa-phone,
.yk-offcanvas-call i.fa-phone,
.yk-btn-call i.fa-phone,
.pkc-btn-call i.fa-phone,
a[href^="tel"] i.fa-phone {
  display: inline-block;
  transform: scaleX(-1) rotate(-30deg);
}

/* ══════════════════════════════════════════════════════
   DESKTOP — hide mobile elements
══════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  #ykMobHeader        { display: none !important; }
  .mobile-header-area { display: none !important; }
  .yk-mob-contact     { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — all fixes below 992px
══════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Hide desktop header */
  .yk-header, .header-area, #yk-header,
  .d-none.d-lg-block,
  header.d-none { display: none !important; }

  /* ── Mobile header base ── */
  #ykMobHeader {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.12) !important;
    z-index: 1050 !important;
  }

  /* ── Container ── */
  .container, .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── SINGLE COLUMN — all Bootstrap cols → full width ── */
  .row > [class*="col-"]:not(.yk-keep-col) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* But keep 2-col for product grids on tablets */
  @media (min-width: 576px) {
    .row > .col-sm-6 {
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }
  }

  /* ── Section spacing ── */
  section, .yp-section, .pkc-section,
  .yk-home-section { padding: 32px 0 !important; }

  /* ── Headings ── */
  .yp-sec-title, .yk-section-title,
  h2.section-title, .yk-hdr-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .yp-sec-sub, .yk-sec-sub { font-size: 13px !important; }
  .yp-kicker { font-size: 11px !important; letter-spacing: 2px !important; }

  /* ── Row gutters ── */
  .row {
    margin-left: -7px !important;
    margin-right: -7px !important;
  }
  .row > [class*="col-"] {
    padding-left: 7px !important;
    padding-right: 7px !important;
    margin-bottom: 16px;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE — tight breakpoint (≤767px)
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Announcement bar ── */
  .yk-announce { font-size: 11px !important; padding: 6px 0 !important; }

  /* ── Banner ── */
  .yk-bw { min-height: 180px; }
  .yk-bs img, .yk-bs video {
    min-height: 200px; max-height: 260px;
    object-fit: cover; width: 100%;
  }
  .yk-bc { max-width: 65% !important; padding: 0 10px !important; }
  .yk-bc .ttl { font-size: 16px !important; line-height: 1.2 !important; margin-bottom: 4px !important; }
  .yk-bc .sub { font-size: 9px !important; display: none !important; }
  .yk-bc .dsc { display: none !important; }
  .yk-bc .cta { font-size: 11px !important; padding: 6px 12px !important; margin-top: 6px !important; }
  .yk-bc-center {
    left: 50% !important; right: auto !important;
    transform: translate(-50%,-50%) !important;
    text-align: center !important;
    max-width: 90% !important;
  }
  .yk-bn { width: 28px !important; height: 28px !important; font-size: 13px !important; }
  .yk-bp { left: 6px !important; }
  .yk-bn:last-of-type { right: 6px !important; }
  .yk-dots { bottom: 8px !important; gap: 5px !important; }
  .yk-dot  { width: 7px !important; height: 7px !important; }

  /* ── Category grid — 2 col ── */
  .yk-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .yk-cc { border-radius: 12px !important; }
  .yk-cc-rectangular { aspect-ratio: 3/4 !important; }
  .yk-cc-rectangular .yk-cc-body  { padding: 10px 8px 8px !important; }
  .yk-cc-rectangular .yk-cc-name  { font-size: 12px !important; }
  .yk-cc-badge .yk-cc-media        { height: 120px !important; }
  .yk-cc-side  { min-height: 78px !important; }
  .yk-cc-side .yk-cc-media         { width: 78px !important; }
  .yk-cc-minimal { padding: 16px 8px 12px !important; }
  .yk-cc-minimal .yk-cc-media      { width: 64px !important; height: 64px !important; }
  .yk-cc-name, .yk-cc-sub          { font-size: 11px !important; }

  /* ── Product cards — 2 col ── */
  .pkc-auto-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .pkc-img-wrap { height: 140px !important; }
  .pkc-body     { padding: 10px !important; }
  .pkc-name     { font-size: 12px !important; }
  .pkc-price    { font-size: 13px !important; }
  .pkc-cat      { font-size: 14px !important; letter-spacing:.3px; text-transform:uppercase; }
  .pkc-btn      { font-size: 11px !important; padding: 7px 8px !important; }
  .pkc-btn .pkc-btn-label { display: none; }

  /* ── View all button ── */
  .yk-view-all-btn {
    font-size: 13px !important;
    padding: 10px 22px !important;
    display: block;
    margin: 0 auto;
    width: fit-content;
  }

  /* ── Why Choose Us — 1 col ── */
  .yk-why-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── Trust badges — stack ── */
  .yp-badges,
  .yk-trust-bar {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .yp-badge-item {
    flex-direction: row !important;
    gap: 14px !important;
    text-align: left !important;
  }

  /* ── About strip ── */
  .yk-about-strip-inner { flex-direction: column !important; gap: 20px !important; }
  .yk-about-strip-stats { flex-direction: row !important; flex-wrap: wrap !important; }
  .yk-about-stat        { flex: 0 0 50% !important; text-align: center !important; }

  /* ── CTA section ── */
  .yk-cta-inner { flex-direction: column !important; text-align: center !important; gap: 16px !important; }
  .yk-cta-btn   { width: 100% !important; text-align: center !important; }

  /* ── Testimonials — 1 col ── */
  .yk-tslide { flex: 0 0 100% !important; max-width: 100% !important; }

  /* ── Shop listing ── */
  .shop-area .col-lg-3, .shop-area .col-md-4 {
    flex: 0 0 100% !important; max-width: 100% !important;
    margin-bottom: 16px;
  }
  .shop-area .col-lg-9, .shop-area .col-md-8 {
    flex: 0 0 100% !important; max-width: 100% !important;
  }

  /* ── Product detail ── */
  .yk-pd-gallery      { margin-bottom: 20px !important; }
  .yk-pd-title        { font-size: 20px !important; }
  .yk-pd-price        { font-size: 22px !important; }
  .yk-pd-btns         { flex-direction: column !important; gap: 10px !important; }
  .yk-pd-btns .btn,
  .yk-btn-call,
  .yk-btn-wa          { width: 100% !important; justify-content: center !important; }
  .yk-pd-thumb        { width: 56px !important; height: 56px !important; }

  /* ── Breadcrumb banner ── */
  .pv-banner, .yk-bc-banner { min-height: 130px !important; }
  .pv-banner-h1, .yk-bc-banner h1 { font-size: 22px !important; margin: 0 !important; }

  /* ── FAQ ── */
  .yk-faq-q { font-size: 14px !important; padding: 13px 14px !important; }
  .yk-faq-a { font-size: 13px !important; padding: 12px 14px !important; }

  /* ── Contact page ── */
  .contact-form .form-group { margin-bottom: 14px !important; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select { font-size: 15px !important; }

  /* ── Gallery ── */
  .yk-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Footer — 1 col ── */
  .yk-footer { padding-top: 36px !important; }
  .yk-footer .row > [class*="col-"] {
    flex: 0 0 100% !important; max-width: 100% !important;
    margin-bottom: 24px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .yk-footer .row > [class*="col-"]:last-child { border-bottom: none !important; }
  .yk-footer-logo { max-height: 50px !important; }
  .yk-footer-copy { text-align: center !important; }

  /* ── Tables (cart) ── */
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── WA float ── */
  .yk-wa-float { bottom: 16px !important; right: 14px !important; z-index: 1040 !important; }
}

/* ══════════════════════════════════════════════════════
   EXTRA SMALL (≤480px)
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .yk-cat-grid { gap: 8px !important; }
  .pkc-auto-grid { gap: 8px !important; }
  .yk-bc .ttl { font-size: 13px !important; }
  .pkc-img-wrap { height: 120px !important; }
  .yk-cc-rectangular .yk-cc-name { font-size: 11px !important; }

  /* 1-col categories on very small phones */
  @media (max-width: 360px) {
    .yk-cat-grid { grid-template-columns: 1fr !important; }
    .pkc-auto-grid { grid-template-columns: 1fr !important; }
  }
}

/* ══════════════════════════════════════════════════════
   TOUCH TARGETS & iOS FORM ZOOM PREVENTION
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  select, textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom */
    min-height: 44px !important;
  }
  a, button { -webkit-tap-highlight-color: rgba(121,74,186,.15); }
}

/* ══════════════════════════════════════════════════════
   OFFCANVAS MENU (all screen sizes)
══════════════════════════════════════════════════════ */
.menu-offcanvas {
  width: 300px !important;
  max-width: 88vw !important;
  z-index: 1060 !important;
}
.menu-offcanvas .offcanvas-header {
  background: linear-gradient(135deg,#f4eefb,#fff) !important;
  border-bottom: 1.5px solid #e8e0f5 !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.menu-offcanvas .offcanvas-header .brand-image {
  /* height controlled by template-overrides.css */
  width: auto; object-fit: contain;
}
.menu-offcanvas .btn-close {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background-color: rgba(0,0,0,.07) !important;
  opacity: 1 !important;
}
.mobile-menu-area .menu-list  { list-style: none !important; padding: 6px 0 !important; margin: 0 !important; }
.mobile-menu-area .menu-item  { border-bottom: 1px solid #f4eefb !important; }
.mobile-menu-area .menu-link  {
  display: flex !important; align-items: center !important;
  padding: 14px 18px !important; font-size: 14px !important;
  font-weight: 600 !important; color: #1a1a2e !important;
  text-decoration: none !important; min-height: 50px !important;
}
.mobile-menu-area .menu-link:hover,
.mobile-menu-area .menu-link:active { background: #f4eefb !important; color: #794ABA !important; }
.mobile-menu-area .sub-menu  { list-style: none !important; padding: 0 !important; background: #faf8ff !important; }
.mobile-menu-area .sub-menu-link {
  display: block !important; padding: 12px 28px !important;
  font-size: 13px !important; color: #4b4560 !important; text-decoration: none !important;
}
.yk-offcanvas-cta {
  display: flex !important; gap: 10px !important;
  padding: 16px !important; border-top: 1.5px solid #f0eaf8 !important;
}
.yk-offcanvas-call,
.yk-offcanvas-wa {
  flex: 1 !important; display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 7px !important;
  padding: 12px !important; border-radius: 10px !important;
  font-size: 13px !important; font-weight: 700 !important;
  text-decoration: none !important; min-height: 46px !important;
  color: var(--cat-btn-txt, #fff) !important;
}
.yk-offcanvas-call { background: var(--cat-call-bg, #E65100) !important; color: var(--cat-btn-txt, #fff) !important; }
.yk-offcanvas-wa   { background: var(--cat-wa-bg, #25D366); color: var(--cat-btn-txt, #fff); }
.yk-offcanvas-call i.fa-phone { transform: scaleX(-1) rotate(-30deg); display: inline-block; }
.offcanvas-backdrop { z-index: 1055 !important; }

/* ── Menu search ── */
.menu-offcanvas .menu-search-form { padding: 12px 14px !important; border-bottom: 1px solid #f0eaf8 !important; }
.menu-offcanvas .menu-search-form .form-select { display: none !important; }
.menu-offcanvas .menu-search-form input.form-control {
  border: 1.5px solid #e8e0f5 !important;
  border-radius: 8px !important; font-size: 14px !important;
  padding: 9px 12px !important; min-height: 44px !important;
}

/* ══════════════════════════════════════════════════════
   INLINE STYLE OVERRIDE — pkc-auto-grid has repeat(4,1fr) inline
   Must use !important AND be more specific to win
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  div.pkc-auto-grid,
  .pkc-auto-grid[style] {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 14px !important;
  }
  div.pkc-auto-grid > div,
  .pkc-auto-grid > * {
    min-width: 0 !important;
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  div.pkc-auto-grid,
  .pkc-auto-grid[style] {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════
   SHOP-SINGLE (product detail) — mobile fixes
══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Image + info stack vertically */
  .row.g-0 > .col-lg-5,
  .row.g-0 > .col-lg-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Main product image */
  .yk-pd-main-img { width: 100% !important; max-height: 320px !important; object-fit: contain !important; }

  /* Thumbnails row — horizontal scroll */
  .yk-pd-thumbnails {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
  }
  .yk-pd-thumb {
    width: 60px !important; height: 60px !important;
    flex-shrink: 0 !important;
  }

  /* Action buttons — stack */
  .yk-pd-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .yk-pd-call,
  .yk-pd-wa {
    width: 100% !important;
    min-width: unset !important;
    justify-content: center !important;
  }

  /* Title & price */
  .yk-pd-title { font-size: 20px !important; line-height: 1.3 !important; }
  .yk-pd-price { font-size: 24px !important; }

  /* Related products grid */
  .yk-related-grid,
  .related-product .row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .related-product .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════
   SHOP LISTING PAGE — mobile
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Shop filter/sort bar */
  .yk-shop-top-bar,
  .shop-top-bar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .yk-shop-top-bar select,
  .yk-shop-top-bar .form-select { width: 100% !important; }

  /* Category sidebar — hidden by default, show via toggle */
  .yk-shop-sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* Product grid in shop page */
  .yk-grid { grid-template-columns: repeat(1,1fr) !important; gap: 14px !important; }
}

/* ══════════════════════════════════════════════════════
   HOME PAGE — Special Offers & New Arrivals headings
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Section header rows — stack label + button */
  .pkc-section .d-flex.justify-content-between,
  .yp-section .d-flex.justify-content-between {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* View All button — full width on mobile */
  .pkc-section .yk-view-all-btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* Product card image height — keep consistent */
  .pkc-img-wrap {
    height: 200px !important;
    max-height: 200px !important;
  }
  .pkc-img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* ── pkc-grid-resp: override inline 4-col on mobile ── */
@media (max-width: 767px) {
  .pkc-grid-resp {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 14px !important;
  }
}