/*!
Theme Name: shopygroup
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shopygroup
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

shopygroup is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

.related.products ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.related.products ul.products li.product {
    width: calc(25% - 15px);
    margin: 0;
}

@media (max-width: 991px) {
    .related.products ul.products li.product {
        width: calc(33.33% - 14px);
    }
}

@media (max-width: 767px) {
    .related.products ul.products li.product {
        width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .related.products ul.products li.product {
        width: 100%;
    }
}
.category-filter-list{
margin:0;
padding:0;
list-style:none;
}

.parent-category{
border-bottom:1px solid #eee;
padding:10px 0;
}

.parent-row{
display:flex;
align-items:center;
}

.toggle-subcategory{
width:22px;
height:22px;
line-height:22px;
text-align:center;
cursor:pointer;
font-weight:bold;
border:1px solid #ddd;
margin-right:10px;
border-radius:3px;
}

.subcategory-list{
display:none;
margin-left:30px;
padding-top:8px;
}

.subcategory-list li{
padding:6px 0;
}

.count{
float:right;
color:#888;
}

input[type=checkbox]{
margin-right:8px;
}
.category-banner{
    min-height:300px;
}
/* ==========================================================================
   Electronics dynamic category section
   Add-on styles only — assumes the theme's existing Bootstrap / product-
   default / grid classes are already loaded on the page.
   ========================================================================== */

.electronics-container .category-lists a {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.electronics-container .category-lists a.active {
    background: #e2231a;
    color: #fff;
    font-weight: 600;
}

.electronics-container .category-current-label {
    font-size: 15px;
    color: #777;
    font-weight: 400;
}

.electronics-container .category-current-label span {
    color: #222;
    font-weight: 600;
}

/* Product grid: 3 cards per row on desktop, 2 on tablet, 1 on mobile */
.electronics-container #productGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .electronics-container #productGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .electronics-container #productGrid {
        grid-template-columns: 1fr;
    }
}

.electronics-container #productGrid .product-default {
    width: 100%;
}
.category-lists .nav-link{
    color:#444;
    padding:12px 15px;
    border-radius:0;
}

.category-lists .nav-link.active{
    background:#ef2b2d;
    color:#fff;
}

.tab-content>.tab-pane{
    display:none;
}

.tab-content>.active{
    display:block;
}

.category-link{
display:block;
padding:12px 15px;
color:#333;
text-decoration:none;
border-bottom:1px solid #eee;
}

.category-link.active{
background:#ef2b2d;
color:#fff;
}

.category-products{
display:none;
}

.category-products.active{
display:block;
}
/* Image hover */
/* ===============================
   Premium Product Card
=================================*/

.product-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    overflow:hidden;
    transition:.35s ease;
    position:relative;
    margin-bottom:20px;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);
    border-color:#000;
}

/* Images */

.product-image{
    position:relative;
    overflow:hidden;
    background:#fff;
}

.product-image img{
    width:100%;
    transition:.5s;
}

.second-image{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
}

.product-card:hover .first-image{
    opacity:0;
    transform:scale(1.08);
}

.product-card:hover .second-image{
    opacity:1;
    transform:scale(1.08);
}

/* Sale Badge */

.sale-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:#000;
    color:#fff;
    padding:5px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    z-index:99;
}

/* Right Icons */

.product-icons{

    position:absolute;
    right:12px;
    top:18px;

    display:flex;
    flex-direction:column;

    gap:10px;

    opacity:0;

    transition:.35s;

}

.product-card:hover .product-icons{

    opacity:1;

}

.icon-btn{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#111;

    border:1px solid #e8e8e8;

    transition:.3s;

}

.icon-btn:hover{

    background:#000;
    color:#fff;

}

/* Product Content */

.product-content{

    padding:18px;

    text-align:center;

}

/* Title */

.product-content h3{

    font-size:16px;

    line-height:26px;

    font-weight:600;

    margin-bottom:12px;

    height:52px;

    overflow:hidden;

}

.product-content h3 a{

    color:#111;

}

.product-content h3 a:hover{

    color:#000;

}

/* Rating */

.star-rating{

    margin:0 auto 12px;

}

/* Price */

.price-box{

    margin:15px 0;

}

.price-box del{

    color:#999;

    font-size:15px;

}

.price-box ins{

    text-decoration:none;

}

.price-box .amount{

    font-size: 14px;

    font-weight:700;

    color:#000;

    letter-spacing:.3px;

}

/* Add to Cart */

.product-content .button{

    width:100%;

    height:48px;

    border:2px solid #000;

    background:#fff;

    color:#000;

    font-weight:600;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

    border-radius:50px;

    transition:.35s;

}

.product-content .button:hover{

    background:#000;

    color:#fff;

}

/* Wishlist */

.yith-wcwl-add-to-wishlist{

    margin-top:12px;

}

/* Responsive */

@media(max-width:767px){

.product-content{

padding:12px;

}

.product-content h3{

font-size:14px;

height:44px;

}

.price-box .amount{

font-size:18px;

}

}
/*==================================================
            PREMIUM FOOTER DESIGN
===================================================*/

footer{
    background:#f8f9fb;
    border-top:1px solid #e9e9e9;
    margin-top:70px;
}

.footer-middle{
    padding:70px 0 45px;
}

.footer-middle .widget{
    margin-bottom:35px;
}

/* Heading */

.footer-middle .widget-title{

    font-size:22px;
    font-weight:700;
    color:#111;

    margin-bottom:22px;

    text-transform:uppercase;

    letter-spacing:.7px;

    position:relative;

    padding-bottom:12px;

}

.footer-middle .widget-title:after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:55px;
    height:3px;

    background:#000;

    border-radius:10px;

}

/* Paragraph */

.footer-middle p{

    color:#666;

    font-size:15px;

    line-height:30px;

    font-weight:400;

}

/* Links */

.footer-middle ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-middle ul li{

    margin-bottom:12px;

}

.footer-middle ul li a{

    color:#666;

    font-size:15px;

    transition:.35s;

    text-decoration:none;

    position:relative;

    padding-left:0;

}

.footer-middle ul li a:before{

    content:"›";

    margin-right:8px;

    color:#000;

    font-weight:bold;

}

.footer-middle ul li a:hover{

    color:#000;

    padding-left:8px;

}

/* Contact */

.contact-widget a{

    color:#000;

    font-weight:600;

    text-decoration:none;

}

.contact-widget p{

    color:#666;

    margin-bottom:18px;

}

/* Bottom */

.footer-bottom{

    border-top:1px solid #e5e5e5;

    padding:25px 0;

}

.footer-copyright{

    color:#777;

    font-size:15px;

    font-weight:500;

}

/* Social Icons */

.social-icons{

    display:flex;

    gap:12px;

}

.social-icon{

    width:42px;

    height:42px;

    border:1px solid #ddd;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#555;

    transition:.35s;

}

.social-icon:hover{

    background:#000;

    color:#fff;

    border-color:#000;

}

/* Newsletter */

.newsletter-popup-content h2{

    color:#111;

    font-weight:700;

}

.newsletter-popup-content p{

    color:#666;

}

/* Scroll Top */

#scroll-top{

    background:#111;

    color:#fff;

    border-radius:50%;

    transition:.35s;

}

#scroll-top:hover{

    background:#444;

}

/* Mobile */

@media(max-width:991px){

.footer-middle{

padding:50px 0 25px;

}

.footer-middle .widget{

text-align:center;

}

.footer-middle .widget-title:after{

left:50%;

transform:translateX(-50%);

}

.footer-middle ul li a:hover{

padding-left:0;

}

}
.footer-middle ul li{
    position:relative;
    padding-left:18px;
}

.footer-middle ul li:before{
    content:"›";
    position:absolute;
    left:0;
    top:0;
    color:#000;
    font-size:18px;
    font-weight:700;
}

.footer-middle ul li a:before{
    content:"";
}
/*contact page*/:root{
  --navy: #0F1E2E;
  --navy-deep: #0A1620;
  --teal: #2BB6A9;
  --teal-soft: #DCF3F0;
  --amber: #F2A65A;
  --ink: #12202E;
  --muted: #6B7785;
  --paper: #FBFAF7;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(18,32,46,0.12);
  --radius: 18px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  margin:0;
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
}

a{ color:inherit; }

/* ===== Wrapper ===== */
.contact-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:64px 24px 96px;
}

.page-title{
  font-size:clamp(38px, 6vw, 64px);
  font-weight:600;
  line-height:1.02;
  margin-bottom:14px;
}

.page-sub{
  max-width:520px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  margin-bottom:56px;
}

/* ===== Split panel ===== */
.panel{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  border-radius:28px;
  overflow:hidden;
  box-shadow: 0 30px 60px -25px rgba(15,30,46,0.35);
}

/* Left: info card */
.info-side{
  background:
    radial-gradient(circle at 15% 15%, rgba(43,182,169,0.18), transparent 45%),
    var(--navy);
  color:#fff;
  padding:56px 44px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.info-side::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none;
}

.info-top{ position:relative; z-index:1; }

.info-top h2{
  color:#fff;
  font-size:28px;
  margin:14px 0 12px;
}

.info-top p{
  color:rgba(255,255,255,0.68);
  font-size:14.5px;
  line-height:1.6;
  max-width:340px;
}

.info-list{
  list-style:none;
  padding:0;
  margin:36px 0 0;
  position:relative;
  z-index:1;
}

.info-list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 0;
  border-top:1px solid var(--line);
}

.info-list li:first-child{ border-top:none; }

.ico{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:10px;
  background:rgba(43,182,169,0.16);
  border:1px solid rgba(43,182,169,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal);
}

.info-list .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:4px;
}

.info-list .value{
  font-size:15px;
  color:#fff;
  line-height:1.5;
}

.info-list .value a:hover{ color:var(--teal); }

.socials{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  margin-top:40px;
}

.socials a{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:rgba(255,255,255,0.8);
  font-size:13px;
  transition: all .2s ease;
}
.socials a:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--navy-deep);
}

/* Right: form card */
.form-side{
  background:#fff;
  padding:56px 48px;
}

.form-side h3{
  font-size:24px;
  margin-bottom:6px;
}

.form-side .form-sub{
  color:var(--muted);
  font-size:14.5px;
  margin-bottom:32px;
}

/*form{*/
/*  display:grid;*/
/*  grid-template-columns: 1fr 1fr;*/
/*  gap:26px 20px;*/
/*}*/
.form-side form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
}

.field{
  position:relative;
  grid-column: span 1;
}

.field.full{ grid-column: span 2; }

.field input,
.field textarea{
  width:100%;
  border:none;
  border-bottom:1.5px solid var(--line-dark);
  background:transparent;
  padding:10px 2px 10px;
  font-family:'Inter', sans-serif;
  font-size:15.5px;
  color:var(--ink);
  outline:none;
}

.field textarea{ resize:vertical; min-height:70px; padding-top:14px; }

.field label{
  position:absolute;
  left:2px;
  top:10px;
  font-size:15.5px;
  color:var(--muted);
  pointer-events:none;
  transition: all .18s ease;
}

.field input:focus + label,
.field input:valid + label,
.field textarea:focus + label,
.field textarea:valid + label{
  top:-14px;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--teal);
  font-family:'IBM Plex Mono', monospace;
}

.field .underline{
  position:absolute;
  left:0; bottom:0;
  height:1.5px;
  width:0;
  background:var(--teal);
  transition: width .28s ease;
}

.field input:focus ~ .underline,
.field textarea:focus ~ .underline{
  width:100%;
}

.submit-btn{
  grid-column:span 2;
  margin-top:8px;
  justify-self:start;
  background:var(--navy);
  color:#fff;
  border:none;
  padding:15px 34px;
  border-radius:100px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition: background .2s ease, transform .2s ease;
}

.submit-btn:hover{
  background:var(--teal);
  color:var(--navy-deep);
  transform: translateY(-1px);
}

.submit-btn svg{ transition: transform .2s ease; }
.submit-btn:hover svg{ transform: translateX(3px); }

/* ===== Map section ===== */
.map-section{
  margin-top:64px;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 30px 60px -30px rgba(15,30,46,0.3);
}

.map-caption{
  position:absolute;
  top:24px;
  left:24px;
  background:#fff;
  padding:16px 22px;
  border-radius:14px;
  box-shadow: 0 12px 30px -12px rgba(15,30,46,0.35);
  z-index:2;
  max-width:260px;
}

.map-caption .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:6px;
}

.map-caption .addr{
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink);
}

iframe{
  width:100%;
  height:420px;
  border:0;
  display:block;
  filter: grayscale(12%) contrast(1.02);
}
/*product code*/
/* =========================================================
   MOST VIEWED PRODUCTS — card component
   Palette: ink #1c1b19 | line #e8e5df | paper #f6f4f0
            accent (price) #b34632 | accent-dark #8f3626
   Type: headings/system-ui stack, tight tracking on labels,
         a calmer, smaller price than the default WooCommerce output
   ========================================================= */

.most-viewed-products {
    --ink: #1c1b19;
    --ink-soft: #6b675f;
    --line: #e8e5df;
    --paper: #f6f4f0;
    --accent: #b34632;
    --accent-dark: #8f3626;
    --radius: 14px;
}

.most-viewed-products .section-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ---------- Card shell ---------- */
.most-viewed-products .product-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.22,1,.36,1),
                box-shadow 0.35s cubic-bezier(.22,1,.36,1),
                border-color 0.35s ease;
}

.most-viewed-products .product-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 18px 34px rgba(28, 27, 25, 0.10);
}

/* ---------- Fixed image box (this is the key fix) ---------- */
/* Whatever size the uploaded image is, this box stays fixed and
   crops/centers the image with object-fit — no stretching, no
   layout jumps between products. Adjust the aspect-ratio to taste. */
.most-viewed-products .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--paper);
    overflow: hidden;
}

.most-viewed-products .product-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,1,.36,1);
}

/* base image visible, stays put */
.most-viewed-products .product-image img.first-image {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* hover/gallery image, fades + gently zooms in on hover */
.most-viewed-products .product-image img.second-image {
    opacity: 0;
    transform: scale(1.06);
    z-index: 2;
}

.most-viewed-products .product-card:hover .product-image img.first-image {
    opacity: 0;
}

.most-viewed-products .product-card:hover .product-image img.second-image {
    opacity: 1;
    transform: scale(1);
}

/* ---------- Sale / New badge ---------- */
.most-viewed-products .sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
}

/* ---------- Floating icon buttons (eye / cart / wishlist) ---------- */
.most-viewed-products .product-icons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -44px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    opacity: 0;
    transition: bottom 0.35s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
}

.most-viewed-products .product-card:hover .product-icons {
    bottom: 12px;
    opacity: 1;
}

.most-viewed-products .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.most-viewed-products .icon-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Content block ---------- */
.most-viewed-products .product-content {
    padding: 16px 16px 18px;
    text-align: center;
}

.most-viewed-products .product-category {
    display: block;
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.most-viewed-products .product-content h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 600;
    /* clamp titles to 2 lines so card heights stay even */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
}

.most-viewed-products .product-content h3 a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.most-viewed-products .product-content h3 a:hover {
    color: var(--accent);
}

/* ---------- Rating stars ---------- */
.most-viewed-products .star-rating {
    font-size: 12px;
    margin: 0 auto 8px;
    color: #d8a13a;
}

/* ---------- Price ---------- */
.most-viewed-products .price-box,
.most-viewed-products .product-content .price {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-dark);
    margin-bottom: 12px;
}

.most-viewed-products .price-box del,
.most-viewed-products .product-content .price del {
    font-size: 12.5px;
    font-weight: 400;
    color: #a8a49c;
    margin-right: 6px;
    opacity: 1;
}

.most-viewed-products .price-box ins,
.most-viewed-products .product-content .price ins {
    text-decoration: none;
}

/* ---------- Add to cart button ---------- */
.most-viewed-products .product-content a.button,
.most-viewed-products .product-content .add_to_cart_button {
    display: inline-block;
    padding: 9px 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.most-viewed-products .product-content a.button:hover,
.most-viewed-products .product-content .add_to_cart_button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 575px) {
    .most-viewed-products .product-image {
        aspect-ratio: 1 / 1.1;
    }
    .most-viewed-products .product-content h3 {
        font-size: 13.5px;
    }
}

/*category image css*/
/* =========================================================
   OUR TOP BRANDS — category tabs + product grid
   Fixes image size so any uploaded image (big/small,
   portrait/landscape) always displays in the same fixed box,
   both in normal state and on hover.
   ========================================================= */

.electronics-container .category-products {
    display: none;
}

.electronics-container .category-products.active {
    display: block;
}

/* ---------- Product grid item (WooCommerce default loop) ---------- */
.electronics-container ul.products {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.electronics-container ul.products li.product {
    position: relative;
    background: #fff;
    border: 1px solid #e8e5df;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.electronics-container ul.products li.product:hover {
    transform: translateY(-5px);
    border-color: #b34632;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

/* ---------- Fixed image box ---------- */
.electronics-container ul.products li.product a.woocommerce-LoopProduct-link,
.electronics-container ul.products li.product a.woocommerce-loop-product__link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f6f4f0;
}

.electronics-container ul.products li.product img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

/* gentle zoom on hover, image still stays inside the fixed box */
.electronics-container ul.products li.product:hover img {
    transform: scale(1.06);
}

/* ---------- Title / price under the image ---------- */
.electronics-container ul.products li.product h2,
.electronics-container ul.products li.product h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1c1b19;
    margin: 12px 10px 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.electronics-container ul.products li.product .price {
    font-size: 14px;
    font-weight: 700;
    color: #8f3626;
    margin-bottom: 14px;
    display: block;
}

.electronics-container ul.products li.product .price del {
    font-size: 12px;
    font-weight: 400;
    color: #a8a49c;
    margin-right: 5px;
}

/* ---------- Left category tabs ---------- */
.electronics-container .category-lists {
    display: flex;
    flex-direction: column;
}

.electronics-container .category-link {
    display: block;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1c1b19;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.electronics-container .category-link:hover {
    background: #f6f4f0;
}

.electronics-container .category-link.active {
    background: #fff;
    border-left-color: #b34632;
    color: #b34632;
}

/* =========================================================
   WOOCOMMERCE CHECKOUT - FIXED
   ========================================================= */

.woocommerce-checkout {
    --checkout-line: #e0ddd6;
    --checkout-ink: #1c1b19;
    --checkout-accent: #b34632;
}

/* Main checkout form */
.woocommerce-checkout form.checkout {
    display: block !important;
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left billing section */
.woocommerce-checkout #customer_details {
    width: 62% !important;
    float: left !important;
    box-sizing: border-box !important;
    padding-right: 35px !important;
}

/* Right order section */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    width: 38% !important;
    float: right !important;
    box-sizing: border-box !important;
}

/* Clear floats */
.woocommerce-checkout form.checkout::after {
    content: "";
    display: table;
    clear: both;
}

/* Billing wrapper */
.woocommerce-checkout .col2-set {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Billing column */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
}

/* Form rows */
.woocommerce-checkout .form-row {
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* First name */
.woocommerce-checkout .form-row-first {
    width: 48% !important;
    float: left !important;
    clear: none !important;
}

/* Last name */
.woocommerce-checkout .form-row-last {
    width: 48% !important;
    float: right !important;
    clear: none !important;
}

/* Full width fields */
.woocommerce-checkout .form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Labels */
.woocommerce-checkout .form-row label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 7px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #1c1b19 !important;
}

/* Inputs */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #d8d5cf !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 15px !important;
}

/* Textarea */
.woocommerce-checkout .form-row textarea {
    height: 110px !important;
    min-height: 110px !important;
}

/* Select2 */
.woocommerce-checkout .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce-checkout .select2-container .select2-selection--single {
    height: 48px !important;
    border: 1px solid #d8d5cf !important;
    border-radius: 6px !important;
}

.woocommerce-checkout
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    line-height: 46px !important;
    padding-left: 14px !important;
}

.woocommerce-checkout
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    height: 46px !important;
}

/* Billing heading */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin: 0 0 25px !important;
}

/* Additional information */
.woocommerce-checkout .woocommerce-additional-fields {
    width: 100% !important;
    clear: both !important;
    margin-top: 25px !important;
}

/* Order heading */
.woocommerce-checkout #order_review_heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin: 0 0 20px !important;
}

/* Order review */
.woocommerce-checkout #order_review {
    background: #fff !important;
    border: 1px solid #e0ddd6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

/* Order table */
.woocommerce-checkout #order_review table.shop_table {
    width: 100% !important;
    margin: 0 0 20px !important;
    border-collapse: collapse !important;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    padding: 12px 5px !important;
}

/* Payment */
.woocommerce-checkout #payment {
    margin-top: 20px !important;
    padding: 15px !important;
    background: #f6f4f0 !important;
    border-radius: 8px !important;
}

/* Place order */
.woocommerce-checkout #place_order {
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 20px !important;
    background: #b34632 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important;
}

/* Coupon */
.woocommerce-checkout .checkout_coupon {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.woocommerce-checkout .checkout_coupon .form-row {
    margin: 0 !important;
}

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

@media (max-width: 900px) {

    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }

    .woocommerce-checkout #order_review_heading {
        margin-top: 30px !important;
    }
}

@media (max-width: 576px) {

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-checkout #customer_details {
        padding-right: 0 !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .electronics-container ul.products li.product a.woocommerce-LoopProduct-link,
    .electronics-container ul.products li.product a.woocommerce-loop-product__link {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 575px) {
    .electronics-container ul.products li.product h2,
    .electronics-container ul.products li.product h3 {
        font-size: 13px;
    }
}

.product-default figure img:first-child {
    opacity: 1;
    transition: 0.4s;
}

.product-default figure img:last-child {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: 0.4s;
}

.product-default:hover figure img:first-child {
    opacity: 0;
}

.product-default:hover figure img:last-child {
    opacity: 1;
}
/* ===== Responsive ===== */
@media (max-width: 880px){
  .panel{ grid-template-columns: 1fr; border-radius:22px; }
  .info-side, .form-side{ padding:40px 28px; }
  form{ grid-template-columns: 1fr; }
  .field.full{ grid-column: span 1; }
  .submit-btn{ grid-column: span 1; }
  .contact-wrap{ padding:44px 18px 64px; }
  .map-caption{ position:static; margin:18px; max-width:none; }
}


/* =====================================================
   FIX LEFT BILLING FIELDS
   ===================================================== */

/* Customer details full usable width */
.woocommerce-checkout #customer_details {
    width: 62% !important;
    float: left !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Billing fields container */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .woocommerce-billing-fields {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Every form row */
.woocommerce-checkout #customer_details .form-row {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

/* First name */
.woocommerce-checkout #customer_details .form-row-first {
    width: 48% !important;
    float: left !important;
    clear: none !important;
}

/* Last name */
.woocommerce-checkout #customer_details .form-row-last {
    width: 48% !important;
    float: right !important;
    clear: none !important;
}

/* Full width fields */
.woocommerce-checkout #customer_details .form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Label */
.woocommerce-checkout #customer_details .form-row label {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* WooCommerce input wrapper */
.woocommerce-checkout #customer_details .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* ALL billing inputs */
.woocommerce-checkout #customer_details .woocommerce-input-wrapper input,
.woocommerce-checkout #customer_details .woocommerce-input-wrapper select,
.woocommerce-checkout #customer_details .woocommerce-input-wrapper textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Text / Email / Phone */
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details input[type="text"],
.woocommerce-checkout #customer_details input[type="email"],
.woocommerce-checkout #customer_details input[type="tel"] {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}

/* Select */
.woocommerce-checkout #customer_details select {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}

/* Select2 */
.woocommerce-checkout #customer_details .select2-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce-checkout #customer_details
.select2-container--default
.select2-selection--single {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout #customer_details
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    line-height: 46px !important;
    padding-left: 14px !important;
}

/* Country field */
.woocommerce-checkout #customer_details #billing_country_field {
    width: 100% !important;
    clear: both !important;
}

/* State field */
.woocommerce-checkout #customer_details #billing_state_field {
    width: 100% !important;
    clear: both !important;
}

/* Address */
.woocommerce-checkout #customer_details #billing_address_1_field,
.woocommerce-checkout #customer_details #billing_address_2_field {
    width: 100% !important;
    clear: both !important;
}

/* City + postcode */
.woocommerce-checkout #customer_details #billing_city_field,
.woocommerce-checkout #customer_details #billing_postcode_field {
    width: 48% !important;
}

.woocommerce-checkout #customer_details #billing_city_field {
    float: left !important;
    clear: none !important;
}

.woocommerce-checkout #customer_details #billing_postcode_field {
    float: right !important;
    clear: none !important;
}

/* Clear after fields */
.woocommerce-checkout #customer_details .form-row::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile */
@media (max-width: 768px) {

    .woocommerce-checkout #customer_details {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }

    .woocommerce-checkout #customer_details .form-row-first,
    .woocommerce-checkout #customer_details .form-row-last,
    .woocommerce-checkout #customer_details #billing_city_field,
    .woocommerce-checkout #customer_details #billing_postcode_field {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}