/*
 Theme Name:   ATG — Against The Grain
 Theme URI:    https://goatg.net
 Description:  Cyber Y2K x Windows-XP-vocabulary streetwear child theme for Storefront. Built for the ATG (Against The Grain) school project.
 Author:       ATG
 Template:     storefront
 Version:      1.6.1
 Text Domain:  atg-child
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  --white:#F4F7FA;
  --ice:#EAF1F7;
  --frost:#F0F5FA;
  --navy:#0A1628;
  --cyber:#0088CC;
  --ice-cy:#00B8E6;
  --bright:#00D4FF;
  --mid:#1A3A5C;
  --steel:#5A8AA0;
  --chrome:#8BAFC4;
  --border:#D0DFEC;
  --beige:#ECE9D8;
  --beige-d:#C8C2A8;
  --shadow: 0 2px 0 #1A3A5C, 0 6px 24px rgba(10,22,40,.18);

  --display: 'Archivo Black','Archivo','Helvetica Neue',sans-serif;
  --condense: 'Archivo',sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

/* =========================================================
   2. RESET + BASE — override Storefront aggressively
   ========================================================= */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
}
body.atg{
  background:
    radial-gradient(1200px 700px at 80% -10%, #D8ECFA 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #DDF1FB 0%, transparent 55%),
    linear-gradient(180deg,#F4F7FA 0%, #E8F1F8 100%);
  min-height:100vh;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M2 2 L2 16 L6 12 L9 18 L12 17 L9 11 L15 11 Z' fill='%230A1628' stroke='%23fff' stroke-width='1.2'/></svg>") 1 1, default;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--cyber)}
button{font-family:inherit;border:0;background:none;cursor:inherit;color:inherit}
img{max-width:100%;height:auto}

/* Storefront scrubbing — kill the default chrome we don't want */
body.atg .site-header{display:none !important}
body.atg .storefront-handheld-footer-bar{display:none !important}
body.atg .site-footer{background:transparent;color:var(--navy);padding:0}
body.atg #colophon{display:none}
body.atg .secondary-navigation,
body.atg .site-branding,
body.atg .main-navigation{display:none}
body.atg .content-area{width:100% !important;float:none !important}
body.atg .widget-area{display:none !important}
body.atg #content.site-content{padding:0 !important;margin:0 !important}
body.atg .site{margin:0 !important;max-width:none !important;background:transparent !important}
body.atg .col-full{max-width:1320px;padding:0}

/* =========================================================
   3. DESKTOP SHELL — page wrapper
   ========================================================= */
.atg-desktop{
  position:relative;
  padding:18px 22px 24px;
  min-height:100vh;
  max-width:1380px;
  margin:0 auto;
  overflow:hidden;
}
.atg-desktop::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background: repeating-linear-gradient(0deg, rgba(10,22,40,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.atg-desktop > *{position:relative;z-index:1}

/* =========================================================
   4. MENUBAR (XP-style top nav)
   ========================================================= */
.menubar{
  display:flex;align-items:center;gap:14px;
  padding:6px 10px;
  background:linear-gradient(180deg,#FBFCFE 0%,#E2EBF3 100%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #b9cad9, 0 1px 0 rgba(10,22,40,.04);
  border-radius:2px;
  font-family:var(--mono);font-size:12px;
  position:relative;z-index:3;
}
.menubar .brand{display:flex;align-items:center;gap:8px;padding-right:10px;border-right:1px solid var(--border)}
.menubar .brand img{width:22px;height:22px;display:block;image-rendering:pixelated}
.menubar .brand b{font-family:var(--display);letter-spacing:.06em;font-size:14px}
.menubar .links{display:flex;gap:2px}
.menubar .links a{
  padding:4px 10px;border-radius:2px;color:var(--navy);
  text-transform:lowercase;letter-spacing:.02em;
  font-family:var(--mono);font-size:12px;
}
.menubar .links a.current,
.menubar .links a[aria-current]{
  background:linear-gradient(180deg,#0088CC,#005C8C);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2);
}
.menubar .links a:hover:not(.current){background:#DCE7F0;color:var(--navy)}
.menubar .spacer{flex:1}
.menubar .clock{font-family:var(--mono);font-size:11px;color:var(--steel);padding:0 8px;border-left:1px solid var(--border);height:22px;display:flex;align-items:center}
.menubar .cart-btn{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px;border:1px solid #9BB2C3;
  background:linear-gradient(180deg,#FBFCFE 0%,#DDE7EE 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #B7C7D6;
  border-radius:2px;font-family:var(--mono);font-size:11px;
  color:var(--navy);
}
.menubar .cart-btn .badge{
  background:var(--cyber);color:#fff;padding:1px 6px;font-size:10px;border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

/* =========================================================
   5. WINDOW CHROME — the signature element
   ========================================================= */
.win{
  background:var(--white);
  border:1px solid #6F95B0;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 0 2px #C9D9E5,
    0 1px 0 rgba(255,255,255,.6),
    0 18px 50px -22px rgba(10,22,40,.45),
    0 6px 12px -8px rgba(10,22,40,.25);
  border-radius:4px;overflow:hidden;position:relative;
  margin-bottom:14px;
}
.win-bar{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px 6px 10px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.15) 100%),
    linear-gradient(90deg,#00A0DD 0%,#0088CC 55%,#00679E 100%);
  color:#fff;
  border-bottom:1px solid #00567E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25);
  font-family:var(--mono);font-size:12px;
  position:relative;overflow:hidden;
}
.win-bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px);
  opacity:.55;
}
.win-bar .ico{
  width:14px;height:14px;display:inline-block;flex:0 0 14px;
  background:#fff;border-radius:2px;
  box-shadow:inset 0 0 0 1px #00567E;
  position:relative;overflow:hidden;
}
.win-bar .ico::before{
  content:"";position:absolute;inset:2px;border-radius:1px;
  background-image:linear-gradient(135deg,#00D4FF 0%,#0088CC 60%,#00567E 100%);
}
.win-bar .title{
  font-weight:700;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.25);
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative;z-index:2;
}
/* let grid/flex windows shrink below their (nowrap) content so long window
   titles ellipsis-clip instead of forcing horizontal page overflow */
.win,.stack,.detail-grid>*,.stack>*{min-width:0}
.win-bar .controls{display:flex;gap:4px;position:relative;z-index:2}
.win-bar .controls span{
  width:20px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,#FBFCFE 0%,#C9D9E5 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #97AEBE,0 0 0 1px #00567E;
  color:var(--navy);font-family:var(--mono);font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.win-bar .controls span.x{
  background:linear-gradient(180deg,#FF8E76 0%,#E04A2A 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px #8A2208;
}
.win-body{padding:18px;position:relative}
.win-status{
  display:flex;gap:14px;align-items:center;
  padding:5px 10px;font-family:var(--mono);font-size:11px;color:var(--steel);
  background:linear-gradient(180deg,#F4F7FA,#E1EAF2);
  border-top:1px solid #B7C7D6;
  box-shadow:inset 0 1px 0 #fff;
}
.win-status .seg{
  display:inline-flex;align-items:center;gap:6px;
  padding:1px 8px;border:1px solid var(--border);background:#fff;border-radius:2px;
}
.win-status .seg .dot{
  width:6px;height:6px;border-radius:50%;
  background:#3ABE6A;box-shadow:0 0 6px #3ABE6A;
}

/* =========================================================
   6. TYPOGRAPHY HELPERS
   ========================================================= */
.atg .display{font-family:var(--display);letter-spacing:-.01em;line-height:.92}
.atg .mono{font-family:var(--mono)}
.atg .uc{text-transform:uppercase;letter-spacing:.08em}
.atg .muted{color:var(--steel)}
.atg .tiny{font-size:11px}
.atg h1,.atg h2,.atg h3{font-family:var(--display);letter-spacing:-.01em;line-height:.95;margin:0}
.atg p{margin:0 0 12px}

/* =========================================================
   7. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  font-family:var(--mono);font-size:12px;font-weight:700;
  background:linear-gradient(180deg,#FBFCFE 0%,#DCE7EF 100%);
  border:1px solid #6F95B0;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #B7C7D6,0 1px 0 rgba(10,22,40,.06);
  border-radius:2px;color:var(--navy);
  text-transform:lowercase;
  transition:transform .06s ease;
  cursor:inherit;
}
.btn:hover{filter:brightness(1.02);color:var(--navy)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.18),inset 0 -1px 0 #B7C7D6}
.btn.primary{
  background:linear-gradient(180deg,#1AB3F2 0%,#0088CC 55%,#006AA3 100%);
  color:#fff;border-color:#00567E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 0 rgba(10,22,40,.1);
  position:relative;
}
.btn.primary:hover{
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.2),0 0 0 3px rgba(0,212,255,.35),0 1px 0 rgba(10,22,40,.1);
}
.btn.primary::after{
  content:"";position:absolute;inset:-2px;border-radius:3px;pointer-events:none;opacity:0;
  box-shadow:0 0 18px 2px rgba(0,212,255,.55);
  transition:opacity .2s ease;
}
.btn.primary:hover::after{opacity:1}
.btn.ghost{background:transparent;border:1px dashed #6F95B0;box-shadow:none;color:var(--navy)}

/* =========================================================
   8. CHIPS / TAGS
   ========================================================= */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;font-family:var(--mono);font-size:10px;
  background:#fff;border:1px solid var(--border);
  color:var(--mid);text-transform:uppercase;letter-spacing:.08em;border-radius:2px;
}
.chip.dark{background:var(--navy);color:#9FD7F1;border-color:#000}
.chip.cyan{background:linear-gradient(180deg,#E5F7FF,#C8ECFA);color:#005C8C;border-color:#A6D5EC}

/* =========================================================
   9. PIXEL BORDER (8-bit dashed)
   ========================================================= */
.px-border{
  background-image:
    linear-gradient(90deg,var(--navy) 50%,transparent 50%),
    linear-gradient(90deg,var(--navy) 50%,transparent 50%),
    linear-gradient(0deg,var(--navy) 50%,transparent 50%),
    linear-gradient(0deg,var(--navy) 50%,transparent 50%);
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  background-size:6px 1px,6px 1px,1px 6px,1px 6px;
  background-position:0 0,0 100%,0 0,100% 0;
}

/* =========================================================
   10. PLACEHOLDER PRODUCT ART (ph)
   ========================================================= */
.ph{
  position:relative;overflow:hidden;
  background:repeating-linear-gradient(45deg,#DCE9F2 0 8px,#EFF5FA 8px 16px);
  border:1px solid var(--border);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
}
.ph .label{
  font-family:var(--mono);font-size:11px;color:var(--steel);
  background:#fff;padding:2px 6px;border:1px solid var(--border);border-radius:2px;
}
.ph .mark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);color:rgba(10,22,40,.10);font-size:34vmin;line-height:1;
  pointer-events:none;user-select:none;
}

/* =========================================================
   11. SIZE SELECTOR
   ========================================================= */
.size-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.size{
  padding:10px 0;text-align:center;font-family:var(--mono);font-size:12px;font-weight:700;
  background:linear-gradient(180deg,#FBFCFE,#DDE7EE);
  border:1px solid #9BB2C3;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #B7C7D6;
  border-radius:2px;cursor:inherit;color:var(--navy);
}
.size.on{
  background:linear-gradient(180deg,#1AB3F2,#0088CC);color:#fff;border-color:#00567E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 2px rgba(0,212,255,.3);
}
.size.off{opacity:.45;text-decoration:line-through;cursor:not-allowed}

/* =========================================================
   12. DIALOG / MODAL
   ========================================================= */
.scrim{
  position:fixed;inset:0;background:rgba(10,22,40,.35);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:50;
  animation:atg-fade .15s ease;
}
@keyframes atg-fade{from{opacity:0}to{opacity:1}}
.dialog{
  width:min(440px,92vw);
  background:var(--beige);
  border:1px solid #6F6A55;
  box-shadow:inset 0 0 0 1px #fff,0 30px 80px -20px rgba(10,22,40,.45);
  border-radius:4px;overflow:hidden;
  animation:atg-pop .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes atg-pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.dialog .win-bar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.15) 100%),
    linear-gradient(90deg,#00A0DD 0%,#0088CC 55%,#00679E 100%);
}
.dialog-body{padding:18px;font-family:var(--mono);font-size:13px;color:var(--navy);display:flex;gap:14px;align-items:flex-start}
.dialog-body .ic{
  flex:0 0 44px;height:44px;border-radius:2px;
  background:linear-gradient(180deg,#1AB3F2,#0088CC);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.2);
}
.dialog-actions{
  display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;
  background:var(--beige);border-top:1px solid #C8C2A8;
}

/* =========================================================
   13. TICKER
   ========================================================= */
.ticker{
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0A1628,#142941);
  color:#9FD7F1;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  padding:7px 0;
  margin:10px 0 18px;
}
.ticker .track{display:inline-block;animation:atg-slide 38s linear infinite;padding-left:100%}
.ticker .track span{padding:0 28px;color:#9FD7F1}
.ticker .track b{color:#00D4FF}
@keyframes atg-slide{to{transform:translateX(-100%)}}

/* =========================================================
   14. LAYOUT HELPERS
   ========================================================= */
.atg .grid{display:grid;gap:14px}
.atg .stack{display:flex;flex-direction:column;gap:10px}
.atg .row{display:flex;gap:10px;align-items:center}

.hero-inner{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:36px;align-items:center;padding:14px 6px;
}
@media (max-width:880px){.hero-inner{grid-template-columns:1fr;gap:24px}}

.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.products{grid-template-columns:1fr}}

.detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
@media (max-width:880px){.detail-grid{grid-template-columns:1fr}}

.manifesto-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:30px;align-items:center;
}
@media (max-width:760px){.manifesto-grid{grid-template-columns:1fr;gap:18px}}

.divider-line{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:14px 0}

/* =========================================================
   15. PRODUCT CARD (Woo + custom)
   ========================================================= */
.atg .products .product,
.atg ul.products li.product{
  list-style:none;float:none;width:auto;margin:0;padding:0;text-align:left;
}
.atg .product-window{
  background:var(--white);
  border:1px solid #6F95B0;
  box-shadow:
    inset 0 0 0 1px #ffffff,inset 0 0 0 2px #C9D9E5,
    0 1px 0 rgba(255,255,255,.6),0 18px 50px -22px rgba(10,22,40,.45),0 6px 12px -8px rgba(10,22,40,.25);
  border-radius:4px;overflow:hidden;position:relative;
  transition:transform .18s ease, box-shadow .25s ease;
}
.atg .product-window:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px #ffffff,inset 0 0 0 2px #C9D9E5,
    0 1px 0 rgba(255,255,255,.6),0 24px 60px -22px rgba(10,22,40,.55),
    0 0 0 1px rgba(0,184,230,.35),0 0 30px -6px rgba(0,212,255,.45);
}
.atg .product-window .win-body{padding:12}
.atg .product-window .product-image{aspect-ratio:3/4;position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center}
.atg .product-window .product-image:empty,
.atg .product-window .product-image:not(:has(img)){background:repeating-linear-gradient(45deg,#DCE9F2 0 8px,#EFF5FA 8px 16px)}
.atg .product-window .product-image img{width:100%;height:100%;object-fit:contain}
.atg .product-window .product-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;gap:8px;padding:0 12px 12px}
.atg .product-window .product-meta .name{font-family:var(--display);text-transform:uppercase;letter-spacing:-.005em;font-size:18px;line-height:1.1;color:var(--navy)}
.atg .product-window .product-meta .cat{font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:2px}
.atg .product-window .product-meta .price{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap}
.atg .product-window .product-meta .price del{color:var(--chrome);font-weight:400;margin-right:4px}
.atg .product-window .product-meta .price ins{text-decoration:none;color:var(--cyber)}

/* Storefront's add-to-cart button on cards → hide; we use card-as-link */
.atg ul.products li.product .button{display:none}
.atg ul.products li.product .added_to_cart{display:none}

/* =========================================================
   16. NOTEPAD (about + long descriptions)
   ========================================================= */
.notepad .win-body{
  background:
    repeating-linear-gradient(180deg,transparent 0 27px,#DCE7EE 27px 28px),
    #FBFDFF;
  padding-left:48px;position:relative;
  font-family:var(--mono);font-size:13px;line-height:28px;color:var(--navy);
}
.notepad .win-body::before{
  content:"";position:absolute;left:30px;top:0;bottom:0;width:1px;background:#E4938A;
}

/* =========================================================
   17. FORM FIELDS
   ========================================================= */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.field label,
.atg label{font-family:var(--mono);font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em}
.field input,.field textarea,.field select,
.atg input[type=text],.atg input[type=email],.atg input[type=tel],
.atg input[type=number],.atg input[type=password],.atg input[type=search],
.atg textarea,.atg select{
  font-family:var(--mono);font-size:13px;color:var(--navy);
  background:#fff;border:1px solid #9BB2C3;
  box-shadow:inset 1px 1px 0 #C9D9E5,inset -1px -1px 0 #fff;
  padding:8px 10px;border-radius:2px;outline:none;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus,
.atg input:focus,.atg textarea:focus,.atg select:focus{
  border-color:var(--cyber);
  box-shadow:inset 1px 1px 0 #C9D9E5,inset -1px -1px 0 #fff,0 0 0 2px rgba(0,212,255,.3);
}

/* =========================================================
   18. FOOTER SIGNATURE
   ========================================================= */
.atg-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px 6px;margin-top:40px;
  border-top:1px solid var(--border);
  font-family:var(--mono);font-size:11px;color:var(--steel);
}
.atg-foot a{color:var(--navy)}
.atg-foot a:hover{color:var(--cyber)}

/* =========================================================
   19. EFFECTS LAYER (titlebar shimmer, hover, glitch, sparks)
   ========================================================= */
.win-bar::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 65%);
  transform:translateX(-130%);
  animation:atg-sweep 7s ease-in-out infinite;
  animation-delay:var(--sweep-d,0s);
  mix-blend-mode:screen;
}
@keyframes atg-sweep{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}
.products .win:nth-child(2) .win-bar::before,
.products .product:nth-child(2) .product-window .win-bar::before{--sweep-d:1.7s}
.products .win:nth-child(3) .win-bar::before,
.products .product:nth-child(3) .product-window .win-bar::before{--sweep-d:3.4s}

.win{transition:transform .18s ease,box-shadow .25s ease}
.win:has(>.win-bar):hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px #ffffff,inset 0 0 0 2px #C9D9E5,
    0 1px 0 rgba(255,255,255,.6),0 24px 60px -22px rgba(10,22,40,.55),
    0 0 0 1px rgba(0,184,230,.35),0 0 30px -6px rgba(0,212,255,.45);
}
.atg .display{transition:text-shadow .18s ease,letter-spacing .18s ease}
.atg .display:hover{
  text-shadow:-1.5px 0 0 rgba(255,60,90,.55),1.5px 0 0 rgba(0,212,255,.55);
  animation:atg-glitch .35s steps(2) 1;
}
@keyframes atg-glitch{
  0%{transform:translate(0,0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}
  60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}100%{transform:translate(0,0)}
}

/* =========================================================
   20. BOOT SPLASH
   ========================================================= */
.boot{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(900px 600px at 50% 50%,#F4F7FA 0%,#E0EBF4 60%,#C7D8E5 100%);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .55s ease;
}
.boot.gone{opacity:0;pointer-events:none}
.boot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(10,22,40,.04) 0 1px,transparent 1px 3px);
}
.boot .splash{
  text-align:center;font-family:var(--mono);color:var(--navy);
  padding:24px 32px;border:1px solid var(--border);
  background:linear-gradient(180deg,#FBFDFF,#E5EEF5);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #B7C7D6,0 18px 50px -20px rgba(10,22,40,.35);
  min-width:340px;position:relative;
}
.boot .sigil{font-family:var(--display);font-size:46px;letter-spacing:.04em;color:var(--navy);line-height:1;margin-bottom:14px}
.boot .sigil span{color:var(--cyber)}
.boot .lines{font-size:11px;letter-spacing:.06em;line-height:1.85;text-align:left;color:var(--mid);min-height:96px}
.boot .lines b{color:var(--cyber);font-weight:700}
.boot .lines i{color:#3ABE6A;font-style:normal}
.boot .bar{margin-top:12px;height:6px;background:#fff;border:1px solid var(--border);position:relative;overflow:hidden}
.boot .bar > i{
  position:absolute;top:0;left:0;bottom:0;width:0%;
  background:repeating-linear-gradient(90deg,var(--cyber) 0 6px,var(--ice-cy) 6px 12px);
  animation:atg-boot 1.4s steps(40) forwards;
}
@keyframes atg-boot{to{width:100%}}
.boot .caret{display:inline-block;width:8px;height:13px;background:var(--cyber);vertical-align:-2px;margin-left:4px;animation:atg-blink 1s steps(2) infinite}
@keyframes atg-blink{50%{opacity:0}}

/* =========================================================
   21. FX LAYER (cursor trail + sparks)
   ========================================================= */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9998}
.fx-dot{
  position:absolute;width:6px;height:6px;background:#00D4FF;
  box-shadow:0 0 8px rgba(0,212,255,.6);
  transform:translate(-50%,-50%);
  animation:atg-dot .6s linear forwards;image-rendering:pixelated;
}
@keyframes atg-dot{0%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
.fx-spark{
  position:absolute;width:4px;height:4px;background:#0088CC;
  transform:translate(-50%,-50%);animation:atg-spark .42s ease-out forwards;
}
@keyframes atg-spark{0%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4)}}

/* =========================================================
   22. WOOCOMMERCE SHIM — make existing Woo screens fit
   ========================================================= */
.atg .woocommerce-breadcrumb{
  font-family:var(--mono);font-size:11px;color:var(--steel);
  text-transform:lowercase;margin:0 0 14px;
}
.atg .woocommerce-breadcrumb a{color:var(--steel)}
.atg .woocommerce-breadcrumb a:hover{color:var(--cyber)}

.atg .woocommerce-result-count{font-family:var(--mono);font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em}
.atg .woocommerce-ordering select{padding:6px 10px;font-family:var(--mono);font-size:12px}

.atg .quantity input.qty{
  width:60px;text-align:center;
  font-family:var(--mono);font-size:13px;
  border:1px solid #9BB2C3;
  box-shadow:inset 1px 1px 0 #C9D9E5;
  padding:8px 6px;
}

.atg .button,
.atg input[type=submit],
.atg button[type=submit]{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  font-family:var(--mono);font-size:12px;font-weight:700;
  background:linear-gradient(180deg,#1AB3F2 0%,#0088CC 55%,#006AA3 100%);
  color:#fff;border:1px solid #00567E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 0 rgba(10,22,40,.1);
  border-radius:2px;text-transform:lowercase;
}
.atg .button:hover,
.atg input[type=submit]:hover,
.atg button[type=submit]:hover{filter:brightness(1.05);color:#fff}

.atg .woocommerce-message,
.atg .woocommerce-info,
.atg .woocommerce-error{
  background:var(--beige);border:1px solid #6F6A55;
  font-family:var(--mono);font-size:12px;color:var(--navy);
  padding:10px 14px;border-radius:2px;
  box-shadow:inset 0 0 0 1px #fff;
}
.atg .woocommerce-message::before,
.atg .woocommerce-info::before,
.atg .woocommerce-error::before{color:var(--cyber)}

.atg table.shop_table{
  border:1px solid var(--border);background:#fff;
  font-family:var(--mono);font-size:12px;
}
.atg table.shop_table th{
  background:linear-gradient(180deg,#F4F7FA,#E1EAF2);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;color:var(--steel);
}

/* =========================================================
   23. RESPECT REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .win-bar::before,.atg .display:hover,.boot .bar > i,.fx-dot,.fx-spark,.ticker .track{animation:none !important}
  .win:hover,.product-window:hover{transform:none}
}

/* =========================================================
   24. RESPONSIVE — tablet + phone + tiny phone
   ========================================================= */

/* tablet */
@media (max-width: 880px){
  .atg-desktop{padding:14px 16px 18px}
  .win-body{padding:16px}
  .ticker{font-size:10.5px;letter-spacing:.14em;margin:8px 0 14px}
}

/* phone */
@media (max-width: 720px){
  .atg-desktop{padding:10px 12px 14px;max-width:100%}

  /* menubar: brand + cart on row 1; nav scrolls horizontally on row 2 */
  .menubar{flex-wrap:wrap;gap:6px;padding:6px 8px;min-width:0}
  .menubar .brand{padding-right:8px;border-right:none;flex-shrink:0;min-width:0}
  .menubar .brand img{width:20px;height:20px}
  .menubar .brand b{font-size:13px}
  .menubar .links{
    order:99;width:100%;flex-basis:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--border);
    padding-top:6px;margin-top:2px;
    scrollbar-width:none;
  }
  .menubar .links::-webkit-scrollbar{display:none}
  .menubar .links a{font-size:12px;padding:6px 10px;flex-shrink:0;white-space:nowrap}
  .menubar .spacer{display:none}
  .menubar .cart-btn{margin-left:auto;padding:5px 10px;font-size:11px;touch-action:manipulation;flex-shrink:0;white-space:nowrap}
  .menubar .clock{padding:0 6px;font-size:10px;border-left:1px solid var(--border);flex-shrink:0;white-space:nowrap}

  /* ticker */
  .ticker{font-size:10px;letter-spacing:.1em}
  .ticker .track{animation-duration:48s}

  /* hero: already stacks at 880, just tighten */
  .hero-inner{padding:6px 0;gap:18px}

  /* inline 2-col grids → 1-col */
  .cat-browse-grid{grid-template-columns:1fr !important}
  .split-grid{grid-template-columns:1fr !important}
  .form-row-2{grid-template-columns:1fr !important}

  /* product detail */
  .detail-grid{gap:12px}

  /* products grid responsive on mobile (must beat Storefront specificity) */
  body.atg ul.products,
  body.atg .products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}

  /* manifesto */
  .manifesto-grid{gap:14px}

  /* footer */
  .atg-foot{flex-direction:column;gap:10px;align-items:flex-start;padding:16px 4px 6px;margin-top:28px}

  /* shop / category tabs scroll horizontally */
  .atg-shop .row[style*="border-bottom"]{
    overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .atg-shop .row[style*="border-bottom"]::-webkit-scrollbar{display:none}
  .atg-shop .row[style*="border-bottom"] a{flex-shrink:0}

  /* bigger tap targets */
  .btn{padding:11px 16px;font-size:12px;touch-action:manipulation}
  .size{padding:14px 0;touch-action:manipulation}
  .size-grid{gap:8px}

  /* notepad — softer left margin */
  .notepad .win-body{padding-left:36px;font-size:12.5px;line-height:26px}
  .notepad .win-body::before{left:22px}

  /* form fields: 16px to prevent iOS zoom-on-tap */
  .field input,.field textarea,.field select,
  .atg input[type=text],.atg input[type=email],.atg input[type=tel],
  .atg input[type=number],.atg input[type=password],.atg input[type=search],
  .atg textarea,.atg select{font-size:16px;padding:10px 12px}

  /* table specs: smaller font, allow horizontal scroll if needed */
  .atg table.shop_table,.atg .win-body table{font-size:11px}

  /* dialog */
  .dialog{width:min(92vw,420px)}
  .dialog-body{padding:14px;font-size:12px;flex-wrap:wrap}
  .dialog-body .ic{flex:0 0 36px;height:36px;font-size:18px}

  /* boot splash on small screens */
  .boot .splash{min-width:auto;width:min(340px, calc(100vw - 32px));padding:18px 22px}
  .boot .sigil{font-size:38px}

  /* About page numbers grid: 2 → 2 (keep) but make cells smaller */
  .atg-about .px-border .display{font-size:34px !important}

  /* Headline tightening — affects hero h1 inline clamp(48px,...) via min */
  /* (hero h1 already responsive via clamp's vw scaling) */
}

/* small phone */
@media (max-width: 480px){
  .atg-desktop{padding:8px 10px 12px}
  .win-body{padding:14px}
  .menubar .clock{display:none}                /* save horizontal space */
  .menubar .brand b{font-size:12px}
  .menubar .cart-btn .badge{padding:1px 5px;font-size:9px}

  /* products: full width single column at 640 — handled in section 14 already */

  /* product detail status bar wraps cleanly */
  .win-status{flex-wrap:wrap;gap:6px;padding:5px 8px;font-size:10px}
  .win-status .seg{padding:1px 6px;font-size:10px}

  /* manifesto headline smaller */
  .manifesto-grid > div:first-child{font-size:clamp(22px,7vw,32px) !important}

  /* product grid → single column on small phone */
  body.atg ul.products,
  body.atg .products{grid-template-columns:1fr !important}

  /* about numbers — 2 col stays, but smaller cells */
  .atg-about .px-border{padding:10px}
  .atg-about .px-border .display{font-size:30px !important}
}

/* tiny phone (<= 380px) */
@media (max-width: 380px){
  .menubar .brand b{display:none}                /* keep just the logo */
  .menubar .links a{font-size:11px;padding:5px 9px}
  .atg-shop .display{font-size:clamp(28px,9vw,40px) !important}
}

/* =========================================================
   25. TOUCH DEVICES — disable mouse-only chrome
   ========================================================= */
@media (hover: none), (pointer: coarse){
  /* remove custom XP cursor — defer to OS */
  body.atg{cursor:auto}

  /* kill hover transforms (they fire on tap and feel laggy on touch) */
  .win:has(>.win-bar):hover,
  .product-window:hover,
  .atg .product-window:hover{transform:none;box-shadow:
    inset 0 0 0 1px #ffffff,inset 0 0 0 2px #C9D9E5,
    0 1px 0 rgba(255,255,255,.6),0 18px 50px -22px rgba(10,22,40,.45),0 6px 12px -8px rgba(10,22,40,.25)}

  /* kill glitch on touch — looks broken when triggered by tap */
  .atg .display:hover{text-shadow:none;animation:none}

  /* kill primary button glow halo */
  .btn.primary:hover::after{opacity:0}
  .btn:hover{filter:none}

  /* titlebar shimmer keeps running — it's an ambient effect, not interactive */

  /* hide the fx-layer entirely on touch (JS also skips creating dots/sparks) */
  .fx-layer{display:none}
}

/* =========================================================
   26. SAFETY — prevent unwanted horizontal scroll
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.atg-desktop{max-width:100vw;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}

/* =========================================================
   27. FOCUS — kill purple browser outline on click,
              keep crisp cyan ring for keyboard nav only
   ========================================================= */
.atg :focus{outline:none}
.atg a:focus,
.atg button:focus,
.atg input:focus,
.atg select:focus,
.atg textarea:focus,
.atg .btn:focus,
.atg .size:focus{outline:none;box-shadow:none}

/* keyboard-only — clean cyber ring */
.atg a:focus-visible,
.atg button:focus-visible,
.atg .btn:focus-visible,
.atg .size:focus-visible,
.atg .menubar .links a:focus-visible{
  outline:2px solid var(--cyber);
  outline-offset:2px;
  border-radius:2px;
}
.atg input:focus-visible,
.atg select:focus-visible,
.atg textarea:focus-visible{
  border-color:var(--cyber);
  box-shadow:inset 1px 1px 0 #C9D9E5,inset -1px -1px 0 #fff,0 0 0 2px rgba(0,212,255,.3);
  outline:none;
}

/* instant press feedback so user sees the action register before the page loads */
.atg .menubar .links a:active{
  background:linear-gradient(180deg,#005C8C,#003E66);color:#fff;
}
.atg .btn:active{transform:translateY(1px);filter:brightness(.96)}
.atg .product-window:active,.atg .win:active{transform:translateY(0)}

/* =========================================================
   PRODUCTS GRID OVERRIDE — beat Storefront's higher-specificity
   defaults that float products with fixed widths
   ========================================================= */
body.atg ul.products,
body.atg ul.products.columns-2,
body.atg ul.products.columns-3,
body.atg ul.products.columns-4,
body.atg .products{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 0 14px !important;
  width:100% !important;
}
body.atg ul.products::before,
body.atg ul.products::after{display:none !important}
body.atg ul.products li.product,
body.atg .products .product{
  list-style:none !important;
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  clear:none !important;
}

@media (max-width: 980px){
  body.atg ul.products,
  body.atg .products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* =========================================================
   QUANTITY + ADD-TO-CART (variable & simple products)
   ========================================================= */
.atg .quantity{
  display:inline-flex;align-items:center;gap:0;
  border:0;background:transparent;margin:0;
}
.atg .quantity input.qty{
  width:54px;height:38px;padding:0;
  text-align:center;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--navy);
  background:#fff;
  border:1px solid #9BB2C3;border-left:0;border-right:0;
  box-shadow:inset 0 1px 0 #fff;
  border-radius:0;
  -moz-appearance:textfield;
}
.atg .quantity input.qty::-webkit-outer-spin-button,
.atg .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.atg .atg-qty-btn{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FBFCFE 0%,#DDE7EE 100%);
  border:1px solid #9BB2C3;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #B7C7D6;
  color:var(--navy);font-family:var(--mono);font-size:16px;font-weight:700;
  cursor:pointer;user-select:none;
  border-radius:0;
}
.atg .atg-qty-btn.minus{border-radius:2px 0 0 2px}
.atg .atg-qty-btn.plus{border-radius:0 2px 2px 0}
.atg .atg-qty-btn:hover{filter:brightness(1.03)}
.atg .atg-qty-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}

.atg .single_add_to_cart_button{
  /* matches .btn.primary, already declared via .atg .button + inline btn class */
  text-transform:lowercase;letter-spacing:.02em;
}

/* size grid: out-of-stock variant */
.atg-size-btn[disabled],
.atg-size-btn.is-out{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.atg-size-btn[aria-checked=true],
.atg-size-btn.is-on{
  background:linear-gradient(180deg,#1AB3F2,#0088CC);color:#fff;border-color:#00567E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 2px rgba(0,212,255,.3);
}

/* single_variation: WC's price/stock readout */
.atg .woocommerce-variation.single_variation{
  padding:8px 0;font-family:var(--mono);font-size:12px;color:var(--mid);
}
.atg .woocommerce-variation-price .price{font-family:var(--mono);font-weight:700;color:var(--navy)}
.atg .woocommerce-variation-availability{color:#3ABE6A;font-size:11px;text-transform:uppercase;letter-spacing:.06em}

/* =========================================================
   GALLERY THUMB — active state highlight
   ========================================================= */
.atg-gallery-thumb{transition:box-shadow .15s ease, transform .15s ease}
.atg-gallery-thumb.is-clickable:hover{box-shadow:0 0 0 2px rgba(0,184,230,.45)}
.atg-gallery-thumb.is-active{box-shadow:0 0 0 2px var(--cyber)}
.atg-gallery-main.is-clickable:hover{box-shadow:0 0 0 2px rgba(0,184,230,.4), 0 16px 40px -16px rgba(10,22,40,.4)}

/* =========================================================
   LIGHTBOX — fullscreen image viewer with prev/next
   ========================================================= */
.atg-lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,22,40,.92);
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  animation:atg-fade .2s ease;
  font-family:var(--mono);
}
.atg-lightbox-bar{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.15) 100%),
    linear-gradient(90deg,#00A0DD 0%,#0088CC 55%,#00679E 100%);
  color:#fff;
  border-bottom:1px solid #00567E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25);
  font-size:12px;
}
.atg-lightbox-title{flex:1;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.atg-lightbox-close{
  width:28px;height:24px;
  background:linear-gradient(180deg,#FF8E76 0%,#E04A2A 100%);
  color:#fff;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px #8A2208;
  border-radius:2px;font-family:var(--mono);font-size:16px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.atg-lightbox-close:hover{filter:brightness(1.05)}
.atg-lightbox-body{
  flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:24px 72px;overflow:hidden;
}
.atg-lightbox-img{
  max-width:100%;max-height:100%;object-fit:contain;
  border:1px solid #C9D9E5;
  box-shadow:0 0 60px rgba(0,212,255,.25), 0 20px 60px -10px rgba(0,0,0,.5);
  background:#fff;
}
.atg-lightbox-prev,
.atg-lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  background:linear-gradient(180deg,#FBFCFE 0%,#DDE7EE 100%);
  border:1px solid #6F95B0;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #B7C7D6,0 4px 12px rgba(0,0,0,.3);
  border-radius:2px;font-family:var(--mono);font-size:18px;color:var(--navy);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.atg-lightbox-prev{left:14px}
.atg-lightbox-next{right:14px}
.atg-lightbox-prev:hover,.atg-lightbox-next:hover{filter:brightness(1.05)}
.atg-lightbox-status{
  display:flex;align-items:center;justify-content:center;
  padding:6px 10px;font-size:11px;color:var(--steel);
  background:linear-gradient(180deg,#F4F7FA,#E1EAF2);
  border-top:1px solid #B7C7D6;
}
@media (max-width: 720px){
  .atg-lightbox-body{padding:14px 56px}
  .atg-lightbox-prev{left:6px}
  .atg-lightbox-next{right:6px}
}

/* =========================================================
   28. VIEW TRANSITIONS — smooth page nav in supported browsers
   ========================================================= */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){animation-duration:.18s;animation-timing-function:ease}