:root {
  --ph: #0046AD; --ph-dark: #003080; --ph-light: #E8F0FC; --ph-acc: #00B0FF;
  --ph-txt: #1a1a2e; --ph-muted: #6b7280; --ph-border: #e2e8f0; --ph-gray: #f4f6fa;
  --ph-red: #e53e3e; --ph-white: #ffffff; --ph-radius: 8px; --ph-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Full Width Breakout Wrapper (Strict Mode) ── */
.ph-full-width-wrapper {
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ph-gray);
  padding-bottom: 30px;
  overflow-x: hidden;
}

/* ── Trust Bar (Responsive alignment fix) ── */
.ph-trust-bar { 
  background: var(--ph); 
  color: #fff; 
  display: flex; 
  justify-content: space-evenly; /* Even spacing across full width */
  align-items: center;
  padding: 12px 20px; 
  width: 100%;
}
.ph-trust-item { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-size: 12px; 
  font-weight: 600; 
  letter-spacing: 0.5px; 
  white-space: nowrap;
}

@media (max-width: 600px) { 
  .ph-trust-bar { 
    justify-content: space-between; 
    padding: 8px 10px; 
    gap: 0;
  } 
  .ph-trust-item { 
    flex-direction: column; /* Icon top, Text bottom */
    gap: 3px;
    font-size: 8px; 
    letter-spacing: 0;
  } 
  .ph-trust-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
}

.ph-hero-slider { position: relative; overflow: hidden; background: var(--ph-dark); user-select: none; }
.ph-slide { display: none; position: relative; }
.ph-slide.active { display: block; }
.ph-banner-desktop img { width: 100%; height: auto; display: block; }
.ph-banner-mobile { display: none; }
.ph-banner-mobile img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) { .ph-banner-desktop { display: none; } .ph-banner-mobile { display: block; } }

.ph-banner-overlay { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); z-index: 2; max-width: 45%; }
.ph-banner-overlay h2 { font-size: clamp(22px, 3vw, 40px); font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 10px; }
.ph-btn-primary { display: inline-block; background: var(--ph-acc); color: #fff; padding: 10px 24px; border-radius: 5px; font-size: 13px; font-weight: 700; text-decoration: none; }

.ph-slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.ph-dot { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); border: none; cursor: pointer; transition: 0.3s; }
.ph-dot.active { background: var(--ph-acc); width: 32px; }
.ph-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; width: 36px; height: 36px; font-size: 22px; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; }
.ph-prev { left: 14px; } .ph-next { right: 14px; }
@media (max-width: 600px) { .ph-arrow { width: 28px; height: 28px; font-size: 16px; } }

.ph-section { max-width: 1240px; margin: 0 auto; padding: 28px 20px; }
.ph-section-title { font-size: 18px; font-weight: 700; color: var(--ph-txt); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--ph-border); position: relative; }
.ph-section-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 48px; height: 2px; background: var(--ph); }

.ph-cat-outer { overflow: hidden; position: relative; cursor: grab; }
.ph-cat-outer:active { cursor: grabbing; }
.ph-cat-inner { display: flex; gap: 10px; width: max-content; animation: ph-catscroll 55s linear infinite; }
.ph-cat-inner:hover, .ph-cat-inner.paused { animation-play-state: paused; }
@keyframes ph-catscroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.ph-cat-card { 
    flex-shrink: 0; 
    background: var(--ph-white); 
    border-radius: var(--ph-radius); 
    padding: 4px 6px; 
    text-align: center; 
    min-width: 100px; /* Thora sa width barhaya hai taake box square shape mein pyara lage */
    text-decoration: none; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s; 
    border: 1px solid transparent;}
.ph-cat-card:hover { border-color: var(--ph); background: var(--ph-light); transform: translateY(-2px); }
.ph-cat-card img { 
    width: 64px; 
    height: 64px; 
    object-fit: contain; 
    margin-bottom: 2px;}
.ph-cat-name { font-size: 11.5px; font-weight: 600; color: var(--ph-txt); line-height: 1.3; }
.ph-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .ph-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ph-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.ph-prod-card { background: var(--ph-white); border-radius: var(--ph-radius); border: 1px solid var(--ph-border); overflow: hidden; transition: 0.2s; }
.ph-prod-card:hover { box-shadow: var(--ph-shadow); transform: translateY(-2px); }
.ph-prod-img-wrap { display: block; position: relative; background: var(--ph-white); aspect-ratio: 1/1; overflow: hidden; }
.ph-prod-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform 0.3s; }
.ph-prod-card:hover .ph-prod-img-wrap img { transform: scale(1.05); }
.ph-badge-hot { position: absolute; top: 8px; left: 8px; background: #f97316; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; z-index: 2; }

.ph-prod-info { padding: 10px 12px 12px; }
.ph-prod-name { font-size: 12px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.ph-prod-name a { color: var(--ph-txt); text-decoration: none; }
.ph-prod-price { margin-bottom: 8px; font-size: 13px; }
.ph-prod-price .woocommerce-Price-amount { color: var(--ph); font-weight: 700; }
.ph-prod-price del .woocommerce-Price-amount { color: var(--ph-muted); font-weight: 400; font-size: 11px; }
.ph-add-to-cart { display: block; width: 100%; background: var(--ph); color: #fff !important; text-align: center; padding: 7px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; }

/* ── Custom Shop By Collection (3 Columns Desktop, 2 Mobile) ── */
.ph-collection-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 14px; 
}
.ph-col-card { 
  display: flex; 
  align-items: center; 
  border-radius: var(--ph-radius); 
  overflow: hidden; 
  position: relative; 
  height: 140px; 
  background: linear-gradient(100deg, var(--ph-dark), var(--ph)); 
  background-size: cover; 
  background-position: center; 
  text-decoration: none; 
  transition: transform 0.2s; 
}
.ph-col-card:hover { transform: scale(1.02); }
.ph-col-overlay { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to right, rgba(0,48,128,0.85) 0%, rgba(0,48,128,0.2) 100%); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  padding: 0 24px; 
}
.ph-col-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.25; margin: 0; }

@media (max-width: 768px) { 
  .ph-collection-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ph-col-card { height: 110px; } 
  .ph-col-overlay { padding: 0 14px; }
  .ph-col-title { font-size: 14px; } 
}

.ph-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px) { .ph-why-grid { grid-template-columns: repeat(2, 1fr); } }
.ph-why-card { background: var(--ph-white); border-radius: var(--ph-radius); padding: 18px 14px; text-align: center; border: 1px solid var(--ph-border); }
.ph-why-card .dashicons { font-size: 32px; width: 32px; height: 32px; color: var(--ph); margin-bottom: 8px; }
.ph-why-card h3 { font-size: 13px; font-weight: 700; color: var(--ph-txt); margin-bottom: 4px; }
.ph-why-card p { font-size: 11px; color: var(--ph-muted); line-height: 1.5; margin:0;}