@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ===================================================================
   FutureWeb / TechShop-style theme  v6
   Built to match demo.templatemonster.com/demo/551444 (TechShop)
   =================================================================== */

:root{
  --brand:#5b51e8;          /* primary indigo */
  --brand-d:#4a40d6;
  --nav:#6163d6;            /* periwinkle nav bar */
  --nav-d:#4c4ec9;          /* darker 'all categories' block */
  --accent:#fb3e63;         /* pink/red price + arrows */
  --ink:#1f2433;            /* main text */
  --muted:#7b8194;
  --line:#e7e9f0;
  --bg:#f4f5f8;            /* page bg */
  --star:#ff9f1c;
  --radius:14px;
  --shadow:0 10px 30px rgba(34,38,73,.08);
  --shadow-h:0 18px 44px rgba(34,38,73,.16);
}

body{ font-family:'Inter','Poppins',-apple-system,Segoe UI,Roboto,sans-serif !important; color:var(--ink); background:var(--bg) !important; }
h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:'Poppins',sans-serif !important; color:var(--ink); }
a{ color:var(--ink); }
a:hover{ color:var(--brand); }
.container{ max-width:1290px; }
#wrapper{ background:var(--bg) !important; padding-top:0 !important; box-shadow:none !important; }
#main .page-content, #content-wrapper{ background:transparent; }

/* ---------- generic buttons ---------- */
.ts-btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Poppins',sans-serif; font-weight:600;
  font-size:.92rem; padding:.72rem 1.4rem; border-radius:999px; cursor:pointer; border:0; transition:.25s; text-decoration:none; }
.ts-btn--light{ background:#fff; color:var(--ink); }
.ts-btn--light:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }
.ts-btn--primary{ background:var(--brand); color:#fff !important; }
.ts-btn--primary:hover{ background:var(--brand-d); color:#fff !important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(91,81,232,.4); }
.ts-btn .ar{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:.8rem; }

/* ===================================================================
   HEADER
   =================================================================== */
#header{ background:#fff !important; box-shadow:0 4px 18px rgba(20,24,60,.06); position:relative; z-index:50; }
.header-banner{ display:none !important; }

/* ---- thin top bar (.header-nav) ---- */
.header-nav{ background:#fbfbfd !important; border-bottom:1px solid var(--line); padding:6px 0 !important; font-size:.82rem; min-height:0 !important; }
.header-nav .container{ position:relative; }
.header-nav .row{ display:flex !important; align-items:center; margin:0 !important; }
.header-nav .row::before{
  content:"Get up to 10% OFF — limited season offer!";
  color:var(--muted); font-weight:500; letter-spacing:.01em; white-space:nowrap; margin-right:auto; padding-left:4px;
}
.header-nav .hidden-sm-down{ display:flex !important; align-items:center; gap:1.2rem; flex:0 0 auto; }
.header-nav .col-md-5, .header-nav .col-md-7{ width:auto !important; max-width:none; flex:0 0 auto; padding:0; display:flex; align-items:center; gap:1.2rem; }
#contact-link, #_desktop_contact_link{ display:none !important; }
.header-nav .right-nav{ display:flex; align-items:center; gap:1.2rem; }
.header-nav .user-info, .header-nav .blockcart{ display:flex; align-items:center; }
.header-nav a{ color:var(--muted) !important; font-weight:500; }
.header-nav a:hover{ color:var(--brand) !important; }
.header-nav .material-icons{ color:var(--ink); font-size:1.15rem; }
.header-nav .blockcart{ background:transparent !important; padding:0 !important; }
.header-nav .cart-products-count{ background:var(--accent); color:#fff; }

/* ---- main header (.header-top) : deterministic grid ---- */
.header-top{ padding:16px 0 0 !important; }
.header-top > .container > .row{ display:flex !important; align-items:flex-start; flex-wrap:nowrap; margin:0 !important; }
#_desktop_logo{ flex:0 0 200px !important; max-width:200px !important; width:200px !important; padding:6px 0 0 !important; }
#_desktop_logo img{ max-height:42px; width:auto; }
#_desktop_logo h1{ margin:0; }

.header-top-right{ flex:1 1 auto !important; max-width:none !important; width:auto !important; padding:0 !important;
  display:flex !important; flex-direction:column; align-items:stretch; }

/* search → rounded pill on top row, next to logo */
#search_widget{ order:1; width:100%; max-width:720px; margin:0 0 0 8px; }
#search_widget form{ display:flex; align-items:center; background:#fff; border:2px solid #e4e6ef; border-radius:999px;
  height:50px; box-shadow:none; padding:0 6px 0 0; }
#search_widget form input[type=text]{ order:1; border:0 !important; box-shadow:none !important; flex:1; height:100%;
  padding:0 20px; font-size:.92rem; background:transparent !important; }
#search_widget .material-icons.search{ order:2; background:var(--brand); color:#fff !important; border-radius:50%;
  width:40px; height:40px; display:grid; place-items:center; font-size:1.2rem; cursor:pointer; }
#search_widget .material-icons.clear{ display:none !important; }

/* the big periwinkle category menu bar — full content width below search */
#_desktop_top_menu{ order:2; margin:14px 0 0 -200px !important; width:calc(100% + 200px) !important;
  background:var(--nav) !important; border-radius:10px; overflow:visible; }
#_desktop_top_menu .top-menu{ margin:0; padding:0; display:flex !important; align-items:stretch; flex-wrap:nowrap; }
#_desktop_top_menu .top-menu > li.category{ position:relative; }
#_desktop_top_menu .top-menu > li.category > a{ color:#fff !important; font-family:'Poppins',sans-serif; font-weight:500;
  font-size:.92rem; padding:14px 20px !important; display:flex; align-items:center; gap:6px; border:0 !important; }
#_desktop_top_menu .top-menu > li.category:first-child > a{ background:var(--nav-d); border-radius:10px 0 0 10px;
  padding-left:22px !important; padding-right:26px !important; font-weight:600; }
#_desktop_top_menu .top-menu > li.category > a::before{ } /* reserved */
#_desktop_top_menu .top-menu > li.category > a:hover{ background:rgba(0,0,0,.12); color:#fff !important; }
#_desktop_top_menu .sub-menu{ border-radius:0 0 12px 12px; box-shadow:var(--shadow); border:0; padding:10px 0; }
#_desktop_top_menu .sub-menu a{ color:var(--ink) !important; }
#_desktop_top_menu .sub-menu a:hover{ color:var(--brand) !important; }

/* hamburger glyph before first menu item */
#_desktop_top_menu .top-menu > li.category:first-child > a > span:first-child::before{ }

.header-top .clearfix{ display:none; }

/* ===================================================================
   HOMEPAGE
   =================================================================== */
.ts-home{ padding-bottom:40px; }
.ts-home .container{ margin-top:26px; }

/* ---------- category quick nav (6 cards) ---------- */
.ts-catnav{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.ts-catnav__item{ display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:20px 10px; font-family:'Poppins',sans-serif; font-weight:600; font-size:.9rem; color:var(--ink);
  text-decoration:none; transition:.25s; }
.ts-catnav__item:hover{ border-color:var(--brand); color:var(--brand); box-shadow:var(--shadow); transform:translateY(-3px); }
.ts-catnav__item svg{ width:26px; height:26px; stroke:var(--brand); flex:0 0 auto; }

/* ---------- hero ---------- */
.ts-herowrap{ display:grid; grid-template-columns:1fr; gap:22px; }
.ts-hero{ position:relative; overflow:hidden; border-radius:18px; min-height:430px;
  background:linear-gradient(120deg,#15123a 0%,#241a52 45%,#3a1f63 100%);
  display:flex; align-items:center; }
.ts-hero__img{ position:absolute; inset:0 0 0 auto; width:62%; background-size:cover; background-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%); mask-image:linear-gradient(90deg,transparent 0%,#000 38%); }
.ts-hero__txt{ position:relative; z-index:2; padding:48px 56px; max-width:560px; }
.ts-hero__eyebrow{ display:inline-block; color:#c9b8ff; font-weight:600; letter-spacing:.16em; font-size:.78rem; text-transform:uppercase; margin-bottom:14px; }
.ts-hero__title{ color:#fff !important; font-size:2.9rem; line-height:1.08; font-weight:700; margin:0 0 14px; }
.ts-hero__sub{ color:#cfc8e6; font-size:1.02rem; margin-bottom:26px; }

/* ---------- 3 pastel promo cards ---------- */
.ts-promorow{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ts-promo{ position:relative; overflow:hidden; border-radius:16px; padding:26px 28px; min-height:200px; display:flex; flex-direction:column;
  text-decoration:none; transition:.25s; }
.ts-promo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-h); }
.ts-promo small{ font-weight:600; color:var(--accent); font-size:.8rem; letter-spacing:.04em; }
.ts-promo strong{ font-family:'Poppins',sans-serif; font-size:1.45rem; line-height:1.15; color:var(--ink); margin:6px 0 16px; max-width:60%; }
.ts-promo .ts-shop{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink); font-weight:600; font-size:.85rem;
  padding:.5rem .55rem .5rem 1rem; border-radius:999px; align-self:flex-start; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.ts-promo .ts-shop .ar{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:.75rem; }
.ts-promo__img{ position:absolute; right:-6px; bottom:-6px; width:48%; height:78%; background-size:contain; background-repeat:no-repeat; background-position:bottom right; }
.ts-promo--blue{ background:#e7eefc; }
.ts-promo--pink{ background:#fce9f1; }
.ts-promo--lav{ background:#ece9fb; }

/* ---------- section heading ---------- */
.ts-sec-head{ display:flex; align-items:center; justify-content:space-between; margin:14px 0 22px; }
.ts-sec-head h2{ font-size:1.55rem; font-weight:700; margin:0; position:relative; padding-bottom:10px; }
.ts-sec-head h2::after{ content:""; position:absolute; left:0; bottom:0; width:54px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); }
.ts-sec-head .ts-viewall{ color:var(--brand); font-weight:600; font-size:.9rem; text-decoration:none; }

/* ---------- side-promo + product split ---------- */
.ts-split{ display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:stretch; }
.ts-tallpromo{ position:relative; overflow:hidden; border-radius:16px; padding:28px 26px; display:flex; flex-direction:column; }
.ts-tallpromo--beige{ background:#f6ecd8; }
.ts-tallpromo--mint{ background:#def0ec; }
.ts-tallpromo small{ color:var(--accent); font-weight:600; font-size:.8rem; }
.ts-tallpromo strong{ font-family:'Poppins',sans-serif; font-size:1.5rem; line-height:1.15; margin:8px 0 18px; color:var(--ink); }
.ts-tallpromo .ts-shop{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink); font-weight:600; font-size:.85rem;
  padding:.5rem .55rem .5rem 1rem; border-radius:999px; align-self:flex-start; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.ts-tallpromo .ts-shop .ar{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:.75rem; }
.ts-tallpromo__img{ margin-top:auto; height:150px; background-size:contain; background-repeat:no-repeat; background-position:bottom center; }

/* ---------- wide gradient banners ---------- */
.ts-wide{ position:relative; overflow:hidden; border-radius:18px; min-height:230px; display:flex; align-items:center; }
.ts-wide__img{ position:absolute; inset:0 0 0 auto; width:55%; background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%); mask-image:linear-gradient(90deg,transparent,#000 45%); }
.ts-wide__txt{ position:relative; z-index:2; padding:40px 50px; }
.ts-wide__txt .eb{ color:rgba(255,255,255,.85); font-weight:600; letter-spacing:.12em; font-size:.76rem; text-transform:uppercase; }
.ts-wide__txt h2{ color:#fff !important; font-size:2rem; line-height:1.12; margin:10px 0 22px; font-weight:700; }
.ts-wide--blue{ background:linear-gradient(115deg,#5b6fe6,#7b86f0); }
.ts-wide--violet{ background:linear-gradient(115deg,#3b1d5e,#7a2bb0 60%,#b8348a); }

/* ---------- service features ---------- */
.ts-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; }
.ts-feat{ display:flex; align-items:center; gap:14px; padding:26px 24px; border-right:1px solid var(--line); }
.ts-feat:last-child{ border-right:0; }
.ts-feat svg{ width:36px; height:36px; stroke:var(--brand); flex:0 0 auto; }
.ts-feat strong{ display:block; font-family:'Poppins',sans-serif; font-size:.98rem; color:var(--ink); }
.ts-feat small{ color:var(--muted); font-size:.82rem; }

/* ---------- brand strip ---------- */
.ts-brands{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 40px; }
.ts-brands span{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:#b9bdca; letter-spacing:.03em; transition:.2s; }
.ts-brands span:hover{ color:var(--ink); }

/* ---------- newsletter ---------- */
.ts-newsletter{ background:linear-gradient(120deg,var(--brand),#7a4ff0); margin-top:36px; }
.ts-newsletter__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:36px 0; flex-wrap:wrap; }
.ts-newsletter h2{ color:#fff !important; font-size:1.5rem; margin:0 0 4px; }
.ts-newsletter p{ color:rgba(255,255,255,.85); margin:0; }
.ts-news-form{ display:flex; gap:10px; background:#fff; border-radius:999px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.ts-news-form input{ border:0; outline:0; padding:0 20px; min-width:280px; font-size:.92rem; background:transparent; }

/* ===================================================================
   PRODUCT CARDS  (.ts-card from product.tpl override + module grids)
   =================================================================== */
.ts-products{ }
.featured-products .products, .products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px; margin:0; }
.ts-card{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:.25s; height:100%; }
.ts-card:hover{ box-shadow:var(--shadow-h); transform:translateY(-4px); border-color:transparent; }
.ts-card .thumbnail-container{ width:100%; height:auto; margin:0; box-shadow:none; }
.ts-card .thumbnail-top{ position:relative; background:#f7f8fb; padding:22px; display:grid; place-items:center; }
.ts-card .thumbnail-top img{ max-height:170px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.ts-card .product-description{ padding:16px 18px 18px; border:0; }
.ts-card .product-title{ font-family:'Inter',sans-serif; font-weight:600; font-size:.92rem; line-height:1.35; margin:0 0 8px; min-height:2.5em; }
.ts-card .product-title a{ color:var(--ink); }
.ts-card .product-title a:hover{ color:var(--brand); }
.ts-card .product-price-and-shipping{ display:flex; align-items:center; gap:8px; margin:4px 0 14px; }
.ts-card .price{ color:var(--ink); font-family:'Poppins',sans-serif; font-weight:700; font-size:1.1rem; }
.ts-card .regular-price{ color:var(--muted); text-decoration:line-through; font-size:.9rem; }
.ts-card__actions{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateX(8px); transition:.25s; }
.ts-card:hover .ts-card__actions{ opacity:1; transform:none; }
.ts-icon-btn{ width:38px; height:38px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow); color:var(--ink); }
.ts-icon-btn:hover{ background:var(--brand); color:#fff; }
.ts-card__cart .ts-add{ width:100%; justify-content:center; display:flex; align-items:center; gap:6px; background:#f1f2f7 !important;
  color:var(--ink) !important; border:0 !important; border-radius:10px; padding:.66rem 1rem; font-weight:600; font-size:.85rem; box-shadow:none; transition:.2s; }
.ts-card__cart .ts-add:hover{ background:var(--brand) !important; color:#fff !important; }
.ts-card__cart .ts-add .material-icons{ font-size:1.1rem; }
/* star rating */
.ts-card .grade-stars, .ts-card .comments_note{ margin-bottom:6px; }
.ts-card .star_content .star.star_on::before, .ts-card .star.star_on{ color:var(--star) !important; }

/* product flags */
.ts-card .product-flags{ position:absolute; top:12px; left:12px; margin:0; padding:0; z-index:3; }
.ts-card .product-flag{ display:inline-block; background:var(--accent); color:#fff; font-size:.72rem; font-weight:600;
  padding:3px 9px; border-radius:6px; margin-bottom:5px; box-shadow:none; }
.ts-card .product-flag.discount, .ts-card .product-flag.on-sale{ background:var(--accent); }
.ts-card .product-flag.new{ background:var(--brand); }

/* hide classic-theme leftovers that clash */
.featured-products .products-section-title{ display:none; }
.ts-products h2.products-section-title{ display:none; }

/* ===================================================================
   FOOTER
   =================================================================== */
.page-footer, #footer{ margin-top:0; }
#footer{ background:#14172a !important; color:#aeb3c6; padding-top:50px; }
#footer .container{ }
#footer a{ color:#aeb3c6 !important; }
#footer a:hover{ color:#fff !important; }
#footer .h3, #footer .h4, #footer h3, #footer .title, #footer .footer-block .title{ color:#fff !important; font-family:'Poppins',sans-serif; font-weight:600; }
#footer .links ul li, #footer li{ border:0 !important; }
#footer .links ul li a::before{ display:none !important; }
.footer-container{ background:#14172a !important; box-shadow:none !important; padding-top:30px; }
.footer-container li a{ color:#aeb3c6 !important; }
#footer .block-contact, #footer .block_newsletter{ border:0 !important; }
.footer-container .h3, .footer-container h3{ color:#fff !important; }
/* the default newsletter block in footer — hide, we have our own */
#footer .block_newsletter{ display:none; }
#footer .copyright, .footer__copyright, #footer .text-sm-center{ color:#7f8499; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1100px){
  .ts-catnav{ grid-template-columns:repeat(3,1fr); }
  .ts-features{ grid-template-columns:repeat(2,1fr); }
  .ts-feat:nth-child(2){ border-right:0; }
  .ts-feat:nth-child(1),.ts-feat:nth-child(2){ border-bottom:1px solid var(--line); }
  .featured-products .products, .products{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .ts-promorow{ grid-template-columns:1fr; }
  .ts-split{ grid-template-columns:1fr; }
  .ts-hero__title{ font-size:2.1rem; }
  .ts-hero__img{ width:80%; opacity:.5; }
  .featured-products .products, .products{ grid-template-columns:repeat(2,1fr); }
  #search_widget{ flex-basis:100%; order:3; }
}
@media (max-width:560px){
  .ts-catnav{ grid-template-columns:repeat(2,1fr); }
  .ts-features{ grid-template-columns:1fr; }
  .featured-products .products, .products{ grid-template-columns:1fr 1fr; }
}