/*
Theme Name: Hive Main Child
Description: Hive Main Site Child Theme
Template: enfold
Version: 2.0
*/

/* ============================================
   BRAND TOKENS — clean + trustworthy + smart/tech
   ============================================ */
:root{
  /* Primary */
  --ts-blue:#2563EB;          /* main brand */
  --ts-blue-hover:#1D4ED8;
  --ts-blue-dark:#1E3A8A;     /* top bar / depth */

  /* Neutrals */
  --ts-text:#111827;          /* headlines + important */
  --ts-text-2:#374151;
  --ts-muted:#6B7280;
  --ts-bg:#F9FAFB;            /* page background */
  --ts-surface:#FFFFFF;       /* cards/panels */
  --ts-border:#E5E7EB;
  --ts-border-strong:#D1D5DB;

  /* Accents — semantic */
  --ts-green:#16A34A;         /* savings / deals only */
  --ts-green-bg:#DCFCE7;
  --ts-red:#DC2626;           /* limited / urgency only */
  --ts-red-bg:#FEE2E2;
  --ts-orange:#F97316;        /* secondary accent (legacy) */

  /* Card category tints */
  --ts-card-blue:#DBEAFE;
  --ts-card-green:#DCFCE7;
  --ts-card-purple:#EDE9FE;

  /* Geometry */
  --ts-radius:12px;
  --ts-radius-sm:8px;
  --ts-radius-lg:16px;

  /* Shadows */
  --ts-shadow-sm:0 1px 2px 0 rgba(17,24,39,.04);
  --ts-shadow:0 1px 3px 0 rgba(17,24,39,.06), 0 1px 2px -1px rgba(17,24,39,.04);
  --ts-shadow-md:0 4px 12px -2px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.04);
  --ts-shadow-lg:0 10px 25px -5px rgba(17,24,39,.10), 0 8px 10px -6px rgba(17,24,39,.04);

  /* Spacing */
  --ts-section-y:80px;
  --ts-section-y-mobile:40px;

  /* Transitions */
  --ts-t-fast:.15s ease;
  --ts-t:.2s ease;
}

/* ============================================
   GLOBAL — typography & background
   ============================================ */
body{background:var(--ts-bg);color:var(--ts-text-2);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.av-special-heading-tag{color:var(--ts-text);letter-spacing:-.01em}
h1{font-weight:800;line-height:1.05;letter-spacing:-.02em}
h2{font-weight:700;line-height:1.15}
h3{font-weight:700;line-height:1.2}
a{transition:color var(--ts-t-fast)}

/* Section breathing room */
.av_textblock_section,
.avia-section{padding-top:var(--ts-section-y);padding-bottom:var(--ts-section-y)}
@media (max-width:990px){
  .av_textblock_section,
  .avia-section{padding-top:var(--ts-section-y-mobile);padding-bottom:var(--ts-section-y-mobile)}
}

/* ============================================
   STICKY HEADER (desktop only)
   ============================================ */
@media (min-width:990px){
  #header{
    position:sticky !important;
    top:0;
    z-index:9999;
    background:var(--ts-surface);
    transition:box-shadow var(--ts-t);
  }
  .header-scrolled #header,
  #header.av_header_transparency.header-scrolled{
    box-shadow:var(--ts-shadow-md);
  }
}

/* ============================================
   TOP BAR — dark blue header_meta
   ============================================ */
#header_meta,
.av_header_top #header_meta{
  background:var(--ts-blue-dark) !important;
  color:#fff !important;
  font-size:13px;
  letter-spacing:.01em;
}
#header_meta a,
#header_meta .phone-info,
#header_meta .phone-info span{color:#fff !important}
#header_meta a:hover{color:#cfe0ff !important}
#header_meta .sub_menu_socials a{color:#fff !important}

/* ============================================
   SIDEBAR CATEGORY MENU
   ============================================ */
.ts-sidebar.widget{
  background:var(--ts-surface);
  border:1px solid var(--ts-border);
  border-radius:var(--ts-radius);
  overflow:hidden;
  padding:0 !important;
  box-shadow:var(--ts-shadow);
}
.ts-sidebar .widgettitle{display:none}
.ts-sidebar ul{list-style:none;margin:0;padding:0}
.ts-sidebar li{margin:0}
.ts-sidebar li a{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;font-size:14px;color:var(--ts-text-2);
  border-bottom:1px solid #F3F4F6;position:relative;text-decoration:none;
  transition:background var(--ts-t-fast),color var(--ts-t-fast);
}
.ts-sidebar li:last-child a{border-bottom:none}
.ts-sidebar li a:hover{background:var(--ts-bg);color:var(--ts-blue)}
.ts-sidebar li a::after{
  content:"";position:absolute;right:18px;top:50%;
  width:6px;height:6px;
  border-right:2px solid var(--ts-border-strong);border-bottom:2px solid var(--ts-border-strong);
  transform:translateY(-70%) rotate(-45deg);transition:border-color var(--ts-t-fast);
}
.ts-sidebar li a:hover::after{border-color:var(--ts-blue)}

/* ============================================
   HERO
   ============================================ */
.ts-hero{
  background:linear-gradient(to right,#F9FAFB 0%,#EEF2FF 100%);
  border-radius:var(--ts-radius-lg);
  position:relative;overflow:hidden;
  min-height:420px;padding:64px;
  display:flex;align-items:center;gap:32px;
}
.ts-hero-text{flex:1;max-width:50%;position:relative;z-index:2}
.ts-hero h1{
  font-size:clamp(36px,4.5vw,56px);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;
  margin:0 0 6px;color:var(--ts-text);
  text-transform:uppercase;
}
.ts-hero h1 .blue{color:var(--ts-blue);display:block}
.ts-hero p{font-size:18px;color:var(--ts-text-2);margin:20px 0 32px;line-height:1.55}
.ts-btn-primary{
  background:var(--ts-blue);color:#fff !important;
  padding:14px 32px;border-radius:var(--ts-radius);
  font-weight:600;font-size:15px;
  display:inline-block;text-decoration:none !important;
  box-shadow:0 1px 2px rgba(37,99,235,.15);
  transition:background var(--ts-t-fast),transform var(--ts-t-fast),box-shadow var(--ts-t-fast);
}
.ts-btn-primary:hover{
  background:var(--ts-blue-hover);color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.ts-hero-brands{
  display:flex;align-items:center;gap:36px;
  margin-top:40px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--ts-border);
}
.ts-hero-brands span{font-weight:700;color:#9CA3AF;font-size:18px;letter-spacing:.02em}
.ts-hero-brands span.italic{font-style:italic;font-family:Georgia,serif;font-size:22px;font-weight:400}
.ts-hero-image{flex:1;max-width:50%;display:flex;align-items:center;justify-content:center}
.ts-hero-image img{max-width:100%;max-height:380px;height:auto;width:auto;object-fit:contain}

/* ============================================
   TRUST BADGES
   ============================================ */
.ts-trust{
  background:var(--ts-surface);
  border:1px solid var(--ts-border);
  border-radius:var(--ts-radius);
  padding:24px 32px;
  display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  box-shadow:var(--ts-shadow);
}
.ts-trust-item{display:flex;align-items:center;gap:14px;flex:1;min-width:180px}
.ts-trust-item svg{color:var(--ts-blue);flex-shrink:0;stroke-width:1.5}
.ts-trust-item strong{font-size:14px;font-weight:600;display:block;margin-bottom:2px;color:var(--ts-text)}
.ts-trust-item span{font-size:13px;color:var(--ts-muted)}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.ts-card{
  border-radius:var(--ts-radius-lg);
  padding:36px;min-height:240px;
  position:relative;overflow:hidden !important;
  display:flex;flex-direction:column;justify-content:space-between;
  box-sizing:border-box;
  box-shadow:var(--ts-shadow);
  transition:transform var(--ts-t),box-shadow var(--ts-t);
}
.ts-card:hover{transform:translateY(-4px);box-shadow:var(--ts-shadow-lg)}
.ts-card.toners{background:linear-gradient(135deg,var(--ts-card-blue) 0%,#EEF2FF 100%)}
.ts-card.refurb{background:linear-gradient(135deg,var(--ts-card-green) 0%,#ECFDF5 100%)}
.ts-card.smart{background:linear-gradient(135deg,var(--ts-card-purple) 0%,#F5F3FF 100%)}
.ts-card-content{position:relative;z-index:2;max-width:55%}
.ts-card h3{
  font-size:24px;font-weight:800;letter-spacing:-.01em;
  line-height:1.15;margin:0 0 8px;color:var(--ts-text);
}
.ts-card p{font-size:15px;color:var(--ts-text-2);margin:0 0 20px;line-height:1.5}
.ts-card .ts-btn{
  padding:11px 24px;border-radius:var(--ts-radius-sm);
  color:#fff !important;font-weight:600;font-size:13px;
  display:inline-block;align-self:flex-start;text-decoration:none !important;
  position:relative;z-index:2;
  transition:transform var(--ts-t-fast),box-shadow var(--ts-t-fast);
}
.ts-card .ts-btn:hover{transform:translateY(-1px);box-shadow:var(--ts-shadow-md)}
.ts-card.toners .ts-btn{background:var(--ts-blue)}
.ts-card.refurb .ts-btn{background:#15803D}
.ts-card.smart .ts-btn{background:#7C3AED}
.ts-card-image{
  position:absolute;right:0;bottom:0;top:0;
  width:45%;display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:none;
}
.ts-card-image img{max-width:90%;max-height:85%;width:auto;height:auto;object-fit:contain}

/* ============================================
   PRODUCT CARDS (WooCommerce + custom)
   ============================================ */
.ts-product,
.woocommerce ul.products li.product,
.products .product{
  background:var(--ts-surface);
  border:1px solid var(--ts-border);
  border-radius:var(--ts-radius);
  padding:16px;
  position:relative;
  transition:transform var(--ts-t),box-shadow var(--ts-t),border-color var(--ts-t);
}
.ts-product:hover,
.woocommerce ul.products li.product:hover{
  transform:translateY(-2px);
  box-shadow:var(--ts-shadow-md);
  border-color:var(--ts-border-strong);
}
.ts-product .price,
.woocommerce ul.products li.product .price{
  color:var(--ts-text);font-weight:700;font-size:18px;
}
.ts-product .price del,
.woocommerce ul.products li.product .price del{
  color:var(--ts-muted);font-weight:400;font-size:14px;
  margin-right:6px;text-decoration:line-through;
}
.ts-product .price ins,
.woocommerce ul.products li.product .price ins{
  background:none;text-decoration:none;
  color:var(--ts-green);font-weight:700;
}

/* Discount badge (top-left) */
.ts-discount-badge,
.woocommerce span.onsale{
  background:var(--ts-red) !important;color:#fff !important;
  padding:4px 10px;border-radius:var(--ts-radius-sm);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  position:absolute;top:12px;left:12px;
  margin:0 !important;line-height:1.3 !important;
  min-height:auto !important;min-width:auto !important;
}

/* Wishlist (top-right) */
.ts-wishlist{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border-radius:50%;
  background:var(--ts-surface);border:1px solid var(--ts-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--ts-muted);
  transition:color var(--ts-t-fast),border-color var(--ts-t-fast);
  cursor:pointer;z-index:2;
}
.ts-wishlist:hover{color:var(--ts-red);border-color:var(--ts-red)}
.ts-wishlist.active{color:var(--ts-red)}

/* ============================================
   SAVINGS / DEALS UTILITY CLASSES
   ============================================ */
.ts-save-badge{
  display:inline-block;background:var(--ts-green-bg);color:var(--ts-green);
  padding:4px 10px;border-radius:var(--ts-radius-sm);
  font-size:12px;font-weight:600;
}
.ts-urgent-badge{
  display:inline-block;background:var(--ts-red-bg);color:var(--ts-red);
  padding:4px 10px;border-radius:var(--ts-radius-sm);
  font-size:12px;font-weight:600;
}

/* ============================================
   ENFOLD GLOBAL TWEAKS
   ============================================ */
.avia-button{border-radius:var(--ts-radius) !important;font-weight:600 !important}
.avia-button.avia-color-theme-color{
  background:var(--ts-blue) !important;border-color:var(--ts-blue) !important;
}
.avia-button.avia-color-theme-color:hover{
  background:var(--ts-blue-hover) !important;border-color:var(--ts-blue-hover) !important;
}

/* WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--ts-blue) !important;color:#fff !important;
  border-radius:var(--ts-radius) !important;
  font-weight:600 !important;
  transition:background var(--ts-t-fast),transform var(--ts-t-fast) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background:var(--ts-blue-hover) !important;transform:translateY(-1px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:990px){
  body{font-size:15px}
  .ts-hero{padding:40px 28px;min-height:auto;flex-direction:column;border-radius:var(--ts-radius)}
  .ts-hero h1{font-size:32px}
  .ts-hero p{font-size:16px}
  .ts-hero-text,.ts-hero-image{max-width:100%}
  .ts-hero-brands{gap:20px;margin-top:24px;padding-top:20px}
  .ts-trust{flex-direction:column;padding:20px}
  .ts-trust-item{min-width:100%}
  .ts-card{min-height:200px;padding:28px;border-radius:var(--ts-radius)}
  .ts-card-content{max-width:60%}
  .ts-card h3{font-size:20px}
}

/* ============================================
   TEMPLATE WRAPPER CLASSES (template-techstore-home.php)
   ============================================ */
.template-techstore{
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px;
}
.ts-section-wrap{
  margin-bottom:40px;
}
.ts-section-wrap:last-child{margin-bottom:0}

.ts-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.ts-products-section{
  padding:20px 0;
}
.ts-products-section h2,
.ts-products-section .av-special-heading-tag{
  font-size:24px;font-weight:700;margin-bottom:20px;
}

/* Newsletter (matches old inline-styled version, now class-based) */
.ts-newsletter{
  background:linear-gradient(135deg,var(--ts-blue) 0%,var(--ts-blue-dark) 100%);
  padding:48px 32px;
  border-radius:var(--ts-radius-lg);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.ts-newsletter-text h3{
  font-size:24px;font-weight:700;margin:0 0 6px;color:#fff;
  line-height:1.2;
}
.ts-newsletter-text p{
  opacity:.9;font-size:15px;margin:0;color:#fff;
}
.ts-newsletter-form{
  display:flex;
  background:#fff;
  border-radius:var(--ts-radius);
  overflow:hidden;
  min-width:420px;
}
.ts-newsletter-form input{
  flex:1;border:none;outline:none;
  padding:14px 18px;font-size:14px;
  color:var(--ts-text);
}
.ts-newsletter-form button{
  background:var(--ts-orange);
  color:#fff;
  padding:0 28px;
  font-weight:600;font-size:14px;
  border:none;cursor:pointer;
  transition:background var(--ts-t-fast);
}
.ts-newsletter-form button:hover{background:#EA580C}

@media (max-width:990px){
  .template-techstore{padding:24px 16px}
  .ts-section-wrap{margin-bottom:32px}
  .ts-cards-grid{grid-template-columns:1fr;gap:16px}
  .ts-newsletter{flex-direction:column;text-align:center;padding:32px 24px}
  .ts-newsletter-form{min-width:100%;width:100%}
}

/* ============================================
   FOOTER (custom child theme footer.php)
   ============================================ */
.ts-footer{
  background:#0F172A;
  color:#94A3B8;
  padding:64px 24px 0;
  margin-top:0;
}
.ts-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
}
.ts-footer h4{
  color:#fff;
  font-size:15px;
  font-weight:600;
  margin:0 0 18px;
  letter-spacing:.01em;
}
.ts-footer-col p{
  font-size:14px;
  line-height:1.7;
  margin:0 0 18px;
  color:#94A3B8;
}
.ts-footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.ts-footer-col li{margin-bottom:10px}
.ts-footer-col a{
  font-size:14px;
  color:#94A3B8;
  text-decoration:none;
  transition:color var(--ts-t-fast);
}
.ts-footer-col a:hover{color:#fff}

.ts-footer-socials{
  display:flex;
  gap:10px;
}
.ts-footer-socials a{
  width:36px;
  height:36px;
  background:#1E293B;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#CBD5E1;
  transition:background var(--ts-t-fast);
}
.ts-footer-socials a:hover{
  background:var(--ts-blue);
  color:#fff;
}

.ts-contact-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
  font-size:14px;
  color:#94A3B8;
}
.ts-contact-item svg{
  color:var(--ts-blue);
  flex-shrink:0;
  margin-top:2px;
}

.ts-footer-bottom{
  border-top:1px solid #1E293B;
}
.ts-footer-bottom-inner{
  max-width:1200px;
  margin:0 auto;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  font-size:13px;
  color:#94A3B8;
}
.ts-payment-methods{
  display:flex;
  gap:8px;
  align-items:center;
}
.ts-payment{
  background:#fff;
  color:#0F172A;
  padding:5px 10px;
  border-radius:var(--ts-radius-sm);
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
}

@media (max-width:990px){
  .ts-footer{padding:40px 16px 0}
  .ts-footer-inner{
    grid-template-columns:1fr 1fr;
    gap:32px;
    padding-bottom:32px;
  }
  .ts-footer-bottom-inner{
    flex-direction:column;
    text-align:center;
    padding:18px 16px;
  }
}

/* ============================================
   FIX: home wrapper centers content, no Enfold container override
   ============================================ */
.ts-home-wrapper{
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px 60px;
  width:100%;
  box-sizing:border-box;
}
@media (max-width:990px){
  .ts-home-wrapper{padding:24px 16px 40px}
}

/* Make sure Enfold container holds our wrapper at full width */
body.page-template-template-techstore-home-php .container_wrap_first .container,
body.page-template-template-techstore-home-php #main > .container_wrap > .container{
  max-width:none;
  padding:0;
  width:100%;
}

/* ============================================
   FIX: bump home wrapper to 1500px
   ============================================ */
.ts-home-wrapper{
  max-width:1500px !important;
}

/* ============================================
   POLISH: tighten top/bottom gaps
   ============================================ */
.ts-home-wrapper{
  padding-top:24px;
  padding-bottom:0;
}
.ts-home-wrapper .ts-section-wrap:last-child{
  margin-bottom:0;
}