/* Oil category template — archive layout built on the shared .wda tokens
   (product.css). This file only adds category-archive structure; it is loaded
   exclusively for whitelisted oil terms, never on machine categories. */

/* Let the bands run edge to edge inside Astra's archive container while the
   native Woo grid stays inside the same .wrap gutter. */
body.wda-oil-archive #content .ast-container,
body.wda-oil-archive .ast-woocommerce-container{max-width:none;padding:0;margin:0}
body.wda-oil-archive #content{padding:0}

.wda-oil{background:var(--bg);color:var(--ink2)}
.wda-oil .wrap{max-width:var(--maxW);margin:0 auto;padding:0 24px}

/* Breadcrumb */
.wda-oil .oilcrumb{background:var(--surface);border-bottom:1px solid var(--border);padding:13px 0;font-size:14px}
.wda-oil .oilcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;align-items:center}
.wda-oil .oilcrumb li{display:flex;gap:8px;align-items:center;color:var(--muted)}
.wda-oil .oilcrumb li:not(:last-child)::after{content:"/";color:var(--surface2)}
.wda-oil .oilcrumb li[aria-current]{color:var(--ink);font-weight:600}

/* Hero */
.wda-oil .oilhero{padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,56px)}
.wda-oil .oilhero h1{margin:14px 0 18px}
.wda-oil .oilhero-intro{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7;color:var(--ink2);max-width:880px;margin:0 0 26px}
.wda-oil .oilhero-cert{margin-bottom:30px}
.wda-oil .oilanchors{display:flex;flex-wrap:wrap;gap:10px}
.wda-oil .oilanchors a{font:600 13.5px/1 Manrope,sans-serif;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rPill);padding:11px 18px;transition:.16s ease}
.wda-oil .oilanchors a:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}

/* Sections */
.wda-oil .oilsec{padding-block:clamp(40px,5.5vw,64px)}
.wda-oil .oilsec-intro,.wda-oil .oilsec .oilsec-intro{color:var(--ink2);font-size:16.5px;max-width:860px;margin:14px 0 30px}
.wda-oil .oilsec h2{margin:10px 0 0}

/* Family cards */
.wda-oil .oilgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.wda-oil .oilgroup{padding:26px 24px}
.wda-oil .oilgroup h3{margin-bottom:11px}
.wda-oil .oilgroup-names{font-size:14.5px;color:var(--ink);line-height:1.6;margin-bottom:10px}
.wda-oil .oilgroup-use{font-size:13.5px;line-height:1.55;margin:0}

/* MOQ band */
.wda-oil .oilspecs{background:var(--surface);border-block:1px solid var(--border)}
.wda-oil .oilspecs table{margin-top:26px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rCard);overflow:hidden}
.wda-oil .oilspecs tbody th{width:26%;background:var(--bg)}

/* Use cards */
.wda-oil .oiluse{margin-top:28px}
.wda-oil .oiluse-card h3{margin-bottom:10px;font-size:18px}

/* Native grid: wrap it in the same gutter and give it a heading context. */
.wda-oil .oilgrid-sec{padding-top:8px}
.wda-oil .oilgrid-sec .wrap > .woocommerce-result-count,
.wda-oil .oilgrid-sec .wrap > form.woocommerce-ordering{margin-top:0}
.wda-oil .woocommerce-notices-wrapper{display:none}
.wda-oil ul.products{margin-top:26px}

/* Cross links */
.wda-oil .oilcross-list{gap:10px;margin-top:26px}

/* FAQ */
.wda-oil .oilfaq{margin-top:28px;max-width:920px}
.wda-oil .oilfaqsec .note{max-width:920px;margin-top:22px}

/* RFQ shortcode already ships its own dark band under .wda-oilhub; make sure
   its outer section sits flush after the FAQ. */
.wda-oil > .wda-oilhub{margin-top:0}
.wda-oil > .wda-oilhub .rfq{border-radius:0}

@media(max-width:960px){
  .wda-oil .oilgroups{grid-template-columns:1fr}
  .wda-oil .oilspecs tbody th{width:auto}
}

/* ---- P4 visual-gate fixes (2026-09-19), scoped to whitelisted oil terms ---- */

/* The hidden ElementsKit mega-menu drawer is an absolutely-positioned 1440px
   panel parked off the right viewport edge; it extends the page canvas to
   1840px on desktop. Clipping overflow on our archive body removes the dead
   right gutter (and the horizontal scrollbar) without touching the panel,
   which slides back inside the viewport when the menu is opened. */
html:has(body.wda-oil-archive){overflow-x:hidden}
body.wda-oil-archive{overflow-x:hidden}

/* Applications cards must read as filled cards; .card-plain fills with the
   page background and visually disappeared against it. */
.wda-oil .oiluse-card{background:var(--surface)}

/* Native grid: Astra leaves ul.products at a fixed ~785px column instead of
   filling the 1240px wrap. Span it and give each loop item the v4 white card
   treatment so product cards match the family/MOQ sections above them. */
.wda-oil ul.products{width:100%}
.wda-oil ul.products li.product{
  background:#fff;border:1px solid var(--border);border-radius:var(--rCard);
  padding:14px 14px 20px;margin-bottom:26px;
  transition:box-shadow .18s ease,border-color .18s ease}
.wda-oil ul.products li.product:hover{
  border-color:var(--surface2);box-shadow:0 12px 30px rgba(42,31,23,.08)}
.wda-oil ul.products li.product img{border-radius:10px}
.wda-oil ul.products li.product .astra-shop-summary-wrap{padding:14px 4px 0}
.wda-oil ul.products li.product .astra-shop-summary-wrap h3,
.wda-oil ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title{
  font:700 15.5px/1.35 Manrope,sans-serif;color:var(--ink)}

/* WooCommerce's input rules (specificity 0,2,1) beat product.css's
   .wda input (0,1,1), so email/tel fields rendered white while text inputs
   kept the intended dark-translucent fill. Restore one dark-band treatment
   for every field type in this form, including browser autofill. */
.wda-oil .wda-rfq-form input,
.wda-oil .wda-rfq-form input[type="text"],
.wda-oil .wda-rfq-form input[type="email"],
.wda-oil .wda-rfq-form input[type="tel"],
.wda-oil .wda-rfq-form input[type="password"],
.wda-oil .wda-rfq-form input[type="url"],
.wda-oil .wda-rfq-form select,
.wda-oil .wda-rfq-form textarea{
  background-color:rgba(255,253,249,.06);
  border:1px solid rgba(255,253,249,.18);
  border-radius:12px;color:#FFFDF9}
.wda-oil .wda-rfq-form input:focus,
.wda-oil .wda-rfq-form select:focus,
.wda-oil .wda-rfq-form textarea:focus{border-color:var(--brand);background-color:rgba(255,253,249,.09)}
.wda-oil .wda-rfq-form input:-webkit-autofill,
.wda-oil .wda-rfq-form input:-webkit-autofill:hover,
.wda-oil .wda-rfq-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#FFFDF9;
  -webkit-box-shadow:0 0 0 1000px #241C16 inset;
  caret-color:#FFFDF9;transition:background-color 9999s ease-in-out 0s}

@media(max-width:960px){
  .wda-oil ul.products li.product{margin-bottom:20px}
}