/*
Theme Name: Outboard And Small Engines
Theme URI: https://outboardandsmallengines.com.au
Author: Outboard And Small Engines
Description: Custom homepage theme for Outboard And Small Engines — new outboard motors, Australia & NZ.
Version: 2.7
*/


  :root{
    --navy:#0A2A43;--navy-deep:#06203a;--blue:#1275D6;--blue-bright:#2E9BEE;
    --sky:#EAF4FD;--ink:#12212E;--slate:#5A6B78;--line:#E2EAF0;--white:#FFFFFF;--wash:#F6F9FC;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;line-height:1.08}
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  :focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px;border-radius:4px}
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;padding:15px 28px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .15s ease, background .15s ease, box-shadow .15s ease}
  .btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(18,117,214,.28)}
  .btn-primary:hover{background:#0E63B8;transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
  .btn-white{background:#fff;color:var(--navy)}
  .btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
  .eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

  .topbar{background:var(--navy-deep);color:#cfe1f0;font-size:13.5px}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:42px;max-width:1560px;padding:0 20px}
  .topbar a{color:#cfe1f0}.topbar a:hover{color:#fff}
  .topbar .tb-right{display:flex;gap:22px;align-items:center}
  .topbar b{color:#fff;font-weight:600}

  header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  header.site .wrap{display:flex;align-items:center;gap:16px;height:126px;position:relative;max-width:1560px;padding:0 20px}
  .logo-link{flex-shrink:0}
  .logo-img{height:130px;width:auto}
  /* LOGO image — your real logo, embedded */
  .logo-img{height:130px;width:auto}
  .nav-toggle{display:none}
  .hamburger{display:none;margin-left:auto;width:50px;height:50px;border:1px solid var(--line);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer}
  .hamburger svg{width:26px;height:26px;color:var(--navy)}
  nav.main{display:flex;gap:18px;margin-left:auto;align-items:center}
  /* browse categories dropdown (matches live site) */
  .browsecat{position:relative}
  .browsecat>button{display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:none;border-radius:8px;padding:13px 18px;cursor:pointer}
  .browsecat>button svg{width:16px;height:16px}
  .browsecat .catmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(10,42,67,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease, transform .16s ease, visibility .16s ease;z-index:60}
  .browsecat:hover .catmenu,.browsecat:focus-within .catmenu{opacity:1;visibility:visible;transform:translateY(0)}
  .browsecat .catmenu a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;font-weight:500;font-size:15px;color:var(--ink)}
  .browsecat .catmenu a:hover{background:var(--sky);color:var(--blue)}
  .browsecat .catmenu a .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-bright);flex-shrink:0}
  nav.main a{font-weight:500;font-size:14px;color:var(--ink);padding:6px 0;position:relative;white-space:nowrap}
  nav.main a:hover{color:var(--blue)}
  nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue);transition:width .2s ease}
  nav.main a:hover::after{width:100%}
  .cart{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy)}
  .cart svg{width:22px;height:22px}
  .header-icons{display:flex;align-items:center;gap:16px;margin-left:20px}
  .hicon{position:relative;color:var(--navy);display:flex}
  .hicon svg{width:22px;height:22px}
  .hicon:hover{color:var(--blue)}
  .carticon{position:relative;display:flex}
  .hbadge{position:absolute;top:-7px;right:-8px;background:var(--blue);color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:10px;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}

  .hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%, #0E3B5E 60%, #124a72 100%);color:#fff;overflow:hidden}
  .hero .wrap{position:relative;z-index:2;padding-top:44px;padding-bottom:88px}
  .brandname{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px);color:#fff;margin-bottom:4px;letter-spacing:.01em}
  .hero-eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);display:block;margin-bottom:26px}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* wide rotating product banner (matches live site) */
  .herobanner{position:relative;min-height:430px}
  .hbslide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;opacity:0;animation:heroCycle 25s infinite}
  .hbslide:nth-child(1){animation-delay:0s}
  .hbslide:nth-child(2){animation-delay:5s}
  .hbslide:nth-child(3){animation-delay:10s}
  .hbslide:nth-child(4){animation-delay:15s}
  .hbslide:nth-child(5){animation-delay:20s}
  .hb-brand{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright)}
  .hb-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,46px);line-height:1.08;margin:10px 0 16px;color:#fff}
  .hb-desc{font-size:17px;color:#c7dcee;max-width:520px;margin-bottom:20px}
  .hb-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;color:#fff;margin-bottom:22px}
  .hb-photo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;padding:22px;min-height:300px;box-shadow:0 24px 50px rgba(0,0,0,.34)}
  .hb-photo img{max-height:280px;max-width:100%;object-fit:contain}
  @keyframes heroCycle{0%{opacity:0;transform:translateX(24px)}2.5%{opacity:1;transform:translateX(0)}18%{opacity:1;transform:translateX(0)}20.5%{opacity:0;transform:translateX(-24px)}100%{opacity:0}}
  .hero h1{font-size:clamp(34px,5vw,58px);font-weight:700;margin:18px 0 20px}
  .hero h1 em{font-style:normal;color:var(--blue-bright)}
  .hero p.lede{font-size:19px;color:#c7dcee;max-width:520px;margin-bottom:32px}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
  .hero .chips{display:flex;gap:10px;flex-wrap:wrap}
  .chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:100px;font-size:13.5px;color:#e6f1fb;font-weight:500}
  .chip svg{width:15px;height:15px;color:var(--blue-bright)}
  .hero-art{position:relative;display:flex;justify-content:center;align-items:center}
  .hero-art .disc{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 50% 40%, rgba(46,155,238,.35), rgba(46,155,238,0) 68%)}
  .hero-art svg{position:relative;width:300px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
  /* rotating brand showcase */
  .showcase{position:relative;width:100%;max-width:380px;height:400px;z-index:2}
  .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:cycle 20s infinite}
  .slide .card{width:230px;border-radius:20px;padding:30px 24px;text-align:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);box-shadow:0 24px 50px rgba(0,0,0,.38)}
  .slide .mtr{width:120px;height:120px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;border-radius:18px}
  .slide .mtr svg{width:66px;height:auto}
  .slide .bname{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:#fff}
  .slide .bmeta{font-size:14px;color:#bcd8f2;margin-top:3px}
  .slide:nth-child(1){animation-delay:0s}
  .slide:nth-child(2){animation-delay:4s}
  .slide:nth-child(3){animation-delay:8s}
  .slide:nth-child(4){animation-delay:12s}
  .slide:nth-child(5){animation-delay:16s}
  @keyframes cycle{0%{opacity:0;transform:translateX(28px) scale(.97)}4%{opacity:1;transform:translateX(0) scale(1)}18%{opacity:1;transform:translateX(0) scale(1)}22%{opacity:0;transform:translateX(-28px) scale(.97)}100%{opacity:0}}
  /* policy sections */
  .policy{border-top:1px solid var(--line);background:#fff}
  .policy .wrap{padding:60px 24px}
  .policy .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
  .policy h2{font-size:26px;color:var(--navy);margin:6px 0 12px}
  .policy p{color:var(--slate);font-size:15.5px;margin-bottom:12px}
  .policy .note{font-size:14px;color:var(--blue);font-weight:600}
  @media(max-width:900px){.policy .grid{grid-template-columns:1fr;gap:36px}}
  /* contact + map */
  .contactmap{background:var(--wash);border-top:1px solid var(--line)}
  .contactmap .wrap{padding:64px 24px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
  .contactmap .info h2{font-size:30px;color:var(--navy);margin:8px 0 14px}
  .contactmap .info p{color:var(--slate);margin-bottom:18px;max-width:440px}
  .cline{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-weight:500;color:var(--ink);font-size:15.5px}
  .cline svg{width:20px;height:20px;color:var(--blue);flex-shrink:0}
  .mapbox{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:340px;box-shadow:0 14px 34px rgba(10,42,67,.08)}
  .mapbox iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
  @media(max-width:900px){.contactmap .wrap{grid-template-columns:1fr}}
  .wake{position:absolute;left:0;right:0;bottom:0;height:60px;z-index:1;opacity:.5}

  /* ===== ANIMATED BRAND MARQUEE (brands sliding across) ===== */
  .marquee{background:#fff;border-bottom:1px solid var(--line);overflow:hidden;position:relative}
  .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
  .marquee::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
  .marquee::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
  .marquee-label{text-align:center;padding:22px 0 4px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
  .marquee-track{display:flex;align-items:center;gap:0;width:max-content;animation:slide 24s linear infinite;padding:20px 0}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .m-item{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(16px,2.2vw,24px);color:var(--navy);text-transform:uppercase;letter-spacing:-.01em;padding:0 28px;white-space:nowrap;opacity:.88}
  .m-dot{width:9px;height:9px;border-radius:50%;background:var(--blue-bright);flex-shrink:0}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .brands{background:var(--wash);border-bottom:1px solid var(--line)}
  .brands .wrap{padding:52px 24px}
  .brands .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:26px}
  .brands h2{font-size:28px;color:var(--navy)}
  .brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .brand-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 20px;text-align:center;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
  .brand-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,42,67,.10);border-color:#cfe0ef}
  .brand-card .bn{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
  .brand-card .bc{font-size:13.5px;color:var(--slate);margin-top:4px}
  .brand-card .go{font-size:13px;font-weight:600;color:var(--blue);margin-top:14px;display:inline-flex;align-items:center;gap:5px}

  .values .wrap{padding:64px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .value .ic{width:46px;height:46px;border-radius:10px;background:var(--sky);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .value .ic svg{width:24px;height:24px;color:var(--blue)}
  .value h3{font-size:17px;color:var(--navy);margin-bottom:6px}
  .value p{font-size:14.5px;color:var(--slate)}

  .hp{background:var(--navy);color:#fff}
  .hp .wrap{padding:70px 24px}
  .hp .head{text-align:center;max-width:640px;margin:0 auto 36px}
  .hp .head h2{font-size:32px;margin:10px 0}.hp .head p{color:#bcd3e6}
  .hp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
  .hp-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:18px 10px;text-align:center;transition:background .15s ease, transform .15s ease}
  .hp-pill:hover{background:var(--blue);transform:translateY(-3px);border-color:var(--blue)}
  .hp-pill .n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px}
  .hp-pill .u{font-size:12px;color:#bcd3e6}.hp-pill:hover .u{color:#eaf4fd}

  .split .wrap{padding:72px 24px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .split h2{font-size:34px;color:var(--navy);margin:12px 0 16px;line-height:1.12}
  .split p{color:var(--slate);font-size:16.5px;margin-bottom:24px;max-width:460px}
  .split .cta-row{display:flex;gap:12px;flex-wrap:wrap}
  .split-art{background:linear-gradient(155deg,#EAF4FD,#D3E7F8);border-radius:18px;padding:40px;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .split-art svg{width:80%;color:var(--blue)}
  .howsteps{display:flex;flex-direction:column;gap:18px;width:100%;max-width:340px}
  .hstep{display:flex;align-items:center;gap:16px;background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 6px 18px rgba(10,42,67,.08)}
  .hstep .hnum{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:var(--blue);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
  .hstep strong{display:block;font-family:'Space Grotesk',sans-serif;color:var(--navy);font-size:16px}
  .hstep small{color:var(--slate);font-size:13.5px}
  .split-art .badge{position:absolute;top:22px;left:22px;background:#fff;border-radius:100px;padding:8px 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--navy);box-shadow:0 6px 16px rgba(10,42,67,.12)}

  .band{background:var(--sky);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .band .wrap{padding:26px 24px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--navy);font-size:15px}
  .band span{display:inline-flex;align-items:center;gap:10px}
  .band svg{width:18px;height:18px;color:var(--blue)}

  footer.site{background:var(--navy-deep);color:#a9c4da;font-size:14.5px}
  footer.site .wrap{padding:60px 24px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
  footer.site h4{font-family:'Space Grotesk',sans-serif;color:#fff;font-size:15px;margin-bottom:16px}
  footer.site a{color:#a9c4da;display:block;padding:5px 0}
  footer.site a:hover{color:#fff}
  footer .flogo{margin-bottom:14px}
  footer .flogo img{height:150px;width:auto;display:block;margin-left:-8px}
  footer .fname{font-family:'Space Grotesk',sans-serif;color:#fff;font-weight:700;font-size:18px;margin:12px 0 6px}
  footer .fabout{color:#8fb0ca;max-width:300px;margin-bottom:18px}
  footer .contact-line{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#cfe1f0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
  footer .contact-line svg{width:16px;height:16px;color:var(--blue-bright);flex-shrink:0}
  footer .socials{display:flex}
  /* fixed corner social icons (all pages) */
  .corner-socials{position:fixed;right:22px;bottom:150px;z-index:60;display:flex;flex-direction:column;gap:10px}
  .corner-socials a{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(10,42,67,.3);transition:transform .15s ease, background .15s ease}
  .corner-socials a:hover{transform:translateY(-2px);background:var(--blue)}
  .corner-socials svg{width:20px;height:20px}
  .subfoot{border-top:1px solid rgba(255,255,255,.10)}
  .subfoot .wrap{padding:18px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#7ea1bd}

  .float-msg{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;padding:14px 20px;border-radius:100px;box-shadow:0 10px 30px rgba(18,117,214,.4)}
  .float-msg svg{width:20px;height:20px}
  .float-msg:hover{background:#0E63B8;transform:translateY(-2px)}
  .float-wa{position:fixed;right:22px;bottom:82px;z-index:60;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;padding:14px 20px;border-radius:100px;box-shadow:0 10px 30px rgba(37,211,102,.4);transition:transform .15s ease, background .15s ease}
  .float-wa svg{width:20px;height:20px}
  .float-wa:hover{background:#1EB855;transform:translateY(-2px)}

  @media (max-width:960px){
    .hero .wrap{padding-top:32px;padding-bottom:48px}
    .herobanner{min-height:520px}
    .hbslide{grid-template-columns:1fr;gap:22px}
    .hb-photo{min-height:220px;padding:16px;order:-1}
    .hb-photo img{max-height:200px}
    .brand-grid{grid-template-columns:repeat(2,1fr)}
    .values .wrap{grid-template-columns:repeat(2,1fr)}
    .hp-grid{grid-template-columns:repeat(3,1fr)}
    .split .wrap{grid-template-columns:1fr;gap:28px}
    footer.site .wrap{grid-template-columns:1fr 1fr}
    .logo-img{height:96px}
    .hamburger{display:flex}
    .browsecat{display:none}
    nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;box-shadow:0 20px 40px rgba(0,0,0,.14);margin-left:0}
    .nav-toggle:checked ~ nav.main{display:flex}
    nav.main a{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line)}
    nav.main a::after{display:none}
    nav.main .cart{border-bottom:none;padding-top:16px}
  }
  @media (max-width:560px){
    .topbar .tb-right span.abn{display:none}
    .brand-grid{grid-template-columns:1fr 1fr}
    .values .wrap{grid-template-columns:1fr}
    .hp-grid{grid-template-columns:repeat(2,1fr)}
    footer.site .wrap{grid-template-columns:1fr}
    .band .wrap{gap:16px}
    .logo-img{height:78px}
    .corner-socials{bottom:132px}
    .corner-socials a{width:38px;height:38px}
    .corner-socials svg{width:17px;height:17px}
    .showcase{max-width:280px;height:340px}
    .m-item{padding:0 18px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;scroll-behavior:auto!important}
    .marquee-track{animation:none;justify-content:center;flex-wrap:wrap;width:auto}
    .slide{animation:none}
    .slide:nth-child(1){opacity:1}
    .slide:nth-child(n+2){display:none}
    .hbslide{animation:none}
    .hbslide:nth-child(1){opacity:1}
    .hbslide:nth-child(n+2){display:none}
  }

/* ============ INNER PAGES (About, Contact, Policies, Blog, Account) ============ */
.page-hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,#0E3B5E 60%,#124a72 100%);color:#fff;padding:64px 0 58px;overflow:hidden}
.page-hero .eyebrow{color:var(--blue-bright);display:block;margin-bottom:12px}
.page-hero h1{font-size:clamp(30px,4.4vw,48px);color:#fff !important}
.ph-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:40px}
.inner-page{padding:56px 0 72px;background:var(--white)}
.inner-page .wrap{max-width:880px}
.page-content{font-size:17px;color:var(--ink)}
.page-content h2{font-size:26px;color:var(--navy);margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--sky)}
.page-content h3{font-size:20px;color:var(--navy);margin:28px 0 10px}
.page-content p{margin:0 0 16px}
.page-content ul,.page-content ol{margin:0 0 18px 22px}
.page-content li{margin-bottom:8px}
.page-content a{color:var(--blue);font-weight:600}
.page-content a:hover{text-decoration:underline}
.page-content strong{color:var(--navy)}
.page-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px}
.page-content table th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;font-family:'Space Grotesk',sans-serif;font-weight:600}
.page-content table td{padding:11px 14px;border-bottom:1px solid var(--line)}
.page-content table tr:nth-child(even) td{background:var(--wash)}
.page-content blockquote{border-left:4px solid var(--blue);background:var(--sky);padding:16px 20px;border-radius:0 10px 10px 0;margin:20px 0;color:var(--navy)}
.textus-band{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;padding:44px 0}
.textus-band .tb-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.textus-band h2{color:#fff;font-size:24px;margin-bottom:6px}
.textus-band p{color:#cfe1f0;margin:0}

/* ============ SHOP GRID & PRODUCT CARDS ============ */
.shop-shell{background:var(--wash);padding:48px 0 72px}
.shop-shell.is-single{background:var(--white);padding-top:36px}
.shop-shell .woocommerce-result-count{color:var(--slate);font-size:14.5px}
.shop-shell .woocommerce-ordering select{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-family:'Inter',sans-serif;font-size:14px;background:#fff;color:var(--ink)}
.shop-shell ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;margin:26px 0 0;padding:0}
@media(max-width:1100px){.shop-shell ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.shop-shell ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.shop-shell ul.products{grid-template-columns:1fr}}
.shop-shell ul.products li.product{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 0 18px;display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.shop-shell ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,42,67,.12);border-color:var(--blue-bright)}
.shop-shell ul.products li.product a img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:14px}
.shop-shell ul.products li.product .woocommerce-loop-product__title{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:600;color:var(--navy);line-height:1.35;padding:12px 16px 4px;min-height:66px}
.shop-shell ul.products li.product .price{color:var(--blue);font-weight:700;font-size:17px;padding:0 16px;margin-top:auto}
.shop-shell ul.products li.product .price del{color:var(--slate);font-weight:500;font-size:14px;opacity:.7}
.shop-shell ul.products li.product .button{margin:12px 16px 0;text-align:center;background:var(--navy);color:#fff;border-radius:8px;padding:11px 14px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;transition:background .15s ease}
.shop-shell ul.products li.product .button:hover{background:var(--blue)}
.shop-shell ul.products li.product .onsale{position:absolute;top:12px;left:12px;background:var(--blue);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:100px;z-index:2}
.shop-shell .woocommerce-pagination{margin-top:38px;text-align:center}
.shop-shell .woocommerce-pagination ul{display:inline-flex;gap:8px;list-style:none;border:none}
.shop-shell .woocommerce-pagination li a,.shop-shell .woocommerce-pagination li span{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:600}
.shop-shell .woocommerce-pagination li span.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.shop-shell .woocommerce-pagination li a:hover{border-color:var(--blue);color:var(--blue)}

/* ============ MY ACCOUNT / FORMS / NOTICES ============ */
.shop-shell .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.shop-shell .woocommerce-MyAccount-navigation li a{display:block;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
.shop-shell .woocommerce-MyAccount-navigation li:last-child a{border-bottom:none}
.shop-shell .woocommerce-MyAccount-navigation li.is-active a,.shop-shell .woocommerce-MyAccount-navigation li a:hover{background:var(--sky);color:var(--blue)}
.shop-shell .woocommerce-MyAccount-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:'Inter',sans-serif;font-size:15px;background:#fff}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{outline:2px solid var(--blue-bright);border-color:var(--blue)}
.woocommerce button.button,.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--blue);color:#fff;border-radius:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;padding:13px 24px}
.woocommerce button.button:hover,.woocommerce a.button.alt:hover{background:#0E63B8;color:#fff}
.woocommerce-message,.woocommerce-info{border-top-color:var(--blue);background:var(--sky);color:var(--navy);border-radius:0 0 10px 10px}
.woocommerce-error{border-radius:0 0 10px 10px}

/* ============ PER-PAGE IDENTITY ============ */
.ph-mark{position:absolute;right:-40px;top:50%;transform:translateY(-52%);width:340px;height:340px;color:rgba(255,255,255,.07);pointer-events:none}
.hero-shipping-policy{background:linear-gradient(160deg,#08334f 0%,#0d4a74 60%,#116094 100%)}
.hero-refund-and-returns-policy{background:linear-gradient(160deg,#0A2A43 0%,#123f63 55%,#0e5a84 100%)}
.hero-contact{background:linear-gradient(160deg,#062a46 0%,#0E3B5E 55%,#1275D6 130%)}

/* ============ CONTACT PAGE ============ */
.contact-grid-wrap{background:var(--wash);padding:52px 0 72px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:44px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.ccard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:block;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.ccard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,42,67,.13);border-color:var(--blue-bright)}
.ccard svg{width:34px;height:34px;color:var(--blue);margin-bottom:14px}
.ccard h3{font-size:19px;color:var(--navy);margin-bottom:8px}
.ccard p{color:var(--slate);font-size:15px;margin:0 0 6px}
.ccard-big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;color:var(--navy)!important;margin-bottom:8px!important}
.ccard-email{font-size:16.5px;word-break:break-all}
.ccard-primary{background:linear-gradient(150deg,var(--navy),#0E3B5E);border-color:transparent}
.ccard-primary svg{color:var(--blue-bright)}
.ccard-primary h3,.ccard-primary .ccard-big{color:#fff!important}
.ccard-primary p{color:#cfe1f0}
.contact-content{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.contact-content:empty{display:none}


/* ============ BROWSE CATEGORIES: tappable + visible on mobile ============ */
.cat-toggle{display:none}
.browsecat .bc-btn{display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:none;border-radius:8px;padding:13px 18px;cursor:pointer}
.browsecat .bc-btn svg{width:16px;height:16px}
.bc-short{display:none}
.browsecat .cat-toggle:checked ~ .catmenu{opacity:1;visibility:visible;transform:translateY(0)}
@media (max-width:960px){
  .browsecat{display:block !important;margin-left:auto;margin-right:12px}
  .browsecat .bc-btn{padding:10px 14px;font-size:12.5px;gap:8px}
  .bc-full{display:none}
  .bc-short{display:inline}
  .browsecat .catmenu{left:auto;right:0;min-width:230px}
  .browsecat:hover .catmenu{opacity:0;visibility:hidden;transform:translateY(-6px)}
  .browsecat .cat-toggle:checked ~ .catmenu{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
}

/* JS tap-toggle: .open class opens the category menu on any device */
.browsecat.open .catmenu{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}

/* Simple Browse Categories link (no dropdown — reliable everywhere) */
.browsecat-link{display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:13px 18px}
.browsecat-link svg{width:16px;height:16px}
.browsecat-link .bc-short{display:none}
.browsecat-link:hover{background:#0E63B8;color:#fff}
@media (max-width:960px){
  .browsecat-link{margin-left:auto;margin-right:12px;padding:10px 14px;font-size:12.5px;gap:8px}
  .browsecat-link .bc-full{display:none}
  .browsecat-link .bc-short{display:inline}
}

/* ============================================================
   MOBILE HEADER REDESIGN + FOOTER FIXES (v2.7)
   ============================================================ */

/* Mobile action elements hidden on desktop */
.m-ham, .m-actions { display:none; }

@media (max-width:960px){
  /* --- TOP BAR: email only, drop the phone number --- */
  .topbar .wrap > span:first-child{ display:none; }        /* hide phone */
  .topbar .tb-right .abn{ display:none; }                   /* hide ABN to keep it clean */
  .topbar .wrap{ justify-content:center; }
  .topbar .tb-right{ margin:0; }

  /* --- HEADER ROW: hamburger LEFT · logo CENTER · cart+account RIGHT --- */
  header.site .wrap{
    display:grid !important;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    height:auto !important;
    padding:10px 14px !important;
    gap:8px;
  }
  .m-ham{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; color:var(--navy); cursor:pointer;
    grid-column:1;
  }
  .m-ham svg{ width:26px; height:26px; }
  .logo-link{ grid-column:2; justify-self:center; }
  .logo-img{ height:60px !important; width:auto !important; }   /* smaller centered logo */
  .m-actions{
    display:flex; align-items:center; gap:14px; grid-column:3; justify-self:end;
  }
  .m-cart{ display:flex; flex-direction:column; align-items:center; color:var(--navy); line-height:1; position:relative; }
  .m-cart-ico{ position:relative; }
  .m-cart-ico svg{ width:26px; height:26px; }
  .m-cart-badge{
    position:absolute; top:-6px; right:-8px; background:var(--blue); color:#fff;
    font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700;
    min-width:17px; height:17px; border-radius:100px; display:flex; align-items:center; justify-content:center; padding:0 4px;
  }
  .m-cart-total{ font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:600; color:var(--navy); margin-top:3px; }
  .m-acct{ color:var(--navy); display:flex; align-items:center; }
  .m-acct svg{ width:26px; height:26px; }

  /* hide the OLD desktop controls on mobile (old hamburger label, browse link, desktop icons) */
  header.site .hamburger,
  header.site .browsecat-link{ display:none !important; }

  /* --- FOOTER: smaller logo, socials into the top-right corner --- */
  footer.site .flogo img{ height:64px !important; width:auto !important; }
  footer.site .wrap > div:first-child{ position:relative; }
  footer.site .socials{
    position:absolute; top:0; right:0; display:flex; gap:10px; margin:0;
  }
}

/* Desktop footer: also shrink the oversized logo a touch + socials in corner */
footer.site .flogo img{ height:84px; width:auto; }
footer.site .wrap > div:first-child{ position:relative; }
@media(min-width:961px){
  footer.site .socials{ position:absolute; top:0; right:0; margin:0; }
}

/* ============================================================
   MOBILE FINAL FIXES (v2.8) — remove browse cat, tidy footer
   ============================================================ */

/* 1) Remove Browse Categories everywhere on mobile (button/link/dropdown) */
@media (max-width:960px){
  .browsecat, .browsecat-link, .browsecat-mobile { display:none !important; }
}

/* 2) Kill any floating side social icons (corner-socials) on every screen */
.corner-socials, .social-float, .floating-socials { display:none !important; }

/* 3) Compact footer on mobile: Shop / Help / Company side by side, not stacked tall */
@media (max-width:960px){
  footer.site .wrap{
    grid-template-columns: 1fr 1fr 1fr !important;
    gap:16px 14px !important;
    padding:34px 18px 20px !important;
  }
  /* business info block spans the full width across the top */
  footer.site .wrap > div:first-child{
    grid-column: 1 / -1 !important;
    margin-bottom:6px;
  }
  footer.site h4{ font-size:13px !important; margin-bottom:8px !important; }
  footer.site a{ font-size:12.5px !important; padding:3px 0 !important; }
  footer.site .fabout{ font-size:12.5px !important; margin-bottom:12px !important; }
  footer .flogo img{ height:56px !important; }
  /* contact lines tighter */
  footer .contact-line{ margin-bottom:6px !important; padding-bottom:5px !important; font-size:12.5px !important; }
  /* socials: one neat row under the business info, left aligned */
  footer.site .socials{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    gap:12px !important;
    margin:10px 0 4px !important;
  }
  footer.site .socials a{ padding:0 !important; }
}

/* ============ FOOTER SOCIALS — always visible, footer row (v2.9) ============ */
footer.site .socials,
.subfoot .socials,
.socials{
  display:flex !important;
  flex-direction:row !important;
  gap:14px !important;
  align-items:center;
  position:static !important;
  margin:16px 0 0 !important;
}
footer.site .socials a, .socials a{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:38px; height:38px;
  background:rgba(255,255,255,.10);
  border-radius:50%;
  color:#fff !important;
  padding:0 !important;
}
footer.site .socials a:hover, .socials a:hover{ background:var(--blue); }
footer.site .socials svg, .socials svg{ width:18px; height:18px; }

/* Hide old desktop wishlist+cart from mobile menu (v3.0) */
@media (max-width:960px){ .header-icons{ display:none !important; } }

/* ============ DESKTOP FOOTER — tighten empty space (v3.1) ============ */
@media (min-width:961px){
  footer.site .wrap{
    padding:40px 24px 20px !important;
    align-items:start !important;
    gap:28px !important;
  }
  footer.site .flogo img{ height:70px !important; margin-bottom:6px !important; }
  footer.site .fabout{ margin-bottom:12px !important; }
  footer.site .contact-line{ margin-bottom:7px !important; padding-bottom:6px !important; }
  footer.site .socials{ margin-top:12px !important; }
  .subfoot .wrap{ padding:14px 24px !important; }
}

/* ============ DESKTOP FOOTER — center & fill full width (v3.2) ============ */
@media (min-width:961px){
  footer.site .wrap{
    max-width:1180px !important;
    margin:0 auto !important;
    grid-template-columns: 1.7fr 1fr 1fr 1fr !important;
    column-gap:48px !important;
  }
}


/* ============ FOOTER full-width fill — decisive (v3.3) ============ */
@media (min-width:961px){
  footer.site > .wrap{
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-left:6% !important;
    padding-right:6% !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    column-gap:5% !important;
  }
}


/* ============ FOOTER center + match header width (v3.4) ============ */
footer.site > .wrap{ max-width:1560px !important; margin-left:auto !important; margin-right:auto !important; }


/* ============ FOOTER spread columns to fill (v3.5) ============ */
@media (min-width:961px){
  footer.site > .wrap{
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    column-gap:0 !important;
    justify-content:space-between !important;
    padding-left:5% !important;
    padding-right:5% !important;
  }
  footer.site > .wrap > *{ padding-right:20px; }
}

/* ============ FOOTER edge-to-edge fill (v3.6) ============ */
@media (min-width:961px){
  footer.site > .wrap{
    max-width:none !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-left:8% !important;
    padding-right:8% !important;
    grid-template-columns:2fr 1fr 1fr 1fr !important;
    column-gap:4% !important;
  }
}


/* ============ FOOTER full-bleed width, no empty sides (v3.6) ============ */
@media (min-width:961px){
  footer.site > .wrap{
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
    padding-left:60px !important;
    padding-right:60px !important;
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    column-gap:40px !important;
  }
}


/* ============ FOOTER final balance (v3.6) ============ */
@media (min-width:961px){
  footer.site .wrap{
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    column-gap:30px !important;
    padding-left:60px !important;
    padding-right:60px !important;
    justify-content:stretch !important;
    max-width:1500px !important;
    margin:0 auto !important;
  }
}

/* ============ PRODUCT IMAGE — fill the frame properly (v4.0) ============ */
.single-product div.product .woocommerce-product-gallery{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
.single-product div.product .woocommerce-product-gallery__wrapper{
  width:100% !important;
  margin:0 !important;
}
.single-product div.product .woocommerce-product-gallery__image{
  width:100% !important;
}
.single-product div.product .woocommerce-product-gallery__image a{
  display:block !important;
  width:100% !important;
}
.single-product div.product .woocommerce-product-gallery__image img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  background:#fff;
  border-radius:12px;
}
/* main image sits in a generous white frame */
.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
/* thumbnails row under the main image */
.single-product .flex-control-thumbs{
  display:flex !important;
  gap:10px;
  list-style:none;
  margin:14px 0 0 !important;
  padding:0;
}
.single-product .flex-control-thumbs li{ width:74px !important; margin:0 !important; }
.single-product .flex-control-thumbs img{
  width:74px !important; height:74px !important;
  object-fit:contain; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:4px;
  opacity:.75; cursor:pointer;
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active{ opacity:1; border-color:var(--blue); }

/* ============ PRODUCT META (SKU / Category / Tags / Brand) — tidy block (v4.2) ============ */
.single-product .product_meta{
  margin-top:26px !important;
  padding:18px 20px !important;
  background:var(--wash, #F6F9FC) !important;
  border:1px solid var(--line, #E2EAF0) !important;
  border-radius:12px !important;
  font-size:14px !important;
  line-height:1.7 !important;
}
.single-product .product_meta > span{
  display:block !important;
  padding:7px 0 !important;
  border-bottom:1px solid var(--line, #E2EAF0) !important;
  color:var(--slate, #5A6B78) !important;
}
.single-product .product_meta > span:last-child{ border-bottom:none !important; }
.single-product .product_meta .sku,
.single-product .product_meta a{
  color:var(--navy, #0A2A43) !important;
  font-weight:600 !important;
  text-decoration:none !important;
}
.single-product .product_meta a:hover{ color:var(--blue, #1275D6) !important; text-decoration:underline !important; }

/* ============ TRUST BAR (product pages) v4.3 ============ */
.oase-trust{ margin:22px 0 6px; }
.oase-trust-urgent{
  display:inline-block;
  background:#E8F5EC; color:#1B7A3D;
  border:1px solid #BFE3CB;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px;
  padding:9px 14px; border-radius:8px; margin-bottom:14px;
}
.oase-trust-list{ list-style:none; margin:0; padding:0; }
.oase-trust-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:var(--ink,#12212E); line-height:1.55;
  padding:7px 0;
}
.oase-trust-list .ot-ico{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--blue,#1275D6); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; margin-top:1px;
}
.oase-trust-help{
  margin-top:14px; padding:13px 15px;
  background:var(--wash,#F6F9FC); border:1px solid var(--line,#E2EAF0);
  border-radius:10px; font-size:14px; color:var(--slate,#5A6B78);
}
.oase-trust-help strong{ color:var(--navy,#0A2A43); }


/* ============ SEARCH BAR (v4.4) ============ */
.oase-search{ display:flex; align-items:center; gap:0; margin-left:auto; margin-right:14px; }
.oase-search-input{
  width:230px; height:40px; padding:0 14px;
  border:1px solid var(--line,#E2EAF0); border-right:none;
  border-radius:8px 0 0 8px; font-size:14px; font-family:'Inter',system-ui,sans-serif;
  color:var(--ink,#12212E); background:#fff; outline:none;
}
.oase-search-input::placeholder{ color:#9AA9B5; }
.oase-search-input:focus{ border-color:var(--blue,#1275D6); }
.oase-search-btn{
  height:40px; width:44px; border:none; border-radius:0 8px 8px 0;
  background:var(--blue,#1275D6); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.oase-search-btn:hover{ background:#0E63B8; }
.oase-search-btn svg{ width:19px; height:19px; }

@media (max-width:1200px){ .oase-search-input{ width:170px; } }
@media (max-width:960px){
  .oase-search{
    order:5; width:100%; margin:10px 0 2px; padding:0 2px;
  }
  .oase-search-input{ flex:1; width:auto; }
}


/* ============ UNIFORM PRODUCT IMAGE FRAMES (v4.5) ============
   Every product photo sits in the same 4:3 box, centred, on white.
   Landscape, portrait and square images all display consistently. */

/* --- Single product page --- */
.single-product div.product .woocommerce-product-gallery__image{
  aspect-ratio: 4 / 3;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:#fff;
  overflow:hidden;
}
.single-product div.product .woocommerce-product-gallery__image a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100% !important;
  height:100% !important;
}
.single-product div.product .woocommerce-product-gallery__image img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}

/* --- Shop / category grid --- */
ul.products li.product a img{
  aspect-ratio: 4 / 3;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  background:#fff;
  border-radius:8px;
}


/* ============ WHAT'S IN THE BOX (v4.7) ============ */
.oase-box{
  margin:22px 0 6px; padding:16px 18px;
  background:#fff; border:1px solid var(--line,#E2EAF0); border-radius:12px;
}
.oase-box-title{
  margin:0 0 10px !important; font-size:15px !important; font-weight:700;
  color:var(--navy,#0A2A43); font-family:'Space Grotesk',sans-serif;
}
.oase-box-list{ list-style:none; margin:0; padding:0; }
.oase-box-list li{
  position:relative; padding:6px 0 6px 24px;
  font-size:14.5px; color:var(--ink,#12212E); line-height:1.5;
}
.oase-box-list li:before{
  content:'\2713'; position:absolute; left:0; top:6px;
  color:var(--blue,#1275D6); font-weight:700;
}


/* ============ HEADER ICON FIX (v4.8) ============
   The search bar was overflowing the header and crushing the wishlist icon to 0px,
   leaving its badge floating loose over the cart badge. Lock the icons, let search shrink. */
.header-icons{ flex:0 0 auto !important; align-items:center; }
.header-icons .hicon,
.header-icons .cart{ flex:0 0 auto !important; position:relative; }
.header-icons svg{
  width:22px !important; height:22px !important;
  flex:0 0 auto !important; display:block;
}
.header-icons .hicon{ width:22px !important; }
.header-icons .carticon{ display:inline-flex; align-items:center; }

/* let the search bar give up space instead of the icons */
.oase-search{ flex:0 1 auto !important; min-width:0; }
.oase-search-input{ width:190px; min-width:110px; }
@media (max-width:1280px){ .oase-search-input{ width:150px; } }
@media (max-width:1100px){ .oase-search-input{ width:120px; } }


/* ============ HEADER SPACE SAFETY (v4.9) ============
   Stops the header overflowing on mid-size screens (laptops ~1000-1300px). */
@media (min-width:961px) and (max-width:1320px){
  nav.main a{ font-size:14px; }
  .oase-search-input{ width:130px; }
  .browsecat-link .bc-full{ display:none; }
  .browsecat-link .bc-short{ display:inline; }
}
@media (min-width:961px) and (max-width:1120px){
  .oase-search-input{ width:100px; }
  nav.main a{ font-size:13.5px; }
}
@media (min-width:961px) and (max-width:1030px){
  .oase-search{ display:none; }
}


/* ============ FOOTER FULL-WIDTH BALANCE (v5.0) ============
   The footer wrap was capped at 1500px inside an ~1890px footer, so the columns
   stopped short and left a dead zone on the right. Widen and spread them. */
@media (min-width:961px){
  footer.site .wrap{
    max-width:1760px !important;
    width:calc(100% - 96px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:1.5fr 1fr 1fr 1fr !important;
    column-gap:48px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
@media (min-width:1600px){
  footer.site .wrap{ column-gap:64px !important; }
}


/* ============ FOOTER: kill the dead space on the right (v5.1) ============
   Columns were fixed-width, so the last column had ~230px of empty space inside it.
   Size columns to their content and push them apart so the last one sits flush right. */
@media (min-width:961px){
  footer.site .wrap{
    grid-template-columns:minmax(320px,1.3fr) auto auto auto !important;
    justify-content:space-between !important;
    column-gap:56px !important;
    max-width:1720px !important;
    width:calc(100% - 110px) !important;
    margin:0 auto !important;
  }
  footer.site .wrap > *:last-child{ justify-self:end; text-align:left; min-width:150px; }
}


/* ============ FOOTER FINAL (v5.2) ============
   All columns sized to their content; the leftover width goes into the GAPS,
   so the columns spread evenly and the last one lands flush at the right. */
@media (min-width:961px){
  footer.site .wrap{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:40px !important;
    max-width:1720px !important;
    width:calc(100% - 110px) !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  footer.site .wrap > *{
    flex:0 0 auto !important;
    min-width:0;
  }
  footer.site .wrap > *:first-child{ max-width:520px; }
}


/* ============ HEADER OVERFLOW FIX — inner pages (v5.3) ============
   Product/inner pages carry a longer menu (adds Yamaha/Mercury/Suzuki/Honda/Tohatsu).
   With the search bar it overflowed the viewport, forcing the whole page wider and
   crushing the footer. Shrink progressively, then drop the search, then wrap. */

html, body{ overflow-x:hidden; max-width:100%; }

@media (min-width:961px){
  nav.main{
    flex-wrap:nowrap;
    max-width:100%;
    box-sizing:border-box;
  }
  nav.main .menu, nav.main ul{ min-width:0; }
}

/* long inner-page menu needs more room — shrink type and gaps first */
@media (min-width:961px) and (max-width:1500px){
  nav.main a{ font-size:14px; }
  nav.main .menu li, nav.main ul li{ margin-left:10px; margin-right:10px; }
  .oase-search-input{ width:130px; }
}
@media (min-width:961px) and (max-width:1340px){
  nav.main a{ font-size:13px; }
  nav.main .menu li, nav.main ul li{ margin-left:7px; margin-right:7px; }
  .oase-search-input{ width:100px; }
  .browsecat-link .bc-full{ display:none; }
  .browsecat-link .bc-short{ display:inline; }
}
/* below this the search must go, or the menu cannot fit */
@media (min-width:961px) and (max-width:1220px){
  .oase-search{ display:none !important; }
}
@media (min-width:961px) and (max-width:1080px){
  nav.main a{ font-size:12.5px; }
  nav.main .menu li, nav.main ul li{ margin-left:5px; margin-right:5px; }
  .logo-img{ max-width:150px; }
}


/* ============ HEADER FIT — all desktop widths (v5.4) ============
   Inner pages carry 13 menu items. Even at 1904px the nav overhung and clipped
   the cart. Tighten spacing so it fits properly, not just hidden by overflow. */
@media (min-width:961px){
  nav.main a{ font-size:14.5px; }
  nav.main .menu li, nav.main ul li{ margin-left:8px !important; margin-right:8px !important; }
  .oase-search-input{ width:165px; }
  .logo-img{ max-width:185px; height:auto; }
  .browsecat-link{ padding-left:14px; padding-right:14px; }
  .header-icons{ margin-left:12px; }
}


/* ============ NAV FIT — collapse duplicate brand links (v5.5) ============
   Inner pages list Yamaha/Mercury/Suzuki/Honda/Tohatsu in the nav AND in
   Browse Categories. On narrower screens drop the duplicates so the menu fits
   and the cart is never clipped. Brands stay reachable via Browse Categories. */
@media (min-width:961px) and (max-width:1600px){
  nav.main > a:nth-of-type(3),
  nav.main > a:nth-of-type(4),
  nav.main > a:nth-of-type(5),
  nav.main > a:nth-of-type(6),
  nav.main > a:nth-of-type(7){ display:none !important; }
}
/* remove the blunt overflow mask now the layout genuinely fits */
html, body{ overflow-x:clip; }


/* ============ PRODUCT LAYOUT FIX (v5.6) ============
   Product wrapper is a 2-col grid, but WooCommerce legacy .summary{float:right;width:48%}
   still applied INSIDE the grid cell — summary used only 48% of its column,
   leaving a huge empty gap. Related products was trapped in one column too. */
.woocommerce div.product div.summary,
div.product .summary.entry-summary{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
}
.woocommerce div.product div.woocommerce-product-gallery,
div.product .woocommerce-product-gallery{
  float:none !important;
  width:100% !important;
}
div.product .related.products,
div.product .upsells.products,
div.product .woocommerce-tabs{
  grid-column:1 / -1 !important;
  width:100% !important;
  float:none !important;
}
@media (max-width:960px){
  div.product{ display:block !important; }
  .woocommerce div.product div.summary{ margin-top:22px !important; }
}


/* ============ PRODUCT: kill the dead space (v5.7) ============
   The summary column runs ~1450px tall while the image column is only ~500px,
   leaving ~950px of empty white below the photo. Make the gallery sticky so the
   photo follows the reader, and widen the container to use the screen. */
@media (min-width:961px){
  div.product{
    grid-template-columns:1fr 1fr !important;
    align-items:start !important;
    gap:56px !important;
    max-width:1480px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  div.product .woocommerce-product-gallery{
    position:sticky !important;
    top:24px;
    align-self:start !important;
  }
}


/* ============ PRODUCT PAGE WIDTH (v5.8) ============
   .wrap was capped at 1200px and main at 1400px, squeezing the product into
   1152px on a 1900px screen. Widen on product pages only. */
@media (min-width:1400px){
  body.single-product main.oase-main{ max-width:1760px !important; }
  body.single-product .shop-shell{ max-width:100% !important; }
  body.single-product .shop-shell > .wrap,
  body.single-product main.oase-main > .wrap{ max-width:1700px !important; }
  body.single-product div.product{ max-width:100% !important; }
}


/* ============ PRODUCT IMAGE FILLS ITS COLUMN (v5.9) ============
   The photo was rendering at its natural 600px inside a 798px column,
   leaving whitespace. Let it scale to the frame (sources are 860px+). */
@media (min-width:961px){
  .single-product div.product .woocommerce-product-gallery__image img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
  .single-product div.product .woocommerce-product-gallery__image{
    aspect-ratio:4 / 3;
    width:100%;
  }
}


/* ============ SITE-WIDE LAYOUT FIX (v6.1) ============
   1) Header still overhung by ~21px on every inner page — clipping the cart.
   2) Shop / category / cart squeezed into 1200px on a 1900px screen,
      wasting ~700px and leaving 270px product tiles. */

/* --- 1. make the header actually fit --- */
@media (min-width:961px){
  .oase-search-input{ width:135px !important; }
  nav.main{ padding-right:0 !important; }
  .header-icons{ margin-left:8px !important; }
}

/* --- 2. let shop, categories, cart and archives use the screen --- */
@media (min-width:1400px){
  body.woocommerce main.oase-main,
  body.archive main.oase-main,
  body.post-type-archive main.oase-main,
  body.tax-product_cat main.oase-main,
  body.woocommerce-cart main.oase-main,
  body.woocommerce-checkout main.oase-main{ max-width:1760px !important; }

  body.woocommerce main.oase-main > .wrap,
  body.archive main.oase-main > .wrap,
  body.post-type-archive main.oase-main > .wrap,
  body.tax-product_cat main.oase-main > .wrap,
  body.woocommerce-cart main.oase-main > .wrap,
  body.woocommerce-checkout main.oase-main > .wrap{ max-width:1700px !important; }
}

/* --- 3. bigger product tiles now there is room --- */
@media (min-width:1400px){
  ul.products{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:28px !important;
  }
}
@media (min-width:1700px){
  ul.products{ grid-template-columns:repeat(5, 1fr) !important; }
}


/* ============ SHOP / CATEGORY WIDTH — correct selector (v6.2) ============
   The cap is on .shop-shell > .wrap (1200px), not main > .wrap.
   Widen it so shop, categories, cart and checkout use the screen. */
@media (min-width:1400px){
  .shop-shell > .wrap{ max-width:1700px !important; }
  section.page-hero > .wrap{ max-width:1700px !important; }
}


/* ============ PRODUCT TOP — sticky image, bounded (v6.3) ============
   Sticky is constrained by its PARENT. Previously the parent was the whole
   product container (incl. the description tabs), so the image slid down and
   covered the description. Now gallery + summary live in .oase-top, so the
   image can only travel inside that box and can never reach the description. */
@media (min-width:961px){
  div.product{ display:block !important; }

  div.product .oase-top{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:56px !important;
    align-items:start !important;
    max-width:1480px;
    margin:0 auto 40px;
  }
  div.product .oase-top .woocommerce-product-gallery{
    position:sticky !important;
    top:24px;
    align-self:start !important;
    width:100% !important;
    float:none !important;
  }
  div.product .oase-top .summary{
    width:100% !important;
    float:none !important;
    margin:0 !important;
  }

  /* tabs + related now flow full width beneath, never overlapped */
  div.product .woocommerce-tabs,
  div.product .related.products,
  div.product .upsells.products{
    width:100% !important;
    float:none !important;
    clear:both !important;
    position:relative;
    z-index:2;
    background:#fff;
  }
}
@media (max-width:960px){
  div.product .oase-top{ display:block !important; }
  div.product .oase-top .woocommerce-product-gallery{ position:static !important; }
  div.product .oase-top .summary{ margin-top:22px !important; }
}


/* ============ DESCRIPTION BLOCK ALIGNMENT (v6.4) ============
   Paragraphs were capped at 760px while headings and the spec table ran the full
   1652px — so the text hugged the left with ~890px of void beside it.
   Give the whole block one consistent width so everything lines up. */
@media (min-width:961px){
  .woocommerce-Tabs-panel--description,
  .woocommerce-Tabs-panel{
    max-width:1100px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .woocommerce-Tabs-panel--description p,
  .woocommerce-Tabs-panel p{
    max-width:100% !important;
  }
  .woocommerce-Tabs-panel--description h1,
  .woocommerce-Tabs-panel--description h2,
  .woocommerce-Tabs-panel--description h3,
  .woocommerce-Tabs-panel--description ul,
  .woocommerce-Tabs-panel--description ol,
  .woocommerce-Tabs-panel--description table{
    max-width:100% !important;
    width:100% !important;
  }
  /* keep the tab buttons aligned with the content */
  .woocommerce-tabs ul.tabs{
    max-width:1100px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* ============ BLOG CARDS (v6.5) ============
   Posts now show their featured image on the listing, in a proper clickable card. */
.oase-bthumb-link{
  display:block;
  overflow:hidden;
  border-radius:12px;
  margin:0 0 16px;
  background:#f2f5f8;
  aspect-ratio:16 / 9;
}
.oase-bthumb{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  display:block;
  transition:transform .35s ease;
}
.oase-bthumb-link:hover .oase-bthumb{ transform:scale(1.04); }

body.blog article, body.archive article, body.home article{
  background:#fff;
  border:1px solid #e4e9ef;
  border-radius:14px;
  padding:18px;
  transition:box-shadow .25s ease, transform .25s ease;
}
body.blog article:hover, body.archive article:hover{
  box-shadow:0 10px 28px rgba(11,45,80,.10);
  transform:translateY(-3px);
}
body.blog article h2 a, body.archive article h2 a{ text-decoration:none; }


/* ============ HEADER ICONS CLIPPING FIX (v6.7) ============
   The wishlist/cart icons sat outside the header .wrap, only 13px from the
   screen edge, so they were clipped on narrower screens. Keep them inside the
   viewport with proper right-hand breathing room. */
.header-icons{
  margin-right:24px !important;
  padding-right:0 !important;
  flex-shrink:0 !important;
}
@media (min-width:961px){
  header .wrap,
  header > .wrap{
    max-width:1820px !important;
    padding-right:32px !important;
    box-sizing:border-box !important;
  }
  .header-icons{
    margin-right:16px !important;
  }
}
/* never let any header element spill past the screen */
header, header .wrap{ overflow:visible; }
html, body{ overflow-x:clip; }
.header-icons .count, .header-icons [class*=count]{
  right:auto !important;
}


/* ============ NAV FITS ON NARROWER SCREENS (v6.8) ============
   13 menu items + search + icons overflow below ~1600px, clipping the cart/wishlist.
   The 5 brand links (Yamaha/Mercury/Suzuki/Honda/Tohatsu) duplicate Browse Categories,
   so collapse them progressively so the icons always fit. */
@media (max-width:1600px){
  nav.main{ gap:14px !important; }
  nav.main > a{ font-size:14px !important; }
  .oase-search-input{ width:120px !important; }
}
@media (max-width:1500px){
  /* hide the 5 duplicate brand links — still reachable via Browse Categories */
  nav.main > a:nth-of-type(3),
  nav.main > a:nth-of-type(4),
  nav.main > a:nth-of-type(5),
  nav.main > a:nth-of-type(6),
  nav.main > a:nth-of-type(7){ display:none !important; }
}
@media (max-width:1200px){
  nav.main > a{ font-size:13px !important; }
  .oase-search-input{ width:100px !important; }
}


/* ============ NAV FITS — tighter below 1280px (v6.9) ============ */
@media (max-width:1300px){
  nav.main{ gap:10px !important; }
  nav.main > a{ font-size:12.5px !important; }
  .oase-search-input{ width:78px !important; }
  .header-icons{ margin-right:10px !important; gap:8px !important; }
  header .wrap, header > .wrap{ padding-right:20px !important; }
}
@media (max-width:1120px){
  /* also fold the search box into just the magnifier button */
  .oase-search-input{ width:0 !important; padding-left:0 !important; padding-right:0 !important; border:none !important; }
}