/* terra-core-css-phase2a-20260814
 * TERRA INDUSTRIES WEBSITE 2.0
 * Central shared styling owner.
 *
 * PHASE 2A STATUS: BRIDGE ONLY — NO VISUAL RULES YET.
 *
 * Future ownership:
 * - canonical 1120px shared content/workspace canvas
 * - shared spacing/gutters
 * - shared form-control fundamentals
 * - shared buttons, cards, tables and status components
 * - shared responsive foundations
 *
 * Do not place page-specific styling here.
 */

/* ==========================================================
   terra-core-ownership-foundation-phase2b-20260814
   CENTRAL SHARED DESIGN TOKENS — PHASE 2B

   These variables establish canonical ownership names without
   changing existing public/Admin/customer visual rules.

   Canonical content system:
   - Desktop max: 1120px
   - Desktop side gutter: 24px
   - Tablet side gutter: 22px
   - Mobile side gutter: 14px
========================================================== */
:root{
  --terra-core-content-max:1120px;
  --terra-core-gutter-desktop:24px;
  --terra-core-gutter-tablet:22px;
  --terra-core-gutter-mobile:14px;
  --terra-core-section-gap:20px;
  --terra-core-section-gap-mobile:16px;
  --terra-core-control-height:46px;
}

/* ==========================================================
   terra-final-sitewide-design-system-phase2j-v1-20260814
   TERRA INDUSTRIES — FINAL SHARED DESIGN TOKENS
========================================================== */
:root{
  --terra-navy:#1b283a;
  --terra-orange:#ff834f;
  --terra-offwhite:#f8f7e5;
  --terra-sea:#7b97a1;
  --terra-white:#ffffff;
  --terra-black:#000000;
  --terra-text:#1b283a;
  --terra-muted:#60757d;
  --terra-line:#d8e0e2;
  --terra-line-strong:#bdcbd0;
  --terra-soft:#f5f8f9;
  --terra-soft-orange:#fff6f1;
  --terra-soft-green:#f1faf4;
  --terra-soft-amber:#fff8e8;
  --terra-soft-red:#fff3f1;
  --terra-positive:#238248;
  --terra-warning:#b77900;
  --terra-danger:#b23830;
  --terra-content-max:1120px;
  --terra-radius:10px;
  --terra-radius-small:7px;
  --terra-shadow:0 4px 14px rgba(27,40,58,.06);
  --terra-shadow-hover:0 7px 20px rgba(27,40,58,.10);
  --terra-control-height:46px;
}

/* ==========================================================
   terra-header-products-link-phase2l-v14-20260815
   SHARED HEADER DROPDOWNS — CANONICAL ALIGNMENT / TYPOGRAPHY

   Desktop (>1024px):
   - Products panel left edge aligns with the Products trigger.
   - My Account panel left edge aligns with the My Account trigger.
   - Both use the same font family and matching CSS chevrons.

   Tablet/mobile (<=1024px):
   - Existing approved dark flyout layout remains authoritative.
   - Only typography/chevron consistency is shared.
========================================================== */

.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger,
.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-link,
.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-caret-button,
.site-header nav#site-nav > .customer-account-menu > summary,
.site-header nav#site-nav .nav-dropdown-panel,
.site-header nav#site-nav .customer-account-dropdown,
.site-header nav#site-nav .customer-account-dropdown a,
.site-header nav#site-nav .customer-account-dropdown form button{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,Helvetica,sans-serif!important;
}

.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-link,
.site-header nav#site-nav > .customer-account-menu > summary{
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}

.site-header nav#site-nav .customer-account-dropdown > a,
.site-header nav#site-nav .customer-account-dropdown form button{
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.25!important;
}


/* Products is a real page link; the chevron remains the submenu control. */
.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  gap:2px!important;
}

.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#ffffff!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transform:none!important;
}

.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-caret-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 24px!important;
  width:24px!important;
  min-width:24px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  color:#ffffff!important;
  box-shadow:none!important;
  transform:none!important;
  cursor:pointer!important;
}

.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-link:hover,
.site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-caret-button:hover{
  color:#ff834f!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

.site-header nav#site-nav > .nav-dropdown.is-open > .nav-dropdown-trigger > .nav-dropdown-link,
.site-header nav#site-nav > .nav-dropdown.is-open > .nav-dropdown-trigger > .nav-dropdown-caret-button{
  color:#ff834f!important;
}

/* One chevron shape for Products + My Account. */
.site-header nav#site-nav .dropdown-caret,
.site-header nav#site-nav .customer-account-clean-chevron{
  display:inline-block!important;
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  margin-left:3px!important;
  padding:0!important;
  border:0!important;
  border-right:1.5px solid currentColor!important;
  border-bottom:1.5px solid currentColor!important;
  border-radius:0!important;
  background:none!important;
  font-size:0!important;
  line-height:0!important;
  transform:rotate(45deg)!important;
  transform-origin:50% 50%!important;
  transition:transform .16s ease!important;
}

.site-header nav#site-nav > .nav-dropdown.is-open .dropdown-caret,
.site-header nav#site-nav > .customer-account-menu[open] .customer-account-clean-chevron{
  transform:rotate(225deg)!important;
}



/* Products is the active top-nav section on Products and all four product pages. */
body:has(.terra-product-page) .site-header nav#site-nav > .nav-dropdown--products > .nav-dropdown-trigger > .nav-dropdown-link,
body:has(.terra-product-page) .site-header nav#site-nav > .nav-dropdown--products > .nav-dropdown-trigger > .nav-dropdown-caret-button,
body:has(.product-category-grid) .site-header nav#site-nav > .nav-dropdown--products > .nav-dropdown-trigger > .nav-dropdown-link,
body:has(.product-category-grid) .site-header nav#site-nav > .nav-dropdown--products > .nav-dropdown-trigger > .nav-dropdown-caret-button{
  color:#ff834f!important;
}

@media (max-width:1024px){
  .site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
    width:100%!important;
    min-height:52px!important;
  }

  .site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-link{
    width:100%!important;
    min-height:52px!important;
    padding:0!important;
  }

  .site-header nav#site-nav > .nav-dropdown > .nav-dropdown-trigger > .nav-dropdown-caret-button{
    width:46px!important;
    min-width:46px!important;
    height:52px!important;
    min-height:52px!important;
  }
}

@media (min-width:1025px){
  .site-header nav#site-nav > .nav-dropdown,
  .site-header nav#site-nav > .customer-account-menu{
    position:relative!important;
  }

  /* Align each desktop panel to the first letter of its own trigger. */
  .site-header nav#site-nav > .nav-dropdown > .nav-dropdown-panel{
    left:0!important;
    right:auto!important;
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    transform:none!important;
  }

  .site-header nav#site-nav > .customer-account-menu > .customer-account-dropdown{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    transform:none!important;
  }
}

/* ==========================================================
   terra-top-contact-modern-phase2l-v16-8-20260815
   TOP CONTACT UTILITY BAR — MODERN OWNER

   - compact pill-style contact actions
   - phone / email / staff icons
   - no full-height table-like dividers
   - Staff Access remains at far right
   - no movement on hover
   - existing tablet/mobile visibility remains untouched
   ========================================================== */

.top-contact-bar{
  background:#17283a!important;
  border-top:0!important;
  border-bottom:1px solid rgba(255,131,79,.88)!important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 1px 0 rgba(27,40,58,.14)!important;
}

.top-contact-inner{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}

.top-contact-inner > a.top-contact-link{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:32px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:7px 11px!important;
  border:1px solid rgba(123,151,161,.24)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;
  color:#f8f7e5!important;
  font-family:inherit!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transform:none!important;
  translate:none!important;
  top:auto!important;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease!important;
}

.top-contact-inner > a.top-contact-link::before{
  content:""!important;
  flex:0 0 14px!important;
  width:14px!important;
  height:14px!important;
  display:block!important;
  background:#ff834f!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
  transition:background-color .16s ease!important;
}


.top-contact-inner > a.top-contact-link[href*="wa.me"]::before,
.top-contact-inner > a.top-contact-link[href*="whatsapp"]::before{
  background:transparent!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='11.5' r='8.25' fill='none' stroke='%2325D366' stroke-width='2'/%3E%3Cpath d='M6.4 18.2 5.6 21l2.9-.8' fill='none' stroke='%2325D366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.05 7.8c.3-.3.72-.26.94.08l1.03 1.58c.2.31.16.72-.1.98l-.58.58c.72 1.43 1.77 2.48 3.2 3.2l.58-.58c.26-.26.67-.3.98-.1l1.58 1.03c.34.22.38.64.08.94l-.5.5c-.73.73-1.8.98-2.77.64-3.2-1.11-5.72-3.63-6.83-6.83-.34-.97-.09-2.04.64-2.77l.5-.5z' fill='%2325D366'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
}

.top-contact-inner > a.top-contact-link[href^="tel:"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.8a2 2 0 0 1-.45 2.11L8.07 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.32 1.84.55 2.8.68A2 2 0 0 1 22 16.92z' fill='black'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.8a2 2 0 0 1-.45 2.11L8.07 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.32 1.84.55 2.8.68A2 2 0 0 1 22 16.92z' fill='black'/%3E%3C/svg%3E")!important;
}

.top-contact-inner > a.top-contact-email::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 8L4 7v11h16V7l-8 5zm0-2 8-5H4l8 5z' fill='black'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 8L4 7v11h16V7l-8 5zm0-2 8-5H4l8 5z' fill='black'/%3E%3C/svg%3E")!important;
}

.top-contact-inner > a.top-contact-staff-access{
  margin-left:auto!important;
  padding-left:13px!important;
  padding-right:13px!important;
  border-color:rgba(255,131,79,.42)!important;
  background:rgba(255,131,79,.075)!important;
}

.top-contact-inner > a.top-contact-staff-access::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 12c4.42 0 8 2.24 8 5v3H4v-3c0-2.76 3.58-5 8-5zm7-5h-1V7a3 3 0 1 0-6 0v2h-1a1 1 0 0 0-1 1v4h10v-4a1 1 0 0 0-1-1zm-5-2a1 1 0 1 1 2 0v2h-2V7z' fill='black'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 12c4.42 0 8 2.24 8 5v3H4v-3c0-2.76 3.58-5 8-5zm7-5h-1V7a3 3 0 1 0-6 0v2h-1a1 1 0 0 0-1 1v4h10v-4a1 1 0 0 0-1-1zm-5-2a1 1 0 1 1 2 0v2h-2V7z' fill='black'/%3E%3C/svg%3E")!important;
}

.top-contact-inner > a.top-contact-link:hover,
.top-contact-inner > a.top-contact-link:focus-visible{
  border-color:rgba(255,131,79,.82)!important;
  background:rgba(255,131,79,.13)!important;
  color:#ffffff!important;
  text-decoration:none!important;
  box-shadow:0 4px 12px rgba(0,0,0,.12)!important;
  transform:none!important;
  translate:none!important;
  top:auto!important;
}


.top-contact-inner > a.top-contact-link[href*="wa.me"]:hover::before,
.top-contact-inner > a.top-contact-link[href*="wa.me"]:focus-visible::before,
.top-contact-inner > a.top-contact-link[href*="whatsapp"]:hover::before,
.top-contact-inner > a.top-contact-link[href*="whatsapp"]:focus-visible::before{
  background:transparent!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='11.5' r='8.25' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M6.4 18.2 5.6 21l2.9-.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.05 7.8c.3-.3.72-.26.94.08l1.03 1.58c.2.31.16.72-.1.98l-.58.58c.72 1.43 1.77 2.48 3.2 3.2l.58-.58c.26-.26.67-.3.98-.1l1.58 1.03c.34.22.38.64.08.94l-.5.5c-.73.73-1.8.98-2.77.64-3.2-1.11-5.72-3.63-6.83-6.83-.34-.97-.09-2.04.64-2.77l.5-.5z' fill='%23ffffff'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
}

.top-contact-inner > a.top-contact-link:hover::before,
.top-contact-inner > a.top-contact-link:focus-visible::before{
  background:#ffffff!important;
}

.top-contact-inner > a.top-contact-staff-access:hover,
.top-contact-inner > a.top-contact-staff-access:focus-visible{
  border-color:#ff834f!important;
  background:#ff834f!important;
  color:#ffffff!important;
}

.top-contact-inner > a.top-contact-link:visited{
  color:#f8f7e5!important;
}

.top-contact-inner > a.top-contact-link:visited:hover{
  color:#ffffff!important;
}

.top-contact-inner > a.top-contact-link:focus-visible{
  outline:2px solid rgba(248,247,229,.86)!important;
  outline-offset:2px!important;
}

@media (prefers-reduced-motion:reduce){
  .top-contact-inner > a.top-contact-link,
  .top-contact-inner > a.top-contact-link::before{
    transition:none!important;
  }
}