/*
Theme Name: Nibzo Layout
Theme URI: https://example.com
Author: Custom Build
Author URI: https://example.com
Description: A dark-hero, product-forward homepage layout inspired by the client's reference design. Supports WooCommerce for the best-sellers grid; falls back to placeholder cards if WooCommerce is not active.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nibzo-layout
*/

:root{
  --bg-dark:#0d0d0d;
  --bg-darker:#000000;
  --accent:#f07d1a;
  --accent-hover:#ff9433;
  --text-light:#ffffff;
  --text-muted:#b3b3b3;
  --card-bg:#ffffff;
  --card-border:#eeeeee;
  --radius:10px;
  --max-width:1280px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
  background:#f7f7f7;
  color:#1a1a1a;
  line-height:1.6;
}
body.is-persian{font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif;}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max-width); margin:0 auto; padding:0 24px;}

/* ===== HEADER ===== */
.site-header{background:var(--bg-darker); color:var(--text-light); position:sticky; top:0; z-index:50;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--max-width); margin:0 auto;}
.logo{font-size:1.6rem; font-weight:800; letter-spacing:1px; color:#fff; flex:0 0 auto;}
.logo img,
.custom-logo-link img{
  height:40px !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
}
.main-nav ul{display:flex; gap:28px;}
.main-nav a{font-size:.95rem; color:var(--text-muted); transition:color .2s;}
.main-nav .current-menu-item > a,.main-nav a:hover{color:var(--text-light);}
.header-actions{display:flex; align-items:center; gap:18px; font-size:1.05rem;}
.header-actions a{color:var(--text-light);}

.header-search{position:relative; display:flex; align-items:center;}
.search-toggle{background:none; border:0; color:var(--text-light); font-size:1.05rem; cursor:pointer; padding:0; line-height:1;}
.site-search-form{
  position:absolute; top:calc(100% + 14px); right:0;
  display:flex; align-items:center; gap:8px;
  background:#151515; border:1px solid #2a2a2a; border-radius:10px;
  padding:8px 8px 8px 14px; width:260px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:20;
}
.site-search-form.is-open{opacity:1; visibility:visible; transform:translateY(0);}
.site-search-form input[type="search"]{
  flex:1; background:transparent; border:0; outline:0;
  color:#fff; font-family:inherit; font-size:.9rem;
}
.site-search-form input[type="search"]::placeholder{color:#777;}
.site-search-form button[type="submit"]{
  background:var(--accent); border:0; border-radius:8px;
  width:32px; height:32px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; font-size:.9rem;
}
.lang-switch{display:flex; align-items:center; gap:6px; font-size:.8rem;}
.lang-switch a{color:var(--text-muted); text-transform:uppercase; padding:4px 8px; border-radius:6px; transition:color .2s, background-color .2s;}
.lang-switch a:hover,
.lang-switch a.lang-item-active{color:var(--text-light); background:rgba(255,255,255,.08);}
.lang-switch .lang-item{list-style:none; display:inline-block;}
.lang-switch ul{display:flex; gap:4px; list-style:none;}
.cart-badge{position:relative;}
.cart-badge .count{position:absolute; top:-8px; right:-10px; background:var(--accent); color:#fff; font-size:.65rem; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
.menu-toggle{display:none; background:none; border:0; color:#fff; font-size:1.4rem;}

/* ===== HERO ===== */
.hero{
  background:var(--bg-dark);
  color:var(--text-light);
  position:relative;
  overflow:hidden;
  min-height:560px;
  display:flex;
  align-items:center;
}

/* Image layer: pinned to the right, fills the full height of the hero.
   If the uploaded photo is wider/taller than this box, object-fit:cover
   crops it to fill — it never pushes the hero taller or overlaps as raw overflow. */
.hero-bg{
  position:absolute;
  top:0; bottom:0; right:0;
  width:62%;
  z-index:1;
}
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease;}
.hero-slide.is-active{opacity:1; visibility:visible;}
.hero-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-slide--placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#151515; color:#555; font-size:.85rem; text-align:center; padding:20px;}

/* Gradient sits above the image and below the text, so however large the
   photo is, the headline always stays readable in front of it. */
.hero-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to right, var(--bg-dark) 0%, var(--bg-dark) 28%, rgba(13,13,13,.75) 45%, rgba(13,13,13,0) 68%);
}

.hero-inner{position:relative; z-index:3; max-width:var(--max-width); margin:0 auto; width:100%; padding:60px 24px;}
.hero-text-col{max-width:480px;}
.hero-title{font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900; text-transform:uppercase; line-height:1.02; margin:0 0 18px;}
.hero-title .accent-line{color:var(--accent);}
.hero-text{color:var(--text-muted); max-width:400px; margin:0 0 26px; font-size:1rem;}
.cta-btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; font-weight:700; padding:13px 26px; border-radius:30px; font-size:.95rem; transition:background .2s;}
.cta-btn:hover{background:var(--accent-hover); color:#fff;}

.hero-badges{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap;}
.badge-item{text-align:center; font-size:.8rem; color:var(--text-muted); max-width:100px; text-decoration:none; display:block;}
.badge-icon{width:52px; height:52px; border:1px solid #2a2a2a; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; color:var(--accent); font-size:1.3rem; overflow:hidden; transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.badge-item:hover .badge-icon{background-color:var(--accent); border-color:var(--accent); box-shadow:0 8px 20px rgba(240,125,26,.35); transform:translateY(-3px); color:#fff;}

.hero-dots{position:absolute; left:50%; bottom:60px; transform:translateX(-50%); z-index:4; display:flex; gap:6px;}
.hero-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); display:inline-block; cursor:pointer; transition:all .2s;}
.hero-dots span.active{background:var(--accent); width:22px; border-radius:4px;}

/* ===== FEATURE ICON STRIP ===== */
.feature-strip{background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); margin:-36px auto 50px; position:relative; z-index:5; padding:26px 20px; max-width:var(--max-width);}
.feature-strip .wrap{display:flex; justify-content:space-between; align-items:center; overflow-x:auto; gap:10px;}
.feature-item{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:88px; font-size:.78rem; color:#444; text-align:center;}
.feature-item .icon{width:44px; height:44px; border-radius:50%; background:#fff3e8; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.2rem; overflow:hidden; transition:background-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.feature-item:hover .icon{background-color:var(--accent); box-shadow:0 8px 20px rgba(240,125,26,.35); transform:translateY(-3px);}

/* Icon-mask: turns any uploaded PNG/SVG icon into a solid, recolorable shape.
   Default shows it in the accent color; on hover the parent's background
   flips to accent and this flips to white — a true color invert either way. */
.icon-mask{
  display:block; width:55%; height:55%;
  background-color:var(--accent);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  transition:background-color .25s ease;
}
.feature-item:hover .icon-mask,
.badge-item:hover .icon-mask{background-color:#fff;}

/* ===== SECTION HEADING ===== */
.section{padding:10px 24px 60px;}
.section-head{margin-bottom:26px; max-width:var(--max-width); margin-left:auto; margin-right:auto;}
.section-head h2{font-size:1.5rem; font-weight:800; margin:0;}
.section-head .underline{width:60px; height:4px; background:var(--accent); border-radius:2px; margin-top:8px;}

/* ===== PRODUCT GRID ===== */
.product-carousel{position:relative; max-width:var(--max-width); margin:0 auto;}

/* Only the homepage "Best Selling Products" carousel scrolls horizontally —
   the Shop page and category archives keep the normal wrapping grid. */
.product-carousel .product-grid,
.product-carousel ul.products{
  display:flex !important;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  gap:18px;
  padding:2px 2px 10px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.product-carousel .product-grid::-webkit-scrollbar,
.product-carousel ul.products::-webkit-scrollbar{display:none;}
.product-carousel .product-grid > *,
.product-carousel.product-carousel ul.products > li{
  flex:0 0 auto;
  width:calc((100% - 5 * 18px) / 6) !important;
  scroll-snap-align:start;
}

.carousel-arrow{
  position:absolute; top:38%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:0; box-shadow:0 4px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; line-height:1; color:#1a1a1a; cursor:pointer;
  z-index:5; transition:background .2s, color .2s;
}
.carousel-arrow:hover{background:var(--accent); color:#fff;}
.carousel-arrow.left{left:-18px;}
.carousel-arrow.right{right:-18px;}
.product-grid, ul.products{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; list-style:none; margin:0; padding:0;}
ul.products li.product{width:100% !important; float:none !important; margin:0 !important; clear:none !important; list-style:none;}
.product-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; text-align:center; transition:transform .2s, box-shadow .2s; list-style:none;}
.product-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.08);}
.product-thumb-link{display:block;}
.product-thumb{aspect-ratio:1/1; background:#f2f2f2; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.product-thumb img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; display:block;}
.product-info{padding:14px 10px; text-align:center;}
.product-info .name{display:block; font-weight:700; font-size:.9rem; margin-bottom:4px; color:#1a1a1a; text-decoration:none;}
.product-info .meta{font-size:.75rem; color:#999; margin-bottom:8px;}
.product-info .price-row{margin-bottom:10px; font-size:.9rem;}
.product-info .price-row .price{color:var(--accent); font-weight:700;}
.product-info .price-row del{color:#bbb; font-weight:400; margin-right:6px;}
.product-info .price-row ins{text-decoration:none;}
.add-cart{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#fff3e8; color:var(--accent); border:0; cursor:pointer; text-decoration:none;}
.view-all{display:block; width:fit-content; margin:34px auto 0; background:var(--accent); color:#fff; font-weight:700; padding:12px 30px; border-radius:30px; font-size:.9rem;}

/* ===== FOOTER ===== */
.site-footer{background:var(--bg-darker); color:var(--text-muted); padding:60px 24px 20px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:30px; padding-bottom:30px; border-bottom:1px solid #1f1f1f; max-width:var(--max-width); margin:0 auto;}
.footer-grid h4{color:#fff; font-size:1rem; margin-bottom:16px;}
.footer-brand{text-align:center;}
.footer-brand p{margin-left:auto; margin-right:auto;}
.footer-certificate{width:200px; max-width:200px; height:auto; margin:14px auto; display:block;}
.social-icons{display:flex; gap:12px; margin-top:16px; justify-content:center;}
.social-icons a{width:36px; height:36px; border-radius:50%; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; color:#fff; transition:background-color .2s, border-color .2s;}
.social-icons a:hover{background:var(--accent); border-color:var(--accent);}
.footer-grid li{margin-bottom:8px; font-size:.85rem;}
.footer-widget ul{margin:0;}
.footer-bottom{text-align:center; padding-top:20px; font-size:.8rem; max-width:var(--max-width); margin:0 auto;}

/* ===== GENERIC PAGE CONTENT (fallback templates) ===== */
.page-content{max-width:var(--max-width); margin:0 auto; padding:60px 24px;}

/* ===== WOOCOMMERCE: SHOP / CATEGORY ARCHIVE ===== */
.woocommerce-products-header{max-width:var(--max-width); margin:0 auto; padding:50px 24px 30px;}
.woocommerce-products-header__title{font-size:2rem; font-weight:800; margin:0 0 8px;}
.woocommerce{max-width:var(--max-width); margin:0 auto; padding:0 24px 60px;}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin:0 0 20px;}
.woocommerce .woocommerce-ordering select{border:1px solid var(--card-border); border-radius:6px; padding:8px 12px; font-family:inherit;}
.woocommerce nav.woocommerce-pagination{margin-top:34px; text-align:center;}
.woocommerce nav.woocommerce-pagination ul{display:inline-flex; gap:6px; border:0;}
.woocommerce nav.woocommerce-pagination ul li{border:0;}
.woocommerce nav.woocommerce-pagination .page-numbers{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; border:1px solid var(--card-border); color:#1a1a1a;}
.woocommerce nav.woocommerce-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination .page-numbers:hover{background:var(--accent); color:#fff; border-color:var(--accent);}

/* ===== WOOCOMMERCE: SINGLE PRODUCT PAGE ===== */
.woocommerce div.product{max-width:var(--max-width); margin:0 auto; padding:50px 24px 70px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:16px 48px;}
.woocommerce div.product .woocommerce-product-gallery{border-radius:var(--radius); overflow:hidden; position:static; grid-column:1; grid-row:1 / span 2;}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none;}
.woocommerce div.product .woocommerce-product-gallery__image{width:100%; margin:0;}
.woocommerce div.product .woocommerce-product-gallery__image a{display:block;}
.woocommerce div.product .woocommerce-product-gallery__image img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  display:block;
  border-radius:var(--radius);
  aspect-ratio:1/1;
  object-fit:cover;
}
.woocommerce div.product .woocommerce-product-gallery__image:first-child img{aspect-ratio:1/1;}
.woocommerce div.product .product_title{font-size:2rem; font-weight:800; margin:0 0 12px;}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--accent); font-size:1.4rem; font-weight:700;}
.woocommerce div.product .woocommerce-product-details__short-description{margin:16px 0; color:#555;}
.woocommerce div.product form.cart{margin-top:24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.woocommerce div.product .quantity input.qty{width:64px; height:46px; text-align:center; border:1px solid var(--card-border); border-radius:8px; font-family:inherit; font-size:1rem;}

/* Variable product options (e.g. Weight: 50g / 250g) */
.woocommerce div.product .variations_form{width:100%;}
.woocommerce div.product table.variations{width:100%; border:0; margin-bottom:18px;}
.woocommerce div.product table.variations tr{display:block; margin-bottom:14px;}
.woocommerce div.product table.variations th.label{display:block; text-align:left; font-weight:700; font-size:.9rem; margin-bottom:8px; padding:0;}
.woocommerce div.product table.variations td{display:block; padding:0;}
.woocommerce div.product table.variations select{
  width:100%; max-width:280px; height:46px; padding:0 14px;
  border:1px solid var(--card-border); border-radius:8px;
  font-family:inherit; font-size:.95rem; background:#fff; color:#1a1a1a;
  cursor:pointer;
}
.woocommerce div.product .reset_variations{display:inline-block; margin-top:8px; font-size:.8rem; color:#999; text-decoration:underline;}
.woocommerce div.product .woocommerce-variation{
  width:100%; padding:14px 16px; margin-bottom:14px;
  background:#faf8f5; border-radius:10px; border:1px solid var(--card-border);
}
.woocommerce div.product .woocommerce-variation-price .price{font-size:1.2rem;}
.woocommerce div.product .woocommerce-variation-description p{margin:6px 0 0; font-size:.85rem; color:#666;}
.woocommerce div.product .woocommerce-variation-availability{font-size:.85rem; margin-top:6px;}
.woocommerce div.product .single_variation_wrap{width:100%;}

.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button{background:var(--accent); color:#fff; border:0; border-radius:30px; padding:14px 30px; font-weight:700; font-size:.95rem; cursor:pointer; transition:background .2s;}
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{background:var(--accent-hover); color:#fff;}
.woocommerce div.product .single_add_to_cart_button.disabled,
.woocommerce div.product .single_add_to_cart_button:disabled{opacity:.5; cursor:not-allowed;}
.woocommerce div.product .single_add_to_cart_button.disabled:hover,
.woocommerce div.product .single_add_to_cart_button:disabled:hover{background:var(--accent);}
.woocommerce div.product .product_meta{margin-top:24px; font-size:.85rem; color:#888;}
.woocommerce div.product .summary{grid-column:2; grid-row:1;}
.woocommerce-tabs{grid-column:2; grid-row:2; margin-top:8px; border-top:1px solid var(--card-border); padding-top:30px; align-self:start;}
.woocommerce-tabs ul.tabs{display:flex; gap:24px; list-style:none; margin:0 0 20px; padding:0; border-bottom:1px solid var(--card-border);}
.woocommerce-tabs ul.tabs li{padding-bottom:12px; font-weight:700; cursor:pointer; color:#999;}
.woocommerce-tabs ul.tabs li.active{color:#1a1a1a; border-bottom:2px solid var(--accent);}
.woocommerce div.product .related.products{grid-column:1 / -1; margin-top:50px; border-top:1px solid var(--card-border); padding-top:40px;}
.woocommerce div.product .related.products > h2{font-size:1.4rem; font-weight:800; margin-bottom:20px;}

/* ===== WOOCOMMERCE: CART / CHECKOUT (baseline branding) ===== */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce{max-width:var(--max-width); margin:0 auto; padding:50px 24px 70px;}
.woocommerce table.shop_table{border-collapse:collapse; width:100%;}
.woocommerce table.shop_table th{text-align:left; padding:12px; border-bottom:2px solid var(--card-border); font-weight:700;}
.woocommerce table.shop_table td{padding:12px; border-bottom:1px solid var(--card-border);}
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order{background:var(--accent); border:0; border-radius:30px; padding:14px 30px; color:#fff; font-weight:700; cursor:pointer;}

@media (max-width:768px){
  .woocommerce div.product{grid-template-columns:1fr; grid-template-rows:auto;}
  .woocommerce div.product .woocommerce-product-gallery{grid-column:1; grid-row:auto;}
  .woocommerce div.product .summary{grid-column:1; grid-row:auto;}
  .woocommerce-tabs{grid-column:1; grid-row:auto;}
}

/* Safety net: this theme has no sidebar layout on Shop/archive pages —
   if any plugin ever outputs one anyway, keep it from showing. */
.woocommerce-page #secondary,
.woocommerce-page .widget-area{display:none;}

@media (max-width:960px){
  .hero{flex-direction:column; align-items:stretch; min-height:0;}
  .hero-bg{position:relative; top:auto; bottom:auto; right:auto; width:100%; height:260px;}
  .hero-dots{bottom:16px;}
  .hero-overlay{background:linear-gradient(to top, var(--bg-dark) 15%, rgba(13,13,13,0) 60%);}
  .hero-inner{padding:32px 24px 40px;}
  .hero-text-col{max-width:100%;}
  .product-grid, ul.products{grid-template-columns:repeat(3,1fr);}
  .product-carousel .product-grid > *,
  .product-carousel.product-carousel ul.products > li{width:calc((100% - 2 * 18px) / 3) !important;}
  .carousel-arrow.left{left:4px;}
  .carousel-arrow.right{right:4px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .main-nav{display:none;}
  .menu-toggle{display:block;}
}
@media (max-width:560px){
  .product-grid, ul.products{grid-template-columns:repeat(2,1fr);}
  .product-carousel .product-grid > *,
  .product-carousel.product-carousel ul.products > li{width:calc((100% - 18px) / 2) !important;}
  .feature-strip .wrap{justify-content:flex-start;}
}