/* =====================================================================
   Magnum Shooting Benches — site styles
   ---------------------------------------------------------------------
   The pages are laid out with tables. Plain styling (fonts, colours,
   sizes, borders, spacing) is written directly on each tag. This file
   holds:
     1. Base settings
     2. Page width & gutters
     3. Text styles (headings, labels, buttons)
     4. Newer effects (angled corners, image tints, sticky header,
        animations). Older browsers and Dreamweaver's Design view just
        skip these; the page still works without them.
     5. Hover effects
     6. Interactive states (used by js/site.js)
     7. PayPal button styling
     8. Mobile / tablet layout

   Brand colours:
     #ff531a  orange accent        #ff6a39  orange (hover)
     #0b0c0d  page background      #111315  card background
     #0e1012  alternate section    #f4f2ee  main text
     #cfd3d7  secondary text       #aeb3b8  body copy
     #7d8389  muted text           #2a2f35  borders
   ===================================================================== */


/* ---------- 1. Base settings ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #0b0c0d;
}

body {
  color: #f4f2ee;
  font-family: 'Barlow', sans-serif;
  overflow-x: hidden;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  padding: 0;
  vertical-align: top;
}
/* The valign="..." setting on a cell (Dreamweaver's "Vert" option) wins */
td[valign="middle"]   { vertical-align: middle; }
td[valign="bottom"]   { vertical-align: bottom; }
td[valign="baseline"] { vertical-align: baseline; }

img {
  border: 0;
}

::selection {
  background: #ff531a;
  color: #0b0c0d;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Multi-column tables: columns keep the widths given to them */
table.cols {
  table-layout: fixed;
}


/* ---------- 2. Page width & gutters ---------- */

/* Centred content table, 1240px wide at most */
table.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
table.wrap-900 {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Left/right padding inside .wrap tables (smaller on phones) */
.gutter {
  padding-left: 28px;
  padding-right: 28px;
}

/* Section top/bottom padding (smaller on phones) */
.pad-96 { padding-top: 96px; padding-bottom: 96px; }
.pad-90 { padding-top: 90px; padding-bottom: 90px; }
.pad-80 { padding-top: 80px; padding-bottom: 80px; }


/* ---------- 3. Text styles ---------- */

/* Big condensed uppercase headings */
.display {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}

/* Heading sizes that scale with the window width */
.size-hero      { font-size: clamp(56px, 8.5vw, 118px); line-height: .86; letter-spacing: .01em; }
.size-cta       { font-size: clamp(40px, 6vw, 80px); line-height: .9; }
.size-about     { font-size: clamp(46px, 7vw, 96px); line-height: .88; }
.size-contact   { font-size: clamp(44px, 6vw, 80px); line-height: .88; }
.size-highlight { font-size: clamp(38px, 4.4vw, 60px); line-height: .92; }
.size-story     { font-size: clamp(36px, 4.2vw, 56px); line-height: .92; }
.size-product   { font-size: clamp(36px, 4.4vw, 54px); line-height: .94; }
.size-section   { font-size: clamp(34px, 4vw, 52px); }
.size-ready     { font-size: clamp(34px, 5vw, 60px); }
.size-soon      { font-size: clamp(30px, 4vw, 52px); letter-spacing: .04em; }

/* Small orange label above a heading */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .3em;
  color: #ff531a;
}

/* Orange button */
.btn-primary {
  display: inline-block;
  cursor: pointer;
  background-color: #ff531a;
  color: #0b0c0d;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-primary:hover {
  background-color: #ff6a39;
}

/* Outlined button */
.btn-outline {
  display: inline-block;
  cursor: pointer;
  border: 1.5px solid #4a4f55;
  color: #f4f2ee;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-outline:hover {
  border-color: #ff531a;
  color: #ff531a;
}


/* ---------- 4. Newer effects ---------- */

/* Header stays at the top while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(11, 12, 13, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Phone menu background (slightly see-through) */
.mobile-menu {
  background-color: rgba(11, 12, 13, .98) !important;
}

/* Scrolling promo strip */
.ticker {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-block;
  padding: 7px 0;
  animation: mb-ticker 28s linear infinite;
  will-change: transform;
}
.ticker-track span {
  display: inline-block;
  margin-right: 48px;
}

/* Angled corners on buttons and images */
.clip-8  { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.clip-10 { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.clip-11 { clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.clip-18 { clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }

/* Photo tints */
.tint-92   { filter: contrast(1.05) brightness(.92); }
.tint-90   { filter: contrast(1.05) brightness(.9); }
.tint-85   { filter: grayscale(.2) contrast(1.05) brightness(.85); }
.tint-70   { filter: grayscale(.3) contrast(1.05) brightness(.7); }
.tint-95   { filter: contrast(1.04) brightness(.95); }
.tint-grey { filter: grayscale(.2); }
.tint-thumb { filter: contrast(1.04); }

/* Photo that fills its box, cropping the edges if needed */
.cover {
  object-fit: cover;
}

/* Big background photos (the tint is already applied to these files).
   The first background-image line is what older software shows; the
   second adds the dark gradient overlays in modern browsers. */
.bg-hero {
  background-color: #0b0c0d;
  background-image: url(../images/bg-hero.jpg);
  background-image: linear-gradient(90deg, rgba(11,12,13,.85) 0%, rgba(11,12,13,.1) 60%),
                    linear-gradient(180deg, rgba(11,12,13,.55) 0%, rgba(11,12,13,.2) 35%, rgba(11,12,13,.85) 100%),
                    url(../images/bg-hero.jpg);
  background-position: center;
  background-size: cover;
  height: 90vh;
}
.bg-cta {
  background-color: #0b0c0d;
  background-image: url(../images/bg-cta.jpg);
  background-position: center;
  background-size: cover;
}
.bg-about {
  background-color: #0b0c0d;
  background-image: url(../images/bg-about.jpg);
  background-position: center;
  background-size: cover;
}
.bg-story-mounts {
  background-image: url(../images/bg-story-mounts.jpg);
  background-position: center;
  background-size: cover;
}

.text-shadow-lg { text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.text-shadow-md { text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }

/* Decorative outline behind the "One bench" photo */
.frame-wrap {
  position: relative;
}
.frame-outline {
  position: absolute;
  top: -14px;
  left: -14px;
  right: 14px;
  bottom: 14px;
  border: 1px solid #2a2f35;
}
.frame-photo {
  position: relative;
}

/* Things layered on top of a photo or card */
.layer-parent { position: relative; }
.layer-fill {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.corner-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.corner-badge-sm {
  position: absolute;
  top: -1px;
  right: -1px;
}

/* Makes a whole card clickable from the link inside it */
.card-link::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}

/* Active page underline in the main nav */
.nav-item { position: relative; }
.nav-underline {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background-color: #ff531a;
}
.page-home .nav-underline-home,
.page-bench .nav-underline-bench,
.page-about .nav-underline-about,
.page-contact .nav-underline-contact {
  display: block;
}

/* Product photos stay in view while scrolling the buy box */
.sticky-gallery {
  position: sticky;
  top: 90px;
}

/* Checkout popup */
.modal-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 80;
  padding: 24px;
  background-color: rgba(5, 6, 7, .8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-panel {
  width: 100%;
  max-width: 464px;
  max-height: 92vh;
  overflow: auto;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

/* Pop-up message at the bottom of the screen */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 90;
  white-space: nowrap;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  animation: mb-rise .3s ease both;
}

/* Form fields */
.field {
  display: block;
  width: 100%;
  outline: none;
}
textarea.field {
  resize: vertical;
}

.max-440 { max-width: 440px; }
.max-480 { max-width: 480px; }
.max-520 { max-width: 520px; }
.max-560 { max-width: 560px; }
.max-760 { max-width: 760px; }
.max-320 { max-width: 320px; }

.fade { transition: all .15s; }

/* ----- Animations ----- */

@keyframes mb-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes mb-rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Header cart button "wiggle" after something is added to the cart
   (js/site.js adds the .mb-cart-bump class for a moment) */
@keyframes mb-wiggle {
  0%   { transform: rotate(0) scale(1); }
  15%  { transform: rotate(-7deg) scale(1.12); }
  30%  { transform: rotate(6deg) scale(1.12); }
  45%  { transform: rotate(-4deg) scale(1.08); }
  60%  { transform: rotate(3deg) scale(1.04); }
  75%  { transform: rotate(-1deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes mb-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 83, 26, .7); }
  100% { box-shadow: 0 0 0 14px rgba(255, 83, 26, 0); }
}
#mb-cart.mb-cart-bump {
  animation: mb-wiggle .7s ease-in-out;
}
#mb-cart.mb-cart-bump .viewCartButtonContainer {
  border-color: #ff531a !important;
  color: #ff531a !important;
  animation: mb-glow .9s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #mb-cart.mb-cart-bump { animation: none; }
}


/* ---------- 5. Hover effects ----------
   Add one of these classes to give an element a hover effect.
   (!important lets them win over the colours written on the tag.) */

.hover-accent-text:hover   { color: #ff531a !important; }        /* text turns orange          */
.hover-accent-border:hover { border-color: #ff531a !important; } /* border turns orange        */
.hover-accent-bg:hover     { background-color: #ff6a39 !important; } /* orange button lightens */
.hover-raised-bg:hover     { background-color: #14171a !important; } /* dark card lightens     */
.hover-light-text:hover    { color: #f4f2ee !important; }        /* grey text turns white      */
.hover-dim-text:hover      { color: #cfd3d7 !important; }        /* "Home" nav link            */

.focus-accent-border:focus { border-color: #ff531a !important; } /* form fields */


/* ---------- 6. Interactive states (toggled by js/site.js) ---------- */

/* Anything with this class is hidden (mobile menu, checkout popup, etc.) */
.is-hidden {
  display: none !important;
}

/* Option boxes on The Bench page (leg system + condition) */
.mb-choice {
  cursor: pointer;
  background-color: #111315;
  border: 1.5px solid #2a2f35;
}
.mb-choice--leg.is-selected {
  background-color: #1b1410;
  border-color: #ff531a;
}
.mb-choice--condition.is-selected {
  background-color: #1a1410;
  border-color: #ff531a;
}


/* ---------- 7. PayPal button styling ---------- */

/* The "View cart" button spot in the header */
#mb-cart {
  min-height: 44px;
  margin-left: 10px;
}

.mb-burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: 10px;
  padding-top: 12px;
  cursor: pointer;
  border: 1.5px solid #2a2f35;
}
.mb-burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto 5px;
  background-color: #f4f2ee;
}

#mb-cart paypal-cart-button {
  display: block;
}
#mb-cart .viewCartButtonContainer {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f4f2ee !important;
  border: 1.5px solid #2a2f35 !important;
  font-family: 'Saira Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  filter: none !important;
}
#mb-cart .viewCartButtonContainer:hover {
  border-color: #ff531a !important;
  color: #ff531a !important;
}
#mb-cart .viewCartButtonContainer svg path {
  fill: currentColor !important;
}
#mb-cart #cart-btn_count:not(.hidden) {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  padding: 0 6px;
  text-align: center;
  vertical-align: middle;
  background: #ff531a;
  color: #0b0c0d;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
}

#mb-paypal {
  min-height: 56px;
  font-family: 'Barlow', sans-serif;
  color: #f4f2ee;
}
#mb-paypal .item-header,
#mb-paypal .item-description {
  display: none !important;
}
#mb-paypal .input-label {
  font-family: 'Saira Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #cfd3d7 !important;
  margin: 0 0 8px !important;
  display: block;
}
#mb-paypal select,
#mb-paypal textarea {
  background: #0b0c0d !important;
  color: #f4f2ee !important;
  border: 1.5px solid #2a2f35 !important;
  border-radius: 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 15px !important;
  box-shadow: none !important;
  outline: none !important;
}
#mb-paypal select:focus,
#mb-paypal textarea:focus {
  border-color: #ff531a !important;
}
#mb-paypal select option {
  background: #111315;
  color: #f4f2ee;
}
#mb-paypal .selectContainer svg path {
  fill: #ff531a !important;
}
#mb-paypal .addToCartButtonContainer {
  width: 100% !important;
  height: 56px !important;
  border-radius: 0 !important;
  background: #ff531a !important;
  color: #0b0c0d !important;
  border: none !important;
  font-family: 'Saira Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  filter: none !important;
}
#mb-paypal .addToCartButtonContainer:hover {
  background: #ff6a39 !important;
}
#mb-paypal .loader {
  border-top-color: #0b0c0d !important;
}


/* ---------- 8. Mobile / tablet layout ----------
   Tables with class "stack" turn their columns into rows on small
   screens. Their empty "gap" cells become vertical spacing. */

.show-mobile { display: none; }

/* Tablet and below */
@media (max-width: 880px) {
  .hide-mobile { display: none !important; }
  .mb-burger   { display: block !important; }
  #mb-cart     { margin-left: 0; }

  .gutter {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .pad-96, .pad-90, .pad-80 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  table.stack,
  table.stack > tbody,
  table.stack > tbody > tr,
  table.stack > tbody > tr > td {
    display: block;
    width: auto !important;
  }
  table.stack > tbody > tr > td.gap { height: 38px; }

  /* "split" tables use cell padding as the gap between columns */
  table.split > tbody > tr > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  table.split > tbody > tr > td + td { padding-top: 38px; }
  table.split.stack-48 > tbody > tr > td + td { padding-top: 48px; }

  /* Stats strip: 4 across becomes 2 x 2 */
  table.stats > tbody > tr > td {
    float: left;
    width: 50% !important;
  }

  /* About page values: 3 across becomes stacked, lines between */
  table.values,
  table.values > tbody,
  table.values > tbody > tr,
  table.values > tbody > tr > td {
    display: block;
    width: auto !important;
  }
  table.values > tbody > tr > td + td {
    border-left: 0 !important;
    border-top: 1px solid #20242a;
  }

  /* Footer bottom line: items stack */
  table.footer-bar > tbody > tr > td {
    display: block;
    white-space: normal;
    text-align: left !important;
  }
  table.footer-bar > tbody > tr > td.fb-next { padding-top: 16px; }

  /* Heading + side note rows: the note drops below the heading */
  table.wrap-row > tbody > tr > td {
    display: block;
    text-align: left !important;
  }
  table.wrap-row > tbody > tr > td + td { padding-top: 16px; }

  .sticky-gallery { position: static !important; }
  .bg-hero        { height: 80vh !important; }
  .hero-inner     { padding-bottom: 52px !important; }
}

/* Phones */
@media (max-width: 520px) {
  .gutter {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .pad-96, .pad-90, .pad-80 {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
  table.stack > tbody > tr > td.gap { height: 28px; }
  table.split > tbody > tr > td + td { padding-top: 28px; }
  table.split.stack-48 > tbody > tr > td + td { padding-top: 48px; }
  .hero-title { font-size: 46px !important; }
  .hero-lede  { font-size: 16.5px !important; }
}