:root {
    --text-normal: 16px;
    --text-large: 24px;
    --color-main: #3b7a57;
    --radius-large: 24px;
    --radius-medium: 20px;
}

.eshop-summary {
    position:absolute;
    left:40%; transform:translateX(-50%);
    font-size:24px;
    font-weight:600;
    color:#2f5d50;
    white-space:nowrap;
}

.eshop-product {
    background: #e9e9e9;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-large);
    padding: 10px 0px;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.eshop-title {
    font-size: var(--text-large);
    padding-left: 20px;
    padding-bottom: 10px;
    font-weight: 800;
}

.eshop-gallery {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    margin-bottom: 24px;
}
.eshop-gallery img {
    width: 220px;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-medium);
    border: 2px solid var(--color-main);
    flex-shrink: 0;
}


.eshop-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
}
.eshop-description {
    text-align: center;
    font-size: var(--text-normal);
}
.eshop-price {
    background: var(--color-main);
    color: white;
    font-size: var(--text-large);
    padding: 6px;
    border-radius: 25px;
}


.eshop-variants {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
}
.eshop-variant {
    width: 220px;
    background: #dfe9ea;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-medium);
    padding: 10px;
    text-align: center;
}



.variant-price {
    font-size: var(--text-large);
}

.variant-text {
    font-size: var(--text-normal);
}


.variant-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.variant-controls button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-main);
    color: white;
    font-size: var(--text-large);
    cursor: pointer;
}


@media (max-width: 700px) {
    .eshop-summary {
        position:absolute;
        left:52%; transform:translateX(-50%);
        font-size:16px;
        font-weight:600;
        color:#2f5d50;
        white-space:nowrap;
    }
}


/* OBJEDNAVKA ****************************************************************/
/* Container + card */
.eshop-container {
  max-width: 600px;
  /* min-width:400px; */
  width: 100%;
  margin: 0 auto;
  /* padding:20px 0px; */
}

.eshop-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 6px 18px rgba(20,20,20,0.06);
}

/* Title */
.eshop-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}


/* Form layout */
.eshop-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.row {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.col {
  flex: 1;
  min-width: 0;
}
/* Labels and inputs */
.variant-text {
  display: block;
  font-size: 13px;
  color: #333;
  margin-bottom: 6px;
}
.eshop-field {
  height: 52px;
  border-radius: 22px;
  border: 1px solid #e6e6e6;
  padding: 0 18px;
  font-size: 15px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  max-width: 100%;
}
.eshop-textarea {
  border-radius: 22px;
  border: 1px solid #e6e6e6;
  padding: 14px 18px;
  font-size: 15px;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  background: #fff;
  box-sizing: border-box;
}



/* Actions / submit */
.eshop-actions{ display:flex; justify-content:flex-end; margin-top:6px; }
.eshop-submit{
  background:#2b8a6f;
  color:#fff;
  border:0;
  padding:12px 20px;
  border-radius:22px;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  box-shadow:0 6px 14px rgba(43,138,111,0.18);
}

/* Focus states (only for form controls) */
.eshop-field:focus, .eshop-textarea:focus{
  outline:2px solid rgba(43,138,111,0.12);
  border-color:#2b8a6f;
}





/* LEN pre blok "Zvolený tovar" ako tabuľka */
.eshop-summary-table{
  width:100%;
  max-width:600px;
  display:block;
  overflow-y:auto;
  margin:0 auto 20px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:16px;
  box-sizing:border-box;
  font-family:inherit;
  overflow:hidden;
}

/* caption (title) */
.eshop-summary-table .summary-caption{
  caption-side:top;
  text-align:left;
  font-weight:700;
  font-size:16px;
  padding:12px;
  color:#222;
}

/* head */
.eshop-summary-table thead tr.summary-head{
  background:transparent;
  border-bottom:1px solid #f5f5f5;
}
.eshop-summary-table th{
  font-weight:600;
  color:#6b6b6b;
  font-size:13px;
  padding:10px 12px;
  text-align:left;
}
.th-qty{ width:110px; text-align:center; }
.th-price{ width:140px; text-align:center; }
.th-total{ width:120px; text-align:right; }

/* body rows */
.eshop-summary-table tbody tr.summary-item td {
  padding:10px;
  vertical-align:middle;
  border-bottom:1px solid #f7f7f7;
}
.td-item .td-item-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  /* min-width: 0; */
}
.thumb{ width:64px; height:64px; border-radius:8px; overflow:hidden; background:#f2f2f2; flex:0 0 64px; display:flex; align-items:center; justify-content:center; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-name{ font-weight:700; font-size:14px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-sub{ font-size:12px; color:#6b6b6b; margin-top:4px; }


/* price and total */
.td-price{ text-align:center; font-size:14px; color:#222; }
.td-total{ text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.line-total{ font-weight:700; color:#222; }


/* footer */
.eshop-summary-table tfoot .summary-footer td{ padding:12px; font-weight:700; font-size:15px; border-top:1px solid #f5f5f5; }
.summary-note{ padding:10px 12px; color:#6b6b6b; font-size:13px; }

/* ensure table and form are in normal flow (prevents prekrytie) */
.eshop-summary-table, #eshopOrderForm{
  position:static !important;
  z-index:auto !important;
  clear:both !important;
}



/* responsive adjustments only for this block */
@media (max-width:480px) {
  .row {
    flex-direction: column; 
    gap: 10px; 
  }
  .eshop-actions { 
    justify-content: center; 
  }
  .eshop-summary-table { 
    margin-bottom:16px; 
  }
  .thumb { 
    width: 48px; 
    height: auto; 
    flex: 0 0 48px; 
  }
  .item-name {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }

  .item-sub {
    font-size: 11px;
  }

  .eshop-summary-table th {
    font-size: 11px;
    padding: 4px 2px;
  }

  /* .eshop-summary-table tbody tr.summary-item td {
    padding: 4px 2px;
  } */

  .line-total {
    font-size: 12px;
  }

  .th-qty, .td-qty {
    width: 50px;
    min-width: 50px;
  }
  .th-price, .td-price {
    width: 60px;
    min-width: 60px;
    font-size: 12px;
  }
  .th-total, .td-total { 
    width: 70px; 
    min-width: 70px;
    font-size: 12px;
    
  }
  .eshop-container {
    box-sizing: border-box;
  }

  .eshop-card {
    padding: 16px;
  }

  .row > .col,
  .row > div {
    width: 100% !important;
    min-width: 0;
  }
}