/* =========================================================
   OMPL ROTEC PRODUCT TEMPLATE
   Version: 2.0
   ========================================================= */

:root{
  --rotec-navy:#071a2e;
  --rotec-text:#243142;
  --rotec-muted:#697586;
  --rotec-line:#e4e8ed;
  --rotec-soft:#f6f8f5;
  --rotec-accent:#b89445;
  --rotec-white:#fff;
}

/* Main wrapper */
.ompl-rotec-page{
  width:100%;
  background:#fff;
  color:var(--rotec-text);
  font-family:inherit;
  box-sizing:border-box;
}

.ompl-rotec-page *,
.ompl-rotec-page *::before,
.ompl-rotec-page *::after{
  box-sizing:border-box;
}

/*
 * The theme already renders the breadcrumb and title.
 * This product section therefore starts directly underneath them.
 */
.ompl-rotec-container{
  width:min(1240px, calc(100% - 48px));
  max-width:1240px;
  margin:0 auto;
  padding:60px 0 90px;
}

/* Main 2-column grid */
.ompl-rotec-product-grid{
  display:grid;
  grid-template-columns:minmax(0, 46%) minmax(0, 54%);
  gap:56px;
  align-items:start;
  width:100%;
}

/* Sticky image */
.ompl-rotec-media{
  position:sticky;
  top:80px;
  align-self:start;
  min-width:0;
  width:100%;
}

.ompl-rotec-image-card{
  width:100%;
  background:#fff;
  border:1px solid var(--rotec-line);
  border-radius:24px;
  box-shadow:0 14px 45px rgba(7,26,46,.08);
  padding:34px;
  overflow:hidden;
}

.ompl-rotec-image-card img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  margin:0 auto;
}

.ompl-rotec-no-image{
  min-height:420px;
  display:grid;
  place-items:center;
  background:#f7f8f9;
  color:#8a94a3;
  border-radius:14px;
}

/* Right content */
.ompl-rotec-content{
  width:100%;
  min-width:0;
  text-align:left;
}

.ompl-rotec-category{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  background:#eef3f1;
  color:var(--rotec-navy);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  text-decoration:none;
  margin:0 0 20px;
}

.ompl-rotec-category:hover{
  color:var(--rotec-navy);
}

/* Metadata */
.ompl-rotec-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:0 0 26px;
}

.ompl-rotec-meta>div{
  min-width:0;
  padding:15px 17px;
  border:1px solid var(--rotec-line);
  border-radius:13px;
  background:#fff;
}

.ompl-rotec-meta span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8a94a3;
  margin-bottom:6px;
}

.ompl-rotec-meta strong{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:var(--rotec-navy);
  overflow-wrap:anywhere;
}

/* Description */
.ompl-rotec-short{
  width:100%;
  font-size:16px;
  line-height:1.75;
  color:#5f6b7a;
  margin:0 0 28px;
}

.ompl-rotec-short p{
  margin:0 0 12px;
}

.ompl-rotec-short p:last-child{
  margin-bottom:0;
}

/* Buttons */
.ompl-rotec-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  margin:0 0 32px;
}

.ompl-rotec-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .2s ease;
}

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

.ompl-rotec-btn-primary:hover{
  background:#102d4a;
  color:#fff;
  transform:translateY(-1px);
}

.ompl-rotec-btn-secondary{
  background:#fff;
  border-color:#cfd6de;
  color:var(--rotec-navy);
}

.ompl-rotec-btn-secondary:hover{
  border-color:var(--rotec-navy);
  color:var(--rotec-navy);
}

/* Specification card */
.ompl-rotec-spec-card{
  width:100%;
  border:1px solid var(--rotec-line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 32px rgba(7,26,46,.05);
}

.ompl-rotec-card-head{
  padding:22px 24px;
  background:var(--rotec-soft);
  border-bottom:1px solid var(--rotec-line);
}

.ompl-rotec-card-head span{
  display:block;
  color:#8a94a3;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:11px;
  font-weight:700;
  margin-bottom:7px;
}

.ompl-rotec-card-head h2{
  margin:0;
  color:var(--rotec-navy);
  font-size:23px;
  line-height:1.25;
  font-weight:600;
  text-align:left;
}

.ompl-rotec-spec-body{
  width:100%;
  padding:0;
  overflow-x:auto;
  text-align:left;
}

.ompl-rotec-spec-body table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  margin:0;
  table-layout:fixed;
  text-align:left;
}

.ompl-rotec-spec-body th,
.ompl-rotec-spec-body td{
  padding:14px 18px;
  border-bottom:1px solid #edf0f3;
  text-align:left;
  vertical-align:top;
  font-size:14px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.ompl-rotec-spec-body th{
  width:40%;
  font-weight:700;
  color:var(--rotec-navy);
}

.ompl-rotec-spec-body td{
  color:#596678;
}

.ompl-rotec-spec-body tr:last-child th,
.ompl-rotec-spec-body tr:last-child td{
  border-bottom:0;
}

.ompl-rotec-spec-body p{
  margin:0;
  padding:22px;
  color:var(--rotec-muted);
  line-height:1.7;
}

/* Trust cards */
.ompl-rotec-trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  width:100%;
  margin-top:18px;
}

.ompl-rotec-trust div{
  min-width:0;
  border:1px solid var(--rotec-line);
  border-radius:13px;
  padding:15px;
  background:#fff;
}

.ompl-rotec-trust b{
  display:block;
  color:var(--rotec-accent);
  font-size:11px;
  margin-bottom:8px;
}

.ompl-rotec-trust span{
  display:block;
  color:var(--rotec-navy);
  font-size:12px;
  line-height:1.4;
  font-weight:600;
}

/* Popup */
.ompl-rotec-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
}

.ompl-rotec-modal.is-open{
  display:block;
}

.ompl-rotec-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(3,13,25,.72);
  backdrop-filter:blur(4px);
}

.ompl-rotec-modal-dialog{
  position:relative;
  width:min(850px,calc(100% - 32px));
  max-height:calc(100vh - 60px);
  overflow:auto;
  background:#fff;
  border-radius:20px;
  margin:30px auto;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  z-index:2;
}

.ompl-rotec-modal-close{
  position:absolute;
  right:14px;
  top:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:var(--rotec-navy);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  z-index:3;
}

.ompl-rotec-modal-body{
  width:100%;
  overflow-x:auto;
}

.ompl-rotec-modal-body table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
}

.ompl-rotec-modal-body th,
.ompl-rotec-modal-body td{
  padding:13px 18px;
  border-bottom:1px solid #edf0f3;
  text-align:left;
  vertical-align:top;
  font-size:14px;
}

.ompl-rotec-modal-body th{
  width:40%;
  color:var(--rotec-navy);
}

.ompl-rotec-modal-body td{
  color:#596678;
}

.ompl-rotec-modal-body p{
  padding:20px;
  margin:0;
}

body.ompl-rotec-modal-open{
  overflow:hidden;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width:1024px){

  .ompl-rotec-container{
    width:min(100% - 40px, 900px);
    padding:50px 0 60px;
  }

  .ompl-rotec-product-grid{
    grid-template-columns:1fr;
    gap:36px;
  }

  .ompl-rotec-media{
    position:relative;
    top:auto;
    width:100%;
  }

  .ompl-rotec-image-card{
    padding:28px;
  }

  .ompl-rotec-image-card img{
    max-height:560px;
  }

  .ompl-rotec-content{
    width:100%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:767px){

  .ompl-rotec-container{
    width:calc(100% - 32px);
    padding:36px 0 45px;
  }

  .ompl-rotec-product-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .ompl-rotec-media{
    width:100%;
  }

  .ompl-rotec-image-card{
    padding:16px;
    border-radius:16px;
  }

  .ompl-rotec-image-card img{
    width:100%;
    max-height:none;
  }

  .ompl-rotec-category{
    font-size:10px;
    margin-bottom:13px;
  }

  .ompl-rotec-meta{
    grid-template-columns:1fr;
    gap:9px;
    margin-bottom:20px;
  }

  .ompl-rotec-short{
    font-size:15px;
    line-height:1.7;
    margin-bottom:22px;
  }

  .ompl-rotec-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:24px;
  }

  .ompl-rotec-btn{
    width:100%;
    min-height:50px;
  }

  .ompl-rotec-card-head{
    padding:18px;
  }

  .ompl-rotec-card-head h2{
    font-size:19px;
  }

  .ompl-rotec-spec-body th,
  .ompl-rotec-spec-body td{
    padding:11px 10px;
    font-size:13px;
  }

  .ompl-rotec-spec-body th{
    width:42%;
  }

  .ompl-rotec-trust{
    grid-template-columns:1fr;
  }

  .ompl-rotec-modal-dialog{
    width:calc(100% - 20px);
    max-height:calc(100vh - 20px);
    margin:10px auto;
    border-radius:16px;
  }

  .ompl-rotec-modal-body th,
  .ompl-rotec-modal-body td{
    padding:10px;
    font-size:13px;
  }
}

/* Very small phones */
@media (max-width:420px){

  .ompl-rotec-container{
    width:calc(100% - 24px);
    padding-top:28px;
  }

  .ompl-rotec-image-card{
    padding:12px;
  }

  .ompl-rotec-card-head{
    padding:16px;
  }

  .ompl-rotec-spec-body table,
  .ompl-rotec-modal-body table{
    min-width:480px;
  }
}