/* Miami Guns — single-guns.php product template styles */
.mg-product{
  --header-h:0px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  padding-bottom:70px;
}
.mg-product h1,.mg-product h2,.mg-product h3{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.05;
  margin:0 0 var(--space-sm);
  color:var(--ink);
  letter-spacing:.01em;
}
.mg-product img{display:block;max-width:100%;}
.mg-product a{color:inherit;}
.mg-wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-md);}

.mg-breadcrumb{font-size:13px;color:var(--ink-soft);padding-top:var(--space-md);}
.mg-breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.mg-breadcrumb a:hover{color:var(--ink);}
.mg-breadcrumb .sep{margin:0 6px;}

/* ===== sticky sub-nav ===== */
.mg-subnav{
  position:sticky;top:0;z-index:40;background:var(--bg-alt);
  border-bottom:1px solid var(--line);
  display:flex;align-items:stretch;margin-top:var(--space-md);
}
.mg-subnav-product{
  flex-shrink:0;display:flex;align-items:center;
  padding:0 var(--space-md);font-family:var(--font-heading);font-weight:700;
  font-size:16px;letter-spacing:.02em;border-right:1px solid var(--line);white-space:nowrap;
}
.mg-subnav-links{flex:1;min-width:0;display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
.mg-subnav-links::-webkit-scrollbar{display:none;}
.mg-subnav-links a{
  padding:14px var(--space-md);font-size:13px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;border-bottom:2px solid transparent;flex-shrink:0;
}
.mg-subnav-links a.active,.mg-subnav-links a:hover{color:var(--ink);border-bottom-color:var(--accent);}

.mg-section{padding-top:var(--space-xl);padding-bottom:var(--space-xl);border-top:1px solid var(--line-soft);scroll-margin-top:60px;}
.mg-section:first-of-type{border-top:none;}
.mg-eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:var(--space-sm);}

/* ===== overview ===== */
.mg-overview{padding-top:var(--space-lg);}
.mg-overview-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);}
@media(min-width:860px){
  .mg-overview-grid{grid-template-columns:1fr 1fr;column-gap:48px;align-items:start;}
  .mg-gallery{position:sticky;top:70px;}
}
.mg-brand-tag{font-size:13px;color:var(--ink-soft);text-decoration:none;display:inline-block;margin-bottom:6px;font-weight:600;}
.mg-brand-tag:hover{color:var(--accent);}
.mg-product-title{font-size:clamp(28px,4vw,44px);}
.mg-product-sub{font-size:15px;color:var(--ink-soft);margin-bottom:var(--space-md);max-width:52ch;}

.mg-gallery-main{aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background:var(--card-white);}
.mg-gallery-main img{width:100%;height:100%;object-fit:contain;}
.mg-gallery-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:2px;}
.mg-gallery-thumbs button{
  min-width:64px;width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-sm);
  background:var(--card-white);border:2px solid transparent;padding:0;cursor:pointer;overflow:hidden;
}
.mg-gallery-thumbs button img{width:100%;height:100%;object-fit:contain;}
.mg-gallery-thumbs button.active{border-color:var(--accent);}

.mg-quickspecs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  background:var(--surface);border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-md) 0;
}
.mg-quickspec-item .label{color:var(--ink-soft);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.mg-quickspec-item .value{font-weight:700;font-size:15px;}

.mg-cta-row{display:flex;flex-direction:column;gap:20px;margin-top:var(--space-md);}
.mg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 22px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;
  text-decoration:none;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;
}
.mg-btn-primary{background:var(--accent);color:#fff;}
.mg-btn-primary:hover{background:var(--accent-hover);}
.mg-btn-secondary{background:transparent;color:var(--ink);border:2px solid var(--ink-soft);}
.mg-btn-secondary:hover{border-color:var(--ink);}
.mg-btn-block{width:100%;}
.mg-btn-sm{padding:10px 16px;font-size:12px;}

/* ===== description / prose ===== */
.mg-prose p{color:var(--ink);margin:0 0 var(--space-md);max-width:70ch;}
.mg-prose strong{color:var(--ink);}

/* ===== full spec table ===== */
.mg-spec-table{width:100%;border-collapse:collapse;font-size:14px;}
.mg-spec-table tr{border-bottom:1px solid var(--line-soft);}
.mg-spec-table td{padding:12px 4px;vertical-align:top;}
.mg-spec-table td:first-child{color:var(--ink-soft);width:42%;}
.mg-spec-table td:last-child{font-weight:600;}
.mg-spec-note{font-size:13px;color:var(--ink-soft);margin-top:var(--space-md);}

/* ===== configuration cards ===== */
/* Configurations accordion (2026-09-20): replaces the 2-up card grid + photo popup. One full-width row per
   configuration; clicking it expands a panel below with a large photo and prev/next arrows centered on
   each side. Replaced the old .mg-lightbox popup entirely. */
.mg-config-grid{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-md);}
.mg-config-card{background:var(--card-white);color:var(--interrupt-text);border-radius:var(--radius-md);overflow:hidden;}

.mg-config-h{margin:0;font-size:inherit;line-height:inherit;}
.mg-config-head{display:flex;align-items:center;gap:var(--space-md);width:100%;padding:0 var(--space-md) 0 0;margin:0;background:none;border:0;border-radius:0;color:var(--interrupt-text);text-align:left;font:inherit;cursor:pointer;}
.mg-config-head:hover,.mg-config-head:focus{background:rgba(0,0,0,.04);color:var(--interrupt-text);}
.mg-config-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.mg-config-card:not(.has-panel) .mg-config-head{cursor:default;}
.mg-config-card:not(.has-panel) .mg-config-head:hover{background:none;}
.mg-config-img{position:relative;display:block;width:110px;flex-shrink:0;aspect-ratio:1/1;background:var(--card-white);border-right:1px solid var(--interrupt-bg);}
.mg-config-img img{display:block;width:100%;height:100%;object-fit:contain;}
.mg-config-img-count{position:absolute;bottom:6px;right:6px;background:rgba(18,18,18,.75);color:var(--ink);font-size:10px;font-weight:600;padding:3px 7px;border-radius:999px;}
.mg-config-body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding:var(--space-sm) 0;}
.mg-config-name{font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:normal;line-height:1.3;}
.mg-config-meta{display:flex;gap:6px;flex-wrap:wrap;}
.mg-config-meta span{font-size:11px;background:rgba(0,0,0,.07);padding:4px 8px;border-radius:4px;color:var(--interrupt-text);font-weight:600;}
.mg-config-chevron{flex-shrink:0;width:11px;height:11px;margin:0 6px 4px 0;border-right:2px solid var(--interrupt-text);border-bottom:2px solid var(--interrupt-text);transform:rotate(45deg);transition:transform .25s ease;}
.mg-config-card.open .mg-config-chevron{transform:rotate(-135deg);margin-bottom:-4px;}
.mg-config-card:not(.has-panel) .mg-config-chevron{display:none;}
.mg-config-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s linear .3s;}
.mg-config-card.open .mg-config-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease,visibility 0s;}
.mg-config-card.no-anim .mg-config-panel{transition:none;}
.mg-config-panel-inner{overflow:hidden;min-height:0;}
.mg-config-stage{position:relative;display:flex;align-items:center;justify-content:center;background:var(--card-white);height:clamp(260px,52vw,540px);border-top:1px solid var(--interrupt-bg);}
.mg-config-big{display:block;width:100%;height:100%;object-fit:contain;padding:var(--space-md);box-sizing:border-box;}
.mg-config-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;border:2px solid var(--ink-soft);background:rgba(18,18,18,.88);color:var(--ink);cursor:pointer;}
.mg-config-arrow:hover,.mg-config-arrow:focus{border-color:var(--accent);background:rgba(18,18,18,.95);color:var(--accent);}
.mg-config-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mg-config-prev{left:var(--space-md);}
.mg-config-next{right:var(--space-md);}
.mg-config-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-top:1px solid var(--interrupt-bg);font-size:13px;color:var(--interrupt-text);}
@media(max-width:520px){
	.mg-config-img{width:88px;}
	.mg-config-head{gap:var(--space-sm);}
	.mg-config-arrow{width:44px;height:44px;}
	.mg-config-prev{left:var(--space-sm);}
	.mg-config-next{right:var(--space-sm);}
}

/* ===== brand insert ===== */
.mg-brand-insert{
  background:var(--interrupt-bg);color:var(--interrupt-text);
  border-radius:var(--radius-md);padding:var(--space-lg);
  display:flex;flex-direction:column;gap:var(--space-md);
}
.mg-brand-logo{width:140px;height:60px;object-fit:contain;background:var(--card-white);border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-sm);padding:10px;}
.mg-brand-logo-ph{
  width:140px;height:60px;border-radius:var(--radius-sm);background:var(--card-white);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);
  font-weight:700;color:var(--bg);font-size:14px;text-align:center;padding:6px;
}
@media(min-width:760px){.mg-brand-insert{flex-direction:row;align-items:flex-start;}.mg-brand-insert .mg-brand-col{flex-shrink:0;}}
.mg-brand-insert h3{font-size:20px;color:var(--interrupt-text);}
.mg-brand-insert p{color:var(--interrupt-text);max-width:65ch;}
.mg-brand-insert .mg-shop-link{font-size:13px;font-weight:700;text-decoration:none;color:var(--accent);}
.mg-brand-insert .mg-shop-link:hover{text-decoration:underline;}

/* ===== how buying works ===== */
.mg-steps{display:flex;flex-direction:column;gap:var(--space-md);}
.mg-step{display:flex;gap:var(--space-md);align-items:flex-start;}
.mg-step-num{
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);
  font-weight:700;font-size:14px;flex-shrink:0;
}
.mg-step p{margin:0;color:var(--ink-soft);}
.mg-step b{color:var(--ink);display:block;margin-bottom:2px;font-family:var(--font-body);font-weight:700;}

/* ===== related ===== */
.mg-related-scroll{display:flex;gap:var(--space-md);overflow-x:auto;padding-bottom:6px;}
.mg-related-card{min-width:170px;width:170px;flex-shrink:0;text-decoration:none;color:var(--ink);}
.mg-related-card .mg-related-img{aspect-ratio:1/1;border-radius:var(--radius-sm);background:var(--card-white);overflow:hidden;}
.mg-related-card .mg-related-img img{width:100%;height:100%;object-fit:contain;}
.mg-related-card .mg-rname{font-size:13px;font-weight:600;margin-top:8px;}

/* ===== FAQ ===== */
.mg-faq-item{margin-bottom:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--line-soft);}
.mg-faq-item:last-child{border-bottom:none;}
.mg-faq-item h4{font-size:16px;margin-bottom:4px;font-family:var(--font-body);font-weight:700;}
.mg-faq-item p{font-size:14px;color:var(--ink-soft);margin:0;}

/* ===== sticky CTA ribbon -- matches the site's shared ribbon pattern.
   Slides up once past the Overview section; once the FAQ section approaches it
   "parks" in normal document flow just above FAQ instead of fading out, so it stays
   on screen the whole way down rather than disappearing at the bottom. ===== */
.mg-sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  text-align:center;padding:14px;
  font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 -4px 14px rgba(0,0,0,.35);
  transform:translateY(100%);
  transition:transform .28s ease-out;
  background:var(--accent);color:#fff;
  border-top:1px solid var(--accent-hover);
}
.mg-sticky-cta.visible{transform:translateY(0);}
.mg-sticky-cta--parked{transform:none;transition:none;}

.mg-sticky-cta--link{display:block;text-decoration:none;}

.mg-sticky-cta--phone{display:flex;align-items:center;justify-content:center;gap:8px;}
.mg-sticky-cta-phone-link{color:#fff;text-decoration:underline;}

.mg-sticky-cta-phone-text{display:none;}
@media(min-width:860px){
  .mg-sticky-cta-arrow-text{display:none;}
  .mg-sticky-cta-phone-text{display:inline;}
}

.mg-pill-row-secondary{margin-top:var(--space-sm);}

/* ===== caliber pill filter ===== */
.mg-pill-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:var(--space-md) 0;}
@media(min-width:640px){.mg-pill-row{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}}
.mg-pill{
  border:1px solid var(--ink);border-radius:999px;padding:9px 10px;
  font-size:12px;font-weight:600;color:var(--ink-soft);background:transparent;
  cursor:pointer;text-align:center;line-height:1.2;
}
.mg-pill:hover{border-color:var(--accent);color:var(--ink);}
.mg-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.mg-card-hidden{display:none !important;}
/* ===== title header (brand + product name + logo, above the gallery) ===== */
.mg-title-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);
  padding-top:var(--space-lg);
}
.mg-title-header-text{min-width:0;}
.mg-title-header-logo{
  width:96px;height:56px;object-fit:contain;background:var(--card-white);
  border-radius:var(--radius-sm);padding:8px;flex-shrink:0;
}
.mg-overview{padding-top:0;}

.mg-cta-note{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.mg-cta-note a{color:var(--ink);text-decoration:underline;}

/* ===== per-caliber spec summary (above the configuration cards) ===== */
.mg-caliber-summary{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg);border-radius:var(--radius-md);padding:var(--space-md);
  margin-top:var(--space-md);
}
.mg-caliber-summary-desc{font-size:14px;color:var(--ink);margin:0 0 var(--space-sm);line-height:1.5;}

.mg-details-toggle{
  background:none;border:none;padding:0;margin:4px 0 0;cursor:pointer;
  font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:2px;
}
.mg-details-toggle:hover{color:var(--ink);}
.mg-details-panel{display:none;margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--line-soft);}
.mg-details-panel.open{display:block;}
.mg-details-panel p{font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 var(--space-sm);}
.mg-details-panel p:last-child{margin-bottom:0;}
.mg-details-panel strong{color:var(--ink);}
.mg-caliber-summary-item{font-size:13px;display:flex;gap:6px;flex-wrap:wrap;}
.mg-caliber-summary-item .label{color:var(--ink-soft);font-weight:600;white-space:nowrap;}
.mg-caliber-summary-item .value{color:var(--ink);}

/* .mg-faq-accordion/.mg-faq-q/.mg-faq-icon/.mg-faq-a -- moved to tokens.css 2026-09-11
   (second consumer: the Security Guard page's FAQ). Same class names/markup reused
   verbatim -- no changes needed here on single-guns.php. */
/* ===== config card image -> lightbox trigger ===== */

/* Sticky See Price ribbon: full width on mobile; on desktop it is a rounded box the width of the page column
   (1120px wrap minus 16px gutters), floating 16px off the bottom. It parks under the last configuration row. */
@media(min-width:860px){
  .mg-sticky-cta{left:max(16px,calc(50% - 544px));right:auto;width:min(1088px,calc(100% - 32px));bottom:16px;border:0;border-radius:var(--radius-md);transform:translateY(calc(100% + 16px));}
}
#configurations{padding-bottom:calc(var(--space-xl) + 64px);}

/* iPhone Safari: a thin strip showed scrolling content between the fixed bar and the bottom toolbar. On mobile the
   bar now sits on a solid black band that is part of the bar itself (a black bottom border, background-clip keeps
   the red to the button area), sized to also cover the home-indicator inset, plus a black extension below for
   overscan. Black on the dark page reads as empty space, so nothing scrolls visibly beneath the button. It travels
   with the bar, including when it parks under the last configuration. Desktop's boxed bar is unaffected. */
@media(max-width:859px){
  /* The bar is dropped 40px below the bottom edge of the page (bottom:-40px) and its black band is 40px deeper to match, so the red button stays where it was while the black reaches past any gap Safari leaves under a fixed bar. JS subtracts the 40px when it measures the bar. */
  .mg-sticky-cta{bottom:-40px;background-clip:padding-box;border-bottom:calc(52px + env(safe-area-inset-bottom,0px)) solid var(--bg);}
  .mg-sticky-cta--parked{border-bottom-width:calc(12px + env(safe-area-inset-bottom,0px));}
  .mg-sticky-cta.visible:not(.mg-sticky-cta--parked)::after{content:'';position:absolute;left:0;right:0;top:100%;margin-top:0;height:160px;background:var(--bg);pointer-events:none;}
}

/* Extra breathing room under the product H1 and the How Buying Works / You Might Also Like H2s (was 8px). */
.mg-title-header-text .mg-product-title{margin-bottom:var(--space-md);}
#how-it-works h2,#related h2{margin-bottom:var(--space-md);}

/* Every section heading gets the same 16px below it (was 8px); the H1 and the how-buying/related headings were done earlier. */
.mg-product .mg-section h2{margin-bottom:var(--space-md);}