/* DR Armory: approved design (Creation Station drop-in 20261019-224245_dropin_8264d, owner-approved mockup).
   .dra-header and .dra-footer are site-wide chrome (includes/dra-header.php, dra-footer.php); .dra-home scopes the homepage.
   Geometry and tokens from the pack (DESIGN_SPEC.md, design.tokens.css). The theme and professional-fixes ship broad
   !important rules (letter-spacing 0 on *, img height auto, h1-h3 fonts and colours, section padding/background, footer
   navy), so every rule that must win carries !important and enough specificity to beat them. */
:root {
  --dra-red-900: #780005; --dra-red-800: #990007; --dra-red-700: #b80009; --dra-red-600: #d0000b; --dra-red-500: #ed0b14;
  --dra-ink: #141414; --dra-muted: #555b61; --dra-gray-400: #969ba0; --dra-border: #dfe2e5; --dra-border-strong: #bfc3c7;
  --dra-char-950: #101214; --dra-char-900: #171b1e; --dra-light: #d8dadd; --dra-page: #f5f6f7;
  --dra-grad-red: linear-gradient(180deg, #d0000b 0%, #9a0007 100%);
  --dra-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --dra-body: "Roboto Condensed", Arial, sans-serif;
  --dra-word: "Orbitron", Arial, sans-serif;
  --dra-wrap: 1392px;
}
.dra-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

/* ===================== HEADER (site-wide) ===================== */
/* Header band carries the mockup's faint smoky-grey shading (fading to white at the nav), not flat white. */
.dra-header { background: linear-gradient(180deg, #eceef1 0%, #f5f6f8 52%, #fdfdfe 100%); border-bottom: 1px solid var(--dra-border); position: relative; z-index: 900; font-family: var(--dra-body); }
.dra-header__inner {
  width: calc(100% - clamp(20px, 3.333vw, 48px)); max-width: var(--dra-wrap); margin: 0 auto;
  display: grid; grid-template-columns: 260px minmax(320px, 524px) 1fr auto auto; grid-template-rows: 82px 54px;
  column-gap: 28px; align-items: center;
}
.dra-logo { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding: 0 0 0 12px; text-decoration: none !important; display: block; }
/* Header logo = the owner's circular badge, file untouched (Brad 10/22). 124px desktop, 108px tablet, 52px phones.
   The typed name beside it is shown on phones only, where the badge's own lettering is too small to read. */
.dra-lockup { width: auto; height: auto; display: flex; flex-direction: row; align-items: center; gap: 6px; }
html body .dra-lockup img.dra-lockup__badge { display: block; width: 124px !important; height: 124px !important; max-width: none !important; object-fit: contain; }
@media (min-width: 768px) { .dra-header .dra-lockup__word { display: none !important; } }
html body .dra-lockup__word { display: block; font-family: var(--dra-word) !important; font-size: 27px; line-height: .86; font-weight: 900; letter-spacing: .02em !important; white-space: nowrap; text-transform: uppercase; }
.dra-lockup__dr { color: #b70808 !important; }
.dra-lockup__armory { color: #111517 !important; }
html body .dra-lockup__tag { display: block; margin-top: 4px; font-family: var(--dra-word) !important; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .22em !important; color: #c70a0a !important; white-space: nowrap; text-transform: uppercase; }

.dra-search { grid-column: 2; grid-row: 1; position: relative; }
.dra-search form { display: flex; height: 45px; margin: 0; }
html body .dra-header .dra-search input[name="q"] {
  flex: 1 1 auto; min-width: 0; height: 45px !important; min-height: 45px !important; margin: 0; padding: 0 16px !important;
  border: 1px solid var(--dra-border) !important; border-right: 0 !important; border-radius: 4px 0 0 4px !important;
  background: #fff !important; color: var(--dra-ink) !important; font: 400 16px/45px var(--dra-body) !important; box-shadow: none !important;
}
html body .dra-header .dra-search input[name="q"]:focus { outline: 2px solid var(--dra-red-600); outline-offset: -2px; }
html body .dra-header .dra-search__btn {
  flex: 0 0 54px; width: 54px; height: 45px; min-height: 45px !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 0 4px 4px 0 !important; background: var(--dra-grad-red) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dra-search__btn:hover { background: var(--dra-red-800) !important; }
.dra-search__btn svg { width: 22px; height: 22px; }
.dra-acct, .dra-cart { grid-row: 1; display: inline-flex; align-items: center; gap: 8px; height: 45px; color: var(--dra-ink) !important; text-decoration: none !important; font: 700 14px/1 var(--dra-body); white-space: nowrap; position: relative; }
.dra-acct { grid-column: 4; }
.dra-cart { grid-column: 5; }
.dra-acct svg, .dra-cart svg { width: 26px; height: 26px; flex: 0 0 26px; }
.dra-acct:hover, .dra-cart:hover { color: var(--dra-red-700) !important; }
.dra-cart__badge { display: none; }
/* the theme draws every .cart-count as a blue pill; here it is plain text in "Cart (0)" and a red badge on small screens */
html body .dra-header .dra-label .cart-count { display: inline !important; background: none !important; color: inherit !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; height: auto !important; border-radius: 0 !important; font: inherit !important; box-shadow: none !important; position: static !important; }
html body .dra-header .dra-cart__badge.cart-count { display: none !important; }

.dra-nav { grid-column: 2 / -1; grid-row: 2; align-self: stretch; }
.dra-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 31px; height: 54px; align-items: stretch; }
.dra-nav__item { position: relative; display: flex; align-items: stretch; }
.dra-nav__link { display: inline-flex; align-items: center; gap: 6px; height: 54px; font: 700 16px/1 var(--dra-display) !important; text-transform: uppercase; color: var(--dra-ink) !important; text-decoration: none !important; border-bottom: 2px solid transparent; white-space: nowrap; letter-spacing: .01em !important; }
.dra-nav__link:hover, .dra-nav__item:focus-within > .dra-nav__link { color: var(--dra-red-700) !important; border-bottom-color: var(--dra-red-700); }
.dra-nav__link.is-sale { color: var(--dra-red-600) !important; }
.dra-nav__chev { width: 11px; height: 11px; }
.dra-nav__menu { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: -14px; min-width: 230px; background: #fff; border: 1px solid var(--dra-border); border-top: 2px solid var(--dra-red-600); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 950; }
.dra-nav__item.has-menu:hover > .dra-nav__menu, .dra-nav__item.has-menu:focus-within > .dra-nav__menu { opacity: 1; visibility: visible; transform: none; }
.dra-nav__menu a { display: block; padding: 9px 18px; font: 400 15px/1.2 var(--dra-body); color: var(--dra-ink) !important; text-decoration: none !important; }
.dra-nav__menu a:hover, .dra-nav__menu a:focus { background: #f6f6f7; color: var(--dra-red-700) !important; }
.dra-header a:focus-visible, .dra-header button:focus-visible { outline: 2px solid var(--dra-red-600); outline-offset: 2px; }

@media (min-width: 768px) and (max-width: 1023px) {
  .dra-header__inner { grid-template-columns: 190px minmax(0, 1fr) auto auto; grid-template-rows: 74px 50px; column-gap: 18px; }
  .dra-logo { padding: 0; }
  html body .dra-lockup img.dra-lockup__badge { width: 108px !important; height: 108px !important; }
  .dra-search { grid-column: 2; }
  .dra-acct { grid-column: 3; } .dra-cart { grid-column: 4; }
  .dra-acct .dra-label, .dra-cart .dra-label { display: none; }
  html body .dra-header .dra-cart__badge.cart-count { display: inline-flex !important; position: absolute !important; top: 3px; right: -8px; background: var(--dra-red-600) !important; border-radius: 9px !important; padding: 0 5px !important; min-width: 18px !important; height: 18px !important; font: 700 11px/18px var(--dra-body) !important; color: #fff !important; justify-content: center; }
  .dra-cart__badge { display: inline-flex; position: absolute; top: 3px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dra-red-600); color: #fff; font: 700 11px/18px var(--dra-body); justify-content: center; }
  .dra-nav { grid-column: 2 / -1; overflow-x: auto; scrollbar-width: none; }
  .dra-nav::-webkit-scrollbar { display: none; }
  .dra-nav__list { gap: 24px; height: 50px; }
  .dra-nav__link { height: 50px; font-size: 15px !important; }
  .dra-nav__menu, .dra-nav__chev { display: none !important; }
}
.dra-burger, .dra-drawer { display: none; }
@media (max-width: 767px) {
  /* Phone: menu button, logo, account, cart on one row; search below; the nav row is replaced by the slide-out menu. */
  .dra-header__inner { width: 100%; grid-template-columns: 44px 1fr 44px 44px; grid-template-rows: 58px 56px; column-gap: 6px; padding: 0 10px; }
  .dra-burger { display: inline-flex; grid-column: 1; grid-row: 1; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; background: none !important; border: 0; cursor: pointer; }
  .dra-burger span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--dra-ink); }
  .dra-logo { grid-column: 2; grid-row: 1; padding: 0; align-self: center; }
  .dra-nav { display: none !important; }
  .dra-drawer:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 2000; }
  .dra-drawer__shade { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); }
  .dra-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); background: #fff; overflow-y: auto; box-shadow: 4px 0 24px rgba(0, 0, 0, .2); }
  .dra-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 18px; border-bottom: 3px solid var(--dra-red-600); }
  .dra-drawer__title { font: 700 20px/1 var(--dra-display); text-transform: uppercase; color: var(--dra-ink); }
  .dra-drawer__close { width: 44px; height: 44px; border: 0; background: none !important; font-size: 30px; line-height: 1; color: var(--dra-ink); cursor: pointer; }
  .dra-drawer__list, .dra-drawer__list ul { list-style: none; margin: 0; padding: 0; }
  .dra-drawer__list > li { border-bottom: 1px solid var(--dra-border); }
  .dra-drawer__list summary, .dra-drawer__list > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 18px; font: 700 17px/1 var(--dra-display); text-transform: uppercase; color: var(--dra-ink) !important; text-decoration: none !important; cursor: pointer; list-style: none; }
  .dra-drawer__list summary::-webkit-details-marker { display: none; }
  .dra-drawer__list summary::after { content: "+"; font: 400 22px/1 var(--dra-body); color: var(--dra-red-600); }
  .dra-drawer__list details[open] summary::after { content: "\2212"; }
  .dra-drawer__list > li > a.is-sale { color: var(--dra-red-600) !important; }
  .dra-drawer__list details ul { padding: 0 0 8px; background: #f7f7f8; }
  .dra-drawer__list details ul a { display: block; padding: 12px 18px 12px 30px; font: 400 16px/1.2 var(--dra-body); color: var(--dra-ink) !important; text-decoration: none !important; }
  html.dra-drawer-open, html.dra-drawer-open body { overflow: hidden; }
  .dra-lockup { width: auto; height: 52px; }
  html body .dra-lockup img.dra-lockup__badge { width: 52px !important; height: 52px !important; }
  /* The DR.ARMORY name sits beside the mark on phones (Brad 10/21: "the logo is there but not the name"). Its size is
     capped by what the logo cell has left (100vw - 2x10px padding - three 44px icon cells - three 6px gaps - the 61px
     mark - 6px gap; the word is ~7x its font size wide), so it never reaches the account icon. The tagline would be
     ~6px here, so it stays off. */
  html body .dra-header .dra-lockup { flex-direction: row; align-items: center; gap: 6px; }
  html body .dra-header .dra-lockup__word { font-size: min(clamp(13px, 4.1vw, 17px), calc((100vw - 228px) / 7.3)); }   /* 228 = padding, icons, gaps + the 52px badge + 6px gap */
  /* The whole typed name in the logo's dark crimson (Brad 10/22), sampled from his wordmark file's lettering (#61131a). */
  html body .dra-header .dra-lockup__dr { color: #61131a !important; }
  html body .dra-header .dra-lockup__armory { color: #111517 !important; }   /* Brad 10/29: "Armory" in black on mobile */
  /* Brad 10/29: the word beside the badge is the footer logo itself, cut from dra-logo-footer-wordmark.png (was Orbitron text) */
  html body .dra-header img.dra-lockup__wordmark { width: min(150px, calc(100vw - 228px)) !important; max-width: none !important; height: auto !important; font-size: 0; }
  .dra-header .dra-lockup__tag { display: none !important; }
  .dra-acct { grid-column: 3; grid-row: 1; } .dra-cart { grid-column: 4; grid-row: 1; }
  .dra-acct, .dra-cart { width: 44px; height: 44px; justify-content: center; }
  .dra-acct .dra-label, .dra-cart .dra-label { display: none; }
  html body .dra-header .dra-cart__badge.cart-count { display: inline-flex !important; position: absolute !important; top: 2px; right: 0; background: var(--dra-red-600) !important; border-radius: 9px !important; padding: 0 5px !important; min-width: 18px !important; height: 18px !important; font: 700 11px/18px var(--dra-body) !important; color: #fff !important; justify-content: center; }
  .dra-cart__badge { display: inline-flex; position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dra-red-600); color: #fff; font: 700 11px/18px var(--dra-body); justify-content: center; }
  .dra-search { grid-column: 1 / -1; grid-row: 2; }
  .dra-search form, html body .dra-header .dra-search input[name="q"] { height: 46px !important; min-height: 46px !important; }
  html body .dra-header .dra-search__btn { flex-basis: 50px; width: 50px; height: 46px; }
  .dra-nav { grid-column: 1 / -1; grid-row: 3; margin: 0 -10px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--dra-border); }
  .dra-nav::-webkit-scrollbar { display: none; }
  .dra-nav__list { gap: 22px; height: 44px; }
  .dra-nav__link { height: 44px; font-size: 15px !important; }
  .dra-nav__menu, .dra-nav__chev { display: none !important; }
}
/* Folded phones (under 310px) have no room for the name beside the mark: mark only, as before. */
@media (max-width: 309px) { .dra-header .dra-lockup__word { display: none !important; } }

/* Desktop (>=1024): search bar centered in the header (logo left, account + cart right), nav centered. Brad 2026-10-20. */
@media (min-width: 1024px) {
  .dra-header__inner { grid-template-columns: 1fr auto auto; position: relative; }
  .dra-search { position: absolute; grid-column: 1 / -1; grid-row: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(360px, 42vw, 520px); margin: 0; z-index: 3; }
  .dra-acct { grid-column: 2; }
  .dra-cart { grid-column: 3; }
  .dra-nav { grid-column: 1 / -1; }
  .dra-nav__list { justify-content: center; }
}
/* 1024-1319: a page-centred nav cannot clear the 252px lockup, so FIREARMS ran under DR.ARMORY (10/21). Here the nav
   centres in the space right of the logo; 1320+ keeps the page-centred row under the centred search. */
@media (min-width: 1024px) and (max-width: 1319px) {
  .dra-nav { padding-left: 290px; }
  .dra-nav__list { gap: 24px; }
}

/* ===================== HOMEPAGE (.dra-home) ===================== */
.dra-home {
  background-color: var(--dra-page) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64l28 16v32M28 64 0 80v32' fill='none' stroke='%23000' stroke-opacity='.035' stroke-width='1'/%3E%3C/svg%3E") !important;
  padding: 10px 0 0; font-family: var(--dra-body); color: var(--dra-ink);
}
html body .dra-home section { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: visible !important; }
.dra-wrap { width: calc(100% - clamp(20px, 3.333vw, 48px)); max-width: var(--dra-wrap); margin-left: auto; margin-right: auto; }
.dra-home a:focus-visible, .dra-home button:focus-visible { outline: 2px solid var(--dra-red-600); outline-offset: 2px; }
.dra-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--dra-grad-red) !important; color: #fff !important; text-decoration: none !important; border: 0 !important; border-radius: 3px; font: 700 18px/1 var(--dra-display) !important; text-transform: uppercase; letter-spacing: .02em !important; cursor: pointer; transition: background .15s; }
.dra-btn:hover { background: var(--dra-red-800) !important; }
.dra-btn__arrow { display: inline-block; transition: transform .15s; }
.dra-btn:hover .dra-btn__arrow { transform: translateX(4px); }

/* --- Campaign mosaic --- */
.dra-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 210px 210px 200px; gap: 10px; }
.dra-tile { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); background: #e9eaec; display: block; color: inherit; text-decoration: none !important; isolation: isolate; }
.dra-tile--bf { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.dra-tile--holosun { grid-column: 7 / span 6; grid-row: 1; }
.dra-tile--tisas { grid-column: 7 / span 6; grid-row: 2; }
.dra-tile--fn { grid-column: 1 / span 4; grid-row: 3; }
.dra-tile--handguns { grid-column: 5 / span 4; grid-row: 3; }
.dra-tile--optics { grid-column: 9 / span 4; grid-row: 3; }
html body .dra-home .dra-mosaic .dra-tile img.dra-tile__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: right center; transition: transform .35s ease; z-index: -2; }
.dra-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dra-tile-scrim, none); transition: background .2s; }
/* Gradient scrim removed (Brad 2026-10-20): the cells show the clean photo with no left-to-right fade. */
.dra-tile--light { --dra-tile-scrim: none; }
.dra-tile--dark { --dra-tile-scrim: none; }
@media (hover: hover) { a.dra-tile:hover img.dra-tile__img { transform: scale(1.025); } a.dra-tile:hover::after { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .06); } }
/* 2026-10-21 hero EKG video (includes/dra-hero-video.php): over the Black Friday still with the same cover/right-centre
   fit, so the frames line up with the still exactly (only the monitor screen moves); scales with it on hover.
   !important because professional-fixes.min.css forces media height:auto!important. Every screen size (Brad 10/21). */
html body .dra-home .dra-mosaic .dra-tile video.dra-hero-vid { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: right center !important; display: block; z-index: -2; opacity: 0; transition: opacity .8s ease, transform .35s ease; pointer-events: none; }
html body .dra-home .dra-mosaic .dra-tile video.dra-hero-vid.is-on { opacity: 1; }
@media (hover: hover) { a.dra-tile:hover video.dra-hero-vid { transform: scale(1.025); } }
.dra-tile__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; max-width: 46%; padding: 24px; box-sizing: border-box; }
.dra-tile--bf .dra-tile__copy { max-width: 66%; padding: 28px 28px 28px 30px; }
.dra-tile--fn .dra-tile__copy, .dra-tile--handguns .dra-tile__copy, .dra-tile--optics .dra-tile__copy { padding: 20px; max-width: 50%; }
.dra-tile__brand { font: 700 40px/.95 var(--dra-display); color: #0b0b0b; text-transform: uppercase; letter-spacing: .03em !important; margin: 0; }
/* Real manufacturer logos on the brand tiles (Holosun/Tisas/FN), matching the approved mockup; official marks,
   dark so they read on the light tile scrim. Per-tile heights because the marks have different aspect ratios. */
html body .dra-home .dra-tile .dra-tile__logo { display: block; width: auto !important; max-width: 74% !important; height: auto; object-fit: contain; margin: 0 0 2px; }
html body .dra-home .dra-tile--holosun .dra-tile__logo { height: 38px !important; }
html body .dra-home .dra-tile--tisas .dra-tile__logo { height: 46px !important; }
html body .dra-home .dra-tile--fn .dra-tile__logo { height: 56px !important; }
@media (max-width: 767px) { html body .dra-home .dra-tile--holosun .dra-tile__logo { height: 32px !important; } html body .dra-home .dra-tile--tisas .dra-tile__logo { height: 40px !important; } html body .dra-home .dra-tile--fn .dra-tile__logo { height: 48px !important; } }
.dra-tile__hl { margin: 0; font: 700 36px/.95 var(--dra-display); color: #0b0b0b; text-transform: uppercase; letter-spacing: .01em !important; }
.dra-tile__hl--red { color: var(--dra-red-600) !important; }
.dra-tile--bf .dra-tile__hl { font-size: 56px; line-height: .9; color: #fff; }
.dra-tile--bf .dra-tile__hl--red { font-size: 64px; }
.dra-tile__sub { margin: 14px 0 0; font: 700 22px/1 var(--dra-display); color: #fff; text-transform: uppercase; letter-spacing: .02em !important; }
.dra-tile__from { margin: 8px 0 0; font: 600 18px/1 var(--dra-display); color: #2a2d31; text-transform: uppercase; letter-spacing: .02em !important; }
/* browse-only descriptor that fills the hidden "starting at" slot (index.php $draSub) */
.dra-tile__desc { margin: 10px 0 0; font: 400 15px/1.3 var(--dra-body); color: #2a2d31; letter-spacing: .005em !important; }
.dra-tile--bf .dra-tile__desc { color: #e9eb3e; }
.dra-tile__price { display: block; font: 700 30px/1.05 var(--dra-display); color: var(--dra-red-600); letter-spacing: 0 !important; }
.dra-tile .dra-btn { margin-top: auto; height: 38px; padding: 0 16px; font-size: 17px !important; white-space: nowrap; }
.dra-tile--bf .dra-btn { height: 44px; padding: 0 18px; font-size: 18px !important; margin-top: auto; }   /* Brad 10/30: bottom-left corner on every screen size */
@media (min-width: 768px) and (max-width: 1023px) {
  .dra-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 220px; }
  .dra-tile--bf { grid-column: 1 / span 2; grid-row: auto; }
  .dra-tile--holosun, .dra-tile--tisas, .dra-tile--fn, .dra-tile--handguns, .dra-tile--optics { grid-column: auto; grid-row: auto; }
  .dra-tile__brand { font-size: 32px; } .dra-tile__hl { font-size: 30px; }
  .dra-tile__copy, .dra-tile--fn .dra-tile__copy, .dra-tile--handguns .dra-tile__copy, .dra-tile--optics .dra-tile__copy { max-width: 64%; padding: 18px; }
  .dra-tile--optics { grid-column: 1 / span 2; }   /* 5 small tiles in 2 columns: the last one spans so no cell sits empty */
  .dra-trust__item { padding: 0 12px; gap: 10px; }
  .dra-trust__h { font-size: 14px; } .dra-trust__b { font-size: 12px; }
  /* The Black Friday headline kept its 56/64px desktop size in this 220px row and squeezed its button to 18px (10/21). */
  .dra-tile--bf .dra-tile__copy { padding: 18px 20px; }
  .dra-tile--bf .dra-tile__hl { font-size: 42px; } .dra-tile--bf .dra-tile__hl--red { font-size: 48px; }
  .dra-tile--bf .dra-tile__sub { font-size: 18px; margin-top: 8px; }
  .dra-tile--bf .dra-btn { height: 40px; font-size: 16px !important; margin-top: auto; flex-shrink: 0; }
}
@media (max-width: 767px) {
  /* A generic section rule gave the tile grid 32px of top padding: the empty band under the header (Brad 10/21). */
  html body .dra-home section.dra-mosaic { padding-top: 0 !important; padding-bottom: 16px !important; }
  /* The Black Friday tile gets its own 260px row; forcing 260px into a 170px row spilled it over the gap (Brad 10/21). */
  .dra-mosaic { grid-template-columns: 1fr; grid-template-rows: 260px; grid-auto-rows: 170px; }
  .dra-tile--bf, .dra-tile--holosun, .dra-tile--tisas, .dra-tile--fn, .dra-tile--handguns, .dra-tile--optics { grid-column: 1; grid-row: auto; }
  .dra-tile__copy, .dra-tile--bf .dra-tile__copy, .dra-tile--fn .dra-tile__copy, .dra-tile--handguns .dra-tile__copy, .dra-tile--optics .dra-tile__copy { max-width: 60%; padding: 16px; }
  .dra-tile--bf .dra-tile__copy { max-width: 80%; }
  .dra-tile--bf .dra-tile__hl { font-size: 34px; } .dra-tile--bf .dra-tile__hl--red { font-size: 38px; }
  .dra-tile--bf .dra-btn { margin-top: auto; }   /* Brad 10/29: button sits bottom-left like the other banners (was 14px under the copy) */
  .dra-tile--bf .dra-tile__sub { margin-bottom: 14px; }
  .dra-tile__sub { font-size: 16px; margin-top: 10px; }
  .dra-tile__brand { font-size: 28px; } .dra-tile__hl { font-size: 26px; }
  .dra-tile__price { font-size: 24px; }
  .dra-tile .dra-btn, .dra-tile--bf .dra-btn { height: 44px; font-size: 15px !important; padding: 0 14px; }
}

/* --- Trust strips --- */
.dra-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff !important; border-top: 1px solid var(--dra-border); border-bottom: 1px solid var(--dra-border); margin-top: 10px; }
.dra-trust__item { display: flex; align-items: center; gap: 12px; padding: 0 24px; min-height: 84px; position: relative; }
.dra-trust__item + .dra-trust__item::before { content: ""; position: absolute; left: 0; top: 50%; height: 30px; margin-top: -15px; border-left: 1px solid var(--dra-border); }
.dra-trust__icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--dra-red-600); }
.dra-trust__h, .dra-trust__b { display: block; }
.dra-trust__item { color: inherit !important; text-decoration: none !important; }
.dra-trust__h { margin: 0; font: 700 14px/1.1 var(--dra-display); text-transform: uppercase; color: var(--dra-ink); letter-spacing: .01em !important; }
.dra-trust__b { margin: 3px 0 0; font: 400 12px/1.2 var(--dra-body); color: var(--dra-muted); }
.dra-trust--2 { margin-top: 10px; border-bottom: 0; }
.dra-trust--2 .dra-trust__item { min-height: 54px; }
.dra-trust--2 .dra-trust__h { font-size: 15px; } .dra-trust--2 .dra-trust__b { font-size: 12px; }
@media (max-width: 767px) {
  .dra-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 10px; row-gap: 14px; }
  .dra-trust__item { padding: 0 6px 0 4px; min-height: 64px; gap: 10px; }
  .dra-trust__item + .dra-trust__item::before { display: none; }
  .dra-trust__icon { width: 30px; height: 30px; flex-basis: 30px; }
}

/* --- Daily feature --- */
.dra-feature { margin-top: 10px; position: relative; display: grid; grid-template-columns: 150px 390px minmax(0, 1fr) 220px; align-items: center; min-height: 139px; background-color: #fff !important; border: 1px solid var(--dra-red-600); border-radius: 4px; overflow: hidden; }
.dra-feature::before { content: ""; position: absolute; left: 22px; bottom: 10px; width: 90px; height: 90px; opacity: .05; background: linear-gradient(var(--dra-ink), var(--dra-ink)) center/26px 90px no-repeat, linear-gradient(var(--dra-ink), var(--dra-ink)) center/90px 26px no-repeat; }
.dra-feature__ribbon { position: absolute; left: 0; top: 0; height: 34px; padding: 0 30px 0 14px; display: flex; align-items: center; background: var(--dra-red-600); color: #fff; font: 700 18px/1 var(--dra-display); text-transform: uppercase; letter-spacing: .02em !important; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.dra-feature__img { grid-column: 2; display: flex; align-items: center; justify-content: center; height: 108px; }
html body .dra-home .dra-feature img.dra-feature__pic { max-height: 108px !important; height: 108px !important; width: 100% !important; max-width: 310px !important; object-fit: contain; }
.dra-feature__info { grid-column: 3; padding: 14px 20px; }
/* All widths (Brad 10/21): the card is white (another stylesheet cleared it), the photo sits on a light panel so a
   white-backed product shot reads as part of the card, and the long title stays at two lines. */
html body .dra-home section.dra-feature { background-color: #fff !important; box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 6px 18px rgba(17, 24, 39, .06); }
html body .dra-home .dra-feature__img { background: #f4f5f7; border-radius: 6px; margin: 12px 0; height: 150px; padding: 10px; }
html body .dra-home .dra-feature img.dra-feature__pic { height: 130px !important; max-height: 130px !important; mix-blend-mode: multiply; }
html body .dra-home .dra-feature__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .dra-home section.dra-feature::before { display: none; }   /* the watermark read as a grey plus on the white card */
@media (min-width: 768px) {   /* no empty column under the ribbon: the photo panel starts below it */
  html body .dra-home section.dra-feature { grid-template-columns: 20px 340px minmax(0, 1fr) 220px; }
  html body .dra-home .dra-feature__img { margin: 44px 0 14px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body .dra-home section.dra-feature { grid-template-columns: 16px 250px minmax(0, 1fr) 180px; }
}
.dra-feature__brand { margin: 0 0 4px; font: 700 13px/1 var(--dra-body); letter-spacing: .08em !important; text-transform: uppercase; color: var(--dra-red-600); }
.dra-feature__name { margin: 0; font: 700 24px/1.05 var(--dra-display); text-transform: uppercase; color: var(--dra-ink); letter-spacing: .01em !important; }
.dra-feature__name a { color: inherit !important; text-decoration: none !important; }
.dra-feature__attrs { margin: 6px 0 0; font: 400 15px/1.2 var(--dra-body); color: var(--dra-muted); }
.dra-feature__attrs span + span::before { content: "|"; margin: 0 10px; color: var(--dra-border-strong); }
.dra-feature__price { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dra-feature__now { font: 700 30px/1 var(--dra-display); color: var(--dra-red-600); letter-spacing: 0 !important; }
.dra-feature__reg { font: 400 13px/1 var(--dra-body); color: var(--dra-muted); }
.dra-feature__reg s { color: var(--dra-muted); }
.dra-feature__clock { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 14px/1 var(--dra-body); color: var(--dra-red-600); }
.dra-feature__clock svg { width: 18px; height: 18px; }
.dra-feature__cta { grid-column: 4; justify-self: center; height: 38px; width: 200px; justify-content: center; }
@media (min-width: 768px) and (max-width: 1023px) {
  .dra-feature { grid-template-columns: 120px 220px minmax(0, 1fr) 180px; min-height: 150px; }
  .dra-feature__cta { width: 170px; font-size: 16px !important; }
}
@media (max-width: 767px) {
  .dra-feature { grid-template-columns: 1fr; min-height: 310px; padding: 44px 16px 16px; }
  .dra-feature__img, .dra-feature__info, .dra-feature__cta { grid-column: 1; }
  .dra-feature::before { display: none; } /* watermark sat behind the stacked button on phones */
  .dra-feature__img { height: 120px; }
  .dra-feature__info { padding: 10px 0; }
  .dra-feature__name { font-size: 20px; }
  .dra-feature__cta { width: 100%; height: 44px; }
  /* Phone card (Brad 10/21: "looks bad"): a white card with inner padding, the photo on its own light panel, a brand
     line, the long title held to three lines, the launch note as a tag. Same red, ink and display font as the tiles. */
  html body .dra-home section.dra-feature { background-color: #fff !important; padding: 46px 16px 16px !important; border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 6px 18px rgba(17, 24, 39, .06); gap: 0; }
  html body .dra-home .dra-feature__img { height: 190px; margin: 4px 0 0; background: #f4f5f7; border-radius: 6px; padding: 12px; }
  html body .dra-home .dra-feature img.dra-feature__pic { height: 166px !important; max-height: 166px !important; max-width: 100% !important; mix-blend-mode: multiply; }
  html body .dra-home .dra-feature__info { padding: 14px 0 12px !important; }
  html body .dra-home .dra-feature__name { font-size: 19px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html body .dra-home .dra-feature .dra-launch { display: inline-block; padding: 6px 10px; border-radius: 4px; background: #f4f5f7; border: 1px solid var(--dra-border); font: 700 13px/1 var(--dra-body); letter-spacing: .04em !important; text-transform: uppercase; color: var(--dra-ink); }
}

/* --- Section headings --- */
html body .dra-home .dra-sec-title { margin: 14px 0 8px; text-align: center; font-family: var(--dra-display) !important; font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--dra-ink) !important; text-transform: uppercase; letter-spacing: .02em !important; }

/* --- Shop by category --- */
.dra-cats__grid { display: grid; grid-template-columns: repeat(var(--dra-cat-cols, 7), minmax(0, 1fr)); gap: 8px; }
.dra-cat { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--dra-border); border-radius: 3px; text-decoration: none !important; color: var(--dra-ink) !important; height: 132px; overflow: hidden; transition: border-color .15s, transform .15s; }
.dra-cat:hover { border-color: var(--dra-red-600); transform: translateY(-2px); }
.dra-cat__img { height: 82px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 10px 2px; box-sizing: border-box; }
html body .dra-home .dra-cat img.dra-cat__pic { max-height: 72px !important; height: 72px !important; width: 100% !important; max-width: 150px !important; object-fit: contain; transition: transform .2s; }
.dra-cat:hover img.dra-cat__pic { transform: scale(1.03); }
.dra-cat__ph { width: 46px; height: 46px; color: var(--dra-gray-400); }
.dra-cat__t { font: 700 15px/1.1 var(--dra-display); text-transform: uppercase; letter-spacing: .01em !important; text-align: center; padding: 0 6px; }
.dra-cat__s { font: 400 13px/1.3 var(--dra-body); color: var(--dra-muted); }
@media (min-width: 768px) and (max-width: 1023px) { .dra-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dra-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Best sellers --- */
/* Flex, not grid, so a row with fewer cards than columns sits centred under its centred title (Brad 2026-10-28:
   "most viewed is off center", 4 cards in a 6-column grid hugged the left). Card widths match the old grid. */
.dra-best__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dra-best__grid > .dra-prod { flex: 0 0 calc((100% - 40px) / 6); min-width: 0; }
.dra-prod { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--dra-border); border-radius: 3px; padding: 8px 10px 12px; min-height: 192px; }
.dra-prod__img { display: flex; align-items: center; justify-content: center; height: 92px; }
html body .dra-home .dra-prod img.dra-prod__pic { max-height: 88px !important; height: 88px !important; width: 100% !important; max-width: 180px !important; object-fit: contain; }
.dra-prod__t { margin: 7px 0 0; font: 700 14px/1.18 var(--dra-display); text-transform: uppercase; text-align: center; letter-spacing: .01em !important; display: -webkit-box; -webkit-line-clamp: 2; height: 2.4em; -webkit-box-orient: vertical; overflow: hidden; }
.dra-prod__t a { color: var(--dra-ink) !important; text-decoration: none !important; }
.dra-prod__p { margin: 4px 0 6px; text-align: center; font: 700 22px/1.1 var(--dra-display); color: var(--dra-red-600); letter-spacing: 0 !important; }
.dra-prod__p .dra-map { display: inline-block; margin-right: 6px; padding: 2px 5px; border-radius: 2px; background: var(--dra-red-700); color: #fff; font: 700 11px/1.2 var(--dra-body); vertical-align: middle; }
.dra-prod__p .dra-phrase { font-size: 16px; color: var(--dra-ink); }
/* browse-only (pre-launch): no price yet; bridge 2026-10-19 D */
.dra-home .dra-launch { display: inline-block; font: 700 14px/1.25 var(--dra-body); color: #3d4248; text-transform: uppercase; letter-spacing: .03em; }
.dra-prod .dra-btn { margin-top: auto; height: 28px; width: 100%; justify-content: center; font-size: 15px !important; padding: 0 8px; }
.dra-best__empty { min-height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--dra-border); border-radius: 3px; font: 400 16px/1.4 var(--dra-body); color: var(--dra-muted); text-align: center; padding: 0 16px; }
/* Keep the category + product bands to a single row down to 1024 (the mockup's 1198 width shows single rows,
   not the wrapped 4-up the old 1199 breakpoint produced). Bridge 2026-10-20. */
@media (min-width: 768px) and (max-width: 1023px) { .dra-best__grid > .dra-prod { flex-basis: calc((100% - 24px) / 4); } }
@media (max-width: 767px) {
  .dra-best__grid > .dra-prod { flex-basis: calc((100% - 8px) / 2); }
  .dra-prod { min-height: 230px; }
  .dra-prod__img { height: 112px; }
  html body .dra-home .dra-prod img.dra-prod__pic { max-height: 108px !important; height: 108px !important; }
  .dra-prod__t { -webkit-line-clamp: 3; height: 3.15em; }
  .dra-prod .dra-btn { height: 44px; }
}

/* ===================== FOOTER (site-wide) ===================== */
html body footer.dra-footer { background: var(--dra-char-900) !important; color: var(--dra-light) !important; font-family: var(--dra-body); margin-top: 0; }
.dra-footer__inner { width: calc(100% - clamp(20px, 3.333vw, 48px)); max-width: var(--dra-wrap); margin: 0 auto; display: grid; grid-template-columns: 280px 220px 230px 200px minmax(240px, 280px); gap: 28px; padding: 26px 0 22px; align-items: start; }
.dra-footer__brand a { display: inline-block; text-decoration: none !important; }
/* Footer logo = the owner's wordmark file, untouched (Brad 10/22). Its square white canvas shows as a plate; CSS shows
   only the band the lettering sits in (object-fit/position), so the file itself is never edited. */
.dra-footer-plate { display: block; width: 260px; height: 60px; background: #fff; border-radius: 4px; overflow: hidden; }
html body .dra-footer .dra-footer-plate img { display: block; width: 260px !important; height: 60px !important; max-width: none !important; object-fit: cover !important; object-position: 50% 44.6% !important; }
html body .dra-footer .dra-footer__h { margin: 0 0 8px; font: 700 13px/1.2 var(--dra-display) !important; text-transform: uppercase; color: #fff !important; letter-spacing: .04em !important; }
.dra-footer__col ul { list-style: none; margin: 0; padding: 0; }
.dra-footer__shop { display: grid; grid-template-columns: auto auto; column-gap: 34px; justify-content: start; }
.dra-footer__shop .dra-footer__h { grid-column: 1 / -1; }
html body .dra-footer li { margin: 0; line-height: 1.4; }
html body .dra-footer a { color: var(--dra-light) !important; text-decoration: none !important; font: 400 12px/1.4 var(--dra-body); }
html body .dra-footer a:hover, html body .dra-footer a:focus-visible { color: #ff4048 !important; }
html body .dra-footer .dra-footer__note { margin: 0 0 10px; font: 400 12px/1.4 var(--dra-body); color: var(--dra-light) !important; }
.dra-news { display: flex; max-width: 240px; height: 34px; position: relative; flex-wrap: wrap; }
html body .dra-footer .dra-news input[type="email"] { flex: 1 1 auto; min-width: 0; height: 34px !important; min-height: 34px !important; border: 1px solid #fff !important; border-radius: 2px 0 0 2px !important; padding: 0 10px !important; font: 400 13px/34px var(--dra-body) !important; background: #fff !important; color: var(--dra-ink) !important; }
html body .dra-footer .dra-news button { flex: 0 0 38px; width: 38px; height: 34px; min-height: 34px !important; min-width: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 0 2px 2px 0 !important; background: var(--dra-grad-red) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dra-news button svg { width: 18px; height: 18px; }
.dra-news button:hover { background: var(--dra-red-800) !important; }
.dra-news.is-busy button { opacity: .6; }
html body .dra-footer .dra-news__msg { flex: 1 0 100%; margin: 6px 0 0; font: 400 12px/1.3 var(--dra-body); min-height: 0; color: var(--dra-light) !important; }
html body .dra-footer .dra-news__msg.is-ok { color: #7ee2a8 !important; }
html body .dra-footer .dra-news__msg.is-err { color: #ff8a8f !important; }
.dra-footer__social { display: flex; gap: 12px; margin-top: 34px; }
.dra-footer__social a svg { width: 28px; height: 28px; color: #fff; }
.dra-footer__legal { border-top: 1px solid rgba(255, 255, 255, .08); background: var(--dra-char-950); }
.dra-footer__legal-inner { width: calc(100% - clamp(20px, 3.333vw, 48px)); max-width: var(--dra-wrap); margin: 0 auto; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
html body .dra-footer__legal p { margin: 0; font: 400 11px/1.4 var(--dra-body); color: #aeb3b8 !important; }
html body .dra-footer__legal a { font-size: 11px; }
.dra-footer__links span { margin: 0 12px; color: #6b7177; }
html body .dra-footer__legal .dra-footer__credit a { color: #7ee2a8 !important; font-weight: 700; }
html body .dra-footer__legal .dra-footer__notice { width: calc(100% - clamp(20px, 3.333vw, 48px)); max-width: var(--dra-wrap); margin: 0 auto; padding: 0 0 12px; font-size: 11px; color: #8d9297 !important; }
@media (min-width: 768px) and (max-width: 1023px) {
  .dra-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dra-footer__brand, .dra-footer__connect { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .dra-footer__inner { width: 100%; grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 28px 20px; }
  .dra-footer__brand { grid-column: 1 / -1; text-align: center; }
  .dra-footer__brand .dra-footer-plate { margin: 0 auto; }
  .dra-footer__shop { grid-column: 1 / -1; }
  .dra-footer__connect { grid-column: 1 / -1; }
  .dra-news { max-width: none; height: auto; flex-wrap: wrap; }
  html body .dra-footer .dra-news input[type="email"] { width: auto !important; flex: 1 1 0 !important; height: 44px !important; min-height: 44px !important; font-size: 16px !important; }
  html body .dra-footer .dra-news button { flex: 0 0 48px; width: 48px; height: 44px; min-height: 44px !important; }
  .dra-footer__legal-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 20px; width: 100%; }
  html body .dra-footer__legal .dra-footer__notice { width: 100%; padding: 0 20px 14px; }
}

/* =====================================================================
   DR Armory tactical product band (Brad 2026-10-21: the lower page read bland).
   Featured Products + Clearance sit on a charcoal band with a red armor edge;
   cards get a white image window + charcoal body + red accent line and a hover
   lift. Bridge decision 2026-10-21. Flat fills, honest browse-only.
   ===================================================================== */
.dra-prodzone { margin-top: 16px; background: var(--dra-char-900); border-top: 4px solid var(--dra-red-700); padding: 16px 0 46px; }
html body .dra-home .dra-prodzone .dra-sec-title { color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 16px; letter-spacing: .06em !important; margin: 32px 0 20px; }
html body .dra-home .dra-prodzone .dra-sec-title::before, html body .dra-home .dra-prodzone .dra-sec-title::after { content: ""; display: block; width: clamp(40px, 9vw, 108px); height: 2px; background: var(--dra-red-600); }
.dra-prodzone .dra-prod { background: var(--dra-char-900); border: 1px solid #2b3137; border-top: 3px solid var(--dra-red-700); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.dra-prodzone .dra-prod__img { background: #fff; border-radius: 2px; margin-bottom: 8px; }
html body .dra-home .dra-prodzone .dra-prod__t a { color: #fff !important; }
.dra-prodzone .dra-launch { color: #c9ced3 !important; }
@media (hover: hover) { .dra-prodzone .dra-prod:hover { transform: translateY(-3px); border-color: var(--dra-red-600); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); } }

/* ===================== STORE ACCENT on stock pages =====================
   The approved design is red and black; the stock pages still used the theme's blue search button and orange links. */
html body .search-form-large button[type="submit"], html body .search-form-large form button { background: var(--dra-grad-red) !important; border-color: transparent !important; color: #fff !important; }
html body .search-form-large button[type="submit"]:hover { background: var(--dra-red-800) !important; }
html body .content-page a:not(.btn):not([class*="btn-"]):not(.dra-btn), html body .content-article a:not(.btn):not([class*="btn-"]) { color: var(--dra-red-700) !important; }
html body .content-page a:not(.btn):not([class*="btn-"]):not(.dra-btn):hover { color: var(--dra-red-900) !important; }

/* ===================== Phones: 2x2 brand tiles (Brad 10/22) =====================
   "the hero to remain how it is and then the holosun to remain how it is... then the follow 4 banners would be in a
   2x2 grid underneath of that to conserve scrolling space." Phones only; tablet and desktop unchanged.
   Spec: bridge 2026-10-22 (tgd-cs/dra-ekg/bridge_m2x2.md). Saves ~400px of scrolling at 390px. */
@media (max-width: 767px) {
  .dra-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 260px 170px; grid-auto-rows: 150px; }
  .dra-tile--bf, .dra-tile--holosun { grid-column: 1 / -1; }
  .dra-tile--tisas, .dra-tile--fn, .dra-tile--handguns, .dra-tile--optics { grid-column: auto; }
  .dra-tile--tisas .dra-tile__copy, .dra-tile--fn .dra-tile__copy,
  .dra-tile--handguns .dra-tile__copy, .dra-tile--optics .dra-tile__copy { max-width: none; width: 100%; padding: 12px 12px 13px; }
  .dra-tile--handguns .dra-tile__copy, .dra-tile--optics .dra-tile__copy { padding-top: 13px; }
  html body .dra-home .dra-tile--tisas .dra-tile__logo { height: 24px !important; max-width: 112px !important; margin-bottom: 4px; }
  html body .dra-home .dra-tile--fn .dra-tile__logo { height: 34px !important; max-width: 54px !important; margin-bottom: 0; }
  /* 20px (bridge said 23): at 23px FN's CLOSEOUTS ran over the rifle in its photo; both CLOSEOUTS match */
  .dra-tile--tisas .dra-tile__hl, .dra-tile--fn .dra-tile__hl { font-size: 20px; line-height: .95; letter-spacing: -.3px !important; white-space: nowrap; }
  .dra-tile--handguns .dra-tile__hl, .dra-tile--optics .dra-tile__hl { font-size: 24px; line-height: .95; white-space: nowrap; }
  .dra-tile--tisas .dra-btn, .dra-tile--fn .dra-btn, .dra-tile--handguns .dra-btn, .dra-tile--optics .dra-btn { height: 36px; font-size: 14px !important; padding: 0 12px; gap: 7px; }
  /* photo framing per tile: the product sits right, the copy area stays clean */
  html body .dra-home .dra-mosaic .dra-tile--tisas img.dra-tile__img { object-position: 38% 50%; }
  html body .dra-home .dra-mosaic .dra-tile--fn img.dra-tile__img { object-position: 0% 50%; }   /* bridge 30%; 0% clears the rifle */
  html body .dra-home .dra-mosaic .dra-tile--handguns img.dra-tile__img { object-position: 36% 50%; }
  html body .dra-home .dra-mosaic .dra-tile--optics img.dra-tile__img { object-position: 42% 50%; }
}