/* =========================================================
   PREMIUM PROFESSIONAL PRODUCT PAGE STYLING
   (Adobe / Shutterstock inspired)
   ========================================================= */

/* ---------- VARIABLES ---------- */
:root {
  --wrap: 1250px;
  --bg: #ffffff;
  --dark: #0f172a;
  --text: #475569;
  --muted: #64748b;
  --border: #e5e7eb;
  --radius: 16px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.06);
  --shadow-strong: 0 12px 28px rgba(0,0,0,0.08);
  --container-pad: 20px;
}

/* ---------- RESET ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- GLOBAL IMAGE ---------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- MAIN GRID ---------- */
.main {
  max-width: var(--wrap);
  margin: 48px auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 48px;
  align-items: start;
}

/* =========================================================
   LEFT COLUMN
   ========================================================= */

.left-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 820px;
}

/* PRODUCT TITLE */
.product-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dark);
  letter-spacing: -0.2px;
}

/* IMAGE CARD */
.image-wrap {
  background: linear-gradient(180deg, #fafafa, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

#mainImage {
  max-height: 520px;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.image-wrap:hover #mainImage {
  transform: scale(1.03);
}

/* WATERMARK */
.image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='160'><style>text{font-family:Montserrat;font-size:28px;fill:rgba(255,255,255,0.14);font-weight:700}</style><text x='0' y='42' transform='rotate(-20 0 0)'>SignoraStock</text></svg>");
  background-repeat: repeat;
  opacity: 0.6;
}

/* DESCRIPTION */
.product-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  max-width: 760px;
}

/* =========================================================
   RIGHT COLUMN (BUY PANEL)
   ========================================================= */

.right-col {
  align-self: flex-start;
}

.buy-panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-strong);
  position: sticky;
  top: 90px;
}

/* PANEL HEADINGS */
.buy-panel h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 26px 0 14px;
  color: var(--dark);
}

/* LISTS */
.buy-panel ul {
  list-style: none;
}

.buy-panel ul li {
  font-size: 15px;
  padding: 10px 0;
  color: #334155;
  border-bottom: 1px solid var(--border);
}

.buy-panel ul li:last-child {
  border-bottom: none;
}

/* PRICE */
.price {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #4a9c48;
  margin: 10px 0 6px;
}

.price small {
  display: block;
  font-size: 13px;
  color: #1d1c1f;
  margin-top: 4px;
  font-weight: 500;
}

/* BUTTONS */
.download-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.panel-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

/* PRIMARY BUTTON */
.panel-btn.primary {
  background: #E96729;
  color: #ffffff;
  border: none;
}

.panel-btn.primary:hover {
  transform: translateY(-1px);
  background-color: #000000;
}

/* OUTLINE BUTTON */
.panel-btn.outline {
  background:#4A9C48;
  border: 1px solid var(--border);
  color: white;
}

.panel-btn.outline:hover {
  background: #000000;
}
.pricing-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.price-option {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  background: #fafafa;
}

.price-option:hover {
  border-color: #000;
}

.complete-pack {
  border: 2px solid #000;
  padding: 14px;
  border-radius: 8px;
  margin: 18px 0;
  background: #fffdf5;
}

.complete-pack h3 {
  margin-top: 0;
}

.best-value {
  font-weight: bold;
  font-size: 14px;
}
.value-copy,
.value-copy-buy {
  margin: 10px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #222;
}

.value-copy p,
.value-copy-buy p {
  margin: 6px 0;
}

/* ====== SPEC TABLE STYLES ====== */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #2b2b2b;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.spec-table tr {
  border-bottom: 1px solid #f0f0f0;
}

.spec-table tr:last-child {
  border-bottom: none;
}

.spec-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

.spec-table td:first-child {
  width: 35%;
  font-weight: 700;
  background: #f9fafb;
}

.spec-table td:last-child {
  width: 65%;
}

.spec-table tr:hover td {
  background: #fbfbfb;
}

.spec-table strong {
  font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
  .spec-table td {
    padding: 12px 10px;
    font-size: 14px;
  }
}
/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {
  .main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .buy-panel {
    position: static;
  }

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

/* ---------- LIGHTBOX (responsive) ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(7,10,15,0.92);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;
}
.lightbox-inner{width:100%;max-width:900px;max-height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox-inner img{width:100%;height:auto;max-height:90vh;object-fit:contain;border-radius:10px}
.lightbox-close{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;z-index:10000
}
.lightbox-close:hover{background:var(--primary);color:#fff}
/* ---------- RELATED BLOGS & FAQ ---------- */
.related-blogs{margin-top:50px;padding:25px 0;background:#f9f9f9;border-top:1px solid #fceedb}
.related-blogs h2{font-size:26px;margin-bottom:20px;text-align:center;color:#E96729}
.blog-titles{display:flex;flex-direction:column;gap:15px;max-width:800px;margin:0 auto}
.blog-link{display:block;font-size:18px;padding:12px 15px;background:#fff;border-left:4px solid #fceedb;border-radius:5px;color:#333;text-decoration:none;transition:all .25s}
.blog-link:hover{background:#fceedb;padding-left:20px;color:#191919}

.faq{margin-top:50px;padding:30px 20px;background:#f9f9f9;border-top:2px solid #fceedb;border-radius:8px;max-width:900px;margin-left:auto;margin-right:auto}
.faq h2{font-size:22px;color:#E96729;text-align:center;margin-bottom:25px}
.faq-item{background:#fff;padding:15px 20px;margin-bottom:15px;border-left:4px solid #fceedb;border-radius:5px;transition:all .2s}
.faq-item:hover{background:#fceedb;border-left-color:#fceedb}
.faq-item h3{font-size:18px;margin-bottom:8px;color:#333}
.faq-item p{font-size:15px;line-height:1.6;color:#555}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
/* tablets */
@media(max-width:1024px){
  .main{grid-template-columns:1fr 320px;padding:0 18px;gap:28px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* stacked mobile */
@media(max-width:992px){
  .main{grid-template-columns:1fr;gap:24px;margin:24px auto}
  .nav{display:none}
  .mobile-menu-icon{display:block;margin-left:auto}
  .search-box{display:none}
  .container{padding:12px}
  .image-wrap{padding:14px;max-width:100%}
  .thumbs img{width:72px;height:54px}
  .buy-panel{width:100%}
  .lightbox-inner{max-width:95%}
  .footer-grid{grid-template-columns:1fr}
}

/* small phones */
@media(max-width:600px){
  .product-title{font-size:22px}
  .product-sub{font-size:15px}
  .price{font-size:26px}
  .thumbs{gap:8px}
  .thumbs img{width:64px;height:48px}
  .mobile-nav a{padding:12px 14px}
  .container{padding:10px}
  .image-wrap{padding:10px}
}

/* tiny screens */
@media(max-width:380px){
  .product-title{font-size:20px}
  .product-sub{font-size:14px}
  .thumbs img{width:56px;height:42px}
  .footer-input{font-size:14px}
}

/* ---------- Accessibility focus ---------- */
a:focus,button:focus,input:focus{outline:3px solid rgba(25,118,210,0.15);outline-offset:2px}