/*
Theme Name:   iCellHub
Theme URI:    https://icellhub.com
Description:  iCellHub brand child theme. Applies the brand palette, type scale and storefront styling on top of Storefront. All tokens live in :root so they can be lifted wholesale into Blocksy, Kadence or any other parent if you switch.
Author:       iCellHub
Template:     storefront
Version:      1.0.0
Text Domain:  icellhub-child
License:      GPL-2.0-or-later
*/

/* ============================================================
   Tokens — single source of truth, mirrored from the prototype
   ============================================================ */
:root{
  --ich-ink:#0A0E1A;
  --ich-ink-2:#131A2E;
  --ich-blue:#0068FB;
  --ich-blue-dk:#0048BE;
  --ich-blue-soft:#E8F1FF;
  --ich-paper:#F7F8FA;
  --ich-line:#E3E7EF;
  --ich-line-dk:#26314D;
  --ich-muted:#5B6880;
  --ich-muted-dk:#A8BADC;
  --ich-ok:#0E9F6E;

  --ich-display:'Poppins',system-ui,-apple-system,sans-serif;
  --ich-body:'Inter',system-ui,-apple-system,sans-serif;
  --ich-data:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ich-r:14px;
  --ich-r-sm:8px;
}

/* ============================================================
   Base
   ============================================================ */
body{
  font-family:var(--ich-body);
  color:var(--ich-ink);
  background:var(--ich-paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.site-title,.product_title,.entry-title{
  font-family:var(--ich-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ich-ink);
}

a{color:var(--ich-blue-dk)}
a:hover{color:var(--ich-blue)}

:focus-visible{outline:3px solid var(--ich-blue);outline-offset:3px;border-radius:4px}

/* ============================================================
   Header — dark, so the reversed logo is the one that ships
   ============================================================ */
.site-header{
  background:var(--ich-ink)!important;
  border-bottom:1px solid var(--ich-line-dk);
  padding-top:1.2em;
  padding-bottom:1.2em;
}
.site-header .site-branding img,
.site-header .custom-logo{max-height:36px;width:auto}

.site-header .main-navigation ul.menu > li > a,
.site-header .site-header-cart a{color:#D8E2F2!important;font-weight:500}
.site-header .main-navigation ul.menu > li > a:hover{color:#fff!important}

.storefront-primary-navigation{background:var(--ich-ink)}

/* the verify link deserves to be findable from every page */
.menu-item-verify > a::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ich-ok);margin-right:7px;vertical-align:middle;
}

/* ============================================================
   Buttons
   ============================================================ */
.button,
button.button,
input.button,
.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--ich-blue);
  color:#fff;
  font-family:var(--ich-body);
  font-weight:600;
  border-radius:var(--ich-r-sm);
  padding:14px 26px;
  border:0;
  text-shadow:none;
  transition:background .15s ease;
}
.button:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--ich-blue-dk);
  color:#fff;
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{background:var(--ich-blue);color:#fff}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover{background:var(--ich-blue-dk)}

/* ============================================================
   Products
   ============================================================ */
ul.products li.product{
  background:#fff;
  border:1px solid var(--ich-line);
  border-radius:var(--ich-r);
  padding:18px;
  transition:box-shadow .18s ease,transform .18s ease;
}
ul.products li.product:hover{
  box-shadow:0 16px 40px -26px rgba(10,14,26,.45);
  transform:translateY(-2px);
}
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ich-display);
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:4px;
}
ul.products li.product .price{
  font-family:var(--ich-display);
  font-weight:600;
  color:var(--ich-ink);
  font-size:1.15rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--ich-display);
  font-weight:700;
  color:var(--ich-ink);
  font-size:clamp(1.7rem,4vw,2.3rem);
  letter-spacing:-.02em;
}

/* VAT note sits with the price, since prices are shown inclusive */
.woocommerce div.product p.price small.ich-vat{
  display:inline-block;font-family:var(--ich-body);font-size:.8rem;
  font-weight:400;color:var(--ich-muted);margin-left:8px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ich-blue)}

/* ============================================================
   Forms
   ============================================================ */
input[type="text"],input[type="email"],input[type="tel"],
input[type="password"],input[type="search"],input[type="number"],
textarea,select,.select2-container .select2-selection--single{
  border:1.5px solid var(--ich-line);
  border-radius:var(--ich-r-sm);
  background:#fff;
  padding:12px 14px;
  font-family:var(--ich-body);
}
input:focus,textarea:focus,select:focus{border-color:var(--ich-blue);outline:none}

/* ============================================================
   Checkout & account
   ============================================================ */
.woocommerce-checkout #payment{background:#fff;border:1px solid var(--ich-line);border-radius:var(--ich-r)}
.woocommerce-info,.woocommerce-message{border-top-color:var(--ich-blue)}
.woocommerce-info::before,.woocommerce-message::before{color:var(--ich-blue)}

.woocommerce-MyAccount-navigation ul li.is-active a{color:var(--ich-blue);font-weight:600}

/* ============================================================
   Footer — the legal line is not decoration, it is compliance
   ============================================================ */
.site-footer{background:var(--ich-ink);color:var(--ich-muted-dk)}
.site-footer a{color:var(--ich-muted-dk)}
.site-footer a:hover{color:#fff}
.site-footer h2,.site-footer h3,.site-footer .widget-title{
  color:#fff;font-family:var(--ich-data);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}

.ich-legal{
  margin-top:28px;padding-top:20px;
  border-top:1px solid var(--ich-line-dk);
  font-size:.78rem;line-height:1.7;color:#7F90B0;
}
.ich-legal strong{color:var(--ich-muted-dk);font-weight:600}

/* ============================================================
   Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}