/* ==========================================================================
   Silvera-style Single Product Page — custom.css
   Drop into your theme's assets/css folder and enqueue it (see functions.php
   snippet). Built to sit on top of default WooCommerce markup classes plus
   a handful of custom wrapper classes used in single-product.php.
   ========================================================================== */

:root{
  --sv-navy: #0b2a4a;
  --sv-navy-dark: #0a2340;
  --sv-blue: #14568c;
  --sv-orange: #f5820a;
  --sv-orange-dark: #e07300;
  --sv-bg: #eef3f7;
  --sv-white: #ffffff;
  --sv-border: #dfe6ee;
  --sv-text: #1c2b3a;
  --sv-text-muted: #5b6b7a;
  --sv-green: #1e9e4e;
  --sv-radius: 4px;
  --sv-shadow: 0 1px 3px rgba(11,42,74,0.08);
  --sv-maxw: 1440px;
}

.sv-page{
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.sv-page a{ color: inherit; text-decoration: none; }
.sv-page *{ box-sizing: border-box; }

/* ---------- Top utility bar ---------- */
.sv-topbar{
  background: #eaf1f7;
  border-bottom: 1px solid var(--sv-border);
  font-size: 13px;
  padding: 8px 0;
}
.sv-topbar-inner{
  max-width: var(--sv-maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sv-topbar-note{ color: var(--sv-blue); font-weight: 600; }
.sv-topbar-rates{ display: flex; gap: 24px; color: var(--sv-navy); }
.sv-topbar-rates b{ color: var(--sv-orange); }
.sv-topbar-hotline{
  display:flex; align-items:center; gap:8px;
  background: var(--sv-navy);
  color:#fff; padding:6px 14px; border-radius: var(--sv-radius);
  font-weight:600;
}
.sv-topbar-hotline small{ display:block; font-weight:400; font-size:11px; opacity:.8; }

/* ---------- Header ---------- */
.sv-header{
  background: var(--sv-white);
  border-bottom: 1px solid var(--sv-border);
}
.sv-header-inner{
  max-width: var(--sv-maxw);
  margin: 0 auto;
  padding: 16px 24px;
  display:flex;
  align-items:center;
  gap: 24px;
}
.sv-logo{ font-size: 26px; font-weight:700; color: var(--sv-navy); letter-spacing: .5px; }
.sv-logo span{ font-weight:400; color: var(--sv-text-muted); font-size:11px; display:block; letter-spacing:1px; }
.sv-search{ flex:1; display:flex; }
.sv-search input{
  flex:1; border:1px solid var(--sv-border); border-right:none;
  padding: 10px 14px; border-radius: var(--sv-radius) 0 0 var(--sv-radius); outline:none;
}
.sv-search button{
  border:1px solid var(--sv-border); background:#f5f7f9; padding: 0 16px;
  border-radius: 0 var(--sv-radius) var(--sv-radius) 0; cursor:pointer;
}
.sv-header-icons{ display:flex; align-items:center; gap:20px; }
.sv-icon-badge{ position:relative; font-size:20px; color: var(--sv-navy); }
.sv-icon-badge .count{
  position:absolute; top:-8px; right:-10px; background: var(--sv-orange);
  color:#fff; font-size:10px; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.sv-signin{
  background: var(--sv-orange); color:#fff; font-weight:600;
  padding: 10px 22px; border-radius: var(--sv-radius); white-space:nowrap;
}

/* ---------- Nav ---------- */
.sv-nav{ background: var(--sv-navy); }
.sv-nav-inner{
  max-width: var(--sv-maxw); margin:0 auto; padding: 0 24px;
  display:flex; align-items:stretch;
}
.sv-nav-inner a{
  color:#fff; padding: 14px 18px; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:6px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.sv-nav-inner a.is-home{ background: var(--sv-orange); }
.sv-nav-inner a:hover{ background: var(--sv-navy-dark); }

/* ---------- Layout shell ---------- */
.sv-container{ max-width: var(--sv-maxw); margin: 0 auto; padding: 24px; }

/* ---------- Product top section ---------- */
.sv-product{
  display:grid;
  grid-template-columns: 480px 1fr 320px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1100px){
  .sv-product{ grid-template-columns: 1fr; }
}

.sv-gallery{ background:#fff; border:1px solid var(--sv-border); border-radius: var(--sv-radius); padding: 16px; }
.sv-gallery-main{
  position:relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.sv-gallery-main img{ max-width:100%; max-height:100%; object-fit:contain; }
.sv-thumbs{ display:flex; gap:10px; margin-top:14px; }
.sv-thumbs button{
  width:64px; height:64px; border:1px solid var(--sv-border); border-radius: var(--sv-radius);
  background:#fff; padding:6px; cursor:pointer;
}
.sv-thumbs button.is-active{ border-color: var(--sv-orange); }
.sv-thumbs img{ width:100%; height:100%; object-fit:contain; }

.sv-actions{ display:flex; gap:12px; margin-top:18px; }
.sv-btn{
  flex:1; padding: 14px 0; border-radius: var(--sv-radius); font-weight:700; font-size:15px;
  text-align:center; cursor:pointer; border:none;
}
.sv-btn-primary{ background: var(--sv-navy); color:#fff;max-width: 40% !important;  }
.sv-btn-primary:hover{ background: var(--sv-navy-dark); }
.sv-btn-accent{ background: var(--sv-navy); color:#fff; max-width: 40% !important; }
.sv-btn-accent:hover{ background: var(--sv-orange-dark); }

/* ---------- Product info column ---------- */
.sv-stock-pill{
  display:inline-flex; align-items:center; gap:10px; background:#eef7ef; border:1px solid #cdeacd;
  color: var(--sv-green); padding:10px 16px; border-radius: var(--sv-radius); font-weight:600;
}
.sv-stock-pill small{ display:block; color: var(--sv-text-muted); font-weight:400; }

.sv-title{ font-size:22px; font-weight:700; color: var(--sv-navy); margin: 16px 0 4px; text-transform: uppercase; }
.sv-subtitle{ color: var(--sv-text-muted); font-size:14px; margin-bottom: 12px; }

.sv-tag{
  display:inline-block; background:#cfe0ee; color: var(--sv-navy); font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:3px; letter-spacing:.5px; margin-right:8px;
}
.sv-category{ color: var(--sv-blue); font-size:14px; margin: 10px 0; }

.sv-price{ font-size:30px; font-weight:700; color: var(--sv-orange); margin: 10px 0; }
.sv-price .gst-note{ font-size:13px; color: var(--sv-text-muted); font-weight:400; }

.sv-alert-btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--sv-border);
  background:#fff; padding:10px 16px; border-radius: var(--sv-radius); font-weight:600; cursor:pointer;
  margin: 8px 0 18px;
}

.sv-field-row{ display:flex; gap:24px; margin-bottom:16px; flex-wrap:wrap; }
.sv-field{ display:flex; flex-direction:column; gap:6px; }
.sv-field label{ font-weight:600; font-size:13px; }
.sv-field input{
  border:1px solid var(--sv-border); border-radius: var(--sv-radius); padding:10px 12px; width:90px;
}
.sv-check-availability{ display:flex; gap:8px; }
.sv-check-availability input{ width:130px; }
.sv-check-availability button{
  background: var(--sv-navy); color:#fff; border:none; padding:0 18px; border-radius: var(--sv-radius); font-weight:600;
  cursor:pointer;
}

.sv-package-label{ font-weight:700; margin: 6px 0 10px; }
.sv-package-card{
  display:flex; align-items:center; gap:14px; border:1px solid var(--sv-border); border-radius: var(--sv-radius);
  padding:12px 16px; background:#fff; max-width: 320px;
}
.sv-package-card .icon{ font-size:22px; }
.sv-package-card .name{ font-weight:600; font-size:13px; line-height:1.3; }
.sv-package-card .price{ font-weight:700; color: var(--sv-navy); }

/* ---------- Sidebar box ---------- */
.sv-sidebar-box{ border:1px solid var(--sv-border); border-radius: var(--sv-radius); overflow:hidden; background:#fff; }
.sv-sidebar-row{
  padding:14px 16px; font-size:14px; font-weight:600; border-bottom:1px solid var(--sv-border);
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
}
.sv-sidebar-row:last-of-type{ border-bottom:none; }
.sv-sidebar-row a{ color: var(--sv-blue); font-weight:700; white-space:nowrap; }
.sv-free-delivery{ margin-top:10px; font-size:13px; color: var(--sv-green); font-weight:600; }

/* ---------- Tabs / special note ---------- */
.sv-info-section{ display:grid; grid-template-columns: 280px 1fr; gap:24px; margin-top: 40px; }
@media (max-width: 900px){ .sv-info-section{ grid-template-columns: 1fr; } }

.sv-tab-list-header{ background: var(--sv-navy); color:#fff; font-weight:700; padding:14px 18px; border-radius: var(--sv-radius) var(--sv-radius) 0 0; }
.sv-tab-list{ background:#fff; border:1px solid var(--sv-border); border-top:none; }
.sv-tab-list button{
  display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--sv-border);
  padding:14px 18px; font-weight:600; cursor:pointer; color: var(--sv-text);
}
.sv-tab-list button:last-child{ border-bottom:none; }
.sv-tab-list button.is-active{

    background: var(--sv-navy);
    color: #fff;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: var(--sv-radius) var(--sv-radius) 0 0;
}

.sv-note-box{ background:#fff; border:1px solid var(--sv-border); border-radius: var(--sv-radius); padding:24px; }
.sv-note-box h3{ color: var(--sv-navy); margin:0 0 14px; }
.sv-note-box p{ margin: 0 0 12px; }

/* ---------- Related products ---------- */
.sv-related{ margin-top: 48px; }
.sv-related h2{ text-align:center; margin-bottom:24px; }
.sv-related-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:20px; }
.sv-product-card{ background:#fff; border:1px solid var(--sv-border); border-radius: var(--sv-radius); padding:16px; text-align:center; }
.sv-product-card .top-row{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:10px; }
.sv-product-card img{ max-width:120px; margin: 0 auto 12px; display:block; }
.sv-product-card .meta{ display:flex; justify-content:center; gap:14px; font-size:12px; color: var(--sv-text-muted); margin-bottom:8px; }
.sv-product-card .name{ font-weight:600; color: var(--sv-blue); margin-bottom:8px; }
.sv-product-card .price{ color: var(--sv-orange); font-weight:700; font-size:18px; }

/* ---------- Footer ---------- */
.sv-footer{ background: var(--sv-navy); color:#c7d3de; margin-top:56px; padding: 40px 0 20px; }
.sv-footer-inner{ max-width: var(--sv-maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns: repeat(4,1fr); gap:32px; }
@media (max-width:800px){ .sv-footer-inner{ grid-template-columns: 1fr 1fr; } }
.sv-footer h4{ color:#fff; margin-bottom:16px; font-size:14px; text-transform:uppercase; letter-spacing:.5px; }
.sv-footer a{ display:block; color:#93a4b5; padding:4px 0; font-size:14px; }
.sv-footer-bottom{ text-align:center; font-size:12px; color:#7f92a4; margin-top:32px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }