/* =========================================================================
   v2-field: "Field Manual". A new direction on the same brand.
   Paper grounds, ink type, hairline rules, mono data labels, hard edges.
   The store reads like a well made spec sheet: everything is indexed,
   measured and one look away. Brand hexes only: ink, teal, coral (sale),
   volt (stock), sand, white.
   Scoped to body.v-v2-field so nothing leaks into other builds.
   ========================================================================= */
.v-v2-field {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --gap: clamp(56px, 6vw, 96px);
  --sec-pad: var(--gap);
  --strip-h: 36px;
  --bar-h: 68px;
  --chrome-h: calc(var(--strip-h) + var(--bar-h));
  --rule: 1px solid var(--line);
  --rule-ink: 1px solid var(--ink);
  --rule-dark: 1px solid rgba(255, 255, 255, .14);
  --fs-hero: clamp(58px, 8.4vw, 144px);
  --fs-xl: clamp(40px, 5.2vw, 80px);
  --fs-lg: clamp(30px, 3.4vw, 50px);
  --fs-md: clamp(20px, 1.7vw, 24px);
  --mono: Roboto Mono, ui-monospace, monospace;
  --btn-radius: 0px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad-x: clamp(20px, 3vw, 48px);
  font-size: 16.5px; line-height: 1.6;
}
.v-v2-field h1, .v-v2-field h2, .v-v2-field h3, .v-v2-field h4 { text-wrap: balance; line-height: .95; }
.v-v2-field p, .v-v2-field li { text-wrap: pretty; }
:where(.v-v2-field) h2 { font-size: var(--fs-xl); }

/* ---------- section index: every block on a page is numbered ---------- */
.v-v2-field main { counter-reset: sec; }
.v-v2-field .sec-head, .v-v2-field .c-rail-head, .v-v2-field .phero { counter-increment: sec; }
.v-v2-field .eyebrow, .v-v2-field .kick, .v-v2-field .isla-kick {
  font-family: var(--mono); letter-spacing: .16em; text-indent: 0;
}
.v-v2-field .sec-head .eyebrow::before, .v-v2-field .c-rail-head .eyebrow::before,
.v-v2-field .phero .eyebrow::before {
  content: counter(sec, decimal-leading-zero) " / "; color: var(--ink); font-weight: 700;
}
.v-v2-field .sec-dark .sec-head .eyebrow::before { color: #fff; }

/* ---------- buttons: hard edges, ink and teal ---------- */
.v-v2-field .btn { border-radius: 0; transition: background .16s, color .16s, box-shadow .2s var(--ease), transform .16s var(--ease); }
.v-v2-field .btn-primary { box-shadow: 4px 4px 0 var(--ink); }
.v-v2-field .btn-primary:hover { background: var(--accent); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.v-v2-field .btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.v-v2-field .btn-ghost-l { border: 1.5px solid var(--ink); color: var(--ink); }
.v-v2-field .btn-ghost-l:hover { background: var(--ink); color: #fff; }

/* ---------- chrome: utility strip + full-width bar ---------- */
.v2-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 52; height: var(--strip-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad-x); background: var(--ink); color: #ffffffd9;
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}
.v2-strip p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-strip b { color: var(--accent-2); font-weight: 500; }
.v2-strip nav { display: flex; gap: 22px; }
.v2-strip a { color: #ffffffd9; padding: 9px 0; }
.v2-strip a:hover { color: var(--accent-2); }
.v-v2-field .b-hdr {
  top: var(--strip-h); left: 0; right: 0; translate: none; width: auto; box-sizing: border-box; height: var(--bar-h);
  border-radius: 0; border: 0; border-bottom: var(--rule); background: var(--bone);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0 var(--pad-x); gap: 28px;
}
.v-v2-field .b-hdr.stuck { box-shadow: 0 12px 30px -26px rgba(13, 16, 20, .7); }
.v-v2-field .b-hdr .brand img { height: 24px; width: auto; }
.v-v2-field .b-nav { gap: 0; height: 100%; align-self: stretch; }
.v-v2-field .b-nav > li { display: flex; }
.v-v2-field .b-nav > li > a {
  display: flex; align-items: center; border-radius: 0; padding: 0 16px; height: 100%;
  font-family: var(--mono); font-weight: 500; letter-spacing: .12em; color: var(--ink); background: none;
  box-shadow: inset 0 0 0 transparent; transition: box-shadow .18s, color .18s;
}
.v-v2-field .b-nav > li > a:hover, .v-v2-field .b-nav .hasmenu:hover > a, .v-v2-field .b-nav .hasmenu:focus-within > a {
  background: none; color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent);
}
.v-v2-field .b-nav > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ink); }
.v-v2-field .b-icn { border-radius: 0; border-color: var(--line); }
.v-v2-field .b-icn:hover { border-color: var(--ink); }
.v-v2-field .b-pill { border-radius: 0; box-shadow: 3px 3px 0 var(--ink); }
.v-v2-field .mega { border-radius: 0; border: var(--rule-ink); box-shadow: 8px 8px 0 rgba(13, 16, 20, .12); }
.v-v2-field .drawer-top { border-bottom: var(--rule-ink); }

/* ---------- home hero: split sheet, type left, water right ---------- */
.v-v2-field .c-hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch;
  min-height: calc(100svh - var(--chrome-h)); margin-top: var(--chrome-h);
  background: var(--bone); text-align: left; border-bottom: var(--rule);
}
.v-v2-field .c-hero::after { display: none; }
.v-v2-field .c-hero video, .v-v2-field .c-hero > img {
  position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 480px;
  object-fit: cover; border-left: var(--rule);
}
.v-v2-field .c-hero-in {
  grid-column: 1; grid-row: 1; align-self: center; width: auto; margin: 0; text-align: left;
  padding: clamp(40px, 6vw, 96px) var(--pad-x);
}
.v-v2-field .c-hero .kick { color: var(--accent-txt); text-align: left; opacity: 1; margin: 0 0 var(--s5); letter-spacing: .16em; }
.v-v2-field .c-hero h1 { color: var(--ink); font-size: var(--fs-hero); text-shadow: none; letter-spacing: -.015em; }
.v-v2-field .c-hero h1 em { color: var(--accent-txt); }
.v-v2-field .c-hero p:not(.kick) { color: var(--body); margin: var(--s5) 0 0; max-width: 46ch; font-size: clamp(17px, 1.3vw, 19px); }
.v-v2-field .c-hero-in > p:has(.btn) { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.v-v2-field .v-hero-alt { display: contents; }
.v2-spec dl { margin: 0; display: grid; }
.v2-spec dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-top: var(--rule); }
.v2-spec dl > div:last-child { border-bottom: var(--rule); }
.v2-spec dt { font-family: Anton, 'Arial Narrow', sans-serif; font-size: 22px; line-height: 1; color: var(--ink); text-transform: uppercase; }
.v2-spec dd { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.v2-spec-hero { display: block; margin-top: var(--s7); max-width: 520px; }

/* ---------- the marquee becomes a ruled ink band ---------- */
.v-v2-field .marq { background: var(--ink); color: #fff; border-block: var(--rule-dark); }
.v-v2-field .marq-t i.sep { color: var(--accent-2); opacity: 1; }

/* ---------- story panels: photo and copy side by side on paper ---------- */
.v-v2-field .c-panel {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 0; align-items: stretch;
  background: var(--bone); border-bottom: var(--rule);
}
.v-v2-field .c-panel > img:not(.c-panel-fish) {
  position: relative; inset: auto; grid-column: 1; grid-row: 1; height: 100%; min-height: clamp(420px, 44vw, 660px);
}
.v-v2-field .c-panel.right > img:not(.c-panel-fish) { grid-column: 2; border-left: var(--rule); }
.v-v2-field .c-panel:not(.right) > img:not(.c-panel-fish) { border-right: var(--rule); }
.v-v2-field .c-panel-in {
  grid-column: 2; grid-row: 1; width: auto; margin: 0; display: flex; align-items: center; justify-content: flex-start;
  text-align: left; padding: clamp(40px, 5vw, 88px) var(--pad-x);
}
.v-v2-field .c-panel.right .c-panel-in { grid-column: 1; }
.v-v2-field .c-panel-box { color: var(--body); max-width: 40ch; }
.v-v2-field .c-panel-box h2 { color: var(--ink); font-size: var(--fs-lg); margin-bottom: var(--s4); }
.v-v2-field .c-panel-box p { font-size: 17px; margin-bottom: var(--s5); }
.v-v2-field .c-panel .num {
  font-size: clamp(88px, 10vw, 156px); color: transparent; -webkit-text-stroke: 1.5px var(--ink); margin-bottom: var(--s4);
}
.v-v2-field .c-panel .btn-ghost-d { color: var(--ink); border: 1.5px solid var(--ink); }
.v-v2-field .c-panel .btn-ghost-d:hover { background: var(--ink); color: #fff; }
.v-v2-field .c-panel-fish { display: none; }
.v-v2-field .c-panel::after { display: none; }
.v-v2-field .c-panel.right .c-panel-in { text-align: left; justify-content: flex-start; }
/* the closing panel is the sign-off: ink ground */
.v-v2-field main > .shopify-section:last-child .c-panel { background: var(--ink); border-bottom: 0; }
.v-v2-field main > .shopify-section:last-child .c-panel-box { color: #ffffffd9; }
.v-v2-field main > .shopify-section:last-child .c-panel-box h2 { color: #fff; }

/* ---------- best sellers: a ruled grid, every piece numbered ---------- */
.v-v2-field section.sec:has(.c-rail) { padding-bottom: 0; }
.v-v2-field .c-rail-head { width: auto; margin: 0; padding: 0 var(--pad-x) var(--s6); }
.v-v2-field .c-rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible; padding: 0;
  border-top: var(--rule); counter-reset: card; scroll-snap-type: none;
}
.v-v2-field .c-card {
  flex: none; padding: var(--s5) var(--pad-x) var(--s6); border-right: var(--rule); border-bottom: var(--rule);
  counter-increment: card; transition: background .2s;
}
.v-v2-field .c-card:nth-child(3n) { border-right: 0; }
.v-v2-field .c-card:hover { background: var(--sand); }
.v-v2-field .c-card-media { border-radius: 0; aspect-ratio: 1 / 1; background: var(--bone); margin-bottom: var(--s4); }
.v-v2-field .c-card:hover .c-card-media { background: var(--bone); }
.v-v2-field .c-card-media::after {
  content: "No. " counter(card, decimal-leading-zero); position: absolute; right: 0; bottom: 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--body); background: var(--bone); padding: 4px 0 0 8px;
}
.v-v2-field .c-card h3 { font-size: 18px; color: var(--ink); }

/* ---------- vida en la isla: kept, framed by rules ---------- */
.v-v2-field .c-isla { border-bottom: var(--rule); }

/* ---------- page heads ---------- */
.v-v2-field main:not(:has(.pv)):not(:has(> .c-hero:first-child, > .ab-hero:first-child, > .hero:first-child)) { padding-top: var(--chrome-h); }
.v-v2-field.reeled-hero-page main { padding-top: 0; }
.v-v2-field .phero { padding: clamp(36px, 4vw, 64px) 0 clamp(28px, 3vw, 44px); border-bottom: var(--rule-ink); border-image: none; }
.v-v2-field .phero h1 { font-size: var(--fs-xl); }

/* ---------- product grids: same ruled sheet everywhere ---------- */
.v-v2-field .pgrid { gap: 0; border-top: var(--rule); border-left: var(--rule); }
.v-v2-field .pcard { padding: var(--s4) var(--s4) var(--s5); border-right: var(--rule); border-bottom: var(--rule); transition: background .2s; }
.v-v2-field .pcard:hover { background: var(--sand); }
.v-v2-field .pcard-media { border-radius: 0; background: var(--bone); }
.v-v2-field .pcard:hover .pcard-media { background: var(--bone); }
.v-v2-field .pcard-t { font-size: 17px; }
.v-v2-field .pbadge { border-radius: 0; }
.v-v2-field .quick .btn { box-shadow: none; }
.v-v2-field .fgroup, .v-v2-field .filters { border-radius: 0; }

/* ---------- product page ---------- */
.v-v2-field .pdp { padding-top: 0; gap: 0; border-bottom: var(--rule); }
.v-v2-field .gal { padding: var(--s6) var(--s6) var(--s6) 0; border-right: var(--rule); top: calc(var(--chrome-h) + 16px); }
.v-v2-field .stage, .v-v2-field .thumb { border-radius: 0; }
.v-v2-field .stage { background: var(--sand); }
.v-v2-field .pinfo { padding: var(--s6) 0 var(--s6) var(--s7); position: sticky; top: calc(var(--chrome-h) + 8px); align-self: start; }
.v-v2-field .pinfo h1 { font-size: clamp(38px, 4vw, 62px); }
.v-v2-field .pinfo .price-lg { font-size: 20px; padding-bottom: var(--s5); border-bottom: var(--rule); margin-bottom: var(--s5); }
.v-v2-field .pinfo .ship-bar { display: none; }
.v-v2-field .product-form__input--pill label { border-radius: 0; min-height: 50px; }
.v-v2-field .pinfo product-form, .v-v2-field .pinfo .product-form__buttons { display: block; width: 100%; max-width: none; }
.v-v2-field .product-form__submit { width: 100%; min-height: 60px; font-size: 16px; }
.v2-spec-pdp { display: block; margin-top: var(--s5); }
.v2-spec-pdp dl > div { grid-template-columns: 104px 1fr; }
.v2-spec-pdp dt { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--ink); }
.v2-spec-pdp dd { text-transform: none; letter-spacing: 0; font-family: Barlow, sans-serif; font-size: 15.5px; }
.v-v2-field .acc-i { border-color: var(--line); }

/* ---------- region guides: a field sheet ---------- */
.v-v2-field .hero .hero-media::after {
  background: linear-gradient(180deg, rgba(13, 16, 20, .55) 0%, rgba(13, 16, 20, .25) 36%, var(--hero-tint) 72%,
    color-mix(in srgb, var(--ink) 92%, transparent) 100%);
}
.v-v2-field .hero .eyebrow { color: var(--accent-2); }
.v-v2-field .hero + .sec .prose > ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: var(--rule); border-left: var(--rule); }
.v-v2-field .hero + .sec .prose > ul > li {
  margin: 0; padding: 10px 16px 9px; border-right: var(--rule); border-bottom: var(--rule);
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink);
}
@media (min-width: 981px) {
  .v-v2-field .hero + .sec .prose {
    max-width: none; display: grid; grid-template-columns: minmax(240px, 30%) 1fr; column-gap: clamp(32px, 5vw, 88px);
  }
  .v-v2-field .hero + .sec .prose > * { grid-column: 2; max-width: 68ch; }
  .v-v2-field .hero + .sec .prose > h2, .v-v2-field .hero + .sec .prose > h3 {
    grid-column: 1; margin: 0 0 28px; padding-top: 14px; border-top: var(--rule-ink);
  }
  .v-v2-field .hero + .sec .prose > h3 { font-size: 21px; }
  .v-v2-field .hero + .sec .prose > p, .v-v2-field .hero + .sec .prose > ul { margin-top: 14px; }
  .v-v2-field .hero + .sec .prose > h2:not(:first-child) { grid-column: 1 / -1; margin-top: 48px; }
}

/* ---------- articles ---------- */
.v-v2-field .article-head { max-width: 72ch; margin-inline: auto; }
.v-v2-field .art-hero { border-radius: 0; max-width: 1180px; margin-inline: auto; }
.v-v2-field .art-hero ~ .prose { max-width: 68ch; margin-inline: auto; font-size: 18px; }
.v-v2-field .art-hero ~ .prose > p:first-child { font-size: 21px; line-height: 1.55; color: var(--ink); }
.v-v2-field .art-hero ~ .share, .v-v2-field .authorbox { margin-inline: auto; max-width: 68ch; border-radius: 0; }

/* ---------- journal ---------- */
.v-v2-field .jr-tag, .v-v2-field .jr-meta i { border-radius: 0; }

/* ---------- cart and drawer ---------- */
.v-v2-field .summary, .v-v2-field .ri-cart { border-radius: 0; }
.v-v2-field .ri-x { border-radius: 0; }
.v-v2-field .ri-cart .btn-primary { box-shadow: 4px 4px 0 #ffffff33; }

/* ---------- footer ---------- */
.v-v2-field .ftr { border-top: 0; border-image: none; }
.v-v2-field .ftr-grid { border-bottom: var(--rule-dark); }

/* ---------- 980 and down ---------- */
@media (max-width: 980px) {
  .v-v2-field { --bar-h: 64px; }
  .v2-strip nav { display: none; }
  .v-v2-field .b-hdr { gap: 12px; }
  .v-v2-field .b-hdr > nav { display: none; }
  .v-v2-field .b-hdr .brand img { height: auto; width: min(210px, calc(100vw - 150px)); }
  .v2-strip { justify-content: center; }
  .v-v2-field .c-hero { grid-template-columns: 1fr; min-height: 0; }
  .v-v2-field .c-hero video, .v-v2-field .c-hero > img { grid-column: 1; grid-row: 2; min-height: 0; aspect-ratio: 4 / 3; border-left: 0; border-top: var(--rule); }
  .v-v2-field .c-hero-in { grid-row: 1; }
  .v-v2-field .c-panel, .v-v2-field .c-panel.right { grid-template-columns: 1fr; }
  .v-v2-field .c-panel > img:not(.c-panel-fish), .v-v2-field .c-panel.right > img:not(.c-panel-fish) {
    grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; border: 0; border-bottom: var(--rule);
  }
  .v-v2-field .c-panel-in, .v-v2-field .c-panel.right .c-panel-in { grid-column: 1; grid-row: 2; }
  .v-v2-field .c-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-v2-field .c-card:nth-child(3n) { border-right: var(--rule); }
  .v-v2-field .c-card:nth-child(2n) { border-right: 0; }
  .v-v2-field .gal { padding: var(--s5) 0; border-right: 0; position: static; }
  .v-v2-field .pinfo { padding: 0 0 var(--s6); position: static; }
}

/* ---------- 390 pass, last so it wins ---------- */
@media (max-width: 640px) {
  .v-v2-field { --strip-h: 34px; --pad-x: 16px; }
  .v2-strip-more { display: none; }
  .v-v2-field .c-hero h1 { font-size: clamp(52px, 15vw, 68px); }
  .v-v2-field .c-hero-in > p:has(.btn) .btn { width: 100%; }
  .v2-spec-hero dl > div { grid-template-columns: 88px 1fr; }
  .v2-spec-hero dt { font-size: 20px; }
  .v2-spec-pdp dl > div { grid-template-columns: 96px 1fr; gap: 12px; }
  .v-v2-field .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-v2-field .pcard-t { font-size: 15.5px; }
  .v-v2-field .c-card { padding: var(--s4) var(--s3) var(--s5); }
  .v-v2-field .c-card h3 { font-size: 16px; }
  .v-v2-field .c-card-media::after { font-size: 14px; }
  .v-v2-field .pcard { padding: var(--s3) var(--s3) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .v-v2-field .btn-primary:hover, .v-v2-field .btn-primary:active { transform: none; }
}