.prd_des_center
{
    max-width: 600px;
}

.prd_dtl_head
{
    position: static;
        display: block;
        left: auto;
        margin: 8px 0 12px -6px;
        padding: 0 10px;
        font-size: 21px;
        text-align: left;
        padding-bottom: 0px;
        font-weight: bold;
}

.pimg_view.image img{
  height:330px;
   width:350px;
}

@media (min-width:1024px){

    .prd_des_center
    {
        max-width: 600px;
        margin-left:10px;
    }
}


@media (max-width:768px){
    .prd_des_center
    {
        max-width: 500px;
    }

    .pimg_view {
        /*background-color: #add85f4f;*/
        
        width:370px;
        height: 350px;
    }

    .prd_dtl_head
    {
         position: static;
        display: block;
        left: auto;
        margin: 8px 0 12px -6px;
        padding: 0 10px;
        font-size: 18px;
        text-align: left;
        padding-bottom: 0px;
        font-weight: bold;
    }
}

@media (max-width:600px){
    .prd_des_center
    {
        max-width: 500px;
    }

    .pimg_view {
       
        width:250px;
        height: 250px;
    }

    .pimg_view.image img{
    height:235px;
    width:250px;
    }

     .prd_dtl_head{
    position: static;        /* remove absolute */
    display: block;
    left: auto;
    margin: 8px 0 12px -6px;    /* top right bottom left */
    padding: 0 10px;
    font-size: 20px;
    text-align: left;
    padding-bottom:0px;
  }
}

@media (max-width: 768px){

  .div2_next > ul{
    display: block;          /* normal flow */
    align-items: unset;
    justify-content: unset;
  }

}

/*Product Sort */
/* SORT wrapper – compact & clean */
.filter-sort-wrapper{
    display:flex;
    align-items:center;
    gap:6px;

    padding:4px 6px;        /* 👈 height reduce */
    margin:6px 0 8px 0;     /* 👈 bottom space kammi */

    background:#d8e9c8;    /* 👈 light green (filter match) */
    border:1px solid #b7d8a8;
    border-radius:6px;

    font-size:13px;
}

/* sort icon */
.filter-sort-icon{
    font-size:14px;
    color:#2e7d32;
}

/* Sort by text – BLACK */
.filter-sort-label{
    color:rgb(2, 74, 2);             /* 👈 black */
    font-weight:600;
    white-space:nowrap;
}

/* dropdown */
.filter-sort-select{
    margin-left:auto;
    min-width:160px;

    padding:2px 6px;        /* 👈 height kammi */
    border-radius:5px;
    border:1px solid #a5c88f;

    background:#fff;
    color:#1b5e20;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.filter-sort-select:focus{
    outline:none;
    border-color:#7cb342;
}

/* hide checkbox */
.about-toggle {
  display: none;
}

/* about section collapsed */
.about-wrapper {
  max-height: 190px;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* expanded */
.about-toggle:checked + .about-wrapper {
  max-height: 190px;
  overflow-y: auto;
}

/* show more container */
.showmore-wrap{
text-align:right;
margin-top:8px;
}

.showmore-btn{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:600;
color:#1f6b1f; /* dark green */
cursor:pointer;
}

/* icon */
.showmore-btn i{
font-size:18px;
}

/* hide show less initially */
.txt-less{
display:none;
}

/* hover color */
.showmore-btn:hover{
color:#0066cc;
}

/* underline only text */
.showmore-btn:hover .txt-more,
.showmore-btn:hover .txt-less{
text-decoration:underline;
}
/* toggle text */
.txt-less {
  display: none;
}

.about-toggle:checked ~ .showmore-wrap .txt-more {
  display: none;
}

.about-toggle:checked ~ .showmore-wrap .txt-less {
  display: inline;
}

/* icon rotate */
.showmore-btn i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.about-toggle:checked ~ .showmore-wrap i {
  transform: rotate(180deg);
}

/*Policy Detils*/
.policy-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;              /* 👈 left & right gap increase */
  margin-top: 10px;
  text-align: center;
}

.policy-item {
  position: relative;
  width: 32%;
  cursor: pointer;
}

.policy-text {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

/* icon colors */
.truck { color: #1f7a1f; }
.return { color: #d32f2f; }
.secure { color: #1f7a1f; }

/* tooltip container */
.tooltip-box {
  position: absolute;
  bottom: 145%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);

  width: 220px;
  padding: 12px 14px;

  background: linear-gradient(135deg, #ffffff, #f3ffe8);
  border-left: 4px solid #2f6b1f;
  border-radius: 10px;

  box-shadow:
    0 8px 25px rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.04);

  opacity: 0;
  visibility: hidden;

  transition: all 0.3s ease;
  z-index: 30;
}

/* tooltip arrow */
.tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

/* title */
.tip-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #2f6b1f;
  margin-bottom: 4px;
}

/* description */
.tooltip-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #444;
}

/* hover animation */
.tooltip:hover .tooltip-box {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}


/*Purchase Policy*/

/* ===== SCOPE START ===== */
.purchase-policy-scope .policy-card-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
}

.purchase-policy-scope .policy-card {
  position: relative;
  width: 130px;
  padding: 16px 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f3ffd9, #e2f6b5);
  border: 2px solid #b7dc87;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.purchase-policy-scope .policy-card:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}

.purchase-policy-scope .policy-icon i {
  font-size: 26px;
  color: #1f7a1f;
}

.purchase-policy-scope .policy-title {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f4d15;
}

/* tooltip */
.purchase-policy-scope .policy-tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 220px;
  padding: 12px 14px;
  background: #ffffff;
  border-left: 4px solid #2f6b1f;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 50;
}

.purchase-policy-scope .policy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

.purchase-policy-scope .policy-tooltip strong {
  display: block;
  font-size: 13px;
  color: #2f6b1f;
  margin-bottom: 4px;
}

.purchase-policy-scope .policy-tooltip p {
  margin: 0;
  font-size: 12px;
  color: #444;
  line-height: 1.4;
}

/* show tooltip */
.purchase-policy-scope .tooltip:hover .policy-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
/* ===== SCOPE END ===== */


.right-panel-green {
  background: linear-gradient(
    120deg,
    #f7ffea,
    #eef9d9,
    #f4ffe5
  );
  background-size: 200% 200%;
  animation: softGreen 18s ease-in-out infinite;

  border-radius: 20px;
  padding: 20px;
  border: 1px solid #d8eac0;
}

@keyframes softGreen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/*Mobile View*/

/* =========================
   MOBILE TOOLTIP ADJUSTMENT
========================= */
@media (max-width: 768px) {

  /* TOP POLICY ICON TOOLTIPS */
  .tooltip-box {
    width: 90vw;                 /* 👈 mobile full width feel */
    max-width: 260px;            /* 👈 control size */
    padding: 8px 10px;           /* 👈 reduce padding */
    font-size: 11px;

    left: 50%;
    transform: translateX(-50%) scale(1);
    bottom: 130%;                /* 👈 little space */
  }

  .tooltip-box p {
    font-size: 11px;
    line-height: 1.35;
  }

  .tip-title {
    font-size: 12px;
  }

  /* PURCHASE / RETURN POLICY TOOLTIP */
  .purchase-policy-scope .policy-tooltip {
    width: 92%;
    max-width: 280px;
    padding: 10px 12px;
    font-size: 11px;

    left: 50%;
    transform: translateX(-50%);
    bottom: 110%;
  }

  .purchase-policy-scope .policy-tooltip p {
    font-size: 11px;
    line-height: 1.35;
  }

  .purchase-policy-scope .policy-tooltip strong {
    font-size: 12px;
  }

}

/*@media (max-width: 768px) {
  .tooltip-box,
  .purchase-policy-scope .policy-tooltip {
    display: none;
  }
}*/

@media (max-width: 768px) {

  .right-panel-green {
    margin: 16px auto !important;   /* 👈 center */
    width: 94%;
    max-width: 420px;

    float: none !important;
    position: relative;
    left: auto;
    right: auto;
  }

}

@media (max-width: 768px) {

  /* smaller tooltip only for truck */
  .tooltip-small {
    width: 150px !important;
    max-width: 75vw !important;
    padding: 8px 10px !important;
  }

  .tooltip-small .tip-title {
    font-size: 11px;
  }

  .tooltip-small p {
    font-size: 11px;
    line-height: 1.3;
  }

}

/* Sticky product header */
.product-sticky-header {
  position: sticky;
  top: 56px;                 /* main header height-ku adjust pannunga */
  z-index: 50;

  
  /*padding: 10px;
  padding-left:5px;*/
  margin-left:-5px;

  /*border-bottom: 1px solid #dbeac3;*/
  /*box-shadow: 0 2px 6px rgba(0,0,0,0.08);*/
}

/* Product name text */
.product-sticky-header .product-name {
  font-size: 17px;
  font-weight: 600;
  color: #1f4d15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* long name truncate */
}

@media (max-width: 768px) {

  .product-sticky-header {
    top: 48px;              /* mobile header height */
    padding: 8px 12px;
  }

  .product-sticky-header .product-name {
    font-size: 14px;
  }

}

.home-style-note {
  background: #e0f1b9;
  border-left: 4px solid #7bb343;
  border-radius: 10px;

  padding: 10px 12px;
  margin-bottom: 5px;

  font-size: 12px;
  line-height: 1.5;
  color: black;
}