/* IAN Computers and Appliances - shared design system.
   Loaded site-wide. Home page also carries its own copy of the tokens/
   header/footer rules inline (built before this file existed) - harmless
   duplication, not a conflict, since the rules are identical. */

:root{
  --paper:#F5F9FC;
  --paper-raised:#FFFFFF;
  --navy:#0A2E45;
  --navy-deep:#071F30;
  --ink:#0B2A40;
  --ink-soft:#4C6478;
  --ink-faint:#7E93A3;
  --line:rgba(11,42,64,0.12);
  --line-strong:rgba(11,42,64,0.2);
  --blue:#1485CC;
  --blue-deep:#0B5F97;
  --blue-soft:#E3F1FB;
  --orange:#EB512A;
  --orange-soft:#FDE6DF;
  --gold:#EE9C23;
  --gold-soft:#FCEBD1;
  --on-navy:#EAF3FA;
  --on-navy-soft:#9FC3DC;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#081C2B; --paper-raised:#0E2A3D; --navy:#050F18; --navy-deep:#03090F;
    --ink:#EAF3FA; --ink-soft:#AFC6D8; --ink-faint:#7191A8;
    --line:rgba(234,243,250,0.12); --line-strong:rgba(234,243,250,0.22);
    --blue:#4FB3F0; --blue-deep:#8FD0FF; --blue-soft:rgba(79,179,240,0.14);
    --orange:#FF7A50; --orange-soft:rgba(255,122,80,0.14);
    --gold:#FFB84D; --gold-soft:rgba(255,184,77,0.14);
    --on-navy:#EAF3FA; --on-navy-soft:#9FC3DC;
  }
}
:root[data-theme="dark"]{
  --paper:#081C2B; --paper-raised:#0E2A3D; --navy:#050F18; --navy-deep:#03090F;
  --ink:#EAF3FA; --ink-soft:#AFC6D8; --ink-faint:#7191A8;
  --line:rgba(234,243,250,0.12); --line-strong:rgba(234,243,250,0.22);
  --blue:#4FB3F0; --blue-deep:#8FD0FF; --blue-soft:rgba(79,179,240,0.14);
  --orange:#FF7A50; --orange-soft:rgba(255,122,80,0.14);
  --gold:#FFB84D; --gold-soft:rgba(255,184,77,0.14);
  --on-navy:#EAF3FA; --on-navy-soft:#9FC3DC;
}
:root[data-theme="light"]{
  --paper:#F5F9FC; --paper-raised:#FFFFFF; --navy:#0A2E45; --navy-deep:#071F30;
  --ink:#0B2A40; --ink-soft:#4C6478; --ink-faint:#7E93A3;
  --line:rgba(11,42,64,0.12); --line-strong:rgba(11,42,64,0.2);
  --blue:#1485CC; --blue-deep:#0B5F97; --blue-soft:#E3F1FB;
  --orange:#EB512A; --orange-soft:#FDE6DF;
  --gold:#EE9C23; --gold-soft:#FCEBD1;
  --on-navy:#EAF3FA; --on-navy-soft:#9FC3DC;
}

.shell{max-width:1180px;margin:0 auto;padding:0 28px;}
@media (max-width:640px){ .shell{padding:0 18px;} }

/* ---------------- header ---------------- */
/* header.site: Home page embeds its own <header> tag directly.
   .site-header: template-part-based pages get their <header> tag from the
   template's tagName wrapper, so the part itself is a plain div. Same look. */
header.site, .site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,46,69,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:42px;height:42px;flex:none;}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--on-navy);letter-spacing:-0.01em;line-height:1.15;}
nav.primary{display:flex;gap:26px;}
nav.primary a{font-size:0.9rem;font-weight:600;color:var(--on-navy-soft);white-space:nowrap;}
nav.primary a:hover{color:var(--on-navy);}
.header-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  color:var(--on-navy);cursor:pointer;
}
.nav-toggle:hover{background:rgba(255,255,255,0.14);}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  nav.primary{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--navy-deep);
    padding:8px 20px 16px;
    border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 16px 32px rgba(0,0,0,0.24);
  }
  nav.primary.is-open{display:flex;}
  nav.primary a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
  nav.primary a:last-child{border-bottom:none;}
}

.header-search{position:relative;}
.header-search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  color:var(--on-navy);cursor:pointer;
}
.header-search-toggle:hover{background:rgba(255,255,255,0.14);}
.header-search-form{
  display:none;align-items:stretch;gap:0;
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--paper-raised);border:1px solid var(--line-strong);
  padding:4px;z-index:60;box-shadow:0 12px 32px rgba(0,0,0,0.18);
}
.header-search-form.is-open{display:flex;}
.header-search-form input{border:none;padding:9px 12px;font-family:var(--sans);font-size:0.88rem;color:var(--ink);background:var(--paper-raised);width:200px;}
.header-search-form input:focus{outline:none;}
.header-search-form button{display:inline-flex;align-items:center;justify-content:center;border:none;background:var(--navy);color:#fff;padding:0 14px;cursor:pointer;}
.header-search-form button:hover{background:var(--navy-deep);}
@media (max-width:480px){
  .header-search-form{position:fixed;top:64px;left:12px;right:12px;}
  .header-search-form input{width:auto;flex:1;}
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  font-weight:700;font-size:0.88rem;
  border:none;white-space:nowrap;
  font-family:var(--sans);cursor:pointer;
  text-decoration:none;
}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:#D6431E;}
.btn-ghost-on-navy{background:rgba(255,255,255,0.08);color:var(--on-navy);border:1px solid rgba(255,255,255,0.18);}
.btn-ghost-on-navy:hover{background:rgba(255,255,255,0.14);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--line-strong);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}

/* ---------------- page header band (non-home pages) ---------------- */
.page-header{
  position:relative;
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:var(--on-navy);
  overflow:hidden;
  padding:36px 0 24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
/* Tighten the gap after the header band: WP's block spacing preset on <main>
   stacks on top of page-header's own padding, reading as dead space -
   especially in dark mode where the header and body backgrounds are too
   close in luminance to visually separate on their own (see border above). */
.page-header + main.wp-block-group{padding-top:var(--wp--preset--spacing--30) !important;}
.page-header .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.page-header .eyebrow .dot{width:6px;height:6px;background:var(--orange);border-radius:50%;}
.page-header h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  line-height:1.08;letter-spacing:-0.02em;
  margin:0;
}
.page-header p{
  font-size:1.02rem;color:var(--on-navy-soft);max-width:60ch;margin:12px 0 0;line-height:1.55;
}
.page-header .woocommerce-breadcrumb, .page-header .woocommerce-breadcrumb a{color:var(--on-navy-soft);}
.page-header .woocommerce-breadcrumb a:hover{color:#fff;}
.page-header h1.wp-block-query-title{margin-top:12px !important;}

/* ---------------- section scaffolding (shared) ---------------- */
.section-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.09em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:10px;display:block;
}
h2.section-title{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-0.02em;color:var(--ink);}
p.section-sub{color:var(--ink-soft);font-size:1.02rem;margin-top:12px;}

/* ---------------- product / category card grid ---------------- */
/* Specificity + !important: overriding WooCommerce's own inline product-template
   block CSS (.wc-block-product-template__responsive), which otherwise wins the
   cascade regardless of source order. */
.cat-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:16px !important;list-style:none;margin:0;padding:0;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important;} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr !important;} }
.cat-grid > li{margin:0 !important;width:auto !important;list-style:none;}
.cat-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.cat-card:hover{background:var(--blue-soft);border-color:var(--line-strong);}
.cat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-soft);flex:none;}
.cat-media img{width:100%;height:100%;object-fit:cover;display:block;}
.cat-media.pending{display:flex;align-items:center;justify-content:center;background:var(--paper);border-bottom:1px solid var(--line);}
.cat-media.pending .cat-icon{width:30px;height:30px;color:var(--ink-faint);}
.cat-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.cat-name{font-weight:700;font-size:0.98rem;color:var(--ink);line-height:1.3;}
.cat-desc{font-size:0.82rem;color:var(--ink-faint);line-height:1.4;}
.cat-price{font-family:var(--mono);font-weight:700;font-size:0.95rem;color:var(--blue-deep);margin-top:auto;padding-top:4px;}
.cat-link{font-size:0.82rem;font-weight:700;color:var(--blue-deep);display:flex;align-items:center;gap:5px;}
.cat-card:hover .cat-link{gap:8px;}
.cat-link svg{width:13px;height:13px;transition:transform 0.15s;}

/* ---------------- product card: WooCommerce block overrides ----------------
   The card grid re-uses .cat-card/.cat-media/.cat-body/.cat-name/.cat-price
   from the category grid, applied as className on WooCommerce's dynamic
   product-image/post-title/product-price/product-button blocks. These rules
   strip WooCommerce's own button/price chrome so the blocks read like the
   rest of the card system instead of default WooCommerce styling. */
.cat-name a{color:inherit;text-decoration:none;}
.cat-name a:hover{color:var(--blue-deep);}
.cat-price .wc-block-components-product-price{margin:0;}
.cat-link{margin-top:auto;padding-top:6px;}
.cat-link .wp-block-button__link{
  background:none;color:var(--blue-deep);padding:0;
  font-family:var(--sans);font-weight:700;font-size:0.82rem;
  display:inline-flex;align-items:center;gap:5px;
}
.cat-link .wp-block-button__link::after{content:"\2192";transition:margin-left 0.15s;}
.cat-link .wp-block-button__link:hover::after{margin-left:4px;}
.cat-link .wp-block-button__link:hover{background:none;color:var(--blue-deep);}

/* ---------------- product search / sort bar ---------------- */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--line);margin-bottom:28px;}
@media (max-width:480px){
  .shop-toolbar .is-nowrap{flex-wrap:wrap;row-gap:12px;}
  .shop-toolbar .is-nowrap .shop-search{flex:1 1 100%;}
  .shop-toolbar .is-nowrap .shop-search input{width:auto;flex:1;}
  .shop-toolbar .is-nowrap .woocommerce-ordering{flex:1 1 100%;}
}
.shop-count{font-family:var(--mono);font-size:0.82rem;color:var(--ink-faint);}
.shop-search{display:flex;gap:0;border:1px solid var(--line-strong);}
.shop-search input{border:none;padding:9px 12px;font-family:var(--sans);font-size:0.88rem;color:var(--ink);background:var(--paper-raised);width:220px;}
.shop-search input:focus{outline:none;background:var(--blue-soft);}
.shop-search button{border:none;background:var(--navy);color:#fff;padding:9px 14px;cursor:pointer;}
.shop-search button:hover{background:var(--navy-deep);}
.woocommerce-breadcrumb{font-family:var(--mono);font-size:0.78rem;color:var(--ink-faint);margin-bottom:18px;}
.woocommerce-breadcrumb a{color:var(--ink-faint);text-decoration:underline;}

/* ---------------- sort dropdown ---------------- */
.woocommerce-ordering select.orderby{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1px solid var(--line-strong);background-color:var(--paper-raised);
  color:var(--ink);font-family:var(--sans);font-size:0.85rem;font-weight:600;
  padding:9px 34px 9px 14px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237E93A3' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
}
.woocommerce-ordering select.orderby:hover{border-color:var(--blue);}
.woocommerce-ordering select.orderby:focus{outline:none;border-color:var(--blue);}

/* ---------------- pagination ---------------- */
.wp-block-query-pagination{gap:6px !important;margin-top:36px !important;padding-top:28px;border-top:1px solid var(--line);}
.wp-block-query-pagination-numbers{display:flex;gap:4px;}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  font-family:var(--mono);font-size:0.85rem;font-weight:700;color:var(--ink-soft);
  border:1px solid transparent;
}
a.page-numbers:hover{border-color:var(--line-strong);color:var(--blue-deep);}
.page-numbers.current{background:var(--navy);color:#fff;}
.wp-block-query-pagination-next, .wp-block-query-pagination-previous{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:0.85rem;font-weight:700;color:var(--blue-deep);
  padding:0 6px;
}
.wp-block-query-pagination-next:hover, .wp-block-query-pagination-previous:hover{color:var(--blue);}
.wp-block-query-pagination-previous::before{content:"\2190";}
.wp-block-query-pagination-next::after{content:"\2192";}

/* ---------------- single product ---------------- */
.product-detail{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;padding:44px 0 64px;}
@media (max-width:860px){ .product-detail{grid-template-columns:1fr;} }
.product-detail .woocommerce-product-gallery{border:1px solid var(--line);background:var(--paper-raised);}
.product-detail .woocommerce-product-gallery img{width:100%;height:auto;display:block;}
.product-summary .product_title{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-0.02em;color:var(--ink);margin:0 0 12px;}
.product-summary .price{font-family:var(--mono);font-weight:700;font-size:1.4rem;color:var(--blue-deep);display:block;margin-bottom:20px;}
.product-summary .price ins{text-decoration:none;}
.product-summary .price del{opacity:0.5;font-size:0.8em;margin-right:8px;}
.product-summary .woocommerce-product-details__short-description{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin-bottom:24px;}
.product-summary .posted_in{display:block;font-size:0.85rem;color:var(--ink-faint);margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.product-summary .posted_in a{color:var(--blue-deep);text-decoration:underline;}
.product-cta-row{margin-top:8px;}
.woocommerce-tabs{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.woocommerce-tabs ul.tabs{display:flex;gap:20px;list-style:none;padding:0;margin:0 0 16px;font-family:var(--mono);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em;}
.woocommerce-tabs ul.tabs a{color:var(--ink-faint);}
.woocommerce-tabs ul.tabs li.active a{color:var(--blue-deep);}
.woocommerce-Tabs-panel{color:var(--ink-soft);font-size:0.96rem;line-height:1.7;}

/* ---------------- footer ---------------- */
footer.site, .site-footer{background:var(--navy-deep);color:var(--on-navy-soft);padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand img{width:32px;height:32px;}
.footer-brand span{font-family:var(--display);font-weight:800;color:#fff;font-size:0.95rem;}
.footer-desc{font-size:0.86rem;line-height:1.6;max-width:32ch;}
.footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-navy-soft);margin-bottom:14px;font-weight:600;}
.footer-col a, .footer-col p{display:block;font-size:0.88rem;color:var(--on-navy-soft);margin-bottom:10px;line-height:1.5;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem;font-family:var(--mono);color:var(--on-navy-soft);}

/* ---------------- base ---------------- */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);}
a{text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }