/* ===================================================================
   MrScreenOn — components.css
   Every reusable block from the design board, in the order it appears.
   =================================================================== */

/* ===================================================================
   1. Buttons
   =================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;
  border-radius:var(--r-pill);
  font-family:var(--f-display);
  font-size:.92rem;font-weight:600;
  white-space:nowrap;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
}
.btn:active{transform:translateY(1px)}

.btn-brand{background:var(--brand-grad);color:#fff;box-shadow:var(--sh-brand)}
.btn-brand:hover{box-shadow:0 14px 32px rgba(99,102,241,.42);transform:translateY(-2px)}

.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--sh-xs)}
.btn-line:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}

.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2);transform:translateY(-2px)}

.btn-ghost{background:transparent;color:var(--brand);padding-inline:14px}
.btn-ghost:hover{background:var(--brand-soft)}

.btn-lg{padding:15px 34px;font-size:1rem}
.btn-sm{padding:8px 18px;font-size:.85rem}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* Small circular icon button */
.icon-btn{
  position:relative;
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  color:var(--ink);
  transition:var(--t);
}
.icon-btn:hover{background:var(--tint);color:var(--brand)}
.icon-btn .count{
  position:absolute;top:-1px;right:-1px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;
  border-radius:var(--r-pill);
  font-size:.66rem;font-weight:700;
  border:2px solid #fff;
}

/* ===================================================================
   2. Badges, pills, ratings
   =================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:600;font-family:var(--f-display);
}
.badge-brand{background:var(--brand-soft);color:var(--brand-dark)}
.badge-blue{background:var(--blue-soft);color:var(--blue)}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-red{background:var(--red-soft);color:var(--red)}
.badge-amber{background:var(--amber-soft);color:#B26A00}
.badge-solid{background:var(--brand);color:#fff}

.stars{color:#F59E0B;letter-spacing:1px;font-size:.85rem}
.rating-row{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted)}
.stock-in{color:var(--green);font-weight:600;font-size:.82rem}

/* Icon tile — the small rounded square used all over the board */
.tile{
  display:grid;place-items:center;flex-shrink:0;
  width:44px;height:44px;border-radius:14px;
  background:var(--brand-soft);color:var(--brand);
}
.tile-blue{background:var(--blue-soft);color:var(--blue)}
.tile-green{background:var(--green-soft);color:var(--green)}
.tile-amber{background:var(--amber-soft);color:#B26A00}
.tile-lg{width:56px;height:56px;border-radius:18px}

/* ===================================================================
   3. Header
   =================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;gap:26px;height:76px}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{
  display:grid;place-items:center;
  width:42px;height:42px;
  border-radius:13px;
  background:var(--navy-grad);
  border:2px solid var(--brand);
  color:#fff;
  flex-shrink:0;
}
.logo-name{
  font-family:var(--f-display);font-weight:700;font-size:1.22rem;
  letter-spacing:-.02em;color:var(--ink);line-height:1.1;
}
.logo-name span{color:var(--brand)}
.logo-tag{display:block;font-size:.66rem;color:var(--muted);letter-spacing:.06em;font-weight:500}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  padding:9px 14px;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:500;color:var(--body);
  transition:var(--t);
}
.nav a:hover{color:var(--brand);background:var(--brand-soft)}
.nav a.is-active{color:var(--brand);font-weight:600}

.header-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.burger{display:none}

@media (max-width:1080px){
  .nav{
    position:fixed;inset:76px 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:12px var(--gut) 20px;
    box-shadow:var(--sh-lg);
    transform:translateY(-130%);
    transition:transform var(--t-slow);
    margin-left:0;
  }
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:13px 12px;border-radius:var(--r-sm)}
  .header-actions{margin-left:auto}
  .burger{display:grid}
}
@media (max-width:520px){
  .logo-name{font-size:1.05rem}
  .logo-tag{display:none}
  .header-in{height:66px;gap:10px}

  /* The header ran 9px past the viewport on a 390px screen, which let the
     whole page scroll sideways and cut the copy off at the left edge.
     The logo is allowed to shrink, and the sign-in button becomes an icon,
     because the burger and the cart are the two things a phone needs. */
  .logo{min-width:0;flex:1 1 auto;overflow:hidden}
  .logo-img{max-width:118px}

  .header-actions{gap:2px;flex:0 0 auto}
  .header-actions .btn{
    padding:0;width:38px;height:38px;
    display:grid;place-items:center;font-size:0;
  }
  .header-actions .btn::before{
    content:"";width:17px;height:17px;
    background:currentColor;
    -webkit-mask:var(--i-user) center/contain no-repeat;
            mask:var(--i-user) center/contain no-repeat;
  }
}

/* An inline person outline, so the sign-in button keeps its meaning once the
   word is gone. Kept as a data URI to avoid a request for 17 pixels. */
:root{
  --i-user: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* ===================================================================
   4. Panels — the white cards the whole board is built from
   =================================================================== */
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--sh-sm);
}
.panel-flat{box-shadow:none}
.panel-pad-lg{padding:32px}
@media (max-width:600px){.panel{padding:18px;border-radius:var(--r-md)}}

.card-lift{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card-lift:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#CBD5E1}

/* ===================================================================
   5. Forms
   =================================================================== */
.field{margin-bottom:18px}
.label{
  display:block;margin-bottom:7px;
  font-family:var(--f-display);font-size:.84rem;font-weight:600;color:var(--ink);
}
.label .req{color:var(--red)}

.input,.select,.textarea{
  width:100%;
  padding:13px 16px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.94rem;
  color:var(--ink);
  transition:var(--t);
}
.input::placeholder,.textarea::placeholder{color:#AEB6C4}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3.5px rgba(99,102,241,.13);
}
.input:disabled{background:var(--tint);color:var(--muted)}
.textarea{resize:vertical;min-height:110px}
.select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
}

.input-group{position:relative}
.input-group .ico{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;font-size:.9rem;
}
.input-group .input{padding-left:44px}
.input-group .trail{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);cursor:pointer;
}

.help{font-size:.8rem;color:var(--muted);margin-top:6px}
.err{font-size:.8rem;color:var(--red);margin-top:6px;font-weight:500}
.has-error .input,.has-error .select,.has-error .textarea{border-color:var(--red)}

.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:.88rem;line-height:1.5}
.check input{width:17px;height:17px;margin-top:2px;accent-color:var(--brand);flex-shrink:0}

/* ===================================================================
   6. Alerts
   =================================================================== */
.alert{
  display:flex;gap:12px;
  padding:14px 18px;
  border-radius:var(--r-sm);
  font-size:.9rem;
  border-left:4px solid;
  margin-bottom:16px;
}
.alert strong{display:block;margin-bottom:2px}
.alert-success{background:var(--green-soft);border-color:var(--green);color:#0B6B41}
.alert-danger{background:var(--red-soft);border-color:var(--red);color:#A32126}
.alert-info{background:var(--blue-soft);border-color:var(--blue);color:#173FA8}
.alert-warn{background:var(--amber-soft);border-color:var(--amber);color:#8A5200}

/* ===================================================================
   7. Four-step booking stepper
   =================================================================== */
.stepper{display:flex;align-items:flex-start;gap:0;margin:0 auto 26px;max-width:560px}
.step{flex:1;position:relative;text-align:center}
.step::before{
  content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;
  background:var(--line);z-index:0;
}
.step:first-child::before{display:none}
.step.is-done::before,.step.is-active::before{background:var(--brand)}
.step-dot{
  position:relative;z-index:1;
  width:34px;height:34px;margin:0 auto 8px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;border:2px solid var(--line);
  font-family:var(--f-display);font-size:.85rem;font-weight:700;color:var(--muted);
  transition:var(--t);
}
.step.is-active .step-dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--brand-soft)}
.step.is-done .step-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.step-label{font-size:.8rem;font-weight:500;color:var(--muted)}
.step.is-active .step-label,.step.is-done .step-label{color:var(--ink);font-weight:600}

/* ===================================================================
   8. Picker blocks — Select Brand / Model / Problem
   =================================================================== */
.pick{margin-bottom:18px}
.pick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pick-head h4{margin:0;font-size:.95rem}
.pick-body{
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px;
}
.pick-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.pick-scroll::-webkit-scrollbar{height:5px}
.pick-scroll::-webkit-scrollbar-thumb{background:#D5DCE7;border-radius:9px}

/* Brand tile — logo/word mark in a white box */
.brand-tile{
  flex:0 0 auto;min-width:92px;height:52px;
  display:grid;place-items:center;
  padding:8px 14px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--f-display);font-weight:600;font-size:.86rem;color:var(--ink);
  cursor:pointer;transition:var(--t);
}
.brand-tile:hover{border-color:var(--brand);transform:translateY(-2px)}
.brand-tile.is-active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.brand-tile img{max-height:26px;object-fit:contain}

/* Model tile — device image over a name */
.model-tile{
  flex:0 0 auto;width:104px;
  padding:10px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  text-align:center;cursor:pointer;transition:var(--t);
}
.model-tile:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.model-tile.is-active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.model-tile img{width:100%;height:62px;max-height:62px;object-fit:contain;margin-bottom:7px}
.model-tile b{display:block;font-size:.76rem;font-weight:600;color:var(--ink);line-height:1.3}

/* Problem tile — icon over a label, orange when picked */
.prob-tile{
  flex:0 0 auto;width:88px;
  padding:12px 8px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  text-align:center;cursor:pointer;transition:var(--t);
}
.prob-tile:hover{border-color:var(--brand);transform:translateY(-3px)}
.prob-tile svg{margin:0 auto 7px;color:var(--navy)}
.prob-tile span{display:block;font-size:.72rem;font-weight:600;color:var(--body);line-height:1.3}
.prob-tile.is-active{background:var(--brand-grad);border-color:var(--brand);box-shadow:var(--sh-brand)}
.prob-tile.is-active svg,.prob-tile.is-active span{color:#fff}

/* Estimate footer bar */
.estimate-bar{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 18px;margin-top:18px;
}
.estimate-bar .cell{flex:1;min-width:120px}
.estimate-bar .cell small{display:block;color:var(--muted);font-size:.78rem;margin-bottom:1px}
.estimate-bar .cell b{font-family:var(--f-display);font-size:1.15rem;color:var(--ink)}
.estimate-bar .cell.cost b{color:var(--brand)}

/* ===================================================================
   9. Content tiles — services, categories, products
   =================================================================== */
/* Service / category tile: image plate + two-line caption */
.tile-card{
  display:block;padding:14px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.tile-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#CBD5E1}
.tile-plate{
  display:grid;place-items:center;
  aspect-ratio:1;min-height:112px;max-height:190px;margin-bottom:11px;
  background:var(--tint);border-radius:var(--r-sm);
  overflow:hidden;
}
.tile-plate img{width:72%;max-height:76%;object-fit:contain;transition:transform var(--t-slow)}
.tile-card:hover .tile-plate img{transform:scale(1.07)}
.tile-card b{display:block;font-family:var(--f-display);font-size:.84rem;font-weight:600;color:var(--ink);line-height:1.35}
.tile-card small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.tile-card .from{color:var(--brand);font-weight:600}

/* Product card */
.p-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#CBD5E1}
.p-media{position:relative;display:grid;place-items:center;aspect-ratio:1;
  min-height:180px;max-height:260px;background:var(--tint);overflow:hidden}
.p-media img{width:70%;max-height:70%;object-fit:contain;transition:transform var(--t-slow)}
.p-card:hover .p-media img{transform:scale(1.07)}
.p-tag{position:absolute;top:10px;left:10px}
.p-body{padding:14px}
.p-name{
  display:block;font-family:var(--f-display);font-size:.86rem;font-weight:600;
  color:var(--ink);line-height:1.4;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-name:hover{color:var(--brand)}
.p-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.p-now{font-family:var(--f-display);font-size:1.02rem;font-weight:700;color:var(--ink)}
.p-was{font-size:.8rem;color:var(--muted);text-decoration:line-through}
.p-off{font-size:.75rem;font-weight:600;color:var(--green)}

/* Circular "why choose us" item */
.why-item{text-align:center}
.why-ring{
  width:62px;height:62px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);
  border:1.5px solid rgba(99,102,241,.2);
}
.why-item b{display:block;font-family:var(--f-display);font-size:.83rem;font-weight:600;color:var(--ink);line-height:1.35}

/* ===================================================================
   10. Promo bands
   =================================================================== */
.band{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:26px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.band-brand{background:var(--brand-grad);color:#fff}
.band-navy{background:var(--navy-grad);color:#fff}
.band h3,.band h2{color:#fff;margin-bottom:6px}
.band p{color:rgba(255,255,255,.86);margin:0}
.band-art{width:150px;flex-shrink:0;opacity:.95}
.band::after{
  content:"";position:absolute;right:-60px;top:-70px;
  width:230px;height:230px;border-radius:50%;
  background:rgba(255,255,255,.10);
}
@media (max-width:600px){.band{padding:20px;text-align:center;justify-content:center}.band-art{display:none}}

/* ===================================================================
   11. Product detail page
   =================================================================== */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:900px){.pdp{grid-template-columns:1fr;gap:24px}}

.pdp-media{display:grid;grid-template-columns:74px 1fr;gap:14px}
@media (max-width:520px){.pdp-media{grid-template-columns:1fr}}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px}
@media (max-width:520px){.pdp-thumbs{flex-direction:row;order:2}}
.pdp-thumb{
  aspect-ratio:1;height:74px;padding:8px;background:var(--tint);
  border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:var(--t);
}
.pdp-thumb.is-active{border-color:var(--brand)}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-main{
  position:relative;aspect-ratio:1;min-height:300px;max-height:460px;
  background:var(--tint);border:1px solid var(--line);border-radius:var(--r-md);
  display:grid;place-items:center;overflow:hidden;
}
.pdp-main img{width:74%;max-height:74%;object-fit:contain}
.pdp-main .p-tag{z-index:2}

.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.price-now{font-family:var(--f-display);font-size:2rem;font-weight:700;color:var(--ink)}

.swatches{display:flex;gap:10px}
.swatch{
  width:30px;height:30px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);
  cursor:pointer;transition:var(--t);
}
.swatch.is-active{box-shadow:0 0 0 2px var(--brand)}

.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:36px;height:38px;display:grid;place-items:center;color:var(--body);transition:var(--t)}
.qty button:hover{background:var(--tint);color:var(--brand)}
.qty span{min-width:40px;text-align:center;font-weight:600;color:var(--ink)}

.pdp-trust{display:flex;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line);margin-top:18px}
.pdp-trust span{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{
  padding:11px 18px;font-size:.9rem;font-weight:600;color:var(--muted);
  border-bottom:2.5px solid transparent;white-space:nowrap;transition:var(--t);
}
.tabs button:hover{color:var(--ink)}
.tabs button.is-active{color:var(--brand);border-color:var(--brand)}
.tab-panel[hidden]{display:none}

/* ===================================================================
   12. Cart
   =================================================================== */
.cart-line{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-thumb{
  width:56px;height:56px;flex-shrink:0;padding:8px;
  background:var(--tint);border-radius:var(--r-sm);
}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-line .meta{flex:1;min-width:0}
.cart-line .meta b{display:block;font-size:.87rem;line-height:1.35}
.cart-line .meta span{font-family:var(--f-display);font-weight:600;color:var(--brand);font-size:.9rem}
.cart-del{color:var(--muted);transition:var(--t)}
.cart-del:hover{color:var(--red)}

.sum-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:.9rem}
.sum-row span{color:var(--muted)}
.sum-row b{color:var(--ink);white-space:nowrap}
.sum-total{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  margin:12px 0 18px;padding-top:14px;border-top:2px solid var(--ink);
}
.sum-total span{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.sum-total b{font-family:var(--f-display);font-size:1.35rem;color:var(--brand)}

/* ===================================================================
   13. Order tracking timeline
   =================================================================== */
.track{padding-left:4px}
.track-item{position:relative;display:flex;gap:14px;padding:0 0 22px 34px}
.track-item::before{
  content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line);
}
.track-item:last-child{padding-bottom:0}
.track-item:last-child::before{display:none}
.track-item.is-done::before{background:var(--green)}
.track-dot{
  position:absolute;left:0;top:2px;
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:2px solid var(--line);
  color:#fff;font-size:.7rem;font-weight:700;
}
.track-item.is-done .track-dot{background:var(--green);border-color:var(--green)}
.track-item.is-current .track-dot{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.track-body b{display:block;font-size:.92rem;color:var(--ink);line-height:1.4}
.track-body small{color:var(--muted);font-size:.8rem}
.track-item:not(.is-done):not(.is-current) .track-body b{color:var(--muted);font-weight:500}

/* ===================================================================
   14. Tables, pagination, empty state
   =================================================================== */
.table th,.table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.89rem}
.table th{
  background:var(--tint);font-family:var(--f-display);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--tint)}
.table-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}

.pager{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.pager a{
  min-width:38px;height:38px;padding:0 12px;
  display:grid;place-items:center;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--body);transition:var(--t);
}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager a.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

.empty{
  text-align:center;padding:52px 24px;
  background:#fff;border:1px dashed #D8DFE9;border-radius:var(--r-lg);
}
.empty .tile{margin:0 auto 14px}
.empty h4{margin-bottom:6px}
.empty p{color:var(--muted);margin-bottom:18px}

.crumb{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.crumb .sep{opacity:.5}

/* ===================================================================
   15. Feature strip + footer
   =================================================================== */
.feature-strip{background:var(--blue-grad);color:#fff}
.feature-strip .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:16px;
}
.feature-strip .f-item{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:500}
.feature-strip svg{opacity:.9;flex-shrink:0}
@media (max-width:900px){
  .feature-strip .wrap{justify-content:flex-start}
  .feature-strip .f-item{flex:1 1 45%}
}

.site-footer{background:var(--navy);color:rgba(255,255,255,.68);padding-top:52px}
.site-footer h5{
  color:#fff;font-size:.9rem;margin-bottom:16px;
  text-transform:uppercase;letter-spacing:.08em;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:38px}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}}
@media (max-width:620px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid a{display:block;padding:5px 0;font-size:.88rem;color:rgba(255,255,255,.68);transition:var(--t)}
.foot-grid a:hover{color:var(--brand-light);transform:translateX(3px)}
.site-footer .logo-name{color:#fff}
.site-footer .logo-mark{border-color:rgba(255,255,255,.25)}
.foot-contact li{display:flex;gap:9px;padding:5px 0;font-size:.88rem}
.foot-social{display:flex;gap:9px;margin-top:16px}
.foot-social a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;transition:var(--t);
}
.foot-social a:hover{background:var(--brand);transform:translateY(-2px)}
.foot-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.10);
  font-size:.82rem;
}

/* ===================================================================
   16. Floating buttons, loader, progress
   =================================================================== */
.fab-stack{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab{
  position:relative;                 /* the status dot anchors to THIS, not the stack */
  width:50px;height:50px;display:grid;place-items:center;border-radius:50%;
  color:#fff;box-shadow:var(--sh-lg);transition:var(--t);
}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab-wa{background:#25D366}
.fab-top{background:var(--navy);opacity:0;pointer-events:none}
.fab-top.is-on{opacity:1;pointer-events:auto}


.page-loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--wash);transition:opacity var(--t-slow),visibility var(--t-slow);
}
.page-loader.is-hidden{opacity:0;visibility:hidden}
.loader-ring{
  width:44px;height:44px;border-radius:50%;
  border:3.5px solid var(--line);border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{background:linear-gradient(90deg,#EEF1F6 25%,#F8FAFC 37%,#EEF1F6 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal.is-in{opacity:1;transform:none}

/* Accordion */
.acc-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;text-align:left;
  font-family:var(--f-display);font-size:.94rem;font-weight:600;color:var(--ink);
}
.acc-head .caret{color:var(--muted);transition:transform var(--t);flex-shrink:0}
.acc-item.is-open .acc-head .caret{transform:rotate(180deg);color:var(--brand)}
.acc-item.is-open{border-color:var(--brand)}
.acc-body{max-height:0;overflow:hidden;transition:max-height var(--t-slow)}
.acc-body-inner{padding:0 18px 16px;font-size:.9rem;color:var(--body)}

/* ===================================================================
   17. Toast — confirms an action without moving the page
   =================================================================== */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);
  z-index:140;max-width:min(420px,calc(100vw - 32px));
  padding:13px 20px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;color:#fff;
  box-shadow:var(--sh-lg);
  transition:transform var(--t-slow),opacity var(--t-slow);
  opacity:0;pointer-events:none;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast-ok{background:var(--navy)}
.toast-error{background:var(--red)}

/* Wishlist heart on a product card */
.p-wish{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--muted);
  box-shadow:var(--sh-sm);transition:var(--t);
}
.p-wish:hover{color:var(--red);transform:scale(1.08)}
.p-wish.is-on{color:var(--red)}
.p-wish.is-on svg{fill:currentColor}

/* ===================================================================
   18. Uploaded logo
   A logo replaces the wordmark rather than sitting beside it, so it
   carries the whole brand and needs room to breathe.
   =================================================================== */
.logo-img{
  display:block;width:auto;max-width:230px;
  object-fit:contain;object-position:left center;
}

/* Artwork is usually drawn for a light page. On the navy footer and the
   admin sidebar it would disappear, so it gets its own light plate. */
.logo-img.on-dark{
  background:#fff;border-radius:var(--r-sm);
  padding:6px 10px;max-width:210px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

@media (max-width:640px){
  .logo-img{max-width:150px}
  .logo-img.on-dark{max-width:150px}
}

/* ===================================================================
   19. Support button
   A person's face invites a message far better than a logo does, so
   the photo fills the button and the ring carries the brand colour.
   =================================================================== */
.fab-support{
  width:64px;height:64px;padding:0;overflow:hidden;
  background:var(--white);
  border:2px solid var(--brand);
  box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.fab-support img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;border-radius:50%;
}
.fab-support:hover{transform:translateY(-3px) scale(1.05)}

/* A quiet pulse, so it reads as available rather than decorative. */
.fab-ping{
  position:absolute;right:1px;bottom:1px;
  width:14px;height:14px;border-radius:50%;
  background:var(--green);border:2.5px solid var(--white);
}
.fab-ping::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--green);opacity:.75;
  animation:fabPing 2.4s ease-out infinite;
}
@keyframes fabPing{
  0%   {transform:scale(.7);opacity:.75}
  70%  {transform:scale(1.7);opacity:0}
  100% {transform:scale(1.7);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .fab-ping::after{animation:none}
}

/* ===================================================================
   20. Hero carousel
   Slides are stacked and cross-faded, so the section never changes
   height as it moves.
   =================================================================== */
/* ===================================================================
   Hero carousel - full bleed
   The section sits OUTSIDE the centred container, so the artwork runs
   from one edge of the screen to the other. The track is as wide as
   all its slides together, so the viewport does the clipping.
   =================================================================== */
.hero-carousel{
  position:relative;
  width:100%;
  background:var(--wash);
  border-bottom:1px solid var(--line);
}
.hero-viewport{overflow:hidden}

.hero-track{
  display:flex;
  transition:transform 620ms cubic-bezier(.65,.05,.36,1);
  will-change:transform;
}
.hero-slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
}

/* The banner fills the band. A fixed ratio keeps the height steady between
   slides; cover crops an odd-shaped upload from the centre rather than
   squashing it. The clamps stop a very wide screen turning it into a
   letterbox strip. */
.hero-banner{display:block;width:100%}
.hero-banner img{
  display:block;width:100%;
  aspect-ratio:1600 / 560;
  min-height:300px;max-height:560px;
  object-fit:cover;object-position:center;
  background:var(--wash);
}

/* Words over the picture, top-left, with a scrim only when there is
   something to read. */
.hero-overlay{
  position:absolute;left:0;right:0;top:0;
  padding:clamp(28px,5vw,56px) clamp(24px,6vw,80px) 0;
  color:#fff;
  background:linear-gradient(180deg, rgba(15,23,42,.62) 0%, rgba(15,23,42,.22) 60%, transparent 100%);
}
.hero-overlay h1{
  color:#fff;margin:0 0 10px;
  font-size:clamp(1.5rem,3.2vw,2.7rem);line-height:1.14;max-width:18ch;
}
.hero-overlay .lead{color:rgba(255,255,255,.92);margin:0;max-width:46ch}

/* Buttons along the bottom: first one hard left, second hard right. */
.hero-actions{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;
  padding:0 clamp(24px,6vw,80px) clamp(26px,4vw,48px);
  pointer-events:none;                 /* only the buttons take clicks */
}
.hero-actions .ha-left,
.hero-actions .ha-right{pointer-events:auto}
.hero-actions .ha-right{margin-left:auto}

/* A light button that reads on any photograph. */
.btn-white{
  background:#fff;color:var(--ink);
  box-shadow:0 6px 18px rgba(15,23,42,.18);
}
.btn-white:hover{background:#fff;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .hero-track{transition:none}
}

@media (max-width:720px){
  .hero-banner img{aspect-ratio:4 / 5;min-height:0;max-height:none}
  .hero-overlay{
    top:auto;bottom:96px;padding:20px;
    background:linear-gradient(0deg, rgba(15,23,42,.8) 0%, rgba(15,23,42,.35) 70%, transparent 100%);
  }
  .hero-overlay h1{max-width:none}
  .hero-actions{
    flex-direction:row;gap:10px;
    padding:0 16px 20px;
  }
  .hero-actions .btn{padding-inline:18px}
}



.hero-dots button{
  width:26px;height:5px;border-radius:var(--r-pill);
  background:var(--line);border:0;padding:0;cursor:pointer;
  transition:var(--t);
}
.hero-dots button.is-on{background:var(--brand);width:38px}
.hero-dots button:hover{background:var(--brand-light)}

/* A wider container for sections that need room to breathe. */
.wrap-wide{max-width:1420px}
@media (max-width:1460px){ .wrap-wide{max-width:calc(100vw - 48px)} }

/* ===================================================================
   21. Product card actions
   The buttons sit at the bottom of every card and line up across a
   row, so a grid of cards reads as a grid rather than a ragged edge.
   =================================================================== */
.p-card{position:relative;display:flex;flex-direction:column}
.p-body{display:flex;flex-direction:column;flex:1}
.p-price{margin-bottom:12px}

.p-actions{display:flex;gap:8px;margin-top:auto}
.p-actions .btn{flex:1;padding-inline:10px;gap:6px;white-space:nowrap}
.p-actions .btn:disabled{opacity:.5;cursor:not-allowed}

.p-tag-out{
  background:var(--ink);color:#fff;
  top:auto;bottom:10px;left:10px;right:auto;
}

@media (max-width:420px){
  .p-actions{flex-direction:column}
}

/* ===================================================================
   22. Map
   =================================================================== */
.map-card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
}
.map-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.map-frame{position:relative;height:380px;background:var(--wash)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

@media (max-width:640px){
  .map-frame{height:280px}
}