/*
Theme Name: Lumino
Theme URI: https://example.com/lumino
Author: Your Name
Author URI: https://example.com
Description: A clean, minimal, fully original WooCommerce-ready WordPress theme with a mega menu, hero slider, off-canvas cart, and an extensive Customizer. Built from scratch — no code, assets, or branding taken from any commercial theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumino
Tags: e-commerce, custom-menu, custom-logo, translation-ready, threaded-comments
*/

/* =====================================================
   1. CSS RESET / BASE
===================================================== */
:root{
  --lumino-primary: #1a1a1a;
  --lumino-accent: #2f6f5e;
  --lumino-accent-contrast: #ffffff;
  --lumino-text: #2b2b2b;
  --lumino-muted: #6f6f6f;
  --lumino-bg: #ffffff;
  --lumino-bg-alt: #f7f6f4;
  --lumino-border: #e7e5e1;
  --lumino-header-bg: #ffffff;
  --lumino-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --lumino-font-heading: Georgia, "Times New Roman", serif;
  --lumino-container: 1240px;
  --lumino-radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--lumino-font-body);
  color: var(--lumino-text);
  background: var(--lumino-bg);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; transition: color .15s ease; }
a:hover{ color: var(--lumino-accent); }
h1,h2,h3,h4,h5,h6{
  font-family: var(--lumino-font-heading);
  font-weight:400;
  line-height:1.25;
  margin:0 0 .6em;
  letter-spacing:.2px;
}
h1{ font-size:2.4rem; }
h2{ font-size:1.9rem; }
h3{ font-size:1.4rem; }
p{ margin:0 0 1.2em; }
ul{ margin:0; padding:0; list-style:none; }
button, input, select, textarea{ font-family:inherit; font-size:1rem; }
button{ cursor:pointer; }
.screen-reader-text{
  position:absolute !important; width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.screen-reader-text:focus{
  position:fixed; top:8px; left:8px; width:auto; height:auto; z-index:100000;
  padding:12px 18px; background:#fff; color:#111; clip:auto;
}

/* =====================================================
   2. LAYOUT / CONTAINER
===================================================== */
.lumino-container{
  max-width: var(--lumino-container);
  margin:0 auto;
  padding:0 24px;
}
.lumino-section{ padding: 64px 0; }
.lumino-section--tight{ padding: 32px 0; }
.lumino-grid{
  display:grid;
  gap:32px;
}
@media(min-width:900px){
  .lumino-grid--2{ grid-template-columns:repeat(2,1fr); }
  .lumino-grid--3{ grid-template-columns:repeat(3,1fr); }
  .lumino-grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* =====================================================
   3. SITE HEADER
===================================================== */
.site-header{
  background: var(--lumino-header-bg);
  border-bottom:1px solid var(--lumino-border);
  position:relative;
  z-index:100;
}
.site-header.is-sticky{
  position:sticky; top:0;
  box-shadow:0 1px 10px rgba(0,0,0,.05);
  animation: lumino-slidedown .25s ease;
}
@keyframes lumino-slidedown{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
}
.site-branding .custom-logo, .site-branding img{ max-height:44px; width:auto; }
.site-branding .site-title{ font-size:1.5rem; margin:0; }
.site-branding .site-title a{ color:var(--lumino-primary); }
.site-branding .site-description{ font-size:.8rem; color:var(--lumino-muted); margin:2px 0 0; }

.site-header__actions{ display:flex; align-items:center; gap:18px; }
.site-header__icon-btn{
  background:none; border:0; display:flex; align-items:center; gap:6px;
  color:var(--lumino-primary); position:relative; padding:4px;
}
.site-header__icon-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; }
.cart-count{
  position:absolute; top:-6px; right:-8px;
  background:var(--lumino-accent); color:var(--lumino-accent-contrast);
  font-size:.65rem; line-height:1; border-radius:50%;
  min-width:17px; height:17px; display:flex; align-items:center; justify-content:center;
}

/* Search toggle */
.header-search{ position:relative; }
.header-search__form{
  display:none; position:absolute; right:0; top:calc(100% + 12px);
  background:#fff; border:1px solid var(--lumino-border); padding:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); min-width:280px;
}
.header-search.is-open .header-search__form{ display:flex; }
.header-search__form input[type="search"]{
  flex:1; border:1px solid var(--lumino-border); padding:8px 10px; margin-right:6px;
}
.header-search__form button{ background:var(--lumino-primary); color:#fff; border:0; padding:8px 14px; }

/* =====================================================
   4. PRIMARY NAVIGATION + MEGA MENU
===================================================== */
.primary-navigation{ display:none; }
@media(min-width:1000px){ .primary-navigation{ display:block; } }
.primary-menu{ display:flex; align-items:center; gap:6px; }
.primary-menu > li{ position:relative; }
.primary-menu > li > a{
  display:block; padding:12px 16px; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.6px; color:var(--lumino-primary);
}
.primary-menu > li:hover > a{ color:var(--lumino-accent); }
.primary-menu > li.menu-item-has-children > a::after{
  content:""; display:inline-block; width:6px; height:6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); margin-left:6px;
}

/* standard dropdown */
.primary-menu .sub-menu{
  position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; border:1px solid var(--lumino-border);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .18s ease; padding:8px 0;
}
.primary-menu li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.primary-menu .sub-menu li a{ display:block; padding:9px 18px; font-size:.9rem; }
.primary-menu .sub-menu .sub-menu{ top:-9px; left:100%; }

/* mega menu variant: applied when a top-level item has 3+ children */
.primary-menu > li.is-mega-menu > .sub-menu{
  left:50%; transform:translate(-50%,6px);
  width:min(900px, 90vw);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px 24px; padding:28px;
}
.primary-menu > li.is-mega-menu:hover > .sub-menu{ transform:translate(-50%,0); }
.primary-menu > li.is-mega-menu .sub-menu > li{ display:block; }
.primary-menu > li.is-mega-menu .sub-menu .sub-menu{
  position:static; opacity:1; visibility:visible; transform:none;
  border:0; box-shadow:none; padding:4px 0 0;
}
.primary-menu > li.is-mega-menu > .sub-menu > li > a{
  font-weight:600; padding:6px 0; text-transform:none; letter-spacing:0;
  border-bottom:1px solid var(--lumino-border); margin-bottom:6px;
}

/* Mobile menu toggle */
.mobile-menu-toggle{
  display:flex; background:none; border:0; flex-direction:column; gap:5px; padding:6px;
}
@media(min-width:1000px){ .mobile-menu-toggle{ display:none; } }
.mobile-menu-toggle span{ width:24px; height:2px; background:var(--lumino-primary); }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(340px,86vw); height:100%;
  background:#fff; transform:translateX(100%); transition:transform .25s ease;
  z-index:1000; overflow-y:auto; box-shadow:-10px 0 30px rgba(0,0,0,.15);
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav__header{ display:flex; justify-content:flex-end; padding:16px; }
.mobile-nav__close{ background:none; border:0; font-size:1.6rem; line-height:1; }
.mobile-menu{ padding:0 20px 40px; }
.mobile-menu li{ border-bottom:1px solid var(--lumino-border); }
.mobile-menu a{ display:block; padding:14px 4px; }
.mobile-menu .sub-menu{ padding-left:14px; display:none; }
.mobile-menu li.is-expanded > .sub-menu{ display:block; }
.mobile-menu .submenu-toggle{ background:none; border:0; float:right; padding:14px 4px; }
.lumino-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.lumino-overlay.is-visible{ opacity:1; visibility:visible; }

/* =====================================================
   5. HERO SLIDER
===================================================== */
.hero-slider{ position:relative; overflow:hidden; background:var(--lumino-bg-alt); }
.hero-slide{
  display:none; position:relative; min-height:420px;
  display:flex; align-items:center; background-size:cover; background-position:center;
}
.hero-slide.is-active{ display:flex; }
.hero-slide::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.28);
}
.hero-slide__content{
  position:relative; z-index:2; color:#fff; max-width:560px; padding:24px;
}
.hero-slide__content h2{ color:#fff; font-size:2.6rem; }
.hero-slide__content p{ font-size:1.05rem; opacity:.92; }
.hero-slide__btn{
  display:inline-block; background:var(--lumino-accent); color:var(--lumino-accent-contrast);
  padding:12px 28px; text-transform:uppercase; font-size:.85rem; letter-spacing:1px;
  border-radius:var(--lumino-radius);
}
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(255,255,255,.85); border:0; width:42px; height:42px; border-radius:50%;
  font-size:1.2rem;
}
.hero-nav--prev{ left:20px; } .hero-nav--next{ right:20px; }
.hero-dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5);
}
.hero-dots button.is-active{ background:#fff; }

/* =====================================================
   6. PRODUCT / SHOP GENERAL (WooCommerce)
===================================================== */
.woocommerce ul.products{
  display:grid !important; gap:32px !important; margin:0 !important; padding:0 !important;
  grid-template-columns:repeat(2,1fr) !important;
}
@media(min-width:700px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media(min-width:1000px){ .woocommerce ul.products{ grid-template-columns:repeat(4,1fr) !important; } }
.woocommerce ul.products li.product{ list-style:none; text-align:left; }
.woocommerce ul.products li.product img{ border-radius:var(--lumino-radius); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1rem; font-family:var(--lumino-font-body); margin:10px 0 4px;
}
.woocommerce ul.products li.product .price{ color:var(--lumino-muted); font-weight:600; }
.woocommerce ul.products li.product .price ins{ color:var(--lumino-accent); text-decoration:none; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button{
  background:var(--lumino-primary); color:#fff; border-radius:var(--lumino-radius);
  padding:10px 22px; border:0; font-size:.85rem; text-transform:uppercase; letter-spacing:.6px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--lumino-accent); color:#fff; }
.woocommerce span.onsale{
  background:var(--lumino-accent); color:#fff; border-radius:50%; min-width:48px; min-height:48px;
  line-height:48px; font-weight:400; font-size:.75rem;
}
.woocommerce nav.woocommerce-pagination ul{ border:0; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0 4px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--lumino-border); border-radius:var(--lumino-radius);
}

/* single product */
.woocommerce div.product div.images{ border-radius:var(--lumino-radius); overflow:hidden; }
.woocommerce div.product .product_title{ font-size:2rem; }
.woocommerce div.product p.price{ font-size:1.4rem; color:var(--lumino-accent); }
.woocommerce div.product .summary{ padding-left:6px; }

/* cart / checkout tidy-up */
.woocommerce table.shop_table{ border:1px solid var(--lumino-border); border-radius:var(--lumino-radius); }
.woocommerce table.shop_table th{ border-bottom:1px solid var(--lumino-border); }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{ width:100% !important; float:none !important; }
@media(min-width:800px){
  .woocommerce-checkout .col2-set .col-1{ width:48% !important; float:left !important; }
  .woocommerce-checkout .col2-set .col-2{ width:48% !important; float:right !important; }
}

/* =====================================================
   7. OFF-CANVAS CART
===================================================== */
.off-canvas-cart{
  position:fixed; inset:0 0 0 auto; width:min(400px,90vw); height:100%;
  background:#fff; z-index:1000; transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; box-shadow:-10px 0 30px rgba(0,0,0,.15);
}
.off-canvas-cart.is-open{ transform:translateX(0); }
.off-canvas-cart__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--lumino-border);
}
.off-canvas-cart__close{ background:none; border:0; font-size:1.5rem; }
.off-canvas-cart__body{ padding:20px; overflow-y:auto; flex:1; }
.off-canvas-cart .widget_shopping_cart_content .cart_list li{
  display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--lumino-border);
}
.off-canvas-cart .widget_shopping_cart_content .cart_list li img{ width:64px; border-radius:var(--lumino-radius); }
.off-canvas-cart .total{ font-weight:600; padding-top:12px; }
.off-canvas-cart .buttons{ display:flex; gap:10px; margin-top:16px; }
.off-canvas-cart .buttons a{ flex:1; text-align:center; }

/* =====================================================
   8. FOOTER
===================================================== */
.site-footer{ background:var(--lumino-bg-alt); border-top:1px solid var(--lumino-border); margin-top:64px; }
.site-footer__widgets{ padding:56px 0; }
.site-footer__widgets .lumino-grid{ grid-template-columns:1fr; }
@media(min-width:800px){ .site-footer__widgets .lumino-grid{ grid-template-columns:repeat(4,1fr); } }
.site-footer .widget-title{ font-size:1rem; text-transform:uppercase; letter-spacing:.6px; margin-bottom:16px; }
.site-footer__bottom{
  border-top:1px solid var(--lumino-border); padding:20px 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  font-size:.85rem; color:var(--lumino-muted);
}
.social-links{ display:flex; gap:14px; }
.social-links a svg{ width:18px; height:18px; }

/* =====================================================
   9. GENERAL CONTENT / BLOG
===================================================== */
.entry-content img{ border-radius:var(--lumino-radius); }
.post-list{ display:grid; gap:40px; }
.post-card__thumb img{ border-radius:var(--lumino-radius); }
.post-card .entry-title{ font-size:1.4rem; margin:16px 0 6px; }
.post-card .entry-meta{ font-size:.8rem; color:var(--lumino-muted); }
.pagination{ display:flex; gap:10px; margin-top:32px; }
.pagination a, .pagination span{
  border:1px solid var(--lumino-border); padding:8px 14px; border-radius:var(--lumino-radius);
}

/* Comments */
.comment-list{ margin:0 0 32px; }
.comment-list .comment-body{ border-bottom:1px solid var(--lumino-border); padding:20px 0; }
.comment-form input, .comment-form textarea{
  width:100%; border:1px solid var(--lumino-border); padding:10px; margin-bottom:14px; border-radius:var(--lumino-radius);
}

/* Utility */
.visually-hidden{ display:none; }
@media(max-width:999px){ .desktop-only{ display:none !important; } }
@media(min-width:1000px){ .mobile-only{ display:none !important; } }