/* Shopify affiliate placements (2026-10-01). Separate file on purpose, loaded directly (not part of the .min pipeline). */
.mk-nav-shopify{display:inline-flex;align-items:center;gap:5px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:#0F172A;padding:8px 13px;border:1.5px solid #CBD5E1;border-radius:100px;white-space:nowrap;text-decoration:none;margin-right:8px;transition:border-color .2s,color .2s,background .2s}
.mk-nav-shopify:hover{border-color:#008060;color:#008060;background:#F2FBF7}
.mk-nav-shopify svg{width:13px;height:13px;flex:none}
@media (max-width:1199px){.mk-nav-shopify{display:none}}
.mnav-link.mk-mnav-shopify{color:#008060;font-weight:600}
.mk-shopify-band{background:#F2FBF7;border-top:1px solid #D7EFE4;padding:clamp(48px,7vw,80px) 0}
.mk-shopify-band-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,40px);display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.mk-shopify-band-label{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#007A5A;margin:0 0 10px}
.mk-shopify-band-h{font-family:'Outfit',sans-serif;font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.02em;color:#0F172A;margin:0 0 14px}
.mk-shopify-band-p{font-family:'Inter',sans-serif;font-size:1.02rem;line-height:1.65;color:#475569;margin:0;max-width:620px}
.mk-shopify-band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mk-shopify-btn{display:inline-flex;align-items:center;justify-content:center;background:#008060;color:#fff!important;font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;padding:15px 28px;border-radius:100px;box-shadow:0 6px 16px rgba(0,128,96,.22);text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.mk-shopify-btn:hover{background:#006E52;transform:translateY(-2px)}
.mk-shopify-disclosure{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;color:#64748B;margin:0;max-width:340px}
@media (max-width:860px){.mk-shopify-band-inner{grid-template-columns:1fr}.mk-shopify-btn{width:100%}.mk-shopify-disclosure{max-width:none}}
.mk-footer-shopify{font-size:13px;line-height:1.5;color:#94A3B8;margin:18px 0 0}
.mk-footer-shopify a{color:#4ADE80!important;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.mk-footer-shopify a:hover{color:#86EFAC}

/* 2026-10-01 v2: header + footer are filled green buttons */
.mk-nav-shopify{background:#008060;border-color:#008060;color:#fff}
.mk-nav-shopify:hover{background:#006E52;border-color:#006E52;color:#fff}
.mnav-link.mk-mnav-shopify{display:block;text-align:center;background:#008060;color:#fff;border-radius:100px;margin:8px 0}
.mnav-link.mk-mnav-shopify:hover{background:#006E52;color:#fff}
.mk-footer-shopify-btn{align-self:flex-start;width:auto;margin:20px 0 4px;font-size:15px;padding:12px 24px;box-shadow:none}
@media (max-width:860px){.mk-footer-shopify-btn{width:auto}}
footer.footer a.mk-footer-shopify-btn,footer.footer a.mk-footer-shopify-btn:hover{color:#fff!important}

/* 2026-10-01 v3: compact green button in the mobile top bar (nav-actions is hidden at 1024px and below) */
.mk-nav-shopify-m{display:none}
@media (max-width:1024px){.mk-nav-shopify-m{display:inline-flex;align-items:center;margin-left:auto;margin-right:10px;background:#008060;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;line-height:1;padding:9px 14px;border-radius:100px;white-space:nowrap;text-decoration:none}.mk-nav-shopify-m:hover{background:#006E52;color:#fff}}
@media (max-width:480px){.mk-nav-shopify-m{font-size:12px;padding:8px 11px;margin-left:8px;margin-right:4px}}
@media (max-width:374px){.nav a.nav-logo .nav-logo-img{width:36px;height:36px}.nav a.nav-logo{gap:7px}.mk-nav-shopify-m{font-size:11.5px;padding:8px 9px;margin-left:6px;margin-right:0}}
@media (max-width:340px){.mk-nav-shopify-m{font-size:11px;padding:7px 8px;margin-left:4px}}

/* 2026-10-01 v4: laptops get the header button too. The 1fr auto 1fr grid gave the right
   column only half the leftover width, so actions spill once the pill is in. Desktop uses
   auto 1fr auto instead (links stay centred in the middle track). From 1025 to 1279px there is
   no room for the "A Tripster Developers Product" ghost button as well: the logo lockup
   already says "by Tripster Developers", and the mobile menu and footer keep the link. */
@media (min-width:1025px){.nav .nav-inner{grid-template-columns:auto 1fr auto;column-gap:24px}}
@media (min-width:1025px) and (max-width:1279px){.nav .nav-actions .mk-nav-shopify{display:inline-flex;font-size:12.5px;padding:8px 12px;margin-right:0}.nav .nav-actions .mk-nav-shopify svg{display:none}.nav .nav-actions .btn-ghost{display:none}}
/* 1321px+: the bar is capped at 1320px of content, so the row runs about 66px over once the pill is in.
   Use the same compact ghost button the 1025-1320px band already has, and trim the link padding slightly. */
@media (min-width:1321px){.nav .nav-actions .btn-ghost{font-size:0.64rem;padding-left:14px;padding-right:14px;letter-spacing:0.04em}.nav .nav-links a,.nav .dropdown-trigger{padding-left:11px;padding-right:11px}}