*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

:root{
  --primary:#ff5a00;
  --primary-dark:#e14e00;
  --primary-soft:#fff1e8;
  --primary-soft-2:#fff6f1;
  --text:#222;
  --text-soft:#666;
  --text-muted:#7a7a7a;
  --line:#ececec;
  --bg:#f6f6f6;
  --white:#fff;
  --shadow-sm:0 8px 24px rgba(0,0,0,0.05);
  --shadow-md:0 12px 34px rgba(0,0,0,0.07);
  --shadow-lg:0 18px 50px rgba(0,0,0,0.10);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;
}

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

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

img,
video{
  max-width:100%;
  display:block;
}

button,
input,
textarea,
select{
  font:inherit;
}

.container{
  width:min(1180px,92%);
  margin:0 auto;
}

/* =========================
TOPBAR / HEADER
========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(135deg,#ff5a00,#ff7a00);
  color:#fff;
  box-shadow:0 6px 20px rgba(255,90,0,0.22);
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  min-height:74px;
  padding:10px 0;
}

.logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
}

.logo img{
  display:block;
  height:50px;
  width:auto;
  max-width:100%;
  border-radius:0;
}

.main-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  flex:1;
  min-width:0;
}

.main-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,0.14);
  transition:all .2s ease;
  white-space:nowrap;
  flex:0 0 auto;
}

.main-menu a:hover{
  background:rgba(255,255,255,0.22);
  color:#fff;
}

.main-menu a.active{
  background:#fff;
  color:var(--primary);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* =========================
HERO
========================= */

.hero{
  background:linear-gradient(135deg,#ff5a00,#ff7a00);
  color:#fff;
  padding:70px 0;
}

.hero-wrap{
  display:flex;
  align-items:center;
}

.hero-content{
  max-width:760px;
}

.hero-wrap h1{
  font-size:52px;
  margin:10px 0;
  line-height:1.1;
}

.hero-desc{
  max-width:640px;
  opacity:.96;
  font-size:18px;
}

.hero-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.badge,
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff2e8;
  color:var(--primary);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  width:fit-content;
  max-width:100%;
}

.page-head{
  margin-bottom:20px;
}

.page-lead{
  color:var(--text-soft);
  max-width:760px;
  line-height:1.7;
}

.search-info{
  margin-bottom:18px;
  color:#444;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--text-soft);
  font-size:14px;
}

.breadcrumb a{
  color:var(--primary);
  font-weight:600;
}

.breadcrumb a:hover{
  text-decoration:underline;
}

/* =========================
SECTIONS
========================= */

.section{
  padding:50px 0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.section-head h2{
  margin:0;
  font-size:26px;
  line-height:1.2;
}

.section-subtitle{
  margin:6px 0 0;
  color:var(--text-soft);
  font-size:15px;
}

/* =========================
GRID
========================= */

.grid-products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.grid-articles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

/* =========================
CARDS
========================= */

.card{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow-sm);
  transition:.25s;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.03);
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.card h3{
  margin:8px 0 6px;
  font-size:18px;
  line-height:1.4;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================
PRODUCT CARD
========================= */

.product-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
  height:100%;
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(0,0,0,0.03);
  transition:all .25s ease;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.product-link{
  display:block;
  width:100%;
  min-width:0;
}

.product-thumb-wrap{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:14px;
  margin-bottom:10px;
  background:#f2f2f2;
  position:relative;
}

.product-thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  transition:transform .35s ease;
}

.product-card:hover .product-thumb-wrap img{
  transform:scale(1.04);
}

.product-card-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  min-width:0;
  flex:1;
}

.product-short{
  font-size:14px;
  color:var(--text-soft);
  margin:0;
  line-height:1.5;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:42px;
}

.mini-category{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--primary);
  background:var(--primary-soft);
  padding:6px 10px;
  border-radius:999px;
  width:fit-content;
  max-width:100%;
}

.mini-meta{
  display:flex;
  align-items:center;
  gap:8px;
  color:#777;
  font-size:13px;
  margin:2px 0 2px;
  flex-wrap:wrap;
}

/* =========================
PRICE
========================= */

.price{
  color:var(--primary);
  font-weight:800;
  font-size:16px;
  margin:0;
}

.price.big{
  font-size:32px;
  margin:10px 0 12px;
  line-height:1.15;
}

/* =========================
BUTTONS
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
  border:none;
  text-align:center;
  max-width:100%;
  box-sizing:border-box;
}

.btn.primary{
  background:var(--primary);
  color:#fff;
}

.btn.primary:hover{
  background:var(--primary-dark);
}

.btn.ghost{
  background:#fff;
  color:var(--primary);
  border:2px solid var(--primary);
}

.btn.ghost:hover{
  background:#fff4ee;
}

.btn.full{
  display:flex;
  width:100%;
  text-align:center;
  margin-top:10px;
}

.product-card .btn,
.product-card .btn.full,
.card .btn.full,
.card a.btn.full,
.product-card a.btn.full{
  width:100%;
  max-width:100%;
  margin-top:10px;
  padding:13px 14px;
  border-radius:14px;
}

/* =========================
BUY CTA BUTTONS
========================= */

.buy-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
  width:100%;
}

.btn-buy-main{
  background:linear-gradient(135deg,#ff6a00,#ff2e00);
  color:#fff;
  padding:16px 26px;
  border-radius:16px;
  font-weight:800;
  font-size:16px;
  box-shadow:0 10px 30px rgba(255,90,0,0.28);
  transition:all .25s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:100%;
  box-sizing:border-box;
  min-height:56px;
}

.btn-buy-main:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 15px 35px rgba(255,90,0,0.38);
}

.btn-buy-admin{
  background:#fff;
  color:var(--primary);
  border:2px solid var(--primary);
  padding:16px 22px;
  border-radius:16px;
  font-weight:700;
  transition:all .25s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:100%;
  box-sizing:border-box;
  min-height:56px;
}

.btn-buy-admin:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
}

.cta-note{
  font-size:14px;
  color:var(--text-soft);
  margin-top:18px;
  margin-bottom:8px;
}

/* =========================
SEARCH
========================= */

.searchbar{
  display:flex;
  gap:10px;
  margin-bottom:24px;
}

.searchbar input,
textarea,
select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
}

.searchbar input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,90,0,0.12);
}

/* =========================
PRODUCT DETAIL
========================= */

.product-detail-page{
  padding-top:32px;
  padding-bottom:24px;
}

.product-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  gap:28px;
  align-items:start;
}

.product-gallery-card,
.product-info-card{
  background:#fff;
  border-radius:28px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.04);
}

.product-gallery{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.main-media{
  background:#f6f6f6;
  border-radius:22px;
  overflow:hidden;
  cursor:zoom-in;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.main-media img,
.main-media video,
.main-preview-video{
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  display:block;
  border-radius:22px;
}

.thumb-list{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}

.thumb-btn{
  width:78px;
  height:78px;
  border:none;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  padding:4px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transition:.2s ease;
  border:2px solid transparent;
  flex:0 0 auto;
}

.thumb-btn:hover{
  transform:translateY(-2px);
}

.thumb-btn.active{
  border-color:var(--primary);
  box-shadow:0 8px 20px rgba(255,90,0,0.18);
}

.thumb-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

.video-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ff5a00,#ff7b2c);
  color:#fff;
  font-weight:700;
  font-size:13px;
}

.product-info{
  min-width:0;
}

.product-top-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  background:var(--primary-soft);
  color:var(--primary);
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

.trust-badge{
  display:inline-flex;
  align-items:center;
  background:#f4f4f4;
  color:#333;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

.product-title,
.product-info h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.16;
  margin:0 0 14px;
  color:#1d1d1f;
  letter-spacing:-0.3px;
  word-break:break-word;
}

.product-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:#666;
  font-size:15px;
  margin-bottom:16px;
}

.meta-rating,
.meta-sales,
.meta-stock{
  font-weight:600;
}

.meta-divider{
  opacity:.45;
}

.price.big{
  font-size:clamp(32px,5vw,54px);
  font-weight:800;
  color:var(--primary);
  margin:0 0 16px;
  line-height:1;
}

.short-desc{
  font-size:18px;
  line-height:1.7;
  color:#4b4b4b;
  margin:0 0 20px;
}

.quick-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:0 0 20px;
}

.quick-info-item{
  background:#fafafa;
  border:1px solid #eee;
  border-radius:18px;
  padding:14px 16px;
}

.quick-info-item .label{
  display:block;
  font-size:12px;
  color:#777;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.quick-info-item strong{
  color:#222;
  font-size:15px;
}

.trust-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}

.trust-points span{
  background:#f7f7f7;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color:#333;
  font-weight:600;
}

.product-description,
.product-benefits,
.product-specs,
.info-box{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #ececec;
}

.product-description h2,
.product-description h3,
.product-benefits h3,
.product-specs h3,
.info-box h3{
  margin:0 0 12px;
  font-size:28px;
  color:#1f1f1f;
  line-height:1.3;
}

.product-description p,
.product-benefits li,
.product-specs li,
.info-box li{
  font-size:18px;
  line-height:1.8;
  color:#444;
  word-break:break-word;
}

.product-description p{
  white-space:pre-line;
  margin:0;
}

.product-benefits ul,
.product-specs ul,
.info-box ul{
  margin:0;
  padding-left:22px;
}

/* =========================
RELATED PRODUCTS SECTION
========================= */

.related-section,
.product-related-section{
  padding-top:6px;
  padding-bottom:74px;
}

.related-section .section-head,
.product-related-section .section-head{
  margin-bottom:18px;
}

.related-section .section-head h2,
.product-related-section .section-head h2{
  font-size:32px;
  line-height:1.15;
  margin:0;
  color:#1f1f1f;
}

.related-section .section-subtitle,
.product-related-section .section-subtitle{
  margin-top:8px;
  font-size:15px;
  color:var(--text-soft);
}

.related-products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.related-section .product-card,
.product-related-section .product-card{
  background:#fff;
  border-radius:22px;
  padding:12px;
  box-shadow:0 12px 28px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
  overflow:hidden;
}

.related-section .product-link,
.product-related-section .product-link{
  display:flex;
  flex-direction:column;
  height:100%;
}

.related-section .product-thumb-wrap,
.product-related-section .product-thumb-wrap{
  width:100%;
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  background:#f3f3f3;
  margin-bottom:12px;
}

.related-section .product-thumb-wrap img,
.product-related-section .product-thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
}

.related-section .product-card-body,
.product-related-section .product-card-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:0;
}

.related-section .mini-category,
.product-related-section .mini-category{
  margin-bottom:2px;
}

.related-section .product-card h3,
.product-related-section .product-card h3{
  margin:0;
  color:#1f1f1f;
  font-size:17px;
  line-height:1.42;
  min-height:48px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.related-section .mini-meta,
.product-related-section .mini-meta{
  font-size:12px;
  gap:6px;
  color:#7d7d7d;
}

.related-section .product-short,
.product-related-section .product-short{
  font-size:13px;
  line-height:1.5;
  min-height:40px;
  color:var(--text-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.related-section .product-card .price,
.product-related-section .product-card .price{
  color:var(--primary);
  font-size:22px;
  font-weight:800;
  margin-top:auto;
  padding-top:6px;
}

.related-section .product-card .btn.full,
.product-related-section .product-card .btn.full{
  min-height:46px;
  border-radius:14px;
  margin-top:12px;
}

.related-section .product-card:hover,
.product-related-section .product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(0,0,0,0.08);
}

/* =========================
ARTICLE
========================= */

.article-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

.article-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:2px;
}

.article-card p{
  margin:0;
  color:var(--text-soft);
  line-height:1.7;
  flex:1;
}

.article-cover{
  margin:16px 0;
  border-radius:18px;
  width:100%;
}

.article-detail{
  background:#fff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.05);
}

.article-detail h1{
  margin-top:0;
  line-height:1.25;
}

.article-detail .excerpt{
  color:var(--text-soft);
  font-size:16px;
}

.article-detail .content{
  color:#333;
  line-height:1.9;
  word-break:break-word;
}

/* =========================
HOME EXTRA
========================= */

.home-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.home-highlight-card{
  background:#fff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 8px 30px rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.04);
}

.home-highlight-card h3{
  margin:14px 0 10px;
  font-size:22px;
  line-height:1.35;
}

.home-highlight-card p{
  margin:0;
  color:var(--text-soft);
  line-height:1.8;
}

/* =========================
PRODUCTS PAGE
========================= */

.products-page-head{
  margin-bottom:18px;
}

.page-head-content{
  max-width:860px;
}

.products-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.products-searchbar{
  flex:1;
  min-width:280px;
  margin-bottom:0;
}

.products-searchbar input{
  min-height:48px;
}

.products-searchbar .btn{
  min-height:48px;
  padding:0 22px;
}

.products-summary{
  display:flex;
  align-items:center;
  gap:10px;
}

.products-summary p{
  margin:0;
  color:#555;
  font-size:14px;
}

.products-grid-list{
  align-items:stretch;
}

.empty-products-state{
  text-align:center;
  padding:34px 24px;
  max-width:760px;
  margin:20px auto 0;
}

.empty-products-state .pill{
  margin:0 auto 14px;
}

.empty-products-state h2{
  margin:0 0 10px;
  font-size:28px;
}

.empty-products-state p{
  margin:0 auto;
  max-width:560px;
  color:var(--text-soft);
  line-height:1.8;
}

.empty-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

/* =========================
LIGHTBOX
========================= */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
}

.lightbox.show{
  display:flex;
}

.lightbox-content{
  position:relative;
  max-width:min(92vw,1100px);
  max-height:84vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.lightbox-content img{
  max-width:100%;
  max-height:84vh;
  object-fit:contain;
  border-radius:18px;
  transition:transform .2s ease;
  transform-origin:center center;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}

.lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}

.lightbox-close:hover{
  background:rgba(255,255,255,0.2);
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:28px;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}

.lightbox-nav:hover{
  background:rgba(255,255,255,0.2);
}

.lightbox-prev{
  left:20px;
}

.lightbox-next{
  right:20px;
}

.lightbox-toolbar{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  z-index:3;
  background:rgba(255,255,255,0.1);
  padding:10px 12px;
  border-radius:999px;
  backdrop-filter:blur(6px);
}

.lightbox-tool-btn{
  min-width:46px;
  height:42px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  padding:0 12px;
}

.lightbox-tool-btn:hover{
  background:rgba(255,255,255,0.22);
}

/* =========================
MOBILE STICKY BUY
========================= */

.mobile-sticky-buy{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:90;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px);
  box-shadow:0 -8px 28px rgba(0,0,0,0.08);
  border-top:1px solid #ececec;
  display:none;
}

.mobile-sticky-inner{
  max-width:1180px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mobile-price-wrap{
  display:flex;
  flex-direction:column;
  min-width:110px;
}

.mobile-price-label{
  font-size:12px;
  color:#777;
  margin-bottom:2px;
}

.mobile-price-wrap strong{
  color:var(--primary);
  font-size:20px;
  line-height:1.2;
}

.mobile-buy-actions{
  display:flex;
  gap:8px;
  flex:1;
  justify-content:flex-end;
}

.mobile-buy-btn{
  min-height:46px;
  padding:0 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
}

.mobile-buy-btn.primary{
  background:var(--primary);
  color:#fff;
}

.mobile-buy-btn.secondary{
  background:#fff;
  color:var(--primary);
  border:2px solid var(--primary);
}

/* =========================
FOOTER
========================= */

.footer{
  background:#111;
  color:#ddd;
  margin-top:40px;
  padding-top:40px;
  padding-bottom:0;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px;
}

.footer-col h3,
.footer-col h4{
  color:#fff;
  margin:0 0 12px;
}

.footer-brand p{
  line-height:1.8;
  color:#bdbdbd;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:8px;
}

.footer-links a{
  color:#bbb;
  text-decoration:none;
  transition:.2s ease;
}

.footer-links a:hover{
  color:#fff;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:30px;
  padding:16px 0;
  text-align:center;
  font-size:14px;
  color:#aaa;
}

/* =========================
ADMIN
========================= */

.admin-box{
  max-width:780px;
  background:#fff;
  padding:24px;
  border-radius:18px;
  margin:40px auto;
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
}

.admin-box h1{
  margin-top:0;
}

.form-group{
  margin-bottom:16px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.05);
}

.admin-table th,
.admin-table td{
  border:1px solid #eee;
  padding:12px;
  text-align:left;
  vertical-align:top;
}

.admin-table th{
  background:#fff8f3;
}

/* =========================
SITE INFO
========================= */

.site-info{
  background:#fff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  max-width:900px;
  margin:auto;
}

.site-info h2{
  margin-top:0;
}

.empty-state{
  text-align:center;
  padding:28px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){
  .grid-products{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .grid-articles{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-detail-grid{
    grid-template-columns:1fr;
  }

  .main-media{
    min-height:360px;
  }

  .nav{
    min-height:70px;
  }

  .logo img{
    height:46px;
  }

  .main-menu{
    gap:8px;
  }

  .main-menu a{
    padding:0 13px;
    font-size:13px;
    min-height:38px;
  }

  .related-products-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .footer-grid{
    grid-template-columns:2fr 1fr 1fr;
  }
}

@media(max-width:900px){
  .home-highlight-grid{
    grid-template-columns:1fr;
  }

  .grid-products{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }

  .related-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
}

@media(max-width:700px){
  .grid-products{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }

  .grid-articles{
    grid-template-columns:1fr;
  }

  .nav{
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:10px;
    padding:12px 0;
  }

  .logo{
    width:100%;
    justify-content:center;
  }

  .logo img{
    height:42px;
  }

  .main-menu{
    width:100%;
    justify-content:flex-start;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .main-menu::-webkit-scrollbar{
    display:none;
  }

  .main-menu a{
    flex:0 0 auto;
    min-height:36px;
    padding:0 12px;
    font-size:12px;
  }

  .hero-wrap h1{
    font-size:34px;
  }

  .hero-desc{
    font-size:16px;
  }

  .buy-buttons{
    flex-direction:column;
  }

  .btn-buy-main,
  .btn-buy-admin{
    width:100%;
  }

  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .searchbar{
    flex-direction:column;
  }

  .products-toolbar{
    align-items:stretch;
  }

  .products-searchbar{
    width:100%;
  }

  .products-summary{
    width:100%;
  }

  .product-gallery-card,
  .product-info-card{
    border-radius:22px;
    padding:16px;
  }

  .main-media{
    min-height:280px;
  }

  .product-title,
  .product-info h1{
    font-size:28px;
  }

  .price.big{
    font-size:28px;
  }

  .short-desc,
  .product-description p,
  .product-benefits li,
  .product-specs li,
  .info-box li{
    font-size:16px;
  }

  .product-description h2,
  .product-description h3,
  .product-benefits h3,
  .product-specs h3,
  .info-box h3{
    font-size:22px;
  }

  .quick-info-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .thumb-btn{
    width:64px;
    height:64px;
  }

  .related-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .related-section .section-head h2,
  .product-related-section .section-head h2{
    font-size:26px;
  }

  .related-section .product-card,
  .product-related-section .product-card,
  .card,
  .product-card{
    border-radius:16px;
    padding:10px;
  }

  .card h3,
  .related-section .product-card h3,
  .product-related-section .product-card h3,
  .product-card h3{
    font-size:15px;
    line-height:1.35;
  }

  .related-section .product-card h3,
  .product-related-section .product-card h3{
    min-height:40px;
  }

  .product-short{
    font-size:12px;
    line-height:1.4;
    min-height:34px;
  }

  .mini-category{
    font-size:10px;
    padding:5px 8px;
  }

  .price{
    font-size:14px;
  }

  .related-section .product-card .price,
  .product-related-section .product-card .price{
    font-size:18px;
  }

  .empty-products-state h2{
    font-size:24px;
  }

  .mobile-sticky-buy{
    display:block;
  }

  body{
    padding-bottom:86px;
  }

  .lightbox{
    padding:18px;
  }

  .lightbox-nav{
    width:46px;
    height:46px;
    font-size:24px;
  }

  .lightbox-prev{
    left:10px;
  }

  .lightbox-next{
    right:10px;
  }

  .lightbox-close{
    top:10px;
    right:12px;
  }

  .lightbox-toolbar{
    bottom:14px;
    gap:8px;
    padding:8px 10px;
  }

  .lightbox-tool-btn{
    min-width:42px;
    height:38px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
}

@media(max-width:560px){
  .quick-info-grid{
    grid-template-columns:1fr;
  }

  .related-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .mobile-sticky-inner{
    padding:10px 12px;
  }

  .mobile-price-wrap strong{
    font-size:18px;
  }

  .mobile-buy-btn{
    min-width:82px;
    min-height:42px;
    font-size:14px;
  }

  .section-head h2{
    font-size:24px;
  }
}

@media(max-width:480px){
  .container{
    width:min(94%,100%);
  }

  .grid-products{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }

  .hero{
    padding:50px 0;
  }

  .card,
  .product-card{
    padding:8px;
    border-radius:12px;
  }

  .product-thumb-wrap{
    margin-bottom:8px;
    border-radius:10px;
  }

  .product-thumb-wrap img{
    border-radius:10px;
  }

  .product-card .btn,
  .product-card .btn.full,
  .card .btn.full{
    padding:10px 12px;
    font-size:12px;
    min-height:38px;
    margin-top:8px;
  }

  .nav{
    gap:10px;
  }

  .logo img{
    height:38px;
  }

  .main-menu{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    padding-bottom:4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .main-menu::-webkit-scrollbar{
    display:none;
  }

  .main-menu a{
    flex:0 0 auto;
    min-height:34px;
    padding:0 10px;
    font-size:11px;
  }

  .hero-wrap h1{
    font-size:30px;
  }

  .section{
    padding:30px 0;
  }

  .card h3,
  .product-card h3{
    font-size:13px;
  }

  .related-section .product-card h3,
  .product-related-section .product-card h3{
    font-size:13px;
    min-height:34px;
  }

  .product-short{
    font-size:11px;
    min-height:30px;
  }

  .product-title,
  .product-info h1{
    font-size:24px;
  }

  .price{
    font-size:13px;
  }

  .price.big{
    font-size:25px;
  }

  .btn-buy-main,
  .btn-buy-admin{
    padding:14px 16px;
    font-size:15px;
    min-height:52px;
  }

  .thumb-list{
    gap:8px;
  }

  .related-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .related-section,
  .product-related-section{
    padding-bottom:96px;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer{
    padding-top:30px;
  }

  .footer-bottom{
    font-size:13px;
  }
}
/* =========================
AFFILIATE CTA / CONVERSION
========================= */

.affiliate-highlight{
  background:linear-gradient(135deg,#fff4ee,#fff);
  border:2px solid #ffe2d4;
  border-radius:20px;
  padding:18px;
  margin-top:18px;
}

.affiliate-highlight h2{
  margin:6px 0 8px;
  font-size:20px;
  color:#ff5a00;
}

.affiliate-highlight p{
  margin:0;
  color:#555;
  line-height:1.7;
}

/* CTA ulang di tengah halaman */
.cta-repeat-box{
  margin-top:26px;
  padding:22px;
  border-radius:20px;
  background:linear-gradient(135deg,#ff5a00,#ff7a00);
  color:#fff;
  text-align:center;
}

.cta-repeat-box h3{
  margin:0 0 8px;
  font-size:22px;
}

.cta-repeat-box p{
  margin:0 0 14px;
  opacity:.95;
}

.cta-repeat-box .btn-buy-main{
  background:#fff;
  color:#ff5a00;
  box-shadow:none;
}

.cta-repeat-box .btn-buy-main:hover{
  background:#fff3eb;
}

/* Trust box */
.info-box{
  background:#fafafa;
  border-radius:18px;
  padding:18px;
  border:1px solid #eee;
}

/* Harga section */
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:12px 0 6px;
}

.price-label{
  font-size:13px;
  color:#777;
}

.price-main{
  font-size:30px;
  font-weight:800;
  color:#ff5a00;
  margin:0;
}

.price-note{
  font-size:12px;
  color:#888;
}

/* Tombol Shopee lebih besar */
.btn-buy-main{
  font-size:17px;
  min-height:60px;
}

/* Mobile sticky Shopee lebih mencolok */
.mobile-buy-btn.primary{
  background:linear-gradient(135deg,#ff6a00,#ff2e00);
}