/* =========================================================
   TASG Single Product CSS
   Cleaned + De-duplicated
   ========================================================= */

/* ---------- Basics ---------- */
.product_title.entry-title{
  font-size: 20px !important;
}

.isb_sale_badge.isb_special.isb_special_arrow.isb_marine.isb_left{
  margin-top: 2.5em;
}

/* =========================================================
   Typography + price line tweaks
   ========================================================= */

@media (min-width: 768px){

  .custom-loop-text,
  .price,
  .price *,
  .wc-gzd-additional-info,
  .delivery-time-inner{
    font-size: 11px;
  }

  body.woo_extensions_present #content div.product div.summary,
  body.woo_extensions_present div.product div.summary,
  body.woo_extensions_present div.product div.images,
  body.woo_extensions_present #content div.product div.images{
    margin-bottom: 0 !important;
  }

  .wc-gzd-additional-info,
  .delivery-time-inner{
    text-align: center;
  }

  .price{
    text-align: right;
  }

  .custom-loop-text{
    padding: 0 !important;
  }

  /* Hide the raw "/" text node in price line, keep only element text visible */
  .single-product div.product .summary.entry-summary p.price{
    font-size: 0 !important;
    line-height: 1.2 !important;
  }

  .single-product div.product .summary.entry-summary p.price del,
  .single-product div.product .summary.entry-summary p.price ins,
  .single-product div.product .summary.entry-summary p.price .woocommerce-Price-amount,
  .single-product div.product .summary.entry-summary p.price .woocommerce-Price-currencySymbol,
  .single-product div.product .summary.entry-summary p.price > span{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 768px){
  .custom-loop-text,
  .price,
  .price *{
    font-size: 18px;
    text-align: center !important;
  }
.my-atc-gz * {
font-size: 10px !important;}
}

/* =========================================================
   Optional summary layout
   Keeps ".custom-loop-text" on the right of the price block
   (Only affects direct children of summary)
   ========================================================= */

.single-product .summary.entry-summary > .custom-loop-text{
  float: right;
  max-width: 42%;
  text-align: right;
  white-space: nowrap;

  padding-left: 16px;
  margin-left: 16px;
  border-left: 2px solid rgba(0,0,0,0.25);
  margin-right: 20%;
}

.single-product .summary.entry-summary > p.price,
.single-product .summary.entry-summary > p.price.price-unit{
  display: block;
  margin: 0;
  line-height: 1.2;
}

.single-product .summary.entry-summary > p.price.price-unit{
  margin-top: 6px;
}

.single-product .summary.entry-summary > .wc-cost-per-day,
.single-product .summary.entry-summary > .legal-price-info,
.single-product .summary.entry-summary > p.delivery-time-info,
.single-product .summary.entry-summary > form.cart{
  clear: both;
}

@media (max-width: 768px){
  .single-product .summary.entry-summary > .custom-loop-text{
    float: none;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    border-left: 0;
    padding-left: 0;
    margin: 10px 0 0;
  }
}

/* =========================================================
   Add to cart: generic
   (Only for the custom wrapped layout: form.cart.my-atc-form)
   ========================================================= */

form.cart.my-atc-form{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Ensure wrapper rows are full width blocks */
.my-atc-row-wrap,
.my-atc-cpd-wrap,
.my-atc-button-wrap{
  width: 100%;
  display: block;
  margin: 0;
}

/* =========================================================
   Row 1 layout: qty + side
   side contains: price, custom, gz
   ========================================================= */

form.cart.my-atc-form .my-atc-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* Quantity column sizing */
form.cart.my-atc-form .my-atc-qty{
  flex: 0 0 90px !important;
  width: 90px !important;
  max-width: 90px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill theme min sizing */
form.cart.my-atc-form .quantity{
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Input */
form.cart.my-atc-form .quantity input.qty{
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 22px 0 8px !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
}

/* Arrows area */
form.cart.my-atc-form .quantity .q_inc,
form.cart.my-atc-form .quantity .q_dec{
  width: 22px !important;
}

/* Remove giant spinner reserve */
form.cart.my-atc-form input[type=number]{
  -moz-appearance: textfield;
}
form.cart.my-atc-form input[type=number]::-webkit-outer-spin-button,
form.cart.my-atc-form input[type=number]::-webkit-inner-spin-button{
  margin: 0;
}

/* Side column takes remaining space */
form.cart.my-atc-form .my-atc-side{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;          /* enables gz to be on its own row */
  gap: 0 !important;
  align-items: stretch !important;
}

/* --- Row 1 inside side: PRICE (left) + CUSTOM (right) --- */
form.cart.my-atc-form .my-atc-price{
  flex: 0 0 50% !important;
  width: 50% !important;
  order: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  padding-right: 14px !important;
  padding-left: 0 !important;

  text-align: left !important;

  border-right: 2px solid rgba(0,0,0,0.5) !important; /* divider between */
  border-left: 0 !important;
}

form.cart.my-atc-form .my-atc-custom{
  flex: 0 0 50% !important;
  width: 50% !important;
  order: 2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  box-sizing: border-box !important;
  padding-left: 14px !important;
  padding-right: 0 !important;

  text-align: left !important;
  margin-top: 0 !important;
}

/* Price spacing */
form.cart.my-atc-form .my-atc-price .price{
  margin: 0 !important;
  line-height: 1.2 !important;
}

form.cart.my-atc-form .my-atc-price .wc-gzd-additional-info,
form.cart.my-atc-form .my-atc-price .price-unit,
form.cart.my-atc-form .my-atc-price .wc-gzd-additional-info-loop{
  margin: 6px 0 0 0 !important;
}

/* Make price bold/bigger only inside the atc block */
form.cart.my-atc-form .my-atc-price *{
  font-size: 16px !important;
  font-weight: 700;
}

/* --- Row 2 inside side: GZ full width --- */
form.cart.my-atc-form .my-atc-gz{
  flex: 0 0 100% !important;
  width: 100% !important;
  order: 3 !important;

  margin-top: 8px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

form.cart.my-atc-form .my-atc-gz .price,
form.cart.my-atc-form .my-atc-gz p{
  margin: 0 !important;
  text-align: center !important;
}

/* =========================================================
   Row 2: cost-per-day
   ========================================================= */

.wc-cost-per-day{
  margin: 0 !important;
}

.my-atc-cpd-wrap *{
  text-align: left !important;
}

/* Theme-specific: sometimes this one has extra bottom gap */
.product p.wc-gzd-additional-info{
  margin-bottom: 0;
}

/* =========================================================
   Row 3: button
   ========================================================= */

form.cart.my-atc-form .my-atc-button{
  display: block;
  width: 100%;
  padding: 16px 18px;
  font-size: 16px;
}

/* =========================================================
   Mobile behavior
   Keep gz separate, stack price and custom
   ========================================================= */

@media (max-width: 520px){

  form.cart.my-atc-form .my-atc-row{
    flex-wrap: wrap !important;
  }

  form.cart.my-atc-form .my-atc-qty{
    flex: 0 0 90px !important;
  }

  form.cart.my-atc-form .my-atc-side{
    flex: 1 1 100% !important;
  }

  form.cart.my-atc-form .my-atc-price,
  form.cart.my-atc-form .my-atc-custom{
    flex: 0 0 100% !important;
    width: 100% !important;
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  form.cart.my-atc-form .my-atc-custom{
    margin-top: 10px !important;
  }
}

/* =========================================================
   Table styles (ttable)
   ========================================================= */

.ttable{
  border: 1px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin: 20px auto;
  max-width: 1000px;
  font-family: inherit;
}

.trow{
  display: grid;
  grid-template-columns: 1fr 2fr; /* left 1/3 - right 2/3 */
  border-bottom: 1px solid #eee;
}

.trow:last-child{
  border-bottom: none;
}

.tcell{
  padding: 10px 10px;
  line-height: 1.5;
  color: #6f7275;
  border-right: 1px solid #eee;
  word-break: normal;
  background: #fff;
}

.trow .tcell:nth-child(2){
  border-right: none;
}

/* Header row */
.trow.theader{
  grid-template-columns: 1fr;
}

.trow.theader .tcell{
  background: linear-gradient(135deg,#dab89e,#a78c7b) !important;
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 16px;
  border-right: none;
}

/* Single-cell rows */
.trow > .tcell:only-child{
  grid-column: 1 / -1;
  border-right: none;
  background: #fafafa;
  font-weight: 600;
  color: #7a7d80;
}

/* Mobile table */
@media (max-width: 768px){
  .trow{
    grid-template-columns: 1fr;
  }

  .tcell{
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid #eee;
  }

  .trow .tcell:last-child{
    border-bottom: none;
  }

  .trow.theader .tcell{
    border-bottom: none;
  }
}

/* =========================================================
   FIX: Keep price + "180 Kapseln" compact + centered on resize
   (override the 50/50 flex that causes huge gaps)
   ========================================================= */

form.cart.my-atc-form{
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center the whole first row so it doesn't stretch ugly */
form.cart.my-atc-form .my-atc-row{
  justify-content: center !important;
}

/* IMPORTANT: Replace the side layout with GRID (auto columns) */
form.cart.my-atc-form .my-atc-side{
  flex: 0 1 auto !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: auto auto;
  align-items: center !important;

  column-gap: 14px;
  row-gap: 8px;

  justify-content: center !important;  /* keeps it compact + centered */
}

/* Price block: no more 50% width */
form.cart.my-atc-form .my-atc-price{
  width: auto !important;
  flex: none !important;

  padding-right: 14px !important;
  padding-left: 0 !important;

  border-right: 2px solid rgba(0,0,0,0.5) !important;
  border-left: 0 !important;

  text-align: left !important;
  display: block !important;
}

/* Custom block: no more 50% width */
form.cart.my-atc-form .my-atc-custom{
  width: auto !important;
  flex: none !important;

  padding-left: 14px !important;
  padding-right: 0 !important;

  text-align: left !important;
  margin-top: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* GZ line always full width under them */
form.cart.my-atc-form .my-atc-gz{
  width: 100% !important;
  grid-column: 1 / -1 !important;

  margin-top: 0 !important;
  text-align: center !important;
}

/* Make sure the qty + side row stays visually tight */
form.cart.my-atc-form .my-atc-qty{
  flex: 0 0 90px !important;
}

/* --- Mobile: keep your stacking behavior --- */
@media (max-width: 520px){
  form.cart.my-atc-form{
    max-width: 100%;
  }

  form.cart.my-atc-form .my-atc-row{
    justify-content: flex-start !important;
  }

  form.cart.my-atc-form .my-atc-side{
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }

  form.cart.my-atc-form .my-atc-price{
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  form.cart.my-atc-form .my-atc-custom{
    padding-left: 0 !important;
  }

  form.cart.my-atc-form .my-atc-gz{
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   HARD FIX: shrink-wrap the whole ATC form to Row width
   so CPD + button become the same width too
   ========================================================= */

.single-product div.product .summary.entry-summary form.cart.my-atc-form{
  display: table !important;   /* shrink-wrap like fit-content */
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* kill previous flex on the form (from earlier rules) */
  flex-direction: initial !important;
  align-items: initial !important;
}

/* make all rows follow the form width */
.single-product div.product .summary.entry-summary form.cart.my-atc-form .my-atc-row-wrap,
.single-product div.product .summary.entry-summary form.cart.my-atc-form .my-atc-cpd-wrap,
.single-product div.product .summary.entry-summary form.cart.my-atc-form .my-atc-button-wrap{
  width: 100% !important;
}

/* button equals the form width, not full page */
.single-product div.product .summary.entry-summary form.cart.my-atc-form .my-atc-button{
  width: 100% !important;
  display: block !important;
}

/* keep the lower text aligned nicely inside that compact block */
.single-product div.product .summary.entry-summary form.cart.my-atc-form .my-atc-cpd-wrap,
.single-product div.product .summary.entry-summary form.cart.my-atc-form .my-atc-cpd-wrap *{
  text-align: left !important;
}


/* =========================================================
   Single product gallery badge (top-right)
   ========================================================= */

/* Gallery as positioning context */
.single-product .woocommerce-product-gallery{
  position: relative;
}

/* Circular badge on single product gallery */
.single-product .woocommerce-product-gallery > .wc-badge-note{
  position: absolute;
  top: 14px;
  right: auto;  
  left: 14px;  /* top-left */
  z-index: 999;

  width: 70px;
  height: 70px;

  background: #DAB89E;
  color: #ffffff;

  border-radius: 50%;

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

  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;

  padding: 12px;
  box-sizing: border-box;

  word-break: break-word;
  overflow-wrap: break-word;

  box-shadow: 0 8px 18px rgba(0,0,0,0.18);

  pointer-events: none;
}

@media (max-width: 520px){
  .single-product .woocommerce-product-gallery > .wc-badge-note{
    width: 72px;
    height: 72px;
    font-size: 11px;
    padding: 10px;
    top: 10px;
    right: 10px;
  }
}




/* here */

/* =========================================
   TASG: Only weight + color (nothing else)
   ========================================= */

/* Global */
.wc-cost-per-day,
.wc-cost-per-day *{
  font-weight: 800 !important;
  color: #000 !important;
}

/* Extra force for single product ATC form */
.single-product .summary.entry-summary form.cart.my-atc-form .my-atc-cpd-wrap .wc-cost-per-day,
.single-product .summary.entry-summary form.cart.my-atc-form .my-atc-cpd-wrap .wc-cost-per-day *{
  font-weight: 800 !important;
  color: #000 !important;
}