/* =========================================================
   CONTAINER
========================================================= */

.ipk-container{
  width:100%;
  max-width:var(--ipk-max);
  margin:0 auto;
  padding-left:var(--ipk-pad);
  padding-right:var(--ipk-pad);
}
/* =========================================================
   IPHONEK 2.0 — CORE UI ENGINE
   v001
========================================================= */

#ipkHome2,
.ipk-system{
  position:relative;
  z-index:2;
  width:100%;
  margin:0 auto;
  font-family:var(--ipk-font);
  color:var(--ipk-text);
}

#ipkHome2 *,
#ipkHome2 *::before,
#ipkHome2 *::after,
.ipk-system *,
.ipk-system *::before,
.ipk-system *::after{
  box-sizing:border-box;
}

#ipkHome2 a,
.ipk-system a{
  color:inherit;
  text-decoration:none;
}

#ipkHome2 img,
.ipk-system img{
  max-width:100%;
  height:auto;
}

/* BUTTONS */
.ipk-btn{
  appearance:none;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 28px;
  border-radius:var(--ipk-radius-pill);
  font-family:var(--ipk-font);
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:
    transform var(--ipk-duration) var(--ipk-ease),
    background var(--ipk-duration) var(--ipk-ease),
    color var(--ipk-duration) var(--ipk-ease),
    box-shadow var(--ipk-duration) var(--ipk-ease);
}

.ipk-btn:hover{
  transform:translateY(var(--ipk-hover-lift));
}

.ipk-btn--primary{
  background:var(--ipk-primary);
  color:#fff;
}

.ipk-btn--primary:hover{
  background:var(--ipk-primary-hover);
  box-shadow:0 14px 34px rgba(109,204,223,.28);
}

.ipk-btn--ghost{
  background:#EEF2F7;
  color:var(--ipk-text);
}

.ipk-btn--ghost:hover{
  background:#E5EBF3;
}

.ipk-btn--dark{
  background:var(--ipk-navy);
  color:#fff;
}

.ipk-btn--dark:hover{
  background:var(--ipk-navy-soft);
}

/* CHIPS */
.ipk-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border-radius:var(--ipk-radius-pill);
  background:#F3F6FA;
  border:1px solid transparent;
  font-size:14px;
  font-weight:600;
  color:var(--ipk-text);
  transition:
    transform var(--ipk-duration-fast) var(--ipk-ease),
    background var(--ipk-duration-fast) var(--ipk-ease),
    border-color var(--ipk-duration-fast) var(--ipk-ease),
    color var(--ipk-duration-fast) var(--ipk-ease);
}

.ipk-chip:hover{
  background:#EAF1F7;
  transform:translateY(-1px);
}

/* SECTION SYSTEM */
.ipk-section{
  position:relative;
  padding:var(--ipk-section-lg) 0;
}

.ipk-section__head{
  max-width:760px;
  margin:0 auto 36px;
  text-align:center;
}

.ipk-section__title{
  margin:0;
  font-size:var(--ipk-h2);
  line-height:var(--ipk-lh-title);
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--ipk-text);
}

.ipk-section__text{
  margin:14px auto 0;
  max-width:620px;
  font-size:var(--ipk-text-lg);
  line-height:1.65;
  color:var(--ipk-text-soft);
}

/* CARD */
.ipk-card{
  position:relative;
  background:var(--ipk-surface);
  border:var(--ipk-border-soft);
  border-radius:var(--ipk-radius-xl);
  box-shadow:var(--ipk-shadow-card);
  overflow:hidden;
  transition:
    transform var(--ipk-duration) var(--ipk-ease),
    box-shadow var(--ipk-duration) var(--ipk-ease),
    border-color var(--ipk-duration) var(--ipk-ease);
}

.ipk-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--ipk-shadow-hover);
  border-color:rgba(109,204,223,.34);
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  #ipkHome2 *,
  #ipkHome2 *::before,
  #ipkHome2 *::after,
  .ipk-system *,
  .ipk-system *::before,
  .ipk-system *::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  .ipk-btn:hover,
  .ipk-chip:hover,
  .ipk-card:hover{
    transform:none;
  }
}

@media (max-width:640px){
  .ipk-btn{
    width:100%;
  }
}


/* =========================================================
   IPHONEK 2.0 — CATEGORY MOBILE PRODUCT FIX
========================================================= */

@media (max-width:640px){

  body.type-category #content{
    width:100% !important;
  }

  body.type-category .category-content-wrapper{
    width:100% !important;
    max-width:100% !important;
    padding:0 14px !important;
  }

  body.type-category .products,
  body.type-category .products-block{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 12px !important;
    width:100% !important;
    margin:18px 0 0 !important;
  }

  body.type-category .products > div,
  body.type-category .products-block > div,
  body.type-category .product{
    width:auto !important;
    max-width:100% !important;
    float:none !important;
    clear:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  body.type-category .product .p{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    height:100% !important;
    padding:12px !important;
    border-radius:18px !important;
    background:#fff !important;
  }

  body.type-category .product .image{
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 0 10px !important;
  }

  body.type-category .product .image img{
    max-width:100% !important;
    max-height:135px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  body.type-category .product .name{
    min-height:42px !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
  }

  body.type-category .product .availability{
    font-size:12px !important;
    margin:6px 0 !important;
  }

  body.type-category .product .p-bottom{
    margin-top:auto !important;
  }

  body.type-category .product .p-bottom > div{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  body.type-category .product .price,
  body.type-category .product .price strong{
    font-size:22px !important;
    line-height:1 !important;
  }

  body.type-category .product .btn,
  body.type-category .product .btn.btn-primary{
    width:100% !important;
    min-height:38px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }

}