/*
Theme Name:  Ink Inc.
Theme URI:   https://inkincweb.be
Description: Ink Inc. child theme for Storefront — Belgian ink & toner webshop.
Author:      Bert Hendrickx
Template:    storefront
Version:     1.0.0
License:     GNU General Public License v3 or later
Text Domain: inkincweb
*/

/* ─── Palette ─────────────────────────────────────────────── */
:root {
  --ii-yellow:    #FFD90F;
  --ii-yellow-dk: #D4B300;
  --ii-red:       #EF3340;
  --ii-red-dk:    #C8102E;
  --ii-black:     #1C1C1C;
  --ii-white:     #FFFFFF;
  --ii-bg:        #FFFDF0;
  --ii-gray:      #F5F3E8;
  --ii-border:    #E0DDD0;
  --ii-text:      #2A2A2A;
  --ii-muted:     #666660;
}

/* ─── Base ────────────────────────────────────────────────── */
body {
  background-color: var(--ii-bg);
  color: var(--ii-text);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

a {
  color: var(--ii-black);
}
a:hover {
  color: var(--ii-red);
}

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
  background-color: var(--ii-black) !important;
  border-bottom: 3px solid var(--ii-yellow);
  padding: 0 !important;
}

.site-branding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


.site-header .site-branding,
.site-header .site-title,
.site-header .site-title a,
.site-header p.site-description {
  color: var(--ii-yellow) !important;
}

.site-header .site-title a:hover {
  color: var(--ii-white) !important;
}

/* Search in header */
.site-header .widget_product_search input[type="search"] {
  border-color: var(--ii-yellow);
}

/* Cart */
.site-header-cart .cart-contents,
.site-header-cart .cart-contents:hover {
  color: var(--ii-yellow) !important;
}

/* Nav */
.main-navigation ul li a {
  color: var(--ii-white) !important;
  font-weight: 500;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--ii-yellow) !important;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  background: var(--ii-black);
}
.main-navigation ul ul li a {
  border-bottom-color: #333;
}

/* Mobile toggle */
.menu-toggle {
  color: var(--ii-yellow) !important;
  border-color: var(--ii-yellow) !important;
}

/* ─── Buttons ─────────────────────────────────────────────── */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wc-forward {
  background-color: var(--ii-yellow) !important;
  border-color: var(--ii-yellow-dk) !important;
  color: var(--ii-black) !important;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wc-forward:hover {
  background-color: var(--ii-yellow-dk) !important;
  border-color: var(--ii-yellow-dk) !important;
  color: var(--ii-black) !important;
  transform: translateY(-1px);
}

.button.alt,
.wc-proceed-to-checkout .checkout-button {
  background-color: var(--ii-red) !important;
  border-color: var(--ii-red-dk) !important;
  color: var(--ii-white) !important;
}

.button.alt:hover,
.wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--ii-red-dk) !important;
  border-color: var(--ii-red-dk) !important;
  color: var(--ii-white) !important;
}

/* ─── Product cards ───────────────────────────────────────── */
ul.products li.product {
  background: var(--ii-white);
  border: 1px solid var(--ii-border);
  border-radius: 6px;
  padding: 1rem !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

ul.products li.product:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ii-black);
}

ul.products li.product .price {
  color: var(--ii-red);
  font-weight: 700;
  font-size: 1.05rem;
}

ul.products li.product .onsale {
  background: var(--ii-red);
  border-radius: 4px;
  min-height: auto;
  min-width: auto;
  padding: 2px 8px;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* ─── Widgets / sidebar ───────────────────────────────────── */
.widget-area .widget-title,
.widget_product_categories ul li a {
  color: var(--ii-black);
}

/* ─── WooCommerce notices ─────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-no-products-found .woocommerce-info {
  background: var(--ii-gray);
  border-top: 3px solid var(--ii-yellow);
  color: var(--ii-black);
  border-radius: 0 0 4px 4px;
  padding: 1em 1.5em 1em 3em;
  font-weight: 500;
  list-style: none;
}

.woocommerce-info::before {
  color: var(--ii-yellow);
}

.woocommerce-error,
.woocommerce-error li {
  border-top-color: var(--ii-red);
  background: #fff5f5;
  color: var(--ii-black);
}

.woocommerce-no-products-found {
  padding: 2rem 0;
}

/* ─── Breadcrumbs ─────────────────────────────────────────── */
.woocommerce-breadcrumb a {
  color: var(--ii-red);
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
  background-color: var(--ii-black);
  color: #AAA;
  border-top: 3px solid var(--ii-yellow);
}

.site-footer a {
  color: var(--ii-yellow);
}
.site-footer a:hover {
  color: var(--ii-white);
}

.site-footer .widget-title {
  color: var(--ii-yellow);
}

/* ─── Language switcher (footer) ──────────────────────────── */
.ii-lang-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border-top: 1px solid #333;
  margin-top: 0.5rem;
}

.ii-lang {
  color: #888 !important;
  text-decoration: none !important;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 600;
  transition: color 0.12s ease, background 0.12s ease;
}

.ii-lang:hover {
  color: var(--ii-white) !important;
  background: #333;
  text-decoration: none !important;
}

.ii-lang--active {
  color: var(--ii-yellow) !important;
  background: #2a2a2a;
}

/* ─── Logo in header ─────────────────────────────────────── */
.ii-logo-link {
  display: inline-block;
  line-height: 1;
}

.ii-logo {
  display: block;
  height: 58px;
  width: auto;
}

/* ─── Homepage: hero ──────────────────────────────────────── */
.ii-hero {
  background: var(--ii-black);
  color: var(--ii-white);
  padding: 28px 2rem;
  text-align: center;
}

.ii-hero__eyebrow {
  display: inline-block;
  background: var(--ii-yellow);
  color: var(--ii-black);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 1.2rem;
}

.ii-hero__title {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--ii-white);
}

.ii-hero__title span {
  color: var(--ii-yellow);
}

.ii-hero__sub {
  font-size: 0.95rem;
  color: #CCC;
  margin: 0 auto 1.25rem;
  max-width: 520px;
}

.ii-hero__cta {
  display: inline-block;
  background: var(--ii-red) !important;
  color: var(--ii-white) !important;
  border: none !important;
  padding: 0.9rem 2.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  letter-spacing: 0.03em;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.ii-hero__cta:hover {
  background: var(--ii-red-dk) !important;
  color: var(--ii-white) !important;
  transform: translateY(-2px) !important;
}

/* ─── Homepage: USP strip ─────────────────────────────────── */
.ii-usps {
  background: var(--ii-yellow);
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.ii-usp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ii-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ii-usp svg {
  flex-shrink: 0;
}

/* ─── Homepage: categories ────────────────────────────────── */
.ii-categories {
  padding: 3.5rem 2rem;
  background: var(--ii-bg);
}

.ii-categories h2 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: var(--ii-black);
}

.ii-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ii-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ii-white);
  border: 2px solid var(--ii-border);
  border-radius: 8px;
  padding: 2rem 1rem;
  text-decoration: none;
  color: var(--ii-black);
  font-weight: 700;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ii-cat-card:hover {
  border-color: var(--ii-yellow);
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  transform: translateY(-3px);
  color: var(--ii-black);
  text-decoration: none;
}

.ii-cat-card__icon {
  width: 56px;
  height: 56px;
  background: var(--ii-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ii-cat-card__desc {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ii-muted);
  margin-top: 0.3rem;
}

/* ─── Homepage: featured products section ─────────────────── */
.ii-products {
  padding: 3.5rem 2rem;
  background: var(--ii-gray);
}

.ii-products h2 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: var(--ii-black);
}

.ii-products .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 768px) {
  .ii-hero {
    padding: 20px 1.25rem;
  }

  .ii-usps {
    gap: 1.25rem;
    padding: 0.75rem 1rem;
  }

  .ii-categories,
  .ii-products {
    padding: 2.5rem 1.25rem;
  }
}