:root{
  --red:#e31e24;
  --red-dark:#b3171c;
  --navy:#0a0a8c;
  --topbar:#3a3f58;
  --gold:#e5b830;
  --text:#777;
  --footer:#2b2b2b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Roboto',Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* TOP BAR */
.topbar{background:var(--topbar);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 22px;font-size:14px;font-weight:500;flex-wrap:wrap;gap:6px}
.topbar a:hover{color:var(--gold)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar .sep{width:1px;height:16px;background:#fff6}
.topbar-right a{font-weight:700}
.topbar i{margin-right:4px}
.topbar-right .soc{width:26px;height:26px;display:grid;place-items:center;font-size:14px;border-radius:50%;background:transparent;transition:transform .25s,color .25s}
.topbar-right .soc i{margin:0}
.topbar-right .soc:hover{transform:translateY(-3px)}
.topbar-right .fb:hover{color:#4c8bf5}
.topbar-right .tw:hover{color:#4cc2ff}
.topbar-right .in:hover{color:#5aa9e6}
.topbar-right .ig:hover{color:#ff7ab8}

/* HEADER */
.header{position:sticky;top:0;z-index:50;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid #eee;transition:box-shadow .3s}
.header.scrolled{box-shadow:0 3px 14px #0002}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:100px;height:86px;transition:.3s}
.header.scrolled .logo{width:70px;height:60px}
.brand-name{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:30px;color:var(--red);letter-spacing:.5px}
.nav{display:flex;align-items:center;gap:30px}
.nav>a,.drop-btn{font-weight:700;font-size:18px;color:var(--red-dark);text-transform:uppercase;letter-spacing:1px;padding:8px 0;position:relative}
.nav>a::after,.drop-btn::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--red);transition:width .3s}
.nav>a:hover::after,.dropdown:hover .drop-btn::after{width:100%}
.dropdown{position:relative}
.caret{font-size:14px;margin-left:2px}
.drop-menu{position:absolute;top:100%;left:-10px;min-width:240px;background:#fff;box-shadow:0 8px 24px #0003;border-top:3px solid var(--red);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.dropdown:hover .drop-menu,.dropdown:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{display:block;padding:12px 18px;font-weight:500;color:#444;border-bottom:1px solid #f0f0f0}
.drop-menu a:hover{background:#fff3f3;color:var(--red)}
.menu-toggle{display:none;background:none;border:0;font-size:30px;color:var(--red);cursor:pointer}

/* HERO */
.hero{position:relative;height:clamp(300px,52vw,670px);overflow:hidden;background:#222}
.slide{position:absolute;inset:0;background:var(--img),var(--fallback);background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 6s ease}
.slide.active{opacity:1;transform:scale(1);z-index:1}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,#0007,#0000 60%)}
.caption{position:absolute;left:7%;bottom:14%;color:#fff;max-width:520px;opacity:0;transform:translateY(25px);transition:.9s .4s}
.slide.active .caption{opacity:1;transform:none}
.caption h2{font-size:clamp(24px,4vw,46px);text-shadow:0 2px 8px #0008}
.caption p{font-size:clamp(14px,2vw,20px);margin-top:6px;text-shadow:0 2px 6px #0008}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:#0004;color:#fff;font-size:18px;cursor:pointer;transition:.25s}
.arrow:hover{background:var(--red);border-color:var(--red)}
.arrow.prev{left:16px}.arrow.next{right:16px}
.dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0}
.dots button.active{background:#fff}

/* SECTIONS */
.section{padding:60px 22px;max-width:1200px;margin:0 auto}
.title{text-align:center;font-size:40px;font-weight:700;margin-bottom:46px}
.title.blue{color:var(--navy)}
.title.dark{color:#222}

/* VALUES */
.values-grid{display:flex;justify-content:space-around;flex-wrap:wrap;gap:30px}
.value{text-align:center;width:170px;transition:transform .3s}
.value:hover{transform:translateY(-8px)}
.value svg{width:100px;height:100px;fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 14px}
.value h3{font-size:16px;font-weight:900;color:#000;font-family:'Roboto',sans-serif}

/* LOGO CAROUSEL */
.logo-carousel{display:flex;align-items:center;gap:12px;max-width:1150px;margin:0 auto}
.logo-viewport{overflow:hidden;flex:1}
.logo-track{display:flex;transition:transform .6s ease}
.logo-card{flex:0 0 25%;padding:6px;height:210px}
.logo-card>*{width:100%;height:100%;object-fit:contain;border:1px solid #eee;background:#fff;border-radius:2px}
.logo-card img[src]:not([src=""]){position:relative;z-index:1}
.logo-card{position:relative}
.logo-card img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);z-index:2}
.logo-card img[alt]{font-size:0}
.fb{display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:36px;text-align:center}
.fb small{font-size:14px;font-style:italic;font-weight:400;margin-top:6px}
.fb.bonn{color:var(--red);background:#f7f7f7;font-size:60px}
.fb.sobisco{color:#fff;background:#fff}.fb.sobisco{color:#c8161d}
.fb.richlite{color:#fff;background:radial-gradient(#b3261e,#6e0f0b);font-family:'Playfair Display',serif}
.fb.modern{color:#1d2ea0;background:#ffe14a;font-style:italic;font-size:44px}
.fb.parle{background:#ffd200;color:#c8161d;font-size:44px}
.fb.brit{background:#fff;color:#c8161d;font-size:34px}
.arrow-sm{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#666;color:#fff;cursor:pointer;transition:.25s}
.arrow-sm:hover{background:var(--red)}

/* BUSINESS */
.biz{display:flex;align-items:center;gap:70px;margin-bottom:90px;padding:0 50px}
.biz.reverse{flex-direction:row-reverse}
.biz-text,.biz-img{flex:1}
.biz-text h3{font-family:'Playfair Display',serif;font-weight:400;font-size:38px;color:#8aa5a0;margin-bottom:22px}
.biz-text p{text-align:justify;font-size:16px;margin-bottom:26px}
.btn{display:inline-block;background:var(--gold);color:#fff;font-family:'Playfair Display',serif;font-weight:600;padding:14px 30px;transition:.25s}
.btn:hover{background:var(--red);transform:translateX(4px)}
.biz-img{height:350px;background:var(--img),var(--fallback);background-size:cover;background-position:center;border:10px solid #fff;box-shadow:0 4px 18px #0003;transition:transform .4s}
.biz-img:hover{transform:scale(1.03)}
.reveal{opacity:0;transform:translateY(40px);transition:1s}
.reveal.show{opacity:1;transform:none}

/* FOOTER */
.footer{background:var(--footer);color:#fff;display:flex;justify-content:center;align-items:center;gap:200px;padding:42px 22px;flex-wrap:wrap}
.footer a:hover{color:var(--gold)}
.footer p a{color:#d9b25c}
.footer nav{display:flex;gap:24px}
.footer nav a{font-weight:500}

.to-top{position:fixed;right:24px;bottom:100px;width:46px;height:46px;border-radius:50%;border:0;background:#1d2a5c;color:#fff;font-size:22px;cursor:pointer;opacity:0;visibility:hidden;transition:.3s;z-index:60}
.to-top.show{opacity:1;visibility:visible}

/* RESPONSIVE */
@media(max-width:1100px){
  .brand-name{font-size:22px}
  .nav{gap:18px}.nav>a,.drop-btn{font-size:15px}
  .footer{gap:40px}
  .biz{gap:40px;padding:0}
  .logo-card{flex-basis:33.333%}
}
@media(max-width:820px){
  .menu-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:10px 22px 20px;gap:4px;box-shadow:0 10px 20px #0002;display:none}
  .nav.open{display:flex}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:12px;display:none}
  .dropdown.open .drop-menu{display:block}
  .biz,.biz.reverse{flex-direction:column;gap:24px}
  .biz-img{width:100%;height:240px}
  .logo-card{flex-basis:50%}
  .title{font-size:30px}
  .footer{flex-direction:column;gap:18px;text-align:center}
  .footer nav{flex-wrap:wrap;justify-content:center}
  .topbar-right a:first-child{display:none}
}

/* ===== ABOUT PAGE (works on top of style.css) ===== */
:root{--gold2:#f6b82e;--crimson:#d4001f;--teal:#17b8c9}

.nav>a.current::after{width:100%}

.about{max-width:1000px;margin:0 auto;padding:60px 22px 30px}
.about-title{font-family:'Poppins',sans-serif;font-weight:700;color:var(--gold2);text-align:center;font-size:clamp(30px,5vw,48px);letter-spacing:5px;margin-bottom:32px}
.about-intro{font-family:'Montserrat',sans-serif;font-size:clamp(16px,2.2vw,21px);letter-spacing:1.6px;color:#555;line-height:1.5;margin-bottom:26px}

/* timeline */
.timeline{list-style:none;position:relative;font-family:'Montserrat',sans-serif}
.timeline::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:32px;background:var(--gold2)}
.timeline li{position:relative;display:flex;align-items:center;gap:36px;padding:10px 0;min-height:52px}
.year{flex:none;width:56px;text-align:center;font-size:19px;font-weight:500;color:#fff;padding:6px 0;background:var(--gold2);position:relative;z-index:1;margin-left:2px;box-shadow:0 0 0 1px #fff3}
.timeline li:nth-child(even) .year{background:var(--crimson);font-weight:700}
.timeline li:nth-child(odd) .year{background:var(--gold2)}
.timeline p{font-size:14px;letter-spacing:1.3px;color:#333;line-height:1.35;text-align:justify;flex:1}
.timeline li{opacity:0;transform:translateX(-24px);transition:.7s}
.timeline li.show{opacity:1;transform:none}

/* tabs */
.tabs-wrap{max-width:1120px;margin:30px auto 70px;padding:0 22px}
.tab-list{display:flex;flex-wrap:wrap;background:#f1f1f1;width:fit-content;max-width:100%}
.tab{font-family:'Playfair Display',serif;font-weight:700;font-size:16px;color:#333;background:transparent;border:0;padding:16px 30px;cursor:pointer;text-transform:none;transition:.25s}
.tab:nth-child(4),.tab:nth-child(5){text-transform:uppercase}
.tab:hover{color:var(--teal)}
.tab.active{background:var(--teal);color:#fff}
.tab-panels{border-top:6px solid var(--teal);background:#fafafa;padding:40px 30px 20px}
.panel{animation:fade .5s}
.panel[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel h2{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:28px;color:#333;text-align:center;margin-bottom:22px}
.panel-text{text-align:center;color:#666;font-size:17px;padding:30px 10px 50px}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.member{text-align:center;padding:10px 10px 22px;border-bottom:1px solid #e3e3e3;font-family:'Source Sans 3',sans-serif;color:#444;font-size:16.5px;line-height:1.5}
.member b{color:#222}
.member a:hover{color:var(--red)}
.avatar{width:150px;height:150px;border-radius:50%;overflow:hidden;margin:0 auto 10px;position:relative;background:linear-gradient(135deg,#8c1a1f,#e31e24);display:grid;place-items:center;transition:transform .35s,box-shadow .35s}
.avatar::before{content:attr(data-initials);color:#fff;font-size:44px;font-weight:700;font-family:'Poppins',sans-serif}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar:hover{transform:scale(1.06);box-shadow:0 8px 22px #0004}

@media(max-width:820px){
  .timeline::before{left:6px;width:24px}
  .timeline li{flex-direction:column;align-items:flex-start;gap:8px;padding-left:0}
  .year{margin-left:0}
  .timeline p{padding-left:40px;letter-spacing:.5px;text-align:left}
  .tab{padding:12px 16px;font-size:14px}
  .tab-list{width:100%}
  .team-grid{grid-template-columns:1fr}
}

/* ===== Contract Manufacturing page ===== */
.cm-page{max-width:1180px;margin:0 auto;padding:60px 22px 90px}
.cm-title{font-family:'Roboto',sans-serif;font-weight:900;color:#000;text-align:center;font-size:clamp(34px,6vw,68px);margin-bottom:60px}
.cm-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:center}
.cm-img{overflow:hidden}
.cm-img img{width:100%;height:100%;min-height:280px;object-fit:cover;transition:transform .5s}
.cm-img:hover img{transform:scale(1.07)}
.cm-text{padding:30px 40px;text-align:center}
.cm-text h2{font-family:'Roboto',sans-serif;font-weight:500;font-size:20px;text-transform:uppercase;color:#000;margin-bottom:22px}
.cm-text p{font-weight:700;font-size:15px;line-height:1.6;color:#666;text-align:justify}

@media(max-width:900px){
  .cm-grid{grid-template-columns:1fr}
  .cm-grid .cm-img:nth-child(4){order:0}   /* keep the image above its text on mobile */
  .cm-text{padding:24px 10px}
  .cm-img img{min-height:220px}
}

/* ===== Logistics page ===== */
.cm-title.upper{text-transform:uppercase}
.lg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;max-width:1000px;margin:0 auto;align-items:center}
.lg-img{padding:10px 0}
.lg-img img{width:100%;max-width:390px;height:290px;object-fit:cover;margin:0 auto;transition:transform .5s}
.lg-img:hover img{transform:scale(1.05)}
.lg-grid .cm-text{padding:50px 30px}

@media(max-width:820px){
  .lg-grid{grid-template-columns:1fr;gap:0}
  .lg-grid .cm-text{padding:20px 10px}
  .lg-grid>.cm-text:nth-child(3){order:4}  /* image first, then text on mobile */
  .lg-grid>.lg-img:nth-child(4){order:3}
}

/* ===== Products page ===== */
.pr-page{
  background:url('../images/parchment-bg.jpg') center/cover fixed,
             linear-gradient(135deg,#f6e3bd,#e9c88f);   /* fallback if image missing */
  padding:40px 22px 60px;
}
.pr-wrap{max-width:1160px;margin:0 auto}
.pr-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:46px}
.pr-head h1{font-family:'Roboto',sans-serif;font-weight:400;font-size:40px;color:#444}
.pr-head p{font-size:14px;color:#777;margin-right:240px}

.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.pr-card{text-align:center}
.pr-img{display:block;overflow:hidden;box-shadow:0 4px 10px #0003;aspect-ratio:1/1;background:#fff}
.pr-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pr-card:hover .pr-img img{transform:scale(1.08)}
.pr-card h2{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:18px;color:#222;margin:24px 0 12px}
.pr-btn{display:inline-block;background:#3a3f58;color:#fff;font-weight:700;font-size:16px;padding:13px 20px;transition:.25s}
.pr-btn:hover{background:var(--red);transform:translateY(-3px)}

@media(max-width:1000px){.pr-grid{grid-template-columns:repeat(3,1fr)}.pr-head p{margin-right:0}}
@media(max-width:700px){.pr-grid{grid-template-columns:repeat(2,1fr);gap:28px 14px}}
@media(max-width:420px){.pr-grid{grid-template-columns:1fr}}


/* ===== Career page ===== */
.cr-page{padding:50px 22px 80px}
.cr-wrap{max-width:720px;margin:0 auto}
.cr-title{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:40px;color:#333;text-align:center;text-decoration:underline;text-underline-offset:6px;margin-bottom:46px}
.cr-lead{font-weight:700;color:#555;margin:0 0 6px}
.cr-list{padding-left:0;margin:0 0 22px;list-style-position:inside;color:#555;line-height:1.5;font-size:16px}
.cr-form{margin-top:10px}
.cr-form label{display:block;color:#888;font-size:16px;margin:22px 0 4px}
.cr-form label span{color:#c00}
.cr-form input[type=text],.cr-form input[type=email],.cr-form input[type=tel],.cr-form input[type=file]{width:100%;height:45px;border:1px solid #ddd;padding:0 12px;font:inherit;color:#333;background:#fff;transition:border-color .25s,box-shadow .25s}
.cr-form input[type=file]{padding-top:9px;height:45px}
.cr-form input:focus{outline:0;border-color:var(--topbar);box-shadow:0 0 0 3px #3a3f5822}
.cr-send{margin-top:46px;width:200px;height:45px;background:var(--topbar);color:#fff;border:0;font:700 16px 'Roboto',sans-serif;cursor:pointer;transition:.25s}
.cr-send:hover{background:var(--red)}
.cr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cr-alert{padding:14px 18px;margin:16px 0;border-left:4px solid;font-size:15px}
.cr-alert.ok{background:#e9f7ec;border-color:#2e9e4f;color:#1f6b36}
.cr-alert.err{background:#fdecec;border-color:#d33;color:#9a1c1c}

@media(max-width:600px){.cr-title{font-size:32px}.cr-send{width:100%}}

/* ===== Contact page ===== */
.ct-page{padding:30px 22px 80px}
.ct-wrap{max-width:1020px;margin:0 auto}
.ct-title{font-family:'Roboto',sans-serif;font-weight:700;font-size:30px;color:#4db6e4;text-align:center;margin-bottom:16px}

.ct-top{display:grid;grid-template-columns:740px 1fr;gap:20px;align-items:start}
.ct-map iframe{display:block;width:100%;height:450px;border:0}
.ct-info{font-size:15px;color:#333}
.ct-small{font-size:14px;margin:12px 0 16px}
.ct-row{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.ct-ico{flex:none;width:30px;height:30px;border:1px solid #bbb;border-radius:50%;display:grid;place-items:center;margin-top:-2px}
.ct-ico svg{width:15px;height:15px;fill:#666}
.ct-row strong{font-weight:400;font-size:16px;letter-spacing:.3px}
.ct-row p{margin-top:16px;line-height:1.7;color:#444}
.ct-row a{font-size:16px;color:#444}
.ct-row a:hover{color:var(--red)}

.ct-form{margin-top:20px}
.ct-form label{display:block;color:#888;font-size:16px;margin:22px 0 4px}
.ct-form input[type=text],.ct-form input[type=email],.ct-form textarea{width:100%;border:1px solid #ddd;padding:10px 12px;font:inherit;color:#333;background:#fff;transition:border-color .25s,box-shadow .25s}
.ct-form input[type=text],.ct-form input[type=email]{height:45px}
.ct-form textarea{resize:vertical;min-height:200px}
.ct-form input:focus,.ct-form textarea:focus{outline:0;border-color:var(--topbar);box-shadow:0 0 0 3px #3a3f5822}
.ct-send{margin-top:30px;width:200px;height:45px;background:var(--topbar);color:#fff;border:0;font:700 16px 'Roboto',sans-serif;cursor:pointer;transition:.25s}
.ct-send:hover{background:var(--red)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ct-alert{padding:14px 18px;margin:24px 0 0;border-left:4px solid;font-size:15px}
.ct-alert.ok{background:#e9f7ec;border-color:#2e9e4f;color:#1f6b36}
.ct-alert.err{background:#fdecec;border-color:#d33;color:#9a1c1c}

@media(max-width:1000px){.ct-top{grid-template-columns:1fr}.ct-map iframe{height:340px}}
@media(max-width:600px){.ct-send{width:100%}}

/* ===== PRODUCT DETAIL PAGE ===== */
.pdetail-page {
  padding: 40px 22px 80px;
  background: #fff;
}
.pdetail-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;
  align-items: start;
}

/* Gallery & Info */
.pdetail-top {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: start;
}
.main-img-box {
  position: relative;
  border: 1px solid #eaeaea;
  background: #fff;
  padding: 8px;
}
.main-img-box img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.main-img-box .zoom-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px #0002;
  color: #333;
  font-size: 13px;
  cursor: pointer;
}
.pdetail-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.pdetail-thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #ddd;
  cursor: pointer;
  padding: 2px;
}
.pdetail-thumbs img:hover {
  border-color: var(--red);
}

/* Product Info */
.pdetail-name {
  font-family: 'Roboto', sans-serif;
  font-size: 32px;
  color: #2b2b2b;
  font-weight: 500;
  margin-bottom: 4px;
}
.pdetail-sub {
  font-size: 13px;
  color: #888;
  margin-bottom: 16px;
}
.pdetail-stock {
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
}
.pdetail-hindi {
  font-size: 13px;
  color: #2d4373;
  line-height: 1.6;
  margin-bottom: 18px;
}
.pdetail-desc {
  font-size: 13.5px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}
.btn-enquiry {
  display: inline-block;
  background: #3a3f58;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  text-transform: capitalize;
  transition: background 0.25s;
}
.btn-enquiry:hover {
  background: var(--red);
}
.pdetail-meta {
  margin-top: 26px;
  font-size: 13px;
  color: #777;
  border-top: 1px solid #eee;
  padding-top: 12px;
}
.pdetail-meta a {
  color: #999;
  text-transform: uppercase;
}
.pdetail-meta a:hover {
  color: var(--red);
}

/* Related Products */
.related-section {
  margin-top: 60px;
  border-top: 1px solid #eee;
  padding-top: 36px;
}
.related-section h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 24px;
  font-weight: 500;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  text-align: center;
}
.related-img {
  display: block;
  border: 1px solid #eee;
  padding: 6px;
  background: #fff;
}
.related-img img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.related-card h3 {
  font-size: 15px;
  color: #222;
  margin: 12px 0 8px;
  font-weight: 600;
}
.related-btn {
  display: inline-block;
  background: #3a3f58;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  transition: background 0.25s;
}
.related-btn:hover {
  background: var(--red);
}

/* Sidebar Widgets */
.sidebar-widget {
  margin-bottom: 40px;
}
.widget-title {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  color: #333;
  font-weight: 600;
  margin-bottom: 18px;
}
.widget-list {
  list-style: none;
  padding: 0;
}
.widget-list li {
  margin-bottom: 12px;
}
.widget-list a {
  color: #9aa0a6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.widget-list a:hover {
  color: var(--red);
}

.widget-products {
  list-style: none;
  padding: 0;
}
.widget-products li {
  border-bottom: 1px solid #f2f2f2;
  padding: 10px 0;
}
.widget-products a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #777;
  font-size: 13px;
  font-weight: 500;
}
.widget-products a:hover {
  color: var(--red);
}
.widget-products img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid #eee;
}

/* Sidebar Contact Info */
.sidebar-contact {
  font-size: 13px;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sc-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sc-icon {
  width: 26px;
  height: 26px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
}
.sc-row strong {
  display: block;
  color: #333;
  margin-bottom: 3px;
}
.sc-row p {
  color: #666;
  line-height: 1.4;
  margin: 0;
}
.sc-row a {
  color: #555;
}
.sc-row a:hover {
  color: var(--red);
}

/* Responsive */
@media (max-width: 960px) {
  .pdetail-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .pdetail-top {
    grid-template-columns: 1fr;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
}

.main-img-box .zoom-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  color: #333;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s, color 0.2s;
}

.main-img-box .zoom-icon:hover {
  background: var(--red);
  color: #fff;
}