/* ============================================================
   PIONEER — HOME v5
   Fixes: burgundy quick-actions, carousel products+news,
   awards responsive, remove calculator, mobile padding
   ============================================================ */

/* ── HERO SLIDER ── */
.hero-slider{position:relative;width:100%;overflow:hidden;background:#111;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.hero-slide.active{opacity:1;z-index:1;position:relative;min-height:580px;}
.slide-bg{position:absolute;inset:0;}
.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.82) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.3) 58%,transparent 78%);
}
/* FIX #11: slide-content uses wrap for padding — guaranteed side padding on mobile */
.slide-content{position:relative;z-index:2;color:var(--white);width:100%;padding:100px 24px 80px;}
.slide-inner{max-width:540px;}
.slide-badge{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:var(--white);font-size:12px;font-weight:var(--w-bold);padding:5px 14px;border-radius:999px;margin-bottom:20px;}
.hero-slide h1{font-size:clamp(28px,5vw,54px);font-weight:var(--w-black);line-height:1.08;margin-bottom:18px;text-shadow:0 2px 8px rgba(0,0,0,.25);}
.hero-slide p{font-size:clamp(14px,1.6vw,16px);color:rgba(255,255,255,.88);line-height:1.7;margin-bottom:32px;max-width:460px;}
.slide-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.slide-ctas a{border-radius:999px;}
/* Arrows: hover only */
/* FIX (v14 #1): arrows used to be hidden until :hover (desktop) or a
   temporary JS-driven reveal on touchstart (mobile) — both were fragile:
   a direct tap right on an arrow's position, before anything had
   revealed it, landed on a `pointer-events:none` element and did
   nothing, which looked like "the arrow isn't there". Arrows are simply
   always visible and clickable now, on every device. */
/* FIX (v15 #1): back to hover-reveal on desktop (cleaner look, arrows
   only appear when you mouse over the slider) — but always visible on
   touch devices, since there's no hover there and the actual mobile bug
   was a separate stray `display:none` rule, not this hover logic itself. */
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;border:1.5px solid rgba(255,255,255,.35);transition:background var(--ease),opacity var(--ease);}
.slider-arrow:hover{background:rgba(255,255,255,.32);}
@media(hover:hover){
  .slider-arrow{opacity:0;pointer-events:none;}
  .hero-slider:hover .slider-arrow,.hero-slider:focus-within .slider-arrow{opacity:1;pointer-events:auto;}
}
@media(hover:none){
  .slider-arrow{background:rgba(0,0,0,.32);}
}
@media(hover:none){
  .slider-arrow{background:rgba(0,0,0,.32);}
}
.slider-arrow.prev{left:20px;}
.slider-arrow.next{right:20px;}
.slider-arrow svg{width:20px;height:20px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;}
.slider-controls{position:absolute;bottom:24px;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:8px;}
.slider-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.4);border:2px solid rgba(255,255,255,.6);cursor:pointer;transition:background .3s,width .3s;padding:0;}
.slider-dot.active{background:var(--red);border-color:var(--red);width:28px;}

/* ── QUICK ACTIONS — FIX #4: burgundy background ── */
.quick-actions{background:var(--burgundy);}
.quick-actions .wrap{display:grid;grid-template-columns:repeat(5,1fr);}
.qa-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 10px;color:var(--white);font-size:var(--text-sm);font-weight:var(--w-semi);text-align:center;border-right:1px solid rgba(255,255,255,.15);transition:background var(--ease);position:relative;text-decoration:none;}
.qa-item:last-child{border-right:none;}
.qa-item:hover{background:rgba(0,0,0,.12);}
.qa-icon{width:28px;height:28px;fill:none;stroke:var(--white);stroke-width:1.8;flex-shrink:0;}
.qa-arrow{width:12px;height:12px;position:absolute;top:10px;right:10px;opacity:.5;fill:none;stroke:var(--white);stroke-width:2;}

/* ── TRUST ── */
.trust-section{padding:var(--sp-16) 0;background:var(--white);}
.trust-inner{text-align:center;max-width:720px;margin:0 auto;}
.trust-heading{font-size:clamp(18px,2.5vw,26px);font-weight:var(--w-bold);color:var(--burgundy);line-height:1.3;margin-bottom:var(--sp-4);}
.trust-body{font-size:var(--text-base);color:var(--grey-600);line-height:1.8;}

/* ── PRODUCT TABS ── */
.products-section{padding:0 0 var(--sp-16);background:var(--offwhite);}
.products-section .wrap{padding-top:var(--sp-12);}
/* FIX (v13 #1): justify-content:center + overflow-x:auto means the browser
   centers the overflow by default — when the 5 pills are wider than a
   mobile screen, that hides the START of "Personal" off-screen to the
   left, which is what looked like it had "disappeared". Left-align by
   default (so it always starts fully visible and scrolls normally), and
   only center once the screen is wide enough that nothing overflows. */
.tab-row-wrap{display:flex;justify-content:flex-start;margin-bottom:var(--sp-8);overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media(min-width:700px){
  .tab-row-wrap{justify-content:center;}
}
/* Scrollable tab row — no border, just pill style */
.tab-row{display:flex;align-items:center;gap:4px;background:#e8e8e8;border-radius:999px;padding:4px;width:fit-content;min-width:max-content;}
.tab-btn{padding:8px 18px;border-radius:999px;font-size:var(--text-sm);font-weight:var(--w-semi);color:var(--grey-600);white-space:nowrap;transition:background var(--ease),color var(--ease);border:none;background:none;cursor:pointer;font-family:var(--font);}
.tab-btn.active{background:var(--burgundy);color:var(--white);}
.tab-btn:hover:not(.active){color:var(--red);}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.products-tab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6);flex-wrap:wrap;gap:var(--sp-3);}
.products-tab-header h2{font-size:clamp(18px,2vw,22px);font-weight:var(--w-bold);color:var(--burgundy);}

/* ── CAROUSEL WRAPPER — FIX #7,8: carousel scroll both directions ── */
.carousel-wrap{position:relative;}
.carousel-arrows{display:flex;gap:var(--sp-2);align-items:center;}
.carousel-btn{width:36px;height:36px;border-radius:50%;background:var(--white);border:1.5px solid var(--grey-200);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--ease),border-color var(--ease);flex-shrink:0;}
.carousel-btn:hover{background:var(--burgundy);border-color:var(--burgundy);}
.carousel-btn:hover svg{stroke:var(--white);}
.carousel-btn svg{width:14px;height:14px;fill:none;stroke:var(--black);stroke-width:2.5;stroke-linecap:round;}
/* Scrollable track */
.carousel-track{
  display:flex;gap:var(--sp-5);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track .img-card{
  flex:0 0 calc((100% - 2 * var(--sp-5)) / 3);
  min-width:260px;
  scroll-snap-align:start;
}
/* Narrower screens: 2 cards visible */
@media(max-width:900px){
  .carousel-track .img-card{flex:0 0 calc((100% - var(--sp-5)) / 2);}
}
@media(max-width:560px){
  .carousel-track .img-card{flex:0 0 calc(100% - 40px);}
}
/* News carousel */
.news-carousel-track{
  display:flex;gap:var(--sp-5);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding-bottom:4px;
}
.news-carousel-track::-webkit-scrollbar{display:none;}
.news-carousel-track .news-card{
  flex:0 0 calc((100% - 2 * var(--sp-5)) / 3);
  min-width:260px;scroll-snap-align:start;
}
@media(max-width:900px){
  .news-carousel-track .news-card{flex:0 0 calc((100% - var(--sp-5)) / 2);}
}
@media(max-width:560px){
  .news-carousel-track .news-card{flex:0 0 calc(100% - 40px);}
}

/* ── IMG CARD ── */
.img-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--ease),transform var(--ease);}
.img-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.img-card .card-img{height:200px;overflow:hidden;flex-shrink:0;}
.img-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.img-card:hover .card-img img{transform:scale(1.04);}
.img-card .card-body{padding:var(--sp-5);flex:1;display:flex;flex-direction:column;}
.img-card .card-tag{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--red);margin-bottom:6px;}
.img-card h4{font-size:17px;font-weight:var(--w-bold);color:var(--black);margin-bottom:8px;}
.img-card p{font-size:var(--text-sm);color:var(--grey-600);flex:1;margin-bottom:var(--sp-4);line-height:1.6;}
.img-card .btn{width:100%;justify-content:center;border-radius:var(--radius-sm);}

/* ── GLANCE — icons red, values burgundy ── */
.glance-section{background:var(--grey-100);padding:var(--sp-16) 0;}
.glance-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
.glance-card{background:var(--white);border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-5);text-align:center;box-shadow:var(--shadow-xs);}
.glance-icon{width:52px;height:52px;margin:0 auto var(--sp-4);}
.glance-icon svg{width:100%;height:100%;}
.glance-value{font-size:clamp(20px,2.5vw,26px);font-weight:var(--w-black);color:var(--burgundy);margin-bottom:4px;}
.glance-label{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--black);}

/* ── POPULAR PRODUCTS ── */
.popular-section{padding:var(--sp-16) 0;background:var(--white);}
.popular-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
.icon-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:24px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);transition:box-shadow var(--ease),border-color var(--ease);cursor:pointer;position:relative;text-decoration:none;}
.icon-card:hover{box-shadow:var(--shadow);border-color:var(--burgundy);}
.icon-card .arrow-link{position:absolute;top:10px;right:10px;width:14px;height:14px;fill:none;stroke:var(--grey-400);stroke-width:2;}
.icon-card .card-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;}
.icon-card .card-icon svg{width:100%;height:100%;}
.icon-card h5{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--black);}

/* ── NEWS ── */
.news-section{padding:var(--sp-16) 0;background:var(--offwhite);}
.news-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--ease),transform var(--ease);}
.news-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.news-card .card-img{height:220px;overflow:hidden;}
.news-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.news-card:hover .card-img img{transform:scale(1.04);}
.news-card .card-body{padding:var(--sp-5);flex:1;display:flex;flex-direction:column;}
.news-card h4{font-size:17px;font-weight:var(--w-bold);color:var(--red);margin-bottom:var(--sp-2);}
.news-card .excerpt{font-size:var(--text-sm);color:var(--grey-600);flex:1;margin-bottom:var(--sp-3);line-height:1.6;}
.news-card .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--grey-400);margin-bottom:var(--sp-4);}
.news-card .btn{width:100%;justify-content:center;border-radius:var(--radius-sm);}

/* Section heads */
.section-head-split{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-6);flex-wrap:wrap;gap:var(--sp-4);}
.section-head-split h2{font-size:clamp(20px,2.5vw,28px);font-weight:var(--w-bold);color:var(--burgundy);}
.section-head-center{text-align:center;margin-bottom:var(--sp-8);}
.section-head-center h2{font-size:clamp(20px,2.5vw,28px);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:var(--sp-2);}
.section-head-center p{font-size:var(--text-base);color:var(--grey-600);max-width:620px;margin:0 auto;}

/* ── PAGINATION / LOAD MORE ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-10);}
.page-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:var(--w-semi);border:1px solid var(--grey-200);background:var(--white);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease);}
.page-btn:hover{border-color:var(--burgundy);color:var(--burgundy);}
.page-btn.active{background:var(--burgundy);color:var(--white);border-color:var(--burgundy);}
.load-more-wrap{text-align:center;margin-top:var(--sp-10);}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .popular-grid{grid-template-columns:repeat(3,1fr);}
  .glance-grid{grid-template-columns:repeat(3,1fr);}
  .quick-actions .wrap{grid-template-columns:repeat(3,1fr);}
  .qa-item:nth-child(3){border-right:none;}
}
@media(max-width:640px){
  .hero-slide.active{min-height:480px;}
  .slide-content{padding:48px 16px 56px;}
  .hero-slide h1{font-size:clamp(26px,7vw,34px);}
  .popular-grid{grid-template-columns:repeat(2,1fr);}
  .glance-grid{grid-template-columns:repeat(2,1fr);}
  /* FIX (v17 #2): 5 cards in a 2-column grid leaves 1 orphaned card on
     the last row, sitting flush left instead of centered. */
  /* 5th/odd centered item: spans full width but left/right padding
     creates the visual appearance of a normal card rather than a
     stretched one — more reliable than max-width on narrow phones
     where any pixel cap still looked squeezed. */
  .popular-grid>:last-child,.glance-grid>:last-child{grid-column:1/-1;padding-left:15%;padding-right:15%;box-sizing:border-box;}
  .quick-actions .wrap{grid-template-columns:repeat(2,1fr);}
  .qa-item:nth-child(2){border-right:none;}
  .award-medal{width:72px;height:72px;}
  .award-winner-text{font-size:14px;}
  .laurel{width:30px;}
}