/*
Theme Name: Smash Point Sports
Theme URI: https://example.com
Author: Smash Point Sports
Description: Premium custom WordPress + WooCommerce theme for an Authorized YONEX Dealer in Rourkela, Odisha. Minimal, sports-inspired, product-forward.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smashpoint
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  --spx-green:        #6DBE45;
  --spx-green-dark:    #55a032;
  --spx-blue:          #0057B8;
  --spx-blue-dark:     #00408a;
  --spx-black:         #1A1A1A;
  --spx-white:         #FFFFFF;
  --spx-bg-light:      #F7F9FC;
  --spx-border:        #E5E7EB;
  --spx-muted:         #6B7280;

  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-soft: 0 8px 30px rgba(26,26,26,0.07);
  --shadow-hover: 0 16px 40px rgba(26,26,26,0.14);

  --container: 1240px;
  --court-line: repeating-linear-gradient(90deg, var(--spx-border) 0 2px, transparent 2px 14px);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--spx-black);
  background:var(--spx-white);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,4.5vw,3.8rem);}
h2{font-size:clamp(1.8rem,3vw,2.6rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;color:var(--spx-muted);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
@media (max-width:768px){ section{padding:56px 0;} }

:focus-visible{outline:3px solid var(--spx-blue);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} }

/* Eyebrow / section labels — used as a scoreboard-style tag, not decoration */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--spx-blue);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--spx-green);}

.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--spx-green);color:var(--spx-black);}
.btn-primary:hover{background:var(--spx-green-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.btn-outline{background:transparent;border-color:var(--spx-white);color:var(--spx-white);}
.btn-outline:hover{background:var(--spx-white);color:var(--spx-black);transform:translateY(-2px);}
.btn-blue{background:var(--spx-blue);color:var(--spx-white);}
.btn-blue:hover{background:var(--spx-blue-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.btn-dark-outline{background:transparent;border-color:var(--spx-black);color:var(--spx-black);}
.btn-dark-outline:hover{background:var(--spx-black);color:var(--spx-white);}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--spx-border);
}
.main-nav a.active,
.main-nav .current-menu-item a,
.main-nav .current_page_item a {
    color: #6DBE45 !important;
    font-weight: 700;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--container);margin:0 auto;}
.site-logo{font-family:var(--font-display);font-weight:800;font-size:1.3rem;display:flex;align-items:center;gap:10px;}
.site-logo img{height:42px;width:auto;}
.site-logo .dot{color:var(--spx-green);}
.main-nav ul{display:flex;gap:34px;}
.main-nav a{font-weight:600;font-size:.95rem;position:relative;padding:6px 0;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--spx-green);transition:width .25s ease;}
.main-nav a:hover::after,
.main-nav a.active::after,
.main-nav .current-menu-item a::after,
.main-nav .current_page_item a::after{
    width:100%;
    background:#6DBE45;
}
.header-actions{display:flex;align-items:center;gap:14px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--spx-black);margin:5px 0;transition:.25s;}

@media (max-width:960px){
  .main-nav{position:fixed;inset:72px 0 0 0;background:var(--spx-white);transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;padding:30px 24px;}
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:6px;}
  .main-nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--spx-border);}
  .menu-toggle{display:block;}
  .header-actions .btn-blue{display:none;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--spx-black) 0%,#242424 60%, var(--spx-blue-dark) 130%);
  color:var(--spx-white);padding:0;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:640px;}
.hero-copy{padding:70px 24px 70px 0;max-width:560px;justify-self:end;grid-column:1;}
.hero-copy .eyebrow{color:var(--spx-green);}
.hero-copy .eyebrow::before{background:var(--spx-white);}
.hero h1{color:var(--spx-white);}
.hero h1 .accent{color:var(--spx-green);}
.hero p{color:rgba(255,255,255,.75);font-size:1.08rem;max-width:460px;}
.hero-cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
.hero-media{position:relative;grid-column:2;height:100%;min-height:640px;
  clip-path:polygon(14% 0,100% 0,100% 100%,0% 100%);
  background:linear-gradient(160deg,var(--spx-green) 0%, #4f9631 100%);
}
.hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1;
}
.hero-badge{
  position:absolute;left:40px;bottom:40px;background:var(--spx-white);color:var(--spx-black);
  border-radius:var(--radius-md);padding:16px 22px;box-shadow:var(--shadow-hover);
  font-family:var(--font-display);font-weight:700;
}
.hero-badge span{display:block;font-size:.72rem;font-weight:600;color:var(--spx-muted);text-transform:uppercase;letter-spacing:.08em;}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{justify-self:stretch;max-width:none;padding:56px 24px 40px;}
  .hero-media{grid-column:1;min-height:340px;clip-path:none;}
  .hero-badge{left:24px;bottom:24px;}
}

/* ==========================================================================
   CATEGORIES
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.cat-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;
  box-shadow:var(--shadow-soft);transition:transform .35s ease,box-shadow .35s ease;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cat-card:hover img{transform:scale(1.08);}
.cat-card .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 55%);}
.cat-card .label{position:absolute;left:20px;bottom:20px;color:var(--spx-white);}
.cat-card .label h3{margin:0 0 4px;color:var(--spx-white);}
.cat-card .label small{color:var(--spx-green);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;}
@media (max-width:960px){.cat-grid{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   SHOP LAYOUT — Sidebar (left) + Products (right)
   ========================================================================== */
.shop-page{
    display:flex;
    align-items:flex-start;
    gap:40px;
    padding:50px 20px;
    max-width:1300px;
    margin:0 auto;
}
.shop-sidebar{
    width:280px;
    flex:0 0 280px;
    border-right:1px solid #e0e0e0;
    padding-right:30px;
}
.shop-content{
    flex:1;
    min-width:0;
    width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
}
/* Sidebar stacks on top of products at the SAME breakpoint the product
   grid changes column count, so the two layout systems stay in sync
   and the filter section never gets squeezed against a still-wide grid. */
@media (max-width:991px){
    .shop-page{ flex-direction:column; }
    .shop-sidebar{ width:100%; flex:none; border-right:none; padding-right:0; border-bottom:1px solid #e0e0e0; padding-bottom:24px; margin-bottom:24px; }
}

/* ==========================================================================
   PRODUCTS GRID — Shop page (3 col) + Featured Products homepage (4 col)
   ========================================================================== */
.shop-content ul.products,
.featured-products ul.products{
    display:grid !important;
    gap:24px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    width:100% !important;
    max-width:100% !important;
}
.shop-content ul.products{ grid-template-columns:repeat(3, 1fr) !important; }
.featured-products ul.products{ grid-template-columns:repeat(4, 1fr) !important; }

.shop-content ul.products li.product,
.featured-products ul.products li.product{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    clear:none !important;
    list-style:none !important;
    display:flex !important;
    flex-direction:column !important;
    background:var(--spx-white);
    border:1px solid var(--spx-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    position:relative;
    transition:transform .3s ease, box-shadow .3s ease;
}
.shop-content ul.products li.product:hover,
.featured-products ul.products li.product:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}
.shop-content ul.products li.product > a,
.featured-products ul.products li.product > a{
    display:flex !important;
    flex-direction:column !important;
    text-decoration:none;
    color:inherit;
}
.shop-content ul.products li.product img,
.featured-products ul.products li.product img{
    display:block !important;
    width:100% !important;
    height:220px !important;
    object-fit:cover !important;
}
.shop-content ul.products li.product .woocommerce-loop-product__title,
.featured-products ul.products li.product .woocommerce-loop-product__title{
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    padding:18px 18px 0;
    margin:0 0 8px !important;
    line-height:1.3;
    color:var(--spx-black);
}
.shop-content ul.products li.product .price,
.featured-products ul.products li.product .price{
    padding:0 18px;
    margin:0 0 16px !important;
    font-weight:700;
    color:var(--spx-blue);
    font-size:1.05rem;
    line-height:1.2;
    display:block;
}
.shop-content ul.products li.product .price del,
.featured-products ul.products li.product .price del{ color:var(--spx-muted); font-weight:400; opacity:.7; }
.shop-content ul.products li.product .price ins,
.featured-products ul.products li.product .price ins{ text-decoration:none; }
.shop-content ul.products li.product .button,
.featured-products ul.products li.product .button{
    display:block !important;
    width:calc(100% - 32px) !important;
    margin:0 16px 18px !important;
    margin-top:auto !important;
    text-align:center;
    background:#111;
    color:#fff;
    border-radius:100px;
    padding:13px !important;
    font-family:var(--font-display);
    font-weight:600;
    font-size:.9rem;
    box-sizing:border-box !important;
    transition:background .2s ease;
}
.shop-content ul.products li.product .button:hover,
.featured-products ul.products li.product .button:hover{
    background:var(--spx-green);
    color:var(--spx-black);
}
.shop-page{ display:block; }
.shop-content{ width:100%; }

/* Responsive grid — breakpoints now aligned with .shop-page (991px)
   so the sidebar collapses to full-width at the SAME point the product
   grid drops to 2 columns, instead of squeezing 3 narrow columns next
   to a still-visible 280px sidebar. */
@media (max-width:991px){
    .shop-content ul.products{ grid-template-columns:repeat(2,1fr) !important; }
    .featured-products ul.products{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:768px){
    .shop-content ul.products,
    .featured-products ul.products{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px){
    .shop-content ul.products,
    .featured-products ul.products{ grid-template-columns:1fr !important; }
}

/* Sorting dropdown hidden */
.woocommerce-ordering{ display:none !important; }

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.why-card{
  background:var(--spx-white);border:1px solid var(--spx-border);border-radius:var(--radius-lg);
  padding:32px 26px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:transparent;}
.why-icon{
  width:54px;height:54px;border-radius:14px;background:var(--spx-bg-light);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--spx-blue);
}
.why-card h3{margin-bottom:8px;}
.why-card p{margin:0;font-size:.94rem;}
@media (max-width:960px){.why-grid{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   ABOUT PREVIEW
   ========================================================================== */
.about-preview .container{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;}
.about-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);position:relative;}
.about-media::after{content:"";position:absolute;inset:0;border:10px solid var(--spx-white);border-radius:var(--radius-lg);pointer-events:none;}
.stat-strip{display:flex;gap:36px;margin:28px 0 30px;}
.stat-strip div strong{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--spx-blue);}
.stat-strip div span{font-size:.82rem;color:var(--spx-muted);}
@media (max-width:900px){.about-preview .container{grid-template-columns:1fr;}}

/* ==========================================================================
   TOURNAMENT
   ========================================================================== */
.tournament-section{
  background-color:var(--spx-black);
  color:var(--spx-white);position:relative;overflow:hidden;
}
.tournament-section::before{
  content:"";position:absolute;inset:0;background-image:var(--court-line);opacity:.05;
}
.tournament-section .eyebrow{color:var(--spx-green);}
.tournament-section .eyebrow::before{background:var(--spx-green);}
.tournament-section h2{color:var(--spx-white);}
.tournament-section p{color:rgba(255,255,255,.65);}
.tourn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;}
.tourn-card{
  background:#fff !important;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .3s ease,border-color .3s ease;
}
.tourn-card:hover{transform:translateY(-5px);border-color:var(--spx-green);}
.tourn-card img{aspect-ratio:16/10;object-fit:cover;}
.tourn-card .tourn-body{padding:20px 22px 24px;}
.tourn-date{display:inline-block;background:var(--spx-green);color:var(--spx-black);font-family:var(--font-display);
  font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:100px;margin-bottom:12px;}
.tourn-card h3,
.tourn-card h3 a{color:#1A1A1A !important;}
.tourn-card p{color:#1A1A1A !important;}
@media (max-width:900px){.tourn-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{background:var(--spx-white);border:1px solid var(--spx-border);border-radius:var(--radius-lg);padding:30px 26px;}
.testi-stars{color:var(--spx-green);letter-spacing:2px;margin-bottom:14px;font-size:.95rem;}
.testi-name{font-family:var(--font-display);font-weight:700;margin-top:16px;}
.testi-role{font-size:.82rem;color:var(--spx-muted);}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section{
  background:linear-gradient(120deg,var(--spx-blue) 0%,var(--spx-blue-dark) 100%);
  color:var(--spx-white);border-radius:var(--radius-lg);
  margin:0 24px;max-width:calc(var(--container) - 48px);margin-left:auto;margin-right:auto;
  padding:64px 48px;text-align:center;
}
.cta-section h2{color:var(--spx-white);}
.cta-section p{color:rgba(255,255,255,.8);max-width:520px;margin-left:auto;margin-right:auto;}
.cta-buttons{display:flex;gap:16px;justify-content:center;margin-top:28px;flex-wrap:wrap;}
@media (max-width:700px){.cta-section{padding:44px 24px;}}

/* ==========================================================================
   PAGES: ABOUT / TOURNAMENT / CONTACT
   ========================================================================== */
.page-hero{background:var(--spx-bg-light);padding:70px 0 50px;text-align:center;border-bottom:1px solid var(--spx-border);}
.page-hero .eyebrow{justify-content:center;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.gallery-grid img{border-radius:var(--radius-md);aspect-ratio:1/1;object-fit:cover;transition:transform .3s ease;}
.gallery-grid img:hover{transform:scale(1.03);}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* ==========================================
   CONTACT PAGE
========================================== */

.contact-grid{
    display:grid;
    grid-template-columns:420px minmax(0,1fr);
    gap:40px;
    align-items:start;
    margin-bottom:80px;
}

.contact-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    padding:32px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-row{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:24px;
}

.contact-row:last-child{
    margin-bottom:0;
}

.contact-row .ic{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:14px;
    background:#EEF5FF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0057B8;
    font-size:20px;
}

.contact-row strong{
    display:block;
    margin-bottom:4px;
    color:#111;
    font-size:17px;
}

.contact-row p{
    margin:0;
    color:#666;
    line-height:1.7;
}

.contact-row a{
    color:#666;
    text-decoration:none;
}

.contact-row a:hover{
    color:#0057B8;
}

.wpcf7,
.contact-form{
    width:100%;
}

.wpcf7-form,
.contact-form{
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    padding:32px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-grid h2{
    text-align:center;
    margin-bottom:24px;
}

.wpcf7-form label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:#111;
}

.wpcf7-form p{
    margin-bottom:18px;
}

.wpcf7-form-control-wrap{
    display:block;
}

.wpcf7-form input,
.wpcf7-form textarea,
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
    font-size:15px;
    box-sizing:border-box;
    transition:.3s;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--spx-green-dark);
    box-shadow:0 0 0 3px rgba(0,87,184,.12);
}

.wpcf7-form textarea,
.contact-form textarea{
    resize:vertical;
    min-height:292px;
}

.wpcf7-form-control.wpcf7-submit,
.contact-form button{
    width:100%;
    background:#111 !important;
    color:#fff !important;
    border:none;
    border-radius:12px;
    padding:15px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.wpcf7-form-control.wpcf7-submit:hover,
.contact-form button:hover{
    background:var(--spx-green) !important;
    color:#111 !important;
}

.map-embed{
    width:100%;
    margin-top:30px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.map-embed iframe{
    width:100%;
    height:350px;
    border:0;
    display:block;
}

/* Laptop */
@media(max-width:1200px){
    .contact-grid{ grid-template-columns:360px 1fr; }
}

/* Tablet */
@media(max-width:992px){
    .contact-grid{ grid-template-columns:1fr; gap:35px; }
    .contact-card{ padding:28px; }
    .wpcf7-form{ padding:28px; }
    .map-embed iframe{ height:320px; }
}

/* Mobile */
@media(max-width:768px){
    .contact-card,
    .wpcf7-form{ padding:24px; }
    .contact-row{ gap:14px; }
    .contact-row .ic{ width:42px; height:42px; min-width:42px; font-size:18px; }
    .contact-row strong{ font-size:16px; }
    .contact-row p,
    .contact-row a{ font-size:14px; }
    .map-embed iframe{ height:280px; }
}

/* Small Mobile */
@media(max-width:480px){
    .contact-grid{ gap:24px; }
    .contact-card,
    .wpcf7-form{ padding:20px; border-radius:18px; }
    .contact-grid h2{ font-size:28px; }
    .contact-row{ margin-bottom:18px; }
    .contact-row .ic{ width:40px; height:40px; min-width:40px; font-size:16px; }
    .wpcf7-form input,
    .wpcf7-form textarea{ padding:12px; font-size:14px; }
    .wpcf7-submit{ padding:14px; }
    .map-embed{ margin-top:24px; }
    .map-embed iframe{ height:240px; }
}

/* ==========================================================================
   FLOATING BUTTONS
   ========================================================================== */
.whatsapp-float{
  position:fixed;bottom:26px;right:26px;z-index:300;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-hover);
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
.back-to-top{
  position:fixed;bottom:26px;right:96px;z-index:300;width:46px;height:46px;border-radius:50%;
  background:var(--spx-black);color:var(--spx-white);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-hover);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .2s ease;border:none;cursor:pointer;
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}
@media (max-width:600px){.whatsapp-float{right:18px;bottom:18px;width:52px;height:52px;} .back-to-top{right:80px;bottom:18px;}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--spx-black);color:rgba(255,255,255,.65);padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-grid h4{color:var(--spx-white);font-family:var(--font-display);margin-bottom:18px;font-size:1rem;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a:hover{color:var(--spx-green);}
.footer-logo{font-family:var(--font-display);font-weight:800;color:var(--spx-white);font-size:1.25rem;margin-bottom:14px;display:block;}
.social-row{display:flex;gap:12px;margin-top:18px;}
.social-row a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;}
.social-row a:hover{background:var(--spx-green);color:var(--spx-black);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:.85rem;flex-wrap:wrap;gap:10px;}
.footer-bottom a{margin-left:18px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr;}}

/* fade-up utility for scroll reveal (JS toggles .in-view) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ==========================================================================
   ============================================================
   ADDITIONAL CSS START HERE
   (merged from Customizer "Additional CSS" box — cleaned:
   duplicates removed, broken comments fixed, width:1000% typo fixed)
   ============================================================
   ========================================================================== */

/* View Cart Button */
.added_to_cart{
    display:block;
    width:calc(100% - 32px);
    margin:0 16px 16px;
    padding:10px;
    text-align:center;
    background:#6DBE45;
    color:#111 !important;
    border-radius:100px;
    font-weight:600;
    text-decoration:none;
}
.added_to_cart:hover{
    background:#111;
    color:#fff !important;
}
/* end of View Cart button */


/* Mobile Nav — final version (typo width:1000% fixed to 100%) */
@media (max-width:960px){

    .header-inner{
        padding:14px 20px;
    }

    .menu-toggle{
        display:block;
        z-index:1001;
    }

    .header-actions .btn-blue{
        display:none;
    }

    .main-nav{
        position:fixed;
        top:73px;
        left:0;
        width:100%;
        height:calc(100vh - 73px);
        background:#fff;
        transform:translateX(100%);
        transition:.35s ease;
        overflow-y:auto;
        overflow-x:hidden;
        padding:20px;
        box-sizing:border-box;
        z-index:999;
    }

    .main-nav.open{
        transform:translateX(0);
    }

    .main-nav ul{
        display:flex;
        flex-direction:column;
        gap:0;
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
        box-sizing:border-box;
    }

    .main-nav li{
        width:100%;
        box-sizing:border-box;
    }

    .main-nav a{
        display:block;
        width:100%;
        padding:16px 0;
        border-bottom:1px solid #e5e5e5;
        box-sizing:border-box;
    }
}

body{
    overflow-x:hidden;
}

/* ==============================
   Shop Responsive (mobile fine-tune, layered on top of base 991px rules)
   ==============================*/
@media (max-width:991px){
    .shop-page{
        gap:30px;
        padding:30px 15px;
    }
    .shop-sidebar{
        margin-bottom:20px;
    }
}
@media (max-width:576px){
    .shop-content ul.products{
        grid-template-columns:1fr !important;
    }
}
/* end of Shop Responsive */

/* Why Smash Point — mobile responsive */
@media (max-width: 767px){
  .why-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .why-card{
    padding: 26px 22px;
  }
}
/* end Why Smash Point mobile responsive */

/* Category Grid Mobile */
@media (max-width: 767px){
  .cat-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cat-card{
    width: 100%;
  }
}
/* end Category Grid Mobile */

/* About Preview — image object-fit + mobile responsive */
.about-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px;
}

@media (max-width:767px){
    .about-preview .container{
        grid-template-columns:1fr;
        gap:30px;
    }
    .about-media{
        width:100%;
    }
    .about-media img{
        width:100%;
        height:280px;
        object-fit:cover;
        border-radius:16px;
    }
    .about-preview h2{
        font-size:28px;
        line-height:1.3;
    }
    .about-preview p{
        font-size:15px;
        line-height:1.7;
    }
    .stat-strip{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
        margin-top:25px;
    }
    .stat-strip div{
        padding:15px;
        background:#fff;
        border-radius:12px;
        text-align:center;
    }
    .about-preview .btn{
        width:100%;
        text-align:center;
        margin-top:20px;
    }
}
/* end About Preview Responsive */

/* ==========================================
   ABOUT PAGE MOBILE RESPONSIVE (page-hero + gallery + cards only —
   about-preview rules already covered above, not repeated)
========================================== */
@media (max-width:767px){

    .page-hero{
        padding:60px 20px;
        text-align:center;
    }
    .page-hero h1{
        font-size:30px;
        line-height:1.3;
    }

    .bg-light .container{
        grid-template-columns:1fr !important;
        gap:20px !important;
    }

    .why-card{
        padding:24px 20px;
    }
    .why-card h3{
        font-size:21px;
    }
    .why-card p{
        font-size:15px;
        line-height:1.6;
    }

    .gallery-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .gallery-grid img{
        width:100%;
        height:260px;
        object-fit:cover;
        border-radius:16px;
    }
}
/* end About page mobile responsive */

/* ==========================================
   SINGLE PRODUCT RESPONSIVE
========================================== */

/* Desktop */
.single-product div.product{
    display: flex;
    align-items: flex-start;
    gap: 50px;
    margin: 50px 0;
}

.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description p{
    margin-left:10px;
}

.single-product .woocommerce-product-gallery{
    flex: 0 0 48%;
    max-width: 48%;
}

.single-product .summary{
    flex: 0 0 48%;
    max-width: 48%;
}

.single-product .summary h1.product_title{
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.single-product .summary .price{
    font-size: 28px;
    font-weight: 700;
    margin: 15px 0;
}

.single-product .summary .woocommerce-product-details__short-description{
    margin: 20px 0;
    line-height: 1.8;
}

.single-product .quantity{
    margin-right: 15px;
}

.single-product .quantity .qty{
    border:1px solid #ddd;
    border-radius:6px;
    height:48px;
    text-align:center;
    margin-left:13px;
}

.single-product .single_add_to_cart_button{
    padding: 14px 28px;
    border-radius: 8px;
}

.single_add_to_cart_button.button.alt{
    background:#000 !important;
    color:#fff !important;
    border:2px solid #000 !important;
    border-radius:8px;
    padding:14px 28px;
    transition:all .3s ease;
}
.single_add_to_cart_button.button.alt:hover,
.single-product .single_add_to_cart_button:hover{
    background:#28a745 !important;
    border-color:#28a745 !important;
    color:#fff !important;
}

.single-product .price,
.single-product .price .woocommerce-Price-amount{
    color:#28a745;
    font-weight:700;
}

.woocommerce-tabs{
    margin-top: 60px;
}

/* Related Products */
.related.products{
    margin-top: 60px;
}
.related.products h2{
    text-align:center;
}
.related.products ul.products{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
}
.related.products ul.products li.product{
    text-align:center;
}
.related.products ul.products li.product img,
.related.products ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product .price,
.related.products ul.products li.product .add_to_cart_button{
    margin-left:10px;
}
.related .add_to_cart_button,
.related .button{
    background:#000 !important;
    color:#fff !important;
    border:2px solid #000 !important;
    border-radius:8px;
    padding:12px 22px;
    display:inline-block;
    text-decoration:none;
    transition:all .3s ease;
}
.related .add_to_cart_button:hover,
.related .button:hover{
    background:#28a745 !important;
    border-color:#28a745 !important;
    color:#fff !important;
}

/* Tablet */
@media (max-width:991px){
    .single-product div.product{
        display:block;
    }
    .single-product .woocommerce-product-gallery,
    .single-product .summary{
        max-width:100%;
        width:100%;
    }
    .single-product .woocommerce-product-gallery{
        margin-bottom:35px;
    }
    .related.products ul.products{
        grid-template-columns:repeat(2,1fr);
    }
}

/* Mobile */
@media (max-width:767px){
    .single-product .summary h1.product_title{
        font-size:30px;
        padding:0 15px;
    }
    .woocommerce-product-details__short-description{
        padding:0 15px;
    }
    .single-product .summary .price{
        font-size:24px;
        padding:0 15px;
    }
    .related.products ul.products{
        grid-template-columns:1fr;
    }
}
/* end SINGLE PRODUCT RESPONSIVE */