/* ===================================================================
   Polo theme: "Pavilion". Loaded after main.css on polo.thegearsports.com only.
   Clubhouse oxblood, saddle tan and ivory: a hero striped like a mown polo
   field with the white sideline boards beneath it, chukka-numbered cards
   (Roman numerals, like a clubhouse scoreboard) and stitched-leather gear boxes.
   =================================================================== */
html:root {
  --paper:       #f7f3ea;
  --paper-2:     #efe8d8;
  --ink:         #1d1714;
  --ink-soft:    #4f4540;
  --ink-faint:   #6e625a;
  --line:        #e2d7c3;
  --accent:      #7a1f2b;
  --accent-deep: #631824;
  --accent-soft: #f4e4e2;
  --white:       #ffffff;
  --oxblood:     #5a1620;
  --tan:         #a8743f;
  --tan-light:   #e6c9a0;
  --turf:        #3d7036;
  --turf-2:      #487e3f;
  --display: 'Cormorant Garamond', Garamond, Georgia, serif;
  --body:    'Karla', system-ui, sans-serif;
  --radius:  3px;
}
html:root[data-theme="dark"] {
  --paper:       #161012;
  --paper-2:     #1f1619;
  --ink:         #f2ebe0;
  --ink-soft:    #d2c6b8;
  --ink-faint:   #a99d90;
  --line:        #33262a;
  --accent:      #e0828c;
  --accent-deep: #f0a7ae;
  --accent-soft: #2c1a1e;
  --white:       #1f1619;
  --tan:         #d6a670;
}

body { font-size: 1.06rem; }
body::before { display: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
.eyebrow { color: var(--tan); font-family: var(--body); font-weight: 700; letter-spacing: .16em; }
html[data-theme="dark"] .eyebrow { color: var(--tan); }

/* Nav: oxblood bar with a saddle-tan rule */
.nav { background: var(--oxblood); border-bottom: 3px solid var(--tan); backdrop-filter: none; }
html[data-theme="dark"] .nav { background: #3a0f16; }
.brand { color: #f7f3ea; }
.brand .rev { color: var(--tan-light); font-style: italic; }
.brand__mark { background: #f7f3ea; color: var(--oxblood); }
.brand__sub { color: #e2c9c4; }
.nav__links a { color: #f7f3ea; font-weight: 600; font-size: .9rem; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--tan-light); }
.nav__cta { background: var(--tan); color: #fff !important; }
.nav__cta:hover { background: #f7f3ea; color: var(--oxblood) !important; }
.nav__toggle span { background: #f7f3ea; }
.nav .iconbtn { background: transparent; border-color: #8a3a44; color: #f7f3ea; }
.nav .iconbtn:hover { color: var(--tan-light); border-color: var(--tan-light); }
@media (max-width: 1120px) {
  .nav__links { background: var(--oxblood); border-bottom-color: #8a3a44; }
  .nav__links a { border-bottom-color: #74222d; }
}

/* Hero: mown turf stripes, soft late-afternoon light, then the white sideline boards */
.hero {
  background-color: var(--turf); color: #fff;
  background-image:
    linear-gradient(180deg, rgba(255,236,190,.16), rgba(0,0,0,0) 45%, rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, var(--turf) 0 90px, var(--turf-2) 90px 180px);
  padding-bottom: calc(clamp(2.5rem,6vw,4rem) + 22px);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: 22px; aspect-ratio: auto; transform: none; border-radius: 0; opacity: 1; filter: none;
  background: linear-gradient(180deg, #ffffff 0 70%, #d9d3c6 70% 100%);
  box-shadow: 0 -6px 10px rgba(0,0,0,.18);
}
.hero h1 { color: #fff; font-weight: 700; }
.hero h1 .spin { color: var(--tan-light); font-style: italic; }
.hero h1 .hero__brand { color: var(--tan-light); font-family: var(--body); font-weight: 700; font-style: normal; font-size: .22em; letter-spacing: .24em; text-transform: uppercase; }
.hero .eyebrow { color: #f3e2c4; }
.hero .lede { color: #eef3e8; }
.hero .btn--solid { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.hero .btn--solid:hover { background: #fff; border-color: #fff; color: var(--oxblood); }
.hero .btn--ghost { border-color: #fff; color: #fff; }
.hero .btn--ghost:hover { background: #fff; color: var(--turf); }

.btn { font-weight: 700; }
.btn--solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Cards: numbered in chukkas, Roman numerals in a tan roundel */
.grid { counter-reset: chukka; }
.card::before { display: none; }
.card:hover { border-color: var(--tan); }
a.card { counter-increment: chukka; }
a.card > .card__num { font-size: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--tan); color: var(--accent); }
a.card > .card__num::after { content: counter(chukka, upper-roman); font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.card__tag { color: var(--tan); }
html[data-theme="dark"] .card__tag { color: var(--tan); }

/* Section headings: a small mallet-head bar before the title */
.shead { border-bottom: 1px solid var(--tan); }
.shead h2::before { content: ""; display: inline-block; width: .9em; height: .32em; margin-right: .45em; background: var(--tan); border-radius: .16em; vertical-align: .18em; }

.callout { background: var(--accent-soft); border: 0; border-left: 4px solid var(--accent); }

.facts thead th { background: var(--oxblood); color: #f7f3ea; border-bottom: 3px solid var(--tan); }
.facts tbody tr:nth-child(even) td { background: #fbf8f1; }
html[data-theme="dark"] .facts tbody tr:nth-child(even) td { background: #1d1417; }

/* Gear box: saddle leather with a stitched edge */
.gearline { background: #7b5130; border: 0; color: #fbf3e6; position: relative; outline: 2px dashed rgba(255,240,215,.55); outline-offset: -8px; }
.gearline__t { color: #f6deb6; }
.gearline a.btn { background: #fbf3e6; border-color: #fbf3e6; color: #5a3a20; }
.gearline a.btn:hover { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }

.footer { background: #2b0b10; border-top: 3px solid var(--tan); }
.footer, .footer a, .footer__bottom a { color: #f2e8dc; }
.footer__brand .rev { color: var(--tan-light); }
.footer h4 { color: var(--tan-light); }

/* Buying-guide pick buttons in oxblood */
.pick__cta .btn--solid { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.pick__cta .btn--solid:hover { background: var(--tan); border-color: var(--tan); }