/* =========================================
   Mountain Gear Albania - Modern Storefront CSS
   Paste in: Appearance > Customize > Additional CSS
   ========================================= */

:root{
  --bg:#ffffff;
  --surface: rgba(255,255,255,.82);
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --soft:#f8fafc;
  --shadow: 0 18px 50px rgba(2,6,23,.10);
  --shadow-sm: 0 10px 25px rgba(2,6,23,.08);
  --radius:16px;
  --brand:#0f172a;
}

html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


}

/* =========================
   HEADER
   ========================= */
.site-header{
  background: var(--surface) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 0 !important;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.site-header a{ color: var(--text) !important; }

/* Hide header cart */
.site-header-cart,
#site-header-cart{ display:none !important; }

/* Desktop layout */
@media (min-width: 768px){
  .site-header .col-full{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap: 18px !important;
  }

  .site-header .site-branding{
    float:none !important;
    width:auto !important;
    margin:0 !important;
    text-align:left !important;
    flex: 0 0 auto !important;
  }

  .woocommerce-active .site-header .main-navigation{
    float:none !important;
    width:auto !important;
    margin:0 !important;
    flex: 1 1 auto !important;
    text-align:center !important;
  }

  .woocommerce-active .site-header .site-search{
    float:none !important;
    width: 360px !important;
    margin:0 !important;
    flex: 0 0 auto !important;
  }
}

/* ✅ Smaller logo */
.site-header .custom-logo-link img{
  max-width: 140px !important;
  height:auto !important;
}

/* =========================
   SEARCH (fix broken icon)
   ========================= */
/* =========================
   FIX REAL SEARCH ICON (Storefront + Woo)
   ========================= */

/* Hide the default FontAwesome icon */
.woocommerce-product-search::before,
.widget_product_search form::before{
  content: none !important;
  display: none !important;
}

/* Add modern SVG icon manually */
.widget_product_search form::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* Space between text and icon */
.widget_product_search input[type="search"]{
  padding-right: 48px !important;
}


/* =========================
   NAVIGATION
   ========================= */
.storefront-primary-navigation{ background: transparent !important; }

.main-navigation{
  float:none !important;
  width:100% !important;
}
.main-navigation ul.menu,
.main-navigation ul.nav-menu{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override Storefront big padding */
.main-navigation a{ padding: 10px 10px !important; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a{
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: var(--text) !important;
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover{
  background: rgba(15,23,42,.05);
  transform: translateY(-1px);
}

/* Active underline */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
  background: transparent !important;
  position: relative !important;
}
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: var(--brand);
  border-radius: 999px;
}

/* Dropdown */
.main-navigation ul ul{
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.main-navigation ul ul li a{
  background:#fff !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
}
.main-navigation ul ul li a:hover{
  background: var(--soft) !important;
}

/* =========================
   TYPOGRAPHY + SPACING
   ========================= */
h1,h2,h3,h4,h5{
  color: var(--text) !important;
  font-weight: 800 !important;
}
p{ color: var(--muted); }

/* Hide default homepage title */
.home .entry-header{ display:none; }

.site-main{ margin-bottom: 50px !important; }
.home .site-main{ margin-top: 26px !important; }

.wp-block-heading{
  text-align:center;
  margin: 10px 0 18px !important;
}

/* =========================
   CATEGORY / IMAGE CARDS
   ========================= */
.wp-block-image img,
.wp-block-cover img{
  border-radius: var(--radius) !important;
}
.home .wp-block-image,
.home .wp-block-cover,
.home .wp-block-group{
  border-radius: var(--radius) !important;
  overflow:hidden;
}
.wp-block-columns{ gap: 18px !important; }

.wp-block-image img{
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-image img:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

/* =========================
   PRODUCTS (cards) + HIDE ADD TO CART
   ========================= */
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  padding-bottom: 12px;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
}

.woocommerce ul.products li.product a img,
.wc-block-grid__products .wc-block-grid__product-image img{
  border-radius: 14px;
  margin: 0 0 12px 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__products .wc-block-grid__product-title{
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 0 14px;
  color: var(--text) !important;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__products .wc-block-grid__product-price{
  padding: 0 14px 10px;
  color: var(--muted) !important;
  font-weight: 800 !important;
}

/* ✅ Hide ALL add-to-cart buttons (shop + blocks) */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.ajax_add_to_cart,
.wc-block-grid__products .wc-block-grid__product .add_to_cart_button,
.wc-block-grid__products .wc-block-grid__product .ajax_add_to_cart{
  display:none !important;
}

/* Style remaining product action buttons (e.g., "Read more", "Select options") */
.woocommerce ul.products li.product .button,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link{
  width: calc(100% - 28px);
  margin: 0 14px 12px !important;
  text-align:center;
  border-radius: 999px !important;
  background: var(--brand) !important;
  color:#fff !important;
  font-weight: 800 !important;
  padding: 11px 16px !important;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product .button:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover{
  opacity:.92;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(2,6,23,.15) !important;
}

/* =========================
   HOMEPAGE HERO (Landing image) - for Gutenberg Cover block
   ========================= */
.home .wp-block-cover{
  min-height: 520px;
  border-radius: 18px;
  overflow:hidden;
  margin: 18px auto 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.home .wp-block-cover__inner-container{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}
.home .wp-block-cover h1,
.home .wp-block-cover h2{
  font-weight: 900 !important;
  letter-spacing: -.6px;
}

/* Make hero button white like REI */
.home .wp-block-cover .wp-block-button__link{
  background:#fff !important;
  color:#111827 !important;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background: var(--soft) !important;
  border-top: 1px solid var(--line);
}
.site-footer a{ color: var(--text) !important; }
.site-info {display:none}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){
  .site-header{ padding: 12px 0 !important; }

  .site-header .site-branding{
    text-align:center !important;
    margin-bottom: 8px !important;
  }

  .main-navigation ul.menu,
  .main-navigation ul.nav-menu{
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .woocommerce-active .site-header .site-search{
    width: 100% !important;
    margin-top: 10px !important;
  }
}


/* =========================
   BUSINESS NAME NEXT TO LOGO 
   ========================= */

/* Keep logo + text aligned */
.site-branding{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}


/* Make sure logo doesn't get too huge */
.site-header .custom-logo-link img{
  max-width: 135px !important;
  height:auto !important;
}

/* Premium brand lockup (2 lines, clean, not too long) */
.site-branding::after{
  content:"MOUNTAIN GEAR\A& TRANSPORT ALBANIA";
  white-space: pre;              /* keeps \A line break */
  line-height: 1.05;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #0f172a;
  opacity: .92;


  /* nice separation */
  padding-left: 14px;
  margin-left: 6px;
  border-left: 2px solid #e2e8f0;

  /* subtle badge feel */
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Make second line slightly softer */
.site-branding::after{
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Optional: reduce width so it doesn't push search too far */
@media (min-width: 768px){
  .site-branding{
    max-width: 420px;
  }
}

/* Mobile: show short brand only */
@media (max-width: 768px){

  .site-branding::after{
    content: "Mountain Gear\A& Transport Albania";
    display: block;
    white-space: pre-line;
    font-size: 11px;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
   
		
  }

}
@media (max-width: 768px){
  .site-branding::after{
    opacity: .95;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
}


	


/* =========================
   NATURAL GREEN HEADER
   ========================= */

.site-header{
  background: linear-gradient(
    135deg,
    #0f2f24,
    #143d2b
  ) !important;
  border-bottom: none !important;
}

.site-header a,
.site-header .site-branding::after,
.site-header .main-navigation a{
  color: #f8fafc !important;
}

/* Search bar contrast */
.site-search input[type="search"]{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #f8fafc !important;
}
.site-search input::placeholder{
  color: rgba(248,250,252,.7) !important;
}

/* Search icon color */
.widget_product_search form::after{
  filter: brightness(1.5);
}

/* =========================
   FULL MENU DESIGN (GREEN HEADER) – WHITE TEXT
   ========================= */

/* MAIN MENU LINKS */
.site-header .main-navigation a{
  color: #ffffff !important;          /* force white */
  font-weight: 700;
  letter-spacing: .4px;
  transition: color .2s ease, background .2s ease;
  position: relative;
}

/* HOVER EFFECT */
.site-header .main-navigation a:hover{
  color: #ffffff !important;
}

/* UNDERLINE ANIMATION */
.site-header .main-navigation a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#9ae6b4;
  transition: width .25s ease;
}

.site-header .main-navigation a:hover::after{
  width:100%;
}

/* ACTIVE MENU ITEM */
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a{
  color: #ffffff !important;
  border-bottom: 2px solid #9ae6b4 !important;
  padding-bottom: 6px;
}

/* =========================
   DROPDOWN / SUBMENU
   ========================= */

.site-header .main-navigation ul ul{
  background: #0f2f24 !important;
  border-radius: 14px;
  padding: 8px 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
}

.site-header .main-navigation ul ul li a{
  color: #ffffff !important;          /* white submenu text */
  padding: 10px 16px !important;
  font-weight: 600;
}

.site-header .main-navigation ul ul li a:hover{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

/* =========================
   MOBILE MENU
   ========================= */

.menu-toggle,
.menu-toggle:hover{
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

.main-navigation.toggled ul{
  background: #0f2f24 !important;
  border-radius: 14px;
  padding: 12px;
}

.main-navigation.toggled ul li a{
  color: #ffffff !important;          /* white mobile menu text */
  padding: 12px 14px !important;
  display: block;
}

.main-navigation.toggled ul li a:hover{
  background: rgba(255,255,255,.08) !important;
  border-radius: 10px;
}

/* =========================
   SUBMENU INDICATORS (arrows)
   ========================= */

.main-navigation ul li.menu-item-has-children > a::before{
  content:"▾";
  margin-right: 6px;
  font-size: 12px;
  opacity:.7;
  color: #ffffff;
}

/* =========================
   FORCE ALL MENU TEXT WHITE
   ========================= */

/* Desktop menu */
.site-header .main-navigation a,
.site-header .main-navigation ul li a,
.site-header .main-navigation ul.menu > li > a,
.site-header .main-navigation ul.nav-menu > li > a{
  color: #ffffff !important;
}

/* Hover */
.site-header .main-navigation a:hover,
.site-header .main-navigation ul li a:hover{
  color: #ffffff !important;
}

/* Active item */
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a{
  color: #ffffff !important;
}

/* Mobile menu */
.main-navigation.toggled ul li a{
  color: #ffffff !important;
}

/* Submenu */
.site-header .main-navigation ul ul li a{
  color: #ffffff !important;
}

.site-header a:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(154,230,180,.6) !important;
  border-radius: 6px;
}


/* =========================
   FORCE LOGO LEFT / SEARCH RIGHT
   ========================= */

@media (min-width: 768px){

  /* Layout row */
  .site-header .col-full{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* LOGO + NAME → LEFT */
  .site-header .site-branding{
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    justify-content: flex-start !important;
  }

  /* REMOVE any forced margins */
  .site-header .site-branding{
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* SEARCH → RIGHT */
  .woocommerce-active .site-header .site-search{
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 360px !important;
    max-width: 40% !important;
  }

  /* MENU BELOW CENTERED */
  .woocommerce-active .site-header .main-navigation{
    width: 100% !important;
    text-align: center !important;
    margin-top: 16px !important;
  }
}

.site-header{
  padding-top: 20px !important;
  padding-bottom: 22px !important;
}

.site-search input[type="search"]{
  border-radius: 999px !important;
  backdrop-filter: blur(6px);
}

/* =========================
   STICKY HEADER (Storefront fix)
   ========================= */

.site-header{
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Sometimes a parent blocks sticky */
.site,
.site-content,
#page{
  overflow: visible !important;
}

/* Prevent jump / keep header above everything */
.site-header{
  will-change: transform;
}

/* =========================
   FORCE REMOVE WHITE LINE UNDER MENU
   ========================= */

/* Heq çdo border/underline nga linket */
.site-header .main-navigation a,
.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus,
.site-header .main-navigation a:active{
  border: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Heq underline që vjen nga Storefront për active item */
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a{
  border-bottom: none !important;
}

/* Heq pseudo underline default të theme */
.site-header .main-navigation a:before,
.site-header .main-navigation a:after{
  border: none !important;
}

/* Lë VETËM underline jeshil modern (nga dizajni yt) */
.site-header .main-navigation a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#9ae6b4;
  transition: width .25s ease;
}
.site-header .main-navigation a:hover::after,
.site-header .main-navigation .current-menu-item > a::after{
  width:100%;
}


/* ===== Reduce big empty space under header ===== */
.home .site-content,
.home .site-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ===== Make header shorter (more premium) ===== */
.site-header{
  padding: 14px 0 !important; /* ishte më e lartë */
}

/* Logo pak më e vogël */
.site-header .custom-logo-link img{
  max-width: 120px !important;
}

/* Menu pak më poshtë dhe e rregullt */
.storefront-primary-navigation{
  padding-top: 6px !important;
}

/* ===== Stronger category cards hover ===== */
.home .wp-block-image img{
  transition: transform .25s ease, box-shadow .25s ease;
}
.home .wp-block-image img:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}


/* =========================
   HERO FULL WIDTH FIX
========================= */

/* Hiq hapësirën mes header dhe hero */
.home .site-content,
.home .site-main,
.home #content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home .elementor-top-section:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

-----
/* =========================
   HOMEPAGE: full-width HERO only (Elementor container 4f19fe0c)
   ========================= */

/* keep rest of homepage boxed normally */
body.page-id-168 #content > .col-full,
body.page-id-168 #primary,
body.page-id-168 #main{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* remove default gaps above content */
body.page-id-168 .entry-content{
  margin: 0 !important;
  padding: 0 !important;
}

/* HERO: break out of boxed container to full viewport width */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}

/* HERO inner content stays nicely centered */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c > .e-con-inner{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Make "Your Adventure Starts Here" white */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-58f320c0 .elementor-heading-title{
  color: #fff !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
}

/* ✅ Force hero to touch edges (remove parent padding influence) */
body.page-id-168 #content.site-content,
body.page-id-168 #post-168 > .col-full{
  padding-left: 90 !important;
  padding-right: 0 !important;
	margin-left: 85.5px;
}



/* ===== MOBILE FIX (full width + remove left white space) ===== */
@media (max-width: 767px){

  /* hiq padding/margins nga theme wrapper */
  body.page-id-168 #content.site-content,
  body.page-id-168 .site-content .col-full,
  body.page-id-168 #post-168 > .col-full{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* sigurohu qe vet hero container mos te kete offset nga desktop */
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-position: center center !important;
    min-height: 72vh !important;
  }

  /* pak spacing brenda (mos u ngjit ne cep) */
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c > .e-con-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* mobile typography (me e lexueshme) */
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-5e365e9e .elementor-heading-title{
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-7e699d4c .elementor-heading-title{
    font-size: 12px !important;
    letter-spacing: 6px !important;
  }
}


/* 6) Overlay për kontrast (që teksti të lexohet bukur) */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.35) 100%
  );
  z-index: 0;
}

/* 7) Tekstet: më clean + më premium */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-7e699d4c .elementor-heading-title{
  color: rgba(255,255,255,.80) !important;
  letter-spacing: 8px !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
}

body.page-id-168 .elementor-168 .elementor-element.elementor-element-5e365e9e .elementor-heading-title{
  color: #ffffff !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
}

/* ✅ “Your Adventure Starts Here” -> e bardhë */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-58f320c0 .elementor-heading-title{
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.45) !important;

  /* bonus: e bëjmë si badge të lehtë (optional) */
  background: rgba(0,0,0,.25) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

/* 8) Button pak më modern */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-7e0cf976 .elementor-button{
  box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(4px);
}
body.page-id-168 .elementor-168 .elementor-element.elementor-element-7e0cf976 .elementor-button:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #ffffff !important;
}

/* 9) Mobile fine-tuning */
@media (max-width: 767px){
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
    min-height: 70vh !important;
    --padding-left: 18px !important;
    --padding-right: 18px !important;
  }
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-5e365e9e .elementor-heading-title{
    font-size: 44px !important;
  }
}


.page-template-template-homepage .type-page {
	padding-top: 0px;
}


------- 
/* =========================================
   HOMEPAGE HERO FULL-WIDTH (DESKTOP+MOBILE)
   Storefront theme + Elementor (page-id-168)
   ========================================= */

/* 1) Hiq boxed wrapper VETËM për homepage */
body.page-id-168 #content .col-full,
body.page-id-168 #primary,
body.page-id-168 #main{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Vetëm HERO container: bëje full width, jo gjithë faqen */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 3) Ruaj tekstin “në mes” me max width të bukur */
body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c > .e-con-inner{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 4) Hiq hapësirën midis header dhe hero (nëse del) */
body.page-id-168 .site-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-id-168 .storefront-breadcrumb{
  display: none !important;
}

/* 5) Mobile tuning */
@media (max-width: 767px){
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
    min-height: 72vh !important;
    background-position: center center !important;
  }

  body.page-id-168 .elementor-168 .elementor-element.elementor-element-5e365e9e .elementor-heading-title{
    font-size: 38px !important;
    line-height: 1.05 !important;
    color: #fff !important;
    text-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
  }

  body.page-id-168 .elementor-168 .elementor-element.elementor-element-58f320c0 .elementor-heading-title{
    font-size: 16px !important;
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
  }

  body.page-id-168 .elementor-168 .elementor-element.elementor-element-7e0cf976 .elementor-button{
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* 6) Mos lejo horizontal scroll */
body.page-id-168{
  overflow-x: hidden !important;
}





/* ===================== TABLET (override) ===================== */
@media (min-width: 768px) and (max-width: 1024px){

  body.page-id-168 #content.site-content,
  body.page-id-168 #post-168 > .col-full,
  body.page-id-168 .site-content .col-full{
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* FULL WIDTH vetëm hero (mbaje siç është) */
  body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }
}

/* ===================== MOBILE (≤767px) ===================== */
@media (max-width: 767px){

  body.page-id-168 #content.site-content,
  body.page-id-168 #post-168 > .col-full,
  body.page-id-168 .site-content .col-full{
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.page-id-168 .elementor-168 .elementor-element.elementor-element-4f19fe0c{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }
}
-----------

//PDP 
/* === WhatsApp Buy Button – Product Page (PDP) === */
.woocommerce div.product .mga-wa-buy{
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15,71,36,.08), rgba(20,92,68,.12));
  border: 1px solid rgba(15,71,36,.15);
  max-width: 360px;
}

.woocommerce div.product .mga-wa-buy a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f4724, #145c44);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(15,71,36,.35);
  transition: all .2s ease;
}

/* Hover effect */
.woocommerce div.product .mga-wa-buy a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,71,36,.45);
  filter: brightness(1.05);
}

/* Optional WhatsApp icon */
.woocommerce div.product .mga-wa-buy a::before{
  content: "💬";
  font-size: 18px;
}

/* Small note under button */
.woocommerce div.product .mga-wa-note{
  margin-top: 8px;
  font-size: 13px;
  color: #1e5a40;
  opacity: .8;
  text-align: center;
}

/* Mobile full width */
@media(max-width:768px){
  .woocommerce div.product .mga-wa-buy{
    max-width:100%;
  }
}

/* Hide Jetpack "Related / Similar post" on product pages */
.single-product #jp-relatedposts,
.single-product #jp-relatedposts.jp-relatedposts,
.single-product .woocommerce-Tabs-panel #jp-relatedposts {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* hide shopby brand */

.storefront-woocommerce-brands{display: none !important;}

/* hide fan favorites */
.storefront-popular-products{display: none !important;}


/* =========================
   STOREOFRONT MENU + SUBMENU FIX
   ========================= */



/* Link styling inside submenu (FORCE visible text) */
#site-navigation ul.sub-menu a,
.storefront-primary-navigation ul.sub-menu a,
.main-navigation ul.sub-menu a{
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;

  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;

  background: transparent !important;
}
@media (min-width: 768px){
  #site-navigation ul.menu > li.menu-item-has-children > a{
    display: inline-flex !important;
    align-items: center !important;
  }
  #site-navigation ul.menu > li.menu-item-has-children > a::after{
    content:"▾" !important;
    font-size: 11px !important;
    opacity: .75 !important;
    transform: translateY(1px);
  }
}


/* =========================================================
   MOBILE MENU: one-by-one (vertical) + clean dropdown
   Storefront
   ========================================================= */
@media (max-width: 767px){

  /* 1) KTHEJE MENUNË NË COLUMN (jo inline-flex) */
  #site-navigation .menu,
  #site-navigation ul.menu,
  #site-navigation ul.nav-menu{
    display: block !important;
  }

  /* 2) Çdo item një rresht më vete */
  #site-navigation .menu > li,
  #site-navigation ul.menu > li,
  #site-navigation ul.nav-menu > li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 3) Linku mbush krejt gjerësinë */
  #site-navigation .menu > li > a,
  #site-navigation ul.menu > li > a,
  #site-navigation ul.nav-menu > li > a{
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    text-align: left !important;
  }

  /* 4) Dropdown arrow (button) djathtas, i rregullt */
  #site-navigation li.menu-item-has-children{
    position: relative !important;
  }

  #site-navigation button.dropdown-toggle{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    opacity: 1 !important;        /* mos e fshih në mobile */
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    z-index: 5 !important;
  }

  /* që teksti të mos futet poshtë arrow */
  #site-navigation li.menu-item-has-children > a{
    padding-right: 58px !important;
  }

  /* 5) Submenu indent + spacing */
  #site-navigation ul.sub-menu{
    margin: 6px 0 10px !important;
    padding-left: 14px !important;
  }
  #site-navigation ul.sub-menu a{
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* 6) OPEN/CLOSE me tap (Storefront aria-expanded) */
  #site-navigation ul.sub-menu{ display: none !important; }
  #site-navigation button.dropdown-toggle[aria-expanded="true"] + ul.sub-menu{
    display: block !important;
  }
}


  /* 1) SHOP nuk është link (disable click) */
  #site-navigation li.menu-item-has-children > a{
    pointer-events: none !important;
    cursor: default !important;

}

 
/*Design info background color */
.woocommerce-info{
	background-color: #5A8B6F;
}

#wpforms-submit-354{ background-color: rgb(31, 122, 90)}

.woocommerce ul.products li.product a.button {
  background-color: #384F44 !important;
  color: white !important;
}

button.dropdown-toggle{
	margin-left:1000px;
}


/* Vetëm te SHOP hiq shigjeten e vogel qe shfaqej */
.main-navigation li#menu-item-401 > a::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px){
  .main-navigation.toggled ul.menu li.menu-item-has-children > a::before,
  .main-navigation.toggled ul.menu li.current-menu-ancestor > a::before,
  .main-navigation.toggled ul.menu li.current-menu-parent > a::before,
  .main-navigation.toggled ul.menu li.current_page_parent > a::before,
  .main-navigation.toggled ul.menu li.current_page_ancestor > a::before {
    content: none !important;
    display: none !important;
  }
}

button.dropdown-toggle::after{ 
	position:center;
	color:whitesmoke}
/*remove sort by */
.orderby{display:none !important;}

/*heq footer ne mobile*/
.storefront-handheld-footer-bar{display:none}

/* footer */
/* ===========================
   FOOTER – FINAL (matches your green theme)
   Targets your exact HTML
   =========================== */

/* Base footer */
#colophon.site-footer{
  background: linear-gradient(180deg,#0f2d22 0%, #0b241b 100%) !important;
  color: rgba(255,255,255,0.88) !important;
  padding: 46px 0 22px !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.12);
}
#colophon.site-footer::before{ display:none !important; }

/* Layout container */
#colophon .col-full{
  max-width: 1200px !important;
}

/* Footer widgets row */
#colophon .footer-widgets.row-1{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each column */
#colophon .footer-widgets.row-1 > .block{
  flex: 1 1 0;
  min-width: 220px;
}

/* Align columns */
#colophon .footer-widget-1{ text-align: left; }
#colophon .footer-widget-2{ text-align: center; }
#colophon .footer-widget-3{ text-align: right; }

/* Remove WP block margins inside footer */
#colophon .widget,
#colophon .wp-block-image,
#colophon .wp-block-heading,
#colophon .wp-block-paragraph{
  margin: 0 !important;
}

/* ---------------------------
   LOGO + Caption
   --------------------------- */
#colophon .footer-widget-1 figure.wp-block-image{
  display: flex;
  align-items: center;
  gap: 14px;
}

#colophon .footer-widget-1 img{
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  display: block;
}

#colophon .footer-widget-1 figcaption{
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.1;
  font-size: 16px;
  opacity: 0.95;
}

/* ---------------------------
   PHONE (make it look like a badge)
   --------------------------- */
#colophon .footer-widget-2 h5{
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}
#colophon .footer-widget-2 h5::before{
  content: "📞";
  font-size: 16px;
}

/* ---------------------------
   SOCIAL (cute button)
   --------------------------- */
#colophon .footer-widget-3 p{
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px;
}

#colophon .footer-widget-3 a[href*="instagram.com"]{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;

  padding: 10px 16px;
  border-radius: 999px;

  background: linear-gradient(90deg,#ff4b8b,#ffcc70);
  color: #fff !important;
  font-weight: 900;
  text-decoration: none !important;

  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
#colophon .footer-widget-3 a[href*="instagram.com"]::before{
  content: "📸";
  font-size: 16px;
}
#colophon .footer-widget-3 a[href*="instagram.com"]:hover{
  filter: brightness(1.05);
  text-decoration: none !important;
}

/* ---------------------------
   SITE INFO (bottom line)
   --------------------------- */
#colophon .site-info{
  margin-top: 26px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.70) !important;
}
#colophon .site-info a{
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
}
#colophon .site-info a:hover{
  color: #fff !important;
  text-decoration: underline !important;
}

/* Optional: hide "Built with WooCommerce" (uncomment if you want) */
/*
#colophon .site-info a{ display:none !important; }
*/

/* ---------------------------
   MOBILE
   --------------------------- */
@media (max-width: 768px){
  #colophon.site-footer{
    padding: 38px 18px 18px !important;
  }

  #colophon .footer-widgets.row-1{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
  }

  #colophon .footer-widgets.row-1 > .block{
    min-width: 0;
    width: 100%;
  }

  #colophon .footer-widget-1,
  #colophon .footer-widget-2,
  #colophon .footer-widget-3{
    text-align: center !important;
  }

  #colophon .footer-widget-1 figure.wp-block-image{
    justify-content: center;
  }

  #colophon .footer-widget-3 a[href*="instagram.com"],
  #colophon .footer-widget-2 h5{
    width: 100%;
    justify-content: center;
  }
}

/* Give space at bottom so fixed buttons don't cover footer */


@media (max-width: 768px){
  #page,
  .site,
  .site-content{
    padding-bottom: 50px !important;
  }
}
/* =========================================
   FOOTER LOGO + TEXT INLINE (same row)
   ========================================= */

/* Make the figure act like a horizontal flex row */
#colophon .footer-widget-1 figure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Logo size */
#colophon .footer-widget-1 figure img {
  width: 55px !important;
  height: 55px !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Caption text next to logo */
#colophon .footer-widget-1 figcaption {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  color: white !important;

  line-height: 1.3 !important;
  text-align: left !important;
}

/* Remove hover jump */
#colophon .footer-widget-1 figure:hover {
  transform: none !important;
}

/* Mobile: keep logo + text centered */
@media (max-width: 768px) {
  #colophon .footer-widget-1 figure {
    flex-direction: row !important;
    text-align: center !important;
  }

  #colophon .footer-widget-1 figcaption {
    text-align: left !important;
    font-size: 14px !important;
  }
}
/* ===========================================
   REMOVE PURPLE FOCUS BORDER (ALL DEVICES)
   Replace with green theme color
=========================================== */

/* Buttons */
button:focus,
button:active,
button:focus-visible,

/* Links */
a:focus,
a:active,
a:focus-visible,

/* Inputs (Search box etc.) */
input:focus,
input:active,
input:focus-visible,

/* WooCommerce buttons */
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,

/* Storefront menu toggle */
.menu-toggle:focus,
.menu-toggle:active,

/* Search field focus */
.search-field:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.55) !important;
    border-color: #2e8b57 !important;
}

/* Remove ugly browser highlight on mobile */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* test*/