/* PRODUCT PAGE STYLES */


.product-features{
    padding:90px 0;
    background:#fff;
}

.product-image{
    border:1px solid #e7e7e7;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.product-image img{
    width:100%;
    display:block;
}

.feature-header{
    margin-bottom:35px;
}

.model-no{

    display:inline-block;
    padding:8px 20px;
    background:#111;
    color:#BDAD7B;
    font-size:14px;
    letter-spacing:1px;
    border-radius:30px;
    margin-bottom:15px;

}

.feature-header h2{

    font-size:40px;
    font-weight:700;
    margin-bottom:12px;
    color:#111;

}

.feature-header p{

    color:#666;
    font-size:16px;
    line-height:28px;

}

.feature-box{

    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:25px;

}

.feature-icon{

    width:72px;
    height:72px;
    min-width:72px;
    border:2px solid #BDAD7B;
    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    color: #BD6E1C;
    font-size:28px;

    transition:.4s;

}

.feature-icon:hover svg{

    
    color:#fff;

}


.feature-box:hover .feature-icon{

    background: #ffe9e1;
    color:#fff;

}

.feature-content h5{

    font-size:22px;
    margin-bottom:8px;
    color:#111;

}

.feature-content p{

    margin:0;
    color:#666;
    line-height:28px;

}

@media(max-width:991px){

.product-image{

    margin-bottom:40px;

}

.feature-header h2{

    font-size:32px;

}

.feature-icon{

    width:60px;
    height:60px;
    min-width:60px;
    font-size:22px;

}

.feature-content h5{

    font-size:20px;

}

}







.feature-heading{
    margin-bottom:40px;
}

.section-tag{
    position:relative;
    display:inline-block;
    color:var(--accent);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:20px;
    padding-bottom:12px;
}

.section-tag::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    border-radius:30px;

}

.feature-heading h2{
    font-size:42px;
    font-weight:700;
    color:#111;
    margin-bottom:15px;
}

.feature-heading p{
    font-size:16px;
    line-height:28px;
    color:#666;
    max-width:650px;
}

/* end */



.new15{
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
line-height: 1.12;
  letter-spacing: -.01em;
}




/* Home page New section */
.industries-section{
    position:relative;
    padding:70px 0;
    background:url("../images/industries-bg.jpg") center center/cover no-repeat;
    overflow:hidden;
}

.industries-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(15,15,18,.82);
}

.industries-section .container{
    position:relative;
    z-index:2;
}

/* Heading */

.section-title{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
}

.section-title::before,
.section-title::after{
    content:'';
    width:70px;
    height:2px;
    background:#BDAD7B;
}

.section-title .section-tag{
    color:#fff;
    font-size:34px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* Boxes */

.industry-box{
    text-align:center;
    transition:.35s;
}

.industry-box i{
    font-size:48px;
    color:#BDAD7B;
    margin-bottom:18px;
    transition:.35s;
}

.industry-box h6{
     
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    margin-top:15px;
    letter-spacing:.8px;
}

.industry-box:hover{
    transform:translateY(-8px);
}

.industry-box:hover i{
    color:#fff;
    transform:scale(1.1);
}

/* Responsive */

@media(max-width:767px){

.section-title .section-tag{
    font-size:24px;
}

.section-title::before,
.section-title::after{
    width:40px;
}

.industry-box i{
    font-size:38px;
}

.industry-box h6{
    font-size:13px;
}

}


.new16{
  
font-size: 25px;
  font-weight: 600;
}



/* Product section 2 */

/* ==========================================================================
   DOOR DETAILS & SPECIFICATIONS — section styles
   Self-contained: namespaced with a `dd-` / `spec-` / `door-` prefix so it
   can be dropped alongside Bootstrap 5.3.3 + Font Awesome 6 without
   colliding with host-page classes.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --dd-bg:            #0d0c0a;
  --dd-card:          #17140f;
  --dd-border:        rgba(201, 151, 63, 0.22);
  --dd-border-strong: rgba(201, 151, 63, 0.55);

  --dd-gold:          #c9973f;
  --dd-gold-light:    #ecc37e;
  --dd-gold-dark:     #8f6a26;
  --dd-gold-gradient: linear-gradient(135deg, var(--dd-gold-light) 0%, var(--dd-gold) 50%, var(--dd-gold-dark) 100%);

  --dd-white:         #ffffff;
  --dd-gray:          #9d968c;
  --dd-gray-light:    #cfc8bd;

  --dd-font-display:  'Playfair Display', Georgia, serif;
  --dd-font-body:     'Montserrat', 'Segoe UI', sans-serif;

  --dd-radius:        14px;
  --dd-ease:          cubic-bezier(.22, .8, .32, 1);
  --dd-shadow:        0 14px 34px -16px rgba(0, 0, 0, 0.75);
}

/* ---------- Base ---------- */
.dd-section *{ box-sizing: border-box; }

.dd-section{
  background: var(--dd-bg);
  color: var(--dd-white);
  font-family: var(--dd-font-body);
  padding: 90px 0;
  overflow: hidden;
}

.dd-container{ max-width: 1360px; }

.dd-eyebrow{
  font-family: var(--dd-font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dd-gold);
  margin: 0 0 10px;
}

.dd-title{
  font-family: var(--dd-font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--dd-white);
  margin: 0 0 26px;
}

.dd-col{ padding: 0 22px; }

/* ==========================================================================
   Specifications list
   ========================================================================== */
.spec-list{
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--dd-card);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
}

.spec-row{
  display: grid;
  grid-template-columns: 26px minmax(120px, 170px) 14px 1fr;
  align-items: center;
  gap: 4px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background .3s var(--dd-ease);
}
.spec-row:last-child{ border-bottom: none; }
.spec-row:hover{ background: rgba(201, 151, 63, 0.06); }

.spec-icon{ color: var(--dd-gold); font-size: .82rem; text-align: center; }
.spec-label{ font-size: .86rem; font-weight: 500; color: var(--dd-gray-light); }
.spec-sep{ color: var(--dd-gold-dark); text-align: center; }
.spec-value{ font-size: .86rem; font-weight: 600; color: var(--dd-white); }

/* ==========================================================================
   Door Details gallery
   ========================================================================== */
.dd-gallery{ display: flex; flex-direction: column; gap: 14px; }

.img-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--dd-radius);
  border: 1px solid var(--dd-border);
  background: var(--dd-card);
  box-shadow: var(--dd-shadow);
}


.dd-gallery .img-frame img{
  width: auto !important;
  height: auto !important;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--dd-ease);
}
.img-frame:hover img{ transform: scale(1.08); }

.fallback-icon{ display: none; font-size: 1.8rem; color: rgba(201, 151, 63, 0.4); }
.img-frame.is-fallback{
  display: flex; align-items: center; justify-content: center; min-height: 140px;
  background: linear-gradient(135deg, var(--dd-card), var(--dd-bg));
}
.img-frame.is-fallback img{ display: none; }
.img-frame.is-fallback .fallback-icon{ display: block; }

.dd-gallery-main{ aspect-ratio: 22 / 7;}
.dd-gallery-sub{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dd-gallery-sub .img-frame{ aspect-ratio: 1 / 1; }

/* ==========================================================================
   Center animated divider + door icon
   ========================================================================== */
.dd-col--divider{ display: flex; align-items: stretch; justify-content: center; }

.dd-divider{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 100%;
  padding: 40px 0;
}

.dd-divider-line{ width: 1px; flex-grow: 1; min-height: 40px; }
.dd-divider-line--a{ background: linear-gradient(180deg, transparent, var(--dd-gold-dark)); }
.dd-divider-line--b{ background: linear-gradient(180deg, var(--dd-gold-dark), transparent); }

/* --- door icon wrapper --- */
.door-anim-wrap{
  position: relative;
  flex-shrink: 0;
  width: 96px; height: 96px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  perspective: 260px;
  /* single source of truth for timing/intensity — hover overrides these
     variables only, so the running animation is never paused */
  --door-cycle: 4.6s;
  --door-open-angle: -30deg;
  --glow-peak-opacity: .95;
  --glow-peak-scale: 1.14;
}

.door-glow{
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 151, 63, .45) 0%, transparent 70%);
  filter: blur(8px);
  opacity: .5;
  animation: doorGlowPulse var(--door-cycle) ease-in-out infinite;
  will-change: opacity, transform;
}

.door-hex{ position: absolute; inset: 0; }
.door-hex-outer,
.door-hex-inner{
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.door-hex-outer{ background: var(--dd-gold-gradient); }
.door-hex-inner{ inset: 3px; background: #0d0b09; }

/* door frame (static outline) */
.door-frame{
  position: relative;
  width: 34px; height: 50px;
  border: 1.5px solid var(--dd-gold-dark);
  border-radius: 2px;
  transform-style: preserve-3d;
}

/* door panel — the part that swings. transform-origin sits on the
   hinge edge (left) so rotateY reads as a door opening, not spinning.
   Runs forever via `infinite`; only `transform` is animated so the
   browser can keep this on the compositor. */
.door-panel{
  position: absolute;
  inset: 2px;
  left: 2px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--dd-gold-light), var(--dd-gold) 60%, var(--dd-gold-dark));
  border-radius: 1px;
  transform-origin: left center;
  transform: rotateY(0deg);
  animation: doorSwing var(--door-cycle) ease-in-out infinite;
  will-change: transform;
  box-shadow: 2px 0 6px rgba(0, 0, 0, .35);
}

.door-vision{
  position: absolute;
  top: 14%; left: 50%;
  width: 34%; height: 30%;
  transform: translateX(-50%);
  background: rgba(13, 11, 9, .55);
  border: .5px solid rgba(13, 11, 9, .6);
  border-radius: 1px;
}

.door-handle{
  position: absolute;
  right: 12%; top: 50%;
  width: 3px; height: 12px;
  background: #0d0b09;
  border-radius: 1px;
  transform: translateY(-50%);
}

/* light sweep — plays once per swing cycle, timed to the open phase */
.door-sweep{
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  opacity: 0;
  animation: doorSweep var(--door-cycle) ease-in-out infinite;
  will-change: transform, opacity;
}

/* soft cast shadow that appears while the door is open */
.door-shadow{
  position: absolute;
  left: 50%; bottom: -10px;
  width: 30px; height: 8px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 75%);
  transform: translateX(-50%) scaleX(.4);
  opacity: 0;
  animation: doorShadowPulse var(--door-cycle) ease-in-out infinite;
  will-change: opacity, transform;
}

/* ---------------------------------------------------------------------
   Cycle timeline — 4.6s total, identical percentages shared by every
   keyframe below so the swing, glow, shadow and sweep stay in lockstep:
     0%       door closed
     0 → 15%  opens smoothly            (~0.7s)
     15 → 30% holds open                (~0.7s)
     30 → 46% closes smoothly           (~0.7s)
     46 → 100% holds closed             (~2.5s)
   Nothing here ever sets animation-play-state to paused, so the loop
   truly runs forever, unattended. Hover/focus only raise the
   --door-open-angle / --glow-peak-* variables on the wrapper above —
   the already-running animation simply swings wider next time it
   reaches that point in the cycle, so it can never look "stopped".
--------------------------------------------------------------------- */
@keyframes doorSwing{
  0%   { transform: rotateY(0deg); }
  15%  { transform: rotateY(var(--door-open-angle)); }
  30%  { transform: rotateY(var(--door-open-angle)); }
  46%  { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes doorGlowPulse{
  0%   { opacity: .5; transform: scale(1); }
  15%  { opacity: var(--glow-peak-opacity); transform: scale(var(--glow-peak-scale)); }
  30%  { opacity: var(--glow-peak-opacity); transform: scale(var(--glow-peak-scale)); }
  46%  { opacity: .5; transform: scale(1); }
  100% { opacity: .5; transform: scale(1); }
}

@keyframes doorShadowPulse{
  0%   { opacity: 0;  transform: translateX(-50%) scaleX(.4); }
  15%  { opacity: .8; transform: translateX(-50%) scaleX(1); }
  30%  { opacity: .8; transform: translateX(-50%) scaleX(1); }
  46%  { opacity: 0;  transform: translateX(-50%) scaleX(.4); }
  100% { opacity: 0;  transform: translateX(-50%) scaleX(.4); }
}

@keyframes doorSweep{
  0%, 14%    { transform: translateX(0);    opacity: 0; }
  20%        { opacity: .85; }
  29%, 100%  { transform: translateX(340%); opacity: 0; }
}

/* hover / keyboard focus — enhances the running loop, never stops it */
.door-anim-wrap:hover,
.door-anim-wrap:focus-visible{
  --door-open-angle: -42deg;
  --glow-peak-opacity: 1;
  --glow-peak-scale: 1.3;
}
.door-anim-wrap:focus-visible{ outline: 2px solid var(--dd-gold); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce){
  .door-panel, .door-glow, .door-shadow, .door-sweep{ animation: none; }
}

/* ==========================================================================
   Feature strip
   ========================================================================== */
.dd-features{
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.dd-feature{
  padding: 10px 26px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.dd-feature:first-child{ border-left: none; }

.dd-feature i{ font-size: 1.5rem; color: var(--dd-gold); margin-bottom: 14px; display: block; }
.dd-feature h3{
  font-family: var(--dd-font-body);
  font-weight: 700;
  font-size: .96rem;
  color: var(--dd-white);
  margin: 0 0 6px;
}
.dd-feature p{ font-size: .8rem; line-height: 1.55; color: var(--dd-gray); margin: 0; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition: opacity .8s var(--dd-ease), transform .8s var(--dd-ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0) scale(1); }

.spec-list .spec-row:nth-child(1){ transition-delay: .03s; }
.spec-list .spec-row:nth-child(2){ transition-delay: .07s; }
.spec-list .spec-row:nth-child(3){ transition-delay: .11s; }
.spec-list .spec-row:nth-child(4){ transition-delay: .15s; }
.spec-list .spec-row:nth-child(5){ transition-delay: .19s; }
.spec-list .spec-row:nth-child(6){ transition-delay: .23s; }
.spec-list .spec-row:nth-child(7){ transition-delay: .27s; }
.spec-list .spec-row:nth-child(8){ transition-delay: .31s; }
.spec-list .spec-row:nth-child(9){ transition-delay: .35s; }
.spec-list .spec-row:nth-child(10){ transition-delay: .39s; }
.spec-list .spec-row:nth-child(11){ transition-delay: .43s; }
.spec-list .spec-row:nth-child(12){ transition-delay: .47s; }

.dd-features [data-reveal]:nth-child(1){ transition-delay: .05s; }
.dd-features [data-reveal]:nth-child(2){ transition-delay: .13s; }
.dd-features [data-reveal]:nth-child(3){ transition-delay: .21s; }
.dd-features [data-reveal]:nth-child(4){ transition-delay: .29s; }
.dd-features [data-reveal]:nth-child(5){ transition-delay: .37s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   Desktop 1920+ / Laptop / Tablet / Mobile
   ========================================================================== */

@media (min-width: 1600px){
  .dd-container{ max-width: 1500px; }
  .dd-title{ font-size: 2.5rem; }
}

@media (max-width: 1199.98px){
  .door-anim-wrap{ width: 84px; height: 84px; }
  .door-frame{ width: 30px; height: 44px; }
}

/* Tablet & below: stack columns, divider flips to a horizontal break */
@media (max-width: 991.98px){
  .dd-section{ padding: 70px 0; }
  .dd-col{ padding: 0 4px; margin-bottom: 40px; }
  .dd-col--divider{ margin-bottom: 40px; }

  .dd-divider{
    flex-direction: row;
    min-height: 0;
    padding: 0;
    gap: 20px;
  }
  .dd-divider-line{ width: auto; flex-grow: 1; height: 1px; min-height: 0; }
  .dd-divider-line--a{ background: linear-gradient(90deg, transparent, var(--dd-gold-dark)); }
  .dd-divider-line--b{ background: linear-gradient(90deg, var(--dd-gold-dark), transparent); }
}

@media (max-width: 767.98px){
  .dd-section{ padding: 56px 0; }
  .dd-title{ font-size: 1.7rem; margin-bottom: 20px; }

  .spec-row{
    grid-template-columns: 22px minmax(100px, auto) 10px 1fr;
    padding: 10px 14px;
  }
  .spec-label, .spec-value{ font-size: .8rem; }

  .dd-gallery-sub{ gap: 10px; }

  .door-anim-wrap{ width: 68px; height: 68px; }
  .door-frame{ width: 24px; height: 36px; }

  .dd-feature{ padding: 16px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .dd-feature:nth-child(1), .dd-feature:nth-child(2){ border-top: none; }
  .dd-feature i{ font-size: 1.3rem; margin-bottom: 10px; }
  .dd-feature h3{ font-size: .88rem; }
  .dd-feature p{ font-size: .76rem; }
}

@media (max-width: 375px){
  .spec-row{ grid-template-columns: 20px 1fr; grid-template-areas: "icon label" "val val"; row-gap: 2px; }
  .spec-icon{ grid-area: icon; }
  .spec-label{ grid-area: label; }
  .spec-sep{ display: none; }
  .spec-value{ grid-area: val; padding-left: 30px; color: var(--dd-gray-light); font-weight: 500; }
  .dd-gallery-sub{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
}




/* PRODUCT PAGE NEW SECTION */



.category-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.category-card{ aspect-ratio: 3 / 4; }
.category-card .bento-body p{ max-width: none; }

.category-tags{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px;
}
.category-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-hairline);
  padding: 5px 10px; background: rgba(17,17,17,.5); backdrop-filter: blur(4px);
}
.category-tag i{ font-size: .68rem; }

/* ---------- Comparison table ---------- */
.compare-panel{ border: 1px solid var(--hairline); background: var(--secondary); overflow-x: auto; }
.compare-table{ width: 100%; border-collapse: collapse; min-width: 520px; }
.compare-table tr{ border-bottom: 1px solid var(--hairline); }
.compare-table tr:last-child{ border-bottom: none; }
.compare-table thead tr{ border-bottom: 1px solid var(--accent-hairline); }
.compare-table th, .compare-table td{ padding: 18px 24px; text-align: center; font-weight: 400; }
.compare-table thead th{
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.compare-table thead th i{ margin-right: 8px; }
.compare-table tbody th.compare-row-label{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); text-align: left; white-space: nowrap;
}
.compare-table td{ font-size: .92rem; color: var(--white); }
.compare-row-label{ text-align: left; }
.compare-table tbody tr:hover{ background: var(--accent-tint-08); }

/* ---------- CTA subtext (used alongside .cta-inner h2) ---------- */
.cta-sub{ max-width: 560px; margin: 0 auto 32px; font-size: 1rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px){
  .mega-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px){
  .main-nav{ display:none; }
  .quick-contacts{ display:none; }
  .mobile-toggle{ display:flex; }
  .about-media{ order:-1; max-width:460px; margin:0 auto; }
  .bento-grid{ grid-template-columns: repeat(6,1fr); grid-auto-rows:110px; }
  .item-1{ grid-column: span 6; grid-row: span 4; }
  .item-2{ grid-column: span 6; grid-row: span 4; }
  .item-3, .item-4, .item-5{ grid-column: span 2; grid-row: span 4; }
  .process-track{ grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
  .process-line{ display:none; }
  .applications-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 860px){
  .header-inner{ padding:0 20px; }
  .brand-logo{ height: 36px; }
  .hero-spec-card{ display:none; }
  .slide-content{ padding: 0 20px; max-width:100%; }
  .scroll-cue{ display:none; }
  .check-list{ grid-template-columns: 1fr; }
  .container-xl{ padding: 0 20px; }
  .footer-newsletter-strip{ padding: 30px 24px; }
  .newsletter-form{ width:100%; }
}

@media (max-width: 640px){
  :root{ --header-h: 76px; }
  h2{ font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .about{ padding: 90px 0 70px; }
  .categories, .why-choose, .applications, .process, .testimonials{ padding: 80px 0; }
  .bento-grid{ grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .item-1, .item-2, .item-3, .item-4, .item-5{ grid-column: 1; grid-row: span 1; }
  .applications-grid{ grid-template-columns: 1fr; }
  .process-track{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .cta-inner{ padding: 60px 24px; }
  .about-ghost{ display:none; }
  .why-badge{ position:static; margin-top:20px; }
  .newsletter-note{ text-align:left; }
  .mega-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Product page responsive ---------- */
@media (max-width: 1080px){
  .variant-grid{ grid-template-columns: repeat(2, 1fr); }
  .app-photo-grid{ grid-template-columns: repeat(2, 1fr); }
  .related-grid{ grid-template-columns: repeat(2, 1fr); }
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .category-card:last-child{ grid-column: span 2; aspect-ratio: 16/9; }
  .process-track.cols-6{ grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px){
  .content-section{ padding: 72px 0; }
  .product-hero{ height:auto; min-height:520px; }
  .specs-table th, .specs-table td{ padding: 16px 18px; }
  .specs-table th{ width:44%; }
  .compare-table th, .compare-table td{ padding: 14px 16px; }
}

@media (max-width: 640px){
  .variant-grid{ grid-template-columns: 1fr; }
  .app-photo-grid{ grid-template-columns: 1fr 1fr; }
  .app-photo-card{ aspect-ratio: 1/1; }
  .related-grid{ grid-template-columns: 1fr; }
  .category-grid{ grid-template-columns: 1fr; }
  .category-card, .category-card:last-child{ grid-column: 1; aspect-ratio: 4/5; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-item.span-wide{ grid-column: span 2; }
  .process-track.cols-6{ grid-template-columns: 1fr; }
  .process-track.cols-6 .process-line{ display:none; }
  .faq-q{ font-size:.96rem; }
  .faq-inner p{ padding-left:4px; }
  .footer-cta-strip{ padding: 24px; justify-content:flex-start; }
  .ph-cta{ flex-direction:column; align-items:flex-start; }
}