/*
Theme Name: PineX
Theme URI: https://example.com/pinex
Author: dstndmedia
Author URI: https://example.com
Description: PineX — lightweight WooCommerce theme with centered logo, responsive search+icons row, top-bar slider, and variation buttons (no dropdowns). Optimized for mobile and fast loads.
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinex
Tags: woocommerce, responsive, minimal, fast
*/

/* ---- Base ---- */
html, body { margin:0; padding:0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.5; color:#111; }

/* ---- Header ---- */
.site-header { padding: 10px 20px; }

/* Top bar slider */
.top-bar-slider {
  position: relative;
  height: 44px;
  overflow: hidden;
  text-align: center;
  background: #222;
  color: #fff;
  font-size: 14px;
  line-height: 15px;
}
.top-bar-slider .slide { opacity: 0; position: absolute; width: 100%; transition: opacity .4s ease; }
.top-bar-slider .slide.active { opacity: 1; position: relative; }

/* Row 1: centered logo */
.site-branding { text-align:center; margin: 10px 0; }
.site-branding .custom-logo { max-height: 80px; max-width: 100%; height: auto; width: auto; display:block; margin:0 auto; }

/* Row 2: search (85%) + icons (15%) — stays one line on desktop */
.header-search-icons {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap;
}
.header-search { flex: 1 1 auto; min-width:0; }
.header-icons  { flex: 0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.header-icon img { height:22px; width:auto; display:block; }
.header-icons .pinex-cart-count {
  background:#e11; color:#fff; font-size:10px; padding:2px 6px; border-radius:999px; position:relative; top:-8px; left:-8px;
}

/* Search form */
.header-search form.search-form, .header-search form.woocommerce-product-search { display:flex; width:100%; }
.header-search input[type="search"],
.header-search input[type="text"] {
  flex:1; padding:8px 12px; border:1px solid #ccc; border-right:0; font-size:14px; border-radius:4px 0 0 4px;
}
.header-search button,
.header-search input[type="submit"] {
  padding:8px 14px; background:#111; color:#fff; border:1px solid #111; border-radius:0 4px 4px 0; cursor:pointer; font-size:14px;
}

/* Mobile nav drawer */
.mobile-menu {
  position: fixed; top:0; left:-100%; width: 280px; height:100%; background:#fff; box-shadow:2px 0 8px rgba(0,0,0,.15);
  z-index:1000; transition:left .3s ease; overflow-y:auto; padding:20px;
}
.mobile-menu.active { left:0; }
.nav-overlay {
  display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.45); z-index:999;
}
.nav-overlay.active { display:block; }

/* ---- Content ---- */
.site { padding: 20px; }

/* ---- Woo: variable buttons ---- */
.variation-group { margin: 12px 0; }
.variation-group label { display:block; margin-bottom:6px; font-weight:600; }
.button-group { display:flex; flex-wrap:wrap; gap:8px; }
.variation-button {
  display:inline-block; padding:8px 12px; border:1px solid #333; background:#fff; cursor:pointer; border-radius:6px; font-size:14px;
}
.variation-button.active, .variation-button:focus { background:#111; color:#fff; border-color:#111; }

/* Hide default selects (but keep accessible) */
.variations select.hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; clip:rect(0 0 0 0); clip-path: inset(50%); overflow:hidden; white-space:nowrap;
}

/* Force single line for search+icons on larger screens; stack on mobile */
@media (max-width: 767px) {
  .header-search-icons { flex-wrap:wrap; }
  .header-search { flex: 1 1 100%; order: 1; }
  .header-icons  { flex: 1 1 100%; order: 2; justify-content:center; margin-top:8px; }
}

/* Woo basics spacing */
.woocommerce .products { gap: 16px; }

/* Ensure related products render below the product, full width */
.pinex-related-wrap { 
  clear: both;
  margin-top: 40px;
}

/* Display None */
.hidden
{
	display:none;
}

.single-product .related.products {
  width: 100%;
  float: none;
}

.single-product .pinex-related-wrap .products {
  display: block;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Optional: if any theme styles were floating related lists */
.single-product .related.products:before,
.single-product .related.products:after { content: none; }

/* PineX Continuous Logo Shine */
.site-logo img {
  display: block;
  margin: 0 auto;
  max-width: 200px;   /* adjust size if needed */
  height: auto;
  position: relative;
  overflow: hidden;
}

.site-logo {
  position: relative;
  display: inline-block;
}

/* Shine overlay */
.site-logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: logo-shine 3s ease-in-out infinite; /* continuous sweep */
}

/* Shine animation sweep */
@keyframes logo-shine {
  0%   { left: -75%; }
  100% { left: 125%; }
}