/* =========================================================
   ContainersDirectSale.com — Design System
   Palette: Steel Navy #1B2A38, Oxide Rust #7A3428,
            Safety Yellow #E8B923, Cargo Grey #6B7280,
            Manifest White #ECEEF0, Ink #14181C
   Display: Oswald | Body: Inter | Data/Spec: IBM Plex Mono
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#1B2A38;
  --navy-dark:#121D27;
  --rust:#7A3428;
  --rust-light:#8f4433;
  --yellow:#E8B923;
  --grey:#6B7280;
  --white:#ECEEF0;
  --paper:#F6F5F2;
  --ink:#14181C;
  --border:#D8DBDD;
  --radius:2px;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--navy);
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,5vw,3.4rem); line-height:1.05;}
h2{font-size:clamp(1.5rem,3vw,2.2rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
a{color:var(--rust); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* corrugated texture strip */
.corrugate{
  height:10px;
  background:repeating-linear-gradient(90deg,var(--navy) 0 6px,var(--navy-dark) 6px 12px);
}

/* header */
header.site-header{background:var(--navy); color:var(--white); position:sticky; top:0; z-index:50; border-bottom:3px solid var(--yellow);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; color:var(--white); font-family:'Oswald',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:.03em;}
.logo img{height:36px; width:auto;}
nav.main-nav{display:flex; gap:22px; align-items:center;}
nav.main-nav > ul{list-style:none; display:flex; gap:22px; margin:0; padding:0;}
nav.main-nav a{color:var(--white); font-size:.92rem; font-weight:500; text-transform:uppercase; letter-spacing:.03em;}
nav.main-nav a:hover{color:var(--yellow); text-decoration:none;}
.dropdown{position:relative;}
.dropdown-menu{display:none; position:absolute; top:100%; left:0; background:var(--navy-dark); min-width:240px; border-top:2px solid var(--yellow); padding:8px 0; box-shadow:0 8px 20px rgba(0,0,0,.3);}
.dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{display:block; padding:8px 16px; font-size:.85rem; text-transform:none; letter-spacing:0;}
.cart-link{display:flex; align-items:center; gap:6px; background:var(--rust); color:#fff; padding:8px 14px; border-radius:var(--radius); font-size:.85rem; text-transform:uppercase; font-weight:600;}
.cart-link:hover{background:var(--rust-light); text-decoration:none;}

/* hamburger toggle */
.menu-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer; order:2;}
.menu-toggle-bars{display:block; width:26px; height:20px; position:relative;}
.menu-toggle-bars span{display:block; position:absolute; left:0; right:0; height:2px; background:var(--white); border-radius:1px; transition:transform .2s, opacity .2s;}
.menu-toggle-bars span:nth-child(1){top:0;}
.menu-toggle-bars span:nth-child(2){top:9px;}
.menu-toggle-bars span:nth-child(3){top:18px;}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* hero */
.hero{background:linear-gradient(120deg,var(--navy) 0%, var(--navy-dark) 100%); color:var(--white); padding:70px 0 60px; position:relative; overflow:hidden;}
.hero .container{position:relative; z-index:2;}
.hero-eyebrow{font-family:'IBM Plex Mono',monospace; color:var(--yellow); letter-spacing:.15em; text-transform:uppercase; font-size:.8rem; margin-bottom:14px;}
.hero h1{color:#fff; max-width:820px;}
.hero p.lead{color:var(--white); opacity:.85; max-width:600px; font-size:1.1rem;}
.hero-stripe{position:absolute; right:-60px; top:0; bottom:0; width:220px; background:repeating-linear-gradient(180deg,var(--yellow) 0 24px, transparent 24px 48px); opacity:.12; transform:skewX(-8deg);}

/* buttons */
.btn{display:inline-block; padding:13px 26px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; font-weight:600; border-radius:var(--radius); cursor:pointer; border:2px solid transparent;}
.btn-primary{background:var(--yellow); color:var(--navy);}
.btn-primary:hover{background:#f2c53d; text-decoration:none;}
.btn-outline{background:transparent; border-color:var(--white); color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--navy); text-decoration:none;}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--navy-dark); text-decoration:none;}
.btn-block{display:block; width:100%; text-align:center;}

/* sections */
section{padding:56px 0;}
.section-tight{padding:36px 0;}
.section-alt{background:#fff;}
.eyebrow{font-family:'IBM Plex Mono',monospace; color:var(--rust); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; margin-bottom:8px; display:block;}

/* grids */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

/* product card */
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s;}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,24,28,.1);}
.card img{aspect-ratio:4/3; object-fit:cover; width:100%; background:#dfe2e4;}
.card-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-body h3{font-size:1.05rem; margin:0;}
.card-id{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--grey); letter-spacing:.06em;}
.card-price{font-family:'Oswald',sans-serif; font-size:1.4rem; color:var(--rust); font-weight:700;}
.card-tag{display:inline-block; background:var(--white); color:var(--navy); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:2px; font-weight:600; width:max-content;}

/* container ID stencil badge -- signature element */
.stencil-id{
  font-family:'IBM Plex Mono',monospace;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:var(--yellow);
  padding:6px 12px; border:1px dashed var(--yellow);
  font-size:.8rem; letter-spacing:.1em; border-radius:2px;
}

/* spec table */
table.specs{width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:.88rem;}
table.specs th, table.specs td{border:1px solid var(--border); padding:10px 12px; text-align:left;}
table.specs th{background:var(--navy); color:#fff; text-transform:uppercase; font-size:.75rem; letter-spacing:.05em;}
table.specs tr:nth-child(even){background:#fff;}

/* price table (category/all products) */
table.price-table{width:100%; border-collapse:collapse; margin-top:10px;}
table.price-table th, table.price-table td{padding:12px; border-bottom:1px solid var(--border); text-align:left;}
table.price-table th{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; color:var(--navy); border-bottom:2px solid var(--navy);}
table.price-table td.price{font-family:'IBM Plex Mono',monospace; color:var(--rust); font-weight:600;}

/* forms */
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; color:var(--navy);}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:.95rem; background:#fff;
}
.payment-options{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media(max-width:600px){.payment-options{grid-template-columns:1fr 1fr;}}
.payment-option{border:2px solid var(--border); border-radius:var(--radius); padding:12px; text-align:center; cursor:pointer; font-weight:600; font-size:.85rem; text-transform:uppercase;}
.payment-option input{display:none;}
.payment-option.selected, .payment-option:has(input:checked){border-color:var(--rust); background:#fbeeeb;}

/* breadcrumb */
.breadcrumb{font-size:.8rem; color:var(--grey); padding:14px 0; font-family:'IBM Plex Mono',monospace;}
.breadcrumb a{color:var(--grey);}

/* FAQ */
details.faq-item{border-bottom:1px solid var(--border); padding:14px 0;}
details.faq-item summary{cursor:pointer; font-weight:600; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--navy); font-size:1rem;}
details.faq-item p{margin-top:10px; color:var(--grey);}

/* footer */
footer.site-footer{background:var(--navy-dark); color:var(--white); padding:50px 0 20px; margin-top:40px;}
footer.site-footer h4{color:var(--yellow); font-size:.85rem; letter-spacing:.08em;}
footer.site-footer a{color:var(--white); opacity:.8; font-size:.88rem;}
footer.site-footer a:hover{opacity:1; color:var(--yellow);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-cols ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.payment-icons{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.payment-icons span{background:rgba(255,255,255,.08); padding:5px 10px; border-radius:2px; font-size:.72rem; font-family:'IBM Plex Mono',monospace;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:18px; font-size:.78rem; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* cart / checkout */
.cart-row{display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--border);}
.cart-row img{width:90px; height:70px; object-fit:cover; border-radius:2px;}
.cart-row .grow{flex:1;}
.cart-total{display:flex; justify-content:space-between; font-family:'Oswald',sans-serif; font-size:1.3rem; padding-top:16px; border-top:2px solid var(--navy); margin-top:10px;}
.qty-input{width:60px; padding:6px; border:1px solid var(--border);}
.remove-link{color:var(--rust); font-size:.8rem; cursor:pointer; text-decoration:underline; background:none; border:none;}

/* notice */
.notice{background:#fff8e6; border:1px solid var(--yellow); border-left:4px solid var(--yellow); padding:14px 18px; border-radius:2px; font-size:.9rem;}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:40px;}
@media(max-width:900px){.two-col{grid-template-columns:1fr;}}

/* ==========================================================
   MOBILE OPTIMIZATION
   ========================================================== */
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:480px;}

@media(max-width:860px){
  .header-inner{flex-wrap:wrap; gap:10px; padding:12px 16px; position:relative;}
  .logo{font-size:1rem;}
  .logo img{height:30px;}
  .menu-toggle{display:block;}
  .cart-link{order:1; margin-left:auto; padding:10px 14px;}

  /* Nav collapses into a full-width panel below the header, hidden until toggled */
  nav.main-nav{
    order:4; width:100%;
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  nav.main-nav.open{max-height:600px;}
  nav.main-nav > ul{flex-direction:column; align-items:stretch; gap:0; width:100%; padding:8px 0;}
  nav.main-nav > ul > li{border-top:1px solid rgba(255,255,255,.12);}
  nav.main-nav a{font-size:.9rem; padding:12px 4px; display:block;}
  .dropdown{width:100%;}
  .dropdown-menu{
    display:block; position:static; box-shadow:none; border-top:none;
    background:transparent; padding:0 0 6px 14px; min-width:0;
  }
  .dropdown-menu a{padding:8px 0; font-size:.82rem; opacity:.9;}
}

@media(max-width:600px){
  .container{padding:0 16px;}
  section{padding:36px 0;}
  .section-tight{padding:26px 0;}
  h1{font-size:1.7rem;}
  h2{font-size:1.3rem;}
  .hero{padding:44px 0 40px;}
  .hero-stripe{display:none;}
  .btn{padding:14px 20px; font-size:.85rem; width:100%; text-align:center;}
  .hero div[style*="display:flex"]{flex-direction:column;}
  .two-col > div > .btn, form .btn-block{width:100%;}

  /* Forms: 16px min font-size prevents iOS auto-zoom on focus; taller tap targets */
  .form-field input, .form-field select, .form-field textarea{
    font-size:16px; padding:13px 12px; min-height:48px;
  }
  .form-field textarea{min-height:110px;}
  .payment-options{grid-template-columns:1fr 1fr; gap:8px;}
  .payment-option{padding:14px 8px; font-size:.8rem; min-height:48px; display:flex; align-items:center; justify-content:center;}

  /* Cart rows stack instead of cramming into a row */
  .cart-row{flex-wrap:wrap; gap:10px;}
  .cart-row img{width:70px; height:56px;}
  .cart-row .grow{flex-basis:100%; order:1;}
  .cart-row .mono{order:2;}
  .remove-link{order:3;}

  .card-price{font-size:1.2rem;}
  .stencil-id{font-size:.7rem; padding:5px 10px;}

  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}

  /* All primary buttons and nav links get a comfortable min tap target */
  a.btn, button.btn, .cart-link, .add-to-cart{min-height:44px;}
}