/* Matched to skipperb.com (Horizon theme). */
:root{
  --ink: rgb(0 0 0 / .82);
  --heading:#111;
  --muted: rgb(0 0 0 / .55);
  --navy:#1d3686;
  --bg:#fff;
  --soft:#e1edf5;
  --soft-2:#eef1ea;
  --border:#dfdfdf;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
.container{ max-width:1440px; margin:0 auto; padding:0 20px; }
img{ display:block; }

/* Top contact bar */
.topbar{ background:var(--navy); color:#fff; font-size:.92rem; }
.topbar .container{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:7px 20px; }
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }
.topbar .dot{ opacity:.6; }

/* Header */
.site-header{ border-bottom:1px solid var(--border); }
.header-main{ display:flex; align-items:center; gap:24px; padding:14px 20px; }
.brand{ flex-shrink:0; }
.brand-logo{ height:88px; width:auto; }
.header-nav{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.header-nav .nav-link{ text-decoration:none; font-weight:600; font-size:1.05rem; color:var(--heading); background:none; border:0; cursor:pointer; font-family:inherit; }
.header-nav .nav-link:hover{ color:var(--navy); }

/* Shop by Category dropdown (native <details>, no JS) */
.nav-dropdown{ position:relative; }
.nav-dropdown > summary{ list-style:none; display:inline-flex; align-items:center; gap:6px; }
.nav-dropdown > summary::-webkit-details-marker{ display:none; }
.nav-dropdown > summary::after{ content:"▾"; font-size:.8em; }
.dropdown-panel{ display:none; }
.nav-dropdown[open] > .dropdown-panel{ display:grid; }
.dropdown-panel a{ text-decoration:none; color:var(--heading); font-size:1rem; white-space:nowrap; }
.dropdown-panel a:hover{ color:var(--navy); }
@media (min-width:761px){
  .dropdown-panel{ position:absolute; top:calc(100% + 12px); right:0; z-index:60;
    grid-template-columns:repeat(2, minmax(210px,1fr)); gap:4px 44px;
    background:#fff; border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 30px rgb(0 0 0 / .14); padding:16px 24px; }
  .dropdown-panel a{ padding:8px 6px; }
  /* Wider type-ahead dropdown on desktop, anchored to the search box's right edge */
  .search-suggest{ left:auto; right:0; width:520px; }
}

/* Search box */
.nav-search{ position:relative; display:flex; align-items:center; border:1px solid var(--border); border-radius:6px; }
.nav-search input{ border:0; border-radius:6px 0 0 6px; padding:11px 14px; font-family:inherit; font-size:.98rem; outline:none; width:380px; background:#fff; color:var(--ink); }
.nav-search button{ border:0; border-radius:0 6px 6px 0; background:var(--soft); padding:11px 14px; cursor:pointer; font-size:1.05rem; line-height:1; }
.nav-search button:hover{ background:#dde7f1; }

/* Type-ahead suggestions dropdown */
.search-suggest{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:70;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 12px 30px rgb(0 0 0 / .14); max-height:400px; overflow-y:auto; }
.suggest-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; text-decoration:none; color:var(--heading); border-bottom:1px solid #f1f1f1; }
.suggest-item:last-child{ border-bottom:0; }
.suggest-item:hover{ background:var(--soft); }
.suggest-item img{ width:42px; height:42px; flex-shrink:0; object-fit:cover; background:#f5f5f5; border:1px solid var(--border); border-radius:4px; }
.suggest-title{ flex:1; font-size:.9rem; line-height:1.25; }
.suggest-price{ font-weight:700; font-size:.9rem; white-space:nowrap; color:var(--heading); }

/* Need Service button -> their service site */
.btn-service{ background:var(--navy); color:#fff; text-decoration:none; font-weight:600; font-size:1rem; padding:12px 22px; border-radius:6px; white-space:nowrap; }
.btn-service:hover{ background:#16224a; color:#fff; }
/* Mobile hamburger toggle (CSS-only; hidden on desktop, revealed under the phone breakpoint) */
.nav-toggle{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.nav-toggle-label{ display:none; }
.tagline-strip{ background:var(--soft); }
.tagline-strip .container{ text-align:center; padding:10px 20px; font-style:italic; font-weight:500; font-size:1.05rem; color:var(--navy); }

/* Hero (placeholder gradient until the real hero photo is confirmed) */
.hero{ position:relative; background:#1e1e1e; }
/* hero image is pre-feathered to a dark edge, so it's shown full-bleed with no blend/mask */
.hero-img{ display:block; width:100%; height:auto; }
.hero-overlay{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; color:#fff; }
.hero-overlay .container{ text-align:center; padding-top:clamp(14px, 3vw, 40px); }
.hero-title{ font-size:2.6rem; font-weight:800; margin:0 0 12px; line-height:1.15; text-shadow:0 2px 18px rgb(0 0 0 / .8), 0 0 8px rgb(0 0 0 / .55); }
.hero-sub{ font-size:1.05rem; margin:0 0 24px; opacity:.97; text-shadow:0 1px 10px rgb(0 0 0 / .75); }
.hero-cta{ display:inline-block; background:#fff; color:var(--navy); font-weight:700; text-decoration:none; padding:12px 26px; border-radius:6px; }
.hero-cta:hover{ background:var(--soft); }

/* Sections */
.section{ padding-top:44px; padding-bottom:8px; }
.section-title{ font-size:1.5rem; font-weight:700; color:var(--heading); text-align:center; margin:0 0 26px; }

/* Category tiles */
.cat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.cat-tile{ text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; transition:box-shadow .15s, transform .15s; }
.cat-tile:hover{ box-shadow:0 8px 24px rgb(0 0 0 / .1); transform:translateY(-2px); }
.cat-img{ aspect-ratio:1/1; background:#fff; }
.cat-img img{ width:100%; height:100%; object-fit:contain; }
.cat-name{ padding:13px 14px; font-weight:600; text-align:center; }

/* Testimonials carousel */
.testimonials{ max-width:980px; margin:0 auto; }
.tcard{ display:none; margin:0; background:var(--soft); border:1px solid var(--border); border-radius:12px; padding:30px 34px; }
.tcard.active{ display:block; }
.tname{ text-align:center; font-weight:700; font-size:1.15rem; color:var(--heading); margin-bottom:12px; }
.ttext{ text-align:center; margin:0; color:var(--ink); line-height:1.6; }
.tnav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.tarrow{ width:42px; height:42px; border:0; border-radius:50%; background:#111; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tarrow:hover{ background:#000; }
.tdots{ display:flex; gap:9px; }
.tdot{ width:10px; height:10px; border-radius:50%; background:#cfcfcf; border:0; padding:0; cursor:pointer; }
.tdot.active{ background:#111; }
.reviews-btn{ display:block; max-width:760px; margin:26px auto 0; background:#111; color:#fff; text-align:center;
  text-decoration:none; font-weight:600; padding:16px 24px; border-radius:8px; }
.reviews-btn:hover{ background:#000; color:#fff; }

/* Product grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px; padding-bottom:48px; }
.card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .15s, border-color .15s; }
.card:hover{ box-shadow:0 6px 22px rgb(0 0 0 / .08); border-color:#c9d3e6; }
.card-img{ aspect-ratio:1/1; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-img .ph-logo{ object-fit:contain; padding:26px; opacity:.55; }
.noimg{ color:#aab; font-weight:600; font-size:.8rem; }
.card-body{ padding:13px 15px; }
.card-title{ font-weight:600; font-size:.93rem; color:var(--heading); margin-bottom:4px; }
.card-vendor{ color:var(--muted); font-size:.8rem; }
.card-price{ margin-top:9px; font-weight:700; font-size:1.02rem; color:var(--heading); }

/* Product detail */
main > .detail-wrap{ }
.detail-page{ max-width:1440px; margin:0 auto; padding:28px 20px 56px; }
.breadcrumb{ margin-bottom:18px; font-size:.9rem; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--navy); }
.detail{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
.detail-img{ background:#f5f5f5; border:1px solid var(--border); border-radius:10px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.detail-img img{ width:100%; height:100%; object-fit:cover; }
.detail-info h1{ margin-top:0; font-size:1.6rem; }
.detail-vendor{ color:var(--muted); margin-bottom:14px; }
.detail-price{ font-size:1.9rem; font-weight:800; color:var(--heading); }
.availability{ color:#1a7a3c; font-weight:600; margin:6px 0 18px; }
.btn-buy{ display:inline-block; background:var(--navy); color:#fff; border:0; border-radius:6px; padding:13px 26px; font-size:1rem; font-weight:600; font-family:inherit; text-decoration:none; }
.btn-buy:hover{ background:#2c4f8a; color:#fff; }
.detail-desc{ margin-top:26px; padding-top:20px; border-top:1px solid var(--border); }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:var(--soft-2); margin-top:48px; }
.footer-grid{ display:flex; justify-content:space-between; gap:24px; padding:30px 20px; flex-wrap:wrap; }
.footer-brand{ font-weight:700; color:var(--heading); }
.footer-note{ color:var(--muted); font-size:.88rem; margin-top:4px; }
.footer-contact{ font-size:.9rem; text-align:right; }
.footer-contact a{ color:var(--navy); text-decoration:none; }
.footer-links{ display:flex; flex-wrap:wrap; gap:20px; padding:4px 20px 28px; }
.footer-links a{ color:var(--navy); text-decoration:none; font-size:.9rem; }
.footer-links a:hover{ text-decoration:underline; }

/* Policy / content pages */
.policy{ max-width:820px; }
.policy h1{ font-size:1.9rem; color:var(--heading); margin-bottom:6px; }
.policy h2{ font-size:1.2rem; color:var(--heading); margin-top:28px; margin-bottom:8px; }
.policy p, .policy li{ line-height:1.65; }
.policy ul{ padding-left:22px; }
.policy-updated{ color:var(--muted); font-size:.9rem; margin-bottom:22px; }

/* Tablet */
@media (max-width:1024px){
  .header-main{ gap:16px; }
  .header-nav{ gap:14px; }
  .header-nav .nav-link{ font-size:.95rem; }
  .nav-search input{ width:180px; }
  .cat-grid{ grid-template-columns:repeat(3, 1fr); }
  .detail{ gap:28px; }
}

/* Phone */
@media (max-width:760px){
  .header-main{ flex-wrap:wrap; align-items:center; gap:10px; padding:12px 20px; }
  .brand-logo{ height:50px; }

  /* Hamburger button */
  .nav-toggle-label{ display:flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto; padding:8px; cursor:pointer; }
  .nav-toggle-label span{ display:block; width:26px; height:3px; background:var(--heading); border-radius:2px; transition:transform .2s, opacity .2s; }

  /* Collapsed menu, revealed when toggled */
  .header-nav{ display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; margin-left:0; }
  .nav-toggle:checked ~ .header-nav{ display:flex; }
  .header-nav .nav-link{ width:100%; padding:13px 4px; border-top:1px solid var(--border); font-size:.95rem; }

  /* Category dropdown becomes an inline expandable list on mobile */
  .nav-dropdown{ border-top:1px solid var(--border); }
  .nav-dropdown > summary{ padding:13px 4px; font-size:.95rem; }
  .nav-dropdown[open] > .dropdown-panel{ display:flex; flex-direction:column; padding:0 0 8px 14px; }
  .dropdown-panel a{ padding:9px 4px; }

  /* Search + Need Service go full width inside the menu */
  .nav-search{ width:100%; margin:12px 0 4px; }
  .nav-search input{ flex:1; width:auto; }
  .btn-service{ text-align:center; margin:6px 0 8px; }

  /* Animate hamburger into an X when open */
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* Tighter spacing + denser grids so phones show 2 columns, not 1 */
  /* The feathered banner is too short for overlaid text on phones; show the image alone.
     (Overlay is visually hidden but kept in the DOM so the h1 still counts for SEO.) */
  .hero-overlay{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .section{ padding-top:30px; }
  .section-title{ font-size:1.3rem; margin-bottom:18px; }
  .cat-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
  .detail{ grid-template-columns:1fr; gap:22px; }
  .detail-info h1{ font-size:1.35rem; }
  .footer-grid{ flex-direction:column; }
  .footer-contact{ text-align:left; }
}

/* Small phones: single, comfortable column */
@media (max-width:420px){
  .cat-grid, .grid{ grid-template-columns:1fr; }
}

/* Service page */
.lede{ font-size:1.08rem; color:#333; }
.svc-contact{ background:var(--soft, #f3f5f9); border:1px solid #dde3ee; border-radius:8px; padding:12px 16px; }
.svc-contact p{ margin:4px 0; }
.svc-cta{ margin-top:22px; }