/*
 B2B MADE public subpages visual system.
 Scope: body.public.public-subpage only.
 Content/function/DOM inner structure is not changed.
*/

body.public.public-subpage{
  --b2b-navy:#0B4A88;
  --b2b-blue:#1E88E5;
  --b2b-gold:#F59E0B;
  --b2b-light:#F5F7FA;
  --b2b-ink:#173856;
  --b2b-line:#DCE6EE;
  background:#fff;
  color:var(--b2b-ink);
}

/* Header / navigation */
body.public.public-subpage header,
body.public.public-subpage .header,
body.public.public-subpage .site-header{
  background:#fff!important;
  border-bottom:1px solid var(--b2b-line)!important;
}

body.public.public-subpage header a,
body.public.public-subpage nav a{
  color:var(--b2b-ink);
  font-weight:700;
}

body.public.public-subpage .brand{
  background-image:url("/assets/b2bmade_brand/logo.svg")!important;
}

/* Main width / vertical rhythm */
body.public.public-subpage main{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:48px 0 72px;
}

body.public.public-subpage section{
  margin:0 0 48px;
}

body.public.public-subpage h1{
  color:var(--b2b-navy)!important;
  font-size:clamp(36px,4.6vw,58px);
  line-height:1.08;
  letter-spacing:-.04em;
  word-break:keep-all;
}

body.public.public-subpage h2{
  color:var(--b2b-navy)!important;
  font-size:clamp(26px,3vw,38px);
  letter-spacing:-.025em;
  word-break:keep-all;
}

body.public.public-subpage h3{
  color:var(--b2b-ink);
  word-break:keep-all;
}

body.public.public-subpage p,
body.public.public-subpage li{
  line-height:1.75;
}

/* Cards / panels / common blocks */
body.public.public-subpage .card,
body.public.public-subpage .panel,
body.public.public-subpage .box,
body.public.public-subpage .item,
body.public.public-subpage .step,
body.public.public-subpage .feature,
body.public.public-subpage .notice,
body.public.public-subpage .content-box{
  border:1px solid var(--b2b-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 28px rgba(11,74,136,.045);
}

/* Buttons / CTAs */
body.public.public-subpage a.btn,
body.public.public-subpage .btn,
body.public.public-subpage button,
body.public.public-subpage input[type="submit"]{
  border-radius:8px!important;
}

body.public.public-subpage .btn.primary,
body.public.public-subpage button[type="submit"],
body.public.public-subpage input[type="submit"]{
  background:var(--b2b-navy)!important;
  border-color:var(--b2b-navy)!important;
  color:#fff!important;
  font-weight:800!important;
}

body.public.public-subpage .btn.secondary{
  color:var(--b2b-navy)!important;
  border-color:var(--b2b-blue)!important;
  background:#fff!important;
}

/* Forms — quote functionality unchanged, visual only */
body.public.public-subpage form{
  border-radius:16px;
}

body.public.public-subpage label{
  color:var(--b2b-ink);
  font-weight:700;
}

body.public.public-subpage input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.public.public-subpage select,
body.public.public-subpage textarea{
  width:100%;
  max-width:100%;
  border:1px solid #cddae4!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#173856!important;
  padding:12px 14px!important;
  box-sizing:border-box;
}

body.public.public-subpage input:focus,
body.public.public-subpage select:focus,
body.public.public-subpage textarea:focus{
  border-color:var(--b2b-blue)!important;
  outline:3px solid rgba(30,136,229,.12);
}

/* Tables */
body.public.public-subpage table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--b2b-line);
  border-radius:12px;
  overflow:hidden;
}

body.public.public-subpage th{
  background:#eef6fc!important;
  color:var(--b2b-navy)!important;
}

body.public.public-subpage th,
body.public.public-subpage td{
  padding:13px 14px;
  border-bottom:1px solid #e4ebf0;
}

/* Page-specific actual product photo accents — only if a hero exists */
body.public.public-subpage .hero{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(135deg,#f5faff,#fff);
}

body.public.page-procurement .hero::after,
body.public.page-about .hero::after,
body.public.page-products .hero::after,
body.public.page-works .hero::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:38%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.96;
  pointer-events:none;
}

body.public.page-procurement .hero::after{
  background-image:url("/assets/b2bmade_product_photos/custom_order_factory.webp");
}

body.public.page-about .hero::after{
  background-image:url("/assets/b2bmade_product_photos/custom_order_factory.webp");
}

body.public.page-products .hero::after{
  background-image:url("/assets/b2bmade_product_photos/premium_metal_medals.webp");
}

body.public.page-works .hero::after{
  background-image:url("/assets/b2bmade_product_photos/printed_medal_lanyards_02.webp");
}

body.public.public-subpage .hero > *{
  position:relative;
  z-index:1;
}

/* Quote: instruction image remains subtle and never overlays fields */
body.public.page-quote main::after{
  content:"";
  display:block;
  width:min(520px,100%);
  aspect-ratio:16/7;
  margin:44px auto 0;
  border-radius:16px;
  background:url("/assets/b2bmade_product_photos/custom_order_design_steps.webp") center 22%/cover no-repeat;
  border:1px solid var(--b2b-line);
  opacity:.92;
}

/* Footer */
body.public.public-subpage footer,
body.public.public-subpage .footer{
  background:#f5f8fb!important;
  border-top:1px solid var(--b2b-line)!important;
}

/* Safety: no duplicated generated text */
body.public.public-subpage .header .nav::after,
body.public.public-subpage .topbar .nav::after{
  content:none!important;
  display:none!important;
}

@media(max-width:900px){
  body.public.public-subpage main{
    width:min(100% - 28px,1180px);
    padding-top:32px;
  }

  body.public.public-subpage .hero::after{
    position:relative!important;
    display:block;
    width:100%!important;
    height:230px;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:24px;
  }

  body.public.public-subpage h1{
    font-size:clamp(34px,10vw,50px);
  }
}