/* TinyFriends — WooCommerce styles */

/* ---------- Product cards ---------- */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products li.product {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

.tf-product-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius);
  overflow: hidden;
  box-shadow: var(--tf-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tf-product-card:hover { transform: translateY(-6px); box-shadow: var(--tf-shadow-lg); }

.tf-product-media { position: relative; overflow: hidden; }
.tf-product-img-link { display: block; }
.tf-product-media img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  transition: transform .4s ease;
}
.tf-product-card:hover .tf-product-media img { transform: scale(1.06); }

.tf-discount-chip {
  background: var(--tf-accent); color: #fff; font-weight: 800; font-size: 12.5px;
  padding: 3px 10px; border-radius: 999px; line-height: 1.5; display: inline-block;
  box-shadow: 0 4px 12px rgba(166, 91, 47, .3);
}
.tf-discount-chip--lg { font-size: 14px; padding: 5px 14px; }
.tf-single-summary .tf-discount-chip--lg { margin-bottom: 14px; }

.tf-product-add {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%) translateY(70px);
  opacity: 0; transition: all .3s ease; z-index: 2; width: max-content; max-width: 90%;
}
.tf-product-card:hover .tf-product-add,
.tf-product-card:focus-within .tf-product-add { transform: translateX(-50%) translateY(0); opacity: 1; }

.tf-product-add a.button,
.tf-product-add .added_to_cart {
  background: var(--tf-secondary) !important;
  color: var(--tf-ink) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(139, 94, 60, .35);
  font-size: 14.5px !important;
  white-space: nowrap;
}
.tf-product-add a.button:hover { background: #d3ba92 !important; transform: translateY(-2px); }
.tf-product-add a.added { display: none; }

.tf-product-title {
  font-family: var(--tf-heading-font);
  font-size: 17.5px; margin: 16px 18px 4px; line-height: 1.35;
}
.tf-product-title a { color: var(--tf-ink); }
.tf-product-title a:hover { color: var(--tf-primary); }

.tf-product-price {
  margin: 0 18px 18px; font-family: var(--tf-heading-font);
  font-weight: 800; font-size: 18px; color: var(--tf-primary-dark);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.tf-product-price del { color: var(--tf-ink-soft); font-size: 15px; font-weight: 600; margin-right: 6px; }
.tf-product-price ins { text-decoration: none; color: var(--tf-accent); }

/* ---------- Shop toolbar ---------- */
.woocommerce .woocommerce-result-count {
  color: var(--tf-ink-soft); font-size: 15px; margin-bottom: 18px; float: left;
}
.woocommerce .woocommerce-ordering { float: right; margin: 0 0 18px; }
.woocommerce .woocommerce-ordering select {
  padding: 10px 36px 10px 14px; border-radius: 999px; cursor: pointer;
  font-size: 15px; width: auto;
}
.woocommerce .woocommerce-ordering::after { display: none; }

.tf-wc-container { padding-top: 46px; padding-bottom: 70px; }
.tf-page-header--shop { margin-bottom: 0; }
.tf-page-header .woocommerce-breadcrumb {
  margin-top: 8px; color: var(--tf-ink-soft); font-size: 15px;
}
.tf-page-header .woocommerce-breadcrumb a { color: var(--tf-primary-dark); font-weight: 700; }

/* ---------- Buttons (WooCommerce) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt {
  background: var(--tf-primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  border: none !important;
  font-family: var(--tf-body-font) !important;
  font-size: 16px !important;
  transition: all .2s ease !important;
  line-height: 1.4 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--tf-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ---------- Single product ---------- */
.tf-single-product { padding: 0 0 70px; }

.tf-single-top { padding-top: 18px; }
.tf-single-top .woocommerce-breadcrumb { margin: 0; color: var(--tf-ink-soft); font-size: 15.5px; }
.tf-single-top .woocommerce-breadcrumb a { color: var(--tf-primary-dark); font-weight: 700; }

.tf-single-card {
  background: var(--tf-white); border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  padding: clamp(18px, 3.5vw, 36px);
  margin-top: 22px;
}

.tf-single-layout {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(24px, 4vw, 44px);
}
.tf-single-gallery { flex: 0 0 400px; max-width: 400px; min-width: 0; }
.tf-single-summary { flex: 1 1 380px; min-width: 0; }

.tf-single-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; opacity: 1 !important; }
.tf-single-gallery .woocommerce-product-gallery__wrapper { border-radius: 16px; overflow: hidden; }
.tf-single-gallery .woocommerce-product-gallery__image img { border-radius: 16px; }
.tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs li { width: 100% !important; float: none !important; }
.tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: 0; border: none; display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 1/1; transition: opacity .2s ease;
}
.tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: .85; }
.tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { outline: 3px solid var(--tf-primary); outline-offset: -3px; }

.tf-single-summary .product_title { font-size: clamp(25px, 3.2vw, 36px); margin-bottom: 8px; }
.tf-single-summary .price {
  font-family: var(--tf-heading-font); font-weight: 800; font-size: 30px;
  color: var(--tf-primary-dark); margin: 8px 0 16px;
}
.tf-single-summary .price del { color: var(--tf-ink-soft); font-size: 19px; font-weight: 600; }
.tf-single-summary .price ins { text-decoration: none; color: var(--tf-accent); }
.tf-single-summary .woocommerce-product-details__short-description {
  color: var(--tf-ink-soft); font-size: 17px; line-height: 1.8; margin-bottom: 4px;
}

.tf-single-summary form.cart {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 22px 0; padding: 16px; background: var(--tf-bg); border-radius: 16px;
}
.tf-single-summary .quantity .qty {
  width: 90px; padding: 12px; border-radius: 999px; text-align: center;
  font-weight: 800; font-size: 17px; background: var(--tf-white);
}
.tf-single-summary .quantity label { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.tf-single-summary .single_add_to_cart_button { flex: 1; min-width: 220px; }

/* Variation form — i njëtrajtshëm me pjesën tjetër */
.tf-single-summary .variations_form { margin: 0; }
.tf-single-summary table.variations {
  width: 100%; border: none; margin: 0 0 16px; background: none;
}
.tf-single-summary table.variations tr { display: flex; flex-direction: column; gap: 6px; }
.tf-single-summary table.variations td { display: block; border: none; padding: 0; background: none; }
.tf-single-summary table.variations td.label { vertical-align: top; }
.tf-single-summary table.variations td.label label {
  font-family: var(--tf-body-font); font-weight: 800; font-size: 16px;
  color: var(--tf-ink); line-height: 1.4;
}
.tf-single-summary table.variations td.value select {
  width: 100%; max-width: none; padding: 12px 16px;
  border: 2px solid #e6dccb; border-radius: 12px; background: var(--tf-white);
  font-family: var(--tf-body-font); font-size: 16px; color: var(--tf-ink); cursor: pointer;
}
.tf-single-summary table.variations td.value select:focus { border-color: var(--tf-primary); }
.tf-single-summary .reset_variations { font-family: var(--tf-body-font); font-size: 14px; margin-left: 10px; }
.tf-single-summary .woocommerce-variation-price {
  font-family: var(--tf-heading-font); font-size: 22px; font-weight: 800;
  color: var(--tf-primary-dark); margin: 0 0 10px;
}
.tf-single-summary .woocommerce-variation-price .price { font-size: inherit; margin: 0; }
.tf-single-summary .woocommerce-variation-availability { font-family: var(--tf-body-font); font-size: 15px; color: var(--tf-ink-soft); margin-bottom: 10px; }

/* Short description — tekst i njëtrajtshëm */
.tf-single-summary .woocommerce-product-details__short-description p { margin-bottom: 10px; }
.tf-single-summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.tf-single-summary .woocommerce-product-details__short-description h1,
.tf-single-summary .woocommerce-product-details__short-description h2,
.tf-single-summary .woocommerce-product-details__short-description h3,
.tf-single-summary .woocommerce-product-details__short-description h4,
.tf-single-summary .woocommerce-product-details__short-description h5,
.tf-single-summary .woocommerce-product-details__short-description h6 {
  font-family: var(--tf-body-font); font-size: 17px; font-weight: 400;
  line-height: 1.8; color: var(--tf-ink-soft); margin: 0 0 10px;
}

.tf-single-summary .product_meta {
  background: var(--tf-primary-soft); border-radius: 14px; padding: 12px 16px;
  font-size: 14px; color: var(--tf-ink-soft); line-height: 1.8;
  display: flex; flex-direction: column; gap: 3px;
}
.tf-single-summary .product_meta .sku_wrapper,
.tf-single-summary .product_meta .posted_in { display: block; }
.tf-single-summary .product_meta a { font-weight: 700; color: var(--tf-primary-dark); }

/* ---------- Details (tabs + cards) ---------- */
.tf-single-details { margin-top: 36px; }
.woocommerce-tabs { display: block; }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;
  padding: 0 !important; margin: 0 0 20px !important;
  border: none !important;
}
.woocommerce-tabs ul.tabs li {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
  display: block; padding: 11px 24px !important; font-weight: 800 !important; font-size: 15.5px !important;
  color: var(--tf-ink-soft) !important; background: var(--tf-white);
  border-radius: 999px !important; box-shadow: var(--tf-shadow);
  border: none !important; transition: all .2s ease;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--tf-primary-dark) !important; }
.woocommerce-tabs ul.tabs li.active a { background: var(--tf-primary); color: #fff !important; }

.woocommerce-tabs .panel {
  background: var(--tf-white); border-radius: var(--tf-radius);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--tf-shadow);
  text-align: left !important;
}
.woocommerce-tabs .panel > h2:first-child { display: none; }

/* Detail typography */
.woocommerce-tabs .panel > :first-child { margin-top: 0; }
.woocommerce-tabs .panel p { line-height: 1.85; color: var(--tf-ink-soft); margin-bottom: 1.1em; }
.woocommerce-tabs .panel h1, .woocommerce-tabs .panel h2, .woocommerce-tabs .panel h3 {
  margin: 1.3em 0 .5em; font-size: 21px;
}
.woocommerce-tabs .panel ul, .woocommerce-tabs .panel ol { padding-left: 22px; margin-bottom: 1.2em; color: var(--tf-ink-soft); }
.woocommerce-tabs .panel li { margin-bottom: 7px; }

/* Attributes table — me gjerësi të plotë, pa hapësira boshe */
.woocommerce-tabs .panel table.shop_attributes {
  border-collapse: separate; border-spacing: 0; width: 100%; max-width: none;
  margin: 0; table-layout: fixed;
  border: 1px solid #eee5d6; border-radius: 14px; overflow: hidden;
}
.woocommerce-tabs .panel table.shop_attributes th,
.woocommerce-tabs .panel table.shop_attributes td {
  border: none; border-bottom: 1px solid #eee5d6; padding: 13px 20px;
  text-align: left !important; font-size: 15.5px; background: var(--tf-white);
}
.woocommerce-tabs .panel table.shop_attributes tr:last-child th,
.woocommerce-tabs .panel table.shop_attributes tr:last-child td { border-bottom: none; }
.woocommerce-tabs .panel table.shop_attributes th {
  background: var(--tf-primary-soft); color: var(--tf-ink); font-weight: 700;
  width: 170px; font-size: 15.5px; text-align: left !important;
}
.woocommerce-tabs .panel table.shop_attributes td { text-align: left !important; color: var(--tf-ink); }
.woocommerce-tabs .panel table.shop_attributes td p { margin: 0; color: var(--tf-ink); }

/* Reviews — forma me gjerësi të plotë, pa hapësira boshe */
.woocommerce-Reviews-title { font-size: 20px; margin-bottom: 10px; }
.woocommerce-noreviews { color: var(--tf-ink-soft); }
#reviews #comments { float: none !important; width: 100% !important; }
#reviews #comments ol.commentlist { padding: 0; list-style: none; }
#reviews #comments ol.commentlist li {
  padding: 18px; border: 1px solid #eee5d6; border-radius: 14px;
  margin-bottom: 14px; background: var(--tf-bg);
}
#reviews #comments ol.commentlist li .description p { margin: 8px 0 0; color: var(--tf-ink-soft); }

#reviews #review_form_wrapper, #reviews #review_form, #reviews .comment-respond {
  float: none !important; width: 100% !important; margin-top: 18px;
}
#reviews .comment-reply-title {
  display: block; font-family: var(--tf-heading-font); font-weight: 700;
  font-size: 19px; color: var(--tf-ink); margin-bottom: 14px;
}
#reviews #commentform { width: 100%; max-width: none; }
#reviews #commentform label {
  display: block; font-weight: 800; font-size: 15.5px;
  color: var(--tf-ink); margin-bottom: 6px;
}
#reviews #commentform .comment-form-rating { margin-bottom: 16px; }
#reviews #commentform .comment-form-rating select {
  width: 100%; max-width: 340px; padding: 10px 14px;
  border: 2px solid #e6dccb; border-radius: 12px; background: var(--tf-white);
  font-family: var(--tf-body-font); font-size: 15.5px; color: var(--tf-ink);
}
#reviews #commentform .comment-form-comment { margin-bottom: 16px; }
#reviews #commentform textarea {
  width: 100% !important; max-width: none; height: 150px;
  border: 2px solid #e6dccb; border-radius: 12px; padding: 12px 16px;
  font-family: var(--tf-body-font); font-size: 16px; color: var(--tf-ink);
  background: var(--tf-white); outline: none;
}
#reviews #commentform textarea:focus { border-color: var(--tf-primary); }
#reviews #commentform .form-submit { margin: 0; }
#reviews #commentform .form-submit input.submit {
  background: var(--tf-primary); color: #fff; border: none; border-radius: 999px;
  padding: 12px 32px; font-weight: 800; font-size: 16px;
  font-family: var(--tf-body-font); cursor: pointer; transition: all .2s ease;
}
#reviews #commentform .form-submit input.submit:hover { background: var(--tf-primary-dark); }

/* ---------- Related / upsells ---------- */
.woocommerce .related.products, .woocommerce .upsells.products {
  margin-top: 60px;
}
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2 {
  font-size: 28px; text-align: center; margin-bottom: 34px;
}

/* ---------- Cart ---------- */
.woocommerce-cart .tf-wc-main { padding: 50px 0 70px; }
.woocommerce-cart table.cart {
  border-radius: var(--tf-radius); overflow: hidden; border: none !important;
  box-shadow: var(--tf-shadow);
}
.woocommerce-cart table.cart th { background: var(--tf-primary-soft) !important; color: var(--tf-ink); font-weight: 800; }
.woocommerce-cart table.cart td { border-top-color: #eee5d6 !important; }
.woocommerce-cart table.cart td.product-remove a.remove {
  width: 26px; height: 26px; line-height: 24px; border-radius: 999px;
  background: var(--tf-accent); color: #fff !important; font-size: 15px;
}
.woocommerce-cart .coupon input#coupon_code { width: auto; min-width: 160px; border-radius: 999px; }

/* ---------- Checkout ---------- */
.woocommerce-checkout .tf-wc-main { padding: 50px 0 70px; }
.woocommerce-checkout form.checkout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start;
}
.woocommerce-checkout #customer_details { background: var(--tf-white); border-radius: var(--tf-radius); box-shadow: var(--tf-shadow); padding: 30px; }
.woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { background: var(--tf-white); border-radius: var(--tf-radius); box-shadow: var(--tf-shadow); padding: 30px; }
.woocommerce-checkout #order_review_heading { margin-bottom: 0; padding-bottom: 8px; font-size: 22px; }
.woocommerce-checkout h3 { font-size: 22px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th { background: var(--tf-primary-soft); }

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--tf-radius-sm) !important;
  border: none !important;
  box-shadow: var(--tf-shadow);
  background: var(--tf-white) !important;
  border-left: 6px solid var(--tf-secondary) !important;
  font-weight: 600;
}
.woocommerce-message { border-left-color: #a67b5b !important; }
.woocommerce-error { border-left-color: var(--tf-accent) !important; }
.woocommerce-message .button, .woocommerce-info .button {
  background: var(--tf-primary) !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 700 !important;
}

/* ---------- Star ratings ---------- */
.woocommerce .star-rating span::before { color: #c99347; }

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination ul {
  border: none !important; display: flex; gap: 8px; justify-content: center; margin-top: 40px;
}
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px !important; background: var(--tf-white) !important;
  color: var(--tf-ink) !important; font-weight: 800; box-shadow: var(--tf-shadow);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--tf-primary) !important; color: #fff !important;
}

/* ---------- Cart/checkout widgets in header (mini cart off) ---------- */
.tf-cart .tf-cart-count { display: inline-flex; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Related/upsells: horizontal swipe on mobile */
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px;
    padding-bottom: 14px; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .woocommerce .related.products ul.products::-webkit-scrollbar,
  .woocommerce .upsells.products ul.products::-webkit-scrollbar { display: none; }
  .woocommerce .related.products ul.products li.product,
  .woocommerce .upsells.products ul.products li.product {
    flex: 0 0 72vw; max-width: 270px; scroll-snap-align: start;
  }

  .tf-single-layout { gap: 26px; }
  .tf-single-gallery { flex: 0 0 100%; max-width: 100%; }
  .tf-single-summary { flex: 0 0 100%; }
  .tf-single-card { padding: 16px; }
  .tf-single-details { margin-top: 26px; }
  .woocommerce-tabs ul.tabs li a { padding: 9px 18px !important; font-size: 14.5px !important; }
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .tf-product-add { position: static; transform: none; opacity: 1; margin: 12px 14px 0; width: auto; }
  .tf-product-add a.button { width: 100%; text-align: center; display: block; }
  .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; }
}
@media (max-width: 480px) {
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tf-product-title { font-size: 15px; margin: 12px 12px 4px; }
  .tf-product-price { margin: 0 12px 14px; font-size: 16px; }
  .tf-single-summary .single_add_to_cart_button { width: 100%; }
  .tf-single-gallery .woocommerce-product-gallery .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); gap: 0; }
}
