/* Atlas visual switches
   Corner style is internal-only for fast back/forth changes:
   - Sharp/current: --atlas-corner-radius: 0px;
   - Previous rounded feel: --atlas-corner-radius: 14px; and --atlas-button-radius: 8px;
*/
:root{
  --atlas-corner-radius: 0px;
  --atlas-button-radius: 0px;
  --atlas-pill-radius: 0px;
  --atlas-background-image: url('/assets/brand/atlas-topographic-background.webp');
}

html{background:#030916!important;}
body{
  background:#030916!important;
  position:relative!important;
  isolation:isolate!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,9,22,.16) 0%, rgba(3,9,22,.50) 44%, rgba(3,9,22,.90) 100%),
    radial-gradient(circle at 48% 18%, rgba(22,136,255,.20), transparent 36%),
    var(--atlas-background-image) center top / cover no-repeat;
  opacity:.72;
  transform:translateZ(0);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% -10%, rgba(22,136,255,.18), transparent 34%),
    linear-gradient(90deg, rgba(3,9,22,.96) 0%, rgba(3,9,22,.72) 48%, rgba(3,9,22,.94) 100%);
}
.shell{background:linear-gradient(180deg,rgba(3,9,22,.18),rgba(3,9,22,.86))!important;}
.site-header{background:rgba(3,9,22,.88)!important;}

/* Sharp-edge system: sections, cards, product items, inputs, CTAs. */
.hero-panel,
.feature-card,
.product,
.cat,
.note,
.request-card,
.detail-card,
.info-card,
.checkout-card,
.card,
.panel,
.modal,
.cart-drawer,
.cart,
.product-img,
.product-img img,
.feature-img,
.hero-img,
.side-img,
input,
select,
textarea{
  border-radius:var(--atlas-corner-radius)!important;
}
.btn,
.btn.ghost,
.mini,
.link,
button,
.button,
.checkout-button,
.add-to-cart,
.quantity-btn,
.qty-btn{
  border-radius:var(--atlas-button-radius)!important;
}
.chip,
.pill,
.tag,
.label,
.badge,
.kicker-badge{
  border-radius:var(--atlas-pill-radius)!important;
}
.nav a.active:after{border-radius:0!important;}

/* Keep media hard-edged even when pages try to re-round thumbnails. */
img{border-radius:inherit;}
.product-img img,
.feature-card img,
.hero-panel img{border-radius:0!important;}

@media(max-width:640px){
  body::before{background-position:center top;opacity:.58;}
}

/* Final launch sharp-edge override: catch page-specific and cart-injected UI. */
*,
*::before,
*::after{
  border-radius:0!important;
}
.atlas-cart-drawer,
.atlas-cart-panel,
.atlas-cart-close,
.atlas-cart-empty,
.atlas-cart-qty,
.atlas-cart-disclaimer,
.atlas-cart-checkout,
.cart-badge{
  border-radius:0!important;
}

/* 2026-08-31 mobile-only responsive pass.
   Keep desktop untouched: every override is scoped to phone/tablet widths. */
@media(max-width:720px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .wrap,
  .hero-three{
    width:min(100% - 24px, 1240px)!important;
    max-width:calc(100vw - 24px)!important;
  }

  .topbar{
    padding:7px 10px!important;
    font-size:8px!important;
    line-height:1.25!important;
    letter-spacing:.08em!important;
    white-space:normal!important;
  }

  .mast{
    width:min(100% - 24px, 1240px)!important;
    max-width:calc(100vw - 24px)!important;
    grid-template-columns:1fr auto!important;
    gap:10px 12px!important;
    padding:12px 0 10px!important;
    height:auto!important;
    min-height:0!important;
  }
  .mast>a{
    height:auto!important;
    min-width:0!important;
  }
  .brand-logo{
    width:126px!important;
    max-width:126px!important;
  }
  .header-actions,
  .mast>.cart,
  .cart{
    height:40px!important;
  }
  .cart{
    width:40px!important;
  }
  .nav{
    grid-column:1 / -1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:7px!important;
    overflow:visible!important;
    padding:6px 0 2px!important;
    font-size:12px!important;
  }
  .nav a{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:34px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:9px 10px!important;
    border:1px solid rgba(51,95,153,.42)!important;
    background:rgba(5,15,32,.42)!important;
    white-space:nowrap!important;
  }
  .nav a.active:after{
    left:8px!important;
    right:8px!important;
    bottom:4px!important;
  }

  .hero,
  .catalog-hero{
    padding:18px 0 20px!important;
  }
  .hero-panel,
  .feature-card,
  .main-feature,
  .side-feature,
  .category-card,
  .category-card.featured{
    min-height:auto!important;
  }
  .hero-panel{
    min-height:360px!important;
  }
  .main-feature{
    min-height:470px!important;
  }
  .side-feature,
  .category-card,
  .category-card.featured{
    min-height:250px!important;
  }
  .feature-card:before,
  .hero-panel:before,
  .category-card:before{
    background:linear-gradient(180deg,rgba(3,9,22,.97) 0%,rgba(3,9,22,.88) 48%,rgba(3,9,22,.56) 100%)!important;
  }
  .feature-card:after,
  .hero-panel:after,
  .category-card:after{
    opacity:.18!important;
  }
  .feature-img,
  .hero-img,
  .hero-panel>img,
  .category-card img{
    object-position:center right!important;
    opacity:.62!important;
  }
  .feature-copy,
  .feature-copy.compact,
  .hero-copy,
  .category-copy,
  .category-card.featured .category-copy{
    width:100%!important;
    max-width:100%!important;
    padding:28px 18px!important;
  }
  .feature-copy h1,
  .hero h1,
  .hero-copy h1{
    max-width:100%!important;
    font-size:clamp(30px, 9.2vw, 38px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .feature-copy.compact h2,
  .category-copy h2,
  .section h2,
  .section-head h2,
  .note h2,
  .buybox h1{
    font-size:clamp(28px, 9vw, 38px)!important;
    line-height:1!important;
  }
  .feature-copy p,
  .hero p,
  .hero-copy p,
  .category-copy p,
  .section-lead,
  .section-head p{
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.42!important;
  }
  .kicker{
    font-size:9px!important;
    letter-spacing:.26em!important;
  }
  .hero-actions,
  .simple-strip{
    gap:8px!important;
  }
  .hero-actions .btn,
  .btn,
  .mini{
    min-height:42px!important;
    padding:11px 13px!important;
    font-size:13px!important;
  }
  .pill,
  .tag,
  .label,
  .badge{
    font-size:9px!important;
    line-height:1.15!important;
  }

  .section{
    padding:34px 0!important;
  }
  .section-head{
    display:block!important;
    text-align:left!important;
    margin-bottom:18px!important;
  }
  .products,
  .categories,
  .category-grid,
  .details,
  .contact-section,
  .field-grid,
  .actions,
  .bullets,
  .specs{
    grid-template-columns:1fr!important;
  }
  .toolbar,
  .filters,
  .filter-row,
  .chips,
  .tabs{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    gap:8px!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .toolbar{
    display:block!important;
  }
  .product,
  .cat,
  .note,
  .form-card,
  .side-card,
  .buybox,
  .info-card,
  .checkout-card,
  .request-card{
    max-width:100%!important;
  }
  .product-img,
  .gallery{
    aspect-ratio:1 / 1!important;
    min-height:0!important;
  }
  .product-body,
  .cat,
  .note,
  .form-card,
  .side-card,
  .buybox,
  .info-card{
    padding:18px!important;
  }
  .product-row,
  .price-row,
  .select-row,
  .related-head,
  .footer-grid{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .price-row,
  .select-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .price{
    font-size:28px!important;
  }
  .stock{
    width:max-content!important;
    max-width:100%!important;
  }
  input,
  select,
  textarea,
  button,
  .add-to-cart,
  .checkout-button{
    min-height:44px!important;
    font-size:16px!important;
  }
  .related-grid{
    grid-template-columns:1fr!important;
  }
  .related-card{
    grid-template-columns:96px 1fr!important;
    min-height:112px!important;
  }
  .related-card img{
    width:96px!important;
  }
  .footer{
    padding:28px 0!important;
  }
  .footer-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .footer-links{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px 14px!important;
    font-size:12px!important;
  }

  .atlas-cart-panel,
  .cart-drawer,
  .atlas-cart-drawer{
    width:100vw!important;
    max-width:100vw!important;
  }
}

@media(max-width:360px){
  .nav{gap:6px!important;font-size:11px!important;}
  .nav a{padding:8px 8px!important;}
  .feature-copy h1,
  .hero h1,
  .hero-copy h1{font-size:31px!important;}
}
