/* panel + overlay */
/* 1. Load the Custom Font */
@font-face {
    font-family: 'Avenir Roman';
    src: url('https://darkorange-sandpiper-741171.hostingersite.com/wp-content/uploads/2025/11/Avenir-Roman.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. Apply it to the Search Panel Elements */
#pk-search-panel,
#pk-search-input,
.pk-product-title,
.pk-search-header-left,
.pk-search-section-title,
.pk-search-view-all-btn {
    font-family: 'Avenir Roman', sans-serif !important;
}
#pk-search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: #ffffff;
  z-index: 999999; /* Super High Z-Index */
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  padding: 20px 40px;
  box-sizing: border-box;
  overflow-y: auto;
}

.pk-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  z-index: 999998;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.pk-search-open #pk-search-panel { transform: translateY(0); }
body.pk-search-open .pk-search-overlay { opacity: 1; visibility: visible; }
body.pk-search-open { overflow: hidden; }

.pk-search-header { display: flex; align-items: center; gap: 16px; }
.pk-search-header-left { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

#pk-search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ddd;
  padding: 10px 4px;
  font-size: 16px;
  outline: none;
}

.pk-search-header-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
#pk-search-view-all-btn { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.pk-search-close { background: none; border: none; font-size: 24px; cursor: pointer; }

.pk-search-content { margin-top: 24px; }
.pk-search-section-title { font-size: 12px; text-transform: uppercase; margin-bottom: 16px; letter-spacing: .05em; }

/* Grid */
.pk-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.pk-product-item {
    text-align: center;
    cursor: pointer; /* Show pointer hand */
}

/* --- CRITICAL CSS FIX: Make Anchor Block --- */
.pk-product-item a {
    display: block;  /* Ensures the whole area is clickable */
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.pk-product-item img {
  width: 100%;
  height: 400px;
  display: block;
  object-fit:contain;
  margin-bottom: 8px;
  transition: opacity 0.3s;
}
/* Container holds the background color */
.pk-img-container {
    background-color: #f5f5f5; /* Change this to your desired background color */
    border-radius: 8px;        /* Optional rounded corners */
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;             /* Fixes extra space below image */
}

/* Image blends into the background */
.pk-img-container img {
    mix-blend-mode: multiply;  /* Blends the white background of the image away */
    display: block;
    width: 100%;
    height: 400px;
}

/* Add hover effect so user knows it is clickable */
.pk-product-item a:hover img {
    opacity: 0.8;
}

.pk-product-title {
  font-size: 13px;
  margin: 0;
  font-weight: 500;
}

/* --- Media Queries for Tablets & Desktop --- */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  #pk-search-panel { padding: 40px 60px; }
  
  .pk-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  
  #pk-search-input { font-size: 24px; }
  
  .pk-search-header-right { gap: 30px; }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .pk-products-grid {
    grid-template-columns: repeat(5, 1fr); /* Back to your original design */
  }
  
  .pk-product-title { font-size: 15px; }
}
/* ==================================================
   MOBILE FIX: Override 5-Column & Height Issues
   ================================================== */

@media (max-width: 767px) {
    
    /* 1. Force 2 Columns instead of 5 */
    .pk-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding-bottom: 20px;
    }

    /* 2. REMOVE the 400px fixed height */
    .pk-product-item img {
        height: auto !important;       /* Overrides the 400px rule */
        min-height: auto !important;
        aspect-ratio: 1 / 1;           /* Forces a square shape */
        width: 100%;
        object-fit: contain;           /* Ensures the whole shoe is visible */
        margin-bottom: 8px;
        background: #fff;           /* Optional: Light grey background for the box */
    }

    /* 3. Center and Fix the Text */
    .pk-product-item {
        text-align: center !important;
        height: auto !important;       /* Allows container to shrink to fit content */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .pk-product-title {
        font-size: 13px !important;
        margin-top: 0 !important;
        line-height: 1.2;
    }
}
/* Specific fix for very small screens */
@media (max-width: 400px) {
  .pk-search-header-left { display: none; } /* Hide 'SEARCH' text label */
  .pk-products-grid { gap: 10px; }
}